/* ============================================
   KCCS FORUM 2026 - Stylesheet
   ============================================ */

/* --- CSS Variables --- */
:root {
  --color-primary: #df0523;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #333333;
  --color-gray: #666666;
  --color-gray-light: #999999;
  --color-bg-dark: #1a1a1a;
  --color-bg-light: #f8f8f8;
  --color-border: #727171;

  --spacing-pc: 3.25rem;
  --spacing-tablet: 2.5rem;
  --spacing-sp: 1rem;

  --max-width: calc(1500px + var(--spacing-pc) * 2);
  --header-height: 4rem;

  --font-family: "Noto Sans JP", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  --transition: 0.3s ease;
  --transition-slow: 0.6s ease;
}

/* --- Reset --- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.is-nav-open,
body.is-modal-open {
  overflow: hidden;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

/* --- Utility --- */
.sp-only {
  display: none;
}

@media (max-width: 767px) {
  .sp-only {
    display: inline;
  }
  .pc-only {
    display: none;
  }
}

/* ============================================
   Header
   ============================================ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-height);
  background: var(--color-white);
  z-index: 100;
  transition: transform 0.3s ease;
}

.header--hidden {
  transform: translateY(-100%);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding-inline: 1.75rem 3.85rem;
  margin: 0 auto;
}

.header__logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(404px, 74.6268656716vw);
}

.header__logo-img {
  height: auto;
  width: 100%;
  display: block;
}

.header__event-label {
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium);
  color: var(--color-gray);
  letter-spacing: 0.05em;
  line-height: 1.4;
}

.header__hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 3.438vw;
  height: 3.438vw;
}

.header__hamburger-line {
  display: block;
  width: 3.438vw;
  height: 0.313vw;
  background: var(--color-black);
  position: absolute;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.header__hamburger-line:first-child {
  transform: translateY(-0.375vw);
}

.header__hamburger-line:last-child {
  transform: translateY(0.375vw);
}

/* ============================================
   Navigation Overlay
   ============================================ */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-slow),
    visibility var(--transition-slow);
}

.nav-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

.nav-overlay__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(247, 248, 248, 0.95);
  overflow: hidden;
}

.nav-overlay__circle {
  display: none;
}

.nav-overlay__circle--red {
  width: 31.25rem;
  height: 31.25rem;
  background: var(--color-primary);
  top: -6.25rem;
  right: -6.25rem;
}

.nav-overlay__circle--black {
  width: 25rem;
  height: 25rem;
  background: var(--color-black);
  bottom: -5rem;
  left: -5rem;
}

.nav-overlay__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 5rem 2.5rem;
}

.nav-overlay__header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.75rem;
  height: var(--header-height);
}

.nav-overlay__logo-img {
  height: 1.5rem;
  width: auto;
}

.nav-overlay__close {
  position: absolute;
  top: 1rem;
  right: var(--spacing-pc);
  width: 3.021vw;
  height: 3.021vw;
}

.nav-overlay__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.021vw;
  height: 0.313vw;
  background: var(--color-black);
}

.nav-overlay__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.nav-overlay__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.nav-overlay__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6.25vw;
  margin-bottom: 3rem;
}

.nav-overlay__link {
  display: inline-block;
  padding-bottom: 0.5rem;
  border-bottom: max(1px, 0.26vw) solid var(--color-primary);
  transition: opacity var(--transition);
}

.nav-overlay__link-img {
  height: max(36px, 2.708vw);
  width: auto;
  display: block;
}

.nav-overlay__link:hover {
  opacity: 0.7;
}

.nav-overlay__info {
  text-align: center;
}

.nav-overlay__date {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  color: var(--color-black);
}

.nav-overlay__note {
  font-size: 0.8125rem;
  color: var(--color-gray);
}

/* ============================================
   Hero
   ============================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-white);
  z-index: 1;
  padding-top: var(--header-height);
}

.hero__content {
  position: relative;
  width: 100%;
  z-index: 1;
}

.hero__image {
  width: 100%;
  height: auto;
  display: block;
}

.hero__video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  padding-inline: 14vw;
  border: none;
  outline: none;
}

/* --- Hero Video Controls --- */
.hero__controls {
  display: flex;
  align-items: center;
  gap: 0.833vw;
  padding: 0.625vw 14vw 0;
}

