:root {
  --font-family: "Noto Sans JP", sans-serif;
  --font-family-en: "Montserrat", sans-serif;
  --font-family-mincho: "Hiragino Mincho ProN", "Yu Mincho", "游明朝", "MS PMincho", serif;
  --font-size-base: 1rem;
  --font-size-sm: 0.875rem;
  --color-base: #222;
  --pink-900: #b80073;
  --pink-700: #e4007f;
  --pink-500: #f04fa5;
  --pink-200: #fbd2e9;
  --pink-100: #fce4ef;
  --pink-50: #fff1f7;
  --color-accent: var(--pink-700);
  --color-accent-strong: var(--pink-900);
  --cta-gradient: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
}
@font-face {
  font-family: "Noto Sans JP";
  font-display: swap;
  font-style: normal;
  src: url("/resource/assets/fonts/NotoSansJP-VariableFont_wght.woff2") format("woff2");
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  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,
  &.is-locked {
    overflow: hidden;
    height: 100%;
  }
}

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

.section {
  padding: 7.5rem 1rem;

  & .inner {
    position: relative;
    z-index: 1;
  }
}

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

.section.timetable {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

@media (width < 768px) {
  .inner {
    margin: 0 1rem;
  }
  .section {
    padding: 5rem 0;
  }
  .section.timetable {
    padding: 4.5rem 0;
  }
}

/* parts */
.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: var(--color-base);
  border-radius: 0.5rem;
  color: #fff;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}

.button-text {
  flex: 1;
  text-align: center;
}

.button-icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 0.5625rem;
  height: 1rem;
  overflow: hidden;
  position: relative;
  &::before,
  &::after {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="9" height="16" viewBox="0 0 9 16" fill="none"><path d="M1.25018 1.29486L8 8.04467L1.33956 14.7051" stroke="white" stroke-width="1.28" stroke-linecap="round"/></svg>')
      no-repeat center center;
    background-size: 100% 100%;
    transition: 0.3s;
  }
}

.button--cta {
  width: 100%;
  max-width: 36.375rem;
  height: 5rem;
  padding: 0 1.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  background: var(--cta-gradient);
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.5);
  transition: all 0.3s ease;
}

.link {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.arrow-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  line-height: 1.4;
  cursor: pointer;
  &::after {
    content: "";
    display: block;
    width: 1.125rem;
    height: 1.125rem;
    background: url('data:image/svg+xml;charset=utf-8,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="18" height="18" rx="9" fill="black"/><path d="M7.51709 6.05347L10.4833 9.01969L7.55636 11.9466" stroke="white" stroke-linecap="round"/></svg>')
      no-repeat center center;
    background-size: 100% 100%;
  }
}

.headline {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.sub-headline {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

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

@media (768px <= width) {
  .button {
    position: relative;
    overflow: hidden;
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.15);
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      transition: 0.3s;
    }
    &:hover {
      text-decoration: none;
      &::before {
        opacity: 1;
      }

      & .button-icon {
        &::before,
        &::after {
          transform: translateX(calc(100% + 0.5rem));
        }
      }
    }
  }

  .button--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(168, 85, 247, 0.7);
  }

  .button--cta:active {
    transform: translateY(0);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.6);
  }

  .link {
    transition: text-decoration-color 0.3s;
    &:hover {
      text-decoration-color: transparent;
    }
  }

  .arrow-link {
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color 0.3s;
    text-underline-offset: 3px;
    &:hover {
      text-decoration-color: currentColor;
    }
  }
}
@media (width < 768px) {
  .button--cta {
    max-width: 20.375rem;
    height: 3.75rem;
    font-size: 1rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 16px rgba(168, 85, 247, 0.5);
  }

  .button--cta:active {
    transform: scale(0.98);
    box-shadow: 0 2px 12px rgba(168, 85, 247, 0.6);
  }
  .headline {
    font-size: 2.5rem;
  }
  .sub-headline {
    font-size: 1.5rem;
  }
}

/* header */
.header {
  padding: 1.125rem min(8.3333%, 7.5rem);
  background: #fff;
  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 999;
}

.header-layout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  & img {
    height: 3rem;
    width: auto;
  }
}

@media (768px <= width < 1200px) {
  .header-logo {
    & img {
      height: 2.5rem;
    }
  }
}

@media (768px <= width < 1200px) {
  .header {
    padding: 1rem min(4.5%, 3.5rem);
  }

  .header-layout {
    gap: 1.25rem;
  }

  .nav-inner {
    gap: 1rem;
  }

  .menu {
    gap: 1.25rem;
    font-size: 0.9375rem;
    & a {
      white-space: nowrap;
    }
  }

  .nav-cta-button {
    padding: 0 1rem;
    font-size: 0.875rem;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex: 1;
}

.nav-cta-button {
  height: 2.5rem;
  padding: 0 1.5rem;
  border-radius: 0.375rem;
  font-size: 0.9375rem;
  font-weight: 500;
  flex-shrink: 0;
  background: var(--cta-gradient);
  box-shadow: 0 3px 12px rgba(168, 85, 247, 0.4);
  transition: all 0.3s ease;
}

.nav-cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(168, 85, 247, 0.6);
}

.menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  font-weight: 400;
  & a {
    color: var(--color-base);
    text-decoration: none;
    transition: opacity 0.2s;
    &:hover {
      opacity: 0.6;
    }
  }
}

@media (768px <= width) {
  .nav {
    display: flex;
    align-items: center;
    flex: 1 0 auto;
  }
}

@media (width < 991px) {
  .header {
    padding: 1.25rem 1rem;
  }
}

