/* ============================================================
   第10世代 下層ページ用CSS(gen10.css の後に読み込む)
   トップと同じ地・ガラスカード。固定ステージのイラストは第10世代で廃止
   ============================================================ */

/* 1枚パネルのページは上下の余白を少し詰め、フッターまで通す */
.s.pg{min-height:calc(100svh - 120px); padding-top:clamp(120px,17vh,190px)}
.pg .wrap{max-width:900px}

/* ページ見出し: 英大見出し + 日本語の題 */
.pg-head{margin-bottom:clamp(28px,4.4vw,44px)}
.pg-head h1{
  font-family:var(--en); font-weight:800; font-size:clamp(26px,3.4vw,42px);
  letter-spacing:.03em; line-height:1;
}
.pg-head .jp{
  display:block; margin-top:14px; font-size:14px; color:var(--ink2); letter-spacing:.04em;
}

/* ---------- 規約・ポリシー本文 ---------- */
.legal{padding:clamp(30px,4.4vw,58px)}
.legal h2{
  font-size:15px; font-weight:700; letter-spacing:.04em; margin-top:clamp(30px,3.6vw,42px);
  padding-top:clamp(24px,3vw,30px); border-top:1px solid var(--line2);
}
.legal h2:first-of-type{margin-top:0; padding-top:0; border-top:0}
.legal p{margin-top:14px; font-size:13.5px; line-height:1.95; color:var(--ink2)}
.legal ul{margin-top:12px}
.legal li{
  position:relative; padding-left:18px; margin-top:8px;
  font-size:13.5px; line-height:1.95; color:var(--ink2);
}
.legal li::before{content:""; position:absolute; left:2px; top:.95em; width:5px; height:1px; background:var(--mute)}
.legal a{color:var(--ink); text-underline-offset:4px}
.legal .rev{margin-top:clamp(30px,4vw,42px); font-size:12px; color:var(--mute)}

/* ---------- 404 ---------- */
.nf{text-align:center}
.nf .wrap{max-width:680px}
.nf .nf-code{
  font-family:var(--en); font-weight:800; font-size:clamp(76px,12vw,150px);
  line-height:.9; letter-spacing:-.02em; color:rgba(20,23,26,.08);
}
.nf h1{
  font-family:var(--mincho); font-weight:700; font-size:clamp(21px,3vw,34px);
  line-height:1.7; letter-spacing:.04em; margin-top:clamp(14px,2vw,20px);
}
.nf p{margin-top:clamp(20px,2.6vw,28px); font-size:13.5px; line-height:2.15; color:var(--ink2)}
.nf .btn{margin-top:clamp(28px,4vw,40px)}

/* ---------- 戻り導線 ---------- */
.back-link{
  display:inline-block; margin-top:clamp(28px,4vw,40px);
  font-size:13px; color:var(--ink2); text-decoration:none;
  border-bottom:2px solid transparent; padding-bottom:3px;
  transition:border-color .3s, color .3s;
}
.back-link:hover{color:var(--ink); border-bottom-color:var(--accent-solid)}

@media (max-width:760px){
  .s.pg{min-height:0; padding-top:clamp(104px,15vh,150px)}
  .legal{padding:clamp(22px,5vw,30px)}
}

/* ============================================================
   Contact ページ
   ============================================================ */
.pg-lede{font-size:14px; line-height:1.95; color:var(--ink2); margin-bottom:clamp(26px,3.6vw,40px); max-width:38em}

