/* ===================================================================
   体験パーツ
   ・Hero：ドットの月（開くと点灯）
   ・月が街を照らす（スクロール）→ 人をタップして声を集める
   ・02 タップで本音（Serviceの図の上段）
   ・03 スクロールで裏返る（INSIGHT）
   ポップな色は 02・03 の中だけで使う
   =================================================================== */
:root { --exp-moon: #ffd75e; --exp-ink: #161616; --night: #0e0e10; }

.exp-h { font-size: clamp(1.7rem, 4.2vw, 2.9rem); font-weight: 900; line-height: 1.4; margin: 1rem 0 .8rem; }
.exp-h mark { background: linear-gradient(transparent 62%, var(--exp-moon) 62%); color: inherit; }
.exp-sub { max-width: 680px; line-height: 1.95; }
.exp-note { margin-top: 1.2rem; font-size: .75rem; opacity: .55; }

/* ---------- Hero：黒い夜空にドットの月だけ ---------- */
.hero .hero-title { font-size: clamp(3.2rem, 8.6vw, 8.2rem); }
.hero .hero-lead { line-height: 1.7; }
.px-moon { display: block; aspect-ratio: 1; }
/* 押すと、もう一度浮かび上がる。見出しの入れ物（横幅いっぱい）より前面に出してタップを届かせる */
.hero-moon { position: absolute; z-index: 3; right: 8%; top: 50%; width: min(40vw, 460px); transform: translateY(-50%);
  cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; transition: transform .35s cubic-bezier(.34,1.56,.64,1); }
.hero-moon:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 8px; }
@media (hover: hover) { .hero-moon:hover { transform: translateY(-50%) scale(1.025); } }
.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); font-family: var(--font-en); font-size: 12px; letter-spacing: .24em; opacity: .6; }

