@charset "UTF-8";
/*
  ASTRA コーポレートサイト ／ 共通スタイル

  【この版でやったこと】
  参考2サイト（内藤・大塚 / ETOHA LAB）の値を実測したら、はっきり体系があった。
    動きの長さ … 0.2〜0.6s（1秒を超えるものはほぼ無い）
    行送り     … 1.0 / 1.5 / 1.8 の3種だけ
    字送り     … 0 / 0.05em / 0.10em の3種だけ
    余白       … 少数の値の繰り返し
  ASTRAは行送り7種・字送り8種・動き1.0〜1.7秒と、値がばらけていた。
  **素人くささの正体はこれ。**下の目盛りに全部そろえる。値は必ずここから取る。
*/

:root{
  /* ---- 色 ---- */
  --bg:#FAF8F4;          /* 生成り。紙の側 */
  --white:#FFFFFF;       /* 純白。読ませる区画 */
  --dark:#2A2A28;        /* 墨 */
  --ink:#1A1A18;
  --sub:#6B6963;
  --red:#C03C3C;         /* 基準点。装飾では使わない */
  --gold:#C09C48;        /* 線と目盛りだけ。面では使わない */
  --paper:#F2F2E9;
  --sub-d:#9C9A93;
  --faint:#DEDAD2;
  --faint-d:#3A3A36;
  --line:rgba(26,26,24,.12);
  --line-d:rgba(242,242,233,.16);

  /* ---- 余白の目盛り。8の倍数。この7つ以外は使わない ---- */
  --s1:8px; --s2:16px; --s3:32px; --s4:56px; --s5:96px; --s6:160px; --s7:240px;
  /* 区画の上下だけ、画面幅に追従させる。etoha実測 170〜217px（7.6〜9.7vw・上限なし）。
     --s6 の160pxで頭打ちだと、広い画面で詰まって見える */
  --sec:clamp(64px,8.33vw,200px);      /* 区画の上下（大） */
  --sec-s:clamp(48px,5.2vw,124px);     /* 区画の上下（小） */

  /* ---- 動き。長さは2つ、イージングは1つ ---- */
  --t0:.2s;                        /* いちばん小さいもの（色・下線）。etoha実測で最多の次に多い */
  --t1:.4s;                        /* 線・hover */
  --t2:.6s;                        /* 面・区画・現れ方 */
  --t3:1.2s;                       /* FVの導入だけ。ここだけ長くてよい */
  --e:cubic-bezier(.22,1,.36,1);   /* 行き過ぎない。全部これ */

  /* ---- 文字 ---- */
  --lh-t:1;      /* ラベル・数字 */
  --lh-m:1.3;    /* 中間。etohaが持っていてASTRAに無かった段 */
  --lh-h:1.5;    /* 見出し */
  --lh-b:1.8;    /* 本文。etoha実測に合わせた（1.9→1.8） */
  --ls-0:0;      /* 本文 */
  --ls-s:.02em;  /* ごく浅い。etohaが持っていた段 */
  --ls-1:.05em;  /* 和文の見出し */
  --ls-2:.10em;  /* 英字ラベル。etohaの上限に合わせた（.18em→.10em） */

  --pad:96px;                 /* 左右のマージン。--s5 と同じ */
  --w:1248px;                 /* 内容の幅 */
  /* ---- 書体 ----
     QANDO は 欧文 aktiv-grotesk ／ 和文の見出し 見出ゴMB31 ／ 和文の本文 Noto Sans JP。
     **明朝を1文字も使っていない。**それに合わせ、ASTRAも明朝をやめる。
     どちらも Google Fonts で無料。 */
  --head:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;  /* 見出し */
  --sans:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP",sans-serif;  /* 本文 */
  --en:Inter,"Helvetica Neue",Arial,sans-serif;                            /* 欧文・数字 */
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 1;
  letter-spacing:var(--ls-0);
  line-height:var(--lh-b);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
/* 数字は幅を揃える。日付や金額がガタつくと素人くさく見える */
time,.date,.price,.no{font-variant-numeric:tabular-nums}

/* ------------------------------------------------ 版面 */
.sec{position:relative;padding:0 var(--pad);isolation:isolate}
.sec > .inner{max-width:var(--w);margin:0 auto;position:relative;height:100%}
.sec.dark{background:var(--dark);color:var(--paper)}
.sec.dark .lead{color:var(--sub-d)}
.sec.white{background:var(--white)}
.sec.white .ground{display:none}

.ground{position:absolute;inset:0;background-size:cover;background-position:center;
  z-index:0;pointer-events:none}
.sec > *:not(.ground){position:relative;z-index:1}

/* ------------------------------------------------ 文字の段
   QANDOを実測（画面1760px）したら **9段・ジャンプ率3.50**（最大56px ÷ 本文16px）だった。
     56 / 48 / 20 / 16 / 15 / 14 / 13 / 12 / 10
   ASTRAは14段・4.00で、段が多く頂点が高かった。**頂点を64→56に下げて3.50に合わせる。**
   ASTRAの9段:  56 / 48 / 36 / 26 / 19 / 16 / 14 / 12 / 10
   （ロゴとFVのコピーは QANDO も canvas で画面幅に追従させているので、この段には入れない）*/
.eyebrow{font-family:var(--en);font-weight:400;font-size:12px;
  letter-spacing:var(--ls-2);line-height:var(--lh-t);color:var(--sub)}
.enbig{font-family:var(--en);font-weight:600;font-size:56px;letter-spacing:var(--ls-1);
  color:var(--faint);line-height:var(--lh-t);margin:var(--s3) 0 var(--s3)}
.sec.dark .enbig{color:var(--faint-d)}
.h2{font-family:var(--head);font-weight:700;font-size:36px;
  line-height:var(--lh-h);letter-spacing:var(--ls-1)}
.h3{font-family:var(--head);font-weight:700;font-size:26px;line-height:var(--lh-h);letter-spacing:var(--ls-1)}

/* ============================================================
   英字ラベル ＋ 和文見出し の組み（2026-08-23 ルール化）
   基準は**トップページの SERVICE ／ 事業内容**。
     英字 56px ： 和文 26px ＝ ジャンプ比 2.15
     あいだ 16px（--s2。ふつうの区切り32pxの半分）
   **英字が主役。和文は1段落として、間は半分に詰める。**
   離すと2つが別々の見出しに見え、同じ大きさだとどちらが主役か決まらない。
   --------------------------------------------------------
   .enbig の下余白は 32px なので、-16px 引いて 16px にしている
   （:has を使わないのは、古い環境でも確実に効かせるため）
   ============================================================ */
.enbig + .h2{font-size:26px;margin-top:calc(var(--s2) - var(--s3))}
.lead{font-family:var(--en);font-weight:400;font-size:14px;
  letter-spacing:var(--ls-2);line-height:var(--lh-h);color:var(--sub);margin-top:var(--s2)}
/* etohaの本文は19px（96件で最多）。ASTRAは16pxで、ラベルに埋もれていた */
.body{font-size:19px;line-height:var(--lh-b);color:var(--sub);margin-top:var(--s3);max-width:760px}
.sec.dark .body{color:var(--sub-d)}

/* 「詳しく見る →」。下線は引かない。線は矢印の軸 */
.more{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--sans);
  font-weight:500;font-size:14px;letter-spacing:var(--ls-1);color:var(--ink)}
