/* ============================================================
   sfre site-core.css — 全ページ共通のデザインシステム
   TOP（sfre-home-v7.html）の実装値と完全一致させて管理する。
   TOP側もこのファイルをlinkし、ここに無い「そのページだけの演出
   （ヒーローのノート開閉・変身シーン等）」だけを自分のstyleに残す。

   ボタン色やヘッダー/フッターの仕様が変わったら、このファイルを
   直すだけで全ページに反映される（TOP・下層ページ問わず）。
   ============================================================ */
:root{
  /* ===== Design tokens — Figma 0729 版と同一（TOPの:rootをそのまま複製） ===== */
  --color-orange-500:#d98c0f; --color-orange-600:#b8770d;
  --color-yellow-50:#fbf6c9; --color-yellow-100:#fff47f; --color-yellow-200:#ffe385;
  --color-yellow-300:#ffc400; --color-yellow-400:#efb13f; --color-yellow-500:#d98c0f; --color-yellow-cta:#fbe26b;
  --color-brown-900:#3b2b1e; --color-brown-800:#4a3527; --color-brown-600:#7c6a57;
  --color-green-700:#5b6158;
  --color-gray-900:#1f1f1f; --color-gray-800:#333333; --color-gray-700:#494949; --color-gray-600:#737373;
  --color-gray-500:#939393; --color-gray-400:#a6a6a6; --color-gray-300:#cccccc; --color-gray-200:#ebebeb; --color-gray-100:#f3f1ee;
  --color-beige-50:#fffbed; --color-beige-100:#f0ecca; --color-beige-200:#f3e0cc; --color-beige-300:#e5dacb; --color-beige-warm:#f8f6e5;
  --color-blue-50:#f1f6fa; --color-blue-600:#0067b1;
  --color-red-500:#eb5c38;
  --color-white:#ffffff; --color-black:#000000;
  --text-primary:var(--color-gray-800); --text-secondary:var(--color-gray-700); --text-body:var(--color-green-700);
  --text-muted:var(--color-gray-600); --text-caption:var(--color-gray-500); --text-disabled:var(--color-gray-300);
  --text-accent:var(--color-orange-500); --text-on-dark:var(--color-white); --text-on-accent:var(--color-white); --text-link:var(--color-blue-600);
  --bg-primary:var(--color-white); --bg-warm:var(--color-beige-100); --bg-warm-light:var(--color-beige-50);
  --bg-warm-medium:var(--color-beige-200); --bg-warm-dark:var(--color-beige-300); --bg-card:var(--color-white);
  --bg-cool:var(--color-blue-50); --bg-dark:var(--color-gray-800); --bg-dark-brown:var(--color-brown-900);
  --bg-muted:var(--color-gray-100); --bg-page-hero:var(--color-yellow-50); --bg-page-body:var(--color-beige-warm);
  --accent-primary:var(--color-orange-500); --accent-secondary:var(--color-yellow-300); --accent-yellow-dark:var(--color-yellow-500);
  --accent-highlight:var(--color-yellow-100); --accent-red:var(--color-red-500); --accent-cta-banner:var(--color-yellow-cta);
  --border-default:rgba(74,53,39,.13); --border-accent:var(--color-yellow-300);
  --space-4:4px; --space-8:8px; --space-10:10px; --space-12:12px; --space-14:14px; --space-16:16px; --space-20:20px;
  --space-24:24px; --space-28:28px; --space-32:32px; --space-36:36px; --space-40:40px; --space-48:48px; --space-64:64px; --space-120:120px;
  /* 角丸は4段のみ。14/16/18/24px は使わない（DESIGN_POLICY 原則11-a）。
     --radius-md/lg は旧値(14/16)から 12/20 に締め直した。--radius-xl は廃止予定 */
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px; --radius-full:999px;
  --radius-xl:20px; /* deprecated: --radius-lg を使うこと */
  --font-heading:'Zen Kaku Gothic New',sans-serif; --font-body:'Noto Sans JP',sans-serif; --font-accent:'Caveat',cursive; --font-english:'Outfit',sans-serif;

  /* v6互換エイリアス（既存セレクタが参照する旧名） */
  --orange-500:var(--color-orange-500); --orange-600:var(--color-orange-600);
  --yellow-50:var(--color-yellow-50); --yellow-100:var(--color-yellow-100); --yellow-200:var(--color-yellow-200);
  --yellow-300:var(--color-yellow-300); --yellow-400:var(--color-yellow-400); --yellow-500:var(--color-yellow-500);
  --brown-900:var(--color-brown-900); --brown-800:var(--color-brown-800); --brown-600:var(--color-brown-600);
  --green-700:var(--color-green-700);
  --gray-900:var(--color-gray-900); --gray-800:var(--color-gray-800); --gray-700:var(--color-gray-700); --gray-600:var(--color-gray-600);
  --gray-500:var(--color-gray-500); --gray-400:var(--color-gray-400); --gray-300:var(--color-gray-300); --gray-200:var(--color-gray-200); --gray-100:var(--color-gray-100);
  --beige-50:var(--color-beige-50); --beige-100:var(--color-beige-100); --beige-200:var(--color-beige-200); --beige-300:var(--color-beige-300);
  --blue-50:var(--color-blue-50);
  /* 影は「物理的に浮いている必要があるもの」だけに使う（DESIGN_POLICY 原則11-b）。
     固定ヘッダー / モバイルメニュー / 傾けた写真カード のみ。
     地の上のカードを分けるのは影ではなく背景色の差でやる。
     --shadow-card / --shadow-md は新規使用しない（既存箇所の互換のため残置） */
  --shadow-sm:0 2px 10px rgba(19,40,64,.05);
  --shadow-md:0 16px 34px -14px rgba(19,40,64,.16), 0 4px 10px rgba(19,40,64,.04);
  --shadow-card:0 20px 44px -22px rgba(19,40,64,.18), 0 2px 6px rgba(19,40,64,.035);
  --rule-bg:#FFFDF8; --rule-line:rgba(91,141,184,.13);
  --bone:var(--color-beige-warm); --bone-2:#EFEAE0; --page:#FFFDF8;
  --green:#1C4632; --ink:#20241F; --h:var(--color-gray-800); --ink-2:var(--color-green-700);
  --amber:#F5A623; --amber-deep:var(--color-yellow-500); --yellow:var(--color-yellow-300);
  --blue:#5B8DB8; --blue-deep:#33607F; --blue-pale:#E9F1F7; --photo-bg:var(--color-blue-50); --blue-line:rgba(91,141,184,.32);
  --navy:#1D3B58; --navy-deep:#132840; --line:rgba(28,70,50,.14);
  --e:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
/* 横方向のぐらつき対策（Figma #63 渡辺さん 2026-09-15）
   body の overflow-x:hidden だけだと、トラックパッドの横慣性やピン留め中の
   transform で 100vw 基準の要素（ノート・光の円）がはみ出した瞬間に
   ビューポートが左右にずれることがある。html 側で clip して横方向の
   スクロール余地そのものを無くす（clip はスクロール容器を作らないので
   position:sticky や ScrollTrigger に影響しない）。
   scrollbar-gutter は、スクロールバーの出入りで横幅が変わってレイアウトが
   左右に揺れるのを防ぐ */
html{overflow-x:clip;scrollbar-gutter:stable;}

body{
  font-family:'Noto Sans JP',sans-serif;
  background:var(--bone);color:var(--ink);
  line-height:1.9;-webkit-font-smoothing:antialiased;
  /* hidden だと html 側を clip にした時点で body がスクロール容器になる。clip なら容器にならない */
  overflow-x:clip;
}
.d{font-family:'Zen Kaku Gothic New',sans-serif;}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}