.hero__play-btn {
  position: relative;
  width: 2.083vw;
  height: 2.083vw;
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: var(--color-white);
  transition: background var(--transition);
}

.hero__play-btn:hover {
  background: rgba(0, 0, 0, 0.7);
}

.hero__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Pause icon (two bars) */
.hero__play-icon--pause span {
  display: block;
  width: 0.208vw;
  min-width: 3px;
  height: 0.833vw;
  min-height: 10px;
  background: var(--color-white);
  border-radius: 1px;
}

.hero__play-icon--pause span:first-child {
  margin-right: 0.208vw;
}

/* Play icon (triangle) */
.hero__play-icon--play svg {
  width: 0.833vw;
  min-width: 10px;
  height: 0.833vw;
  min-height: 10px;
  margin-left: 0.104vw;
}

/* State: playing → show pause icon */
.hero__play-btn.is-playing .hero__play-icon--pause {
  opacity: 1;
}

.hero__play-btn.is-playing .hero__play-icon--play {
  opacity: 0;
}

/* State: paused → show play icon */
.hero__play-btn:not(.is-playing) .hero__play-icon--pause {
  opacity: 0;
}

.hero__play-btn:not(.is-playing) .hero__play-icon--play {
  opacity: 1;
}

/* Timeline bar */
.hero__timeline {
  position: relative;
  flex: 1;
  height: 0.313vw;
  min-height: 4px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100vh;
  cursor: pointer;
  overflow: visible;
}

.hero__timeline-progress {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-primary);
  border-radius: 100vh;
  pointer-events: none;
  transition: none;
}

.hero__timeline-thumb {
  position: absolute;
  top: 50%;
  left: 0%;
  width: 0.833vw;
  height: 0.833vw;
  min-width: 10px;
  min-height: 10px;
  background: var(--color-primary);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hero__timeline:hover .hero__timeline-thumb,
.hero__timeline.is-dragging .hero__timeline-thumb {
  opacity: 1;
}


/* ============================================
   Event Info
   ============================================ */
.event-info {
  position: relative;
  z-index: 1;
  padding: 3vw var(--spacing-pc) 6.25vw;
  text-align: center;
  background: var(--color-white);
}

.event-info__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.event-info__company {
  margin-bottom: 2.667vw;
}

.event-info__company-img {
  height: auto;
  width: 39.7396vw;
}

.event-info__title {
  margin-bottom: 1.667vw;
}

.event-info__title-img {
  height: auto;
  width: 55.4688vw;
}

.text-accent {
  color: var(--color-primary);
}

.event-info__date {
  margin-bottom: 6.667vw;
}

.event-info__date-img {
  height: auto;
  width: 43.8542vw;
}

.event-info__catch {
  font-size: 3.854vw;
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.05em;
  margin-bottom: 0.333vw;
}

.event-info__catch strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.event-info__sub {
  font-size: 1.667vw;
  font-weight: var(--font-weight-bold);
  margin-bottom: 4vw;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.event-info__cta {
  margin-top: 1.667vw;
}

/* --- Button --- */
.btn {
  display: inline-block;
  max-width: 28.125vw;
  width: 100%;
  padding: 0.833vw 2.5vw;
  font-size: 1.771vw;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
  border-radius: 100vh;
  transition:
    opacity var(--transition),
    transform var(--transition);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* ============================================
   Section Common
   ============================================ */
.section {
  position: relative;
  z-index: 1;
  padding: 4.167vw 0 4.583vw;
  background: var(--color-white);
}

.section__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-pc);
}

.section__title {
  text-align: center;
  margin-bottom: 2.917vw;
  display: block;
}

.section__title-img {
  height: max(36px, 3.8vw);
  width: auto;
  border-bottom: max(1px, 0.26vw) solid var(--color-primary);
  padding-bottom: 0.783vw;
}

.section__title--light {
  color: var(--color-white);
}

.section--dark {
  background: var(--color-bg-dark);
}

/* ============================================
   Overview
   ============================================ */
.overview__body {
  max-width: 1066px;
  margin: 0 auto;
}

.overview__body p {
  margin-bottom: 1.5em;
  font-size: 1.25vw;
  font-weight: var(--font-weight-bold);
  line-height: 2.14;
  letter-spacing: 0.069em;
}

.overview__body p:last-child {
  margin-bottom: 0;
}

/* ============================================
   Session Member
   ============================================ */
.session-member {
  padding: 5.208vw 0;
}

.session-member .section__title {
  margin-bottom: 4.583vw;
}

.member-grid {
  margin-inline: auto;
}

.member-grid__row {
  display: grid;
  margin-bottom: 4.688vw;
}

.member-grid__row:last-child {
  margin-bottom: 0;
}

.member-grid__row--3 {
  grid-template-columns: repeat(3, 1fr);
  width: calc(3 / 4 * 100%);
  margin-inline: auto;
  gap: 0.885vw;
}

.member-grid__row--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.885vw;
}