.cform{padding:clamp(28px,4vw,52px)}
.cform-row{margin-bottom:clamp(22px,2.6vw,30px)}
.cform-label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  color:var(--ink); margin-bottom:10px;
}
.cform-label em{font-style:normal; color:var(--mute); margin-left:6px; font-size:11px}
.cform-input{
  width:100%; font:inherit; font-size:14px; color:var(--ink);
  background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; transition:border-color .25s, background .25s;
}
.cform-input:focus{outline:none; border-color:var(--ink); background:#fff}
.cform-textarea{resize:vertical; min-height:150px; line-height:1.95}
.cform-checks{display:flex; flex-wrap:wrap; gap:10px}
.cform-check{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--line); border-radius:999px; padding:9px 18px;
  font-size:13px; background:rgba(255,255,255,.6); transition:border-color .25s, background .25s;
}
.cform-check:hover{border-color:var(--ink)}
.cform-check input{accent-color:var(--ink); width:14px; height:14px; margin:0}
.cform-check:has(input:checked){border-color:var(--ink); background:#fff}

/* ハニーポット(botだけが埋める。人間には見えない) */
.cform-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.cform-line{border:0; border-top:1px solid var(--line2); margin:clamp(24px,3vw,32px) 0}
.cform-agree{display:flex; align-items:flex-start; gap:10px; font-size:13px; color:var(--ink2); cursor:pointer}
.cform-agree input{accent-color:var(--ink); width:15px; height:15px; margin-top:4px}
.cform-agree a{color:var(--ink)}
.cform-turnstile{margin-top:clamp(20px,2.6vw,26px); min-height:66px}

.cform-status{margin-top:16px; font-size:13px; line-height:1.9}
.cform-status.is-ok{color:var(--ink)}
.cform-status.is-err{color:#B4483B}
.cform-done{
  margin-top:14px; font-family:var(--mincho); font-size:15px; line-height:2; color:var(--ink);
}
.cform-done a{margin-left:10px; font-family:var(--jp); font-size:13px; color:var(--ink2)}
.cform-actions{margin-top:clamp(24px,3vw,32px)}
.cform-submit{
  font:inherit; font-size:14px; letter-spacing:.06em; cursor:pointer;
  background:var(--ink); color:#fff; border:0; border-radius:999px; padding:15px 46px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), opacity .25s;
}
.cform-submit:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(20,23,26,.2)}
.cform-submit:disabled{opacity:.5; transform:none; box-shadow:none; cursor:default}

/* ご相談の流れ */
.cflow{margin-top:clamp(56px,8vw,96px)}
.cflow-label{font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.2em; color:var(--mute)}
.cflow-title{font-size:17px; font-weight:700; letter-spacing:.04em; margin-top:10px}
.cflow-grid{
  display:grid; grid-template-columns:repeat(4,1fr); overflow:hidden;
  border-radius:var(--card-r); margin-top:clamp(22px,3vw,30px);
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035);
}
.cflow-step{padding:clamp(22px,2.4vw,30px) clamp(16px,1.6vw,22px); border-left:1px solid var(--line2)}
.cflow-step:first-child{border-left:0}
.cflow-step .no{display:block; font-family:var(--en); font-weight:700; font-size:11px; letter-spacing:.18em; color:var(--mute); margin-bottom:9px}
.cflow-step .w{display:block; font-family:var(--en); font-weight:800; font-size:clamp(14px,1.4vw,18px); color:var(--ink)}
.cflow-step .jp{display:block; margin-top:8px; font-size:11.5px; line-height:1.9; color:var(--ink2)}
.cflow-note{margin-top:clamp(20px,2.6vw,28px); font-size:12.5px; line-height:2; color:var(--mute)}
@media (max-width:900px){
  .cflow-grid{grid-template-columns:repeat(2,1fr)}
  .cflow-step:nth-child(odd){border-left:0}
  .cflow-step:nth-child(n+3){border-top:1px solid var(--line2)}
}

/* ============================================================
   Impact ページ(価値創出レポート型。第7世代の impv-* を第9世代の組みへ)
   ============================================================ */
.pg.impact .wrap{max-width:1080px}
.impact-lead{font-size:14px; line-height:1.95; color:var(--ink2); max-width:46em; margin-bottom:clamp(30px,4.4vw,46px)}

