/* =========================================================
   和島煙火 — テストサイト2（サンフロロ風 / シネマティックBtoB）
   ダーク映像ヒーロー × 白の編集レイアウト × 巨大英タイポ
   ========================================================= */
:root{
  --ink:#0a1420;          /* 墨・夜空 */
  --ink-soft:#1a2738;
  --paper:#faf8f4;        /* 温かいオフホワイト */
  --paper-2:#f1ede5;
  --line:#e6e0d6;
  --text:#1d2530;
  --muted:#6f7682;
  --brand:#dc4514;        /* 朱赤（一点差し） */
  --brand-bright:#ef6a2c;
  --gold:#c08a3e;
  --maxw:1240px;
  --pad:clamp(20px,5vw,80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  font-family:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  color:var(--text);background:var(--paper);
  font-weight:400;line-height:1.9;letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:"Cormorant Garamond",serif}
.kick{font-family:"Cormorant Garamond",serif}

/* ---- 共通レイアウト ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.sec{padding:clamp(72px,11vw,150px) 0;position:relative}
.sec--ink{background:var(--ink);color:#fff}
.sec--paper2{background:var(--paper-2)}

/* 2層ラベル（英キッカー＋日本語見出し） */
.lbl{margin-bottom:clamp(34px,5vw,64px)}
.lbl__en{
  font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:clamp(36px,6vw,76px);font-weight:500;line-height:1;
  letter-spacing:.01em;color:var(--ink);
}
.sec--ink .lbl__en{color:#fff}
.lbl__ja{
  display:flex;align-items:center;gap:14px;margin-top:14px;
  font-size:13px;font-weight:700;letter-spacing:.34em;color:var(--brand);
}
.lbl__ja::before{content:"";width:30px;height:1px;background:var(--brand)}
.lbl--c{text-align:center}
.lbl--c .lbl__ja{justify-content:center}
.more{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--brand);transition:gap .25s var(--ease)}
.more:hover{gap:13px}
.more .en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:16px}
.sec--ink .more{color:var(--brand-bright)}