.more::after{content:"";width:40px;height:1px;background:currentColor;opacity:.6;
  transition:width var(--t0) var(--e)}
.more:hover::after{width:64px}
.sec.dark .more{color:var(--paper)}

/* 赤い基準点。1画面に1つが原則 */
.dot{display:inline-block;width:4px;height:4px;background:var(--red);vertical-align:middle}
/* 見出しの一文字目。読みはじめの基準点 */
.k{color:var(--red);font-style:normal}

/* ------------------------------------------------ 固定ヘッダー
   下に送ると隠れ、上に戻すと出る。読んでいるあいだ視界を空ける */
/* **ヘッダーは白地。**赤い面の上に浮くと、ロゴもナビも読めなくなる。
   純白(#FFFFFF)ではなく生成り(--bg)にする。トップのFVと同じ色なので、境目が出ない */
.hd{position:fixed;top:0;left:0;right:0;height:88px;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
  /* **ロゴだけ左。ナビとボタンは右に寄せる。**
     フッターのナビも同じ右端（100vw - --pad）にそろえる */
  display:flex;align-items:center;justify-content:flex-end;gap:var(--s4);
  padding:0 var(--pad);
  transition:background var(--t1) var(--e),height var(--t1) var(--e),
             transform var(--t2) var(--e),backdrop-filter var(--t1)}
.hd.stuck{height:64px;background:var(--bg)}
.hd.hide{transform:translateY(-100%)}
/* ロゴ。正データは DILグループロゴデザイン/ASTRA/ASTRA_logo2.png（横組み）。
   星のマーク＋明朝の欧文。**サイトの書体はゴシックのままで、ロゴだけが明朝。**
   ロゴは会社の記号なので、サイトの書体体系に合わせて作り替えない。
   高さ30pxは、前の文字ロゴ（19px）の字面の高さに合わせた値 */
.hd .logo{display:block;line-height:0;margin-right:auto}
.hd .logo img{height:44px;width:auto;display:block;transition:height var(--t1) var(--e)}
.hd.stuck .logo img{height:34px}
.hd nav{display:flex;gap:var(--s3);font-family:var(--en);font-weight:400;font-size:14px;
  letter-spacing:var(--ls-2);line-height:var(--lh-t);color:var(--sub)}
.hd nav a{position:relative;padding-bottom:4px}
.hd nav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--red);transition:width var(--t0) var(--e)}
.hd nav a:hover{color:var(--ink)}
.hd nav a:hover::after{width:100%}

/* ------------------------------------------------ 現れ方
   行ごとに少しずらす。同時に出ると素人くさく見える */
html.js .rv{opacity:0;transform:translateY(20px);
  transition:opacity var(--t2) var(--e),transform var(--t2) var(--e)}
html.js .rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}
.rv.d2{transition-delay:.16s}
.rv.d3{transition-delay:.24s}

/* 画像はマスクで下から開く。フェードだけだと安く見える */
html.js .mask{clip-path:inset(0 0 100% 0);transition:clip-path var(--t2) var(--e)}
html.js .mask.in{clip-path:inset(0 0 0 0)}

/* 見出しを行ごとに送り出す */
.lines{display:block}
.lines > span{display:block;overflow:hidden}
.lines > span > i{display:block;font-style:normal}
html.js .lines > span > i{transform:translateY(105%);
  transition:transform var(--t2) var(--e)}
html.js .lines.in > span > i{transform:none}
html.js .lines.in > span:nth-child(2) > i{transition-delay:.07s}
html.js .lines.in > span:nth-child(3) > i{transition-delay:.14s}

@media (prefers-reduced-motion:reduce){
  .rv,.mask,.lines > span > i{opacity:1;transform:none;clip-path:none;transition:none}
}

/* ------------------------------------------------ 会社の概要（about.html）
   2列の定義リスト。縦罫線は引かず、行の下だけ。値は目盛りから取る */
/* この区画は左右2段組みにしない。
   about.html 側の .ch .inner{display:grid} が後から読まれるので、
   クラスを1つ増やして強さで勝たせる */
.sec.company .inner{display:block}

.co{max-width:800px;margin-top:var(--s4)}
/* 罫線は dd 側にだけ引く。dt は dd の余白の上に浮かせるので、
   線が左右で途切れずに1本につながる */
.co dt{float:left;clear:left;width:200px;
  padding-top:var(--s3);
  font-family:var(--sans);font-size:14px;letter-spacing:var(--ls-1);
  line-height:var(--lh-b);color:var(--sub)}
.co dd{margin-left:0;padding-left:200px;
  padding-top:var(--s3);padding-bottom:var(--s3);
  border-bottom:1px solid var(--line);
  font-size:19px;line-height:var(--lh-b);color:var(--ink)}
.co dd .tel{font-family:var(--en);letter-spacing:var(--ls-1)}
/* 狭い画面では縦に積む（2026-08-23 修正）。
   **dt を200pxで浮かせると、dd に残るのが116pxしかない。**
   メールアドレスのような切れない文字列が入ると、そこだけ画面から溢れていた */
@media (max-width:900px){
  .co dt{float:none;width:auto;padding-top:var(--s3)}
  .co dd{padding-left:0;padding-top:2px}
  .co dd,.co dt{overflow-wrap:anywhere}
}
.co::after{content:"";display:block;clear:both}

@media (max-width:768px){
  .co dt{float:none;width:auto;padding-bottom:0}
  .co dd{padding-left:0;padding-top:var(--s1)}
}

/* ================================================================ 下層ページ
   トップと同じ目盛りで組む。値はすべて :root から取る。
   区切り線は引かない（余白と地の色だけで切り替える）。箱・影・角丸は使わない */

/* ---- ヘッダーの現在地 ---- */
.hd nav a.on{color:var(--ink)}
.hd nav a.on::after{width:100%}
.hd .btn{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);
  background:var(--ink);color:var(--white);padding:14px 22px;
  display:inline-flex;align-items:center;gap:var(--s2)}
.hd .btn::after{content:"";width:22px;height:1px;background:currentColor;opacity:.7;
  transition:width var(--t0) var(--e)}
.hd .btn:hover::after{width:34px}

/* ---- ページの見出し部 ---- */
.phero{padding-top:clamp(120px,13vw,220px)}
.phero .crumb{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--sub)}
.phero .enbig{margin-top:var(--s3)}
.phero .psub{font-size:14px;letter-spacing:var(--ls-1);color:var(--sub);margin-top:calc(var(--s3) * -1)}
.h1p{font-family:var(--head);font-weight:700;font-size:clamp(26px,3.4vw,48px);
  line-height:var(--lh-h);letter-spacing:var(--ls-1);margin-top:var(--s2)}
.phero .body{margin-top:var(--s3)}
.phero .reply{font-size:14px;color:var(--sub);margin-top:var(--s4)}
.phero .tg{font-size:14px;color:var(--sub);margin-top:var(--s3)}

