@charset "utf-8";
/* =========================================================
   篝澤煙火株式会社(架空)— 共通スタイル
   HPモック 第10号 / 演出の主題 D:マウス・指の動きに反応する画面
   外部フォント・外部CSS・外部画像を一切読み込まない。
   設計の出どころ: design-system/010-kagarisawa-fireworks/MASTER.md
     ・暗い夜色の下地(#0F172A 系)と余白の刻み(4/8/16/24/32/48/64)はMASTERに従う
     ・強調色だけは MASTER の紫(#7C3AED)を使わず、火の色(金・紅)に差し替えた
       理由は README の3章に書いた
   ========================================================= */

:root{
  /* 夜の下地 */
  --bg:        #0B1020;
  --bg-2:      #0F172A;   /* MASTER: --color-background */
  --bg-3:      #131936;   /* MASTER: --color-muted */
  --indigo:    #4338CA;   /* MASTER: --color-primary(宵闇の藍) */
  --indigo-2:  #6366F1;   /* MASTER: --color-secondary */
  /* 火の色(当社判断で差し替え) */
  --hi:        #F0A93B;   /* 金 */
  --hi-2:      #FF6B3D;   /* 橙 */
  --beni:      #D9453C;   /* 紅 */
  --ao:        #55C7E8;   /* 青(炎色反応の銅) */
  --midori:    #6FD08C;   /* 緑(炎色反応のバリウム) */

  --fg:        #FFFFFF;
  --fg-2:      #C3CBDD;
  --fg-3:      #8F99B2;
  --line:      rgba(255,255,255,0.10);
  --line-2:    rgba(255,255,255,0.18);

  --xs: 4px;  --sm: 8px;  --md: 16px; --lg: 24px;
  --xl: 32px; --2xl: 48px; --3xl: 64px;

  --r-sm: 6px; --r: 10px; --r-lg: 16px;
  --sh-md: 0 4px 6px rgba(0,0,0,.35);
  --sh-lg: 0 10px 26px rgba(0,0,0,.45);

  --mincho: "游明朝", YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "HGS明朝E", serif;
  --gothic: "游ゴシック", YuGothic, "Yu Gothic", "Hiragino Kaku Gothic ProN", Meiryo, system-ui, sans-serif;

  --wrap: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--gothic); font-size:16px; line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
}
img,svg,canvas{ max-width:100%; display:block; }
a{ color:var(--hi); text-decoration:none; }
a:hover{ text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, summary:focus-visible{
  outline:2px solid var(--hi); outline-offset:3px; border-radius:var(--r-sm);
}
h1,h2,h3,h4{ font-family:var(--mincho); font-weight:600; line-height:1.45; letter-spacing:.04em; margin:0; }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.4em; }
li{ margin-bottom:.4em; }

.wrap{ width:min(100% - 32px, var(--wrap)); margin-inline:auto; }
.narrow{ width:min(100% - 32px, 760px); margin-inline:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- ヘッダ ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,16,32,.86);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(10px);
}
.site-header__in{ display:flex; align-items:center; gap:var(--md); min-height:64px; }
.brand{ display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; margin-right:auto; }
.brand:hover{ text-decoration:none; }
.brand__mark{ width:38px; height:38px; flex:0 0 auto; }
.brand__name{ font-family:var(--mincho); font-size:19px; letter-spacing:.14em; line-height:1.2; }
.brand__name span{ display:block; font-family:var(--gothic); font-size:9.5px; letter-spacing:.22em; color:var(--fg-3); }

