/* 京秋商事 コーポレートサイト
   路線「帳面」＝生成りの紙・明朝の見出し・墨緑。
   2026-09-16 デザイン改修：
     - 背景の装飾は「淡墨のにじみ」＝大きく柔らかい radial-gradient を数枚だけ非対称に置く。
       🔴 等間隔のパターン（repeating-*）と暖色の光は使わない（金属の刷り目・金箔に読まれる）。
     - グラデーションは「背景の空気」と「罫・見出しのアクセント」に限定。ボタンには使わない。
     - 面は白いカード＋角丸（22/16/12px）＋淡い影。罫だけで組むと手抜きに見えるため（README）。
     - 動きは prefers-reduced-motion:reduce で全部止まる（末尾のブロックが唯一の正）。
   営業で配るテンプレ（A01〜A14）とは別物にしてある。 */

:root{
  /* 🔴 この9つは build.mjs がコントラスト検査のために正規表現で読む。
        必ず 6桁の #RRGGBB リテラルのまま置くこと（var()・3桁・rgb() にしない）。 */
  --bg:#FAF8F4;           /* 生成りの紙 */
  --bg-alt:#F3F0E9;       /* 帯 */
  --paper:#FFFFFF;        /* カード面 */
  --ink:#14181A;          /* 墨 */
  --ink-mid:#4B5358;
  --ink-light:#767F86;
  --primary:#103F3A;      /* 墨緑。CTA・フッター */
  --accent:#B0501F;       /* 秋橙（文字に載る濃度）。ラベル・連番 */
  --line:#E4DFD4;

  /* 以下は検査対象外。文字には使わない＝グラデーションと罫だけ。 */
  --primary-dark:#0A2B28;
  --primary-lift:#1A5A50;
  --primary-tint:#E7EEEA;
  --accent-lit:#C45A24;   /* 所有者決定の秋橙。光と罫の中でだけ使う（文字はAAに落ちるので使わない） */
  --accent-tint:#F8EFE5;
  --line-soft:#EDE8DE;

  /* 暗い面（ヘッダー・ヒーロー・ページ見出し・パンくず）の色。
     🔴 これも build.mjs の検査対象なので 6桁の #RRGGBB リテラルのまま置く。
     半透明の白（rgba(255,255,255,.8) など）で書くと検査できなくなるので、
     暗い面に載る文字はここの実色で指定する。 */
  --face-dark:#103F3A;       /* 暗い面の代表色 */
  --face-dark-hi:#1C6055;    /* 暗い面のいちばん明るいところ＝明色文字に最も不利な点 */
  --face-dark-deep:#0E3A35;  /* パンくずの帯 */
  --on-dark:#FFFFFF;
  --on-dark-mid:#D6DDDC;     /* 暗い面のリード文 */
  --on-dark-soft:#A9B7B4;    /* 暗い面の小さい字・パンくず */
  --accent-on-dark:#F5C6A8;  /* 暗い面のラベル。秋橙のままだと沈むので明るい側に振る */

  --heading:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --body:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1120px;
  --r-lg:22px;
  --r-md:16px;
  --r-sm:12px;

  --sh-1:0 1px 2px rgba(20,24,26,.035), 0 0 0 1px rgba(20,24,26,.05);
  --sh-2:0 1px 2px rgba(20,24,26,.04), 0 0 0 1px rgba(20,24,26,.055), 0 14px 34px -14px rgba(16,63,58,.20);
  --sh-3:0 1px 2px rgba(20,24,26,.05), 0 0 0 1px rgba(20,24,26,.06), 0 26px 54px -20px rgba(16,63,58,.28);

  /* 罫のアクセント（見出しの下・帯の上下・カードの天） */
  --hair:linear-gradient(90deg, rgba(16,63,58,.48), rgba(196,90,36,.52) 56%, rgba(16,63,58,0));
  --hair-soft:linear-gradient(90deg, transparent, rgba(16,63,58,.14) 16%, rgba(196,90,36,.17) 52%, transparent);

  /* 背景の空気 */
  /* 🔴 ヒーローの面に暖色を載せない（アクセント色はラベルと罫だけ）。
     面そのものは墨緑＝フッターと同じ色で、ページの上下を暗い帯で挟む。
     生成りの紙は本文側に残す（＝全面ダークにはしない）。 */
  --grad-hero:
    radial-gradient(1180px 640px at 84% -18%, rgba(28,96,85,.92), transparent 62%),
    radial-gradient(900px 520px at -6% 118%, rgba(8,38,35,.70), transparent 64%),
    linear-gradient(174deg,#14524A -12%, var(--primary) 44%, #092825 122%);
  --grad-ph:
    radial-gradient(980px 460px at 84% -26%, rgba(28,96,85,.88), transparent 62%),
    radial-gradient(760px 420px at -6% 124%, rgba(8,38,35,.66), transparent 64%),
    linear-gradient(174deg,#14524A -18%, var(--primary) 46%, #092825 128%);
  --grad-band:linear-gradient(180deg, var(--bg-alt) 0%, #F6F3EB 52%, var(--bg-alt) 100%);
  /* フッターの光も暖色にしない（金箔に見える）。明るい墨緑を1枚だけ載せる。 */
  --grad-ft:
    radial-gradient(820px 440px at 86% -18%, rgba(26,90,80,.55), transparent 60%),
    linear-gradient(170deg, var(--primary-lift) -22%, var(--primary) 34%, var(--primary-dark) 124%);

  /* モーション。参考路線の「ゆっくり滑る」カーブを1本に絞って全部で使い回す。 */
  --ease:cubic-bezier(.19,1,.22,1);
  --fast:.2s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);overflow-x:clip;
  font-family:var(--body);font-size:16px;line-height:1.9;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
/* text-wrap:balance は和文にも効く。スマホで見出しの最終行が1文字だけ残る（孤立文字）のを防ぐ。
   word-break:auto-phrase を併用しないと「数字は自社のシステ／ムで持っています」のように
   語中で折れる（狭いカードの見出しで実際に起きた）。非対応ブラウザでは normal に落ちるだけ。
   未対応ブラウザでは単に無視されるだけなので保険は要らない。 */
h1,h2,h3,h4{font-family:var(--heading);font-weight:500;line-height:1.48;letter-spacing:.04em;margin:0;text-wrap:balance;word-break:auto-phrase}
p{margin:0}
ul,ol,dl,dd{margin:0;padding:0}
li{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
.top-sentinel{position:absolute;top:0;left:0;width:1px;height:1px;pointer-events:none}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:28px}
.wrap.narrow > *{max-width:880px}
.sec{padding-block:clamp(64px,8.5vw,116px)}
.sec-alt{position:relative;background:var(--grad-band)}
.sec-alt::before,.sec-alt::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--hair-soft);pointer-events:none;
}
.sec-alt::before{top:0}
.sec-alt::after{bottom:0}
.sk{position:absolute;left:-9999px}
.sk:focus{position:static;display:block;padding:8px;background:var(--primary);color:#fff}

/* ---- ラベル（章の見出しの上の小さいやつ／404の .en も同じ意匠） ------------- */
.chip,.en{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);
  background:var(--accent-tint);border-radius:999px;padding:6px 15px 6px 12px;
  box-shadow:inset 0 0 0 1px rgba(176,80,31,.10);
}
.chip::before,.en::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* ---- 淡墨のにじみ（ヒーローとページ見出しに敷く装飾層） --------------------
   🔴 等間隔のパターン（repeating-*）と暖色の光は使わない。どれだけ周期をずらしても
      規則的な明暗の縞＝金属の刷り目に読まれる（2026-09-16に木漏れ日で却下された）。
   ここは大きく柔らかい radial-gradient を3枚だけ非対称に置くだけ。色は墨緑の極薄と
   紙の白のみ。動くのは2枚で、80〜96秒かけて数%だけ動く（alternate なので継ぎ目なし）。
   検算は目視だけにしない＝コントラストを3倍に上げた画像と、1行ぶんの明度の並びで
   周期的な山谷が出ないことを数字で見る。 */
.wash{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.wash i{position:absolute;display:block;will-change:transform}
/* ① 右上の翳り＝主。画面から溢れる大きさにして輪郭を見せない */
.wash i:nth-child(1){
  top:-66%;right:-28%;width:98%;height:196%;
  background:radial-gradient(closest-side at 50% 50%, rgba(16,63,58,.150), rgba(16,63,58,.062) 46%, rgba(16,63,58,0) 76%);
  animation:wash-a 82s ease-in-out infinite alternate;
}
/* ② 左下の受け＝静止。①と大きさも濃さも揃えない（揃えると対称＝機械に見える） */
.wash i:nth-child(2){
  bottom:-88%;left:-24%;width:76%;height:172%;
  background:radial-gradient(closest-side at 50% 50%, rgba(16,63,58,.092), rgba(16,63,58,.034) 50%, rgba(16,63,58,0) 78%);
}
/* ③ 紙の白。彩度を持たない光だけを中央やや右に置いて、①②の境目をぼかす */
.wash i:nth-child(3){
  top:-34%;left:30%;width:64%;height:150%;
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.76), rgba(255,255,255,.30) 48%, rgba(255,255,255,0) 76%);
  animation:wash-b 96s ease-in-out infinite alternate;
}
/* 紙の目。🔴 タイルを敷くと「340px周期」が自己相関に出る＝等間隔パターンと同じなので、
   1枚のノイズを面いっぱいに引き伸ばして繰り返しを無くしてある（repeat しない）。
   役目は2つ＝紙の質感と、radial-gradient の階調の段（同心円状のバンディング）をぼかすこと。 */
