@layer settings, base, layout, components, modules;

@layer settings {
  :root {
    --font-family-serif: YakuHanMP, "Noto Serif JP", serif;
    --font-family-en: "acumin-variable", sans-serif;
    --font-size-xs: 0.8125rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1.25rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.5rem;
    --font-size-3xl: 3rem;
    --font-size-4xl: 4rem;
    --color-base: #000;
    --color-primary: #6262FF;
    --color-primary-dark: #01013F;
    --color-accent: #C1FF55;
    --color-bg: #F0F0F9;
    --color-border: #B1B1CB;
    --color-red: #f03;
    --color-white: #fff;
    --color-gray-light: #E6E6E6;
    --color-overlay: rgba(0, 0, 0, 0.60);
    --color-muted: rgba(0, 0, 0, 0.20);
  }
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: antialiased;
    text-size-adjust: 100%;

    &.is-open {
      overflow: hidden;
      height: 100%;
    }
  }
}

@layer layout {
  main {
    overflow: hidden;
  }

  .inner {
    max-width: 75rem;
    margin: 0 auto;

    @media (width < 768px) {
      margin: 0 1rem;
    }
  }

  .section {
    padding: 7.5rem 1rem 10rem;
    @media (width < 768px) {
      padding: 5rem 0;
    }
  }

  .section-layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .section-layout--wide {
    gap: 5rem;

    @media (width < 768px) {
      gap: 3rem;
    }
  }

  .section-layout--narrow {
    gap: 1.5rem;
  }
}

@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    gap: 1rem;
    padding: 0 1.5rem;
    min-height: 2.5rem;
    background: var(--color-base);
    color: var(--color-white);
    line-height: 1;
    overflow: hidden;

    & span {
      flex: 1;
      text-align: center;
    }

    &::after {
      content: "";
      display: block;
      width: 9px;
      height: 15px;
      background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="15" viewBox="0 0 9 15" fill="none"><path d="M0.640625 0.640137L7.39044 7.38995L0.729997 14.0504" stroke="white" stroke-width="1.28" stroke-linecap="round"/></svg>') no-repeat center center / 100%;
    }

    &.-coming {
      background: var(--color-gray-light);
      color: var(--color-muted);
      pointer-events: none;
      &::after {
        display: none;
      }
    }

    @media (768px <= width) {
      transition: 0.3s;
      &:hover {
        opacity: 0.8;
      }
    }
  }

  .button--cta {
    background: var(--color-accent);
    color: var(--color-base);
    font-weight: 600;
    &::after {
      background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="15" viewBox="0 0 9 15" fill="none"><path d="M0.640625 0.640137L7.39044 7.38995L0.729997 14.0504" stroke="black" stroke-width="1.28" stroke-linecap="round"/></svg>');
    }
    @media (768px <= width) {
      position: relative;
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.10);
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: 0.3s;
      }
      &:hover {
        opacity: 1;
        &::before {
          opacity: 1;
        }
      }
    }
  }

  .button--modal {
    font-size: var(--font-size-sm);
    &::after {
      width: 12px;
      height: 13px;
      background-image: url(../images/icon-blank.svg);
    }

    &.-coming {
      justify-content: center;
      width: 9.375rem;
      background: linear-gradient(0deg, #E6E6E6 0%, #E6E6E6 100%), #000;
      color: var(--color-muted);
      padding: 0;
      &::after {
        display: block;
        background: url('data:image/svg+xml;charset=utf-8,<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 0.5H11V8.5" stroke="black" stroke-opacity="0.2"/><rect y="3.5" width="8" height="8" fill="rgba(0, 0, 0, 0.20)"/></svg>') no-repeat center center / 100%;
      }

      & span {
        flex: 0 1 auto;
      }
    }
  }

  /* headline */

  .headline {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    line-height: 1;
    @media (width < 768px) {
      font-size: var(--font-size-2xl);
      line-height: 1.4;
    }
  }

  [data-animate="chars"] {
    .char {
      display: inline-block;
      opacity: 0;
      transition: opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1);
      transition-delay: calc(0.04s * var(--char-index));
    }

    &.is-active .char {
      opacity: 1;
    }
  }

  [data-animate="fade"] {
    opacity: 0;
    transform: translateY(10%);

    &.is-active {
      opacity: 1;
      transform: none;
      transition: 0.6s ease;
    }
  }

  .sub-headline {
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1;
  }
}

