:root {
  --font-family: "Noto Sans JP", sans-serif;
  --font-family-en: "Montserrat", sans-serif;
  --font-size-base: 1rem;
  --font-size-sm: .875rem;
  --color-base: #222;
}
@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 {
    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;
}

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

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

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

.button-icon {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  width: .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: .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;
}

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

.arrow-link {
  display: flex;
  align-items: center;
  gap: .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: .3s;
    }
    &:hover {
      &::before {
        opacity: 1;
      }

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

  .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;
  }
  .headline {
    font-size: 2.5rem;
  }
  .sub-headline {
    font-size: 1.5rem;
  }
}

/* header */
.header {
  padding: 1.25rem min(8.3333%, 7.5rem) 1.25rem min(7.2917%, 6.5625rem);
  background: #fff;
  box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.10);
  position: relative;
  z-index: 999;
}

.header-layout {
  display: flex;
  gap: 1.5375rem;
}

.header-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 15.6875rem;
  height: 3.5rem;
  flex-shrink: 1;
  & svg {
    width: 100%;
    height: 100%;
  }
}

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

.nav-cta-button {
  height: 2.5rem;
  padding: 0 1rem;
}

.menu {
  display: flex;
  gap: 2rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
}

@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.60);
        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 0 0 auto;
    gap: 0;
    width: 6.8125rem;
    height: 2rem;
    padding: 0 0.625rem;
    font-size: var(--font-size-sm);
    &::after {
      width: .375rem;
      height: .625rem;
    }
    &[hidden] {
      display: none;
    }
  }
  .header-toggle-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    gap: .31rem;
    width: 3.1875rem;
    height: 3rem;
    & span {
      width: 1.5rem;
      height: .125rem;
      background: #222;
      border-radius: .125rem;
      transition: .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: .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: .91rem 1.53rem;
        line-height: 1.7;
      }
    }
  }
  .nav-cta-button {
    width: 100%;
    max-width: 20.375rem;
    height: 3.75rem;
  }
}

/* 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 */
@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: 2.5rem;
}

.cta-copy {
  max-width: 31.5rem;
  margin: 0 auto;
  line-height: 0;
}

.cta-info {
  display: grid;
  grid-template-columns: 20.875rem auto;
  gap: 1rem 2.75rem;
  max-width: 39rem;
  & dl {
    display: flex;
    align-items: center;
    gap: .5rem;
    line-height: 1;
    & dt {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 4.375rem;
      padding: .25rem 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;
    }
  }
}

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

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

  .cta-copy {
    max-width: 14.5rem;
    padding: 0;
  }
  .cta-info {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    max-width: 20.375rem;

    & dl {
      & dt {
        width: 3.375rem;
        font-size: 0.75rem;
        background: rgba(34, 34, 34, 0.50);
      }
      & dd {
        font-size: var(--font-size-sm);
        font-weight: 400;
      }
    }
  }

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

/* hero */

.hero {
  padding: 6rem 1rem 7.5rem;
  background: #DAD8E5;
  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.90);
    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: 1000;
  & span {
    position: absolute;
    z-index: 1;
    -webkit-perspective: 1000;
    will-change: transform;
    & img {
      width: 100%;
    }
  }

  & .gumi01 {
    width: 82.5833%;
    top: min(-11.7361vw,11.75rem);
    left: -18.3333%;
  }
  & .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: 3.5rem;
  position: relative;
  z-index: 2;
}

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

@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: 3rem 0 5.375rem;
    &::before {
      width: 73.8125rem;
      height: 81.0625rem;
      padding-top: 0;
      bottom: 21.31rem;
    }
  }
  .hero-layout {
    gap: 2rem;
  }
  .hero-headline {
    padding: 0 0 .5rem;
  }
  .hero-copy {
    padding: 0 0 1rem;
  }
  .hero-lead {
    line-height: 2;
    text-align: left;
    & p + p {
      margin-top: 2rem;
    }
  }

  .hero-bg {
    width: 100%;
    & .gumi01 {
      width: 694px;
      top: -97px;
      left: -184px;
    }
    & .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;
    }
  }
}

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

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

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

.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;
  gap: 1.5rem;
  flex: 1;
  & > *:first-child {
    flex: 1;
  }
}

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

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

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

.timetable-wrap {
  overflow: auto;
}

.timetable-horizontal {
  width: 75rem;
}

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

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

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

.timetable-coming {
  color: #666;
  font-size: .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: 1rem 0 0;
  border-top: 1px dashed #000;
}

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

