/* SORAIRO 10th anniversary demo — fullscratch CSS */

:root{
  --bg:#000000;
  --bg-sub:#191919;
  --fg:#ffffff;
  --fg-dim:rgba(255,255,255,.62);
  --accent:#ffc943;
  --red:#c23a3a;
  --blue:#3457d5;
  --r-pill:2em;
  --r-circle:1.75em;
  --r-card:.6em;
  --r-card-sm:.5em;
  --gap:clamp(20px,4vw,64px);
  --ease:cubic-bezier(.16,.84,.44,1);
  --dur-fast:.2s;
  --dur:.4s;
  --dur-slow:.8s;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:112px;}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Yu Gothic UI","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Meiryo,sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,p,ul,figure{margin:0;padding:0;}
ul{list-style:none;}
a{color:inherit;text-decoration:none;}
img,canvas,svg{display:block;max-width:100%;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

.section-inner{
  max-width:1120px;
  margin:0 auto;
  padding:0 var(--gap);
}
.section-label{
  font-size:clamp(13px,1.6vw,15px);
  letter-spacing:.14em;
  color:var(--fg-dim);
  margin-bottom:1.4em;
  text-transform:uppercase;
}
.section-label.light{color:rgba(255,255,255,.8);}

/* ---------- demo badge ---------- */
.demo-badge{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:500;
  margin:0;
  padding:.5em 1em;
  font-size:12px;
  text-align:center;
  background:var(--accent);
  color:#000;
  letter-spacing:.02em;
}

/* ---------- header (ロゴ→ハンバーガーを左上に縦積み) ---------- */
.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:300;
  transition:transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), z-index 0s;
}
.site-header.is-hidden{transform:translateY(-100%);opacity:0;}
/* 開時はハンバーガー自身をメニューより前面へ（実クリックで再度届くようにする） */
.site-header.is-menu-open{z-index:410;}
.header-inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:22px 0 0 var(--gap);
}
.header-inner .brand{
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.brand-mark{
  font-size:15px;
  font-weight:800;
  letter-spacing:.16em;
}
.hamburger{
  width:44px;height:44px;
  position:relative;
}
.hamburger .stroke{
  position:absolute;left:4px;right:4px;
  height:2px;background:var(--fg);
  transition:transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease), top var(--dur) var(--ease);
}
.hamburger .stroke:nth-child(1){top:11px;}
.hamburger .stroke:nth-child(2){top:21px;}
.hamburger .stroke:nth-child(3){top:31px;}
.hamburger.is-open .stroke:nth-child(1){top:21px;transform:rotate(45deg);}
.hamburger.is-open .stroke:nth-child(2){opacity:0;}
.hamburger.is-open .stroke:nth-child(3){top:21px;transform:rotate(-45deg);}

/* ---------- menu overlay (フルオーバーレイ) ---------- */
.menu-overlay{
  position:fixed;inset:0;
  z-index:400;
  visibility:hidden;
}
.menu-overlay-scrim{
  position:absolute;inset:0;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}
.menu-overlay-panel{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:110px var(--gap) 40px;
  opacity:0;
  transform:translateY(24px);
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  /* パネル自体は当たり判定を持たない＝空白部分のクリックは下のscrimへ通す（閉じるため） */
  pointer-events:none;
}
.menu-overlay.is-open{visibility:visible;}
.menu-overlay.is-open .menu-overlay-scrim{opacity:1;}
.menu-overlay.is-open .menu-overlay-panel{opacity:1;transform:translateY(0);}

.menu-links{display:flex;flex-direction:column;gap:0;pointer-events:auto;}
.menu-link{
  display:block;
  padding:18px 0;
  font-size:clamp(24px,4.2vw,40px);
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,.16);
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0 2px;
  transition:background-size var(--dur) var(--ease);
}
@media (hover:hover){
  .menu-link:hover{background-size:100% 2px;}
}
.menu-mark{
  position:absolute;
  right:var(--gap);
  top:110px;
  text-align:right;
  font-size:clamp(30px,6vw,90px);
  font-weight:900;
  line-height:1;
  color:rgba(255,255,255,.08);
  letter-spacing:.02em;
}
.menu-mark span{display:block;font-size:.28em;color:rgba(255,255,255,.14);margin-top:.4em;}
.menu-foot{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  padding-top:24px;
  pointer-events:auto;
}
.menu-legal{display:flex;flex-wrap:wrap;gap:0 20px;font-size:12px;color:var(--fg-dim);}
.menu-legal a{display:inline-flex;align-items:center;min-height:44px;}
.menu-sns{display:flex;gap:10px;}
.menu-sns a,.footer-sns a{
  width:44px;height:44px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-circle);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