.member-card {
  text-align: center;
  border: 2px solid #c9caca;
  overflow: hidden;
  max-width: 360px;
  cursor: pointer;
  transition: opacity var(--transition);
  display: flex;
  flex-direction: column;
}

.member-card:hover {
  opacity: 0.8;
}

.member-card:hover .member-card__img {
  transform: scale(1.05);
}

.member-card:hover .member-card__link::before {
  transform: translateX(5px);
}

.member-card:hover .member-card__link::after {
  transform: translateX(5px) rotate(40deg);
}

.member-card__photo {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  margin-bottom: 0.833vw;
  overflow: hidden;
}

.member-card__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition);
}

.member-card__info {
  padding: 0 0.417vw 1.208vw;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 10.938vw;
}

.member-card__name {
  font-size: 1.563vw;
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
  margin-bottom: 0.417vw;
  padding-bottom: 0.417vw;
  position: relative;
}

.member-card__honorific {
  font-size: 0.75em;
}

.member-card__name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.604vw;
  height: max(1px, 0.156vw);
  background: var(--color-primary);
}

.member-card__title {
  font-size: 0.781vw;
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  margin-bottom: 0.625vw;
}

.member-card__link {
  display: inline-block;
  font-size: 0.938vw;
  font-weight: var(--font-weight-bold);
  color: #727171;
  position: relative;
  padding-right: 0.667vw;
  margin-top: auto;
  margin-left: 0.667vw;
}

.member-card__link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -5px;
  width: calc(100% + 10px);
  height: 1px;
  background: #727171;
  transition: transform var(--transition);
}

.member-card__link::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: 0;
  width: 0.729vw;
  height: 1px;
  background: #727171;
  transform: rotate(40deg);
  transform-origin: right center;
  transition: transform var(--transition);
}

/* ============================================
   Time Schedule
   ============================================ */
.time-schedule {
  padding-top: 7.75vw;
}

.time-schedule .section__title {
  margin-bottom: 6vw;
}

.time-schedule .section__inner {
  padding: 0 40px;
}

.schedule {
  margin: 0 auto;
  position: relative;
}

/* Vertical line (on grandparent of red circle) */
.schedule::before {
  content: "";
  position: absolute;
  left: calc(max(6px, 0.573vw) / 2 - max(1px, 0.208vw) / 2);
  top: 2.083vw;
  height: calc(100% - 3vw);
  width: 0.208vw;
  background: #c9caca;
}

.schedule__item {
  position: relative;
  padding: 1.667vw 0 0 1.667vw;
}

/* Red circle marker (on parent of header + body) */
.schedule__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.875vw;
  width: max(6px, 0.573vw);
  height: max(6px, 0.573vw);
  border-radius: 50%;
  border: max(1px, 0.104vw) solid var(--color-primary);
  background: var(--color-white);
  z-index: 1;
}

.schedule__header {
  display: flex;
  align-items: flex-start;
  gap: 1.146vw;
  margin-bottom: 0.667vw;
}

.schedule__time-num {
  display: flex;
  align-items: center;
}

.schedule__time-img {
  height: 1.7vw;
  width: auto;
}

.schedule__label {
  display: flex;
  align-items: center;
}

.schedule__label-img {
  height: 1.7vw;
  width: auto;
}

.schedule__label-img--product {
  height: 3.073vw;
}

.schedule__body {
  display: grid;
  grid-template-columns: 37.6% 1fr;
  gap: 8vw;
  align-items: center;
  padding-left: 2.417vw;
  padding-bottom: 1.667vw;
  border-bottom: 1px solid var(--color-border);
}

.schedule__body + .schedule__body {
  margin-top: 1.667vw;
}

.schedule__image {
  width: 100%;
}

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