.wash::after{
  content:"";position:absolute;inset:0;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1200' height='760' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-size:100% 100%;
}
/* 平行移動は％＝面の大きさ基準。数%しか動かないので、見ていて動きに気づかない。 */
@keyframes wash-a{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4.2%,2.4%,0) scale(1.07)}}
@keyframes wash-b{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(3.4%,-1.8%,0) scale(1.05)}}
/* ページ見出しは主役ではないので、動かさず全体を薄くする */
/* 暗い面の上では墨のにじみは見えないので、白のにじみと影に置き換える。 */
.hero .wash i:nth-child(1),.ph .wash i:nth-child(1){
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.115), rgba(255,255,255,.040) 46%, rgba(255,255,255,0) 76%)}
.hero .wash i:nth-child(2),.ph .wash i:nth-child(2){
  background:radial-gradient(closest-side at 50% 50%, rgba(6,32,30,.55), rgba(6,32,30,.22) 50%, rgba(6,32,30,0) 78%)}
.hero .wash i:nth-child(3),.ph .wash i:nth-child(3){
  background:radial-gradient(closest-side at 50% 50%, rgba(255,255,255,.155), rgba(255,255,255,.055) 48%, rgba(255,255,255,0) 76%)}
.hero .wash::after,.ph .wash::after{mix-blend-mode:soft-light;opacity:.09}

.wash.k-sm i{animation:none}
.wash.k-sm i:nth-child(1){opacity:.7}
.wash.k-sm i:nth-child(2){opacity:.6}
.wash.k-sm i:nth-child(3){opacity:.5}
.wash.k-sm::after{opacity:.03}

