@charset "UTF-8";
/* ============================================================
   suimil トップページ専用スタイル（front-page.php からのみ読み込む）
   2026-07-29 再設計（4回目）。lp.css からは独立。/lp/ には影響しない。

   【3回目までとの違い＝depart-inc.com の丸写しを解消した版】
   捨てたもの: 青 #2355D5 / Clash Grotesk / 巨大英字＋点線＋青チップの見出し /
   浮遊オブジェクトのヒーロー / 生成り→全面青→黒 のリズム /
   左固定イラスト＋右リスト＋白丸矢印 / 粒質感の3D積み木＋人 / Venn図。
   **これらは depart を特定できる組み合わせなので二度と戻さないこと。**

   この版の骨格:
   - （旧）コンセプト「一本の線」＝ヒーローの線 → 左端の spine → 問い合わせまで続く。
     **2026-08-03 にヒーローを bit-rise 寄せの図形へ作り替えた時点で、この骨格は無い。**
     受け手の線が消えたのに spine だけ残っていたので 2026-08-04 に撤去した。
   - 紙地 #F0F0F5 / 墨 #14171A / 主色 #1D5FF2（2026-08-03、自社ロゴの青。朱は廃止）。

   【2026-07-30 newvillage.jp 方向へ寄せた】
   あちらから取ったのは**原理だけ**:
     ①単色のベタ塗り色面と明るい面を大きく交互に置く（色を差し色でなく主役にする）
     ②巨大な英字を背景に敷き、和文の大見出しを前に重ねる
     ③罫線の枠でセクションを囲む
     ④縦組みの日本語を差す
     ⑤高コントラストの白抜き
   **取らなかったもの（あちらを特定できる要素なので戻さないこと）**:
     赤 #E2302A / #D02620、AXIS Font（有料）、ポラロイド枠、円形ロゴマーク、
     SNSの縦レール、関西弁の口語（「〜やで」）、切り抜き人物写真の多用。
   **あちらの主役は切り抜き人物写真40枚。スイミルには写真が無いので、そこは埋まっていない。**
   ============================================================ */

:root{
  /* ============================================================
     配色（2026-08-31 全面差し替え）

       赤 #CE2415 ／ 青 #02339C ／ 白 #FFFFFF の3色。

     【値の出どころ＝動画そのものを画素で測った値】
       測った相手は最初の PR 動画（assets/video/hero-demo.mp4／1344x768）を
       **ブラウザに再生させ、canvas へ描いて画素を数えた**もの。

       **いまの FV（hero-suimil-15s-hq.mp4）を同じ手順で測っても、ほぼ同じ値。**
       赤 #C9281B（75.0%）／青 #00319B（70.2%）＝ 下の値との差は各チャンネル 6 以内。
       **動画を差し替えても配色は動かさなくてよい**（2026-08-31 実測）。
       ただし «別の色で撮り直した動画» が来たら、必ず測り直すこと。
         赤 … 彩度の高い赤系画素の **84.6%** が #CE2415 の近傍。
              2番目のクラスタは 2.8% しかない＝**単一の色**と言い切れる
         青 … 彩度の高い青系画素の **75.2%** が #02339C の近傍。
              2番目は #03236D（9.4%）で、これは同じ青の «影» 側

       （60フレームを 336x192 に縮めて全画素を走査し、
        最頻クラスタを取り出しては ±12 を除去する、を4回繰り返した値）

       **1フレームだけ見て決めないこと。** 場面ごとに照明が違い、
       t=1.0s の1枚だけを測ると赤が #D02617・青が #0039AA に出る。
       全編を数えないと «その場面の色» を掴んでしまう。

       **目分量や «近い色» で置き換えないこと。**
       ファーストビューが動画そのものなので、地の色が1段でもずれると
       映像の縁が見えて «動画だけ貼り付けた» ように見える。

       **ffmpeg で測った値（#BC1114 / #013094）とは違う。**
       レンジ情報が無い（color_range=unknown）動画なので、
       ffmpeg とブラウザで展開の仕方が変わる。
       **採るのはブラウザ側の値。** 訪問者が見るのはそちらなので。

     【この差し替えで消えた前提】
       旧配色は 紙地 #F0F0F5（bit-rise の白）＋ 赤 #D02620（newvillage の赤）で、
       «他社サイトの実測値をそのまま使っている» ことが弱点だった。
       いまの3色は自社の映像から採っているので、その問題は無い。
       **#D02620 / #E2302A / #F0F0F5 には戻さないこと。**
       コメント内に残っている旧色は «経緯の記録» であって、生きた値ではない。

     【実測コントラスト（この値を下回る組み合わせを作らないこと）】
       白 #FFFFFF の上の 赤 #CE2415 …… 5.40:1（本文サイズで AA 可）
       白 #FFFFFF の上の 青 #02339C …… 10.73:1（AAA 可）
       白 #FFFFFF の上の 墨 #14171A …… 17.99:1
       赤 #CE2415 の上の 純白 ………… 5.40:1（**白の不透明度を落とさないこと。**
                                        .7 まで落とすと AA 未達になる）
       青 #02339C の上の 純白 ………… 10.73:1
       赤 #CE2415 の上の 墨 #14171A … 3.33:1 → **墨の文字を赤地に置かないこと。**
       赤 #CE2415 と 青 #02339C ……… 1.99:1 → **赤地に青文字・青地に赤文字は禁止。**
                                        赤と青を隣り合わせるときは必ず白を挟む。
     ============================================================ */
  --paper:#FFFFFF;
  /* 白の上に «もう一段» が要るとき（行のホバー、囲みの地）だけ使う淡い青白。
     **面の色としては使わないこと。** 3色から外れて見える。 */
  --paper-2:#EDF0F8;
  --surface:#FFFFFF;
  --ink:#14171A;
  --ink-2:#3D444B;
  /* 注記用。白地でのコントラストを実測して決めている。これ以上明るくしないこと */
  --ink-3:#5C646C;
  /* 主色の赤。動画の赤。 */
  --brand:#CE2415;
  /* 赤の暗い側。**白地の細い文字（フォームのエラーなど）はこちらを使う。**
     --brand をそのまま 12px の文字に使うと視認が落ちる。 */
  --brand-dk:#9E1B0F;
  --brand-lt:#E3877E;
  /* 主色の青。動画の青。**赤と同格の «主役» であって差し色ではない。** */
  --blue:#02339C;
  --blue-dk:#002571;
  --blue-lt:#4C70B9;
  /* 画面を覆うベタ塗りの赤。--brand と同値だが、**用途が違うので分けたまま置く**
     （面だけ濃くしたくなったときに文字色まで巻き込まないため）。 */
  --field:#CE2415;
  /* かつてヒーローの地だった赤。**2026-08-31 以降ヒーローは動画なので、
     この色は «動画が読めない間に見える地» としてだけ効く。** */
  --field-hi:#CE2415;
  --sand:#D9A788;
  --line:rgba(20,23,26,.16);
  --line-2:rgba(20,23,26,.08);

  --jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  /* **欧文も Dela Gothic One で統一**（2026-08-08 オーナー指示「他のとこも字体統一しよう」）。
     Schibsted Grotesk は «Dela に無い字が出たとき» の受け皿として残してある。 */
  --en:"Dela Gothic One","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  /* 見出し専用の書体（2026-08-08）。**本文に使わないこと。** ウェイトが1つしか無い。
     和文・欧文とも同じ Dela Gothic One に入っているので、和欧混植でも段差が出ない。 */
  --jp-disp:"Dela Gothic One","Zen Kaku Gothic New",sans-serif;
  /* 大きく見せる欧文だけ Modak（2026-08-08 オーナー指示。gunze.co.jp/130th/ の
     MESSAGE / MOVIE がこれ）。**丸くて太いので小さい字には使わないこと。**
     あちらも大見出しだけ Modak で、サイドの MOVIE / MESSAGE は Dela にしている。
     Modak に和文は無いので、和文が混ざる箱には使わない。 */
  --en-disp:Modak,"Dela Gothic One","Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;

  /* 2026-08-10 1180px → 1560px（オーナー「左右の横幅が気になる。もっと横幅広く使いたい」）。
     旧値だと 1512px の画面で本文が 1068px しかなく、左右に 222px ずつ空いていた。
     **1560 にした理由は「ヘッダーと同じ左右余白に揃うから」。**
     .hd .hd-in は max-width を外して --gut(56px) だけで組んである（下を見よ）ので、
     一般的な画面幅（〜1512px）では本文も全幅になり、ロゴ・ナビ・本文の左端が1本に揃う。
     1560px を超える画面でだけ中央寄せに戻り、行がこれ以上長くならない。
     **これ以上広げないこと。** 本文の行長がすでに40字前後で上限。 */
  --maxw:1560px;
  --gut:clamp(20px,4.2vw,56px);
  /* 2026-08-04 --rail を廃止。左端の spine のために空けていた幅で、
     spine を消したので本文が右へ寄る理由が無くなった。左右とも --gut で対称。 */
  --sec-y:clamp(78px,9.5vw,140px);
  --e:cubic-bezier(.16,1,.3,1);
  /* 弾むイージング。newvillage.jp が全体で使っていた性格をこちらでも採る。
     終端が1を超える＝いったん行き過ぎて戻る。メニューや幕など「面が動く」ものに使う。 */
  --e-pop:cubic-bezier(.175,.885,.32,1.23);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* **偽ボールドを禁止すること。**（2026-08-08）
   Dela Gothic One はウェイトが1つしか無い。サイト内の欧文には font-weight:700 を
   指定した箇所が数十あり、そのままだとブラウザが字を太らせた «偽ボールド» になって、
   輪郭がにじむ。とくに見出しの文字塗り（canvas に computed の font を渡している）で
   目に見えて濁る。これを1行で止める。Zen Kaku は実ウェイトを持つので影響なし。 */
html{font-synthesis:none;-webkit-font-synthesis:none}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--jp);
  font-size:16px;line-height:1.95;letter-spacing:.014em;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
::selection{background:var(--brand);color:var(--paper)}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ============================================================
   出現アニメの体系
   参考サイト（newvillage.jp）と同じ「初期状態を持たせて .on で解除する」方式。
   実測した値をそのまま採っている:
     下から   translateY(3%)      0.3s
     左/右から translateX(∓100%)  0.5s 弾む
     上から   translateY(-100%)   0.5s 弾む
     拡大     scale(0)            0.5s 弾む
     線描画                       1s
   **時間を伸ばさないこと。** 0.8秒にしていた版が「もっさり」と却下された。
   ============================================================ */
.js .anm{opacity:0;transition-delay:var(--d,0s)}
.js .anm.on{opacity:1}

.js .anm-up{transform:translateY(3%);transition:opacity .3s,transform .3s}
.js .anm-l{transform:translateX(-100%);transition:opacity .5s var(--e-pop),transform .5s var(--e-pop)}
.js .anm-r{transform:translateX(100%);transition:opacity .5s var(--e-pop),transform .5s var(--e-pop)}
.js .anm-t{transform:translateY(-100%);transition:opacity .5s var(--e-pop),transform .5s var(--e-pop)}
.js .anm-pop{transform:scale(0);transition:opacity .4s var(--e-pop),transform .4s var(--e-pop)}
.js .anm.on{transform:none}
.js .anm-draw{stroke-dashoffset:var(--len,1200);transition:stroke-dashoffset 1s}
.js .anm-draw.on{stroke-dashoffset:0}

/* 旧クラス名。マークアップを一気に書き換えないための互換 */
.js .rv{opacity:0;transform:translateY(3%);transition:opacity .3s,transform .3s;transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.msk{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .msk>em{display:block;font-style:normal;transform:translateY(112%);transition:transform .5s var(--e-pop);transition-delay:var(--d,0s)}
.js .msk.in>em,.js .in .msk>em{transform:none}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .anm,.js .msk>em{opacity:1!important;transform:none!important;transition:none!important}
  .js .anm-draw{stroke-dashoffset:0!important}
}

/* ============================================================
   （削除済み）ページ左端の spine
   2026-08-04 撤去。「一本の線」コンセプト（4回目の版）の部品で、
   ヒーローを bit-rise 寄せに作り替えた時点で受け手の線が無くなり、
   画面左に 1px の線だけが浮いて残っていた（オーナー指摘「左に謎の線がある」）。
   本文を右へずらしていた --rail も同時に廃止。**戻さないこと。**
   ============================================================ */

/* ============================================================
   ヘッダー
   ============================================================ */
/* **地を透明にしないこと**（2026-08-04）。ヒーローの図形が育つと上端まで青で覆われ、
   墨のロゴとナビが沈む（サイクル 5.6s のうち約 1.7s ＝3割の時間そうなる）。
   紙地の上では見た目が変わらないので、常に紙色を敷いて地に依存させない。 */
.hd{position:fixed;left:0;top:0;width:100%;z-index:500;background:var(--paper);
  transition:background .45s var(--e),box-shadow .45s var(--e)}
/* **ヒーローが紙地になったので白抜きは廃止**（2026-08-03）。
   以前はヒーローが主色のベタ塗りで、その上だけ白抜きにしていた。
   いまは上から下まで墨のままでよい。ロゴも反転させない。 */
.hd.stuck{background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);box-shadow:0 1px 0 var(--line-2)}
/* **ヘッダーの中身は --maxw で絞らない。**（2026-08-05 オーナー指摘「ロゴがもっと左」）
   ヒーローのコピーとバッジは --gut(56px) 基準なので、そこと揃わず浮いて見えていた。
   ヒーローが全幅の面になった以上、ヘッダーも全幅で --gut に合わせる。
   2026-08-10 に --maxw を 1560px へ広げたので、1512px までの画面では
   .wrap も全幅になり、ここと左端が揃うようになった。 */
.hd .wrap.hd-in{max-width:none;padding:0 var(--gut)}
.hd-in{height:74px;display:flex;align-items:center;gap:clamp(14px,2.6vw,34px)}
/* 2026-08-04 新ロゴ（オーナー支給「ロゴ案_１.png」）に差し替え。
   原本は白背景・透過なしだったので、白を抜いた `logo-b.png` を作って使っている。
   **縦横比が変わっている**（旧 SUiMiL 1477×342＝4.32 → 新 337×121＝2.79）。
   高さを据え置くと横が縮むので、幅を合わせて高さを 24→37px に取り直した。
   旧ロゴ `logo.png` は差し戻せるよう残してある。 */
/* **箱の比率はロゴ原本に合わせること。** 合わないと contain で余白が出て、
   ヘッダーの左端が視覚的にずれる。
   **原本は必ずインクの外接矩形で切ってから使うこと。**（支給画像は余白入りのことが多い）
   静止状態 = 英語ロゴ_黒_透過.png（SUiMiL）→ 切り出し後 920x197（4.67:1）
   変形前   = LOGO.png（角マーク）           → 切り出し後 351x104（3.38:1）
   **箱は横長の方（SUiMiL）に合わせ、左寄せで置くこと。** 中央寄せだと、
   モーフィング中に幅の狭い角マークが中央に来て、ヘッダーの左端が動いて見える。

   **原本は «黒» を使うこと。**（2026-08-08）支給は白版だったが、白地のヘッダー
   （.hd.stuck）では消える。白く見えているのはヒーロー上での filter:invert によるもの
   （下の .hd:not(.stuck) .logo）。原本を白にすると、その状態だけ正しくて他が全滅する。 */
/* 2026-08-11 支給の組み合わせロゴ（シンボル＋欧文・黒赤）1枚に統一
   （オーナー「このロゴ1つをモーフィングでループさせて欲しい」）。
   **箱の比率は必ず素材に合わせること**（4.77:1。tools/make-favicon.py --lockup が実測値を出す）。
   合わないと contain で余白が出て、左端が動いて見える。旧 logo-b.png は残してある。 */
/* 2026-08-11 «もう少し大きく»（オーナー指示）。22px → 28px。
   **器の高さ 50px は動かさないこと。** ナビの板と揃えてある。
   .hd .brand の上下 padding をそのぶん 14px → 11px に詰めて相殺している。 */
.logo{display:block;width:134px;height:28px;position:relative;
  background:url("../images/logo-lockup.png") left center/contain no-repeat}
.logo.is-morph{background-image:none}
/* **箱より上下 5px ずつ大きい。** 角マーク（カタカナ）を箱いっぱいより大きく置くため。
   front.js の PAD と必ず同じ値にすること（ずれると上下が切れる）。 */
.lg-morph{position:absolute;left:0;top:-5px;width:100%;height:calc(100% + 10px);pointer-events:none}
.hd .brand{flex:none;transition:opacity .3s}
.hd .brand:hover{opacity:.6}
.nav{margin-left:auto;display:flex;gap:clamp(12px,2vw,28px)}
/* **項目が英字になったので欧文の書体で組むこと。**（2026-08-08）
   和文書体のまま英字を出すと字幅がばらついて、区画の見出し（同じ語）と別物に見える。
   字間は .08em。詰めると全大文字が団子になる。 */
.nav a{position:relative;font-family:var(--en);font-size:12.5px;font-weight:600;
  letter-spacing:.08em;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;background:var(--brand);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s var(--e)}
.nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.hd-cta{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 20px;
  border:1.5px solid var(--ink);border-radius:2px;font-size:13px;font-weight:700;
  transition:background .35s var(--e),color .35s var(--e),border-color .35s var(--e)}
.hd-cta .ar{font-style:normal;transition:transform .4s var(--e)}
.hd-cta:hover{background:var(--brand);border-color:var(--brand);color:var(--paper)}
.hd-cta:hover .ar{transform:translateX(4px)}
.burger{display:none;flex:none;width:44px;height:44px;margin-left:auto;position:relative}
.burger span{position:absolute;left:11px;width:22px;height:1.5px;background:var(--ink);transition:transform .5s var(--e)}
.burger span:nth-child(1){top:19px}
.burger span:nth-child(2){top:25px}
.burger.is-open span:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger.is-open span:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* 全画面のメニューが上から降りてくる。clip-path ではなく面ごと動かす。
   弾むイージングなので、降りきったところで少し行き過ぎて戻る。 */
.navpanel{position:fixed;inset:0;z-index:480;background:var(--field);color:var(--paper);
  padding:92px var(--gut) 34px;
  display:flex;flex-direction:column;justify-content:space-between;
  transform:translateY(-100%);transition:transform .5s var(--e-pop);visibility:hidden}
.navpanel.is-open{transform:none;visibility:visible}
.navpanel .np-nav a{border-top-color:rgba(255,255,255,.3)}
.navpanel .np-nav i{color:rgba(255,255,255,.7)}
.navpanel .np-foot{border-top-color:rgba(255,255,255,.3)}
.navpanel .np-cta{background:var(--paper);color:var(--field)}
.navpanel .np-mail{color:rgba(255,255,255,1)}
/* **255-586行にあった重複を削除**（2026-08-19）。
   .np-nav 〜 .info までの332行が、そっくり同じ内容で下（HERO の節のあと）にも
   置かれていた。後ろの1組だけを残している。**同じ規則を2度書かないこと。**
   後勝ちなので前の組はどのみち効かず、直すときに «直したのに変わらない» を生む。 */

/* ============================================================
   CONTACT
   ============================================================ */
/* CONTACT（2026-08-07 作り直し）。
   **1カラム・中央寄せにすること。**
   一度2カラム（左に説明・右にフォーム）で組んだが、説明を削るたびに左が空き、
   最後は見出し1行だけになって「左がガラガラ」になった（オーナー指摘）。
   置くものが少ないなら、左右の余白を対称にした方が締まる。

   **フォームは白いカードに載せること。** 地が赤なので、
   入力欄を地に直接置くと枠線だけの弱い箱に見える。 */
.final{position:relative;padding:var(--sec-y) 0 clamp(60px,7vw,100px);overflow-x:clip}
.ct-grid{margin-top:clamp(26px,3.4vw,44px)}
/* **幅は文字数で切らないこと。** 44ch にしたら見出しが1行ごとに折れた。
   改行は本文側の <br> で決める。 */
.ct-side{max-width:min(760px,100%);margin:0 auto;text-align:center}
/* 見出しはフォームの上。本文より一段大きくして、カードと釣り合わせる */
.ct-lead{font-size:clamp(20px,2.5vw,30px);font-weight:700;line-height:1.65;letter-spacing:.01em}

/* --- 右：フォーム --- */
.ct-main{max-width:820px;margin:clamp(26px,3.4vw,44px) auto 0;
  background:var(--surface);border-radius:8px;padding:clamp(24px,3.4vw,44px);
  box-shadow:0 10px 20px -12px rgba(20,23,26,.16),0 30px 60px -30px rgba(20,23,26,.24)}
.form{max-width:none;margin-top:0}
.form p{margin:0}
.form .field{margin-top:20px}
.form .field:first-child,.form .row:first-child{margin-top:0}
.form .row{margin-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .row .field{margin-top:0}
.form label{display:block;font-size:12.5px;font-weight:700;margin-bottom:7px;color:var(--ink);
  letter-spacing:.04em}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=url],.form textarea,.form select{
  width:100%;padding:13px 14px;background:#fff;color:var(--ink);
  border:1px solid rgba(20,23,26,.18);border-radius:5px;
  font-family:var(--jp);font-size:15px;line-height:1.7;
  transition:border-color .25s var(--e),box-shadow .25s var(--e)}
/* **height で決めること。** min-height だと rows 属性ぶんの高さが残って、
   1画面を占める巨大な入力欄になる。 */