/* ---- 3つを縦に。箱で囲まず、行の上に細い罫線 ---- */
.stack{list-style:none;margin-top:var(--s4);max-width:800px}
.stack li{border-top:1px solid var(--line);padding-top:var(--s4);padding-bottom:var(--s4)}
.stack .q{font-size:16px;font-weight:500;line-height:var(--lh-h)}
.stack .a{font-size:16px;line-height:var(--lh-b);color:var(--sub);margin-top:var(--s1)}
.sec.dark .stack li{border-top-color:var(--line-d)}
.sec.dark .stack .a{color:var(--sub-d)}

/* ---- 横並び。段差なし ---- */
.cols{list-style:none;display:grid;gap:var(--s3);margin-top:var(--s4)}
.cols.c2{grid-template-columns:repeat(2,1fr)}
.cols.c3{grid-template-columns:repeat(3,1fr)}
.cols.c4{grid-template-columns:repeat(4,1fr)}
.cols.c5{grid-template-columns:repeat(5,1fr)}
.cols .t{font-family:var(--head);font-weight:700;font-size:19px;line-height:var(--lh-h)}
.cols .d{font-size:16px;line-height:var(--lh-b);color:var(--sub);margin-top:var(--s2)}
.cols.c2 .t{font-size:26px}
.sec.dark .cols .d{color:var(--sub-d)}
/* 行き先のある箱だけ、線が伸びる */
.cols.lnk a{display:block}
.cols.lnk .t{display:inline-flex;align-items:center;gap:var(--s2)}
.cols.lnk .t::after{content:"";width:34px;height:1px;background:currentColor;opacity:.5;
  transition:width var(--t0) var(--e)}
.cols.lnk a:hover .t::after{width:56px}

/* ---- 工程。左に名前、右に説明。番号は振らない ---- */
/* 進め方（2026-08-23 に縦向きへ作り直し）。
   横1列だと1件の説明が細くなり、5件目まで目が届かなかった。
   **上から下へ1件ずつ読ませる。**番号・アイコン・文章を左から右に置いて、
   矢印は枠と枠のあいだ、中央に縦で通す。囲みの中に入れると工程の一部に見える */
.proc{list-style:none;margin-top:var(--s4);
  display:grid;grid-template-columns:1fr;gap:var(--s3)}
/* 2026-08-23 変更：番号とアイコンを横に並べず、**番号の下にアイコン**を置く。
   横3列だと視線が右へ流れて、番号と図がどちらも添え物に見えた */
.proc li{position:relative;border:1px solid var(--line);padding:var(--s3);
  display:grid;grid-template-columns:56px 1fr;column-gap:var(--s3);row-gap:var(--s2);
  align-items:center;text-align:left;
  transition:border-color var(--t1) var(--e)}
.proc .n{grid-column:1;grid-row:1}
.proc .ic{grid-column:1;grid-row:2}
.proc .tx{grid-column:2;grid-row:1 / span 2}
.proc li:hover{border-color:var(--ink)}
/* 枠と枠をつなぐ縦の矢印。最後の1件には付けない */
.proc li:not(:last-child)::after{content:"";position:absolute;
  left:50%;bottom:calc(var(--s3) * -1);width:1px;height:var(--s3);
  background:var(--line)}
.proc li:not(:last-child)::before{content:"";position:absolute;
  left:50%;bottom:calc(var(--s3) * -1 + 1px);width:6px;height:6px;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:translateX(-50%) rotate(45deg)}
.proc .n{font-family:var(--en);font-weight:600;font-size:19px;
  letter-spacing:var(--ls-2);color:var(--sub)}
.proc .ic{display:block;width:44px;height:44px;color:var(--red)}
.proc .ic svg{width:100%;height:100%;display:block}
.proc .t{font-family:var(--head);font-weight:700;font-size:19px;
  letter-spacing:var(--ls-1);line-height:var(--lh-h)}
.proc .d{font-size:14px;line-height:var(--lh-b);color:var(--sub);margin-top:var(--s1)}
/* 納期の注釈。**工程の説明より一段小さく、添え書きとして置く** */
.proc .note{font-size:12px;line-height:var(--lh-b);color:var(--sub);
  margin-top:var(--s2);padding-top:var(--s1);border-top:1px solid var(--line)}
@media (max-width:640px){
  .proc li{grid-template-columns:44px 1fr;column-gap:var(--s3);row-gap:var(--s2)}
  .proc .n{grid-column:1;grid-row:1}
  .proc .ic{grid-column:1;grid-row:2;width:34px;height:34px}
  .proc .tx{grid-column:2;grid-row:1 / span 2}
}
.fnote{font-size:16px;font-weight:500;margin-top:var(--s4)}
/* 英字の FLOW と 和文の見出しの間を半分に詰める（--s3 32px → --s2 16px） */
/* 間はルール（.enbig + .h2）に任せる。ここで詰めると二重に効いて0になる（2026-08-23） */
.flow .enbig{margin-bottom:var(--s3)}

/* ---- 料金。赤い地で囲まない。墨の地に白抜きの数字 ---- */
.price{list-style:none;margin-top:var(--s4)}
.price li{padding-top:var(--s4);padding-bottom:var(--s4);border-bottom:1px solid var(--line-d);
  display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:baseline}
.price .nm{font-size:16px;font-weight:500;color:var(--paper)}
.price .d{grid-column:1;font-size:14px;line-height:var(--lh-b);color:var(--sub-d);margin-top:var(--s1)}
.price .v{grid-row:1;grid-column:2;font-family:var(--en);font-weight:600;font-size:48px;
  line-height:var(--lh-t);color:var(--paper);white-space:nowrap}
.price .v small{font-family:var(--sans);font-size:16px;font-weight:400;margin-left:6px}
.price .v small:last-child{font-size:14px;color:var(--sub-d)}
.pnote{font-size:14px;color:var(--sub-d);margin-top:var(--s3)}

/* ---- 他社との比較。縦罫線を引かない。赤で塗らず、文字だけ赤にする ---- */
.cmpwrap{overflow-x:auto;margin-top:var(--s4)}
.cmp{border-collapse:collapse;width:100%;min-width:720px;text-align:left}
.cmp th,.cmp td{padding:var(--s3) var(--s2);border-bottom:1px solid var(--line);
  font-size:14px;font-weight:400;vertical-align:baseline}
.cmp tr:first-child th{font-family:var(--en);font-size:14px;letter-spacing:var(--ls-2);color:var(--sub)}
.cmp tr:first-child th.me{color:var(--red);font-weight:500}
.cmp .rh{font-size:14px;color:var(--sub);width:160px}
.cmp td.me{font-weight:500;color:var(--ink)}

/* ---- ほかの事業 ---- */
.oth{padding-top:var(--sec-s);padding-bottom:var(--sec-s)}

/* ---- お問い合わせの記入欄。枠で囲まず、下線だけ ---- */
.form{max-width:720px;margin-top:var(--s4)}
.form .f{margin-bottom:var(--s3)}
.form label{display:flex;align-items:center;gap:var(--s2);
  font-size:12px;letter-spacing:var(--ls-1);color:var(--sub)}
.form .req{font-size:10px;color:var(--red);letter-spacing:var(--ls-1)}
.form input,.form select,.form textarea{
  width:100%;height:var(--s4);margin-top:var(--s1);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  border-radius:0;font-family:var(--sans);font-size:16px;color:var(--ink);
  transition:border-color var(--t0) var(--e)}
