@layer base, components, utilities;

@layer base {
  html {
    overscroll-behavior-y: none;
  }

  body {
    font-family: var(--font-main);
    font-size: var(--fz-16);
    line-height: 1.6;
    color: var(--black);
    font-optical-sizing: auto;
    font-feature-settings: "palt";
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none;
    min-height: 100vh;
    height: auto;
    background: var(--white);
  }
}

@layer components {

  /* Utility Classes */

  .attention-list > li,
  .attention-text {
    padding-left: 1.5em;
    text-indent: -1.5em;
    position: relative;
    font-size: var(--fz-12);
    > * {
      text-indent: 0;
    }
    &::before{
      content: "※";
      width: 1.5em;
      display: inline-block;
      text-indent: 0;
    }
  }

  .attention-list-en > li,
  .attention-text-en {
    padding-left: .6em;
    text-indent: -0.6em;
    position: relative;
    font-size: var(--fz-14);
    > * {
      text-indent: 0;
    }
    &::before{
      content: "*";
      width: .6em;
      display: inline-block;
      text-indent: 0;
    }
  }

  .mark-list {
    list-style-type: disc;
	  padding-left: 1.5em;
  }

  ol.num-dotlist {
    counter-reset: my-counter;
    > li {
      padding-left: 2em;
      position: relative;
      &::before {
        content: counter(my-counter)'.';
        counter-increment: my-counter;
        position: absolute;
        width: 1.6em;
        text-align: right;
        top: 0;
        left: 0;
      }
    }
  }
  ol.style-brackets {
    counter-reset: brackets-counter;
    list-style: none;
    padding-left: 0;
    > li {
      counter-increment: brackets-counter;
      padding-left: 2em;
      position: relative;
      &::before {
        content: '（' counter(brackets-counter) '）';
        position: absolute;
        left: 0;
        top: 0;
        width: 2em;
      }
    }
  }

  .text-link {
    padding-bottom: 2px;
    background: linear-gradient(90deg, #000, #000) no-repeat center bottom;
    background-size: 100% 1px;
    transition: all .4s var(--ease);
    &:hover {
      background-size: 0 1px;
    }
  }

  /* Header & Nav */

  header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }
  .toggle-btn {
    display: block;
    width: 64px;
    height: 64px;
    cursor: pointer;
    z-index: 120;
    border: 1px solid var(--black);
    background: var(--gray);
    position: fixed;
    top: 24px;
    left: 24px;
    transform: translateY(0);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    @media (width < 768px) {
      width: 48px;
      height: 48px;
    }
    span {
      width: 60%;
      height: 2px;
      position: absolute;
      top: 50%;
      left: 50%;
      background: var(--black);
      transform: translate(-50%, -50%);
      transition: all .5s var(--ease);
      &:nth-child(1) {
        margin-top: -6px;
      }
      &:nth-child(2) {
        margin-top: 6px;
      }
    }
    &.active span {
      margin: 0;
      &:nth-child(1) {
        transform: translate(-50%, -50%) rotate(35deg);
      }
      &:nth-child(2) {
        transform: translate(-50%, -50%) rotate(-35deg);
      }
    }
  }
  .page-top .toggle-btn {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-8px);
  }
  .page-top .toggle-btn.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .header__bg-area {
    background: #1A1A1ACC;
    position: fixed;
    inset: 0;
    z-index: 100;
    opacity: 0;
    transition: opacity .5s var(--ease);
    pointer-events: none;
  }
  .active .header__bg-area {
    opacity: 1;
    pointer-events: auto;
  }
  .nav-list {
    position: fixed;
    z-index: 110;
    transition: all .5s var(--ease);
    height: 100vh;
    background: var(--gray);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    @media (768px <= width) {
      left: -300px;
      width: 300px;
      padding-top: 112px;
    }
    @media (width < 768px) {
      left: -60%;
      width: 60%;
      padding-top: 96px;
    }
    .active & {
      left: 0;
    }
  }
  .nav-list__main {
    border-block: 1px solid var(--black);
    padding: 12px;
    a {
      display: block;
      padding: 12px;
      transition: opacity .4s ease;
      span {
        display: block;
        line-height: 1;
      }
      .en {
        font-family: var(--font-en);
        font-size: var(--fz-24);
        display: flex;
        align-items: center;
        gap: 5px;
      }
      .jp {
        font-family: var(--font-serif);
        font-size: var(--fz-12);
        margin-top: .5em;
      }
      .icon {
        width: 20px;
      }
      &:hover {
        opacity: 0.4;
      }
    }
    .no-link a {
      pointer-events: none;
      opacity: .4;
    }
  }
  .nav-list__sns {
    display: flex;
    padding: 24px;
    gap: 24px;
    a {
      display: block;
      background: var(--black);
      width: 32px;
      height: 32px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      img {
        width: 16px;
        height: 16px;
        object-fit: contain;
      }
    }
  }
  .ticket-btn {
    display: flex;
    align-items: center;
    width: fit-content;
    gap: 8px;
    padding: 8px;
    background: var(--black);
    color: var(--white);
    border: 1px solid var(--white);
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    position: fixed;
    bottom: 24px;
    right: 24px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    &.is-visible {
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
    }
    .arrow::before,
    .arrow::after {
      background: var(--white);
    }
    &:hover .arrow::before,
    &:hover .arrow::after,
    &:focus-visible .arrow::before,
    &:focus-visible .arrow::after {
      animation: arrow-slide .5s var(--ease);
    }
    &.en {
      display: none;
      min-width: 172px;
      justify-content: space-between;
      line-height: 1.2;
    }
  }

  /* Main Visual */

  .mv {
    display: block;
    height: fit-content;
    position: relative;
    + * {
      margin-top: 80px;
    }
    + .top-news {
      margin-inline: auto;
      @media (768px <= width) {
        width: calc(90% - var(--mv-text-offset));
        margin-left: var(--mv-text-offset);
        margin-right: 5%;
        transform: none;
      }
    }
  }
  .mv__inner {
    position: relative;
  }
  .mv__logo-area {
    position: absolute;
    right: 0;
    z-index: 20;
    top: 48px;
    @media (768px <= width) {
      width: clamp(80px, 12vw, 152px);
    }
    @media (width < 768px) {
      width: clamp(110px, 30vw, 180px);
    }
  }
  .mv__content {
    display: block;
    width: 100%;
    @media (width < 768px) {
      display: grid;
      grid-template-rows: auto 33px;
    }
    figcaption {
      width: 100%;
      font-size: var(--fz-10);
      padding: .5em 1em;
      text-align: right;
      background: var(--white);
      @media (width < 768px) {
        padding-left: calc( clamp(80px, 21vw, 120px) + 24px );
        font-size: var(--fz-8);
      }
    }
  }
  .mv__slider {
    position: relative;
    overflow: hidden;
    @media (768px <= width) {
      height: calc(100vh - 142px);
    }
    @media (width < 768px) {
      aspect-ratio: 13 / 20;
      /* height: calc(100vh - min(200px, (90vw - clamp(60px, 20vw, 100px)) * 9 / 16) - 56px); */
    }
    .mv__content {
      z-index: 1;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      animation: mv-fade 16s ease-in-out infinite;
      will-change: opacity;
      overflow: hidden;
      @media (768px <= width) {
        padding-bottom: 24px;
      }
      picture {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          animation: mv-scale 16s linear infinite;
          will-change: transform;
        }
      }
      &:first-child {
        z-index: 2;
        opacity: 1;
        animation-delay: 0s;
        picture img {
          animation-delay: 0s;
        }
      }
      &:nth-child(2) {
        z-index: 1;
        animation-delay: -8s;
        picture img {
          animation-delay: -8s;
        }
      }
    }
  }
  .mv__image-wrap {
    position: relative;
  }
  .mv__text {
    position: absolute;
    display: block;
    font-family: var(--font-en);
    writing-mode: vertical-rl;
    line-height: .8;
    z-index: 20;
    top: 100%;
    transform: translateY(-50%);
    letter-spacing: .05em;
    @media (768px <= width) {
      font-size: var(--mv-text-offset);
      margin-top: -0.1em;
    }
    @media (width < 768px) {
      font-size: var(--mv-text-offset-sp);
      margin-top: -0.2em;
    }
    .mv__text-white {
      color: var(--white);
    }
  }
  .info-strip {
    margin-inline: auto;
    @media (768px <= width) {
      width: calc(90% - var(--mv-text-offset));
      margin-left: var(--mv-text-offset);
      margin-top: 16px;
      margin-right: 5%;
    }
    @media (width < 768px) {
      max-width: 90%;
      padding-left: calc( var(--mv-text-offset-sp) - 24px );
      margin-top: 24px;
    }
  }
  .info-strip__inner {
    @media (768px <= width) {
      display: grid;
      grid-template-columns: auto auto;
      gap: 40px;
      align-items: flex-end;
      justify-content: center;
    }
    @media (width < 768px) {
      max-width: 400px;
      margin-inline: auto;
    }
  }
  .info-strip__date {
    @media (768px <= width) {
      padding-bottom: 32px;
      width: fit-content;
    }
    img {
      @media (768px <= width) {
        max-height: 100px;
      }
    }
  }
  .info-strip__place {
    @media (width < 768px) {
      margin-top: 16px;
    }
    p {
      margin-top: 1em;
      font-size: var(--fz-14);
      @media (768px <= width) {
        text-align: right;
      }
    }
  }
  .info-strip__venue {
    display: flex;
    gap: 16px;
    @media (width < 768px) {
      flex-direction: column;
    }
    .text {
      border: 1px solid var(--black);
      font-size: var(--fz-14);
      display: grid;
      place-items: center;
      padding: 4px 8px;
      line-height: 1;
    }
  }

  /* section 共通 */

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

  .top__title {
    display: flex;
    align-items: center;
    gap: 16px;
    span {
      line-height: 1.2;
    }
    .en {
      font-family: var(--font-en);
      font-size: var(--fz-64);
      @media (width < 768px) {
        font-size: var(--fz-48);
      }
    }
    .jp {
      font-size: var(--fz-14);
      font-family: var(--font-serif);
      writing-mode: vertical-rl;
      font-feature-settings: initial;
      @media (width < 768px) {
        font-size: var(--fz-12);
      }
    }
  }

  .top__title-sub {
    @media (768px <= width) {
      font-size: var(--fz-40);
    }
    @media (width < 768px) {
      font-size: var(--fz-24);
    }
    span {
      @media (768px <= width) {
        font-size: var(--fz-16);
      }
      @media (width < 768px) {
        font-size: var(--fz-14);
      }
    }
  }

  .btn {
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 224px;
    margin-inline: auto;
    padding: 8px 0;
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.4;
    border-bottom: 1px solid var(--white);
    &:hover .arrow::before,
    &:hover .arrow::after,
    &:focus-visible .arrow::before,
    &:focus-visible .arrow::after {
      animation: arrow-slide .5s var(--ease);
    }
    &.black {
      color: var(--black);
      border-color: var(--black);
      .arrow::before,
      .arrow::after {
        background: var(--black);
      }
    }
  }
  .arrow {
    position: relative;
    width: 18px;
    height: 6px;
    overflow: hidden;
  }
  .arrow::before,
  .arrow::after {
    content: "";
    position: absolute;
    right: 0;
    background: var(--white);
    transform: translateX(0);
    will-change: transform, opacity;
  }
  .arrow::before {
    top: 4px;
    width: 18px;
    height: 1px;
  }
  .arrow::after {
    top: 0;
    width: 6px;
    height: 5px;
    clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
  }

  .comingsoon {
    font-family: var(--font-serif);
    font-size: var(--fz-24);
  }

  .acc-box {
    border: 1px solid var(--black);
    .acc-btn {
      padding: 16px 32px 16px 16px;
      line-height: 1;
      font-size: var(--fz-16);
      font-weight: 700;
      position: relative;
      width: 100%;
      cursor: pointer;
      &::before, &::after {
        content: '';
        display: block;
        background: var(--black);
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        transition: all .3s var(--ease);
      }
      &::before {
        width: 14px;
        height: 2px;
      }
      &::after {
        width: 2px;
        height: 14px;
        margin-right: 6px;
      }
      &.active::after {
        height: 0;
      }
    }
    .acc-content {
      margin-top: 0;
      padding: 0 16px 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height .4s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease), padding-bottom .4s var(--ease);
    }
    .acc-btn.active + .acc-content {
      padding: 0 16px 16px;
      max-height: 1000px;
      opacity: 1;
    }
    h4 {
      font-weight: 600;
    }
  }

  .dl-info {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: var(--fz-14);
    dt {
      font-weight: 800;
    }
  }

  .dl-table {
    width: 100%;
    border-top: 1px solid var(--black);
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 20% 1fr;
    }
    > * {
      @media (768px <= width) {
        border-bottom: 1px solid var(--black);
        padding: 24px;
      }
      @media (width < 768px) {
        padding-inline: 8px;
      }
    }
    dt {
      font-weight: 800;
      @media (width < 768px) {
        padding-top: 16px;
      }
    }
    dd {
      @media (width < 768px) {
        padding-bottom: 16px;
        border-bottom: 1px solid var(--black);
      }
    }
  }

  .table-style {
    width: 100%;
    border-collapse: collapse;
    th, td {
      border-block: 1px solid var(--black);
      padding: 24px;
    }
    th {
      font-weight: 700;
    }
    thead {
      th {
        border-top: none;
        padding-top: 0;
      }
    }
    tbody {
      th {
        text-align: left;
      }
      td {
        text-align: center;
      }
    }

    .table-price {
      display: inline-block;
      min-width: 6ch;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
  }

  .access-box {
    width: 100%;
    border-block: 1px solid var(--black);
    padding: 56px 24px;
    overflow: hidden;
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 45% 1fr;
      gap: 40px;
    }
    @media (width < 768px) {
      padding: 32px 8px;
    }
    .detail-box {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .logo-area {
      font-size: var(--fz-14);
      display: flex;
      gap: 16px;
      @media (768px <= width) {
        align-items: flex-end;
      }
      @media (width < 768px) {
        flex-direction: column;
      }
    }
    .map {
      width: 100%;
      aspect-ratio: 16 / 9;
      @media (width < 768px) {
        margin-top: 24px;
      }
      iframe {
        display: block;
        width: 100%;
        height: 100%;
      }
    }
  }


  @keyframes arrow-slide {
    0% {
      transform: translateX(0);
      opacity: 1;
    }
    45% {
      transform: translateX(120%);
      opacity: 1;
    }
    46% {
      transform: translateX(-120%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }

  @keyframes mv-scale {
    0% { transform: scale(1.05); }
    50% { transform: scale(1); }
    50.001% { transform: scale(1.05); }
    100% { transform: scale(1.05); }
  }

  @keyframes mv-fade {
    0%, 37.5% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    87.5% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }


  /* Top Movie */

  .top-movie {
    margin-inline: auto;
    padding-top: 0;
    @media (768px <= width) {
      width: 1040px;
      max-width: 90%;
      padding-left: 120px;
    }
    @media (width < 768px) {
      width: 90%;
    }
  }
  .top-movie__iframe {
    aspect-ratio: 16 / 9;
    iframe { width: 100%; height: 100%; }
  }

  /* Top News */

  .top-news {
    border-top: 1px solid var(--black);
  }

  .top-news .inner {
    @media (768px <= width) {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 80px;
      align-items: flex-start;
    }
  }
  .top-news__content {
    max-height: 128px;
    overflow-y: scroll;
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--dark-gray) transparent;
    @media (width < 768px) {
      margin-top: 24px;
    }
    dl {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 16px 24px;
      dt {
        color: var(--dark-gray);
        font-size: var(--fz-12);
        font-weight: 600;
        padding-top: .4em;
      }
      dd {
        font-size: var(--fz-16);
      }
    }
  }
  .top-news__content::-webkit-scrollbar {
    width: 6px;
  }
  .top-news__content::-webkit-scrollbar-track {
    background: transparent;
  }
  .top-news__content::-webkit-scrollbar-thumb {
    background: var(--dark-gray);
    border-radius: 6px;
  }
  .top-news__content::-webkit-scrollbar-thumb:hover {
    filter: brightness(0.8);
  }

  /* Top About */

  .top-about {
    background: var(--black);
    color: var(--white);
    overflow: hidden;
    .inner {
      > * + * {
        @media (768px <= width) {
          margin-top: 80px;
        }
        @media (width < 768px) {
          margin-top: 64px;
        }
      }
    }
  }
  .top-about__title-box {
    color: var(--dark-gray);
    @media (768px <= width) {
      width: 800px;
      max-width: 90%;
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 80px;
      margin-inline: auto;
    }
    @media (width < 768px) {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 64px;
    }
  }
  .top-about__title {
    font-family: var(--font-serif);
    font-size: var(--fz-32);
    writing-mode: vertical-rl;
    font-feature-settings: initial;
    @media (width < 768px) {
      width: fit-content;
      margin-inline: auto;
    }
    span {
      display: block;
      line-height: 2;
      letter-spacing: .2em;
      font-weight: 700;
    }
  }
  .top-about__desc {
    font-size: var(--fz-16);
    line-height: 1.8;
    letter-spacing: .05em;
    p + p {
      margin-top: 2em;
    }
  }
  .top-about__content {
    color: var(--black);
    position: relative;
    @media (768px <= width) {
      padding: 56px;
      display: grid;
      grid-template-columns: 272px 1fr;
      gap: 40px;
    }
    @media (width < 768px) {
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
    }
  }
  .top-about__content .top-about__back {
    content: "";
    display: block;
    background: var(--white);
    position: absolute;
    inset: 0;
    scale: .9;
    transform-origin: center;
    z-index: 1;
  }
  .top-about__media {
    position: relative;
    z-index: 2;
    @media (width < 768px) {
      order: 2;
      margin-top: 24px;
    }
    figcaption {
      font-size: var(--fz-10);
      margin-top: .5em;
    }
  }
  .top-about__author {
    position: relative;
    z-index: 2;
    @media (width < 768px) {
      display: contents;
      > * {
        z-index: 1;
      }
    }
    h3 {
      font-family: var(--font-serif);
      font-size: var(--fz-24);
      font-weight: 700;
      @media (width < 768px) {
        order: 1;
      }
      span {
        display: inline-block;
      }
      .sub {
        font-size: var(--fz-14);
        font-weight: 400;
        margin-left: .5em;
      }
      + * {
        margin-top: 24px;
      }
    }
    p {
      font-size: var(--fz-16);
      line-height: 2;
      width: fit-content;
      justify-self: center;
       @media (width < 768px) {
        order: 3;
      }
    }
  }
  .top-campaign {
    .inner {
      background: url('../img/love-bg.webp') no-repeat center center/cover;
      display: flex;
      flex-direction: column;
      text-align: center;
      @media (768px <= width) {
        padding: 96px;
        gap: 40px;
      }
      @media (width < 768px) {
        padding: 40px 64px;
        gap: 24px;
      }
    }
    .top__title img{
      margin-inline: auto;
    }
    .text {
      letter-spacing: .05em;
    }
  }

  .page-top-english {
    line-height: 1.4;
    @media (768px <= width) {
      font-size: var(--fz-18);
    }
    @media (width < 768px) {
      font-size: var(--fz-16);
    }
    .ticket-btn {
      display: none;
      &.en {
        display: flex;
      }
    }
    main {
      @media (768px <= width) {
        padding-bottom: 64px;
      }
      @media (width < 768px) {
        padding-bottom: 32px;
      }
    }
    section {
      font-family: var(--font-en);
      @media (768px <= width) {
        padding: 64px 0;
      }
      @media (width < 768px) {
        padding: 32px 0;
      }
    }
    .top__title {
      + * {
        @media (768px <= width) {
          margin-top: 80px;
        }
        @media (width < 768px) {
          margin-top: 40px;
        }
      }
    }
    .top__title-sub {
      + * {
        @media (768px <= width) {
          margin-top: 40px;
        }
        @media (width < 768px) {
          margin-top: 24px;
        }
      }
    }
    .mv {
      display: block;
      height: fit-content;
      position: relative;
      + * {
        margin-top: 80px;
      }
      + .english-outline {
        margin-inline: auto;
        @media (768px <= width) {
          width: calc(90% - var(--mv-text-offset));
          margin-left: var(--mv-text-offset);
          margin-right: 5%;
          transform: none;
        }
      }
    }
    .english-outline {
      border-top: 1px solid var(--black);
      @media (768px <= width) {
        padding-top: 128px;
      }
      @media (width < 768px) {
        padding-top: 64px;
      }
      .dl-table {
        @media (768px <= width) {
          display: grid;
          grid-template-columns: auto 1fr;
        }
      }
    }
    .english-ticket {
      .attention-list-en {
        @media (768px <= width) {
          margin-top: 40px;
        }
        @media (width < 768px) {
          margin-top: 24px;
        }
      }
      .table-style {
        @media (768px <= width) {
          table-layout: fixed;
        }
        .table-price {
          min-width: 7ch;
        }
      }
    }
  }

  /* Footer */

  footer {
    background: var(--gray);
  }
  .footer__inner {
    @media (768px <= width) {
      display: grid;
      grid-template-columns: 1fr 2fr 2fr;
    }
    @media (width < 768px) {
      display: flex;
      flex-wrap: wrap;
    }
    > * {
      @media (768px <= width) {
        padding: clamp(40px, 5vw, 80px) clamp(40px, 5vw, 80px) clamp(24px, 4vw, 40px);
        + * {
          border-left: 1px solid var(--black);
        }
      }
      @media (width < 768px) {
        padding: 64px 24px;
      }
    }
  }
  .footer__title-area {
    @media (width < 768px) {
      width: 50%
    }
    img {
      margin-inline: auto;
      @media (768px <= width) {
        width: clamp(90px, 11vw, 128px);
      }
      @media (width < 768px) {
        width: clamp(60px, 2180vw, 80px);
      }
    }
    .nav-list__sns {
      justify-content: center;
      padding: 24px 0 0;
    }
  }
  .footer__nav-area {
    container-type: inline-size;
    @media (width < 768px) {
      width: 50%;
      border-left: 1px solid var(--black);
    }
    .nav-list__main {
      border: none;
      padding: 0;
      @media (768px <= width) {
        display: grid;
        grid-template-columns: auto auto;
        gap: 40px clamp(40px, 5vw, 96px);
        margin-inline: auto;
        width: fit-content;
      }
      @media (width < 768px) {
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      li {
        @media (768px <= width) {
          width: fit-content;
        }
      }
      a {
        padding: 0;
      }
      @container (width < 290px) {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: fit-content;
        li {
          width: 100%;
        }
      }
    }
  }
  .footer__contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    @media (width < 768px) {
      border-top: 1px solid var(--black);
    }
    h3 {
      color: var(--black, #1A1A1A);
      font-size: var(--fz-16);
      font-weight: 700;
    }
    .text {
      font-size: var(--fz-14);
    }
    .acc-box {
      .dl-info {
        margin-top: 16px;
      }
    }
    .logo-area {
      margin-top: auto;
      /* border: 1px solid var(--dark-gray); */
      padding: 24px 32px;
      width: fit-content;
      img {
        width: 160px;
        margin: 0 auto;
      }
    }
  }
  .footer__copyright {
    padding: 40px 40px 24px;
    border-top: 1px solid var(--black);
    display: flex;
    @media (768px <= width) {
      justify-content: space-between;
    }
    @media (width < 768px) {
      flex-direction: column;
      gap: 24px;
      padding: 24px;
    }
    a {
      font-size: var(--fz-12);
      border-bottom: 1px solid var(--black);
      transition: all .2s var(--ease);
      display: block;
      width: fit-content;
    }
    a:hover {
      border-bottom: 1px solid transparent;
    }
    small {
      display: block;
      font-size: var(--fz-10);
      line-height: 1.2;
    }
  }
  .page-error {
    background: var(--gray);
    .inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 32px;
    }
    h1 {
      text-align: center;
      font-size: var(--fz-32);
      font-family: var(--font-serif);
    }
    p {
      text-align: center;
      font-size: var(--fz-16);
    }
  }
}

@layer utilities {
  @media (768px <= width) {
    .sp { display: none !important; }
  }
  @media (width < 768px) {
    .pc { display: none !important; }
  }
}