/* || TOKENS ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   JOURNAL の値。出所は 02_journal_語彙_2026-09-18.md §3（Accepted）。
   Schoo のカテゴリ面（Nuxt 世代）の「値」ではなく「使い分けの体系」を採り、JOURNAL の色に当てたもの。
   ここに無い値を書かない。要るときは語彙の文書に足してからここに書く。 */
/* JOURNAL の色は PERSC のブランドの青（2026-09-25 りょう「A」）。persc.jp の --brand（--accent-blue #205CB6・--accent-blue-2 #407FDD）と同じ値。薄い青の面（persc.jp の #E8F4FF）は使わない（りょう「薄い青やめたいね」）。
   前は PERSC の旧い色の青緑（#1a93a1 系）で、3DCGコースの緑（#178277）とほぼ同じ色だった。学習サービス 24 サイトの調べでも青・紺がいちばん多い（サイトマップ §16）。
   面・線・札（--c-band・--c-frame・--c-frame-dark）は、Schoo の secondary の 3 段（ベージュ）と同じ明るさの灰色（2026-09-25 りょう「徹底的に合わせないと」「薄い青やめたいね」。前は同じ明るさ・鮮やかさの青みの色だった）。
   使いどころも Schoo に合わせる: 濃い青（primary）はボタン・札・リンク・矢印・枠だけのボタン・カテゴリーの見出しだけで、広い面には使わない（広い面は --c-band） */
:root{
  /* ========== 色（語彙 §3 A〜I） ========== */
  --c-link:#205CB6;        /* A 押せるもの・現在地。Schoo の primary の役割 */
  --c-deco:#205CB6;        /* B 罫線・装飾。Schoo の primary-light の役割。2026-09-25 りょう「濃い青にして」で --c-link と同じ濃い青にした（前は #407FDD） */
  --c-band:#f2f2f2;        /* C 帯・広い面の地。Schoo の secondary-light（#f5f2ee）と同じ明るさの灰色 */
  --c-frame:#e3e3e3;       /* C 枠線・区切り。Schoo の secondary-default（#eae2d7）と同じ明るさの灰色 */
  --c-frame-dark:#b5b5b5;  /* C 札の地（白い文字）。Schoo の secondary-dark（#c7b19b）と同じ明るさの灰色 */
  --ink:rgb(30,30,30);     /* D 文字 */
  --muted:rgba(30,30,30,.65); /* E 補助の文字 */
  --weak:#ababab;          /* F 弱い文字（件数） */
  --line:#d6d6d6;          /* G 線 */
  --panel:#f4f4f4;         /* H 面（hover の地） */
  --white:#fff;            /* I 地 */

  /* ========== 角丸（語彙 §3 J） ========== */
  --r-img:15px;    /* カードの画像 */
  --r-pill:40px;   /* ピル */
  --r-frame:16px;  /* 枠 */
  --r-btn:8px;     /* ボタン */
  --r-win:8px;     /* 窓 */
  --r-badge:4px;   /* バッジ */
  --r-round:100px; /* ログイン・会員登録 */
  --r-banner:6px;  /* フッターのバナー（対応表 §1-5 の「角丸 md」。語彙 §1-2 の md＝6） */

  /* ========== 影（語彙 §3 K）。2 種だけ ========== */
  --sh-header:0 4px 8px 0 rgba(30,30,30,.05);
  --sh-float:0 2px 8px 1px rgba(30,30,30,.1);

  /* ========== 文字の段（語彙 §3 L）。この 7 段だけ ========== */
  --fs-mini:10px;  /* バッジ */
  --fs-note:12px;  /* 説明・メタ・子項目・フッターのリンク */
  --fs-ui:14px;    /* 件数・ピル・ヘッダーのナビ・パンくず */
  --fs-text:16px;  /* カードの題 */
  --fs-h3:18px;    /* 節の見出し */
  --fs-h2:24px;    /* 本体の H2・フッターの列見出し */
  --fs-band:36px;  /* 帯の題（PC） */
  --lh-crumb:21px; /* パンくずの行送り（語彙 §3-1「パンくずは 14px／行送り 21」） */

  /* ========== 余白（語彙 §3-1）。段は 4〜20、21 以上は継ぎ目の名前で持つ ========== */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px;
  --gap-band-top:27px;      /* 帯の上 → パンくず */
  --gap-crumb-title:18px;   /* パンくず → 見出し */
  --gap-title-bottom:53px;  /* 見出し → 帯の下端 */
  --gap-band-body:50px;     /* 帯 → レール・本体の上端 */
  --gap-footer-top:50px;    /* フッターの上 */
  --gap-footer-in:40px;     /* フッターの内側 */
  --gap-block:40px;         /* ブロック間 */
  --pad-box:24px;           /* 囲み・大カードの内側 */
  --gap-para:24px;          /* 段落間・記事の終わりの箱の間（語彙 §3-1「段落間 24」） */
  --gap-col:48px;           /* 列の間（2 列の本体・フッターの列） */
  --gap-grid-next:48px;     /* 格子 → 次（ページ送り） */
  --gap-h2:80px;            /* 記事の H2 の上（SP 48。PC の 80／40 はスマホでは空きすぎる） */
  --gap-h3:40px;            /* 記事の H3 の上（SP 24） */
  --gap-desc-count:42px;    /* 説明 → 件数 */
  /* トップ（J_TOP）の値。語彙 §3-1「トップ（J_TOP）の値」（参照の旧トップの実測） */
  --tp-wrap:1100px;         /* トップの器（本体の幅） */
  --tp-wrap-box:848px;      /* 無料の囲み */
  --tp-sec:60px;            /* タブの列から下の節の間 */
  --tp-fv-top:30px;         /* スライドの上 */
  --tp-feat-gap:18px;       /* 囲みの札の間 */
  --tp-lead-gap-sp:32px;    /* スマホの丸ボタンの間（独自。吹き出しが上に 19 はみ出す分） */

  /* ========== 紹介ページの型（LP）の値（語彙 §3-1「紹介ページの型（LP）の値」・2026-09-27） ========== */
  --fs-display:64px;        /* FV の見出し・大きい数字（SP 36） */
  --lp-edge:80px;           /* 節の左右（1280 以下 40・SP 16） */
  --lp-sec:80px;            /* 節の上下（SP 48） */
  --lp-head:40px;           /* 見出しの塊 → 中身（SP 32） */
  --lp-box:40px;            /* 大きい箱の内側（SP 24） */
  --lp-block:64px;          /* 箱と箱の間（SP 40） */
  --r-lg:24px;              /* 大きい箱・縦のカード */
  --r-xl:32px;              /* 特徴の箱・白い大きい箱 */
  --c-dark:#2b2b2b;         /* 暗い面（下） */
  --c-dark-2:#4a4a4a;       /* 暗い面（上） */
  --on-dark-muted:rgba(255,255,255,.75); /* 暗い面の上の弱い文字 */
  --c-veil:rgba(255,255,255,.85);        /* 写真の上の白いぼかし */
  --c-shade:rgba(0,0,0,.38);             /* 写真の上の暗いぼかし（文字の表紙と同じ） */

  /* ========== 器と境目（語彙 §3 N〜Q） ========== */
  --wrap:1600px;   /* N 器 */
  --rail:clamp(240px, 26vw, 376px);   /* O 左の列。最大 2 カラム（2026-09-23 りょう決定）で目次とバナーも左に入れるので広げた。
                                        下限 240＝もとの左レール（Schoo と同じ）、上限 376＝もとの右の列。間は画面の幅の 26%（1024 で約 266・1440 で約 374）。
                                        固定の 376 にしないのは、1024 でカードの格子が 1 列に落ち、本文も 520 まで細くなるため */
  --edge:16px;     /* P PC の左右の余白（PC も 16） */
  /* Q 境目は 897px。min-width:897px が PC。CSS 変数はメディアクエリに書けないので、下の @media に直に書く */

  /* ========== ヘッダー（型の骨格 型 22・対応表 §1-1） ========== */
  --hd-row1:66px;  /* 1 段目。下罫線 1px を含む */
  --hd-row2:44px;  /* 2 段目 */
  --hd-sp:60px;    /* スマホ。参照（Nuxt 世代）の実測 */
  --logo-h:34.74px;/* ロゴの高さ。バー 66 の 52.6%（対応表 §4 #1「ヘッダーバーとの比で決める」） */
}@media (max-width:1280px){ :root{ --lp-edge:40px } }
@media (max-width:896px){ :root{ --gap-h2:48px; --gap-h3:24px; --fs-display:36px; --lp-edge:var(--edge); --lp-sec:48px; --lp-head:32px; --lp-box:24px; --lp-block:40px } }

/* || GENERAL |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   要素そのものの既定 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);
     font-family:Roboto,"Noto Sans JP",sans-serif;   /* 書体は Schoo の新しい作りの画面と同じ Roboto（英数字）＋ Noto Sans JP（日本語）。2026-09-25 りょう「フォントですが schoo と同じにして」（その前は BIZ UDPゴシック） */
     font-size:var(--fs-ui);line-height:1.5;
     padding-top:calc(var(--hd-row1) + var(--hd-row2))}   /* ヘッダーは fixed。本体がヘッダーの下に隠れないようにする */
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}   /* hidden の指定を、display を持つ部品（ボタン・囲み）でも効かせる。無いと会員の画面の出し分けが効かなかった（2026-09-24） */
img{max-width:100%;display:block}
button,input{font:inherit;color:inherit}
button{border:0;cursor:pointer}   /* ブラウザ既定の枠を消す。付けたままだと塗りのボタン（ログイン・同意して登録する）に濃い枠が出た。枠が要る部品は部品の側で持つ */
/* アイコン（Material Symbols Rounded）。Schoo と同じ書体。方向はアイコンで示す（型の骨格 §3-1 の癖 5） */
.ms{font-family:"Material Symbols Rounded";font-weight:normal;font-style:normal;line-height:1;
    letter-spacing:normal;text-transform:none;white-space:nowrap;direction:ltr;
    -webkit-font-feature-settings:"liga";font-feature-settings:"liga";-webkit-font-smoothing:antialiased;
    display:inline-block;flex:none;width:1em;overflow:hidden}   /* 幅は 1 文字分（書体が読み込まれる前に名前が文字のまま出てページが横に広がった・2026-09-27） */
@media (max-width:896px){
  body{padding-top:var(--hd-sp)}
}

/* || SITEWIDE ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
   全ページに出る部品（型の骨格の型番号） */

/* ========== グレーの箱（画像・図の置き場） ========== */
.gbox{display:flex;align-items:center;justify-content:center;background:var(--c-frame);color:var(--muted);font-size:var(--fs-note)}
/* 文字の表紙（Cover・2026-09-25 りょう「A」と見本）。画像ができるまでのつなぎ。ブランドの色の面に、太い見出しの書体で題を大きく。文字は枠の幅に合わせる */
.cover{display:block;container-type:inline-size;aspect-ratio:16/9;background:var(--c-band);overflow:hidden}   /* 広い面なので primary は使わない（Schoo の使いどころ） */
.cover__in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3cqi;height:100%;padding:6cqi 8cqi;text-align:center}
.cover__group{font-size:clamp(8px,3.6cqi,15px);font-weight:700;letter-spacing:.08em;color:var(--c-link)}   /* まとまりの名前は Schoo のカテゴリーの見出しと同じく primary の文字 */
.cover__ttl{font-weight:700;font-size:clamp(10px,8.4cqi,44px);line-height:1.3;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-wrap:balance;word-break:keep-all;overflow-wrap:anywhere}   /* 題は src/lib/wbr.ts の <wbr> でだけ折る（D8-1。2026-09-28。auto-phrase は iPhone で効かなかった）
.cover--s .cover__in{padding:4cqi}
.cover--s .cover__ttl{font-size:clamp(9px,15cqi,18px);-webkit-line-clamp:2}
.cover--l{max-width:600px;margin:0 auto}
@container (max-width:199px){ .cover__ttl--sub{display:none} .cover--m .cover__ttl{font-size:clamp(9px,12cqi,18px)} .cover__group{font-weight:700;font-size:clamp(9px,12cqi,18px);letter-spacing:0;color:var(--c-link)} }
/* 写真の表紙（Cover の bg・2026-09-25 りょう「白文字で」「大きな文字が画像の中央になるように」）。写真を少し暗くし、白い太い文字を載せる。
   題は枠のちょうど中央（3 段の grid の真ん中の段）、まとまりの名前は題の上 */
.cover--photo{position:relative;background-color:var(--c-dark-2);background-size:cover;background-position:center}
.cover--photo::before{content:"";position:absolute;inset:0;background:var(--c-shade)}
.cover--photo .cover__in{position:relative;display:grid;grid-template-rows:1fr auto 1fr;justify-items:center;padding:0 7cqi}
.cover--photo .cover__group{grid-row:1;align-self:end;margin-bottom:2.5cqi;color:var(--c-veil)}
.cover--photo .cover__ttl{grid-row:2;font-weight:900;color:var(--white);text-shadow:0 2px 12px rgba(0,0,0,.45)}
@container (max-width:199px){ .cover--photo .cover__group{grid-row:2;align-self:center;margin:0;color:var(--white);font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.45)} .cover--photo .cover__ttl{color:var(--white)} }

/* ========== 型 1. 器 ========== */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--edge)}

/* ========== 型 20. 角ボタン ==========
   ヘッダーの機能ボタン（コースを見る）。地はアクセントの塗り（対応表 §2-1。Schoo のグラデは採らない） */
.btn-sq{display:inline-flex;align-items:center;gap:var(--sp-4);width:140px;height:37px;padding-inline:var(--sp-16);
        border-radius:var(--r-btn);background:var(--c-link);color:var(--white);font-size:var(--fs-ui);font-weight:700;white-space:nowrap}
.btn-sq:hover{opacity:.7}   /* 画像・塗りは透かす（癖 3） */

/* ========== 型 19. 丸ボタン ==========
   枠線版（ログイン）と塗り版（会員登録）。高さはどちらも 30.5（対応表 §1-1） */
.btn-round{display:inline-flex;align-items:center;justify-content:center;height:30.5px;border-radius:var(--r-round);
           font-size:var(--fs-ui);white-space:nowrap}
.btn-round--line{padding-inline:var(--sp-16);border:2px solid var(--c-link);background:var(--white);color:var(--c-link)}
.btn-round--fill{width:120px;background:var(--c-link);color:var(--white)}
.btn-round--fill:hover{opacity:.7}

/* ========== 型 21. 窓 ==========
   ヘッダーの検索窓。320×45・面地・アイコン 24（左 12・右 8）・入力 14 */
.win{display:flex;align-items:center;width:320px;height:45px;border-radius:var(--r-win);background:var(--panel)}
.win .ms{font-size:24px;color:var(--weak);margin:0 var(--sp-8) 0 var(--sp-12)}
.win input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:var(--fs-ui);margin-right:var(--sp-12)}
.win input::placeholder{color:var(--weak)}

/* ========== 型 22. ヘッダーのバー ==========
   fixed・白 95%・影 1。1 段目 66（下罫線 1）＋ 2 段目 44。左右 20 */
.hd{position:fixed;top:0;left:0;right:0;z-index:10;background:var(--c-veil);box-shadow:var(--sh-header)}
.hd__row1{display:flex;align-items:center;justify-content:space-between;height:var(--hd-row1);padding-inline:var(--sp-20);border-bottom:1px solid var(--line)}
.hd__logo{display:inline-flex;flex:none;align-items:center;gap:var(--sp-8)}