.form textarea{height:150px;min-height:110px;resize:vertical}
.form input::placeholder,.form textarea::placeholder{color:#9AA1A8}
.form input:focus,.form textarea:focus,.form select:focus{
  outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(206,36,21,.14)}

/* **select の矢印は自前で描くこと。** 既定の矢印だけ OS の見た目が残って浮く */
.form select{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314171A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}

/* 送信ボタン。**赤で、幅いっぱい寄りにする。** 黒の丸ボタンだと
   本文中のリンクボタンと同じ強さになって、送信だと分からない */
.form input[type=submit],.form button[type=submit]{
  display:block;width:100%;height:58px;margin-top:24px;padding:0 28px;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font-family:var(--jp);font-size:15px;font-weight:700;
  letter-spacing:.08em;cursor:pointer;transition:background .25s var(--e),transform .25s var(--e)}
.form input[type=submit]:hover,.form button[type=submit]:hover{background:var(--brand-dk)}
.form input[type=submit]:active{transform:translateY(1px)}
.form .fine{margin-top:16px;font-size:12.5px;line-height:1.9;color:var(--ink-3)}
.form .fine a{color:var(--brand);border-bottom:1px solid var(--brand)}
.wpcf7-spinner{display:block;margin:12px auto 0}
.wpcf7-not-valid-tip{color:#9E1B0F;font-size:12.5px;margin-top:6px}
.wpcf7 form .wpcf7-response-output{margin:20px 0 0!important;padding:13px 15px!important;
  border:1px solid rgba(20,23,26,.18)!important;border-radius:5px;font-size:13.5px;color:var(--ink-2)}
.wpcf7 form.sent .wpcf7-response-output{border-color:#02339C!important;color:#02339C}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{border-color:#9E1B0F!important;color:#9E1B0F}

@media (max-width:560px){
  .form .row{grid-template-columns:1fr;gap:0}
  .form .row .field+.field{margin-top:20px}
}
.np-nav a{display:flex;align-items:baseline;gap:14px;padding:clamp(13px,2.3vw,19px) 0;border-top:1px solid var(--line-2);
  opacity:0;transform:translateY(16px);transition:opacity .6s var(--e),transform .6s var(--e)}
.navpanel.is-open .np-nav a{opacity:1;transform:none}
.navpanel.is-open .np-nav a:nth-child(1){transition-delay:.24s}
.navpanel.is-open .np-nav a:nth-child(2){transition-delay:.30s}
.navpanel.is-open .np-nav a:nth-child(3){transition-delay:.36s}
.navpanel.is-open .np-nav a:nth-child(4){transition-delay:.42s}
.navpanel.is-open .np-nav a:nth-child(5){transition-delay:.48s}
/* 6項目めの指定が無く、そこだけ遅れ 0 で先に出ていた（2026-08-08 追加） */
.navpanel.is-open .np-nav a:nth-child(6){transition-delay:.54s}
.np-nav i{font-family:var(--en);font-style:normal;font-size:12px;color:var(--brand);width:24px;flex:none}
/* **英字なので欧文の書体で組む。** マイナスの字間は和文用で、全大文字だと字が噛む */
.np-nav b{font-family:var(--en);font-size:clamp(20px,5vw,28px);font-weight:700;letter-spacing:.04em}
.np-foot{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--line-2)}
.np-cta{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 22px;
  background:var(--brand);color:var(--paper);font-weight:700;font-size:15px}
.np-mail{font-family:var(--en);font-size:14px;color:var(--ink-2)}
body.nav-open{overflow:hidden}

/* ============================================================
   ボタン（角丸のピルはやめ、角のある矩形にしている）
   ============================================================ */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 26px;border-radius:2px;
  font-size:15px;font-weight:700;transition:background .4s var(--e),color .4s var(--e),border-color .4s var(--e)}
.btn .ar{font-style:normal;transition:transform .45s var(--e)}
.btn:hover .ar{transform:translateX(5px)}
.btn-solid{background:var(--ink);color:var(--paper)}
.btn-solid:hover{background:var(--brand)}
.btn-line{border:1.5px solid currentColor}
.btn-line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ============================================================
   HERO （2026-08-05 作り直し）
   **web.chibit.jp のヒーローを参考にしている**（オーナー指示
   「一旦このサイトと全く同じ感じにして」）。実測値は front-page.php のコメントに全部書いた。

   **取った**: hcFish の流れ（右下→左上へ斜めに抜け、中央で最大・両端で消える）、
   カードの寸法比 512/275・角丸10px・二段の影、円形バッジ148px、
   巨大な輪郭文字（-webkit-text-stroke）、モバイルで流れの軸だけ傾ける組み方。

   **取っていない**: あちらの青 #013AFF（先方の識別色。こちらは自社の --field）、
   **制作サンプルのスクリーンショット12種**（先方の実績。スイミルは実績ゼロなので
   実在サイトに見える画像は入れない。抽象ワイヤーフレームを front.js が描く）、
   あちらのコピー、キャラクターのバッジ。

   **旧ヒーロー（bit-rise 寄せの図形＋ロゴ抜き）は撤去した。**
   .hero-shapes / .hero-mark / .hero-rail / .hero-chip と front.js の heroShapes() が該当。
   ============================================================ */
/* ============================================================
   ファーストビュー＝動画（2026-08-31 オーナー指示
   「これを FV いっぱいに表示したい」／assets/video/hero-suimil-15s-hq.mp4）
   **同日の追加指示で «画面全体ってよりは、ちょっとだけ小さく»。**
   いっぱいに広げるのはやめ、四辺に白い余白を残す（下の .hero-video）。

   **これ以前のヒーローは全部この1枚の映像に置き換わった。**
   撤去したもの（front-page.php の DOM ごと消してある。CSS も残していない）:
     .hero-fx    … 等高線の canvas。不透明な映像の下では1画素も見えない
     .hero-copy / .hero-foot / .hero-en … 縦書きの見出しと英字。
                    **映像に文字が焼き込まれているので重ねられない。**
     .hero-badge … もっと前に撤去済み
   残したもの:
     .hero-scroll … 左下の SCROLL。映像の下端は無地なので当たらない
     .hero-fish   … 黒い魚。**ページ全体を泳ぐ position:fixed の部品**なので
                    ここでは消さず、«ヒーローが見えている間だけ» 隠す（下を見よ）

   **地は白。**（2026-08-31 オーナー指示「FVの背景は白にしよう」）
   映像が読めるまでの間と、映像のまわりの «余白» がこの色になる。
   経緯: 赤 → 白（いま）。**赤（--field-hi）には戻さないこと。**
   戻すなら SERVICE の地も一緒に動かすこと（白 → 白／赤 → 赤 で切れ目が消える）。
   ============================================================ */
.hero{position:relative;min-height:100svh;overflow:hidden;
  background:var(--paper);color:var(--ink)}
@supports not (min-height:100svh){.hero{min-height:100vh}}

/* ============================================================
   映像は **画面いっぱいではなく、少しだけ内側**（2026-08-31 オーナー指示
   「画面全体ってよりは、ちょっとだけ小さく」）。

   inset:0 をやめて四辺から引く。空いたぶんは .hero の白が見える。

   **上を広げてヘッダーを白の上へ逃がす案は採らない。**
   FV のナビは同じ日に «ガラス» にしたところで、裏に映像が無いと
   ガラスである意味が無くなる。ヘッダーは映像の上に浮かせたまま。

   **下だけ深いのは SCROLL の置き場。** 左下の SCROLL は映像の外に出す。
   中に入れると、白い場面のときに墨の文字が消える（ナビと同じ問題だが、
   あちらはガラスの板で受けている。こちらに板を足すと «FV に部品が増える»）。

   **角丸と落ち影を外さないこと。**
   映像には «白い場面» が何度も来る（実測で15秒に3回）。白い地の上に
   白い場面が来ると、そこだけ **映像の縁が消えて余白と一体化する。**
   角丸で «板» だと分からせ、ごく薄い落ち影で縁を残している。
   影は濃くしないこと。濃いと «カード» になって FV の軽さが消える。
   ============================================================ */
.hero-video{position:absolute;z-index:1;
  top:clamp(14px,1.7vw,28px);left:clamp(14px,1.7vw,28px);right:clamp(14px,1.7vw,28px);
  bottom:clamp(52px,4.6vw,68px);
  pointer-events:none;overflow:hidden;
  border-radius:clamp(10px,1.1vw,18px);
  background:var(--paper);
  box-shadow:0 18px 60px -34px rgba(20,23,26,.45),
             0 2px 10px -6px rgba(20,23,26,.16)}
/* **object-fit は cover 固定。切れ方は «器の形» で変える。**（2026-08-31）
   映像は 2560x1440 ＝ 16:9（前は 1344x768 ＝ 1.75:1）。
     横長（3:2 より横長）… 器は画面いっぱい（inset:0）。上下がわずかに切れる
     それ以外（縦画面など）… **器の側を aspect-ratio:16/9 の帯にする**
       （下のメディアクエリ）。器と映像の比が同じなので cover でも1画素も切れない。
   **縦画面で器を画面いっぱいのまま cover にしてはいけない。**
   390x844 だと倍率が 3 倍近くになり、**焼き込みの
   «WEB素材の撮影から〜» や «挑戦する者の価値を届ける。» が左右とも画面外へ出る**
   （あの行は映像の幅いっぱいに置かれている）。
   **width/height ではなく aspect-ratio で分けること。** 幅で分けると
   «横長で背の低いノート画面» と «縦長のタブレット» が同じ側に入る。 */
.hero-video__el{width:100%;height:100%;object-fit:cover;object-position:center;
  display:block;background:var(--paper)}

/* **ヒーローの h1 は横画面では出さない。**（2026-08-31）
   映像が全面を覆っていて、焼き込みの文字と必ずぶつかるため。
   ただし **DOM からは消さない**（h1 が無いページになる）。
   縦画面では映像の下の赤い面に出る（すぐ下のメディアクエリ）。
   **この既定はメディアクエリより «前» に置くこと。**
   メディアクエリは詳細度を上げないので、後ろに置くと縦画面でも隠れたままになる
   （2026-08-31 に実際にそうなった）。 */
.hero-h1{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   縦画面（3:2 より縦長 ＝ スマホ・タブレット縦持ち）
   **cover にしてはいけない。**（2026-08-31 実測）
   390x844 で cover にすると倍率が 2.9 倍になり、焼き込みの
   «挑戦する者の価値を届ける。» が左右とも画面外へ出る（画面に残るのは幅の約25%）。

   かといって 100svh の真ん中に contain で置くと、**映像が画面の3割しか占めず、
   上下に赤い空白が 300px ずつ残る**（実測。最初に組んだ版がこれで、
   «FVいっぱい» になっていなかった）。

   そこで縦画面だけ組み方を変える:
     ・.hero を縦のフレックスにして、映像を **画面の左右いっぱい**（--gut を食い破る）
     ・空いた赤い面に **見出しを出す**。映像の外なので焼き込みの文字とぶつからない
   横画面では見出しは出さない（映像が全面を覆うので置き場所が無い）。
   ============================================================ */
@media (max-aspect-ratio:3/2){
  .hero{display:flex;flex-direction:column;justify-content:center;
    gap:clamp(26px,5.5vh,54px);padding:96px var(--gut) 88px}
  /* **器を position:relative に戻すこと。** absolute のままだと
     フレックスの子として数えられず、見出しが画面の中央に来る。
     **2026-08-31 から左右も内側に収める。** それまでは
     width:calc(100% + var(--gut)*2) で --gut を食い破って画面幅いっぱいにしていたが、
     «ちょっとだけ小さく» の指示は縦画面でも同じなので、左右を余白に揃えた。 */
  .hero-video{position:relative;inset:auto;flex:none;
    width:100%;margin-left:0;
    aspect-ratio:16/9}
  .hero-video__el{object-fit:cover}
  /* **書体・行間・字送りはここで指定しないこと。** 下の «.hero-h1,.brs-lead» が
     後ろにあって勝つ（メディアクエリは詳細度を上げない）。ここは «出す» のと
     級数・色・寄せだけにしてある。 */
  .hero-h1{position:static;width:auto;height:auto;margin:0;padding:0;
    overflow:visible;clip:auto;clip-path:none;white-space:normal;
    font-size:clamp(24px,6.6vw,38px);color:var(--ink);text-align:center}
}

/* **魚は映像の上に出さない。**（2026-08-31）
   .hero-fish は position:fixed でページ全体を泳ぐ（.hero の子ではない）ので、
   何もしないと完成した映像の上を黒い魚が横切る＝落書きになる。
   html.hero-on は front.js の heroVideo() が IntersectionObserver で付け外しする。
   **display:none にしないこと。** GSAP が幅を実測しているので、
   消えている間に測ると 0 になって、戻ったとき位置が飛ぶ。 */
/* **!important が要る。**（2026-08-31 実測）
   front.js の heroFish() が **毎フレーム inline で opacity を書いている**
   （画面の端で薄くするため）。素の CSS 宣言では inline に負けて、
   実測で opacity:0.94 のまま映像の上を泳いでいた。
   作者スタイルの !important は «important でない inline» に勝つので、これで止まる。
   **display:none にしないこと。** GSAP が幅を実測しているので、
   消えている間に測ると 0 になり、戻ったとき位置が飛ぶ。 */
html.hero-on .hero-fish{opacity:0!important}
.hero-fish{transition:opacity .45s var(--e)}

/* **最上部のヘッダーは映像の «白い帯» に乗ると読めなくなる。**（2026-08-31）
   ヒーローが単色の赤だった頃は白抜きだけで 4.69:1 あったが、
   映像には白地に黒文字の帯が何度も入る。そこでは白抜きが 1:1 近くまで落ちる。

   **最初はここに «上端のスクリム1枚» を敷いていた。**（同日・撤去）
   高さ 210px の黒のグラデーションで、ヘッダーの周りだけでなく
   **映像の上端 210px 全部**を薄暗くしていた。
   2026-08-31 オーナー指示「FV上部のナビは FV の時はガラスにして」で、
   ナビ自身がガラスの板を持つようになった＝板が読みやすさを受けるので、
   映像を汚すスクリムは要らなくなった。**backdrop-filter が無い環境にだけ残してある**
   （このファイル末尾の «FV のナビをガラスに» ブロックの @supports）。
   文字影は残す（板があっても白い場面では効く）。 */
body:has(.hero) .hd:not(.stuck){isolation:isolate}
body:has(.hero) .hd:not(.stuck) .nav a,
body:has(.hero) .hd:not(.stuck) .hd-cta{
  text-shadow:0 1px 2px rgba(20,23,26,.55),0 0 8px rgba(20,23,26,.35)}
body:has(.hero) .hd:not(.stuck) .logo{
  filter:brightness(0) invert(1) drop-shadow(0 1px 3px rgba(20,23,26,.5))}

/* **動きを減らす設定のときは止める。**（2026-08-31）
   自動再生の15秒ループは «動き» そのものなので、止めてポスター画像を見せる。
   一時停止は front.js の heroVideo() が行う（CSS では止められない）。 */

/* --- 下部 --- */
/* **SCROLL は左下。**（2026-08-08 オーナー指示「ヒーロー右下のスクロールボタンは左下に」）
   **色は墨。**（2026-08-31 FV の地を白にしたため）
   白のままだと、映像の外に出たこの文字が白地に白で完全に消える。
   置き場所は映像の «下» の余白（bottom:34px は映像の下端より下）。 */
.hero-scroll{position:absolute;left:var(--gut);bottom:clamp(17px,1.5vw,24px);z-index:6;
  display:flex;align-items:center;gap:10px;
  font-family:var(--en);font-size:10.5px;letter-spacing:.22em;color:var(--ink-3)}
.hero-scroll i{display:block;width:46px;height:1px;background:rgba(20,23,26,.22);position:relative;overflow:hidden}
.hero-scroll i::after{content:"";position:absolute;left:0;top:0;width:18px;height:1px;background:var(--ink);
  animation:scrollRun 2.4s var(--e) infinite}
@keyframes scrollRun{0%{transform:translateX(-20px)}55%{transform:translateX(46px)}100%{transform:translateX(46px)}}

/* --- 登場 --- */
/* **合図は html.loaded**（開幕が終わったときに front.js が付ける）。 */
/* **映像はフェードインさせないこと。**（2026-08-31）
   再生は幕が明けた瞬間（html.loaded）に0秒から始まる（front.js の heroVideo）。
   ここで 0.8秒かけて薄く出すと、**その 0.8秒ぶんの «頭» が薄いまま流れて見えない。**
   幕が上下に割れること自体が «出現» なので、映像は最初から不透明で置く。 */
.js .hero-scroll{opacity:0;transition:opacity .4s .95s}
.js.loaded .hero-scroll{opacity:1}

/* **画面に出さないが読み上げには残す。**（スキップリンクなど汎用）
   display:none や visibility:hidden にすると支援技術からも消える。
   **h1 には使わないこと。** あちらは縦画面でだけ «見える» ので、
   !important 付きのこれを当てるとメディアクエリで解除できなくなる。 */
.u-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* --- ヘッダーの白抜き（ヒーローが常に濃い青に戻ったので復活） --- */
/* 2026-08-03 に「ヒーローが紙地になったので」廃止していたが、
   2026-08-05 にヒーローがベタ塗りへ戻ったため再導入。
   **.stuck のときは紙地に戻すこと。** 以降のセクションは明るい面なので白抜きだと消える。
   **ヒーローのあるページ（トップ）だけに限ること。**（2026-08-08 修正）
   制作フロー・お知らせ・会社情報は最上部から紙地なので、白抜きのままだと
   ロゴもナビも白地に白で完全に消える（オーナー指摘「ヘッダーが真っ白で見えなくなる」）。
   下層ページは .hd に .stuck が付く前でも紙地の見た目でよい。 */
body:has(.hero) .hd:not(.stuck),
body:has(.pghead) .hd:not(.stuck){background:transparent}
/* **ヒーローの上は白抜きに戻す。**（2026-08-30 地を赤に戻したため）
   2026-08-22 に紙地へ変えたときは «紙の上の白» で読めなくなるので墨にしていた。
   **地の色と必ずセットで直すこと。** 片方だけ直すとどちらかが消える。 */
body:has(.hero) .hd:not(.stuck) .nav a,
body:has(.hero) .hd:not(.stuck) .hd-cta,
body:has(.pghead) .hd:not(.stuck) .nav a,
body:has(.pghead) .hd:not(.stuck) .hd-cta{color:#fff}
body:has(.hero) .hd:not(.stuck) .nav a::after,
body:has(.pghead) .hd:not(.stuck) .nav a::after{background:#fff}
body:has(.hero) .hd:not(.stuck) .hd-cta,
body:has(.pghead) .hd:not(.stuck) .hd-cta{border-color:#fff}
body:has(.hero) .hd:not(.stuck) .hd-cta:hover{background:#fff;color:var(--field);border-color:#fff}
body:has(.hero) .hd:not(.stuck) .burger span,
body:has(.pghead) .hd:not(.stuck) .burger span{background:#fff}
/* ロゴは黒1色のPNGなので、赤地のときだけ反転で白にする */
body:has(.hero) .hd:not(.stuck) .logo,
body:has(.pghead) .hd:not(.stuck) .logo{filter:brightness(0) invert(1)}

/* **:has() が無いブラウザ向けの保険。** 下層ページは最初から紙地のヘッダーにしておく。
   （:has() は Safari 15.4 / Chrome 105 以降。未対応だと上の限定が効かず全ページ白抜きになる） */
@supports not selector(body:has(.hero)) {
  .hd{background:var(--paper)}
  .hd .nav a,.hd .hd-cta{color:var(--ink)}
  .hd .logo{filter:none}
}

@media (prefers-reduced-motion:reduce){
  .hero-scroll i::after{animation:none}
}

/* （撤去）@media 1080px/900px のヒーロー用の指定。2026-08-31。
   .hero-badge / .hero-copy / .hero-foot は DOM ごと無くなった。
   .hero-h1 は残っていて、縦横比のメディアクエリ（上）で出し分けている。
   **狭い画面で SCROLL を消していた1行も外してある。**
   縦画面でも映像の下に赤い面が残るので、下端に置き場所がある。 */

/* ============================================================
   セクションの頭（番号 ＋ 罫線 ＋ 和文主役）
   ============================================================ */
.sec{position:relative;padding:var(--sec-y) 0;overflow-x:clip}
/* 同じ紙地のセクションが続くときは、上下の余白が二重に効いて間延びする */
.sec+.sec:not(.issues):not(.faq-sec):not(.operation){padding-top:calc(var(--sec-y)*.62)}
.sh{margin-bottom:clamp(34px,4.6vw,62px)}
.sh-meta{display:flex;align-items:center;gap:14px;margin-bottom:clamp(12px,1.6vw,18px)}
/* **13px の小さな番号は --brand-dk を使うこと。**
   --brand(#D02620) は紙地では 4.68:1 で足りるが、少し暗い面（--paper-2 / --surface）に
   乗ると 4.28:1 まで落ちて AA 未達になる（2026-08-05 実測で7か所該当）。 */
.sh-no{font-family:var(--en);font-size:13px;font-weight:700;color:var(--brand-dk);letter-spacing:.04em}
.sh-rule{flex:none;width:clamp(28px,5vw,64px);height:1.5px;background:var(--brand)}
.sh-en{font-family:var(--en);font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.sh-jp{font-size:clamp(23px,3.8vw,44px);font-weight:900;line-height:1.42;letter-spacing:-.04em;max-width:22em}
.sh-lead{margin-top:clamp(14px,1.9vw,22px);max-width:40em;font-size:14.5px;line-height:2.05;color:var(--ink-2)}

/* ============================================================
   巨大英字の背景 / 罫線の枠 / 縦組み
   （newvillage.jp から取った原理。色や書体は持ってきていない）
   ============================================================ */

/* 見出しの後ろに敷く巨大な英字。読ませるものではなく面を作るためのもの。
   端で切れるくらい大きくするのが要で、収めると単なる装飾に見える。
   はみ出す前提なので、**親のセクションに overflow-x:clip が必須**。
   無いとモバイルで横スクロールが出る（実際に30px出た）。
   overflow:hidden ではなく clip にしているのは、sticky を壊さないため。 */
.sh{position:relative}
.sh-wm{
  position:absolute;left:-.06em;top:-.42em;z-index:0;
  font-family:var(--en);font-weight:700;
  font-size:clamp(72px,15vw,210px);line-height:.8;letter-spacing:-.045em;
  text-transform:uppercase;white-space:nowrap;pointer-events:none;user-select:none;
  color:rgba(20,23,26,.055);
}
.sh-meta,.sh-jp,.sh-lead{position:relative;z-index:1}
/* 色面の上では白を薄く敷く */
.issues .sh-wm,.operation .sh-wm,.final .sh-wm{color:rgba(255,255,255,.1)}

/* 罫線の枠。明るい面のセクションを囲って締める */
.framed>.wrap{position:relative}
.framed>.wrap::before{
  content:"";position:absolute;
  left:calc(var(--gut) - clamp(12px,2vw,26px));
  right:calc(var(--gut) - clamp(12px,2vw,26px));
  top:calc(var(--sec-y) * -0.42);bottom:calc(var(--sec-y) * -0.42);
  border:1.5px solid var(--brand);pointer-events:none;z-index:0;
}
@media (max-width:900px){
  .framed>.wrap::before{left:6px;right:6px}
}

/* 縦組み。1〜2か所だけ差す。増やすと読みにくくなる */
.vtxt{
  writing-mode:vertical-rl;text-orientation:upright;
  font-feature-settings:"vpal";letter-spacing:.06em;line-height:1.9;
}

/* ============================================================
   ABOUT
   **ヒーローと同じ赤のまま続ける**（2026-08-05 オーナー指示
   「背景は切り替えず、繋がってる感じ」）。ヒーロー → ABOUT → ISSUES が
   ひと続きの赤い面になり、SERVICE で初めて紙地へ切り替わる。
   **区切り線や上下の余白で仕切らないこと。** 切れ目を作ると「続いている」感じが消える。
   文字の扱いは .issues と揃えてある（紙色の白抜き）。
   ============================================================ */
.about{background:var(--field);color:var(--paper)}
/* ヒーローの下端と地続きにするため、**上の余白を詰める**。
   通常の --sec-y のままだと、ヒーローとの間に赤い空白が広く空いて別の面に見える。 */
.about{padding-top:clamp(56px,6vw,92px)}
.about .sh-no{color:var(--paper)}
.about .sh-rule{background:var(--paper)}
.about .sh-en{color:var(--paper)}
.about .sh-lead{color:var(--paper)}
.about .sh-wm{color:rgba(255,255,255,.1)}
/* 罫線の枠は主色（赤）なので赤地では消える。紙色の細線に置き換える */
.about.framed>.wrap::before{border-color:rgba(255,255,255,.3)}
.about-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(26px,4.4vw,68px);align-items:start}
/* **赤地の上では不透明度を落とさないこと。** .92 でも 4.15:1 で AA 未達だった（実測）。
   紙色そのままなら 8.02:1。 */
.about-tx p{font-size:15.5px;line-height:2.2;color:var(--paper);margin-bottom:1.5em}
.about-tx p:last-child{margin-bottom:0}
.about-tx b{font-weight:700;color:var(--paper)}
.about-side{border-top:1.5px solid var(--paper)}
.fact{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.22)}
.fact .k{font-size:12px;font-weight:700;color:var(--paper);opacity:.75;letter-spacing:.06em;line-height:1.9}
.fact .v{font-size:13.5px;line-height:1.9}

/* ============================================================
   NEWS （2026-08-05 新設）
   トップに出す唯一の「管理画面から更新できる中身」。
   **投稿が0件のときは PHP 側で区画ごと出していない**ので、空リストの見た目は考えなくてよい。
   ============================================================ */
.newslist{border-top:1px solid var(--line)}
.newsitem{border-bottom:1px solid var(--line)}
.newsitem a{display:grid;grid-template-columns:7.5em 1fr auto;align-items:center;gap:clamp(12px,2vw,28px);
  padding:22px 4px;transition:background .3s var(--e),padding .3s var(--e)}
.newsitem a:hover{background:var(--paper-2);padding-left:14px;padding-right:14px}
.nw-date{font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--brand-dk)}
.nw-title{font-size:15.5px;font-weight:700;line-height:1.8}
.nw-ar{font-style:normal;color:var(--brand-dk);transition:transform .35s var(--e)}
.newsitem a:hover .nw-ar{transform:translateX(5px)}
.news-more{margin-top:clamp(28px,4vw,48px)}
@media (max-width:700px){
  /* 日付とタイトルを2段に。7.5em の桁を保つと狭い画面でタイトルが潰れる */
  .newsitem a{grid-template-columns:1fr auto;gap:6px 12px;padding:18px 4px}
  .nw-date{grid-column:1/-1}
}

/* ============================================================
   ISSUES
   ============================================================ */
.issues{background:var(--field);color:var(--paper)}
.issues .sh-no{color:var(--paper)}
.issues .sh-rule{background:var(--paper)}
.issues .sh-en{color:rgba(255,255,255,1)}
.issues .sh-lead{color:rgba(255,255,255,1)}
.issues .issue{border-top-color:rgba(255,255,255,.28)}
.issues .issue .n{color:var(--paper);opacity:.7}
.issues .issue p{color:rgba(255,255,255,1)}
.issue-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,60px)}
.issue{display:flex;gap:clamp(14px,2vw,22px);align-items:flex-start;padding:clamp(20px,2.6vw,30px) 0;
  border-top:1px solid var(--line)}
.issue .n{flex:none;font-family:var(--en);font-size:13px;font-weight:700;color:var(--brand);
  line-height:2.4;letter-spacing:.04em}
.issue h3{font-size:clamp(15.5px,1.8vw,19px);font-weight:900;letter-spacing:-.025em;line-height:1.7;margin-bottom:6px}
.issue p{font-size:14px;line-height:1.95;color:var(--ink-2)}

/* ============================================================
   SERVICE
   ============================================================ */
/* --- サービス（2026-08-05 depart-inc.com トップの Service を実測して作り直し） ---
   **あちらは箱を使わない。区画ぜんぶが1色のベタ塗り**で、その上に
   「左＝sticky のイラスト（510px、top:16px）／右＝行が縦に並ぶだけ」を置いている。
   行の区切りは 1px dashed の明るい線、丸矢印は 40px の白丸。
   英字14px/w400、和文24px/w600/letter-spacing1.2px/line-height32.4px。
   **色はこちらの赤**（あちらの青 #0B3EBF・線 #4875E9 は取っていない）。 */
.sec.field{background:var(--field);color:var(--paper)}
.sec.field .sh-no,.sec.field .sh-en,.sec.field .sh-lead{color:var(--paper)}
.sec.field .sh-rule{background:var(--paper)}
.sec.field .sh-wm{color:rgba(255,255,255,.1)}

/* **align-items は stretch のまま（指定しない）。** start にすると左列の高さが
   イラストぶん（510px）しか無くなり、sticky に動く余地が生まれず流れていく。
   実測で左列510px／右列1396px になっていた。 */
/* SERVICE の見出し。**地が赤なので紙色**（他セクションは紙地に赤文字）。 */
.sec.service .brs-head{margin-bottom:clamp(30px,4.5vw,64px)}
.sec.service .brs-en{color:var(--paper)}
.sec.service .brs-ja{color:var(--paper)}
.sec.service .brs-paren{color:rgba(255,255,255,.7)}
.svcx{display:grid;grid-template-columns:minmax(0,510px) minmax(0,1fr);
  gap:clamp(24px,4vw,60px)}

/* 左のイラスト。**器ではなくリストを sticky にする**（器を sticky にすると
   高さが内容ぶんしか無く留まらない）。13枚を重ねて1枚だけ見せるのはあちらと同じ。 */
.svcx-figs{position:relative}
.svcx-figlist{position:sticky;top:calc(74px + 16px);aspect-ratio:1/1;
  display:grid;place-items:center}
.svcx-img{grid-area:1/1;width:72%;color:var(--paper);
  opacity:0;transform:scale(.96);transition:opacity .18s linear,transform .18s var(--e)}
.svcx-img.is-on{opacity:.95;transform:none;transition:opacity .34s linear .16s,transform .42s var(--e) .16s}
.svcx-img svg{width:100%;height:auto}
/* 図の中では線を引く演出を切る（祖先に .in が付かないので隠れたままになる） */
.svcx-img .dw{stroke-dasharray:none!important;stroke-dashoffset:0!important}

/* 右の行。**箱にしないこと。** 地のベタ塗りの上に、破線の区切りで並べるだけ。 */
.svcx-list{border-top:1px dashed rgba(255,255,255,.42)}
.svcx-item{border-bottom:1px dashed rgba(255,255,255,.42)}
.svcx-link{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 40px;
  column-gap:clamp(16px,2.4vw,32px);align-items:center;
  padding:clamp(22px,2.6vw,34px) 0;transition:padding-left .4s var(--e)}
.svcx-link:hover{padding-left:10px}
.svcx-en{grid-column:1;font-family:var(--en);font-size:14px;font-weight:400;
  letter-spacing:.04em;color:var(--paper);opacity:.85}
.svcx-jp{grid-column:1;margin-top:4px;font-size:clamp(20px,1.8vw,24px);font-weight:600;
  letter-spacing:.05em;line-height:1.35;color:var(--paper)}
.svcx-p{grid-column:1;margin-top:14px;font-size:15px;line-height:1.9;color:var(--paper);opacity:.92}
/* 丸矢印は行の右端で縦中央 */
.svcx-ar{grid-column:2;grid-row:1/-1;align-self:center;
  width:40px;height:40px;border-radius:50%;background:var(--paper);color:var(--field);
  display:grid;place-items:center;transition:transform .3s var(--e)}
.svcx-ar svg{width:20px;height:20px}
.svcx-link:hover .svcx-ar{transform:translateX(4px)}

@media (max-width:900px){
  /* 1列に。イラストは sticky をやめて上に置く */
  .svcx{grid-template-columns:1fr;gap:20px}
  .svcx-figlist{position:static;max-width:280px;margin:0 auto}
  .svcx-link{grid-template-columns:minmax(0,1fr) 36px}
  .svcx-ar{width:36px;height:36px}
}

@media (max-width:960px){
  /* 1列に。メニューは横並びの帯にして sticky をやめる */
  .svc-wrap{grid-template-columns:1fr;gap:22px}
  .svc-menu-in{position:static}
  .svc-menu-list{display:flex;flex-wrap:wrap;gap:0 18px}
  .svc-menu-list li+li{border-top:0}
  .svc-menu-list a{padding:10px 0}
}
@media (max-width:700px){
  /* 色パネルを下に。**高さの下限を外すこと**（縦に積むと300pxの下限が効いて間延びする） */
  .svc{grid-template-columns:1fr;min-height:0}
  .svc-fig{min-height:180px}
  .svc-p{padding-top:18px}
}
/* 線画は front.js が実長を測って引く */
.js .dw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.js .in .dw{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--e);transition-delay:calc(var(--i,0)*.12s)}

/* ============================================================
   OPERATION（ここだけ深緑。色面はページ全体でこの1か所に絞る）
   ============================================================ */
.operation{background:var(--field);color:var(--paper)}
.operation .sh-no,.operation .sh-rule{color:var(--paper);background:var(--paper)}
.operation .sh-no{background:none}
.operation .sh-en{color:rgba(255,255,255,1)}
.op-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4.4vw,66px);align-items:start}
.op-copy>p{font-size:15px;line-height:2.15;color:rgba(255,255,255,1);margin-bottom:20px}
.op-copy>p b{font-weight:700;color:var(--paper)}
.op-copy>p.op-q{font-size:clamp(19px,2.9vw,34px);font-weight:900;letter-spacing:-.035em;line-height:1.5;
  color:var(--paper);margin-bottom:22px}
