@charset "utf-8";

/* custom property */
:root {
  --mc-black: #000;
  --mc-white: #FFF;
  --mc-yellow: #FF0;
  --mc-blue: #0062C6;
  --mc-orange: #f08300;
  --mc-navy: #0b3190;
  --mc-orange30: rgba(240,131,0,0.30);
}

.noto-sans-jp-500 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.noto-sans-jp-700 {
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

img { width: 100%; }

/* area_title */
.area_title {
  background-color: var(--mc-orange30);
  background-image: url(../../assets/img/bg_1.png);
  background-position: center center;
  margin: 0;
}
.area_title h1 {
	text-align: center;
}
.area_title h1 img {
  vertical-align: top;
}
@media screen and (max-width: 639px) {
  .area_title .inner {
    margin: 0;
  }
}

/* area_lead */
.area_lead {
  background-color: var(--mc-white);
  color: var(--mc-black);
  margin: 0;
  padding: 64px 0;
}
@media screen and (max-width: 639px) {
  .area_lead {
    padding: 8px 0;
  }
}

/* box_lead */
.box_lead {
  background-color: var(--mc-orange);
  color: var(--mc-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
}
.box_lead .box_txt_lead {
  flex-basis: 74%;
}
.box_lead .box_txt_lead p {
  line-height: 1.6em;
}
.box_lead .box_txt_lead .el_txt_lead {
  font-size: 18px;
  margin: 0 0 24px;
}
.box_lead .box_txt_lead .el_credit {
  font-size: 13px;
}
.box_lead .box_prof {
  flex-basis: 24%;
  position: relative;
}
.box_lead .box_prof .box_prof_name {
  position: absolute;
  top: -30%;
  margin: 0;
  padding: 0 8%;
  left: 0px;
}
.box_lead .box_prof .box_prof_img {
  background-color: var(--mc-white);
  border-radius: 50%;
  padding: 8px;
}
.box_lead .box_prof .box_prof_img img {
  border-radius: 50%;
}
@media screen and (max-width: 639px) {
  .box_lead {
    display: block;
    padding: 16px;
  }
  .box_lead .box_txt_lead {
    margin: 0 0 16px;
  }
  .box_lead .box_txt_lead p {
    line-height: 1.6em;
  }
  .box_lead .box_txt_lead .el_txt_lead {
    font-size: 15px;
    margin: 0 0 16px;
  }
  .box_lead .box_txt_lead .el_credit {
    text-align: center;
  }
  .box_lead .box_prof {
    padding: 0 16%;
    position: static;
  }
  .box_lead .box_prof .box_prof_name {
    position: static;
    margin: 0;
    padding: 0 10%;
  }
}

/* area_interview */
.area_interview,
.area_profile {
  background-color: var(--mc-white);
  background-image: url(../../assets/img/bg_2.png);
  background-position: center center;
  color: var(--mc-black);
  margin: 0;
  padding: 64px 0;
}
@media screen and (max-width: 639px) {
  .area_interview,
  .area_profile {
    padding: 32px 0;
  }
}

/* box_interview */
.box_interview,
.box_profile {
  background-color: var(--mc-white);
  box-shadow: 0px 0px 20px var(--mc-orange);
  padding: 48px;
}
.box_interview {
  margin: 0 0 32px;
}
.box_interview h2 {
  color: var(--mc-black);
  font-size: 24px;
  line-height: 1.8em;
  margin: 0 0 24px;
}
.box_interview p {
  font-size: 16px;
  line-height: 1.8em;
}
.box_interview .el_editor {
  margin: 0 0 24px;
}
.box_interview .el_company {
  margin: 0 0 40px;
}
.box_interview p:last-of-type {
  margin: 0;
}
.box_interview .el_editor {
  color: var(--mc-navy);
}
.box_interview .box_img360 {
  margin: 0 auto 40px;
  width: 360px;
}

/* box_profile */
.box_profile h2 {
  color: var(--mc-orange);
  font-size: 16px;
  line-height: 1.8em;
  margin: 0 0 16px;
}
.box_profile p {
  font-size: 14px;
  line-height: 1.6em;
}
.box_profile>p {
  margin: 0 0 24px;
}
.box_profile .box_newwork {
  border: 3px solid var(--mc-orange);
  padding: 0 16px 16px;
}
.box_profile .box_newwork h3 {
  background-color: var(--mc-orange);
  color: var(--mc-white);
  display: inline-block;
  font-size: 16px;
  line-height: 1.6em;
  margin: -8px 0 8px;
  padding: 4px 16px;
  transform: rotate(-5deg);
}
.box_profile .box_newwork .el_txt_series {
  font-size: 16px;
  line-height: 1.6em;
  margin: 0 0 4px;
}
.box_profile .box_newwork .el_txt_series_sub {
  margin: 0 0 4px;
}
.box_profile .box_newwork dl {
  margin: 0 0 16px;
  padding: 16px 0 0;
}
.box_profile .box_newwork dl dt {
  background-color: var(--mc-black);
  color: var(--mc-white);
  display: inline-block;
  font-size: 14px;
  line-height: 1.2em;
  margin: 0 0 4px;
  padding: 0 2px 2px;
}
.box_profile .box_newwork dl dd {
  font-size: 14px;
  line-height: 1.6em;
}
.box_profile .box_newwork .el_link_work {
  text-align: center;
}
.box_profile .box_newwork .el_link_work a {
  background-color: var(--mc-navy);
  box-shadow: 3px 3px 0px rgba(01, 09, 0, 0.25);
  color: var(--mc-yellow);
  display: inline-block;
  font-size: 16px;
  line-height: 1.2em;
  padding: 16px 0;
  text-decoration: none;
  opacity: 1.0;
  width: min(80%, 240px);
}
.box_profile .box_newwork .el_link_work a:hover {
  box-shadow: 0px 0px 0px;
  opacity: 0.6;
}
@media screen and (max-width: 639px) {
  .box_interview,
  .box_profile {
    padding: 24px;
  }
  .box_interview {
    margin: 0 0 32px;
  }
  .box_interview p {
    font-size: 15px;
    line-height: 1.8em;
  }
  .box_interview .box_img360 {
    margin: 0 12% 40px;
    width: auto;
  }
  .box_profile .box_newwork .el_link_work a {
    padding: 16px;
  }
}

/* area_recommend */
.area_recommend {
  background-color: var(--mc-orange);
  background-image: url(../../assets/img/bg_1.png);
  background-position: center center;
  color: var(--mc-black);
  margin: 0;
  padding: 64px 0;
}

/* box_recommend */
.box_recommend {
  background-color: var(--mc-white);
  padding: 8px 48px 48px;
  position: relative;
}
.box_recommend:after {
  position: absolute;
  content: '';
  right: 0px;
  bottom: 0px;
  border-color: #f9cc96 var(--mc-orange) var(--mc-orange);
  border-style: solid;
  border-width: 15px 15px 0 0;
}
.box_recommend h2 {
  margin: -16px 0 24px;
  transform: rotate(-5deg);
  width: 28%;
}
.box_recommend p {
  font-size: 16px;
  line-height: 1.8em;
  margin: 0 0 24px;
}
.box_recommend .box_okadaprof {
  background-color: rgba(240,131,0,0.15);
  padding: 16px;
}
.box_recommend .box_okadaprof h3 {
  font-size: 16px;
  line-height: 1.8em;
  margin: 0 0 8px;
}
.box_recommend .box_okadaprof p {
  font-size: 14px;
  line-height: 1.6em;
  margin: 0;
}
@media screen and (max-width: 959px) and (min-width: 640px) {
  .box_recommend h2 {
    width: 38%;
  }
}
@media screen and (max-width: 639px) {
  .area_recommend {
    margin: 0;
    padding: 32px 0;
  }
  .box_recommend {
    padding: 8px 24px 24px;
  }
  .box_recommend h2 {
    width: 78%;
  }
  .box_recommend p {
    font-size: 15px;
    margin: 0 0 24px;
  }
}

/* area_trial */
.area_trial {
  background-color: var(--mc-white);
  box-shadow: 0px 4px 8px var(--mc-orange);
  margin: 0 0 24px;
  padding: 48px;
}
.box_trial {
  background-color: var(--mc-orange30);
  background-image: url(../../assets/img/bg_1.png);
  background-position: center center;
  padding: 16px;
}
.area_trial p {
  margin: 0 25%;
}
@media screen and (max-width: 639px) {
  .area_trial {
    margin: 0 0 24px;
    padding: 0;
  }
  .area_trial .inner {
    margin: 0;
    padding: 0;
  }
  .box_trial {
    padding: 8px;
  }
  .area_trial p {
    margin: 0 4%;
  }
}