@media (768px <= width < 991px) {
  .nav-cta-button {
    & .button-text {
      & span {
        display: none;
      }
    }
  }
}

@media (width < 768px) {
  .header {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    &:has(.header-toggle-button[aria-expanded="true"]) {
      & .header-layout {
        background: #ebeaf1;
      }
      &::before {
        content: "";
        display: block;
        width: 100%;
        height: 100vh;
        background: rgba(0, 0, 0, 0.6);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  .header-layout {
    align-items: center;
    justify-content: space-between;
    gap: 0;
    position: relative;
  }
  .header-logo {
    width: 11.875rem;
    height: 2.625rem;
  }
  .header-cta-button {
    margin: 0 1rem 0 auto;
    gap: 0;
    width: 6.8125rem;
    height: 2rem;
    padding: 0 0.625rem;
    font-size: var(--font-size-sm);
    background: var(--cta-gradient);
    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.4);
    &::after {
      width: 0.375rem;
      height: 0.625rem;
    }
    &[hidden] {
      display: none;
    }
  }
  .header-toggle-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: 0.31rem;
    width: 3.1875rem;
    height: 3rem;
    & span {
      width: 1.5rem;
      height: 0.125rem;
      background: #222;
      border-radius: 0.125rem;
      transition: 0.5s;
    }

    &[aria-expanded="true"] {
      & span {
        width: 2rem;
        &:first-child {
          transform: rotate(150deg) translate(5px, -7px);
          transform-origin: center;
        }
        &:nth-child(2) {
          transform: translateX(3.1875rem);
          opacity: 0;
        }
        &:last-child {
          transform: rotate(-150deg) translate(4px, 4px);
          transform-origin: center;
        }
      }
    }
  }
  .nav {
    width: 100%;
    position: absolute;
    top: 3rem;
    background: #ebeaf1;
    z-index: 999;
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
    &[hidden] {
      display: block;
      opacity: 0;
      visibility: hidden;
    }
  }
  .nav-inner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    padding: 0 0 3rem;
  }
  .menu {
    align-self: stretch;
    flex-direction: column;
    gap: 0;
    font-size: var(--font-size-base);
    font-weight: 400;
    border-top: 1px solid #ccc;

    & li {
      border-bottom: 1px solid #ccc;
      & a {
        display: flex;
        align-items: center;
        padding: 0.91rem 1.53rem;
        line-height: 1.7;
      }
    }
  }
  .nav-cta-button {
    width: 100%;
    max-width: 20.375rem;
    height: 3.75rem;
  }
}

@media (width >= 1200px) {
  .header {
    padding: 0.875rem min(6.25%, 6rem);
  }

  .header-logo {
    & img {
      height: 2.4rem;
    }
  }

  .nav-cta-button {
    height: 2.25rem;
    padding: 0 1.25rem;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.35);
  }

  .nav-cta-button:hover {
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.55);
  }
}

/* footer */
.footer {
  padding: 1.5rem;
  background: var(--color-base);
  color: #fff;
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  line-height: 1;
  text-align: center;
}

/* utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (width >= 768px) {
  .for-sp {
    display: none;
  }
}
@media (width < 768px) {
  .for-pc {
    display: none;
  }
}

/* CTA */
.cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;

  & .button--cta {
    margin-left: auto;
    margin-right: auto;
  }
}

.cta-copy {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1rem 0.75rem;
  text-align: center;
}

.cta-copy-image {
  display: block;
  width: 100%;
  height: auto;
}

.cta-info {
  display: grid;
  grid-template-columns: repeat(2, minmax(18rem, 1fr));
  gap: 1.25rem 1.5rem;
  width: 100%;
  max-width: 36.375rem;
  margin: 0 auto;
  & dl {
    display: grid;
    grid-template-columns: 4.375rem 1fr;
    align-items: center;
    gap: 0.75rem;
    line-height: 1.45;
  }
  & dt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.25rem 0 0.3125rem;
    background: var(--color-base);
    border-radius: 0.25rem;
    color: #fff;
    font-size: var(--font-size-sm);
    letter-spacing: 0.01em;
  }
  & dd {
    font-weight: 700;
    font-feature-settings: "palt" on;
    letter-spacing: 0.04em;
  }
  & dl.cta-info-wide {
    grid-column: 1 / -1;
  }
}

.cta-section {
  background: #fff;
  > * {
    position: relative;
    z-index: 1;
  }
}

.cta-section--hero {
  background: var(--pink-50);
}