.hd__logo:hover{opacity:.5}
.hd__tools{display:flex;align-items:center}
.hd__tools .btn-sq{margin-right:var(--sp-8)}
.hd__tools .win{margin-right:var(--sp-12)}
.hd__tools .btn-round--fill{margin-left:var(--sp-12)}   /* ログインとの間 12 */
@media (min-width:897px) and (max-width:1020px){ .hd__tools .win{width:200px} }   /* 897〜960 で会員登録のボタンが右の端から出た（2026-09-27）。検索窓を縮める */
.hd__row2{display:flex;align-items:center;height:var(--hd-row2);padding-inline:var(--sp-20);font-size:var(--fs-ui);font-weight:500}
.gnav{display:flex;align-items:center;gap:2px}   /* 項目間 2 */
.gnav a{display:inline-flex;align-items:center;padding:var(--sp-8);border-radius:var(--r-btn)}
.gnav a:hover{background:var(--panel)}   /* 行は地をうっすら塗る（癖 3） */
.gnav a[aria-current]{color:var(--c-link)}
.badge{display:inline-flex;align-items:center;height:20px;margin-left:var(--sp-8);padding:0 var(--sp-8) 2px;border-radius:var(--r-badge);
       background:var(--c-link);color:var(--white);font-size:var(--fs-mini);font-weight:700}
.hd__biz{display:inline-flex;align-items:center;gap:var(--sp-4);margin-left:auto;color:var(--c-link);font-weight:700}
.hd__biz .ms{font-size:15px}
.hd__biz:hover{text-decoration:underline}   /* 文字リンクは下線（癖 3） */
/* スマホの 3 つ（≡・ロゴ・検索）と引き出しは PC では出さない */
.hd__sp,.drawer,.drawer-toggle{display:none}

/* ========== スマホのヘッダーと引き出し ==========
   参照（Nuxt 世代）の実測: 高さ 60・左に ≡（30）・中央にロゴ・右に検索（30）。
   引き出しは左から出る幅いっぱいの面。塊の見出しは灰の帯（12px・上下 7・左右 15）、項目は高さ 40・13→14px（段に 13 が無いので 14）。
   JS を使わない。Schoo と同じくチェックボックスで開閉する */
@media (max-width:896px){
  .hd__row1,.hd__row2{display:none}
  .hd__sp{display:flex;align-items:center;justify-content:space-between;position:relative;height:var(--hd-sp);padding-inline:var(--sp-12)}
  .hd__sp .ms{font-size:30px;cursor:pointer}
  .hd__sp .hd__logo{position:absolute;left:50%;transform:translateX(-50%)}
  
  .drawer{display:block;position:fixed;top:0;bottom:0;left:0;width:100%;z-index:20;overflow-y:auto;background:var(--white);
          transform:translateX(-100%);transition:transform .2s}
  .drawer-toggle:checked ~ .drawer{transform:none}
  .drawer__head{display:flex;align-items:center;justify-content:space-between;height:var(--hd-sp);padding-inline:var(--sp-12)}
  .drawer__head .ms{font-size:30px;cursor:pointer}
  .drawer__cta{display:flex;justify-content:center;gap:var(--sp-12);padding:0 var(--sp-16) var(--sp-16)}
  .drawer__cta .btn-round{height:36px;width:150px}
  .drawer__sec{padding:7px 15px;background:var(--line);font-size:var(--fs-note)}
  .drawer__list a{display:flex;align-items:center;justify-content:space-between;height:40px;padding:0 9px 0 var(--sp-16);font-size:var(--fs-ui)}
  .drawer__list a:hover,.drawer__list a:active{background:var(--panel)}
  .drawer__list .ms{font-size:18px}
}

/* ========== 型 4. 帯 ＋ 型 14. 帯の中の行（パンくず） ==========
   地＝帯の地。PC 高 172＝上 27 ＋ パンくず 21 ＋ 18 ＋ 題 54 ＋ 53（語彙 §3-1 は 173。パンくずの行送り 21 の丸めの差）。
   パンくずは左 120・区切りは chevron_right(24)・現在地は 700 でリンク無し。題は 36/700・中央・アクセント色 */
.band{background:var(--c-band)}
.band__in{max-width:var(--wrap);margin:0 auto;padding:var(--gap-band-top) var(--edge) var(--gap-title-bottom)}
.crumb{display:flex;align-items:center;flex-wrap:wrap;padding-left:calc(120px - var(--edge));font-size:var(--fs-ui);line-height:var(--lh-crumb)}
.crumb li{display:inline-flex;align-items:center;height:var(--lh-crumb)}   /* 区切りのアイコン（24）で行が 24 に広がり、帯が 176 になっていた。行は 21 に止める */
.crumb li+li::before{content:"chevron_right";font-family:"Material Symbols Rounded";font-size:24px;line-height:1;-webkit-font-feature-settings:"liga";font-feature-settings:"liga";color:var(--muted)}
.crumb a:hover{text-decoration:underline}
.crumb a{display:inline-flex;align-items:center}   /* 家のアイコンを包むリンクが文字の並びに沿って置かれ、行の中で上に寄っていた（2026-09-27 りょう「パンくずのアイコンのズレ」） */
.crumb .ms{font-size:16px}
.crumb [aria-current]{font-weight:700}
.crumb li:last-child{flex:1 1 8em;min-width:0;max-width:100%}   /* 今のページの段は 1 行で止め、はみ出しは … にする。長い記事の題が 2 行に折れると、行の高さ 21 からはみ出して上の段に重なった（スマホ・2026-09-24 りょう「パンくずが壊れている」）。題は下の見出しに全文ある */
.crumb li:last-child>[aria-current]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.band__ttl{max-width:calc(var(--rail) + 720px + 96px);margin:var(--gap-crumb-title) auto 0;font-size:var(--fs-band);font-weight:700;line-height:1.5;text-align:center;color:var(--c-link)}   /* 幅は下の 2 列（左の列＋読み物の本文）の塊にそろえる。器いっぱいだと長い記事の題が左右の端まで伸びた（2026-09-24 りょう「タイトル部分が横幅いっぱいなのは違和感」） */
@media (max-width:896px){
  /* 参照のスマホ（高 136）: パンくずは上 約 10・左 16、題まで約 21、題の下 約 51。段に丸めて 12 ／ 20 ／ 53 */
  .band__in{padding:var(--sp-12) var(--edge) var(--gap-title-bottom)}
  .crumb{padding-left:0}
  .band__ttl{margin-top:var(--sp-20);font-size:var(--fs-h2)}   /* 参照は 20px。語彙 §3 L は 20 を採らないので 24 */
}

/* ========== 本体 ========== */

/* ========== 型 2. 2 カラム（左の列＋本体） ==========
   カラムは最大 2 つ（2026-09-23 りょう決定。学習サイトで 3 カラムは情報が多すぎる）。記事も 2 カラムで、目次とバナーは左の列に入れる。
   左の列は --rail の中で中身（--rail − 20）を右寄せ。本体は grow。本体の内側 左右 48。
   上端はレールと本体で揃えて 50（語彙 §3-1。帯 → レール・本体の上端） */
.col2{display:flex;max-width:var(--wrap);margin:0 auto;padding:var(--gap-band-body) var(--edge) 0}
.col2__rail{flex:none;width:var(--rail);display:flex;justify-content:flex-end}
.col2__main{flex:1;min-width:0;padding-inline:var(--gap-col)}
.col2--read{justify-content:center}   /* 読み物（記事・とは・規約など）は本文が読み幅 720 までなので、左の列＋本文の塊を中央に置く。左寄せだと 1440 で右に約 230 の空きが出た */

/* 型 3（3 カラム）は使わない（2026-09-23 りょう決定「最大 2 カラム」）。記事も型 2 で組む */

/* ========== 左の列に縦に積む（記事: カテゴリー → バナー） ==========
   記事の目次は左の列に置かず、本文の頭の 1 つだけ（.toc-inline。2026-09-23 りょう「目次は記事頭だけでいい」）。
   左の列に目次を置くと列が長くなり、付いてくる形にするとバナーに重なった */
.rail-stack{display:flex;flex-direction:column;gap:var(--sp-16);width:calc(var(--rail) - var(--sp-20))}
.rail-stack .frame{width:100%}
.col2--read .col2__rail{align-self:stretch}
.col2--read .rail-stack{height:100%}
/* カテゴリーの下の講座のバナー（2026-09-28）。型 10 の枠と同じ枠・角丸で、列の中で付いてくる */
.ad-slot__pr{display:flex;align-items:center;gap:var(--sp-8);margin-bottom:var(--sp-8);font-size:var(--fs-note);color:var(--muted)}   /* 記事のバナー広告（2026-09-28・AdSlot.astro）。「PR」と会社名を画像の上に */
.ad-slot__badge{padding:0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r-badge);font-weight:700;line-height:1.6}
.ad-slot__link{display:block}
.ad-slot__link img{display:block;width:100%;max-width:300px;height:auto;border-radius:var(--r-img)}
.ad-slot__link:hover img{opacity:.7}
.ad-slot--end{margin-top:var(--gap-block)}
.ad-slot--end .ad-slot__item{display:flex;flex-direction:column;align-items:center}
@media (min-width:897px){ .ad-slot--end{display:none} }   /* PC は左の列に出すので、本文の末尾には出さない */
.rail-course{position:sticky;top:calc(var(--hd-row1) + var(--hd-row2) + var(--sp-16));display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-frame);background:var(--white)}
.rail-course img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rail-course:hover img{opacity:.7}
.rail-course__body{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-12) var(--sp-16) var(--sp-16)}
.rail-course__kind{font-size:var(--fs-note);font-weight:700;color:var(--c-link)}
.rail-course__ttl{font-size:var(--fs-ui);font-weight:700;line-height:1.5}
.rail-course__txt{font-size:var(--fs-note);line-height:1.6;color:var(--muted)}
.rail-course__btn{width:100%;height:40px;margin-top:var(--sp-8);font-size:var(--fs-ui);font-weight:700}

/* ========== 型 10. 枠付きカード（左の列の中身） ==========
   幅は左の列 − 20（もとは 220）・枠 2px（帯の枠線の色）・角丸 16。見出し部（中央・18/700・内側 8・下罫線 2）→ 中身 → 区切り → 中身 */
.frame{width:calc(var(--rail) - var(--sp-20));align-self:flex-start;border:2px solid var(--c-frame);border-radius:var(--r-frame);background:var(--white)}
.frame__head{padding:var(--sp-8);border-bottom:2px solid var(--c-frame);text-align:center;font-size:var(--fs-h3);font-weight:700}
.frame__rows{padding:var(--sp-8) 0 var(--sp-20)}
.frame__rows a{display:flex;align-items:center;gap:var(--sp-12);height:50px;padding-inline:var(--sp-16);font-size:var(--fs-ui);font-weight:500}
.frame__rows a:hover{background:var(--panel)}
.frame__rows .gbox{width:38px;height:38px;border-radius:var(--r-btn);flex:none}

/* ========== 本体の頭（説明ブロック） ==========
   H2 24/700。説明 12px/150%・補助色（PC は全文）。説明 → 件数 42（語彙 §3-1） */
.lead-block{margin-bottom:var(--gap-desc-count)}
.h2{font-size:var(--fs-h2);font-weight:700;line-height:1.5}
.desc{margin-top:var(--sp-16);font-size:var(--fs-note);line-height:1.5;color:var(--muted)}

/* ========== 型 15. 見出しの行（件数・絞り込み） ==========
   件数 14（弱い文字）→ 絞り込み行 高 41・下罫線。行の中にページ内検索の入力欄を直に置く（対応表 §4 #5） */
.count{font-size:var(--fs-ui);color:var(--weak)}
.filter{display:flex;align-items:center;gap:var(--sp-8);height:41px;margin-top:var(--sp-16);border-bottom:1px solid var(--line)}
.filter .ms{font-size:20px}
.filter input{flex:1;min-width:0;border:0;background:none;outline:0;font-size:var(--fs-ui)}
.filter input::placeholder{color:var(--weak)}

/* ========== 節（本体の中） ==========
   見出し 18/700 → 中身 16。ブロック間 40。格子 → 次 48 */
.sec{margin-top:var(--gap-block)}
.sec__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-16)}
.more{display:inline-flex;align-items:center;font-size:var(--fs-note);font-weight:700;color:var(--c-link);flex:none;white-space:nowrap}
.more .ms{font-size:20px}
.more:hover{text-decoration:underline}

/* ========== 型 7. ピル列 ＋ 型 18. ピル ==========
   折り返し・横 8／縦 12。ピルは高 36・角丸 40・罫線 1・左右 22・14px。現在地は塗り */
.pills{display:flex;flex-wrap:wrap;gap:var(--sp-12) var(--sp-8)}
.pill{display:inline-flex;align-items:center;height:36px;padding:0 22px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-ui);white-space:nowrap}
.pill:hover{background:var(--panel)}

/* ========== 型 5. 格子 ＋ 型 11. カード ＋ 型 16. メタの行 ==========
   格子は auto-fill minmax(260,1fr)・横 20／縦 40。カードは縦積み・間 12・最大 400。画像は比 312/134.68・角丸 15。
   下部は横並び・間 8（左に題とメタ、右にお気に入り）。題は 16/150%/700 で 2 行で切る。メタは高 18・間 8・12px・補助色・区切り ｜ */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--gap-block) var(--sp-20)}

.card{display:flex;flex-direction:column;gap:var(--sp-12);max-width:400px}
.card__img{aspect-ratio:16/9;border-radius:var(--r-img);min-height:0;overflow:hidden}   /* 画像の比率はサイト全体で 16:9（2026-09-24 りょう「そろえる」。前は参照の 312/134.68） */
.card__img:hover{opacity:.7}
.card__foot{display:flex;align-items:flex-start;gap:var(--sp-8)}
.card__txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.meta{display:flex;align-items:center;gap:var(--sp-8);height:18px;font-size:var(--fs-note);color:var(--muted);white-space:nowrap}
.meta span+span::before{content:"｜";margin-right:var(--sp-8)}
.pager{display:flex;justify-content:center;gap:var(--sp-8);margin-top:var(--gap-grid-next)}
.pager a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--line);border-radius:var(--r-round);font-size:var(--fs-ui)}
.pill[aria-current],.pager a[aria-current]{background:var(--c-link);border-color:var(--c-link);color:var(--white)}   /* ピル・ページ送りの現在地（2026-09-27 にまとめた） */

/* ========== 会員の特典の置き場所（サイト構成 §1 の 20・37） ==========
   お気に入り（カード・記事）とフォロー（カテゴリーの面・教科書）。会員でない人には押したら会員登録へ案内する。
   お気に入りは Schoo のカードの丸いボタンの枠。フォローは型 19 の枠線版を小さくしたもの（高さは型 19 と同じ 30.5） */
.fav{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:var(--r-round);background:var(--white);color:var(--muted);cursor:pointer}
.fav .ms{font-size:18px}
.fav:hover{background:var(--panel)}
.fav.fav--label{width:auto;gap:var(--sp-4);padding:0 var(--sp-12);font-size:var(--fs-note)}   /* 記事と教科書のページのお気に入り。丸いボタンに「お気に入り」の文字を添える（2026-09-24） */
.fav[aria-pressed="true"]{border-color:var(--c-link);color:var(--c-link)}   /* 保存しているとき */


/* ========== 型 8. リスト ＋ 進み具合 ==========
   区切り 1px・題は 2 行で切る・hover で地を塗る。2 行型は題＋要点 1 行。
   教科書の目次では、行の右に進み具合（Schoo のコースのページの「受講完了まであと◯%」の文字 10px と帯 140×8・角丸 4） */
.list{border-top:1px solid var(--line)}
.list__row{display:flex;align-items:center;gap:var(--sp-16);padding:var(--sp-16) var(--sp-8);border-bottom:1px solid var(--line)}
.list__row:hover{background:var(--panel)}
.list__body{flex:1;min-width:0}
.card__ttl,.list__ttl{font-size:var(--fs-text);font-weight:700;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}   /* 項目の題（2 行で切る）（2026-09-27 にまとめた） */
.list__sub{margin-top:var(--sp-4);font-size:var(--fs-note);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 行の画像は 4:3（参照の実測: 検索結果 160×120・スマホ 100×75／コースの回 96×72・スマホ 72×54）。
   前はカードと同じ横長の比にしていて、スマホで 96×41 まで小さくなった（2026-09-22） */
.list__thumb{flex:none;width:160px;aspect-ratio:16/9;border-radius:var(--r-img)}
.list__thumb--s{width:96px}
.list__thumb--soon{display:block;background:var(--panel)}   /* 準備中の回の無地の枠（教科書のページ。2026-09-28） */

/* ========== 型 12. 囲み ＋ 型 13. 図版 ==========
   囲みは枠 1px 線色・角丸 16・白地・内側 24・中の間 16。図版は 720 幅・角丸 15・キャプション 12px 補助色・上下 40 */
.box{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--pad-box);border:1px solid var(--line);border-radius:var(--r-frame);background:var(--white)}

