@charset "UTF-8";
/* ==========================================================================
   ai-school-lp / b.css  —  B版（ABテスト用バリアント）専用スタイル
   対象: b/index.html のみ。A版 style.css は読み込まない（干渉させない）

   デザインの正: G:\マイドライブ\2026\AIスクール事業\08_LPデザイン仕様.md
   トークンは 08＝A版 style.css の :root と **同名・同値** で再定義する。

   ── B版差分（08／A版との違い・Phase 0 §6 融合案に基づく） ─────────────
   1. 主CTA   : --cta-orange 塗り＋白文字＋下影 0 4px 0 #c25e00・角丸12px・高さ56px
                （A版は「主=ゴースト／副=塗り・角丸5px・影なし」。意図的に差を出す）
   2. 副CTA   : 白地＋--cta-orange 文字＋2px solid --cta-orange・角丸12px
   3. 英字ラベル: --font-en 700 / letter-spacing .12em / --teal 文字
                （08「英字ラベルは使わない」のB版例外。反転地では --accent-yellow）
   4. h2      : 26px/700・下線バーなし（役割は英字ラベルが担う）
   5. 本文    : 16px/400/1.75（PC/SPで文字サイズを変えない＝参照の「スマホをそのまま置いた」型）
   6. 反転    : B3・B6 は --teal-deep 地＋白文字。強調は --accent-yellow / 白箱
   7. 強色    : B1・B7・B11締めカードは --brand-grad 地＋白文字
   8. レイアウト: コンテンツ列 max-width 430px 固定・内側左右15px（列内幅400px）。
                1024px 以上で PC両脇装飾（左＝固定ナビ7項目／右＝固定カード）
   9. 主CTA＋副CTAのシャイン演出（08 §5 の動き方針からのB版差分・
                2026-09-21(7)／副CTAは 2026-09-21(10) 代表指示）:
                [data-cta="line"]（塗り）には白い光、[data-cta="consult"]（白地・枠）には
                オレンジの淡い光の帯を ::after で横切らせる。副CTAは周期の半分だけ
                animation-delay をずらし、主CTAと同時に光らせない。
                明滅・点滅・不透明度の急変はしない（WCAG 2.3.1）。
                背景色・寸法・角丸・枠線・下影は不変。prefers-reduced-motion で完全停止
   ── 追加トークン（B版のみ・08 は変更しない） ───────────────────────
   --col / --col-pad / --radius-btn-b / --cta-shadow / --cta-shadow-sm
   --bg-outer（PC両脇の地。--bg-alt を一段濃くした同系色）
   --accent-yellow（反転地の強調文字。08 --marker-yellow の色相を文字色に転用）
   --tag-dark（FEATUREタグの黒ピル）／--bar-bg（SP固定バーの地）
   --side-w（PC両脇の幅）／--col-shadow
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（08 §1・§2・§3 と同名同値 ＋ B版差分）
   -------------------------------------------------------------------------- */
:root {
  /* color（A版 style.css :root と同名・同値） */
  --cta-orange: #f47806;
  --cta-orange-hover: #ff9f47;
  --brand-grad: linear-gradient(90deg, #309da4, #2368a7);
  --teal-deep: #134055;
  --teal: #2e92a5;
  --bg-alt: #f0f5fa;
  --accent-pink: #e1367c;
  --badge-new: #dd1969;
  --marker-yellow: linear-gradient(transparent 60%, rgba(255, 219, 91, 0.6) 0);
  --c-head: #1a1a1a;
  --c-body: #000;
  --c-sub: #808080;
  --c-link: #2760fd;
  --c-footer-bg: #172223;
  --c-border: #e6e6e6;
  --c-white: #fff;

  /* shape（同上） */
  --radius: 8px;
  --radius-btn: 5px;
  --radius-pill: 9999px;
  --border: 2px solid var(--c-border);

  /* layout */
  --gutter: 20px;
  --header-h: 48px;
  --anchor-offset: calc(var(--header-h) + 12px);

  /* type（同上） */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo,
    sans-serif;
  --font-en: "Roboto", "Noto Sans JP", sans-serif;

  /* motion（同上） */
  --hover-transition: 0.5s;

  /* ▼ B版差分トークン */
  --col: 430px;
  --col-pad: 15px;
  --radius-btn-b: 12px;
  --cta-shadow: 0 4px 0 #c25e00;
  --cta-shadow-sm: 0 3px 0 #c25e00;
  --bg-outer: #e2ebf3;
  --accent-yellow: #ffd95b;
  --tag-dark: #1a1a1a;
  /* SP固定バー。不透明（下の本文を透かさない・Phase 4 指摘2） */
  --bar-bg: #134055;
  /* SP固定バーの実高（実測 100px）。body と FV の padding-bottom で共有する（Phase 4 指摘1） */
  --bar-h: 100px;
  --col-shadow: 0 0 24px rgba(19, 64, 85, 0.1);
  --side-w: calc((100vw - var(--col)) / 2);
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding-bottom: var(--bar-h); /* SP固定バーの高さ分 */
  background: var(--c-white);
  color: var(--c-body);
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  overflow-wrap: break-word;
  word-break: normal;
  line-break: strict;
}

h1,
h2,
h3,
p,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-link);
}

button {
  font: inherit;
  color: inherit;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 3px solid var(--cta-orange);
  outline-offset: 2px;
}

/* アンカー着地位置（ヘッダー高 + 12px） */
[id] {
  scroll-margin-top: var(--anchor-offset);
}

/* --------------------------------------------------------------------------
   3. レイアウト（430px 列固定）
   -------------------------------------------------------------------------- */
.l-col {
  position: relative;
  width: 100%;
  max-width: var(--col);
  margin: 0 auto;
  background: var(--c-white);
}

.l-sec {
  position: relative;
  padding: 48px var(--col-pad);
  background: var(--c-white);
}

.l-sec--alt {
  background: var(--bg-alt);
}

.l-sec--deep {
  background: var(--teal-deep);
  color: var(--c-white);
}

.l-sec--grad {
  background: var(--brand-grad);
  color: var(--c-white);
}

/* ブロック境界の装飾（当社のドット列。自前で描く＝参照のモザイクは使わない）
   ※ section の background を上書きしないよう ::before のオーバーレイで描く
     （background-image で描くと --brand-grad / --teal-deep を消してしまう） */
.l-sec--deep::before,
.l-sec--grad:not(.p-fv)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(
    circle at 4px 4px,
    rgba(255, 255, 255, 0.3) 1.6px,
    transparent 1.7px
  );
  background-repeat: repeat-x;
  background-size: 8px 8px;
}