.bg-layer--cta-hero {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 83.3333%;
  max-width: 100rem;
  margin: 0 auto;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.bg-layer--cta-hero .deco-soft {
  position: absolute;
}

.bg-wrap:last-of-type .cta-section {
  padding-top: 2.5rem;
}

.bg-wrap:last-of-type .cta-copy {
  padding-bottom: 0.5rem;
}

@media (768px <= width < 1200px) {
  .cta-section .cta-copy {
    max-width: 36rem;
    padding: 0 2rem 1rem;
  }

  .cta-section .cta-info {
    max-width: 32rem;
    grid-template-columns: repeat(2, minmax(12rem, 1fr));
    gap: 1rem 1.25rem;
  }
}

@media (width < 768px) {
  .cta {
    align-self: stretch;
  }

  .hero .cta {
    align-self: center;
    width: 100%;
    max-width: 20.375rem;
  }

  .cta-copy {
    max-width: 22rem;
    padding: 0 0.75rem 0.25rem;
  }
  .cta-info {
    grid-template-columns: 1fr;
    gap: 0.75rem;
    max-width: 20.375rem;
    margin: 0 auto;
    & dl {
      width: 100%;
      display: grid;
      grid-template-columns: 3.375rem 1fr;
      column-gap: 0.5rem;
      row-gap: 0.5rem;
    }
    & dt {
      font-size: 0.75rem;
    }
    & dd {
      font-size: var(--font-size-sm);
      font-weight: 400;
      word-break: break-word;
    }
  }

  .cta-section {
    padding: 3rem 0;
  }
}

/* hero */

.hero {
  padding: 0;
  background: var(--pink-50);
  position: relative;
  overflow: hidden;
  &::before {
    content: "";
    display: block;
    width: calc(100% - 2rem);
    padding-top: 109.865%;
    position: absolute;
    bottom: 9.16rem;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    filter: blur(170px);
    will-change: filter;
  }
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 83.3333%;
  max-width: 100rem;
  height: 100%;
  margin: 0 auto;
  perspective: 1000px;
  & span {
    position: absolute;
    z-index: 1;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    will-change: transform;
    & img {
      width: 100%;
    }
  }

  & .gumi01 {
    width: 26%;
    top: min(-3vw, -2.75rem);
    left: -12%;
  }
  & .gumi02 {
    width: 32.1467%;
    top: min(-7.9167vw, 7.9375rem);
    right: -12.0833%;
  }
  & .gumi03 {
    width: 21.5833%;
    top: min(21.8055vw, 349px);
    right: -5.5%;
  }
  & .gumi04 {
    width: 29.5833%;
    top: min(27.5vw, 440px);
    left: -21.4167%;
    z-index: 2;
  }
  & .gumi05 {
    width: 18.4167%;
    top: min(43.3333vw, 693px);
    left: -9.8333%;
  }
  & .gumi06 {
    width: 14.3333%;
    top: min(45.9722vw, 736px);
    right: 1.0833%;
  }
  & .gumi07 {
    width: 29.8333%;
    top: min(56.5972vw, 906px);
    left: -9.8333%;
    z-index: 2;
  }
  & .gumi08 {
    width: 27.0833%;
    top: min(60.5556vw, 969px);
    right: -9.9167%;
    z-index: 2;
  }
  & .gumi09 {
    width: 19.1667%;
    top: min(8.6111vw, 138px);
    left: -18.3333%;
  }
  & .gumi10 {
    width: 16.41667%;
    top: min(32.8472vw, 526px);
    right: -11.6667%;
  }
  & .gumi11 {
    width: 18.6667%;
    top: min(73.75vw, 1180px);
    left: -13.0833%;
  }
  & .gumi12 {
    width: 13.75%;
    top: min(74.375vw, 1190px);
    right: -10%;
    & img {
      width: 100%;
      transform: rotate(-150deg);
    }
  }
  & .gumi13 {
    width: 47%;
    bottom: -20.8333vw;
    right: 16.9167%;
  }
}

.hero-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  z-index: 2;
  padding: 0 1rem 7.5rem;
}

.top-kv-bg {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-headline {
  position: relative;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  line-height: 0;

  & picture {
    display: block;
  }

  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.hero-people {
  position: relative;
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  min-height: clamp(16rem, 28vw, 24rem);
}

.hero-person {
  position: absolute;
  bottom: 0;
  left: max(-4rem, calc((100% - 75rem) / 2 - 2.5rem));
  width: clamp(220px, 28vw, 420px);
  height: auto;
  z-index: 3;
  filter: drop-shadow(0 20px 60px rgba(184, 0, 115, 0.35));
}

.hero-avatars {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(0.75rem, 2vw, 2.5rem);
  margin: 0;
  padding-left: clamp(15rem, 30vw, 30rem);
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
  list-style: none;
  max-width: 50rem;
}

.hero-avatars li {
  display: flex;
  align-items: flex-end;
}

.hero-avatars img {
  width: clamp(90px, 9vw, 150px);
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(184, 0, 115, 0.25));
}

.hero-speakers {
  width: 100%;
  max-width: 76rem;
  margin: 0 auto 2.5rem;
  line-height: 0;
  & picture {
    display: block;
  }
  & img {
    display: block;
    width: 100%;
    height: auto;
  }
}

.hero-lead {
  line-height: 2.4;
  text-align: center;
  & p + p {
    margin-top: 2.4rem;
  }
}

@media (768px <= width < 1200px) {
  .hero {
    padding-top: 2.5rem;
  }

  .hero-layout {
    padding: 0 2rem 5.5rem;
    gap: clamp(2rem, 4vw, 3rem);
  }

  .hero .cta {
    width: 100%;
    max-width: 28rem;
  }

  .hero .cta-info {
    grid-template-columns: repeat(2, minmax(9rem, 1fr));
    gap: 1rem 1.5rem;
    max-width: 32rem;
  }

  .hero .cta-info dl {
    grid-template-columns: 3.5rem 1fr;
  }

  .hero-speakers {
    margin-bottom: 2rem;
  }

  .hero-lead {
    max-width: 48rem;
    line-height: 2.1;
  }
}

@media (width < 1440px) {
  .hero-bg {
    & .gumi07 {
      bottom: 114px;
      top: auto;
    }
    & .gumi08 {
      bottom: 101px;
      top: auto;
    }
    & .gumi11 {
      bottom: 38px;
      top: auto;
    }
    & .gumi12 {
      bottom: 24px;
      top: auto;
    }
  }
}

@media (width < 768px) {
  .hero {
    padding: 0;
    &::before {
      width: 73.8125rem;
      height: 81.0625rem;
      padding-top: 0;
      bottom: 21.31rem;
    }
  }
  .hero-layout {
    gap: 2rem;
    padding: 0 1rem 5.375rem;
  }
  .hero-speakers {
    margin-bottom: 1.25rem;
  }
  .hero-lead {
    line-height: 2;
    text-align: left;
    & p + p {
      margin-top: 2rem;
    }
  }

  .hero-bg {
    width: 100%;
    & .gumi01 {
      width: 180px;
      top: -64px;
      left: -70px;
    }
    & .gumi02,
    & .gumi03,
    & .gumi04,
    & .gumi05 {
      display: none;
    }
    & .gumi06 {
      width: 106px;
      top: 629px;
      right: -21px;
    }
    & .gumi07 {
      width: 277px;
      bottom: 376px;
      left: -139px;
      z-index: 2;
    }
    & .gumi08 {
      width: 246px;
      bottom: 230px;
      right: -123px;
      z-index: 2;
    }
    & .gumi09,
    & .gumi10 {
      display: none;
    }
    & .gumi11 {
      width: 148px;
      bottom: 303px;
      left: -84px;
      & img {
        transform: rotate(12deg);
      }
    }
    & .gumi12 {
      width: 162px;
      bottom: 172px;
      right: -88px;
      & img {
        transform: rotate(12deg);
      }
    }
    & .gumi13 {
      width: 395px;
      bottom: -151px;
      right: 48px;
    }
  }
}

@media (width >= 1024px) {
  .hero {
    padding-top: 1rem;
  }

  .hero-headline {
    margin-bottom: clamp(1.5rem, 2.75vw, 2.5rem);
  }

  .hero-layout {
    gap: clamp(1.5rem, 3vw, 3rem);
    padding: 0 2.5rem 4.5rem;
    margin-top: -1.75rem;
  }

  .hero .cta {
    gap: 1.25rem;
  }

  .hero .cta-info {
    gap: 1rem 1.25rem;
    margin-top: -0.25rem;
  }
}

/* タイムテーブル */
.timetable {
  position: relative;
  overflow: hidden;

  & .section-layout {
    position: relative;
    z-index: 1;
  }
}

.timetable-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timetable-time {
  font-family: var(--font-family-en);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.timetable-contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  flex: 1;
  & > *:first-child {
    flex: 1;
  }
}

.timetable-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  margin: 0;
}