.timetable-vertical {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  & dl {
    & dd {
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }
  }
}

@media (width >= 768px) {
  .timetable-vertical {
    & dl {
      display: grid;
      grid-template-columns: 9.375rem auto;
      gap: .12rem;
      &: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: 1.125rem 1rem 1.5rem;
      }

      & .timetable-time {
        flex: 1;
        padding: 1.62rem 1rem 1.5rem 1rem;
      }

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

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

  .timetable-section--01 {
    .timetable-vertical {
      & dl {
        &:first-child {
          & dd {
            padding-top: 0;
            padding-bottom: 0;
          }

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

.timetable-horizontal {
  display: flex;
  gap: .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;
  }
}

.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.5rem;
  }
  .timetable-contents {
    flex-direction: column;
    gap: 1rem;
  }

  .timetable-title {
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .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: .125rem;
    & dl {
      display: flex;
      flex-direction: column;
      gap: .5rem;
      padding: 1.5rem 1rem;
      &: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: .5rem 1.5rem;
        padding: 0 0 1rem;
      }
    }
  }
  .timetable-horizontal {
    width: 75rem;
    margin: 0 1rem;
  }
}

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

.profile-figure {
  width: 7.5rem;
  line-height: 0;
  flex-shrink: 0;
}

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

.profile-name {
  font-weight: 700;
  margin: 0 0 .75rem;
  & 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%;
  padding: 1rem;
  background: rgba(66, 55, 149, 0.06);
  font-feature-settings: 'halt' on;
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

@media (width < 768px) {
  .profile {
    gap: 1rem;
  }
  .profile-name {
    & small {
      font-size: .8125rem;
    }
  }
  .profile-corp-title {
    font-size: .8125rem;
  }
}

/* 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 .3s forwards .05s;
  opacity: 0;
  &::backdrop {
    background: rgba(0, 0, 0, 0.50);
  }

  &[open] {
    display: flex;
  }
}

.modal-inner {
  padding: 4rem 3rem;
  background: #fff;
  overflow: auto;
  overscroll-behavior: contain;
}

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

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

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

.modal-meta-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .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-close-button {
  gap: 0;
  width: 13.875rem;
  height: 3rem;
  padding: 1rem;
  margin: 0 auto;
  cursor: pointer;
  &::after {
    width: .8125rem;
    height: .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: -.06rem;
  cursor: pointer;
}

.modal-session-contents {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  & dl {
    display: flex;
    flex-direction: column;
    gap: .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;
}

.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 #000;
    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;
}

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

@media (width < 768px) {
  .modal-layout {
    gap: 2rem;
  }
  .modal-inner {
    padding: 2.5rem 1.5rem;
  }
  .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: .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(49, 43, 75, 0.80);
  color: #fff;
  position: relative;
  z-index: 1;
}

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

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

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

.place-info {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0 0 1rem;
  & dl {
    display: flex;
    align-items: flex-start;
    gap: .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: #000;
      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;
}

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

  .place-text {
    width: 100%;
  }

  .place-info {
    margin: 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;
  }
}

/* よくある質問 */
.faq {}

.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;
      }
    }
  }
}

@media (width < 768px) {
  .faq-wrap {
    & dl {
      gap: .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 (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: 1000;
  will-change: transform;
  & img {
    width: 100%;
  }
}

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

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

@media (768px <= width) {
  .bg-layer--01 {
    & .gumi01 {
      width: 55%;
      top: -220px;
      left: -27.5%;
    }
    & .gumi02 {
      width: 69%;
      top: -80px;
      right: -28.3333%;
    }
    & .gumi03 {
      width: 40.5%;
      top: 900px;
      left: -21.6667%;
    }
    & .gumi04 {
      width: 48.3333%;
      top: 630px;
      right: -25.5%;
    }
  }

  .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.70);
        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: .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: -.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-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.70);
        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: .5;
        transform: rotate(-50deg) scale(-1, 1);
      }
    }
    & .gumi09 {
      width: 412px;
      bottom: -95px;
      left: -230px;
    }
    & .gumi10,
    & .gumi11,
    & .gumi12 {
      display: none;
    }
  }
}

/* フォームクローズ */
.close-text {
  text-align: center;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.5);
  border-radius: .5rem;
  color: #D60000;
  width: 100%;
  max-width: 39rem;
  @media (width < 768px) {
      max-width: 20.375rem;
  }
}