/* サマリー3枚 */
.imp-summary{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.8vw,22px)}
.imp-stat{
  padding:clamp(22px,2.6vw,32px); border-radius:var(--card-r); text-align:center;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035);
}
.imp-stat strong{
  display:block; font-family:var(--mincho); font-weight:700;
  font-size:clamp(24px,3vw,38px); letter-spacing:.02em; line-height:1.3;
}
.imp-unit{font-size:.5em; margin-left:3px; letter-spacing:.04em}
.imp-label{display:block; margin-top:10px; font-size:11.5px; color:var(--mute); letter-spacing:.04em}
.imp-note{margin-top:clamp(16px,2vw,22px); font-size:11.5px; line-height:2; color:var(--mute)}

/* 明細(アコーディオン) */
.imp-list{margin-top:clamp(34px,5vw,56px); display:grid; gap:clamp(12px,1.6vw,18px)}
.imp-row{
  border-radius:var(--card-r); overflow:hidden;
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:blur(16px) saturate(118%); backdrop-filter:blur(16px) saturate(118%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 44px rgba(20,23,26,.07), 0 2px 6px rgba(20,23,26,.035);
}
.imp-row summary{
  display:flex; align-items:flex-start; gap:clamp(14px,2vw,26px); cursor:pointer;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.6vw,32px); list-style:none;
}
.imp-row summary::-webkit-details-marker{display:none}
.imp-row .no{font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.14em; color:var(--mute); padding-top:.4em}
.imp-row .ttl{flex:1; font-size:15.5px; font-weight:700; line-height:1.75; letter-spacing:.02em}
.impv-sum{display:block; margin-top:9px; font-size:12.5px; font-weight:400; color:var(--ink2)}
.impv-sum b{font-family:var(--mincho); font-weight:700; font-size:15px; color:var(--ink)}
.impv-status{
  display:inline-block; margin-left:10px; font-size:10.5px; letter-spacing:.1em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; vertical-align:2px;
}
.imp-row .ic{
  width:22px; height:22px; border:1px solid var(--line); border-radius:50%; flex:none;
  position:relative; margin-top:.2em; transition:border-color .3s, transform .4s var(--ease);
}
.imp-row .ic::before,.imp-row .ic::after{
  content:""; position:absolute; inset:50% 5px auto 5px; height:1px; background:var(--ink);
  transition:transform .3s var(--ease);
}
.imp-row .ic::after{transform:rotate(90deg)}
.imp-row[open] .ic{border-color:var(--ink)}
.imp-row[open] .ic::after{transform:rotate(0)}
.imp-row summary:hover .ic{transform:scale(1.08)}

.imp-detail{padding:0 clamp(20px,2.6vw,32px) clamp(26px,3vw,38px)}
.imp-cardlead{font-size:13.5px; line-height:1.95; color:var(--ink2); padding-top:clamp(18px,2vw,24px); border-top:1px solid var(--line2)}

/* フェーズ一覧(01のみ) */
.impv-phases{margin-top:clamp(20px,2.4vw,28px); display:grid; gap:12px}
.impv-phase{display:grid; grid-template-columns:78px minmax(0,1fr); gap:14px; align-items:start}
.impv-phase .ph{font-family:var(--en); font-weight:800; font-size:10.5px; letter-spacing:.12em; color:var(--mute); padding-top:.5em}
.impv-phase .tx{font-size:12.5px; line-height:2; color:var(--ink2)}
.impv-phase .tx b{color:var(--ink)}

/* 実測KPI */
.impv-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:clamp(20px,2.4vw,28px)}
.impv-kpi{
  padding:16px 14px; border-radius:12px; text-align:center;
  background:rgba(255,255,255,.55); border:1px solid var(--line2);
}
.impv-kpi b{display:block; font-family:var(--mincho); font-weight:700; font-size:clamp(15px,1.6vw,20px)}
.impv-kpi span{display:block; margin-top:6px; font-size:10.5px; color:var(--mute); line-height:1.7}