.session-number {
  display: block;
  font-size: 1.3rem;
  line-height: 1.6;
  margin: 0;
}

.timetable-info {
  width: 57.4803%;
  border-left: 1px dashed #000;
  padding-left: 1.5625rem;
  margin-left: 0;
  margin-right: 0;

  & .note {
    line-height: 2.2;
  }
}

.timetable-wrap {
  overflow: auto;
}

.timetable-horizontal {
  width: 75rem;
}

.timetable-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  & li {
    padding: 0.25rem 0.5rem 0.3125rem 0.5rem;
    font-size: 0.75rem;
    line-height: 1;
    background: #fff;
    border-radius: 0.25rem;
  }
}

.timetable-speaker-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  & li {
    font-size: 0.75rem;
    line-height: 1.6;
  }
}

.timetable-speakers-inline {
  width: 100%;
  margin-top: 0.5rem;
}

.timetable-speakers-label {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  margin: 0;
}

.timetable-speakers-inline-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
  margin: 0.25rem 0 0;
}

.timetable-speakers-inline-list li {
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.timetable-speaker-name {
  display: flex;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

.timetable-coming {
  color: #666;
  font-size: 0.75rem;
  line-height: 1.4;
}

.timetable-permanent-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  & li {
    font-size: var(--font-size-sm);
    line-height: 1.6;
    font-weight: 700;
    border-left: 4px solid #000;
    padding: 0 0 0 1rem;
  }
}

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

.timetable-footer-bottom {
  display: flex;
  justify-content: flex-end;
  padding: 0.75rem 0 0;
  border-top: 1px dashed #000;
  flex: 0 0 100%;
  width: 100%;
}

@media (width >= 768px) {
  .timetable-head {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .timetable-head .timetable-title {
    margin: 0.5rem 0;
  }
}

.timetable-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  & dl {
    margin: 0;
    & dd {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin: 0;
    }
  }
}

@media (width >= 768px) {
  .timetable-vertical {
    & dl {
      display: grid;
      grid-template-columns: 9.375rem auto;
      gap: 0;
      margin: 0;
      &:nth-child(odd) {
        & .timetable-time,
        dd {
          background: rgba(66, 55, 149, 0.06);
        }
      }
      &:nth-child(even) {
        & .timetable-time,
        dd {
          background: rgba(66, 55, 149, 0.15);
        }
      }

      & dd {
        padding: 0.75rem 1rem 0.875rem;
        margin: 0;
      }

      & .timetable-time {
        flex: 1;
        padding: 0.75rem 1rem 0.875rem 1rem;
      }

      & .time-wrap {
        display: flex;
        flex-direction: column;
        gap: 0;
        height: 100%;

        & span {
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .timetable-section--01 {
    .timetable-vertical {
      & dl {
        &:first-child,
        &:nth-child(2) {
          & dd {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
          }

          & .timetable-contents {
            align-items: center;
          }
        }
      }
    }
  }
}

.timetable-horizontal {
  display: flex;
  gap: 0.125rem;
}

.timetable-horizontal-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
  background: rgba(0, 0, 0, 0.05);
  min-height: 63.75rem;
  padding-bottom: 1.5625rem;

  &:nth-child(odd) {
    .timetable-horizontal-title {
      background: #000;
      color: #fff;
    }
  }

  &:nth-child(even) {
    .timetable-horizontal-title {
      background: #423795;
      color: #fff;
    }
  }

  & .timetable-title {
    font-size: 1.125rem;
  }
}

@media (768px <= width < 1200px) {
  .timetable-wrap {
    margin: 0 -1.5rem;
    padding: 0 1.5rem;
  }

  .timetable-horizontal-item {
    min-height: auto;
  }

  .venue--01 dl,
  .venue--02 dl {
    height: auto;
  }
}

.timetable-horizontal-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6875rem 0;
  line-height: 1;

  & span {
    font-family: var(--font-family-en);
    font-size: 2rem;
    letter-spacing: 0.06em;
  }
}

.timetable-horizontal-contents {
  display: flex;
  flex-direction: column;
  flex: 1;
  & dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & dd {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }
}

.venue--01,
.venue--02 {
  & .timetable-horizontal-contents {
    & dl {
      padding: 1.5rem 1rem 1rem 1rem;
    }
  }
  &:nth-child(odd) {
    .timetable-horizontal-contents {
      & dl {
        background: rgba(66, 55, 149, 0.06);
      }
    }
  }

  &:nth-child(even) {
    .timetable-horizontal-contents {
      & dl {
        background: rgba(66, 55, 149, 0.15);
      }
    }
  }
}

.venue--01 {
  padding-bottom: 0;
  & .timetable-horizontal-contents {
    justify-content: space-between;
    padding-top: 1.5rem;
  }
  & dl {
    &:first-child {
      height: 27.8125rem;
    }
    &:last-child {
      height: 29rem;
    }
  }
}

.venue--02 {
  & .timetable-horizontal-contents {
    justify-content: space-between;
    gap: 2rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  & dl {
    &:first-child {
      height: 25rem;
    }
    &:last-child {
      height: 26rem;
    }
  }
}

.venue--03,
.venue--04 {
  & .timetable-horizontal-contents {
    padding: 1.5rem 1rem 1rem 1rem;
    gap: 2rem;
  }
  &:nth-child(odd) {
    .timetable-horizontal-contents {
      background: rgba(66, 55, 149, 0.06);
    }
  }
  &:nth-child(even) {
    .timetable-horizontal-contents {
      background: rgba(66, 55, 149, 0.15);
    }
  }
}

@media (width < 768px) {
  .timetable-section {
    gap: 1.25rem;
  }
  .timetable-contents {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .timetable-title {
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .timetable-vertical dl:has(.timetable-title:only-child) .timetable-contents {
    align-items: center;
    width: 100%;
  }

  .timetable-vertical dl:has(.timetable-title:only-child) .timetable-title {
    padding: 0.5rem 0;
  }
  .timetable-info {
    width: auto;
    border-top: 1px dashed #000;
    border-left: none;
    padding: 1rem 0 0;
  }
  .timetable-wrap {
    overflow: auto;
    margin: 0 -1rem;
  }
  .timetable-vertical {
    gap: 0.125rem;
    & dl {
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      padding: 0.875rem 1rem;
      margin: 0;
      &:nth-child(odd) {
        background: rgba(66, 55, 149, 0.06);
      }
      &:nth-child(even) {
        background: rgba(66, 55, 149, 0.15);
      }
      & dd {
        padding: 0;
      }
      & .time-wrap {
        display: grid;
        grid-template-columns: 3.25rem 1fr;
        align-items: center;
        gap: 0.25rem 1rem;
        padding: 0 0 0.5rem;
      }
    }
  }
  .timetable-horizontal {
    width: 75rem;
    margin: 0 1rem;
  }

  .timetable-speakers-inline {
    margin-top: 0.375rem;
  }

  .timetable-speakers-label,
  .timetable-speakers-inline-list li {
    font-size: 1rem;
  }

  .timetable-speakers-inline-list {
    gap: 0.2rem;
    margin-top: 0.2rem;
  }
}

.profile {
  display: flex;
  flex-wrap: wrap;
  gap: 1.0625rem;
  line-height: 1.6;
}

.profile-figure {
  width: 7.5rem;
  height: 7.5rem;
  line-height: 0;
  flex-shrink: 0;
  border: 0.25rem solid #000;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

.profile-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}

.profile.profile--moderator .profile-role-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  padding: 0.125rem 0.75rem 0.1875rem;
  margin: 0 0 0.35rem;
  border-radius: 9999px;
  background: var(--color-accent-strong);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: none;
  font-feature-settings: "palt" on;
}

.profile-name {
  font-weight: 700;
  margin: 0 0 0.375rem;
  & small {
    display: block;
    font-family: var(--font-family-en);
    font-size: var(--font-size-sm);
    font-weight: 400;
  }
}

.profile-corp-title {
  font-size: var(--font-size-sm);
}

.profile-desc {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  background: #f5f5f5;
  font-feature-settings: "halt" on;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

@media (width < 768px) {
  .profile {
    gap: 1rem;
  }
  .profile-figure {
    width: 5.5rem;
    height: 5.5rem;
    border-width: 0.1875rem;
  }
  .profile-name {
    & small {
      font-size: 0.8125rem;
    }
  }
  .profile-corp-title {
    font-size: 0.8125rem;
  }
  .profile.profile--moderator .profile-role-badge {
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem 0.1875rem;
  }
}

/* modal */
.modal {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2.5rem;
  width: 100%;
  max-width: 51.375rem;
  border: none;
  padding: 2.5rem 1rem;
  background: none;
  overflow: visible;
  animation: fadeIn 0.3s forwards 0.05s;
  opacity: 0;
  &::backdrop {
    background: rgba(0, 0, 0, 0.5);
  }

  &[open] {
    display: flex;
  }
}

.modal-inner {
  padding: 4rem 3rem;
  background: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: min(85vh, calc(100vh - 4rem));
  overscroll-behavior: contain;
}

.modal-layout {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.modal-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modal-meta-venue {
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.5rem 1rem 0.5625rem 1rem;
  background: var(--color-accent-strong);
  border-radius: 1.1875rem;
  color: #fff;
}

.modal-meta-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.modal-meta-tag {
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.5rem 1rem 0.5625rem 1rem;
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  background: #fff;
}

.modal-contents-time {
  font-family: var(--font-family-en);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}

.modal-contents-title {
  font-feature-settings: "palt" on;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.6;
  & span {
    display: block;
    font-size: 1.25rem;
  }
}

.modal-session-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.modal-close-button {
  gap: 0;
  width: 13.875rem;
  height: 3rem;
  padding: 1rem;
  margin: 0 auto;
  cursor: pointer;
  background: var(--color-base);
  &::after {
    width: 0.8125rem;
    height: 0.75rem;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.45361 0.761719L6.7269 6.03501L1.52344 11.2385" stroke="white" stroke-linecap="round"/><path d="M12 0.761719L6.72671 6.03501L11.9302 11.2385" stroke="white" stroke-linecap="round"/></svg>');
  }
}

.modal-close-icon {
  width: 3rem;
  height: 3rem;
  background: url('data:image/svg+xml;charset=utf-8,<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" rx="24" fill="black"/><path d="M16.0898 16.1423L23.9998 24.0523L16.1946 31.8575" stroke="white" stroke-width="1.5" stroke-linecap="round"/><path d="M31.9102 31.8577L24.0002 23.9477L31.8054 16.1425" stroke="white" stroke-width="1.5" stroke-linecap="round"/></svg>')
    no-repeat center center;
  background-size: 100% 100%;
  position: absolute;
  top: 1rem;
  right: -0.06rem;
  cursor: pointer;
}

.modal-session-contents {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  & dl {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    & dd {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      line-height: 2;
    }
  }
}

.modal-spearker,
.modal-spearker-list {
  display: flex;
  flex-direction: column;
  gap: 1.6875rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-spearker-headline {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* 常設・ブース出展 */
.modal-permanent-contents {
  & dl {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
}

.modal-permanent-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  & li {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-left: 8px solid var(--color-accent-strong);
    padding: 0 0 0 1.5rem;
    line-height: 2;
  }
}

.modal-service-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem 4.611%;
  & li {
    width: 47.6945%;
    border: 1px solid #ccc;
    background: #fff;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    padding: 0 0 1.75rem;
    text-align: center;
  }
}

.modal-service-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.125rem;
}

@media (768px <= width < 1200px) {
  .modal {
    padding: 2.5rem 1.5rem;
  }

  .modal-inner {
    max-height: 80vh;
    padding: 3rem 2.5rem;
  }

  .modal-contents-title {
    font-size: 1.75rem;
    line-height: 1.5;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (width < 768px) {
  .modal-layout {
    gap: 2rem;
  }
  .modal-inner {
    padding: 2.5rem 1.5rem;
    max-height: calc(100vh - 3rem);
  }
  .modal-contents-title {
    font-size: 1.5rem;
    & span {
      font-size: 1.125rem;
    }
  }
  .modal-meta-venue {
    font-size: var(--font-size-sm);
    padding: 0.375rem 0.75rem 0.4375rem 0.75rem;
  }

  .modal-meta-tag {
    font-size: var(--font-size-sm);
    line-height: 1;
    padding: 0.375rem 0.75rem 0.4375rem 0.75rem;
  }

  .modal-close-icon {
    right: 0.5rem;
  }

  .modal-session-contents {
    gap: 1.5rem;
    & dl {
      gap: 1rem;
    }
  }

  .modal-service-list {
    flex-direction: column;
    gap: 1rem;
    & li {
      width: 100%;
      padding: 0 0 1rem;
    }
  }

  .modal-service-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 6.875rem;
  }
}

/* 会場案内 */

.place {
  background: rgba(38, 5, 21, 0.6);
  color: #fff;
  position: relative;
  z-index: 1;
}

.section.place {
  padding-top: 5.5rem;
  padding-bottom: 5.5rem;
}

.place-layout {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem 2rem;
}

.place-text {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 40.8333%;
}

.place-headline {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 1.5rem;
}

.place-info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  & dl {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    & dt {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 5.125rem;
      padding: 0.25rem 0.75rem 0.3125rem 0.75rem;
      font-size: var(--font-size-sm);
      line-height: 1;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 0.25rem;
    }
    & dd {
      font-feature-settings: "palt" on;
      line-height: 1.6;
    }
  }
}

.place-note {
  color: #c3c3c3;
  line-height: 1.6;
}

.place-map {
  flex: 1;
  height: 25rem;
  & iframe {
    width: 100%;
    height: 100%;
  }
}

.place-button {
  max-width: 15rem;
  height: 3rem;
  padding: 0 1rem;
  background: var(--color-base);
}

@media (768px <= width < 1200px) {
  .place-layout {
    gap: 2rem;
  }

  .place-text {
    width: 48%;
  }

  .place-map {
    min-height: 22rem;
  }
}

@media (width < 768px) {
  .section.place {
    padding: 4rem 0;
  }
  .place-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .place-text {
    width: 100%;
  }

  .place-info {
    margin: 0 0 0.5rem;
  }

  .place-map {
    width: 100%;
    height: auto;
    position: relative;
    &::after {
      content: "";
      display: block;
      padding-top: 83.7989%;
    }
    & iframe {
      position: absolute;
      top: 0;
      left: 0;
    }
  }
  .place-link {
    align-self: flex-end;
  }
}

@media (width < 480px) {
  .header-logo {
    width: 7.5rem;
    height: 2rem;
    & img {
      height: 1.75rem;
    }
  }

  .header-cta-button {
    width: 5.75rem;
    padding: 0 0.5rem;
  }

  .cta .button--cta {
    width: 90%;
  }

  .button--cta {
    max-width: 16rem;
    height: 3.25rem;
    font-size: 0.9375rem;
    box-shadow: 0 4px 14px rgba(168, 85, 247, 0.5);
  }
}

/* よくある質問 */
.faq-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  & dl {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 3rem;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 1.5rem;
    box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.05);
    & dt,
    & dd {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-feature-settings: "palt" on;
      &::before {
        font-family: var(--font-family-en);
        font-size: 2rem;
        font-weight: 700;
        line-height: 1;
      }
    }
    & dt {
      font-size: 1.125rem;
      font-weight: 600;
      &::before {
        content: "Q";
        color: #423795;
      }
    }
    & dd {
      &::before {
        content: "A";
        color: #ce009b;
      }
    }
  }
}

.sponsors {
  background: #fff;
  scroll-margin-top: 6rem;
}

.sponsors-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 2rem 0;
}

.sponsor-item {
  margin: 0;
  display: flex;
  flex: 0 1 32rem;
  justify-content: center;
}

.sponsor-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 16rem;
  padding: 3rem 4rem;
  border-radius: 1.75rem;
  border: 1px solid rgba(32, 28, 44, 0.12);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  isolation: isolate;
}

.sponsor-link:focus-visible {
  outline: 3px solid var(--pink-200);
  outline-offset: 3px;
}

.sponsor-link:hover {
  text-decoration: none;
}

.sponsor-link img {
  width: 100%;
  max-width: 20rem;
  height: auto;
  object-fit: contain;
}

@media (hover: hover) {
  .sponsor-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.14);
  }
}

@media (width < 768px) {
  .sponsor-item {
    flex: 1 1 100%;
  }

  .sponsor-link {
    min-height: 12rem;
    padding: 2rem 3rem;
    border-radius: 1.5rem;
  }
}

.exhibitors {
  background: #fff;
}

.exhibitors-wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(18rem, 1fr));
  gap: 6rem 3rem;
}