.form textarea{height:var(--s6);padding-top:var(--s2);resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-bottom-color:var(--red)}
.form .submit{margin-top:var(--s5);width:280px;height:64px;
  background:var(--dark);color:var(--paper);border:0;border-radius:0;cursor:pointer;
  font-family:var(--sans);font-size:14px;letter-spacing:var(--ls-1);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2)}
.form .submit::after{content:"";width:40px;height:1px;background:currentColor;opacity:.7;
  transition:width var(--t0) var(--e)}
.form .submit:hover::after{width:64px}

.cinfo .info{margin-top:0}
.cinfo .info .t{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--sub-d)}
.cinfo .info .d{font-size:14px;color:var(--paper);margin-top:var(--s2)}
.cinfo .info .tel a{font-family:var(--en);font-size:19px;letter-spacing:var(--ls-1)}

/* ---- 実績の一覧。2列。段差なし。枠も影も付けない ---- */
/* etoha /works/ を実測（画面2171px）
     一覧の幅  画面の **82.8%**（左8.3% / 右9.0%）
     3列・1枚が画面の **26.9%**
     すきま    **横22px ／ 縦80px** ← 横は極端に狭い
   ASTRAは版面1248pxで頭打ちで、1枚が画面の16.2%しかなかった（etohaの6割）。
   横のすきまも96pxで、4倍以上開いていた。
   **この区画だけ版面を外し、左右8.3%で開ける。**すきまはASTRAの目盛りから 縦96/横32 */
.wlist{padding-left:8.3vw;padding-right:8.3vw}
.wlist > .inner{max-width:1800px}
.wgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5) var(--s3);margin-top:var(--s4)}
/* タグの行を3枚でそろえる。見出しの行数が違ってもタグの高さが合う */
.wc,.wc > a{display:flex;flex-direction:column;height:100%}
.wc .tags{margin-top:auto;padding-top:var(--s2)}
.wc .th{overflow:hidden;aspect-ratio:16/9;background:var(--paper)}
.wc .th img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.wc a:hover .th img{transform:scale(1.03)}
.wc.np .th img{transform:none}
/* 案件名の見出しをやめ、**会社名を見出しに上げた**（2026-08-23）。
   何をつくったかはサービス名とタグで足りる */
.wc .cl{font-family:var(--head);font-weight:700;font-size:26px;line-height:var(--lh-h);
  letter-spacing:var(--ls-1);color:var(--ink);margin-top:var(--s3)}
.wc .svc{font-family:var(--en);font-size:14px;letter-spacing:var(--ls-2);color:var(--red);
  margin-top:var(--s1)}
.wc .ttl{font-family:var(--head);font-weight:700;font-size:26px;line-height:var(--lh-h);
  letter-spacing:var(--ls-1);margin-top:var(--s1)}
.wc .tg{font-size:14px;color:var(--sub);margin-top:var(--s2)}
.wc .ref{font-size:10px;color:var(--sub);opacity:.6;margin-top:var(--s2)}

/* ---- 実績の詳細 ---- */
/* 画面には出さないが、読み上げと検索には残す見出し（2026-08-23 追加）。
   **赤いヒーローを外したので、ページに見出しが1つも無くなるのを防ぐ** */
.sronly{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* サムネイルの区画がページの先頭に来るとき。**固定ヘッダーのぶん上を空ける** */
.wkey.first{padding-top:clamp(120px,13vw,220px)}
@media (max-width:900px){ .wkey.first{padding-top:clamp(96px,20vw,140px)} }
.wkey figure .mask{overflow:hidden}
/* 2本のLPを横に並べる（2026-08-23 追加）。**入口が2つあることが主題**なので、
   1枚に詰めず、同じ大きさの画面を2つ見せる。説明文は下に1行だけ通す */
.wkey figure.lpshots{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.wkey figure.lpshots figcaption{grid-column:1 / -1}
@media (max-width:900px){ .wkey figure.lpshots{grid-template-columns:1fr} }
.wkey img{width:100%}
.wkey figcaption{font-size:14px;color:var(--sub);margin-top:var(--s2);
  display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.wkey .ref{font-size:10px;opacity:.6}
.body.long{max-width:720px}
.credit .cr{margin-top:var(--s4);max-width:520px}
.credit dt{float:left;clear:left;width:200px;font-size:14px;color:var(--sub-d);padding-top:var(--s2)}
.credit dd{padding-left:200px;padding-top:var(--s2);padding-bottom:var(--s2);
  color:var(--paper);font-size:14px}
.credit .cr::after{content:"";display:block;clear:both}
.credit .back{margin-top:var(--s4)}

/* ---- お知らせ。**3カラムで並べる**（2026-08-23 変更） ----
   横1行だと1件が幅いっぱいに伸びて、4件で紙面が間延びしていた。
   サムネイル → 日付 → タイトル の読む順は行のときと同じまま、縦に積む */
.nrows{list-style:none;margin-top:var(--s4);
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5) var(--s4)}
.nr{display:block;padding:0}
.nr .nth{min-width:0;overflow:hidden;aspect-ratio:16/9;background:var(--paper);border:1px solid var(--line)}
.nr .nth img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.02);transition:transform var(--t2) var(--e)}
.nr:hover .nth img{transform:scale(1.06)}
.nr time{display:block;margin-top:var(--s2);
  font-family:var(--en);font-size:14px;letter-spacing:var(--ls-1);color:var(--red);
  font-variant-numeric:tabular-nums}
.nr .ttl{min-width:0;margin-top:var(--s1);font-size:19px;line-height:var(--lh-h);
  transition:transform var(--t1) var(--e)}
@media (max-width:1100px){
  .wgrid{grid-template-columns:repeat(2,1fr)}
  .nrows{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .cols.c3,.cols.c4,.cols.c5,.cols.c2{grid-template-columns:1fr}
  /* 縦向きのフロー図なので、狭い画面でも1列のまま。矢印もそのまま通す */
  .proc{grid-template-columns:1fr;gap:var(--s3)}
  .price li{grid-template-columns:1fr}
  .price .v{grid-row:auto;grid-column:1;font-size:36px;margin-top:var(--s2)}
  .wgrid{grid-template-columns:1fr;gap:var(--s5)}
  /* 狭い画面では1列に落とす */
  .nrows{grid-template-columns:1fr;gap:var(--s4)}
  .nr .ttl{font-size:16px}
  .credit dt{float:none;width:auto}
  .credit dd{padding-left:0}
  .form .submit{width:100%}
}

/* ================================================================ 区画の余白と締め
   ここまで index.html の中にだけ書いてあり、下層ページに効いていなかった。
   9枚で共通なので、こちらに移す。

   実測（mount.jp / qando.co.jp）:
     mount … 端から端までの細い罫線 0本。区画の間は margin 8.2〜10.3vw の余白だけ
     qando … 区画の padding が 8.333vw（1440pxで120px）
   線で切らない。余白と地の色だけで切り替える */
/* etoha実測 170〜217px（7.6〜9.7vw・上限なし）。ASTRAは160pxで頭打ちだった */
.sec{padding-top:clamp(64px,8.33vw,200px);padding-bottom:clamp(64px,8.33vw,200px)}
.fv{padding:0}

/* ---- 墨の締め ---- */
.ct{padding-top:var(--sec-s);padding-bottom:var(--s4)}
/* **相談の入口は白い面。**墨のフッターの手前に、地を1段明るくして置く。
   CONTACT の英字 → その下にボタン。ボタンは塗りつぶし＋矢印 */
.ctaw{background:var(--white);padding-top:var(--sec-s);padding-bottom:var(--sec-s);
  text-align:center}
/* CONTACT は他の区画の見出しと同じ扱い（段の頂点56px・--faint） */
.ctaw .en{font-family:var(--en);font-weight:600;font-size:56px;letter-spacing:var(--ls-1);
  line-height:var(--lh-t);color:var(--ink)}
.ctaw .lead{font-size:16px;color:var(--sub);line-height:var(--lh-b);margin-top:var(--s3)}
/* ボタンは2割小さく: 幅560→448 ／ 高さ88→70 ／ 字26→19（段の中から取る） */
.ctaw .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  width:min(448px,100%);min-height:70px;margin-top:var(--s4);
  background:var(--ink);color:var(--paper);
  font-family:var(--head);font-weight:700;font-size:19px;letter-spacing:var(--ls-1);
  transition:background var(--t1) var(--e)}