@layer modules {
  /* header */
  .header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
    padding: 0.94rem 1rem 0.5rem;
    transition: 0.3s ease;
    @media (992px <= width) {
      height: 5.5625rem;
      border-bottom: 1px solid rgba(255, 255, 255, 0.50);
      background: var(--color-overlay);
      &.is-fixed {
        display: flex;
        align-items: center;
        height: 3.5rem;
        padding: 0 1rem;
        z-index: 100;
        background: rgba(0, 0, 0, 0.50);

        & .header-logo {
          transition: 0.3s ease;
          &.-year {
            flex: 0 1 15.0625rem;
          }
        }

        & .nav-inner {
          gap: 2rem;
          transition: 0.3s ease;
        }

        & .nav-cta-toggle {
          min-height: 2.25rem;
          transition: 0.3s ease;
        }

        & .menu {
          height: auto;
          align-items: stretch;
          & li {
            display: flex;
            align-items: center;
            justify-content: center;
            & a {
              font-size: var(--font-size-sm);
              height: auto;
              padding: 0 1rem;
              gap: 0.19rem;

              & small {
                font-size: 0.75rem;
              }
            }
          }
        }
      }
    }
    @media (width < 992px) {
      position: absolute;
      padding: 0;

      &:has(.header-toggle-button[aria-expanded="true"]) {
        &::after {
          content: "";
          display: block;
          width: 100%;
          height: 100%;
          background: var(--color-overlay);
          position: absolute;
          top: 0;
          z-index: -1;
        }

        & .header-logo {
          width: 10.0625rem;
          height: 3rem;
        }

        .header-button-sp {
          display: none;
        }
      }
    }
  }

  .header-inner {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    @media (width < 992px) {
      justify-content: space-between;
      padding-left: 1rem;
      margin: 0;
    }
  }

  .header-logo {
    flex: 0 1 12.625rem;
    line-height: 0;

    &.-year {
      flex: 0 1 18.075rem;
    }
    @media (width < 1088px) {
      &.-year {
        flex: 0 1 12.25rem;
      }
    }
    @media (width < 992px) {
      display: flex;
      align-items: center;
      flex: 0 1 5.76488rem;
      height: 2.25rem;
      position: relative;
      z-index: 1;
      &.-year {
        flex: 0 1 8.9375rem;
        height: 2rem;
      }
    }
  }

  .header-buttons-wrap {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1;
    @media ( 992px <= width) {
      display: none;
    }
  }

  .header-button-sp {
    display: flex;
    align-items: center;
    width: 6.8125rem;
    height: 2rem;
    padding: 0 0.625rem;
    background: var(--color-accent);
    color: var(--color-base);
    font-size: var(--font-size-sm);
    font-weight: 600;
    &::after {
      content: "";
      display: block;
      width: 6px;
      height: 10px;
      background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="15" viewBox="0 0 9 15" fill="none"><path d="M0.640625 0.640137L7.39044 7.38995L0.729997 14.0504" stroke="black" stroke-width="1.28" stroke-linecap="round"/></svg>') no-repeat center center / 100%;
      transform: rotate(90deg);
    }

    & span {
      flex: 1;
      text-align: center;
    }
  }

  .header-toggle-button {
    width: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.50);
    position: relative;
    z-index: 1;
    & span {
      width: 1.125rem;
      height: 1px;
      background: var(--color-white);
    }

    &[aria-expanded="true"] {
      width: 4rem;
      height: 3rem;
      background: none;
      & span {
        width: 2rem;
        height: 2px;
        border-radius: 2px;
        &:first-child {
          transform: rotate(150deg) translate(4px, -6px);
        }
        &:nth-child(2) {
          opacity: 0;
        }
        &:last-child {
          transform: rotate(-150deg) translate(3px, 4px);
        }
      }
    }
    @media ( 992px <= width) {
      display: none;
    }
  }

  .nav {
    flex: 1;
    @media (width < 992px) {
      width: 100%;
      height: 100%;
      background: var(--color-primary-dark);
      color: var(--color-white);
      position: fixed;
      top: 0;
      left: 0;
      padding: 3rem 0 1.5rem;
    }

    & .cta-buttons {
      width: auto;
      margin: 2.875rem 1.5rem 0;
      @media ( 992px <= width) {
        display: none;
      }
    }
  }

  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0 10.356%;
    @media (width < 992px) {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
  }

  .nav-cta-toggle {
    font-size: var(--font-size-xs);
    &::after {
      width: 7px;
      height: 12px;
      transform: rotate(90deg);
    }

    @media (width < 992px) {
      margin: 1.5rem 1.5rem 1rem;
      height: 3.75rem;
      font-size: var(--font-size-base);
      &::after {
        width: 9px;
        height: 15px;
      }

      & + span {
        margin: 0 1.5rem;
        font-size: var(--font-size-xs);
        line-height: 1;
      }
    }
  }

  .nav-cta {
    @media (width < 992px) {
      display: none;
    }
  }

  .nav-toggle-buttons {
    border-radius: 0.5rem;
    overflow: hidden;
    margin: 0.25rem 0 0;
    width: 13.76706rem;
    position: absolute;
    transition: 0.3s;
    &[hidden] {
      display: block;
      opacity: 0;
      visibility: hidden;
    }
    &:not([hidden]) {
      opacity: 1;
      visibility: visible;
    }
    & li {
      & + li {
        border-top: 1px solid #B1B1CB;
      }
      & a {
        display: flex;
        height: 3rem;
        padding: 1rem;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        background: var(--color-white);
        font-size: var(--font-size-xs);
        font-weight: 600;
        line-height: 1.2;
        & small {
          font-size: 0.6875rem;
        }
        &::after {
          content: "";
          display: block;
          width: 7px;
          height: 12px;
          background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="15" viewBox="0 0 9 15" fill="none"><path d="M0.640625 0.640137L7.39044 7.38995L0.729997 14.0504" stroke="black" stroke-width="1.28" stroke-linecap="round"/></svg>') no-repeat center center / 100%;
          flex-shrink: 0;
        }

        &.-coming {
          background: var(--color-gray-light);
          pointer-events: none;
          &::after {
            display: none;
          }
          & span {
            opacity: 0.2;
          }
        }
      }
    }
    @media (width < 992px) {
      right: 0.25rem;
      border-radius: 0;
    }
  }

  .menu {
    display: flex;
    align-items: center;
    height: 4.125rem;
    & li {
      border-left: 1px solid rgba(255, 255, 255, 0.40);
      &:last-child {
        border-right: 1px solid rgba(255, 255, 255, 0.40);
      }
      & a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        height: 2.25rem;
        padding: 0 2rem;
        font-size: 1.125rem;
        line-height: 1;
        color: var(--color-white);

        & span {
          padding: 2px 0;
          border-bottom: solid 1px transparent;
          transition: border-bottom-color 0.3s;
        }

        & small {
          font-size: var(--font-size-sm);
          line-height: 1;
        }

        &.coming {
          pointer-events: none;
          opacity: 0.3;
          & span {
            padding: 0;
          }
        }
      }
    }

    @media (992px <= width) {
      & li {
        & a {
          &:hover {
            & span {
              border-bottom-color: inherit;
            }
          }
        }
      }
    }

    @media (width < 992px) {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      height: auto;
      border-top: 1px solid var(--color-border);

      & li {
        border-bottom: 1px solid var(--color-border);

        & a {
          display: flex;
          align-items: flex-start;
          gap: 0;
          height: 3.5rem;
          padding: 0 1.5rem;
          font-size: var(--font-size-base);
          line-height: 1.2;
        }
      }
    }
  }

  /* footer */
  .footer {
    padding: 1rem 0 1.125rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.20);
    background: var(--color-base);
    color: var(--color-white);
    font-family: var(--font-family-en);
    line-height: 1;
    text-align: center;
  }

  /* cta */
  .cta {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .cta-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1;
  }

  .cta-buttons {
    width: 100%;
    max-width: 62.125rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;

    & li {
      flex: 1;
      position: relative;
    }

    @media (width < 768px) {
      flex-direction: column;
      gap: 1rem;
    }
  }

  .cta-button {
    flex: 1;
    min-width: 23.75rem;
    display: flex;
    margin: 0 auto;
    gap: 0.92rem;
    height: 5rem;
    font-size: var(--font-size-lg);
    line-height: 1.4;
    & small {
      display: block;
      font-size: var(--font-size-base);
      font-weight: 400;
    }
    @media (width < 768px) {
      min-width: inherit;
      height: 3.75rem;
      font-size: 1rem;
      & span {
        padding-top: 0.125rem;
      }

      & small {
        font-size: var(--font-size-sm);
      }
    }
  }

  .cta-baloon {
    padding: 0.25rem 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    position: absolute;
    bottom: calc(100% - 0.375rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-align: center;
    &::after {
      content: "";
      display: block;
      width: 11px;
      height: 6px;
      background: var(--color-primary);
      clip-path: polygon(0 0, 100% 0, 50% 100%);
      position: absolute;
      inset: 100% 0 auto 0;
      margin: 0 auto;
    }

    @media (width < 768px) {
      font-size: var(--font-size-xs);
    }
  }

  .event-info {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 62.125rem;
    margin: 0 auto;

    & dl {
      display: flex;
      gap: 0.75rem;
      flex: 0 1 auto;
      font-feature-settings: 'palt' on;

      & dt {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.375rem;
        height: 1.875rem;
        padding: 0 0.75rem 0.0625rem 0.75rem;
        background: var(--color-primary);
        font-size: var(--font-size-sm);
      }

      & dd {
        font-size: 1.125rem;
        letter-spacing: 0.04em;
        line-height: 1.6;

        & span {
          font-size: var(--font-size-sm);
        }
      }
    }

    @media (width < 768px) {
      flex-direction: column;
      gap: 1rem;

      & dl {
        & dt {
          width: 3.5rem;
          padding: 0 0.4375rem 0.0625rem 0.4375rem;
        }
        & dd {
          font-size: var(--font-size-base);
        }
      }
    }
  }

  .event-info-box {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    flex: 1;
    padding: 2rem;
    background: var(--color-overlay);
    &.-head {
      flex: 0 1 100%;
      flex-direction: row;
      padding: 1.5rem 2rem;
      & dl {
        flex: 1;
      }
    }
    @media (width < 768px) {
      padding: 2rem 1rem;
      background: rgba(59, 60, 95, 0.60);
      &.-head {
        flex-direction: column;
        padding: 1.5rem 1rem;
      }
    }
  }

  .event-info-head {
    background: var(--color-white);
    color: var(--color-base);
    font-family: var(--font-family-en);
    font-size: var(--font-size-md);
    text-align: center;
    line-height: 1.4;
    border-radius: 1rem;
    padding: 0.25rem 0.5rem;

    & b {
      font-weight: 700;

      &.-jp {
        font-family: var(--font-family-base);
        font-size: var(--font-size-base);
        font-feature-settings: 'halt' on;
        margin: 0 0 0 0.5rem;
      }
    }
  }

  .event-info-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & dl {
      gap: 1rem;
    }

    & ul {
      list-style-type: disc;
      margin-left: 1.5rem;
    }
  }
}