.schedule__item--product .schedule__header + .schedule__body .schedule__image {
  margin-top: -1.667vw;
}

.schedule__content {
  padding-top: 0;
  margin-bottom: 4.034vw;
}

.schedule__item--product .schedule__body:last-child .schedule__content {
  margin-bottom: 0;
}

.schedule__session-title {
  font-size: 1.563vw;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  margin-bottom: 0.417vw;
}

.schedule__desc {
  font-size: 0.938vw;
  font-weight: var(--font-weight-medium);
  line-height: 1.58;
  margin-bottom: 0.833vw;
  letter-spacing: 0.04em;
}

.schedule__sub-session {
  padding: 1.25vw 0;
  border-top: 1px dashed var(--color-border);
}

.schedule__sub-session:first-of-type {
  border-top: none;
  padding-top: 0;
}

.schedule__speakers {
  margin-top: 0.625vw;
}

.schedule__speaker {
  display: flex;
  align-items: center;
  gap: 0.625vw;
}

.schedule__speaker-info {
  display: flex;
  align-items: baseline;
  gap: 0.625vw;
  line-height: 1.5;
}

.schedule__speaker[data-modal] {
  cursor: pointer;
  transition: opacity var(--transition);
}

.schedule__speaker[data-modal]:hover {
  opacity: 0.6;
}

.schedule__speaker-name {
  font-size: 1.094vw;
  font-weight: var(--font-weight-bold);
  color: #727171;
}

.schedule__honorific {
  font-size: 0.75em;
}

.schedule__speaker[data-modal] .schedule__speaker-name {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.schedule__speaker-role {
  font-size: 0.781vw;
  font-weight: var(--font-weight-bold);
  color: #727171;
  line-height: 1.4;
}

.schedule__moderator {
  display: inline-block;
  font-size: 0.625rem;
  font-weight: var(--font-weight-regular);
  color: var(--color-primary);
  margin-left: 0.5rem;
  padding: 0.0625rem 0.375rem;
  border: 1px solid var(--color-primary);
  border-radius: 0.125rem;
}

/* ============================================
   Information
   ============================================ */
.information {
  padding-top: 5.833vw;
}

.information .section__title {
  margin-bottom: 5vw;
}

.information .section__inner {
  max-width: 1650px;
}

.info-list {
  margin: 0 auto;
}

.info-list__item {
  display: grid;
  grid-template-columns: 18.5vw 1fr;
  gap: 1.24vw;
  padding: 1.25vw 0;
  align-items: start;
}

.info-list__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.125vw;
  flex-shrink: 0;
}

.info-list__icon img {
  height: auto;
}

.info-list__item:nth-child(-n + 2) .info-list__icon img {
  width: 3.125vw;
}

.info-list__item:nth-child(n + 3) .info-list__icon img {
  width: 2.708vw;
}

.info-list__item:nth-child(5) .info-list__icon img {
  width: 2.292vw;
}

.info-list__item:nth-child(5) .info-list__icon {
  justify-content: flex-start;
}

.info-list__item:last-child {
  border-bottom: none;
}

.info-list__label {
  display: flex;
  align-items: center;
  gap: 1.24vw;
  font-size: 1.563vw;
  font-weight: var(--font-weight-bold);
  color: #000000;
  letter-spacing: 0.12em;
}

.info-list__value {
  font-size: 1.563vw;
  font-weight: var(--font-weight-medium);
  line-height: 1.65;
  letter-spacing: 0.05em;
}

.info-list__value--small {
  font-size: 1.042vw;
}

/* ============================================
   CTA Footer
   ============================================ */
.cta-note {
  margin-top: 0.8em;
  font-size: 0.781vw;
  color: var(--color-gray-light);
  text-align: center;
}

.cta-footer {
  position: relative;
  z-index: 1;
  padding: 4.458vw var(--spacing-pc) 10.9375vw;
  text-align: center;
  background: var(--color-white);
}

.cta-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

/* ============================================
   Footer
   ============================================ */
.footer {
  position: relative;
  z-index: 1;
  padding: 2.5vw 2vw 0.833vw;
  background-color: #f0f0f0;
  color: var(--color-black);
}

.footer__links {
  padding-bottom: 1.5vw;
  margin-bottom: 1.5vw;
}

.footer__link-list {
  display: flex;
  gap: 2vw;
  justify-content: flex-start;
}

