/* ========== Header ========== */
/* FV内: absolute でその場 / FV通過後: fixed で追従 */
/* Figma Rectangle 1: 40 / 20 / 1200×70, radius 46, stroke #04c68c 2px */
.site-header {
  position: absolute;
  top: var(--header-offset);
  left: 50%;
  z-index: 100;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: min(1200px, calc(100% - 80px));
  height: var(--header-height);
  padding: 0 40px 0 24px;
  background: var(--color-header-bg);
  border: 2px solid var(--color-header-border);
  border-radius: var(--header-radius);
  transform: translateX(-50%);
}

.site-header.is-fixed {
  position: fixed;
  animation: site-header-in var(--header-transition) both;
}

@keyframes site-header-in {
  from {
    transform: translate(-50%, calc(-100% - var(--header-offset) - 12px));
    opacity: 0;
  }

  to {
    transform: translateX(-50%);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header.is-fixed {
    animation: none;
  }
}

.site-header__logo {
  flex-shrink: 0;
  width: 151px;
}

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

.site-header__nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--header-nav-gap);
  margin-left: auto;
}

.site-header__link {
  color: var(--color-primary);
  font-size: var(--header-nav-size);
  font-weight: var(--font-weight-extrabold);
  letter-spacing: 0;
  line-height: 1.47;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.site-header__link:hover {
  opacity: 0.7;
}

.site-header__menu {
  display: none;
  position: relative;
  z-index: 160;
  width: 44px;
  height: 44px;
  margin-left: auto;
  color: var(--color-primary);
}

.site-header__menu-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 24px;
  height: 3px;
  margin: 0;
  background: currentColor;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: background 0.25s ease;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.25s ease, top 0.25s ease;
}

.site-header__menu-icon::before {
  top: -7px;
}

.site-header__menu-icon::after {
  top: 7px;
}

body.is-nav-open .site-header__menu-icon {
  background: transparent;
}

body.is-nav-open .site-header__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}

body.is-nav-open .site-header__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* ========== SP Drawer (menu styles live under @media) ========== */
.site-drawer {
  display: none;
}

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

body.is-nav-open .entry-fab {
  visibility: hidden;
  pointer-events: none;
}

/* ========== FV / Hero（PC 1280×860 基準） ========== */
.fv {
  position: relative;
  width: 100%;
  background: var(--color-fv-bg);
}

.fv__inner {
  position: relative;
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  /* px 付き変数だと aspect-ratio が無効になり高さが 0 になるため単位なしを使う */
  aspect-ratio: var(--fv-ratio-w) / var(--fv-ratio-h);
  min-height: 520px;
  overflow: hidden;
}

/* Figma: 全員写真 97 / 118 / 1086×714 @ 1280×860 */
.fv__photo {
  position: absolute;
  left: 7.578%;
  top: 13.721%;
  width: 84.844%;
  height: 83.023%;
  border-radius: var(--fv-photo-radius);
  overflow: hidden;
  z-index: 1;
}

.fv__photo img {
  position: absolute;
  left: 0;
  top: -16.91%;
  width: 100%;
  height: 119.55%;
  max-width: none;
  object-fit: cover;
  object-position: center top;
}

/* Figma: FVキャッチ（白文字 + 緑縁 + 影） */
.fv__copy {
  position: absolute;
  inset: 0;
  z-index: 2;
  margin: 0;
  pointer-events: none;
}

.fv__catch {
  position: absolute;
  display: block;
}

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

.fv__catch-sp {
  display: none;
}

.fv__catch--left-1 {
  left: 9.999%;
  top: 17.389%;
  width: 5.381%;
  height: 55.185%;
}

.fv__catch--left-2 {
  left: 5.55%;
  top: 17.326%;
  width: 4.797%;
  height: 44.119%;
}

.fv__catch--left-3 {
  left: 5.078%;
  top: 60.642%;
  width: 5.4%;
  height: 32.961%;
}

.fv__catch--right-1 {
  left: 89.906%;
  top: 17.342%;
  width: 5.391%;
  height: 19.223%;
}

.fv__catch--right-2 {
  left: 85%;
  top: 17.326%;
  width: 5.523%;
  height: 39.231%;
}

/* Figma logo: 282 / 612 / 717×200 */
.fv__logo {
  position: absolute;
  left: 22.031%;
  top: 71.163%;
  z-index: 3;
  width: 56.016%;
  margin: 0;
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}

.fv__logo img {
  width: 100%;
  height: auto;
}