.l-sec--deep + .l-sec:not(.l-sec--deep):not(.l-sec--grad)::before,
.l-sec--grad + .l-sec--alt::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(
    circle at 4px 4px,
    rgba(19, 64, 85, 0.16) 1.6px,
    transparent 1.7px
  );
  background-repeat: repeat-x;
  background-size: 8px 8px;
}

/* --------------------------------------------------------------------------
   4. ヘッダー（sticky / 白地 / 影なし / 48px）
   -------------------------------------------------------------------------- */
.l-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 var(--col-pad);
  background: var(--c-white);
}

.l-header__logo {
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.l-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.l-header__bars,
.l-header__bars::before,
.l-header__bars::after {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--teal-deep);
  transition: transform 0.2s, opacity 0.2s;
}

.l-header__bars {
  position: relative;
}

.l-header__bars::before,
.l-header__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.l-header__bars::before {
  top: -7px;
}

.l-header__bars::after {
  top: 7px;
}

.l-header__toggle[aria-expanded="true"] .l-header__bars {
  background: transparent;
}

.l-header__toggle[aria-expanded="true"] .l-header__bars::before {
  transform: translateY(7px) rotate(45deg);
}

.l-header__toggle[aria-expanded="true"] .l-header__bars::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* ハンバーガーのオーバーレイ（7項目） */
.l-drawer {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 29;
  /* 不透明。背面を透かさない（Phase 4 指摘3） */
  background: var(--c-white);
  overflow-y: auto;
}

/* ドロワーを開いている間は背面をスクロールさせない（b.js が付け外しする） */
body.is-nav-open {
  overflow: hidden;
}

/* 固定バー（z-index 40）はドロワー（29）より前面なので、開いている間は隠す。
   閉じると戻る（Phase 5 指摘2） */
body.is-nav-open .l-bar {
  visibility: hidden;
}

.l-drawer__list {
  max-width: var(--col);
  margin: 0 auto;
  padding: 8px var(--col-pad) 120px;
}

.l-drawer__list li + li {
  border-top: 1px solid var(--c-border);
}

.l-drawer__list a {
  display: block;
  padding: 16px 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   5. 共通部品
   -------------------------------------------------------------------------- */
.c-label {
  margin-bottom: 6px;
  font-family: var(--font-en);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--teal);
  text-align: center;
}

.c-label--onbrand {
  color: var(--accent-yellow);
}

/* 日本語ラベル（B5「本塾の特徴」・12 の 2026-09-21(3) 改稿）。
   位置・サイズ・色は英字ラベルと同じにし、字形と字間だけ和文向けに替える */
.c-label--jp {
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
}

/* 注記の直後に英字ラベルが来るとき（B2）は間を空ける */
.c-note + .c-label {
  margin-top: 30px;
}

.c-h2 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--c-head);
  text-align: center;
  /* 文節の途中で折らない。折返し位置は HTML 側の <wbr> で与える（A版と同じ流儀） */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.c-h2--onbrand {
  color: var(--c-white);
}

.c-h2__line {
  display: block;
}

.c-h3 {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-head);
  /* h2 と同じく、折返し位置は <wbr> で与える（Phase 4 指摘4-4） */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.c-lead {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.75;
  text-align: center;
}

.c-lead--onbrand {
  color: var(--c-white);
}

.c-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-sub);
}

.c-note--onbrand {
  color: rgba(255, 255, 255, 0.82);
}

/* CTA ボタン */
.c-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 400px;
  min-height: 56px;
  margin: 24px auto 0;
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-btn-b);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--hover-transition),
    color var(--hover-transition), border-color var(--hover-transition);
}

.c-btn--primary {
  background: var(--cta-orange);
  color: var(--c-white);
  box-shadow: var(--cta-shadow);
}

.c-btn--primary:hover {
  background: var(--cta-orange-hover);
}

.c-btn--ghost {
  background: var(--c-white);
  color: var(--cta-orange);
  border: 2px solid var(--cta-orange);
}

.c-btn--ghost:hover {
  background: var(--cta-orange-hover);
  border-color: var(--cta-orange-hover);
  color: var(--c-white);
}

.c-btn--sm {
  min-height: 44px;
  margin: 0;
  border-radius: 10px;
  font-size: 12px;
  box-shadow: none;
}

.c-btn--primary.c-btn--sm {
  box-shadow: var(--cta-shadow-sm);
}

.c-btn + .c-btn {
  margin-top: 14px;
}

/* 主CTA（LINE）＋副CTA（無料個別相談）のシャイン演出
   （2026-09-21(7)／副CTAは 2026-09-21(10) 代表指示）
   ・点滅ではなく「光の帯が1回横切る」。明滅・不透明度の急変はしない（WCAG 2.3.1）
   ・掃引 0.9s。周期は本文 3.5s／常時見えている固定バー・PC右カードは 4.5s と控えめに
   ・副CTA は周期の半分だけ animation-delay をずらし、主CTAと同時に光らせない
   ・動かすのは transform だけ。背景色・高さ・幅・角丸・枠線・下影は変えない
   ・will-change は使わない（GPU層を常時確保しない）
   ・テキストリンク（.c-textlink）は対象外＝FV副導線と B8 の LINE リンクには付けない */
.c-btn[data-cta="line"],
.c-btn[data-cta="consult"] {
  position: relative;
  /* 光の帯を角丸の内側に収める。border は要素の内側（絶対配置の基準はパディングボックス）、
     box-shadow は要素の外側に描かれるので、枠線も下影も欠けない */
  overflow: hidden;
}