.footer__link-list a {
  font-size: 0.84vw;
  font-weight: var(--font-weight-medium);
  color: var(--color-black);
  transition: opacity var(--transition);
}

.footer__link-list a:hover {
  opacity: 0.6;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer__note {
  flex: 1;
  font-size: 0.84vw;
  font-weight: var(--font-weight-bold);
}

.footer__copyright {
  flex-shrink: 0;
  font-size: 0.7vw;
  margin-left: 1.667vw;
}

/* ============================================
   Modal
   ============================================ */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition),
    visibility var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.is-active {
  opacity: 1;
  visibility: visible;
}

.modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(247, 248, 248, 0.95);
}

.modal__container {
  max-width: 1495px;
  max-height: 85vh;
  background: var(--color-white);
  overflow-y: auto;
  padding: 3.229vw;
}

.modal__wrap {
  position: relative;
  width: 90%;
  max-width: 1495px;
  z-index: 1;
}

.modal__close {
  position: absolute;
  top: -3.021vw;
  right: 0;
  width: 3.021vw;
  height: 3.021vw;
  transition: opacity var(--transition);
}

.modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.021vw;
  height: 0.313vw;
  background: #727171;
}

.modal__close span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__close:hover {
  opacity: 0.6;
}

.modal__content {
  display: grid;
  grid-template-columns: 25vw 1fr;
  gap: 2.083vw;
  align-items: start;
}

.modal__photo {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  border-radius: 0.25rem;
  overflow: hidden;
}

.modal__img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal__name {
  font-size: 2.344vw;
  font-weight: var(--font-weight-bold);
  margin-bottom: 0.625vw;
  padding-bottom: 0.625vw;
  position: relative;
}

.modal__name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 4.323vw;
  height: max(1px, 0.156vw);
  background: var(--color-primary);
}

.modal__honorific {
  font-size: 0.75em;
}

.modal__title {
  font-size: 0.938vw;
  font-weight: var(--font-weight-bold);
  color: #000000;
  line-height: 1.6;
  margin-bottom: 2.604vw;
}

.modal__bio {
  font-size: 1.125vw;
  font-weight: var(--font-weight-bold);
  line-height: 2.083;
  letter-spacing: 0.05em;
  color: #000000;
  text-align: justify;
}

.modal__career {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1.5em;
}

.modal__career dt {
  white-space: nowrap;
}

.modal__career dd {
  margin: 0;
}

/* ============================================
   Scroll Animations
   ============================================ */
[data-animate] {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-animate="fade-up"] {
  transform: translateY(40px);
}

[data-animate="fade-in"] {
  transform: none;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }

.section__title-img {
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}

/* ============================================
   Responsive - Tablet (768px - 1023px)
   ============================================ */
@media (max-width: 1023px) {
  .header__inner {
    padding: 0 1.5rem;
  }

  .section__inner {
    padding: 0 var(--spacing-tablet);
  }

  .event-info {
    padding: 3vw var(--spacing-tablet) 6.25vw;
  }

  .time-schedule .section__inner {
    padding: 0 var(--spacing-tablet);
  }
}

/* ============================================
   Responsive - SP (360px - 767px)
   ============================================ */