/* ========== Ticker（上: left / 下: right） ========== */
.ticker {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  height: calc(var(--ticker-height) / 2);
  overflow: hidden;
  background: var(--color-ticker-bg);
  color: var(--color-text-on-primary);
  font-family: var(--font-family-display);
  font-size: clamp(16px, 2.1vw, 27px);
  line-height: 1.15;
}

.ticker__row {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.ticker__track {
  display: inline-flex;
  width: max-content;
  will-change: transform;
}

.ticker__track--left {
  animation: ticker-left var(--ticker-duration) linear infinite;
}

.ticker__item {
  display: inline-block;
  padding-inline: 1.2em;
}

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

.ticker:hover .ticker__track {
  animation-play-state: paused;
}

/* ========== Sticky entry（追従・右下） ========== */
.entry-fab {
  position: fixed;
  right: 5px;
  bottom: 40px;
  z-index: 90;
  width: var(--entry-fab-size);
  transition: transform 0.2s ease, visibility 0.2s ease;
}

.entry-fab:hover {
  transform: scale(1.05);
}

.entry-fab img {
  width: 100%;
  height: auto;
  filter: drop-shadow(3px 3px 4px rgba(0, 0, 0, 0.27));
}

/* ========== Thoughts / 僕たちの想い ========== */
.thoughts {
  position: relative;
  width: 100%;
  background-color: #b8f0d8;
  background-image: url("../img/thoughts-pattern.png");
  background-repeat: repeat;
  background-size: 22px 22px;
  overflow: hidden;
}

.thoughts__inner {
  position: relative;
  width: min(100%, var(--page-max-width));
  margin-inline: auto;
  aspect-ratio: var(--thoughts-ratio-w) / var(--thoughts-ratio-h);
  min-height: 520px;
}

.thoughts__panel {
  position: absolute;
  /* Figma Rectangle 9: 200 / 68 / 890×699 @ 1280×857 */
  left: 15.625%;
  top: 7.935%;
  z-index: 2;
  box-sizing: border-box;
  width: 69.531%;
  height: 81.564%;
  padding: calc(min(100vw, var(--page-max-width)) * 36 / 1280)
    calc(min(100vw, var(--page-max-width)) * 48 / 1280)
    calc(min(100vw, var(--page-max-width)) * 48 / 1280);
  overflow: hidden;
  background: #fff;
  border: 4px solid var(--color-panel-border);
  border-radius: 45px;
}

.thoughts__title {
  position: relative;
  z-index: 3;
  width: min(395px, 58%);
  margin: 0 auto calc(min(100vw, var(--page-max-width)) * 28 / 1280);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.08));
}

.thoughts__title img {
  width: 100%;
  height: auto;
}

.thoughts__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: calc(min(100vw, var(--page-max-width)) * 18 / 1280);
  height: auto;
  text-align: center;
  color: var(--color-thoughts-text);
  font-weight: var(--font-weight-extrabold);
}

.thoughts__lead {
  margin: 0;
  font-size: 33px;
  line-height: 1.4;
}

.thoughts__lead span {
  display: inline;
  padding: 0;
  background: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.thoughts__body {
  margin: 0;
  font-size: calc(min(100vw, var(--page-max-width)) * 22 / 1280);
  line-height: 1.85;
}

.thoughts__body p {
  margin: 0 0 1.1em;
}

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

.thoughts__deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  transform-origin: top left;
}

.thoughts__deco img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
  Figma 43:2420 @ 1280×857
  x/y/width/height は回転前の矩形。傾きは node.rotation（CSS rotate と同符号）
  重なり: N・A < パネル < タイトル < P・B・E・star
*/
.thoughts__deco--n,
.thoughts__deco--a {
  z-index: 1;
}

.thoughts__deco--p,
.thoughts__deco--b,
.thoughts__deco--e,
.thoughts__deco--star {
  z-index: 4;
}

.thoughts__deco--n {
  left: 7.499%;
  top: 40.023%;
  width: 12.069%;
  height: 20.211%;
  transform: rotate(6.959deg);
}

.thoughts__deco--a {
  left: 83.089%;
  top: 5.251%;
  width: 11.687%;
  height: 20.28%;
  transform: rotate(16.907deg);
}

.thoughts__deco--p {
  left: 10.547%;
  top: 10.559%;
  width: 11.205%;
  height: 20.262%;
  transform: rotate(-25.832deg);
}

.thoughts__deco--b {
  left: 77.813%;
  top: 43.217%;
  width: 11.018%;
  height: 20.638%;
  transform: rotate(-17.911deg);
}

.thoughts__deco--e {
  left: 11.797%;
  top: 77.065%;
  width: 10.323%;
  height: 20.661%;
  transform: rotate(-25.768deg);
}