.c-btn[data-cta="line"]::after,
.c-btn[data-cta="consult"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  transform: translateX(-150%);
  animation: b-cta-shine 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* 主CTA（--cta-orange 塗り・白文字）は白い光 */
.c-btn[data-cta="line"]::after {
  background: linear-gradient(
    115deg,
    transparent 0 40%,
    rgba(255, 255, 255, 0.55) 50%,
    transparent 60% 100%
  );
}

/* 副CTA（白地・--cta-orange の文字と枠）はオレンジの淡い光。
   帯が文字の上を通っても文字色とのコントラストが落ちすぎない濃さにとどめる */
.c-btn[data-cta="consult"]::after {
  background: linear-gradient(
    115deg,
    transparent 0 40%,
    rgba(244, 120, 6, 0.28) 50%,
    transparent 60% 100%
  );
  /* 周期 3.5s の半分。主CTAと同時に光らせない */
  animation-delay: 1.75s;
}

/* 固定バー内と PC右固定カードは常時見えているので周期を長く（掃引は同じ 0.9s） */
.c-btn[data-cta="line"][data-cta-position="bar"]::after,
.c-btn[data-cta="line"][data-cta-position="pc_card"]::after,
.c-btn[data-cta="consult"][data-cta-position="bar"]::after {
  animation-name: b-cta-shine-slow;
  animation-duration: 4.5s;
}

/* 周期 4.5s の半分 */
.c-btn[data-cta="consult"][data-cta-position="bar"]::after {
  animation-delay: 2.25s;
}

/* 0.9s / 3.5s = 25.714% で掃引を終え、残りは画面外で静止する */
@keyframes b-cta-shine {
  0% {
    transform: translateX(-150%);
  }

  25.714% {
    transform: translateX(250%);
  }

  100% {
    transform: translateX(250%);
  }
}

/* 0.9s / 4.5s = 20% */
@keyframes b-cta-shine-slow {
  0% {
    transform: translateX(-150%);
  }

  20% {
    transform: translateX(250%);
  }

  100% {
    transform: translateX(250%);
  }
}

/* テキストリンク（副導線） */
.c-textlink {
  display: block;
  margin: 14px auto 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-link);
  text-align: center;
  text-decoration: underline;
}

.c-textlink__arrow {
  display: inline-block;
  margin-left: 4px;
}

.c-textlink--onbrand {
  color: var(--c-white);
}

/* 3点連結 */
.c-triad {
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* 2026-09-21(8)' で2・3点目の文言が長くなったぶん、間隔を 4px→3px に詰めて
     375幅でも3チップ＋「×」2つが1行に収まるようにする */
  gap: 3px;
  margin-top: 18px;
}

.c-triad__item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  padding: 10px 3px;
  background: var(--c-white);
  border-radius: var(--radius);
  color: var(--teal-deep);
  /* 2026-09-21(8)' で文言が長くなったため 12px→11.5px */
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  /* 文節の途中で折らない。折返し位置は <wbr> で与える（Phase 4 指摘4-2）。
     2点目は「＋」の直後で割れないよう .u-nobr（nowrap）を併用する。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* チップ本文の入れ物。.c-triad__item は display:flex なので、本文を1つの
   フレックスアイテムにまとめないと、テキストと <span> が別々のアイテムになり
   <wbr> も nowrap も改行機会として働かない（2点目が1行のまま横に溢れた）。 */
.c-triad__label {
  max-width: 100%;
}

.c-triad__x {
  display: flex;
  align-items: center;
  color: var(--c-white);
  font-size: 12px;
  font-weight: 700;
}

.c-triad--plain .c-triad__item {
  background: var(--bg-alt);
  border: 2px solid var(--teal);
}

.c-triad--plain .c-triad__x {
  color: var(--teal);
}