.ctaw .btn i{font-style:normal;font-family:var(--en);font-weight:400;font-size:14px;
  transition:transform var(--t1) var(--e)}
.ctaw .btn:hover{background:var(--red)}
.ctaw .btn:hover i{transform:translateX(6px)}
/* フッターのナビ。**巨大な ASTRA の下、右揃え。**ヘッダーと同じ右端にそろう */
.ct .links{display:flex;justify-content:flex-end;gap:var(--s4);flex-wrap:wrap;
  font-family:var(--en);font-size:14px;letter-spacing:var(--ls-2);color:var(--sub-d)}
.ct .links a:hover{color:var(--paper)}
.ct .top,.ct .cta,.ct .cten,.ct hr,.ct .co{display:none}
.ct hr{border:0;border-top:1px solid var(--line-d);margin:76px 0 44px}
/* 巨大な ASTRA の**下**に置く行。左にロゴと著作表示、右にナビ。
   **版面(1248px)から出して、ヘッダーと同じ左右 --pad にそろえる。**
   版面の中だと右端が 1702、ヘッダーは 2060 で、157px ずれていた */
/* **区切りの線は引かない。**巨大な ASTRA からそのまま続ける。
   左にロゴ、右にナビ → その下に著作表示。文字は全部白 */
.ct .btm{display:flex;justify-content:space-between;align-items:flex-start;
  gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4);
  width:100vw;margin-left:calc(50% - 50vw);
  padding-left:var(--pad);padding-right:var(--pad)}
.ct .btm .r{text-align:right}
.ct .btm .cp{margin-top:var(--s2)}
/* .ct .cp が後ろで --sub-d を指定していて勝っていた。**入れ子で強くする** */
.ct .btm,.ct .btm .logo,.ct .btm .links,.ct .btm .links a,.ct .btm .cp{color:#FFFFFF}
/* フッターは地が濃い。**赤いマークは濃い地でも読める**ので、マークだけ置いて社名は白のまま。
   ロゴの色を白に作り替えない（会社の記号を勝手に塗り替えない） */
.ct .logo{display:flex;align-items:center;gap:10px;
  font-family:var(--en);font-weight:500;font-size:19px;letter-spacing:var(--ls-2)}
.ct .logo img{width:26px;height:26px;display:block}
.ct .co{font-size:12px;color:var(--sub-d);margin-top:var(--s2)}
.ct .cp{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--sub-d)}

/* フッターの大きな ASTRA。画面からはみ出させない。
   字送りぶん(0.16em)を font-size に織り込んで、内容の幅にぴったり収める */
.ct .mark{font-family:var(--en);font-weight:600;
  /* QANDOのフッターのロゴは画面幅の91.7%。FVより少し大きい。その関係をそのまま写す */
  font-size:max(48px,22.2vw);letter-spacing:.18em;line-height:.86;   /* 上限なし。91.7%に追従する */
  width:100vw;margin-left:calc(50% - 50vw);   /* 版面(1248px)から出して全幅に */
  /* QANDOのフッターのロゴは地に対してはっきり出ている。ASTRAも薄い影をやめて白にする */
  color:#FFFFFF;opacity:1;margin-top:calc(var(--s5) * .5);margin-bottom:calc(var(--s3) * -1);
  white-space:nowrap;user-select:none;text-align:center;
  padding-left:.18em;overflow:hidden}

@media (max-width:900px){
  :root{--pad:40px}
  .ctaw .en{font-size:36px}
  .ctaw .btn{font-size:16px;min-height:58px}
  .ct .links{gap:var(--s3)}
  .ct .btm{flex-direction:column;align-items:flex-start}
  .ct hr{margin:var(--s4) 0 var(--s3)}
}

/* ================================================================ 狭い画面
   88px の英字ラベルと 40px の見出しは、390px の画面では入りきらない。
   固定値をやめて、画面幅に追従させる。上限はこれまでと同じ値 */
.enbig{font-size:clamp(36px,6.5vw,56px)}
.h2{font-size:clamp(22px,2.9vw,36px)}
  .enbig + .h2{font-size:clamp(19px,2.1vw,26px)}
.h3{font-size:clamp(20px,2.1vw,26px)}

@media (max-width:1100px){
  .hd nav{display:none}          /* トップと同じ。狭い画面では英字ナビを畳む */
}
@media (max-width:900px){
  .hd{height:64px}
  .hd .btn{padding:10px 16px;font-size:12px}
  .hd .btn::after{width:14px}
  .phero{padding-top:clamp(96px,20vw,140px)}
  .stack .q,.cols .t,.cols.c2 .t,.proc .t,.wc .ttl{font-size:19px}
  .proc .t{font-size:19px}
  .wkey figcaption{flex-direction:column;gap:var(--s1)}
}

/* 保険で出したときは動きを切る。
   全画面キャプチャは0.6秒の途中を撮ることがあり、そうすると白紙に見える */
html.nofx .rv,html.nofx .mask,html.nofx .lines > span > i{
  transition:none!important;animation:none!important}

/* FVのコピー。広い画面は1行。
   820px を切ると1行では文字が小さくなりすぎるので、そこだけ2行に折る */
/* 36px で1行に入るのは 820px まで（20字×36px = 720px ＋ 右の余白6vw）。
   それより狭ければ2行に折り、さらに狭ければ1段落とす */
@media (max-width:820px){
  .fv .copy{white-space:normal}
  .fv .copy .ln{display:block}
}
@media (max-width:480px){
  .fv .copy{font-size:26px}
}

/* 実績詳細の、2つのサイトへの入口 */
.sites{margin-top:var(--s4)}
.sites .u{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--red);margin-top:6px}
.sites a{display:block}

/* ------------------------------------------------ 事業内容の一覧（service.html）
   ナビの SERVICE が RE:SLIDE 1本に直行していて、3つが並ぶ場所が無かった。
   箱で囲まず、細い罫線で3つを区切る。文字の大きさは9段の中から取る（36/19/16/12） */