/* ---- ヒーローの光の移ろい（トップのヒーローだけ） ----------------------------
   2026-09-26：水面（うねり＋波紋の .water）は「機械感がある」で外した。
   代わりに --grad-hero そのものの「光の位置」「翳りの位置」「地の角度」を動かす。
   形を足さずに面の明暗だけが移ろうので、モチーフ（輪・縞）として読まれない。
   @property で型を登録した変数だけが補間される。未対応ブラウザは var() の第2引数＝
   --grad-hero と同じ値で静止する（動かないだけで壊れない）。
   🔴 周期は 29/37/47秒 と割り切れない値にして、同じ組み合わせが戻ってこないようにする。
   🔴 光の中心は右上の範囲（x 56〜90%・y -24〜8%）から出さない＝見出しの真下を
      --face-dark-hi より明るくしない（文字の地の検算は README）。 */
@property --hx{syntax:"<percentage>";inherits:false;initial-value:84%}
@property --hy{syntax:"<percentage>";inherits:false;initial-value:-18%}
@property --lx{syntax:"<percentage>";inherits:false;initial-value:-6%}
@property --ly{syntax:"<percentage>";inherits:false;initial-value:118%}
@property --ang{syntax:"<angle>";inherits:false;initial-value:174deg}
.hero{
  background:
    radial-gradient(1180px 640px at var(--hx,84%) var(--hy,-18%), rgba(28,96,85,.92), transparent 62%),
    radial-gradient(900px 520px at var(--lx,-6%) var(--ly,118%), rgba(8,38,35,.70), transparent 64%),
    linear-gradient(var(--ang,174deg),#14524A -12%, var(--primary) 44%, #092825 122%);
  animation:
    hero-light 37s ease-in-out infinite alternate,
    hero-shade 47s ease-in-out infinite alternate,
    hero-tilt 29s ease-in-out infinite alternate;
}
/* 光：右上から左へ寄りつつ少し降りる。途中で折り返して一直線に往復しない */
@keyframes hero-light{
  0%  {--hx:84%;--hy:-18%}
  38% {--hx:64%;--hy:4%}
  70% {--hx:56%;--hy:-10%}
  100%{--hx:90%;--hy:8%}
}
/* 狭い画面用（640px以下）：右上の隅で揺れるだけ */
@keyframes hero-light-sp{
  0%  {--hx:92%;--hy:-26%}
  50% {--hx:78%;--hy:-20%}
  100%{--hx:98%;--hy:-14%}
}
@keyframes hero-tilt-sp{
  0%  {--ang:162deg}
  100%{--ang:176deg}
}
/* 翳り：左下の溜まりが右へ滑る */
@keyframes hero-shade{
  0%  {--lx:-6%;--ly:118%}
  50% {--lx:34%;--ly:104%}
  100%{--lx:12%;--ly:126%}
}
/* 地の角度：174°を中心に ±16° 傾く */
@keyframes hero-tilt{
  0%  {--ang:160deg}
  100%{--ang:190deg}
}

/* ---- 見出し・本文の入場（上端にあるので観測ではなくCSSアニメで。JS不要） ------ */
@keyframes rise{from{opacity:0;transform:translate3d(0,20px,0)}to{opacity:1;transform:none}}
.hero-main > *,.hero-card,.ph .wrap > *{animation:rise 1.5s var(--ease) both}
.hero-main > *:nth-child(2){animation-delay:.08s}
.hero-main > *:nth-child(3){animation-delay:.16s}
.hero-main > *:nth-child(4){animation-delay:.24s}
.hero-card{animation-delay:.3s}
.ph .wrap > *:nth-child(2){animation-delay:.08s}
.ph .wrap > *:nth-child(3){animation-delay:.16s}

/* ---- スクロール発火の入場。初期状態を隠すのは .js 配下だけ（JS無効なら全部見える） ---
   .js は <head> のインラインスクリプトが IntersectionObserver の有無を見て付ける。
   本体スクリプトが走らなかった場合は4秒で .js を外して全部見えるようにしてある。 */
.js .sec-head,
.js .biz > li,
.js .points > li,
.js .works > li,
.js .price > li,
.js .flow > li,
.js .deflist,
.js .tbl,
.js .faq,
.js .msg,
.js .box,
.js .form,
.js .contact-alt,
.js .prose,
.js .lead-p,
.js .price-note,
.js .cta > .wrap{
  opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .95s var(--ease),transform .95s var(--ease);
}
.js .is-in{opacity:1 !important;transform:none !important}
.js .biz > li:nth-child(2),
.js .points > li:nth-child(2),
.js .price > li:nth-child(2){transition-delay:.08s}
.js .points > li:nth-child(3){transition-delay:.16s}

/* ---- ヘッダー ---------------------------------------------------------- */
/* 🔴 ヒーローと同じ光をヘッダーにも入れた「明るいほう」で確定（2026-09-17）。
   帯が78pxしかないので、ヒーローの斜めの光を横に寝かせて右下から差し込ませる。
   🔴 いちばん明るい合成色が --face-dark-hi(#1C6055) を超えないように、
      光の色をその実色ちょうどに、地の明るい端を --primary-lift(#1A5A50) に止めてある
      （超えると build.mjs のコントラスト検査が実物とずれて意味を失う）。
   半透明＋backdrop-filter はやめて不透明にした（光の濃度を検算できる形にするため）。 */
.hd{
  background:
    radial-gradient(620px 320px at 88% 168%, rgba(28,96,85,.86), transparent 70%),
    linear-gradient(94deg, #082623 0%, var(--primary) 52%, var(--primary-lift) 106%);
  border-bottom:1px solid rgba(255,255,255,.12);position:sticky;top:0;z-index:50;
  transition:box-shadow .3s var(--ease),background .3s var(--ease);
}
/* 少しスクロールしたら沈める（本文の紙の上に浮くので、光は残したまま暗く） */
.hd.stuck{
  background:
    radial-gradient(620px 320px at 88% 168%, rgba(24,84,74,.80), transparent 70%),
    linear-gradient(94deg, #061F1C 0%, #0C332F 52%, #134C43 106%);
  box-shadow:0 14px 34px -22px rgba(10,43,40,.95);
}
.hd-in{display:flex;align-items:center;gap:20px;min-height:78px}
.logo{display:flex;align-items:baseline;gap:10px;text-decoration:none;flex:0 0 auto}
.logo b{font-family:var(--heading);font-size:22px;font-weight:600;letter-spacing:.14em;color:var(--on-dark);transition:opacity var(--fast)}
.logo span{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--on-dark-soft);white-space:nowrap}
.logo:hover b{opacity:.82}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0}
.nav a{
  position:relative;text-decoration:none;font-size:14px;letter-spacing:.03em;color:var(--on-dark-mid);
  padding:10px 13px;border-radius:999px;transition:background var(--fast),color var(--fast);
}
.nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:5px;height:1px;
  background:var(--accent-on-dark);transform:scaleX(0);transform-origin:left;opacity:.85;
  transition:transform .32s var(--ease);
}
.nav a:hover{color:var(--on-dark);background:rgba(255,255,255,.10)}
.nav a:hover::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--on-dark);background:rgba(255,255,255,.145);font-weight:700}
.nav a[aria-current]::after{display:none}
.hd-cta{
  margin-left:10px;flex:0 0 auto;text-decoration:none;white-space:nowrap;
  padding:11px 22px;border-radius:999px;background:var(--on-dark);color:var(--primary);
  font-size:14px;font-weight:700;letter-spacing:.06em;
  box-shadow:0 10px 22px -12px rgba(10,43,40,.85);transition:background var(--fast),color var(--fast),transform var(--fast),box-shadow var(--fast);
}
.hd-cta:hover{background:var(--accent-lit);color:#fff;transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(10,43,40,.9)}

/* ---- ヒーロー（主役） ---------------------------------------------------- */
/* 背景は上の「光の移ろい」で持つ（--grad-hero と同じ値を変数化したもの） */
.hero{position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line-soft)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg, rgba(196,90,36,.80), rgba(196,90,36,.20) 48%, transparent 82%)}
.hero-in{
  position:relative;z-index:1;padding-block:clamp(66px,9.6vw,132px);
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(32px,5vw,64px);align-items:center;
}
.eyebrow{
  display:inline-block;font-size:11.5px;letter-spacing:.16em;color:var(--accent-on-dark);
  font-weight:700;margin-bottom:26px;
}
.eyebrow::before{content:"";display:inline-block;width:30px;height:1px;vertical-align:middle;margin-right:13px;
  background:linear-gradient(90deg, rgba(245,198,168,.9), rgba(255,255,255,0))}