.thoughts__deco--star {
  left: 79.599%;
  top: 67.328%;
  width: 14.548%;
  height: 22.316%;
  transform: rotate(28.707deg);
}

/* ========== About / PANBEとは ========== */
.about {
  background: #fff;
  padding: 74px 0 0;
}

.about__title {
  width: min(328px, 56%);
  margin: 0 auto 45px;
}

.about__title img {
  width: 100%;
  height: auto;
}

.about__lead {
  margin: 0 auto 45px;
  color: var(--color-primary-deep);
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.55;
  text-align: center;
}

.about__members {
  margin-bottom: 20px;
}

/* HISTORY — Figma 43:726 @ 1000×827
   耳42 + ヘッダー956 + パネル880 */
.history {
  --history-w: 1000px;
  --history-panel-w: 880px;
  --history-head-w: 956px;
  --history-ear: 42px;
  position: relative;
  width: min(var(--history-w), calc(100% - 40px));
  margin: 0 auto 60px;
  padding-top: 65px; /* ヘッダー分を確保 */
}

.history__ears {
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.history__ear {
  box-sizing: border-box;
  width: var(--history-ear);
  height: 43px;
  border: 3px solid var(--color-primary);
  border-radius: 5px;
  background: #fff;
}

.history__head {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  box-sizing: border-box;
  width: min(var(--history-head-w), 100%);
  height: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-50%);
  background: var(--color-primary);
  border-radius: 7px;
  color: #fff;
  font-family: var(--font-family-display);
  font-size: 30px;
  letter-spacing: 0.02em;
  line-height: 1;
}

.history__panel {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  width: min(var(--history-panel-w), 100%);
  margin: -22px auto 0; /* ヘッダー下端(65) − パネル開始(43) = 22 重なり */
  border: 3px solid var(--color-primary);
  border-bottom: none;
  background: #fff;
}

.history__list {
  padding: 51px 50px 40px;
}

.history__item {
  display: grid;
  grid-template-columns: 124px 1fr;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 28px;
}

.history__item:last-child {
  margin-bottom: 0;
}

.history__year {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 124px;
  height: 47px;
  background: var(--color-primary);
  color: #fff;
  font-size: 25px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1;
}

.history__body {
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 26px;
}

.history__events {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.history__event {
  display: grid;
  grid-template-columns: 51px 1fr;
  gap: 16px;
}

.history__date {
  flex-shrink: 0;
}

.history__note {
  margin: 0;
}

.history__foot {
  height: 18px;
  background: var(--color-primary);
}

/* Gallery 2x4 */
.about-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* width: min(100%, var(--page-max-width)); */
  width: 100%;
  margin: 0 auto;
}

.about-gallery__item {
  aspect-ratio: 320 / 213;
  overflow: hidden;
}

.about-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ========== LIVE映像 ========== */
/* Figma Frame 1 @ 1280×939, inner 880px */
.live {
  background-color: #b8f0d8;
  background-image: url("../img/live/pattern.png");
  background-repeat: repeat;
  background-size: 22px 22px;
  padding: 74px 0;
}

.live__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 37px;
}

.live__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  margin: 0;
  color: #04c68c;
  text-align: center;
  -webkit-text-stroke-width: 6px;
  -webkit-text-stroke-color: #fff;
  paint-order: stroke fill;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 2.26875rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.live__star {
  flex-shrink: 0;
  width: 42px;
  height: auto;
  margin-top: 6px;
}

.live__video {
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 494;
  overflow: hidden;
  background: #000;
}

.live__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.live__note {
  box-sizing: border-box;
  width: 100%;
  padding: 30px 9.2%;
  border: 4px solid var(--color-panel-border);
  border-radius: 20px;
  background: #fff;
  color: var(--color-text);
  font-size: 16px;
  font-weight: var(--font-weight-extrabold);
  line-height: 28px;
  text-align: center;
}

.live__note p {
  margin: 0;
}

.live__schedule {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.live__schedule:hover {
  opacity: 0.75;
}

.live__disclaimer {
  margin-top: 0.25em !important;
  font-size: 14px;
  line-height: 28px;
}

/* ========== PANBEで出来ること ========== */
/* Figma: title @ y74, cards 322×270 × 3col @ x140, after 1000×230 */
.activities {
  background: #fff;
  padding: 74px 0 80px;
}

.activities__inner {
  width: min(var(--content-width), calc(100% - 40px));
  margin-inline: auto;
}

.activities__title {
  width: min(506px, 90%);
  margin: 0 auto 45px;
}

.activities__title img {
  width: 100%;
  height: auto;
}

.activities__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 17px;
  row-gap: 23px;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.activities-card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 270px;
  padding: 30px 29px 40px 30px;
  border: 4px solid var(--color-panel-border);
  border-radius: 30px;
  background: #fff;
  text-align: center;
}

