@layer components {

  /* section 共通 */

  main {
    @media (768px <= width) {
      padding: 32px 0;
    }
    @media (width < 768px) {
      padding: 56px 0 32px;
    }
  }

  section {
    @media (768px <= width) {
      padding: 64px 0;
    }
    @media (width < 768px) {
      padding: 24px 0;
    }
    .inner {
      margin-inline: auto;
      @media (768px <= width) {
        width: 1140px;
        max-width: 90%;
      }
      @media (width < 768px) {
        width: 90%;
      }
    }
  }

  .section-heading {
    font-family: var(--font-serif);
    font-size: var(--fz-24);
    font-weight: 700;
    @media (768px <= width) {
      writing-mode: vertical-rl;
      font-feature-settings: initial;
      font-size: var(--fz-32);
    }
    .sub {
      font-size: var(--fz-18);
    }
  }

  .title-content-row {
    @media (768px <= width) {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 80px;
    }
    @media (width < 768px) {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    + .title-content-row {
      @media (768px <= width) {
        margin-top: 128px;
      }
      @media (width < 768px) {
        margin-top: 40px;
      }
    }
  }

  /* page-top */

  .page-top-area {
    img {
      width: 100%;
    }
    .title-img {
      margin-top: 56px;
      @media (width < 768px) {
        margin-top: 32px;
      }
      figcaption {
        font-size: var(--fz-10);
        margin-top: 8px;
        text-align: right;
        @media (width < 768px) {
          font-size: var(--fz-8);
        }
      }
    }
  }
  .title-contents {
    display: flex;
    align-items: center;
    gap: 16px;
    line-height: 1.2;
    .en {
      font-family: var(--font-en);
      font-size: var(--fz-64);
      display: flex;
      align-items: center;
      justify-content: center;
      @media (width < 768px) {
        font-size: var(--fz-48);
      }
      .icon {
        width: 48px;
        margin-right: 8px;
        @media (width < 768px) {
          width: 32px;
        }
      }
    }
    .jp {
      font-family: var(--font-serif);
      font-size: var(--fz-14);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .2em;
      @media (width < 768px) {
        font-size: var(--fz-12);
      }
      span {
        display: block;
        &:not(.tb) {
          writing-mode: vertical-rl;
          font-feature-settings: initial;
        }
      }
    }
    .public {
      font-family: var(--font-serif);
      font-size: var(--fz-32);
      font-weight: 800;
      @media (width < 768px) {
        font-size: var(--fz-24);
      }
    }
  }

  /* tab */

  .tab-wrap {
    .tab-title-box {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border-bottom: 1px solid var(--black);
    }
    .tab-title {
      background: var(--gray);
      font-family: var(--font-serif);
      font-size: var(--fz-18);
      font-weight: 700;
      padding: 24px 8px;
      line-height: 1.2;
      text-align: center;
      cursor: pointer;
      @media (width < 768px) {
        padding: 16px 8px;
      }
      &.active {
        background: var(--black);
        color: var(--white);
      }
    }
    .tab-content {
      @media (768px <= width) {
        margin-top: 80px;
      }
      @media (width < 768px) {
        margin-top: 32px;
      }
    }
    .tab-pane {
      display: none;
      &.active {
        display: block;
      }
    }
  }

  /* page-outline */

  .page-outline {
    .map {
      width: 100%;
      aspect-ratio: 16 / 9;
      @media (width < 768px) {
        margin-top: 24px;
      }
      iframe {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }

  /* page-ticket */

  .page-ticket {
    .attention-list {
      margin-top: 24px;
      @media (width < 768px) {
        margin-top: 16px;
      }
    }
  }

  /* page-contents */

  .page-contents {
    main {
      padding-bottom: 0;
    }
    .section-heading {
      @media (768px <= width) {
        padding: 56px 0;
        display: flex;
        align-items: center;
        border-right: 1px solid var(--black);
      }
      @media (width < 768px) {
        padding: 32px 16px;
        border-bottom: 1px solid var(--black);
      }
    }
  }

  .highlights-section {
    @media (768px <= width) {
      border-block: 1px solid var(--black);
      margin: 64px 0px;
      padding: 0;
      overflow: hidden;
    }
    .inner {
      @media (768px <= width) {
        display: grid;
        grid-template-columns: 20% auto;
      }
      @media (width < 768px) {
        border-block: 1px solid var(--black);
        width: 100%;
      }
    }
  }
  .highlights-body {
    .num-list {
      counter-reset: num;
      li {
        position: relative;
        font-family: var(--font-serif);
        font-size: var(--fz-24);
        line-height: 1.4;
        font-weight: 600;
        display: grid;
        grid-template-columns: auto 1fr;
        .text {
          display: block;
          padding: 16px 40px;
          @media (width < 768px) {
            padding: 8px 24px;
          }
        }
        &::before {
          content: counter(num);
          display: block;
          counter-increment: num;
          font-family: var(--font-en);
          font-size: var(--fz-32);
          line-height: 1;
          font-weight: 400;
          padding: 16px 40px;
          border-right: 1px solid var(--black);
          @media (width < 768px) {
            font-size: var(--fz-48);
            padding: 16px;
          }
        }
        + li {
          margin-top: 16px;
        }
      }
      span {
        display: inline-block;
        &.text-underline {
          position: relative;
          &::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: var(--black);
          }
        }
      }
    }
  }
  .artist-list {
    background: var(--black);
    color: var(--dark-gray);
    font-size: var(--fz-18);
    padding: 0 16px;
    font-weight: 400;
    position: relative;
    overflow: hidden;
    @media (width < 768px) {
      margin-right: 8px;
    }
    &::before {
      @media (768px <= width) {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background: var(--black);
        height: 100%;
        width: 100%;
      }
    }
    @media (width < 768px) {
      font-size: var(--fz-14);
      padding: 0 4px;
    }
    .artist-list-inner {
      @media (width < 768px) {
        overflow: hidden;
      }
    }
    p {
      display: inline-block;
      padding: 16px 0;
      padding-right: 1em;
      position: relative;
      @media (width < 768px) {
        padding-bottom: 16px 8px;
        padding-right: .5em;
      }
      &::before {
        content: "";
        display: block;
        position: absolute;
        left: -16px;
        bottom: -1px;
        width: 500%;
        height: 1px;
        background: var(--dark-gray);
      }
      &:not(:last-child)::after {
        content: "/";
        padding-left: 1em;
        @media (width < 768px) {
          padding-left: .5em;
        }
      }
    }
  }
  .chapter-nav-list {
    display: grid;
    @media (768px <= width) {
      grid-template-columns: repeat( 4, 1fr );
    }
    @media (width < 768px) {
      grid-template-columns: repeat( 2, 1fr );
    }
    a {
      display: block;
      text-align: center;
      padding: 24px 8px;
      font-size: var(--fz-18);
      background: var(--gray);
      font-family: var(--font-serif);
      font-weight: 700;
      border-right: 1px solid var(--black);
      transition: all .6s var(--ease);
      @media (width < 768px) {
        border-top: 1px solid var(--black);
        padding: 16px 8px;
      }
      &:hover {
        background: var(--black);
        color: var(--gray);
      }
    }
    li:nth-child(-n + 2) a {
      @media (width < 768px) {
        border-top: none;
      }
    }
    li:nth-child(2n) a {
      @media (width < 768px) {
        border-right: none;
      }
    }
    li:nth-child(4n) a {
      border-right: none;
    }
    li:nth-child(n+5) a {
      border-top: 1px solid var(--black);
    }
  }
  .chapter-section {
    background: var(--black);
    @media (width < 768px) {
      padding: 64px 0;
    }
  }
  .chapter-list {
    display: flex;
    flex-direction: column;
    @media (768px <= width) {
      padding: 64px 0;
      gap: 128px;
    }
    @media (width < 768px) {
      gap: 64px;
    }
  }
  .chapter-block {
    background: var(--white);
    overflow: hidden;
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 20% auto;
    }
    .title-area {
      font-size: var(--fz-32);
      font-family: var(--font-serif);
      font-weight: 600;
      @media (768px <= width) {
        border-right: 1px solid var(--black);
      }
      @media (width < 768px) {
        font-size: var(--fz-24);
        display: grid;
        grid-template-columns: auto 1fr;
      }
      h3 {
        padding: 16px;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        @media (width < 768px) {
          padding: 24px;
          border-bottom: 1px solid var(--black);
        }
      }
      p {
        width: 100%;
        @media (768px <= width) {
          writing-mode: vertical-rl;
          font-feature-settings: initial;
          display: flex;
          flex-direction: column;
          justify-content: center;
          border-top: 1px solid var(--black);
          padding: 40px;
        }
        @media (width < 768px) {
          border-left: 1px solid var(--black);
          border-bottom: 1px solid var(--black);
          padding: 24px;
        }
      }
      span {
        display: block;
      }
    }
  }
  .chapter-body {
    display: flex;
    flex-direction: column;
    @media (768px <= width) {
      padding: 56px;
      gap: 40px;
    }
    @media (width < 768px) {
      padding: 40px 32px;
      gap: 32px;
    }
    .cols-1 {
      figure {
        @media (768px <= width) {
          width: 50%;
          margin-inline: auto;
        }
      }
    }
    .cols-2 {
      @media (768px <= width) {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
      @media (width < 768px) {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
    }
    .js-gallery-trigger {
      display: block;
      position: relative;
      img {
        /* background: var(--gray); */
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      &::before {
        content: "+";
        display: block;
        text-align: right;
        margin-bottom: .3em;
        z-index: 1;
        line-height: 1;
        font-size: var(--fz-32);
      }
    }
    figcaption {
      padding-top: .5em;
      font-size: var(--fz-10);
      .attention-text {
        font-size: var(--fz-8);
      }
    }
    .text-box {
      position: relative;
      @media (width < 768px) {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
      &::before {
        @media (width < 768px) {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 5em;
          background: linear-gradient(to top, var(--white), transparent);
        }
      }
      p {
        line-height: 2em;
      }
    }
    &.is-expanded .text-box {
      @media (width < 768px) {
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow: visible;
      }
      &::before {
        display: none;
      }
    }
    .more-btn {
      display: flex;
      justify-content: center;
      cursor: pointer;
      @media (768px <= width) {
        display: none;
      }
      span {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        width: fit-content;
        border-bottom: 1px solid var(--black);
        padding-bottom: 3px;
        &::after {
          content: "+";
          display: block;
          font-size: var(--fz-24);
          font-weight: 600;
          line-height: 1;
          margin-top: -2px;
        }
      }
      &.is-open span::after {
        content: "-";
      }
    }
  }
  .artist-area {
    background: var(--black);
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 1fr auto;
    }
    > * {
      @media (768px <= width) {
        padding: 40px;
      }
      @media (width < 768px) {
        padding: 24px;
      }
    }
    .artist-area__title {
      font-family: var(--font-serif);
      font-size: var(--fz-32);
      color: var(--dark-gray);
      @media (768px <= width) {
        border-right: 1px solid var(--dark-gray);
        writing-mode: vertical-rl;
        font-feature-settings: initial;
      }
      @media (width < 768px) {
        font-size: var(--fz-24);
        border-bottom: 1px solid var(--dark-gray);
      }
    }
    .artist-img-area {
      display: grid;
      gap: 24px;
      align-items: center;
      img {
        /* background: #2E2E2E; */
        @media (768px <= width) {
          max-height: 291px;
          max-width: 321px;
          margin-inline: auto;
        }
      }
      &:has(> figure:only-child) {
        grid-template-columns: 1fr;
        figure {
          @media (768px <= width) {
            width: 312px;
          }
        }
      }
      &:has(> figure:first-child:nth-last-child(2)) {
        @media (768px <= width) {
          grid-template-columns: 1fr 1fr;
        }
      }
    }
    figure img {
      background: transparent;
    }
    figure a::before {
      color: var(--gray);
    }
    figcaption {
      color: var(--white);
    }
  }
  .chapter-block--prologue {
    .cols-2 {
      figure {
        > a {
          aspect-ratio: 185/143;
        }
      }
    }
  }
  .chapter-block--chapter1 {
    .cols-1 {
      figure {
        img {
          background: transparent;
        }
        > a {
          aspect-ratio: 3.5/3;
        }
      }
    }
  }
  .chapter-block--chapter2 {
    .cols-2 {
      figure {
        > a {
          aspect-ratio: 98/69;
        }
      }
    }
    .artist-area {
      figure {
        > a {
          aspect-ratio: 127/73;
        }
      }
    }
  }
  .chapter-block--chapter4 {
    .cols-2 {
      figure {
        > a {
          aspect-ratio: 389/259;
        }
      }
    }
  }
  .chapter-block--chapter5 {
    .cols-2 {
      figure {
        > a {
          aspect-ratio: 98/73;
        }
      }
    }
  }
  .chapter-block--chapter6 {
    .cols-2 {
      figure {
        > a {
          aspect-ratio: 1.33/1;
        }
      }
    }
  }
  .chapter-block--chapter7 {
    .cols-2 {
      figure {
        > a {
          aspect-ratio: 163/121;
        }
      }
    }
    .artist-area {
      figure{
        > a {
          @media (width < 768px) {
            aspect-ratio: 163/121;
          }
        }
        img {
          background: transparent;
        }
      }
    }
  }

  /* gallery modal */

  body.is-gallery-open {
    overflow: hidden;
  }

  .gallery-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);

    &.is-open {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
    }
  }

  .gallery-modal__backdrop {
    position: absolute;
    inset: 0;
    opacity: 0.94;
    background: var(--gray-sub, #B6B6B6);
  }

  .gallery-modal__panel {
    position: relative;
    z-index: 1;
    width: min(1080px, calc(100% - 48px));
    max-height: calc(100dvh - 48px);
    display: flex;
    justify-content: center;
    align-items: center;
    @media (width < 768px) {
      width: calc(100% - 24px);
      max-height: calc(100dvh - 24px);
    }
  }

  .gallery-modal__close {
    position: fixed;
    top: 40px;
    right: 40px;
    transform: translateY(-100%);
    border: 0;
    background: transparent;
    color: var(--black);
    font-size: clamp(2.4rem, 2.2vw, 3.2rem);
    line-height: 1;
    cursor: pointer;
    width: 30px;
    height: 30px;
    @media (width < 768px) {
      right: 24px;
    }
    &::before, &::after {
      content: "";
      width: 100%;
      height: 2px;
      background: var(--black);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%) rotate(35deg);
    }
    &::after {
      top: 50%;
      transform: translateY(-50%) rotate(-35deg);
    }
  }

  .gallery-modal__figure {
    margin: 0 auto;
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    max-width: 100%;
    min-height: 0;
  }

  .gallery-modal__image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: min(76dvh, 900px);
    object-fit: contain;
  }

  .gallery-modal__caption {
    color: var(--black);
    font-size: var(--fz-12);
    line-height: 1.6;
    margin-top: 10px;
    width: 100%;
  }

  .gallery-modal__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    color: var(--black);
    width: 48px;
    height: 48px;
    font-size: 4rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s var(--ease), opacity .2s var(--ease);
    @media (width < 768px) {
      top: auto;
      transform: none;
      bottom: 16px;
      width: 40px;
      height: 40px;
      font-size: 2.6rem;
    }
    &:disabled {
      opacity: .3;
      cursor: default;
    }
  }

  .gallery-modal__nav--prev {
    left: 12px;
    @media (width < 768px) {
      left: auto;
      right: 60px;
    }
  }

  .gallery-modal__nav--next {
    right: 12px;
  }

  /* page-loveturner */

  .page-loveturner {
    main {
      padding-bottom: 0;
    }
  }

  .love-turner-info {
    background: url('../img/love-bg.webp') no-repeat center;
    background-size: cover;
    text-align: center;
    @media (768px <= width) {
      padding: 128px 0;
    }
    @media (width < 768px) {
      padding: 64px 0;
      background: url('../img/love-bg-sp.webp') no-repeat center;
      background-size: cover;
    }
    .logo img {
      margin-inline: auto;
      @media (width < 768px) {
        width: 80%;
      }
    }
    .text-box {
      line-height: 2em;
      @media (768px <= width) {
        margin-top: 80px;
      }
      @media (width < 768px) {
        margin-top: 32px;
      }
    }
    .comingsoon {
      margin-top: 24px;
    }
  }

  /* page-policy */

  .policy {
    .inner {
      display: flex;
      flex-direction: column;
      @media (768px <= width) {
        gap: 48px;
      }
      @media (width < 768px) {
        gap: 32px;
      }
    }
    .policy__list {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .policy__heading-l {
      font-family: var(--font-serif);
      font-size: var(--fz-24);
      line-height: 1.8;
      font-weight: 600;
      @media (width < 768px) {
        font-size: var(--fz-18);
      }
    }
    .policy__heading {
      font-family: var(--font-serif);
      font-size: var(--fz-18);
      line-height: 1.8;
      font-weight: 600;
      @media (width < 768px) {
        font-size: var(--fz-14);
      }
      + * {
        margin-top: 16px;
      }
    }
    .attention-list {
      margin-top: 8px;
      li {
        font-size: var(--fz-14);
      }
    }
  }

  /* page-terms */

  .terms {
    .inner {
      display: flex;
      flex-direction: column;
      @media (768px <= width) {
        gap: 48px;
      }
      @media (width < 768px) {
        gap: 32px;
      }
    }
    .terms__list {
      display: flex;
      flex-direction: column;
      gap: 40px;
      .terms__heading {
        font-family: var(--font-serif);
        font-size: var(--fz-18);
        line-height: 1.8;
        font-weight: 600;
        @media (width < 768px) {
          font-size: var(--fz-14);
        }
        + * {
          margin-top: 16px;
        }
      }
    }
  }
}