.hero h1{
  font-weight:400;font-size:clamp(33px,5.2vw,54px);line-height:1.34;letter-spacing:.05em;
  overflow-wrap:anywhere;color:var(--on-dark);
}
/* 蛍光ペンの面ではなく、字の下に一本引く罫。em相対なのでスマホでも同じ位置に付く。 */
.hero h1 em{
  font-style:normal;position:relative;display:inline-block;padding-inline:.06em;
  background-image:linear-gradient(90deg, rgba(226,133,74,.95), rgba(255,255,255,.42));
  background-size:100% .1em;
  background-position:0 calc(100% - .16em);
  background-repeat:no-repeat;
}
.hero-lead{margin-top:30px;max-width:34em;font-size:clamp(15px,1.5vw,17px);color:var(--on-dark-mid)}
.hero-acts{margin-top:38px;display:flex;flex-wrap:wrap;gap:12px}
.hero-card{
  position:relative;overflow:hidden;
  /* 暗い面の上に載るので、透過を強くすると紙ではなく曇りガラスに見える。 */
  background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,255,255,.90));
  backdrop-filter:blur(8px) saturate(1.1);
  border-radius:var(--r-lg);padding:clamp(24px,2.6vw,32px);
  box-shadow:var(--sh-2);
}
.hero-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--hair)}
/* 暗い面の上のボタン。緑のままだと地に沈むので、主が白・従が白の輪郭（フッターと同じ作法）。 */
.hero .btn-p{background:var(--on-dark);color:var(--primary);border-color:var(--on-dark);box-shadow:0 16px 30px -16px rgba(8,38,35,.9)}
.hero .btn-p:hover{background:var(--accent-lit);border-color:var(--accent-lit);color:#fff}
.hero .btn-o{background:rgba(255,255,255,.06);color:var(--on-dark);border-color:rgba(255,255,255,.42);box-shadow:none}
.hero .btn-o:hover{background:rgba(255,255,255,.13);border-color:var(--on-dark)}
.hero-card dl > div{padding:15px 0;border-bottom:1px solid var(--line-soft)}
.hero-card dl > div:first-child{padding-top:0}
.hero-card dl > div:last-child{padding-bottom:0;border-bottom:0}
.hero-card dt{font-size:11px;letter-spacing:.16em;color:var(--accent);font-weight:700}
.hero-card dd{margin-top:6px;font-size:14.5px;color:var(--ink);line-height:1.75}
.hero-card dd.num{font-family:var(--mono);font-size:13.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums}

/* ---- ボタン（グラデーションは載せない。面と影と矢印だけで動かす） ------------ */
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  padding:15px 30px;border-radius:999px;font-size:15px;font-weight:700;letter-spacing:.06em;
  border:1px solid var(--primary);
  transition:background var(--fast),color var(--fast),transform var(--fast),box-shadow var(--fast),border-color var(--fast);
}
.btn::after{content:"→";font-weight:400;transition:transform .3s var(--ease)}
.btn:hover::after{transform:translateX(4px)}
.btn-p{background:var(--primary);color:#fff;box-shadow:0 12px 26px -14px rgba(16,63,58,.9)}
.btn-p:hover{background:var(--primary-dark);border-color:var(--primary-dark);transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(16,63,58,.95)}
.btn-o{background:var(--paper);color:var(--primary);border-color:var(--line);box-shadow:var(--sh-1)}
.btn-o:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:var(--sh-2)}