.op-copy .op-warn{font-size:13.5px;line-height:2;color:rgba(255,255,255,1);
  padding:18px 20px;border:1px solid rgba(255,255,255,.28);border-radius:2px;margin-bottom:clamp(24px,3vw,34px)}
.op-kit li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 0;
  border-top:1px solid rgba(255,255,255,.24)}
.op-kit .n{font-family:var(--en);font-size:12.5px;font-weight:700;color:var(--paper);line-height:1.9;opacity:.72}
.op-kit b{display:block;font-size:14.5px;font-weight:700;line-height:1.7;margin-bottom:4px}
.op-kit span{font-size:13px;line-height:1.9;color:rgba(255,255,255,1)}
.op-kit .plus .n{opacity:1}

/* ============================================================
   PROMISE
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(16px,2.4vw,32px)}
.stat{padding:clamp(20px,2.4vw,28px) 0;border-top:1.5px solid var(--ink)}
.stat .big{display:flex;align-items:baseline;font-family:var(--en);font-weight:700;
  font-size:clamp(38px,5.2vw,66px);line-height:1;color:var(--brand);margin-bottom:12px;letter-spacing:-.03em}
.stat .pre{font-family:var(--jp);font-size:.3em;font-weight:700;color:var(--ink);margin-right:3px}
.stat .u{font-family:var(--jp);font-size:.24em;font-weight:700;color:var(--ink);margin-left:3px}
.stat .lb{font-size:13.5px;font-weight:700;line-height:1.7;margin-bottom:8px}
.stat .ds{font-size:12.5px;line-height:1.85;color:var(--ink-3)}
.promise .note{margin-top:clamp(24px,3vw,38px);max-width:56em;font-size:13.5px;line-height:2.05;color:var(--ink-3);
  padding-left:18px;border-left:1.5px solid var(--line)}

/* ============================================================
   FLOW（線でつなぐ）
   ============================================================ */
.steps{position:relative}
.step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,3vw,36px);
  padding:clamp(18px,2.6vw,28px) 0}
/* 節をつなぐ縦線。ヒーローの線と同じ「途切れない」の意味を持たせている */
.step::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:1px;background:var(--line)}
.step:first-child::before{top:32px}
.step:last-child::before{bottom:auto;height:32px}
/* 番号は丸の中に入れて見せる。以前 font-size:0 でドット化したら数字ごと消えた */
.step .n{position:relative;z-index:1;width:31px;height:31px;border-radius:50%;
  background:var(--paper);border:1.5px solid var(--brand);margin-top:10px;
  display:grid;place-items:center;
  font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--brand)}
.step h3{font-size:clamp(16px,1.9vw,21px);font-weight:900;letter-spacing:-.025em;line-height:1.6;margin-bottom:8px}
.step p{font-size:14px;line-height:2;color:var(--ink-2);max-width:44em}

/* ============================================================
   FAQ
   ============================================================ */
.faq-sec{background:var(--paper-2)}
.service{background:var(--paper-2)}
.qa{border-top:1px solid var(--line)}
.qa:last-child{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:flex-start;gap:16px;cursor:pointer;list-style:none;
  padding:clamp(18px,2.2vw,24px) 0}
.qa summary::-webkit-details-marker{display:none}
.qa .qt{flex:1;font-size:15px;font-weight:700;line-height:1.8;letter-spacing:-.015em}
.qa summary:hover .qt{color:var(--brand)}
.qa .pl{position:relative;flex:none;width:18px;height:18px;margin-top:7px}
.qa .pl::before,.qa .pl::after{content:"";position:absolute;left:50%;top:50%;background:var(--brand);
  transition:transform .45s var(--e)}
.qa .pl::before{width:16px;height:1.5px;transform:translate(-50%,-50%)}
.qa .pl::after{width:1.5px;height:16px;transform:translate(-50%,-50%)}
.qa[open] .pl::after{transform:translate(-50%,-50%) rotate(90deg)}
.qa .a{overflow:hidden}
.qa .a p{padding:0 34px clamp(19px,2.3vw,25px) 0;font-size:14px;line-height:2.05;color:var(--ink-2);max-width:48em}

/* ============================================================
   COMPANY
   ============================================================ */
.company{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(26px,4vw,60px);align-items:start}
.fd-top{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.founder .av{flex:none;width:62px;height:62px;border:1.5px solid var(--brand);color:var(--brand);
  display:grid;place-items:center;font-size:24px;font-weight:900}
.founder .role{display:block;font-family:var(--en);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.founder h3{font-size:clamp(20px,2.4vw,27px);font-weight:900;letter-spacing:-.03em}
.founder>p{font-size:14.5px;line-height:2.1;color:var(--ink-2)}
.info dl{display:grid;grid-template-columns:auto 1fr;border-top:1.5px solid var(--ink)}
.info dt{padding:15px 20px 15px 0;border-bottom:1px solid var(--line-2);font-size:12.5px;font-weight:700;
  color:var(--brand);white-space:nowrap}
.info dd{padding:15px 0;border-bottom:1px solid var(--line-2);font-size:14px;line-height:1.95;color:var(--ink-2)}
.info dd a{color:var(--brand);border-bottom:1.5px solid rgba(206,36,21,.35)}
.info dd a:hover{border-bottom-color:var(--brand)}


/* ============================================================
   フッター / モバイル固定CTA
   ============================================================ */
.ft{background:var(--ink);color:var(--paper);padding:clamp(26px,3.2vw,42px) 0}
.ft-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.ft-brand{display:flex;flex-direction:column;gap:12px}
.ft-concept{display:flex;flex-direction:column;gap:2px}
.ft-concept .en{font-family:var(--en);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--paper)}
.ft-concept .jp{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.72)}
/* 2026-08-11 フッターは暗い地なので**反転版の画像**に差し替え。
   filter:brightness(0) invert(1) では作れない。黒も白も一度黒に潰すので、
   二色になったシンボルが «白い塊» になる（実際にそうなった）。
   反転版は tools/make-favicon.py --lockup が同時に書き出す。 */
.ft .logo{background-image:url("../images/logo-lockup-rev.png");filter:none;opacity:.9}
.ft small{font-family:var(--en);font-size:12px;color:rgba(255,255,255,1)}

/* （削除済み）スマホ下部の固定バー .mcta。2026-08-07 に右下の円形CTA（.fcta）へ置き換え。 */

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1080px){
  .about-grid,.op-grid,.company{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .nav,.hd-cta{display:none}
  .burger{display:block}
  /* **SCROLL を消していた1行は 2026-08-31 に外した。**
     FV が動画になり、縦画面では映像の下に赤い面が残るので置き場所ができた。
     以前は見出しとボタンが下端まで埋めていたので重なっていた。 */
  .issue-list{grid-template-columns:1fr}

  .info dl{grid-template-columns:1fr}
  .info dt{padding-bottom:0;border-bottom:0}
  .info dd{padding-top:6px}
  .ft-in{flex-direction:column;align-items:flex-start}
  .hd-in{padding-left:var(--gut)}
  .wrap{padding-left:var(--gut)}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;gap:2px}
}

/* JSが無効・失敗したときも全部読めるようにする */
html:not(.js) .rv,html:not(.js) .msk>em{opacity:1!important;transform:none!important}
html:not(.js) .dw{stroke-dashoffset:0!important}

/* ヒーローの縦組みの定義は HERO の節（上）にまとめてある。
   ここに古い定義が残っていて、後勝ちで高さを210pxに縛り、
   文字が複数列に折れて画面外（left:-119px）へ出ていた。二重定義に注意。 */

/* ============================================================
   2026-07-30 モーションを newvillage.jp の性格に寄せた分
   （取ったのは「性格」であって、キーフレームの数値は自前で決めている）
   ============================================================ */


/* ---- 開幕 ----
   四角の列 → 文章になる。原理は ryden.co.jp から抜いた
   （詳細は front-page.php の開幕コメント。見た目は寄せていない）。

   色は**朱地に紙色の文字**。2色だけ。
   ・紙地に朱 → 生地がぼやける、と却下（2026-07-30 オーナー指摘）
   ・墨の四角 → 黒すぎる、と却下（同）

   **«ヒーローも朱なので地続きに見える» という理由は 2026-08-31 に消えた**
   （FV の地が白になったため）。幕は赤のまま残してある。
   割れると赤 → 白の «開く» 動きになる。地続きではなくなったが、
   幕が割れたことがはっきり分かるぶん、いまはこちらのほうが強い。
   **白い幕にはしないこと。** 白い FV との差が無くなり、開いたことが伝わらない。

   **動きは front.js の GSAP が全部持っている。ここには transition / transform を書かないこと。**
   同じプロパティをCSSとGSAPで取り合うと、書くたびに補間がやり直されて動かなくなる。

   注意点（実際に踏んだもの）:
   - **.load 自体に背景を持たせないこと。** 幕が割れても色が残って中身が出なくなる。
   - 文字は幕（.lc-curtain）より前に置く。幕は最初から画面を覆っていて、
     最後に上下へ割れるだけ。円形に広げる絞りは廃止した（色が増えるため）。
   - .blk に aspect-ratio を使わないこと。文字を隠しきれずに一瞬見えてしまう。 */
.load{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden}

/* 幕。最初から画面を覆っている。最後に上下へ割れる */
.lc-curtain{position:absolute;inset:0;z-index:1}
.lc-curtain .bg{position:absolute;left:0;width:100%;height:50.5%;background:var(--field)}
.lc-curtain .bg.t{top:0}
.lc-curtain .bg.b{bottom:0}

/* 斜めから当たる光。中心対称にしないことで平面に奥行きが出る。
   **白を濃く敷かないこと。** 生地が飛んで色に見えなくなる。 */
.lc-plate{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(115% 85% at 26% 14%,
    rgba(255,255,255,.20),rgba(255,255,255,0) 60%),
    radial-gradient(95% 78% at 90% 100%,
    rgba(96,10,17,.24),rgba(96,10,17,0) 62%)}

/* 生地の粒。**点グリッドは使わないこと。**
   ryden から一番あからさまに持ってきていた部分で、テンプレっぽく見える（オーナー指摘）。
   柄ではなく質感なので、離れると無地に見える。粒は流さない（動かすとフィルムノイズになる）。 */
.lc-grid{position:absolute;inset:0;z-index:3;opacity:.55;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:200px 200px}

.lc-stage{position:absolute;inset:0;z-index:4;display:grid;place-items:center}

/* 細い罫。装飾なので DOM は front.js が作る。
   **太らせないこと。** 1px より太いと途端に安く見える。
   **中央寄せは left:0;right:0;margin:0 auto で。**
   left:50% ＋ 負の margin-left にすると、min() の効き方が幅と margin で食い違って
   罫だけ横にずれる（実際に49pxずれた）。transform は GSAP が使うので空けておく。
   .h   … 塊の上に引く水平罫（案1）
   .v   … 画面を横切る縦の光（案2）
   .mid … 行のあいだで左右に開く罫（案3） */
.lc-hair{position:absolute;background:rgba(255,255,255,.55);pointer-events:none}
.lc-hair.h{left:0;right:0;margin:0 auto;top:calc(50% - min(27vh,250px));
  width:min(30vw,360px);height:1px;transform-origin:50% 50%}
.lc-hair.v{left:50%;top:14%;bottom:14%;width:1px;height:auto;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7) 22%,
    rgba(255,255,255,.7) 78%,rgba(255,255,255,0))}
.lc-hair.mid{left:0;right:0;margin:0 auto;top:50%;
  width:min(46vw,620px);height:1px;transform-origin:50% 50%}

/* 大きさは front.js が実測して合わせる（行ごとに字数が違うため）。
   ここの font-size はその前の当て値。

   **英文と和文は .lc-lock の同じマスに重ねる。**
   grid-area:1/1 で重ねているのは、position:absolute にすると
   transform を使うことになり、GSAP と取り合うため。
   **min-width:0 が要る。** グリッドアイテムの既定は min-content で、
   nowrap の英文が入ると width:100% がそこまで押し戻されて中央からずれる。 */
.lc-lock{display:grid;width:100%;min-width:0;place-items:center}
.lc-word{grid-area:1/1;margin:0;width:100%;min-width:0;text-align:center;white-space:nowrap;
  line-height:1.06;color:var(--paper);transform-origin:50% 50%}
.lc-word.en{font-family:var(--en);font-weight:800;font-size:17vw;letter-spacing:-.035em}
/* --jp-intro は `?jp=…` が付いたときだけ front.js が入れる（書体の見比べ用）。
   既定は現行の --jp のまま。 */
.lc-word.jp{font-family:var(--jp-intro,var(--jp));font-weight:900;font-size:12vw;letter-spacing:.02em}
.lc-word .ln{display:block}
.lc-word .ln-in{display:block}
.lc-word .chw{position:relative;display:inline-block}
.lc-word .chw em{font-style:normal;display:inline-block}

/* ============================================================
   novasell.com から抜いた原理（2026-07-31）。**見た目は寄せていない。**
   あちらはライムグリーン×黒×白／こちらは朱×紙色。
     ・べた塗り・高コントラスト・グラデーションなし
     ・面が単位になって、地ごと反転する

   動きは一本に確定（2026-08-02）。札の寄せ方は「列＋粒」だけ。
   ============================================================ */

/* 画面を割った札。**札1枚ずつが文字を切り取る窓になっている。**

   ここが要。以前は札をただの背景にして、文字は別レイヤーに1枚だけ置いていた。
   すると文字が札に切り取られないので、札の来ていないところにも反対側の文字が出て、
   英文と和文が重なった（オーナー指摘「文字が重なっちゃってる瞬間がある」）。
   いまは札 <i> が overflow:hidden の窓で、中に画面全面ぶんの文字（.tx）を
   自分の位置ぶんずらして入れてある。札が出ている＝その一片だけ文字が見える。

   **札に1pxの縁が要る。** grid の割り切れない端数で隙間が出て細い線が残る。 */
.lc-tiles{position:absolute;inset:0;z-index:0}
/* 位置と大きさは front.js が整数pxで入れる。
   **CSS grid で割らないこと。** 1fr は端数が出て札のあいだに隙間ができる。
   隙間を box-shadow で埋めると、今度は隣の札の文字の上に1pxの線を描いてしまい、
   文字の中に継ぎ目が走る（実際に走った）。累積丸めで整数に敷き詰めれば隙間は出ない。
   **font-style:normal を必ず書くこと。** 札に <i> を使っているので、
   ブラウザ既定の italic が中の文字まで継承されて全部斜体になる（実際になった）。 */
.lc-tiles i{position:absolute;overflow:hidden;font-style:normal;background:var(--paper)}
.lc-tiles i .tx{position:absolute;display:grid;place-items:center}
.lc-tiles.neg i{background:var(--field)}

/* 板は2枚重ねる。
   1枚目 …… 紙色の札 ＋ 青の文字（英文）
   2枚目 .neg … 青の札（--field）＋ 紙色の文字（和文）
   2枚目が寄せたところだけ地が青へ戻り、英文が消えて和文が出る。
   **和文を文字で動かす案は作ったうえで外した**（2026-08-02 オーナー決定）。
   和文もここに入れておくこと。別レイヤーに出して動かすと二重に出る。 */
.lc-inv{position:absolute;inset:0;z-index:5}
.lc-inv .lc-word{color:var(--field)}
.lc-inv.neg .lc-word{color:var(--paper)}

/* 和文の破片（2026-08-04）。relight-borderless.com のヒーローが
   スクロールで「文字の分かれている部分が離れていく」動きを移したもの。
   **1枚＝字形の連結成分ひとつ**（「い」の2画、「ビ」の濁点など、
   もともと繋がっていない塊）。front.js が文をキャンバスに描いてラベリングで拾い、
   塊ごとの小さな canvas を作って left/top で置く。**inset:0 にしないこと。**
   位置と大きさは JS が入れるので、ここで固定すると全部が画面いっぱいになる。
   **z-index は札(0)より上・.lc-inv(5)の中。** 札の青地は地として残す。 */
.lc-ghosts{position:absolute;inset:0;z-index:1;pointer-events:none}
.lc-ghost{position:absolute;left:0;top:0;pointer-events:none;
  will-change:transform,opacity}
.lc-ghost canvas{display:block}

/* 級数は front.js が実測してカスタムプロパティに入れる。
   **札の中の複製にも効かせたいので、インラインではなく変数にすること。**
   インラインだと複製を作ったあとに書体が届いても、複製側が古い級数のまま残る。 */
.lc-word.en .ln{font-size:var(--fs-en,17vw)}
.lc-word.jp .ln{font-size:var(--fs-jp,12vw)}

.load.done{display:none}
html:not(.js) .load{display:none}

/* 調整用パネル。?intro=debug のときだけ front.js が差し込む */
#introDebug{position:fixed;left:16px;bottom:16px;z-index:99999;
  background:rgba(20,23,26,.92);color:#FFFFFF;padding:12px 14px;border-radius:8px;
  font-family:var(--en);font-size:12px;width:340px;
  box-shadow:0 12px 40px -16px rgba(0,0,0,.8)}
#introDebug .row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#introDebug .row:last-child{margin-bottom:0}
#introDebug label{width:28px;opacity:.7}
#introDebug b{width:52px;text-align:right;font-weight:600}
#introDebug input[type=range]{flex:1;accent-color:var(--brand)}
#introDebug button{background:rgba(255,255,255,.14);color:#FFFFFF;border:0;
  padding:6px 10px;border-radius:4px;cursor:pointer;font-size:12px}
#introDebug button:hover{background:rgba(255,255,255,.26)}
#introDebug select{flex:1;min-width:0;background:rgba(255,255,255,.14);color:#FFFFFF;
  border:0;padding:5px 6px;border-radius:4px;font-size:11.5px;cursor:pointer}
#introDebug select option{background:#14171A;color:#FFFFFF}
#introDebug .hint{opacity:.55;font-size:11px;line-height:1.5}

/* ---- ヘッダーとヒーローの登場 ----
   参考サイトは <body> に .loaded が付いてから、
   ロゴ=左から0.5s / メニュー=右から0.4s(遅れ0.6s) / コピー=拡大0.4s の順で入る。
   同じ組み方にしている。 */
.js .hd .brand{transform:translateX(-200px);transition:transform .5s var(--e-pop)}
.js .hd .nav,.js .hd .hd-cta,.js .hd .burger{transform:translateX(100%);opacity:0;
  transition:transform .4s var(--e-pop) .6s,opacity .4s .6s}
.js.loaded .hd .brand{transform:none}
.js.loaded .hd .nav,.js.loaded .hd .hd-cta,.js.loaded .hd .burger{transform:none;opacity:1}

/* ---- 微振動 ----
   参考サイトの署名的な動き。小刻みに揺れて、また止まる。
   数値は自前（±1.5px / ±1.2度 / 3.2秒周期）。強くすると安っぽくなるので上げないこと。 */
@keyframes nudge{
  0%,84%,100%{transform:translate(0,0) rotate(0)}
  86%{transform:translate(1.5px,1.5px) rotate(1.2deg)}
  88%{transform:translate(0,1.5px) rotate(0)}
  90%{transform:translate(1.5px,0) rotate(-1.2deg)}
  92%{transform:translate(0,0) rotate(0)}
  94%{transform:translate(1.5px,1.5px) rotate(1deg)}
  96%{transform:translate(0,0) rotate(0)}
}
.nudge{animation:nudge 3.2s ease infinite}
.sh-no{display:inline-block}
.sh.in .sh-no{animation:nudge 3.2s ease infinite}

/* ---- ヒーローのスライド ----
   参考サイトは切り抜き人物4枚を 3秒ごと・500msのフェードで送っていた。
   こちらは写真が無いので、言葉のスライドを同じ間隔・同じ速さで送る。
   現在のスライドには微振動（nudge）が乗る＝あちらの furu と同じ役割。 */
/* 見出しの直下。**線の帯（viewBoxのy=640以降）に食い込ませないこと。**
   一度リード文と並べたら線と節のラベルに重なって読めなくなった。 */

/* ---- 回転する円形バッジ ----
   参考サイトの spin（12s linear infinite）と同じ。円周に沿った文字が回り続ける。 */
/* 右上。下に置くと線とその矢羽根に重なる（実際に重なった）。
   縦組みはこのバッジの下に置くこと。 */
.spinner{position:absolute;right:calc(var(--gut) + 2px);top:clamp(104px,13vh,152px);z-index:3;
  width:clamp(82px,8vw,108px);aspect-ratio:1}
.spinner svg{width:100%;height:100%;animation:spin 12s linear infinite}
.spinner .core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:34%;height:34%;border-radius:50%;background:var(--paper)}
@keyframes spin{to{transform:rotate(360deg)}}
.js .spinner{opacity:0;transform:scale(0);transition:opacity .5s var(--e-pop) 1.15s,transform .5s var(--e-pop) 1.15s}
.js.loaded .spinner{opacity:1;transform:none}
@media (max-width:900px){.spinner{display:none}}
@media (prefers-reduced-motion:reduce){.spinner svg{animation:none}}

/* ---- ヒーローの節を順に光らせる ----
   参考サイトはヒーローで4枚を3秒ごとに切り替えていた。
   こちらは写真が無いので、線の3つの節（設計→公開→運用）を同じ間隔で送る。
   「一本の線」の意味とも噛み合う。 */
.hl-label text{transition:opacity .5s ease}
.hl-label text{opacity:.5}
.hl-label text.cur{opacity:1}

@media (prefers-reduced-motion:reduce){
  .nudge,.sh.in .sh-no{animation:none}
  .curtain{display:none}
}

/* ============================================================
   bit-rise.co.jp 型の区画（2026-08-05 オーナー指示で全面作り直し）
   **あちらの実測値**:
     地 #F0F0F5 / 巨大英字 116px Chakra Petch w700 letter-spacing .15em /
     和文ラベル 17.7px w700 / ( english ) 11px Outfit w500 /
     本文 15.5px w500 line-height 31px /
     ボタンは角丸を振り切った丸型（border-radius:1512px）、
     右に矢印ぶんの余白 107px、左 33px、上下 27.7px、黒地に白文字。
   背景に薄く敷く巨大なワードマークは 188〜200px。
   ============================================================ */
/* **clip にすること。**（2026-08-30）
   hidden は «スクロールできる入れ物» なので、中の position:sticky が
   «動かない入れ物» に貼り付く＝箱の上端に置き去りになる（#worksFx で踏んだ）。
   clip は入れ物にならず、見た目の切り取りは hidden と同じ。 */
.sec.brs{background:var(--paper);color:var(--ink);position:relative;overflow:clip}
/* 背景に薄く敷く巨大なワードマーク */
.brs-wm{position:absolute;left:0;top:8%;white-space:nowrap;pointer-events:none;
  font-family:var(--en);font-size:clamp(90px,13vw,200px);font-weight:700;
  letter-spacing:.15em;line-height:1;color:var(--ink);opacity:.05}