.hero {
  padding: 0 1rem;
  background: var(--color-primary-dark);
  color: var(--color-white);
  position: relative;
  z-index: 1;
  overflow: hidden;

  &::before,
  &::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
  }

  &::before {
    content: "";
    display: block;
    width: 44.9306%;
    background: url(../images/bg-hero-01-pc.png) no-repeat left top / contain;
    top: 0;
    left: 0;
  }

  &::after {
    height: 80.5625rem;
    background: url(../images/bg-hero-02-pc.png) no-repeat left top / 100% auto;
    bottom: 0;
    left: 0;
  }

  &.is-loaded {
    & .hero-headline {
      transform: none;
      opacity: 1;
    }

    & .hero-date {
      transform: none;
      opacity: 1;
    }

    & .hero-inner {
      &::before {
        opacity: 1;
        transition: 0.5s 2s;
      }
      &::after {
        max-width: 100vw;
        opacity: 1;
        transition: 1s 1s;
      }
    }
  }
  @media (width < 768px) {
    padding: 12rem 0 7.5rem;
    &::before {
      width: 100%;
      height: calc(100% - 90px);
      background-image: url(../images/bg-hero-sp.png);
      background-size: cover;
      top: auto;
      bottom: 0;
    }

    &::after {
      display: none;
    }

    &.is-loaded {
      & .hero-inner {
        &::after {
          opacity: 1;
          transition: opacity 1s 1s;
        }
      }
    }
  }
}