/* reveal on scroll（挙動は site-core.js の IntersectionObserver が付与） */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--e),transform .8s var(--e);}
.rv.on{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ===== header : floating white bar（下層ページは常時表示。
   TOPだけ「ファーストビューでは隠す」演出を自分のstyleで追加で上書きする） ===== */
/* 中央寄せに transform を使わない（margin-inline:auto で中央に置く）。
   transform / backdrop-filter は position:fixed の子の基準を作ってしまい、
   モバイルメニュー（fixed の全画面パネル）がヘッダー内に閉じ込められるため。 */
header{
  position:fixed;top:14px;left:0;right:0;margin-inline:auto;z-index:90;
  width:min(1390px, calc(100% - 28px));
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(16px,3vw,44px);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(19,40,64,.08);
}
/* ロゴは絶対に潰さない。リセットの img{max-width:100%} が効くと、
   ボタンに押されてロゴだけ極端に小さくなる */
.brand{display:flex;align-items:center;gap:10px;flex:none;position:relative;z-index:2;}
.brand .logo-img{height:26px;width:auto;max-width:none;display:block;}
nav{display:flex;align-items:center;gap:clamp(13px,1.5vw,24px);}
nav a{font-size:13px;font-weight:500;color:var(--h);transition:color .3s var(--e);white-space:nowrap;}
nav a:hover,nav a.current{color:var(--amber-deep);}
/* .lk.sub = メインメニューからは外すが動線は残す「控えめ」リンク
   （Figma 521:29 ワイヤーFB：学校関係者の方へ は "控えめ"。
     ヘッダー右上・CTAボタンの左に別枠で小さく置く指示）。
   縦罫で主メニューと切り離し、サイズと色を一段落とす */
nav a.sub{font-size:11.5px;color:var(--text-muted);position:relative;padding-left:17px;margin-left:-4px;}
nav a.sub::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:14px;background:var(--border-default);}
nav a.sub:hover,nav a.sub.current{color:var(--amber-deep);}

/* ハンバーガー（デスクトップでは出さない） */
.navtoggle{display:none;}

/* ===== モバイル／タブレット: ハンバーガー＋全画面メニュー =====
   境界が 1100px なのは、クライアント指示（2026-08-29）でヘッダーから
   「教育支援活動」「採用情報」を外し「応援ノートとは」を加えた結果、
   nav（和文リンク4本＋CTA2本）の必要幅が約1026px（実測、1050pxビューポート時）
   まで縮んだため。旧構成（リンク5本）では1180pxが必要だった。
   ※ nav の項目数を変えたら必ずこの数値も測り直す（DESIGN_POLICY 原則10-a）。 */
@media(max-width:1100px){
  /* fixed な nav の基準をビューポートに保つため、ここでは blur を外す */
  header{padding:11px clamp(14px,2vw,24px);gap:12px;backdrop-filter:none;background:rgba(255,255,255,.96);}
  .brand .logo-img{height:28px;}

  .navtoggle{
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    flex:none;position:relative;z-index:2;width:44px;height:44px;margin-right:-6px;
    padding:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--text-primary);
    transition:transform .45s var(--e),opacity .25s var(--e);}
  header.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  header.nav-open .navtoggle span:nth-child(2){opacity:0;}
  header.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  nav{
    position:fixed;left:0;right:0;top:0;width:100%;height:100dvh;z-index:1;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(env(safe-area-inset-top,0px) + 84px) clamp(22px,6vw,40px)
            calc(env(safe-area-inset-bottom,0px) + 32px);
    background:#FFFDF8;  /* 背面が透けないよう不透明 */
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .4s var(--e),transform .4s var(--e),visibility .4s;
  }
  header.nav-open nav{opacity:1;visibility:visible;transform:none;}
  /* 中身は少し遅れて下から出す（開いた感を出すため） */
  nav > *{opacity:0;transform:translateY(14px);transition:opacity .45s var(--e),transform .45s var(--e);}
  header.nav-open nav > *{opacity:1;transform:none;}
  header.nav-open nav > :nth-child(1){transition-delay:.10s;}
  header.nav-open nav > :nth-child(2){transition-delay:.15s;}
  header.nav-open nav > :nth-child(3){transition-delay:.20s;}
  header.nav-open nav > :nth-child(4){transition-delay:.25s;}
  header.nav-open nav > :nth-child(5){transition-delay:.30s;}
  header.nav-open nav > :nth-child(6){transition-delay:.35s;}
  header.nav-open nav > :nth-child(7){transition-delay:.40s;}
  nav .lk{display:block;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;
    font-size:17px;padding:19px 2px;border-bottom:1px solid var(--border-default);white-space:normal;}
  /* 控えめリンクは縦リストなので縦罫は使わず、サイズと色だけ一段落として従属を示す */
  nav a.sub{font-size:14px;color:var(--text-muted);padding-left:2px;margin-left:0;}
  nav a.sub::before{display:none;}
  nav .btn{width:100%;justify-content:center;font-size:15px;padding:16px 22px;min-width:0;}
  /* リンク群とボタン群のあいだの余白。
     2026-09-01: 以前は nav .btn:first-of-type だったが、:first-of-type は
     クラスではなく「タグの種類」で判定されるため、nav の子が全て <a> の
     この構造では「navの最初の<a>」＝TOPリンクを指してしまい、.btn との
     複合条件が成立せず余白が一切効いていなかった。
     リンク最後尾（.lk）の直後にくる .btn を指す形に変更する。 */
  nav .lk + .btn{margin-top:28px;}
  nav .btn+.btn{margin-top:12px;}
  header .btn.has-arrow::after{width:24px;height:24px;font-size:12px;}
}
@media (prefers-reduced-motion: reduce){
  nav,nav > *,.navtoggle span{transition:none;}
}
@media (prefers-reduced-motion: reduce) and (max-width:1100px){
  nav > *{opacity:1;transform:none;}
}

/* ===== buttons（0729実装仕様: 角丸8pxの長方形 + 24×24角丸スクエアの矢印） ===== */
.btn{
  display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:13px 26px;font-size:14px;font-weight:700;
  /* .btn は基本 <a> に使うため気づかなかったが、download.html の送信ボタン(<button>)は
     ブラウザ既定の枠線・フォントを引き継いで縁が出ていた。<button> でも安全なようにリセット */
  border:none;background-color:transparent;font-family:inherit;cursor:pointer;appearance:none;
  transition:transform .35s var(--e),background .35s var(--e),color .35s var(--e);
}
.btn:active{transform:scale(.97);}
.btn:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px;}
/* 押した瞬間にボタン全体が光って見える件（Figma #49 渡辺さん）。
   スマホのタップハイライトと、クリック時のフォーカス枠が幅いっぱいのボタンだと
   「箱ごと光る」ように見えるため、タップハイライトを消し、マウス操作時は枠を出さない
   （キーボード操作の :focus-visible は残す） */
.btn,button,[type=submit]{-webkit-tap-highlight-color:transparent;}
.btn:focus:not(:focus-visible){outline:none;}
/* .btn-red = 話を聞いてみる/相談（accent-red）／.btn-am = お問い合わせ（アンバー）／
   .btn-am-line = 資料ダウンロード等（白+アンバー枠）／.btn-white = 白背景（濃色背景の上で使用） */
