/* ==========================================================================
   kohane-design.com  共通スタイル
   参考：
     ノスタルジック … 英大＋和小の見出し（縦バー）／縦書きコピー
     ヨハクハウス   … 数字＋線アイコンの行組み
     イチロ         … 薄グレーのカード＋余白
     白鳳堂DY ONE   … 黒地で読ませる／マーカー帯／1行ずつ
     フィーグッド   … 数字は大きく細く・見出しは張らない
   アクセント：朱（校正の朱入れ）。数字・下線・罫・トンボにだけ使う
   背景テクスチャ：版面ガイド線＋トンボ（方眼は使わない＝設計を連想させる）
   ========================================================================== */

:root{
  --ink:#1F1F1F;
  --body-c:#3F3F3F;
  --white:#FFFFFF;
  --gray:#F2F0ED;         /* カード地・フッター帯 */
  --gray-lt:#FAF9F7;      /* さらに薄い面 */
  --gray-band:#EFEDEA;    /* 黒地でのマーカー帯 */
  --accent:#E8472B;       /* 朱 */
  --accent-pale:#FBE7E1;  /* 白地でのマーカー帯 */
  --sub-d:#B5B5B5;
  --sub-l:#767676;
  --line:rgba(31,31,31,.16);
  --line-d:rgba(255,255,255,.22);

  --font:"dnp-shuei-gothic-kin-std", "Zen Kaku Gothic New", system-ui, sans-serif;
  --num:"Roboto", sans-serif;
  /* 版面は画面に追従させ、広い画面でだけ頭打ちにする。
     1080pxで止めると、1440px以上のモニタで中央に寄って窮屈に見える */
  --wrap: min(100% - 120px, 1400px);
  --measure: 700px;                    /* 本文の行長。版面が広がっても長くしすぎない */

  --t:.25s;
  --reveal:1.2s;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

/* 日本語の改行位置。ブラウザ既定は文字単位で折るので、
   「決／める」「バ／ナー」のように語の途中で切れる。
   auto-phrase は文節で折り、pretty は最終行が1〜2文字になるのを避ける。
   対応していないブラウザでは、これまでどおり文字単位で折れるだけ */
p, li, dd, dt, td, th, h1, h2, h3, figcaption,
.name, .pname, .desc, .page-lead, .stk-ja, .proof-q, .proof-d{
  word-break:auto-phrase;
  text-wrap:pretty;
}
body{
  margin:0;
  background:var(--white);
  color:var(--body-c);
  font-family:var(--font);
  font-size:16.5px;
  font-weight:500;
  line-height:2.15;
  letter-spacing:.08em;
  font-feature-settings:"palt";
  line-break:strict;
  word-break:auto-phrase;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; }
a{ color:inherit; }
h1,h2,h3,p{ margin:0; }
h1,h2,h3,.lead{ text-wrap:pretty; }
.nb{ display:inline-block; }
.br-pc{ display:inline; }
/* 狭い画面でだけ改行する。長い文節が途中で割れるときの逃がし */
.br-sp{ display:none; }
b{ color:var(--ink); }

.wrap{ width:var(--wrap); margin-inline:auto; position:relative; }
.m{ max-width:var(--measure); }

.dark{ background:var(--ink); color:var(--white); }
.dark b{ color:var(--white); }
section{ padding-block:110px; position:relative; }
section.dark{ padding-block:130px; }
.fv{ overflow:hidden; }   /* overflow:hiddenはFVだけ（stickyを殺すため他では使わない） */

/* ---------- 見出し（英大＋和小・縦バーは朱）---------- */
.sh{ border-left:5px solid var(--accent); padding-left:28px; margin-bottom:64px; }
/* 意味は和文が持っているので、和文を主役にする（英字は所在を示すラベル） */
.sh .en{
  display:block; font-family:var(--num); font-weight:400;
  font-size:15px; line-height:1.2; letter-spacing:.2em;
  color:var(--sub-l);
}
.sh .ja{
  display:block; font-size:clamp(22px, 2.8vw, 30px); font-weight:500; letter-spacing:.14em;
  line-height:1.6; color:var(--ink); margin-top:8px;
}
.dark .sh .en{ color:var(--sub-d); }
.dark .sh .ja{ color:var(--white); }

/* ---------- 縦書き ----------
   kateinoigaku式：縦書きコピーはstickyで固定し、コンテンツ側だけが流れる */
.tate{
  writing-mode:vertical-rl; text-orientation:mixed;
  font-size:clamp(18px, 1.9vw, 23px); font-weight:500;
  letter-spacing:.26em; line-height:2.3; color:var(--ink);
  position:sticky; top:140px; align-self:start;
  margin-right:clamp(24px, 6vw, 88px);   /* 右端に張り付けない。版面の内側に置く */
}
.tate span{ display:block; }
.tate span + span{ margin-top:44px; }
/* 頭の2文字の背後に置く丸。縦組みのコピーは3か所とも同じ扱いで、
   読み始めの位置を示す（視線誘導）ためのもの。
   白い面では --gray、灰色の面（.soft）では白。どちらも地から13段ぶんずらして、
   3か所の丸が同じ強さで見えるようにしている。
   .tate span の display:block を打ち消さないと、丸が行そのものにかかる */
.tate .maru{ display:inline; position:relative; }
.tate .maru::before{
  content:''; position:absolute; z-index:-1;
  width:3.4em; height:3.4em; border-radius:50%;
  background:var(--gray);
  /* 字送りは最後の1文字の後ろにも入るので、2文字のインクの重心は
     ボックス中心より字送りの半分（.26em ÷ 2 = .13em）だけ手前にある。
     縦組みでは「手前」＝上。ボックス中心に置くと丸が3px下がって見える */
  top:calc(50% - .13em); left:50%; transform:translate(-50%,-50%);
}
.soft .tate .maru::before{ background:var(--white); }

/* ---------- ピル型ボタン ---------- */
.pill{
  display:inline-block; text-decoration:none;
  border:1px solid var(--ink); border-radius:6px;
  padding:15px 36px; font-size:14px; font-weight:600; letter-spacing:.12em;
  background:var(--ink); color:var(--white);
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.dark .pill{ border-color:var(--white); background:var(--white); color:var(--ink); }
.pill .arw{
  display:inline-block; margin-left:14px;
  font-family:var(--num); font-size:15px; line-height:1;
  transition:color var(--t) var(--ease), transform var(--t) var(--ease);
}
.pill-s{ padding:9px 24px; font-size:13px; }
.pill-o{ background:transparent; color:var(--ink); }
.pill-o:hover{ background:var(--ink); color:var(--white); }

/* ---------- 実物を見にいくボタン ----------
   問い合わせ（黒い丸ボタン）と役割を分ける。
   こちらは「外の実物を開く」なので、白地・黒枠・角はほぼ立てる */
.btn-out{
  display:inline-flex; align-items:center; gap:18px;
  padding:15px 26px; border:1px solid var(--ink); border-radius:6px;
  background:var(--white); color:var(--ink);
  font-size:14px; font-weight:600; letter-spacing:.12em; text-decoration:none;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.btn-out .arw{
  display:inline-block; font-family:var(--num); font-size:15px; line-height:1;
  transition:color var(--t) var(--ease), transform var(--t) var(--ease);
}

/* ---------- リンクボタンのホバー ----------
   ボタンの形は3種類あるが、触れたときの反応は1つに揃える。
   地は動かさない。矢印だけが朱に変わって5px前に出る。
   地ごと反転させると、押す前にボタンが別物に見えてしまう */
@media (hover: hover){
  .pill:hover .arw,
  .btn-out:hover .arw,
  a.go:hover .arw,
  .work-row:hover .go .arw{ color:var(--accent); transform:translateX(5px); }
}
.dark .btn-out{ border-color:var(--white); background:transparent; color:var(--white); }

/* ---------- このサイト自体への誘導 ----------
   01〜04の直後。ボタンの名前ではなく、読み終えた人に浮かぶ問いを先に置く */
.proof{ margin-top:46px; max-width:var(--measure); }
.proof-q{ font-size:clamp(18px, 2.1vw, 22px); font-weight:600; letter-spacing:.08em; line-height:1.7; color:var(--ink); margin:0 0 14px; }
.proof-d{ font-size:15px; line-height:2.0; color:var(--body-c); margin:0 0 26px; }
.proof-b{ margin:0; }

/* ---------- マーカー帯（署名）---------- */
.mk{ position:relative; display:inline-block; padding:3px 12px; z-index:0; }
.mk::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--gray-band);
  transform:scaleX(0); transform-origin:left center;
  transition:transform .6s var(--ease);
}
.mk .mk-t{ color:inherit; transition:color .3s var(--ease) .25s; }
.on .mk::before, .mk.on::before{ transform:scaleX(1); }
.dark .on .mk .mk-t, .dark .mk.on .mk-t{ color:var(--ink); }
/* 薄グレーの面では、灰色の帯は地に沈む。朱の薄いほうを使う */
.light .mk::before, .soft .mk::before{ background:var(--accent-pale); }
.light .on .mk .mk-t, .soft .on .mk .mk-t{ color:var(--ink); }
.no-js .mk::before{ transform:scaleX(1); }
.no-js .dark .mk .mk-t{ color:var(--ink); }

/* ---------- 版面ガイド＋トンボ ---------- */
/* 版面の内側を示す罫。見えなければ引いていないのと同じなので、
   気づける下限まで上げる。黒地のほうが沈むので濃くする */
.guides{ position:absolute; inset:0; pointer-events:none; }
.guides line{ stroke:rgba(255,255,255,.16); }
.guides .crop{ stroke:var(--accent); opacity:.7; }
section:not(.dark) .guides line{ stroke:rgba(31,31,31,.11); }
section:not(.dark) .guides .crop{ opacity:.5; }

/* ---------- ヘッダー ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.head-in{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.logo{ font-size:16px; font-weight:600; letter-spacing:.12em; text-decoration:none; white-space:nowrap; color:var(--ink); }
.gnav{ display:flex; align-items:center; gap:6px; }
.gnav a.link{
  text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.08em; color:var(--ink);
  padding:8px 14px; white-space:nowrap;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0% 2px no-repeat;
  transition:background-size var(--t) var(--ease);
}
.gnav a.link:hover{ background-size:100% 2px; }
.gnav .pill{ margin-left:14px; }
/* 開閉ボタンは狭い画面でだけ出す */
.nav-btn{ display:none; }

/* フッターの補助リンク */
.f-line{
  display:flex; flex-wrap:wrap; align-items:baseline;
  justify-content:space-between; gap:10px 24px;
  margin:0; font-size:12px; letter-spacing:.08em;
}
.f-line a{
  color:var(--sub-l); text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0% 1px no-repeat;
  transition:background-size var(--t) var(--ease), color var(--t) var(--ease);
  padding-bottom:3px;
}
.f-line a:hover{ color:var(--ink); background-size:100% 1px; }

/* ---------- FV ---------- */
.fv{
  min-height:90svh;
  display:flex; align-items:center;
  padding-block:120px;
}
.fv h1{
  font-size:clamp(34px, 6.2vw, 76px);
  font-weight:500; line-height:1.42; letter-spacing:.09em;
  margin-bottom:44px;
}
.fv .w{ display:inline-block; white-space:nowrap; }
/* 以前は1文字ずつ飛んできて集まっていた。「静かに言い切る」コピーに変えたので、
   動きもページ内の他と同じ、下から立ち上がるだけにする */
.fv .c{ display:inline-block; }
.js .fv h1{ animation:rise 1.1s var(--ease) both; }
@keyframes rise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
.fv .c-a{ color:var(--accent); }
.fv-sub{ font-size:17px; font-weight:500; line-height:2.2; letter-spacing:.1em; margin-bottom:14px; }
.fv-org{ font-size:14px; color:var(--sub-d); letter-spacing:.1em; margin-bottom:44px; }

/* 左に見出し、右に目次。読み物の扉として、何が書いてあるかを先に見せる */
.fv-grid{ display:grid; grid-template-columns:1fr 232px; gap:0 72px; align-items:end; }
.fv-grid h1{ font-size:clamp(34px, 5.4vw, 66px); }
.fv-toc{ border-top:1px solid rgba(255,255,255,.22); padding-top:22px; padding-bottom:6px; }
.fv-toc-t{
  font-family:var(--num); font-size:11px; font-weight:400; letter-spacing:.3em;
  color:rgba(255,255,255,.45); margin:0 0 18px;
}
.fv-toc ol{ list-style:none; margin:0; padding:0; }
.fv-toc li{ border-bottom:1px solid rgba(255,255,255,.1); }
.fv-toc a{
  display:grid; grid-template-columns:34px 1fr; align-items:baseline;
  padding:11px 0; text-decoration:none;
  transition:opacity var(--t) var(--ease);
}
.fv-toc .n{
  font-family:var(--num); font-size:11px; font-weight:400;
  letter-spacing:.14em; color:var(--accent);
}
.fv-toc .t{ font-size:13px; font-weight:500; letter-spacing:.1em; color:rgba(255,255,255,.82); }
@media (hover: hover){
  .fv-toc a:hover{ opacity:.6; }
}

/* ---------- 黒地の読み物 ---------- */
.lines{ text-align:center; margin-inline:auto; }
.lines .l{
  font-size:clamp(16px, 1.8vw, 19px); font-weight:500; letter-spacing:.12em; line-height:2.2;
  margin-bottom:30px;
}

/* ---------- 悩みのチェックリスト ---------- */
.soft{ background:var(--gray); }
.checks{ list-style:none; margin:0; padding:0; }
.checks li{
  display:grid; grid-template-columns:40px 1fr; gap:22px; align-items:center;
  border-bottom:1px dashed var(--line); padding:26px 4px;
  font-size:17px; line-height:2.0; color:var(--ink);
}
.checks li:first-child{ border-top:1px dashed var(--line); }
/* 白い丸はチェックボックスを模しただけの装飾で、情報を足していない。
   外して、朱の印そのものを主役にする */
.checks .ck{
  display:grid; place-items:center;
  color:var(--accent); font-size:22px; font-weight:500; line-height:1;
}

/* ---------- 黒い面がせり上がる ---------- */
.turn{ position:relative; background:var(--gray); color:var(--ink); overflow:hidden; }
.turn-bg{
  position:absolute; inset:0; background:var(--ink);
  transform:scaleY(0); transform-origin:bottom center;
  transition:transform 1.1s var(--ease);
}
.turn.on .turn-bg{ transform:scaleY(1); }
.turn .wrap{ position:relative; z-index:1; transition:color .5s var(--ease) .45s; }
.turn.on .wrap{ color:var(--white); }
.turn p{
  font-size:clamp(17px, 2.2vw, 24px); font-weight:500; letter-spacing:.12em; line-height:2.1;
  text-align:center;
}
/* 囲んだ一文の前後をあける。詰めると鉤が本文にくっついて、囲みに見えない */
.turn p + p{ margin-top:18px; }
.turn p:has(.mk){ margin-block:52px; }
/* この一文は面で塗らず、四隅の鉤で留める。
   塗ると帯が主役になるが、鉤なら余白ごと囲めて、字が主役のままでいられる */
.turn .mk{
  --kg:rgba(255,255,255,.55);
  --kl:22px;
  display:block; width:fit-content; margin-inline:auto;
  padding:38px 52px;
  background:
    linear-gradient(var(--kg),var(--kg)) left  top    / 1px var(--kl) no-repeat,
    linear-gradient(var(--kg),var(--kg)) left  top    / var(--kl) 1px no-repeat,
    linear-gradient(var(--kg),var(--kg)) right top    / 1px var(--kl) no-repeat,
    linear-gradient(var(--kg),var(--kg)) right top    / var(--kl) 1px no-repeat,
    linear-gradient(var(--kg),var(--kg)) left  bottom / 1px var(--kl) no-repeat,
    linear-gradient(var(--kg),var(--kg)) left  bottom / var(--kl) 1px no-repeat,
    linear-gradient(var(--kg),var(--kg)) right bottom / 1px var(--kl) no-repeat,
    linear-gradient(var(--kg),var(--kg)) right bottom / var(--kl) 1px no-repeat;
  opacity:0; transition:opacity .8s var(--ease) .6s;
}
.turn.on .mk{ opacity:1; }
.turn .mk::before{ display:none; }
.pop{ display:inline; }
.no-js .turn{ background:var(--ink); color:var(--white); }
.no-js .turn-bg{ transform:scaleY(1); }

/* ---------- 作り方 ---------- */
.howto{ display:grid; grid-template-columns:1fr auto; gap:64px; }
.nrows{
  list-style:none; margin:64px 0 0;
  background:var(--gray-lt); border-radius:8px; padding:8px 40px;
}
.nrows li{
  display:grid; grid-template-columns:110px 1fr; gap:28px; align-items:baseline;
  border-top:1px solid var(--line); padding:30px 4px;
}
.nrows li:first-child{ border-top:0; }
.nrows .n{ font-family:var(--num); font-size:clamp(36px,4.4vw,56px); font-weight:300; line-height:1; color:rgba(31,31,31,.26); }
.nrows .t{ font-size:clamp(16px, 1.9vw, 19px); font-weight:600; letter-spacing:.12em; color:var(--ink); }
.nrows .t small{ display:block; font-size:13px; font-weight:500; letter-spacing:.08em; color:var(--sub-l); margin-top:8px; }
.nrows .u{
  padding-bottom:4px;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0% 2px no-repeat;
  transition:background-size .9s var(--ease);
}
.nrows li.on .u{ background-size:100% 2px; }
.no-js .nrows .u{ background-size:100% 2px; }

/* ---------- 実績の行 ---------- */
.work-row{
  display:grid; grid-template-columns:2fr 3fr; gap:48px;
  border-top:1px solid var(--line);
  padding:48px 20px;
  text-decoration:none;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.work-row:last-of-type{ border-bottom:1px solid var(--line); }
/* 白文字だけでは太字の強調が消えるので、反転時は朱の下線で示す
   （複数行にまたがるので background ではなく text-decoration を使う） */
.work-row b,
.work-row strong{
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:2px;
  text-underline-offset:5px;
  transition:color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);
}
/* 作ったものを見せる行。画像・成果物・説明の3列にする。
   画像のない行（記事中のリンク、ページ下部の「ほかの制作実績」）は2列のまま。
   要素ごとに名前をつけて置くことで、狭い画面では並び順だけを変えられる */
.work-row.with-shot{
  grid-template-columns:340px 1.1fr 1.6fr;
  grid-template-areas:
    "shot name cat"
    "shot meta desc";
  gap:0 36px;
}
/* 861〜915pxでは、340px固定の写真列を引いた残りが .cat の最小幅（246.7px）に足りず、
   グリッドが版面から最大47pxはみ出して横スクロールが出ていた。
   grid の既定（min-width:auto＝最小内容幅までしか縮まない）を外して、
   その帯でだけ折り返させる。920px以上では列幅が最小内容幅を上回るので見え方は変わらない */
.work-row.with-shot > *{ min-width:0; }
.work-row.with-shot .wshot { grid-area:shot; }
.work-row.with-shot .name  { grid-area:name; align-self:baseline; }
.work-row.with-shot .cat   {
  grid-area:cat; align-self:baseline; position:relative;
  /* 社名と業種の字面の高さの差。社名が縮む幅では、ずらす量も一緒に縮む */
  top:calc((clamp(22px, 2.6vw, 30px) - 12px) * -0.88);
}
.work-row.with-shot .w-meta{ grid-area:meta; }
.work-row.with-shot .w-desc{ grid-area:desc; }

/* 制作物は2枚重ね。1枚だと媒体が分からないので、
   PCとスマホ／紙の判型と、形の違いで何を作ったかを示す */
.wshot{ position:relative; }
.wshot img{ display:block; max-width:100%; height:auto; background:var(--white); }
.wshot .sh1, .wshot .sh2{
  border:1px solid var(--line);
  transition:border-color var(--t) var(--ease);
}
/* Web案件：新サイト（PC・横長）の手前に、旧LP（スマホ・縦長）を重ねる */
.ws-web{ aspect-ratio:4/3; }
.ws-web .sh1{ width:84%; margin-left:auto; }
/* 手前のスマホは、角を丸めて端末の画面らしく見せる */
.ws-web .sh2{ position:absolute; left:0; bottom:0; width:27%; border-radius:9px; }
/* 紙案件：チラシ（A4縦）の手前に、リーフレット（三つ折り・横長）を重ねる */
.ws-print{ aspect-ratio:4/3; }
.ws-print .sh1{ width:44%; }
.ws-print .sh2{ position:absolute; right:0; bottom:6%; width:62%; }

.work-row .cat{ font-size:12px; font-weight:600; letter-spacing:.18em; opacity:.6; margin-bottom:14px; }
.work-row .name{ font-size:clamp(22px, 2.6vw, 30px); font-weight:500; letter-spacing:.1em; line-height:1.6; color:var(--ink); }
.work-row .desc{ font-size:15px; line-height:2.05; margin-bottom:22px; }
.work-row .prog{ font-size:12px; letter-spacing:.06em; opacity:.6; margin-bottom:22px; }

/* 成果物と、該当するプラン */
.work-row .deliv{ list-style:none; margin:22px 0 0; padding:0; }
.work-row .deliv li{
  position:relative; padding-left:18px;
  font-size:14px; letter-spacing:.06em; line-height:26px;
}
/* 記号は中黒。和文の箇条書きの正統で、ダッシュはMarkdown由来の記号になる。
   かつ1pxの罫は「マーク全体が1px」なので、行が半端な位置に落ちると
   インクが隣のピクセルへ移って濃さそのものが変わる（ブロックごとに濃淡が出る）。
   グリフなら内側に塗り切ったピクセルが残るので、同じズレでも濃さは変わらない */
/* left を -2px にするのは、中黒のインクが送り幅（palt で8.5px）の中央に来るため。
   left:0 のままだとインクの左端が2.3px内側に入り、上の行より字下がりして見える */
.work-row .deliv li::before{
  content:'・'; position:absolute; left:-2px; top:0;
  font-size:14px; line-height:26px; color:currentColor;
}
.work-row .deliv .soon{ opacity:.55; }
.work-row .plan-tag{
  display:inline-block; margin-top:20px;
  font-size:12px; font-weight:600; letter-spacing:.1em;
  background:var(--accent-pale); color:var(--ink);
  padding:5px 13px;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
/* 行が反転したときも読めるように */
/* サイト内の別ページへ進む印。実績カードの中でも、本文の途中でも同じ形を使う */
.go{
  display:inline-block; border:1px solid currentColor; border-radius:6px;
  padding:9px 24px; font-size:13px; font-weight:600; letter-spacing:.1em;
  text-decoration:none;
  transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.go .arw{ margin-left:14px; transition:color var(--t) var(--ease), transform var(--t) var(--ease); display:inline-block; }

/* 画面の中央に近づくほど濃くなる。通り過ぎれば白に戻る。
   ホバーだと当たり判定でムラが出るので、スクロール位置だけで決める */
.work-row{ --fill:0; background:rgb(31 31 31 / var(--fill)); }
/* 面はスクロールで連続的に濃くなるが、文字色は白か墨のどちらかしかない。
   切り替わる瞬間だけが飛んで見えるので、そこに時間を持たせる */
.work-row{ transition:color .35s var(--ease); }
.work-row .name{ transition:color .35s var(--ease); }
.work-row .plan-tag,
.work-row .wshot .sh1,
.work-row .wshot .sh2{ transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.work-row.lit{ color:var(--white); }
.work-row.lit .name,
.work-row.lit b,
.work-row.lit strong{ color:inherit; }
/* 白文字だけでは太字の強調が消えるので、朱の下線で示す */
.work-row.lit b,
.work-row.lit strong{ text-decoration-color:var(--accent); }
/* 白い紙・白いサイトの輪郭が黒地に沈まないように */
.work-row.lit .wshot .sh1,
.work-row.lit .wshot .sh2{ border-color:rgba(255,255,255,.28); }
/* 番号は名前の添え字。同じ強さで並べると、まだ説明していない番号のほうが目に入る */
.work-row .plan-tag .pt-n{ font-family:var(--num); font-size:11px; font-weight:500; letter-spacing:.14em; opacity:.62; margin-left:12px; }
.work-row.lit .plan-tag{ background:var(--white); color:var(--ink); }
/* サンプルの札は実案件と同格に見せない。反転時も白く塗り切らない */
.work-row.sample-row.lit .plan-tag{ background:rgba(255,255,255,.18); color:var(--white); }
.work-row.lit .go{ background:var(--white); color:var(--ink); border-color:var(--white); }
@media (hover: hover){
}

/* ---------- 対応できること ---------- */
/* 右のカラムを版面いっぱいに伸ばすと、18字ほどの説明に対して余白が余る。
   本文の行長に近い幅で止める */
/* グレーの面に直接置くと罫も字も沈む。白い面を1枚敷いて、そこに組む。
   角丸も影もつけない（カードにすると、この面が主役になってしまう） */
.able{
  list-style:none; margin:64px 0 0; max-width:820px;
  background:var(--white); padding:10px 44px;
}
.able li{
  display:grid; grid-template-columns:250px 1fr; gap:32px; align-items:baseline;
  border-top:1px solid var(--line); padding:26px 0;
}
.able li:first-child{ border-top:0; }
.able .ic{ width:44px; height:44px; }
.able .ic *{ stroke:var(--ink); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.able .t{ font-size:16.5px; font-weight:600; letter-spacing:.1em; color:var(--ink); }
/* 項目名との差は色ではなく太さでつける。説明も読ませたい文章なので薄くしない */
.able .d{ font-size:15.5px; color:var(--body-c); line-height:2.0; letter-spacing:.06em; }
.able a{ text-underline-offset:4px; }

/* ---------- 進め方 ---------- */
.proc{ list-style:none; margin:0 0 80px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:32px; position:relative; }
.proc::before{
  content:""; position:absolute; top:5px; left:12px; right:12px; height:1px; background:var(--line);
}
.proc li{ position:relative; padding-top:36px; }
.proc .dot{
  position:absolute; top:0; left:0;
  width:11px; height:11px; border-radius:50%; background:var(--accent);
}
.proc .n{ font-family:var(--num); font-size:15px; font-weight:500; color:var(--accent); letter-spacing:.08em; display:block; margin-bottom:10px; }
.proc h3{ font-size:16px; font-weight:600; letter-spacing:.12em; color:var(--ink); margin-bottom:10px; }
.proc p{ font-size:14.5px; line-height:2.0; }

/* ---------- 料金 ---------- */
/* 標準に足したセクションの行。標準と同格に見せず、足したものだと分かるようにする */
.tbl tr.opt th, .tbl tr.opt td{ background:var(--gray); }
.opt-b{
  display:inline-block; margin-left:10px; padding:2px 8px;
  font-size:10.5px; font-weight:600; letter-spacing:.08em;
  background:var(--accent-pale); color:var(--ink); vertical-align:middle;
}

/* 3枚を見比べる前に、どれを基準に読めばいいかを1行で置く。
   説明を読み進めないと標準が分からない状態にしない */
.price-lead{ font-size:15.5px; letter-spacing:.08em; color:var(--body-c); margin:0 0 8px; }
.price-lead b{ font-family:var(--num); font-weight:500; letter-spacing:.1em; }

/* 金額を読む前に目に入る位置に置く。あとから気づく形にしない */
.tax-note{ font-size:14px; letter-spacing:.06em; color:var(--sub-l); margin:0 0 20px; }
.plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:24px; }
.plan{
  background:var(--gray); border-radius:8px; padding:40px 32px;
  display:flex; flex-direction:column;
}
/* 4つの別々の話が続けて並ぶと、どこから読めばいいのか分からなくなる。
   見出しを左に立てて、話の切れ目を目で分かるようにする */
.pnote{ display:grid; grid-template-columns:190px minmax(0,640px); gap:0 28px; margin:0 0 64px; font-size:14.5px; line-height:1.95; }
.pnote dt, .pnote dd{ border-top:1px solid var(--line); padding:16px 0 17px; }
.pnote dt{ font-weight:600; letter-spacing:.06em; color:var(--ink); }
.pnote dd{ margin:0; color:var(--body-c); }
.pnote dd b{ color:var(--ink); font-weight:600; }

/* プランに含まれるもの。カードに項目を書き分けると
   「このプランには無い」と誤解されるので、横断の表で見せる */
.ptbl-wrap{ margin:44px 0 40px; overflow-x:auto; }
/* 表が画面に収まらない狭い画面でだけ、スクロールできることを伝える */
.ptbl-hint{ display:none; }
.ptbl{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:660px; }
.ptbl th, .ptbl td{ border-bottom:1px solid var(--line); padding:14px 12px; text-align:left; line-height:1.8; }
.ptbl thead th{
  border-bottom:2px solid var(--ink); color:var(--ink);
  font-family:var(--num); font-size:12px; font-weight:500; letter-spacing:.16em;
  vertical-align:bottom; white-space:nowrap;
}
/* 英字のプラン番号の下に、和文のプラン名を小さく添える */
.ptbl thead th span{
  display:block; margin-top:6px;
  font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:.06em;
}
.ptbl thead th:first-child{
  font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:.1em;
}
/* プラン名の列は、下のデータと同じ中央揃えにする */
.ptbl thead th:not(:first-child){ text-align:center; }
.ptbl tbody th{ font-weight:500; color:var(--body-c); width:30%; }
.ptbl td{ text-align:center; color:var(--ink); font-weight:600; }
.ptbl .y{ color:var(--ink); font-size:15px; }
.ptbl .n{ color:var(--sub-d); font-weight:400; }

/* プランは完全な入れ子（02は01の全部＋、03は02の全部＋）になっている。
   ○と—が並ぶ表は、意味のないマスのほうが多くなるので積み上げで見せる。
   縦に積むぶん、狭い画面でも横に流れない */
.stk-cap{ font-size:15px; font-weight:600; letter-spacing:.12em; color:var(--ink); margin:44px 0 10px; }
.stack{ margin:0 0 40px; }
/* 見出しを左に立て、項目は右にまとめる。注意書き（.pnote）と同じ骨格。
   版面いっぱいに2列で流すと、項目が短いぶん左右が離れて別々の話に見える */
.stk{
  display:grid; grid-template-columns:190px minmax(0,640px); gap:0 28px;
  border-top:1px solid var(--line); padding:26px 0 28px;
}
/* 表の見出し罫と同じ太さ。ここから下が一続きだと分かる */
.stk:first-child{ border-top:2px solid var(--ink); }
.stk-h{ margin:0; }
.stk-en{ display:block; font-family:var(--num); font-size:12px; font-weight:500; letter-spacing:.18em; color:var(--accent); margin-bottom:7px; }
.stk-ja{ display:block; font-size:15px; font-weight:600; letter-spacing:.06em; line-height:1.6; color:var(--ink); }
/* 前のプランを丸ごと含むことを、項目より先に読ませる */
.stk-base{ font-size:14px; letter-spacing:.04em; color:var(--sub-l); margin:0 0 12px; }
.stk-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px 32px;
}
/* 行送りは整数px。2行に折れた項目どうしの間隔を揃えるため */
.stk-list li{ position:relative; padding-left:20px; font-size:14.5px; line-height:28px; color:var(--body-c); }
/* 中黒。色は本文と同じ（currentColor）。実績カードの成果物リストと同じ規則。
   理由は .work-row .deliv li::before のコメントを参照 */
.stk-list li::before{ content:'・'; position:absolute; left:-2px; top:0; font-size:14.5px; line-height:28px; color:currentColor; }
/* プラン名は白いシェイプに入れる。灰色のカードの中で、名前だけを面から起こす。
   .plan は縦並びの flex なので inline-block はブロック化される。align-self で内容幅に縮める。
   角丸6pxはボタン（.pill / .btn-out / .go）と同じ。カードの8pxより内側なので一段小さくする。
   右のパディングだけ字送り1つぶん引いているのは、.14em の余りが最後の文字の右に出て、
   そのままだと左右の余白が2.66px違って見えるため */
.plan .pname{
  align-self:flex-start;
  background:var(--white); border-radius:6px;
  padding:8px 16px; padding-right:calc(16px - .14em);
  /* パディングのぶん左へ引き出す。こうしないとプラン名だけ16px内側に入り、
     下の PLAN 0X・説明文・価格と頭が揃わない。
     負のマージンは使える幅も16px広げるので、「設計からつくるホームページ」が
     狭い画面でも1行に収まる（283px→299pxぶんが使えるようになる） */
  margin-left:-16px;
  font-size:19px; font-weight:600; letter-spacing:.14em; line-height:1.6;
  color:var(--ink); margin-bottom:12px;
}
/* 3枚とも flex にしておく。札が入るのは PLAN 02 だけなので、
   .pen の高さが変わると、そのカードだけ価格と注記の頭が下がってしまう。
   札の高さ（10.5px×1.7＋上下2px＝約21.9px）は .pen の行box（12px×2.15＝25.8px）より低いので、
   3枚とも25.8pxのまま揃う */
.plan .pen{
  display:flex; align-items:center; gap:10px;
  font-family:var(--num); font-size:12px; font-weight:500; letter-spacing:.18em; color:var(--accent); margin-bottom:24px;
}
/* 「基本プラン」の札。面の色は .opt-b と同じ朱の薄い面で、新しい色は足していない。
   .pen は var(--num)（Roboto）なので、和文が入る札だけ本文書体に戻す */
.plan .pbase{
  font-family:var(--font); font-size:10.5px; font-weight:600; letter-spacing:.08em;
  line-height:1.7; padding:2px 8px; white-space:nowrap;
  background:var(--accent-pale); color:var(--ink);
}
/* カードの中は幅が狭い。文節で折ると行末が大きく余るので、幅いっぱいまで詰める */
.plan .pbody{ font-size:15px; line-height:2.1; margin-bottom:28px; min-height:calc(2.1em * 3); word-break:normal; }
.plan .price{ font-family:var(--num); font-size:clamp(38px, 4vw, 54px); font-weight:300; line-height:1.2; color:var(--accent); letter-spacing:.02em; }
.plan .price .unit{ font-family:var(--font); font-size:15px; font-weight:600; letter-spacing:.1em; color:var(--ink); margin-left:6px; }
/* 「納期：素材受領から2週間」が入る。ラベルではなく条件なので14px下限を適用する */
.plan .term{ font-size:14px; font-weight:600; letter-spacing:.12em; color:var(--sub-l); margin:10px 0 14px; }
/* カード下部の注記。行数がプランごとに違っても価格の高さが揃うよう、3行ぶんを確保する */
.plan .most{ font-size:14.5px; font-weight:600; color:var(--ink); line-height:2.15; min-height:calc(2.15em * 3); }
.plan .most .pr{ font-family:var(--num); font-size:12px; font-weight:500; letter-spacing:.08em; color:var(--sub-l); margin-left:12px; }

/* ---------- CTA ---------- */
/* ページの締め。FVと呼応する大きさで、版面の横幅を使う */
.cta h2{
  font-size:clamp(26px, 4.4vw, 54px); font-weight:500; letter-spacing:.1em; line-height:1.5;
  margin-bottom:40px;
}

/* ---------- フッター ---------- */
/* プライバシーポリシー */
.pp-list{ list-style:none; margin:0 0 28px; padding:0; }
.pp-list li{
  position:relative; padding-left:20px; margin-bottom:12px; line-height:2.0;
}
.pp-list li::before{
  content:""; position:absolute; left:0; top:1em;
  width:9px; height:1px; background:var(--accent);
}
.pp-date{ margin-top:56px; font-size:12.5px; color:var(--sub-l); letter-spacing:.08em; }

/* 導線はヘッダーが持つ。フッターは屋号と著作表示だけ置く */
footer{ background:var(--white); border-top:1px solid var(--line); padding-block:48px 44px; }
.f-meta{ font-family:var(--num); font-size:12px; letter-spacing:.08em; color:var(--sub-l); }
/* ヘッダーのナビに出していないページの受け皿。
   兄弟ページの横移動は各ページ末尾の Next が担うので、ここに置くのは
   「どこからも行きにくいページ」だけにする（サイトマップにはしない） */
.f-nav{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  margin:0 0 26px; font-size:13px; letter-spacing:.06em;
}
.f-nav a{
  color:var(--ink); text-decoration:none;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 0% 1px no-repeat;
  transition:background-size var(--t) var(--ease);
  padding-bottom:3px;
}
.f-nav a:hover{ background-size:100% 1px; }

/* ---------- 現れる ---------- */
.r{ transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
.js .r{ opacity:0; transform:translateY(34px); }
.js .r.on{ opacity:1; transform:none; }

/* 以前は横から差し込んでいたが、動きの向きで強調を作るのはやめた。
   .r と同じ立ち上がりに揃える（クラスは残す＝HTMLを触らずに済ませるため） */
.rx{ transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); }
.js .rx{ opacity:0; transform:translateY(34px); }
.js .rx.on{ opacity:1; transform:none; }
.em-a{
  color:var(--ink); font-weight:600; font-style:normal;
  background:linear-gradient(var(--accent),var(--accent)) left bottom / 100% 2px no-repeat;
  padding-bottom:5px;
}
.dark .em-a{ color:var(--white); }


/* ==========================================================================
   下層ページ
   ========================================================================== */

/* ---------- 記事のヘッダー（上下を罫線で挟む）----------
   パンくずは12pxの位置表示で、本文ではない。上にページ全体の余白を丸ごう与えると
   ヘッダーからもタイトル枠からも離れて浮くので、上だけ詰めてヘッダー側に寄せる。
   下の36pxは詰めない（詰めるとパンくずが罫線の箱の一部に見える）。
   48は余白の刻み（28/32/36/48/56/64/120）に乗せた値。72はどこにも乗っていなかった */
.page-head{ padding-block:48px 0; }
.crumb{ font-size:12px; letter-spacing:.1em; color:var(--sub-l); margin-bottom:36px; }
.crumb a{ text-decoration:none; }
.crumb a:hover{ text-decoration:underline; text-underline-offset:4px; }
.crumb span{ margin:0 10px; opacity:.5; }

.ph{
  border-top:1px solid var(--ink);
  border-bottom:1px solid var(--ink);
  padding-block:56px;
}
.ph-en{
  font-family:var(--num); font-size:14px; font-weight:400; letter-spacing:.2em;
  color:var(--sub-l); margin-bottom:20px;
}
/* 制作ノートの「特別編 / 00」。/this-site/ だけに付く。
   一覧では特別編00として並ぶのに、ページを開くとシリーズ表示が消えるのを埋める。
   Making と同じ行に置くのは、見出しの前に行を足すと FV の骨格が変わるため。
   H1(28〜46px)より強くならないよう、大きさは .ph-en(14px) を継承したままにする。
   赤はサムネイル内の「/ 00」と呼応させる。番号だけに差すのがサムネイルと同じ扱い */
.ph-series{
  margin-left:20px; padding-left:20px; border-left:1px solid var(--line);
  font-family:var(--font); letter-spacing:.14em;
}
.ph-series .no{ font-family:var(--num); color:var(--accent); margin-left:.5em; letter-spacing:.1em; }

.ph h1{
  font-size:clamp(28px, 4.2vw, 46px); font-weight:500; letter-spacing:.12em; line-height:1.5;
  color:var(--ink); margin-bottom:36px;
}
.ph-meta{ display:grid; grid-template-columns:auto 1fr; gap:10px 22px; font-size:15px; margin:0; align-items:start; }
.ph-meta dt{
  font-family:var(--num); font-weight:500; letter-spacing:.06em; color:var(--ink);
  white-space:nowrap;
}
.ph-meta dd{ margin:0; line-height:1.9; }
/* 実績ページから料金へ戻る用。事例だけ読んで値段が分からないまま終わらせない */
.ph-meta dd a{
  color:var(--ink); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:4px;
  transition:color var(--t) var(--ease);
}
.ph-meta dd a:hover{ color:var(--accent); }
/* カテゴリだけマーカーを引く（署名モチーフの静的版） */
.tag{ background:var(--accent-pale); padding:3px 11px; }

.page-lead{ font-size:18px; line-height:2.15; max-width:var(--measure); margin-top:44px; }

/* ---------- 記事本文 ----------
   イチロ式：版面（--wrap）の中に、本文はさらに内側の幅で置く。
   左端まで視線を振らずに読めるようにする。面を敷くセクションは端まで届かせる */
.article{ padding-block:96px; }
/* 本文と目次を横に並べる。右の余白を、追従する柱にする */
.art-layout{ display:grid; grid-template-columns:1fr 180px; gap:64px; align-items:start; }
.art-body{ min-width:0; }

/* ---------- 追従する目次 ---------- */
.toc{ position:sticky; top:110px; }
.toc-t{
  font-family:var(--num); font-size:11px; font-weight:500; letter-spacing:.2em;
  color:var(--sub-l); padding-bottom:12px; margin-bottom:6px;
  border-bottom:1px solid var(--line);
}
.toc ul{ list-style:none; margin:0; padding:0; }
.toc a{
  display:grid; grid-template-columns:22px 1fr; gap:10px; align-items:baseline;
  padding:9px 0; text-decoration:none;
  font-size:13.5px; line-height:1.7; letter-spacing:.06em; color:var(--sub-l);
  transition:color var(--t) var(--ease);
}
.toc a .n{ font-family:var(--num); font-size:11.5px; letter-spacing:.04em; opacity:.7; }
.toc a:hover{ color:var(--ink); }
/* 読んでいるセクション */
.toc a.cur{ color:var(--ink); font-weight:600; }
.toc a.cur .n{ color:var(--accent); opacity:1; }

/* イチロ式：版面の左端から始めるが、要素ごとに幅を変える。
   見出しは広く、本文は読みやすい幅で止める（中央寄せはしない） */
.art{ max-width:var(--measure); }
.art-cta .art{ max-width:var(--measure); }
/* 見出し枠は版面いっぱい。タイトルを2行に収めるため */
.page-head .crumb,
.page-head .ph{ max-width:100%; }
.page-head .page-lead{ max-width:var(--measure); }
.art h2{
  font-size:clamp(20px, 2.6vw, 27px); font-weight:500; letter-spacing:.12em; line-height:1.8;
  color:var(--ink);
  margin:80px 0 28px; padding-left:20px; border-left:3px solid var(--accent);
}
.art h2:first-child{ margin-top:0; }
/* 記事の途中に別ブロック（実績リンクなど）を挟んだとき、
   後続ブロック先頭の見出しは :first-child でも余白を戻す */
.art-body > * ~ .art h2:first-child{ margin-top:88px; }
/* 記事の途中に挟むリンク行は、本文から上下に離し、本文と同じ幅に揃える */
.article .work-row{ margin-top:44px; }
.art h3{ font-size:17px; font-weight:600; letter-spacing:.12em; color:var(--ink); margin:48px 0 18px; }
/* 見出しの印は縦罫。ただし朱はh2まで（5px→3px）で、h3は墨に落とす。
   同じ色・同じ太さだと、h2なのかh3なのか見分けがつかなくなる。
   朱の下線は本文の強調専用にして、見出しには使わない */
.art h3.uline{
  padding-left:14px;
  border-left:2px solid var(--ink);
}
.art p{ margin-bottom:28px; }
.art p:last-child{ margin-bottom:0; }
/* サイトの要となる一行。本文の段落間（28px）の倍を上下に取って、
   前後の文章から切り離して独立させる */
.art p.key{ margin-top:56px; margin-bottom:56px; }
.art strong, .art b{ color:var(--ink); font-weight:600; }

/* 引用（クライアントの言葉・サイト上の文言） */
.art blockquote{
  margin:36px 0; padding:28px 32px;
  background:var(--gray-lt); border-left:3px solid var(--line);
  font-size:16.5px; line-height:2.1;
}
.art blockquote p{ margin-bottom:14px; }
.art blockquote p:last-child{ margin-bottom:0; }

/* 比較表 */
.art .tbl{ width:100%; border-collapse:collapse; margin:36px 0; font-size:15px; }
.art .tbl th, .art .tbl td{
  border-bottom:1px solid var(--line); padding:18px 14px; text-align:left; vertical-align:top;
  line-height:1.9;
}
.art .tbl thead th{
  border-bottom:2px solid var(--ink); font-weight:600; color:var(--ink);
  font-size:14px; letter-spacing:.1em;
}
/* 左の列が2行に折れると、右の列との間が詰まって見える。
   列幅ではなく、間だけを空ける（28px→50px） */
.art .tbl tbody th{ font-weight:600; color:var(--ink); width:26%; padding-right:36px; }
.art .tbl .hi{ color:var(--ink); font-weight:600; }
/* 金額の列。狭い画面で「＋1〜／2万円」と割れるので、この列だけ折り返さない */
.art .tbl .num{ white-space:nowrap; }
/* 「読む人が思うこと」は文になるので、左の列を広く取る */
.art .tbl-q tbody th{ width:50%; }
/* 疑問と答えを1行ずつ読ませたいので、狭い画面では折らずに器を横スクロールさせる */
.ptbl-wrap .tbl-q{ min-width:560px; }
.ptbl-wrap .tbl-q th, .ptbl-wrap .tbl-q td{ white-space:nowrap; }

/* 2層の対比（手前／奥） */
.layers{ list-style:none; margin:36px 0; padding:0; }
.layers li{
  display:grid; grid-template-columns:auto 1fr; gap:28px; align-items:baseline;
  border-top:1px solid var(--line); padding:26px 4px;
}
.layers li:last-child{ border-bottom:1px solid var(--line); }
.layers .lb{
  font-size:14px; font-weight:600; letter-spacing:.14em; color:var(--accent);
  white-space:nowrap;   /* 「リーフレッ／ト」と折り返させない */
}

/* 経歴（年表） */
.hist{ list-style:none; margin:36px 0 0; padding:0; counter-reset:none; }
.hist li{
  display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:baseline;
  border-top:1px solid var(--line); padding:22px 4px;
}
.hist li:last-child{ border-bottom:1px solid var(--line); }
.hist .y{
  font-family:var(--num); font-size:17px; font-weight:400; letter-spacing:.06em;
  color:var(--ink); white-space:nowrap; min-width:52px;
}
.hist .e{ font-size:14.5px; line-height:1.95; }

/* 制作物・スクリーンショットの枠 */
.shot{ margin:44px 0; }
.shot img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.shot figcaption{ font-size:14px; color:var(--sub-l); line-height:1.9; margin-top:14px; }
.shot-ph{
  aspect-ratio:16/10; background:var(--gray-lt); border:1px solid var(--line);
  display:grid; place-items:center; font-size:12px; color:var(--sub-l); letter-spacing:.1em;
}

/* 旧と新を並べる。縦長のフルページを上から一定量だけ見せ、下はフェードさせる */
.compare{
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
  margin:44px 0;
  /* .art（660px）の外へ出て、本文カラムいっぱいに広げる */
  width:836px;
  /* 本文（660px）より広いが、版面いっぱいにはしない。左端は本文と揃える */
  max-width:none;
}
.compare figure{ margin:0; }
.compare .frame{
  position:relative; overflow:hidden;
  height:520px;
  border:1px solid var(--line); background:var(--white);
}
.compare .frame img{
  width:100%; height:auto; display:block;
}
.compare .frame::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:160px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), var(--white));
  pointer-events:none;
}
.compare .cap{ margin-top:16px; }
.compare .cap-t{
  display:block; font-size:14.5px; font-weight:600; letter-spacing:.12em; color:var(--ink);
  margin-bottom:8px;
}
.compare .cap-d{ display:block; font-size:14px; color:var(--sub-l); line-height:1.9; }