.brs-head{position:relative;display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.brs-en{font-family:var(--en);font-size:clamp(52px,8vw,116px);font-weight:700;
  letter-spacing:.15em;line-height:1.2;color:var(--brand);position:relative}
/* 文字の中を等高線が流れる（front.js の headTopo）。
   **is-topo は JS が付ける。** CSS だけで color を透明にすると、
   JS が動かない環境で見出しが消える。 */
.brs-en.is-topo{color:transparent}
.brs-en .hd-topo{position:absolute;left:0;top:0;pointer-events:none;user-select:none}
.brs-ja{font-size:17.7px;font-weight:700;letter-spacing:.1em;display:flex;align-items:baseline;gap:10px}
.brs-paren{font-family:var(--en);font-size:11px;font-weight:500;letter-spacing:.1em;color:var(--ink-3)}

.brs-body{position:relative;margin-top:clamp(30px,4.5vw,64px)}
.brs-lead{font-size:clamp(20px,2.4vw,32px);font-weight:700;line-height:1.75;letter-spacing:.02em}
.brs-p{margin-top:clamp(18px,2.4vw,32px);font-size:15.5px;font-weight:500;line-height:2;color:var(--ink-2)}
.brs-lead+.brs-p{margin-top:clamp(22px,3vw,40px)}
/* 但し書き。本文より一段落とす（読ませるが、主張はさせない） */
.brs-fine{margin-top:14px;font-size:13px;line-height:1.9;color:var(--ink-3)}

/* **ボタンは角丸を振り切った丸型。** 右に矢印ぶんの余白を大きく取るのがあちらの形 */
.brs-more{margin-top:clamp(28px,4vw,52px)}
.brs-btn{display:inline-flex;align-items:center;position:relative;
  padding:20px 88px 20px 32px;border-radius:999px;
  background:var(--ink);color:var(--paper);
  font-size:15px;font-weight:700;letter-spacing:.08em;
  transition:background .35s var(--e),padding-right .35s var(--e)}
.brs-btn .ar{position:absolute;right:32px;font-style:normal;transition:transform .35s var(--e)}
.brs-btn:hover{background:var(--brand)}
.brs-btn:hover .ar{transform:translateX(5px)}

/* お知らせ。日付とタイトルの2列 */
.brs-news{position:relative;margin-top:clamp(24px,3.4vw,48px);border-top:1px solid var(--line)}
.brs-news li{border-bottom:1px solid var(--line)}
.brs-news a{display:grid;grid-template-columns:8em 1fr;gap:clamp(12px,2vw,28px);align-items:baseline;
  padding:22px 4px;transition:background .3s var(--e),padding-left .3s var(--e)}
.brs-news a:hover{background:var(--paper-2);padding-left:14px}
.brs-news time{font-family:var(--en);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--brand)}
.brs-news p{font-size:15.5px;font-weight:500;line-height:2}

/* ============================================================
   お知らせの記事ページ（single.php）
   2026-08-18 新設。それまで記事だけ旧テンプレート（header.php）で出ていて、
   ナビが7本ともリンク切れだった。**本文の体裁はここで持つこと。**
   旧 style.css の .entry を読み込んではいけない（あちらは旧デザイン一式を連れてくる）。
   ============================================================ */
/* 赤地に載る見出しとメタ。**h1 はここ。** 赤地の «NEWS» は飾りで p */
.nw-title{font-size:clamp(23px,2.9vw,40px);font-weight:700;line-height:1.55;letter-spacing:.02em}
.nw-meta{margin-top:clamp(14px,1.6vw,20px);display:flex;align-items:center;gap:14px;
  font-family:var(--en);font-size:13px;font-weight:600;letter-spacing:.06em}
.nw-cat{padding:5px 12px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  font-family:var(--jp);font-size:12px;letter-spacing:.04em}

.nw-thumb{margin-bottom:clamp(26px,3.4vw,44px)}
.nw-thumb img{width:100%;height:auto;display:block;border-radius:14px}

/* 本文。**行間は 2 を保つこと。** サイト全体の読み物（.brs-p）と同じ調子にする */
.nw-body{max-width:800px;font-size:15.5px;font-weight:500;line-height:2;color:var(--ink-2)}
.nw-body>*+*{margin-top:1.6em}
.nw-body h2{margin-top:2.2em;font-size:clamp(19px,2vw,24px);font-weight:700;line-height:1.6;
  color:var(--ink);letter-spacing:.02em}
.nw-body h3{margin-top:2em;font-size:clamp(16px,1.6vw,19px);font-weight:700;line-height:1.7;color:var(--ink)}
.nw-body ul,.nw-body ol{padding-left:1.4em}
.nw-body li+li{margin-top:.6em}
.nw-body ul li{list-style:disc}
.nw-body ol li{list-style:decimal}
.nw-body a{color:var(--brand);text-decoration:underline;text-underline-offset:3px}
.nw-body a:hover{text-decoration-thickness:2px}
.nw-body img{max-width:100%;height:auto;border-radius:12px}
.nw-body blockquote{padding-left:18px;border-left:3px solid var(--line);color:var(--ink-3)}
.nw-body strong{font-weight:700;color:var(--ink)}

/* 前後の記事。**片方しか無いときも崩さないこと。** single.php 側で空を弾いている */
.nw-pn{margin-top:clamp(34px,4.5vw,60px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:14px 28px}
.nw-pn a{font-size:14px;font-weight:700;color:var(--ink-2);
  transition:color .3s var(--e)}
.nw-pn a:hover{color:var(--brand)}

/* 会社概要の一覧。**max-width は .flow と同じ理由**（2026-08-10・上の .flow を見よ）。
   値が短いので、罫線だけ 1400px 伸ばすと右が空くだけになる。 */
.brs-dl{margin-top:clamp(26px,3.4vw,44px);display:grid;grid-template-columns:8.5em 1fr;
  border-top:1px solid var(--line);max-width:1100px}
.brs-dl dt{padding:16px 0;font-size:13.5px;font-weight:700;color:var(--brand);border-bottom:1px solid var(--line)}
.brs-dl dd{padding:16px 0;font-size:14.5px;line-height:1.9;border-bottom:1px solid var(--line)}

@media (max-width:700px){
  .brs-head{gap:8px}
  .brs-news a{grid-template-columns:1fr;gap:4px}
  .brs-dl{grid-template-columns:1fr}
  .brs-dl dt{padding-bottom:0;border-bottom:0}
  .brs-dl dd{padding-top:6px}
  .brs-btn{padding:18px 68px 18px 24px}
  .brs-btn .ar{right:24px}
}

/* 会社概要の頭（赤地）— 見出しの右に代表の写真だけを置く区画。
   （2026-08-17 オーナー指示「COMPANYタブの赤のとこの右側に配置して」
    「COMPANYのところは文章いらない。会社概要と代表写真だけでいい」）

   **中身は写真ひとつだけ。** はじめは2列のグリッドで «左に文章／右に写真» を組んでいたが、
   文章を外したので左が空になった。右へ寄せるだけにしてある。文章を戻すなら grid に戻すこと。 */
.co-intro{display:flex;justify-content:flex-end}
/* **幅はここで決めること。** 列が無くなったので、指定しないと
   img の固有幅（880px）まで広がる。 */
.co-rep{width:clamp(240px,26vw,340px)}
/* **写真は白い額に入れること。**（2026-08-17 オーナー指示「もう少し豪華にして」）
   赤地に写真を直に置くと、白背景の宣材が «切り抜き忘れの四角» に見える。
   白い台紙で囲うと «額装した1枚» になり、名前もその中に収まって読みやすい。 */
.co-rep{background:#fff;padding:clamp(10px,.9vw,14px);border-radius:20px;
  box-shadow:0 20px 44px rgba(0,0,0,.20)}
.co-rep img{width:100%;height:auto;display:block;border-radius:12px;background:#fff}

/* 名前まわり。**額の中なので文字は地の色（--ink）で置くこと。**
   赤地に載っているつもりで白にすると、白い台紙の上で消える。 */
.co-rep figcaption{margin-top:clamp(12px,1.2vw,16px);padding:0 4px clamp(4px,.6vw,8px);text-align:center}
/* 短い罫。氏名の «上» に置いて、役職と名前を切り分ける */
.co-rep-role{display:block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  color:var(--brand)}
.co-rep-role::after{content:"";display:block;width:22px;height:2px;margin:9px auto 0;
  background:var(--brand);opacity:.5}
/* **氏名だけ Dela にすること。** 見出し（COMPANY）と同じ字体なので、
   ここだけ字体を変えても «別のサイトの部品» にならない。 */
.co-rep-name{display:block;margin-top:10px;font-family:var(--jp-disp);
  font-size:clamp(17px,1.5vw,20px);line-height:1.3;letter-spacing:.06em;color:var(--ink)}
.co-rep-en{display:block;margin-top:7px;font-family:var(--en);font-size:10px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}

/* **狭い画面では左へ寄せること。** 右に寄せたままだと、左上の見出し（COMPANY）と
   対角に離れて、区画の真ん中が抜けて見える。 */
@media (max-width:1000px){
  .co-intro{justify-content:flex-start}
  .co-rep{width:clamp(200px,58vw,240px)}
}

/* 線画イラスト。**区画の右側に大きく薄く置く。** 読み物の邪魔をしない濃さにすること。
   1000px 以下では本文と重なるので隠す。 */
.brs-ilst{position:absolute;right:clamp(-40px,-2vw,0px);bottom:clamp(-30px,-1vw,0px);
  width:clamp(240px,30vw,420px);color:var(--brand);opacity:.16;pointer-events:none;z-index:0}
.brs-ilst .ilst{width:100%;height:auto;display:block}
/* **3 にすること。** 魚（.hero-fish）が position:fixed / z-index:2 なので、
   1 のままだと本文の上を泳いで文字が読めない（2026-08-08）。 */
.sec.brs .wrap{position:relative;z-index:3}
@media (max-width:1000px){.brs-ilst{display:none}}

/* ============================================================
   WORKS（制作サンプル）
   **すべて架空・自主制作。** 実案件と見た目で区別が付くようにしておくこと
   （実績が出たら、こちらは下に置いて色数を落とす）。
   ============================================================ */
/* --- 実案件（1件）。**サンプルとは別の見え方にすること。**
   同じカードで並べると、どれが本物か分からなくなって1件の価値が消える。
   ここだけ横長の2段組み＋外部リンクにしてある。 --- */
.wk-real{margin-top:clamp(34px,5vw,64px);display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,3.4vw,52px);align-items:center}
/* **11px は小さすぎた**（2026-08-12 オーナー「事例の赤文字小さすぎ」）。
   ここは «本物の実績はこれ» という区画の見出しで、サンプルとの差を出す唯一の目印。
   周りの見出し（.brs-ja 17.7px）と釣り合う 16px にしてある。 */
.wk-real-lbl{grid-column:1/-1;font-family:var(--en);font-size:16px;font-weight:700;
  letter-spacing:.16em;color:var(--brand);
  display:flex;align-items:center;gap:14px}
.wk-real-lbl::after{content:"";flex:1;height:1px;background:rgba(20,23,26,.14)}
/* PC の右下にスマホを重ねる。**overflow:hidden にしないこと。**
   はみ出しで重ねているので、切ると意味が無くなる。

   端末の真下に、床に落ちたぼけ影を1枚敷いている（::after）。
   box-shadow だけだと箱の形が残るので、浮いている感じが出ない。 */
/* **右の余白は端末幅の半分ぶん取ること。** 少ないとスマホが PC の内側に食い込み、
   PC 側のデザイン（右端の文字）を隠す。実際に「IGNITED.」が隠れた。 */
.wk-real-shot{display:block;position:relative;z-index:0;padding-bottom:26px;padding-right:64px}
.wk-real-shot::after{content:"";position:absolute;left:6%;right:12%;bottom:6px;height:26px;
  background:radial-gradient(ellipse at center,rgba(20,23,26,.30),rgba(20,23,26,0) 72%);
  filter:blur(6px);pointer-events:none;z-index:0}
/* **影は下に落とすこと。** 四方に均等だと板が壁に貼ってあるように見える。
   接地影（近く濃く）＋落ち影（遠く薄く）の2枚重ねで浮かせる。 */
/* **床の影より前に出すこと。** z-index を付けないと影が端末の上に乗る。
   ::after を z-index:-1 にする手は使わない（親が重ね合わせ文脈を作らないと、
   セクションの背景の裏へ回って消える。実際に消えた）。 */
.wk-real-pc{position:relative;z-index:1;display:block;overflow:hidden;border-radius:4px;
  box-shadow:0 10px 18px -6px rgba(20,23,26,.22),
             0 34px 60px -18px rgba(20,23,26,.34)}
.wk-real-pc img{width:100%;height:auto;display:block;transition:transform .7s var(--e)}
.wk-real-sp{position:absolute;right:0;bottom:0;z-index:2;width:20%;display:block;
  border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 8px 14px -4px rgba(20,23,26,.28),
             0 26px 44px -14px rgba(20,23,26,.42)}
.wk-real-sp img{width:100%;height:auto;display:block}
.wk-real-shot:hover .wk-real-pc img{transform:scale(1.03)}
.wk-real-name{font-size:clamp(19px,2vw,24px);font-weight:700;letter-spacing:.03em;line-height:1.5}
.wk-real-field{margin-top:8px;font-size:13px;color:var(--ink-2)}
.wk-real-meta{margin-top:16px;display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px}
.wk-real-meta dt{color:var(--ink-3)}
.wk-real-meta dd{color:var(--ink-2)}
.wk-real-note{margin-top:16px;font-size:14.5px;line-height:2;color:var(--ink-2)}
.wk-real-link{display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  font-size:13.5px;font-weight:700;color:var(--brand);border-bottom:1px solid currentColor;
  padding-bottom:3px}

/* サンプルの前に置く小見出し。実案件との境目 */
.wk-sub{margin-top:clamp(46px,6vw,80px);padding-top:clamp(22px,3vw,34px);
  border-top:1px solid rgba(20,23,26,.12);font-size:13.5px;color:var(--ink-2)}
.wk-sub+.wk-list{margin-top:clamp(20px,2.6vw,32px)}

@media (max-width:820px){
  .wk-real{grid-template-columns:1fr;gap:20px}
}

.wks .wk-list{margin-top:clamp(34px,5vw,64px);display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px);list-style:none;padding:0}
.wk-card{display:block;width:100%;text-align:left;background:none;border:0;padding:0;
  cursor:pointer;color:inherit;font:inherit;position:relative}
/* サムネ。**箱の比率は元画像と同じ 16:9 にすること。**（2026-08-06）
   16:10 にしていたら cover で左右が切れ、デザインの端（ロゴや余白）が欠けた。
   PC の書き出しは全部 1600x900 なので、16:9 なら1枚も切れない。 */
.wk-shot{display:block;position:relative;overflow:hidden;border-radius:4px;
  aspect-ratio:16/9;background:var(--paper-2);
  box-shadow:0 12px 30px rgba(20,23,26,.10),0 3px 10px rgba(20,23,26,.06)}
.wk-shot img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .7s var(--e)}
.wk-card:hover .wk-shot img,.wk-card:focus-visible .wk-shot img{transform:scale(1.04)}
.wk-card:focus-visible{outline:2px solid var(--brand);outline-offset:6px}

.wk-meta{display:block;margin-top:16px}
.wk-no{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--brand)}
.wk-name{display:block;margin-top:6px;font-size:17px;font-weight:700;letter-spacing:.04em}
.wk-tags{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.wk-tags i{font-family:var(--en);font-style:normal;font-size:10px;font-weight:500;letter-spacing:.14em;
  color:var(--ink-2);border:1px solid rgba(20,23,26,.18);border-radius:999px;padding:3px 9px}
.wk-field{display:block;margin-top:10px;font-size:13px;color:var(--ink-2)}
.wk-more{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:12.5px;font-weight:700;color:var(--brand)}
.wk-more i{transition:transform .4s var(--e)}
.wk-card:hover .wk-more i{transform:translateX(4px)}

/* --- モーダル --- */
/* **ヘッダーより上に出すこと。** ヘッダーは position:fixed なので、
   z-index が下だとモーダルの上にナビが乗って閉じるボタンが隠れる（ヘッダーは 500）。 */
.wk-modal{position:fixed;inset:0;z-index:600;display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,3vw,48px)}
.wk-modal[hidden]{display:none}
.wk-back{position:absolute;inset:0;background:rgba(20,23,26,.62);backdrop-filter:blur(3px)}
.wk-panel{position:relative;background:var(--surface);border-radius:6px;width:min(1080px,100%);
  max-height:100%;overflow:auto;padding:clamp(24px,3.2vw,44px);
  box-shadow:0 40px 90px rgba(0,0,0,.34)}
.wk-close{position:absolute;right:14px;top:10px;width:40px;height:40px;border:0;background:none;
  font-size:26px;line-height:1;color:var(--ink-2);cursor:pointer}
.wk-close:hover{color:var(--ink)}
.wk-en{font-family:var(--en);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--brand)}
.wk-title{margin-top:8px;font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:.04em}
.wk-field2{margin-top:6px;font-size:13px;color:var(--ink-2)}

/* PC と スマホの2画面。**タブレットは出さない**（2026-08-06 オーナー指示）。
   スマホは中身が読める大きさまで上げてある（150px→260px。2026-08-06 指示）。
   **縦は max-height で止めること。** スマホ画像は縦長なので、幅だけ広げると
   パネルが縦に伸びて PC 側が画面外へ出る。 */
.wk-devices{margin-top:clamp(20px,2.6vw,32px);display:grid;
  grid-template-columns:minmax(0,1fr) 260px;gap:clamp(16px,2.4vw,34px);align-items:end}
.wk-dev.sp{justify-self:center}
.wk-dev.sp img{width:auto;max-width:100%;max-height:min(58vh,560px);margin:0 auto}
.wk-dev img{width:100%;height:auto;display:block;border-radius:3px;
  box-shadow:0 10px 26px rgba(20,23,26,.16)}
.wk-dev figcaption{margin-top:8px;font-family:var(--en);font-size:10px;font-weight:600;
  letter-spacing:.14em;color:var(--ink-3);text-align:center}
.wk-dev.sp img{border:1px solid rgba(20,23,26,.10)}
/* スマホ画像が無いサンプル用。PC を1枚で見せる */
.wk-devices.is-pconly{grid-template-columns:minmax(0,1fr)}

.wk-note{margin-top:clamp(20px,2.4vw,30px);font-size:14.5px;line-height:2;color:var(--ink-2)}

/* **広い画面では横に組むこと。**（2026-08-12 オーナー
   「詳細をクリックしたとき、少し下にスクロールしないと文章が見えない」）
   縦積みだと 端末2枚だけで画面の高さを使い切り、`.wk-note` が折り返しの下に沈む。
   **この note が «なぜこの業種にこの作り» を書いた本文**で、買い手が読みたいのは
   成果物ではなく判断の理由。1画面で目に入らないと置いている意味が無い。
   左に端末、右に 見出し＋本文。端末は行を2つぶんまたいで縦中央。 */
@media (min-width:900px){
  /* **画像を主役にすること。**（2026-08-12 オーナー「一番画像が主役だからもっと大きく」）
     縦は 700px の画面でも 150px 余る。**PC 画像を縛っているのは横幅のほう**なので、
     広げるのは «パネルの幅» と «左の列の比率»。周りの余白を削るのが一番効く。
     1512px 幅で PC 画像は 500 → 722px になった。 */
  .wk-modal{padding:clamp(12px,1.6vw,24px)}
  /* **文字が左、画像が右。**（2026-08-12 オーナー指示）
     読む順（見出し→説明→現物）と、日本語の視線の流れを揃える。 */
  .wk-panel{display:grid;grid-template-columns:minmax(290px,1fr) minmax(0,2.7fr);
    grid-template-rows:auto 1fr;
    column-gap:clamp(26px,2.8vw,44px);width:min(1440px,100%)}
  .wk-head{grid-column:1;grid-row:1}
  .wk-note{grid-column:1;grid-row:2;align-self:start;margin-top:clamp(14px,1.8vw,22px)}
  /* 閉じるボタン（右上・絶対配置）と重ならないよう、右の列だけ上を空ける */
  .wk-devices{grid-column:2;grid-row:1/span 2;margin-top:0;align-self:center;
    padding-top:18px;grid-template-columns:minmax(0,1fr) 200px}
  .wk-dev.sp img{max-height:min(58vh,600px)}
  /* **スマホを PC の上に重ねないこと。**（2026-08-12 に試して却下）
     重ねると PC 画像は 872px まで伸びるが、右下に置いたスマホが
     PC 側の «営業時間・電話番号» を隠す。事例ブロックで同じことをやって
     「IGNITED.」が隠れた件と同じ。見せるための拡大で中身が消えたら本末転倒。 */
}

@media (max-width:1000px){
  .wks .wk-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wk-devices{grid-template-columns:minmax(0,1fr) 200px}
}
@media (max-width:640px){
  .wks .wk-list{grid-template-columns:1fr}
  /* スマホ表示では横に2台並べると潰れるので、縦に積む */
  .wk-devices{grid-template-columns:1fr;justify-items:center}
  .wk-dev.sp{width:76%}
  .wk-dev.sp img{max-height:none}
  .wk-panel{padding:20px 16px 26px}
}

/* ============================================================
   制作フロー（page-flow.php）
   **番号と時期を左に固定して、右に中身を積む。**
   横スクロールの帯（参考サイトの形）は取らない。
   発注側は「読み返す」ので、縦に並んでいた方が探しやすい。
   ============================================================ */
.flowhead{padding-bottom:0}
.flowsec{background:var(--paper);color:var(--ink);padding-top:clamp(40px,5vw,70px)}
/* **1カラムの読み物は自前で上限を持つこと。**（2026-08-10）
   --maxw を 1560px へ広げたとき、本文（.flow-p の 62ch＝約500px）は読みやすさで
   頭打ちなのに、行の区切り線だけが 1400px まで伸びて右半分が空白になった。 */
.flow{list-style:none;margin:0;padding:0;position:relative;max-width:1100px}
/* 縦の導線。**番号の中心に合わせること。** ずれると階段に見える */
.flow::before{content:"";position:absolute;left:29px;top:14px;bottom:14px;width:1px;
  background:linear-gradient(180deg,var(--brand),rgba(206,36,21,.14))}
.flow-item{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);
  gap:clamp(20px,3vw,48px);padding:clamp(26px,3.4vw,44px) 0;
  border-bottom:1px solid rgba(20,23,26,.10)}
.flow-item:last-child{border-bottom:0}
.flow-mark{position:relative}
.flow-no{display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;background:var(--brand);color:var(--paper);
  font-family:var(--en);font-size:17px;font-weight:700;letter-spacing:.04em}
.flow-when{display:block;margin-top:12px;width:58px;text-align:center;
  font-family:var(--en);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--ink-3);
  line-height:1.5}
.flow-ttl{font-size:clamp(20px,2.2vw,27px);font-weight:700;letter-spacing:.03em;line-height:1.5}
.flow-sub{margin-top:6px;font-size:13.5px;color:var(--brand);font-weight:700}
.flow-p{margin-top:14px;font-size:15px;line-height:2.05;color:var(--ink-2);max-width:62ch}
.flow-out{margin-top:16px;font-size:13.5px;color:var(--ink-2);
  display:flex;gap:12px;flex-wrap:wrap;align-items:baseline}
.flow-out span{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-3);
  border:1px solid rgba(20,23,26,.18);border-radius:999px;padding:3px 10px;white-space:nowrap}
/* 残り回数。**数字だけ色を変えて拾えるようにする。** 契約条件なので埋もれさせない */
.flow-rev{margin-top:12px;font-size:13px;font-weight:700;color:var(--ink-3)}
.flow-rev b{color:var(--brand);font-size:15px;margin:0 3px}

.flow-notes{margin-top:clamp(44px,5vw,76px);padding:clamp(24px,3vw,40px);
  background:var(--surface);border-radius:6px}
.flow-notes-ttl{font-size:17px;font-weight:700;letter-spacing:.04em}
.flow-notes ul{margin:16px 0 0;padding-left:1.2em}
.flow-notes li{font-size:14.5px;line-height:2;color:var(--ink-2);margin-top:6px}
.flow-cta{margin-top:clamp(34px,4vw,56px)}

@media (max-width:720px){
  .flow::before{left:23px}
  .flow-item{grid-template-columns:1fr;gap:14px}
  .flow-mark{display:flex;align-items:center;gap:14px}
  .flow-no{width:46px;height:46px;font-size:15px}
  .flow-when{margin-top:0;width:auto;text-align:left}
}

/* （削除済み）ヒーローのお知らせ .hero-news / .hn-*。2026-08-07 撤去。
   **2026-08-10: そのとき閉じ括弧が4つ取り残されていた。** ファイル全体が深さ -4 で終わり、
   ブラウザはこの直後の `.nw-list a`（お知らせ一覧を3列にする指定）を捨てていた。
   症状は「/news/ で矢印が2行目に落ちる」。**波括弧の数は消したあとに必ず数えること。** */

/* --- お知らせ一覧（home.php）。基本は .brs-news と同じ形で、右に矢印を足すだけ --- */
.nw-list a{grid-template-columns:8em 1fr auto}
.nw-ar{color:var(--brand);transition:transform .4s var(--e)}
.nw-list a:hover .nw-ar{transform:translateX(4px)}
.nw-pager{margin-top:clamp(24px,3vw,40px);display:flex;gap:10px;flex-wrap:wrap}
.nw-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:999px;
  font-size:13.5px;color:var(--ink-2)}
.nw-pager .page-numbers.current{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}
.nw-pager .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.nw-pager .screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:640px){
  .nw-list a{grid-template-columns:1fr auto}
  .nw-list time{grid-column:1/-1}
}

/* --- CONTACT を赤の面にする（2026-08-07）---
   **ページの終わりに色の塊を置くこと。** 紙地のまま終わると、
   最後の画面が白い余白と入力欄だけになって寂しく見える（オーナー指摘）。
   SERVICE と同じ赤なので、赤で始まり赤で終わる形になる。 */
.sec.brs.final{background:var(--field);color:var(--paper)}
.sec.brs.final .brs-en{color:var(--paper)}
/* **is-topo の透明指定より強く書かないこと。** ここが勝つと、canvas で描いた文字の
   下に DOM の文字がそのまま出て、二重に見える／線が入らない。 */
.sec.brs.final .brs-en.is-topo{color:transparent}
.sec.brs.final .brs-ja{color:var(--paper)}
.sec.brs.final .brs-paren{color:rgba(255,255,255,.7)}
.sec.brs.final .brs-wm{color:var(--paper);opacity:.07}
.final .ct-lead{color:var(--paper)}
/* **締めの区画は見出しごと中央に寄せること。**（2026-08-07）
   巨大な英字だけ左端に残したまま、下のフォームを中央に置いていたので
   左右の重心がずれて見えた（オーナー指摘「バランス悪い」）。 */
.final .brs-head{justify-content:center;text-align:center}
.final .brs-wm{left:50%;transform:translateX(-50%)}
.final .ct-facts{border-top-color:rgba(255,255,255,.28)}
.final .ct-facts dt{color:rgba(255,255,255,.66)}
.final .ct-facts dd{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.22)}
.final .ct-facts a{color:var(--paper)}
.final .brs-ilst{color:var(--paper);opacity:.13}

/* 赤地に載る白いカードなので、影を強めて浮かせる */
.final .ct-main{box-shadow:0 18px 30px -18px rgba(0,0,0,.34),0 40px 70px -34px rgba(0,0,0,.42)}