/* 募集帯（ピル） */
.c-recruit {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 18px auto 0;
  padding: 8px 16px;
  background: var(--c-white);
  border-radius: var(--radius-pill);
  color: var(--accent-pink);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* 募集帯ピル・2段（FV／2026-09-21(6) 代表指示）
   上段 = 「第1期 創設メンバー募集」を小さく（12px）
   下段 = 「5名限定｜10月18日まで」を大きく太く（17px/700）＝ここが主役
   地はピンク塗り・文字は白。「｜」は DOM に残し、上段と下段の間の1つだけ表示を消す。 */
.c-recruit--stack {
  padding: 7px 16px 8px;
  background: var(--accent-pink);
  color: var(--c-white);
  line-height: 1.35;
}

.c-recruit__lead {
  display: block;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.c-recruit__main {
  display: block;
  margin-top: 1px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

/* 上段と下段の間の「｜」だけ消す（下段内の「｜」は直下の子ではないので残る） */
.c-recruit--stack > .u-sep {
  display: none;
}

.c-recruit__main .u-sep {
  padding: 0 6px;
  font-weight: 400;
  opacity: 0.6;
}

/* 第1期告知の帯 */
.c-period {
  margin-top: 24px;
  padding: 10px 12px;
  background: var(--accent-pink);
  border-radius: var(--radius);
  color: var(--c-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

/* 第1期告知の帯・3段構成（B2 のみ。B8 の帯は .c-period のまま）
   12 B2「（第1期告知・帯）」の演出指示。文言は一字同一で、強調は視覚階層だけで作る。
     上段 = 白地ピル（アイキャッチ）を帯の上辺に重ねる
     中段 = 期限「10月18日まで」・定員「5名限定」＝帯の中で最大。「・」の前後で折り返さない
     下段 = 「2026年12月1日以降は正規価格で販売します」を一段濃い地の細帯で対比
   区切りの「／」は照合（check_copy_b.py）のため DOM に残し、表示だけ消す。 */
.c-period--stack {
  position: relative;
  /* 上段ピルが上辺に重なる 13px ぶんを足して、前の要素との余白を 25px に保つ */
  margin-top: 38px;
  padding: 20px 16px 0;
  border-radius: 12px;
  font-size: 17px;
  line-height: 1.5;
  /* 折返しは <wbr> の位置だけに限定する（文節の途中・年月日の途中で折らない） */
  word-break: keep-all;
  overflow-wrap: normal;
}

/* 上段: 白地ピル（ピンク文字）。帯の上辺に重ねる */
.c-period__pill {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  background: var(--c-white);
  border-radius: var(--radius-pill);
  color: var(--accent-pink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* 中段: 帯の中で最大。時計アイコン（自前の線画）＋期限・定員を1行に収める */
.c-period__main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.c-period__icon {
  display: block;
  flex: none;
}

.c-period__limit {
  /* 「10月18日まで・5名限定」を1行に固定する */
  white-space: nowrap;
}

.c-period__num {
  font-family: var(--font-en);
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

/* 下段: ピンク地を一段濃くした細帯（新しい色トークンは作らない）。帯の下辺いっぱいに敷く */
.c-period__sub {
  display: block;
  /* 帯の左右の内側余白を打ち消して全幅にする。帯側の padding-bottom は 0 */
  margin: 12px -16px 0;
  padding: 7px 14px;
  background: rgba(19, 64, 85, 0.32);
  border-radius: 0 0 12px 12px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.55;
}

/* 「2026年12月1日以降は」／「正規価格で販売します」の2行に割る（<wbr> の位置で折る） */
.c-period__note {
  display: inline-block;
  max-width: 15.5em;
}

.c-period__regular {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 区切りの「／」＝照合のため DOM には残し、3段構成では表示しない */
.c-period--stack .u-sep {
  display: none;
}

/* タグ（黒ピル） */
.c-tag {
  display: inline-block;
  padding: 3px 10px;
  background: var(--tag-dark);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}

/* 比較表・チェックの記号 */
.c-mark {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

.c-mark--best {
  color: var(--teal);
}

.c-mark--good {
  color: var(--c-head);
}

.c-mark--fair,
.c-mark--none {
  color: var(--c-sub);
}

/* アコーディオン（ネイティブ details/summary） */
.c-acc {
  margin-top: 8px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.c-acc__summary {
  position: relative;
  padding: 12px 44px 12px 14px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-head);
  cursor: pointer;
  list-style: none;
}

.c-acc__summary::-webkit-details-marker {
  display: none;
}

.c-acc__summary::before,
.c-acc__summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 16px;
  width: 16px;
  height: 2px;
  background: var(--teal-deep);
  transition: transform 0.2s;
}

.c-acc__summary::after {
  transform: rotate(90deg);
}

.c-acc[open] .c-acc__summary::after {
  transform: rotate(0deg);
}

.c-acc__body {
  padding: 0 14px 14px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-body);
}

/* 途中で折らせたい区切り記号を含む語のまとまり（「何を・誰に・いくらで」など）。
   word-break:keep-all は「・」の直後の改行までは止めないため、ここで固定する。 */
.u-nobr {
  white-space: nowrap;
}

/* 語中で割らせたくないまとまり。keep-all は日本語の任意改行だけを止め、
   「・」「／」の直後の改行機会は残る（＝区切り記号の位置でだけ折り返す）。
   分断を完全に禁じたい短い語は、内側に .u-nobr を重ねる。 */
.u-keep {
  word-break: keep-all;
}

/* 区切り記号 */
.u-sep {
  padding: 0 4px;
  opacity: 0.55;
}

/* --------------------------------------------------------------------------
   6. B1 ファーストビュー
   -------------------------------------------------------------------------- */
/* FV は「初期表示で 主CTA・副テキストリンク・保証否定注記 が固定バーより上に
   収まる」ことを要件にする（Phase 4 指摘1）。画面の高さに応じて縦の間隔と
   人物ビジュアルの高さを詰める。svh 非対応ブラウザ用に vh を先に書く。 */
.p-fv {
  /* 募集帯ピルが2段化して高くなった分（実測 +19px）。FV の受入基準
     （主CTA・副リンク・注記の3要素がバー上に完全表示）を保つため、
     人物ビジュアルの高さを各段階の clamp から同じだけ差し引いて相殺する。 */
  --fv-pill-grow: 19px;
  --fv-gap-s: clamp(5px, 1.1vh, 10px);
  --fv-gap-m: clamp(8px, 1.8vh, 18px);
  --fv-gap-l: clamp(10px, 2vh, 24px);
  --fv-visual-h: calc(clamp(92px, 17vh, 180px) - var(--fv-pill-grow));
  padding-top: var(--fv-gap-l);
  padding-bottom: calc(24px + var(--bar-h));
}

@supports (height: 1svh) {
  .p-fv {
    --fv-gap-s: clamp(5px, 1.1svh, 10px);
    --fv-gap-m: clamp(8px, 1.8svh, 18px);
    --fv-gap-l: clamp(10px, 2svh, 24px);
    --fv-visual-h: calc(clamp(92px, 17svh, 180px) - var(--fv-pill-grow));
  }
}

/* 縦が短い端末は FV をさらに詰める（Phase 4／Phase 5 受入基準）:
     〜700px                       : 人物ビジュアルを縮小
     661〜680px（iPhone SE 375x667）: 3要素すべてがバー上に完全表示＋注記下に8px以上の余白。
                                     ビジュアル・間隔・吹き出しをまとめて詰める
     〜660px（360x640 等・基準外）  : 主CTAはバー上に完全表示、副リンクと注記は全体がバーの下
                                     （661〜680の詰めは当てない。当てると注記がバー境界に乗るため） */
@media (max-height: 700px) {
  .p-fv {
    --fv-visual-h: calc(clamp(76px, 13.5vh, 130px) - var(--fv-pill-grow));
    --fv-visual-pos: 18%;
  }
}

@media (min-height: 661px) and (max-height: 680px) {
  .p-fv {
    --fv-gap-s: clamp(5px, 0.85vh, 10px);
    --fv-gap-m: clamp(8px, 1.5vh, 18px);
    --fv-visual-h: calc(clamp(62px, 10vh, 110px) - var(--fv-pill-grow));
    --fv-visual-pos: 18%;
  }

  .p-fv__bubble {
    padding: 6px 12px;
    font-size: 11px;
    line-height: 1.5;
  }
}

@media (max-height: 660px) {
  /* この段階だけピル増分を相殺しない。相殺すると副リンクがバー境界に乗るため
     （既存の設計意図＝副リンクと注記は全体がバーの下）。 */
  .p-fv {
    --fv-visual-h: clamp(68px, 12vh, 110px);
    --fv-visual-pos: 18%;
  }
}

@supports (height: 1svh) {
  @media (max-height: 700px) {
    .p-fv {
      --fv-visual-h: calc(clamp(76px, 13.5svh, 130px) - var(--fv-pill-grow));
    }
  }

  @media (min-height: 661px) and (max-height: 680px) {
    .p-fv {
      --fv-gap-s: clamp(5px, 0.85svh, 10px);
      --fv-gap-m: clamp(8px, 1.5svh, 18px);
      --fv-visual-h: calc(clamp(62px, 10svh, 110px) - var(--fv-pill-grow));
    }
  }

  @media (max-height: 660px) {
    .p-fv {
      --fv-visual-h: clamp(68px, 12svh, 110px);
    }
  }
}

.p-fv__bubble {
  position: relative;
  max-width: 360px;
  margin: 0 auto;
  padding: 8px 14px;
  background: var(--c-white);
  border-radius: var(--radius-pill);
  color: var(--teal-deep);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
  /* 「。」の後の <wbr> で折り返す（Phase 4 指摘4-1） */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.p-fv__bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: var(--c-white);
  transform: rotate(45deg);
}

.p-fv__visual {
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 400px;
  margin: var(--fv-gap-m) auto 0;
}

.p-fv__visual img {
  /* 4枚 × gap 6px（375幅なら各 ≈ 82px）。2026-09-21(7) 代表指示で3枚→4枚 */
  width: calc((100% - 18px) / 4);
  height: var(--fv-visual-h);
  object-fit: cover;
  /* 既定は指示どおり center top。ただし縦が短い端末は帯が 48〜58px まで縮むため、
     top のままだと頭頂部しか映らない。短い段階だけ切り出し位置を下げて顔を残す。 */
  object-position: center var(--fv-visual-pos, top);
  border-radius: var(--radius);
  -webkit-mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 56%, transparent 100%);
}

.p-fv__sub {
  margin-top: var(--fv-gap-s);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.p-fv__catch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.9vh, 8px);
  margin-top: var(--fv-gap-s);
}

.p-fv__catch-line {
  padding: 3px 12px;
  background: var(--c-white);
  border-radius: 4px;
  color: var(--teal-deep);
  font-size: 29px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

/* FV 内の縦リズム（画面高に連動して詰める。Phase 4 指摘1） */
.p-fv .c-triad,
.p-fv .c-recruit {
  margin-top: var(--fv-gap-m);
}

.p-fv .c-btn {
  margin-top: var(--fv-gap-l);
}

.p-fv .c-textlink {
  margin-top: clamp(7px, 1.3vh, 14px);
}

.p-fv .c-note {
  margin-top: var(--fv-gap-s);
}

/* --------------------------------------------------------------------------
   7. B2 特典（BENEFIT）
   -------------------------------------------------------------------------- */
/* B2 冒頭「当社スタッフの実績」＝ B6 と同じカード6枚の横スライド
   （2026-09-21(11) 代表指示。2026-09-21(9) のピル3点から変更）
   カード本体の見た目は .p-output__card 一式をそのまま再利用し、ここでは
   幅と流れ方だけを与える。地色が違う（B2 は --bg-alt／B6 は --teal-deep）だけで部品は共通。 */
.p-gift__marquee {
  /* 列の端まで見せる（左右の内側余白を打ち消す） */
  margin: 0 calc(var(--col-pad) * -1) 14px;
  overflow: hidden;
}

.p-gift__track {
  display: flex;
  width: max-content;
  /* 1群＝6枚×(220+12)=1392px。約18px/s → 77s で1群ぶん流す
     （右から現れて左へ＝一般的なマーキーの向き） */
  animation: b-gift-marquee 77s linear infinite;
}

/* 読みたいときは止められるように */
.p-gift__marquee:hover .p-gift__track,
.p-gift__marquee:focus-within .p-gift__track {
  animation-play-state: paused;
}

.p-gift__group {
  display: flex;
  gap: 12px;
  padding-right: 12px;
}

/* グリッド（B6）では列幅で決まる部分を、マーキーでは実寸で与える */
.p-gift__group .p-output__card {
  flex: 0 0 220px;
  width: 220px;
}

@keyframes b-gift-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.p-gift__cards {
  margin-top: 20px;
}

.p-gift__card {
  margin-top: 14px;
  padding: 16px 14px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-gift__no {
  display: inline-block;
  padding: 3px 14px;
  background: var(--brand-grad);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.p-gift__name {
  margin-top: 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-head);
}

.p-gift__desc {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.7;
}

.p-gift__fig {
  margin-top: 12px;
}

.p-gift__fig img {
  width: 100%;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   8. B3 問題提起（反転）
   -------------------------------------------------------------------------- */
.p-problem__body {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.85;
}

.p-problem__ask {
  margin-top: 28px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  color: var(--accent-yellow);
}

.p-problem__checks {
  margin-top: 14px;
}

.p-problem__check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  font-size: 14px;
  line-height: 1.7;
}

/* 挿絵の白円。線画（黒線＋黄）が teal-deep の反転地で沈むのを防ぐ。
   overflow:hidden で円の外へはみ出させない（画像側も内容を 88% に内接させてある） */
.p-problem__icon {
  flex: 0 0 64px;
  width: 64px;
  height: 64px;
  padding: 6px;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 50%;
}

.p-problem__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* チェック記号は文言の先頭に残す（チェックリストの意味を維持） */
.p-problem__text {
  position: relative;
  flex: 1 1 auto;
  padding-left: 20px;
  /* 文節で折り返す（2026-09-21(9) 代表指示）。CJK の任意位置での改行を止め、
     HTML 側に置いた <wbr> の位置だけで折る。anywhere は使わない
     （使うと語中で割れる＝直そうとしている症状そのもの）。 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

.p-problem__text::before {
  content: "\2611";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--accent-yellow);
  font-size: 16px;
  line-height: 1.5;
}

.p-problem__band {
  margin-top: 26px;
  padding: 14px 12px;
  background: var(--c-white);
  border-radius: var(--radius);
  color: var(--teal-deep);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  /* 読点の後の <wbr> で折り返す（Phase 4 指摘4-3） */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 「仕事にする手順」の強調（2026-09-21(4) 代表指示）。
   白地×--teal-deep の箱なので文字色は変えず、08 の黄マーカーを敷く。
   --cta-orange 文字案は白地で 2.79:1（AA 4.5:1 未満）のため不採用。
   teal-deep × マーカー実効色 #ffe99d は 9.22:1 で AA/AAA を満たす。
   帯全体が既に 700・webfont は 400/500/700 のみのため、strong 既定の
   bolder（=900）による合成太字を避けて 700 で固定する。 */
.p-problem__band-em {
  background: var(--marker-yellow);
  font-weight: 700;
}

.p-problem__rescue {
  margin-top: 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.8;
  text-align: center;
}

/* --------------------------------------------------------------------------
   9. B4 本塾とは（ABOUT）＋比較表
   -------------------------------------------------------------------------- */
.p-about__body {
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.9;
}

.p-about__compare-title {
  margin-top: 32px;
  text-align: center;
}

.p-compare {
  margin-top: 14px;
}

.p-compare__table {
  width: 100%;
  table-layout: fixed;
  font-size: 12px;
  line-height: 1.55;
}

.p-compare__table th,
.p-compare__table td {
  padding: 8px 6px;
  border: 1px solid var(--c-border);
  vertical-align: top;
  font-weight: 400;
  text-align: left;
}

.p-compare__axis {
  width: 74px;
  background: var(--bg-alt);
  color: var(--c-head);
  font-weight: 700;
}

.p-compare__table thead .p-compare__axis {
  background: var(--c-sub);
  color: var(--c-white);
  text-align: center;
}

.p-compare__table thead th {
  font-weight: 700;
  text-align: center;
}

.p-compare__table thead .p-compare__own {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--c-white);
}

.p-compare__table thead .p-compare__other {
  background: var(--c-sub);
  border-color: var(--c-sub);
  color: var(--c-white);
}

.p-compare__table tbody .p-compare__own {
  background: var(--c-white);
  border-left: 2px solid var(--teal);
  border-right: 2px solid var(--teal);
  color: var(--teal-deep);
  font-weight: 500;
}

.p-compare__table tbody tr:last-child .p-compare__own {
  border-bottom: 2px solid var(--teal);
}

.p-compare__own--goal {
  font-weight: 700;
}

.p-compare__table tbody .p-compare__other {
  color: var(--c-sub);
}

/* --------------------------------------------------------------------------
   10. B5 4つの特徴（FEATURE）
   -------------------------------------------------------------------------- */
.p-feature__item {
  margin-top: 18px;
  padding: 18px 14px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-feature__head {
  margin: 0;
}

.p-feature__head .u-sep {
  display: none;
}

.p-feature__num {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  background: var(--teal-deep);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p-feature__title {
  display: block;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-head);
}

.p-feature__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.p-feature__body {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.85;
}

.p-feature__list {
  margin-top: 12px;
}

.p-feature__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.8;
}

.p-feature__list li::before {
  content: "\30FB";
  position: absolute;
  left: 0;
  color: var(--teal);
}

.p-feature__checks {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
}

.p-feature__checks li {
  position: relative;
  margin-top: 6px;
  padding-left: 26px;
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.p-feature__checks li::before {
  content: "\2611";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--teal);
  font-size: 17px;
}

.p-fields {
  margin-top: 14px;
}

/* 分野名の左にアイコン円を置く（summary は block のまま＝details の開閉には触れない）。
   上下 padding で行を中央に置き、円は absolute で縦中央へ合わせる */
.p-fields .c-acc__summary {
  padding: 17px 44px 17px 62px;
}

.p-fields__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 40px;
  height: 40px;
  padding: 7px;
  overflow: hidden;
  background: var(--c-white);
  border-radius: 50%;
  transform: translateY(-50%);
}

.p-fields__icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 塗り／線・濃淡が混在する素材の色味を揃える（JPEG の白地は円の白へ溶ける） */
  filter: grayscale(1) contrast(1.1);
}

/* 分野を開いた中身＝ステップ1〜3を1件ずつ白い枠で縦積みにする（2026-09-22 代表指示）。
   1枠＝1要素（.p-steps__item）で、中は「ピル（ステップN）→見出し→説明」の順。
   DOM順＝表示順＝読み上げ順（order で入れ替えない）。 */
.p-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.p-steps__item {
  padding: 10px 12px;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  /* 語中で折らない＝文節で折り返す（折返し位置は HTML 側の <wbr> と読点で与える）。
     anywhere は使わない＝英字語を割らない */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 1行目: ピル＋見出し。間に他のテキストを挟まない */
.p-steps__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.p-steps__no {
  flex: 0 0 auto;
  margin-top: 2px;
  padding: 2px 8px;
  background: var(--teal-deep);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

.p-steps__head {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-head);
}

/* 2行目: 説明 */
.p-steps__desc {
  margin-top: 3px;
  color: #4d4d4d;
  font-size: 12.5px;
  line-height: 1.6;
}

/* 講師カード（特徴 01 内包） */
.p-instructor {
  display: flex;
  /* 写真はテキスト側と同じ高さまで伸ばす（写真の下に余白を残さない・2026-09-22 代表指摘） */
  align-items: stretch;
  gap: 12px;
  margin-top: 14px;
  padding: 12px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.p-instructor__fig {
  display: flex;
  /* 88px → 96px。上下に伸びたとき cover の左右クロップを浅くする */
  flex: 0 0 96px;
  align-self: stretch;
}

.p-instructor__fig img {
  width: 100%;
  height: 100%;
  /* テキストが2行しかないときも写真を潰さない下限（従来の高さ） */
  min-height: 110px;
  object-fit: cover;
  /* 顔が上寄りの素材。伸長時に頭頂を残す */
  object-position: 50% 28%;
  border-radius: var(--radius);
}

.p-instructor__name {
  font-size: 16px;
  font-weight: 700;
  color: var(--teal-deep);
}

.p-instructor__label {
  font-size: 12px;
}

.p-instructor__profile {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.7;
  /* 語中で折らない＝文節で折り返す（折返し位置は HTML 側の <wbr> で与える）。
     430px 列で「代表。」「業務自動化を手がける。」だけが次行へ落ちるのを防ぐ
     （2026-09-22 代表指摘）。anywhere は使わない＝英字語を割らない */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   11. B6 当社スタッフの実績（反転・2列グリッド）
       2026-09-21(9) でサムネ画像（out_0N.webp）をやめ Before ▶▶ After のカードに、
       2026-09-21(10) でマーキーを廃止して静的な2列グリッドにし、代表提供の写真6点
       （result_0N.webp）を載せた。動かさない＝数字が読める（reduced-motion 対応も不要）。
       out_0N.webp は参照なしで残置
   -------------------------------------------------------------------------- */
/* サブ文は語中で折らない（折返し位置は HTML 側の <wbr> で与える）。
   .c-lead 全体には効かせず、このブロック内だけに限定する。 */
.p-output .c-lead {
  word-break: keep-all;
}

.p-output__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 6枚すべて同じ高さにする（一番背の高い行に合わせる） */
  grid-auto-rows: 1fr;
  /* 375幅でカード幅 ≈ 167px */
  gap: 10px;
  margin-top: 22px;
}

.p-output__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-white);
  border: var(--border);
  border-radius: 12px;
}

/* 上: 写真（16:9・代表提供の6点。装飾扱いで alt="" ） */
.p-output__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.p-output__label {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  /* 語中で折らない。折返し位置は <wbr> で与える */
  word-break: keep-all;
  text-align: center;
}

/* 区切りの「｜」は照合のため DOM に残し、表示だけ消す */
.p-output__label .u-sep {
  display: none;
}

/* 中: 項目名の帯。長い項目名（クラウドソーシング案件獲得数）は2行になるので、
   6枚で帯の高さが揃うよう2行ぶんを確保して上下中央に置く */
.p-output__name {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 4px 6px;
  background: var(--teal-deep);
  color: var(--c-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}

/* 下: Before ▶▶ After（After が主役） */
.p-output__ba {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  padding: 8px 6px 10px;
}

.p-output__before {
  color: var(--c-sub);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.p-output__arrow {
  color: var(--cta-orange);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.08em;
}

.p-output__after {
  color: var(--teal-deep);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.p-output__after-num {
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* --------------------------------------------------------------------------
   12. B7 講師の現場実例（REAL WORK・Splide）
   -------------------------------------------------------------------------- */
.p-works__carousel {
  margin: 22px calc(var(--col-pad) * -1) 0;
}

.p-works__card {
  overflow: hidden;
  height: 100%;
  background: var(--c-white);
  border-radius: var(--radius);
}

.p-works__job {
  padding: 10px 14px;
  background: var(--teal-deep);
  color: var(--c-white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
}

.p-works__job .u-sep {
  opacity: 0.6;
}

.p-works__change {
  padding: 14px 14px 0;
}

.p-works__before {
  color: var(--c-sub);
  font-size: 13px;
  line-height: 1.6;
}

.p-works__arrow {
  margin: 4px 0;
  color: var(--cta-orange);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.p-works__after {
  color: var(--teal-deep);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.p-works__source {
  margin: 12px 14px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
  color: var(--c-sub);
  font-size: 11px;
  line-height: 1.55;
}

/* Splide 上書き（08 §4: SPは半透明 teal-deep 円形地44px） */
.p-works__carousel .splide__arrow {
  width: 44px;
  height: 44px;
  background: rgba(19, 64, 85, 0.55);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  opacity: 1;
}

.p-works__carousel .splide__arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
}

.p-works__carousel .splide__arrow--prev {
  left: 4px;
}

.p-works__carousel .splide__arrow--next {
  right: 4px;
}

.p-works__carousel .splide__pagination {
  position: static;
  margin-top: 12px;
  padding: 0;
}

.p-works__carousel .splide__pagination__page {
  width: 8px;
  height: 8px;
  background: var(--c-white);
  opacity: 0.45;
}

.p-works__carousel .splide__pagination__page.is-active {
  background: var(--c-white);
  opacity: 1;
  transform: scale(1.25);
}

/* --------------------------------------------------------------------------
   13. B8 料金プラン（タブ）
   -------------------------------------------------------------------------- */
.p-price__tabs {
  display: flex;
  gap: 4px;
  margin-top: 22px;
}

.p-price__tab {
  flex: 1 1 0;
  min-height: 48px;
  padding: 6px 2px;
  background: #d5e0e9;
  border: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  color: #5d7081;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color var(--hover-transition),
    color var(--hover-transition);
}

.p-price__tab.is-active {
  background: var(--teal-deep);
  color: var(--c-white);
}

.p-price__panel {
  padding: 18px 14px;
  background: var(--c-white);
  border: 2px solid var(--teal-deep);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

.p-price__name {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-head);
  text-align: center;
}

.p-price__badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 10px;
  background: var(--brand-grad);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: 11px;
  font-weight: 700;
  vertical-align: 2px;
}

.p-price__specs {
  margin-top: 14px;
  border-top: 1px solid var(--c-border);
}

.p-price__spec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 2px;
  border-bottom: 1px solid var(--c-border);
}

.p-price__spec-key {
  color: var(--c-sub);
  font-size: 13px;
}

.p-price__spec-val {
  margin: 0;
  color: var(--teal-deep);
  font-family: var(--font-en);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

/* 価格ブロック（2026-09-21(5) 代表指示）
   並びは 上=正規価格（取消線）／中=先行価格（最大）／下=差額バッジ。
   ■ 取消線と差額バッジは .p-price--emph 配下でのみ効く。
     弁護士レビューで NG になった場合は section の p-price--emph を外すだけで
     従来表示（正規価格＝小さなグレー1行・差額バッジ非表示）へ戻る。
   ■ 「※12月1日以降」は将来価格であることの明示＝法務条件。必ず同じ行に併記し、
     取消線は掛けない（.p-price__future は <s> の外に置く）。 */
.p-price__regular {
  margin-top: 16px;
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.p-price__early {
  margin-top: 4px;
  color: var(--c-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.p-price__early-key {
  margin-right: 2px;
  font-size: 15px;
}

.p-price__early-num {
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* 差額バッジ。既定は非表示＝ p-price--emph を外せば消える */
.p-price__save {
  display: none;
}

/* <s> のブラウザ既定の取消線をここで打ち消しておく。
   これで p-price--emph を外したとき、正規価格は従来どおりの
   「小さなグレー1行・取消線なし」に戻る。 */
.p-price__strike {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
}

/* ▼ ここから下は .p-price--emph が付いているときだけ効く ------------------- */

/* 上段: 正規価格を大きく見せる。数字のみ取消線（グレー2px）・「※12月1日以降」は掛けない */
.p-price--emph .p-price__regular {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0 5px;
  font-size: 13px;
  font-weight: 700;
}

.p-price--emph .p-price__strike {
  color: var(--c-sub);
  font-size: 13px;
  text-decoration: line-through;
  text-decoration-color: var(--c-sub);
  text-decoration-thickness: 2px;
  /* 全角括弧で線が途切れて見えるのを防ぐ（線を1本につなげる） */
  text-decoration-skip-ink: none;
}

.p-price--emph .p-price__strike-num {
  font-family: var(--font-en);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.p-price--emph .p-price__future {
  color: var(--c-sub);
  font-size: 11px;
  font-weight: 500;
  /* 将来価格の明示。取消線を継承させない */
  text-decoration: none;
  white-space: nowrap;
}

/* 下段: 差額バッジ（ピンク塗り・白文字のピル） */
.p-price--emph .p-price__save {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0 3px;
  width: fit-content;
  max-width: 100%;
  margin: 10px auto 0;
  padding: 5px 16px;
  background: var(--accent-pink);
  border-radius: var(--radius-pill);
  color: var(--c-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

.p-price__save-num {
  font-family: var(--font-en);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.p-price__save-word {
  margin-left: 2px;
  font-size: 15px;
}

.p-price__row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border);
  font-size: 14px;
  line-height: 1.75;
}

.p-price__target {
  margin-top: 8px;
  color: var(--teal-deep);
  font-size: 14px;
  font-weight: 700;
}

.p-price__notes {
  margin-top: 18px;
}

.p-price__notes li {
  position: relative;
  margin-top: 8px;
  padding-left: 16px;
  color: var(--c-sub);
  font-size: 12px;
  line-height: 1.7;
}

.p-price__notes li::before {
  content: "\30FB";
  position: absolute;
  left: 0;
}

/* --------------------------------------------------------------------------
   14. B9 無料個別相談（RESERVATION）
   -------------------------------------------------------------------------- */
.p-consult__list {
  margin-top: 16px;
  padding: 14px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.p-consult__list li {
  position: relative;
  padding-left: 16px;
  font-size: 14px;
  line-height: 1.8;
}

.p-consult__list li + li {
  margin-top: 8px;
}

.p-consult__list li::before {
  content: "\30FB";
  position: absolute;
  left: 0;
  color: var(--teal);
}

.p-consult__key {
  font-weight: 700;
  color: var(--teal-deep);
}

.p-consult__steps {
  margin-top: 20px;
}

.p-consult__step {
  position: relative;
  margin-top: 10px;
  padding: 14px 14px 14px 62px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-consult__step-no {
  position: absolute;
  top: 13px;
  left: 14px;
  color: var(--teal);
  font-family: var(--font-en);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.p-consult__step-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--teal-deep);
}

.p-consult__step-body {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.7;
}

.p-consult__cta-note {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--teal-deep);
  text-align: center;
}

.p-consult__embed {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  margin-top: 18px;
  background: var(--bg-alt);
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
}

.p-consult__embed-note {
  color: var(--c-sub);
  font-size: 13px;
}

.p-consult__flow-title {
  margin-top: 36px;
  text-align: center;
}

.p-consult__flow {
  margin-top: 14px;
}

.p-consult__flow-step {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.p-consult__flow-no {
  flex: 0 0 auto;
  color: var(--teal);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}

.p-consult__flow-text {
  font-size: 14px;
  line-height: 1.75;
}

/* --------------------------------------------------------------------------
   15. B10 FAQ
   -------------------------------------------------------------------------- */
.p-faq__list {
  margin-top: 18px;
}

.p-faq .c-acc {
  background: var(--bg-alt);
}

/* --------------------------------------------------------------------------
   16. B11 最終CTA＋フッター
   -------------------------------------------------------------------------- */
.p-final {
  padding: 40px var(--col-pad);
}

.p-final__card {
  padding: 30px 16px 26px;
  background: var(--brand-grad);
  border-radius: 16px;
  text-align: center;
}

.p-final__card .c-btn--ghost {
  border-color: var(--c-white);
  color: var(--c-white);
  background: transparent;
}

.p-final__card .c-btn--ghost:hover {
  background: var(--c-white);
  color: var(--cta-orange);
}

.l-footer {
  padding: 28px var(--col-pad) 34px;
  background: var(--c-footer-bg);
  color: var(--c-white);
  font-size: 13px;
  text-align: center;
}

.l-footer__logo {
  font-size: 15px;
  font-weight: 700;
}

.l-footer__operator {
  margin-top: 8px;
}

.l-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.l-footer__links a {
  color: var(--c-white);
  text-decoration: underline;
}

.l-footer__sep {
  padding: 0 4px;
  opacity: 0.5;
}

.l-footer__copyright {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   17. B0 固定要素（SP固定バー／PC左固定ナビ／PC右固定カード）
   -------------------------------------------------------------------------- */
.l-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  min-height: var(--bar-h);
  padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--bar-bg);
}

.l-bar__text {
  margin-bottom: 7px;
  color: var(--c-white);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.l-bar__btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: var(--col);
  margin: 0 auto;
}

.l-bar .c-btn {
  max-width: none;
  /* 2段ボタンの文字幅を確保するため左右の内側余白だけ詰める（ボタンの幅配分は不変） */
  padding: 8px 8px;
}

/* .c-btn + .c-btn の margin-top:14px が .c-btn--sm の margin:0 に勝っていて、
   副CTAだけ 14px 下がり2つのボタンの高さが揃っていなかった（58px と 44px）。
   バー内では打ち消し、グリッドの stretch で同じ高さに揃える。 */
.l-bar__btns .c-btn + .c-btn {
  margin-top: 0;
}

/* SP固定バーの LINE ボタン（2026-09-21(8) 代表指示）: 文字を2段にして大きく。
   改行は HTML の <br>（DOM の文字列は「LINEで無料特典を受け取る」のまま）。
   2行目「無料特典を受け取る」が語中で割れないよう nowrap で固定する。 */
.l-bar .c-btn[data-cta="line"] {
  font-size: 16px;
  line-height: 1.25;
  white-space: nowrap;
}

.l-sidenav,
.l-offer {
  display: none;
}

/* --------------------------------------------------------------------------
   18. PC（1024px 以上）＝両脇装飾を出す。文字サイズは変えない
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  :root {
    /* PCでは固定バーを出さないので、共有している余白もゼロに戻す */
    --bar-h: 0px;
  }

  body {
    padding-bottom: 0;
    background: var(--bg-outer);
  }

  .p-fv {
    padding-bottom: 48px;
  }

  .l-col {
    box-shadow: var(--col-shadow);
  }

  .l-header__toggle,
  .l-drawer,
  .l-bar {
    display: none !important;
  }

  .l-sidenav {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: var(--side-w);
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .l-sidenav__list {
    width: 100%;
    max-width: 300px;
  }

  .l-sidenav__list li + li {
    border-top: 1px solid rgba(19, 64, 85, 0.14);
  }

  .l-sidenav__list a {
    display: block;
    padding: 13px 6px;
    color: var(--teal-deep);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: color var(--hover-transition);
  }

  .l-sidenav__list a:hover {
    color: var(--cta-orange);
  }

  .l-offer {
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    width: var(--side-w);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  .l-offer__text {
    width: 100%;
    max-width: 300px;
    padding: 12px;
    background: var(--c-white);
    border: 2px solid var(--teal);
    border-radius: var(--radius) var(--radius) 0 0;
    color: var(--teal-deep);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
  }

  .l-offer__line {
    display: inline-block;
  }

  .l-offer .c-btn {
    width: 100%;
    max-width: 300px;
    border-radius: 0 0 var(--radius-btn-b) var(--radius-btn-b);
    font-size: 13px;
  }
}

/* --------------------------------------------------------------------------
   19. モーション配慮
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* B2 のカード横スライドも停止（hover 用の規則は play-state しか触らないので
     ここで animation ごと消せば再開されない） */
  .p-gift__track,
  .p-gift__marquee:hover .p-gift__track,
  .p-gift__marquee:focus-within .p-gift__track {
    animation: none;
  }

  /* 主CTAのシャインも完全停止（帯は translateX(-150%) の位置＝角丸の外に留まる）。
     固定バー・PC右カードの上書き規則（属性2つ＝詳細度が高い）にも必ず勝つよう、
     同じセレクタをここでも並べる。 */
  .c-btn[data-cta="line"]::after,
  .c-btn[data-cta="consult"]::after,
  .c-btn[data-cta="line"][data-cta-position="bar"]::after,
  .c-btn[data-cta="line"][data-cta-position="pc_card"]::after,
  .c-btn[data-cta="consult"][data-cta-position="bar"]::after {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}