@media (max-width: 767px) {
  :root {
    --header-height: 10.667vw;
  }

  .header__inner {
    padding: 0 var(--spacing-sp);
  }

  .header__logo {
    width: 64.533vw;
  }

  .header__hamburger {
    width: 8.8vw;
    height: 8.8vw;
  }

  .header__hamburger-line {
    width: 8.8vw;
    height: 0.8vw;
  }

  .header__hamburger-line:first-child {
    transform: translateY(-1vw);
  }

  .header__hamburger-line:last-child {
    transform: translateY(1vw);
  }

  .header__event-label {
    font-size: 0.5625rem;
  }

  /* Hero SP */
  .hero__video {
    padding-inline: 0;
  }

  .hero__controls {
    padding: 1.5vw 4vw 0;
    gap: 2.5vw;
  }

  .hero__play-btn {
    width: 8vw;
    height: 8vw;
  }

  .hero__play-icon--pause span {
    width: 0.8vw;
    height: 3vw;
  }

  .hero__play-icon--pause span:first-child {
    margin-right: 0.8vw;
  }

  .hero__play-icon--play svg {
    width: 3vw;
    height: 3vw;
    margin-left: 0.4vw;
  }

  .hero__timeline {
    height: 1vw;
  }

  .hero__timeline-thumb {
    width: 3vw;
    height: 3vw;
    opacity: 1;
  }


  /* Event Info SP */
  .event-info {
    padding: 6vw var(--spacing-sp) 14.5vw;
  }

  .event-info__company {
    margin-bottom: 4.4vw;
  }

  .event-info__company-img {
    width: 64.4vw;
  }

  .event-info__title {
    margin-bottom: 2.9vw;
  }

  .event-info__title-img {
    width: 89vw;
  }

  .event-info__date-img {
    width: 70.3vw;
  }

  .event-info__date {
    margin-bottom: 14vw;
  }

  .event-info__catch {
    font-size: 8.5vw;
    margin-bottom: 1.533vw;
  }

  .event-info__sub {
    font-size: 4.2vw;
    line-height: 1.4;
    margin-bottom: 14.4vw;
  }

  .btn {
    display: block;
    width: 100%;
    max-width: 80vw;
    margin: 0 auto;
    padding: 2.7vw 7vw;
    font-size: 5vw;
    text-align: center;
  }

  /* Section SP */
  .section {
    padding: 3.75rem 0;
  }

  .section__inner {
    padding: 0 var(--spacing-sp);
  }

  .section__title {
    margin-bottom: 8.7vw;
  }

  .section__title-img {
    height: max(27px, 7.8vw);
    border-bottom-width: max(1px, 0.75vw);
  }

  /* Overview SP */
  .overview .section__inner {
    padding: 0 9.5vw;
  }

  .overview__body p {
    font-size: 4vw;
    letter-spacing: 0.018em;
    line-height: 2;
  }

  /* Session Member SP */
  .session-member {
    padding: 13.9vw 0;
  }

  .session-member .section__title {
    margin-bottom: 16.7vw;
  }
  .member-grid__row {
    margin-bottom: 10vw;
  }
  .member-grid__row--3,
  .member-grid__row--4 {
    grid-template-columns: 1fr;
    width: 66%;
    gap: 9.9vw;
    margin-inline: auto;
  }

  .member-card {
    max-width: 100%;
  }

  .member-card__photo {
    padding-bottom: 100%;
    margin-bottom: 0;
  }

  .member-card__info {
    padding: 2.3vw 0 5.2vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40vw;
  }

  .member-card__name {
    font-size: 6vw;
    margin-bottom: 1vw;
  }

  .member-card__name::after {
    width: 8.6vw;
    height: max(1px, 0.55vw);
  }

  .member-card__title {
    font-size: 3vw;
    font-feature-settings: "palt";
  }

  .member-card__link {
    font-size: 3.3vw;
  }

  .member-card__link::before {
    left: -1.333vw;
    width: calc(100% + 2.667vw);
  }

  .member-card__link::after {
    right: -1.333vw;
    width: 1.867vw;
    height: max(1px, 0.133vw);
  }

  /* Schedule SP */
  .time-schedule .section__inner {
    padding: 0 5.215vw;
  }

  .time-schedule .section__title {
    margin-bottom: 13vw;
  }

  .schedule__item {
    padding: 1vw 0 1.5rem;
    margin-left: 3.7vw;
  }

  .schedule__item::before {
    left: -4.3vw;
    width: max(5px, 1.467vw);
    height: max(5px, 1.467vw);
  }

  .schedule__header {
    gap: 1.7vw;
    margin-bottom: 2vw;
  }

  .schedule__deco {
    justify-content: flex-start;
  }

  .schedule__circles {
    width: 2rem;
    height: 2rem;
  }

  .schedule__circle--red {
    width: 1.25rem;
    height: 1.25rem;
  }

  .schedule__circle--black {
    width: 1.125rem;
    height: 1.125rem;
  }

  .schedule__time-num {
    font-size: 1rem;
  }

  .schedule__time-img,
  .schedule__label-img {
    height: 4.4vw;
  }

  .schedule__label-img--product {
    height: 9.6vw;
  }

  .schedule__body {
    display: block;
    padding-left: 1vw;
    padding-bottom: 10.2vw;
  }

  .schedule__image {
    margin-bottom: 3vw;
  }

  .schedule__item--product .schedule__header + .schedule__body .schedule__image {
    margin-top: 4vw;
  }

  .schedule__image img {
    width: 86%;
    margin-inline: auto;
  }

  .schedule__item--talk .schedule__image img {
    width: 93%;
    margin-top: 7vw;
  }

  .schedule__session-title {
    font-size: 5.08vw;
    margin-bottom: 2.5vw;
    letter-spacing: -0.03em;
    font-feature-settings: "palt";
  }

  .schedule__desc {
    font-size: 3.87vw;
    line-height: 1.46;
    margin-bottom: 2vw;
  }

  .schedule__speaker-info {
    display: block;
  }

  .schedule__speaker-name {
    font-size: 4vw;
  }

  .schedule__speaker-role {
    font-size: 2.73vw;
  }

  .schedule__speaker:not(:last-child) {
    margin-bottom: 3.5vw;
  }

  .schedule__speakers {
    flex-direction: column;
    gap: 0.75rem;
  }

  .schedule::before {
    left: calc(3.7vw - 4.3vw + max(5px, 1.467vw) / 2 - 0.533vw / 2);
    width: 0.533vw;
    height: calc(100% - 6.2vw - 24.75px);
  }

  /* Information SP */
  .information {
    padding-top: 10.6vw;
  }

  .information .section__title {
    margin-bottom: 7.5vw;
  }

  .information .section__inner {
    padding: 0 5.215vw;
  }

  .info-list__item {
    grid-template-columns: 1fr;
    gap: 1.74vw;
    padding: 1rem 0 3.8vw;
  }

  .info-list__icon {
    width: 8vw;
  }

  .info-list__label {
    font-size: 4.533vw;
    gap: 5.74vw;
  }

  .info-list__value {
    font-size: 3.467vw;
    margin-left: calc(5.74vw + 8vw);
  }

  .info-list__value--small {
    font-size: 2.667vw;
    display: block;
  }

  .info-list__item:nth-child(-n + 2) .info-list__icon img {
    width: 8vw;
  }

  .info-list__item:nth-child(n + 3) .info-list__icon img {
    width: 6.933vw;
  }

  .info-list__item:nth-child(4) .info-list__icon img {
    width: 5.867vw;
  }

  /* CTA Footer SP */
  .cta-note {
    font-size: 3vw;
  }

  .cta-footer {
    padding: 14.6vw var(--spacing-sp) 22.7vw;
  }

  /* Footer SP */
  .footer {
    padding: 7.3vw 5.215vw 1.25rem;
  }

  .footer__links {
    padding-bottom: 4vw;
    margin-bottom: 4vw;
  }

  .footer__link-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 3vw;
  }

  .footer__link-list a {
    font-size: 2.8vw;
  }

  .footer__note {
    font-size: 1.87vw;
    line-height: 1.4;
  }

  .footer__bottom {
    display: block;
  }

  .footer__copyright {
    margin-top: 1rem;
    margin-left: 0;
    font-size: 2.25vw;
  }

  /* Modal SP */
  .modal__wrap {
    width: 80%;
  }

  .modal__close {
    width: 8.5vw;
    height: 8.5vw;
    top: -9vw;
  }

  .modal__close span {
    width: 8.5vw;
    height: 0.6vw;
  }

  .modal__container {
    max-height: 80vh;
    padding: 8vw;
    top: 50%;
  }

  .modal__content {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .modal__photo {
    margin: 0 auto;
  }

  .modal__name {
    font-size: 6vw;
    line-height: 2;
    margin-bottom: 3vw;
  }

  .modal__name::after {
    width: 14.667vw;
    height: 0.533vw;
  }

  .modal__title {
    font-size: 2.933vw;
  }

  .modal__bio {
    font-size: 3.467vw;
    line-height: 1.6;
  }

  /* Nav Overlay SP */
  .nav-overlay__inner {
    justify-content: flex-start;
    padding-top: 26vw;
  }

  .nav-overlay__list {
    gap: 14.6vw;
  }

  .nav-overlay__close {
    width: 8.5vw;
    height: 8.5vw;
    right: var(--spacing-sp);
  }

  .nav-overlay__close span {
    width: 8.5vw;
    height: 0.6vw;
  }

  .nav-overlay__link {
    font-size: 1.125rem;
    border-bottom-width: 0.733vw;
  }

  .nav-overlay__link-img {
    height: 6.133vw;
  }

  .nav-overlay__header {
    padding: 0.75rem var(--spacing-sp);
  }
}