/* 区画の地に敷く等高線（CONTACT）。ヒーローの .hero-fx と同じ役目。
   **中身より後ろへ回すこと。** .wrap 側は position:relative で前に出す。 */
.sec-fx{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.34}
/* SERVICE はヒーローと同じ濃さ。CONTACT は上に白いフォームが載るので薄いまま */
/* SERVICE の地の線。**赤地に戻したので白で描く**（2026-08-23 オーナー指示
   「SERVICE の赤背景には波の動きも入れて」）。前後の波（wsep）と同じ場を流すので、
   区画をまたいで1枚の面に見える。 */
/* **紙地では薄くすること。**（2026-08-30）
   赤地に白（.40）と同じ濃さで紙地に赤を敷くと、線が «罫線» として立ってしまい
   本文より目立つ。地との明度差が大きいぶんを濃さで戻す。 */
.sec.service .sec-fx{opacity:.26}
/* WORKS も同じ扱い（紙地に青） */
#works .sec-fx{opacity:.26}
.sec-fx .hfx{display:block;width:100%;height:100%}
/* SERVICE の模様だけ «画面に貼り付ける»（区画が 4000px あるので画面ぶんだけ描く）
   **overflow:hidden を外すこと。** 親が overflow:hidden だとそれ自体が
   スクロールの入れ物になり、中の sticky は «動かない入れ物» に貼り付くので
   position:relative と同じ＝箱の上端に置き去りになる（実測）。 */
#serviceFx,#worksFx{overflow:visible}
#serviceFx .hfx,#worksFx .hfx{position:sticky;top:0;height:100svh}
.final>.wrap{position:relative;z-index:3}

/* ============================================================
   右下の CTA（2026-08-08）
   参考 bit-rise.co.jp の右下バナーを拡大して寸法を合わせたもの。
   ヘッダーの「相談する」とスマホ下部の固定バーを廃して、これ1つに集約。

   **区切り線は引かない。** あちらは CLOSE と本文の間に線が無い。入れると事務的になる。
   **和文は14px前後・2行。** 12px台まで落とすと弱くなる（1回やって却下）。
   **「こちら」だけ赤＋赤下線、句点は黒のまま。**
   **左だけ大きく丸め、右は画面外へ。**
   ============================================================ */
.fcta{position:fixed;right:0;bottom:clamp(20px,3vw,44px);z-index:450;
  display:flex;align-items:center;gap:clamp(14px,1.6vw,22px);
  padding:18px clamp(26px,2.6vw,40px) 18px clamp(20px,2vw,28px);
  background:#fff;border-radius:999px 0 0 999px;
  box-shadow:0 10px 20px -10px rgba(20,23,26,.2),0 28px 56px -26px rgba(20,23,26,.38);
  transition:transform .55s var(--e),box-shadow .55s var(--e),padding .4s var(--e),opacity .55s ease}
.fcta:hover{box-shadow:0 14px 26px -10px rgba(20,23,26,.26),0 36px 66px -28px rgba(20,23,26,.46)}

/* 閉じるボタン。矢印は**太い黒**。細いと押せる物に見えない */
.fcta-close{display:flex;flex-direction:column;align-items:center;gap:6px;
  border:0;background:none;cursor:pointer;color:var(--ink);padding:0}
.fcta-close:hover{color:var(--brand)}
.fcta-chev{display:block;width:13px;height:auto}
.fcta-closelbl{font-family:var(--en);font-size:9.5px;font-weight:700;letter-spacing:.1em}

.fcta-body{display:flex;align-items:center;gap:clamp(14px,1.5vw,20px);color:var(--ink)}
/* 赤ベタの丸。あちらのマスコットの「重さ」を面積で代わりにしている */
.fcta-mark{flex:none;width:clamp(46px,4.4vw,58px);color:var(--brand);display:block}
.fcta-mark svg{display:block;width:100%;height:auto;transition:transform .5s var(--e)}
.fcta-body:hover .fcta-mark svg{transform:translateX(3px)}
/* 1行になったので折り返さない。2行前提の行間は不要 */
.fcta-txt{font-size:clamp(13px,1.15vw,15px);font-weight:700;line-height:1.6;
  letter-spacing:.01em;white-space:nowrap}
.fcta-link{color:var(--brand);border-bottom:2px solid var(--brand);padding-bottom:1px;margin:0 2px}

/* 閉じた姿。**消さずに赤い丸だけ残す。** 常時出ている入口が他に無い */
.fcta.is-min{border-radius:999px;right:clamp(16px,2.4vw,30px);padding:10px;gap:0}
.fcta.is-min .fcta-close{display:none}
.fcta.is-min .fcta-txt{display:none}
.fcta.is-min .fcta-mark{width:44px}

/* お問い合わせを見ている間は引っ込める（同じ導線が二重になるため） */
.fcta.is-hide{opacity:0;transform:translateX(24px);pointer-events:none}

@media (max-width:640px){
  .fcta{bottom:14px;padding:12px 18px 12px 14px;gap:12px}
  .fcta-txt{font-size:12px;line-height:1.75}
  .fcta-mark{width:40px}
}

/* --- ヒーローを泳ぐ黒い魚（2026-08-08）---
   **等高線より前・見出しより後ろ。** 見出しの上を横切ると読めなくなる。
   **1匹だけ。** 増やすと水槽になる。 */
/* **画面に固定する。** ヒーローの中に置くと、スクロールした時点で置いていかれる。
   位置と拡大・濃さは front.js が毎フレーム入れる（奥行きを出すため）。
   **transform-origin は左上のまま。** 中央にすると translate の座標が意味を変える。 */
.hero-fish{position:fixed;left:0;top:0;z-index:2;pointer-events:none;
  width:clamp(84px,8vw,124px);color:#14171A;
  will-change:transform,opacity}
.hero-fish svg{display:block;width:100%;height:auto}
/* 尾の回転の軸は体との継ぎ目。ここをずらすと尾が抜けて見える */
.hero-fish .fish-tail{transform-origin:52px 60px}
/* 下顎の軸は口の付け根（顎関節）。中心で回すと顎が外れて見える */
@media (prefers-reduced-motion:reduce){ .hero-fish{display:none} }

/* ============================================================
   区画の境目の波（2026-08-08）
   **次の区画の色で、前の区画へ食い込ませる。** 区画の先頭に置く。
   **高さは vw で持つこと。** viewBox(1440x140) と比率を合わせないと、
   preserveAspectRatio="none" で伸ばしたときに曲線に沿う文字が歪む。
   ============================================================ */
/* **高さは viewBox(1440x520) と同じ比率で持つこと。** 36.1vw がちょうど 520/1440。
   ここがずれると slice が左右か上下を切り始め、曲線の端が欠ける。
   上限 620px は «大きすぎる画面で1画面を食い潰さない» ための妥協で、
   1716px を超えると上下が少し切れる（曲線の y を 40〜480 に収めてあるのはそのため）。 */
/* **次の区画へ重ねること。**（2026-08-08 オーナー指示「文字に被ってもいい」）
   マイナスの余白で次の区画を引き上げ、半円がその上に «垂れる» ようにする。
   **被った文字は読めなくならない。** .sec>.wrap が z-index:3 で、
   波（静的＝z-index auto）より前に出るので、半円は文字の «後ろ» を通る。 */
/* **食い込みを深くすること。**（2026-08-23 オーナー指摘
   「境界線が斜めだから結構空白ができちゃってる。斜めのままもっと空白詰めて」）
   斜めの S 字は «浅い側» に前の区画の色が長く残るので、
   曲線を寝かせずに «前後の区画を重ねて» 空きを食わせる。
   区画の中身は .sec>.wrap の z-index:3 で波より前に出るので、文字は隠れない。
   1440px で 空き 322/374/298px → 190px 前後まで詰まる（実測）。 */
.wsep{position:relative;width:100%;margin-bottom:clamp(-330px,-21vw,-120px);
  pointer-events:none;line-height:0;
  height:clamp(240px,36.1vw,620px)}
/* **z-index:2 を外さないこと。**（2026-08-08 オーナー指摘
   「ABOUT のラインに沿って赤が背景に来て欲しい」「CONTACT と SERVICE の上の境界も同様に」）
   次の区画（.sec.brs / .sec.field）は不透明な地色を持つ。z-index 無しだと DOM 順で
   その地色が波の下半分を覆い、**曲線に沿って垂れるはずの前の区画の色が
   水平にぶつ切りになる**。曲線に沿う文字だけが次の地に取り残されて消えていた。
   2 は «次の区画の地（auto / .sec-fx の 0）より上、.sec>.wrap（3）より下» の位置。 */
.wsep{z-index:2}
/* **紙地 → 赤の次に来る区画は、見出しを舌より下げること。**（2026-08-08）
   short / mid は左端で深く垂れる形なので、上の指定だけ入れると
   紙地の舌が SERVICE / CONTACT の**白い見出しの真下に回り込んで白文字が消える**。
   舌の最深部は区画の上端から 100〜115px ほど（1440px 幅で実測）。
   **この padding を .sec.has-wave の値まで戻さないこと。** 見出しが舌に飲まれる。 */
/* **見出しを波の下に出すこと。**（2026-08-23 オーナー指摘
   「WORKSとかCONTACTの文字が境界線に被っちゃってる」）
   2026-08-23 に前後の重なりを深くしたぶん、舌が見出しの上まで降りてきていた。 */
/* **上限 215px では足りない。**（2026-08-30 オーナー指摘「ABOUT の文字が重なってる」）
   舌の深さは «画面幅に比例して» 増える（波は preserveAspectRatio=slice なので
   横幅に合わせて拡大され、曲線が下へ伸びる）。一方で箱の高さは 620px、
   食い込みは 330px で頭打ちになる。**上限を固定にすると広い画面ほど食い込む。**
   曲線の «見出しの真上» の深さを実測した（1280〜2560px、曲線上を 500 点サンプル）:
     ABOUT（short） 見出しに +15 / +17 / +37 / +31 / +49 / +69px 食い込み
     CONTACT（mid） +6 / -4 / -3 / -28 / -34 / -46px
   短い方（mid）はほぼ足りているので、深い short だけ別に取る。 */
.wsep--to-red+.sec.has-wave{padding-top:clamp(140px,17.3vw,225px)}
/* short は左端で いちばん深く垂れる形。ABOUT がこれ。 */
.wsep--to-red.wsep--short+.sec.has-wave{padding-top:clamp(140px,17.5vw,340px)}
.wsep--to-paper+.sec.has-wave{padding-top:clamp(150px,17vw,250px)}
.wsep svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.wsep-bg{z-index:1}
/* 波の «あいだ» を流れる地の線。front.js が canvas を差し込む。
   **濃さは繋がる相手の面と揃えること。** ヒーローは .hero-fx が opacity:.40、
   CONTACT は .sec-fx が .34 を掛けている。ここだけ素で描くと継ぎ目で濃さが飛ぶ。 */
.wsep .hfx{position:absolute;inset:0;z-index:2;display:block;width:100%;height:100%}
.wsep[data-fxset="hero"] .hfx,
.wsep[data-fxset="service"] .hfx{opacity:.40}
.wsep[data-fxset="contact"] .hfx{opacity:.34}
/* **反対側の線は、その先の区画と同じ濃さにすること。**（2026-08-30）
   紙地に敷く色つきの線（SERVICE の赤・WORKS の青）は .26。
   ここを .40 のままにすると、波の箱のところだけ線が濃くなって帯に見える。 */
.wsep[data-fxset] .hfx-2{opacity:.26}
.wsep-fg{z-index:3}
/* **文字は曲線の «上» に置く。** 既定は曲線が文字のベースラインなので、
   下側（次の区画）へはみ出す。dominant-baseline で持ち上げる。
   級数は viewBox(260高) 基準。箱の高さで拡大率が変わるので、形ごとに調整する。 */
.wsep-txt{font-family:var(--en);font-size:22px;font-weight:700;letter-spacing:.12em;
  dominant-baseline:text-after-edge}
/* **波の上半分に、前の区画の色を敷くこと。**（2026-08-08 修正）
   塗りパスは «次の区画の色» で曲線から下だけを埋めている。上を透明のままにすると
   そこに body の紙色が出て、前の赤い区画は水平に切れて終わる＝曲線に見えない。
   実際「ヒーローの後・SERVICE の後が曲線になってない」と指摘された箇所がこれ。 */
.wsep--to-paper{background:var(--field)}
.wsep--to-red{background:var(--paper)}
/* 次が紙地 … 波は紙色。文字は前（赤地）に乗るので白 */
.wsep--to-paper .wsep-fill{fill:var(--paper)}
.wsep--to-paper .wsep-txt{fill:#fff;opacity:.9}
/* 次が赤 … 波は赤。文字は前（紙地）に乗るので赤 */
.wsep--to-red .wsep-fill{fill:var(--field)}
.wsep--to-red .wsep-txt{fill:var(--brand);opacity:.85}

/* 波を置いた区画は、上の余白を詰める（波ぶん既に空いている） */
.sec.has-wave{padding-top:clamp(8px,1.4vw,24px)}

/* 形ごとに高さを変える。**高さが変わると文字の拡大率も変わる**ので、
   見た目の級数がそろうよう font-size を逆向きに振ってある。 */
/* **形ごとに高さを変えないこと。**（2026-08-08）
   viewBox を1つ（1440x520）で共有しているので、高さを変えると比率が崩れて
   曲線の端が切れる。«違い» は曲線の形そのもので出す。 */

@media (max-width:640px){
  /* 箱が min-height(240px) で頭打ちになり、横に切られて拡大率が上がる */
  .wsep-txt{font-size:15px}
}

/* ============================================================
   ABOUT の3項目（2026-08-08 作り直し）
   **番号は «飾り» ではなく «読む順» の合図。** 段落をべた流しにしていたとき、
   どれが強みか分からず右半分が空いたままだった。番号列で左に軸を作り、
   本文はその右に流す。**行長は 34em を超えさせないこと。**（1行が長いと読み飛ばされる）
   ============================================================ */
.abt{list-style:none;margin-top:clamp(30px,4vw,54px);
  border-top:1px solid var(--line-2)}
.abt-item{display:grid;grid-template-columns:clamp(76px,9vw,132px) minmax(0,1fr);
  gap:clamp(10px,2vw,28px);
  padding:clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--line-2)}
/* 番号は本文と同じ高さから始める。**大きくしすぎないこと**（見出しと喧嘩する） */
.abt-no{font-family:var(--en);font-size:clamp(15px,1.5vw,19px);font-weight:700;
  letter-spacing:.12em;color:var(--brand);line-height:1.6;padding-top:2px}
.abt-c{max-width:34em}
.abt-t{font-size:clamp(17px,1.9vw,22px);font-weight:700;line-height:1.7;letter-spacing:.02em}
.abt-p{margin-top:10px;font-size:15.5px;font-weight:500;line-height:2;color:var(--ink-2)}
/* 具体例だけ地を敷いて、抽象の説明と読み分けさせる */
.abt-eg{margin-top:16px;padding:clamp(14px,1.8vw,20px) clamp(15px,2vw,22px);
  background:var(--paper-2);border-left:2px solid var(--brand);
  font-size:14.5px;font-weight:500;line-height:2;color:var(--ink-2)}
.abt-eg span{display:block;font-weight:700;color:var(--ink);letter-spacing:.04em}
.abt-c .brs-fine{margin-top:12px}
.abt+.brs-p{margin-top:clamp(24px,3vw,38px);max-width:34em}
.brs-lead+.brs-p{max-width:34em}
.abt+.brs-more,.abt~.brs-more{margin-top:clamp(28px,3.6vw,46px)}
@media (max-width:640px){
  .abt-item{grid-template-columns:1fr;gap:6px}
  .abt-no{padding-top:0}
}

/* **本文は魚より前に出すこと。**（2026-08-08）
   .hero-fish は position:fixed / z-index:2 なので、そのままだと静的な本文の上を
   泳いで文字が読めなくなっていた（実際に「あります。」が隠れていた）。
   魚の側を下げると等高線に埋もれるので、中身を上げて解決する。 */
.sec>.wrap{position:relative;z-index:3}


/* ============================================================
   見出しの書体（2026-08-08 オーナー指示「同じにしてみて」）
   参考は gunze.co.jp/130th/ の「読めない、GUNZE。」＝ Dela Gothic One。
   **極太1ウェイトなので、当てる先を絞ること。**
   ヒーローの主コピーと、各区画のリード文だけ。本文・注記には当てない。
   Dela Gothic One は字面が大きく、既定の字間だと詰まって見えるので
   letter-spacing を少し開け、line-height も上げてある。
   ============================================================ */
.hero-h1,
.brs-lead{font-family:var(--jp-disp);font-weight:400;
  letter-spacing:.04em;line-height:1.55}
/* **イントロの幕の和文（.lc-word.jp）はここに足さないこと。**（2026-08-08 オーナー指示
   「イントロのいいサイトで。いいビジネスを。フォント戻して」）
   書体は上の方の .lc-word.jp（--jp-intro の切り替えノブ付き）に任せる。
   ここで上書きすると、`?jp=…` での書体の見比べが効かなくなる。 */

/* 欧文も同じ書体にする（2026-08-08 オーナー指示「英語のフォントも同じにして」）。
   **当てるのは «大きく見せる» 欧文だけ。** ナビの英字ラベルや注記のような
   11〜13px のものに当てると、極太すぎて潰れて読めない。そこは Schibsted のまま。
   **font-weight は必ず 400 にすること。** Dela は1ウェイトしか無いので、700 を
   指定するとブラウザが太らせた偽ボールドになり、輪郭が濁る。
   （.brs-en は front.js の headTopo が computed の font をそのまま canvas に渡すので、
     ここで 700 のままにすると、文字塗りの線も偽ボールドの字形で焼かれる） */
.brs-en,
.brs-wm{font-family:var(--en-disp);font-weight:400}
/* **境目を流れる区画名は Modak にしないこと。**（2026-08-08 オーナー指示
   「一個前のフォントに戻して」＝ Modak → Dela Gothic One）
   丸文字は曲線に沿わせると字の重心が揃わず、S字の上でばらけて見える。 */
.wsep-txt{font-family:var(--en);font-weight:400}
/* **「Good Site, Good Business」だけは元の書体に戻すこと。**（2026-08-08 オーナー指示）
   ここは «飾り» ではなく «読ませるタグライン» で、Modak の丸文字だと軽く見える。
   イントロの幕とヒーローの2か所。片方だけ戻すと、幕が明けた瞬間に書体が入れ替わる。 */
/* ヒーローのタグラインは Dela（--en）のまま。 */
.hero-en{font-family:var(--en);font-weight:500;letter-spacing:.16em}
/* **イントロの幕だけは Schibsted Grotesk に戻す。**（2026-08-08 オーナー指示
   「もう一個前のフォントに戻して」＝ Modak → Dela → Schibsted の2つ前）
   幕の和文も Zen Kaku に戻してあるので、幕の中だけ «元の書体の組» で揃う。 */
/* **font-weight と字間は上書きしないこと。** 上の .lc-word.en が 800 / -.035em を
   持っていて、それが元の見た目。ここで足すと «戻した» ことにならない。 */
.lc-word.en{font-family:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif}
/* 極太になったぶん、字間を開けないと «塊» に見える */
.brs-en{letter-spacing:.05em}
.wsep-txt{letter-spacing:.04em}

/* **--en の箱に和文が入っている数か所だけは戻すこと。**（2026-08-08）
   欧文ラベルのつもりで組んだ枠に、和文が混ざっている箇所がある。
   Dela Gothic One は 10〜12px の和文だと画数が潰れて読めない。
   （実測で見つけた3か所。新しく作るときも「--en の中に和文」を避けること） */
.ft small,
.wk-real-lbl,
.wk-dev figcaption,
.flow-when{font-family:"Schibsted Grotesk",var(--jp)}


/* ============================================================
   下層ページの頭（2026-08-08 オーナー指示
   「制作フロー、お知らせ、会社情報は、背景は赤で線を動かそう、その上で見やすくして」）
   トップのヒーローの代わり。**赤地に載せるのは見出しとリードだけ。**
   会社概要の表や記事一覧のような «読ませるもの» は、波で紙地へ切り替えた下に置く。
   赤地に長文を載せると、白抜き文字が細って読みにくい。
   ============================================================ */
.sec.brs.pghead{background:var(--field);color:var(--paper);
  /* 固定ヘッダー(74px)の下に見出しが潜らないよう、上を大きく空ける */
  padding-top:clamp(120px,13vw,190px);padding-bottom:clamp(30px,5vw,80px)}
/* **見出しと代表写真を横に並べること。**（2026-08-17 会社概要）
   説明文を外して写真だけになったとき、写真を見出しの «下» に置くと
   左半分がまるごと空いて、区画の高さが 1016px まで伸びる（実測）。
   横に並べれば見出しの高さに収まり、200px ほど縮む。
   .brs-wm（透かしの SUiMiL）は absolute なので、この grid には並ばない。

   **必ず .page-company で囲うこと。**（2026-08-19）
   `.pghead .wrap` だけで書くと、同じ赤地を使う NEWS（home.php / single.php）にも効いて、
   記事タイトルが右の列へ飛ぶ。実際にそうなっていたのを実測して直した。 */
.page-company .sec.brs.pghead .wrap{display:grid;grid-template-columns:1fr auto;
  column-gap:clamp(32px,5vw,80px);align-items:start}