.exhibitor-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 1.75rem 2.25rem;
  border-radius: 1.5rem;
  border: 1px solid rgba(32, 28, 44, 0.08);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.05);
  min-height: auto;
  position: relative;
  isolation: isolate;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.exhibitor-card:focus-within {
  border-color: var(--pink-500);
  box-shadow: 0 15px 32px rgba(0, 0, 0, 0.12);
}

.exhibitor-card:focus-within::after {
  content: "";
  position: absolute;
  inset: -0.2rem;
  border-radius: inherit;
  border: 2px solid var(--pink-200);
  pointer-events: none;
}

@media (hover: hover) {
  .exhibitor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  }
}

.exhibitor-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  text-decoration: none;
  & img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }
}

.exhibitor-logo:focus-visible {
  outline: none;
}

.exhibitor-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.exhibitor-desc {
  font-size: 1rem;
  line-height: 1.9;
  color: rgba(0, 0, 0, 0.78);
}

@media (width >= 768px) {
  .exhibitor-card {
    min-height: 100%;
  }
}

@media (768px <= width < 1200px) {
  .faq-wrap {
    max-width: 52rem;
    margin: 0 auto;
  }

  .faq-wrap dl {
    padding: 1.25rem 2.5rem;
  }
}

@media (768px <= width < 1200px) {
  .exhibitors-wrap {
    gap: 5rem 2.5rem;
  }
}