.hero-inner {
  padding: 14.12rem 0 8.19rem;
  position: relative;
  > * {
    position: relative;
    z-index: 2;
  }
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  &::before {
    width: 10.22881rem;
    height: 8.83756rem;
    background: url(../images/hero-visual-light.png) no-repeat center center / contain;
    left: 417px;
    opacity: 0;
  }
  &::after {
    max-width: 0;
    width: 81.75rem;
    height: 64.4375rem;
    background: linear-gradient(270deg, #01013F 3.17%, rgba(1, 1, 63, 0.00) 12.42%), linear-gradient(270deg, rgba(1, 1, 63, 0.50) 5.85%, rgba(1, 1, 63, 0.00) 28.25%), linear-gradient(270deg, rgba(1, 1, 63, 0.50) 4.59%, rgba(1, 1, 63, 0.00) 34.52%), linear-gradient(180deg, rgba(1, 1, 63, 0.00) 49.16%, #01013F 100%), url(../images/hero-visual.png) no-repeat left top / auto;
    top: -3rem;
    left: 28.31rem;
    z-index: -1;
    opacity: 0;
  }
  @media (width < 768px) {
    padding: 0;
    &::before {
      display: none;
    }
    &::after {
      max-width: 100%;
      width: 95.2514%;
      min-width: 21.3125rem;
      height: auto;
      min-height: 17.3125rem;
      padding-top: 77.3743%;
      background-image: url(../images/hero-visual-sp.png);
      background-size: contain;
      top: auto;
      bottom: calc(100% - 21.7948vw);
      left: auto;
      right: -1rem;
      transition: none;
    }
  }
}

.hero-headline {
  line-height: 1;
  margin: 0 0 1.62rem;
  transform: translateY(100px);
  opacity: 0;
  transition: 0.8s;
  @media (width < 768px) {
    margin: 0 0 1.51rem;
    padding: 0 7.8212% 0 0;
    width: 100%;
    & img {
      width: 100%;
    }
  }
}

.hero-date {
  display: inline-flex;
  padding: 1.5rem 2.5rem;
  justify-content: center;
  gap: 1rem;
  font-size: var(--font-size-lg);
  font-family: var(--font-family-en);
  font-feature-settings: 'halt' on, 'palt' on;
  line-height: 1;
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(50px);
  opacity: 0;
  transition: 0.5s 0.3s;

  & dt {
    align-self: center;
    font-size: 3.9375rem;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-0.375rem);
    & span {
      font-size: 2.1875rem;
    }
  }

  & dd {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 2.125rem;
    padding: 0 0 0 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.50);

    & b {
      font-weight: 700;
    }
    & .title {
      display: block;
      font-size: var(--font-size-base);
    }

    & .day {
      display: flex;
      align-items: center;
      & span {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.625rem;
        height: 1.625rem;
        font-family: var(--font-family-base);
        font-size: var(--font-size-sm);
        font-weight: 700;
        line-height: 1.2;
        background: var(--color-white);
        border-radius: 50%;
        color: var(--color-primary);
        margin: 0 0 0 0.25rem;
      }
    }

    & .text {
      font-family: var(--font-family-base);
      font-feature-settings: 'halt' on, 'palt' on;
      font-size: var(--font-size-sm);
      font-weight: 700;
      line-height: 1;
      margin: 0.44rem 0 0;
    }
  }
  @media (width < 768px) {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    padding: 1rem 1.5rem;
    & dt {
      width: 100%;
    }

    & dd {
      padding: 0;
      border: none;
      & + dd {
        padding: 0 0 0 1rem;
        border-left: 1px solid rgba(255, 255, 255, 0.50);
      }
    }
  }
}

.hero-wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  margin-top: 4.69rem;
  @media (width < 768px) {
    margin-top: 3.5rem;
  }
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  font-feature-settings: 'palt' on;
  font-size: var(--font-size-md);
  letter-spacing: 0.04em;
  line-height: 2.2;
  text-align: center;
  @media (width < 768px) {
    gap: 1rem;
    font-size: var(--font-size-base);
    letter-spacing: 0.04em;
    line-height: 2;
    text-align: left;
  }
}

.hero-copy {
  font-family: var(--font-family-serif);
  font-feature-settings: 'palt' on;
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: 0.11rem;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;

  & span {
    display: block;
    font-size: 1.875rem;
    letter-spacing: 0.075rem;
    line-height: 2;
  }

  @media (width < 768px) {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: var(--font-size-xl);
    line-height: 1.4;
    letter-spacing: 0;

    & span {
      font-size: var(--font-size-base);
      line-height: 1.4;
    }
  }
}

.hero-cta {
  gap: 5.5rem;
  @media (width < 768px) {
    gap: 5rem;
  }
}

/* merit */
.merit {
  background: #EAEAF6 url(../images/bg-merit-pc.png) no-repeat center center / cover;
  position: relative;
}

.merit-contents {
  display: flex;
  flex-direction: column;
  gap: 7.5rem;
  @media (width < 768px) {
    gap: 3rem;
  }
}

.merit-item {
  display: flex;
  gap: 2.5rem;
  @media (768px <= width) {
    &:nth-child(even) {
      flex-direction: row-reverse;
    }
  }
  @media (width < 768px) {
    flex-direction: column;
  }

  &.is-active {
    & .merit-figure {
      opacity: 1;
      clip-path: inset(0);
      transition: clip-path 1.2s cubic-bezier(.355,.395,.185,1),opacity 1.2s cubic-bezier(.355,.395,.185,1);
    }
    & .merit-text {
      & p {
        opacity: 1;
        transform: none;
        transition: 0.5s 0.6s;
      }
    }
    & .merit-title {
      opacity: 1;
      transform: none;
      transition: 0.5s;
      & span {
        opacity: 1;
        transform: none;
        transition: 0.5s 0.3s;
      }
    }
  }
}

.merit-figure {
  flex: 0 1 49%;
  line-height: 0;
  clip-path: inset(10% 10% 10% 10%);
  will-change: clip-path;
  opacity: 0;
  & img {
    width: 100%;
  }
  @media (width < 768px) {
    flex: 1;
  }
}

.merit-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  font-size: var(--font-size-md);
  line-height: 2;

  @media (width < 768px) {
    font-size: var(--font-size-base);
    line-height: 1.6;
  }

  & p {
    opacity: 0;
    transform: translateY(10px);
  }
}

.merit-title {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: var(--font-family-serif);
  font-size: var(--font-size-3xl);
  font-weight: 500;
  line-height: 1;
  color: var(--color-primary);
  opacity: 0;
  transform: translateY(10px);
  & span {
    font-size: var(--font-size-lg);
    opacity: 0;
    transform: translateY(10px);
  }

  @media (width < 768px) {
    gap: 1rem;
    font-size: var(--font-size-2xl);
    & span {
      font-size: var(--font-size-md);
    }
  }
}

/* speakers */

