/* [20260821ai] 見出しまわりを interview.html 基準に統一。級数・ウェイト・字間・行間は
   20260821j・ae の共有CSS改修で既に同値。
   20260918a: design/pages/document.html（20260916v）へ追随し、キャッチ下マージンの上書き
   `.c1 .hero-intro__catch{margin-bottom:28px}` を撤去した。共通CSS design-system.css の
   既定 **48px**（2026-07-27ディレクター確定「キャッチ→リード=48px」）へ戻す。28px は
   [20260821ag] で見出し下の罫線（40×1px）を削除した際に残った値＝罫線があった頃の余白。 */
/* ============================================================================
   [20260810n] B確定トンマナ（design-rules §10）一貫性統一バッチ 適用済み
   ・級数   = --c1-fs-h2 / --c1-fs-h3 / --c1-fs-lead / --c1-fs-label-en（§10-2 L1〜L5）
   ・読み幅 = --c1-measure(720) / --c1-measure-narrow(640)（§10-5）
   ・画像幅 = 1480(--w-content) / 980 / 720 の3種のみ（§10-5）
   ・カードgap = --grid-gap(20px)／カード段組コンテナ = 980px（§10-5）
   ・セクション縦余白 = --sp-6/7/8/--sp-sec-sm の4段のみ（§10-5）
   ※本ブロック内に残る「C-1: SP22 / PC28」等のコメントは旧C-1級数時代の記述。
     現行の正は §10（B確定）＝上記トークン。
   ============================================================================ */

/* document固有（WF由来。font-weight:bold→var(--fw-normal)／見出し固有クラスはfw明示） */
/* ==========================================================
   document.html 専用CSS（資料カード・フォーム）
   ========================================================== */
[id]{scroll-margin-top:70px;}
/* メイン画像帯（2026-08-10 QA対応）: 共有 .page-hero__media を上マージン0＝ヘッダー直下から敷く。
   帯高は下層ヒーロー標準（clamp(320px,42vw,560px)）より控えめの機能系ページ寸法。 */
/* [20260821ai] overlay型へ変更したため .page-hero__media--top は未使用（帯の高さは §8-b の確定形に従う） */
/* [20261026r] 完成版7冊のラインナップ。BOOK 01 は横長の大きいカード（--feature）で先頭、残り6冊は 768px以上2列（20261026v で PC の3列をやめた）。
   表紙は A4 比（210:297）。白い表紙が背景に埋もれないよう、細い線（--c-line）で縁取る。 */
.doc-grid{display:grid;gap:var(--grid-gap);max-width:980px;margin:0 auto;}   /* [20261026v] PCも2列（ディレクター指示）＝最大幅を2列向けの980pxに戻した */
@media(min-width:768px){.doc-grid{grid-template-columns:repeat(2,1fr);}}
.doc-card{
  border:1px solid var(--c-line);background:var(--c-bg);
  padding:28px 22px;display:flex;flex-direction:column;gap:18px;
}
.doc-card__body{display:flex;flex-direction:column;gap:12px;flex:1;}
.doc-card__cover{width:180px;max-width:60%;margin:0 auto;aspect-ratio:210/297;box-shadow:0 0 0 1px var(--c-line);}
.doc-card__cover img{display:block;width:100%;height:100%;object-fit:cover;}
.doc-card__no{font-family:var(--ff-en);font-size:var(--fs-micro);letter-spacing:.2em;color:var(--c-text-sub);text-align:center;margin:0;}
.doc-card__name{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);line-height:1.7;text-align:center;margin:0;}  /* C-1: L2・見出し500 */
.doc-card__catch{font-size:var(--fs-body-sm);line-height:1.8;letter-spacing:var(--ls-2);text-align:center;margin:0;text-wrap-style:balance;}   /* [20261026zf] ひとこと（紹介文v2・ディレクター指示）＝書名の下・中央1行 */
.doc-card__desc{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);}
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){ .doc-card__desc{text-wrap-style:pretty;} }                                   /* C-1: L4 */
.doc-card__meta{font-size:var(--fs-micro);letter-spacing:.1em;color:var(--c-text-note);text-align:center;}               /* C-1: L5 */
.doc-card__toc{list-style:none;margin:0;padding:0;font-size:var(--fs-caption);color:var(--c-text-sub);border-top:1px dotted var(--c-line);}
.doc-card__toc li{border-bottom:1px dotted var(--c-line);padding:6px 2px;}
.doc-card__toc-label{font-size:var(--fs-micro);letter-spacing:.1em;color:var(--c-text-note);}
/* [20261027f] 「こんな方へ」＝枠と背景をなくし、ボタンの上に添えるひとことに（ディレクター指示）。中央揃え・太さ500（見出しと同じ＝サイトの規定内。bold/600以上は使わない）。
   ひとこと＋ボタンをカードの底にまとめる（margin-top:auto は for 側へ移し、foot は直下に続ける）＝カード高さがそろってもボタン位置がそろう。 */