.nav__list{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.nav__list a{
  display:block; padding:8px 12px; color:var(--fg-2); font-size:13.5px;
  letter-spacing:.06em; border-radius:var(--r-sm); transition:color 200ms ease, background 200ms ease;
}
.nav__list a:hover{ color:var(--fg); background:rgba(255,255,255,.06); text-decoration:none; }
.nav__list a[aria-current="page"]{ color:var(--hi); }

.header-cta{
  flex:0 0 auto; padding:9px 18px; border-radius:999px; font-size:13.5px; font-weight:700;
  background:linear-gradient(135deg,var(--hi),var(--hi-2)); color:#221200;
  letter-spacing:.08em; cursor:pointer; transition:filter 200ms ease, transform 200ms ease;
}
.header-cta:hover{ filter:brightness(1.08); text-decoration:none; }

.nav-toggle{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  color:var(--fg); cursor:pointer;
}

@media (max-width:900px){
  .brand__name{ font-size:16px; }
  .nav-toggle{ display:flex; order:3; }
  .header-cta{ padding:8px 13px; font-size:12.5px; }
  .nav{
    order:4; flex-basis:100%; max-height:0; overflow:hidden;
    transition:max-height 260ms ease;
  }
  .nav.is-open{ max-height:420px; }
  .nav__list{ flex-direction:column; gap:0; padding:var(--sm) 0 var(--md); }
  .nav__list a{ padding:12px 4px; font-size:15px; border-bottom:1px solid var(--line); }
}

/* ---------- ヒーロー(主題D) ---------- */
.hero{ position:relative; min-height:min(88vh, 760px); display:flex; align-items:flex-end; isolation:isolate; }
.hero__sky{ position:absolute; inset:0; z-index:-2; pointer-events:none; background:
  radial-gradient(120% 90% at 50% 100%, #17203f 0%, #0B1020 55%, #05070F 100%); }
.hero__static{ position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:1; transition:opacity 600ms ease; }
.js .hero__static{ opacity:0; }
.hero__canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; touch-action:pan-y; }
.hero__in{ position:relative; padding:var(--3xl) 0 var(--2xl); }
.hero__kicker{
  display:inline-block; font-size:12px; letter-spacing:.3em; color:var(--hi);
  border:1px solid rgba(240,169,59,.45); border-radius:999px; padding:5px 14px; margin-bottom:var(--lg);
}
.hero h1{
  font-size:clamp(30px, 6.4vw, 62px); line-height:1.3; margin-bottom:var(--md);
  text-shadow:0 2px 30px rgba(0,0,0,.65);
}
.hero h1 em{ font-style:normal; color:var(--hi); }
.hero__lead{ max-width:38em; color:var(--fg-2); font-size:clamp(14px,1.6vw,16.5px); }
.hero__hint{
  display:inline-flex; align-items:center; gap:8px; margin-top:var(--lg);
  font-size:12.5px; color:var(--fg-3); letter-spacing:.08em;
}
.hero__hint b{ color:var(--hi); font-weight:600; }
.hero__hint svg{ flex:0 0 auto; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--xl); }

/* ボタン(MASTERの寸法に合わせる) */
.btn{
  display:inline-block; padding:12px 24px; border-radius:8px; font-weight:700;
  font-size:14.5px; letter-spacing:.08em; cursor:pointer; border:0;
  transition:filter 200ms ease, background 200ms ease, color 200ms ease, transform 200ms ease;
}
.btn-primary{ background:linear-gradient(135deg,var(--hi),var(--hi-2)); color:#221200; }
.btn-primary:hover{ filter:brightness(1.08); transform:translateY(-1px); text-decoration:none; }
.btn-secondary{ background:transparent; color:var(--fg); border:2px solid var(--line-2); }
.btn-secondary:hover{ border-color:var(--hi); color:var(--hi); text-decoration:none; }

/* 動きを止めている人向けの「動きを見る」ボタン */
.motion-note{
  position:absolute; left:0; right:0; bottom:var(--md); z-index:3;
  display:none; justify-content:center;
}
.motion-note button{
  background:rgba(11,16,32,.9); border:1px solid var(--hi); color:var(--hi);
  padding:9px 18px; border-radius:999px; font-size:12.5px; letter-spacing:.08em; cursor:pointer;
  font-family:var(--gothic);
}
.reduced .motion-note{ display:flex; }

/* ---------- 帯・節 ---------- */
.section{ padding:var(--3xl) 0; }
.section--tight{ padding:var(--2xl) 0; }
.section--muted{ background:var(--bg-2); }
.section--deep{ background:linear-gradient(180deg,var(--bg-2),var(--bg-3)); }

.eyebrow{
  font-size:11.5px; letter-spacing:.32em; color:var(--hi); margin:0 0 var(--sm);
  font-family:var(--gothic);
}
.section h2{ font-size:clamp(23px,3.6vw,34px); margin-bottom:var(--md); }
.section h3{ font-size:clamp(18px,2.4vw,22px); margin-bottom:var(--sm); }
.lead{ color:var(--fg-2); max-width:44em; }
.section-head{ margin-bottom:var(--2xl); }

/* ---------- カード ---------- */
.grid{ display:grid; gap:var(--lg); }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:var(--lg); box-shadow:var(--sh-md);
  transition:border-color 220ms ease, box-shadow 220ms ease, background 220ms ease;
  display:block; color:inherit;
}
a.card{ cursor:pointer; }
a.card:hover{ border-color:rgba(240,169,59,.55); box-shadow:var(--sh-lg); background:#131c33; text-decoration:none; }
.card h3{ margin-bottom:var(--sm); }
.card p{ color:var(--fg-2); font-size:14.5px; margin-bottom:0; }
.card__no{ font-size:11px; letter-spacing:.24em; color:var(--hi); display:block; margin-bottom:6px; }
.card__fig{ margin:0 0 var(--md); }
.card__more{ display:inline-block; margin-top:var(--md); font-size:13px; color:var(--hi); letter-spacing:.08em; }

/* ---------- 表 ---------- */
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
table{ border-collapse:collapse; width:100%; min-width:520px; font-size:14px; }
caption{ text-align:left; color:var(--fg-3); font-size:12.5px; padding-bottom:var(--sm); }
th,td{ border-bottom:1px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top; }
thead th{ color:var(--hi); font-weight:600; font-size:12.5px; letter-spacing:.1em; white-space:nowrap; }
tbody th{ font-weight:600; color:var(--fg); white-space:nowrap; }
td{ color:var(--fg-2); }

/* ---------- 出現アニメ ---------- */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity 600ms ease, transform 600ms ease; }
.reveal.is-in{ opacity:1; transform:none; }
.no-js .reveal, .no-io .reveal{ opacity:1; transform:none; }

/* ---------- 玉の断面(主題D・2つ目) ---------- */
.shell{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--2xl); align-items:center; }
@media (max-width:860px){ .shell{ grid-template-columns:1fr; gap:var(--xl); } }
.shell__fig{ position:relative; }
.shell__fig svg{ width:100%; height:auto; }
.shell__hit{ cursor:pointer; transition:opacity 200ms ease; }
.shell__hit:hover, .shell__hit.on{ opacity:1; }
.shell__list{ list-style:none; margin:0; padding:0; }
.shell__list li{ margin:0 0 var(--sm); }
.shell__list button{
  width:100%; text-align:left; background:var(--bg-2); color:var(--fg-2);
  border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--r-sm); padding:12px 16px; cursor:pointer; font-family:var(--gothic);
  font-size:14px; line-height:1.7; transition:all 200ms ease;
}
.shell__list button:hover{ color:var(--fg); border-color:var(--line-2); }
.shell__list button.on{ color:var(--fg); background:#161f3a; border-left-color:var(--hi); }
.shell__list b{ display:block; font-family:var(--mincho); font-size:15.5px; color:var(--fg); letter-spacing:.06em; }
.shell__list small{ color:var(--fg-3); font-size:12.5px; }

/* ---------- 星の育ち(スライダー) ---------- */
.grow{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--xl); }
.grow__row{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:var(--xl); align-items:center; }
@media (max-width:720px){ .grow__row{ grid-template-columns:1fr; gap:var(--md); } }
.grow input[type="range"]{ width:100%; accent-color:#F0A93B; cursor:pointer; height:28px; }
.grow__val{ font-family:var(--mincho); font-size:30px; color:var(--hi); letter-spacing:.06em; }
.grow__val small{ font-size:13px; color:var(--fg-3); font-family:var(--gothic); letter-spacing:.1em; }

/* ---------- 工程 ---------- */
.steps{ counter-reset:step; display:grid; gap:var(--md); }
.step{
  counter-increment:step; position:relative;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px;
  padding:var(--lg) var(--lg) var(--lg) 76px;
}
.step::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:var(--lg); top:var(--lg);
  font-family:var(--mincho); font-size:22px; color:var(--hi); letter-spacing:.04em;
}
.step h3{ font-size:18px; margin-bottom:6px; }
.step p{ color:var(--fg-2); font-size:14.5px; margin-bottom:0; }
.step .days{ display:inline-block; margin-top:var(--sm); font-size:12px; color:var(--fg-3); letter-spacing:.1em; }
@media (max-width:620px){ .step{ padding-left:var(--lg); padding-top:52px; } .step::before{ top:var(--md); } }