.svc{border-top:1px solid var(--line);margin-top:var(--s4);list-style:none}
.svc li{border-bottom:1px solid var(--line)}
.svc a{display:grid;grid-template-columns:100px 1fr 240px;gap:var(--s4);
  align-items:center;padding:var(--s4) 0;transition:padding-left var(--t1) var(--e)}
.svc a:hover{padding-left:var(--s2)}
.svc .no{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--sub)}
.svc .en{display:block;font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--sub)}
.svc .t{font-family:var(--head);font-weight:700;font-size:36px;letter-spacing:var(--ls-1);
  line-height:var(--lh-h);margin-top:6px}
.svc .d{font-size:16px;color:var(--sub);margin-top:var(--s2);line-height:var(--lh-b)}
.svc .p{font-family:var(--en);font-weight:600;font-size:36px;text-align:right;line-height:var(--lh-t)}
.svc .p small{display:block;font-family:var(--sans);font-weight:400;font-size:12px;
  color:var(--sub);letter-spacing:var(--ls-1);margin-top:8px}
@media (max-width:900px){
  .svc a{grid-template-columns:1fr;gap:var(--s2);padding:var(--s3) 0}
  .svc .p{text-align:left;margin-top:var(--s2)}
}

/* ================================================================ etoha の下層を写す
   実測（etoha-lab.co.jp／画面2171px）

   /service/  文字の段 241 / 51 / 39 / 30 / 21 / 18 / 15 / 14 / 13 / 10
     ・見出しは**和文が主役・英字が従**（英字は下に小さく）
     ・各事業は「左に実物・右に文字」。**背景に巨大な番号（241px＝画面の11.1%）**
     ・英字カテゴリを**括弧でくくる**（ GRAPHIC DESIGN. ）
     ・できることを**●付きで横に列挙**
     ・区画の切れ目に**巨大なゴースト文字**
   /works/    文字の段 30 / 21 / 18 / 16 / 14 / 13 / 12 / 10
     ・カードは **英字の小さい行 → 和文の見出し → 角丸のタグ列 → 丸い矢印**
     ・タグは1つずつ枠で囲み、折り返す（「／」でつながない）

   **ASTRA は英字が主役（QANDO型）なので、見出しの主従は変えない。**
   写すのは「番号・括弧のカテゴリ・●の列挙・角丸のタグ・丸い矢印」の5つ。
   ================================================================ */

/* ---------------- 事業内容（service.html）---------------- */
.svcs{list-style:none}
.svcs > li{position:relative;padding:var(--sec-s) 0;border-top:1px solid var(--line)}
.svcs > li:first-child{border-top:0;padding-top:var(--s4)}
/* 番号。**各サービスの右上に置く**（2026-08-23 に中央から移動）。
   中央に大きく重ねていたときは、画像と文字の両方にかぶって読みを止めていた。
   右上なら、区切りの目印として効くだけで本文を邪魔しない。
   大きさも画面幅追従（11.1vw）をやめる。**数字の大きさで殴らない。** */
.svcs .ghost{position:absolute;right:0;top:var(--sec-s);transform:none;
  font-family:var(--en);font-weight:600;font-size:56px;line-height:1;
  letter-spacing:var(--ls-1);
  color:var(--faint);opacity:.9;pointer-events:none;user-select:none;z-index:1}
/* 1つ目だけ上の余白が詰まっているので、番号もそれに合わせる */
.svcs > li:first-child .ghost{top:var(--s4)}
.svcs .row{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:var(--s5);align-items:center}
.svcs .tx{position:relative;z-index:2}
.svcs .ph{position:relative;z-index:0;overflow:hidden;aspect-ratio:16/9;background:var(--paper)}
.svcs .ph img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.2s var(--e)}
.svcs li:hover .ph img{transform:scale(1.03)}
/* 英字カテゴリ。**括弧でくくる**のが etoha の書き方 */
.svcs .cat{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--sub)}
.svcs .t{font-family:var(--head);font-weight:700;font-size:36px;letter-spacing:var(--ls-1);
  line-height:var(--lh-h);margin-top:var(--s1)}
.svcs .d{font-size:16px;color:var(--sub);line-height:var(--lh-b);margin-top:var(--s2)}
/* できること。●付きで横に流す */
.svcs .can{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);
  margin-top:var(--s3);font-size:14px}
.svcs .can li{position:relative;padding-left:16px}
.svcs .can li::before{content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--red)}
/* 料金はここに出さない（2026-08-23）。**額は詳細ページで見せる。**
   4つ並べて額だけ比べられると、中身の違いが読まれないまま安い順に見られる */
.svcs .foot{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line)}
/* 「詳しく見る」は、トップの VIEW ALL と同じあしらい（枠で囲って線を添える）。
   ただし地が白なので、枠線は --line にする。VIEW ALL の枠線は暗い地の上の値 */
.svcs .foot .more{border:1px solid var(--line);padding:17px 40px}
.svcs .foot .more::after{width:34px}
.svcs .foot .more:hover::after{width:52px}
.svcs .foot .more:hover{border-color:var(--ink)}
@media (max-width:900px){
  .svcs .row{grid-template-columns:1fr;gap:var(--s3)}
  .svcs .ghost{font-size:40px}
  .svcs .t{font-size:26px}
  .svcs .p{font-size:26px}
}

/* ---------------- 実績（works.html）のカードを etoha の並びに ---------------- */
/* タグ。**「／」でつながず、1つずつ枠で囲んで折り返す**
   角は丸めない（2026-08-23 変更）。ASTRA は角丸を使わないので、ここだけ丸いと浮く */
.wc .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s2);list-style:none}
.wc .tags li{font-size:12px;letter-spacing:var(--ls-1);color:var(--sub);
  border:1px solid var(--line);border-radius:0;padding:5px 12px;line-height:1.4}
/* 丸い矢印。etoha はカードの右に置く。
   **class を .hd にしてはいけない。**サイトのヘッダーが .hd{position:fixed} で、
   カードの中身が画面の上に飛ぶ。実際にやらかした */
.wc .cap{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s3)}
.wc .go{flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  margin-top:var(--s3);transition:background var(--t1) var(--e),border-color var(--t1) var(--e)}
.wc .go::after{content:"";width:12px;height:1px;background:currentColor;
  box-shadow:3px -3px 0 -.5px currentColor,3px 3px 0 -.5px currentColor;
  transition:width var(--t1) var(--e)}
.wc a:hover .go{background:var(--red);border-color:var(--red);color:var(--white)}
.wc a:hover .go::after{width:16px}

/* ---------------- 事業内容の3つのポイント ----------------
   etoha の POINT ( 01 ) を写す。ただし**半円のタブは使わない**（ASTRAは角丸を使わない）。
   上に1本の濃い罫線を引いて、そこから始まる形にする */
.pts{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s5);margin-top:var(--s4)}
.pts li{position:relative;border-top:1px solid var(--ink);padding-top:var(--s3)}
/* POINT のイラスト（2026-08-23 追加）。
   **罫線の上に立たせる。**罫線は「区切り」から「地面」に役目が変わるだけで、
   文字の流れには1pxも入れない（絶対配置。li の margin-top が図の居場所） */