/* サンプルの実物を、PCとスマホの幅で並べて見せる。
   画像ではなく実サイトを縮小して埋め込むので、サンプルを直せばここも変わる */
.mock{ display:grid; grid-template-columns:1fr 190px; gap:28px; align-items:end; margin:36px 0 32px; }
.mock figure{ margin:0; }
.mock figcaption{ font-size:13px; letter-spacing:.1em; color:var(--sub-l); margin-top:12px; }
.mock-screen{
  position:relative; overflow:hidden;
  border:1px solid var(--line); background:var(--white);
}
/* 中は見るだけ。スクロールもクリックもさせない */
.mock-screen iframe{
  position:absolute; top:0; left:0; border:0;
  transform-origin:0 0; pointer-events:none;
}
.mock-screen-sp{ border-radius:10px; }

/* 進行中の注記 */
.wip{
  margin:44px 0 0; padding:26px 30px;
  border:1px solid var(--line); border-radius:8px;
  font-size:15px; line-height:2.0;
}
.wip .wip-t{ display:block; font-weight:600; color:var(--ink); letter-spacing:.12em; margin-bottom:10px; }

/* 手順（本文内・縦積み）。トップの .proc と同じく、朱の点を線でつないで順序を見せる */
.proc-v{ list-style:none; margin:36px 0 32px; padding:0; position:relative; }
.proc-v::before{
  content:""; position:absolute; left:5px; top:10px; bottom:10px;
  width:1px; background:var(--line);
}
.proc-v li{
  position:relative; padding:0 0 34px 34px;
}
.proc-v li:last-child{ padding-bottom:0; }
.proc-v li::before{
  content:""; position:absolute; left:0; top:7px;
  width:11px; height:11px; border-radius:50%; background:var(--accent);
}
.proc-v .pn{
  display:block; margin-bottom:8px;
  font-family:var(--num); font-size:15px; font-weight:500; letter-spacing:.08em;
  color:var(--accent);
}
.proc-v h3{ font-size:16px; font-weight:600; letter-spacing:.12em; color:var(--ink); margin:0 0 10px; }
.proc-v p{ font-size:14.5px; line-height:2.0; margin:0; }