/* ========== 型 17. 前後の行（章ナビ） ==========
   3 列 [前 1fr][中 auto][次 1fr]・高 48・上下を 1px の罫線で挟む・方向は chevron_left／right（24）・hover で地を塗る */

/* ========== 記事の帯と本文 ==========
   帯の題の上にラベル（ピルと同じ形）、題の下にメタ（型 16）（対応表 §2-4）。
   本文の段落間 24・H2 の上 80・H3 の上 40（語彙 §3-1 の独自の値） */
.band__label{display:flex;justify-content:center;margin-top:var(--gap-crumb-title)}
.lead-block__row.lead-block__row--end{justify-content:flex-end}   /* 見出しの無い頭（建築知識のカテゴリーのページ。フォローだけを右に） */
.lead-block__logo{display:flex;align-items:center;height:48px;margin:0}   /* ソフトのロゴ（2026-09-28）。本文の頭の見出しの文字の代わりに白地に置く。枠や札は付けない */
.lead-block__logo img{display:block;height:100%;width:auto;max-width:220px;object-fit:contain;object-position:left center}
.lead-block__logo--mark{gap:var(--sp-12);font-size:var(--fs-h2);font-weight:700;line-height:1.3}   /* マークだけのロゴ＋名前（2026-09-28） */
.lead-block__logo--mark img{height:40px}
.band__label+.band__ttl{margin-top:var(--sp-12)}
.band__meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;row-gap:var(--sp-8);margin-top:var(--sp-12)}   /* 狭い幅ではボタンを次の行へ（教科書の帯にフォローとお気に入りが並ぶ・2026-09-25） */
.band__meta .meta{height:auto}
.prose{font-size:var(--fs-text);line-height:1.8}
.prose>*+*{margin-top:var(--gap-para)}
.prose h2{margin-top:var(--gap-h2);font-size:var(--fs-h2);line-height:1.5}
.prose h3{margin-top:var(--gap-h3);font-size:var(--fs-h3);line-height:1.5}

.band__meta .fav{margin-left:var(--sp-8)}   /* お気に入りは帯のメタの行に並べる。本文の上に 1 個だけで 1 行を取っていた */

/* ========== 短いフォーム（記事の本文の終わり） ==========
   トップの会員登録は、会員の画面ができたらトップの 7（無料の囲みの場所）に出す（サイトマップ 2026-09-23 §10）。
   記事: 型 12 の囲みの中に、窓（型 21 の白地・罫線 1）＋ 同意のチェック ＋ 塗りの丸ボタン ＋ Google のボタン（サイト構成 §1 の 33） */

.consent{display:flex;gap:var(--sp-8);font-size:var(--fs-ui);line-height:1.6}   /* 本文と同じ大きさ（小さい字にしない。2026-09-29 特定電子メールのガイドライン） */
.consent{align-items:flex-start;text-align:left}
.consent input{flex:none;margin-top:5px;accent-color:var(--c-link)}
.consent__txt{flex:1;min-width:0;word-break:normal;overflow-wrap:anywhere;text-wrap:wrap}   /* 本文と同じ折り方（2026-09-29） */
.course-cta{margin-top:var(--gap-block)}

/* ========== 帯の窓（型 21 の帯の版）と 1 列の器 ==========
   帯の窓は 850・白地＋罫線 1（型の骨格 型 21）。1 列の器は本文の読み幅 720（型の骨格 §3-2）＋内側 48 */

.col1{max-width:calc(720px + 96px);margin:0 auto;padding:var(--gap-band-body) calc(var(--gap-col) + var(--edge)) 0}

/* ========== 行（記事一覧・最新・検索結果） ==========
   型 8 のリストに、メタ（型 16）と右の画像を付けた行 */
.list__row .meta{margin-top:var(--sp-4)}
.list__row--result{align-items:flex-start}
.list__row--result .list__thumb{order:2}   /* PC は右（参照）。スマホは左（下の @896） */

/* ========== 2 列の見出しリスト（よくある質問） ==========
   E_2列リンク集の並び。見出し（18/700）→ 行（型 8 の 1 行型）→「すべて表示」 */
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-block) var(--gap-col);max-width:1029px;margin-inline:auto}
.faq-main{padding-top:var(--gap-band-body)}   /* 帯 → 本体の上端 50（ほかのページと同じ）。前は節の上 40 と重なって 104 空いた */
.cols2 .list__row{padding:var(--sp-8)}
.cols2 .list__ttl{font-size:var(--fs-ui);font-weight:400}

.faq{margin-top:var(--sp-12);border-top:1px solid var(--line)}   /* よくある質問（2026-09-25）。型 E の質問の行に、押すとその場で開く答えを付けた */
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);padding:var(--sp-12) var(--sp-8);font-size:var(--fs-ui);font-weight:700;line-height:1.6;cursor:pointer;list-style:none}
.faq__q::-webkit-details-marker{display:none}
.faq__q .ms{flex:none;font-size:20px;color:var(--c-link);transition:transform .2s}
.faq__item[open] .faq__q .ms{transform:rotate(90deg)}
.faq__a{padding:0 var(--sp-8) var(--sp-16);font-size:var(--fs-ui);line-height:1.8}
.cols2__note{max-width:1029px;margin:0 auto var(--gap-block)}   /* 2 列の上に置く 1 行。列と同じ幅に揃える（器いっぱいだと 1 行だけ左に出る） */

/* ========== 型 23. 空状態 ＋ 404 ==========
   0 件の理由 1 行＋次にできること（型 8 のリスト）。14px・補助色・左寄せ・上下 40（型の骨格 §3-2）。
   404 の数字は文字の段の最大（36）。参照は大きく出すが、段に無い値は作らない */
.empty{margin:var(--gap-block) 0}
.empty__why{font-size:var(--fs-ui);color:var(--muted)}
.empty .list{margin-top:var(--sp-16)}
.code404{font-size:var(--fs-band);font-weight:700;color:var(--weak);text-align:center}

/* ========== 表（編集方針） ==========
   参照（プライバシーポリシー）の最後の表。罫線 1px 線色・12px */

/* ========== 部品の小さな変え方（ページに style 属性を書かないためのもの） ==========
   元の指定がこの節より後ろにある部品は、クラスを 2 つ重ねて書く（後ろの元の指定に上書きされるため。2026-09-23 に 16:9 とキーワードの間隔が効いていなかった） */
.win--full{width:100%;background:var(--white);border:1px solid var(--line)}   /* 本体の中の検索窓（検索結果） */
.list--gap{margin-top:var(--sp-16)}

.col2__main--read{max-width:calc(720px + 96px)}   /* 読み物の本文は読み幅 720 まで（型の骨格 §3-2） */
.prose>h2:first-child{margin-top:0}
.band__ttl--solo{margin-top:0}   /* パンくずの無い帯（404） */
.band--crumb .band__in{padding-bottom:var(--gap-band-top)}   /* パンくずだけの帯（2026-09-28）。下はパンくずの上と同じ空き */
.col1--wide{max-width:none}
.empty--read{max-width:720px;margin-inline:auto}


.tp-arch__ttl--fv{margin-top:var(--gap-block)}   /* トップの「はじめての方へ」。無料の囲みの下 */
.tp-pills__list.tp-pills__list--in{margin-top:0}   /* 節の見出し（sec__head）の下に置くとき */

.wrap--one{max-width:calc(1000px + 2 * var(--edge));padding-top:var(--gap-band-body)}   /* 1 列のページ（教科書・ソフト・建築知識・カテゴリーの一覧・検索）。参照の Schoo のコースのページは本体 1000・左の列なし（2026-09-24 実測）。左の列は記事だけ（2026-09-24 りょう「サイドバーは記事だけ」「外す」） */

.list__row--soon .list__ttl{font-weight:400;color:var(--muted)}   /* まだ書いていない回（リンクにしない・補助色。テンプレート設計 #86 の「これから書く」） */
.sec--first{margin-top:0}   /* 本体の最初の節（帯 → 本体の上 50 は器が持つ） */
.tp-row__ttl.tp-row__ttl--s{font-size:var(--fs-text)}   /* 節の中の区分の見出し（ソフトの一覧の CAD・BIM など） */
.wrap--one .tp-row__next{right:0;background:var(--c-veil)}   /* 1 列の器の中では、次へを列の内側に置く（器の外に出すと横にはみ出す） */
.tp-card__img.tp-card__img--logo{background:var(--panel)}

@media (max-width:896px){ .grid--slide{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .grid--slide>.card{flex:0 0 70vw;scroll-snap-align:start} }   /* スマホではカードを横に送る（参照の Schoo のスマホの「こちらもオススメ」）。縦に 15 枚積むと長くなった */

/* ========== カリキュラム（2026-09-24・参照は Schoo のカリキュラムの詳細と一覧） ==========
   Schoo のカリキュラムは旧世代の作りなので、構造だけを採り、値は今の型にそろえる（サイト構成 §1 の 9）。
   頭＝対象者・修了レベル・数字・受講開始のボタン（地は帯の色の囲み）／下＝教科書を読む順に並べた時系列（左に点線、各教科書に丸の印）。
   時系列の最後の点はオンライン講座（塗りの丸） */
.cur{margin-top:var(--gap-block)}
.cur__head{padding:var(--pad-box);border-radius:var(--r-frame);background:var(--c-band)}
.cur__label{display:inline-block;padding:0 var(--sp-8);border-radius:var(--r-badge);background:var(--c-link);color:var(--white);font-size:var(--fs-mini);font-weight:700;line-height:1.8}
.cur__ttl{margin-top:var(--sp-8);font-size:var(--fs-h2);font-weight:700;line-height:1.4}
.cur__desc{margin-top:var(--sp-8);font-size:var(--fs-ui);font-weight:700;line-height:1.8}
.cur__info{display:flex;gap:var(--sp-20);margin-top:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-badge);background:var(--white);font-size:var(--fs-ui);font-weight:700}
.cur__start{margin-top:var(--sp-16)}
.cur__line{margin:var(--sp-20) 0 0 7px;padding-left:var(--sp-20);border-left:2px dotted var(--weak);list-style:none}
.cur__node{position:relative;padding-bottom:var(--sp-20)}
.cur__node::before{content:"";position:absolute;left:calc(-1 * var(--sp-20) - 9px);top:var(--sp-4);width:16px;height:16px;border:2px solid var(--c-link);border-radius:50%;background:var(--white)}
.cur__node--next::before{background:var(--c-link)}
.cur__book:hover .cur__book-ttl{color:var(--c-link)}

.cur__book-body{flex:1;min-width:0}
.list__no,.cur__no{font-size:var(--fs-note);font-weight:700;color:var(--c-link)}   /* 第何回の番号（2026-09-27 にまとめた） */
.cur__book-ttl{font-size:var(--fs-text);font-weight:700;line-height:1.5}
.cur__book-body .meta{margin-top:var(--sp-4)}
.cur__chapters{margin-top:2px;font-size:var(--fs-note);line-height:1.6;color:var(--muted)}   /* 章の名前。全何回とは別の行（同じ行だと、スマホで折り返した行の頭に区切りが来た） */
.cur__lessons{margin:var(--sp-12) 0 0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}   /* 列を 0 まで縮められるようにする（既定だと長い題で行が画面の外へ伸びた） */
.cur__lesson{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8) var(--sp-12);border-radius:var(--r-badge);background:var(--panel);font-size:var(--fs-note)}
.cur__lesson-no{flex:none;font-weight:700;color:var(--c-link)}
.cur__lesson-ttl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cur__lesson-state{flex:none;color:var(--muted)}
.cur__lesson--live:hover .cur__lesson-ttl{color:var(--c-link);text-decoration:underline}
.cur__more{margin:var(--sp-8) 0 0}   /* 教科書の小さい枠を外したので、回の一覧は教科書の題にそろえる（2026-09-25） */
.cur__course{margin-top:var(--sp-12);max-width:720px}
.cur-card__course{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-8);padding-top:var(--sp-8);border-top:1px solid var(--line);font-size:var(--fs-note);font-weight:700;color:var(--c-link)}   /* ソフトの一覧のカードの下のオンライン講座の導線。LP のファーストビューの小さい絵＋名前 */
.cur-card__course img{flex:none;width:80px;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-badge)}
.cur-card__course:hover{opacity:.7}
@media (max-width:896px){
  .cur__lessons,.cur__more{margin-left:0}
  
}

/* ========== 会員の画面（ログイン・会員登録・パスワードの再設定・登録の確認と完了） ==========
   L_ログイン・R_アカウント作成・V_パスワード再設定の並び。値は今の型（型 12 の囲み・型 21 の窓・型 19 の丸ボタン）から。
   入力欄は窓と同じ高さ 45・角丸 8。送るボタンも 45（記事の短いフォームと同じ） */
.auth{max-width:calc(480px + 2 * var(--edge));margin:0 auto;padding:var(--gap-band-body) var(--edge) 0}
.auth--wide{max-width:calc(640px + 2 * var(--edge))}
.auth .box{gap:var(--sp-20)}
.field{display:flex;flex-direction:column;gap:var(--sp-8)}
.field__label{display:flex;align-items:center;font-size:var(--fs-ui);font-weight:700}
.field__label .badge{margin-left:var(--sp-8)}
.input{width:100%;height:45px;padding:0 var(--sp-12);border:1px solid var(--line);border-radius:var(--r-win);background:var(--white);font-size:var(--fs-ui)}
.input::placeholder{color:var(--weak)}
.btn-block{width:100%;height:45px}
.form-grid .field{display:grid;grid-template-columns:160px 1fr;align-items:center;gap:var(--sp-16)}   /* アカウント作成は項目名が左（参照） */

.auth__links{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);font-size:var(--fs-note)}
.auth__links--after{margin-top:var(--sp-20)}

.auth__lead{font-size:var(--fs-ui);color:var(--muted);text-align:center}
.auth__error{font-size:var(--fs-ui);font-weight:700;line-height:1.6}   /* 入力や送信のエラー。色の値は決めていないので文字色の太字 */

/* ========== ログインしている状態のヘッダー ==========
   ログイン・会員登録の代わりに丸い顔の枠（マイページへ）。Schoo の会員の画面と同じ場所 */

/* ========== タブ（検索の種類・マイページ）。現在地に下線（Schoo と同じ） ========== */