/* ====================== ヘッダー ====================== */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s var(--ease);
}
.hd__logo{display:flex;align-items:center;gap:11px;color:#fff;transition:color .4s}
.hd__logo svg{width:34px;height:34px;flex:none}
.hd__logo b{font-size:18px;font-weight:700;letter-spacing:.04em;line-height:1.15;display:block}
.hd__logo small{font-size:10px;font-weight:500;letter-spacing:.12em;opacity:.78;display:block}
.hd__nav{display:flex;align-items:center;gap:30px}
.hd__nav a{font-size:13.5px;font-weight:600;color:#fff;letter-spacing:.06em;opacity:.92;transition:opacity .25s}
.hd__nav a:hover{opacity:.6}
.hd__cta{
  padding:11px 22px;border:1px solid rgba(255,255,255,.5);border-radius:2px;
  font-size:13px;font-weight:700;letter-spacing:.08em;transition:.3s var(--ease);
}
.hd__cta:hover{background:#fff;color:var(--ink)!important;border-color:#fff;opacity:1!important}
/* スクロール後：白ヘッダー */
.hd.is-stuck{background:rgba(250,248,244,.92);backdrop-filter:saturate(140%) blur(10px);padding:12px var(--pad);box-shadow:0 1px 0 var(--line)}
.hd.is-stuck .hd__logo{color:var(--ink)}
.hd.is-stuck .hd__nav a{color:var(--ink)}
.hd.is-stuck .hd__cta{border-color:var(--ink);color:var(--ink)}
.hd.is-stuck .hd__cta:hover{background:var(--ink);color:#fff!important}
.hd__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hd__burger span{width:24px;height:2px;background:#fff;transition:.3s}
.hd.is-stuck .hd__burger span{background:var(--ink)}

/* ====================== ヒーロー（映像背景） ====================== */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--ink)}
.hero__bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__bg iframe,.hero__bg video{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:max(100vw,177.78svh); /* 16:9 cover for video */
  height:max(56.25vw,100svh);
  pointer-events:none;border:0;
}
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(10,20,32,.55) 0%,rgba(10,20,32,.18) 30%,rgba(10,20,32,.35) 62%,rgba(10,20,32,.86) 100%),
    radial-gradient(120% 80% at 70% 30%,rgba(10,20,32,0) 40%,rgba(10,20,32,.5) 100%);
}
.hero__inner{
  position:relative;z-index:2;height:100%;
  max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(48px,8vh,96px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.hero__kick{
  color:#fff;font-size:clamp(14px,1.7vw,18px);font-weight:500;letter-spacing:.1em;
  margin-bottom:18px;opacity:0;transform:translateY(20px);
  animation:heroUp .9s var(--ease) .3s forwards;
}
.hero__kick i{color:var(--brand-bright);font-style:normal}
.hero__title{
  font-family:"Cormorant Garamond",serif;color:#fff;font-weight:500;
  font-size:clamp(38px,6.2vw,98px);line-height:.98;letter-spacing:-.005em;
  width:100%;white-space:nowrap;
  opacity:0;transform:translateY(28px);
  animation:heroUp 1.1s var(--ease) .45s forwards;
}
.hero__title--ja{font-family:"Noto Sans JP",sans-serif;font-weight:700;font-size:clamp(34px,6.4vw,76px);line-height:1.2;letter-spacing:.03em;white-space:normal}
.hero__title--ja .nb{display:inline-block}
.hero__sub{
  color:rgba(255,255,255,.86);font-size:clamp(13px,1.5vw,16px);
  margin-top:22px;max-width:540px;line-height:1.95;
  opacity:0;transform:translateY(20px);animation:heroUp 1s var(--ease) .65s forwards;
}
@keyframes heroUp{to{opacity:1;transform:none}}
.hero__scroll{
  position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-family:"Cormorant Garamond",serif;font-style:italic;
  font-size:13px;letter-spacing:.2em;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.hero__scroll::after{content:"";width:1px;height:46px;background:linear-gradient(#fff,transparent);animation:scrollPulse 2.2s var(--ease) infinite}
@keyframes scrollPulse{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ====================== ステートメント（魅せる花火） ====================== */
.statement{background:var(--ink);color:#fff;text-align:center;overflow:hidden}
.statement__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.26;filter:saturate(1.05)}
.statement__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,32,.7),rgba(10,20,32,.55) 50%,rgba(10,20,32,.82))}
.statement .wrap{position:relative;z-index:2;max-width:980px}
.statement__en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(15px,2.2vw,22px);letter-spacing:.14em;color:var(--brand-bright);margin-bottom:26px}
.statement__lead{font-size:clamp(24px,4.4vw,46px);font-weight:700;line-height:1.55;letter-spacing:.02em}
.nb{white-space:nowrap}
.statement__lead .mark{color:var(--brand-bright)}
.statement__body{margin-top:30px;font-size:clamp(14px,1.7vw,17px);line-height:2.1;color:rgba(255,255,255,.82);max-width:720px;margin-inline:auto}
/* OUR STORY */
.statement--story{text-align:left}
.statement--story .wrap{max-width:var(--maxw);display:flex;flex-direction:column;align-items:flex-start}
.story__kick{display:flex;align-items:center;gap:12px;color:#fff;font-weight:700;letter-spacing:.2em;font-size:13.5px}
.story__bar{width:4px;height:20px;background:var(--brand-bright);border-radius:2px;display:inline-block}
.story__title{font-size:clamp(27px,4.4vw,52px);font-weight:700;line-height:1.42;letter-spacing:.02em;margin:22px 0 28px;color:#fff}
.story__title .mark{color:var(--brand-bright)}
.story__body{font-size:clamp(14px,1.6vw,16.5px);line-height:2.05;color:rgba(255,255,255,.82);max-width:840px;margin-bottom:16px}
.story__close{font-size:clamp(21px,3.2vw,38px);font-weight:700;line-height:1.42;margin:26px 0 30px;color:#fff}
.story__close .mark{color:var(--brand-bright)}
.story__dim{color:rgba(255,255,255,.42)}
/* ニーズ別サービスカード（画像＋テキスト） */
.svc-card{display:flex;background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:24px}
.svc-card__img{flex:0 0 40%;background-size:cover;background-position:center;min-height:300px}
.svc-card__body{flex:1;padding:clamp(28px,3.4vw,44px);min-width:0}
.svc-card--rev{flex-direction:row-reverse}
@media(max-width:820px){.svc-card,.svc-card--rev{flex-direction:column}.svc-card__img{flex:none;height:190px;min-height:0}.svc-card__body{padding:26px 24px}}

/* ====================== 数字バンド ====================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.stats__c{background:var(--paper);padding:clamp(28px,4vw,46px) 18px;text-align:center}
.sec--ink .stats{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.14)}
.sec--ink .stats__c{background:var(--ink)}
.stats__n{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:clamp(40px,6vw,68px);line-height:1;color:var(--ink)}
.sec--ink .stats__n{color:#fff}
.stats__n .u{font-size:.42em;font-weight:600;margin-left:4px;color:var(--brand)}
.stats__l{margin-top:12px;font-size:12.5px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.sec--ink .stats__l{color:rgba(255,255,255,.7)}

/* ====================== 事業（お客様シーン） ====================== */
.biz{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,26px)}
.bizcard{position:relative;overflow:hidden;border-radius:3px;background:var(--ink);min-height:clamp(220px,26vw,330px);display:flex;align-items:flex-end}
.bizcard:first-child{grid-column:auto;min-height:clamp(220px,26vw,330px)}
.bizcard__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1.1s var(--ease),filter .6s;filter:saturate(1.02)}
.bizcard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,32,.05) 30%,rgba(10,20,32,.82) 100%)}
.bizcard:hover .bizcard__img{transform:scale(1.06)}
.bizcard__body{position:relative;z-index:2;padding:clamp(20px,3vw,34px);color:#fff}
.bizcard__en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;color:var(--brand-bright);letter-spacing:.06em}
.bizcard__t{font-size:clamp(18px,2.3vw,24px);font-weight:700;margin:6px 0 8px;letter-spacing:.03em}
.bizcard__d{font-size:13.5px;line-height:1.85;color:rgba(255,255,255,.82);max-width:46ch}

/* ====================== WORKS（カルーセル） ====================== */
.works{position:relative}
.works__track{display:flex;gap:clamp(14px,2vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.works__track::-webkit-scrollbar{display:none}
.wk{flex:0 0 clamp(280px,32vw,400px);scroll-snap-align:start;cursor:pointer;background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.wk:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(10,20,32,.5)}
.wk__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.wk__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.wk:hover .wk__media img{transform:scale(1.07)}
.wk__play{position:absolute;inset:0;display:grid;place-items:center}
.wk__play span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;transition:.3s;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.wk__play span::after{content:"";border-left:15px solid var(--brand);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px}
.wk:hover .wk__play span{transform:scale(1.12);background:#fff}
.wk__tag{position:absolute;top:12px;left:12px;background:var(--brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 11px;border-radius:2px}
.wk__body{padding:18px 20px 22px}
.wk__t{font-size:15.5px;font-weight:700;line-height:1.5;letter-spacing:.02em}
.wk__p{margin-top:8px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.wk__p::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}
.works__nav{display:flex;justify-content:flex-end;gap:10px;margin-top:26px}
.works__nav button{width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:var(--paper);cursor:pointer;font-size:18px;color:var(--ink);transition:.3s var(--ease)}
.works__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ====================== 選ばれる理由 ====================== */
.reason{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,56px)}
.rcell{position:relative;padding-top:30px;border-top:1px solid rgba(255,255,255,.18)}
.rcell__n{font-family:"Cormorant Garamond",serif;font-size:clamp(40px,5vw,60px);font-weight:500;color:var(--brand-bright);line-height:1}
.rcell__t{font-size:clamp(18px,2.2vw,22px);font-weight:700;margin:14px 0 12px;color:#fff;letter-spacing:.02em}
.rcell__d{font-size:14px;line-height:2;color:rgba(255,255,255,.78)}

/* ====================== その他事業 ====================== */
.other{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
.ocard{position:relative;overflow:hidden;border-radius:3px;aspect-ratio:3/4}
.ocard__img{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 1s var(--ease)}
.ocard:hover .ocard__img{transform:scale(1.07)}
.ocard__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,32,0) 35%,rgba(10,20,32,.85))}
.ocard__t{position:absolute;left:0;bottom:0;z-index:2;padding:18px 20px;color:#fff}
.ocard__t b{display:block;font-size:16px;font-weight:700;letter-spacing:.04em}
.ocard__t span{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:13px;color:rgba(255,255,255,.7)}

/* ====================== 会社・代表 ====================== */
.company{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,76px);align-items:center}
.company__media{position:relative;border-radius:4px;overflow:hidden;aspect-ratio:4/3}
.company__media img{width:100%;height:100%;object-fit:cover}
.company__media .badge{position:absolute;left:22px;bottom:22px;background:var(--ink);color:#fff;padding:14px 20px;border-radius:3px}
.company__media .badge b{font-family:"Cormorant Garamond",serif;font-size:28px;display:block;line-height:1}
.company__media .badge span{font-size:11px;letter-spacing:.14em;opacity:.75}
.company__lead{font-size:clamp(20px,2.6vw,28px);font-weight:700;line-height:1.7;letter-spacing:.02em;margin-bottom:20px}
.company__lead .mark{color:var(--brand)}
.company__body p{font-size:14.5px;line-height:2.05;color:var(--text);margin-bottom:14px}
.company__sign{margin-top:22px;display:flex;align-items:baseline;gap:14px}
.company__sign span{font-size:12px;color:var(--muted)}
.company__sign b{font-size:19px;font-weight:700;letter-spacing:.08em}
.info{width:100%;border-collapse:collapse;margin-top:30px}
.info th,.info td{text-align:left;padding:13px 4px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:top}
.info th{width:34%;color:var(--muted);font-weight:600;letter-spacing:.04em}

/* ====================== ニュース ====================== */
.news{max-width:920px;margin:0 auto}
.nrow{display:flex;align-items:center;gap:20px;padding:20px 4px;border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.nrow:hover{background:var(--paper-2);padding-inline:14px}
.nrow time{font-family:"Cormorant Garamond",serif;font-size:17px;color:var(--muted);flex:none;width:92px}
.nrow .cat{flex:none;font-size:11px;font-weight:700;letter-spacing:.06em;padding:4px 11px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.nrow .cat.hl{background:var(--brand);color:#fff;border-color:var(--brand)}
.nrow p{font-size:14px;font-weight:500}

/* ====================== 大CTA ====================== */
.cta{position:relative;background:var(--ink);color:#fff;text-align:center;overflow:hidden}
.cta__glow{position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 120%,rgba(220,69,20,.45),transparent 70%)}
.cta .wrap{position:relative;z-index:2}
.cta__en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(32px,5vw,60px);font-weight:500;line-height:1.05}
.cta__ja{font-size:clamp(16px,2vw,20px);font-weight:500;margin:20px 0 36px;color:rgba(255,255,255,.85)}
.btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:9px;padding:16px 32px;border-radius:3px;font-size:14.5px;font-weight:700;letter-spacing:.04em;transition:.3s var(--ease)}
.btn--p{background:var(--brand);color:#fff}
.btn--p:hover{background:var(--brand-bright);transform:translateY(-2px)}
.btn--g{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}
.btn--g:hover{background:#fff;color:var(--ink)}
.btn--d{background:var(--ink);color:#fff}
.btn--d:hover{background:var(--ink-soft);transform:translateY(-2px)}

/* ====================== フッター ====================== */
.ft{background:#06101a;color:rgba(255,255,255,.72);padding:clamp(56px,8vw,90px) 0 30px}
.ft__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.ft__logo{display:flex;align-items:center;gap:11px;color:#fff;margin-bottom:18px}
.ft__logo svg{width:32px;height:32px}
.ft__logo b{font-size:17px;font-weight:700;line-height:1.2}
.ft__logo small{font-size:10px;opacity:.7;letter-spacing:.1em}
.ft__addr{font-size:12.5px;line-height:2}
.ft__sns{display:flex;gap:10px;margin-top:16px}
.ft__sns a{width:38px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;color:#fff;transition:.3s}
.ft__sns a:hover{background:var(--brand);border-color:var(--brand)}
.ft__yt{width:auto!important;height:auto!important;border-radius:999px!important;display:inline-flex!important;place-items:center;align-items:center;gap:8px;padding:6px 15px 6px 11px!important;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16)!important;color:rgba(255,255,255,.85)!important;font-size:13px;font-weight:700;letter-spacing:.02em}
.ft__yt:hover{background:rgba(255,0,0,.14)!important;border-color:rgba(255,0,0,.55)!important;color:#fff!important}
.ft__yt svg{flex:none;display:block}
.ft__col h4{font-size:12px;letter-spacing:.14em;color:#fff;margin-bottom:16px;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:18px}
.ft__col a{display:block;font-size:13px;padding:6px 0;color:rgba(255,255,255,.66);transition:.25s}
.ft__col a:hover{color:#fff;padding-left:5px}
.ft__bottom{padding-top:26px;font-size:11.5px;letter-spacing:.04em;opacity:.55;text-align:center}
.proto{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:80;background:var(--brand);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;padding:5px 18px;border-radius:6px 6px 0 0}

/* ====================== モーション ====================== */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}.rv-d4{transition-delay:.32s}
.par{will-change:transform}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero__kick,.hero__title,.hero__sub{animation:none;opacity:1;transform:none}}

/* ====================== レスポンシブ ====================== */
.mnav{position:fixed;inset:0;z-index:70;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 var(--pad);transform:translateX(100%);transition:transform .5s var(--ease);visibility:hidden}
.mnav.open{transform:none;visibility:visible}
.mnav a{color:#fff;font-size:20px;font-weight:600;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center}
.mnav a .en{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:15px;opacity:.5}
.mnav__close{position:absolute;top:20px;right:var(--pad);background:none;border:0;color:#fff;font-size:30px;cursor:pointer}

@media(max-width:980px){
  .hd__nav{display:none}
  .hd__burger{display:flex}
  .hero__title{white-space:normal;line-height:1.05}
  .hero__inner{padding-bottom:88px}
  .proto{display:none}
  .biz{grid-template-columns:1fr}
  .bizcard:first-child{grid-column:auto}
  .reason{grid-template-columns:1fr;gap:34px}
  .other{grid-template-columns:repeat(2,1fr)}
  .company{grid-template-columns:1fr;gap:30px}
  .ft__top{grid-template-columns:1fr 1fr;gap:30px}
}
@media(max-width:560px){
  .hero__title{white-space:normal;font-size:clamp(40px,15vw,64px);line-height:1}
  .stats{grid-template-columns:repeat(2,1fr)}
  .other{grid-template-columns:1fr 1fr}
  .ft__top{grid-template-columns:1fr}
  .nrow{flex-wrap:wrap;gap:10px}
  .nrow time{width:auto}
}

/* =========================================================
   下層ページ用コンポーネント（サンフロロ風・墨×朱赤×Cormorant）
   ========================================================= */
/* ---- 言語スイッチャー ---- */
.lang{display:flex;gap:2px;align-items:center}
.lang a{font-size:12px;font-weight:700;letter-spacing:.04em;color:inherit;opacity:.55;padding:4px 7px;border-radius:2px;transition:.25s}
.lang a.on{opacity:1;color:var(--brand)}
.lang a:hover{opacity:1}
.hd.is-stuck .lang a{color:var(--ink)}.hd.is-stuck .lang a.on{color:var(--brand)}
.mnav__lang{display:flex;gap:8px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12)}
.mnav__lang a{color:#fff;font-size:15px;opacity:.6;font-weight:700}.mnav__lang a.on{opacity:1;color:var(--brand-bright)}

/* ---- ページヒーロー（画像背景） ---- */
.page-hero{position:relative;height:clamp(150px,20vw,240px);overflow:hidden;background:var(--ink);display:flex;align-items:flex-end}
.page-hero__img{position:absolute;inset:0;background-size:cover;background-position:center;will-change:transform}
.page-hero__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,32,.55) 0%,rgba(10,20,32,.3) 45%,rgba(10,20,32,.85) 100%)}
.page-hero__sky{position:absolute;inset:0;background:radial-gradient(120% 80% at 70% 20%,rgba(220,69,20,.18),transparent 60%);z-index:1}
.page-hero .wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad) clamp(34px,5vw,60px)}
.page-hero .en{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-weight:500;font-size:clamp(40px,7vw,88px);line-height:1;color:#fff;letter-spacing:.01em}
.page-hero .ja{display:flex;align-items:center;gap:13px;margin-top:12px;font-size:13px;font-weight:700;letter-spacing:.28em;color:var(--brand-bright)}
.page-hero .ja::before{content:"";width:28px;height:1px;background:var(--brand-bright)}

/* ---- パンくず ---- */
.breadcrumb{border-bottom:1px solid var(--line);background:var(--paper)}
.breadcrumb ul{max-width:var(--maxw);margin:0 auto;padding:13px var(--pad);display:flex;gap:8px;list-style:none;font-size:12px;color:var(--muted)}
.breadcrumb li::after{content:"／";margin-left:8px;color:var(--line)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--muted)}.breadcrumb a:hover{color:var(--brand)}

/* ---- セクション枠（A互換） ---- */
.section{padding:clamp(56px,9vw,110px) 0;position:relative}
.section.soft{background:var(--paper-2)}
.section.navy{background:var(--ink);color:#fff}
.section .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ---- 中央2層見出し ---- */
.sec-head{text-align:left;margin-bottom:clamp(30px,4.5vw,54px)}
.sec-head.center{text-align:center}
.sec-head .en{display:block;font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(30px,5vw,56px);font-weight:500;color:var(--ink);line-height:1}
.section.navy .sec-head .en,.sec-head.light .en{color:#fff}
.sec-head .ja{display:inline-flex;align-items:center;gap:12px;margin-top:12px;font-size:12.5px;font-weight:700;letter-spacing:.3em;color:var(--brand)}
.sec-head .ja::before{content:"";width:26px;height:1px;background:var(--brand)}
.sec-head.center .ja{justify-content:center}

/* ---- 本文 prose ---- */
.prose h2{font-size:clamp(21px,2.6vw,28px);font-weight:700;letter-spacing:.02em;margin-bottom:16px;color:var(--ink)}
.section.navy .prose h2{color:#fff}
.prose h3{font-size:clamp(17px,2vw,20px);font-weight:700;margin:26px 0 12px;color:var(--ink);padding-left:14px;border-left:3px solid var(--brand)}
.prose p{font-size:14.5px;line-height:2.05;margin-bottom:14px;color:var(--text)}
.prose .en{font-family:"Cormorant Garamond",serif;font-style:italic}
.prose .gold,.gold{color:var(--brand)}
.prose .message-lead,.message-lead{font-size:clamp(20px,2.8vw,30px);font-weight:700;line-height:1.65;letter-spacing:.02em;color:var(--ink);margin-bottom:26px}
.lead-txt{font-size:15px;line-height:2.05;color:var(--text);max-width:760px}
.lead-txt.center{margin-inline:auto}
ul.dot{list-style:none;margin:8px 0 18px}
ul.dot li{position:relative;padding-left:20px;font-size:14px;line-height:1.95;color:var(--text)}
ul.dot li::before{content:"";position:absolute;left:2px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.sign{margin-top:30px;text-align:right}
.sign .role{font-size:12.5px;color:var(--muted)}
.sign .name{font-size:22px;font-weight:700;letter-spacing:.1em;margin-top:4px}

/* ---- 情報テーブル ---- */
.info-table{width:100%;border-collapse:collapse;margin-top:8px}
.info-table th,.info-table td{text-align:left;padding:15px 6px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:top}
.info-table th{width:28%;color:var(--muted);font-weight:700;letter-spacing:.04em;white-space:nowrap}

/* ---- ボタン（A互換モディファイア） ---- */
.btn-primary{background:var(--brand);color:#fff}.btn-primary:hover{background:var(--brand-bright);transform:translateY(-2px)}
.btn-line{background:transparent;color:var(--ink);border:1px solid var(--line)}.btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn-gold{background:var(--brand);color:#fff}.btn-gold:hover{background:var(--brand-bright)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.5)}.btn-ghost:hover{background:#fff;color:var(--ink)}
.ar{font-family:"Cormorant Garamond",serif;font-style:normal}

/* ---- 費用要素グリッド ---- */
.factor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px)}
.factor{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:26px 24px;transition:.4s var(--ease)}
.factor:hover{transform:translateY(-4px);box-shadow:0 18px 40px -28px rgba(10,20,32,.4)}
.factor h3{display:flex;align-items:center;gap:10px;font-size:15.5px;font-weight:700;margin-bottom:10px;color:var(--ink);border:0;padding:0}
.factor h3 .b{width:9px;height:9px;border-radius:50%;background:var(--brand);flex:none}
.factor p{font-size:13px;line-height:1.85;color:var(--muted);margin:0}

/* ---- フロー ---- */
.flow{counter-reset:fl;display:grid;gap:14px}
.flow__item{counter-increment:fl;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:22px 26px 22px 78px}
.flow__item::before{content:counter(fl,decimal-leading-zero);position:absolute;left:24px;top:50%;transform:translateY(-50%);font-family:"Cormorant Garamond",serif;font-size:34px;font-weight:600;color:var(--brand)}
.flow__item h3{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--ink);border:0;padding:0}
.flow__item p{font-size:13px;line-height:1.8;color:var(--muted);margin:0}

/* ---- FAQ ---- */
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:center;gap:12px;padding:20px 4px;cursor:pointer;font-size:15px;font-weight:700;color:var(--ink)}
.faq__q .qm{font-family:"Cormorant Garamond",serif;font-size:22px;color:var(--brand);font-style:italic}
.faq__q .tg{margin-left:auto;color:var(--brand);font-size:18px;transition:.3s}
.faq__item.open .tg{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.faq__a p{font-size:13.5px;line-height:1.95;color:var(--muted);padding:0 4px 20px 38px;margin:0}

/* ---- reason-card（hanabi navy 等） ---- */
.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.reason-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:28px 26px}
.reason-card h3{font-size:16px;font-weight:700;margin-bottom:10px;color:var(--ink);border:0;padding:0}
.reason-card p{font-size:13px;line-height:1.85;color:var(--muted);margin:0}

/* ---- 沿革タイムライン ---- */
.timeline{list-style:none;position:relative;padding-left:30px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line)}
.timeline li{position:relative;padding:0 0 30px}
.timeline li::before{content:"";position:absolute;left:-27px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 4px var(--paper)}
.timeline .yr{font-family:"Cormorant Garamond",serif;font-size:17px;color:var(--brand);font-weight:600}
.timeline h4{font-size:15.5px;font-weight:700;margin:3px 0 6px;color:var(--ink)}
.timeline p{font-size:13px;line-height:1.85;color:var(--muted);margin:0}

/* ---- フォーム ---- */
.form{display:grid;gap:18px}
.form__two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form__row{display:flex;flex-direction:column;gap:7px}
.form label{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.req{font-size:10.5px;color:#fff;background:var(--brand);padding:2px 7px;border-radius:2px;font-weight:700}
.opt{font-size:10.5px;color:var(--muted);background:var(--paper-2);padding:2px 7px;border-radius:2px;border:1px solid var(--line)}
.form input,.form select,.form textarea,.sim input,.sim select,.sim textarea{
  font-family:inherit;font-size:14.5px;padding:13px 14px;border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--text);width:100%;transition:.25s}
.form input:focus,.form select:focus,.form textarea:focus,.sim input:focus,.sim select:focus,.sim textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(220,69,20,.12)}
.form textarea,.sim textarea{min-height:130px;resize:vertical}
.form__agree{display:flex;align-items:flex-start;gap:10px;font-size:13px}
.form__agree input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand);flex:none}
.form__submit,.sim__calc,.sim__send{justify-content:center;width:100%;cursor:pointer;border:0;font-family:inherit}
.form__done{display:none;background:var(--ink);color:#fff;border-radius:5px;padding:20px 24px;font-size:14px;line-height:1.8}

/* ---- 見積りシミュレーター ---- */
.sim{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:clamp(24px,4vw,44px)}
.sim__head{margin-bottom:8px}
.sim__title{font-size:clamp(18px,2.3vw,23px);font-weight:700;color:var(--ink)}
.sim__note{font-size:13.5px;line-height:1.9;color:var(--muted);margin:10px 0 24px}
.sim__step{font-size:12px;font-weight:700;letter-spacing:.12em;color:#fff;background:var(--ink);display:inline-block;padding:7px 16px;border-radius:3px;margin:18px 0 16px}
.sim__grid,.sim__lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sim__row{display:flex;flex-direction:column;gap:7px}
.sim__row.full{grid-column:1/-1}
.sim__row label{font-size:13px;font-weight:700;color:var(--ink)}
.sim__row .u{font-weight:500;color:var(--muted);font-size:11.5px}
.sim__err{display:none;color:var(--brand-deep,#b5380e);font-size:13px;font-weight:600;margin:14px 0 4px}
.sim__result{display:none;margin-top:26px;border-top:2px solid var(--brand);padding-top:26px}
.sim__price{font-size:15px;font-weight:700;color:var(--ink);display:flex;flex-direction:column;gap:6px}
.sim__price strong{font-family:"Cormorant Garamond",serif;font-size:clamp(36px,6vw,56px);color:var(--brand);line-height:1}
.sim__range{font-size:13.5px;color:var(--muted);margin:8px 0 16px}
.sim__break{list-style:none;background:#fff;border:1px solid var(--line);border-radius:4px;padding:16px 20px;margin-bottom:18px}
.sim__break li{font-size:12.5px;line-height:1.9;color:var(--text);padding-left:16px;position:relative}
.sim__break li::before{content:"";position:absolute;left:0;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--brand)}
.sim__disc{font-size:12px;line-height:1.85;color:var(--muted);background:var(--paper-2);border-radius:4px;padding:14px 16px;margin-bottom:18px}
.sim__thanks{display:none;background:var(--ink);color:#fff;border-radius:5px;padding:22px 26px;font-size:14px;line-height:1.85;margin-top:20px}

/* ---- 実績グリッド（works.html） ---- */
.works-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px)}
.work-card{background:var(--paper);border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.work-card:hover{transform:translateY(-6px);box-shadow:0 24px 50px -28px rgba(10,20,32,.5)}
.work-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)}
.work-card__media .cover{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work-card:hover .cover{transform:scale(1.07)}
.work-card .play{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:.3s}
.work-card:hover .play{transform:scale(1.12);background:#fff}
.work-card .play svg{width:22px;height:22px;fill:var(--brand);margin-left:2px}
.work-card__body{padding:18px 20px 22px}
.work-card__meta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.work-card__meta span{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--brand);background:rgba(220,69,20,.08);padding:3px 9px;border-radius:2px}
.work-card h3{font-size:15.5px;font-weight:700;line-height:1.5;color:var(--ink)}
.work-card .place{margin-top:7px;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.work-card .place::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--brand)}

/* ---- ニュース一覧（news.html） ---- */
.news-list{display:flex;flex-direction:column}
.news-row{display:flex;align-items:center;gap:18px;padding:18px 4px;border-bottom:1px solid var(--line);transition:padding .3s,background .3s}
.news-row:hover{background:var(--paper-2);padding-inline:14px}
.news-row time{font-family:"Cormorant Garamond",serif;font-size:16px;color:var(--muted);flex:none;width:96px}
.news-row .cat{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 11px;border:1px solid var(--line);border-radius:2px;color:var(--muted)}
.news-row .cat.gold{background:var(--brand);color:#fff;border-color:var(--brand)}
.news-row p{font-size:14px;font-weight:500;color:var(--ink)}

/* ---- CTAバンド（A互換） ---- */
.cta-band{position:relative;background:var(--ink);color:#fff;text-align:center;overflow:hidden;padding:clamp(60px,9vw,110px) 0}
.cta-band__sky{position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 120%,rgba(220,69,20,.45),transparent 70%)}
.cta-band .wrap{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.cta-band h2{font-size:clamp(22px,3.4vw,34px);font-weight:700;margin-bottom:14px}
.cta-band p{font-size:14.5px;color:rgba(255,255,255,.85);margin-bottom:30px}
.cta-band__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---- 固定CTA（モバイル下部） ---- */
.fixcta{position:fixed;left:0;right:0;bottom:0;z-index:55;display:none;gap:0}
.fixcta a{flex:1;text-align:center;padding:15px 8px;font-size:13.5px;font-weight:700;color:#fff}
.fixcta .tel{background:var(--ink-soft)}
.fixcta .est{background:var(--brand)}

@media(max-width:980px){
  .factor-grid,.reason-grid,.works-grid{grid-template-columns:1fr 1fr}
  .sim__grid,.sim__lead-grid,.form__two{grid-template-columns:1fr}
  .fixcta{display:flex}
  body{padding-bottom:52px}
}
@media(max-width:560px){
  .factor-grid,.reason-grid,.works-grid{grid-template-columns:1fr}
  .info-table th{width:38%}
}