@charset "UTF-8";
/* =============================================
訓練ポートフォリオ 追補CSS（W008ベース）
- 土台は css/style.css（W008の複製・無改変）
- ここには訓練ポートフォリオ固有の部品だけを足す
- 色は style.css の既存トークンのみ使用（新規hexなし）
============================================= */
/* ----- 土台の上書き（style.css は無改変のまま相対値に戻す） ----- */
body{font-size:1rem}
/* ----- ヘッダーロゴの補助表記 ----- */
.site-logo span{font-size:.7rem;letter-spacing:.14em;margin-left:2px}
/* ----- 汎用 ----- */
.mono{font-family:var(--font-sans);font-feature-settings:"tnum";letter-spacing:.06em}
.lead{font-size:.92rem;line-height:2;color:var(--color-text);opacity:.82;max-width:640px;margin:0 auto}
.note{font-size:.78rem;line-height:1.9;color:var(--color-text);opacity:.55}
.center{text-align:center}
/* ----- 数字の帯（実績サマリー） ----- */
.figs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:40px}
.figs > div{background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;padding:18px 26px;min-width:150px;text-align:center}
.figs .n{font-family:var(--font-serif);font-size:1.7rem;line-height:1.3}
.figs .n small{font-size:.55em;opacity:.6;margin-left:2px}
.figs .l{font-size:.7rem;opacity:.6;letter-spacing:.04em;line-height:1.7;margin-top:4px}
.figs .l a{color:inherit;text-decoration:underline;text-underline-offset:3px}
/* ----- 工程の帯 ----- */
.steps{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-top:36px}
.steps a{display:block;background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;padding:16px 14px;transition:box-shadow .25s,transform .25s}
.steps a:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(74,63,53,.08)}
.steps .no{display:block;font-size:.66rem;letter-spacing:.16em;color:var(--color-accent)}
.steps .t{display:block;font-family:var(--font-serif);font-size:.95rem;margin-top:4px}
.steps .d{display:block;font-size:.72rem;opacity:.6;line-height:1.7;margin-top:4px}
.steps-base{margin-top:12px;background:var(--color-accent-light);border-radius:10px;padding:12px 20px;font-size:.8rem;text-align:center;color:var(--color-text)}
.steps-base b{letter-spacing:.05em}
@media(max-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.steps{grid-template-columns:repeat(2,1fr)}}
/* ----- 表（白カード仕立て） ----- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:.86rem;margin-top:24px;background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;overflow:hidden}
.tbl th,.tbl td{padding:13px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--color-border);font-weight:400;line-height:1.8}
.tbl thead th{background:var(--color-accent-light);font-size:.72rem;letter-spacing:.12em;color:var(--color-accent);font-weight:500}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td b{font-weight:600}
.tbl td.src{white-space:nowrap;font-size:.7rem;opacity:.55}
@media(max-width:720px){
.tbl thead{display:none}
.tbl tr{display:block;border-bottom:1px solid var(--color-border);padding:6px 0}
.tbl tr:last-child{border-bottom:0}
.tbl td{display:block;border:0;padding:6px 16px}
.tbl td.src{white-space:normal}
.tbl td[data-label]::before{content:attr(data-label);display:block;font-size:.64rem;letter-spacing:.12em;color:var(--color-accent);margin-bottom:2px}
}
/* ----- タグ ----- */
.tag{display:inline-block;font-size:.68rem;letter-spacing:.06em;padding:3px 12px;border-radius:100px;background:var(--color-accent-light);color:var(--color-accent)}
.tag.on{background:var(--color-warm);color:var(--color-text)}
/* ----- 注記の箱・決めごとの箱 ----- */
.box{background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;padding:22px 26px;margin-top:28px}
.box .bt{font-size:.72rem;letter-spacing:.14em;color:var(--color-accent);margin-bottom:8px}
.box .bt::before{content:"※ ";opacity:.7}
.box p{font-size:.9rem;line-height:1.95;opacity:.9}
.box p+p{margin-top:8px}
ul.list{margin:12px 0 0 1.2em;font-size:.88rem;line-height:1.95;opacity:.85;list-style:disc}
ul.list li{margin:6px 0}
.judge{background:var(--color-accent-light);border-radius:10px;padding:24px 28px;margin-top:28px}
.judge .jt{font-size:.72rem;letter-spacing:.14em;color:var(--color-accent);margin-bottom:10px;font-weight:500}
.judge dl{display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:.87rem}
.judge dt{font-size:.7rem;letter-spacing:.1em;color:var(--color-accent);white-space:nowrap;padding-top:4px;font-weight:500}
.judge dd{line-height:1.9;opacity:.9}
.judge dd b{font-weight:600}
.evidence{background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;margin-top:24px;overflow:hidden}
.evidence .eh{background:var(--color-accent-light);padding:10px 20px;font-size:.72rem;letter-spacing:.14em;color:var(--color-accent)}
.evidence ul{margin:0;padding:16px 20px 18px 38px;font-size:.86rem;line-height:1.95;list-style:disc;opacity:.9}
.evidence li{margin:7px 0}
/* ----- 2カラム ----- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
@media(max-width:720px){.split{grid-template-columns:1fr}}
.split .col{background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;padding:22px 24px}
.split .col h4{font-family:var(--font-serif);font-size:.98rem;letter-spacing:.05em;padding-bottom:10px;border-bottom:1px solid var(--color-border)}
.split .col ul{margin:12px 0 0 1.2em;font-size:.85rem;line-height:1.9;list-style:disc;opacity:.88}
.split .col li{margin:6px 0}
/* ----- 結果の数値 ----- */
.result{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:24px}
.result .r{background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;padding:16px 18px}
.result .r .k{font-size:.72rem;opacity:.6;letter-spacing:.03em}
.result .r .v{font-family:var(--font-serif);font-size:1.25rem;margin-top:6px;line-height:1.5}
.result .r .v em{font-style:normal;color:var(--color-accent);font-weight:600}
.result .r .d{font-size:.7rem;opacity:.55;margin-top:4px;line-height:1.7}
/* ----- 現物のスクリーンショット ----- */
.shot{margin-top:28px;background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;overflow:hidden}
.shot img{width:100%;height:auto;display:block}
.shot figcaption{font-size:.74rem;opacity:.65;padding:10px 16px;border-top:1px solid var(--color-border);line-height:1.8}
.shot figcaption a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
/* ----- 事例詳細ページ ----- */
.case-head{padding:56px 0 20px}
.case-head .cno{font-size:.74rem;letter-spacing:.18em;color:var(--color-accent)}
.case-head h1{font-family:var(--font-serif);font-size:clamp(1.5rem,3.6vw,2.2rem);line-height:1.6;letter-spacing:.03em;margin-top:10px}
.case-head .tags{margin-top:16px;display:flex;gap:8px;flex-wrap:wrap}
.case-head .sum{margin-top:20px;font-size:.92rem;line-height:2;opacity:.85;max-width:640px}
.meta{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.meta > div{background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;padding:12px 18px;min-width:160px}
.meta .k{font-size:.64rem;letter-spacing:.14em;color:var(--color-accent)}
.meta .v{font-size:.85rem;margin-top:3px}
.meta .v a{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.blk{padding:44px 0}
.blk + .blk{border-top:1px solid var(--color-border)}
.blk-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.blk-no{font-size:.72rem;letter-spacing:.16em;color:var(--color-accent)}
.blk-head h2{font-family:var(--font-serif);font-size:clamp(1.15rem,2.4vw,1.45rem);letter-spacing:.05em}
.blk p{font-size:.95rem;line-height:2;opacity:.9;max-width:700px}
.blk p+p{margin-top:12px}
.blk p b,.blk li b{font-weight:600}
.pager{border-top:1px solid var(--color-border);padding:30px 0 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem}
.pager a{color:var(--color-accent)}
.pager a:hover{text-decoration:underline;text-underline-offset:3px}
/* ----- 事例カード（トップ・ギャラリー流用の微調整） ----- */
.case-badge{font-size:.66rem;letter-spacing:.06em;padding:2px 10px;border-radius:100px;background:var(--color-accent-light);color:var(--color-accent);margin-left:6px}
/* ----- スマホ折り返し制御 ----- */
.br-sp{display:none}
@media(max-width:640px){.br-sp{display:inline}}
/* ----- 制作実績：タブ切り替え ----- */
.works-view[hidden]{display:none}
.tab-note{text-align:center;font-size:.8rem;opacity:.6;margin:-14px 0 26px}
/* バナーカード（サイズ違いを見せるので余白に収める） */
.banner-card .gallery-thumb{
width:100%;height:210px;object-fit:contain;
background:var(--color-bg-section);padding:14px;
}
.banner-size{font-size:.7rem;opacity:.55;letter-spacing:.04em}
/* ===== 制作の工程：横並びカード（D案・2026-09-01 本体統合） ===== */
.d-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:34px}
@media(max-width:1080px){.d-grid{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:640px){.d-grid{grid-template-columns:repeat(2,1fr)}}
.d-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;
background:var(--color-base);border:1px solid var(--color-border);border-radius:12px;
padding:28px 12px 22px;text-decoration:none;color:inherit;
transition:transform .25s,box-shadow .25s,border-color .25s}
.d-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(74,63,53,.12);border-color:var(--color-accent)}
.d-ic{color:var(--color-accent);opacity:.85;line-height:0}
.d-card:hover .d-ic{opacity:1}
.d-no{font-size:.66rem;letter-spacing:.18em;color:var(--color-accent);opacity:.75;margin-top:4px}
.d-card h3{font-family:var(--font-serif);font-size:.94rem;letter-spacing:.01em;line-height:1.4;white-space:nowrap}
@media(max-width:1080px){.d-card h3{font-size:1.02rem;letter-spacing:.03em}}
.d-card p{font-size:.78rem;line-height:1.75;opacity:.7;text-wrap:balance}
.d-more{margin-top:auto;padding-top:12px;font-size:.68rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--color-accent);opacity:.8}
.d-card:hover .d-more{opacity:1}
.d-more::after{content:" →"}
.d-foot{text-align:center;font-size:.76rem;opacity:.55;margin-top:26px;line-height:1.9}
/* ===== 工程ページ ===== */
.d-hero{display:flex;align-items:center;gap:26px;padding:8px 0 30px}
@media(max-width:560px){.d-hero{gap:18px}}
.d-hero-ic{color:var(--color-accent);opacity:.85;line-height:0;flex-shrink:0}
.d-hero .d-no{display:block;margin:0 0 4px}
.d-hero h1{font-family:var(--font-serif);font-size:1.7rem;letter-spacing:.04em;line-height:1.3}
.d-hero p{font-size:.9rem;opacity:.7;margin-top:6px}
.d-panel{background:var(--color-base);border:1px solid var(--color-border);border-radius:12px;
padding:26px 28px;margin-bottom:16px}
.d-panel h2{font-size:.72rem;letter-spacing:.14em;color:var(--color-accent);margin-bottom:14px}
.d-can{margin:0 0 0 1.15em;font-size:.9rem;line-height:1.95;list-style:disc;opacity:.88}
.d-can li{margin:6px 0}
.d-items{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.d-items{grid-template-columns:1fr}}
.d-item{display:block;border:1px solid var(--color-border);border-radius:10px;overflow:hidden;
text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.d-item:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(74,63,53,.12)}
.d-item img{width:100%;height:200px;object-fit:cover;object-position:top;display:block}
.d-item .cap{display:block;padding:12px 14px 14px}
.d-item .nm{display:block;font-size:.86rem;line-height:1.55;font-weight:500}
.d-item .src{display:block;font-size:.68rem;opacity:.5;margin-top:5px}
.d-note{font-size:.84rem;line-height:1.9;opacity:.7;background:var(--color-bg-section);
border-radius:8px;padding:14px 16px;margin-top:16px}
.d-panel .d-note:first-child{margin-top:0}
.d-navrow{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:20px 0 60px}
.d-nav{font-size:.8rem;color:var(--color-accent);text-decoration:none;opacity:.75}
.d-nav:hover{opacity:1}
.d-nav.back{margin:0 auto;opacity:.5}
/* =============================================================
ここから下は 構成モック_20260901/mock.css からの統合分（v3・2026-09-03）
モック専用の上部バー（.mockbar）とワークフロー図（.flow-*）は持ち込まない
============================================================= */
/* ----- 事例の記録カード（トップ） ----- */
.case-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:34px}
@media(max-width:1000px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.case-grid{grid-template-columns:1fr}}
.case-card{display:block;background:var(--color-base);border:1px solid var(--color-border);border-radius:10px;
overflow:hidden;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s}
.case-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(74,63,53,.12)}
.case-card img{width:100%;height:150px;object-fit:cover;object-position:top;display:block}
.case-card .cc{padding:14px 16px 16px}
.case-card .cno{font-size:.64rem;letter-spacing:.18em;color:var(--color-accent);opacity:.8;text-transform:uppercase}
.case-card .cnm{font-family:var(--font-serif);font-size:.92rem;line-height:1.5;margin-top:5px}
.case-card .cds{font-size:.76rem;line-height:1.8;opacity:.72;margin-top:7px}
.case-card .ctag{display:inline-block;font-size:.64rem;opacity:.55;margin-top:8px;
border:1px solid var(--color-border);border-radius:100px;padding:2px 10px}
/* ----- 工程ページ：AIとの分担 ----- */
.ai-split{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:760px){.ai-split{grid-template-columns:1fr}}
.ai-cell{border:1px solid var(--color-border);border-radius:10px;padding:16px 16px 14px;text-align:center}
.ai-cell .who{display:inline-block;font-size:.62rem;letter-spacing:.16em;padding:3px 12px;border-radius:100px;margin-bottom:10px}
.ai-cell .who.me{background:var(--color-accent);color:var(--color-base)}
.ai-cell .who.ai{color:var(--color-accent);border:1px solid var(--color-accent)}
.ai-cell p{font-size:.82rem;line-height:1.8;opacity:.85}
/* ----- 資料グリッド（3列→2列→1列） ----- */
.d-items-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.d-items-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.d-items-3{grid-template-columns:1fr}}
/* ----- 作品詳細ページ ----- */
.wd-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:28px;align-items:center;padding:6px 0 26px}
@media(max-width:820px){.wd-hero{grid-template-columns:1fr}}
.wd-hero img{width:100%;height:auto;display:block;border-radius:12px;border:1px solid var(--color-border)}
.wd-tag{display:inline-block;font-size:.66rem;letter-spacing:.12em;color:var(--color-accent);border:1px solid var(--color-accent);border-radius:100px;padding:3px 12px;margin-bottom:12px}
.wd-head h1{font-family:var(--font-serif);font-size:1.7rem;letter-spacing:.04em;line-height:1.3}
.wd-head p{font-size:.9rem;line-height:1.9;opacity:.8;margin-top:12px}
.wd-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.wd-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px;background:var(--color-base);border:1px solid var(--color-border);border-radius:12px;padding:20px 24px;margin-bottom:16px}
@media(max-width:640px){.wd-meta{grid-template-columns:1fr}}
.wd-meta .k{display:block;font-size:.66rem;letter-spacing:.14em;color:var(--color-accent);margin-bottom:4px}
.wd-meta .v{display:block;font-size:.86rem;line-height:1.7}
/* =============================================================
v3 で新設した部品
============================================================= */
/* ----- 前職の仕事の流れ（About内・横1列） ----- */
.prevjob{margin-top:40px;border-top:1px solid var(--color-border);padding-top:28px}
.prevjob-h{font-family:var(--font-serif);font-size:.98rem;letter-spacing:.05em}
.prevjob-h small{font-size:.72rem;opacity:.6;letter-spacing:.03em;margin-left:8px;font-family:var(--font-sans)}
.prevjob-row{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin-top:18px;list-style:none}
@media(max-width:900px){.prevjob-row{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:520px){.prevjob-row{grid-template-columns:1fr;gap:12px}}
.prevjob-row li{position:relative;padding:0 16px 0 0}
.prevjob-row li+li{padding-left:18px;border-left:1px solid var(--color-border)}
@media(max-width:900px){
.prevjob-row li{padding:0 0 0 14px;border-left:1px solid var(--color-border)}
.prevjob-row li+li{padding-left:14px}
}
.prevjob-row .pj-nm{display:block;font-family:var(--font-serif);font-size:.9rem;letter-spacing:.03em}
.prevjob-row .pj-nm::before{content:attr(data-no);display:block;font-size:.62rem;letter-spacing:.16em;
color:var(--color-accent);opacity:.8;margin-bottom:3px;font-family:var(--font-sans)}
.prevjob-row .pj-d{display:block;font-size:.76rem;line-height:1.85;opacity:.72;margin-top:6px}
.prevjob-note{font-size:.76rem;line-height:1.9;opacity:.6;margin-top:16px}
/* ----- 線引き1行（About） ----- */
.line-draw{margin-top:14px;font-size:.86rem;line-height:1.95;opacity:.85;
border-left:2px solid var(--color-warm);padding-left:14px}
/* ----- 意識していること（工程ページ） ----- */
.mind{list-style:none;margin:0;display:grid;gap:14px}
.mind li{background:var(--color-accent-light);border-radius:8px;padding:14px 18px 13px}
.mind .m-t{font-size:.9rem;line-height:1.9}
.mind .m-t b{font-weight:600}
.mind .m-src{display:inline-block;font-size:.74rem;color:var(--color-accent);margin-top:6px;
text-decoration:underline;text-underline-offset:3px}
.mind .m-src::before{content:"裏付け：";text-decoration:none;opacity:.75}
/* ----- 前職での経験（工程ページ） ----- */
.d-prev{border:1px dashed var(--color-border);border-radius:10px;padding:16px 20px;margin-top:16px}
.d-prev .pt{font-size:.68rem;letter-spacing:.14em;color:var(--color-accent);margin-bottom:6px}
.d-prev p{font-size:.85rem;line-height:1.9;opacity:.82}
/* ----- 脚注（トップの事例セクション末尾・2行） ----- */
.foot-notes{max-width:760px;margin:30px auto 0;font-size:.78rem;line-height:1.95;opacity:.62}
.foot-notes p+p{margin-top:6px}
/* ----- 連絡先 ----- */
.mail-link{font-family:var(--font-sans);font-size:1.02rem;letter-spacing:.03em;color:var(--color-accent);
text-decoration:underline;text-underline-offset:5px;word-break:break-all}
.mail-link:hover{opacity:.75}
/* ============================================================
案A（余白で魅せる）の見た目を取り込む 2026-09-04
正＝99_その他[X]/X001_職業訓練/デザイン案_ChatGPT_20260904/02_案A_余白で魅せるシンプル構成.png
構成・順番・文章は変えない。見た目だけ差し替える。
根拠：AIっぽくないデザインガイド §3「カードを使うなら1ページ1回まで。
2回目は表・リスト・交互レイアウトに変える」／§4「区切り線と番号は
最も安全で効果的な装飾」／和系は角丸0が効く
============================================================ */
/* --- 1. 制作プロセス：6枚の横並びカード → 番号つきの縦1列リスト --------
6カラムだと1枚あたり約160pxしかなく、見出しも本文も2〜3文字で折り返していた。
カードの枠・角丸・影・ホバーの浮きを外し、極細罫線だけで区切る。 */
.d-grid{grid-template-columns:1fr;gap:0;margin-top:36px;
border-top:1px solid var(--color-border)}
@media(max-width:1080px){.d-grid{grid-template-columns:1fr;gap:0}}
@media(max-width:640px){.d-grid{grid-template-columns:1fr}}
.d-card{flex-direction:row;align-items:baseline;text-align:left;gap:0;
background:transparent;border:0;border-bottom:1px solid var(--color-border);
border-radius:0;padding:22px 6px;
transition:background-color .25s}
.d-card:hover{transform:none;box-shadow:none;background-color:rgba(138,154,134,.055)}
/* 2026-09-05：白井さん指摘「アイコンが少なすぎる」＋ChatGPTガイドE（工程の区切りを示す
線アイコンは可）を受けて復活。案Aで一度隠していたもの。 */
.d-card .d-ic{display:block;flex:0 0 26px;line-height:0;opacity:.62;margin-top:1px}
.d-card .d-ic svg{width:22px;height:22px;stroke-width:1.4}
.d-card:hover .d-ic{opacity:.9}
.d-card .d-no{flex:0 0 64px;margin-top:0;
font-family:var(--font-serif);font-size:1.05rem;letter-spacing:.06em;
color:var(--color-accent);opacity:.65}
.d-card h3{flex:0 0 232px;white-space:normal;font-size:1.02rem;letter-spacing:.04em}
.d-card p{flex:1 1 auto;margin:0;font-size:.86rem;line-height:1.85;opacity:.72;
padding-right:24px;text-wrap:pretty}
.d-card .d-more{margin-top:0;padding-top:0;flex:0 0 auto;
font-size:.7rem;letter-spacing:.12em;opacity:.55}
@media(max-width:820px){
.d-card{flex-wrap:wrap;padding:18px 4px}
.d-card .d-no{flex:0 0 46px}
.d-card h3{flex:1 1 auto}
.d-card p{flex:1 0 100%;padding:8px 0 0 46px}
.d-card .d-more{flex:0 0 100%;padding-left:46px;padding-top:6px}
}
/* --- 2. 「得意なこと」「進め方で大事にしていること」：枠付きカードをやめる ----
同じページに枠付きカードが3種類（この2枚・工程・事例）並んでいた。
ここは上の極細罫線＋余白で分ける。 */
.split{gap:56px;margin-top:36px}
.split .col{background:transparent;border:0;border-radius:0;padding:0;
border-top:1px solid var(--color-border);padding-top:22px}
.split .col h4{border-bottom:0;padding-bottom:0;font-size:1.02rem;letter-spacing:.06em}
.split .col ul{margin-top:16px;font-size:.87rem;line-height:1.95}
.split .col li{margin:10px 0}
@media(max-width:720px){.split{gap:32px}}
/* 6カラム時代の
がリストでは不自然な2行折りになるので、見た目だけ1行に戻す
（HTMLの
は残す＝狭い画面では効かせる） */
@media(min-width:821px){ .d-card p br{display:none} }
/* ============================================================
ChatGPTレビュー2回目の反映 2026-09-04
正＝99_その他[X]/X001_職業訓練/デザイン仕様_ChatGPT_20260904.md
総評「装飾を減らすは成功。次は文字の階層を強くする段階」
構成・順番・文章は変えない。見た目だけ。
============================================================ */
/* --- トップ①：H1。サイズは実測38.4pxで既に十分なので上げない。
行間と字間だけ整える（推奨 line-height 1.45〜1.55 / letter-spacing .04em） */
.hero-title{line-height:1.5;letter-spacing:.04em}
/* --- トップ②：ABOUT。人物＋名前 と「得意なこと」の間を空けて階層を作る
（推奨 +24〜32px。36px → 52px） */
.about-brief .split{margin-top:52px}
/* --- トップ④⑤：PROCESS。行の高さを実測75px → 約65pxに詰め、
主役＝番号＋工程名／脇役＝説明／補助＝VIEW MORE の3階層にする
（指摘：いまは3つが同じ温度で、整理されすぎて事務的に見える） */
.d-card{padding:17px 6px}
.d-card .d-no{font-size:1.2rem;opacity:.6}
.d-card h3{font-size:1.04rem}
.d-card p{opacity:.6}
.d-card .d-more{font-size:.62rem;opacity:.38;letter-spacing:.1em}
/* 見出し→説明→リストの距離（推奨 20〜24px / 36〜48px。実測は40px / 36px） */
.works .section-title{margin-bottom:22px}
.works .tab-note{margin:0 0 38px}
#flow{padding-top:104px}
/* --- トップ⑥：事例カードは残す（連続した情報のPROCESSと違い独立した情報なので）。
ただし箱を弱める＝角丸をほぼ無くし、浮きを浅くする */
.case-card{border-radius:2px}
.case-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(74,63,53,.08)}
/* ============================================================
工程ページ（6枚共通）
・上部＝ページタイトルではなく「このページの結論」として扱う
・パネルの枠と背景を外し、罫線と余白だけで階層をつくる
・「意識していること」の薄いグレーの帯を外す（重要な考え方が注釈に見えるため）
・見出しの出る位置を6枚で完全に揃える
============================================================ */
/* 上部（工程番号・タイトル・1行要約）＝Hero */
.d-hero{align-items:flex-start;padding:44px 0 40px}
.d-hero .d-no{font-size:1.05rem;letter-spacing:.08em;opacity:.7;margin-bottom:10px}
.d-hero h1{font-size:2.05rem;font-weight:500;line-height:1.5;letter-spacing:.04em}
.d-hero p{font-size:.92rem;line-height:1.9;opacity:.72;margin-top:20px}
@media(max-width:560px){.d-hero h1{font-size:1.6rem}}
/* パネル：枠・背景・角丸をやめ、上の極細罫線＋余白で区切る */
.d-panel{background:transparent;border:0;border-radius:0;padding:36px 0 0;margin:0 0 60px;
border-top:1px solid var(--color-border)}
/* セクション見出し：小さな英字ラベル調 → 明朝の見出しへ（推奨 18〜20px） */
.d-panel h2{font-family:var(--font-serif);font-size:1.16rem;font-weight:500;
letter-spacing:.06em;color:var(--color-text);opacity:.92;
margin-bottom:28px;text-transform:none}
/* 意識していること：薄いグレーの帯を外す */
.mind{gap:30px}
.mind li{background:transparent;border-radius:0;padding:0}
.mind .m-t{font-size:.92rem;line-height:1.95}
.mind .m-src{font-size:.76rem;margin-top:8px}
/* できること：カードにせず、左の細いセージグリーンの縦線でひとまとまりを示す */
.d-can{list-style:none;margin:0;padding-left:20px;line-height:2.1;
border-left:2px solid rgba(138,154,134,.28)}
.d-can li{margin:10px 0}
/* AIとの分担：3枚のカードをやめ、横3列＋極細の縦罫線。私とAIを同じ扱いにする */
.ai-split{gap:0}
.ai-cell{border:0;border-radius:0;padding:2px 30px;text-align:left;
border-left:1px solid var(--color-border)}
.ai-cell:first-child{border-left:0;padding-left:0}
.ai-cell .who,.ai-cell .who.me,.ai-cell .who.ai{
background:transparent;border:0;border-radius:0;padding:0;
color:var(--color-text);opacity:.85;
font-family:var(--font-serif);font-size:1rem;letter-spacing:.06em;margin-bottom:12px}
.ai-cell p{font-size:.85rem;line-height:1.85;opacity:.72}
@media(max-width:760px){
.ai-cell{border-left:0;padding:0 0 18px}
.ai-cell:not(:first-child){border-top:1px solid var(--color-border);padding-top:18px}
}
/* この工程で作ったもの：ここで初めて画像を主役に。枠は外す */
.d-items{gap:44px}
.d-item{border:0;border-radius:0;overflow:visible}
.d-item:hover{transform:none;box-shadow:none}
.d-item:hover img{opacity:.88}
.d-item img{transition:opacity .25s}
.d-item .cap{padding:14px 0 0}
.d-item .nm{font-size:.82rem}
.d-item .src{font-size:.7rem;letter-spacing:.04em;opacity:.45}
/* 前職での経験などの補足ブロック：帯をやめる */
.d-note{background:transparent;border-radius:0;padding:0;margin-top:20px;font-size:.86rem;opacity:.72}
/* 前後の工程への導線 */
.d-navrow{border-top:1px solid var(--color-border);padding:34px 0 76px;margin-top:4px}
/* 工程ページ：Heroのアイコンが横に入るぶんタイトルが右にずれ、
下の「意識していること」など各見出しの左位置と揃っていなかった。
6枚すべてで見出しの出る位置を揃えるのが最重要ルールなので、
アイコンを上に置いて、番号・タイトル・要約をコンテナ左端に揃える。 */
.d-hero{display:block;padding:44px 0 40px}
.d-hero-ic{display:block;margin-bottom:16px;opacity:.6}
.d-hero-ic .ic{width:34px;height:34px}
/* 「できること」の縦線が地色に沈んでいたので少しだけ立てる（濃くしすぎない） */
.d-can{border-left-color:rgba(138,154,134,.42)}
/* 「前職での経験」は最後まで“裏付け”として扱う＝カードにしない（点線の枠を外す） */
.d-prev{border:0;border-radius:0;padding:0;margin-top:0}
.d-prev p{font-size:.86rem;line-height:1.9;opacity:.75}
/* ============================================================
図版（ChatGPT「5つのブロック図版設計ガイド」2026-09-05）
線のみ／単色 #8A9A86／塗りなし／角丸なし。装飾ではなく意味の補助。
ラベルはすべて本文にある言葉だけ（新しい主張は足していない）。
戻すとき＝この節を丸ごと削除すれば、図版が無かった状態の見た目に戻る。
============================================================ */
.ic-s{width:19px;height:19px;flex:0 0 19px;display:block;
stroke:var(--color-accent);fill:none;stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;opacity:.75}
/* --- 工程の流れ図（Hero直下）＝ガイドD「制作物が少ない工程の埋め方」 --- */
.d-flow{display:flex;align-items:flex-start;gap:0;margin:0 0 58px;padding:30px 0 4px;flex-wrap:wrap}
.d-flow .st{display:flex;flex-direction:column;align-items:center;gap:11px;
text-align:center;flex:0 1 148px;min-width:104px}
.d-flow .st .ic-s{width:27px;height:27px;flex:0 0 27px;opacity:.85}
.d-flow .st>span{font-size:.74rem;letter-spacing:.05em;line-height:1.65;
color:var(--color-text);opacity:.62}
.d-flow .ar{flex:0 0 40px;height:27px;display:flex;align-items:center;justify-content:center}
.d-flow .ar svg{width:24px;height:12px;stroke:var(--color-accent);fill:none;
stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;opacity:.42}
/* --- ① 意識していること --- */
.mind li{display:flex;gap:15px;align-items:flex-start}
.mind li .mi{flex:0 0 19px;margin-top:6px}
.mind li .mb{flex:1 1 auto;min-width:0}
/* --- ② できること --- */
.d-can li{display:flex;gap:11px;align-items:flex-start}
.d-can li>.ic-s{margin-top:7px}
.d-can li>.cb{flex:1 1 auto;min-width:0}
/* --- ③ AIとの分担 --- */
.ai-cell{position:relative}
.ai-cell .ai-ic{display:block;margin:0 0 12px}
.ai-cell .ai-ic .ic-s{width:22px;height:22px;flex:0 0 22px}
.ai-split .ai-cell + .ai-cell::before{content:"";position:absolute;left:-7px;top:9px;
width:9px;height:9px;border-right:1px solid var(--color-accent);
border-top:1px solid var(--color-accent);transform:rotate(45deg);opacity:.45}
@media (max-width:820px){
.d-flow{gap:0 8px;margin-bottom:44px}
.d-flow .st{flex:1 1 40%;min-width:0;margin-bottom:24px}
.d-flow .ar{display:none}
.ai-split .ai-cell + .ai-cell::before{display:none}
}
/* === 2026-09-07 先生のFB「VIEW MOREが薄くてスルーする」→ 常時見える濃さ＋ホバーで行ごと反応 === */
.d-card .d-more{font-size:.72rem;opacity:.78;letter-spacing:.12em;color:var(--color-accent);
font-weight:500;white-space:nowrap; /* reviewer低1: 読み込んでいるのは300/400/500。600は合成ボールドになる */transition:opacity .18s,transform .18s}
.d-card .d-more::after{content:"→";display:inline-block;margin-left:.35em;transition:transform .18s} /* reviewer低2: 静止時から間隔を確保 */
.d-card{transition:background-color .18s}
.d-card:hover{background:rgba(138,154,134,.09)}
.d-card:hover .d-more{opacity:1;text-decoration:underline;text-underline-offset:4px}
.d-card:hover .d-more::after{transform:translateX(4px)}
.d-card:hover .d-no{opacity:1} /* reviewer中1: 工程名は薄くしない。番号を立てる */
.d-card:focus-visible{background:rgba(138,154,134,.09);outline:none} /* reviewer低3: キーボード操作でもhoverと同じ見え方 */
/* ============================================================
2026-09-07 白井さん指摘「左右の余白が少なく詰まっている」＋「得意なこと／進め方の見た目」
ChatGPT 4回目の数値仕様（図版設計_ChatGPT_20260905.md と同じ会話）：
世界観は幅で統一しない。基準線・余白・タイポで統一。セクションごとに最大幅を決める。
Hero 1080 / ABOUT・前職 960 / PROCESS 1000 / CASE 1040 / CONTACT 720。
1,180px幅の窓で本文≒967px・左右≒106px（82vw・実測）。
============================================================ */
.container{max-width:min(1040px,82vw);padding-left:0;padding-right:0}
.hero .hero-inner-fs,.hero .hero-inner{max-width:min(1080px,86vw);padding-left:0;padding-right:0}
.about-brief .container{max-width:min(960px,82vw)}
.about-brief-text{max-width:680px} /* 自己紹介文を画面いっぱいに伸ばさない */
#flow .container{max-width:min(1000px,82vw)}
#cases .container{max-width:min(1040px,82vw)}
#contact .container{max-width:min(720px,82vw)!important}
@media(max-width:820px){
.container,.hero .hero-inner-fs,.hero .hero-inner,.about-brief .container,#flow .container,#cases .container{max-width:none;padding-left:24px;padding-right:24px}
}
/* --- ABOUT「得意なこと／進め方」：太字＝見出し行、説明＝改行、番号01/02/03で分節（文章は不変） --- */
.split .col ul{list-style:none;margin:20px 0 0;padding:0;counter-reset:n;opacity:1}
.split .col li{counter-increment:n;margin:0 0 26px;padding:0;font-size:.87rem;line-height:1.95;opacity:.86}
.split .col li:last-child{margin-bottom:0}
.split .col li::before{content:counter(n,decimal-leading-zero);display:block;font-family:var(--font-sans);
font-size:.74rem;letter-spacing:.08em;color:var(--color-accent);font-weight:400;margin-bottom:6px}
.split .col li>b{display:block;font-size:.95rem;font-weight:500;letter-spacing:.02em;color:var(--color-text);margin-bottom:6px;opacity:1}
.split .col h4{font-size:1.02rem}
.split{gap:64px}
.line-draw{margin-top:26px}
/* ============================================================
2026-09-07 工程ページ v2（白井さん要望3点＋ChatGPT工程ページ仕様A）
①流れ図を二段（ステップ／私・AI） ②意識していること・できることを同じ型で2列 ③作ったものを行形式
============================================================ */
/* ① 流れ図：4〜3列・各列に 番号／アイコン／ラベル／担当。列間は極細の縦罫線 */
.d-flow.v2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin:0 0 56px;padding:30px 0 0}
.d-flow.v2 .st{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;padding:0 22px 20px 0;min-width:0;flex:none}
.d-flow.v2 .st+.st{padding-left:22px;border-left:1px solid var(--color-border)}
.d-flow.v2 .st-no{font-size:.66rem;letter-spacing:.16em;color:var(--color-accent);opacity:.8}
.d-flow.v2 .st .ic-s{width:24px;height:24px;flex:0 0 24px;opacity:.85}
.d-flow.v2 .st-l{font-family:var(--font-serif);font-size:.98rem;letter-spacing:.03em;line-height:1.6;color:var(--color-text);opacity:1}
.d-flow.v2 .st-who{display:flex;gap:6px;margin-top:6px;padding-top:12px;border-top:1px solid var(--color-border);width:100%}
.who-tag{font-size:.7rem;letter-spacing:.06em;padding:2px 9px;border:1px solid var(--color-accent);border-radius:2px;color:var(--color-accent);line-height:1.6}
.who-tag.ai{background:rgba(138,154,134,.12)}
@media(max-width:820px){.d-flow.v2{grid-template-columns:1fr 1fr}.d-flow.v2 .st:nth-child(odd){padding-left:0;border-left:0}}
/* ② 意識していること／できること：横2列・同じ型（番号＋本文）。中央に極細の縦罫線 */
.d-two{display:grid;grid-template-columns:1.15fr 1fr;gap:0 48px;border-top:1px solid var(--color-border)}
.d-two .d-panel{border-top:0;padding-top:36px}
.d-two .d-panel+.d-panel{border-left:1px solid var(--color-border);padding-left:48px}
@media(max-width:820px){.d-two{grid-template-columns:1fr}.d-two .d-panel+.d-panel{border-left:0;padding-left:0;border-top:1px solid var(--color-border)}}
.d-two .mind,.d-two .d-can{counter-reset:n;list-style:none;padding:0;margin:0;border-left:0;line-height:1.95}
.d-two .mind li,.d-two .d-can li{counter-increment:n;display:grid;grid-template-columns:34px 1fr;gap:0 10px;align-items:start;margin:0 0 24px;padding:0}
.d-two .mind li:last-child,.d-two .d-can li:last-child{margin-bottom:0}
.d-two .mind li::before,.d-two .d-can li::before{content:counter(n,decimal-leading-zero);font-family:var(--font-sans);font-size:.74rem;letter-spacing:.08em;color:var(--color-accent);line-height:2.2}
.d-two .mind li .mb,.d-two .d-can li .cb{min-width:0}
.d-two .mind .m-t{margin:0;font-size:.87rem;line-height:1.95}
.d-two .mind .m-t b{display:block;font-size:.95rem;font-weight:500;margin-bottom:4px}
.d-two .mind .m-src{display:inline-block;margin-top:8px;font-size:.72rem;letter-spacing:.02em;opacity:.55;text-decoration:none;border-bottom:1px solid var(--color-border)}
.d-two .d-can li{font-size:.87rem}
.d-two .d-can li .cb b{font-weight:500}
.d-two .d-panel>p{font-size:.78rem;opacity:.6;margin-top:22px} /* 使用ツール等の補足 */
.d-two .d-note{margin-top:22px}
/* ③ この工程で作ったもの：サムネ左（固定幅）・大タイトル右。行は上罫線で区切る */
.d-items{display:block}
.d-item{display:grid;grid-template-columns:220px 1fr;gap:0 32px;align-items:start;padding:22px 0;border-top:1px solid var(--color-border)}
.d-item:first-child{border-top:0;padding-top:4px}
.d-item img{height:auto;aspect-ratio:3/2;object-fit:cover;object-position:top}
.d-item .cap{padding:2px 0 0}
.d-item .nm{font-family:var(--font-serif);font-size:1.12rem;font-weight:500;letter-spacing:.03em;line-height:1.6;color:var(--color-text);opacity:1}
.d-item .src{margin-top:8px;font-size:.76rem;letter-spacing:.03em;opacity:.55}
.d-item .src+.src{margin-top:3px}
@media(max-width:640px){.d-item{grid-template-columns:1fr;gap:12px}}
/* --- 2026-09-07 reviewer反映（中2・中4・中6） --- */
.who-tag.me{background:transparent}
.who-tag.ai{background:rgba(138,154,134,.22);border-color:transparent;color:#5f6f5b}
.d-item .cap{position:relative;padding-right:28px}
.d-item .cap::after{content:"→";position:absolute;right:0;top:4px;font-size:.8rem;color:var(--color-accent);opacity:.45;transition:transform .18s,opacity .18s}
.d-item:hover .nm{text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--color-accent)}
.d-item:hover .cap::after{opacity:1;transform:translateX(4px)}
.d-two .mind .m-src{opacity:.7}
.d-two .mind .m-src:hover{border-bottom-color:var(--color-accent)}
.prevjob-row{gap:0 32px}
.prevjob-row .pj-d{line-height:1.9}
/* --- 2026-09-08 白井さん指示：裏付けは書かない／意識していること＝できることと同じ書き方（番号＋1段落・太字は文中） --- */
.d-two .mind .m-t b{display:inline;font-size:inherit;font-weight:500;margin:0;letter-spacing:0}
.d-two .mind .m-t,.d-two .d-can li{font-size:.87rem;line-height:1.95}
.d-two .mind li,.d-two .d-can li{margin-bottom:22px}
.d-two .mind .m-src{display:none}
/* --- 2026-09-08 白井さん選択A：「AIとの分担」を流れ図の直下に箇条書きで。区切りをはっきり --- */
.d-flow.v2{margin-bottom:0;padding-bottom:8px}
.d-split{margin:36px 0 64px;padding:26px 0 0;border-top:1px solid var(--color-border)}
.d-split-h{font-family:var(--font-serif);font-size:.86rem;letter-spacing:.08em;color:var(--color-text);opacity:.6;margin:0 0 18px}
.d-split-list{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.d-split .d-note{margin-top:18px;font-size:.84rem;opacity:.7}
.sp-row{display:grid;grid-template-columns:44px 1fr;gap:0 12px;align-items:start}
.sp-row .who-tag{justify-self:start;margin-top:5px}
.sp-row ul{list-style:none;margin:0;padding:0}
.sp-row li{font-size:.87rem;line-height:1.95;opacity:.86;padding-left:14px;position:relative}
.sp-row li::before{content:"";position:absolute;left:0;top:.9em;width:6px;height:1px;background:var(--color-accent)}
@media(max-width:820px){.d-split-list{grid-template-columns:1fr;gap:14px}}
/* ===== 2026-09-08 白井さん指摘3点 ===== */
/* ABOUT 得意なこと／進め方：左右の 01/02/03 の行位置を揃える（subgrid・両列で行の高さを共有） */
.about-brief .split{grid-template-rows:auto repeat(3,auto);row-gap:0;column-gap:64px}
.about-brief .split .col{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}
.about-brief .split .col ul{display:grid;grid-template-rows:subgrid;grid-row:span 3}
.about-brief .split .col li:last-child{margin-bottom:0}
@media(max-width:720px){.about-brief .split .col+.col{margin-top:44px}}
/* 意識していること／できること：左右の項目間隔を同じにする（旧カード型の .mind{gap:30px} が 22px と二重に効いていた） */
.d-two .mind{display:block;gap:0}
.d-two{grid-template-columns:1fr 1fr}
/* 流れ図：ラベルが2行に折り返しても 私/AI タグの行を全段で底に揃える（01は5段化で「書面で認識を合わせる」が2行になる） */
.d-flow.v2 .st-l{flex:1 1 auto}
.d-flow.v2 .st-who{margin-top:auto}
.d-flow.v2{align-items:stretch}
/* CASE RECORDS：メイン1件（白井珈琲店）を大きく、他3件を小さく横並び（2026-09-08 白井さん指定） */
.case-grid{grid-template-columns:repeat(3,1fr);gap:20px}
.case-card.main{grid-column:1/-1;display:grid;grid-template-columns:1.45fr 1fr;align-items:center;margin-bottom:8px}
.case-card.main img{height:auto;aspect-ratio:1000/672;object-fit:cover;object-position:top}
.case-card.main .cc{padding:30px 40px}
.case-card.main .cno{font-size:.7rem}
.case-card.main .cnm{font-size:1.45rem;line-height:1.5;margin-top:10px}
.case-card.main .cds{font-size:.9rem;line-height:1.95;margin-top:14px;opacity:.8;max-width:34em}
.case-card.main .ctag{margin-top:16px;font-size:.68rem}
@media(max-width:1000px){.case-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.case-card.main{grid-template-columns:1fr}.case-card.main .cc{padding:20px 22px 24px}.case-card.main .cnm{font-size:1.2rem}}
@media(max-width:520px){.case-grid{grid-template-columns:1fr}}
/* できること：番号→チェックボックス風のチェック（線のみ・#8A9A86。2026-09-08 白井さん指示） */
.d-two .d-can li::before{content:"";width:15px;height:15px;margin-top:.55em;border:1px solid var(--color-accent);border-radius:2px;box-sizing:border-box;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none' stroke='%238A9A86' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 7.8l2.6 2.6 5.4-6'/%3E%3C/svg%3E") center/100% no-repeat}
/* できること：枠なし・チェックの線だけ（2026-09-08 白井さん指示） */
.d-two .d-can li::before{border:0;border-radius:0;width:16px;height:16px;margin-top:.5em;
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238A9A86' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center/100% no-repeat}
/* トップ 制作実績（サンプル4本＋view more）2026-09-08 白井さん指示 */
.gallery-grid.pick{grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.gallery-grid.pick .gallery-info{padding:14px 16px}
.gallery-grid.pick .gallery-info h3{font-size:.9rem}
.pick-more{text-align:center;margin-top:32px}
.pick-more .d-more{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--color-accent);padding:10px 22px;border:1px solid var(--color-border);border-radius:2px}
.pick-more .d-more:hover{border-color:var(--color-accent)}
@media(max-width:900px){.gallery-grid.pick{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.gallery-grid.pick{grid-template-columns:1fr}}
.gallery-grid.pick .gallery-tag{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px}
.gallery-grid.pick .case-badge{white-space:nowrap;margin-left:0}
/* case03 デザインカンプ：全体の細長い1枚＋上部の拡大を並べる（2026-09-08） */
.comp-pair{display:grid;grid-template-columns:1fr 2.4fr;gap:16px;align-items:start}
.comp-pair img{width:100%;height:auto;border:1px solid var(--color-border);border-radius:2px}
.comp-pair figcaption{grid-column:1/-1}
@media(max-width:560px){.comp-pair{grid-template-columns:1fr}}
/* 事例ページ（case00〜03）の .split（AIとの分担／作る・作らない）：番号をやめて工程ページの分担と同じ短い線の箇条書きに。
見出し行の 05/06 と項目の 01〜03 が同じ体裁で並び見づらい（2026-09-09 白井さん指摘） */
.blk .split .col li{counter-increment:none;position:relative;padding-left:16px;margin:0 0 12px;font-size:.87rem;line-height:1.95}
.blk .split .col li::before{content:"";display:block;position:absolute;left:0;top:.95em;width:6px;height:1px;background:var(--color-accent);margin:0;font-size:0}
.blk .split .col ul{margin-top:14px}
/* 事例ページ「いちばん意識したこと」の強調箱（2026-09-09） */
.box.focus{border-left:3px solid var(--color-accent);background:var(--color-accent-light)}
.box.focus p{margin-top:8px}
.blk .list{margin-top:18px}
/* 工程ページ 意識していること：番号（01〜03）をやめて短い線の箇条書きに。ページ番号・流れ図の番号と三重になるため（2026-09-09 白井さん「タイトルと数字の整理」） */
.d-two .mind li{grid-template-columns:16px 1fr;gap:0 8px;counter-increment:none}
.d-two .mind li::before{content:"";width:6px;height:1px;background:var(--color-accent);margin-top:14px;font-size:0}
/* トップ 工程一覧：説明が2行になる行で番号・工程名・view more が上に寄る→行全体を上下中央に（2026-09-09 白井さん指摘） */
.d-card{align-items:center}
.d-card .d-ic{margin-top:0}