.tabs{display:flex;gap:var(--sp-8);margin-top:var(--gap-block);border-bottom:1px solid var(--line)}
.tabs a{padding:var(--sp-12) var(--sp-16);font-size:var(--fs-ui);font-weight:700;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a[aria-current]{color:var(--c-link);border-bottom-color:var(--c-link)}

/* ========== 個人設定（N_個人設定） ==========
   左に設定のメニュー（型 10）、右に項目の行（項目名 160 ／ 今の値 ／ 変える）。区切りは 1px */

/* ========== 退会（W_退会） ==========
   注意の箇条書き（check_circle の印）→「退会前にご確認ください」の枠（見出し部は帯の枠線の色の地）→ ボタン 2 つ */
.notes{display:flex;flex-direction:column;gap:var(--sp-12);font-size:var(--fs-ui)}
.notes li{display:flex;gap:var(--sp-8)}
.notes .ms{font-size:20px;color:var(--c-link)}
.confirm{margin-top:var(--gap-block);border:1px solid var(--line);border-radius:var(--r-frame);overflow:hidden}
.confirm__head{padding:var(--sp-12) var(--sp-20);background:var(--c-frame);font-size:var(--fs-ui);font-weight:700}
.confirm__body{padding:var(--sp-20);font-size:var(--fs-ui);color:var(--muted)}
.btns{display:flex;justify-content:center;gap:var(--sp-16);margin-top:var(--gap-block)}
.btns .btn-round{width:200px;height:45px}


@media (max-width:896px){
  .col2{flex-direction:column;padding-top:var(--sp-20)}
  .col2__rail{display:none}   /* スマホでは左の列を出さない。カテゴリーはメニューの「カテゴリーで探す」から（サイト構成 §1 の 16）。記事の目次は本文の頭（.toc-inline）、バナーは出さない（今のサイトと同じ） */
  .col2__main{padding-inline:0;max-width:none}
  .grid{grid-template-columns:1fr;gap:var(--sp-20)}
  .card{max-width:none}
  .list__thumb{width:100px}
  .list__thumb--s{width:72px}
  .list__row--result .list__thumb{order:-1}   /* スマホの検索結果は画像が左（参照） */
  
  
  .faq-main{padding-top:var(--sp-20)}
  .lead-block__row{align-items:flex-start}
  .col1{padding:var(--sp-20) var(--edge) 0}
  .auth{padding-top:var(--sp-20)}
  .form-grid .field{display:flex;align-items:stretch}   /* PC の縦の中央揃えが残ると、項目名が真ん中に寄った */
  
  
  
  
  .tabs a{padding:var(--sp-12)}
  
  
  .btns{flex-direction:column;align-items:stretch}   /* 参照のスマホは「戻る（枠線）」が上 */
  .btns .btn-round{width:100%}
  .cols2{grid-template-columns:1fr;gap:var(--gap-block)}
  
}

/* ========== 型 9. 列グループ（フッター） ==========
   上罫線 2・上 50・内側 40・器 1029 中央。列は 300（中が 128＋156 の 2 列）／ 147 ／ auto（最小 140）＋ 右 320 のバナー。
   見出し 24/700（下 10）→ 左罫線＋左 20 の中に項目（縦の間 8・12px）。下の 139 は採らない（参照の固定バナー分・語彙 §3-1） */
.ft{margin-top:var(--gap-footer-top);border-top:2px solid var(--line);padding:var(--gap-footer-in)}
/* ★1029 は中身ぜんたいの幅（参照の実測: 列1 300＋右 28 ＋ 16 ＋ 列2 147 ＋ 16 ＋ 列3 162 ＋ 40 ＋ バナー 320 ＝ 1029）。
   列どうしの間は 16、列の塊とバナーの間が 40。内側 40 はフッターの面に付く。
   前は 40 を列どうしの間に当て、1029 の内側に 40 を取っていたので、バナーが下へ落ちた（2026-09-22） */
.ft__in{max-width:1029px;margin:0 auto}
.ft__cols{display:flex;flex-wrap:wrap;gap:var(--gap-block)}
.ft__group{display:flex;gap:var(--sp-16);flex:1 1 669px;min-width:0}   /* 塊の幅は参照の 669（1029 − 40 − 320）。中身なりにすると「特定商取引法に基づく表記」の分だけ 3px 広がり、バナーが下へ落ちた */
.ft__list li{white-space:nowrap}
.ft__col--1{width:300px;margin-right:28px}
.ft__col--2{width:147px}
.ft__col--3{flex:1;min-width:140px}
.ft__ttl{margin-bottom:10px;font-size:var(--fs-h2);font-weight:700}
.ft__list{padding-left:var(--sp-20);border-left:1px solid var(--line);display:grid;gap:var(--sp-8);font-size:var(--fs-note)}
.ft__col--1 .ft__list{grid-template-columns:128px 156px;grid-template-rows:repeat(6,auto);grid-auto-flow:column}   /* 左の列から縦に流す（参照と同じ並び） */
.ft__list a:hover{text-decoration:underline}
.ft__banner{width:320px;height:180px;overflow:hidden;border-radius:var(--r-banner)}   /* コースのバナー（対応表 §4 #4）。LP のファーストビューの画像（16:9） */
.ft__banner:hover{opacity:.85}
.ft__copy{margin-top:var(--gap-footer-in);font-size:var(--fs-note)}
@media (max-width:896px){
  /* 参照のスマホ（2026-09-25 に 390 で実測）: 面地・縦に積んで中央寄せ・上 40 下 50。バナーが先頭で左右 28。
     見出しとリンクの塊は幅 80%・塊の間 20・見出し 18（下 12）・リンク 12（縦 8 横 16）。著作権は 10（上 20） */
  .ft{border-top:0;background:var(--panel);padding:var(--gap-footer-in) 0 var(--gap-footer-top)}
  .ft__in{text-align:center}
  .ft__cols,.ft__group{flex-direction:column;align-items:center;gap:var(--sp-20);width:100%}
  .ft__group{flex:none}   /* 縦に積むと PC の 669 が高さとして効き、フッターが 1050 に伸びた */
  .ft__banner{order:-1;width:calc(100% - 56px);max-width:440px;height:auto;aspect-ratio:16/9;margin-bottom:var(--sp-20)}   /* 参照はバナーの枠の下に 28＋塊の上 20 を取る。ここでは列の間 20 と足して 40 */
  .ft__col--1,.ft__col--2,.ft__col--3{width:80%;margin-right:0}
  .ft__ttl{margin-bottom:var(--sp-12);font-size:var(--fs-h3)}
  .ft__list,.ft__col--1 .ft__list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-8) var(--sp-16);padding-left:0;border-left:0}
  .ft__copy{width:80%;margin:var(--sp-20) auto 0;font-size:var(--fs-mini)}
}

/* ========== 記事の本文（MDX） ==========
   本文は要素そのものに当てる（MDX に class は 0 件・対応表 §5）。値は語彙のトークンだけ。
   表は astro.config.mjs の rehypeTableWrap が .jr-table-scroll で包む（幅を超えたら横に送る） */
.prose a,.editor a{color:var(--c-link);text-decoration:underline;text-underline-offset:3px}   /* 文の中の文字リンク（本文と「この記事について」） */
.prose a:hover,.editor a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700}
.prose :is(p,li,dt,dd,h2,h3,h4,blockquote){overflow-wrap:anywhere}   /* 折れない長い文字列（「AutoCAD/Revit/…」や URL）が、はみ出すときだけ途中で折る。スマホでページ全体が縮んで表示された（jwcad-guide・2026-09-26）。表は横に送るので対象外 */
.prose ul{padding-left:1.5em;list-style:disc}
.prose ol{padding-left:1.5em;list-style:decimal}
.prose li+li{margin-top:var(--sp-8)}
.prose li::marker{color:var(--c-deco)}
.prose img{max-width:100%;height:auto;border-radius:var(--r-img)}
/* 画像と、そのすぐ下の「※」の説明（2026-09-28。astro.config.mjs の rehypeImageCaption がまとめる）。型 13 の図版: キャプション 12px 補助色 */
.prose .art-fig{margin:var(--gap-block) 0}
.prose .art-fig img{display:block;margin-inline:auto}   /* 本文の画像は真ん中に寄せる（2026-09-29 りょう「画像いろんなサイズあると思いますが真ん中に基本的に寄せたら」。前は左に寄っていた） */
.prose .art-fig figcaption{margin-top:var(--sp-8);font-size:var(--fs-note);line-height:1.6;color:var(--muted);text-align:center}   /* 説明も画像に合わせて真ん中 */
.prose p > img:only-child{display:block;margin-inline:auto}   /* 説明の無い画像だけの段落も真ん中（文の中の小さな画像は寄せない） */
/* 2 枚を 1 組で並べる（Pair.astro）。1 つの枠に入れて組だと分かるようにする */
.prose .art-pair{margin:var(--gap-block) 0;padding:var(--sp-12);border:1px solid var(--line);border-radius:var(--r-frame)}
.art-pair__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.art-pair__item{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}
.prose .art-pair img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:var(--panel)}   /* 画面の写しを切らない（比の違う 2 枚でも高さをそろえる） */
.art-pair__label{align-self:flex-start;padding:2px var(--sp-8);border-radius:var(--r-badge);background:var(--panel);font-size:var(--fs-note);font-weight:700}
.prose .art-pair figcaption{margin-top:var(--sp-12);font-size:var(--fs-note);line-height:1.6;color:var(--muted)}
.jr-body small:not([class]){font-size:var(--fs-note);line-height:1.6;color:var(--muted)}   /* 本文に書いた <small>（表の下の注釈・画面の版の行）を、画像の説明と同じ小さく薄い字にする。部品のクラス付きの small には効かせない（2026-09-30 りょう「補足や注釈の文字って小さくするとかで本文ではないことが分からないと駄目ですよね」） */
@media (max-width:600px){ .art-pair__row{grid-template-columns:1fr} }
.prose blockquote{margin:0;padding:var(--pad-box);border:1px solid var(--line);border-radius:var(--r-frame);background:var(--white)}   /* 型 12 の囲みと同じ */
.prose blockquote>*+*{margin-top:var(--sp-12)}
.prose .jr-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-btn);scrollbar-width:thin}
.prose table{min-width:100%;border-collapse:collapse;font-size:var(--fs-ui);line-height:1.7}
/* セルは PC もスマホも折り返し、列は 8 字より細くしない。列の少ない表は枠に収まり、多い表だけ横に送る（2026-09-29 りょう「スライダーに」。
   前は PC が折り返さず〔右の列が枠で切れた〕、スマホは 7 字まで縮めて縦に長くしていた） */
.prose th,.prose td{min-width:8em;padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;white-space:normal}
@media (max-width:896px){ .prose th,.prose td{min-width:11em} }   /* スマホは列を 11 字にして横に送る（8 字だと説明の列が 1 行 5〜6 字で縦に長くなった。2026-09-29） */
.jr-table__bar{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-4);margin-bottom:var(--sp-8);font-size:var(--fs-note);color:var(--muted)}   /* 表が枠より広いときだけ出す（TableScroll.astro） */
.jr-table__bar[hidden]{display:none}
.jr-table__next{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--white);color:var(--ink)}
.jr-table__next .ms{font-size:24px}
   /* スマホでは説明の列を折り返す。1 行のままだと 2 列の表でも右の列が枠で切れて見えた（2026-09-27 SP の自己レビュー）。列が多い表は今までどおり横に送る */