.doc-card__for{
  margin:auto 0 0;padding:10px 4px 0;text-align:center;
  font-size:var(--fs-body-sm);font-weight:500;line-height:1.8;letter-spacing:var(--ls-2);color:var(--c-text);
  text-wrap-style:balance;
}
.doc-card__foot{margin-top:0;text-align:center;}
/* [20261026u] タブレットで「ダウンロ／ード」と折れていた（ディレクター指摘）。ボタン演出（global-nav.js の btnroll）は文字だけを取り出して作り直すため <br>・<span> は使えない。
   → 文字に見えない区切り（&#8203;＝ゼロ幅スペース）を「この資料を」の後に入れ、keep-all で日本語の途中では折らない＝折れるときは「この資料を／ダウンロード」だけ。 */
.doc-card__foot .btn{word-break:keep-all;width:100%;}   /* [20261026w] ボタンの左右を「こんな方に」の枠に揃える（ディレクター指示）＝枠と同じく本文の幅いっぱい */
/* [20261027f] カードの表示アニメーション（ディレクター指示「各カードの表示をもう少し凝ったものに」）。
   ①カードが下から上がる（PCは右列を .14s 遅らせ、左→右へ時間差）②表紙が上から下へ開く（clip-path）③表紙がわずかにズームアウトして止まる。
   値はサイトの既存モーション（site-motion.css）に揃える＝着地・表紙が開く動きとも --sm-ease-out（expo-out）。派手にしない（距離44px・SP28px、表紙の拡大は1.14→1）。
   既存の共通リビール（.reveal→.is-in＝各ページ末尾のIO）に相乗り。カードは data-sm-skip で site-motion.js の罫線描画・画像フェードの対象外にして、動きを二重にしない。
   JS無し／?motion=0／OSの「視差効果を減らす」では動かさない（常時表示）。 */
.doc-card__cover{overflow:hidden;}
.wf-reveal .doc-card.reveal{opacity:0;transform:translateY(44px);}
.wf-reveal .doc-card.reveal .doc-card__cover{clip-path:inset(-2px -2px 100% -2px);}
.wf-reveal .doc-card.reveal .doc-card__cover img{transform:scale(1.14);}
.wf-reveal .doc-card.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity 1s cubic-bezier(.215,.61,.355,1) var(--doc-d,0s),transform 1.3s cubic-bezier(.16,1,.3,1) var(--doc-d,0s);
}
.wf-reveal .doc-card.reveal.is-in .doc-card__cover{
  clip-path:inset(-2px);
  transition:clip-path 1.2s cubic-bezier(.16,1,.3,1) calc(var(--doc-d,0s) + .3s);
}
.wf-reveal .doc-card.reveal.is-in .doc-card__cover img{
  transform:none;
  transition:transform 2.2s cubic-bezier(.16,1,.3,1) calc(var(--doc-d,0s) + .3s);
}
@media(min-width:768px){.doc-card:nth-child(even){--doc-d:.14s;}}
@media(max-width:767px){.wf-reveal .doc-card.reveal{transform:translateY(28px);}}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .doc-card.reveal,
  html:not(.wf-force-motion) .doc-card.reveal .doc-card__cover,
  html:not(.wf-force-motion) .doc-card.reveal .doc-card__cover img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;}
}

/* [20261026y] BOOK 01 の横長カード（--feature・20261026r〜s）は廃止＝6冊とも同じカードで2列×3段。 */
/* [20261020z] カード幅いっぱい（438px）をやめ、基準ボタンと同じ360px・中央に（ディレクター指示＝ボタン統一）。 */

.form-block{max-width:var(--c1-measure-narrow);margin:0 auto;}
.form-field{margin-bottom:28px;}
.form-field__label{display:block;font-size:var(--fs-body-sm);font-weight:var(--fw-normal);margin-bottom:8px;}
.tag-req,.tag-opt{
  display:inline-block;font-size:var(--fs-micro);font-weight:normal;letter-spacing:.05em;
  padding:0 6px;margin-left:8px;vertical-align:middle;border-radius:2px;
}
.tag-req{background:var(--c-btn);color:#fff;}
.tag-opt{border:1px solid var(--c-line-dark);color:var(--c-text-sub);}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select{
  width:100%;border:1px solid var(--c-line-dark);background:var(--c-bg);
  padding:12px 10px;font-size:var(--fs-body);font-family:inherit;color:var(--c-text);
}
.form-field__note{font-size:var(--fs-note);color:var(--c-text-sub);margin-top:4px;}
.form-choice{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-body-sm);padding:9px 0;border-bottom:1px dotted var(--c-line);}
.form-choice input{margin-top:9px;flex:none;}
.form-privacy{font-size:var(--fs-note);color:var(--c-text-sub);text-align:center;margin-top:32px;}
.form-submit{margin-top:24px;text-align:center;}
/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08・2026-08-20）。
   本文中の <span class="nowrap"> で文節を一体で送り、最終行3字以下を防ぐ。 */
.nowrap{white-space:nowrap;}

/* [20261027za] 期限切れのダウンロードリンクから来たときの案内（docs/19 P174）。帯・色面は使わず 1px 罫線のみ */
.doc-expired{max-width:640px;margin:0 auto var(--sp-5,64px);padding:20px 24px;border:1px solid var(--c-text);text-align:center;font-size:var(--fs-body);line-height:1.9;color:var(--c-text);}