/* ---------- 年表 ---------- */
.chrono{ list-style:none; margin:0; padding:0; border-left:2px solid var(--line-2); }
.chrono li{ position:relative; padding:0 0 var(--xl) var(--xl); margin:0; }
.chrono li::before{
  content:""; position:absolute; left:-7px; top:9px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); border:2px solid var(--hi);
}
.chrono b{ display:block; font-family:var(--mincho); color:var(--hi); font-size:15px; letter-spacing:.1em; }
.chrono p{ margin:4px 0 0; color:var(--fg-2); font-size:14.5px; }

/* ---------- 注意書き・引用 ---------- */
.note{
  border:1px solid var(--line); border-left:3px solid var(--hi);
  background:var(--bg-2); border-radius:var(--r-sm);
  padding:var(--md) var(--lg); color:var(--fg-2); font-size:14px;
}
.note b{ color:var(--fg); }
.figures{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--md); }
@media (max-width:760px){ .figures{ grid-template-columns:repeat(2,1fr); } }
.fig-num{ background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:var(--lg); text-align:center; }
.fig-num b{ display:block; font-family:var(--mincho); font-size:clamp(26px,4.4vw,38px); color:var(--hi); line-height:1.2; }
.fig-num span{ font-size:12.5px; color:var(--fg-3); letter-spacing:.08em; }