.prose th{background:var(--panel);font-weight:700}
.prose tr:last-child td{border-bottom:0}
.prose code{padding:2px 6px;border-radius:var(--r-badge);background:var(--panel);font-size:.9em}
.prose kbd{display:inline-block;padding:0 .45em;border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;background:var(--white);font-family:inherit;font-size:.85em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:.05em}   /* ショートカットのキー（2026-09-29 りょう「もう少し目立つように」→ A＝キーの形）。影は使わない決まりなので、下の縁を太くしてキーの厚みにする。行の高さは変えない */
.prose .kbd-combo{white-space:nowrap}   /* キーの組み合わせは途中で折らない（astro.config.mjs の rehypeKbdCombo） */
.prose .ui-label{display:inline-block;padding:0 .4em;border:1px solid var(--c-frame);border-radius:4px;background:var(--c-band);font-size:.9em;font-weight:700;line-height:1.5;white-space:nowrap;vertical-align:.05em}   /* 画面の押す所の名前（Ui.astro・2026-10-01 りょう「Enter などの装飾付けないと流し読みされる」）。キーの形（kbd）と分けて灰色の地。青は押せるものの色なので使わない */
/* 手順の 1 段（Step.astro・2026-09-29）。枠で囲わない（りょう「枠で囲うのやめて」）。番号の黒い丸と題、その下に本文と画像。番号は青にしない（青は行き先の色） */
.prose .step{margin:var(--gap-block) 0}
.prose .step__head{display:flex;align-items:flex-start;gap:var(--sp-12);margin:0}
.step__no{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--white);font-size:var(--fs-ui);font-weight:700;line-height:1}
.step__ttl{padding-top:4px;font-size:var(--fs-text);font-weight:700;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.prose .step__body{margin-top:var(--sp-12)}   /* 本文と画像は、ふつうの記事と同じく縦に並べ、画像は本文の幅いっぱい（2026-09-29 りょう「画像大きくなったらこのレイアウト使えない」。PC で右に画像を置く案と、本文を題の頭にずらす案はやめた） */
.prose .step__body > :first-child{margin-top:0}
.prose .step__body > :last-child{margin-bottom:0}
.step__body>*+*{margin-top:var(--gap-para)}   /* 手順の中の段落も、本文と同じ間隔で分ける（.prose>*+* は本文の直下にしか効かない。2026-09-30 ④Blender の報告：Step の中で5文が1つの塊に見えた）。図（.prose .art-fig）の間隔はそちらが勝つよう、詳細度を低くしてある */
/* 吹き出し（編集部の一言・2026-09-30 りょう「その人を編集部として吹き出しで出せるように」）。話し手の画像は src/data/speakers.json の1か所。影と左の縦線は使わない */
.prose .art-balloon{display:flex;align-items:flex-start;gap:var(--sp-12);margin:var(--gap-block) 0}
.art-balloon__who{flex:none;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);width:64px}
.prose .art-balloon .art-balloon__icon{display:block;width:56px;height:56px;max-width:none;margin:0;border:1px solid var(--c-frame);border-radius:50%;background:var(--c-band);object-fit:cover}
.art-balloon__icon--none{display:flex;align-items:center;justify-content:center;font-size:var(--fs-note);font-weight:700;color:var(--muted)}
.art-balloon__name{font-size:var(--fs-note);line-height:1.4;color:var(--muted);text-align:center}
.art-balloon__text{position:relative;flex:1;min-width:0;padding:var(--sp-12) var(--sp-16);border:1px solid var(--c-frame);border-radius:var(--r-frame);background:var(--c-band)}
.art-balloon__text::before{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;border-left:1px solid var(--c-frame);border-bottom:1px solid var(--c-frame);background:var(--c-band);transform:rotate(45deg)}   /* 話し手の方へ向く三角 */
.art-balloon__text > :first-child{margin-top:0}
.art-balloon__text > :last-child{margin-bottom:0}
.prose .art-balloon .art-balloon__icon--none{display:flex;align-items:center;justify-content:center}   /* 画像が無い間の丸の中の字を真ん中に（上の display:block に負けていた） */
.prose .art-box{margin:var(--gap-block) 0;padding:var(--sp-16);border:1px solid var(--c-frame);border-radius:var(--r-frame);background:var(--c-band)}   /* 囲み（Box.astro・2026-10-01 りょう「推奨で」）。左の縦の線と影は付けない */
.prose .art-box__title{margin:0 0 var(--sp-8);font-weight:700}
.art-box__body > :first-child{margin-top:0}
.art-box__body > :last-child{margin-bottom:0}
.jr-body img.is-zoomable{cursor:zoom-in}   /* 押すと元の大きさで開く（ImageZoom.astro・2026-09-30） */
.jr-zoom{padding:0;border:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;background:#111}
.jr-zoom::backdrop{background:rgba(0,0,0,.88)}
.jr-zoom__scroll{width:100%;height:100%;overflow:auto;display:grid;place-items:center;-webkit-overflow-scrolling:touch}
.jr-zoom__scroll img{max-width:none;width:auto;height:auto;margin:var(--sp-12)}   /* 元の大きさ。はみ出す分は指で動かす */
.jr-zoom__close{position:fixed;top:var(--sp-12);right:var(--sp-12);z-index:1;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#1e1e1e;cursor:pointer}
.prose pre{overflow-x:auto;padding:var(--sp-16);border-radius:var(--r-btn);background:var(--panel);font-size:var(--fs-note);line-height:1.7}
.prose pre code{padding:0;background:none;font-size:inherit}
.prose h2,.prose h3{scroll-margin-top:calc(var(--hd-row1) + var(--hd-row2) + var(--sp-16))}   /* 目次から飛んだとき、固定のヘッダーの下に隠れないようにする */
.prose hr{border:0;border-top:1px solid var(--line)}
@media (max-width:896px){
  .prose h2,.prose h3{scroll-margin-top:calc(var(--hd-sp) + var(--sp-16))}
}

/* ========== 記事のページで動いているもの ==========
   読み進めた量の帯・目次の現在地・コースのバナー（cta_map.json が正。画像 1 枚に文言まで焼き込んだもの） */
.jr-progress{position:fixed;top:0;left:0;z-index:30;height:3px;width:0;background:var(--c-link);transition:width .08s linear}
.toc-inline a{word-break:keep-all;overflow-wrap:anywhere}   /* 目次は見出しをそのまま出すので、語の途中で折れた（「(Cookie 利｜用)」）。文節で折る。効くのは Chrome・Edge（Safari は未対応でこれまでどおり） */
.hd__logo-img{display:block;height:28px;width:auto}   /* PERSC の最新のロゴ（persc.jp と同じ SVG・2026-09-27 りょう「ロゴを PERSC 最新のロゴに」）。横に JOURNAL の文字 */
.hd__logo-sub{font-size:var(--fs-h3);font-weight:700;letter-spacing:.06em;line-height:1;color:var(--ink)}
/* 前の決まり（JOURNAL のロゴの絵）: .hd__logo-img{height:var(--logo-h)} */   /* ロゴはバーとの比で決める（対応表 §4 #1）。幅は絵なり */
@media (max-width:896px){ .hd__logo-img{height:22px} .hd__logo-sub{font-size:16px} }
.jr-cta-banner{display:block;overflow:hidden;line-height:0;border-radius:var(--r-img)}
.jr-cta-banner:hover{opacity:.7}   /* 画像は透かす（癖 3） */
.jr-cta-banner img{display:block;width:100%;height:auto;border-radius:0}
.prose .jr-cta-banner{margin:var(--gap-block) 0;text-decoration:none}
.toc-inline{padding:var(--pad-box);border:1px solid var(--line);border-radius:var(--r-frame)}   /* 本文の最初の見出しの前に入る目次（型 12 の囲み） */
.h3,.toc-inline__h{font-size:var(--fs-h3);font-weight:700}   /* 小さい見出し（2026-09-27 にまとめた） */
.prose .toc-inline ul{margin-top:var(--sp-12);padding-left:0;list-style:none}
.prose .toc-inline a{color:var(--ink);text-decoration:none}
.prose .toc-inline a:hover{color:var(--c-link);text-decoration:underline}
.art-hero{margin:0 0 var(--gap-block)}
.art-video{aspect-ratio:16/9;margin:0 0 var(--gap-block)}   /* 記事の頭の動画（2026-09-25） */
.art-video iframe{display:block;width:100%;height:100%;border:0;border-radius:var(--r-img)}
.art-hero img{width:100%;height:auto;border-radius:var(--r-img)}
.art-hero .cover{width:100%;max-width:none;margin:0;aspect-ratio:16/9}   /* 記事ごとの絵が無い記事の文字の表紙（2026-09-28）。本文と同じ幅・絵と同じ 16:9 */
.cur__book,.editor{display:flex;align-items:flex-start;gap:var(--sp-16)}   /* 絵と文を横に並べる行（2026-09-27 にまとめた） */
.editor .gbox{flex:none;width:52px;height:52px;border-radius:var(--r-round)}
.editor .gbox img{width:32px;height:32px}   /* 丸の中はサイトのマーク（2026-09-26。前はグレーの丸だけ） */
.gbox>.ms{color:var(--muted);font-size:24px}   /* グレーの箱の中のアイコン（小さい四角・カテゴリーの欄・お知らせ・はじめての方へ。2026-09-26） */
.editor p{margin-top:var(--sp-4);font-size:var(--fs-note);color:var(--muted);line-height:1.8}
/* 記事の終わりの会員登録（JoinInline・2026-09-25）。囲みは .box、同意の行は登録画面と同じ .consent */
.consent__note,.auth__note,.join__lead{font-size:var(--fs-note);color:var(--muted)}   /* 注記の小さい文字（2026-09-27 にまとめた） */
.join__form{display:flex;flex-direction:column;gap:var(--sp-12)}   /* 入力 → 同意 → ボタンの縦（同意をボタンのすぐ上に置く。2026-09-29） */
.join__form .input{min-width:0}
.join__form .btn-round{width:100%;height:45px}
.join + .course-cta{margin-top:var(--gap-para)}
/* 記事の教科書の中の位置と前後の回（2026-09-25・設計台帳から）。囲みは .box */
.join,.tbpos{margin-top:var(--gap-block);gap:var(--sp-12)}   /* 記事の終わりの箱（2026-09-27 にまとめた） */
.editor__h,.join__h,.tbpos__h{font-size:var(--fs-ui);font-weight:700}   /* 記事の終わりの箱の見出し（2026-09-27 にまとめた） */
.tbpos .meta{flex-wrap:wrap;row-gap:var(--sp-4);height:auto;white-space:normal}   /* 章の名前が長いと 1 行に入らず、スマホでページ全体が縮んで表示された（2026-09-26）。折り返す */
.tbpos__h a{color:var(--c-link)}
.tbpos__nav{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.tbpos__link{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-8);border-radius:var(--r-btn)}   /* 外の箱の枠の中なので、中の 2 つには枠を付けない（2026-09-28 りょう「枠が二重になるの気持ち悪い」）。押せる印は行と同じく地を塗る（癖 3） */
a.tbpos__link:hover{background:var(--panel)}
.tbpos__img{flex:none;width:120px}   /* 前後の回の表紙（2026-09-28）。回の一覧の小さい表紙と同じ 16:9 */
.tbpos__txt{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.tbpos__link:only-child{grid-column:1 / -1}
.tbpos__ttl{font-size:var(--fs-note);font-weight:700;line-height:1.5}
.tbpos__link--soon .tbpos__ttl{color:var(--muted)}
@media (max-width:600px){ .tbpos__nav{grid-template-columns:1fr} }
.tbpos + .join{margin-top:var(--gap-para)}
/* 教科書の進み具合（2026-09-25・進み具合を見せる仕組み）。公開した回の数と棒・読んだ回・読みたい */
.tbprog{margin-top:var(--gap-para);padding:var(--sp-16) var(--sp-20);border:1px solid var(--line);border-radius:var(--r-frame);background:var(--white)}
.tbprog__nums{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12);font-size:var(--fs-ui)}
.tbprog__nums b{font-size:var(--fs-h3);color:var(--c-link)}
.tbprog__read{color:var(--c-link);font-weight:700}
.tbprog__bar{height:6px;margin-top:var(--sp-8);border-radius:var(--r-round);background:var(--panel);overflow:hidden}
.tbprog__bar span{display:block;height:100%;border-radius:var(--r-round);background:var(--c-link)}
.tbprog__note{margin-top:var(--sp-8);font-size:var(--fs-note);color:var(--muted)}
.badge--done{margin-left:0;background:var(--c-link);color:var(--white)}
.badge--soon{background:var(--panel);color:var(--muted)}
.badge--line{border:1px solid var(--c-link);background:var(--white);color:var(--c-link)}   /* 枠だけの札（講座の帯の対象。2026-09-27） */
.tp-band__tags{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-8)}
.tp-band__tags .badge{margin-left:0}

.round__tag,.round__read{margin-left:var(--sp-8);color:var(--muted);font-weight:400;white-space:nowrap}   /* 回の横の小さい札（2026-09-27 にまとめた） */
.list__row--soon{align-items:center}
.want{flex:none;align-self:center;height:30.5px;padding:0 var(--sp-12);border:1px solid var(--line);border-radius:var(--r-round);background:var(--white);color:var(--muted);font-size:var(--fs-note);cursor:pointer}
.want[aria-pressed="true"]{border-color:var(--c-link);color:var(--c-link);font-weight:700}
/* 退会（W_退会・2026-09-25）。確認の囲みの中のチェックと、完了の文 */
.leave__check{margin-top:var(--sp-16)}
.leave__done{font-size:var(--fs-ui);text-align:center}

/* ========== トップ（J_TOP の構造・2026-09-23） ==========
   参照（Schoo の旧トップ）の節の並びと形を写す（サイトマップ §6-2「構造は採る・値は採らない」）。
   寸法は参照の実測（中身の幅 1100・スライド 260・カード 260・会員登録の丸ボタン 240/280×64 など）。
   文字・色・角丸・影は語彙の段に寄せた（参照の 52 / 27 / 20 / 13 / 11px は段に無いので 36 / 24 / 18 / 14・12 / 12、
   オレンジは --c-link、ベージュの面は --c-band、ランキングなどの薄い色は --c-frame）。余白と器の幅は :root の --tp-*・--gap-block・--pad-box（語彙 §3-1） */
.tp-fv{padding:0 0 var(--sp-20);box-shadow:var(--sh-header)}
/* FV の囲み（2026-09-25・Schoo の FV を測って写した）。今のスライドの画像を全体に敷き、80% の白を重ねる（Schoo の .js-slideBg と .js-slideBgWhite） */
.tp-fv__stage{position:relative;padding:var(--tp-fv-top) 0 72px;overflow:hidden}
.tp-fv__stage .tp-lead{margin-top:56px}   /* 画像が 16:9 で Schoo（4:3）より低いぶん、矢印とボタンのあいだと下の余白で FV の高さを Schoo（564）に寄せる */
.tp-fv__bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;transition:background-image .3s}
.tp-fv__bg::after{content:"";position:absolute;inset:0;background:var(--c-veil)}
.tp-fv__stage > :not(.tp-fv__bg){position:relative;z-index:1}
.tp-fv__track{display:flex;gap:55px;overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--sp-20) calc(50% - 142.5px) var(--sp-16);scrollbar-width:none}   /* スライド（人気記事。特集ができたら特集）。Schoo と同じ枠 340（画像 285 ＋ 間 55）。今の 1 枚を真ん中に置くため、左右に（幅の半分 − 142.5）を空ける（slick の centerMode）。上下の 20 は今の 1 枚を大きくしたときに切れないため */
.tp-fv__track::-webkit-scrollbar{display:none}
.tp-fv__track.is-js{scroll-snap-type:none;touch-action:pan-y}   /* JS が止める位置を決める（src/pages/index.astro のスライドの script）。縦のスクロールはブラウザのまま */
.tp-fv__slide{flex:none;width:285px;scroll-snap-align:center}
.tp-fv__img{display:block;aspect-ratio:16/9;overflow:hidden;transition:transform .3s}   /* 影は付けない（Schoo の FV の画像は影なし） */
.tp-fv__slide.is-current .tp-fv__img{transform:scale(1.123)}   /* 今の 1 枚は 320（Schoo の 285 → 320） */
.tp-fv__slide.is-current .tp-fv__cap{margin-top:var(--sp-20)}
.tp-fv__slide:hover .tp-fv__img{opacity:.7}
.tp-fv__cap{margin-top:var(--sp-8);font-size:var(--fs-note);font-weight:700;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:margin-top .3s}   /* Schoo の FV の見出しは 12px の太字 */
.tp-fv__ctrl{display:flex;align-items:center;justify-content:center;gap:var(--sp-16);margin-top:var(--sp-12)}
.tp-fv__arrow{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border-radius:50%;background:var(--c-link);color:var(--white)}
.tp-fv__arrow .ms{font-size:20px}
.tp-fv__dots,.tp-band__dots{display:flex;gap:var(--sp-20)}   /* 点はトップのスライドとコースの帯（スマホ）で同じ */
.tp-fv__dots button,.tp-band__dots button{display:block;width:10px;height:10px;padding:0;border-radius:50%;background:var(--line)}
.tp-fv__dots button.is-active,.tp-band__dots button.is-active{background:var(--c-link)}
.tp-band__dots{display:none}   /* パソコンは 3 枚を並べるので出さない（スマホだけ下で出す） */
/* 2 丸いボタン（参照の topLeadCta）。上に小さな吹き出し。トップでは「はじめての方へ」の入門 3 つ（吹き出しに本数） */
.tp-lead{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-12) var(--sp-20);margin-top:var(--sp-20);padding-top:var(--sp-20)}
.tp-lead__item{position:relative;display:inline-flex;align-items:center;justify-content:center;height:64px;border-radius:var(--r-round);font-size:var(--fs-h3);font-weight:700}
.tp-lead__item:hover{opacity:.7}
.tp-lead__item--line{width:240px;border:1px solid var(--ink);background:var(--white);box-shadow:var(--sh-float)}
.tp-lead__item--fill{width:280px;background:var(--c-link);color:var(--white)}   /* トップの会員登録（参照の FV の「会員登録（無料）」。2026-09-24 に戻した） */
.tp-lead__label{position:absolute;top:-19px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;height:32px;padding:0 var(--sp-16);border-radius:var(--r-round);background:var(--ink);color:var(--white);font-size:var(--fs-note);font-weight:700;white-space:nowrap;box-shadow:var(--sh-float)}
.tp-lead__label--light{background:var(--white);color:var(--c-link);border:1px solid var(--c-link)}
.tp-lead__sub{flex-basis:100%;text-align:center;font-size:var(--fs-note);color:var(--muted)}
.wrap--one>.member-free:first-child>.tp-free{margin-top:0}   /* 1 列の器の頭に無料の囲みを置くとき（会員特典）。器の上 50 と囲みの上の間が重なって空きすぎた */
/* 4 囲み（参照の freeClassBanner）。面の地・角丸・下に吹き出しの三角 */
.tp-free{position:relative;max-width:var(--tp-wrap-box);margin:var(--gap-block) auto 0;padding:var(--pad-box);border-radius:var(--r-frame);background:var(--c-band);text-align:center}
.tp-free::after{content:"";position:absolute;left:50%;bottom:-18px;margin-left:-18px;border:18px solid transparent;border-bottom:0;border-top-color:var(--c-band)}
.tp-free__h{font-weight:700}   /* トップは小見出しと大見出しで 1 つの h1（中は span） */
.tp-free__sub{display:block;font-size:var(--fs-h3);font-weight:700;letter-spacing:.04em}
.tp-free__num{margin-right:2px;font-size:1.4em;line-height:1}   /* 大見出しの数（Schoo は数を大きく、単位を小さく） */
.tp-free__unit{margin-right:var(--sp-8);font-size:var(--fs-h2)}
.tp-free__ttl{display:inline-block;margin-top:var(--sp-4);font-size:var(--fs-band);font-weight:700;line-height:1.4;background:linear-gradient(transparent 76%,var(--c-deco) 76%,var(--c-deco) 90%,transparent 90%)}
.tp-free__feats{display:flex;gap:var(--tp-feat-gap);margin-top:var(--sp-12)}
.tp-free__feat{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-12) var(--sp-16);border-radius:var(--r-badge);background:var(--white)}
.tp-free__h,.tp-free__txt,.tp-free__badge{word-break:keep-all;text-wrap:balance}   /* トップと会員特典の枠は <wbr> の所でだけ折り、行の長さをそろえる（1 語だけが次の行に落ちないように） */
.tp-free__txt{margin-block:auto;font-size:var(--fs-text);font-weight:700;letter-spacing:.04em}   /* 文が 2 行になる枠があっても、文は枠の上下の真ん中・札は枠の下で 3 つそろう */
.tp-free__txt strong{margin:0 var(--sp-4);font-size:var(--fs-h2)}
.tp-free__badge{align-self:stretch;padding:var(--sp-4) var(--sp-8);border-radius:var(--r-badge);background:var(--c-frame-dark);color:var(--white);font-size:var(--fs-ui);font-weight:700}   /* Schoo の無料の囲みの札（secondary-dark の地に白い文字）と同じ */
/* 5・10 カードの横送りの列（参照の m_popularList）。見出し＋右に「すべて見る」、右端の外に「次へ」 */
.tp-row{max-width:calc(var(--tp-wrap) + var(--edge) * 2);margin:var(--gap-block) auto 0;padding-inline:var(--edge)}
.lead-block__row,.tp-row__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16)}   /* 見出しの行（左に題・右にリンク）（2026-09-27 にまとめた） */
.tp-row__ttl{font-size:var(--fs-h2);font-weight:700;line-height:1.5;letter-spacing:.07em}
.tp-row__view{position:relative;margin-top:var(--sp-20)}
.tp-row__track{display:flex;gap:var(--sp-20);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:var(--sp-8)}
.tp-row__track::-webkit-scrollbar{display:none}
.tp-row__next{position:absolute;top:0;right:-66px;display:flex;align-items:center;justify-content:center;width:55px;height:146px;padding:0;background:none;color:var(--ink)}   /* 高さはカードの画像（260×16:9）に合わせる */
.tp-row__next .ms{font-size:48px}
.tp-card{flex:none;width:260px;scroll-snap-align:start}
.tp-card__img{display:block;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-img);background:var(--c-frame)}
.tp-card:hover .tp-card__img{opacity:.7}
.tp-card__ttl{margin-top:var(--sp-4);font-size:var(--fs-ui);font-weight:700;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-card__meta{margin-top:var(--sp-4);font-size:var(--fs-note);color:var(--weak)}
.tp-card__ttl--phrase{word-break:keep-all;overflow-wrap:anywhere}   /* テーマ・カリキュラムの名前（短い見出し）は <wbr> でだけ折る（D8-1）。記事の題のカードは普通に折る（記事のタイトルは書き手のもの＝D8-1 の例外） */
/* 9 灰色の帯（参照の shortCurriculum）。左に札・題・説明の 1 行（参照の subHead）・リンク、右にカード。
   参照の右の 3 枚は講座名を大きく入れた絵だが、JOURNAL の絵（LP のファーストビュー）は帯の大きさで文字が読めないので、絵の下に題とメタを置く（tp-card と同じ組み方。2026-09-27 りょう「画像だけスライドされても意味分からない」）。
   文が並ぶので、カードの間は参照の 8 ではなくトップの列と同じ 20。カードが多い帯（カリキュラム）は右をトップの列と同じ横送りにする（tp-band--row） */
.tp-band{margin-top:var(--tp-sec);background:var(--panel)}
.tp-member{margin-top:var(--tp-sec)}
.tp-member .tp-free{margin-top:0}   /* トップの会員特典（2026-09-27）。囲みは自分で幅と左右の余白を持つので、器は上の間だけ（tp-arch に入れると、スマホで左右の余白が二重になった） */
.tp-band__in{display:flex;max-width:calc(var(--tp-wrap) + var(--edge) * 2);margin:0 auto;padding:var(--sp-20) var(--edge)}
.tp-band__head{flex:none;width:244px;padding-right:var(--sp-20)}
.tp-band__badge{display:inline-block;padding:0 var(--sp-8);border:1px solid var(--c-deco);border-radius:var(--r-badge);background:var(--white);color:var(--c-link);font-size:var(--fs-ui)}
.tp-band__ttl{margin-top:var(--sp-16);font-size:var(--fs-h2);font-weight:700;line-height:1.5}
.tp-band__sub{margin-top:var(--sp-16);font-size:var(--fs-ui);font-weight:700;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}   /* 参照の subHead（太字 14・題の下 16）。文の中の <wbr> でだけ折る（D8-1） */
.tp-band__sub mark{background:linear-gradient(transparent 76%,var(--c-deco) 76%,var(--c-deco) 90%,transparent 90%);color:inherit}   /* 参照の attention（語の下半分に色）。印は会員特典の題の下線と同じ形 */
.tp-band__more{margin-top:var(--sp-16)}
.tp-band__list{flex:1;display:flex;gap:var(--sp-20);min-width:0}
.tp-band__item{flex:1;min-width:0}
.tp-band__goal{margin-top:var(--sp-4);font-size:var(--fs-ui);line-height:1.5;color:var(--ink)}   /* 何を仕上げるか（2026-09-28）。読ませる 1 行なので墨 */
.tp-band__img{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-frame)}
.tp-band--row .tp-row__view{flex:1;min-width:0;margin-top:0}
.tp-card__img img,.tp-band__img img{width:100%;height:100%;object-fit:cover}   /* 枠いっぱいの画像（display は親の決まり）（2026-09-27 にまとめた） */
.tp-band__item:hover .tp-band__img{opacity:.7}
/* 10 ソフト別（参照の archiveSection）。中央の見出し → 記事の列 → 見出しだけの行 */
.tp-arch__ttl{text-align:center;font-size:var(--fs-band);font-weight:700;line-height:1.5;letter-spacing:.07em}
.tp-row--in{max-width:none;margin:var(--gap-block) 0 0;padding:0}
/* 11 語の一覧（参照の categoryList）。枠線のピル・右に ＞ */
.tp-arch,.tp-pills{max-width:calc(var(--tp-wrap) + var(--edge) * 2);margin:var(--tp-sec) auto 0;padding-inline:var(--edge)}   /* トップの節の器（2026-09-27 にまとめた） */
.tp-pills__list{display:flex;flex-wrap:wrap;gap:var(--sp-20) var(--sp-16);margin-top:var(--sp-20)}
.tp-pill{display:inline-flex;align-items:center;gap:var(--sp-8);height:38px;padding:0 var(--sp-12) 0 var(--sp-20);border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);font-size:var(--fs-ui)}
.tp-pill .ms{font-size:14px}
.tp-pill:hover{background:var(--panel)}
/* グレーの箱をカード・帯の画像の場所に置くとき（サムネイルは後で作る・2026-09-23 りょう） */
.tp-card__img.gbox{display:flex}
/* 右端の外の「次へ」は、器より画面が狭いと画面の外へ出る。1300 未満は列の上に重ね、白く透かす */
@media (max-width:1299px){
  .tp-row__next{right:0;background:var(--c-veil)}
}
@media (max-width:896px){
  .tp-fv__stage{padding-bottom:var(--gap-block)}   /* スマホは Schoo の FV（550）に合わせて、PC で足した余白を入れない */
  .tp-fv__stage .tp-lead{margin-top:var(--sp-20)}
  .tp-fv__track{gap:39px}   /* スマホも Schoo と同じ画像 285（枠 324 ＝ 画像 285 ＋ 間 39） */
  .tp-fv__dots{gap:var(--sp-12)}
  .tp-lead{flex-direction:column;align-items:center;gap:var(--tp-lead-gap-sp)}
  .tp-lead__item--line,.tp-lead__item--fill{width:calc(100% - var(--edge) * 2);max-width:358px}
  .tp-free{margin-inline:var(--edge);padding-inline:var(--sp-20)}
  .tp-free__feats{flex-direction:column;gap:var(--sp-12)}
  .tp-free__h .tp-free__ttl{font-size:min(var(--fs-band),9vw)}   /* トップの大見出しは 360 幅でも 1 行に入る大きさに。入らない幅では <wbr> の所（「806本／すべて無料」）で折る */
  .tp-row__next{display:none}   /* スマホは指で送る */
  .tp-row__ttl{font-size:var(--fs-h3)}
  .tp-card{width:170px}
  .tp-arch__ttl{font-size:var(--fs-h2)}
  .tp-band__in{flex-direction:column}
  .tp-band__head{width:auto;padding-right:0}
  .tp-band__list{margin-top:var(--sp-20);overflow-x:auto;scroll-snap-type:x mandatory;gap:0;scrollbar-width:none}   /* スマホは 1 枚ずつ送るスライド（2026-09-24 りょう）。前は 70vw の横送りで次の 1 枚の端を見せていた */
  .tp-band__list::-webkit-scrollbar{display:none}
  .tp-band__item{flex:0 0 100%;scroll-snap-align:center}
  .tp-band--row .tp-band__list{overflow:visible}   /* 横送りは中の列（tp-row__track）が受け持つ */
  .tp-band__dots{display:flex;justify-content:center;margin-top:var(--sp-12)}
}