.speakers-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem 2rem;
  @media (width < 768px) {
    flex-direction: column;
    gap: 1.5rem;
    & .speakers-item:nth-of-type(n+4) {
      display: none;
    }
    &.is-open {
      & .speakers-item:nth-of-type(n+4) {
        display: flex;
      }

      & .speakers-more {
        &::after {
          background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><line y1="6.5" x2="13" y2="6.5" stroke="black"/></svg>');
        }
      }
    }
  }
}

.speakers-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  background: var(--color-primary);
  font-family: var(--font-family-en);
  font-size: var(--font-size-xl);
  line-height: 1;
  padding: 1rem 0 1.125rem;
  color: var(--color-white);
  text-align: center;
  & .day {
    font-weight: 300;
  }

  & small {
    font-family: var(--font-family-base);
    font-feature-settings: 'halt' on;
    font-size: var(--font-size-md);
    line-height: 1;
  }

  @media (width < 768px) {
    font-size: var(--font-size-md);
    padding: 0.5rem 1rem 0.625rem 1rem;
    text-align: left;
  }
}

.speakers-item {
  flex: 0 0 calc((100% - 4rem) / 3);
  min-width: 370px;
  display: flex;
  gap: 1rem;
  @media (width < 1206px) {
    flex-grow: 1;
  }
}

.speakers-figure {
  flex: 0 0 48.5488%;
  max-width: 11.5rem;
  line-height: 0;
  @media (width < 768px) {
    flex: 0 0 100px;
  }
}

.speakers-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.speakers-tag {
  font-size: var(--font-size-sm);
  padding: 0 1rem;
  border-radius: 0.25rem;
  border: 1px solid #000;
  background: var(--color-white);
  margin: 0 0 0.75rem;
  @media (width < 768px) {
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
  }
}

.speakers-name {
  font-weight: 700;
  margin: 0 0 0.25rem;

  &.-coming {
    flex: 1;
    display: flex;
    align-items: center;
    font-family: var(--font-family-en);
    font-size: var(--font-size-lg);
    line-height: 1.2;
    margin-bottom: 2rem;
  }
}

.speakers-company {
  font-size: var(--font-size-sm);
}

.speakers-more {
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0 1.5rem;
  width: 100%;
  height: 3.75rem;
  border-radius: 0.5rem;
  border: 1px solid #000;
  background: linear-gradient(0deg, #FFF 0%, #FFF 100%), #000;
  font-weight: 600;
  color: var(--color-base);
  &::after {
    content: "";
    display: block;
    width: 13px;
    height: 13px;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13" fill="none"><line y1="6.5" x2="13" y2="6.5" stroke="black"/><line x1="6.5" y1="2.18557e-08" x2="6.5" y2="13" stroke="black"/></svg>') no-repeat center center / 100%;
  }
  & span {
    flex: 1;
    text-align: center;
  }
  @media (width < 768px) {
    display: flex;
    height: 3rem;
  }
  @media (768px <= width) {
    display: none;
  }
}

.speakers-button-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  @media (width < 768px) {
    justify-content: flex-start;
  }
}

.speakers-button {
  width: 100%;
  max-width: 36.75rem;
  height: 4rem;
  font-weight: 700;
  @media (width < 768px) {
    max-width: 100%;
    height: 3rem;
    gap: 0.75rem;
    font-size: var(--font-size-sm);
  }
}

.speakers-coming {
  width: 100%;
  font-family: var(--font-family-en);
  font-size: var(--font-size-3xl);
  line-height: 1;
  color: var(--color-muted);
  text-align: center;
  @media (width < 768px) {
    font-size: var(--font-size-md);
    text-align: left;
  }
}

/* timetable */

.timetable {
  & .headline {
    color: var(--color-white);
  }

  @media (width < 768px) {
    background: url(../images/bg-timetable-01-sp.png) no-repeat center top / 100% auto, url(../images/bg-timetable-02-sp.png) no-repeat center bottom / cover, var(--color-primary-dark);
  }
}

.timetable-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timetable-item {
  display: flex;
  gap: 0.25rem;
  & dt {
    display: flex;
    width: 10.3125rem;
    padding: 1.5rem 0;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--color-primary);

    & time {
      display: flex;
      flex-direction: column;
      font-family: var(--font-family-en);
      font-size: var(--font-size-lg);
      font-weight: 700;
      line-height: 1.2;
      color: var(--color-white);
      & span {
        font-size: var(--font-family-base);
        line-height: 1.5;
      }
    }
  }

  & dd {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--color-white);
  }
  @media (width < 768px) {
    flex-direction: column;
    & dt {
      justify-content: space-between;
      gap: 0.5rem;
      width: 100%;
      padding: 0.5rem;
      & time {
        flex-direction: row;
        align-items: center;
      }
    }

    & dd {
      justify-content: flex-start;
      gap: 1rem;
      padding: 1rem;
      font-size: var(--font-size-sm);

      & .button {
        font-size: var(--font-size-sm);
        max-width: 9.375rem;
        width: 100%;
        padding: 0;
        margin-top: auto;
        & span {
          flex: 0 0 auto;
        }
      }
    }
  }
}

.timetable-head {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.timetable-label {
  color: var(--color-primary);
  font-family: var(--font-family-en);
  font-size: var(--font-size-base);
  font-weight: 700;
  line-height: 1.4;
}

.timetable-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--font-size-lg);
  line-height: 1;
  @media (width < 768px) {
    line-height: 1.6;
  }
}

.timetable-sub-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--font-size-md);
  font-weight: 700;
  margin-top: 0.75rem;
  &:first-child {
    margin-top: 0;
  }

  & span {
    display: block;
    font-size: var(--font-size-base);
  }

  @media (width < 768px) {
    font-size: var(--font-size-base);
    margin-top: 1rem;

    & span {
      font-size: var(--font-size-sm);
    }
  }
}

.timetable-tag {
  flex-shrink: 0;
  padding: 0.5rem 1rem 0.5625rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
  border-radius: 1.1875rem;
  border: 1px solid #000;
  background: var(--color-white);

  & + .timetable-sub-title {
    margin-top: 0;
  }

  @media (width < 768px) {
    font-size: var(--font-size-xs);
  }
}