/* 外注 vs 内製の比較バー */
.impv-bars{margin-top:clamp(22px,2.6vw,30px); display:grid; gap:14px}
.impv-bar{display:grid; grid-template-columns:180px minmax(0,1fr); gap:16px; align-items:center}
.impv-bar .lb{font-size:11.5px; color:var(--ink2); line-height:1.7}
.impv-bar .lb small{display:block; font-size:10px; color:var(--mute)}
.impv-track{position:relative; display:block; height:30px; background:var(--line2); border-radius:999px; overflow:hidden}
.impv-track i{
  position:absolute; inset:0 auto 0 0; width:var(--w,0); border-radius:999px;
  background:var(--ink); transform-origin:left; transform:scaleX(0);
}
.js .impv-track i{transition:transform 1.1s var(--ease)}
.impv-bars.is-in .impv-track i{transform:scaleX(1)}
.impv-track.alt i{background:var(--mute)}
.impv-track b{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  font-family:var(--mincho); font-weight:700; font-size:12.5px; color:#fff; white-space:nowrap;
}
.impv-track.thin b{left:auto; right:14px; color:var(--ink)}
@media (prefers-reduced-motion:reduce){.impv-track i{transform:scaleX(1) !important}}
.impv-sub{margin-top:14px; font-size:11.5px; line-height:2; color:var(--mute)}

/* 要点・技術ピル・前提 */
.impv-points{margin-top:clamp(20px,2.4vw,28px); display:grid; gap:10px}
.impv-points li{position:relative; padding-left:18px; font-size:13px; line-height:1.9; color:var(--ink2)}
.impv-points li::before{content:""; position:absolute; left:2px; top:.95em; width:6px; height:1px; background:var(--mute)}
.impv-points li b{color:var(--ink)}
.impv-tags{display:flex; flex-wrap:wrap; gap:7px; margin-top:clamp(18px,2.2vw,24px)}
.impv-tags li{
  font-family:var(--en); font-size:10.5px; letter-spacing:.06em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:4px 11px; background:rgba(255,255,255,.7);
}
.impv-basis{margin-top:clamp(18px,2.2vw,24px)}
.impv-basis summary{cursor:pointer; font-size:11.5px; color:var(--mute); letter-spacing:.04em}
.impv-basis summary:hover{color:var(--ink)}
.impv-basis p{margin-top:10px; font-size:11.5px; line-height:2; color:var(--mute)}

/* 相談CTA */
.imp-cta{margin-top:clamp(44px,6vw,72px); text-align:center}
.imp-cta-lede{font-size:14px; line-height:2.1; color:var(--ink2); margin-bottom:clamp(20px,2.6vw,28px)}

@media (max-width:900px){
  .imp-summary{grid-template-columns:1fr}
  .impv-kpis{grid-template-columns:repeat(2,1fr)}
  .impv-bar{grid-template-columns:1fr; gap:8px}
  .impv-phase{grid-template-columns:1fr; gap:4px}
}


/* ============================================================
   narrow でカードの外に出る小さい文字
   ------------------------------------------------------------
   1200px以下では人物が本文の背面に来る。--mute(#676D72)は素の地で
   ちょうど4.6:1しかなく、背面に何か重なると即座にAA割れするため、
   カードの外に出るものだけ本文色(--ink2 = 7.3:1)まで濃くする。
   **このブロックは基本ルールより後に置くこと**(前に置くと負ける)
   ============================================================ */
.imp-note, .cflow-label, .cflow-note{color:var(--ink2)}

/* ============================================================
   LOG ページ(このサイト自身の制作記録。9世代のギャラリー)
   ============================================================ */