/* ========== カードの中の実物の画像（型 11 に実データを入れたときだけ要るもの） ==========
   型は画像をグレーの箱で置いていた。記事のサムネ（og_image）とソフトのロゴを入れると箱の中に絵が入る。
   ロゴは縦横の比がばらばらなので、切らずに収める（contain）。地は面の色。 */
.card__img img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-img)}
.card__img--logo{background:var(--panel);color:transparent}
.tp-card__img.tp-card__img--logo img,.card__img--logo img{object-fit:contain;padding:var(--sp-20)} /* ロゴは切らずに収める */   /* ロゴの画像（余白を取って収める）（2026-09-27 にまとめた） */
.card .desc{margin-top:var(--sp-4)}   /* カードの中の説明は説明ブロックの 16 ではなく 4（題との塊に見せる） */

/* ========== ソフトの面の①に足したもの ==========
   前のソフトのページにあった概要（価格・OS・提供元・編集部評価）とデータベースへのリンク。説明の下に、メタの行と文字リンク（型の .more）で置く */
.lead-block__facts{margin-top:var(--sp-12);flex-wrap:wrap;height:auto;gap:var(--sp-4) var(--sp-16)}   /* .meta は 1 行固定（高さ 18・折り返さない）。4 つ並ぶとスマホで最大 196px はみ出したので、ここだけ折り返す */
.lead-block__facts span+span::before{content:none}   /* 折り返すと 2 行目の頭に区切りの「｜」が来るので、区切りは間隔（16）で見せる */
.lead-block__link{margin-top:var(--sp-8)}

/* ========== ページ送りの「…」と検索（Pagefind） ==========
   最新は 40 ページを超えるので、ページ送りは最初・最後と今の前後 2 つだけ出し、間を「…」で詰める。
   Pagefind の見た目は変数で語彙の値に寄せる。pagefind-ui.css が後から読まれるので、.pf で 1 段強くする */
.pager__gap{display:inline-flex;align-items:flex-end;height:36px;color:var(--weak);font-size:var(--fs-ui)}

.follow{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-4);min-width:96px;height:36px;padding:0 var(--sp-16);border:1px solid var(--c-link);border-radius:var(--r-round);background:var(--white);color:var(--c-link);font-size:var(--fs-ui);font-weight:700;white-space:nowrap;cursor:pointer}   /* フォロー（2026-09-25）。2026-09-27 に 2 か所の定義を 1 つにした（後ろの値が効いていた） */
.follow:hover{background:var(--c-link);color:var(--white);opacity:.7}
.band__acts{display:flex;align-items:center;gap:var(--sp-8);margin-left:var(--sp-8)}   /* 教科書の帯のメタの行のボタン（フォロー・お気に入り） */
.band__acts .fav{margin-left:0}

/* ========== 検索結果（/search/。2026-09-25。サイトマップ §9 の部品） ==========
   種類の切り替えは .tabs、関連するソフト名は .pills、結果の行は .list__row--result（どれも今ある部品） */
.win.win--full{margin-bottom:var(--sp-8)}
.sr-tools{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin-top:var(--sp-16)}
.sr-tools .pills{flex:1}
.sr-sort select{height:36px;padding:0 var(--sp-12);border:1px solid var(--line);border-radius:var(--r-btn);background:var(--white);font-size:var(--fs-ui)}
.count#sr-count{margin-top:var(--sp-16)}
.sr-more{margin-top:var(--sp-20);text-align:center}
.sr-guide__why{margin-top:var(--sp-20);font-size:var(--fs-ui)}
.sr-db{margin-top:var(--gap-block);font-size:var(--fs-ui)}
.sr-db a{display:inline-flex;align-items:center;gap:var(--sp-4);color:var(--c-link);text-decoration:underline}
.sr-db .ms{font-size:16px}
.list__sub mark{background:none;color:var(--c-link);font-weight:700}   /* 抜粋の中の一致した語 */
@media (max-width:896px){ .sr-tools{flex-direction:column;align-items:stretch} }

/* ========== 紹介ページの型（LP）の部品（2026-09-27 りょう「徹底して」） ==========
   講座の紹介（/courses/）・編集部（/about/）・はじめての方へ（/start/）で使う。名前はページではなく役割で付ける（前は crx-・abx- とページごとに持っていた）。
   参照: Schoo の AI ハンズオン講座（webinar.schoo.jp/ai）と「スクーってなに？」（schoo.jp/about）のソース。値は参照そのままではなく語彙の段に寄せた
   （02_journal_語彙_2026-09-18.md §3-1「紹介ページの型（LP）の値」）。高さ・幅など部品の寸法だけは部品の中に書く。 */
.lp--band{background:var(--c-band)}
.lp :is(.lp-h,.lp-card__ttl,.lp-point__ttl,.lp-voice__ttl,.lp-issue__ttl,.lp-step__ttl,.lp-photo__ttl,.lp-hero__ttl,.lp-circles__ttl){word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}   /* 見出しは組み立て後に入れた <wbr> の所だけで折る（astro.config.mjs の wbrHeadings・D8-1。2026-09-28 に iPhone で効かない auto-phrase から替えた） */
.lp :is(.lp-lead,.lp-hero__lead){text-wrap:pretty}   /* 見出しは文節で折り、行の長さをそろえる（auto-phrase は Chrome・Edge だけに効く） */
/* 節・見出しの塊 */
.lp-sec{padding:var(--lp-sec) var(--lp-edge)}
.lp-sec--tint{background:linear-gradient(var(--c-band),var(--white))}
.lp-sec--band{background:var(--c-band)}
.lp-head{display:flex;flex-direction:column;align-items:center;gap:var(--sp-12);text-align:center}
.lp-eyebrow{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);height:40px;padding:0 var(--pad-box);border-radius:var(--r-round);background:var(--c-link);color:var(--white);font-size:var(--fs-h2);font-weight:700}
.lp-eyebrow--line{padding:0 var(--lp-box);border:1px solid var(--c-link);background:none;color:var(--c-link)}
.lp-eyebrow--plain{height:auto;padding:0;background:none;color:var(--ink)}
.lp-eyebrow--plain .ms{color:var(--c-link)}
.lp-h{font-size:var(--fs-band);font-weight:700;line-height:1.5;text-align:center}
.lp-h em{font-style:normal;color:var(--c-link)}
.lp-h--left{text-align:left}
.lp-h--s{font-size:var(--fs-h2)}
.lp-h--on-dark{color:var(--white)}
.lp-eyebrow+.lp-h{margin-top:var(--sp-8)}
.lp-lead{max-width:780px;margin:var(--pad-box) auto 0;font-size:var(--fs-h3);font-weight:500;line-height:1.6;color:var(--muted);text-align:center}
.lp-lead--left{max-width:none;margin-left:0;font-size:var(--fs-text);font-weight:400;line-height:1.8;color:var(--ink);text-align:left}
.lp-lead--on-dark{color:var(--white)}
.lp-lead--end{margin-top:var(--lp-head)}
.lp-note{margin-top:var(--sp-12);font-size:var(--fs-note);color:var(--muted);text-align:center}
.faq__a a,.auth__links a,.auth__note a,.tp-lead__sub a,.lp-note a{color:var(--c-link);text-decoration:underline} /* 規約・プライバシーのリンクも同じ見た目（灰色の地の文のままだとリンクに見えなかった） */   /* 文中のリンク（2026-09-27 にまとめた） */
.lp-link{font-size:var(--fs-ui);color:var(--c-link)}
.lp-link:hover{text-decoration:underline}
.lp-actions{margin-top:var(--lp-head);text-align:center}
/* 丸いボタンの大きさ（.btn-round に足す。--m 42・--l 60 幅 340・--xl 72） */
.btn-round--m{width:auto;height:42px;padding-inline:var(--lp-box);font-size:var(--fs-text);font-weight:700}
.btn-round--l{width:340px;height:60px;font-size:var(--fs-h3);font-weight:700}
.btn-round--xl{width:auto;min-width:340px;height:72px;padding-inline:var(--lp-box);font-size:var(--fs-h2);font-weight:700}
/* FV（写真を全面に敷き、左に見出し・本文・ボタン、下の帯に数字） */
.lp-hero{position:relative;display:flex;flex-direction:column;min-height:750px;overflow:hidden;background:var(--c-band)}
.lp-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.lp-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--c-veil) 0%,var(--c-veil) 38%,transparent 62%)}   /* 文字の下を白くぼかす（この写真は人物が左まであり、1024 で顔と文字が重なった） */
.lp-hero__in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:var(--pad-box);max-width:668px;margin-bottom:auto;padding:calc(var(--lp-sec) * 2) 0 0 var(--lp-edge)}
.lp-hero__ttl{font-size:var(--fs-display);font-weight:700;line-height:1.35;letter-spacing:-.04em}
.lp-hero__lead{max-width:470px;padding-left:var(--pad-box);font-size:var(--fs-h3);line-height:1.6;letter-spacing:.04em}
.lp-hero__in .btn-round{margin-top:var(--sp-16)}
.lp-hero__stats{position:relative;z-index:2;display:flex;align-items:center;gap:var(--lp-box);padding:var(--pad-box) var(--lp-edge) var(--pad-box) var(--lp-head);background:var(--c-veil)}
.lp-hero__stat{display:flex;flex-direction:column;align-items:center;min-width:156px;padding-left:var(--lp-box)}

