@charset "UTF-8";
/* ==========================================================================//
//
// インタビュー扉ページ
//
// ========================================================================== */
/* interview
---------------------------------------------------------- */
.sec_interview {
  overflow: hidden;
  padding: 30px 0 70px;
}
@media all and (min-width: 751px) {
  .sec_interview {
    padding: 70px 0 100px;
  }
}
.sec_interview .ttl {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}
@media all and (min-width: 751px) {
  .sec_interview .ttl {
    gap: 20px;
    margin-bottom: 70px;
  }
}
.sec_interview .ttl::before, .sec_interview .ttl::after {
  content: "";
  border: 0.5px solid #f7bcc1;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transition: -webkit-transform 0.8s 0.4s;
  transition: -webkit-transform 0.8s 0.4s;
  transition: transform 0.8s 0.4s;
  transition: transform 0.8s 0.4s, -webkit-transform 0.8s 0.4s;
}
.sec_interview .ttl::before {
  -webkit-transform-origin: right;
          transform-origin: right;
}
.sec_interview .ttl::after {
  -webkit-transform-origin: left;
          transform-origin: left;
}
.sec_interview .ttl img {
  width: min(100px, 44%);
}
@media all and (min-width: 751px) {
  .sec_interview .ttl img {
    width: min(168px, 21%);
  }
}
.sec_interview .ttl.fadeUp::before, .sec_interview .ttl.fadeUp::after {
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}
.sec_interview .person_item {
  position: relative;
}
.sec_interview .person_item:not(:last-child) {
  margin-bottom: 60px;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item:not(:last-child) {
    margin-bottom: 120px;
  }
}
.sec_interview .person_item .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
}
.sec_interview .person_item .content .image {
  position: relative;
  z-index: 2;
  width: 90%;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content .image {
    width: 50%;
  }
}
.sec_interview .person_item .content .texts {
  width: 100%;
  background: linear-gradient(120deg, #f5ddcb 0%, #f8d0cf 34.3%, #f7cdd9 64.74%, #f7ccdd 100%);
  border-radius: 0 50px 0 50px;
  padding: 35px 0 24px;
  margin-top: -20px;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content .texts {
    width: 60%;
    border-radius: 0 100px 0 100px;
    padding: 50px 0;
    margin-top: 16%;
  }
}
.sec_interview .person_item .content .name_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid #fff;
  margin-bottom: 18px;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content .name_wrap {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    gap: 26px;
    padding-left: 20px;
    margin-bottom: 38px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  .sec_interview .person_item .content .name_wrap {
    gap: 20px;
  }
}
.sec_interview .person_item .content .name_wrap .number {
  width: 70px;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content .name_wrap .number {
    width: 130px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  .sec_interview .person_item .content .name_wrap .number {
    width: 90px;
  }
}
.sec_interview .person_item .content .name_wrap .name {
  text-align: center;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content .name_wrap .name {
    text-align: left;
    font-size: 16px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  .sec_interview .person_item .content .name_wrap .name {
    font-size: 14px;
  }
}
.sec_interview .person_item .content .name_wrap .name span {
  font-size: 1.8em;
  margin-right: 2px;
}
.sec_interview .person_item .content .copy {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  margin-bottom: 19px;
  margin-inline: auto;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item .content .copy {
    font-size: 20px;
    letter-spacing: 0.1em;
    margin-bottom: 32px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  .sec_interview .person_item .content .copy {
    font-size: 18px;
  }
}
@media all and (min-width: 751px) {
  .sec_interview .person_item:nth-child(odd) .texts {
    margin-left: -10%;
  }
  .sec_interview .person_item:nth-child(odd) .name_wrap {
    padding-left: 20%;
  }
  .sec_interview .person_item:nth-child(even) .content {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
  }
  .sec_interview .person_item:nth-child(even) .texts {
    margin-right: -10%;
  }
  .sec_interview .person_item:nth-child(even) .name_wrap {
    padding-left: 12%;
    padding-right: 18%;
  }
}
.sec_interview .person_item:nth-child(odd)::before {
  position: absolute;
  content: "";
  background-image: url(../../images/interview/bg_hologram01_sp.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  aspect-ratio: 25/13;
  width: 100vw;
  z-index: -1;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item:nth-child(odd)::before {
    background-image: url(../../images/interview/bg_hologram01_pc.jpg);
    aspect-ratio: 233/193;
    width: 48%;
  }
}
.sec_interview .person_item:nth-child(even)::before {
  position: absolute;
  content: "";
  background-image: url(../../images/interview/bg_hologram02_sp.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  aspect-ratio: 25/13;
  width: 100vw;
  z-index: -1;
}
@media all and (min-width: 751px) {
  .sec_interview .person_item:nth-child(even)::before {
    background-image: url(../../images/interview/bg_hologram02_pc.jpg);
    aspect-ratio: 700/368;
    width: 60%;
  }
}
.sec_interview .person_item:nth-child(even) .texts {
  background: linear-gradient(-20deg, #f5ddcb 0%, #f8d0cf 34.3%, #f7cdd9 64.74%, #f7ccdd 100%);
}

/* crosstalk
---------------------------------------------------------- */
.sec_crosstalk {
  background-image: url(../../images/interview/bg_hologram.webp);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 15px 0 45px;
}
@media all and (min-width: 751px) {
  .sec_crosstalk {
    padding: 60px 0 76px;
  }
}
@media all and (min-width: 751px) {
  .sec_crosstalk .content {
    display: -ms-grid;
    display: grid;
        grid-template-areas: "left right_top" "left right_mid" "left right_btm";
    -ms-grid-columns: 54% 40px 1fr;
    grid-template-columns: 54% 1fr;
    -ms-grid-rows: auto;
    grid-template-rows: auto;
    -webkit-column-gap: 40px;
       -moz-column-gap: 40px;
            column-gap: 40px;
  }
  .sec_crosstalk .content .image {
    grid-area: left;
    align-self: flex-start;
  }
  .sec_crosstalk .content .ttl {
    grid-area: right_top;
  }
  .sec_crosstalk .content .copy {
    grid-area: right_mid;
  }
  .sec_crosstalk .content .more_btn {
    grid-area: right_btm;
  }
}
@media all and (min-width: 751px){
  .sec_crosstalk .content .image {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
  }
  .sec_crosstalk .content .ttl {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
  }
  .sec_crosstalk .content .copy {
    -ms-grid-row: 2;
    -ms-grid-column: 3;
  }
  .sec_crosstalk .content .more_btn {
    -ms-grid-row: 3;
    -ms-grid-column: 3;
  }
}
.sec_crosstalk .ttl {
  width: min(400px, 72%);
  margin-inline: auto;
  margin-bottom: 20px;
}
@media all and (min-width: 751px) {
  .sec_crosstalk .ttl {
    width: 90%;
  }
}
@media all and (max-width: 750px) {
  .sec_crosstalk .image {
    margin-inline: calc(50% - 50vw);
  }
}
@media all and (min-width: 751px) {
  .sec_crosstalk .image {
    position: relative;
    z-index: 1;
  }
  .sec_crosstalk .image::before {
    position: absolute;
    content: "";
    bottom: -13px;
    left: -13px;
    width: 100%;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#e1b596), color-stop(21.59%, #e1a496), color-stop(57.33%, #de92b5), color-stop(87.66%, #de95ad), to(#e09b95));
    background: linear-gradient(#e1b596 0%, #e1a496 21.59%, #de92b5 57.33%, #de95ad 87.66%, #e09b95 100%);
    z-index: -1;
  }
}
.sec_crosstalk .copy {
  color: #fff;
  font-weight: 600;
  font-size: 23px;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 25px;
}
@media all and (max-width: 750px) {
  .sec_crosstalk .copy {
    text-indent: -2.5em;
    padding-left: 2.5em;
    margin-top: -22px;
  }
}
@media all and (min-width: 751px) {
  .sec_crosstalk .copy {
    font-size: 32px;
  }
}
@media screen and (min-width: 751px) and (max-width: 999px) {
  .sec_crosstalk .copy {
    font-size: 26px;
  }
}
.sec_crosstalk .copy span {
  background-color: #333333;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  line-height: 1.8;
  padding: 0 0.4em;
}