/* ---------- FAQ ---------- */
details{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--md) var(--lg); margin-bottom:var(--sm);
}
summary{ cursor:pointer; font-family:var(--mincho); font-size:16px; letter-spacing:.04em; }
details[open] summary{ color:var(--hi); margin-bottom:var(--sm); }
details p{ color:var(--fg-2); font-size:14.5px; margin-bottom:0; }

/* ---------- フォーム ---------- */
.form{ display:grid; gap:var(--md); }
.field label{ display:block; font-size:13px; letter-spacing:.08em; color:var(--fg-2); margin-bottom:6px; }
.field label .req{ color:var(--beni); font-size:11px; margin-left:6px; }
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], select, textarea{
  width:100%; padding:12px 16px; font-size:16px; font-family:var(--gothic);
  background:#0A0F1F; color:var(--fg);
  border:1px solid var(--line-2); border-radius:8px;
  transition:border-color 200ms ease, box-shadow 200ms ease;
}
textarea{ min-height:150px; resize:vertical; line-height:1.8; }
.input:focus, input:focus, select:focus, textarea:focus{
  border-color:var(--hi); outline:none; box-shadow:0 0 0 3px rgba(240,169,59,.18);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--md); }
@media (max-width:620px){ .form-row{ grid-template-columns:1fr; } }

/* ---------- CTA帯 ---------- */
.cta{
  background:linear-gradient(135deg,#161d3c,#1d1533);
  border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--2xl); text-align:center;
}
.cta h2{ margin-bottom:var(--sm); }
.cta p{ color:var(--fg-2); max-width:40em; margin-inline:auto; }

/* ---------- フッタ ---------- */
.site-footer{ background:#070A14; border-top:1px solid var(--line); padding:var(--2xl) 0 var(--xl); margin-top:var(--3xl); }
.site-footer .cols{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--xl); margin-bottom:var(--xl); }
@media (max-width:760px){ .site-footer .cols{ grid-template-columns:1fr; gap:var(--lg); } }
.site-footer h4{ font-size:13px; letter-spacing:.16em; color:var(--hi); margin-bottom:var(--sm); font-family:var(--gothic); }
.site-footer ul{ list-style:none; padding:0; margin:0; }
.site-footer a{ color:var(--fg-2); font-size:13.5px; }
.site-footer a:hover{ color:var(--hi); }
.site-footer address{ font-style:normal; color:var(--fg-3); font-size:13.5px; line-height:1.9; }
.disclaimer{
  border-top:1px solid var(--line); padding-top:var(--md);
  color:var(--fg-3); font-size:12.5px; line-height:1.85;
}
.disclaimer b{ color:var(--hi); }

/* ---------- 動きを止める ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}