.lp-hero__lbl{font-size:var(--fs-h3)}
.lp-hero__val,.lp-stats__val{font-family:Roboto,sans-serif;font-size:var(--fs-display);font-weight:700;line-height:1}
.lp-hero__val small,.lp-stats__val small{margin-left:var(--sp-4);font-size:var(--fs-h2)}
.lp-hero__sep{align-self:stretch;width:1px;background:var(--line)}
.lp-hero__note{align-self:flex-end;font-size:var(--fs-note);color:var(--muted)}
/* 写真の枠（写真の上に白い字の見出し） */
.lp-photo{position:relative;margin:var(--lp-head) var(--lp-head) 0;overflow:hidden;border-radius:var(--r-frame)}
.lp-photo__img{display:block;width:100%;height:507px;object-fit:cover}
.lp-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--c-shade),transparent 70%)}
.lp-photo__txt{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding-left:calc(var(--lp-sec) + var(--lp-head));color:var(--white)}
.lp-photo__sub{font-size:var(--fs-h2);font-weight:700}
.lp-photo__ttl{margin-top:var(--sp-4);font-size:var(--fs-band);font-weight:700;line-height:1.57}
.lp-intro{margin:0 auto;padding:var(--sp-20) var(--sp-16);max-width:760px;text-align:center;font-size:var(--fs-h3);font-weight:700;line-height:2.2}
/* 縦のカード（上に絵・札 2 つ・題・仕様の行・ボタン） */
.lp-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--pad-box) var(--sp-16);margin-top:var(--lp-head)}
.lp-card{display:flex;flex-direction:column;width:282px;overflow:hidden;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-float)}
.lp-card__img{display:block;height:148px;overflow:hidden}
.cover img,.ft__banner img,.tp-fv__img img,.lp-card__img img{display:block;width:100%;height:100%;object-fit:cover} /* 1 枚目のオンライン講座のバナー（2026-09-24） */   /* 枠いっぱいの画像（2026-09-27 にまとめた） */
.lp-card__img .cover{height:100%;aspect-ratio:auto;border-radius:0}
.lp-card__tags{display:flex;flex-wrap:wrap;gap:var(--sp-4);padding:var(--sp-8) var(--sp-12)}
.lp-tag{display:inline-flex;align-items:center;height:30px;padding:0 var(--sp-16);border-radius:var(--r-pill);background:var(--c-link);color:var(--white);font-size:var(--fs-ui);font-weight:500}
.lp-tag--line{padding:0 var(--sp-12);border:1px solid var(--c-link);background:var(--white);color:var(--c-link)}
.lp-card__body{display:flex;flex-direction:column;flex:1;padding:var(--pad-box) var(--sp-16)}
.lp-card__ttl{font-size:var(--fs-h2);font-weight:700;line-height:1.4}
.lp-card__sub{margin-top:var(--sp-4);font-size:var(--fs-text)}
.lp-card__spec{display:flex;flex-direction:column;gap:var(--sp-8);margin:var(--lp-head) 0 var(--pad-box);font-size:var(--fs-ui);color:var(--muted)}
.lp-card .btn-round{margin-top:auto}
/* 特徴の箱（POINT 01・グラデーション・絵は右下） */
.lp-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--pad-box);max-width:1200px;margin:var(--lp-head) auto 0}
.lp-point{display:flex;flex-direction:column;padding:var(--lp-box) 0 0 var(--lp-box);overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(var(--c-band),var(--white))}
.lp-point__no{display:flex;align-items:baseline;gap:var(--sp-4)}
.lp-point__no span{font-size:var(--fs-h3);font-weight:700}
.lp-point__no b{font-family:Roboto,sans-serif;font-size:var(--fs-h2);font-weight:700}
.lp-point__ttl{margin-top:var(--sp-12);padding-right:var(--lp-box);font-size:var(--fs-h2);font-weight:700;line-height:1.4;letter-spacing:.08em}
.lp-point__txt{margin-top:var(--sp-12);padding-right:var(--lp-box);font-size:var(--fs-ui);line-height:1.8;color:var(--muted)}
.lp-point__img{display:block;margin-top:auto;padding-top:var(--pad-box)}
.lp-point__img img{display:block;width:100%;aspect-ratio:352/213;object-fit:cover;border-radius:var(--r-xl) 0 0 0;background:var(--white)}
.lp-point__img--fit img{object-fit:contain}
/* 白い大きい箱（数字・声などをまとめる） */
.lp-box{display:flex;flex-direction:column;align-items:center;max-width:1080px;margin:0 auto;padding:var(--lp-box) var(--pad-box) var(--pad-box);border-radius:var(--r-xl);background:var(--white)}
.lp-box>.lp-h{margin-top:var(--lp-head)}
.lp-box__sep{width:100%;max-width:880px;margin:var(--lp-block) 0 0;border:0;border-top:1px solid var(--line)}
.lp-stats{display:grid;grid-template-columns:repeat(2,minmax(0,365px));gap:var(--sp-8);margin-top:var(--lp-head);overflow:hidden;border-radius:var(--r-lg)}
.lp-stats__item{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16);padding:var(--lp-box) var(--pad-box);background:var(--c-band)}
.lp-stats__lbl{font-size:var(--fs-h2);line-height:1.1}
.lp-stats__val{color:var(--c-link)}
.lp-voices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);width:100%;max-width:1032px;margin-top:var(--lp-head);overflow:hidden;border-radius:var(--r-lg)}
.lp-voice{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16);padding:var(--lp-box) var(--pad-box);background:var(--c-band);text-align:center}
.lp-voice__who{display:inline-flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4) var(--sp-12) var(--sp-4) var(--sp-4);border-radius:var(--r-pill);background:var(--ink);color:var(--white);font-size:var(--fs-note)}
.lp-voice__who img{width:24px;height:24px;border-radius:50%;object-fit:cover}
.lp-voice__ttl{font-size:var(--fs-h2);font-weight:700;line-height:1.3;color:var(--c-link)}
.lp-voice__txt{font-size:var(--fs-ui);line-height:1.8;color:var(--muted);text-align:left}
/* 困りごとのカード（白・枠線） */
.lp-issues{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-20);margin-top:var(--lp-head)}
.lp-issue{display:flex;flex-direction:column;align-items:center;gap:var(--sp-16);width:285px;padding:var(--pad-box);border:1px solid var(--c-frame-dark);border-radius:var(--r-frame);background:var(--white);text-align:center}
.lp-issue__ttl{font-size:var(--fs-h2);font-weight:700;line-height:1.4;color:var(--c-link)}
.lp-issue__txt{font-size:var(--fs-ui);line-height:1.8;color:var(--muted)}
/* 流れ（STEP・浮かせたカードにアイコン） */
.lp-steps{display:flex;justify-content:center;gap:var(--sp-20);margin-top:var(--lp-head)}
.lp-step{display:flex;flex-direction:column;align-items:center;gap:var(--sp-12);flex:1 1 0;min-width:0;max-width:240px}
.lp-step__no{font-family:Roboto,sans-serif;font-size:var(--fs-h3);font-weight:700;letter-spacing:.05em;color:var(--c-link)}
.lp-step__card{display:flex;flex-direction:column;align-items:center;gap:var(--sp-8);width:100%;flex:1;padding:var(--lp-box) var(--pad-box);border-radius:var(--r-frame);background:var(--white);box-shadow:var(--sh-float);text-align:center}
.lp-issue__icon .ms,.lp-step__icon{font-size:var(--fs-band);color:var(--c-link)}   /* 紹介ページの大きいアイコン（2026-09-27 にまとめた） */
.lp-step__ttl{font-size:var(--fs-h3);font-weight:700;line-height:1.5}
.lp-step__txt{font-size:var(--fs-ui);line-height:1.7;color:var(--muted);text-align:left}
/* 丸の 3 ステップ（白い箱・番号・丸にアイコン） */
.lp-circles{max-width:1000px;margin:var(--lp-sec) auto 0;padding:var(--lp-box) 0;border-radius:var(--r-lg);background:var(--white);box-shadow:var(--sh-float);text-align:center}
.lp-circles__list{display:flex;justify-content:center;gap:var(--lp-sec);margin-top:var(--sp-12)}
.lp-circles__list li{display:flex;flex-direction:column;align-items:center;width:170px}
.lp-circles__no{font-family:Roboto,sans-serif;font-size:var(--fs-band);line-height:1.4}
.lp-circles__circle{display:flex;align-items:center;justify-content:center;width:170px;height:170px;border-radius:50%;background:var(--c-band)}
.lp-circles__circle .ms{font-size:var(--fs-display);color:var(--c-link)}
.lp-circles__ttl{margin-top:var(--sp-12);font-size:var(--fs-text);font-weight:700}
.lp-go{display:flex;flex-direction:column;align-items:center;gap:var(--lp-head);margin-top:var(--lp-block);font-size:var(--fs-h2);font-weight:700;text-align:center}
/* 記事は無料の帯（左に見出し、右に教科書の表紙） */
.lp-free{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--pad-box) var(--lp-head);align-items:center;margin-top:var(--lp-head);padding:var(--lp-sec) calc(var(--lp-edge) * 2) var(--lp-head);background:linear-gradient(90deg,var(--white),transparent)}
.lp-free__shelf{display:grid;grid-template-columns:repeat(2,220px);gap:var(--sp-12)}
.lp-free__shelf a:hover{opacity:.8}
.lp-free .lp-link{grid-column:2;justify-self:end}
/* 左右の段（文と、白いカード・絵・画面） */
.lp-split{display:grid;grid-template-columns:minmax(0,570px) minmax(0,1fr);gap:var(--lp-head);align-items:center;margin-top:var(--lp-sec);padding-left:calc(var(--lp-edge) * 2)}
.lp-split--rev{grid-template-columns:minmax(0,641px) minmax(0,644px);padding-left:0;padding-right:calc(var(--lp-edge) * 1.5)}
.lp-split__txt{min-width:0}
.lp-split .btn-round{margin-top:var(--pad-box)}
.lp-split__card{padding:var(--lp-head);border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--white);box-shadow:var(--sh-float)}
.lp-split__img{align-self:stretch;overflow:hidden;border-radius:0 var(--r-lg) var(--r-lg) 0;box-shadow:var(--sh-float)}
.lp-split__img img{display:block;width:100%;height:100%;min-height:450px;object-fit:cover}
.lp-split__shot{justify-self:end;width:100%;max-width:570px;overflow:hidden;box-shadow:var(--sh-float)}
.lp-split__shot img{display:block;width:100%;height:auto}
.lp-cats__h{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-ui);font-weight:700}
.lp-cats__h .ms{font-size:var(--fs-h3);color:var(--c-link)}
.lp-cats__h:not(:first-child){margin-top:var(--pad-box)}
.lp-pills{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-top:var(--sp-12)}
.lp-pills a{display:inline-flex;align-items:center;height:25px;padding:var(--sp-4) var(--sp-12);border-radius:var(--r-pill);background:var(--c-band);font-size:var(--fs-note)}
.btn-round--line:hover,.follow[aria-pressed="true"],.lp-pills a:hover{background:var(--c-link);color:var(--white)}   /* 押すと塗る（2026-09-27 にまとめた） */
/* 暗い節（講座の特徴の 3 枠・○×の表） */
.lp-dark{margin-top:var(--lp-sec);padding:var(--lp-sec) 0 calc(var(--lp-sec) + var(--sp-20));background:linear-gradient(0deg,var(--c-dark),var(--c-dark-2))}
.lp-dark__in{max-width:1008px;margin:0 auto;padding:0 var(--sp-16)}
.lp-dark .lp-lead{max-width:620px}
.lp-plus{display:grid;grid-template-columns:repeat(3,310px);justify-content:space-between;margin-top:var(--lp-head)}
.lp-plus__img{display:block;height:184px;overflow:hidden;border-radius:var(--r-lg);background:var(--white)}
.lp-plus__img img{display:block;width:100%;height:100%;object-fit:contain}
.lp-plus__ttl{margin-top:var(--sp-16);font-size:var(--fs-h3);font-weight:700;color:var(--c-band);text-align:center}
.lp-plus__txt{margin-top:var(--sp-8);font-size:var(--fs-ui);line-height:1.45;color:var(--on-dark-muted)}
.lp-compare{max-width:720px;margin:var(--lp-sec) auto 0}
.lp-compare__head,.lp-compare__price,.lp-compare__cells{display:grid;grid-template-columns:1fr 1fr}
.lp-compare__head span:first-child,.lp-compare__price span:first-child{display:none}
.lp-compare__col{padding:var(--sp-16) 0;text-align:center;font-size:var(--fs-text);font-weight:700;color:var(--on-dark-muted)}
.lp-compare__col--em{border-radius:var(--r-btn) var(--r-btn) 0 0;background:var(--c-link);color:var(--white)}
.lp-compare__price{border-radius:var(--r-btn) var(--r-btn) 0 0;background:var(--white)}
.lp-compare__price>span{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);padding:var(--sp-20) var(--sp-8)}
.lp-compare__price b{font-family:Roboto,"Noto Sans JP",sans-serif;font-size:var(--fs-h2);font-weight:700}
.lp-compare__price small{font-size:var(--fs-note);color:var(--muted)}
.lp-compare__k{padding:0 var(--sp-8);background:var(--c-band);text-align:center;font-size:var(--fs-ui);font-weight:700;line-height:36px}
.lp-compare__cells{height:72px;background:var(--white)}
.lp-compare__row:last-child .lp-compare__cells{border-radius:0 0 var(--r-btn) var(--r-btn)}
.lp-compare__cells>span,.lp-compare__cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--sp-4)}
.lp-compare__cells>.lp-mark{align-self:center;justify-self:center}
.lp-compare__cell small{font-size:var(--fs-mini);color:var(--muted)}
.lp-mark{display:block;width:24px;height:24px}
.lp-mark--o{border:3px solid var(--c-link);border-radius:50%}
.lp-mark--x{position:relative}
.lp-mark--x::before,.lp-mark--x::after{content:"";position:absolute;left:50%;top:50%;width:26px;height:3px;background:var(--c-frame-dark);transform:translate(-50%,-50%) rotate(45deg)}
.lp-mark--x::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* 会員登録でできること（白い箱にチェックの行） */
.lp-benefit{max-width:528px;margin:var(--lp-block) auto 0;padding:var(--pad-box);border-radius:var(--r-lg);background:var(--white)}
.lp-benefit__h{text-align:center;font-size:var(--fs-h3);font-weight:700;line-height:1.67}
.lp-benefit ul{display:flex;flex-direction:column;gap:var(--sp-12);margin-top:var(--sp-12)}
.lp-benefit li,.lp-fixed__list li{display:flex;align-items:flex-start;gap:var(--sp-8);font-size:var(--fs-text);line-height:1.45}
.lp-benefit li::before,.lp-fixed__list li::before{content:"check_circle";flex:none;font-family:"Material Symbols Rounded";font-size:var(--fs-h3);line-height:1.2;color:var(--c-link);-webkit-font-feature-settings:"liga";font-feature-settings:"liga"}
/* 運営と関連サイト・更新の記録 */
.lp-info{max-width:720px;margin:0 auto;padding:var(--lp-sec) var(--sp-16)}
.lp-info>.lp-h:not(:first-child){margin-top:var(--lp-block)}
.lp-dl{display:grid;grid-template-columns:140px minmax(0,1fr);margin-top:var(--pad-box);border-top:1px solid var(--line)}
.lp-dl dt,.lp-dl dd{margin:0;padding:var(--sp-16) 0;border-bottom:1px solid var(--line);line-height:1.9}
.lp-dl dt{font-weight:700}
.lp-dl a,.lp-log a{color:var(--c-link)}
.lp-dl a{text-decoration:underline}
.lp-log{display:flex;flex-direction:column;margin-top:var(--pad-box);border-top:1px solid var(--line)}
.lp-log li{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-12);padding:var(--sp-12) 0;border-bottom:1px solid var(--line);font-size:var(--fs-ui)}
.lp-log__date{color:var(--muted)}
.lp-log__kind{font-weight:700}
.lp-info .list{margin-top:var(--pad-box)}
/* 最後の CTA・画面の下の固定の帯 */
.lp-end{display:flex;flex-direction:column;align-items:center;gap:var(--lp-head);text-align:center}
.lp-end .lp-lead{margin-top:0}
.lp-end .lp-note{margin-top:calc(var(--pad-box) * -1)}
.lp-fixed{position:fixed;left:0;right:0;bottom:0;z-index:9;display:flex;align-items:center;justify-content:center;gap:var(--lp-head);height:104px;padding:var(--sp-20) var(--sp-16);background:var(--white);box-shadow:var(--sh-header)}
.lp-fixed[hidden]{display:none}
.lp:has(.lp-fixed:not([hidden])){padding-bottom:104px}
.lp-fixed__list{display:flex;flex-direction:column;gap:var(--sp-4)}
.lp-fixed__list li{font-size:var(--fs-ui)}
@media (max-width:1280px){
  .lp-card{width:min(282px,calc((100% - var(--pad-box)) / 3))}
  .lp-issue{width:min(285px,calc((100% - var(--lp-head)) / 3))}
  .lp-points{gap:var(--sp-20)}
  .lp-circles__list{gap:var(--lp-head)}
  .lp-plus{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-20)}
}
@media (max-width:896px){
  .lp .h2,.lp-eyebrow{font-size:var(--fs-text)}
  .lp-eyebrow--line{padding:0 var(--pad-box)}
  .lp-h{font-size:var(--fs-h2)}
  .lp-lead{font-size:var(--fs-text);text-align:left}
  .btn-round--l,.btn-round--xl{width:100%;min-width:0;max-width:358px;height:56px;font-size:var(--fs-h3)}
  .lp-split .btn-round,.lp-card .btn-round{width:100%}
  .lp-hero{min-height:0}
  .lp-hero__bg{position:relative;height:auto;aspect-ratio:1;max-height:480px;object-position:72% center}
  .lp-hero::before{display:none}
  .lp-hero__in{max-width:none;margin:0;padding:var(--lp-head) var(--sp-16) var(--pad-box)}
  .lp-hero__lead{padding-left:var(--sp-8);font-size:var(--fs-ui)}
  .lp-hero__stats{flex-wrap:wrap;justify-content:center;gap:var(--sp-16);padding:var(--sp-16)}
  .lp-hero__stat{min-width:0;padding-left:0}
  .lp-hero__lbl{font-size:var(--fs-note)}
  .lp-hero__note{flex-basis:100%;align-self:center;text-align:center}
  .lp-photo{margin:var(--sp-16) var(--sp-16) 0}
  .lp-photo__img{height:auto;aspect-ratio:4/3}
  .lp-photo__txt{padding:0 var(--sp-20)}
  .lp-photo__sub{font-size:var(--fs-h3)}
  .lp-photo__ttl{font-size:var(--fs-h2)}
  .lp-intro{font-size:var(--fs-text);line-height:1.9;text-align:left}
  .lp-card{width:100%;max-width:358px}
  .lp-points{grid-template-columns:minmax(0,1fr);gap:var(--sp-20)}
  .lp-point{padding:var(--pad-box) 0 0 var(--pad-box);border-radius:var(--r-lg)}
  .lp-point__no span{font-size:var(--fs-note)}
  .lp-point__no b{font-size:var(--fs-h3)}
  .lp-point__ttl{font-size:var(--fs-h3);letter-spacing:.06em;padding-right:var(--pad-box)}
  .lp-point__txt{padding-right:var(--pad-box)}
  .lp-box{padding:var(--lp-box) var(--sp-16)}
  .lp-stats,.lp-voices{grid-template-columns:minmax(0,1fr)}
  .lp-stats{width:100%}
  .lp-stats__lbl{font-size:var(--fs-text)}
  .lp-voice{padding:var(--sp-12) var(--sp-8) var(--sp-20)}
  .lp-voice__ttl{font-size:var(--fs-h3)}
  .lp-issue{width:100%;max-width:358px}
  .lp-issue__ttl{font-size:var(--fs-h3)}
  .lp-steps{flex-wrap:wrap}
  .lp-step{flex:none;width:100%;max-width:358px}
  .lp-circles{margin:var(--lp-sec) var(--sp-16) 0;padding:var(--pad-box) var(--sp-16)}
  .lp-circles__list{flex-direction:column;align-items:center;gap:var(--sp-16)}
  .lp-circles__circle{width:120px;height:120px}
  .lp-go{margin-top:var(--lp-head);padding:0 var(--sp-16);font-size:var(--fs-h3)}
  .lp-free{grid-template-columns:minmax(0,1fr);margin-top:var(--pad-box);padding:var(--lp-head) var(--sp-16) var(--pad-box)}
  .lp-free__shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-free .lp-link{grid-column:1}
  .lp-split,.lp-split--rev{grid-template-columns:minmax(0,1fr);gap:var(--pad-box);margin-top:var(--lp-sec);padding:0 var(--sp-16)}
  .lp-split--rev .lp-split__img{order:2}
  .lp-split__card{padding:var(--pad-box) var(--sp-20);border-radius:var(--r-lg)}
  .lp-split__img{border-radius:var(--r-lg)}
  .lp-split__img img{min-height:0;aspect-ratio:16/9}
  .lp-plus{grid-template-columns:minmax(0,1fr);gap:var(--pad-box)}
  .lp-compare{margin-top:var(--lp-head)}
  .lp-benefit{padding:var(--sp-20)}
  .lp-benefit li{font-size:var(--fs-ui)}
  .lp-dl{grid-template-columns:minmax(0,1fr)}
  .lp-dl dt{padding-bottom:0;border-bottom:0}
  .lp:has(.lp-fixed:not([hidden])){padding-bottom:84px}
  .lp-fixed{height:auto;padding:var(--sp-12) var(--sp-16)}
  .lp-fixed__list{display:none}
}