/* ---- 見出し ------------------------------------------------------------ */
.sec-head{margin-bottom:clamp(34px,4.2vw,52px)}
.sec-head h2{
  position:relative;margin-top:20px;padding-bottom:20px;font-weight:400;
  font-size:clamp(25px,3.5vw,37px);letter-spacing:.06em;
}
.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:56px;height:2px;border-radius:2px;background:var(--hair)}
.sec-head p{margin-top:20px;color:var(--ink-mid);max-width:44em;font-size:15.5px}

/* ---- 事業カード（2枚） -------------------------------------------------- */
.biz{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.biz > li{
  position:relative;overflow:hidden;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(28px,3.4vw,42px);display:flex;flex-direction:column;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.biz > li::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--hair);
  transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease);
}
.biz > li:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}
.biz > li:hover::before{transform:scaleX(1)}
.biz .no{
  display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:var(--primary-tint);color:var(--primary);
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.04em;
}
.biz h3{margin-top:22px;font-size:clamp(19px,2.2vw,24px);letter-spacing:.05em}
.biz .sub{margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-light)}
.biz p{margin-top:18px;color:var(--ink-mid);font-size:15px}
.biz .more{margin-top:auto;padding-top:26px}
.biz .more a{
  display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--primary);text-decoration:none;
}
.biz .more a::after{content:"→";transition:transform .3s var(--ease)}
.biz .more a:hover::after{transform:translateX(5px)}

/* ---- 3点の要点 ---------------------------------------------------------- */
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.points > li{
  background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1);
  padding:clamp(24px,2.6vw,30px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.points > li:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.points .no{
  display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--accent-tint);color:var(--accent);
  font-family:var(--mono);font-size:11px;font-weight:500;
  box-shadow:inset 0 0 0 1px rgba(176,80,31,.14);
}
.points h3{margin-top:17px;font-size:18.5px;letter-spacing:.045em}
.points p{margin-top:12px;font-size:14.5px;color:var(--ink-mid)}

/* ---- 定義リスト（含まれるもの） ------------------------------------------ */
.deflist{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:8px clamp(20px,2.4vw,30px)}
.deflist > div{
  display:grid;grid-template-columns:210px 1fr;gap:8px 28px;padding:22px 0;
  border-bottom:1px solid var(--line-soft);transition:background var(--fast);
}
.deflist > div:last-child{border-bottom:0}
.deflist > div:hover{background:rgba(196,90,36,.028)}
.deflist dt{position:relative;font-family:var(--heading);font-weight:600;letter-spacing:.05em}
.deflist dd{color:var(--ink-mid);font-size:15px}

/* ---- 表 ---------------------------------------------------------------- */
.tbl{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1);font-size:15px;overflow:hidden}
.tbl th,.tbl td{text-align:left;padding:18px 22px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl th{width:210px;font-family:var(--heading);font-weight:600;color:var(--ink);letter-spacing:.05em;background:linear-gradient(90deg, rgba(243,240,233,.85), rgba(243,240,233,.35))}
.tbl td{color:var(--ink-mid)}
.tbl tr{transition:background var(--fast)}
.tbl tr:hover td{background:rgba(196,90,36,.030)}

/* ---- 料金 -------------------------------------------------------------- */
.price{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.price > li{
  position:relative;overflow:hidden;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(26px,3vw,36px);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.price > li::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--hair);opacity:.55}
.price > li:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.price .k{
  display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;
  background:var(--accent-tint);border-radius:999px;padding:5px 14px;
  box-shadow:inset 0 0 0 1px rgba(176,80,31,.10);
}
.price h3{margin-top:16px;font-size:19px;letter-spacing:.05em}
.price .v{margin-top:14px;font-family:var(--heading);font-size:clamp(32px,4.4vw,44px);font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.01em;line-height:1.2;color:var(--primary)}
.price .v small{font-size:14px;font-weight:400;letter-spacing:.06em;margin-left:8px;color:var(--ink-mid);font-family:var(--body)}
.price p{margin-top:14px;font-size:14.5px;color:var(--ink-mid)}
.price ul{margin-top:18px;padding-top:18px;border-top:1px solid var(--line-soft)}
.price ul li{position:relative;padding-left:22px;font-size:14.5px;color:var(--ink-mid);margin-top:10px}
.price ul li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2px;border-radius:2px;background:var(--accent)}
.price-note{margin-top:22px;font-size:13.5px;color:var(--ink-light)}

/* ---- 進め方 ------------------------------------------------------------ */
.flow{counter-reset:f}
.flow > li{position:relative;padding:0 0 36px 72px;margin-left:21px}
.flow > li::after{
  content:"";position:absolute;left:0;top:6px;bottom:0;width:1px;
  background:linear-gradient(180deg, rgba(16,63,58,.30), rgba(16,63,58,.12));
}
.flow > li:last-child{padding-bottom:0}
.flow > li:last-child::after{display:none}
.flow > li::before{
  counter-increment:f;content:counter(f,decimal-leading-zero);
  position:absolute;left:-21px;top:-2px;width:42px;height:42px;border-radius:50%;
  background:linear-gradient(160deg, var(--primary-lift), var(--primary) 62%);color:#fff;
  display:grid;place-items:center;z-index:1;
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  box-shadow:0 8px 18px -10px rgba(16,63,58,.9);
}
.flow h3{font-size:18.5px;letter-spacing:.05em}
.flow .t{display:inline-block;margin-left:12px;font-size:11.5px;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:3px 11px;font-family:var(--body);letter-spacing:.06em;font-weight:700}
.flow p{margin-top:12px;font-size:15px;color:var(--ink-mid)}