.pts{--il-h:190px}
/* 2026-08-23 変更：図を文字の流れに戻し、POINT01 → 図 → 見出し → 本文 の順に読ませる。
   **番号と図だけを中央に置く。**見出しと本文は左のまま（中央揃えの本文は読む速さが落ちる） */
.pts .il{display:block;height:var(--il-h);margin:var(--s2) auto 0;
  text-align:center;pointer-events:none}
.pts .il img{display:block;height:100%;width:auto;margin:0 auto}
.pts .no{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);color:var(--red);
  text-align:center}
.pts .t{font-family:var(--head);font-weight:700;font-size:26px;line-height:var(--lh-h);
  letter-spacing:var(--ls-1);margin-top:var(--s3)}
.pts .d{font-size:16px;color:var(--sub);line-height:var(--lh-b);margin-top:var(--s2)}
/* 図を持たない POINT（事業ページの PROBLEM）。**番号を中央に浮かせない。**
   中央に置いているのは、下に来る図と軸をそろえるためなので、図が無いなら左でよい */
.pts.noil .no{text-align:left}
.pts.noil .t{margin-top:var(--s2)}
/* 見出しの下に1行だけ置くリード。**区画の主題を1文で言い切る場所** */
.h2lead{font-size:19px;line-height:var(--lh-h);letter-spacing:var(--ls-1);margin-top:var(--s3)}
/* 選ばれる理由は2つしかない。3列の目盛りのままだと1つぶん穴が空く */
.pts.rs2{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){ .pts.rs2{grid-template-columns:1fr} }

/* 2×2のマトリクス（2026-08-23 作り直し）。
   **点を散らす形はやめた。**4つのうちどこに居るかは、面で示すほうが早い。
   軸の文字は 縦＝上下、横＝下の左右。**元は横軸を左右に縦書きで置いていて、
   どちらの軸の話か読み取れなかった** */
.mx2{margin-top:var(--s4)}
.mx2-y{font-size:11px;letter-spacing:var(--ls-1);color:var(--sub);text-align:center}
.mx2-y:first-of-type{margin-bottom:6px}
.mx2-y+.mx2-grid+.mx2-y{margin-top:6px}
.mx2-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line)}
.mx2-cell{background:var(--paper);min-height:104px;display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:13px;line-height:1.6;color:var(--sub)}
.sec.white .mx2-cell{background:var(--white)}
/* 自分たちの枠だけ地を反転させる。**赤は1か所だけに置く** */
.mx2-cell.is-us{background:var(--red);color:var(--white);font-weight:700;
  font-size:16px;letter-spacing:var(--ls-1)}
.mx2-x{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11px;letter-spacing:var(--ls-1);color:var(--sub)}

/* ---- 選ばれる理由の中身（2026-08-23 追加）---------------------------- */
/* 制作範囲。**番号と名前だけ。**サムネイルは SCOPE の区画で見せるので重ねない */
.scoplabel{font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);
  color:var(--sub);margin-top:var(--s4)}
/* 制作範囲。4つそれぞれに実物を1枚ずつ添える（2026-08-23 変更）。
   **言葉だけだと「何を作れるのか」が像を結ばない。**
   枠で囲む形はやめ、写真を主役にして名前を下に置く */
.scop{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s3);margin-top:var(--s2)}
.scop li{display:block;font-size:16px;font-weight:500}
.scop .th{display:block;overflow:hidden;aspect-ratio:16/9;
  background:var(--paper);border:1px solid var(--line);margin-bottom:10px}
.scop .th img{width:100%;height:100%;object-fit:cover;display:block}
.scop .n{font-family:var(--en);font-size:11px;letter-spacing:var(--ls-2);
  color:var(--red);margin-right:8px}
.sec.white .scop .th{background:var(--white)}

/* マトリクス。**縦が仕上がり、横が頼みやすさ。**
   点は座標を % で持たせる（--x / --y）。数値を直接書かないので、動かすのが1か所で済む */
.mx{margin-top:var(--s4)}
.mx-y{font-size:11px;letter-spacing:var(--ls-1);color:var(--sub)}
.mx-y-hi{margin-bottom:6px}
.mx-y-lo{margin-top:6px}
.mx-plot{position:relative;height:260px;border:1px solid var(--line)}
.mx-axis-v,.mx-axis-h{position:absolute;background:var(--line)}
.mx-axis-v{left:50%;top:0;bottom:0;width:1px}
.mx-axis-h{top:50%;left:0;right:0;height:1px}
.mx-p{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  font-size:12px;line-height:1.5;text-align:center;white-space:nowrap;
  background:var(--paper);padding:6px 10px;border:1px solid var(--line)}
.sec.white .mx-p{background:var(--white)}
/* 自分たちの位置だけ、地と文字を反転させて浮かせる */
.mx-p.is-us{background:var(--red);border-color:var(--red);color:var(--white);
  font-weight:700;font-size:13px;letter-spacing:var(--ls-1)}
.mx-x{display:flex;justify-content:space-between;margin-top:6px;
  font-size:11px;letter-spacing:var(--ls-1);color:var(--sub)}
@media (max-width:900px){ .mx-plot{height:220px} .mx-p{font-size:11px;padding:5px 8px} }

/* 料金の項目名を大きくした（2026-08-23）。16px → 48px（+200%）。
   **金額と同じ大きさになるので、金額は英字・太字のまま差をつける** */
.price .nm{font-size:48px;font-family:var(--head);font-weight:700;
  line-height:var(--lh-h);letter-spacing:var(--ls-1)}
@media (max-width:900px){ .price .nm{font-size:32px} }
/* 白い区画でも罫線は濃いまま。**POINT と同じ「地面」の役目を持たせる** */
.sec.white .pts li{border-top-color:var(--ink)}
.sec.dark .pts li{border-top-color:var(--sub-d)}
.sec.dark .pts .d{color:var(--sub-d)}

@media (max-width:900px){.pts{grid-template-columns:1fr;gap:var(--s4);--il-h:140px}.pts .t{font-size:19px}}

/* ---------------- 実績への導線。**長方形で囲む** ----------------
   上下の罫線2本だと「区切り」に見えて、押せるものに見えなかった。
   四方を1本で囲み、hoverで地と文字を入れ替える（フッターのボタンと同じ作法） */
/* 中央揃いにする（2026-08-23）。左右に振り分けていたときは、
   見出しとラベルが離れすぎて1つの導線に見えなかった */
.tow{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--s3);padding:var(--s4);margin-top:var(--s4);
  border:1px solid var(--line);
  transition:background var(--t1) var(--e),color var(--t1) var(--e),
             border-color var(--t1) var(--e)}
.tow:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.tow:hover .d{color:rgba(242,242,233,.72)}
.tow:hover .more{color:var(--paper);border-color:var(--paper)}
/* ラベルも VIEW ALL と同じ枠付きに */
.tow .more{border:1px solid var(--line);padding:17px 40px;
  transition:border-color var(--t1) var(--e),color var(--t1) var(--e)}
.tow .more::after{width:34px}
.tow:hover .more::after{width:52px}
/* 中央揃いにしたので、見出しと説明は縦に積む。
   inline のままだと横に並んで1行になる */