/* 相談前の質問と答え */
.qa{ margin:36px 0 0; }
.qa dt{
  font-size:15px; font-weight:600; letter-spacing:.1em; color:var(--ink); line-height:1.9;
  border-top:1px solid var(--line); padding:24px 4px 0;
}
.qa dd{ margin:0; padding:10px 4px 24px; font-size:14.5px; line-height:2.0; }
.qa dd:last-child{ border-bottom:1px solid var(--line); }

/* フォームへの導線 */
.form-cta{ margin:36px 0 0; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
/* 記事の頭に置くほう。すでに決めている人が、下まで探さずに済むように */
.head-cta{ margin:34px 0 0; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-note{ font-size:12.5px; color:var(--sub-l); letter-spacing:.06em; }

/* 記事下のCTA */
.art-cta{ background:var(--gray); padding-block:88px; }
.art-cta h2{ font-size:clamp(19px, 2.4vw, 26px); font-weight:600; letter-spacing:.12em; line-height:2.0; color:var(--ink); margin-bottom:28px; }
.art-cta p{ margin-bottom:32px; }

/* ---------- 制作ノート ---------- */
/* アイキャッチ。.art-body の中（左カラム）に置く。
   .art-layout の外に出すと版面いっぱいに広がり、右カラムの目次と重なる。
   画像そのものに枠・角丸・余白が描かれているので、
   CSS側で border / box-shadow / border-radius を重ねない。二重の枠になる。
   幅は本文と同じ --measure に揃える。本文より広いと視線の基準線がずれる */
.note-eyecatch{ max-width:var(--measure); margin:0 0 44px; }
.note-eyecatch img{ display:block; width:100%; height:auto; }
/* 導入文はアイキャッチの直後に来るので、page-head用の上余白(44px)は要らない。
   下は本文と地続きにならないよう空ける。56pxは .art p.key と同じ刻み
   （本文の段落間28pxの倍）。リードと本文は別の役割なので、ここで切る */
.art-body > .page-lead{ margin-top:0; margin-bottom:56px; }

/* 一覧カード。実績(.work-row)とは情報構造が違う。
   実績は「成果物の写真」と「なぜそう作ったか」を左右に並べる作りだが、
   記事は 日付→タイトル→説明→導線 が一続きに読めないと選べない。
   そこで 左＝アイキャッチだけ／右＝記事情報を全部 に変える。

   class は "work-row note-card" と二重に付けている。
   .work-row を外すと app.js のスクロール反転（.lit）が効かなくなるため、
   罫・余白・反転は .work-row から受け継ぎ、列構成だけここで上書きする */
.note-card{ grid-template-columns:1fr 1.2fr; gap:44px; align-items:start; }
.note-thumb{ margin:0; }
.note-thumb img{ display:block; width:100%; height:auto; }

/* 一覧は「1記事を魅せる」ではなく「記事を選ぶ棚」。
   実績の見出し(22〜30px)のままだと記事が増えたとき密度が足りない。
   6〜7割に落として、日付・説明とのリズムを作る */
.note-card .name{ font-size:clamp(17px, 1.7vw, 20px); line-height:1.85; }
.note-card .cat{ margin-bottom:12px; }
.note-card .name{ margin-bottom:16px; }
.note-card .desc{ margin-bottom:20px; }

/* 1080px を切ると、左列が狭くなって画像（1200:630＝横長）が縦に潰れる一方、
   右の本文は行が増えて伸びるため、画像の下に大きな死に空間ができる。
   実測：861pxで 画像153px に対して本文338px＝283pxの空白。
   幅で押し切ろうとすると本文が細くなって行数がさらに増え、堂々巡りになるので、
   ここは列をやめて縦積みにする。860pxのSP境界より手前で切り替えるのが要点 */
@media (max-width:1080px){
  .note-card{ grid-template-columns:1fr; gap:24px; }
}

/* 前後の記事：ここは「ほかの制作実績」が読めることが優先なので、
   英字を小さくして和文を主役にする（他セクションとは比率を逆にする） */
.next-works{ padding-block:96px 110px; }
.next-works .sh{ margin-bottom:28px; }

@media (max-width:860px){
  :root{ --wrap: min(100% - 40px, 1080px); }   /* 狭い画面では余白を詰める */
  /* 本文は16px。秀英角ゴは字面率91%（游ゴシックは85%）で同じpxでも大きく出るので、
     16.5pxのままだと字面15.0px＝游ゴシック換算17.7pxになり、iOS標準の17ptを超える。
     16pxにすると字面14.6px＝游ゴ換算17.1pxで、ちょうどiOS標準に並ぶ */
  body{ font-size:16px; }
  /* 引用は本文と同じ大きさを保つ（PCでは両方16.5px） */
  .art blockquote{ font-size:16px; }
  /* 文節で折ると行末が大きく余る。狭い画面では詰めて折り返す（禁則処理は効いたまま）。
     body だけ戻しても、上で p, li, dd … を名指しした指定のほうが強いので効かない。
     同じ並びをここで打ち消す。text-wrap:pretty は残す
     ＝最終行が「1文字＋句点」になるときだけ、手前の文節で折り返させる */
  body,
  p, li, dd, dt, td, th, figcaption,
  .desc, .page-lead, .proof-d{ word-break:normal; }
  /* 見出しと固有名詞（社名・プラン名）だけは文節で折る。
     ここまで自然折り返しにすると「なぜ頼む／のか」「決めま／した」と語中で割れる。
     text-wrap は pretty から balance へ。pretty は最終行の長さを優先するあまり
     auto-phrase を無視して「な／ぜ」と割ることがある（実測で確認）。
     balance は行の長さを揃えるので、文節の切れ目が残る */
  h1, h2, h3, .name, .pname, .stk-ja, .proof-q{ word-break:auto-phrase; text-wrap:balance; }
  /* PC用の改行は、狭い画面では行を細切れにするだけなので消す */
  .br-pc{ display:none; }
  .br-sp{ display:inline; }
  section{ padding-block:56px; }
  section.dark{ padding-block:84px; }

  .head-in{ height:56px; gap:8px; }
  .logo{
    font-size:14px; letter-spacing:.06em; position:relative; z-index:60;
    transition:color .32s var(--ease);
  }
  /* 面が黒くなるので、墨のままだと沈む */
  .nav-open .logo{ color:var(--white); }

  /* ── 開閉ボタン ── */
  .nav-btn{
    display:block; position:relative; z-index:60;
    width:44px; height:44px; margin-right:-10px;
    padding:0; border:0; background:transparent; cursor:pointer;
  }
  .nav-btn span{
    position:absolute; left:11px; width:22px; height:1.5px;
    background:var(--ink); border-radius:1px;
    transition:transform .32s var(--ease), opacity .2s var(--ease), background .32s var(--ease);
  }
  .nav-btn span:nth-child(1){ top:15px; }
  .nav-btn span:nth-child(2){ top:21px; }
  .nav-btn span:nth-child(3){ top:27px; }
  .nav-open .nav-btn span{ background:var(--white); }
  .nav-open .nav-btn span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-open .nav-btn span:nth-child(2){ opacity:0; }
  .nav-open .nav-btn span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* ── 開いた面 ── */
  .gnav{
    position:fixed; inset:0; z-index:55;
    flex-direction:column; align-items:stretch; justify-content:center;
    gap:0; padding:0 34px; background:var(--ink);
    opacity:0; visibility:hidden;
    transition:opacity .34s var(--ease), visibility .34s var(--ease);
  }
  .nav-open .gnav{ opacity:1; visibility:visible; }
  .nav-open{ overflow:hidden; }

  .gnav a.link{
    font-size:19px; font-weight:600; letter-spacing:.1em; color:var(--white);
    padding:20px 0; background:none;
    border-bottom:1px solid rgba(255,255,255,.14);
    opacity:0; transform:translateY(10px);
    transition:opacity .4s var(--ease), transform .4s var(--ease);
  }
  .nav-open .gnav a.link{ opacity:1; transform:none; }
  .nav-open .gnav a.link:nth-of-type(1){ transition-delay:.08s; }
  .nav-open .gnav a.link:nth-of-type(2){ transition-delay:.14s; }
  .nav-open .gnav a.link:nth-of-type(3){ transition-delay:.2s; }

  .gnav .pill{
    display:inline-block; align-self:flex-start;
    margin:36px 0 0; background:var(--white); color:var(--ink);
    opacity:0; transform:translateY(10px);
    transition:opacity .4s var(--ease) .26s, transform .4s var(--ease) .26s;
  }
  .nav-open .gnav .pill{ opacity:1; transform:none; }

  /* 版面の余白が狭くなるぶん、6%の縦罫が本文に食い込む。罫を外へ逃がす */
  .guides{ transform:scaleX(1.09); }

  .fv{ min-height:86svh; padding-block:96px 64px; }
  .fv h1{ margin-bottom:36px; }
  .fv-sub{ font-size:15px; }
  /* 目次は出さない。狭い画面では、見出しの直後にスクロールさせた方が早い */
  .fv-grid{ grid-template-columns:1fr; }
  .fv-toc{ display:none; }

  .sh{ padding-left:20px; margin-bottom:44px; }
  .sh .en{ font-size:13px; }

  .lines .l{ margin-bottom:24px; letter-spacing:.08em; }
  .checks li{ grid-template-columns:34px 1fr; gap:16px; padding:22px 2px; font-size:15px; }
  .checks .ck{ font-size:19px; }

  .howto{ grid-template-columns:1fr; gap:0; }
  .tate{
    position:static; order:-1;
    writing-mode:horizontal-tb; letter-spacing:.12em; line-height:2.0;
    font-size:19px; margin:0 0 36px;
  }
  .tate span + span{ margin-top:0; }
  /* 横組みになると字送りの余りは右に出る。補正の向きも縦から横へ入れ替える
     （字送りも .26em → .12em なので、半分は .06em）。
     丸も縮める。横組みの行の高さは38pxしかなく、3.4em（64.6px）のままだと
     次の行に13pxかぶり、版面の左からも13.8px出る */
  .tate .maru::before{ width:2.6em; height:2.6em; top:50%; left:calc(50% - .06em); }

  .nrows{ padding:4px 22px; margin-top:44px; }
  .nrows li{ grid-template-columns:64px 1fr; gap:16px; padding:24px 0; }

  .work-row{ grid-template-columns:1fr; gap:18px; padding:32px 8px; }
  .sample-row{
    grid-template-columns:1fr;
    grid-template-areas:"name" "cat" "desc" "meta";
    gap:18px;
    padding:30px 8px;
  }
  .sample-row .cat{ align-self:start; margin-bottom:0; }
  .sample-row .plan-tag{ margin-top:0; font-size:11.5px; }
  .sample-row .w-desc{ border-top:1px solid var(--line); padding-top:22px; }
  .sample-row .desc{ font-size:14.5px; margin-bottom:24px; }

  /* 1カラムでは写真が先に来て何の実績か分からないので、社名と業種を先頭に上げる。
     反転が使えないぶん、面を敷いて1件ずつの塊を見せる */
  .work-row.with-shot{
    grid-template-columns:1fr;
    grid-template-areas:
      "name"
      "cat"
      "shot"
      "meta"
      "desc";
    gap:18px;
    padding:30px 8px;
  }

  /* 主役は「社名 → 何を作ったか → なぜそう作ったか」。
     成果物とプランは補足なので、面と大きさを落として主線から外す */
  .work-row.with-shot .deliv li{ font-size:14px; color:var(--sub-l); }
  .work-row.with-shot .plan-tag{
    margin-top:14px; padding:0;
    background:transparent; color:var(--sub-l);
    font-size:11.5px; letter-spacing:.08em;
  }
  /* 補足と本題のあいだに線を1本入れて、読むところを分ける */
  .work-row.with-shot .w-desc{
    border-top:1px solid var(--line); padding-top:22px;
  }
  .work-row.with-shot .desc{ font-size:14.5px; margin-bottom:24px; }

  /* 補足の灰色は白地を前提にした色。面が黒くなったら白側の薄さに置き換える */
  .work-row.with-shot.lit .deliv li,
  .work-row.with-shot.lit .plan-tag{ color:rgba(255,255,255,.66); }
  .work-row.with-shot.lit .w-desc{ border-top-color:rgba(255,255,255,.22); }

  .work-row.with-shot .cat{ align-self:start; top:0; margin-top:0; margin-bottom:0; }
  .work-row.with-shot .deliv{ margin-top:0; }

  .able li{ grid-template-columns:1fr; gap:6px; }

  .proc{ grid-template-columns:1fr; gap:36px; }
  .proc::before{ top:12px; bottom:12px; left:5px; right:auto; width:1px; height:auto; }
  .proc li{ padding-top:0; padding-left:32px; }
  .proc .dot{ top:6px; }

  /* 上のカードから離し、表のすぐ上に置く。カードの一部に見えないように */
  .ptbl-hint{
    display:block; margin:44px 0 8px;
    font-size:14px; font-weight:600; letter-spacing:.08em; color:var(--sub-l);
  }
  .ptbl-wrap{ margin-top:0; }
  .stk-cap{ margin-top:36px; }
  /* 130pxの見出し列を残すと、本文が読める幅を割る */
  .pnote{ grid-template-columns:1fr; margin-bottom:0; }
  /* 1列になると項目の切れ目が分かりにくい。罫1本では弱いので1件ずつ枠で囲う。
     dl には dt+dd を包む要素がないので、dt に枠の上半分・dd に下半分を持たせて
     1つの箱に見せる（dt の下辺と dd の上辺を消すと継ぎ目が出ない）。
     角丸6pxはボタン・プラン名のシェイプと同じ */
  .pnote dt{
    color:var(--ink); font-weight:600;
    border:1px solid var(--line); border-bottom:0;
    border-radius:6px 6px 0 0;
    padding:14px 16px 0;
  }
  .pnote dd{
    border:1px solid var(--line); border-top:0;
    border-radius:0 0 6px 6px;
    padding:4px 16px 15px;
    margin:0 0 12px;
  }
  .pnote dd:last-of-type{ margin-bottom:0; }
  /* 見出しの下に項目が続く形へ。左に列を残すと本文の幅が足りない */
  .stk{ grid-template-columns:1fr; }
  .stk-h{ margin-bottom:14px; }
  .stk-en{ display:inline; margin-right:16px; }
  .stk-ja{ display:inline; }
  .stk-list{ grid-template-columns:1fr; }
  .plans{ grid-template-columns:1fr; gap:24px; }
  .plan{ padding:32px 26px; }
  .plan .pbody, .plan .most{ min-height:0; }

  .pill{ display:block; text-align:center; }

  /* 下層 */
  .page-head{ padding-block:32px 0; }
  .crumb{ margin-bottom:24px; }
  .ph{ padding-block:40px; }
  .ph-en{ font-size:13px; margin-bottom:16px; }
  .ph-series{ margin-left:14px; padding-left:14px; }
  .ph h1{ letter-spacing:.06em; margin-bottom:28px; }   /* 字間を詰めて折り返しの余裕を作る */
  /* ここは価格・納期・「更新は含みません」が入る行。judgment に直結するので落とさない */
  .ph-meta{ font-size:14.5px; gap:6px 16px; }
  /* リードは本文と同じ16px。狭い画面ではリードが4〜5行になるので、
     大きくすると「大きい塊」になるだけで、入り口として働かない。
     本文との区別は、上の罫（.ph の下線）と余白がすでに担っている。
     15px（本文より小さい）にすると注釈に見えるので、下げるのはここまで */
  .page-lead{ font-size:16px; margin-top:32px; }

  .article{ padding-block:64px; }
  /* 1カラムでは余白がないので目次は出さない */
  .art-layout{ grid-template-columns:1fr; gap:0; }
  .note-eyecatch{ max-width:none; margin-bottom:32px; }
  /* 1080px以下で既に1カラム。狭い画面ではさらに間を詰める */
  .note-card{ gap:20px; }
  .art-body > .page-lead{ margin-bottom:40px; }
  .toc{ display:none; }
  .art h2{ margin:56px 0 22px; padding-left:16px; }
  .art-body > * ~ .art h2:first-child{ margin-top:60px; }
  /* 狭い画面で横に並べるとPC表示が潰れて何も読めないので、縦に積む */
  .mock{ grid-template-columns:1fr; gap:24px; }
  .mock-sp{ max-width:190px; }
  .article .work-row{ margin-top:32px; }
  .art blockquote{ padding:22px 20px; }
  .art .tbl th, .art .tbl td{ padding:14px 8px; font-size:14px; }
  .art .tbl tbody th{ width:34%; padding-right:18px; }
  .layers li{ grid-template-columns:1fr; gap:6px; padding:20px 2px; }
  .hist li{ grid-template-columns:1fr; gap:4px; padding:18px 2px; }
  .proc-v li{ padding:0 0 30px 30px; }
  .form-cta{ display:block; }
  .form-cta .pill{ margin-bottom:14px; }
  .form-note{ display:block; }
  .compare{ grid-template-columns:1fr; gap:36px; width:auto; max-width:none; margin-inline:0; }
  .compare .frame{ height:400px; }
  .wip{ padding:22px 20px; }
  .art-cta{ padding-block:64px; }
  .next-works{ padding-block:64px 72px; }
  .next-works .sh{ margin-bottom:22px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
  .fv .c{ opacity:1; transform:none; }
  .pop{ transform:none !important; color:inherit !important; }
  .js .r, .js .rx{ opacity:1; transform:none; }
  .mk::before{ transform:scaleX(1) !important; }
  .dark .mk .mk-t{ color:var(--ink) !important; }
  html{ scroll-behavior:auto; }
}

/* 比較表で1つだけ選んだ案。選ばれたことが色で分かるようにする */
.tbl td.pick{ color:var(--accent); font-weight:600; }