/* ---- 実績 -------------------------------------------------------------- */
.works{display:grid;gap:20px}
.works > li{
  position:relative;overflow:hidden;
  background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:clamp(26px,3vw,38px);display:grid;grid-template-columns:220px 1fr;gap:12px 36px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}
.works > li::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:linear-gradient(180deg, rgba(16,63,58,.5), rgba(196,90,36,.5));
  transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease);
}
.works > li:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.works > li:hover::before{transform:scaleY(1)}
.works .meta .tag{display:inline-block;font-size:11px;letter-spacing:.14em;color:var(--primary);background:var(--primary-tint);border-radius:999px;padding:5px 13px;font-weight:700}
.works .meta .yr{margin-top:12px;font-size:13px;color:var(--ink-light);font-variant-numeric:tabular-nums}
.works h3{font-size:20px;letter-spacing:.05em}
.works p{margin-top:12px;font-size:15px;color:var(--ink-mid)}
.works .stack{margin-top:18px;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.works .stack span{
  font-size:12px;letter-spacing:.06em;color:var(--ink-mid);background:var(--bg);
  box-shadow:inset 0 0 0 1px var(--line);border-radius:999px;padding:4px 12px;
}
.works .url{margin-top:16px;font-size:14px}
.works .url a{color:var(--primary);font-weight:700;overflow-wrap:anywhere;text-decoration-color:rgba(16,63,58,.3);text-underline-offset:3px;transition:text-decoration-color var(--fast)}
.works .url a:hover{text-decoration-color:var(--accent)}

/* ---- FAQ --------------------------------------------------------------- */
.faq{background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:6px clamp(20px,2.4vw,30px)}
.faq > div{border-bottom:1px solid var(--line-soft);padding:26px 0}
.faq > div:last-child{border-bottom:0}
.faq dt{font-family:var(--heading);font-weight:600;font-size:17px;letter-spacing:.04em;position:relative;padding-left:38px}
.faq dt::before{content:"Q";position:absolute;left:0;top:-1px;color:var(--accent);font-family:var(--mono);font-size:14px;font-weight:500}
.faq dd{margin-top:12px;padding-left:38px;color:var(--ink-mid);font-size:15px;position:relative}
.faq dd::before{content:"A";position:absolute;left:0;top:0;color:var(--ink-light);font-family:var(--mono);font-size:14px;font-weight:500}

/* ---- 文章ブロック ------------------------------------------------------- */
.prose h3{position:relative;margin-top:42px;padding-left:16px;font-size:18.5px;letter-spacing:.05em}
.prose h3::before{content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:2px;border-radius:2px;background:linear-gradient(180deg, var(--primary), rgba(196,90,36,.6))}
.prose h3:first-child{margin-top:0}
.prose p{margin-top:14px;color:var(--ink-mid);font-size:15px}
.prose ul{margin-top:14px}
.prose ul li{position:relative;padding-left:22px;color:var(--ink-mid);font-size:15px;margin-top:8px}
.prose ul li::before{content:"";position:absolute;left:0;top:.68em;width:11px;height:2px;border-radius:2px;background:var(--accent)}
.lead-p{font-size:clamp(16px,1.7vw,18.5px);line-height:2;color:var(--ink)}
.note{margin-top:18px;font-size:13.5px;color:var(--ink-light)}

/* ---- 引用・強調の箱 ----------------------------------------------------- */
.box{position:relative;overflow:hidden;background:var(--paper);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:clamp(24px,2.6vw,32px)}
.box::before{content:"";position:absolute;top:0;bottom:0;left:0;width:3px;background:linear-gradient(180deg, var(--primary), var(--accent-lit))}
.box h3{font-size:17.5px;letter-spacing:.05em}
.box p{margin-top:12px;font-size:15px;color:var(--ink-mid)}

/* ---- 代表あいさつ ------------------------------------------------------- */
.msg{position:relative;overflow:hidden;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(26px,3vw,40px)}
.msg::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--hair)}
.msg p{margin-top:20px;font-size:15.5px;color:var(--ink-mid)}
.msg p:first-child{margin-top:0}
.sign{margin-top:26px;text-align:right;font-family:var(--heading);font-size:18px;letter-spacing:.1em}
.sign small{display:block;font-size:11.5px;color:var(--ink-light);letter-spacing:.16em;margin-bottom:6px;font-family:var(--body)}