.activities-card__icon {
  flex-shrink: 0;
  width: auto;
  height: 38px;
  object-fit: contain;
}

.activities-card__name {
  margin: 0;
  color: var(--color-primary-deep);
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
}

.activities-card__body {
  width: 100%;
  max-width: 263px;
  margin: 0;
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-weight-extrabold);
  line-height: 23px;
  text-align: left;
}

.activities-card__body--list {
  text-align: left;
}

.activities-card__body--list p {
  margin: 0;
}

.activities-after {
  box-sizing: border-box;
  width: 100%;
  padding: 31px 40px 36px;
  border: 4px solid var(--color-panel-border);
  border-radius: 20px;
  background: #fff;
}

.activities-after__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--color-primary-deep);
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.2;
}

.activities-after__icon {
  flex-shrink: 0;
  width: 31px;
  height: auto;
}

.activities-after__list {
  width: min(719px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 28px;
}

.activities-after__list li {
  position: relative;
  padding-left: 1.15em;
}

.activities-after__list li::before {
  content: "•";
  position: absolute;
  left: 0;
}

/* ========== 応募要項 / 募集要項 ========== */
/* Figma: title Group47 @ y1157, panels 880 @ x200, gap 32 */
.requirements {
  background-color: #b8f0d8;
  background-image: url("../img/live/pattern.png");
  background-repeat: repeat;
  background-size: 22px 22px;
  padding: 74px 0 80px;
}

.requirements__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.requirements__title {
  width: min(396px, 78%);
  margin: 0;
}

.requirements__title img {
  width: 100%;
  height: auto;
}

.requirements-panel {
  box-sizing: border-box;
  width: 100%;
  padding: 62px 80px;
  border: 4px solid var(--color-panel-border);
  border-radius: 45px;
  background: #fff;
}

.requirements-panel__heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 27px;
  color: var(--color-primary);
  font-family: var(--font-family-display);
  font-size: 36.3px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
}

.requirements-panel__heading span {
  min-width: 0;
  flex: 0 1 auto;
}

.requirements-panel__star {
  flex-shrink: 0;
  width: 42px;
  height: auto;
  margin-top: 2px;
}

.requirements-want {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 31px;
  text-align: left;
}

.requirements-want li {
  position: relative;
  margin: 0 0 27px;
  padding-left: 1.35em;
}

.requirements-want li:last-child {
  margin-bottom: 0;
}

.requirements-want li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
}

.requirements-qualify {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 35px;
  text-align: left;
}

.requirements-qualify li {
  position: relative;
  padding-left: 1.05em;
}

.requirements-qualify li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-primary);
}

.requirements-qualify__note {
  display: block;
  padding-left: 0.15em;
  line-height: 27px;
}

.requirements-qualify__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

.requirements-panel--schedule {
  padding: 62px 70px 92px;
}

.requirements-flow {
  margin: 0;
  padding: 0;
  list-style: none;
}

.requirements-flow__step {
  margin: 0;
}

.requirements-flow__step:not(:last-child)::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 740px;
  height: 42px;
  margin: 19px auto;
  background: url("../img/requirements/divider.svg") center / contain no-repeat;
}

.requirements-flow__label {
  margin: 0 0 7px;
  color: var(--color-primary);
  font-size: 22px;
  font-weight: var(--font-weight-extrabold);
  line-height: 35px;
}

.requirements-flow__desc {
  margin: 0;
  color: var(--color-text);
  font-size: 19px;
  font-weight: 700;
  line-height: 29px;
}

.requirements-flow__desc p {
  margin: 0;
}

.requirements-flow__link {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.08em;
}

/* ========== エントリー ========== */
/* Figma: title @ y3572, CTA 714×164 (shadow +8/+8), deadline @ y4061 */
.entry {
  background: #fff;
  padding: 80px 0 100px;
}

.entry__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.entry__title {
  width: min(396px, 78%);
  margin: 0 0 41px;
}

.entry__title img {
  width: 100%;
  height: auto;
}