.page-company .sec.brs.pghead .co-intro{margin-top:0}
@media (max-width:1000px){
  .page-company .sec.brs.pghead .wrap{grid-template-columns:1fr}
  .page-company .sec.brs.pghead .co-intro{margin-top:clamp(28px,5vw,44px)}
}
.sec.brs.pghead .sec-fx{opacity:.40}
.sec.brs.pghead .brs-en{color:var(--paper)}
.sec.brs.pghead .brs-ja{color:var(--paper)}
.sec.brs.pghead .brs-paren{color:rgba(255,255,255,.7)}
.sec.brs.pghead .brs-wm{color:var(--paper);opacity:.08}
.sec.brs.pghead .brs-lead{color:var(--paper)}
/* 本文は真っ白にしない。赤に白だと «光って» 読みにくいので少し落とす */
.sec.brs.pghead .brs-p{color:rgba(255,255,255,.88)}
.sec.brs.pghead .brs-fine{color:rgba(255,255,255,.68)}
.sec.brs.pghead strong{color:#fff}

/* ============================================================
   SERVICE：触れた行だけ «紙のカード» になる
   （2026-08-08 オーナー指示「Webサイト制作を触ると、ここのカードの背景が
    白になって黒文字になる、みたいな演出したい。運用保守とかも同様に」）

   **このファイルには .svcx- の並びが2組ある**（420行台と968行台。中身は同一）。
   どちらに足しても後ろが勝つので、確実に効くよう末尾に置いてある。
   .svcx-link の position:relative だけは2組とも直してある。

   **背景は擬似要素で敷くこと。** .svcx-link に直接 background を掛けると
   行の左右いっぱい（破線と同じ幅）で切れて «帯» になり、カードに見えない。

   **padding で作らないこと。** 当たり判定と文字が動くので、
   マウスが行の縁にあるとき hover が入る・外れるを繰り返して点滅する。

   **z-index を外さないこと。** 敷いた紙が文字の上に来て行が真っ白になる。
   ============================================================ */
.svcx-link::before{content:"";position:absolute;z-index:0;
  top:6px;bottom:6px;
  left:calc(-1 * clamp(14px,1.6vw,26px));right:calc(-1 * clamp(14px,1.6vw,26px));
  background:var(--paper);border-radius:8px;
  opacity:0;transform:scale(.98);
  transition:opacity .34s var(--e),transform .34s var(--e)}
.svcx-link:hover::before,
.svcx-link:focus-visible::before{opacity:1;transform:none}
/* 中身は敷いた紙の «上» へ */
.svcx-en,.svcx-jp,.svcx-p,.svcx-ar{position:relative;z-index:1}
.svcx-en,.svcx-jp,.svcx-p{transition:color .34s var(--e),opacity .34s var(--e)}
.svcx-ar{transition:transform .3s var(--e),background-color .34s var(--e),color .34s var(--e)}
/* 文字は墨へ。**opacity を 1 に戻すこと。** 白地では .85／.92 でも «かすれ» に見える */
.svcx-link:hover .svcx-en,.svcx-link:focus-visible .svcx-en{color:var(--ink-3);opacity:1}
.svcx-link:hover .svcx-jp,.svcx-link:focus-visible .svcx-jp{color:var(--ink)}
.svcx-link:hover .svcx-p,.svcx-link:focus-visible .svcx-p{color:var(--ink-2);opacity:1}
/* 丸矢印は白いままだと紙に沈む。地と字を入れ替える */
.svcx-link:hover .svcx-ar,
.svcx-link:focus-visible .svcx-ar{background:var(--ink);color:var(--paper)}

/* ============================================================
   ABOUT のリード文だけ青（2026-08-08 オーナー指示
   「企画から撮影・システム・保守まで、一社で完結します。は
    gunze.co.jp/130th/ このサイトの青の文字にできる？」）

   **#1100FF はあちらの実測値そのもの**（rgb(17,0,255)。見出し・ボタン・メニューの地に使われている）。
   紙地 #F0F0F5 に対して 7.5:1 で、大きい文字なら AA も AAA も通る。

   **#statement に限ること。** .brs-lead は WORKS・制作フロー・会社情報でも使っている。
   素の .brs-lead に当てると、サイト中のリード文が全部青くなって
   赤（--field / --brand）と喧嘩する。ここは «ABOUT の一段落だけの差し色»。
   ============================================================ */
#statement .brs-lead{color:#02339C}

/* ============================================================
   帯を走らせて、そのまま «青帯の白文字» で残す（2026-08-08 オーナー指示
   「ここは青帯の白文字にしよう！ アニメーションからそのまま帯表示」）

   行ごとに、青帯が左から伸びる。**その帯の縁を追いかけて白い文字が現れる。**
   伸び切ったら帯は残り、青地に白抜きの2行として定着する。

   **帯と文字は同じ長さ・同じイージング・同じ時間で動かすこと。**
   片方だけ linear にすると縁と文字がずれて、«帯の外に文字が先に出る» か
   «帯だけ先行して空の帯が見える» のどちらかになる。

   **帯の幅は行の長さに合わせること**（.bnd-l に width:fit-content）。
   block のままだと器の幅いっぱいに走って、短い行でも帯だけ長く伸びる。

   **左の余白ぶんは negative margin で戻すこと。** 帯に padding を持たせた結果
   文字だけ右へずれて、下の 01/02 や罫線と頭が揃わなくなる。

   **JS が無いときは帯を出したままにすること。** 白文字なので、
   帯が scaleX(0) のまま止まると紙地に白文字＝完全に読めなくなる。
   ============================================================ */
.bnd{--bnd-pad:.34em}
.bnd-l{display:block;position:relative;width:fit-content;max-width:100%;
  padding:.14em var(--bnd-pad);margin-left:calc(-1 * var(--bnd-pad))}
/* 帯。**::before にすること。** ::after だと文字の上に乗って白文字が消える */
.bnd-l::before{content:"";position:absolute;z-index:0;inset:0;
  background:currentColor;transform:scaleX(1);transform-origin:0 50%;pointer-events:none}
.bnd-l>em{position:relative;z-index:1;display:block;font-style:normal;color:#fff}
/* ここから下は JS があるときだけ。素の HTML では «青帯の白文字» が最初から出ている */
.js .bnd .bnd-l::before{transform:scaleX(0)}
.js .bnd .bnd-l>em{clip-path:inset(0 100% 0 0)}
.js .bnd.in .bnd-l::before{animation:bndBand .78s var(--e) forwards;animation-delay:var(--d,0s)}
.js .bnd.in .bnd-l>em{animation:bndText .78s var(--e) forwards;animation-delay:var(--d,0s)}
@keyframes bndBand{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bndText{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .js .bnd .bnd-l::before{transform:scaleX(1)!important;animation:none!important}
  .js .bnd .bnd-l>em{clip-path:none!important;animation:none!important}
}

/* ============================================================
   ABOUT の本文（2026-08-08 オーナー指示
   「ABOUT の 01〜05 は削除して、ここは文章で語りたい」）

   **行長は 34em で止めること。** .wrap は 1000px 超あるので、
   指定しないと1行が 60 文字を超えて «読む気の起きない塊» になる。
   すぐ上の .brs-lead+.brs-p も同じ 34em で揃えてある。

   .abt（番号付きの5項目）の一式は残してあるが、いまはどこからも当たっていない。
   ============================================================ */
.abt-txt{margin-top:clamp(30px,4vw,54px);max-width:34em}
.abt-txt>p{margin-top:clamp(16px,1.8vw,26px);
  font-size:15.5px;font-weight:500;line-height:2;color:var(--ink-2)}
.abt-txt>p:first-child{margin-top:0}
/* **注記は本文と同じ級数にしないこと。** .abt-txt>p の指定が .brs-fine より強いので、
   font-size と色をここで言い直す（言い直さないと本文と見分けがつかない）。 */
.abt-txt>.brs-fine{margin-top:clamp(22px,2.6vw,34px);
  font-size:13px;line-height:1.9;color:var(--ink-3)}

/* ============================================================
   SERVICE と ABOUT の入れ替え（2026-08-08 オーナー指示
   「1ページ目の ABOUT と SERVICE の位置を入れ替えたい。
     SERVICE から紹介したほうがわかりやすい気がする」）

   順番だけでなく**地の色も入れ替えている**。
   赤(HERO) → 紙(SERVICE) → 赤(ABOUT) → 紙(WORKS) → 赤(CONTACT)。
   波は «次の区画の色で前へ食い込む» 装置なので、交互でないと4枚とも意味を失う。

   **ここの指定を消すと、SERVICE が «紙地に白文字» になって全部消える。**
   .sec.field / .sec.brs より後ろに置いて上書きしているだけなので、
   front.css の途中に同名の指定を足すときは順番に注意すること。
   ============================================================ */

/* ---- SERVICE：紙地 → 赤地 ---- */
/* ============================================================
   SERVICE の地は **赤**（2026-08-31 オーナー指示
   「SERVICEの背景は赤にして、FVの背景は白にしよう」）。

   経緯: 赤(2026-08-23) → 紙(2026-08-30) → **赤(2026-08-31・いま)**。
   理由は毎回同じで、**ファーストビューの地と同じ色にしないこと**。
   FV が白に戻ったので、SERVICE も白だと «白 → 白» で区画の切れ目が消える。
   いまは 白(FV) → 赤(SERVICE) → 青(ABOUT) → 白(WORKS) → 赤(CONTACT)。

   **地を変えたら中の色を全部ひっくり返すこと。**
   札の地・輪郭・アイコン・文字・真ん中の札の反転・締めのボタン、この6つ。
   直さないと赤の上に赤い輪と黒い文字が乗って何も読めない。

   **あわせて直すものが3つ、このファイルの外にある:**
     ・front.js の __serviceFx の CO … 地の等高線の色（赤 → 白）
     ・front-page.php の SERVICE の波 … to-paper → to-red、$co2 も白へ
     ・#value + .wsep（すぐ下） … ABOUT の波の «箱の地»。
       あれは紙色で、SERVICE に重ねて引き上げてあるので、赤地の上に白い矩形が出る
   ============================================================ */
#value{background:var(--field);color:var(--paper)}
/* 見出しは素の指定（.sec.service .brs-en/.brs-ja）が既に紙色なので触らなくてよいが、
   **地の色とセットで読める場所に書いておく。** 紙地に戻すときはここを墨と赤へ。 */
#value .brs-en{color:var(--paper)}
#value .brs-ja{color:var(--paper)}

/* ---- 札（真円）。素の指定は «紙地向け»（赤い輪・墨の文字）なので全部裏返す ---- */
#value .hs-circle{background:rgba(255,255,255,.07)}
#value .hs-ring circle{stroke:var(--paper)}
#value .hs-ico{color:var(--paper)}
#value .hs-en{color:rgba(255,255,255,.78)}
#value .hs-jp{color:var(--paper)}
#value .hs-p{color:rgba(255,255,255,.92)}
/* **真ん中に来た札だけは «紙で塗って墨の文字»。**
   素の指定は «赤で塗って白の文字» だが、赤地の上に赤ベタでは札が消える。
   **セレクタから .is-center を落とさないこと。** #value（ID）は
   .hs-circle.is-center .hs-ico（クラス3つ）より強いので、
   落とすと真ん中の札まで白文字に戻って紙の上で消える。 */
#value .hs-circle.is-center{background:var(--paper)}
#value .hs-circle.is-center .hs-ico,
#value .hs-circle.is-center .hs-en,
#value .hs-circle.is-center .hs-jp,
#value .hs-circle.is-center .hs-p{color:var(--ink)}
#value .hs-circle.is-center .hs-ring circle{stroke:var(--ink)}
/* 回る弧は札の «外»（inset が負）＝赤地の上なので白のまま */
#value .hs-spin circle{stroke:var(--paper)}

/* ---- 導入・仕切り・締め ---- */
#value .hs-mark,#value .hs-h,#value .hs-div-en,#value .hs-div-jp{color:var(--paper)}
#value .hs-lead,#value .hs-div-p{color:rgba(255,255,255,.9)}
#value .hs-hint{color:rgba(255,255,255,.72)}
#value .hs-map{color:var(--paper)}
#value .hs-map-c{fill:var(--paper)}
#value .hs-map-s circle{stroke:var(--paper)}
/* 締めのボタン。素は «墨の地に白文字»。赤地では沈むので紙へ反転 */
#value .brs-btn{background:var(--paper);color:var(--ink)}
#value .brs-btn:hover{background:var(--ink);color:var(--paper)}

/* 地の等高線。**赤い区画の既定（.40）に揃えること。**
   .26 は紙地に赤い線を流していたときの値で、白い線には薄すぎる。
   すぐ上の波（fxset="hero" の hfx も .40）と濃さが違うと、
   まっすぐな境界線のところで線の濃さだけが段になって見える。 */
#value .sec-fx{opacity:.40}

/* ============================================================
   ABOUT の波の «箱の地» を赤にする（2026-08-31）

   .wsep--to-red の箱の地は紙色で、しかも margin-top で
   前の区画へ 130〜300px 引き上げてある（「重ねても見えない」前提）。
   **その前提は «前の区画も紙» のときだけ成り立つ。**
   SERVICE を赤にした以上、ここを直さないと赤地の上に白い矩形が出る。
   曲線に沿う «ABOUT» の文字も赤なので、赤地では消える。白へ。
   ============================================================ */
#value + .wsep{background:var(--field)}
#value + .wsep .wsep-txt{fill:var(--paper);opacity:.9}

/* ---- ABOUT：紙地 → 赤地 ---- */
#statement{background:var(--field);color:var(--paper)}
#statement .brs-en{color:var(--paper)}
#statement .brs-ja{color:var(--paper)}
/* 透かしの巨大英字。墨の 5% は赤地だと «汚れ» にしか見えない */
/* **左に置かないこと。**（2026-08-30 オーナー指摘「ABOUT の文字が被ってる」）
   既定の left:0 だと、見出しの ABOUT とリード文の白い帯（左端から 594px）に
   まっすぐ重なる。右へ寄せて、帯の右側の空きに置く。 */
#statement .brs-wm{color:var(--paper);opacity:.10;left:auto;right:0}
#statement .abt-txt>p{color:rgba(255,255,255,.92)}
#statement .abt-txt>.brs-fine{color:rgba(255,255,255,.70)}
/* 右下の線画。CONTACT（.final）と同じ扱い */
#statement .brs-ilst{color:var(--paper);opacity:.13}
/* 等高線の濃さ。ヒーロー・SERVICE と同じ 0.40 */
#statement .sec-fx{opacity:.40}
.wsep[data-fxset="about"] .hfx{opacity:.40}

/* ============================================================
   ヘッダーを «浮いた丸い板» にする（2026-08-08 オーナー指示
   「apple Liquid Glass のように丸みのあるヘッダーにして」）

   **ガラスを .hd（全幅の帯）から .hd-in（中の行）へ移す。**
   .hd は «位置を決める枠» だけになり、そこに外側の余白を持たせて板を浮かせる。
   .hd に角丸を付けても、全幅なので «丸い» には見えない。

   **通常時（最上部）は板を出さない。**（オーナー指示「通常時は赤背景のままでいい」）
   ヒーローの赤がそのまま見える状態を保つ。板が出るのは stuck だけ。

   Liquid Glass の «厚み» は影の重ねで作る。1本ずつ役割がある:
     inset  0 1px 0        … 上のふちの照り返し（いちばん効く。消すと板が平らになる）
     inset  0 0 0 .5px     … 板の輪郭。地が明るいところで «縁» を保つ
     inset  0 -10px 20px   … 下側の内影。厚みのある «塊» に見せる
     outer  0 12px 32px    … 落ち影。浮いていることの根拠
   **どれか1本だけ消さないこと。** バランスが崩れて «ただの半透明の角丸» になる。

   角丸は 999px（＝高さの半分のカプセル）。**中途半端な 14〜20px にしないこと。**
   その値だといまの直線的な区画（波・破線・罫）と喧嘩して «角を落としただけ» に見える。

   **.hd-in の height は 74px のまま。** front.css の .svcx-figlist が
   `top:calc(74px + 16px)` で追従しているので、変えるならそちらも一緒に。
   ============================================================ */
.hd{background:transparent!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding:clamp(8px,.9vw,14px) clamp(8px,1.1vw,18px) 0}
.hd .wrap.hd-in{position:relative;border-radius:999px;
  padding:0 clamp(20px,2.2vw,34px);
  transition:background .45s var(--e),box-shadow .45s var(--e),
             backdrop-filter .45s var(--e),-webkit-backdrop-filter .45s var(--e)}
.hd.stuck .wrap.hd-in{
  background:linear-gradient(180deg,
      rgba(255,255,255,.42) 0%,
      rgba(255,255,255,.06) 34%,
      rgba(255,255,255,0) 62%,
      rgba(255,255,255,.16) 100%),
    rgba(255,255,255,.55);
  backdrop-filter:blur(20px) saturate(190%);
  -webkit-backdrop-filter:blur(20px) saturate(190%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),
             inset 0 0 0 .5px rgba(255,255,255,.35),
             inset 0 -10px 20px -14px rgba(20,23,26,.20),
             0 12px 32px -16px rgba(20,23,26,.36),
             0 2px 8px -4px rgba(20,23,26,.16)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd.stuck .wrap.hd-in{background:rgba(255,255,255,.95)}
}

/* 制作サンプルのモーダルを開いているあいだ、背後を動かさない。
   **.nav-open と共有しないこと。** バーガーメニューを閉じた拍子に
   モーダル側の固定まで解除される。 */
body.modal-open{overflow:hidden}

/* 右下 CTA。閉じるボタンを外し、矢印を末尾へ回した（2026-08-08 オーナー指示
   「CLOSE できないようにして、CLOSE の文字はいらない。右矢印は一番右に配置して」）。
   **左右の余白を揃えること。** 以前は左に閉じるボタンがあったので右だけ広く取っていた。
   その名残のままだと、末尾に来た丸が画面の縁から離れて «一番右» に見えない。 */
.fcta{padding:18px clamp(18px,1.9vw,26px);gap:0}
.fcta-body{gap:clamp(14px,1.6vw,22px)}
/* 丸は末尾。**hover の動きは右向きのまま。** 文の後ろに来たので «送り出す» 向きが合う */
.fcta-mark{order:2}
.fcta-txt{order:1}
@media (max-width:640px){
  .fcta{padding:12px 14px}
}

/* ============================================================
   ヘッダーのガラスを作り直し（2026-08-08 オーナー指摘
   「もっと apple Liquid Glass にして。ガラス感ない」）

   **前の版が «ガラスに見えなかった» 原因は、白を 55% も乗せていたこと。**
   透けないものはガラスに見えない。ここでは 12% まで落としてある。
   そのぶん赤の区画の上では墨のナビが沈むので、**裏の地色を測って白文字に
   切り替える**（front.js の paintUnder が .over-dark を付け外しする）。
   参考にした web.chibit.jp も header に over-dark を付け外ししている。

   ガラスに見せている要素は4つ。**どれか1つでも欠けると «半透明の板» に戻る。**
     ① 透過   … 地は 12%。blur と saturate で «厚みのある透明» を作る
     ② 屈折   … ::before。**縁だけ** 別のフィルタを掛ける。
                 中央を mask で抜いて、リムだけ強く saturate + brightness する。
                 レンズの縁で色が寄って明るくなる現象の代わり。**これが効く。**
     ③ 照り返し … ::after の縦グラデーション。上のふちと下のふちだけ白を差す
     ④ 厚み   … inset の落ち影。板の «中» に影を落として «板» ではなく «塊» にする

   **::before / ::after は z-index:-1。** .hd-in に isolation:isolate を掛けてあるので、
   地より上・中身（ロゴとナビ）より下に入る。isolate を外すとページ全体の背面へ抜ける。
   ============================================================ */
.hd .wrap.hd-in{isolation:isolate}

.hd.stuck .wrap.hd-in{
  /* **12% では足りない。**（2026-08-30 実測）
     WORKS の事例サムネイル（暗い写真）の上でヘッダーが通り、墨のナビが消えていた。
     区画の地は紙地なので over-dark は付かない＝墨のまま。
     28% + brightness で «透けているが下が明るい» 状態を作る。
     **55% まで戻さないこと。** 透けないものはガラスに見えない（2026-08-08 の却下）。 */
  background-color:rgba(255,255,255,.28);
  backdrop-filter:blur(26px) saturate(210%) brightness(1.14);
  -webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 0 0 .5px rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 0 12px 26px -20px rgba(20,23,26,.45),
    0 16px 40px -20px rgba(20,23,26,.42),
    0 3px 10px -6px rgba(20,23,26,.20)}

/* ② 縁の屈折。**mask の内側を抜くこと。** 全面に掛けると単に明るくなるだけで縁が立たない */
.hd.stuck .wrap.hd-in::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  backdrop-filter:blur(3px) saturate(280%) brightness(1.22);
  -webkit-backdrop-filter:blur(3px) saturate(280%) brightness(1.22);
  -webkit-mask-image:radial-gradient(118% 155% at 50% 50%,transparent 50%,#000 94%);
          mask-image:radial-gradient(118% 155% at 50% 50%,transparent 50%,#000 94%)}

/* ③ 照り返し */
.hd.stuck .wrap.hd-in::after{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.10) 24%,
    rgba(255,255,255,0) 52%,
    rgba(255,255,255,.05) 80%,
    rgba(255,255,255,.22) 100%)}

/* 裏が濃い地（赤の区画）のとき。**墨のナビは沈むので白へ。**
   地の白 12% では白文字が読めないので、ここだけ墨を差して落ち着かせる。 */
/* **18% では足りない。**（2026-08-30 実測）
   波の区切りも «濃い» 扱いに変えたので、板の裏には濃い色と紙地が半分ずつ来る。
   18% だと紙地の側で白文字が消える。34% まで上げると、紙地
   （#F0F0F5）の上でも白文字が 3.4:1、赤・青の上では 9:1 前後になる。 */
.hd.stuck.over-dark .wrap.hd-in{background-color:rgba(20,23,26,.34)}
/* **白文字には影を付けること。**（2026-08-30 実測）
   板は «透けること» が条件なので地を濃くして稼げない。
   CONTACT のフォーム（白いカード）の上をヘッダーが通ると、
   墨 34% の板は明るい灰になり、**白文字が 3:1 まで落ちて読めなかった。**
   影なら «濃い地の上» の見え方を損なわずに、明るい地の上でも輪郭が残る。 */
.hd.stuck.over-dark .nav a,
.hd.stuck.over-dark .hd-cta{color:#fff;
  text-shadow:0 1px 2px rgba(20,23,26,.55),0 0 8px rgba(20,23,26,.35)}
.hd.stuck.over-dark .nav a::after{background:#fff}
.hd.stuck.over-dark .hd-cta{border-color:#fff}
.hd.stuck.over-dark .burger span{background:#fff}
.hd.stuck.over-dark .logo{filter:brightness(0) invert(1)}

/* backdrop-filter が無い環境。**ここは «ガラス» を諦めて読めることを取る。** */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd.stuck .wrap.hd-in{background-color:rgba(255,255,255,.95)}
  .hd.stuck .wrap.hd-in::before{display:none}
  .hd.stuck.over-dark .wrap.hd-in{background-color:rgba(20,23,26,.86)}
}

/* ============================================================
   ガラスの板を «ナビだけ» にする（2026-08-08 オーナー指示
   「ヘッダーの apple リキッドグラスをロゴのところで切って、
     SERVICE〜COMPANY までにできる？」）

   板を .hd-in（ロゴを含む行全体）から .nav（項目6つ）へ移す。
   ロゴはガラスの外に出て、地の上に直接置かれる。

   **.hd-in 側の板を «消す» のではなく «無効化» していること。**
   前段の指定（Liquid Glass の4層）はそのまま残してあり、ここで打ち消している。
   ナビだけに戻すのをやめたくなったら、このブロックを消せば板が行全体に戻る。

   **狭い画面ではバーガーが板を引き継ぐこと。** 900px 以下で .nav は display:none に
   なるので、そこだけ板が消えて «ロゴとバーガーが裸で浮く» 状態になる。
   同じガラスを丸いボタンとしてバーガーに掛けてある。
   ============================================================ */
/* 行全体の板を解除 */
.hd.stuck .wrap.hd-in{
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.hd.stuck .wrap.hd-in::before,
.hd.stuck .wrap.hd-in::after{content:none}

/* ナビを板にする。**padding を削らないこと。** 文字が縁に張り付いてガラスに見えなくなる */
.hd .nav{position:relative;isolation:isolate;border-radius:999px;
  padding:11px clamp(20px,2vw,30px);
  transition:background-color .45s var(--e),box-shadow .45s var(--e),
             backdrop-filter .45s var(--e),-webkit-backdrop-filter .45s var(--e)}
/* 板の中では下線が窮屈なので、リンクの上下の余白を詰める */
.hd .nav a{padding:2px 0}

.hd.stuck .nav,
.hd.stuck .burger{
  /* **12% では足りない。**（2026-08-30 実測）
     WORKS の事例サムネイル（暗い写真）の上でヘッダーが通り、墨のナビが消えていた。
     区画の地は紙地なので over-dark は付かない＝墨のまま。
     28% + brightness で «透けているが下が明るい» 状態を作る。
     **55% まで戻さないこと。** 透けないものはガラスに見えない（2026-08-08 の却下）。 */
  background-color:rgba(255,255,255,.28);
  backdrop-filter:blur(26px) saturate(210%) brightness(1.14);
  -webkit-backdrop-filter:blur(26px) saturate(210%) brightness(1.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 0 0 .5px rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 0 12px 26px -20px rgba(20,23,26,.45),
    0 16px 40px -20px rgba(20,23,26,.42),
    0 3px 10px -6px rgba(20,23,26,.20)}

/* 縁の屈折と照り返し。中央を mask で抜いてリムだけ効かせる（前段と同じ考え方） */
.hd.stuck .nav::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  backdrop-filter:blur(3px) saturate(280%) brightness(1.22);
  -webkit-backdrop-filter:blur(3px) saturate(280%) brightness(1.22);
  -webkit-mask-image:radial-gradient(118% 155% at 50% 50%,transparent 50%,#000 94%);
          mask-image:radial-gradient(118% 155% at 50% 50%,transparent 50%,#000 94%)}
.hd.stuck .nav::after{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.10) 24%,
    rgba(255,255,255,0) 52%,
    rgba(255,255,255,.05) 80%,
    rgba(255,255,255,.22) 100%)}

/* 裏が赤い区画のとき */
.hd.stuck.over-dark .nav,
.hd.stuck.over-dark .burger{background-color:rgba(20,23,26,.18)}

/* バーガーは丸。**44px の当たり判定を縮めないこと** */
.hd .burger{border-radius:50%;
  transition:background-color .45s var(--e),box-shadow .45s var(--e),
             backdrop-filter .45s var(--e),-webkit-backdrop-filter .45s var(--e)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd.stuck .nav,.hd.stuck .burger{background-color:rgba(255,255,255,.95)}
  .hd.stuck .nav::before{content:none}
  .hd.stuck.over-dark .nav,.hd.stuck.over-dark .burger{background-color:rgba(20,23,26,.86)}
}
/* **over-dark 版の板も一緒に解除すること。**（2026-08-08）
   前段に .hd.stuck.over-dark .wrap.hd-in{background-color:...} があり、
   クラス3つぶん強いので、上の .hd.stuck .wrap.hd-in{background:none} では消えない。
   行全体に «濃い帯» だけが残って、ロゴの後ろに四角い影が出る。 */
.hd.stuck.over-dark .wrap.hd-in{background-color:transparent}

/* ============================================================
   ABOUT の地を «青» にする（2026-08-08 オーナー指示
   「ABOUT の背景だけ、青にしよう」）

   青は #1100FF。**リード文で使っている色と同じ値**にしてある
   （gunze.co.jp/130th/ の実測値。ここで別の青を持ち込むと、
   同じ区画に2種類の青が並んで «塗り分けの失敗» に見える）。

   **地が青になったので、リード文の帯は白へ反転させること。**
   帯は currentColor で塗っているので、そのままだと青地に青帯＝完全に消える。
   帯を紙色、文字を青にして «白い付箋» の見え方へ入れ替える。

   **波は2枚とも青に揃えること。** ABOUT の前後（to-red / to-paper）が
   運ぶ «次の区画の色» は既定で赤なので、片方でも赤のままだと
   区画の地と波の色が食い違って «塗り残し» に見える。
   波側は inc/chrome.php の $tint='blue' で .wsep--blue が付く。
   ============================================================ */
/* **--blue はここで定義しないこと。** このファイル冒頭の :root に1本化してある
   （2026-08-31）。ここにもう1つ置いていたので **同じ名前が2箇所** にあり、
   後ろのこれが勝つ状態だった。片方だけ直すと色が変わらず、原因を探す羽目になる。 */
#statement{background:var(--blue)}

/* 波。塗り（次の区画の色）と、上に敷く地の両方を差し替える */
.wsep--to-red.wsep--blue .wsep-fill{fill:var(--blue)}
.wsep--to-paper.wsep--blue{background:var(--blue)}
/* 紙地 → 青 の波では、曲線に沿う文字は紙地（SERVICE 側）に乗る。
   赤のままだと次に来る青と噛み合わないので青へ。 */
.wsep--to-red.wsep--blue .wsep-txt{fill:var(--blue);opacity:.85}

/* リード文の帯を反転。**この2行を消すとリード文が消える。** */
#statement .brs-lead{color:var(--paper)}
#statement .bnd-l>em{color:var(--blue)}

/* WORKS の巨大英字だけ青に（2026-08-08 オーナー指示「WORKS 見出しは赤じゃなくて青に」）。
   **front.js の headTopo が getComputedStyle(el).color を文字の塗りに使う**ので、
   ここを変えれば «文字の中を等高線が流れる» 版の塗りも一緒に青になる。
   別の場所で色を指定し直す必要はない。
   和文ラベル（制作サンプル）は墨のまま。 */
#works .brs-en{color:var(--blue)}

/* ============================================================
   ロゴにも同じガラスを敷く（2026-08-08 オーナー指示
   「左上のロゴの部分だけ、Apple リキッドグラス適用して」）

   ナビ・バーガーと**同じ値を3回書かない**。ここで変数に括り出して、
   3つとも同じものを参照させている。**上のブロックの直値はこれで上書きされる。**
   色や blur を触るときは、この :root だけ直せば3つとも揃って変わる。

   **ロゴの左に padding が入るぶん、ロゴは少し右へ動く。**
   negative margin で押し戻さないこと。ナビの板は右端が内容領域の縁に
   揃っているので、ロゴ側も左端を縁に揃えたほうが左右で対称になる。
   ============================================================ */
:root{
  --glass-bg:rgba(255,255,255,.12);
  --glass-bg-dark:rgba(20,23,26,.18);
  --glass-blur:blur(26px) saturate(210%) brightness(1.04);
  --glass-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    inset 0 0 0 .5px rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(255,255,255,.22),
    inset 0 12px 26px -20px rgba(20,23,26,.45),
    0 16px 40px -20px rgba(20,23,26,.42),
    0 3px 10px -6px rgba(20,23,26,.20);
  /* 縁の屈折と、上下のふちの照り返し */
  --glass-rim:blur(3px) saturate(280%) brightness(1.22);
  --glass-rim-mask:radial-gradient(118% 155% at 50% 50%,transparent 50%,#000 94%);
  --glass-sheen:linear-gradient(180deg,
    rgba(255,255,255,.44) 0%,
    rgba(255,255,255,.10) 24%,
    rgba(255,255,255,0) 52%,
    rgba(255,255,255,.05) 80%,
    rgba(255,255,255,.22) 100%);
}

/* ロゴの器。**高さをナビの板と揃えること**（上下 11px ＋ ロゴ 28px ＝ 50px）。
   2026-08-11 にロゴを 22→28px にしたので、padding を 14→11px に詰めて 50px を保った。 */
.hd .brand{position:relative;isolation:isolate;display:flex;align-items:center;
  padding:11px clamp(16px,1.6vw,22px);border-radius:999px;
  transition:opacity .3s,background-color .45s var(--e),box-shadow .45s var(--e),
             backdrop-filter .45s var(--e),-webkit-backdrop-filter .45s var(--e)}

.hd.stuck .brand,
.hd.stuck .nav,
.hd.stuck .burger{
  background-color:var(--glass-bg);
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-shadow)}
.hd.stuck.over-dark .brand,
.hd.stuck.over-dark .nav,
.hd.stuck.over-dark .burger{background-color:var(--glass-bg-dark)}

.hd.stuck .brand::before,
.hd.stuck .nav::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;
  backdrop-filter:var(--glass-rim);-webkit-backdrop-filter:var(--glass-rim);
  -webkit-mask-image:var(--glass-rim-mask);mask-image:var(--glass-rim-mask)}
.hd.stuck .brand::after,
.hd.stuck .nav::after{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;background:var(--glass-sheen)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hd.stuck .brand{background-color:rgba(255,255,255,.95)}
  .hd.stuck .brand::before{content:none}
  .hd.stuck.over-dark .brand{background-color:rgba(20,23,26,.86)}
}

/* ============================================================
   ロゴは反転させない（2026-08-11）
   組み合わせロゴが «黒＋白＋赤» の3色になったので、それまでの
   filter:brightness(0) invert(1) が使えなくなった。**brightness(0) は
   黒も白も一度黒に潰す**ので、反転すると二色のシンボルが «白い塊» になる
   （実際にそうなった。オーナー「シンボルロゴは白と黒のままにして」）。

   代わりに **器を必ず明るくして、ロゴは常に原本の色で置く。**
   モーフィングの canvas は一度しか焼かないので、地の色ごとに画像を
   差し替える手は使えない（背景画像を変えても canvas は古いまま）。
   フィルタか器か、の二択で器を選んでいる。

   器は**不透明の紙色**にすること。半透明のガラスだと赤が透けて
   欧文が濁る（試して却下）。
   ============================================================ */
body:has(.hero) .hd:not(.stuck) .logo,
body:has(.pghead) .hd:not(.stuck) .logo,
.hd.stuck.over-dark .logo{filter:none}

body:has(.hero) .hd:not(.stuck) .brand,
body:has(.pghead) .hd:not(.stuck) .brand{
  background-color:var(--paper);box-shadow:0 2px 14px rgba(20,23,26,.10)}
/* 暗い区画に重なったときも器は明るいまま。ナビ側は今までどおり暗いガラス */
.hd.stuck.over-dark .brand{background-color:var(--glass-bg)}

/* ============================================================
   中見出しもヒーローと同じ書体に（2026-08-08 オーナー指示
   「中見出しもヒーローの いいサイトで。 と同じフォントにして。
     SERVICE の Webサイト制作 とかの見出しとか、事例の会社名とか、
     決まってない段階でも構いません のところとか」）

   対象は4つ:
     .svcx-jp      … SERVICE の各行（Webサイト制作 / 運用保守支援 …）
     .wk-real-name … 事例の会社名
     .wk-name      … 制作サンプルのカード名（事例と同じ «名前» なので揃えた）
     .ct-lead      … CONTACT の「決まってない段階でも構いません。」

   **本文には広げないこと。** Dela Gothic One はウェイトが1つしか無い display 書体で、
   長い文に当てると真っ黒な塊になる。当てていいのは «ヒーローの主コピー・区画のリード・
   ここに挙げた中見出し» まで。.abt-txt の段落や .svcx-p には絶対に入れない。

   **font-weight は 400 に戻すこと。** 元は 600/700 を指定していたが、
   この書体には太さが1つしか無いのでブラウザが合成太字（fake bold）を作り、
   輪郭が濁る。字間と行間も、字面が大きいぶん既定より開ける。
   ============================================================ */
.svcx-jp,
.wk-real-name,
.wk-name,
.ct-lead{font-family:var(--jp-disp);font-weight:400;letter-spacing:.03em}
/* 行間は要素ごとに。**詰めたままにしないこと。** 字面が大きく行が噛む */
.svcx-jp{line-height:1.5}
.wk-real-name{line-height:1.5}
.wk-name{line-height:1.55}
.ct-lead{line-height:1.7}

/* ============================================================
   ABOUT を «空» にして、その上に島を置く（2026-08-09 オーナー指示）

   参考画像（スクリーンショット 2026-08-09 14.28.05）と島のトーンが合わない、を
   突き詰めた結果、**原因は島ではなく «置き先がベタ塗りだったこと»** だった。
   あちらの絵は空のグラデーション・雲・光の粒＝ «空気» で成立している。
   透過PNG1枚では原理的に持てないので、ここで作る。

   **島の画像に空を焼き込まないこと。** 焼き込むと区画と絵の境目が出る。
   島は透過のまま、空はこの CSS が持つ。
   ============================================================ */
#statement{
  /* 上を深く、地平へ向けて明るく。**単色に戻さないこと**（島が浮く）。
     両端の色は --sky-top / --sky-bottom と必ず揃えること。
     前後の波がその2色を引き継いで、青の区画が1つの空として繋がる。 */
  background:
    /* **地平の光を «下端まで» 届かせないこと。**（2026-08-09 オーナー指摘「切れ目が気になる」）
       ここが 100% まで生きていると、区画の下端だけが明るくなり、
       次の波が単色から始まるぶん **境目に横一本の段差**が出る。

       **«中心 + 縦半径 <= 100%» にすること。**（2026-08-09 に一度外した）
       radial-gradient の 0%〜100% は «半径に対する割合» なので、
       中心 88% / 縦半径 62% だと下端はまだ半径の21%地点＝光が3割残る。
       中心 62% + 縦半径 34% = 96% で、下端は素の終端色になる。 */
    /* **シアンの地平光は入れないこと。**（2026-08-09）
       下半分が水色に寄る原因だった。空の «明るくなる» は線形だけで足りる。 */
    linear-gradient(180deg, var(--sky-top) 0%, #02339C 42%, var(--sky-bottom) 100%),
    /* **下敷きの «段» も必ず置くこと。**（2026-08-30 実測）
       上のグラデーションは «食い込みのぶん» 下げてあるので、箱の上下端では
       background-color（--sky-top）が出る。下端は端数画素ぶんだけそれが混ざり、
       **区画の切れ目に濃い横線が1本出ていた**（実測 rgb(26,38,231) が1行）。
       上は --sky-top（波が覆う帯）／下は --sky-bottom（次の波の開始色）の
       2段の下敷きを敷いて、どちらの端でも色が食い違わないようにする。 */
    linear-gradient(180deg, var(--sky-top) 0 var(--ovl), var(--sky-bottom) var(--ovl));

  /* **グラデーションの起点を «波の食い込み» のぶん下げること。**（2026-08-09）
     波は margin-bottom のマイナスで区画の上に重なっている。つまり
     **波の下端は «区画の上端» ではなく «上端＋食い込み» の位置**にある。
     起点を区画の上端に置くと、その地点で区画側はもう先へ進んでおり、
     波の終端色（#0B00C4）と食い違って横一本の線になる。

     --ovl は .wsep の margin-bottom と同じ値。**片方だけ変えないこと。**
     上に隠れる帯は波が覆うので、background-color で埋めておけば足りる。 */
  --ovl:clamp(120px,21vw,330px);
  background-color:var(--sky-bottom);
  background-repeat:no-repeat,no-repeat;
  background-position:0 var(--ovl),0 0;
  background-size:100% calc(100% - var(--ovl)),100% 100%}

.abt-sky{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
/* 雲。**輪郭を作らないこと。** ぼかした楕円3つで «帯» に見せる */
.abt-cloud{position:absolute;border-radius:50%;filter:blur(28px);opacity:.5;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}
.abt-cloud.c1{left:-6%;top:12%;width:52%;height:16%}
.abt-cloud.c2{right:-10%;top:26%;width:46%;height:12%;opacity:.38}
.abt-cloud.c3{left:22%;top:48%;width:64%;height:14%;opacity:.28}
/* 光の粒。**画像を足さないこと。** 点は背景グラデーションの繰り返しで作る */
.abt-spark{position:absolute;inset:0;opacity:.55;
  background:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff, transparent 100%),
    radial-gradient(1.4px 1.4px at 27% 42%, #fff, transparent 100%),
    radial-gradient(2px 2px at 41% 12%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 30%, #fff, transparent 100%),
    radial-gradient(1.3px 1.3px at 71% 8%,  #fff, transparent 100%),
    radial-gradient(1.8px 1.8px at 83% 36%, #fff, transparent 100%),
    radial-gradient(1.4px 1.4px at 92% 20%, #fff, transparent 100%),
    radial-gradient(1.6px 1.6px at 8%  56%, #fff, transparent 100%),
    radial-gradient(1.5px 1.5px at 34% 66%, #fff, transparent 100%),
    radial-gradient(1.7px 1.7px at 66% 60%, #fff, transparent 100%)}

/* 島。**本文の «裏» に置くこと。** .sec>.wrap が z-index:3 なので文字は上に残る */
.abt-isle{position:absolute;z-index:1;pointer-events:none;
  right:clamp(-8%,-2vw,0%);bottom:-6%;width:clamp(560px,58vw,1180px)}
.abt-isle img{display:block;width:100%;height:auto;
  /* 空の中に置いた «物» として、落ち影を1枚だけ足す */
  filter:drop-shadow(0 28px 46px rgba(0,14,52,.42))}

/* **島の裏に等高線を残さないこと。** 空の上に線が走ると «図面» に見える */
#statement .sec-fx{opacity:.14}
/* 元からある淡い線画は島と喧嘩するので出さない */
#statement .brs-ilst{display:none}

@media (max-width:1000px){
  /* 狭い画面では本文の下へ回す。**本文に重ねないこと**（読めなくなる） */
  .abt-isle{position:relative;right:auto;bottom:auto;width:100%;
    margin:clamp(24px,5vw,48px) 0 calc(-1 * clamp(20px,6vw,60px))}
  .abt-sky .abt-cloud{filter:blur(18px)}
}

/* ============================================================
   島の着地（2026-08-09 オーナー指示「どんと出てくる。派手に」）

   間の取り方が全部。**行き過ぎてから戻すこと。**
   等速で拡大すると «ただ大きくなる» で、重さが出ない。
     0〜45%  … 小さく高いところから落ちてくる（速い）
     45〜62% … 行き過ぎる（1.10倍・少し回る）＝着地の瞬間
     62〜100%… 弾んで収まる

   **衝撃波と閃光は 45% ちょうどに出すこと。** 早いと «光ってから落ちる» に見える。
   ============================================================ */
.abt-isle{isolation:isolate}
.abt-isle img{position:relative;z-index:2}
/* 着地の輪。**島より後ろ（z-index:1）。** 前に出すと島が白く覆われる */
.abt-ring,.abt-flash{position:absolute;left:50%;top:62%;z-index:1;
  border-radius:50%;pointer-events:none;opacity:0;
  transform:translate(-50%,-50%) scale(.2)}
.abt-ring{width:78%;aspect-ratio:1/.42;border:3px solid rgba(255,255,255,.9)}
.abt-flash{width:56%;aspect-ratio:1/.5;
  background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0))}

/* **着地アニメは «更地» にだけ当てること。**（2026-08-09）
   img 全体に当てていたので、上物（.isle-up）にも掛かって
   isleRise の初期状態（opacity:0）が打ち消され、最初から建っていた。 */
.js .abt-isle img.isle-land{opacity:0}
.js .abt-isle.in img.isle-land{animation:isleDrop 1.25s var(--e-pop) both}
.js .abt-isle.in .abt-ring{animation:isleRing 1.05s cubic-bezier(.16,.8,.3,1) .5s both}
.js .abt-isle.in .r2{animation-delay:.62s;animation-duration:1.25s}
.js .abt-isle.in .abt-flash{animation:isleFlash .62s ease-out .48s both}

@keyframes isleDrop{
  0%  {opacity:0;transform:translate3d(0,-32%,0) scale(.34) rotate(-9deg)}
  22% {opacity:1}
  45% {transform:translate3d(0,0,0) scale(1.10) rotate(2.4deg)}   /* 着地＝行き過ぎ */
  62% {transform:translate3d(0,-2.2%,0) scale(.965) rotate(-1.2deg)}
  78% {transform:translate3d(0,.6%,0) scale(1.018) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
@keyframes isleRing{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.18)}
  12% {opacity:.95}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}
}
@keyframes isleFlash{
  0%  {opacity:0;transform:translate(-50%,-50%) scale(.3)}
  25% {opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
/* 光の粒は島が着いてから瞬く。**同時に出さないこと**（着地が埋もれる） */
.js .abt-isle.in ~ .wrap .brs-lead{}
.js .abt-sky .abt-spark{animation:sparkPulse 4.2s ease-in-out infinite}
@keyframes sparkPulse{0%,100%{opacity:.34}50%{opacity:.72}}

@media (prefers-reduced-motion:reduce){
  .js .abt-isle img.isle-land{opacity:1!important;animation:none!important}
  .abt-ring,.abt-flash{display:none}
  .js .abt-sky .abt-spark{animation:none}
}

/* ---- 島の中身（2026-08-09）。base は動かない1枚、holo と車だけ別 ---- */
/* 旧 .isle-base は .isle-land に置き換わった（2026-08-09） */
/* ホログラムは «浮いている» ので、ゆっくり上下する */
@keyframes holoFloat{0%,100%{transform:translateY(0);opacity:.92}50%{transform:translateY(-1.1%);opacity:1}}

/* 車。**中心を軌道の点に合わせる**ので translate(-50%,-50%) は外さないこと。
   幅 16.6667% は «スプライト400px ÷ 島2400px»。島の画像を差し替えたら見直す。 */
.isle-van{position:absolute;z-index:4;width:16.6667%;aspect-ratio:400/328;
  background:center/contain no-repeat;pointer-events:none;opacity:0;
  transition:opacity .4s linear}
/* **opacity は front.js が管理する。**（2026-08-09）
   建物の裏へ回ったとき隠すため。ここで 1 に固定すると裏側でも手前に出る。 */
.abt-isle .isle-van{opacity:0}
@media (prefers-reduced-motion:reduce){
  .js .abt-isle.in .isle-holo{animation:none}
}

/* ============================================================
   空を «青の区画ぜんぶ» に通す（2026-08-09 オーナー指示
   「背景のグラデーションみたいなの、一部分だけじゃなくて、青の背景全体に適用して」）

   ABOUT の中だけグラデーションにしていたので、**前後の波が #1100FF のベタのまま**で、
   境目に «帯» が出ていた。波が運ぶ青も、区画のグラデーションの端と同じ色に合わせる。

     ABOUT の上端 = #0B00C4（濃い）… 手前の波（to-red）が運ぶ色
     ABOUT の下端 = #4E86FF（明るい）… 次の波（to-paper）が敷く色

   **片方だけ直さないこと。** どちらかがベタのままだと、そこだけ線が出る。
   ============================================================ */
:root{
  --sky-top:#002571;
  /* **下端を水色にしないこと。**（2026-08-09 オーナー指摘
     「ABOUT セクションの下部が水色になっちゃってるのもやめたい」）
     #4E86FF まで明るくすると «空» ではなく «水色の面» に見える。青の範囲で止める。 */
  --sky-bottom:#0A47C4;
}
/* 手前の波。曲線から下（＝ABOUT側）を «空の上端» の色で塗る */
/* **青の波の塗りはここで指定しないこと。**（2026-08-09）
   塗りは SVG 側の <linearGradient>（class="wsep-fillg"）が持っている。
   CSS の fill は presentation attribute より強いので、ここに1行でも書くと
   波の中の傾斜が単色に潰れ、境目の «段差» が戻る。 */
/* 次の波。曲線から上（＝ABOUT側）に «空の下端» を敷く。
   ここだけグラデーションにして、区画の下端から滑らかに繋ぐ */
/* **区画の下端の色ちょうどから始めること。** 1段でも違うと横線になる。
   区画側の放射光を 92% で消し切ってあるので、境目は素の --sky-bottom。 */
.wsep--to-paper.wsep--blue{
  background:linear-gradient(180deg, var(--sky-bottom) 0%, #1457D8 100%)}
/* 上側の継ぎ目。波が運ぶ青は «区画の上端の色» と同じにしてある（--sky-top）。
   **波の箱の «地» も同じ色にすること。** 既定は紙色なので、曲線の上に紙が覗く。 */
/* **箱の地は «上の区画の色» に合わせること。**（2026-08-23 オーナー指摘「境界線がおかしい」）
   この波の上は SERVICE。
   2026-08-23 に SERVICE を赤にしたとき、ここも赤へ変えた。
   **2026-08-30 に SERVICE を紙へ戻したので、地も紙へ戻す**（同じ指摘が再発した）。
   **2026-08-31 に SERVICE を赤へ戻したので、また赤。**
   ただし上書きはここではなく `#value + .wsep`（SERVICE の色を決めている場所）に
   1箇所だけ置いた。**同じことを2箇所で決めないため。**
   合っていないと 赤 → 波 → 青 の継ぎ目に «定規で引いたような線» が出る。 */
/* 曲線に沿う文字。**この指定は SERVICE が紙地だった頃のもの。**
   いまは #value + .wsep .wsep-txt（ID を含むぶん強い）が白へ上書きしている。
   SERVICE を紙へ戻したら、あちらを消せばこれが効く。 */
.wsep--to-red.wsep--blue .wsep-txt{fill:var(--blue);opacity:.85}

/* **波の中の等高線も、区画側と同じ濃さにすること。**（2026-08-09）
   区画（#statement .sec-fx）を 0.14 に落としたのに、波の中は 0.40 のままで、
   境目で «線の濃さが変わる» ぶんが横一本の筋として見えていた。
   継ぎ目の段差は «地の色» だけでなく «上に乗る veil» でも起きる。 */
.wsep[data-fxset="about"] .hfx{opacity:.14}

/* 区画の上下端を、隣の波が運ぶ色ちょうどへ収束させる（2026-08-09）。
   **雲・光の粒・等高線より «後» に置くこと。** 先に置くとそれらが上に乗って意味がない。 */
/* .abt-fade（上下端の収束帯）は撤去。**戻さないこと。**
   帯が切れる位置に、それまでより濃い横線が出る。 */
/* 島は帯より前へ。**帯に島が隠れないように。** */
.abt-isle{z-index:2}

/* ---- 島を «ぷかぷか» 浮かせる（2026-08-09 オーナー指示）----
   着地（isleDrop 1.25s）が終わってから始めること。**同時に走らせないこと。**
   落下中に上下運動が重なると、着地の «止まる» 瞬間が消える。 */
.js .abt-isle.in img.isle-land{animation:isleDrop 1.25s var(--e-pop) both,
  isleBob 6.4s ease-in-out 1.35s infinite}
@keyframes isleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6%)}}
/* ホログラムは島とわずかにずらす。**同じ周期だと «1枚の絵» に見える。** */

/* 島の落ち影。**filter の drop-shadow をやめた。**（2026-08-09 オーナー指摘
   「島の真下にも影が線になっちゃってる」）
   区画が overflow:hidden なので、下端で影が断ち切られて横一本の線になっていた。
   区画の底に触れない «楕円のぼかし» に置き換える。 */
.abt-isle img{filter:none}
.abt-isle{bottom:2%}
.abt-isle::after{content:"";position:absolute;left:8%;right:8%;bottom:4%;height:9%;
  z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(0,14,52,.34),rgba(0,14,52,0));
  filter:blur(10px)}
.js .abt-isle.in::after{animation:isleShade 6.4s ease-in-out 1.35s infinite}
@keyframes isleShade{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.7;transform:scale(.93)}}
@media (prefers-reduced-motion:reduce){
  .js .abt-isle.in img.isle-land{animation:none}
  .js .abt-isle.in::after{animation:none}
}

/* 雲は撤去した（2026-08-09 オーナー指示「ABOUTの白いモヤはいらない」）。
   .abt-cloud の指定は残っているが、いまはどこからも当たっていない。
   **戻すなら «青地の上では汚れに見えた» ことを踏まえて、輪郭のある形にすること。** */
.abt-cloud{display:none}

/* ============================================================
   更地 → 上物がせり上がる（2026-08-09 オーナー指示）

   .isle-land … 更地。島が着地したあと、そのまま浮いている
   .isle-up   … 上物。**スクロールが区画の 35% を過ぎてから** せり上がる

   «地面から生えてくる» をマスクで正しく作るのは、地面が楕円なので難しい。
   ここでは **«潰れた状態から立ち上がる»** で代用している。
   scaleY(.04) から 1 へ、行き過ぎてから戻す。原点は島の «面» のあたり（50% 74%）。
   **原点を center にしないこと。** 島の中心で潰れて «縮む» に見える。
   ============================================================ */
.abt-isle .isle-land,
.abt-isle .isle-up{position:absolute;left:0;top:0;width:100%;height:auto;display:block}
.abt-isle .isle-land{position:relative}
.abt-isle .isle-up{transform-origin:50% 74%;will-change:transform,opacity}

.js .abt-isle .isle-up{opacity:0;transform:translateY(3%) scaleY(.04)}
/* 島が着地してから積む。**同時に出さないこと**（着地の «止まる» 瞬間が消える） */
.js .abt-isle.built .isle-up{animation:isleRise .82s var(--e-pop) both}
.js .abt-isle.built .u1{animation-delay:0s}
.js .abt-isle.built .u2{animation-delay:.16s}
.js .abt-isle.built .u3{animation-delay:.30s}
.js .abt-isle.built .u4{animation-delay:.44s}
@keyframes isleRise{
  0%  {opacity:0;transform:translateY(3%) scaleY(.04)}
  18% {opacity:1}
  58% {transform:translateY(-1.4%) scaleY(1.09)}   /* 行き過ぎ＝ドン */
  76% {transform:translateY(.5%) scaleY(.972)}
  100%{opacity:1;transform:none}
}
/* 立ち上がりきったら、ホログラムはいつもの浮遊へ */
.js .abt-isle.built .u4{animation:isleRise .82s var(--e-pop) .44s both,
  holoFloat 5.2s ease-in-out 1.4s infinite}
/* 上物が出るまで、車も走らせない（更地に車だけ走ると変） */
.js .abt-isle:not(.built) .isle-van{opacity:0!important}

@media (prefers-reduced-motion:reduce){
  .js .abt-isle .isle-up{opacity:1;transform:none}
  .js .abt-isle.built .isle-up{animation:none}
}

/* ============================================================
   見出しが1文字ずつ «ポン» と出る（2026-08-09 オーナー指示）

   **可愛く見せているのは «行き過ぎ» と «少しの回転»。**
   まっすぐ拡大するだけだと、事務的な «フェードイン» にしかならない。
     下から入る → 1.18倍まで行き過ぎる → 少し戻して収まる
     1文字ごとに 45ms ずつ遅らせる（--i は front.js が振る）

   **overflow を切らないこと。** 行き過ぎのぶんが上下で切れる。
   ============================================================ */
.brs-en .lt{display:inline-block;will-change:transform,opacity}
/* 読み上げは aria-label が持つ。**見えない複製の span を置かないこと**
   （headTopo が textContent を canvas に焼くので、語が二重になる）。 */
.js .brs-en .lt{opacity:0}
.js .brs-en.pop-in .lt{animation:ltPop .62s var(--e-pop) both;
  animation-delay:calc(var(--i) * 45ms)}
@keyframes ltPop{
  0%  {opacity:0;transform:translateY(46%) scale(.42) rotate(-10deg)}
  30% {opacity:1}
  62% {transform:translateY(-7%) scale(1.18) rotate(3.5deg)}   /* 行き過ぎ */
  80% {transform:translateY(2%) scale(.96) rotate(-1.4deg)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .brs-en .lt{opacity:1}
  .js .brs-en.pop-in .lt{animation:none}
}

/* ============================================================
   SERVICE ＝ «本体1つ ＋ オプション5つ»（2026-08-09 オーナー指示）

   売り物はあくまで **Webサイト制作** ひとつ。運用保守・撮影・
   Webマーケティング支援・予約決済の導入・CMS構築は、そこに足すもの。
   同じ大きさで6行並べると «5つのサービスを持つ会社» に見えてしまうので、
   オプション行は文字サイズと余白を一段落として、上に見出しを挟む。

   **図版（左の sticky）は6枚のまま同期させる。** 行が縦一列に並ぶ限り
   front.js の svcFigure（画面中央に一番近い行を選ぶ）はそのまま効く。
   オプションをカードのグリッドにすると、この選び方が壊れる。
   ============================================================ */
.svcx-opthead{padding:clamp(34px,4vw,52px) 0 clamp(14px,1.6vw,20px)}
.svcx-opthead-en{display:block;font-family:var(--en);font-size:13px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--paper);opacity:.72}
.svcx-opthead-jp{display:block;margin-top:6px;font-size:clamp(17px,1.4vw,19px);
  font-weight:600;letter-spacing:.08em;color:var(--paper)}
.svcx-opthead-p{display:block;max-width:44em;margin-top:10px;
  font-size:14px;line-height:1.9;color:var(--paper);opacity:.82}
/* 見出しの下から «オプションの束» が始まることを線で示す */
.svcx-opthead + .svcx-item{border-top:1px dashed rgba(255,255,255,.42)}

/* **行の大きさは6行とも同じ。**（2026-08-09 オーナー指示）
   最初は本体を大きく・オプションを小さくして «格» を付けたが、
   「Webサイト制作だけでかい」→「他のオプションも同じ大きさにして」で撤回。
   本体とオプションの別は **Option の見出しと、その上下の余白だけ** で示す。
   .svcx-item--main / --opt は目印として残すが、寸法は触らないこと。 */
.svcx-item--main .svcx-p,
.svcx-item--opt .svcx-p{max-width:40em}

/* **.svcx-* の上書きはここに在った分ごと削除した。**（2026-08-31）
   SERVICE の中身は .hs-*（横に流れる真円の札）に作り替わっていて、
   .svcx-* のマークアップは front-page.php に1つも無い（あちらの 423 行目に明記）。
   紙地向けの色をここに残すと «SERVICE を赤にしたのに直っていない指定» に見える。
   素の .svcx-* の定義はファイル前半に残してある（復活させたくなったとき用）。 */

/* ============================================================
   SERVICE ＝ 横に流れる真円の札（2026-08-09 オーナー指示
   「web.chibit.jp の Why us. と同じ見せ方に」）

   **仕掛けだけ取っている。** あちらの実測は front-page.php の頭に書いた。
   要点は4つ。
     1) .hs（縦の余白）の中で .hs-pin を sticky させ、
        スクロールぶんだけ .hs-track を translateX で流す
     2) 札は真円。中身は上から アイコン / 英字 / 和文 / 本文
     3) 円の輪郭は SVG。rotate(-90deg) して stroke-dashoffset を 100→0 にし、
        **真ん中に来た札だけ線を1周描く**
     4) 真ん中の札は地が赤ベタ・文字が紙色に反転する（.55s）

   **.hs の高さは front.js が測って入れる。** CSS で決め打ちにしないこと。
   札の枚数や幅が変わると必要な距離も変わる。

   **900px 以下と «動きを減らす» 設定では横流しをやめる。**
   そのときは真円もやめて角丸の札を縦に積む。真円のまま縦に積むと
   1枚 400px 超が6枚続いて、ただ長いだけの区画になる。
   ============================================================ */
.hs{position:relative}
.hs-pin{position:sticky;top:0;height:100svh;overflow:hidden;
  display:flex;align-items:center}
.hs-track{display:flex;width:max-content;align-items:center;
  gap:clamp(26px,4.4vw,74px);
  /* 先頭の札を本文の左端（.wrap の内側）に揃える */
  padding-inline:max(var(--gut),calc((100% - var(--maxw))/2 + var(--gut)));
  will-change:transform}
.hs-panel{flex:0 0 auto}

/* ---- 札（真円） ---- */
.hs-card{flex-basis:clamp(290px,33vw,450px)}
.hs-circle{position:relative;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  width:100%;aspect-ratio:1/1;border-radius:50%;
  padding:clamp(26px,3.4vw,50px);
  background:rgba(206,36,21,.035);
  text-decoration:none;color:inherit;
  transition:background-color .55s var(--e)}
.hs-ring{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;
  transform:rotate(-90deg);transform-origin:50% 50%}
.hs-ring circle{fill:none;stroke:var(--brand);stroke-width:1.2;
  vector-effect:non-scaling-stroke}
/* 常時の細い輪郭（薄い）と、中央で描かれる輪郭（濃い）を重ねる */
.hs-ring .r-base{opacity:.22}
.hs-ring .r-draw{stroke-dasharray:100;stroke-dashoffset:100;
  transition:stroke-dashoffset 1.05s var(--e)}

.hs-ico{display:block;width:clamp(44px,4.6vw,60px);color:var(--brand);
  transition:color .55s var(--e)}
.hs-ico svg{width:100%;height:auto;display:block}
/* アイコンの中では線を引く演出を切る（祖先に .in が付かないので隠れたままになる） */
.hs-ico .dw{stroke-dasharray:none!important;stroke-dashoffset:0!important}
.hs-en{margin-top:14px;font-family:var(--en);font-size:13px;font-weight:400;
  letter-spacing:.06em;color:var(--ink-3);transition:color .55s var(--e)}
.hs-jp{margin:6px 0 0;font-size:clamp(18px,1.65vw,23px);font-weight:600;
  letter-spacing:.04em;line-height:1.4;color:var(--ink);
  transition:color .55s var(--e)}
.hs-p{margin-top:12px;max-width:23em;font-size:13.5px;line-height:1.85;
  color:var(--ink-2);transition:color .55s var(--e)}

/* 真ん中に来た札 */
.hs-circle.is-center{background:var(--brand)}
.hs-circle.is-center .r-draw{stroke-dashoffset:0}
.hs-circle.is-center .r-base{opacity:0}
.hs-circle.is-center .hs-ico,
.hs-circle.is-center .hs-en,
.hs-circle.is-center .hs-jp,
.hs-circle.is-center .hs-p{color:var(--paper)}
.hs-circle.is-center .hs-ring circle{stroke:var(--paper)}

/* ---- 導入・仕切り・締め ---- */
.hs-intro{flex-basis:clamp(280px,32vw,420px)}
.hs-outro{flex-basis:clamp(280px,31vw,400px)}
.hs-mark{font-family:var(--en);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
/* **書体はヒーローの主コピーと同じ Dela Gothic One**（2026-08-10 オーナー指示
   「SERVICEの見出しもヒーローの『いいサイトで。』のフォントに」）。
   当てているのは .hero-h1 / .brs-lead と同じ --jp-disp。
   **font-weight は 400 にすること。** Dela は1ウェイトしか無く、700 のままだと
   偽ボールドになる（html の font-synthesis:none で今は太らないが、指定として誤り）。
   字面が大きいので font-size を 36→33px に落とし、字間と行間は display 用に開けてある。 */
.hs-h{margin-top:14px;font-family:var(--jp-disp);
  font-size:clamp(22px,2.4vw,33px);font-weight:400;
  line-height:1.55;letter-spacing:.04em;color:var(--ink)}
.hs-lead{margin-top:16px;max-width:24em;font-size:14.5px;line-height:1.95;
  color:var(--ink-2)}
.hs-hint{margin-top:26px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;letter-spacing:.08em;color:var(--ink-3)}
.hs-hint-ar{display:inline-block;animation:hsHint 1.7s var(--e) infinite}
@keyframes hsHint{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}

.hs-div{flex-basis:clamp(120px,13vw,190px);text-align:left}
.hs-div-en{font-family:var(--en);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand)}
.hs-div-jp{margin-top:6px;font-size:clamp(16px,1.35vw,19px);font-weight:600;
  letter-spacing:.08em;color:var(--ink)}
.hs-div-p{margin-top:10px;font-size:12.5px;line-height:1.85;color:var(--ink-2)}

.hs-map{width:clamp(160px,17vw,220px);color:var(--brand)}
.hs-map svg{width:100%;height:auto;display:block}
.hs-map-c{fill:var(--brand)}
.hs-map-s circle{fill:none;stroke:var(--brand);stroke-width:1.2}
.hs-outro .hs-h{margin-top:22px}
.hs-more{margin-top:22px}

/* 狭い画面での出現（2026-08-19 オーナー指示「レスポンシブでもしっかりアニメーション聞かせて」）。
   **901px 以上では絶対に効かせないこと。** 横流し中の札に opacity を掛けると、
   pin の中で最初から画面内にいる札まで一瞬消える。
   «動きを減らす» 設定のときも出さない（下の reduce 側では初期状態を作らない）。 */
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  .js .hs-rv{opacity:0;transform:translateY(20px);
    transition:opacity .55s var(--e),transform .55s var(--e)}
  .js .hs-rv.in{opacity:1;transform:none}
  /* 札の中身は本体より気持ち遅れて出す。1枚の中でも順に立ち上がって見える */
  .js .hs-rv .hs-ico,.js .hs-rv .hs-en,.js .hs-rv .hs-jp,.js .hs-rv .hs-p{
    opacity:0;transform:translateY(8px);
    transition:opacity .5s var(--e) .12s,transform .5s var(--e) .12s}
  .js .hs-rv.in .hs-ico,.js .hs-rv.in .hs-en,
  .js .hs-rv.in .hs-jp,.js .hs-rv.in .hs-p{opacity:1;transform:none}
}

/* ---- 横流しをやめる幅・設定 ----

   **やめるのは «横に流すこと» だけ。見せ方は PC と揃える。**（2026-08-19 オーナー指示
   「レスポンシブで同じアニメーションになってない／PCに合わせて」）

   2026-08-09〜08-19 は、ここで真円を捨てて «角丸・左寄せの箱» に組み替えていた。
   そのせいで狭い画面だけ
     ・輪郭を1周描く動き（.r-draw）が無い
     ・真ん中の札が赤ベタに反転する動き（.is-center）が無い
     ・まわりを回る弧（.hs-spark）が無い
     ・文字が左寄せで、PC の中央寄せと別物
   になっていた。**真円のまま縦に積み、中央に来た札を点ける。**
   中央の判定は front.js の svcHscroll が縦向きでも回す。

   «長くなる» 心配は実測で否定できている（390px で 2296px → 真円でもほぼ同じ。
   直径を min(80vw,340px) に抑えてあるため）。**直径を上げないこと。**
   上げると本文が円からはみ出す。下の字送りは «円に収まる» 前提で詰めてある。 */
/* ============================================================
   **縦積みにするのは «動きを止める» 設定のときだけ。**（2026-08-24 オーナー指示
   「スマホでも SERVICE セクションは下スクロールで右に展開していくように、
     PCと表示とアニメーションを合わせて」）
   それまでは 900px 以下を丸ごと縦積みにしていた。横に流す仕掛け（.hs-pin の
   sticky ＋ .hs-track の translateX）は front.js の svcHscroll が回すので、
   幅の判定を外せばスマホでも同じ動きになる。
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .hs{height:auto!important;margin-top:0}
  .hs-pin{position:static;height:auto;overflow:visible;display:block}
  .hs-track{width:auto;transform:none!important;flex-wrap:wrap;
    padding-inline:var(--gut);gap:clamp(30px,7vw,52px);
    justify-content:center;align-items:center;will-change:auto}
  .hs-panel{flex-basis:min(100%,460px);width:min(100%,460px)}
}

/* 狭い画面の «寸法»。横に流したままでも要る */
@media (max-width:900px){
  /* **上へ引き上げるのをやめる。**（2026-08-19）
     .hs{margin-top:clamp(-210px,-13vw,-90px)} は «貼り付く前の空き» を詰めるためのもの。
     狭い画面では詰めすぎて、札が SERVICE の見出しにかぶった（390px で 60px 重なりを実測）。 */
  .hs{margin-top:0}
  .hs-track{padding-inline:var(--gut);gap:clamp(26px,6vw,44px)}
  .hs-panel{flex-basis:min(86vw,460px);width:min(86vw,460px)}

  /* 札は真円のまま。直径だけ画面に合わせる。
     **上限を 420px より上げないこと。** 本文の字送りはこの直径で «円に収まる» ように
     詰めてある（下の max-width:74% は直径に対する割合）。 */
  .hs-card{flex-basis:min(80vw,420px);width:min(80vw,420px)}
  .hs-circle{padding:clamp(16px,5vw,26px)}
  /* 円は上下で幅が減るので、字は PC より一段落とす。
     **max-width を em で持たせないこと。** 直径に対する割合で決める。 */
  .hs-ico{width:clamp(34px,8.5vw,44px)}
  .hs-en{margin-top:9px;font-size:11.5px}
  .hs-jp{margin-top:4px;font-size:clamp(15.5px,4.2vw,19px)}
  .hs-p{margin-top:8px;max-width:74%;
    font-size:clamp(11px,3.05vw,13px);line-height:1.75}

  /* 導入・仕切り・締めも中央に揃える。
     真円が中央にあるのに前後の文だけ左寄せだと、列の軸が2本に見える */
  .hs-intro,.hs-outro,.hs-div{text-align:center}
  .hs-lead,.hs-div-p,.hs-outro .hs-h,.hs-intro .hs-h{margin-inline:auto}
  .hs-div{flex-basis:min(100%,460px)}
  .hs-hint{display:none}
  .hs-map{margin-inline:auto}
  /* **小さい «Service» は落とす。** 横流しの PC では区画の頭として離れて見えるが、
     縦積みだと区画見出しの «SERVICE» の真下に同じ語が二度続いて見える。 */
  .hs-mark{display:none}
  .hs-intro .hs-h{margin-top:0}
}

/* ============================================================
   区画の頭に空く隙間を詰める（2026-08-09 オーナー指示
   「各セクションの上部に隙間が空いてるところは埋めて」）

   空いていた中身は2つ。
     1) 波の直前の区画に padding-bottom が 117px 残っていた（中身の無い余白）
     2) 波は 444px の箱だが、**short / mid の曲線は左端で 384px 下から始まる**。
        その上は前の区画の地色のままの «くさび» で、ここが空白に見えていた

   1 は削る。2 は曲線の形なので削れない（箱を縮めると上下が切り取られて、
   右端で «水平の切れ目» が出る。2026-08-08 に直したあの不具合に戻る）。
   代わりに **波ごと上へ引き上げて、空いていた高さを食わせる。**

   **引き上げるのは .wsep--to-red だけ。**
   この2枚（ABOUT の前・CONTACT の前）は箱の地が紙色で、前の区画も紙色なので
   重ねても見えない。**.wsep--to-paper.wsep--blue は触らないこと。**
   あちらは空のグラデーションを次の区画と繋げてあり、位置をずらすと
   「上部がグラデーションが変な位置で切り替わっちゃってる」に戻る。
   ============================================================ */
.sec:has(+ .wsep){padding-bottom:clamp(18px,2.2vw,34px)}
.wsep--to-red{margin-top:clamp(-300px,-19vw,-130px)}
/* ============================================================
   まっすぐな横線の区切り（ファーストビューの下だけ）
   2026-08-23 オーナー指示「FVは画面いっぱいが白の方がいい。ここだけ綺麗に横線で」

   **食い込ませないこと。** 他の波は前後の区画に重ねて空きを詰めているが、
   ここで重ねると **赤がファーストビューの画面に入り込む。**
   線は箱の縦の中央（viewBox の y=260）に来るので、
   箱の «上半分＝紙／下半分＝赤»。上半分がファーストビューの続きになる。
   ============================================================ */
.wsep--flat{height:clamp(104px,9vw,150px);margin-top:0;margin-bottom:0}
/* 舌が無いので、次の区画の見出しを下げる必要も無い */
.wsep--flat+.sec.has-wave{padding-top:clamp(44px,5vw,80px)}

/* ============================================================
   選ばれた丸のまわりを «読み込み中» の弧が回る
   （2026-08-09 オーナー「サービスの丸は周りをくるくる光が回って欲しい。選択した時」
    → 2026-08-10 «丸の外» へ
    → 2026-08-12 «光» をやめて弧に。オーナー「デザインがダサい」「もっとローディングっぽく」）

   **却下された作り（戻さないこと）**
     ・玉＋にじみ＋尾（円錐グラデーション）… ネオンに見えて、線画と罫線で組んだ
       このサイトの語彙から浮く。これが «ダサい» と言われた形
     ・破線の輪をゆっくり回す … 静止画は綺麗だが、回すと点が流れて安く見える
     ・小さな実点が1つ回るだけ … 動きが小さく «選ばれた» ことに気づけない
     ・一定の長さの弧が等速で回る … 長さが変わらないぶん単調

   **採ったのは «伸び縮みしながら回る弧»。** 不定形スピナーと同じ組み方で、
   回転（1.9s 等速）と伸縮（1.5s ease-in-out）の周期をわざとずらしてある。
   ずらさないと同じ位置で同じ形に戻り、パタパタして見える。

   **円は SVG で描くこと。** 伸び縮みは stroke-dasharray のアニメで作る。
   conic-gradient では «弧の長さ» を animate できない。

   離す距離は札の間隔より小さくすること。gap は clamp(26px,4.4vw,74px) なので、
   両側ぶん（2倍）がそれを超えると隣の札とぶつかる。
   ============================================================ */
.hs-spark{position:absolute;inset:calc(-1 * clamp(10px,1.2vw,20px));
  border-radius:50%;pointer-events:none;
  opacity:0;transition:opacity .45s linear}
.hs-circle.is-center .hs-spark{opacity:1}

.hs-spin{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  animation:hsSpinRot 1.9s linear infinite}
/* **vector-effect:non-scaling-stroke を付けないこと。**（2026-08-12 に踏んだ）
   破線の長さまでデバイス基準になり、1本の弧のつもりが細かい破線の輪になる。
   太さは user unit で指定する（viewBox が 100 四方なので .42 ≒ 2px）。
   円周は 2πr = 2π×49 ≒ 308 user unit。下の dasharray はこの値が基準。 */
.hs-spin circle{fill:none;stroke:var(--brand);stroke-width:.42;stroke-linecap:round;
  stroke-dasharray:12 296;stroke-dashoffset:0;
  transform:rotate(-90deg);transform-origin:50% 50%;
  animation:hsSpinDash 1.5s ease-in-out infinite}
@keyframes hsSpinRot{to{transform:rotate(1turn)}}
@keyframes hsSpinDash{
  0%  {stroke-dasharray:12 296;stroke-dashoffset:0}
  50% {stroke-dasharray:190 118;stroke-dashoffset:-40}
  100%{stroke-dasharray:12 296;stroke-dashoffset:-296}}

/* **狭い画面では消さない。**（2026-08-19）PC と同じ «選ばれた印» なので残す。
   落とすのは «動きを減らす» 設定のときだけ（等速で回り続ける弧なので）。 */
@media (prefers-reduced-motion:reduce){
  .hs-spark{display:none}
}

/* **横流しの帯は波より前に出すこと。**（2026-08-09）
   .wsep は z-index:2、区画の中身は .sec>.wrap の z-index:3 で波より前に出る。
   .hs は .wrap の外に置いてあるので、この指定が無いと波の «紙色の箱» に
   締めの区画（相談するボタン）の下半分を隠される。上で波を 210px 引き上げた
   ぶん、隠れる量が増えて実際に切れていた。 */
.hs{z-index:3}

/* **帯を見出しの直下まで引き上げること。**（2026-08-09）
   .hs-pin は 100svh あり、中身は縦中央に置いてある。貼り付く前は
   その «上半分の空き»（画面の半分 − 円の半分 ≒ 170px）が
   SERVICE の見出しとの間に丸ごと見えて、260px の空白になっていた。
   貼り付いたあとの中央揃えはこの余白では変わらない（sticky の中の話なので）。
   ここで詰まるのは «貼り付く前» の空きだけ。 */
/* **901px 以上だけに閉じること。**（2026-08-19）
   縦積みの側では sticky が効かないので、この負の余白がそのまま
   «札が見出しにかぶる» になる。390px / 320px とも 60px、768px で 65px 重なっていた。 */
@media (min-width:901px) and (prefers-reduced-motion:no-preference){
  .hs{margin-top:clamp(-210px,-13vw,-90px)}
}

/* ============================================================
   ファーストビューのコピーは **出さない**（2026-08-31 FVを動画にしたため）。

   経緯: 2026-08-24 に一度削除（オーナー指示「FVに いいサイトで。〜 これ無くしたら
   もっと良くなる」／当時はキャラが画面いっぱい）→ 2026-08-30 に赤地へ戻して復活
   → 2026-08-31 に FV が動画になり、**映像に文字が焼き込まれているので再び撤去**。
   h1 は .u-vh で DOM に残してある（front-page.php）。
   戻すなら h1 から .u-vh を外し、**焼き込みの文字と重ならない置き場所**を
   先に決めること。中央は必ずぶつかる。
   ============================================================ */


/* ============================================================
   FV のナビもガラスにする（2026-08-31 オーナー指示
   「FV上部のナビは FV の時はガラスにして」）

   これまでガラスの板が出るのは **.stuck（スクロール後）だけ**だった。
   最上部＝ヒーローの上では板を出さず、白抜き＋文字影＋上端のスクリムで
   読ませていた。**FV が動画になってこの手が破綻している。**

   【破綻の実測（新しい 15秒の映像・ヘッダー帯の相対輝度）】
     0.0-1.0s  0.07（濃紺）   1.5-3.0s  0.79（白）
     3.5-6.0s  0.10（濃紺）   6.5-8.0s  0.74（白）
     8.5-11.0s 0.08（濃紺）  11.5-13.0s 0.70（白）
   **明暗が15秒で3往復する。** 白い場面では白抜きの文字が 1.3:1 まで落ちる。
   スクリムを濃くすれば読めるが、それは «映像の上端を暗く塗る» ことなので
   高画質に差し替えた意味を消す。**板で受けるのが正しい。**

   【なぜ «濃いガラス» なのか】
     文字は白のまま（.stuck 前は白抜き）。白い場面を白い板で受けても
     コントラストは稼げない。**地を暗くするのではなく «裏を暗くする»**
     ＝ backdrop-filter の brightness を 1 未満にする。
     こうすると映像は板の向こうで **動いたまま透けて見える**（＝ガラス）のに、
     白文字は読める。不透明な墨を 50% 乗せるのとは見え方が別物。

   【計算（sRGB で合成して相対輝度を出したもの・実測ではない）】
     いちばん明るい場面 sRGB .885 → brightness(.6) → .531
       → 墨 20% を乗せて .442 → 相対輝度 .164 → **白文字と 4.9:1**（AA 通過）
     暗い場面 sRGB .31 → 同じ経路で相対輝度 .024 → **14:1**
   **brightness を 1 に戻さないこと。** 戻すと白い場面で 1.3:1 に落ちる。
   **alpha（.20）を上げて解決しないこと。** 上げるほど «ただの黒い板» に近づく。

   【対象は .nav と .burger だけ】
     ロゴ（.brand）は **不透明の紙色のまま**。組み合わせロゴが «黒＋白＋赤» の
     3色で、暗い板の上では黒が沈み、反転もできない（2026-08-11 の経緯を見よ）。
     .stuck.over-dark でも同じ扱い（ナビは暗いガラス／ロゴの器は明るい）にしてある。
     **900px 以下ではナビが display:none になる**ので、バーガーが板を引き継ぐ。
     ここを外すとスマホの FV だけ «裸のバーガー» に戻る。

   板の作り（4層）は .stuck 側とまったく同じ考え方。値だけ «暗い側» に振ってある。
   ============================================================ */
:root{
  /* **.stuck 側の --glass-* とは別に持つこと。** あちらは «明るい地の上の白い板»、
     こちらは «明暗が入れ替わる映像の上の暗い板» で、役割が違う。
     片方を直すつもりでもう片方まで動かさないための分離。 */
  --glass-fv-bg:rgba(20,23,26,.20);
  --glass-fv-blur:blur(22px) saturate(150%) brightness(.6);
}
body:has(.hero) .hd:not(.stuck) .nav,
body:has(.hero) .hd:not(.stuck) .burger{
  background-color:var(--glass-fv-bg);
  backdrop-filter:var(--glass-fv-blur);
  -webkit-backdrop-filter:var(--glass-fv-blur);
  /* 厚みの影。**暗い板なので上のふちの照り返しは .stuck 側より強めに出す。**
     地が暗いぶん、白 .62 では縁が見えない。 */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 0 .5px rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(255,255,255,.10),
    inset 0 12px 26px -20px rgba(0,0,0,.55),
    0 16px 40px -22px rgba(0,0,0,.45),
    0 3px 10px -6px rgba(0,0,0,.28)}

/* 縁の屈折と照り返し。**mask の内側を抜くこと**（.stuck 側と同じ理由）。
   .hd .nav には isolation:isolate が掛かっているので z-index:-1 で中身の下に入る。 */
body:has(.hero) .hd:not(.stuck) .nav::before{content:"";position:absolute;inset:0;
  z-index:-1;border-radius:inherit;pointer-events:none;
  backdrop-filter:blur(3px) saturate(200%) brightness(.82);
  -webkit-backdrop-filter:blur(3px) saturate(200%) brightness(.82);
  -webkit-mask-image:var(--glass-rim-mask);mask-image:var(--glass-rim-mask)}
body:has(.hero) .hd:not(.stuck) .nav::after{content:"";position:absolute;inset:0;
  z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.05) 26%,
    rgba(255,255,255,0) 54%,
    rgba(255,255,255,.03) 80%,
    rgba(255,255,255,.12) 100%)}

/* backdrop-filter が無い環境。**«ガラス» を諦めて読めることを取る。**
   板は不透明の墨にし、撤去した上端のスクリムもここだけ戻す
   （板の外＝ロゴの器の周りが素通しになるため）。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body:has(.hero) .hd:not(.stuck) .nav,
  body:has(.hero) .hd:not(.stuck) .burger{background-color:rgba(20,23,26,.78)}
  body:has(.hero) .hd:not(.stuck) .nav::before{content:none}
  body:has(.hero) .hd:not(.stuck)::before{content:"";position:absolute;
    left:0;right:0;top:0;height:210px;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,
      rgba(20,23,26,.40) 0%,
      rgba(20,23,26,.28) 22%,
      rgba(20,23,26,.15) 44%,
      rgba(20,23,26,.06) 66%,
      rgba(20,23,26,.015) 84%,
      rgba(20,23,26,0) 100%)}
}


/* ============================================================
   縦画面のヘッダーは «ガラスにしない»（2026-08-31）

   FV のナビを暗いガラスにしたのは **裏に映像が来るから**（明暗が3往復する）。
   縦画面では組み方が変わり、映像は画面の中ほどの 16:9 の帯になる。
   ヘッダーの裏は **白い余白しかない。** そこに暗いガラスを置くと
     ・透ける物が無いので «ガラス» ではなく «灰色の丸» になる
     ・白いバーガーの線が灰の上に乗って 3.6:1 まで落ちる（計算値）
   ので、白地向けの見た目（板なし・墨の線）へ戻す。

   **分けるのは aspect-ratio。** 幅ではない。
   «映像が画面を覆う» のは 3:2 より横長のときだけで、
   その条件は下の «縦画面» のメディアクエリと同じもの。
   幅で分けると 1024x768 のタブレット（4:3 ＝ 帯の組み方）が横画面側に入り、
   白い余白の上に灰色の丸が残る。
   ============================================================ */
@media (max-aspect-ratio:3/2){
  body:has(.hero) .hd:not(.stuck) .nav,
  body:has(.hero) .hd:not(.stuck) .burger{
    background-color:transparent;
    backdrop-filter:none;-webkit-backdrop-filter:none;
    box-shadow:none}
  body:has(.hero) .hd:not(.stuck) .nav::before,
  body:has(.hero) .hd:not(.stuck) .nav::after{content:none}
  body:has(.hero) .hd:not(.stuck) .nav a{color:var(--ink);text-shadow:none}
  body:has(.hero) .hd:not(.stuck) .nav a::after{background:var(--ink)}
  body:has(.hero) .hd:not(.stuck) .burger span{background:var(--ink)}
  /* ロゴの器も白地の上では要らない。**影だけ残すと «白い紙片» に見える。** */
  body:has(.hero) .hd:not(.stuck) .brand{background-color:transparent;box-shadow:none}
}