@media (hover:hover){
  .menu-sns a:hover,.footer-sns a:hover{background:var(--fg);color:#000;transform:translateY(-3px);}
}
.copyright{font-size:11px;color:var(--fg-dim);width:100%;margin-top:10px;}

/* ---------- hero ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  padding:120px var(--gap) 60px;
}
.hero-tiles{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(8,1fr);
  grid-template-rows:repeat(6,1fr);
  opacity:.5;
  transform:scale(1);
  transition:opacity 2s var(--ease), transform 2s var(--ease);
}
html.js-anim .hero-tiles{opacity:0;transform:scale(1.06);}
html.js-anim .hero-tiles.is-shown{opacity:.5;transform:scale(1);}
.hero-tiles div{background-size:cover;}
.hero-veil{
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,.35), rgba(0,0,0,.92) 75%);
}
.hero-routeline{
  position:absolute;
  left:0;right:0;bottom:8%;
  width:100%;height:120px;
  overflow:visible;
}
.hero-routeline polyline,.divider-routeline polyline{
  fill:none;
  stroke:var(--accent);
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:1400;
  stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.4s var(--ease), stroke-width var(--dur) var(--ease);
}
.hero-routeline.is-lit polyline,.divider-routeline.is-lit polyline{stroke-dashoffset:0;}
.divider-routeline{width:100%;height:60px;position:relative;z-index:2;}

.hero-body{
  position:relative;z-index:2;max-width:920px;
  left:-14px;top:6px;
  transition:left .6s var(--ease), top .6s var(--ease);
}
.hero-body.is-shift{left:0;top:0;}
.hero-eyebrow{
  font-size:13px;letter-spacing:.22em;color:var(--accent);margin-bottom:18px;
}
.hero-copy{
  font-size:clamp(38px,7.6vw,108px);
  font-weight:900;
  font-stretch:condensed;
  line-height:1.14;
  letter-spacing:-.015em;
  background:linear-gradient(180deg,#fff 0%,#fff 58%,rgba(255,255,255,.5) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-stroke:.4px rgba(255,255,255,.3);
}
@supports not (background-clip:text){
  .hero-copy{background:none;color:var(--fg);-webkit-text-stroke:0;}
}
.hero-copy .char{
  display:inline-block;
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay:calc(var(--i,0) * 40ms);
}
/* 既定＝見える。html.js-anim（JSが演出の準備を終えた時だけ付く）の間だけ、演出用の初期非表示状態にする */
html.js-anim .hero-copy .char{opacity:0;transform:translateY(.5em);}
html.js-anim .hero-copy.is-shown .char{opacity:1;transform:translateY(0);}
.hero-sub{
  margin-top:24px;
  font-size:clamp(14px,1.8vw,18px);
  color:var(--fg-dim);
}
.hero-mascot{
  position:absolute;
  right:6%;
  bottom:-4%;
  width:clamp(140px,20vw,320px);
  aspect-ratio:1;
  opacity:1;
  transform:scale(1);
  transition:opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
html.js-anim .hero-mascot{opacity:0;transform:scale(.7);}
html.js-anim .hero-mascot.is-shown{opacity:1;transform:scale(1);}
.mascot-ring{
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--accent);
  opacity:.5;
}
.mascot-core{
  position:absolute;inset:14%;
  border-radius:50%;
  background:conic-gradient(from 120deg, var(--accent), var(--blue), var(--red), var(--accent));
  filter:blur(.5px);
  box-shadow:0 0 60px rgba(255,201,67,.35);
}
.scroll-cue{
  position:absolute;
  left:50%;bottom:28px;
  transform:translateX(-50%);
  width:44px;height:50px;
  display:flex;align-items:center;justify-content:center;
  z-index:2;
}
.scroll-cue span{
  position:absolute;top:0;left:calc(50% - .5px);width:1px;height:100%;
  background:linear-gradient(var(--fg),transparent);
  animation:cue 1.8s ease-in-out infinite;
}
@keyframes cue{
  0%{transform:scaleY(0);transform-origin:top;}
  50%{transform:scaleY(1);transform-origin:top;}
  50.01%{transform-origin:bottom;}
  100%{transform:scaleY(0);transform-origin:bottom;}
}

/* ---------- reveal utilities (scroll fade / stagger) ----------
   既定＝見える（opacity/transformの指定なし＝通常のDOM表示）。
   html.js-anim（JSがobserverまで組み終えてから最後に付けるクラス）が付いた時だけ、
   演出用の初期非表示→is-shownで出現、という段取りにする。JSが遅い・失敗した場合は
   js-animが付かないため、文字は常に読める状態のまま。 */
.reveal-word,.reveal-fade{
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
html.js-anim .reveal-word,html.js-anim .reveal-fade{opacity:0;transform:translateY(18px);}
html.js-anim .reveal-word.is-shown,html.js-anim .reveal-fade.is-shown{opacity:1;transform:translateY(0);}
.reveal-line{
  overflow:hidden;
}
.reveal-line .line{
  display:block;
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay:calc(var(--i,0) * 70ms);
}
html.js-anim .reveal-line .line{opacity:0;transform:translateY(100%);}
html.js-anim .reveal-line.is-shown .line{opacity:1;transform:translateY(0);}

/* ---------- message ---------- */
.message{padding:min(22vw,220px) 0 140px;}
.section-lead{
  font-size:clamp(22px,3.4vw,36px);
  font-weight:800;
  line-height:1.6;
  max-width:820px;
  margin-bottom:56px;
}
.message-body p{
  font-size:clamp(15px,1.7vw,18px);
  color:rgba(255,255,255,.86);
  max-width:640px;
  padding:.5em 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.message-thanks{
  color:var(--fg) !important;
  font-weight:700;
  border-bottom:none !important;
  padding-top:1.4em !important;
}

/* ---------- campaign ---------- */
.campaign{position:relative;padding:120px 0 140px;overflow:hidden;}
.campaign-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 15% 20%, rgba(194,58,58,.35), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(52,87,213,.28), transparent 50%),
    var(--bg-sub);
  z-index:0;
  /* :has()状態伝播 1/2 — 前段Messageの光る折れ線(#routelineDivider1)が描き終わると
     離れたCampaignの背景クリップが広がる（隣接ブロックへの状態伝播） */
  clip-path:circle(46% at 18% 18%);
  transition:clip-path 1.2s .2s var(--ease);
}
.l-main:has(#routelineDivider1.is-lit) .campaign-bg{
  clip-path:circle(150% at 18% 18%);
}
.campaign .section-inner{position:relative;z-index:1;}
.campaign-banner{
  background:linear-gradient(135deg, var(--red), #7a1f1f 70%);
  border-radius:var(--r-card);
  padding:clamp(28px,5vw,64px);
  margin-bottom:32px;
}
.campaign-banner-eyebrow{
  font-size:clamp(13px,1.6vw,16px);
  letter-spacing:.3em;
  color:rgba(255,255,255,.8);
  margin-bottom:.6em;
}
.campaign-banner-title{
  font-size:clamp(24px,4.4vw,52px);
  font-weight:900;
  line-height:1.3;
}
.campaign-copy{
  max-width:640px;
  color:rgba(255,255,255,.85);
  margin-bottom:32px;
}
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:14px;
  padding:.9em 1.8em .9em 1.8em;
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-pill);
  font-size:14px;
  letter-spacing:.06em;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover:hover){
  .btn-pill:hover{background:var(--fg);color:#000;border-color:var(--fg);}
  .btn-pill:hover .arrow{transform:translateX(3px);}
}
.btn-circle{
  width:var(--r-circle);height:var(--r-circle);
  border-radius:var(--r-circle);
  border:1px solid currentColor;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.arrow{
  width:9px;height:9px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform var(--dur) var(--ease);
}
.campaign-photos{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-top:48px;
}
.thumb{overflow:hidden;border-radius:var(--r-card);}
.thumb figcaption{font-size:11px;color:var(--fg-dim);margin-top:.6em;}
.thumb-tile{
  display:block;width:100%;aspect-ratio:4/3;
  border-radius:inherit;
  transition:transform 2s var(--ease);
}
.thumb:hover .thumb-tile,.plan-card:hover .thumb-tile{transform:scale(1.08);}

/* placeholder tile palette (photo代替のグラデーション/パターンタイル) */
.thumb-tile,.hero-tiles div{
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);
}
.thumb-tile[data-tile="1"],.hero-tiles div:nth-child(8n+1){background-color:#2a2a2a;background-image:radial-gradient(circle at 30% 30%, var(--accent), transparent 60%),repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);}
.thumb-tile[data-tile="2"],.hero-tiles div:nth-child(8n+2){background-color:#1c1c1c;background-image:radial-gradient(circle at 70% 60%, var(--red), transparent 55%),repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);}
.thumb-tile[data-tile="3"],.hero-tiles div:nth-child(8n+3){background-color:#232323;background-image:radial-gradient(circle at 50% 50%, var(--blue), transparent 55%),repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 14px);}
.thumb-tile[data-tile="5"],.hero-tiles div:nth-child(8n+4){background-color:#262626;background-image:linear-gradient(160deg, var(--accent), transparent 60%);}
.thumb-tile[data-tile="6"],.hero-tiles div:nth-child(8n+5){background-color:#1a1a1a;background-image:linear-gradient(200deg, var(--blue), transparent 60%);}
.thumb-tile[data-tile="7"],.hero-tiles div:nth-child(8n+6){background-color:#242424;background-image:linear-gradient(60deg, var(--red), transparent 55%);}
.thumb-tile[data-tile="8"],.hero-tiles div:nth-child(8n+7){background-color:#1e1e1e;background-image:radial-gradient(circle at 40% 70%, var(--accent), transparent 50%);}
.thumb-tile[data-tile="9"],.hero-tiles div:nth-child(8n+0){background-color:#282828;background-image:radial-gradient(circle at 60% 30%, var(--blue), transparent 50%);}
.thumb-tile.small{aspect-ratio:16/10;}

/* ---------- ticker / マーキー（無限ループ帯） ---------- */
.ticker{
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
  padding:18px 0;
  margin-top:48px;
  position:relative;
  z-index:1;
}
.ticker-track{
  display:flex;
  width:max-content;
  gap:48px;
  animation:ticker-scroll 22s linear infinite;
  will-change:transform;
}
.ticker-track span{
  font-size:clamp(13px,1.6vw,15px);
  letter-spacing:.16em;
  color:var(--fg-dim);
  white-space:nowrap;
  text-transform:uppercase;
}
@keyframes ticker-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}
@media (hover:hover){
  .ticker:hover .ticker-track{animation-play-state:paused;}
}

.tag-pill{
  display:inline-block;
  padding:.3em 1.3em;
  border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.5);
  font-size:12px;
  letter-spacing:.06em;
  white-space:nowrap;
  flex-shrink:0;
}

/* ---------- history ---------- */
.history{padding-top:120px;position:relative;}
.history .section-inner{margin-bottom:40px;}
.history-scroller{position:relative;height:600vh;}
.epoch-stage{
  position:sticky;top:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
  background:var(--bg-sub);
}
.history-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.epoch-cards{
  position:relative;z-index:1;
  max-width:1120px;width:100%;
  margin:0 auto;
  padding:0 var(--gap);
}
.epoch-card{
  display:none;
  align-items:center;
  gap:clamp(20px,4vw,56px);
  animation:panelIn .5s var(--ease);
}
.epoch-card.is-active{display:flex;}
@keyframes panelIn{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:translateY(0);}
}
.epoch-card .thumb-tile.small{width:clamp(160px,26vw,320px);flex-shrink:0;}
.history-year{
  font-size:clamp(48px,9vw,140px);
  font-weight:900;
  font-stretch:condensed;
  line-height:1;
  position:absolute;
  top:-.5em;left:var(--gap);
  color:rgba(255,255,255,.08);
  -webkit-text-stroke:1px rgba(255,255,255,.16);
}
.history-headline{
  font-size:clamp(18px,2.6vw,30px);
  font-weight:700;
  max-width:480px;
  margin-bottom:16px;
  flex:1 1 auto;
  min-width:0;
}
.epoch-card .tag-pill{margin-top:4px;}
.history-years{
  position:absolute;
  right:var(--gap);top:50%;
  transform:translateY(-50%);
  display:flex;flex-direction:column;
  gap:14px;
  z-index:3;
}
.history-years button{
  font-size:12px;
  color:var(--fg-dim);
  min-width:44px;min-height:44px;
  display:flex;align-items:center;
  padding:4px 0 4px 16px;
  border-left:2px solid rgba(255,255,255,.2);
  text-align:left;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.history-years button.is-active{color:var(--fg);border-color:var(--accent);}
.history-skip{
  position:absolute;
  left:var(--gap);bottom:52px;
  font-size:12px;
  color:var(--fg-dim);
  min-height:44px;
  display:inline-flex;align-items:center;
  border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pill);
  padding:.9em 1.4em;
  z-index:3;
}
.history-track{
  position:absolute;inset:0;
  display:flex;flex-direction:column;
  /* IntersectionObserver検知専用の透明トリガー＝クリックは下のスティッキー要素へ通す */
  pointer-events:none;
}
.history-trigger{flex:1;}

/* ---------- about ---------- */
.about{padding:140px 0 160px;position:relative;overflow:hidden;}
.about .section-inner{position:relative;z-index:1;}
.about-bg{
  position:absolute;inset:0;
  z-index:0;
  background:radial-gradient(circle at 82% 12%, rgba(52,87,213,.3), transparent 55%);
  /* :has()状態伝播 2/2 — Historyセクション末尾の光る折れ線(#routelineDivider2)が描き終わると
     離れたAboutセクションの背景クリップが広がる（隣接ブロックへの状態伝播） */
  clip-path:inset(0 42% 0 0% round 0);
  transition:clip-path 1.1s .3s var(--ease);
}
.l-main:has(#routelineDivider2.is-lit) .about-bg{
  clip-path:inset(0 0% 0 0% round 0);
}
.about-lead{font-size:clamp(20px,3vw,30px);font-weight:800;margin-bottom:24px;}
.about-copy{max-width:640px;color:rgba(255,255,255,.85);margin-bottom:48px;}
.about-plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:56px;}
.plan-card{
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-card);
  padding:28px;
}
.plan-name{font-size:13px;color:var(--fg-dim);margin-bottom:10px;letter-spacing:.06em;}
.plan-price{font-size:clamp(24px,3.4vw,34px);font-weight:800;margin-bottom:8px;}
.plan-price span{font-size:13px;font-weight:400;color:var(--fg-dim);margin-left:.2em;}
.plan-desc{font-size:13px;color:var(--fg-dim);}
.app-banner{
  display:flex;flex-wrap:wrap;align-items:center;gap:20px;
  padding:28px;
  background:var(--bg-sub);
  border-radius:var(--r-card);
}
.app-buttons{display:flex;gap:12px;flex-wrap:wrap;}
.app-btn{
  padding:.8em 1.6em;
  border:1px solid rgba(255,255,255,.5);
  border-radius:var(--r-pill);
  font-size:13px;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
@media (hover:hover){
  .app-btn:hover{background:var(--fg);color:#000;transform:translateY(-2px);}
}

/* ---------- accordion（詳細開閉） ---------- */
.accordion{margin-top:56px;border-top:1px solid rgba(255,255,255,.14);}
.accordion-item{border-bottom:1px solid rgba(255,255,255,.14);}
.accordion-heading{margin:0;}
.accordion-trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  width:100%;
  padding:20px 4px;
  text-align:left;
  font-size:clamp(14px,1.8vw,16px);
  font-weight:700;
}
.accordion-icon{
  width:16px;height:16px;
  position:relative;
  flex-shrink:0;
}
.accordion-icon::before,.accordion-icon::after{
  content:"";
  position:absolute;
  top:50%;left:50%;
  background:var(--fg);
  transform:translate(-50%,-50%);
  transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.accordion-icon::before{width:14px;height:2px;}
.accordion-icon::after{width:2px;height:14px;}
.accordion-item.is-open .accordion-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0;}
.accordion-item.is-open .accordion-icon::before{transform:translate(-50%,-50%) rotate(180deg);}
.accordion-panel{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows var(--dur-slow) var(--ease);
}
.accordion-panel-inner{
  overflow:hidden;
  min-height:0;
}
.accordion-item.is-open .accordion-panel{grid-template-rows:1fr;}
.accordion-panel p{
  padding:0 4px 20px;
  font-size:14px;
  color:rgba(255,255,255,.75);
  max-width:560px;
}

/* ---------- footer ---------- */
.site-footer{
  padding:80px 0 100px;
  border-top:1px solid rgba(255,255,255,.1);
}
.footer-sitemap{
  display:flex;flex-wrap:wrap;gap:10px 28px;
  font-size:14px;font-weight:700;
  margin-bottom:28px;
}
.footer-sitemap a,.footer-legal a{
  display:inline-flex;align-items:center;min-height:44px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat;
  background-position:left bottom;
  background-size:0 1px;
  transition:background-size var(--dur) var(--ease);
}
@media (hover:hover){
  .footer-sitemap a:hover,.footer-legal a:hover{background-size:100% 1px;}
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:12px;color:var(--fg-dim);margin-bottom:28px;}
.footer-sns{display:flex;gap:10px;margin-bottom:28px;}

/* ---------- responsive: 768px breakpoint (型シート実測に合わせる) ---------- */
@media screen and (max-width:767.98px){
  .header-inner{padding:16px 0 0 20px;}
  .hero{padding:110px 20px 60px;}
  .hero-mascot{right:4%;bottom:2%;width:clamp(110px,32vw,180px);}
  .message{padding:26vw 0 90px;}
  .campaign,.about{padding:80px 0;}
  .campaign-photos{grid-template-columns:1fr;}
  .about-plans{grid-template-columns:1fr;}
  .menu-mark{display:none;}
  .menu-overlay-panel{padding:100px 20px 30px;}
  .history-scroller{height:480vh;}
  .epoch-card{flex-direction:column;align-items:flex-start;gap:20px;}
  .epoch-card .thumb-tile.small{width:100%;}
  .history-years{
    right:auto;left:20px;top:auto;bottom:98px;
    transform:none;
    flex-direction:row;gap:10px;flex-wrap:wrap;
  }
  .history-years button{border-left:0;border-bottom:2px solid rgba(255,255,255,.2);padding:2px 4px;}
  .history-years button.is-active{border-color:var(--accent);}
  .history-skip{left:auto;right:20px;bottom:52px;}
  .history-year{font-size:clamp(40px,16vw,72px);}
}

/* ===== JS無効フォールバック（.no-js＝html要素の既定クラス。JS起動時にJSがこのクラスを外す） ===== */
.no-js .hero-copy .char,.no-js .reveal-word,.no-js .reveal-fade,.no-js .reveal-line .line{opacity:1;transform:none;}
.no-js .hero-tiles,.no-js .hero-mascot{opacity:1;}
.no-js .scroll-cue span{animation:none;}
.no-js .ticker-track{animation:none;}
.no-js .site-header.is-hidden{transform:none;opacity:1;}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;}
  .hero-copy .char,.reveal-word,.reveal-fade,.reveal-line .line{opacity:1;transform:none;}
  .hero-tiles,.hero-mascot{opacity:1;transform:none;}
  .hero-body{left:0;top:0;}
  .scroll-cue span{animation:none;}
  .ticker-track{animation:none;}
}