@media (width < 768px) {
  .exhibitors-wrap {
    grid-template-columns: 1fr;
    gap: 5rem 1.5rem;
  }

  .exhibitor-card {
    padding: 1.5rem 1.75rem;
    border-radius: 1.35rem;
  }

  .exhibitor-name {
    font-size: 1.3rem;
  }

  .exhibitor-desc {
    font-size: 0.9375rem;
    line-height: 1.8;
  }
}

@media (width < 768px) {
  .faq-wrap {
    & dl {
      gap: 0.5rem;
      padding: 1rem 1.5rem;
    }
  }
}

/* 開催概要 */
.overview {
  background: #fff;
  overflow: hidden;
  & dl {
    display: flex;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #ccc;
    &:first-child {
      border-top: 1px solid #ccc;
    }
    & dt {
      width: 12.5rem;
      flex-shrink: 0;
    }
  }
}

@media (768px <= width < 1200px) {
  .overview-wrap {
    max-width: 52rem;
    margin: 0 auto;
  }

  .overview dl {
    & dt {
      width: 10.5rem;
    }
  }
}

@media (width < 768px) {
  .overview {
    & dl {
      flex-direction: column;
      gap: 0;

      & dt {
        width: 100%;
        font-weight: 700;
      }
    }
  }
}