.pg.log .wrap{max-width:920px}
.log-list{display:grid; gap:clamp(16px,2.2vw,26px)}
.log-item{
  display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr);
  gap:0; padding:0; overflow:hidden;
}
.log-fig{margin:0; aspect-ratio:1.9; overflow:hidden; background:var(--w2); border-right:1px solid var(--line2)}
.log-fig img{width:100%; height:100%; object-fit:cover; display:block}
.log-body{padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,30px); align-self:center}
.log-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.log-no{font-family:var(--en); font-weight:800; font-size:12px; letter-spacing:.12em; color:var(--mute)}
.log-head h2{font-size:16px; font-weight:700; letter-spacing:.02em; line-height:1.6}
.log-tag{
  font-size:10px; letter-spacing:.12em; color:var(--mute);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; white-space:nowrap;
}
.log-tag.is-now{color:var(--on-accent); background-image:var(--accent); border-color:var(--accent-edge)}
.log-tag.is-turn{color:var(--ink); border-color:var(--ink)}
.log-period{display:block; margin-top:6px; font-family:var(--en); font-size:11px; letter-spacing:.08em; color:var(--mute)}
.log-body p{margin-top:10px; font-size:13px; line-height:1.9; color:var(--ink2)}
.log-close{margin-top:clamp(30px,4.4vw,46px); font-size:13.5px; line-height:2.1; color:var(--mute)}
.log-close a{color:var(--ink2); font-weight:500; text-decoration:none; border-bottom:2px solid transparent; padding-bottom:1px}
.log-close a:hover{color:var(--ink); border-bottom-color:var(--accent-solid)}
@media (max-width:860px){
  .log-item{grid-template-columns:1fr}
  .log-fig{border-right:0; border-bottom:1px solid var(--line2)}
}

/* 「どこで知ったか」のプルダウン(2026-08-22)。入力欄と同じ見た目に揃え、矢印だけ自前で描く */
.cform-select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  padding-right:40px;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink2) 50%),
                   linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
  background-position:calc(100% - 20px) center, calc(100% - 14px) center;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}

/* ---------- 作品の詳細ページ(/works/*)。2026-08-23 ---------- */
/* 本文の幅は1本の基準に揃える。リード・段落・箇条書き・カード・数字が同じ左右端に収まる。
   枠(.wrap)のほうを本文幅に合わせる=中身より枠が広いと、その差だけ左に寄って見える */
.wk-detail .wrap{max-width:760px}
.wk-detail{--measure:min(100%, 760px)}
.wk-detail .pg-lede{max-width:var(--measure); margin-bottom:clamp(20px,2.6vw,32px)}
.wd-links, .wd-sec p, .wd-list, .wd-tags, .wd-case, .wd-facts, .wd-cap{max-width:var(--measure)}
.wd-cap{margin-left:0; text-align:left}
.wd-back{margin:0 0 clamp(18px,2.4vw,30px); font-size:clamp(12px,1.05vw,14px)}
.wd-back a, .back-link a{color:var(--ink2); text-decoration:none; border-bottom:2px solid transparent; padding-bottom:1px}
.wd-back a:hover, .back-link a:hover{color:var(--ink); border-bottom-color:var(--accent-solid)}

/* 主要リンク */
.wd-links{display:flex; flex-wrap:wrap; gap:clamp(10px,1.2vw,16px); margin:0 0 clamp(40px,5vw,72px)}
.wd-pill{
  display:inline-block; background:#000; color:#fff; text-decoration:none; border-radius:999px;
  padding:clamp(11px,1.2vw,16px) clamp(22px,2.4vw,36px);
  font-family:var(--jp); font-weight:700; font-size:clamp(12.5px,1.15vw,16px); letter-spacing:.05em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wd-pill:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(0,0,0,.2)}
.wd-pill.is-ghost{background:var(--w); color:var(--ink); border:1px solid var(--line2)}
@media (prefers-reduced-motion:reduce){ .wd-pill{transition:none} }