.timetable-speaker {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.timetable-speaker-figure {
  flex: 0 0 5.75rem;
  line-height: 0;
}

.timetable-speaker-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--font-size-sm);
  letter-spacing: -0.01em;
  @media (width < 768px) {
    gap: 0.5rem;
  }
}

.timetable-speaker-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: var(--font-size-md);
  font-weight: 700;
  letter-spacing: 0;

  & span {
    padding: 0.125rem 0.375rem 0.0625rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 400;
    border-radius: 0.25rem;
    border: 1px solid #000;
  }

  @media (width < 768px) {
    font-size: var(--font-size-base);
  }
}

.timetable-speakers {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  width: 100%;
  & > * {
    flex: 1 1 calc((100% - 1.5rem) / 2);
  }

  &.-col1 {
    flex-direction: column;
    & > * {
      flex: 1;
      padding: 0 0 0.5rem;
    }
  }

  @media (width < 768px) {
    flex-direction: column;
    gap: 0.5rem;

    & > * {
      flex: 1;
      padding: 0 0 0.5rem;
      &:nth-child(odd) {
        flex: auto;
      }
    }
  }
}

.session {
  display: grid;
  grid-template-columns: 10.3125rem 1fr 1fr;

  & dt {
    grid-row: 1 / span 3;
  }

  & dd {
    gap: 1.5rem;
    justify-content: flex-start;
    &.head {
      grid-column: 2 / span 2;
    }

    & .timetable-sub-title {
      gap: 0;
    }
  }
  @media (width < 768px) {
    grid-template-columns: 1fr;
    & dt {
      grid-column: 1;
      grid-row: 1;
    }
    & dd {
      gap: 1rem;
      &.head {
        grid-column: 1;
      }
    }
  }
}

/* modal */
.modal {
  max-width: 62.25rem;
  padding: 0;
  border: none;
  background: none;
  overscroll-behavior: none;

  &[open] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
  }

  &::backdrop {
    background: rgba(0, 0, 0, 0.50);
  }
  @media (width < 768px) {
    width: 100%;
    height: 100%;
    padding: 1rem;
    margin: auto;
    &[open] {
      gap: 1rem;
    }
  }
}

.modal-nav {
  background: var(--color-white);
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
  margin: 0 -3rem;
  position: sticky;
  top: 0;
  @media (width < 768px) {
    margin: 0 -1rem;
    width: calc(100% + 2rem);
  }
}

.modal-nav-menu {
  display: flex;
  overflow: auto;

  & li {
    flex: 1;

    & + li {
      border-left: 1px solid var(--color-border);
    }

    @media (width < 768px) {
      flex: 1 0 auto;
    }
  }
}

.modal-nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.75rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
  padding: 0.5rem 1rem;
  position: relative;
  &::after {
    content: "";
    display: block;
    width: 11px;
    height: 8px;
    background: var(--color-border);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
  }
  @media (width < 768px) {
    height: auto;
    padding: 1rem 0.5rem;
    font-size: var(--font-size-xs);
    &::after {
      display: none;
    }
  }
}

.modal-inner {
  display: flex;
  flex-direction: column;
  max-height: 60rem;
  padding: 0 3rem 4rem;
  overflow: auto;
  background: var(--color-white);
  scroll-behavior: smooth;
  scroll-padding-top: 3.75rem;
  @media (width < 768px) {
    width: 100%;
    max-height: 100%;
    padding: 0 1rem 2rem;
    gap: 2.25rem;
  }
}

.modal-contents {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 0;

  @media (width < 768px) {
    padding: 0;
    gap: 1rem;
    &:first-child {
      padding-top: 1rem;
    }
  }
}

.modal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.8125rem 1rem 1rem 1rem;
  background: var(--color-primary);
  @media (width < 768px) {
    padding: 0.5rem;
  }
}

.modal-meta-time {
  color: var(--color-white);
  font-family: var(--font-family-en);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1;
  @media (width < 768px) {
    font-size: var(--font-size-md);
  }
}

.modal-meta-tag {
  background: var(--color-white);
  color: #000;
  font-feature-settings: 'palt' on;
  font-size: var(--font-size-sm);
  font-weight: 700;
  line-height: 1;
  padding: 0.5rem 1rem 0.5625rem 1rem;
  border-radius: 1.1875rem;
}

.modal-category {
  font-size: var(--font-size-2xl);
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 0.5rem;
  @media (width < 768px) {
    font-size: var(--font-size-lg);
  }
}

.modal-content {
  padding: 0 0 2rem;
  line-height: 2;

  & + .modal-content {
    padding: 2rem 0;
    border-top: 1px solid var(--color-base);
  }

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

  &.-pd-0 {
    padding: 0;
  }

  @media (width < 768px) {
    font-size: var(--font-size-sm);
  }
}

.modal-content-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 0.5rem;

  & .modal-tag {
    margin: 0 0 1rem;
  }

  @media (width < 768px) {
    margin: 0 0 0.5rem;
  }
}

.modal-content-category {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.6;
  @media (width < 768px) {
    font-size: var(--font-size-base);
  }
}

.modal-content-label {
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-primary);
  @media (width < 768px) {
    font-size: var(--font-size-base);
  }
}

.modal-content-title {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: var(--font-size-xl);
  font-weight: 600;
  line-height: 1.4;

  & + .modal-content-title {
    margin-top: 1.5rem;
  }
  @media (width < 768px) {
    gap: 0.25rem;
    font-size: var(--font-size-lg);
    & + .modal-content-title {
      margin-top: 0.5rem;
    }
  }
}

.modal-content-sub-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.6;
  @media (width < 768px) {
    font-size: var(--font-size-md);
  }
}

.modal-speaker {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 2rem 0 0;
  @media (width < 768px) {
    flex-direction: column;
    gap: 1rem;
    margin: 1rem 0 0;
  }
}

.modal-speaker-figure {
  flex-shrink: 0;
  width: 8.75rem;
  line-height: 0;
  @media (width < 768px) {
    width: 6.25rem;
  }
}