/* ---- CTA（フッターが墨緑なので、ここは紙の帯で受ける） -------------------- */
.cta{position:relative;overflow:hidden;background:var(--grad-band)}
.cta::before,.cta::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--hair-soft)}
.cta::before{top:0}
.cta::after{bottom:0}
.cta .wrap{position:relative;padding-block:clamp(56px,7vw,92px)}
.cta h2{font-weight:400;font-size:clamp(21px,3vw,31px);letter-spacing:.07em;text-align:center}
.cta p{margin-top:18px;color:var(--ink-mid);font-size:15.5px;text-align:center;max-width:44em;margin-inline:auto}
.cta-acts{margin-top:34px;display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.cta-sub{margin-top:22px;font-size:13.5px;color:var(--ink-light);text-align:center}
.cta-sub a{color:var(--primary);font-weight:700}

/* ---- 問い合わせ --------------------------------------------------------- */
.form{position:relative;overflow:hidden;background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:clamp(24px,3vw,38px)}
.form::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--hair)}
.form label{display:block;margin-bottom:24px;font-size:14px;font-weight:700;letter-spacing:.05em}
.form .req{color:var(--accent);background:var(--accent-tint);border-radius:999px;padding:3px 10px;font-size:10.5px;margin-left:10px;letter-spacing:.1em}
.form .opt{color:var(--ink-light);background:var(--bg-alt);border-radius:999px;padding:3px 10px;font-size:10.5px;margin-left:10px;letter-spacing:.1em}
.form input,.form textarea,.form select{
  display:block;width:100%;margin-top:10px;padding:14px 16px;font:inherit;font-size:15px;font-weight:400;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink);
  transition:border-color var(--fast),background var(--fast),box-shadow var(--fast);
}
.form input:hover,.form textarea:hover,.form select:hover{border-color:#D6CFC0}
.form input:focus,.form textarea:focus,.form select:focus{background:var(--paper);border-color:var(--primary);outline:3px solid rgba(16,63,58,.14);outline-offset:0}
.form .hp{position:absolute;left:-9999px}
.form button{
  width:100%;padding:18px;font:inherit;font-size:16px;font-weight:700;letter-spacing:.1em;
  background:var(--primary);color:#fff;border:0;border-radius:999px;cursor:pointer;
  box-shadow:0 14px 28px -16px rgba(16,63,58,.9);transition:background var(--fast),transform var(--fast),box-shadow var(--fast);
}
.form button:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:0 20px 36px -18px rgba(16,63,58,.95)}
.contact-alt{margin-top:44px;background:var(--grad-band);box-shadow:inset 0 0 0 1px var(--line);border-radius:var(--r-md);padding:clamp(22px,2.6vw,30px)}
.contact-alt h2{font-size:17px;letter-spacing:.06em}
.contact-alt dl{margin-top:8px}
.contact-alt dl > div{display:grid;grid-template-columns:96px 1fr;gap:6px 20px;padding:14px 0;border-bottom:1px solid var(--line)}
.contact-alt dl > div:last-child{border-bottom:0;padding-bottom:0}
.contact-alt dt{font-size:12.5px;font-weight:700;letter-spacing:.12em;color:var(--accent);padding-top:3px}
.contact-alt dd{font-size:15px;color:var(--ink)}
.contact-alt dd a{color:var(--primary);font-weight:700;text-decoration:none;border-bottom:1px solid var(--line);transition:border-color var(--fast)}
.contact-alt dd a:hover{border-bottom-color:var(--primary)}
.contact-alt dd small{display:block;margin-top:4px;font-size:12.5px;color:var(--ink-light);font-weight:400}
.err{background:#FBEFEA;border-radius:var(--r-sm);border:1px solid #E0B8A6;color:#7A2E12;padding:18px 20px;font-size:14.5px;margin-bottom:26px}

/* ---- パンくず ----------------------------------------------------------- */
/* ヘッダーとページ見出しの間に明るい帯を挟むと上の面が切れるので、ここも墨緑。 */
.bc{border-bottom:0;background:var(--face-dark-deep)}
.bc ol{display:flex;flex-wrap:wrap;gap:8px;padding-block:14px;font-size:12px;color:var(--on-dark-soft)}
.bc a{color:var(--on-dark-soft);text-decoration:none;transition:color var(--fast)}
.bc a:hover{color:var(--accent-on-dark)}
.bc li+li::before{content:"／";margin-right:8px;color:rgba(255,255,255,.30)}

/* ---- ページ見出し ------------------------------------------------------- */
.ph{position:relative;overflow:hidden;isolation:isolate;background:var(--grad-ph);border-bottom:1px solid var(--line-soft)}
.ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:linear-gradient(90deg, rgba(196,90,36,.80), rgba(196,90,36,.20) 48%, transparent 82%)}
.ph .wrap{position:relative;z-index:1;padding-block:clamp(48px,6.2vw,82px)}
.ph h1{margin-top:20px;font-weight:400;font-size:clamp(27px,4.2vw,44px);letter-spacing:.07em;color:var(--on-dark)}
.ph p{margin-top:22px;color:var(--on-dark-mid);font-size:15.5px;max-width:44em}
/* 404 の .en も同じ意匠なのでまとめて暗い面用にする */
.ph .chip,.ph .en{color:var(--accent-on-dark);background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.ph .chip::before,.ph .en::before{background:var(--accent-on-dark)}

/* ---- フッター（墨緑） ---------------------------------------------------- */
.ft{
  position:relative;overflow:hidden;
  background:var(--grad-ft);color:rgba(255,255,255,.76);
  padding-block:clamp(52px,6vw,76px);font-size:14px;
}
.ft::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, rgba(196,90,36,.85), rgba(196,90,36,.25) 44%, transparent 78%);
}
.ft .wrap{position:relative;z-index:1}
.ft-in{display:grid;grid-template-columns:1.2fr 1fr;gap:40px}
.ft-logo b{font-family:var(--heading);font-size:21px;color:#fff;letter-spacing:.14em;display:block;font-weight:600}
.ft-logo span{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:rgba(255,255,255,.5)}
.ft address{font-style:normal;margin-top:22px;line-height:2;font-size:13.5px}
.ft address a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:border-color var(--fast)}
.ft address a:hover{border-bottom-color:#fff}
.ft-btn{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;text-decoration:none;
  padding:13px 26px;border-radius:999px;border:1px solid rgba(255,255,255,.45);color:#fff;
  font-size:14px;font-weight:700;letter-spacing:.06em;transition:background var(--fast),color var(--fast),border-color var(--fast),transform var(--fast);
}
.ft-btn::after{content:"→";transition:transform .3s var(--ease)}
.ft-btn:hover{background:#fff;color:var(--primary);border-color:#fff;transform:translateY(-2px)}
.ft-btn:hover::after{transform:translateX(4px)}
.ft-nav{display:flex;flex-wrap:wrap;gap:12px 30px;align-content:start}
.ft-nav a{color:rgba(255,255,255,.8);text-decoration:none;font-size:13.5px;transition:color var(--fast)}
.ft-nav a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.ft-cp{margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font-size:11.5px;color:rgba(255,255,255,.55);letter-spacing:.06em}

/* ---- スマホ追従バー（メールのみ。電話は前面に出さない） ------------------- */
.sp-bar{display:none}

/* ---- レスポンシブ ------------------------------------------------------- */
@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:36px}
  .hero-card{max-width:520px}
}
@media (max-width:900px){
  .hd-in{min-height:64px;flex-wrap:wrap;gap:0 14px;padding-block:10px}
  .nav{flex:1 0 100%;min-width:0;margin-left:0;order:3;flex-wrap:wrap;gap:0 2px;border-top:1px solid rgba(255,255,255,.14);padding-top:6px;margin-top:8px}
  .nav a{padding:8px 10px;font-size:13px;white-space:nowrap}
  .nav a::after{left:10px;right:10px;bottom:3px}
  .hd-cta{margin-left:auto;padding:9px 18px;font-size:13px}
  .biz,.price{grid-template-columns:1fr}
  .points{grid-template-columns:1fr}
  .works > li{grid-template-columns:1fr;gap:16px}
  .deflist > div{grid-template-columns:1fr;gap:4px}
  .tbl th{width:140px;padding:16px}
  .tbl td{padding:16px}
  .ft-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:15.5px;line-height:1.85}
  .wrap{padding-inline:18px}
  .logo b{font-size:18px}
  .logo span{display:none}
  .hero-in{padding-block:52px}
  .hero h1{line-height:1.42}
  .hero-acts .btn{width:100%;justify-content:center}
  .sec-head h2{padding-bottom:16px}
  .tbl,.tbl tbody,.tbl tr,.tbl th,.tbl td{display:block;width:auto}
  .tbl{padding:4px 18px}
  .tbl th{padding:18px 0 0;border-bottom:0;font-family:var(--body);font-size:12px;color:var(--accent);letter-spacing:.1em;background:none}
  .tbl td{padding:6px 0 18px;border-bottom:1px solid var(--line-soft)}
  .tbl tr:hover td{background:none}
  .flow > li{padding-left:58px}
  .contact-alt dl > div{grid-template-columns:1fr;gap:2px}
  /* 狭い画面では面が小さく、にじみが濃く出るので全体を落とす */
  .wash i{opacity:.8}
  .wash::after{opacity:.03}
  /* 🔴 狭い画面は光の円が見出し・リードに被るので、光は右上の隅から出さない
     （PCと同じ範囲だと中間色の文字が 3.67:1 まで落ちた） */
  .hero{
    animation-name:hero-light-sp,hero-shade,hero-tilt-sp;
    background:
      radial-gradient(1180px 640px at var(--hx,84%) var(--hy,-18%), rgba(28,96,85,.80), transparent 62%),
      radial-gradient(900px 520px at var(--lx,-6%) var(--ly,118%), rgba(8,38,35,.70), transparent 64%),
      linear-gradient(var(--ang,174deg),#14524A -12%, var(--primary) 44%, #092825 122%);
  }
  .sp-bar{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(250,248,244,.93);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);
  }
  .sp-bar a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:14px;border-radius:999px;background:var(--primary);color:#fff;
    text-decoration:none;font-size:15px;font-weight:700;letter-spacing:.08em;
  }
  .sp-bar a::after{content:"→";font-weight:400}
  .ft{padding-bottom:104px}
}