.entry__lead {
  margin: 0 0 29px;
  color: #00a977;
  text-align: center;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.entry__lead-emphasis {
  display: block;
  margin-top: 20px;
  color: #ff8d7d;
  font-family: "M PLUS 1p", sans-serif;
  font-size: 30px;
  font-style: normal;
  font-weight: 800;
  line-height: normal;
}

.entry__lead-break {
  display: none;
}

.entry__cta {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: min(714px, calc(100% - 8px));
  height: 164px;
  margin: 0 0 38px;
  text-decoration: none;
}

.entry__cta-shadow {
  display: none;
}

.entry__cta-face {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  border: 7px solid var(--color-primary);
  border-radius: 20px;
  background: var(--color-fv-bg);
  box-shadow: 8px 8px 0 0 var(--color-primary);
  color: #04c68c;
  text-align: center;
  -webkit-text-stroke-width: 10px;
  -webkit-text-stroke-color: #fff;
  paint-order: stroke fill;
  font-family: "Dela Gothic One", sans-serif;
  font-size: 3.25rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entry__cta:hover .entry__cta-face {
  transform: translate(2px, 2px);
  box-shadow: 6px 6px 0 0 var(--color-primary);
}

.entry__cta:active .entry__cta-face {
  transform: translate(6px, 6px);
  box-shadow: 2px 2px 0 0 var(--color-primary);
}

.entry__deadline {
  margin: 0;
  color: #00a977;
  font-size: 30px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* ========== 注意事項 ========== */
/* Figma: title @ y4254, notes 880×280, privacy heading @ y4734 */
.notes {
  background: #fff;
  padding: 50px 0 100px;
}

.notes__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.notes__title {
  width: min(265px, 56%);
  margin: 0 0 38px;
}

.notes__title img {
  width: 100%;
  height: auto;
}

.notes__list {
  width: 100%;
  margin: 0 0 83px;
  padding: 0;
  list-style: none;
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.75;
  text-align: left;
}

.notes__list li {
  /* margin: 0 0 0.85em; */
}

.notes__list li:last-child {
  margin-bottom: 0;
}

.notes-privacy__heading {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 30px;
  color: var(--color-primary);
  font-family: var(--font-family-display);
  font-size: 36.3px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-align: center;
}

.notes-privacy__heading span {
  min-width: 0;
  flex: 0 1 auto;
}

.notes-privacy__star {
  flex-shrink: 0;
  width: 42px;
  height: auto;
  margin-top: 2px;
}

.notes-privacy__body {
  width: 100%;
  margin: 0;
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 1.75;
  text-align: center;
}

.notes-privacy__body p {
  margin: 0 0 0.85em;
}

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

/* ========== FAQ ========== */
/* Figma: title Group60, items 880×82 / gap 20, answer text 19px */
.faq {
  background-color: #b8f0d8;
  background-image: url("../img/live/pattern.png");
  background-repeat: repeat;
  background-size: 22px 22px;
  padding: 80px 0 60px;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq__title {
  width: min(144px, 36%);
  margin: 0 0 48px;
}

.faq__title img {
  width: 100%;
  height: auto;
}

.faq__list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.faq-item {
  margin: 0;
}

/* Figma 87:4714 — closed: full pill; open: green header + white panel joined */
.faq-item__summary {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 82px;
  padding: 18px 52px 18px 35px;
  border: 4px solid var(--color-primary);
  border-radius: 15px;
  background: var(--color-primary);
  color: #fff;
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 35px;
  cursor: pointer;
  list-style: none;
}

.faq-item[open] .faq-item__summary {
  border-radius: 15px 15px 0 0;
  border-bottom: none;
}

.faq-item__summary::-webkit-details-marker {
  display: none;
}

.faq-item__mark {
  flex-shrink: 0;
  width: 1.1em;
  font-size: 30px;
  line-height: 1;
  text-align: center;
}

.faq-item__question {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.faq-item__icon {
  position: absolute;
  right: 34px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: "";
  position: absolute;
  background: #fff;
  border-radius: 1px;
}

.faq-item__icon::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 3px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 3px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-item[open] .faq-item__icon::after {
  opacity: 0;
  transform: translateX(-50%) scaleY(0);
}

.faq-item__answer {
  box-sizing: border-box;
  margin: 0;
  padding: 26px 35px;
  border: 4px solid var(--color-primary);
  border-radius: 0 0 15px 15px;
  background: #fff;
  color: var(--color-text);
  font-size: 19px;
  font-weight: var(--font-weight-extrabold);
  line-height: 35px;
}

.faq-item__answer p {
  margin: 0;
}

/* Figma 43:4627 — ExtraBold 15px / leading 27, 窓口メールはリンク */
.site-footer {
  padding: 48px 24px 100px;
  background: var(--color-fv-bg);
  color: #000;
  font-family: var(--font-family);
  font-size: 15px;
  font-weight: var(--font-weight-extrabold);
  line-height: 27px;
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ========== SP ========== */
@media (max-width: 767px) {
  .site-header {
    top: 12px;
    width: calc(100% - 20px);
    height: 52px;
    padding: 0 12px 0 16px;
    gap: 12px;
  }

  .site-header__logo {
    width: 100px;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__menu {
    display: block;
  }

  .site-drawer {
    display: block;
    visibility: hidden;
    pointer-events: none;
  }

  .site-drawer.is-open {
    visibility: visible;
    pointer-events: auto;
  }

  .site-drawer__backdrop {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(0, 169, 119, 0.35);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .site-drawer.is-open .site-drawer__backdrop {
    opacity: 1;
  }

  .site-drawer__panel {
    position: fixed;
    top: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 150;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: min(320px, calc(100% - 24px));
    padding: 56px 22px 28px;
    overflow: auto;
    background: #fff;
    border: 3px solid var(--color-primary);
    border-radius: 24px;
    box-shadow: 5px 5px 0 0 var(--color-primary);
    transform: translateX(18px);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .site-drawer.is-open .site-drawer__panel {
    transform: translateX(0);
    opacity: 1;
  }

  .site-drawer__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 40px;
    height: 40px;
    color: var(--color-primary);
  }

  .site-drawer__close span,
  .site-drawer__close span::before {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 22px;
    height: 3px;
    background: currentColor;
    border-radius: 1px;
  }

  .site-drawer__close span {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .site-drawer__close span::before {
    content: "";
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .site-drawer__nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .site-drawer__link {
    display: block;
    padding: 13px 8px;
    border-bottom: 1px solid rgba(4, 198, 140, 0.28);
    color: var(--color-primary);
    font-size: 16px;
    font-weight: var(--font-weight-extrabold);
    line-height: 1.4;
    letter-spacing: 0.02em;
  }

  .site-drawer__link:last-child {
    border-bottom: none;
  }

  .site-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 56px;
    margin-top: 24px;
    border: 3px solid var(--color-primary);
    border-radius: 14px;
    background: var(--color-fv-bg);
    box-shadow: 4px 4px 0 0 var(--color-primary);
    color: var(--color-primary);
    font-family: var(--font-family-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: #fff;
    paint-order: stroke fill;
    text-align: center;
  }

  @media (prefers-reduced-motion: reduce) {
    .site-drawer__backdrop,
    .site-drawer__panel {
      transition: none;
    }
  }

  .fv {
    overflow: visible;
  }

  .fv__inner {
    aspect-ratio: 393 / 594;
    min-height: 0;
    padding: 0;
    overflow: hidden;
  }

  .fv__photo {
    position: absolute;
    left: 7.379%;
    top: 13.131%;
    width: 83.969%;
    height: 81.481%;
    border-radius: 20px;
  }

  .fv__photo img {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .fv__catch {
    display: none;
  }

  .fv__catch-sp {
    position: absolute;
    display: block;
    height: auto;
  }

  .fv__catch-sp--left {
    left: 3.561%;
    top: 15.493%;
    width: 16.031%;
  }

  .fv__catch-sp--right {
    left: 80.153%;
    top: 15.493%;
    width: 15.946%;
  }

  .fv__catch--left-1 {
    left: 10.641%;
    top: 15.529%;
    width: 8.873%;
    height: 36.016%;
  }

  .fv__catch--left-2 {
    left: 4.242%;
    top: 15.493%;
    width: 8.033%;
    height: 28.944%;
  }

  .fv__catch--left-3 {
    left: 3.561%;
    top: 43.172%;
    width: 8.9%;
    height: 21.815%;
  }

  .fv__catch--right-1 {
    left: 87.201%;
    top: 15.51%;
    width: 8.887%;
    height: 13.035%;
  }

  .fv__catch--right-2 {
    left: 80.153%;
    top: 15.493%;
    width: 9.077%;
    height: 25.821%;
  }

  .fv__logo {
    display: block;
    left: 9.669%;
    top: 84.007%;
    width: 80.153%;
  }

  .ticker {
    --ticker-height: 72px;
    height: calc(var(--ticker-height) / 2);
    font-size: 15px;
  }

  .entry-fab {
    --entry-fab-size: 95px;
    right: 5px;
    bottom: 12px;
  }

  .thoughts {
    overflow-x: clip;
    overflow-y: visible;
  }

  .thoughts__inner {
    aspect-ratio: auto;
    min-height: 0;
    padding: 48px 28px 64px;
    overflow: visible;
  }

  .thoughts__panel {
    position: relative;
    left: auto;
    top: auto;
    z-index: 2;
    width: 100%;
    height: auto;
    padding: 28px 22px 40px;
    border-width: 3px;
    border-radius: 28px;
  }

  .thoughts__title {
    position: relative;
    z-index: 3;
    width: min(72%, 280px);
    margin: 0 auto 20px;
  }

  .thoughts__content {
    position: relative;
    z-index: 3;
    padding-top: 0;
    height: auto;
  }

  .thoughts__lead {
    font-size: 18px;
  }

  .thoughts__body {
    font-size: 14px;
    line-height: 1.85;
  }

  /*
    SP: N・A はパネル背面、P・B・E・★ はパネル前面（PCと同じ層順）。
    負の left/right をやめて画面内に収める。
  */
  .thoughts__deco--n,
  .thoughts__deco--a {
    z-index: 1;
  }

  .thoughts__deco--p,
  .thoughts__deco--b,
  .thoughts__deco--e,
  .thoughts__deco--star {
    z-index: 4;
  }

  .thoughts__deco--p,
  .thoughts__deco--a,
  .thoughts__deco--n,
  .thoughts__deco--b,
  .thoughts__deco--e,
  .thoughts__deco--star {
    height: auto;
    aspect-ratio: auto;
  }

  .thoughts__deco img {
    height: auto;
  }

  .thoughts__deco--p,
  .thoughts__deco--a,
  .thoughts__deco--n,
  .thoughts__deco--b,
  .thoughts__deco--e,
  .thoughts__deco--star {
    width: 16%;
    min-width: 52px;
    max-width: 68px;
  }

  .thoughts__deco--p {
    left: 0;
    top: 6%;
  }

  .thoughts__deco--a {
    left: auto;
    right: -2%;
    top: 3%;
  }

  .thoughts__deco--n {
    left: 0;
    top: 46%;
  }

  .thoughts__deco--b {
    left: auto;
    right: 5%;
    top: 52%;
  }

  .thoughts__deco--e {
    left: 0;
    top: auto;
    bottom: 2%;
  }

  .thoughts__deco--star {
    left: auto;
    right: 0;
    top: auto;
    bottom: 4%;
  }

  .about {
    padding-top: 48px;
  }

  .about__title {
    width: min(240px, 70%);
    margin-bottom: 28px;
  }

  .about__lead {
    margin-bottom: 36px;
    font-size: 14px;
    line-height: 1.7;
  }

  .about__members {
    margin-bottom: 8px;
  }

  .history {
    --history-w: 100%;
    width: calc(100% - 32px);
    margin: 0 auto 40px;
    padding-top: 0;
  }

  .history__ears {
    display: none;
  }

  .history__head {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    padding: 12px 16px;
    transform: none;
    font-size: 20px;
    letter-spacing: 0.04em;
    border-radius: 7px 7px 0 0;
  }

  .history__panel {
    width: 100%;
    margin-top: 0;
    border: 3px solid var(--color-primary);
    border-top: none;
  }

  .history__list {
    padding: 20px 16px 24px;
  }

  .history__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(4, 198, 140, 0.25);
  }

  .history__item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }

  .history__year {
    width: auto;
    min-width: 88px;
    height: 34px;
    padding: 0 12px;
    font-size: 16px;
    border-radius: 4px;
  }

  .history__body {
    width: 100%;
    font-size: 13px;
    line-height: 1.7;
  }

  .history__events {
    gap: 10px;
  }

  .history__event {
    grid-template-columns: 42px 1fr;
    gap: 8px;
    align-items: start;
  }

  .history__date {
    font-variant-numeric: tabular-nums;
    line-height: 1.7;
  }

  .history__note {
    line-height: 1.7;
  }

  .history__foot {
    height: 12px;
  }

  .about-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  .live {
    padding: 48px 0;
  }

  .live__inner {
    gap: 24px;
  }

  .live__title {
    gap: 8px;
    font-size: 1.8rem;
    -webkit-text-stroke-width: 4px;
  }

  .live__star {
    width: 28px;
    margin-top: 2px;
  }

  .activities {
    padding: 48px 0 64px;
  }

  .activities__title {
    margin-bottom: 28px;
  }

  .activities__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 16px;
  }

  .activities-card {
    min-height: 0;
    padding: 24px 20px 28px;
  }

  .activities-after {
    padding: 24px 16px 28px;
  }

  .activities-after__list {
    font-size: 14px;
    line-height: 1.7;
  }

  .requirements {
    padding: 48px 0 64px;
  }

  .requirements__inner {
    gap: 20px;
  }

  .requirements__title {
    width: min(280px, 72%);
  }

  .requirements-panel {
    padding: 28px 16px 32px;
    border-width: 3px;
    border-radius: 28px;
  }

  .requirements-panel__heading {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 18px;
    font-size: 1.8rem;
    line-height: normal;
  }

  .requirements-panel__heading span {
    min-width: 0;
    flex: 0 1 auto;
    line-height: 1.2;
  }

  .requirements-panel__star {
    width: 28px;
    margin-top: 2px;
  }

  .requirements-want {
    font-size: 13px;
    line-height: 1.75;
  }

  .requirements-want li {
    margin-bottom: 14px;
  }

  .requirements-want li br {
    display: none;
  }

  .requirements-qualify {
    width: 100%;
    font-size: 13px;
    line-height: 1.75;
  }

  .requirements-qualify__note {
    margin-top: 0.15em;
    line-height: 1.55;
  }

  .requirements-panel--schedule {
    padding: 28px 16px 36px;
  }

  .requirements-flow__label {
    font-size: 15px;
    line-height: 1.4;
  }

  .requirements-flow__desc {
    font-size: 13px;
    line-height: 1.65;
  }

  .requirements-flow__step:not(:last-child)::after {
    height: 28px;
    margin: 12px auto;
  }

  .entry {
    padding: 48px 0 32px;
  }

  .entry__inner {
    width: min(var(--section-inner-width), calc(100% - 32px));
  }

  .entry__title {
    width: min(260px, 68%);
    margin-bottom: 20px;
  }

  .entry__lead {
    margin-bottom: 28px;
    font-size: 13px;
    line-height: 1.75;
  }

  .entry__lead-emphasis {
    margin-top: 12px;
    font-size: 20px;
    line-height: 1.5;
  }

  .entry__lead-break {
    display: inline;
  }

  .entry__lead-second-line {
    display: inline-block;
    transform: translateX(0.25em);
  }

  .entry__cta {
    width: calc(100% - 10px);
    height: 88px;
    margin-bottom: 20px;
  }

  .entry__cta-face {
    border-width: 4px;
    border-radius: 14px;
    box-shadow: 5px 5px 0 0 var(--color-primary);
    font-size: clamp(1.35rem, 7vw, 1.75rem);
    -webkit-text-stroke-width: 3px;
    letter-spacing: 0.02em;
  }

  .entry__cta:hover .entry__cta-face {
    box-shadow: 3px 3px 0 0 var(--color-primary);
  }

  .entry__cta:active .entry__cta-face {
    box-shadow: 1px 1px 0 0 var(--color-primary);
  }

  .entry__deadline {
    max-width: 100%;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.01em;
  }

  .notes {
    padding: 24px 0 40px;
  }

  .notes__inner {
    width: min(var(--section-inner-width), calc(100% - 32px));
  }

  .notes__title {
    width: min(200px, 58%);
    margin-bottom: 20px;
  }

  .notes__list {
    margin-bottom: 36px;
    font-size: 13px;
    line-height: 1.75;
  }

  .notes__list li + li {
    margin-top: 0.7em;
  }

  .notes-privacy__heading {
    flex-wrap: nowrap;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 1.8rem;
    line-height: normal;
  }

  .notes-privacy__star {
    width: 28px;
    margin-top: 2px;
  }

  .notes-privacy__body {
    font-size: 13px;
    line-height: 1.75;
    text-align: left;
  }

  .notes-privacy__body p {
    margin-bottom: 0.85em;
  }

  .faq {
    padding: 32px 0 48px;
  }

  .faq__inner {
    width: min(var(--section-inner-width), calc(100% - 32px));
  }

  .faq__title {
    width: min(100px, 28%);
    margin-bottom: 24px;
  }

  .faq__list {
    gap: 10px;
  }

  .faq-item__summary {
    align-items: flex-start;
    min-height: 0;
    padding: 14px 40px 14px 14px;
    gap: 8px;
    font-size: 13px;
    line-height: 1.55;
    border-width: 3px;
    border-radius: 12px;
  }

  .faq-item[open] .faq-item__summary {
    border-radius: 12px 12px 0 0;
  }

  .faq-item__mark {
    margin-top: 0.05em;
    font-size: 18px;
    width: 1em;
  }

  .faq-item__icon {
    top: 16px;
    right: 14px;
    width: 14px;
    height: 14px;
    transform: none;
  }

  .faq-item__answer {
    padding: 14px 14px 16px;
    border-width: 3px;
    border-radius: 0 0 12px 12px;
    font-size: 13px;
    line-height: 1.7;
  }

  .site-footer {
    padding: 32px 16px 72px;
    font-size: 13px;
    line-height: 24px;
  }
}