/* ========== 次の段（CourseNext）（教科書の最後・マイページ・会員登録の完了） ==========
   参照: webinar.schoo.jp/ai の OUTPUT の枠（幅いっぱい・角丸 32・面の色から白へのグラデーション・右上に絵）。値は語彙の段（紹介ページの型の値） */
.cnext{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,423px);gap:var(--lp-head);margin-top:var(--gap-block);overflow:hidden;border-radius:var(--r-xl);background:linear-gradient(var(--c-band),var(--white))}
.cnext__body{padding:var(--lp-head) 0 var(--lp-head) var(--lp-head)}
.cnext__label{font-size:var(--fs-h3);font-weight:700;letter-spacing:.04em}
.cnext__h{margin-top:var(--sp-12);font-size:var(--fs-h2);font-weight:700;line-height:1.4;letter-spacing:.08em}
.cnext--course .cnext__h{word-break:keep-all;overflow-wrap:anywhere}   /* 講座の見出しは 2 行を <br> で分け、語の途中で折らない（D8-1。auto-phrase は Safari・iPhone で効かないので使わない） */
.cnext__txt{margin-top:var(--sp-12);font-size:var(--fs-ui);line-height:1.8;color:var(--muted)}
.cnext .btn-round{margin-top:var(--pad-box)}
.cnext__img{display:block;width:100%;height:293px;object-fit:cover;border-radius:0 0 0 var(--r-xl);background:var(--panel)}
@media (max-width:896px){
  .cnext{grid-template-columns:minmax(0,1fr);gap:0;border-radius:var(--r-lg)}
  .cnext__body{padding:var(--pad-box) var(--sp-20)}
  .cnext__h{font-size:var(--fs-h3);letter-spacing:.06em}
  .cnext__img{order:-1;height:auto;aspect-ratio:16/9;border-radius:0}
  .cnext .btn-round{width:100%}
}
/* 講座が決まっているときの次の段（2026-09-28 りょう「デザイン性が悪すぎる」で作り直した）。形は /courses/ の講座のカード（型 27・Schoo の講座のカード）:
   白地・1px の枠・角丸 16（記事の終わりのほかの箱と同じ型 12）に、実践編の作例の絵を上に端まで置き、下に札・見出し・説明・3 行・ボタン。
   枠の幅で並びを変える: 狭い（記事の本文の列 720・スマホ）は絵が上、広い（テーマのページ）は絵を左に。記事の中盤の小さい形（--compact）は 560 から絵を左に */
.cnext--course{display:block;container-type:inline-size;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-frame);background:var(--white)}
.cnext__grid{display:grid;grid-template-columns:minmax(0,1fr)}   /* 並びは中の包みで変える（枠の幅の問い合わせ @container は枠そのものには効かない） */
.cnext__shot{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--c-frame)}
.cnext__shot img{display:block;width:100%;height:100%;object-fit:cover}
.cnext__shot:hover{opacity:.7}
.cnext--course .cnext__body{padding:var(--pad-box) var(--pad-box) var(--pad-box)}
.cnext__tags{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4)}
.cnext__tags .badge{margin-left:0}
.cnext__kind{margin-right:var(--sp-4);font-size:var(--fs-note);font-weight:700;color:var(--c-link)}
.cnext--course .cnext__h{margin-top:var(--sp-12);font-size:var(--fs-h2);letter-spacing:.04em;word-break:keep-all;overflow-wrap:anywhere}   /* 2 行を <br> で分け、語の途中で折らない（D8-1） */
.cnext--course .cnext__txt{margin-top:var(--sp-12);color:var(--ink)}
.cnext__spec{display:grid;gap:var(--sp-8);margin-top:var(--sp-16);padding-top:var(--sp-16);border-top:1px solid var(--line);font-size:var(--fs-ui);line-height:1.6}
.cnext__spec li{display:flex;align-items:flex-start;gap:var(--sp-8)}
.cnext__spec .ms{flex:none;font-size:20px;line-height:1.1;color:var(--c-link)}   /* アイコンは読み込む字の一覧（JournalLayout の icon_names）にあるものだけ使う。一覧に無い check を使って欠けた（2026-09-28） */
.cnext__note{display:block;font-size:var(--fs-note);color:var(--muted)}
.cnext__acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-12) var(--pad-box);margin-top:var(--pad-box)}
.cnext--course .cnext__acts .btn-round{width:auto;height:52px;margin-top:0;padding-inline:var(--lp-box);font-size:var(--fs-text);font-weight:700}
.cnext--compact{margin:var(--gap-block) 0}
.cnext--compact .cnext__h{font-size:var(--fs-h3)}
.cnext--compact .cnext__acts{margin-top:var(--sp-16)}
.prose .cnext a{text-decoration:none}
.prose .cnext .btn-round--fill{color:var(--white)}   /* 本文のリンクの色（.prose a）がボタンの白い文字に勝って、文字が消えていた（2026-09-28） */
.prose .cnext p{margin:0}
.prose .cnext .cnext__tags{margin:0}
.prose .cnext .cnext__h{margin-top:var(--sp-12)}
.prose .cnext .cnext__acts{margin-top:var(--sp-16)}
@container (min-width:560px){
  .cnext--compact .cnext__grid{grid-template-columns:minmax(0,280px) minmax(0,1fr);align-items:center}
  .cnext--compact .cnext__shot{margin-left:var(--sp-16);border-radius:var(--r-img)}   /* 絵は LP の FV（文字の入った絵）なので 16:9 のまま切らない（2026-09-28） */
}
@container (min-width:880px){
  .cnext--course:not(.cnext--compact) .cnext__grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center}
  .cnext--course:not(.cnext--compact) .cnext__shot{margin-left:var(--lp-head);border-radius:var(--r-img)}
  .cnext--course:not(.cnext--compact) .cnext__body{padding:var(--lp-head)}
}
@media (max-width:896px){
  .cnext--course .cnext__h{font-size:var(--fs-h3)}
  .cnext--course .cnext__acts .btn-round{width:100%}
  .cnext--course .cnext__acts .more{margin:0 auto}
}
/* ========== マイページ（型 M・2026-09-27 りょう「参照を同じように 2 カラムで左サイドバー形式に」） ==========
   参照（Schoo）の実測: 器 1100・左 260・間 40・右 800。左のカード 白・内側 40/16/24。タブは 1 つ 140・18px 太字。地は面の灰色。値は語彙の段 */
.my{background:var(--c-band);padding:var(--gap-band-top) var(--edge) var(--gap-footer-top);margin-bottom:calc(var(--gap-footer-top) * -1)}
.my__in{max-width:var(--tp-wrap);margin:0 auto}
.my__crumb{padding-left:0}
.my__grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:var(--gap-block);margin-top:var(--sp-20)}
.my-card{display:flex;flex-direction:column;align-items:center;padding:var(--gap-block) var(--sp-16) var(--pad-box);border-radius:var(--r-frame);background:var(--white);text-align:center}
.my-card__icon{display:flex;align-items:center;justify-content:center;width:88px;height:88px;border-radius:50%;background:var(--c-band)}
.my-card__icon .ms{font-size:var(--fs-band);color:var(--muted)}
.my-card__mail{margin-top:var(--sp-16);font-size:var(--fs-ui);font-weight:700;overflow-wrap:anywhere}
.my-card__nav{display:flex;flex-direction:column;align-items:center;gap:var(--sp-12);margin-top:var(--sp-20)}
.my-card__link{padding:0;background:none;border:0;font-size:var(--fs-note);color:var(--c-link);cursor:pointer}
.my-card__link:hover{text-decoration:underline}
.my-tabs{margin-top:0;gap:0}
.my-tabs a{width:140px;padding:var(--sp-16) 0;text-align:center;font-size:var(--fs-h3)}
.my-panel{margin-top:var(--sp-20);padding:var(--sp-20);border-radius:var(--r-frame);background:var(--white)}
.my-panel .h3{margin-bottom:var(--sp-12);font-size:var(--fs-text)}
.my-panel__gap{margin-top:var(--lp-head)}
.my-panel>.list:first-child,.my-panel>div:first-child{margin-top:0}
@media (max-width:896px){
  .my{padding:var(--sp-12) var(--edge) var(--gap-block)}
  .my__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-20)}
  .my-card{padding:var(--pad-box) var(--sp-16) var(--sp-20)}
  .my-card__icon{width:64px;height:64px}
  .my-card__icon .ms{font-size:var(--fs-band)}
  .my-card__nav{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:var(--sp-12) var(--sp-20)}
  .my-tabs a{flex:1;width:auto;font-size:var(--fs-text)}
  .my-panel{padding:var(--sp-16)}
}

/* || UTILITIES |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* スマホだけの改行。見出しは手で改行する（語の途中で 1 文字だけ折れるのを防ぐ） */
.br-sp{display:none}
@media (max-width:896px){ .br-sp{display:inline} }
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 16:9 の画像の枠の角の丸み（ファイルの最後に置く＝各部品の border-radius より後で効かせる）（2026-09-25 りょう「画像が小さくなれば角も等倍で小さく」）。基準はカードの幅 320px で 15px（--r-img）。
   それより小さい枠は幅に比例して小さくし、大きい枠は 15px のまま。% は横が幅・縦が高さに対してなので、16:9 で同じ丸みになるよう縦は 16/9 倍 */
.cover,.gbox.card__img,.card__img,.list__thumb,.tp-card__img,.tp-band__img{border-radius:min(15px,4.6875%) / min(15px,8.333%)}