/* ---- モックアップ: 実撮をCSSの枠にはめる(枠は画像ではないので軽く、全作品で揃う) ---- */
.wd-mock{
  position:relative; display:flex; align-items:flex-end; justify-content:flex-start;
  gap:clamp(12px,2vw,28px);
  max-width:var(--measure);   /* 本文と同じ幅に揃える(本文を広げると1行54文字になり読みにくい) */
  padding:clamp(20px,3vw,44px) 0 clamp(28px,3.4vw,48px);
}
.mk{position:relative; flex:none}
.mk-screen{overflow:hidden; background:var(--sage)}
.mk-screen img{width:100%; height:auto; display:block}
/* PC: 細いベゼル + 台座 */
.mk-pc{width:min(58%,620px)}
.mk-pc .mk-screen{border:8px solid #1b1d20; border-radius:10px 10px 3px 3px; box-shadow:0 22px 50px rgba(20,23,26,.16)}
.mk-pc .mk-foot{
  display:block; width:118%; height:10px; margin:0 -9% ;
  background:#1b1d20; border-radius:0 0 8px 8px;
}
/* タブレット: 太めのベゼル */
.mk-tb{width:min(22%,190px); margin-bottom:14px}
.mk-tb .mk-screen{border:9px solid #1b1d20; border-radius:16px; box-shadow:0 18px 40px rgba(20,23,26,.16)}
/* スマホ: ノッチ付き。いちばん手前 */
.mk-sp{width:min(11%,96px); margin-bottom:6px; z-index:2}   /* 縦長なので、幅を絞らないとタブレットより大きく見える */
.mk-sp .mk-screen{border:7px solid #1b1d20; border-radius:18px; box-shadow:0 16px 36px rgba(20,23,26,.2)}
.mk-sp .mk-notch{
  position:absolute; left:50%; top:3px; transform:translateX(-50%);
  width:36%; height:7px; background:#1b1d20; border-radius:0 0 7px 7px; z-index:3;
}
/* モックアップの構成は作品ごとに変わる(3台 / PCのみ / スマホのみ / なし) */
.wd-mock.is-pc{justify-content:center}
.wd-mock.is-pc .mk-pc{width:100%}
.wd-mock.is-sp{justify-content:center; padding-top:clamp(10px,1.6vw,24px)}
.wd-mock.is-sp .mk-sp{width:min(38%,300px); margin-bottom:0}
.wd-mock.is-sp .mk-sp .mk-screen{border-width:12px; border-radius:34px}
.wd-mock.is-sp .mk-sp .mk-notch{top:5px; height:11px; border-radius:0 0 11px 11px}
@media (max-width:760px){
  .wd-mock.is-pc .mk-pc{width:100%}
  .wd-mock.is-sp .mk-sp{width:min(64%,260px)}
}
.wd-cap{margin:0 0 clamp(48px,6vw,86px); font-size:clamp(11.5px,1vw,13px); color:var(--mute)}

/* ---- 本文 ---- */
.wd-sec{margin:0 0 clamp(48px,6vw,88px)}
.wd-sec h2{
  font-family:var(--en); font-weight:800; letter-spacing:.02em; color:var(--ink);
  font-size:clamp(20px,2.2vw,32px); margin:0 0 clamp(16px,2vw,26px);
}
.wd-sec p{font-size:clamp(13.5px,1.15vw,16.5px); line-height:2; color:var(--ink2); margin:0 0 1.2em}
.wd-sec strong{color:var(--ink); font-weight:700}
.wd-note{font-size:clamp(12px,1.05vw,14px) !important; color:var(--mute) !important}
.wd-list{margin:0; padding:0; list-style:none}
.wd-list li{position:relative; padding-left:20px; font-size:clamp(13px,1.1vw,16px); line-height:2; color:var(--ink2)}
.wd-list li::before{content:""; position:absolute; left:2px; top:1em; width:6px; height:6px; border-radius:50%; background:var(--sblue); opacity:.75}
.wd-list + p{margin-top:clamp(14px,1.6vw,22px)}
.wd-tags{display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(18px,2vw,26px)}
.wd-tags span{
  background:var(--w); border:1px solid var(--line2); border-radius:999px;
  padding:6px 15px; font-family:var(--round); font-weight:800; font-size:clamp(11.5px,1vw,13.5px); color:var(--ink);
}

/* 仕組みの図解(2026-09-06)。**スクリーンショットではないので .wd-mock の枠にはめない**
   =枠は「実際の画面である」ことの記号なので、図に使うと嘘になる。
   .wrap が760pxなので図もそれ以上には広がらない。細かい字を読ませる図は向かない */
.wd-fig{margin:clamp(4px,.8vw,12px) 0 clamp(22px,2.6vw,36px); max-width:var(--measure)}
.wd-fig img{width:100%; height:auto; display:block; border:1px solid var(--line2); border-radius:10px}
.wd-fig figcaption{
  margin-top:clamp(10px,1.2vw,16px);
  font-size:clamp(11.5px,1vw,13px); line-height:1.9; color:var(--mute);
}

/* 詰まったところ: 課題 → やったこと → 結果 */
.wd-case{
  background:var(--w); border-radius:clamp(12px,1.2vw,18px);
  box-shadow:0 12px 34px rgba(20,23,26,.06);
  padding:clamp(22px,2.4vw,36px); margin-top:clamp(18px,2.2vw,30px);
}
.wd-case h3{
  margin:0 0 clamp(14px,1.6vw,20px); font-family:var(--jp); font-weight:700; color:var(--sblue);
  font-size:clamp(14.5px,1.35vw,20px); letter-spacing:.03em;
}
.wd-case dl{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:clamp(8px,1vw,14px) clamp(14px,1.8vw,26px)}
.wd-case dt{
  font-family:var(--round); font-weight:800; font-size:clamp(11px,.95vw,13px); letter-spacing:.08em;
  color:var(--mute); white-space:nowrap; padding-top:.35em;
}
.wd-case dd{margin:0; font-size:clamp(13px,1.1vw,16px); line-height:1.95; color:var(--ink2)}
/* 課題/やったこと/結果 の中で段落を分けられるようにする(2026-08-27)。
   1つの dd に何段落も入れると読みにくいので、間を1行ぶん空ける */
.wd-case dd p{margin:0 0 .95em}
.wd-case dd p:last-child{margin-bottom:0}
/* ラベル(課題/やったこと/結果)を使わず地の文で書く作品もある(2026-09-06。noeva)。
   .wd-sec p のままだと本文と同じ大きさになってカードの中で浮くので、dd と同じ組みに揃える */
.wd-case > p{font-size:clamp(13px,1.1vw,16px); line-height:1.95; color:var(--ink2); margin:0 0 .95em}
.wd-case > p:last-child{margin-bottom:0}

/* 数字 */
.wd-facts{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,28px); margin:0; border-top:1px solid var(--line2); padding-top:clamp(20px,2.4vw,32px)}
.wd-facts dt{font-family:var(--jp); font-weight:700; font-size:clamp(11.5px,1vw,13.5px); color:var(--mute); margin-bottom:6px}
.wd-facts dd{margin:0; font-family:var(--en); font-weight:800; font-size:clamp(26px,3.4vw,46px); color:var(--ink); line-height:1.1}
.wd-facts dd span{font-family:var(--jp); font-weight:700; font-size:clamp(11px,.95vw,13px); color:var(--ink2); letter-spacing:.02em}

/* CTA */
.wd-cta{margin:0 0 clamp(40px,5vw,72px); max-width:var(--measure)}
.wd-cta p{font-size:clamp(13.5px,1.2vw,17px); color:var(--ink2); margin:0 0 clamp(18px,2.2vw,30px)}
.wd-btn{
  display:inline-block; background:#000; color:#fff; text-decoration:none; border-radius:999px;
  padding:clamp(14px,1.5vw,20px) clamp(32px,3.4vw,56px);
  font-family:var(--jp); font-weight:700; font-size:clamp(14px,1.3vw,19px); letter-spacing:.06em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wd-btn:hover{transform:translateY(-3px); box-shadow:0 14px 32px rgba(0,0,0,.22)}

@media (max-width:760px){
  /* SP: 3台並べると潰れるので、PCを大きく・スマホを重ねる2台構成 */
  .wd-mock{gap:0; padding-bottom:clamp(20px,4vw,34px)}
  .mk-pc{width:88%}
  .mk-tb{display:none}
  .mk-sp{width:30%; margin-left:-14%; margin-bottom:-4%}
  .wd-case dl{grid-template-columns:1fr; gap:4px 0}
  .wd-case dt{padding-top:.9em}
  .wd-facts{grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 16px}
}