/* ===== compose 用：サイト全体の統一レイヤー（見出し統一＋つなぎ）=====
* パーツ本体(craft)はそのまま、ヘッダーと余白リズムを全セクションで統一して
* 「寄せ集め」でなく「1つのサイト」に見せる。tokens.css に重ねて使う。
* の後に
* ← テーマと見出しスタイルを全体指定
*/
/* つなぎ：セクションの余白リズム＋背景交互＋スクロール表示の統一 */
.sec { padding-block: clamp(64px, 8vw, 112px); }
.sec:nth-of-type(even) { background: color-mix(in srgb, var(--paper) 55%, var(--page)); }
.sec-inner { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 54px); }
/* スクロール表示（全セクション同一タイミング＝つなぎの統一感） */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.rv.in { opacity: 1; transform: none; }
/* ===== 統一ヘッダー（サイトで1スタイル・実在サイトの見出し処理由来）===== */
.sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .eyebrow { font-family: var(--display); color: var(--accent-text); font-weight: 600; }
.sec-head .ttl { font-family: var(--display); color: var(--ink); font-weight: 700; letter-spacing: .01em; margin: 0; }
.sec-head .lead { color: var(--muted); margin: 0; }
/* A: 中央・英字eyebrow型（採用/サービス系の王道・万能） */
[data-headstyle="A"] .sec-head { text-align: center; max-width: 760px; margin-inline: auto; }
[data-headstyle="A"] .sec-head .eyebrow { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; display: block; margin-bottom: 14px; }
[data-headstyle="A"] .sec-head .ttl { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.4; }
[data-headstyle="A"] .sec-head .lead { font-size: 16px; line-height: 1.9; margin-top: 18px; }
/* B: 左2カラム型（左に大見出し／右にリード・CrowdLoan由来・コーポレート信頼） */
[data-headstyle="B"] .sec-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-items: end; }
[data-headstyle="B"] .sec-head .eyebrow { font-size: 13px; letter-spacing: .18em; text-transform: uppercase; display: block; margin-bottom: 12px; }
[data-headstyle="B"] .sec-head .ttl { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.35; }
[data-headstyle="B"] .sec-head .lead { font-size: 16px; line-height: 1.95; }
@media (max-width: 820px) { [data-headstyle="B"] .sec-head { grid-template-columns: 1fr; row-gap: 16px; } }
/* C: ミニマル/エディトリアル型（装飾なし特大・ブランド/美容/飲食） */
[data-headstyle="C"] .sec-head { text-align: left; }
[data-headstyle="C"] .sec-head .eyebrow { display: none; }
[data-headstyle="C"] .sec-head .ttl { font-size: clamp(34px, 5vw, 56px); line-height: 1.2; letter-spacing: 0; }
[data-headstyle="C"] .sec-head .lead { font-size: 17px; line-height: 1.9; margin-top: 20px; max-width: 42em; }
[data-headstyle="C"] .sec-head::after { content: ""; display: block; width: 64px; height: 2px; background: var(--accent); margin-top: 24px; }
/* ===== ダミー画像枠（写真はコードで描かない・本番はデザイナーが差し込む）===== */
.ph { display: grid; place-items: center; background: var(--card); border: 1px dashed var(--line);
border-radius: var(--radius); color: var(--muted); font-size: 13px; letter-spacing: .04em; aspect-ratio: 16 / 9; overflow: hidden; }
.ph::before { content: "画像が入ります"; opacity: .8; }
.ph--wide { aspect-ratio: 24 / 9; }
.ph--portrait { aspect-ratio: 3 / 4; }
.ph--square { aspect-ratio: 1 / 1; }
.ph--avatar { aspect-ratio: 1 / 1; border-radius: 999px; max-width: 84px; }
.ph--avatar::before { content: ""; }
/* SP はみ出しガード（メディアは枠を超えない・横スクロール事故を防ぐ） */
img, svg, video, .ph { max-width: 100%; }
.sec, .sec-inner { max-width: 100%; }