.modal-speaker-text {
  line-height: 1.8;
}

.modal-speaker-title {
  width: 100%;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1;
  @media (width < 768px) {
    font-size: var(--font-size-base);
  }
}

.modal-speaker-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 0 1 calc((100% - 2rem) / 2);
  @media (width < 768px) {
    flex: 1;
  }
}

.modal-speaker-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.8;
  & span {
    padding: 0.125rem 0.375rem 0.0625rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.6;
    border-radius: 0.25rem;
    border: 1px solid #000;
  }
  @media (width < 768px) {
    font-size: var(--font-size-base);
  }
}

.modal-speaker-company {
  font-size: var(--font-size-sm);
  @media (width < 768px) {
    font-size: var(--font-size-xs);
  }
}

.modal-close-icon {
  line-height: 0;
  align-self: flex-end;
  margin-bottom: -1rem;
  @media (width < 768px) {
    margin: 0;
  }
}

.modal-close-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 13.875rem;
  height: 3rem;
  padding: 0 1rem;
  font-weight: 600;
  line-height: 1;
  background: var(--color-white);
  border-radius: 0.5rem;
  cursor: pointer;
  &::after {
    content: "";
    display: block;
    width: 0.75rem;
    height: 0.75rem;
    background: url(../images/icon-close.svg) no-repeat center center / 100%;
  }
  & span {
    flex: 1;
    text-align: center;
  }
  @media (width < 768px) {
    margin: 0;
  }
}

.modal-coming {
  padding: 1rem 0;
  color: var(--color-muted);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1;
  @media (width < 768px) {
    padding: 0.5rem 0;
    font-size: var(--font-size-md);
  }
}

/* outline */
.outline {
  background: var(--color-bg);
  & dl {
    display: flex;
    gap: 1rem;
  }
  @media (width < 768px) {
    & dl {
      flex-direction: column;
    }
  }
}
.outline-item {
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
  line-height: 1.6;
  &:last-of-type {
    border-bottom: solid 1px var(--color-border);
  }

  & dt {
    width: 12.5rem;
    font-weight: 700;
  }

  & dd {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    & a {
      text-decoration: underline;
    }

    & dl {
      & dt {
        width: auto;
        flex-shrink: 0;
      }
    }

    ul {
      list-style-type: disc;
      margin-left: 1.5rem;
    }

    & small {
      font-size: var(--font-size-sm);
      margin: 0 0 0 0.5rem;
    }
  }
  @media (768px <= width) {
    & dd {
      & a {
        &:hover {
          text-decoration: none;
        }
      }
    }
  }
  @media (width < 768px) {
    gap: 0.5rem;
    & dt {
      width: auto;
    }
    & dd {
      font-size: var(--font-size-sm);
      & dl {
        gap: 0;
      }
      & small {
        font-size: var(--font-size-xs);
        margin: 0;
      }
    }
  }
}

/* place */
.place {
  position: relative;
  padding-bottom: 12.12rem;
  @media (width < 768px) {
    padding-bottom: 6.5rem;
  }
  & .headline {
    font-size: var(--font-size-2xl);
    padding: 0 0 1rem;
    @media (width < 768px) {
      padding: 0 0 1.5rem;
    }
  }
}
.place-wrap {
  display: grid;
  grid-template-columns: 1fr 57.5%;
  grid-template-rows: auto auto;
  gap: 1.5rem;
  @media (width < 768px) {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 1rem;
  }
}
.place-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  & dl {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.31rem 0 0;
    & dt {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 5.125rem;
      padding: 0.25rem 0.75rem 0.3125rem 0.75rem;
      background: var(--color-base);
      font-size: var(--font-size-sm);
      letter-spacing: 0.1em;
      line-height: 1;
      color: var(--color-white);
    }

    & dd.-emphasis {
      color: var(--color-red);
    }
  }
  @media (width < 768px) {
    gap: 1rem;

    & dl {
      & dt {
        font-size: var(--font-size-xs);
      }
      & dd {
        font-size: var(--font-size-sm);
      }
    }
  }
}

.access-list {
  & li {
    display: flex;
    gap: 0.125rem;
    &::before {
      content: "■";
    }
  }
}

.place-button {
  width: 15rem;
  height: 3rem;
  @media ( 768px <= width ) {
    grid-column: 1 / 2;
    grid-row: 2 / 2;
  }
}

.place-map {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  & iframe {
    width: 100%;
  }
  @media ( 768px <= width ) {
    grid-row: 1 / span 2;
  }
  @media (width < 768px) {
    flex-direction: column-reverse;
    gap: 1rem;

    & iframe {
      height: auto;
      aspect-ratio: 179/148;
      margin: 0 0 0.5rem;
    }
  }
}

.place-map-note {
  font-size: var(--font-size-sm);

  & a {
    text-decoration: underline;
    @media (768px <= width) {
      &:hover {
        text-decoration: none;
      }
    }
  }
}

/* faq */

.faq {
  padding-bottom: 12.5rem;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
  & .sub-headline {
    margin-top: 1rem;
    &:first-child {
      margin-top: 0;
    }
  }
  & dl {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: var(--color-white);
    & dt,
    & dd {
      display: flex;
      gap: 1rem;
      &::before {
        display: block;
        font-family: var(--font-family-en);
        font-size: var(--font-size-xl);
        font-weight: 700;
        line-height: 1;
      }

      & p {
        padding-top: 0.5rem;
      }
    }
    & dt {
      font-weight: 600;
      &::before {
        content: "Q";
        color: #423795;
      }
    }
    & dd {
      &::before {
        content: "A";
        color: #CE009B;
      }
    }
  }

  @media (width < 768px) {
    padding-bottom: 9.12rem;
    & .faq-wrap {
      gap: 1rem;
    }
    & dl {
      gap: 0.75rem;
      padding: 1rem;
      & dt,
      & dd {
        gap: 0.5rem;
        font-size: var(--font-size-sm);
        &::before {
          font-size: var(--font-size-md);
        }
        & p {
          padding: 0;
        }
      }
    }
  }
}