/* ---------- 月が街を照らす（舞台を画面に固定し、スクロールの進み具合で演出） ---------- */
.light-scene { position: relative; height: 380vh; background: var(--night); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden;
  /* 照らされた場所は「白地に︿模様」の見た目になる */
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='90'%3E%3Cpath d='M14 22l5-4 5 4M74 64l5-4 5 4M96 18l5-4 5 4M40 74l5-4 5 4' fill='none' stroke='%23cfcfcf' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.town-wrap { position: absolute; left: 50%; bottom: -11vh; width: min(72vw, 880px, calc(84vh * 1.242)); transform: translateX(-46%); }
.town-wrap img { display: block; width: 100%; }
/* 夜の幕：月の位置を中心に「月明かりの穴」が広がる */
.veil { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle calc(var(--r, 0) * 1vmax) at 50% 13vh, rgba(14,14,16,0) 0%, rgba(14,14,16,0) 62%, rgba(14,14,16,.92) 92%, var(--night) 100%); }
.veil-stars { position: absolute; inset: 0; opacity: calc(1 - var(--p, 0) * 1.4); background: url("img/stars-a.svg") 0 0 / 600px 600px repeat; }
.beam { position: absolute; z-index: 3; left: 50%; top: 13vh; width: 70vmin; height: 85vh; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 80%);
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: calc(.9 - var(--p, 0) * 1.6); }
.scene-moon { position: absolute; z-index: 4; left: 50%; top: 13vh; width: 150px; transform: translate(-50%, -50%); }
.scene-copy { position: absolute; z-index: 4; left: 6%; top: 11vh; max-width: 38%; color: #fff; transition: color .6s; }
.scene-copy h2 { font-size: clamp(1.6rem, 3.4vw, 2.8rem); font-weight: 900; line-height: 1.45; }
.stack2 { display: grid; margin-top: 1rem; }
.stack2 > * { grid-area: 1/1; font-weight: 700; line-height: 1.9; font-size: clamp(.92rem, 1.3vw, 1.05rem); }
.stack2 .c2 { opacity: 0; transform: translateY(10px); transition: .7s; }
.stack2 .done { opacity: 0; transform: translateY(8px); transition: .6s; font-weight: 900; }
.stage.lit .scene-copy { color: var(--exp-ink); }
.stage.lit .stack2 .c2 { opacity: 1; transform: none; }
.stage.all .stack2 .c2 { opacity: 0; }
.stage.all .stack2 .done { opacity: 1; transform: none; }
.log { list-style: none; margin-top: 1.1rem; display: flex; flex-direction: column; gap: .45rem; }
.log li { font-size: .8rem; line-height: 1.5; padding: .45em .8em; border-radius: 10px; border: 1.5px solid var(--exp-ink); background: #fff; color: var(--exp-ink); animation: log-pop .45s cubic-bezier(.34,1.56,.64,1); }
.log li small { display: block; font-size: .66rem; color: #777; font-weight: 700; }
@keyframes log-pop { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }

/* 声を出している人（タップすると本音の吹き出し。出すのは今タップした1つだけ） */
.spot { all: unset; position: absolute; z-index: 5; width: 40px; height: 40px; margin: -20px 0 0 -20px; cursor: pointer; border-radius: 50%; opacity: 0; pointer-events: none; transition: opacity .5s; }
.stage.ready .spot { opacity: 1; pointer-events: auto; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2.5px solid var(--exp-ink); }
.spot::after { animation: spot-ping 1.6s ease-out infinite; }
@keyframes spot-ping { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.9); opacity: 0; } }
.spot:focus-visible { outline: 3px solid var(--exp-ink); outline-offset: 2px; }
.spot.found::after { animation: none; opacity: 0; }
.spot.found::before { background: var(--exp-ink); inset: 13px; }
.spot.active { z-index: 7; }
.say { position: absolute; bottom: calc(100% + 10px); left: 50%; width: max-content; max-width: 240px; padding: .6em .95em; border-radius: 14px; background: #fff; color: var(--exp-ink); border: 2px solid var(--exp-ink);
  font-weight: 700; font-size: .88rem; line-height: 1.55; text-align: left; white-space: normal; opacity: 0; pointer-events: none;
  transform: translate(-22%, 6px) scale(.9); transform-origin: 22% 100%; transition: .45s cubic-bezier(.34,1.56,.64,1); }
.say small { display: block; font-size: .68rem; color: #777; font-weight: 700; margin-bottom: .15rem; }
.say::after { content: ""; position: absolute; left: 18%; bottom: -8px; width: 12px; height: 12px; background: #fff; border-right: 2px solid var(--exp-ink); border-bottom: 2px solid var(--exp-ink); transform: rotate(45deg); }
.spot.flipx .say { transform: translate(-78%, 6px) scale(.9); transform-origin: 78% 100%; }
.spot.flipx .say::after { left: auto; right: 18%; }
.spot.active .say { opacity: 1; transform: translate(-22%, 0) scale(1); }
.spot.active.flipx .say { transform: translate(-78%, 0) scale(1); }
.hud { position: absolute; z-index: 6; left: 50%; bottom: 22px; transform: translate(-50%, 10px); color: var(--exp-ink); background: #fff; border: 2px solid var(--exp-ink); border-radius: 999px;
  padding: .5em 1.3em; font-weight: 700; font-size: .88rem; white-space: nowrap; opacity: 0; transition: .5s; }
.stage.ready .hud { opacity: 1; transform: translate(-50%, 0); }
.hud b { font-size: 1.05rem; }
.scene-note { position: absolute; z-index: 6; right: 18px; bottom: 14px; font-size: .7rem; color: #999; opacity: 0; transition: .5s; }
.stage.ready .scene-note { opacity: 1; }

/* ---------- 02 タップで本音（Serviceの図の上段） ---------- */
.honne-hint { color: rgba(255,255,255,.7); font-size: 12px; text-align: center; margin-bottom: 14px; }
.honne-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; align-items: end; }
.person { display: flex; flex-direction: column; gap: 14px; }
.bubble { all: unset; cursor: pointer; display: block; width: 100%; perspective: 900px; }
.bubble:focus-visible { outline: 2px solid var(--exp-moon); outline-offset: 4px; border-radius: 18px; }
.bubble-inner { display: grid; transform-style: preserve-3d; transition: transform .75s cubic-bezier(.34,1.56,.64,1); }
.person.flip .bubble-inner { transform: rotateY(180deg); }
.face { grid-area: 1/1; position: relative; border-radius: 16px; padding: 12px 14px; font-weight: 700; line-height: 1.6; font-size: 13px; color: var(--exp-ink); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; }
.face::after { content: ""; position: absolute; left: 26px; bottom: -8px; width: 14px; height: 14px; background: inherit; transform: rotate(45deg); }
.face .chip { display: block; width: max-content; font-size: 10px; padding: 0 .7em; border-radius: 999px; border: 1.5px solid var(--exp-ink); margin-bottom: 5px; background: #fff; }
.front { color: #666; }
.back { background: var(--c); transform: rotateY(180deg); }
.tap { position: absolute; right: -6px; top: -10px; font-family: var(--font-en); font-size: 10px; letter-spacing: .1em; background: var(--exp-moon); color: var(--exp-ink); padding: .1em .7em; border-radius: 999px; animation: tap-bob 1.6s ease-in-out infinite; }
@keyframes tap-bob { 50% { transform: translateY(-4px); } }
.person-who { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.avatar { width: 46px; height: 46px; flex: none; transition: transform .5s cubic-bezier(.34,1.56,.64,1); }
.person.flip .avatar { transform: translateY(-3px) rotate(-6deg); }
.role { color: #fff; font-weight: 700; font-size: 13px; line-height: 1.35; }
.role small { display: block; font-weight: 400; font-size: 11px; color: rgba(255,255,255,.55); }
.honne-count { margin-left: .8em; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.75); }
.honne-count b { color: var(--exp-moon); font-size: 14px; }
.honne-done { text-align: center; color: var(--exp-moon); font-weight: 700; font-size: 13px; margin-top: 6px; max-height: 0; opacity: 0; overflow: hidden; transition: opacity .6s, max-height .6s; }
.honne-done.show { opacity: 1; max-height: 60px; }

/* ---------- 03 スクロールで裏返る（ファクト → インサイト → 打ち手） ---------- */
.insight { background: #fbf8f1; color: var(--exp-ink); padding: 96px 2.5rem; }
.insight > * { max-width: var(--max); margin-inline: auto; }
.insight-intro .exp-sub { color: #555; }
.flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.flip-card { height: 330px; perspective: 1000px; cursor: pointer; }
.fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.34,1.3,.64,1); }
.flip-card.flip .fc-inner { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; border: 2px solid var(--exp-ink); border-radius: 24px; padding: 1.7rem; display: flex; flex-direction: column; justify-content: space-between; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fc-front { background: #fff; }
.fc-back { background: var(--c); transform: rotateY(180deg); }
.fc-k { font-family: var(--font-en); letter-spacing: .14em; font-size: .75rem; }
.fc-num { font-family: var(--font-en); font-size: 3.4rem; line-height: 1; }
.fc-fact { font-weight: 700; font-size: .92rem; line-height: 1.6; }
.fc-ins { font-weight: 900; font-size: 1.1rem; line-height: 1.6; }
.fc-act { font-weight: 700; font-size: .88rem; line-height: 1.6; padding-top: .8rem; border-top: 1.5px solid rgba(0,0,0,.25); }
.fc-act b { font-family: var(--font-en); letter-spacing: .12em; font-size: .72rem; display: block; font-weight: 400; }
.insight .exp-note { text-align: center; }

/* INSIGHTの最後：本音シリーズ（/honne/）への入口バナー。
   PC・タブレット＝いただいたバナー画像をそのまま。スマホ＝右側のカード部分だけを切り出し、文字はHTMLで下に出す */
.honne-banner { display: block; margin-top: 3.5rem; border-radius: 24px; overflow: hidden; background: #fff; color: #0f1c4d; text-decoration: none;
  box-shadow: 0 0 0 1.5px rgba(22,22,22,.12), 0 10px 30px rgba(15,28,77,.08); transition: transform .4s cubic-bezier(.34,1.56,.64,1), box-shadow .4s; }
.honne-banner:focus-visible { outline: 3px solid #2457d6; outline-offset: 5px; }
.hb-pic img { display: block; width: 100%; height: auto; }
.hb-sp { display: none; }
@media (hover: hover) {
  .honne-banner:hover { transform: translateY(-4px); box-shadow: 0 0 0 1.5px rgba(22,22,22,.12), 0 18px 40px rgba(15,28,77,.16); }
}

/* ---------- スマホ ---------- */
@media (max-width: 768px) {
  .hero-moon { right: 50%; top: auto; bottom: 9vh; width: min(78vw, 360px); transform: translateX(50%); opacity: .95; }
  .hero .hero-inner { margin-top: -30vh; }
  .hero .hero-lead br, .hero .hero-text br { display: none; }   /* 狭い画面では手動改行を外して自然に折り返す */
  .light-scene { height: 360vh; }
  .town-wrap { width: 125vw; bottom: 8vh; transform: translateX(-50%); }
  .scene-moon { width: 84px; top: 21vh; left: 80%; }   /* ヘッダーのボタンと重ならない高さ */
  .veil { background: radial-gradient(circle calc(var(--r, 0) * 1vmax) at 80% 21vh, rgba(14,14,16,0) 0%, rgba(14,14,16,0) 62%, rgba(14,14,16,.92) 92%, var(--night) 100%); }
  .beam { left: 80%; top: 21vh; }
  .scene-copy { left: 6%; top: 8vh; max-width: 64%; }
  .scene-copy h2 { font-size: 1.45rem; }
  .log { display: none; }            /* スマホは一覧を出さず、吹き出しとカウンターだけ */
  .say { max-width: 200px; font-size: .8rem; }
  .hud { font-size: .78rem; bottom: 16px; }
  .scene-note { display: none; }
  .honne-grid { grid-template-columns: 1fr; }
  .insight { padding: 72px 1.5rem; }
  .flips { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .hb-sp { display: block; padding: 1.4rem 1.3rem 1.6rem; }
  .hb-k { font-family: var(--font-en); letter-spacing: .18em; font-size: .72rem; }
  .hb-title { margin-top: .4rem; font-weight: 900; font-size: 2.1rem; line-height: 1.25; letter-spacing: .01em; }
  .hb-title span { color: #1a4fd6; font-size: 1.25em; }
  .hb-vol { margin-top: .5rem; font-weight: 700; font-size: 1.05rem; }
  .hb-desc { margin-top: .3rem; font-size: .86rem; line-height: 1.7; color: #333; }
  .hb-cta { display: inline-flex; align-items: center; gap: .6em; margin-top: 1rem; padding: .8em 1.6em; border-radius: 999px; background: #1a4fd6; color: #fff; font-weight: 700; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .starfield::before, .starfield::after, .tap, .spot::after { animation: none; }
  .bubble-inner, .fc-inner, .say, .stack2 > * { transition: none; }
}