@charset "utf-8";

/*
============================
Constants
============================
*/

:root {
  --font-gothic: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  --font-serif: "Shippori Mincho", serif;
  --font-rich: "Cormorant", serif;
  --font-zenkaku: "Zen Kaku Gothic New", sans-serif;
  --max_w1: 750;
  --max_w2: 1200;
  --color-navy: #0f3956;
  --color-water: #ebf5f7;
  --color-green: #619c5c;
  --color-pink: #dc389a;
}

.text-green {
  color: var(--color-green);
}

/*
============================
Layout
============================
*/

.talk {
  box-shadow: 0 3px 5px 3px #d9e5ed;
  max-width: 750px;
  line-height: normal;
  margin-inline: auto;

  @media (min-width: 1200px) {
    max-width: 1920px;
  }

  @media (min-width: 1200px) and (max-width: 1299px) {
    zoom: 62.5%;
  }

  @media (min-width: 1300px) and (max-width: 1399px) {
    zoom: 67.5%;
  }

  @media (min-width: 1400px) and (max-width: 1499px) {
    zoom: 72.5%;
  }

  @media (min-width: 1500px) and (max-width: 1549px) {
    zoom: 79%;
  }

  @media (min-width: 1550px) and (max-width: 1599px) {
    zoom: 80%;
  }

  & .inner {
    --bs-gutter-x: var(--sz-30);
    padding-left: var(--bs-gutter-x);
    padding-right: var(--bs-gutter-x);
    margin-left: auto;
    margin-right: auto;

    @media (min-width: 1200px) {
      max-width: 1400px;
      --bs-gutter-x: 0;
    }
  }

  [style*="--w"] {
    width: calc(100vw * var(--w) / var(--container-width));
    margin-left: auto;
    margin-right: auto;
    max-width: calc(1px * var(--w));
  }

  @media (min-width: 1200px) {
    [style*="--w-xl"] {
      width: calc(1px * var(--w-xl));
      max-width: calc(1px * var(--w-xl));
    }
  }

  /*
  ============================
  Header
  ============================
  */

  & .header {
    & .inner {
      padding-top: var(--sz-78);
      padding-bottom: var(--sz-36);
    }
  }

  @media (min-width: 1200px) {
    & .header {
      & .inner {
        padding-top: 88px;
        padding-bottom: 38px;
      }
    }
  }

  /*
  ============================
  FV
  ============================
  */

  & .fv {
    overflow-x: hidden;
  }

  & .page-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--sz-32);
    font-weight: normal;
    line-height: normal;
    position: relative;
    display: flex;
    gap: var(--sz-28);
    flex-direction: column-reverse;
    align-items: center;
    margin-bottom: var(--sz-35);

    &::before {
      content: "";
      width: var(--sz-105);
      height: var(--sz-1);
      display: block;
      background-color: var(--color-navy);
    }
  }

  & .fv__copy {
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--sz-55);
    font-weight: normal;
    margin-bottom: var(--sz-20);
    transform: translateX(0.5em);
    padding-right: 2rem;
  }

  & .fv__desc {
    text-align: center;
    font-family: var(--font-zenkaku);
    font-size: var(--sz-30);
    font-weight: normal;
    line-height: 2.1;
    margin-bottom: var(--sz-50);
  }

  & .cover {
    margin-bottom: unset;
    position: relative;
    padding-bottom: var(--sz-88);

    &::before {
      content: "";
      background-color: #f4f7ff;
      position: absolute;
      bottom: 32px;
      left: calc(-1 * var(--bs-gutter-x));
      width: 100vw;
      height: var(--sz-448);
      z-index: -1;
    }
  }

  & .cover__pic {
    margin-bottom: var(--sz-45);
  }

  & .cover__cap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sz-28);
  }

  & .cover__name {
    font-family: var(--font-serif);
    font-size: var(--sz-42);
    font-weight: normal;

    & rt {
      font-size: var(--sz-22);
      letter-spacing: calc(-1 * var(--sz-3));
      margin-bottom: 0.4em;
    }
  }

  @media (min-width: 1200px) {
    & .page-title {
      font-size: 30px;
      margin-bottom: 30px;

      &::before {
      }
    }

    & .fv__copy {
      font-size: 50px;
      font-weight: 500;
      margin-bottom: 26px;
    }

    & .fv__desc {
      font-size: 26px;
      line-height: 1.92;
      margin-bottom: 47px;
    }

    & .cover {
      padding-bottom: 85px;

      &::before {
        left: -100vw;
        width: 300vw;
        height: 574px;
      }
    }

    & .cover__pic {
      margin-bottom: 60px;
    }

    & .cover__cap {
      gap: 40px;
    }

    & .cover__name {
      font-size: 48px;

      & rt {
        font-size: 25px;
      }
    }
  }

  /*
  ============================
  Dialogue
  ============================
  */
  & .dialogue {
    --mb-p: var(--sz-50);

    & .inner {
      --bs-gutter-x: var(--sz-45);
      padding-top: var(--sz-69);
      padding-bottom: var(--sz-89);
    }

    & h2 {
      border-left: var(--sz-4) solid var(--color-navy);
      position: relative;
      font-family: var(--font-serif);
      font-size: var(--sz-48);
      font-weight: normal;
      padding-block: var(--sz-7);
      padding-left: var(--sz-45);
      line-height: 1.4;
      margin-bottom: var(--sz-25);

      &::before {
        content: "";
        width: var(--sz-1);
        height: 100%;
        background-color: var(--color-navy);
        position: absolute;
        top: 0;
        left: var(--sz-6);
      }
    }
  }

  & .interviewer {
    margin-bottom: var(--sz-35);
    font-size: var(--sz-35);
    font-weight: bold;
    line-height: 1.65;

    &::before {
      content: "";
      height: var(--sz-3);
      width: 1em;
      display: inline-block;
      background-color: var(--color-navy);
      transform: translateY(-0.3em);
      margin-right: 0.5em;
    }
  }

  & .interviewBox {
    font-size: var(--sz-30);
    font-weight: normal;
    line-height: 1.76;
    margin-bottom: var(--sz-35);
  }

  & .interviewee {
    font-size: var(--sz-35);
    font-weight: 500;
    line-height: 1.51;
    margin-right: var(--sz-30);
  }

  @media (min-width: 1200px) {
    & .dialogue {
      --mb-p: 45px;

      & .inner {
        --bs-gutter-x: 170px;
        padding-top: 110px;
        padding-bottom: 110px;
      }

      & h2 {
        border-left-width: 6px;
        font-size: 40px;
        padding-block: 15px;
        padding-left: 25px;
        margin-top: 90px;
        margin-bottom: 35px;

        &::before {
          left: 6px;
        }
      }
    }

    & .interviewer {
      font-size: 32px;
      line-height: normal;
      margin-top: 55px;
      margin-bottom: 30px;
      position: relative;
      padding-left: 130px;

      &::before {
        width: 106px;
        height: 1px;
        position: absolute;
        top: 1em;
        left: 0;
      }
    }

    & .interviewBox {
      font-size: 25px;
      line-height: 1.8;
      margin-bottom: 40px;
      position: relative;
      padding-left: 94px;
    }

    & .interviewee {
      font-size: 30px;
      line-height: 1.5;
      position: absolute;
      top: 0;
      left: 0;
    }
  }

  /*
  ============================
  Line up
  ============================
  */

  & .lineup {
    & .inner {
      padding-top: var(--sz-82);
      padding-bottom: var(--sz-142);
    }
  }

  & .lineup__lead {
    text-align: center;
    font-family: var(--font-serif);
    font-size: var(--sz-40);
    font-weight: normal;
    line-height: 1.75;
    margin-bottom: var(--sz-70);
  }

  & .lineup__heading {
    font-family: var(--font-rich);
    font-size: var(--sz-70);
    font-weight: normal;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--sz-50);
    margin-bottom: var(--sz-68);

    &::before,
    &::after {
      content: "";
      width: var(--sz-160);
      height: 1px;
      background-color: var(--color-navy);
    }
  }

  & .gallery {
    display: flex;
    flex-direction: column;
    --gap: var(--sz-70);
    gap: var(--gap);
  }

  & .product {
    img {
      transition: 0.3s;
    }
    &:hover img {
      filter: opacity(0.75);
    }
  }

  & .product__body {
    padding-top: var(--sz-24);
  }

  & .product__name {
    font-family: var(--font-serif);
    font-size: var(--sz-40);
    font-weight: 500;
    margin-bottom: var(--sz-12);
    text-align: center;
  }

  & .product__desc {
    font-size: var(--sz-28);
    font-weight: normal;
    line-height: 1.71;
    margin: 0 auto var(--sz-16);
    width: fit-content;
  }

  & .product__link {
    width: var(--sz-182);
    margin-inline: auto;
    display: block;
  }

  @media (min-width: 1200px) {
    & .lineup {
      & .inner {
        padding-top: 81px;
        padding-bottom: 115px;
      }
    }

    & .lineup__lead {
      font-size: 35px;
      line-height: 1.85;
      margin-bottom: 60px;
    }

    & .lineup__heading {
      font-size: 65px;
      gap: 77px;
      margin-bottom: 82px;

      &::before,
      &::after {
        width: 306px;
      }
    }

    & .gallery {
      flex-direction: row;
      gap: 60px 37px;
      flex-wrap: wrap;
    }

    & .gallery__item {
      width: calc((100% - 37px * 2) / 3);
    }

    & .product__body {
      padding-top: 32px;
    }

    & .product__name {
      font-size: 32px;
      line-height: 1.4;
      margin-bottom: 12px;
    }

    & .product__desc {
      font-size: 20px;
      line-height: normal;
      margin-bottom: 32px;
      height: 58px;
      display: flex;
      align-items: center;
    }

    & .product__link {
      width: fit-content;
    }
  }

  /*
  ============================
  Profile
  ============================
  */

  & .profile {
    background-color: var(--color-water);

    & .inner {
      padding-top: var(--sz-132);
      padding-bottom: var(--sz-109);
    }
  }

  & .profile__heading {
    font-family: var(--font-rich);
    font-size: var(--sz-45);
    font-weight: normal;
    letter-spacing: var(--sz-2);
    display: flex;
    align-items: center;
    gap: var(--sz-22);
    margin-bottom: var(--sz-103);

    &::after {
      content: "";
      width: var(--sz-85);
      height: 1px;
      background-color: var(--color-navy);
    }
  }

  & .profile__list {
    display: flex;
    flex-direction: column;
    gap: var(--sz-200);
  }

  & .profile__item {
    position: relative;

    &::before {
      content: "";
      background: rgba(0, 0, 0, 0.05);
      position: absolute;
      top: var(--sz-39);
      left: calc(-1 * var(--sz-10));
      width: calc(100% * (685 / 690));
      height: calc(100% - var(--sz-27));
    }
  }

  & .profile__box {
    position: relative;
    background-color: var(--bs-white);
    padding: var(--sz-98) var(--sz-30) var(--sz-70);
    font-size: var(--sz-30);
    font-weight: normal;
    line-height: 1.76;
  }

  & .profile__head {
    margin-bottom: var(--sz-55);
  }

  & .profile__name {
    font-family: var(--font-serif);
    font-size: var(--sz-50);
    font-weight: normal;
    padding-left: var(--sz-18);
    margin-bottom: var(--sz-35);

    & rt {
      font-size: var(--sz-27);
      letter-spacing: calc(-1 * var(--sz-3));
      margin-bottom: 0.3em;
    }
  }

  & .profile__lead {
    padding: var(--sz-60) var(--sz-30) var(--sz-43) var(--sz-40);
    background: linear-gradient(90deg, #d9f3f8 0%, #fffbdc 100%);
    font-family: var(--font-serif);
    font-size: var(--sz-40);
    font-weight: normal;
    line-height: 1.57;
    margin-inline: calc(-1 * var(--sz-30));
    margin-bottom: unset;

    & .small {
      font-size: var(--sz-34);
    }
  }

  & .has-line::after {
    content: "";
    width: var(--sz-95);
    height: 1px;
    background-color: var(--color-navy);
    display: inline-block;
    vertical-align: middle;
    margin-left: 0.5em;
    transform: translateY(-0.1em);
  }

  & .profile__pic {
    position: absolute;
    top: calc(-1 * var(--sz-143));
    right: calc(1 * var(--sz-10));
  }

  & .profile__item:nth-child(even) {
    & .profile__name {
      padding-left: calc(50% + var(--sz-18));
    }

    & .profile__pic {
      right: unset;
      top: calc(-1 * var(--sz-149));
      left: 0;
    }
  }

  & .profile__main {
    margin-bottom: var(--sz-55);
    border-left: var(--sz-2) solid #9dc1c8;
    padding: var(--sz-15) 0 var(--sz-15) var(--sz-30);
    margin-left: var(--sz-9);

    & dl {
      margin-bottom: var(--sz-30);
      display: flex;
      flex-wrap: wrap;
    }

    & dt {
      width: 3.5em;
      font-weight: inherit;
    }

    & dd {
      width: calc(100% - 3.5em);
      margin-bottom: unset;
    }

    & p {
      margin-bottom: var(--sz-30);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  & .profile__foot {
    border-top: 1px dashed var(--color-navy);
    padding-top: var(--sz-56);

    & p {
      margin-bottom: var(--sz-40);
    }

    & a {
      color: #0982d6;
    }
  }

  & .profile__event {
    font-size: var(--sz-40);
    font-weight: bold;
    margin-bottom: var(--sz-12);
    --color-mark: #fffbdc;
  }

  & .cd {
    margin-bottom: unset;
  }

  & .cd__pic {
    margin-bottom: var(--sz-18);
  }

  & .cd__date {
    font-size: var(--sz-27);
    font-weight: normal;
    text-align: center;
  }

  @media (min-width: 1200px) {
    & .profile {
      & .inner {
        --bs-gutter-x: 170px;
        padding-top: 138px;
        padding-bottom: 138px;
      }
    }

    & .profile__heading {
      font-size: 60px;
      letter-spacing: 3px;
      gap: 40px;
      margin-bottom: 60px;

      &::after {
        width: 228px;
      }
    }

    & .profile__list {
      gap: 81px;
    }

    & .profile__item {
      padding-right: 46px;

      &::before {
        top: 22px;
        left: -24px;
        width: 1007px;
        height: calc(100% + 6px);
      }
    }

    & .profile__box {
      padding: 68px 70px;
      font-size: 23px;
      line-height: 1.74;
    }

    & .profile__head {
      margin-bottom: 40px;
    }

    & .profile__name {
      font-size: 48px;
      padding-left: 0;
      margin-bottom: 22px;

      & rt {
        font-size: 25px;
        letter-spacing: -2.5px;
      }
    }

    & .profile__lead {
      padding: 18px 18px 18px 70px;
      font-size: 32px;
      line-height: 1.56;
      margin-inline: -70px;

      & .small {
        font-size: 28px;
      }
    }

    & .has-line::after {
      width: 95px;
    }

    & .profile__pic {
      top: 31px;
      right: -76px;
    }

    & .profile__item:nth-child(even) {
      padding-left: 46px;
      padding-right: unset;

      &::before {
        left: unset;
        right: -24px;
      }

      & .profile__head {
        padding-left: 283px;
      }

      & .profile__name {
        padding-left: unset;
      }

      & .profile__pic {
        top: 31px;
        left: -76px;
      }

      & .profile__main {
        margin-left: 283px;
        padding-right: unset;
      }
    }

    & .profile__main {
      margin-bottom: 55px;
      border-left-width: 2px;
      padding: 0 275px 0 26px;
      margin-left: var(--sz-9);

      & dl {
        margin-bottom: 20px;
      }
    }

    & .profile__foot {
      padding-top: 40px;
      padding-left: 18px;
    }

    & .profile__event {
      font-size: 32px;
      line-height: 1.4;
      margin-bottom: 12px;
    }

    & .cd__pic {
      margin-bottom: 8px;
    }

    & .cd__date {
      font-size: 20px;
    }
  }

  /*
  ============================
  Footer
  ============================
  */
  & .footer {
    padding-block: var(--sz-80);
    background: var(--color-navy);

    & .inner {
      display: flex;
      flex-direction: column;
      gap: var(--sz-40);
    }
  }

  & .btn-store {
    color: var(--bs-white);
    font-size: var(--sz-30);
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.03em;

    & i {
      margin-left: var(--sz-37);
      font-size: 80%;
    }
  }

  @media (min-width: 1200px) {
    & .footer {
      padding-block: 70px;

      & .inner {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 53px;
      }
    }

    & .footer__logo {
      margin: unset;
    }

    & .btn-store {
      font-size: 30px;

      & i {
        margin-left: var(--sz-40);
      }
    }
  }
}

/*
  ============================
  youtube
  ============================
  */

.movie_b {
  text-align: center;
}

.p-interview__movie {
  max-width: 37.5rem;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.375rem;
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}