.btn-red,.btn-am,.btn-am-line{border-radius:var(--radius-sm);justify-content:center;min-width:200px;gap:16px;padding:15px 22px;font-size:15px;}
.btn-red{background:var(--accent-red);color:#fff;}
.btn-red:hover{background:#d64d2a;}
.btn-am{background:var(--accent-primary);color:#fff;}
.btn-am:hover{background:var(--color-orange-600);}
.btn-am-line{background:#fff;border:1px solid var(--accent-primary);color:var(--accent-primary);}
.btn-am-line:hover{background:var(--color-yellow-50);}
.btn-white{background:#fff;color:var(--accent-primary);box-shadow:0 6px 20px -2px rgba(217,140,15,.25);}
.btn-white:hover{background:var(--color-yellow-50);}
.btn-red.has-arrow::after,.btn-am.has-arrow::after,.btn-am-line.has-arrow::after,
.btn-white.has-arrow::after,.btn-yellow.has-arrow::after{content:"→";display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:4px;font-size:12px;font-weight:700;flex:none;transition:transform .35s var(--e);}
.btn-red.has-arrow::after{background:#fff;color:var(--accent-red);}
.btn-am.has-arrow::after{background:#fff;color:var(--accent-primary);}
.btn-am-line.has-arrow::after{background:var(--color-yellow-50);color:var(--accent-primary);}
/* 白・黄のボタンにも矢印を出せるようにする。これが無かったため「わたしたちの想い」だけ
   矢印なし、「学校関係者の方へ」だけ本文に「→」直書き、という不揃いが生じていた
   （和田さんFB 2026-09-02）。地の色に対して矢印の四角が沈まないよう反転させる */
.btn-white.has-arrow::after{background:var(--accent-primary);color:#fff;}
.btn-yellow.has-arrow::after{background:#fff;color:var(--h);}
.btn-red.has-arrow:hover::after,.btn-am.has-arrow:hover::after,.btn-am-line.has-arrow:hover::after,
.btn-white.has-arrow:hover::after,.btn-yellow.has-arrow:hover::after{transform:translateX(2px);}
/* 「資料ダウンロード」と「お問い合わせ」は文字数差で自然幅がずれるため、
   長い方（資料ダウンロード）の実測幅に揃えて中央寄せする */
header .btn{padding:9px 16px;font-size:12.5px;min-width:172px;justify-content:center;gap:10px;}
header .btn.has-arrow::after{width:20px;height:20px;font-size:11px;}
/* 補助バリエーション（TOPのFOR TEACHERS/実績ページのpickupリンク等、丸ピルが欲しい箇所用） */
.btn-yellow{background:var(--yellow);color:var(--h);box-shadow:0 8px 22px rgba(255,196,0,.3);}
.btn-yellow:hover{background:var(--amber);}
.btn-yl{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent-secondary);color:var(--text-primary);
  padding:12px 24px;border-radius:24px;font-size:14px;font-weight:700;transition:transform .35s var(--e),background .35s var(--e);}
.btn-yl:hover{background:var(--yellow-400);}
.btn-yl:active{transform:scale(.97);}

/* 見出し共通: 黄色マーカー（Figma SectionHeading）。
   display:inline（block化しない）: 複数行に折り返る場合、各行独立した背景ボックスになり
   マーカーが2行目で不自然にはみ出さない */
.hl-marker{display:inline;background:linear-gradient(transparent 68%, rgba(255,244,127,.95) 68%);}

/* ===== footer（0729: ロゴ左＋SERVICE/COMPANY/CONTACT 3カラム右） ===== */
footer{background:var(--bg-dark);color:var(--text-disabled);padding:64px clamp(20px,5vw,120px) 36px;}
footer .foot-top{display:flex;justify-content:space-between;gap:clamp(40px,6vw,80px);flex-wrap:wrap;max-width:1240px;margin:0 auto;}
footer .biglogo{display:inline-block;}
footer .biglogo img{height:52px;width:auto;filter:brightness(0) invert(1);}
footer .foot-brand .co{margin-top:16px;font-size:12px;color:var(--text-caption);}
footer .cols{display:flex;gap:clamp(32px,5vw,72px);flex-wrap:wrap;}
footer .col h5{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:12px;color:var(--accent-secondary);margin-bottom:14px;letter-spacing:.02em;}
footer .col a{display:block;font-size:13px;color:var(--text-disabled);margin-bottom:11px;line-height:1.6;}
footer .col a:hover{color:#fff;}
footer .bot{max-width:1240px;margin:44px auto 0;font-size:11px;color:var(--text-caption);}
@media(max-width:840px){footer .foot-top{flex-direction:column;gap:36px;}}

/* ===== 下層共通: ページ見出し（subhero / Figma 738:5935 "PageHero"） =====
   Figma実測（1440×378）:
     背景 #FBF6C9（--bg-page-hero）のベタ塗り。グラデーションではない。
     中央揃え・gap16px、padding は上170px / 下80px / 左右120px。
     EN 12px Outfit Bold #D98C0F letter-spacing1.8px
     和文 36px Zen Kaku Gothic New Black #333
     リード 16px Noto Sans JP / line-height1.8 #5B6158
   陽だまりの円は Figma では mix-blend-multiply だが、乗算はブラウザ間で
   背景色を拾いにくいため「乗算した結果に見える色」を直接焼き込む
   （TOP hero円・fctaと同じ対策）。回転角と直径は Figma のまま:
     右下 = 直径504.34px(35.02vw)・rotate(-68.55deg)・ぼかしなし
     左上 = 直径343.65px(23.87vw)・rotate(52.54deg)・ぼかしあり(inset -12.8%相当) */
.subhero{position:relative;overflow:hidden;
  background:var(--bg-page-hero);
  padding:calc(76px + clamp(48px,6.5vw,94px)) clamp(20px,8.33vw,120px) clamp(48px,5.5vw,80px);
  text-align:center;}
.subhero::before,.subhero::after{content:"";position:absolute;border-radius:50%;aspect-ratio:1;
  pointer-events:none;z-index:0;
  background:linear-gradient(180deg,#FFF9C1,#FFD689);}
.subhero::before{left:87.4%;top:94.8%;width:clamp(300px,35.02vw,600px);
  transform:translate(-50%,-50%) rotate(-68.55deg);}
.subhero::after{left:16.7%;top:38.3%;width:clamp(220px,23.87vw,420px);
  transform:translate(-50%,-50%) rotate(52.54deg);
  filter:blur(clamp(14px,1.53vw,26px));}
.subhero .wrap{position:relative;z-index:1;max-width:1240px;margin:0 auto;}
.subhero .eyebrow{font-family:'Outfit',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.15em;color:var(--text-accent);}
.subhero h1{margin-top:16px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:clamp(26px,2.5vw,36px);line-height:1.3;color:var(--text-primary);}
.subhero p{margin-top:16px;font-size:clamp(14px,1.11vw,16px);color:var(--text-body);
  line-height:1.8;max-width:40em;margin-inline:auto;}

/* ===== 下層共通: セクション見出し（eyebrow + h2 + lead）
   わたしたちについて／学校関係者の方へ 等、複数の下層ページで同じ形が
   繰り返し出てきたため共通化（Figma各ページの "Head" コンポーネント相当） ===== */
.sec-eyebrow{font-family:'Outfit',sans-serif;font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--yellow-500);}
.sec-h{margin-top:12px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:clamp(22px,2.6vw,34px);line-height:1.5;color:var(--text-primary);}
.sec-lead{margin-top:18px;font-size:clamp(14px,1.15vw,16px);color:var(--text-body);line-height:1.95;max-width:44em;}

/* ===== breadcrumb（Figma仕様：各ページ本文の一番下、FinalCTA直前に配置）
   置き場所は「セクションの外・body直下・FinalCTAの直前」に統一する。
   .wrap の中に入れるとページごとにセクションのpaddingが効いて余白が揃わないため。
   上下の余白は .crumb 自身が持つ（padding-bottom が無いとCTAに詰まって窮屈になる）。
   マークアップは ol/li の実リスト。区切りはCSSで描き、現在地は aria-current="page"。 ===== */
.crumb{max-width:1240px;margin:0 auto;
  padding:clamp(26px,3vw,34px) clamp(20px,4vw,48px) clamp(44px,5.5vw,72px);
  border-top:1px solid var(--border-default);}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  font-size:12.5px;line-height:1.9;color:var(--text-muted);}
.crumb li{display:flex;align-items:center;min-width:0;}
/* 区切りのシェブロン。テキストの ">" は前後の余白が不揃いになるのでCSSで描く */
.crumb li+li::before{content:"";flex:none;width:5px;height:5px;margin:0 12px;
  border-top:1.5px solid var(--text-disabled);border-right:1.5px solid var(--text-disabled);
  transform:rotate(45deg);}
/* パンくずも <nav> なので、ヘッダー用の `nav a`（13px/500/#333）を必ず打ち消す。
   セレクタは .crumb ol a まで上げて特異性で確実に勝たせる */
.crumb ol a{font-size:inherit;font-weight:400;white-space:normal;
  color:var(--text-muted);transition:color .3s var(--e);}
.crumb ol a:hover{color:var(--amber-deep);text-decoration:underline;text-underline-offset:3px;}
/* 現在地はリンクにしない。長いページ名は省略記号で丸める */
.crumb ol [aria-current="page"]{color:var(--text-primary);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.crumb li+li::before{margin:0 9px;}}

/* ===== 下層共通: 資料カード（MaterialCard / 資料一覧・資料ダウンロードで使用） ===== */
.mat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
/* カード全体がダウンロードフォームへのリンク。直接DLはできず必ずフォームを挟むため、
   ボタン文言は「ダウンロード ↓」ではなく遷移を示す「→」にしている（現サイト同様Satori運用） */
.mat-card{background:var(--bg-primary);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;transition:transform .4s var(--e),box-shadow .4s var(--e);}
a.mat-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
a.mat-card:hover .dl{background:var(--accent-primary);color:#fff;}
.mat-card .thumb{aspect-ratio:338/189;background:linear-gradient(135deg,var(--beige-100),var(--blue-50));position:relative;overflow:hidden;}

/* 一覧カードのサムネイルは、元画像の縦横比がバラバラでも枠を揃える。
   コラム(.colcard)だけ個別に持っていたルールを、実績・資料・関連カードにも共通で当てる。
   （WordPress化で実写真が入ったとき、比率の違いでカード高が揃わない問題への対応） */
.mat-card .thumb img,
.wkcard .thumb img,
.relcard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.wkcard .thumb,.relcard .thumb{position:relative;overflow:hidden;}
/* 企業名・業種が未設定のときに空の枠が出ないようにする */
.wkcard .co:empty,.wkcard .cat:empty,.mat-card .tag:empty,.relcard .co:empty{display:none;}

/* 実データはタイトル・説明文の長さがバラバラで、そのままだとカードの高さが揃わない。
   見出しは2行、説明文は3行で打ち切る（WordPress化で実記事を入れた際の対応）。 */
.wkcard h3,.colcard h3,.mat-card h3,.relcard h3{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.wkcard p,.mat-card p{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.mat-card .body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.mat-card .tag{align-self:flex-start;font-size:11px;font-weight:500;color:var(--amber-deep);
  background:var(--yellow-50);border-radius:999px;padding:5px 12px;}
.mat-card h3{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16.5px;line-height:1.65;color:var(--text-primary);}
.mat-card p{font-size:13px;color:var(--text-caption);line-height:1.85;flex:1;}
.mat-card .dl{align-self:flex-start;margin-top:4px;font-size:13px;font-weight:700;color:var(--amber-deep);
  border:1px solid var(--accent-primary);border-radius:8px;padding:10px 20px;
  transition:background .3s var(--e),color .3s var(--e);}
@media(max-width:1080px){.mat-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.mat-grid{grid-template-columns:1fr;}}

/* ===== 共通: ロゴマーキー（.mq） =====
   企業ロゴは「白背景付きで支給されることがある」「掲載順序がデリケート」という事情から、
   固定グリッドで並べず、白い角丸カードに入れて横に流す方式で統一する
   （白カードが地色との差を吸収し、順序も固定して見えない）。
   トラックの複製と、読み込みに失敗したロゴの非表示は site-core.js が担当。
   端のフェード色は置き場所ごとに違うので --mq-fade で受ける。 ===== */
/* 横方向だけを隠す。overflow:hidden だとカードの影が上下の枠でも切られ、
   とくに下側が直線でバツンと切れて見えてしまう。
   overflow-x:clip なら横スクロールを止めつつ、上下の影ははみ出して描画できる
   （clip はスクロールコンテナを作らないので hidden より副作用が少ない）。
   上下の余白(--mq-shadow-room)は影が収まるぶんだけ確保する */
.mq{overflow-x:clip;overflow-y:visible;position:relative;
  --mq-shadow-room:18px;
  padding-top:var(--mq-shadow-room);padding-bottom:var(--mq-shadow-room);
  margin-top:calc(var(--mq-shadow-room) * -1);margin-bottom:calc(var(--mq-shadow-room) * -1);}
/* フェードは padding ぶんも覆う必要があるので上下いっぱいに伸ばす */
.mq::before,.mq::after{content:"";position:absolute;top:0;bottom:0;
  width:clamp(40px,8vw,140px);z-index:2;pointer-events:none;}
.mq::before{left:0;background:linear-gradient(to right, var(--mq-fade,var(--bone)), transparent);}
.mq::after{right:0;background:linear-gradient(to left, var(--mq-fade,var(--bone)), transparent);}
.mq-track{display:flex;align-items:center;gap:clamp(16px,1.6vw,24px);width:max-content;
  animation:mq 48s linear infinite;}
.mq:hover .mq-track{animation-play-state:paused;}
/* 0729: ロゴは白い角丸カードに入れる。
   ロゴが小さく見えるとのFBで1.3倍に拡大（カード枠もロゴに合わせて拡大し、
   カード内の余白バランスは元の比率を保つ）
   min-width 168→218 / height 96→125 / padding 20-26→26-34 */
.mq .cell{flex:0 0 auto;display:grid;place-items:center;
  background:#fff;border-radius:16px;padding:26px 34px;min-width:218px;height:125px;
  box-shadow:var(--shadow-sm);}
/* モバイルでは枠に対してロゴが小さく見える（125px枠に52px＝42%）。
   枠を縮めてロゴを上げ、占有率を6割前後にする */
/* 40-54px → 52-70px（1.3倍） */
.mq img{height:clamp(52px,5.7vw,70px);width:auto;}
/* モバイルは枠に対してロゴが小さく見える（125px枠に52px＝42%）。
   枠を縮めロゴを上げて占有率を6割弱にする。
   .mq img の後ろに置かないと上書きされるので順序に注意 */
@media(max-width:840px){
  .mq .cell{min-width:176px;height:100px;padding:18px 24px;}
  .mq img{height:58px;}
}
@keyframes mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion: reduce){
  /* 自動で流さず、折り返して並べる（複製ぶんは隠す） */
  .mq-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;}
  .mq .dup{display:none;}
}

/* ===== 共通: 重ね写真スライドショー（.photostack） =====
   Figma では TOP の CSRアピール(734:521)が写真1枚、about の教育支援活動(734:2030)が
   写真2枚の重なり。どちらも「傾けたカードが重なる」同じ見せ方なので3枚に統一し、
   一定間隔で写真が入れ替わるようにした（順序を固定で見せない意図）。

   実装上の要点：カードのDOM順（＝重なり順）は固定したまま、**中の写真だけ**を
   クロスフェードで送る。カード自体の z-index を回すと、後ろへ回る途中のカードが
   手前のカードからはみ出して一瞬ちらつくため（z-index は補間できない）。

   HTML は前面カード1枚だけ書けばよく、背面カードと画像は site-core.js が生成する
   （JSが動かない環境では今までどおり「傾いた写真1枚」として成立する）。 ===== */
.photostack{position:relative;width:100%;aspect-ratio:353/262;}
.photostack .ps-card{position:absolute;inset:0;border-radius:20px;overflow:hidden;background:#fff;
  box-shadow:0 22px 44px -18px rgba(19,40,64,.30);transform-origin:50% 90%;
  /* 奥のカードほど傾きを戻し、少し小さく・上へ逃がす（--d = 0:前面 / 1:中 / 2:奥）。
     前面の傾きは --ps-tilt で置き場所ごとに調整できる（狭い画面では浅くする等） */
  transform:rotate(calc(var(--ps-tilt,7.6deg) - var(--d,0) * 6.5deg))
            translateY(calc(var(--d,0) * -4%))
            scale(calc(1 - var(--d,0) * .05));}
.photostack .ps-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:0;transition:opacity .9s var(--e);}
.photostack .ps-card img.on{opacity:1;}
@media (prefers-reduced-motion: reduce){
  .photostack .ps-card img{transition:none;}
}

/* ===== 共通: 背景動画（.vidfill） =====
   「ノートが手渡される瞬間」だけ、静止画ではなく自然光がゆらぐ短いループ動画で見せる。
   img と同じ振る舞い（親を埋める object-fit:cover）にしてあるので、既存の
   `.xxx img{width:100%;height:100%;object-fit:cover}` と同じ置き場所にそのまま入る。

   モバイルで確実にループ自動再生させるための必須条件（HTML側で指定）:
     muted / playsinline / autoplay / loop
   音声トラックは書き出し時に落としてある（iOSは音声付きだと自動再生を拒否する）。
   poster を必ず添え、動画のデコード前・省データモード・reduced-motion のいずれでも
   静止画として成立するようにしている。 ===== */
.vidfill{width:100%;height:100%;object-fit:cover;display:block;background:var(--beige-100);}
@media (prefers-reduced-motion: reduce){
  /* 動きを減らす設定では再生させず poster（静止画）のまま見せる。
     JS 側で pause() する（CSSだけでは再生自体は止められないため） */
  .vidfill{--paused:1;}
}

/* ===== 下層共通: 誘導カード（Figma 734:6469「教育支援に関するお問い合わせ」／
   734:2358 学校関係者の方へ の Facilities CTA）
   中央揃えのカードに 見出し＋補足＋ボタン列。FinalCTAとは別物で、本文の途中に置く。
   背景色と角丸だけページごとに変わるので変数で受ける（既定=school側の値）。
   見出しは Figma 734:6470 の指定どおり Bold(700)。 ===== */
.cta-card{background:var(--cta-card-bg,var(--beige-100));border-radius:var(--cta-card-radius,20px);
  padding:clamp(36px,5vw,56px) clamp(24px,4vw,48px);text-align:center;}
.cta-card h2{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;
  font-size:clamp(20px,2.2vw,26px);line-height:1.5;color:var(--text-primary);}
.cta-card p{margin-top:16px;font-size:clamp(13.5px,1.05vw,15px);color:var(--text-body);line-height:1.9;}
.cta-card .btns{display:flex;gap:16px;justify-content:center;margin-top:28px;flex-wrap:wrap;}
/* 2つのボタンの見た目の横幅を揃える（長い方＝「お問い合わせ」の実測幅に短い方を合わせる）。
   flex:1 1 0 と min-width:0 で、gapを引いた残り幅を両方に均等配分する */
.cta-card .btns .btn{flex:1 1 0;min-width:0;max-width:240px;}
/* モバイル: flex:1 1 0 + min-width:0 だと折り返さずに2つとも極端に細く潰れて
   不格好になる（クライアント指摘、2026-08-31）。狭い画面では横並びをやめ縦積みにする */
@media(max-width:480px){
  .cta-card .btns{flex-direction:column;}
  .cta-card .btns .btn{max-width:none;width:100%;}
}

/* ===== 下層共通: FinalCTA（Figma 739:6120 CTABanner / 522:945 ほか各ページ末尾で使用）
   TOPのfctaと同一の見た目。circle二つは乗算だとブラウザ間で背景色を拾いにくかったため、
   「乗算した結果に見える色」を直接グラデーションに焼き込む方式（TOP hero円と同じ対策）。 ===== */
.fcta{background:var(--accent-cta-banner);padding:clamp(72px,9vw,120px) clamp(20px,4vw,48px);text-align:center;position:relative;overflow:hidden;}
/* 円の色は Figma 738:3032 の Ellipse SVG 実データから採取:
   大円(右下)=#FFE256→#FFC800 くっきり / 小円(左)=#FBE26B→#FFBB4F 60%+blur22px */
.fcta::before{content:"";position:absolute;left:86.7%;top:115.2%;width:59.9vw;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:linear-gradient(180deg,#FFE256,#FFC800);}
.fcta::after{content:"";position:absolute;left:6.3%;top:44.9%;width:32.3vw;aspect-ratio:1;
  transform:translate(-50%,-50%);border-radius:50%;opacity:.6;pointer-events:none;
  background:linear-gradient(180deg,#FBE26B,#FFBB4F);filter:blur(22px);}
.fcta-inner{max-width:900px;margin:0 auto;position:relative;z-index:1;}
/* Figma実測（1440×576）: 120px padding / CONTACT は leading-normal(≈1.26) /
   CONTACT→h2 が gap12px、h2→リードが gap24px、テキスト塊→ボタン行が gap56px。
   1440では 120+200.3+56+80+120 = 576 になる */
.fcta-eyebrow{font-family:'Outfit',sans-serif;font-weight:700;color:#fff;
  font-size:clamp(34px,5vw,62px);letter-spacing:.3em;line-height:1.26;padding-left:.3em;}
/* 下限が24pxだと375px幅で「まずはお気軽にご相談ください」の最後の1文字だけが
   折り返して孤立するため、21pxまで下げて1行に収める */
.fcta h2{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;color:var(--text-primary);
  font-size:clamp(21px,2.8vw,40px);line-height:1.35;margin-top:12px;}
.fcta p{margin-top:24px;font-size:clamp(14px,1.2vw,17px);color:var(--text-body);line-height:1.9;}
.fcta-btns{display:flex;gap:20px;justify-content:center;margin-top:clamp(32px,4.4vw,56px);flex-wrap:wrap;}
/* Figma: 424×80px・角丸8px・ラベル18px/ls0.72px。
   矢印はラベルの隣ではなく「ボタン右端に絶対配置(right:10px)」で、ラベル自体が中央に来る。
   影も Figma の pill-button / Frame の指定どおり（赤=ぼかし10・白=ぼかし20/縮小2）。 */
.fcta-btns .btn{position:relative;flex:1 1 260px;max-width:424px;min-width:0;
  height:80px;font-size:clamp(15px,1.25vw,18px);letter-spacing:.04em;}
.fcta-btns .btn.has-arrow::after{position:absolute;right:10px;top:50%;transform:translateY(-50%);}
.fcta-btns .btn.has-arrow:hover::after{transform:translateY(-50%) translateX(2px);}
.fcta-btns .btn-red{box-shadow:0 6px 10px rgba(217,140,15,.25);}
.fcta-btns .btn-am-line,.fcta-btns .btn-white{box-shadow:0 6px 20px -2px rgba(217,140,15,.25);}

/* ===== フォーム（/contact_us/ と /download/）=====
   これらは WordPress の外にある素の PHP から読まれる。
   テーマの header.php / footer.php を include しているため、
   スタイルは固定ページ側ではなくこの共通CSSに置く必要がある。 */
.ct-intro{padding:clamp(48px,6vw,88px) clamp(20px,4vw,48px) 0;text-align:center;}
.ct-intro h2{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:clamp(22px,2.4vw,28px);color:var(--text-primary);}
.ct-intro p{margin-top:16px;font-size:14.5px;color:var(--text-body);line-height:2;}

.ct-form{padding:clamp(40px,5vw,64px) clamp(20px,4vw,48px) clamp(48px,6vw,72px);}
.ct-card{max-width:720px;margin:0 auto;background:var(--bg-primary);border-radius:24px;padding:clamp(32px,4vw,56px);
  display:flex;flex-direction:column;gap:22px;box-shadow:0 18px 40px -28px rgba(69,58,20,.32);}
.ct-field label{font-size:14px;font-weight:500;color:var(--text-primary);display:flex;align-items:center;gap:10px;}
.ct-field .req{font-size:10px;font-weight:500;color:#fff;background:var(--accent-red);border-radius:4px;padding:3px 8px;flex:none;}
.ct-field input,.ct-field select,.ct-field textarea{margin-top:10px;width:100%;border:1px solid var(--border-default);
  border-radius:8px;padding:15px 16px;font-size:14px;font-family:'Noto Sans JP',sans-serif;background:var(--bg-primary);color:var(--text-primary);
  box-sizing:border-box;}
.ct-field input:focus,.ct-field textarea:focus,.ct-field select:focus{outline:2px solid var(--accent-secondary);outline-offset:1px;border-color:transparent;}
.ct-field textarea{height:150px;resize:vertical;}
/* 姓・名の横並び。スマホでは縦に落とす */
.ct-field--split{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.ct-field--split > div{min-width:0;}
/* 問い合わせ種別。値は Salesforce の選択リストと一致させる必要があるため文言固定 */
.ct-radios{margin-top:12px;display:flex;flex-direction:column;gap:10px;}
.ct-radio{display:flex;align-items:flex-start;gap:10px;font-weight:400;cursor:pointer;
  border:1px solid var(--border-default);border-radius:8px;padding:14px 16px;transition:border-color .2s var(--e),background .2s var(--e);}
.ct-radio:hover{border-color:var(--accent-secondary);}
.ct-radio input{width:18px;height:18px;margin:1px 0 0;flex:none;}
.ct-radio span{font-size:14px;color:var(--text-primary);line-height:1.6;}
.ct-radio:has(input:checked){border-color:var(--accent-primary);background:var(--color-beige-50);}
.ct-agree{display:flex;align-items:center;gap:12px;justify-content:center;}
.ct-agree input{width:18px;height:18px;flex:none;}
.ct-agree span{font-size:13px;color:var(--text-body);}
.ct-agree a{color:var(--text-link);text-decoration:underline;}
.ct-submit{background:var(--accent-red);color:#fff;border:none;border-radius:8px;padding:19px;
  font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:16px;cursor:pointer;
  transition:filter .2s var(--e),transform .2s var(--e);}
.ct-submit:hover{filter:brightness(1.06);}
.ct-submit:active{transform:translateY(1px);}
.ct-submit:disabled,.dl-submit:disabled{opacity:.6;cursor:not-allowed;filter:none;transform:none;}
/* 入力チェックのエラー表示（各フォームの js/form.js が出力） */
.form-error-01{display:block;margin-top:6px;font-size:12.5px;line-height:1.6;color:var(--accent-red);}
.ct-agree + .form-error-01,.dl-privacy + .form-error-01{text-align:center;}
.ct-field input.is-invalid,.ct-field textarea.is-invalid,.dl-field input.is-invalid{border-color:var(--accent-red);}
/* 確認画面の読み取り専用表示 */
.ct-review{max-width:720px;margin:0 auto;background:var(--bg-primary);border-radius:24px;padding:clamp(32px,4vw,56px);}
.ct-review dl{display:grid;grid-template-columns:200px 1fr;gap:0;}
.ct-review dt,.ct-review dd{padding:18px 4px;border-bottom:1px solid var(--border-default);margin:0;}
.ct-review dt{font-size:13px;font-weight:700;color:var(--text-primary);}
.ct-review dd{font-size:14px;color:var(--text-body);white-space:pre-wrap;word-break:break-word;}
.ct-actions{display:flex;gap:14px;justify-content:center;margin-top:28px;flex-wrap:wrap;}
.ct-back{background:none;border:1px solid var(--border-default);border-radius:8px;padding:19px 28px;
  font-family:'Noto Sans JP',sans-serif;font-weight:700;font-size:15px;color:var(--text-secondary);cursor:pointer;}
.ct-back:hover{border-color:var(--accent-primary);color:var(--text-primary);}

.ct-other{padding:clamp(56px,7vw,88px) clamp(20px,4vw,48px);}
.ct-other .wrap{max-width:1240px;margin:0 auto;}
.ct-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px;}
.ct-card2{background:var(--bg-primary);border-radius:16px;padding:32px 30px;}
.ct-card2 h3{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:18px;color:var(--text-primary);}
.ct-card2 p{margin-top:12px;font-size:13px;color:var(--text-body);line-height:1.95;}
.ct-card2 a.more{margin-top:12px;display:inline-block;font-size:13px;font-weight:500;color:var(--amber-deep);}
@media(max-width:840px){
  .ct-grid{grid-template-columns:1fr;}
  .ct-field--split{grid-template-columns:1fr;}
  .ct-review dl{grid-template-columns:1fr;}
  .ct-review dt{padding-bottom:0;border-bottom:none;}
  .ct-review dd{padding-top:6px;}
}

/* ===== 資料ダウンロード（/download/ と資料詳細で共有）=====
   /download/ は WordPress の外の素のPHPから読まれるため、
   固定ページ側の <style> では届かない。ここに集約する。 */
.dl-main{padding:clamp(40px,5vw,56px) clamp(20px,4vw,48px) clamp(64px,8vw,104px);}
/* Figma 734:3547 実測（1440幅キャンバス）:
   コンテンツ 1064 / 左カラム 540 / 右カラム 424 / 間 100 */
.dl-main .wrap{max-width:1064px;margin:0 auto;display:grid;
  grid-template-columns:1fr 424px;gap:100px;align-items:start;}
@media(max-width:960px){.dl-main .wrap{grid-template-columns:1fr;gap:48px;}}

/* 表紙。角丸はデザイン全体に合わせて8px。
   2026-09-01: 以前は aspect-ratio:540/380 を枠に固定し object-fit:cover で敷いていたが、
   実際の表紙画像は資料ごとに縦横比が違うため、枠より縦が短い画像だと下に背景色の帯が残り、
   縦が長い画像は上下が切れていた（クライアント指摘）。
   枠の高さを画像そのものに合わせる方式に変更し、比率のズレが出ないようにする。
   ※ forms/download/index.php 側の <style> にも同じ指定があるが、
     このファイルの方が後に読み込まれるためここが最終的な見た目を決める。 */
.dl-thumb{border-radius:8px;overflow:hidden;}
.dl-thumb img{width:100%;height:auto;display:block;}
.dl-title{margin-top:26px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:clamp(20px,2vw,24px);color:var(--text-primary);line-height:1.6;}
.dl-desc{margin-top:16px;font-size:14px;color:var(--text-body);line-height:1.95;}
.dl-desc p+p{margin-top:14px;}

/* 「資料の内容」。白カード＋番号付きリスト */
.dl-contents{margin-top:28px;background:#fff;border-radius:8px;padding:28px 30px;
  box-shadow:0 8px 32px -4px rgba(217,140,15,.06);}
.dl-contents h4{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:15px;color:var(--text-primary);}
.dl-contents ol{margin:14px 0 0;padding-left:1.4em;}
.dl-contents li{font-size:13.5px;color:var(--text-body);line-height:2.05;}

/* フォーム。デザイン上カード背景は無く、入力欄だけが色を持つ */
.dl-form{background:none;padding:0;}
.dl-form h2{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;font-size:20px;color:var(--text-primary);}
.dl-form .sub{margin-top:10px;font-size:12.5px;color:var(--text-body);line-height:1.85;}
.dl-field{margin-top:16px;}
.dl-field .label-row{display:flex;align-items:center;gap:8px;}
.dl-field label{font-size:12.5px;font-weight:500;color:var(--text-primary);}
.dl-field .req{font-size:9.5px;font-weight:500;color:#fff;background:var(--accent-red);border-radius:999px;padding:3px 9px;}
.dl-field input{margin-top:8px;width:100%;height:46px;border:1px solid var(--border-default);border-radius:8px;
  padding:0 14px;font-size:14px;font-family:'Noto Sans JP',sans-serif;
  background:var(--bg-primary);color:var(--text-primary);box-sizing:border-box;}
.dl-field input:focus{outline:2px solid var(--accent-secondary);outline-offset:1px;border-color:transparent;}
.dl-privacy{margin-top:20px;display:flex;align-items:center;gap:10px;}
.dl-privacy input{width:16px;height:16px;flex:none;}
.dl-privacy span{font-size:12.5px;color:var(--text-body);}
.dl-privacy a{color:var(--text-link);text-decoration:underline;}
.dl-submit{margin-top:22px;width:100%;justify-content:center;height:64px;font-size:16px;}
.dl-note{margin-top:16px;padding-left:1.1em;list-style:none;}
.dl-note li{position:relative;font-size:11.5px;color:var(--text-caption);line-height:1.8;}
.dl-note li+li{margin-top:5px;}
.dl-note li::before{content:"※";position:absolute;left:-1.1em;}
.dl-note a{color:var(--text-link);text-decoration:underline;}


/* PCのみ改行する br。モバイルでは詰まって読みにくくなるため無効にする */
.pc-br{display:inline;}
@media(max-width:840px){ .pc-br{display:none;} }

/* タッチ端末ではホバー色が「タップ後に張り付く」ため、ボタンの押し心地が不安定に見える
   （資料DLの送信ボタンで指摘。比較ツールのコメント 2026-09-16）。
   ホバーできない環境ではホバー色と :active の縮みを効かせない */
@media (hover: none){
  .btn-red:hover{background:var(--accent-red);}
  .btn-am:hover{background:var(--accent-primary);}
  .btn-am-line:hover,.btn-white:hover{background:#fff;}
  .btn-yellow:hover{background:var(--yellow);}
  .btn.has-arrow:hover::after{transform:none;}
  .btn:active{transform:none;}
}

/* ===== ピックアップのカルーセル（TOP・実績一覧で共用。2026-09-18 に front-page.php から移動）
   scroll-snap で横に並べ、JSは矢印・ドットの同期だけ。ライブラリは使わない。
   1件だけのときは .is-multi が付かず、ただの1枚カードとして振る舞う
   ----------------------------------------------------------------
   2026-09-29: 見出しの行をコメントの終わりで閉じてしまっていたため、続く2行が
   CSSとして読まれ、直後の .case-pick のルールごと無効になっていた。
   リード文とカードの間のアキが消えていた原因（Saki指摘）
   ===== */
.case-pick{position:relative;margin-top:clamp(36px,3.4vw,56px);}
.case-pick .case-main{margin-top:0;}
.cp-track{display:flex;gap:0;}
.cp-track > .case-main{flex:0 0 100%;min-width:0;}
.is-multi .cp-track{overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;gap:clamp(16px,2vw,24px);
  /* 影が切れないよう上下に逃がす */
  padding:8px 0 28px;margin:-8px 0 -28px;}
.is-multi .cp-track::-webkit-scrollbar{display:none;}
.is-multi .cp-track > .case-main{scroll-snap-align:start;scroll-snap-stop:always;}
.cp-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px;}
.cp-arrow{width:44px;height:44px;border-radius:50%;border:1px solid rgba(74,53,39,.18);
  background:#fff;color:var(--text-primary);font-size:16px;cursor:pointer;
  transition:background .25s var(--e),border-color .25s var(--e),opacity .25s var(--e);}
.cp-arrow:hover{background:var(--color-yellow-50);border-color:var(--accent-primary);}
.cp-arrow:disabled{opacity:.3;cursor:default;}
.cp-dots{display:flex;gap:10px;}
.cp-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(74,53,39,.22);transition:background .25s var(--e),transform .25s var(--e);}
.cp-dots button[aria-current="true"]{background:var(--accent-primary);transform:scale(1.25);}
/* 実績一覧の PICKUP カードをスライドにする場合 */
.cp-track > .pickup{flex:0 0 100%;min-width:0;margin-top:0;}
.is-multi .cp-track > .pickup{scroll-snap-align:start;scroll-snap-stop:always;}

/* ===== PICKUP カード（実績一覧・TOP で共用）=====
   白カード1枚（元のデザイン）に、クライアントが掲載許可を取った内容を載せる:
   ノート画像の貼り合わせ＋クレジット／「」キャッチ／そんなノートを〜さまと作りました／大きな部数／本文／ボタン。
   許可を取ったのは内容であって、黄色の2分割レイアウトまでは再現しない（2026-09-18 判断）。 */
.pickup{display:grid;grid-template-columns:6fr 5fr;gap:clamp(28px,4vw,56px);align-items:center;
  background:#fff;border-radius:24px;box-shadow:var(--shadow-card);overflow:hidden;
  padding:clamp(24px,3vw,40px);}
/* 画像は枠に入れず、透過の貼り合わせ画像（影つき）をそのまま置く（2026-09-18: 枠は不要という判断） */
.pickup .ph{position:relative;padding:8px 0 26px;}
.pickup .ph img{width:100%;height:auto;display:block;}
.pickup .credit{position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:'Outfit',sans-serif;font-size:11px;color:var(--text-caption);letter-spacing:.02em;}
.pickup .pb{display:flex;flex-direction:column;}
.pickup .eyebrow{font-family:'Outfit',sans-serif;font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--yellow-500);}
/* キャッチは「」を付けず、そのぶん大きく（2026-09-18） */
.pickup .catch{margin-top:12px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:clamp(21px,2vw,28px);line-height:1.45;color:var(--text-primary);}
.pickup .lead{margin-top:10px;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;
  font-size:clamp(14.5px,1.2vw,16px);line-height:1.7;color:var(--text-secondary);}
.pickup .num{margin-top:18px;font-family:'Outfit','Zen Kaku Gothic New',sans-serif;font-weight:700;
  font-size:clamp(32px,3.2vw,44px);line-height:1;color:var(--amber-deep);}
.pickup .num i{font-style:normal;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:.5em;color:var(--text-primary);margin-left:2px;}
.pickup .numlab{margin-top:4px;font-size:12px;color:var(--text-body);}
.pickup .desc{margin-top:16px;font-size:clamp(13.5px,1.1vw,15px);color:var(--text-body);line-height:1.95;}
.pickup .more{margin-top:22px;}
/* 「この事例を詳しく見る」ボタンは一旦非表示（TOP・実績一覧のピックアップ共通、2026-09-29 和田さん指示）。
   戻すときはこの1行を消すだけ。HTML 側（front-page.php / archive-works.php）は残してある */
.pickup .more{display:none;}
@media(max-width:840px){.pickup{grid-template-columns:1fr;} .pickup .ph{aspect-ratio:4/3;}}

/* ===== 記事内CTA（コラム・実績の本文に差し込むブロックパターン）=====
   2026-09-30: 以前は記事ごとに画像を作って貼り、リンクを張っていた（渡辺さん）。
   同じことをブロックで置けるようにしたもの。パターンは「スフレ」カテゴリ。
   編集画面でも同じ見た目になるよう、テーマ本体のCSSに置いている */
.cd-inline-cta{margin-top:clamp(40px,5vw,56px);padding:clamp(32px,4.4vw,44px) clamp(20px,3vw,32px);
  border-radius:20px;background:var(--beige-warm,#f8f6e5);text-align:center;}
.cd-inline-cta h2{margin-top:0;padding-left:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:clamp(19px,1.8vw,24px);color:var(--text-primary);line-height:1.5;}
.cd-inline-cta h2::before{display:none;}
:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta p.cd-inline-cta-h{margin-top:0;font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
  font-size:clamp(19px,1.8vw,24px);color:var(--text-primary);line-height:1.5;}
:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta p{text-align:center;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance;}
/* 資料系は冊子を左に置き、上だけカードの外へ出す（前の記事内CTAと同じ入れ方。Saki指摘 2026-09-30） */
.cd-inline-cta.has-ph{--ph-pad:clamp(26px,3vw,34px);--ph-rise:clamp(34px,4.2vw,52px);--ph-inset:clamp(8px,1vw,12px);
  display:grid;align-items:center;text-align:left;column-gap:clamp(20px,3vw,40px);
  grid-template-columns:clamp(150px,15vw,180px) minmax(0,1fr);grid-template-areas:"ph h" "ph l" "ph go";
  padding:var(--ph-pad) clamp(24px,3.4vw,44px);margin-top:calc(clamp(40px,5vw,56px) + var(--ph-rise));}
.cd-inline-cta.has-ph .cd-inline-cta-ph{grid-area:ph;position:relative;align-self:stretch;}
:is(.cd-body,.editor-styles-wrapper,body) .cd-inline-cta.has-ph .cd-inline-cta-ph img{position:absolute;left:0;
  bottom:calc(var(--ph-inset) - var(--ph-pad));height:calc(100% + var(--ph-pad) * 2 + var(--ph-rise) - var(--ph-inset));
  width:auto;max-width:100%;margin:0;border-radius:0;box-shadow:none;object-fit:contain;object-position:left bottom;}
:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p{text-align:left;}
:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p.cd-inline-cta-h{grid-area:h;align-self:end;font-size:clamp(17px,1.6vw,21px);}
@media(min-width:601px){:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p{text-wrap:wrap;}}
:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p:not(.cd-inline-cta-h){grid-area:l;align-self:start;margin-top:6px;}
.cd-inline-cta.has-ph .btn{grid-area:go;justify-self:start;margin-top:16px;}
@media(max-width:1024px){
  .cd-inline-cta.has-ph{grid-template-columns:minmax(0,1fr) 190px minmax(0,380px) minmax(0,1fr);
    grid-template-areas:". ph h ." ". ph l ." ". ph go .";column-gap:0;}
  .cd-inline-cta.has-ph .cd-inline-cta-ph{margin-right:20px;}
  .cd-inline-cta.has-ph .btn{justify-self:start;margin-top:14px;}
}
@media(max-width:600px){
  .cd-inline-cta.has-ph{--ph-rise:26px;grid-template-columns:116px minmax(0,1fr);
    grid-template-areas:"ph h" "ph l" "go go";padding:22px 18px;}
  /* スマホは冊子の横が狭く、リードまで入れると細切れに折り返すため、キャッチだけにする */
  :is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p:not(.cd-inline-cta-h){display:none;}
  :is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p.cd-inline-cta-h{align-self:center;}
  .cd-inline-cta.has-ph{grid-template-areas:"ph h" "go go";min-height:0;}
  .cd-inline-cta.has-ph .cd-inline-cta-ph{margin-right:12px;}
  :is(.cd-body,.editor-styles-wrapper,body) .cd-inline-cta.has-ph .cd-inline-cta-ph img{top:auto;bottom:0;height:calc(100% + var(--ph-pad) + var(--ph-rise));width:auto;max-width:none;object-position:left bottom;}
  :is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p.cd-inline-cta-h{align-self:start;}
  :is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p.cd-inline-cta-h{font-size:16px;}
  :is(.cd-body,.editor-styles-wrapper) .cd-inline-cta.has-ph p:not(.cd-inline-cta-h){font-size:12.5px;line-height:1.7;}
  .cd-inline-cta.has-ph .btn{justify-self:stretch;margin-top:18px;}
}
:is(.cd-body,.editor-styles-wrapper) .cd-inline-cta a.btn{text-decoration:none;color:var(--accent-primary);}
.cd-inline-cta p{margin-top:12px;font-size:clamp(13.5px,1.1vw,15px);color:var(--text-body);line-height:1.9;}
.cd-inline-cta .btn{margin-top:24px;}
.cd-inline-cta .wp-block-buttons{margin-top:24px;justify-content:center;}
.cd-inline-cta .wp-block-button__link{
  border-radius:var(--radius-sm);min-width:200px;padding:15px 22px;
  font-size:15px;font-weight:700;font-family:inherit;
  background:#fff;border:1px solid var(--accent-primary);color:var(--accent-primary);
  text-decoration:none;}
.cd-inline-cta .wp-block-button__link:hover{background:var(--color-yellow-50);}

/* Hallmark · component: inline-cta-banner · genre: editorial · theme: sfre tokens
 * states: default · hover · focus · active   (リンクのため disabled / loading / error / success は無し)
 * 2026-09-30: 水色は外し、サイトのベージュと黄色で。行動はサイト共通のボタン（.btn）。
 * 画像は資料系だけ。事例・お問い合わせは文言とボタンの2列で組む
 */
/* ===== 記事内CTA バナー（ショートコード sfre_cta）===== */
.dl-cta{
  --dl-rise:clamp(34px,4.2vw,56px);     /* 冊子がカードの上辺から出る量 */
  --dl-inset:clamp(8px,1vw,12px);       /* 冊子の下端（影）とカード下辺の間。影は枠の中に収める */
  --dl-marker:rgba(255,228,92,.65);     /* 事例本文のマーカーと同じ色（赤みを抜いた黄） */
  position:relative;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) auto;
  column-gap:clamp(20px,3vw,40px);row-gap:18px;
  margin:clamp(44px,5.5vw,64px) 0 clamp(8px,1vw,12px);
  padding:clamp(24px,2.8vw,32px) clamp(24px,3.4vw,44px);
  border-radius:10px;background:var(--color-beige-warm);
  transition:transform .4s var(--e),box-shadow .4s var(--e);}
.dl-cta.has-ph{grid-template-columns:clamp(120px,19%,160px) minmax(0,1fr) auto;
  margin-top:calc(clamp(44px,5.5vw,64px) + var(--dl-rise));padding-left:clamp(16px,2.2vw,28px);}
/* 本文のリンク指定（.cd-body a の下線・リンク色）がカード全体に効かないようにする */
:is(.cd-body, .editor-styles-wrapper, body) a.dl-cta,
:is(.cd-body, .editor-styles-wrapper, body) a.dl-cta *{text-decoration:none;}
:is(.cd-body, .editor-styles-wrapper, body) a.dl-cta{color:var(--text-primary);}
.dl-cta:hover{transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(74,53,39,.45);}
.dl-cta:active{transform:translateY(0);}
.dl-cta:focus-visible{outline:2px solid var(--accent-primary);outline-offset:4px;}

/* 冊子（画像自体に傾きと影がある）。カードの上辺からはみ出させる */
.dl-cta-ph{position:static;display:block;align-self:stretch;}
/* 冊子は「高さ」で大きさを決める（カードの高さ＋はみ出す量）。
   幅で決めると縦横比の都合で上まで届かず、枠の中に収まってしまう（Saki指摘 2026-09-30） */
/* 基準はカード自身（.dl-cta の position:relative）。列の中を基準にすると、
   カードの上下の余白ぶん高さが足りず、はみ出さない */
:is(.cd-body, .editor-styles-wrapper, body) .dl-cta-ph img{
  position:absolute;left:clamp(12px,1.8vw,24px);bottom:var(--dl-inset);
  width:auto;max-width:none;height:calc(100% + var(--dl-rise) - var(--dl-inset));
  margin:0;border-radius:0;}

.dl-cta-b{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0;}
/* 折り返すときは行の長さをそろえる（「〜資 / 料」のように1文字だけ落ちるのを防ぐ）。
   日本語は対応ブラウザでは文節で折り返す */
.dl-cta-main,.dl-cta-sub{text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere;line-break:strict;}
/* タブレット以上は1行目を折り返さない（Saki指摘 2026-09-30）。スマホは折り返しを許す */
@media(min-width:601px){ .dl-cta-main{white-space:nowrap;} }
/* 1行目。文字より少し長い黄色い線を1本だけ引く（本番のCTA画像の意匠） */
/* 外側は行の長さをそろえるための箱、内側の span にマーカーを引く。
   外側に引くと箱全体の下 4 割になり、2行のとき1行目にマーカーが乗らない */
.dl-cta-main{display:block;
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;letter-spacing:.01em;
  font-size:clamp(16px,1.6vw,20px);line-height:1.55;color:var(--text-primary);}
.dl-cta-main > span{padding:0 .12em;margin-left:-.12em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(transparent 58%, var(--dl-marker) 58%);}
/* 2行目は小さく・細く・淡く。1行目との差でメリハリを出す */
.dl-cta-sub{display:block;font-size:clamp(12.5px,1vw,13.5px);font-weight:500;
  line-height:1.8;color:var(--text-muted);letter-spacing:.02em;}

/* ボタンはサイト共通の .btn-am / .btn-red をそのまま使う。
   カードのどこに乗っても押せるので、カードのホバーでボタンも反応させる */
.dl-cta-go{white-space:nowrap;min-width:0;padding:16px 18px 16px 22px;font-size:15px;
  box-shadow:0 10px 22px -12px rgba(184,119,13,.55);}
.dl-cta-go.btn-red{box-shadow:0 10px 22px -12px rgba(214,77,42,.55);}
.dl-cta:hover .dl-cta-go.btn-am{background:var(--orange-600);}
.dl-cta:hover .dl-cta-go.btn-red{background:#d64d2a;}
.dl-cta:hover .dl-cta-go.has-arrow::after{transform:translateX(3px);}

/* ---- タブレット（〜1024px）: 冊子のカードはボタンを文言の下へ。冊子は固定の高さで上に出す ---- */
@media(max-width:1024px){
  /* 冊子＋文言の組をカード中央へ（左右の余白列を同じ幅に）。Saki指摘 2026-09-30 */
  .dl-cta.has-ph{--dl-pad:clamp(24px,2.8vw,32px);
    grid-template-columns:minmax(0,1fr) 170px auto minmax(0,1fr);
    grid-template-areas:". ph b ." ". ph go .";row-gap:14px;}
  .dl-cta.has-ph .dl-cta-ph{grid-area:ph;position:relative;}
  :is(.cd-body, .editor-styles-wrapper, body) .dl-cta.has-ph .dl-cta-ph img{
    left:0;bottom:calc(var(--dl-inset) - var(--dl-pad));
    height:calc(100% + var(--dl-pad) * 2 + var(--dl-rise) - var(--dl-inset));}
  .dl-cta.has-ph .dl-cta-b{grid-area:b;align-self:end;}
  .dl-cta.has-ph .dl-cta-go{grid-area:go;justify-self:start;align-self:start;}
}
/* ---- スマホ（〜600px）----
   冊子と文言は横に並べたまま、その組をカードの中央に置く。ボタンは下に横いっぱい（Saki指摘 2026-09-30）。
   列を「余白 / 冊子 / 文言 / 余白」にして、左右の余白を同じ幅にすることで中央にする */
@media(max-width:600px){
  .dl-cta{--dl-rise:30px;grid-template-columns:minmax(0,1fr);row-gap:16px;
    padding:22px 18px 22px;border-radius:10px;text-align:center;}
  .dl-cta .dl-cta-b{align-items:center;}
  .dl-cta.has-ph{grid-template-columns:minmax(0,1fr) 94px auto minmax(0,1fr);
    grid-template-areas:". ph b ." "go go go go";column-gap:0;
    margin-top:calc(clamp(44px,5.5vw,64px) + var(--dl-rise));text-align:left;}
  .dl-cta.has-ph .dl-cta-ph{grid-area:ph;position:relative;align-self:stretch;margin:0 12px 0 0;}
  /* 冊子は下端を文言の下端にそろえ、上だけカードの外へ出す（下に隙間を作らない） */
  :is(.cd-body, .editor-styles-wrapper, body) .dl-cta.has-ph .dl-cta-ph img{
    position:absolute;left:0;top:auto;bottom:0;height:calc(100% + 22px + var(--dl-rise));width:auto;max-width:100%;object-fit:contain;object-position:left bottom;}
  .dl-cta.has-ph .dl-cta-b{grid-area:b;align-items:flex-start;align-self:center;min-height:82px;
    justify-content:center;max-width:220px;}
  .dl-cta-main{font-size:16.5px;}
  .dl-cta-sub{font-size:12.5px;}
  .dl-cta-go,.dl-cta.has-ph .dl-cta-go{grid-area:go;width:100%;justify-self:stretch;justify-content:center;
    padding:15px 18px;font-size:15px;}
  .dl-cta:not(.has-ph) .dl-cta-go{grid-area:auto;}
}
@media (prefers-reduced-motion: reduce){
  .dl-cta{transition:none;}
  .dl-cta:hover{transform:none;}
  .dl-cta:hover .dl-cta-go.has-arrow::after{transform:none;}
}

/* 旧サイトのマーカー（本文の <span class="marker-01">）。旧テーマのCSSが無く色が付いていなかったので、
   記事内CTA・事例本文と同じマーカーにそろえる（2026-09-30） */
.cd-body .marker-01{padding:0 .08em;font-weight:700;
  background-image:linear-gradient(transparent 58%, rgba(255,228,92,.65) 58%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;}