.tow .t{display:block;font-family:var(--head);font-weight:700;font-size:26px;
  letter-spacing:var(--ls-1);line-height:var(--lh-h)}
.tow .d{display:block;font-size:14px;color:var(--sub);margin-top:var(--s1)}
/* 見出しと説明を外して、ラベル1つだけを残した形（2026-08-23）。
   外側の囲みまで残すと枠が二重になるので、囲みは消してボタンだけを中央に置く */
.tow.only{border:0;padding:0;gap:0;background:none}
.tow.only:hover{background:none;border-color:transparent;color:inherit}
.tow.only:hover .more{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* ページの見出しを中央に。etoha の /works/ は中央揃えで、パンくずを出していない */
.phero.mid{text-align:center}
.phero.mid .enbig{margin-top:0}
.phero.mid .body{margin-left:auto;margin-right:auto}

/* ---------------- 実績紹介の見出し。**赤の面＋ノイズ** ----------------
   赤は基準点の色で、いつもは点1つにしか使わない。**面で使うのはここだけ**と決める。
   ノイズは SVG の feTurbulence をそのまま背景に入れる（画像ファイルを増やさない）。
   WORKS の文字は9段の外。ロゴやフッターの文字と同じ「記号」の扱いにする */
.phero.red{position:relative;overflow:hidden;background:var(--red);color:var(--white);
  padding-top:clamp(140px,14vw,260px);padding-bottom:clamp(96px,9vw,180px)}
.phero.red::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;opacity:.30;mix-blend-mode:overlay}
.phero.red > .inner{position:relative;z-index:1}
/* **必ず1行に収める。**ABOUT US は2行に折れて、WORKS と別物に見えていた。
   文字数(--ch)を生成側から渡し、版面に収まる大きさを計算で出す。
   0.68 は Inter 600 の平均字幅（実測） */
.phero.red > .inner{max-width:none}
.phero.red .enbig{color:var(--white);opacity:.92;white-space:nowrap;
  font-size:min(12vw,240px,calc((100vw - var(--pad) * 2) / (var(--ch,6) * 0.68)));
  line-height:var(--lh-t);margin:0}
.phero.red .h1p{color:var(--white);margin-top:var(--s2)}
/* **赤い地では1文字だけ変える仕掛けを使わない。**見出しは全部白 */
.phero.red .h1p,.phero.red .h1p .k{color:var(--white)}
@media (max-width:900px){
  .phero.red{padding-top:clamp(96px,20vw,140px)}
}

/* 赤い面の上の文字。地が濃いので、本文と注記は白を落として置く */
.phero.red .body,.phero.red .reply{color:rgba(255,255,255,.82)}
.phero.red .psub{color:rgba(255,255,255,.72)}
.phero.red .crumb,.phero.red .crumb a{color:rgba(255,255,255,.7)}
/* 中央揃えのとき、説明文も中央に寄せる */
.phero.mid .reply{margin-left:auto;margin-right:auto}

/* ================================================================
   事業ページの作り直し（2026-08-23）
   PROBLEM を3カラムに、SCOPE と「ほかの事業」「実績」にサムネイルを付ける。
   進め方（.proc）はトップページと同じ骨に戻した（.tx で文章を1つにまとめる）
   ================================================================ */

/* ---- 悩みを3カラムで。**罫線1本で始める形は行のときと同じまま** ---- */
.stack.c3{max-width:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s4);margin-top:var(--s4)}
.stack.c3 li{padding-bottom:0}

/* ---- サムネイル付きの2カラム（RE:SLIDE の対応範囲） ---- */
.scg{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);
  gap:var(--s4);margin-top:var(--s4)}
/* WORKS と同じ 16:9 にそろえた（2026-08-23）。**16:11 で切っていたぶん、
   1枚あたりのスライドが他より大きく見えていた** */
.scg .th{display:block;overflow:hidden;aspect-ratio:16/9;
  background:var(--paper);border:1px solid var(--line)}
.scg .th img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block}
.scg .t{font-family:var(--head);font-weight:700;font-size:26px;line-height:var(--lh-h);
  letter-spacing:var(--ls-1);margin-top:var(--s3)}
.scg .d{font-size:16px;color:var(--sub);line-height:var(--lh-b);margin-top:var(--s1)}

/* ---- 実績。**図解そのものを3列で並べる。**説明は付けない ---- */
.zgrid{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s3);margin-top:var(--s4)}
.zgrid li{overflow:hidden;aspect-ratio:16/9;background:var(--paper);
  border:1px solid var(--line)}
.zgrid img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);transition:transform var(--t2) var(--e)}
.zgrid li:hover img{transform:scale(1.05)}
/* 枚数が多いときは4列（2026-08-23 追加）。**39枚を3列で積むと10行を超えて間延びする。**
   1枚を小さくして、代わりに「量」が一目で分かる形にする */
.zgrid.four{grid-template-columns:repeat(4,1fr);gap:var(--s2)}
@media (max-width:900px){ .zgrid.four{grid-template-columns:repeat(2,1fr)} }
.zmore{margin-top:var(--s4)}

/* ---- ほかの事業。サムネイル付きの3カラム ---- */
.othg{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--s4);margin-top:var(--s4)}
.othg a{display:block}
.othg .th{display:block;overflow:hidden;aspect-ratio:16/9;
  background:var(--paper);border:1px solid var(--line)}
.othg .th img{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.01);transition:transform var(--t2) var(--e)}
.othg a:hover .th img{transform:scale(1.05)}
.othg .cat{display:block;font-family:var(--en);font-size:12px;letter-spacing:var(--ls-2);
  color:var(--red);margin-top:var(--s3)}
.othg .t{display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--head);font-weight:700;font-size:26px;line-height:var(--lh-h);
  letter-spacing:var(--ls-1);margin-top:var(--s1)}
.othg .t::after{content:"";width:34px;height:1px;background:currentColor;opacity:.5;
  transition:width var(--t1) var(--e)}
.othg a:hover .t::after{width:56px}
.othg .d{display:block;font-size:16px;color:var(--sub);line-height:var(--lh-b);
  margin-top:var(--s1)}

/* ---- 赤い見出し面に置く、サービスサイトへの入口 ---- */
.phero.red .psite{margin-top:var(--s3)}
.phero.red .psite a{display:inline-flex;align-items:center;gap:var(--s2);
  border:1px solid rgba(255,255,255,.6);color:var(--white);
  padding:14px var(--s3);font-size:14px;letter-spacing:var(--ls-1);
  transition:background var(--t1) var(--e),color var(--t1) var(--e),
             border-color var(--t1) var(--e)}
.phero.red .psite a i{font-style:normal;transition:transform var(--t1) var(--e)}
.phero.red .psite a:hover{background:var(--white);color:var(--red);border-color:var(--white)}
.phero.red .psite a:hover i{transform:translateX(4px)}

@media (max-width:900px){
  .stack.c3,.scg,.othg{grid-template-columns:1fr;gap:var(--s4)}
  .zgrid{grid-template-columns:repeat(2,1fr)}
  .scg .t,.othg .t{font-size:19px}
}
@media (max-width:640px){
  .zgrid{grid-template-columns:1fr}
}