.text-slider {
  position: absolute;
  bottom: -23px;
  left: 0;
  right: 0;
  overflow: visible;
  @media (width < 768px) {
    bottom: -0.5rem;
  }
}

.bg-slider {
  display: flex;
  width: max-content;
  will-change: transform;
}

.bg-slide-item {
  flex-shrink: 0;
  padding-right: 4.8rem;
  box-sizing: border-box;
  & img {
    width: auto;
  }
  @media (width < 768px) {
    & img {
      height: 4.23219rem;
    }
  }
}

@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* フッター上CTA */
.cta-area {
  padding: 7.5rem 1rem 10rem;
  background: var(--color-primary-dark) url(../images/bg-cta-pc.png) no-repeat center bottom / cover;
  color: var(--color-white);
  overflow: hidden;
  position: relative;
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  &::before {
    width: 13.125rem;
    height: 11.3125rem;
    background: url(../images/hero-visual-light.png) no-repeat center center / contain;
    bottom: -5.63rem;
    left: -7.625rem;
    right: 0;
    margin: 0 auto;
    z-index: 2;
    opacity: 0;
  }
  &::after {
    content: "";
    display: block;
    width: 81.75rem;
    height: 64.4375rem;
    background: linear-gradient(220deg, #01013F 27.1%, rgba(1, 1, 63, 0.00) 60.88%), linear-gradient(270deg, #01013F 3.17%, rgba(1, 1, 63, 0.00) 12.42%), linear-gradient(270deg, rgba(1, 1, 63, 0.50) 5.85%, rgba(1, 1, 63, 0.00) 28.25%), linear-gradient(270deg, rgba(1, 1, 63, 0.50) 4.59%, rgba(1, 1, 63, 0.00) 34.52%), linear-gradient(180deg, rgba(1, 1, 63, 0.00) 49.16%, #01013F 100%), url(../images/hero-visual.png) no-repeat left top / auto;
    bottom: -42.56rem;
    left: calc(50% - 107.5px);
    opacity: 0;
  }

  &.is-active {
    &::before {
      opacity: 1;
      transition: 0.5s 1s;
    }
    &::after {
      opacity: 1;
      transition: 0.5s 0.5s;
    }
  }

  @media (768px <= width) {
    & .cta-info {
      max-width: 740px;
      & dl {
        &:nth-child(odd) {
          width: 25.25rem;
        }
      }
    }
  }
  @media (width < 768px) {
    background-image: url(../images/bg-cta-sp.png);
    padding: 5rem 0 10rem;
    &::before {
      width: 14.5rem;
      height: 12.5625rem;
      left: 0;
      bottom: -5.78rem;
    }
    &::after {
      width: 43.75rem;
      height: 34.5rem;
      left: calc(50% - 5.625rem);
      transform: rotate(-21deg);
      bottom: -6.125rem;
    }
  }
}

.cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4.5rem;
  max-width: 62.1875rem;
  margin: 0 auto;
  position: relative;
  z-index: 1;

  @media (width < 768px) {
    gap: 4rem;
    margin: 0 1rem;
  }
}

.cta-copy {
  font-family: var(--font-family-serif);
  font-feature-settings: 'palt' on;
  font-size: 2.75rem;
  font-weight: 500;
  letter-spacing: 0.11rem;
  line-height: 1.4;
  text-align: center;

  @media (width < 768px) {
    font-size: var(--font-size-xl);
    letter-spacing: 0;
    text-align: left;
  }
}

/* 下層ページ */
.lower {
  background: #01013F;
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 480px;
    background: url(../images/bg-hero-01-pc.png) no-repeat left bottom / contain;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  & > * {
    position: relative;
    z-index: 1;
  }
  @media (width < 768px) {
    &::before {
      width: 100%;
      height: calc(100% - 90px);
      background-image: url(../images/bg-hero-sp.png);
      background-size: cover;
      top: auto;
      bottom: 0;
    }
  }
}

.page-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3rem;
  padding-top: 3.75rem;
  @media (width < 768px) {
    gap: 1rem;
    padding: 1.1875rem 0 0.5rem;
  }
}

.page-headline {
  align-self: flex-start;
  font-family: var(--font-family-en);
  font-size: var(--font-size-4xl);
  line-height: 1;
  color: var(--color-white);
  position: relative;
  &::before,
  &::after {
    content: "";
    display: block;
    position: absolute;
  }
  &::before {
    width: 5.375rem;
    height: 4.6875rem;
    background: url(../images/hero-visual-light.png) no-repeat center center / contain;
    top: -1.44rem;
    left: calc(100% - 2.5rem);
  }
  &::after {
    content: "";
    display: block;
    width: 100vw;
    height: 64.4375rem;
    background: linear-gradient(270deg, #01013F 3.17%, rgba(1, 1, 63, 0.00) 12.42%), linear-gradient(270deg, rgba(1, 1, 63, 0.50) 5.85%, rgba(1, 1, 63, 0.00) 28.25%), linear-gradient(270deg, rgba(1, 1, 63, 0.50) 4.59%, rgba(1, 1, 63, 0.00) 34.52%), linear-gradient(180deg, rgba(1, 1, 63, 0.00) 49.16%, #01013F 100%), url(../images/hero-visual.png) no-repeat left top / auto;
    top: -21rem;
    left: calc(100% - 2.5rem);
    z-index: -1;
  }

  @media (width < 768px) {
    font-size: max(10.2564vw , 2.5rem);
    &::before {
      display: none;
    }
    &::after {
      width: 87.4359vw;
      min-width: inherit;
      height: auto;
      padding-top: 277px;
      background: url(../images/hero-visual-sp.png) no-repeat right bottom / cover;
      top: auto;
      bottom: calc(100% - 10.2564vw);
      left: calc(100% - 46.1538vw);
    }
  }
}

.page-date {
  color: var(--color-white);
  font-feature-settings: 'palt' on;
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  @media (width < 768px) {
    font-size: var(--font-size-base);
  }
}