/* animation */
[data-pin-wrap] {
  position: relative;
}

[data-pin-bg] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  inset: 0;
}

[data-pin-parallax] {
  position: absolute;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  will-change: transform;
  & img {
    width: 100%;
  }
}

.bg-wrap {
  background: #fff;
  overflow: hidden;
}

.bg-layer {
  width: 83.3333%;
  max-width: 100rem;
  margin: 0 auto;
}

.bg-layer .deco-soft img {
  opacity: 0.55;
  filter: saturate(0.75);
}

@media (768px <= width) {
  .bg-layer--01 {
    & .gumi01 {
      width: 47.5%;
      top: -280px;
      left: -27.5%;
    }
    & .gumi02 {
      width: 60%;
      top: -130px;
      right: -28.3333%;
    }
    & .gumi03 {
      width: 40.5%;
      top: 700px;
      left: -21.6667%;
    }
    & .gumi04 {
      width: 48.3333%;
      top: 650px;
      right: -20%;
    }
  }

  .bg-layer--cta-hero {
    & .cta-gumi01 {
      width: 56%;
      top: -230px;
      left: -28%;
    }
    & .cta-gumi02 {
      width: 32%;
      top: 370px;
      right: -22%;
    }
    & .cta-gumi03 {
      width: 38%;
      top: 670px;
      left: -20%;
    }
    & .cta-gumi04 {
      width: 22%;
      top: 90px;
      right: -10%;
    }
    & .cta-gumi05 {
      width: 18%;
      top: 590px;
      right: 8%;
    }
  }

  .bg-wrap--exhibitors {
    & .bg-layer--cta-hero {
      & .gumi01 {
        width: 48%;
        top: -250px;
        left: -22%;
      }
      & .gumi02 {
        width: 30%;
        top: -120px;
        right: -24%;
      }
      & .gumi03 {
        width: 34%;
        top: 700px;
        left: -18%;
      }
      & .gumi04 {
        width: 40%;
        top: 760px;
        right: -16%;
      }
    }
  }

  .bg-wrap {
    &:has(.bg-layer--02) {
      &::before {
        content: "";
        display: block;
        width: calc(100% + 1.75rem);
        height: 91.75rem;
        border-radius: 91.75rem;
        background: rgba(255, 255, 255, 0.7);
        filter: blur(170px);
        position: absolute;
        top: -9.19rem;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }
  .bg-layer--02 {
    & .gumi01 {
      width: 42.5%;
      top: min(-11.38889vw, -182px);
      left: -19%;
      z-index: 1;
    }
    & .gumi02 {
      width: 52.25%;
      top: min(-17.5vw, -280px);
      right: -25%;
      z-index: 1;
    }
    & .gumi03 {
      width: 43.6667%;
      top: 335px;
      left: -30%;
    }
    & .gumi04 {
      width: 22.6667%;
      top: 270px;
      left: 7.5%;
    }
    & .gumi05 {
      width: 18.4167%;
      top: 254px;
      right: 3.16667%;
      opacity: 0.8;
    }
    & .gumi06 {
      width: 57.6667%;
      top: 238px;
      right: -32.8333%;
      z-index: 1;
    }
    & .gumi07 {
      width: 29.16667%;
      top: 948px;
      left: -10.3333%;
    }
    & .gumi08 {
      width: 42.5%;
      top: 848px;
      right: -21.5%;
      & img {
        opacity: 0.5;
        transform: rotate(-50deg) scale(-1, 1);
      }
    }
    & .gumi09 {
      width: 38.1667%;
      top: 1200px;
      left: 25.9167%;
    }
    & .gumi10 {
      width: 9.9167%;
      top: min(17.5vw, 280px);
      left: -7.25%;
    }
    & .gumi11 {
      width: 7.75%;
      top: min(11.25vw, 180px);
      right: -0.5833%;
    }
    & .gumi12 {
      width: 15.25%;
      top: 1073px;
      right: 15.1667%;
    }
  }
}

@media (width < 768px) {
  .bg-layer {
    width: 100%;
  }
  .bg-layer--01 {
    & .gumi01 {
      top: -204px;
      left: -205px;
    }
    & .gumi03 {
      top: auto;
      bottom: -80px;
      left: -174px;
    }
    & .gumi02,
    & .gumi04 {
      display: none;
    }
  }

  .bg-layer--cta-hero {
    width: 100%;
    max-width: none;
    & .cta-gumi01 {
      width: 420px;
      top: -230px;
      left: -240px;
    }
    & .cta-gumi02 {
      width: 220px;
      top: 310px;
      right: -170px;
    }
    & .cta-gumi03 {
      width: 260px;
      top: 480px;
      left: -200px;
    }
    & .cta-gumi04,
    & .cta-gumi05 {
      display: none;
    }
  }

  .bg-wrap--exhibitors {
    & .bg-layer--cta-hero {
      & .gumi01 {
        width: 360px;
        top: -180px;
        left: -210px;
      }
      & .gumi02 {
        width: 240px;
        top: -80px;
        right: -230px;
      }
      & .gumi03 {
        width: 260px;
        top: 380px;
        left: -210px;
      }
      & .gumi04 {
        width: 320px;
        top: 510px;
        right: -200px;
      }
    }
  }
  .bg-wrap {
    &:has(.bg-layer--02) {
      &::before {
        content: "";
        display: block;
        width: 91.75rem;
        height: 91.75rem;
        border-radius: 91.75rem;
        background: rgba(255, 255, 255, 0.7);
        filter: blur(170px);
        position: absolute;
        top: -9.19rem;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }
  .bg-layer--02 {
    & .gumi01 {
      width: 510px;
      top: -164px;
      left: -110px;
    }
    & .gumi02 {
      width: 627px;
      top: 2199px;
      right: -208px;
    }
    & .gumi03 {
      width: 524px;
      top: 344px;
      left: -246px;
    }
    & .gumi04 {
      top: 270px;
      right: -96px;
    }
    & .gumi05 {
      display: none;
    }
    & .gumi06 {
      width: 692px;
      top: 1549px;
      left: -262px;
    }
    & .gumi07 {
      top: 951px;
      left: 0;
    }
    & .gumi08 {
      width: 510px;
      top: 1112px;
      right: -250px;
      & img {
        opacity: 0.5;
        transform: rotate(-50deg) scale(-1, 1);
      }
    }
    & .gumi09 {
      width: 412px;
      bottom: -95px;
      left: -230px;
    }
    & .gumi10,
    & .gumi11,
    & .gumi12 {
      display: none;
    }
  }
}