/* ---- 動きを止める（🔴 ここが唯一の正。追加した動きは必ずここにも足す） -------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto}
  /* 入場アニメは fill-mode:both で opacity:0 から始まるので、止めるだけでなく実体も戻す */
  .hero-main > *,.hero-card,.ph .wrap > *{opacity:1;transform:none}
  /* スクロール発火の初期状態（.js 配下で隠している分）も戻す */
  .js .sec-head,
  .js .biz > li,
  .js .points > li,
  .js .works > li,
  .js .price > li,
  .js .flow > li,
  .js .deflist,
  .js .tbl,
  .js .faq,
  .js .msg,
  .js .box,
  .js .form,
  .js .contact-alt,
  .js .prose,
  .js .lead-p,
  .js .price-note,
  .js .cta > .wrap{opacity:1;transform:none}
  /* 淡墨のにじみは静止した絵として残す（消さない）＝animation:none で初期位置に留まる */
  /* 水面も同じ＝うねり（①②③）は静止した光として残り、波紋（④⑤⑥）は
     初期状態が opacity:0 なので出ない。ここで opacity を戻さないこと。 */
}

@media print{
  .hd,.sp-bar,.cta,.bc,.wash{display:none}
  .hero,.ph,.bc{background:none}
  .hero h1,.ph h1,.hero-lead,.ph p,.logo b{color:#14181A}
  .eyebrow,.ph .chip{color:#B0501F}
  .hero .btn-p,.hero .btn-o{background:none;color:#14181A;border-color:#14181A;box-shadow:none}
  .hero-main > *,.hero-card,.ph .wrap > *{animation:none;opacity:1;transform:none}
  .js .sec-head,
  .js .biz > li,
  .js .points > li,
  .js .works > li,
  .js .price > li,
  .js .flow > li,
  .js .deflist,
  .js .tbl,
  .js .faq,
  .js .msg,
  .js .box,
  .js .form,
  .js .contact-alt,
  .js .prose,
  .js .lead-p,
  .js .price-note{opacity:1;transform:none}
  .ft{background:none;color:#14181A}
  .ft-logo b,.ft address a,.ft-nav a{color:#14181A}
}