@charset "UTF-8";

/* ==========================================================
   Foundation
   ========================================================== */

/* ----- 変数（デザイントークン） ----- */
:root {
  /* Color（2026-06-29 紫メインの寒色系。主役＝コーポレート紫 #af00e8。
     青系をやめ、紫に調和する紫系（グレープ／オーキッド／ライラック）で統一。
     ※変数名はリニューアル前（green/olive/mint）の名残。役割は各コメント参照 */
  --color-main:       #68428e;  /* メイン紫：見出し・番号・下線・ピル帯・枠線アクセント等の主役 */
  --color-sub:        #68428e;  /* サブ要素もメイン紫に統一：ラベル帯・特典リボン・枠線・任意バッジ・フォーム小物 */
  --color-sub-light:  #d8cbe5;  /* 薄プラム（サブ薄・グラデ用） */
  --color-accent:     #68428e;  /* 文字色の紫を主役色に統一（必須バッジ・強調語・規約リンク） */
  --color-cta:        #fcc029;  /* CTA＆旧オレンジ文字・病因論/TOPへ戻るボタン 共通：アンバー（青→#e6a600に変更） */
  --color-green-dark: #68428e;  /* 文字色の紫を主役色に統一（講師／フロー／フォーム等のサブ見出し・署名） */
  --color-text:       #000000;  /* 本文（純黒） */
  --color-bg:         #ffffff;
  --color-bg-sub:     #f8f3fd;  /* 極薄ラベンダー（セクション背景・タグ・ボタン背景） */
  --color-bg-mint:    #f3e8fb;  /* 薄ライラック（MV補足チップ・登録フローのボックス） */
  --color-bg-gray:    #f0f0f0;  /* グレー背景（FAQアコーディオン・無彩色のまま） */
  --color-bg-olive:   #f3e8fb;  /* 薄ライラック（登録フォームの見出し帯等） */
  --color-bg-offwhite:#f9f6fc;  /* 紫寄りオフホワイト（登録フォームの枠内・フッター背景） */
  --color-border:     #e8dcf3;  /* ラベンダーライトボーダー */

  /* サブカラー（22号表紙参考・濁りのないクリアトーン／差し色パレット） */
  --color-yellow:     #ffe000;  /* レモン */
  --color-red:        #ff2b3c;  /* 赤 */
  --color-green:      #00b15a;  /* グリーン */
  --color-pink:       #ff5aa0;  /* ピンク */
  --color-marker:     #fff04d;  /* マーカー強調（レモン薄め・想いの蛍光ペン風） */

  /* Font（指定：本文=Noto Sans CJK JP Medium／見出し=Noto Serif JP Bold） */
  --font-base:    "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-heading: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* Font size（本文最小16px／SPの小さめ表示用に12・14pxを追加） */
  --fs-xs:   12px;   /* SP：タグ等の小さめ表示用 */
  --fs-sm:   14px;   /* SP：小さめ表示用 */
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  34px;
  --fs-3xl:  40px;

  /* Spacing */
  --space-section:        64px;
  --space-section-inner:  40px;
  --space-content:        24px;
  --space-element:        16px;

  /* Layout（コンテンツ幅＝指定1000px） */
  --container-width:    1000px;
  --container-padding:  20px;

  /* Decorative */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 2px 6px rgba(104, 66, 142, .08);
  --shadow-md: 0 6px 18px rgba(104, 66, 142, .12);

  /* z-index */
  --z-header: 100;
}

@media (min-width: 768px) {
  :root {
    --space-section:       96px;
    --space-section-inner: 56px;
  }
}

/* ----- base ----- */
html {
  font-size: var(--fs-base);
  scroll-behavior: smooth;  /* ページトップへ戻る等のアンカー移動を滑らかに（JS不要） */
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: 500; /* Noto Sans CJK JP Medium */
  font-size: var(--fs-base);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}


/* ==========================================================
   Layout
   ========================================================== */

/* ----- l-main ----- */
.l-main { display: block; }

/* ----- l-footer ----- */
.l-footer {
  background-color: var(--color-bg);
}

.l-footer__cta-area {
  position: relative;
  background: url("../images/footer-bg.png") center center / cover no-repeat;
  padding: var(--space-section) 0;
  text-align: center;
}

/* SP（〜767px）：左半分は透明・右半分にお花の画像。境目はマスクのグラデでふわっと。
   縦幅は従来どおり auto 100%。薄さ(opacity)も従来を踏襲。
   画像は::beforeに置き、文字・ボタンは前面に保つ（PC/≥768pxには影響なし）。 */
@media (max-width: 767px) {
  .l-footer__cta-area {
    background: none;
  }
  .l-footer__cta-area::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/footer-bg.png") right center / auto 100% no-repeat;
    opacity: 0.5;   /* 薄く（前回の白50%フィルターと同程度） */
    /* 左→右で 透明→不透明。左約38%まで透明、72%以降お花、間はふわっと */
    -webkit-mask-image: linear-gradient(to right, transparent 38%, #000 72%);
            mask-image: linear-gradient(to right, transparent 38%, #000 72%);
    pointer-events: none;
  }
  .l-footer__cta-inner {
    z-index: 1;   /* 文字・ボタンを背景より前面に */
  }
}

.l-footer__cta-inner {
  position: relative;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.l-footer__cta-catch {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
  text-align: left;
  margin-bottom: var(--space-section-inner);
}

@media (min-width: 768px) {
  .l-footer__cta-catch { font-size: var(--fs-3xl); }
}

/* SP（〜767px）：フッターCTAキャッチを28pxに（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .l-footer__cta-catch { font-size: var(--fs-xl); }   /* 28px */
}

/* フッターCTA：ブロックを左寄せ。会員規約はボタン幅に対して中央 */
.l-footer__cta-inner .c-cta {
  max-width: 680px;
  margin-left: 0;
  margin-right: auto;
}

/* フッターの注記はキャッチの左端に揃えて左寄せ（全幅に伸ばす） */
.l-footer__cta-inner .c-cta__note {
  align-self: stretch;
  width: 100%;
  text-align: left;
}

.l-footer__bottom {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-section-inner) var(--container-padding);
  text-align: right;
}

/* SP（〜767px）：最下部で右寄せナビ（特商法表記）が固定TOPボタン（下16px+56px=約72px）と
   重ならないよう、フッター下部の余白を広げる（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .l-footer__bottom {
    padding-bottom: 88px;
  }
}

.l-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* 右寄せ */
  gap: 8px 0;
  margin-bottom: var(--space-element);
}

/* 項目の間を縦線で区切る（｜） */
.l-footer__nav li:not(:last-child) {
  padding-right: 16px;
  margin-right: 16px;
  border-right: 1px solid var(--color-border);
}

.l-footer__nav-link {
  font-size: var(--fs-base);
  color: var(--color-text);
}

.l-footer__nav-link:hover { color: var(--color-main); }


@media (max-width: 767px) {
  .l-footer__nav-link {
    font-size: var(--fs-sm);   
  }
  .l-form-footer__nav li a {
    font-size: var(--fs-sm);   
  }
}


/* ==========================================================
   Object > Component
   ========================================================== */

/* ----- c-section ----- */
.c-section {
  padding: var(--space-section) 0;
}

.c-section--bg {
  background-color: var(--color-bg-sub);
}

/* SP（〜767px）：各セクションの上余白を縮小（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .c-section {
    padding-top: 32px;
  }
}

.c-section__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ----- c-heading（セクション見出し共通） ----- */
.c-heading {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-main);
  text-align: center;
  margin-bottom: var(--space-section-inner);
}

.c-heading::after {
  content: "";
  display: block;
  width: 100%;
  max-width: 640px;
  height: 1px;
  margin: 18px auto 0;
  background-color: var(--color-main);
}

/* 上下に線を入れる見出し（::after＝下線に加え ::before＝上線） */
.c-heading--lines::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 640px;
  height: 1px;
  margin: 0 auto 18px;
  background-color: var(--color-main);
}

.c-heading--left {
  text-align: left;
}

/* 下線（::after）を消す見出し */
.c-heading--no-line::after {
  display: none;
}

.c-heading--left::after {
  margin-left: 0;
}

.c-heading--sub {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-content);
}

@media (min-width: 768px) {
  .c-heading { font-size: var(--fs-2xl); }
  .c-heading--sub { font-size: var(--fs-xl); }
}

/* SP（〜767px）：見出し（.c-heading）の文字サイズ22px・下余白を詰める（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .c-heading {
    font-size: var(--fs-lg);               /* 22px */
    margin-bottom: var(--space-content);   /* 24px */
  }
  /* サブ見出し「なぜ今、…」のみ18pxに（.c-heading の22px指定より後に置いて上書き） */
  .c-heading--sub {
    font-size: var(--fs-md);               /* 18px */
  }
}

/* ----- c-pill-heading（濃緑の角丸見出し帯） ----- */
.c-pill-heading {
  display: block;
  max-width: 100%;       /* h2（c-heading）と同じ＝コンテンツ幅いっぱい */
  margin: 0 auto var(--space-content);
  padding: 12px 24px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: #ffffff;
  text-align: center;
  background-color: var(--color-main);
  border-radius: 999px;
}

/* ----- c-pill-label（オリーブの小ラベル：経歴 / 実績など） ----- */
.c-pill-label {
  display: inline-block;
  padding: 6px 28px;
  font-family: var(--font-base);   /* ゴシック体 */
  font-weight: 700;
  font-size: var(--fs-base);
  color: #ffffff;
  background-color: var(--color-sub);
  border-radius: 0 999px 999px 0;  /* 角丸は右上・右下のみ */
  margin-bottom: var(--space-element);
}

/* ----- c-button ----- */
.c-button {
  display: inline-block;
  width: 100%;
  max-width: 680px;     /* 幅を広げる（モバイルはコンテナ幅まで＝溢れ防止） */
  padding: 20px 40px;
  font-family: var(--font-base);  /* ゴシック体（Noto Sans） */
  font-size: var(--fs-lg);        /* 文字を大きく（22px） */
  font-weight: 700;
  text-align: center;
  background-color: var(--color-main);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-button::after {
  content: "▶";
  font-size: 0.7em;
  margin-left: 10px;
  vertical-align: middle;
}

.c-button:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

.c-button--primary {
  background-color: var(--color-cta);
}

/* SP（〜767px）：CTAボタン（無料登録申し込みはコチラ）を18px・padding 16px 40pxに（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .c-button {
    font-size: var(--fs-md);   /* 18px */
    padding: 16px 40px;
  }
}

/* ----- c-cta（CTAボタン＋規約リンク＋注記の共通ブロック） ----- */
.c-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.c-cta__terms {
  display: inline-block;
  margin-top: 12px;
  padding: 4px 16px;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--color-cta);   /* 旧オレンジ文字 → CTAと同色（青）に統一 */
  background-color: var(--color-bg-sub);
  border-radius: 999px;
}

.c-cta__terms::after {
  content: "›";
  margin-left: 8px;
}

.c-cta__terms:hover { text-decoration: underline; }

/* ----- c-pagetop（ページトップへ戻る・固定表示／JS不使用） ----- */
.c-pagetop {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;          /* ヘッダー(--z-header:100)より下、コンテンツより上 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 56px;
  height: 56px;
  background-color: var(--color-cta);   /* TOPへ戻る：青（CTAと同色） */
  color: #ffffff;
  border-radius: 50%;
  box-shadow: var(--shadow-md);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-pagetop__arrow {
  display: block;
  width: 9px;
  height: 9px;
  margin-top: 3px;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(-45deg);   /* 上向き矢印 */
}

.c-pagetop__text {
  font-family: var(--font-base);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.c-pagetop:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .c-pagetop {
    right: 32px;
    bottom: 32px;
    width: 64px;
    height: 64px;
  }
}

.c-cta__note {
  margin-top: 14px;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: var(--color-text);
}

/* SP（〜767px）：CTA注記（登録は無料〜）を14pxに（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .c-cta__note {
    font-size: var(--fs-sm);   /* 14px */
  }
}

/* ----- c-tag ----- */
.c-tag {
  display: inline-block;
  padding: 14px 28px;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-main);
  background-color: var(--color-bg-sub);
  border: 1px solid var(--color-sub);
  border-radius: 24px;
}

/* ----- c-accordion ----- */
.c-accordion {
  background-color: var(--color-bg-gray);   /* グレー（border無し） */
  border-radius: var(--radius-md);
}

.c-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
}

.c-accordion__question::before {
  content: "Q.";
  color: var(--color-main);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-right: 4px;
}

/* トグルボタン：グレー円＋下向きシェブロン（カンプ準拠） */
.c-accordion__question::after {
  content: "";
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: #d9d9d9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.2s ease;
}

.c-accordion[open] .c-accordion__question::after {
  transform: rotate(180deg);
}

.c-accordion__answer {
  padding: 0 20px 18px;
  color: var(--color-text);
}


/* ==========================================================
   Object > Project
   ========================================================== */

/* ----- p-mv ----- */
.p-mv {
  position: relative;
  overflow: hidden;
  /* 背景色なし（旧: var(--color-bg-sub) 極薄ラベンダー） */
}

.p-mv__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0;  /* 上下余白なし（MVの縦＝バナー画像の高さに合わせる）／横paddingも外し原寸1000px表示 */
  display: flex;
  flex-direction: column;
  gap: var(--space-section-inner);
}

.p-mv__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-text);
  margin-bottom: 12px;   /* MVを高さ500pxに収めるため余白を圧縮 */
}

.p-mv__logo-mark { width: 32px; }

@media (min-width: 768px) {
  .p-mv__logo {
    justify-content: flex-start;
    font-size: var(--fs-lg);
  }
}

/* 上段：fv-main（1000×500・左透過/右に花）を原寸＝コンテンツ幅いっぱいで背景に敷く。
   左の透過部にロゴ/キャッチ/リードを重ねる */
.p-mv__top {
  position: relative;
  background: url("../images/fv-main.png") top center / 100% auto no-repeat;
  padding-top: 50%;            /* SP：2:1バナーぶんの高さを上部に確保し、本文はその下へ */
}

.p-mv__body {
  text-align: center;
  padding: 0 var(--container-padding);  /* 端から余白（inner横paddingを外したぶん） */
}

@media (min-width: 768px) {
  .p-mv__top {
    padding-top: 0;
    aspect-ratio: 1000 / 500;  /* 原寸比でフル幅表示 */
    display: flex;
    align-items: center;
  }
  .p-mv__body {
    width: 54%;                /* 左の透過部にテキストを配置 */
    text-align: left;
  }
}

/* SP（〜767px）：メインビジュアル上部（ロゴ／キャッチ／リード）を、PC同様に
   画像の左側へ重ねて配置する。
   ・画像（fv-main.png）はオリジナルと同じ「フル幅2:1バナー」の大きさのまま
     （baseの background 指定＝top center / 100% auto をそのまま使用）。
   ・「未経験OK」以降（タグ・注記）はオリジナル同様に画像の下へ配置。
   ※max-width:767px 限定のため、PC（≥768px）には影響しない。 */
@media (max-width: 767px) {
  /* 右上固定ボタン（.c-cta-float）と文言・画像が重ならないよう、MV全体を下げる */
  .p-mv {
    padding-top: 80px;
  }
  .p-mv__top {
    padding-top: 0;          /* バナー用に確保していた余白を解除し、本文を画像へ重ねる */
  }
  /* 上部テキスト群：画像左の透過部（左54%）に重ねて左寄せ配置。
     画像の縦幅（50vw）内に上下中央で収める。 */
  .p-mv__head {
    position: relative;
    z-index: 1;
    width: 54%;              /* 右側の花の画像に重ならないよう左半分に収める */
    min-height: 50vw;        /* 画像（フル幅2:1＝高さ50vw）の高さを確保し、続くタグ等を画像の下へ */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 画像の縦幅内で上下中央に */
    text-align: left;        /* PC同様に左寄せ */
  }
  /* 画像の縦幅（50vw）に収まるよう、上部テキストを縮小（vwで画像に比例／clampで上限=元サイズ） */
  .p-mv__head .p-mv__logo {
    justify-content: flex-start;      /* ロゴも左寄せに */
    font-size: clamp(11px, 3.2vw, 18px);
    margin-bottom: 1vw;
  }
  .p-mv__head .p-mv__logo-mark {
    width: clamp(18px, 5vw, 32px);
  }
  .p-mv__head .p-mv__catch {
    font-size: clamp(15px, 5vw, 34px);
    line-height: 1.3;
    margin-bottom: 1.6vw;
  }
  .p-mv__head .p-mv__lead {
    font-size: clamp(11px, 3.1vw, 18px);
    line-height: 1.55;
    margin-bottom: 0;
  }
}

.p-mv__catch {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 16px;   /* MVを高さ500pxに収めるため余白を圧縮 */
}

@media (min-width: 768px) {
  .p-mv__catch { font-size: var(--fs-3xl); }
}

/* PC幅（テキスト列が十分広い1000px以上）でメインコピーを自動改行させない（手動<br>のみで改行） */
@media (min-width: 1000px) {
  .p-mv__catch { white-space: nowrap; }
}

.p-mv__lead {
  font-size: var(--fs-md);
  margin-bottom: 16px;   /* MVを高さ500pxに収めるため余白を圧縮 */
}

/* タグ：狭幅は縦積み（全幅・等幅）／600px以上で横並び（等幅）。2つを同じ横幅に揃える */
.p-mv__tags {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;   /* MVを高さ500pxに収めるため余白を圧縮 */
}

.p-mv__tags .c-tag {
  font-size: var(--fs-base);
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 600px) {
  .p-mv__tags {
    flex-direction: row;
    justify-content: flex-start;
  }
  .p-mv__tags .c-tag {
    flex: 1 1 0;
    max-width: 240px;
  }
}

/* SP（〜767px）：2タグ（未経験OK／実生活で活かせる）を横並び・小さめ文字で表示。
   狭い端末でも横並びで収まるよう、文字を12pxに縮小＋タグ左右パディングを圧縮。
   ※max-width:767px 限定のため、PC（≥768px）には影響しない。 */
@media (max-width: 767px) {
  .p-mv__tags {
    flex-direction: row;         /* 横並び */
    justify-content: flex-start;
    margin-top: 20px;            /* 「未経験OK」の上に余白 */
  }
  .p-mv__tags .c-tag {
    flex: 1 1 0;                 /* 2つを等幅で並べる */
    max-width: 240px;
    font-size: var(--fs-xs);    /* 12px */
    padding: 10px 8px;          /* 横並びで収まるよう左右パディングを圧縮 */
  }
}

/* 補足情報：淡い緑背景のタグ型チップ×2（封筒アイコン＋テキスト） */
.p-mv__notes {
  display: grid;
  gap: 10px;   /* 末尾要素のため下マージンなし（MVを高さ500pxに収める） */
}

.p-mv__note {
  position: relative;
  padding: 12px 16px 12px 48px;
  font-size: var(--fs-base);
  font-weight: 500;
  text-align: left;
  background-color: var(--color-bg-mint);
  border-radius: var(--radius-md);
}

.p-mv__note::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2368428e'%20stroke-width='1.7'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='14'%20rx='2'/%3E%3Cpath%20d='M3.5%207.5l8.5%206%208.5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* SP（〜767px）：補足チップ2件も12pxに縮小（タグと同じ方法・PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .p-mv__note {
    font-size: var(--fs-xs);    /* 12px */
  }
}

/* 「無料登録」見出し（新MV：キャッチに代えて配置） */
.p-mv__free {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-2xl);
  line-height: 1.3;
  color: var(--color-green-dark);
  margin-bottom: var(--space-content);
}

@media (min-width: 768px) {
  .p-mv__free { font-size: var(--fs-3xl); }
}

/* スクロール追従の浮遊CTA（右上固定／サイトのオレンジボタン意匠を踏襲） */
.c-cta-float {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 95;          /* ヘッダー(100)・モーダル(200)より下、コンテンツより上 */
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--fs-base);
  color: #ffffff;
  background-color: var(--color-cta);
  border-radius: 999px;
  box-shadow: var(--shadow-md);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.c-cta-float::after {
  content: "▶";
  font-size: 0.7em;
  margin-left: 8px;
}

.c-cta-float:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

@media (min-width: 768px) {
  .c-cta-float {
    top: 20px;
    right: 24px;
    padding: 14px 30px;
    font-size: var(--fs-md);
  }
}

.p-mv__band {
  position: relative;
  z-index: 1;
  max-width: 860px;            /* 帯を一回り小さく */
  margin: 0 auto;
  padding: 0 var(--container-padding) var(--space-section-inner);
}

/* ----- p-purpose（健康指導士をつくる想い） ----- */
/* 特別な想いとわかるよう、白地の枠で囲む（オリーブ枠＋角丸＋影） */
.p-purpose__frame {
  position: relative;   /* 四隅の装飾画像の基準 */
  max-width: 940px;
  margin: 0 auto;
  padding: var(--space-content);
  background-color: var(--color-bg);
  border: 1px solid var(--color-sub);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .p-purpose__frame { padding: var(--space-section-inner) 48px; }
}

/* 四隅の葉の装飾（枠はそのまま、その上に重ねる／装飾のため本文より背面） */
.p-purpose__corner {
  position: absolute;
  width: 96px;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.p-purpose__corner--tl { top: 4px;    left: 4px; }
.p-purpose__corner--tr { top: 4px;    right: 4px; }
.p-purpose__corner--bl { bottom: 4px; left: 4px; }
.p-purpose__corner--br { bottom: 4px; right: 4px; }

/* 本文・見出しは装飾より前面に */
.p-purpose__frame > .c-heading,
.p-purpose__frame > .p-purpose__body {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .p-purpose__corner { width: 140px; }
}

.p-purpose__body {
  max-width: 840px;   /* 長文を読みやすい幅に */
  margin: 0 auto;
}

.p-purpose__text {
  font-size: var(--fs-base);
  text-align: justify;
}

.p-purpose__text + .p-purpose__text {
  margin-top: 1.5em;
}

/* 重要箇所の強調：濃緑文字＋薄緑のマーカー風ハイライト */
.p-purpose__emph {
  color: var(--color-main);
  font-weight: 700;
  padding: 0 2px;
  background: linear-gradient(transparent 62%, var(--color-marker) 62%, var(--color-marker) 92%, transparent 92%);
}

.p-purpose__author {
  margin-top: var(--space-content);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  font-weight: 700;
  text-align: right;
  color: var(--color-green-dark);
}

/* SP（〜767px）：「健康指導士をつくる想い」の見出し22px・本文14pxに縮小。
   .c-heading は共通クラスのため .p-purpose 配下に限定。
   ※max-width:767px 限定のため、PC（≥768px）には影響しない。 */
@media (max-width: 767px) {
  .p-purpose {
    padding-top: 32px;          /* セクション上余白を縮小（.c-sectionの64px→32px） */
    padding-bottom: 32px;       /* セクション下余白も縮小（64px→32px） */
  }
  .p-purpose__frame {
    padding-top: 12px;          /* 上paddingのみ縮小（左右・下の24pxは維持） */
  }
  .p-purpose .c-heading {
    font-size: var(--fs-lg);    /* 22px */
    margin-top: 30px;
  }
  .p-purpose__text {
    font-size: var(--fs-sm);    /* 14px */
  }
  .p-purpose__author {
    font-size: var(--fs-lg);    /* 22px */
    padding-right: 15px;
    padding-bottom: 8px;
  }
}

/* ----- p-worries ----- */
.p-worries__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-content);
  align-items: center;
}

@media (min-width: 768px) {
  /* PCのみ：カードの高さを夕日画像に揃える（stretch） */
  .p-worries__inner { flex-direction: row; align-items: stretch; }
  .p-worries__list { align-content: space-between; }
}

.p-worries__photo {
  width: 100%;
}

@media (min-width: 768px) {
  .p-worries__photo { width: 44%; flex-shrink: 0; }
}

/* お悩みリスト：白いカード内にチェック項目を並べる */
.p-worries__list {
  flex: 1;
  width: 100%;
  display: grid;
  gap: 18px;
  padding: 28px 32px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.p-worries__item {
  position: relative;
  padding-left: 40px;
  font-weight: 700;
}

/* チェックは支給アイコン（ui-check.png） */
.p-worries__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  background: url("../images/ui-check.png") center / contain no-repeat;
}

/* ----- p-reason ----- */
.p-reason {
  margin-top: var(--space-section);
}

.p-reason__icons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-content);
  margin-bottom: var(--space-section-inner);
}

@media (min-width: 768px) {
  .p-reason__icons { grid-template-columns: repeat(4, 1fr); }
}

.p-reason__icon {
  max-width: 200px;
  margin: 0 auto;
}

.p-reason__text {
  font-size: var(--fs-md);
  text-align: center;
}

/* SP（〜767px）：この説明文のみ左寄せ＋14pxに（PC/≥768pxは中央寄せ・元サイズのまま） */
@media (max-width: 767px) {
  .p-reason__text {
    text-align: left;
    font-size: var(--fs-sm);   /* 14px */
  }
}

/* ----- p-causes（5つの病因：講座セクション内の控えめなテキストリンク → クリックでポップアップ／CSSのみ・JS不使用） ----- */
/* トリガー：講座本文の下に置く控えめなテキストリンク */
.p-causes__trigger {
  display: inline-block;
  padding: 14px 36px;
  font-weight: 700;
  color: #fff;
  background-color: var(--color-cta);   /* 病因論トリガー：青（CTAと同色） */
  border: 2px solid var(--color-cta);
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.p-causes__trigger:hover {
  opacity: 0.92;
  transform: translateY(-2px);
}

.p-causes__btn-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 15px;
  color: #ffffff;
  background-color: var(--color-main);
  border-radius: 50%;
}

/* ポップアップ（:target で表示／JS不使用） */
.p-causes__modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--container-padding);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.p-causes__modal:target {
  opacity: 1;
  visibility: visible;
}

.p-causes__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
}

.p-causes__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
  max-height: 86vh;
  overflow-y: auto;
  padding: var(--space-section-inner) var(--space-content);
  background-color: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  transform: translateY(12px);
  transition: transform 0.25s ease;
}

.p-causes__modal:target .p-causes__dialog {
  transform: translateY(0);
}

.p-causes__close {
  position: absolute;
  top: 6px;
  right: 16px;
  font-size: 30px;
  line-height: 1;
  color: var(--color-sub);
}

.p-causes__close:hover { color: var(--color-main); }

.p-causes__modal-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-green-dark);
  margin-bottom: var(--space-element);
}

.p-causes__modal-photo {
  display: none;   /* 5つの病因①〜⑤の写真を非表示（モデル図・本文は残す） */
  margin-bottom: var(--space-element);
}

.p-causes__modal-photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.p-causes__modal-text {
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--color-text);
}

/* まとめポップアップ：やや広め＋全体見出し＋各病因の区切り */
.p-causes__dialog--wide { max-width: 640px; }

.p-causes__modal-heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  color: var(--color-main);
  text-align: center;
  margin-bottom: var(--space-content);
}

/* ポップアップ内のリード文・モデル図（旧 p-cause__lead / __model 相当） */
.p-causes__modal-lead {
  font-size: var(--fs-base);
  line-height: 1.9;
  margin-bottom: var(--space-content);
}

.p-causes__modal-model {
  max-width: 600px;
  margin: 0 auto var(--space-content);
}

.p-causes__detail-list { list-style: none; }

.p-causes__detail + .p-causes__detail {
  margin-top: var(--space-section-inner);
  padding-top: var(--space-content);
  border-top: 1px solid var(--color-border);
}

/* ----- p-course（健康指導士講座について：控えめな補足テキスト） ----- */
.p-course__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: var(--space-element);
}

/* PC（≥768px）のみ元のサイズに戻す（SPは--fs-md=18pxのまま） */
@media (min-width: 768px) {
  .p-course__title { font-size: var(--fs-xl); }   /* 28px */
}

.p-course__body {
  max-width: 840px;
  margin: 0 auto;
}

.p-course__text {
  font-size: var(--fs-base);
  line-height: 1.9;
  text-align: justify;
}

.p-course__text + .p-course__text {
  margin-top: 1.5em;
}

/* SP（〜767px）：講座説明の本文を14pxに縮小（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .p-course__text {
    font-size: var(--fs-sm);    /* 14px */
  }
}

/* 5つの病因論ポップアップへの控えめなテキストリンク */
.p-course__cause-link {
  margin-top: var(--space-content);
  text-align: center;
}

/* ----- p-benefit（無料会員特典） ----- */
/* SP（〜767px）：このセクションのみ上余白を縮小（.c-sectionの32px→16px。PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .p-benefit {
    padding-top: 16px;
  }
}

.p-benefit__catch {
  margin: var(--space-section-inner) 0;
  font-family: var(--font-base);
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--color-main);
  text-align: center;
}

/* SP（〜767px）：キャッチ文言を20px・上/左右margin 0・下margin 20pxに（PC/≥768pxには影響なし） */
@media (max-width: 767px) {
  .p-benefit__catch {
    font-size: 18px;
    margin: 0 0 20px;
  }
}

.p-benefit__banner {
  max-width: 800px;
  margin: var(--space-section-inner) auto 0;
}

.p-benefit__banner img {
  border-radius: var(--radius-md);
}

/* ----- p-future ----- */
.p-future__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-section-inner);
}

@media (min-width: 1024px) {
  .p-future__inner {
    flex-direction: row;
    align-items: flex-start;
  }
  .p-future__head { flex-shrink: 0; width: 240px; }
  .p-future__list { flex: 1; }
}

.p-future__sub {
  font-family: var(--font-heading);   /* 明朝体 */
  font-weight: 700;
  font-size: var(--fs-lg);            /* 講師紹介ラベルと同サイズに統一 */
  color: var(--color-green-dark);     /* 講師紹介ラベルと同じ濃緑に統一 */
  margin-bottom: 8px;
  text-align: center;
}

.p-future__heading {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.5;
  text-align: center;
}

@media (min-width: 1024px) {
  .p-future__sub,
  .p-future__heading { text-align: left; }
  .p-future__heading { font-size: var(--fs-2xl); }
}

.p-future__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-content);
}

.p-future__photo {
  margin-bottom: 12px;
}

.p-future__photo img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.p-future__caption {
  text-align: center;
  font-weight: 700;
  font-size: var(--fs-base);
  border-bottom: 2px dotted var(--color-main);
}

/* ----- p-instructor ----- */
.p-instructor__sub {
  font-family: var(--font-heading);   /* 明朝体 */
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--color-green-dark);
  margin-bottom: var(--space-content);
}

/* PC（≥768px）のみ元のサイズに戻す（SPは--fs-lg=22pxのまま） */
@media (min-width: 768px) {
  .p-instructor__sub { font-size: var(--fs-xl); }   /* 28px */
}

.p-instructor__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-content);
}

@media (min-width: 768px) {
  .p-instructor__inner {
    flex-direction: row;
    gap: var(--space-section-inner);
    align-items: flex-start;
  }
  .p-instructor__side { flex-shrink: 0; width: 280px; }
  .p-instructor__body { flex: 1; }
}

.p-instructor__name {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  font-weight: 700;
  margin-bottom: var(--space-element);
}

.p-instructor__photo img {
  border-radius: var(--radius-md);
}

.p-instructor__title {
  font-weight: 700;
  color: var(--color-green-dark);
  margin-bottom: var(--space-content);
}

.p-instructor__block {
  margin-bottom: var(--space-content);
}

.p-instructor__history {
  display: grid;
  gap: 10px;
}

.p-instructor__history-row {
  display: flex;
  gap: 12px;
}

.p-instructor__history-row dt {
  flex-shrink: 0;
  font-weight: 700;
  color: var(--color-text);
}

.p-instructor__text {
  font-size: var(--fs-base);
}

.p-instructor__quote {
  margin-top: var(--space-section-inner);
  font-family: var(--font-base);   /* ゴシック体 */
  font-weight: 700;
  font-size: var(--fs-2xl);
  color: var(--color-main);
  text-align: center;
}

/* 講演の様子（写真3枚） */
.p-instructor__lecture {
  margin-top: var(--space-section-inner);
}

.p-instructor__lecture-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-content);
  margin-top: var(--space-content);
}

@media (min-width: 600px) {
  .p-instructor__lecture-list { grid-template-columns: repeat(3, 1fr); }
}

.p-instructor__lecture-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* ----- p-flow ----- */
.p-flow__list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 720px;
  margin: 0 auto var(--space-section-inner);
}

.p-flow__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-element);
}

/* ステップ間の下向き矢印（カンプ準拠：番号円の真下に細い矢印） */
.p-flow__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 24px;            /* 番号円の中心 */
  bottom: -22px;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid var(--color-main);
  border-bottom: 2px solid var(--color-main);
}

/* 番号円（枠外） */
.p-flow__step {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-main);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  border-radius: 50%;
}

/* タイトル＋テキストを薄緑ボックス（border無し）で囲う */
.p-flow__body {
  flex: 1;
  display: grid;
  gap: 4px;
  padding: 18px 24px;
  background-color: var(--color-bg-mint);   /* 薄緑（border無し） */
  border-radius: var(--radius-md);
}

.p-flow__title {
  font-family: var(--font-base);   /* ゴシック体 */
  font-weight: 700;
  font-size: var(--fs-md);
  color: var(--color-green-dark);
}

.p-flow__text {
  font-size: var(--fs-base);
  color: var(--color-text);
}

@media (min-width: 600px) {
  .p-flow__body {
    grid-template-columns: 10em 1fr;   /* タイトル列を固定幅にし、区切り線・説明文の開始位置を全ステップで揃える */
    align-items: center;
    gap: 0;
  }
  .p-flow__title {
    padding-right: 20px;
    border-right: 1px solid var(--color-border);
    margin-right: 20px;
    white-space: nowrap;
  }
}

/* 正規会員5つの特典 */
/* この項目のみセクションの幅制限（c-section__inner:1000px）を超えて広げる。
   ビューポート中央に展開し、最大1200px・左右に余白を残すので横スクロールは発生しない。
   ※他セクションには影響しない（.p-benefits 限定） */
.p-benefits {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1200px, calc(100vw - 2 * var(--container-padding)));
  margin: 0 auto;  /* 直下のCTAを一旦非表示中のため下マージンなし（CTA復活時は var(--space-section-inner) を付与） */
}

/* 見出し（両端の◇装飾はCSSで再現） */
.p-benefits__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--color-main);
  text-align: center;
  margin-bottom: 50px;
}

/* PC時のみ見出し文字を大きく */
@media (min-width: 768px) {
  .p-benefits__heading { font-size: var(--fs-xl); }
}

/* 線は flex:1 で伸縮し、下のカード幅に合わせて端まで伸びる。
   線＝グラデーション（可変長）／◇＝SVG（テキスト寄りの端に固定サイズで配置） */
.p-benefits__heading::before,
.p-benefits__heading::after {
  content: "";
  flex: 1 1 auto;
  min-width: 24px;
  height: 12px;
}

/* 左側：線が左から伸び、右端（テキスト寄り）に◇ */
.p-benefits__heading::before {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='2.5' width='7' height='7' transform='rotate(45 6 6)' fill='none' stroke='%2368428e' stroke-width='1.2'/%3E%3C/svg%3E") right center / 11px 11px no-repeat,
    linear-gradient(var(--color-main), var(--color-main)) left center / calc(100% - 16px) 1px no-repeat;
}

/* 右側：左端（テキスト寄り）に◇、線が右へ伸びる */
.p-benefits__heading::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Crect x='2.5' y='2.5' width='7' height='7' transform='rotate(45 6 6)' fill='none' stroke='%2368428e' stroke-width='1.2'/%3E%3C/svg%3E") left center / 11px 11px no-repeat,
    linear-gradient(var(--color-main), var(--color-main)) right center / calc(100% - 16px) 1px no-repeat;
}

/* カード一覧：スマホ＝縦1列、PC＝横5列 */
.p-benefits__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-element);
}

@media (min-width: 768px) {
  .p-benefits__list { grid-template-columns: repeat(5, 1fr); }
}

.p-benefits__item {
  position: relative;  /* バッジを枠上端に重ねて配置するための基準 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 16px 22px;  /* バッジが上に張り出す分、上余白を確保 */
  border-radius: var(--radius-md);
}

/* 特典1・3・5／2・4で背景色を交互に（偶数は奇数より薄い、サイト調の紫寄りオフホワイト） */
.p-benefits__item:nth-child(odd)  { background-color: #f3e8fb; }
.p-benefits__item:nth-child(even) { background-color: #f9f6fc; }

/* バッジは枠の上端中央に重ねて配置 */
.p-benefits__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px 20px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  color: #ffffff;
  background-color: var(--color-main);
  border-radius: 999px;
}

.p-benefits__title {
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--color-text);
  text-align: center;
  margin-bottom: 10px;
}

.p-benefits__text {
  font-size: 14px;
  line-height: 1.8;
  text-align: left;
  margin-bottom: 18px;  /* スマホは現状維持 */
}

@media (min-width: 768px) {
  .p-benefits__text { margin-bottom: 5px; }  /* PC時のみ */
}

/* 全SVGは高さ共通（36.85）・幅のみ異なるため、高さを揃えて見た目を統一（幅は自動） */
.p-benefits__icon {
  width: auto;
  height: 75px;
  margin-top: auto;  /* テキスト量が異なってもアイコンを下端で揃える */
}

/* 特典タイトルの改行制御（特典2はPC時のみ改行） */
.p-benefits__br-pc { display: none; }   /* スマホ：改行しない */
@media (min-width: 768px) {
  .p-benefits__br-pc { display: inline; }   /* PC：改行する */
}

/* ----- p-faq ----- */
.p-faq__list {
  display: grid;
  gap: var(--space-element);
}

@media (min-width: 768px) {
  .p-faq__list {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ----- p-legal（会員規約・プライバシーポリシー・特商法表記の共通レイアウト） ----- */
.p-legal__inner {
  max-width: 840px;            /* 本文は読みやすい幅にやや絞る */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.p-legal__lead {
  margin-bottom: var(--space-section-inner);
  font-size: var(--fs-base);
}

.p-legal__block + .p-legal__block {
  margin-top: var(--space-section-inner);
}

.p-legal__subtitle {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
  padding-left: 14px;
  border-left: 4px solid var(--color-main);
  margin-bottom: var(--space-element);
}

.p-legal__text + .p-legal__text {
  margin-top: 1em;
}

.p-legal__list {
  margin-top: var(--space-element);
  display: grid;
  gap: 8px;
}

.p-legal__list li {
  position: relative;
  padding-left: 1.2em;
}

.p-legal__list li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: var(--color-main);
  font-weight: 700;
}

/* 特商法表記などの2列テーブル（項目／内容） */
.p-legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.p-legal__table th,
.p-legal__table td {
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
  word-break: break-word;
}

.p-legal__table th {
  width: 32%;
  background-color: var(--color-bg-sub);
  color: var(--color-main);
  font-weight: 700;
}

.p-legal__table a {
  color: var(--color-main);
  text-decoration: underline;
}

/* 本文中のリンク（別表1へのページ内リンク等）：無彩色＋下線のみで判別 */
.p-legal__link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

/* 章見出し（c-pill-heading を流用し、章間の余白を付与） */
.p-legal__chapter {
  margin-top: var(--space-section);
}
.c-heading + .p-legal__chapter {
  margin-top: 0;
}

/* 条（article）単位のまとまり */
.p-legal__article {
  margin-top: var(--space-content);
}

/* 項（1, 2, 3…）：濃緑の番号付きリスト */
.p-legal__ol {
  margin-top: var(--space-element);
  list-style: none;
  counter-reset: legal-item;
}
.p-legal__ol > li {
  position: relative;
  padding-left: 1.8em;
}
.p-legal__ol > li + li {
  margin-top: 10px;
}
.p-legal__ol > li::before {
  counter-increment: legal-item;
  content: counter(legal-item);
  position: absolute;
  left: 0;
  color: var(--color-main);
  font-weight: 700;
}

/* 号（(1)(2)…）：括弧数字のリスト */
.p-legal__paren {
  margin-top: 10px;
  list-style: none;
  counter-reset: legal-paren;
}
.p-legal__paren > li {
  position: relative;
  padding-left: 2.4em;
}
.p-legal__paren > li + li {
  margin-top: 6px;
}
.p-legal__paren > li::before {
  counter-increment: legal-paren;
  content: "(" counter(legal-paren) ")";
  position: absolute;
  left: 0;
  color: var(--color-main);
  font-weight: 700;
}

@media (min-width: 768px) {
  .p-legal__subtitle { font-size: var(--fs-xl); }
  .p-legal__table th { width: 28%; }
}


/* ============================================================
   法務ページ（terms / privacy / tokushoho）：装飾を抑えたプレーン表示
   ・緑の角丸帯／緑見出し／緑番号を撤去し、文書的な体裁に統一
   ・c-pill-heading / c-heading はTOPでも使うため .p-legal 内のみ上書き
   ============================================================ */

/* ページ見出し（h1）：緑文字 → 黒、下線も無彩色に */
.p-legal .c-heading { color: var(--color-text); }
.p-legal .c-heading::after { background-color: var(--color-border); }

/* 章見出し：緑の角丸帯 → 黒のプレーン見出し（下線で区切り） */
.p-legal__chapter.c-pill-heading {
  padding: 0 0 8px;
  color: var(--color-text);
  text-align: left;
  background: none;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}

/* 条見出し：緑文字・緑の左線を撤去 */
.p-legal__subtitle {
  color: var(--color-text);
  padding-left: 0;
  border-left: none;
}

/* 項（1,2…）・号（(1)(2)…）・中黒の番号：緑 → 黒 */
.p-legal__ol > li::before,
.p-legal__paren > li::before,
.p-legal__list li::before {
  color: var(--color-text);
}

/* 表（特商法）：項目見出しの緑文字を撤去 */
.p-legal__table th { color: var(--color-text); }

/* 表内リンク：緑をやめ、下線のみで判別 */
.p-legal__table a { color: inherit; }


/* ==========================================================
   Object > Utility
   ========================================================== */
.u-green  { color: var(--color-main); }
.u-orange { color: var(--color-cta); }   /* 旧オレンジ強調文字 → CTAと同色に統一 */
.u-purple { color: var(--color-main); }    /* メイン紫 #68428e */
.u-yellow { color: var(--color-cta); }   /* 「黄色」＝#e6a600（CTAと同じゴールド・単色／縁取りなし） */   /* 旧オレンジ強調文字 → CTAと同色（青）に統一 */

.u-sp-only { display: block; }
.u-pc-only { display: none; }

@media (min-width: 768px) {
  .u-sp-only { display: none; }
  .u-pc-only { display: block; }
}

/* SP専用の改行用<br>：PCでは改行しない／SP（〜767px）でのみ改行する */
.u-br-sp { display: none; }
@media (max-width: 767px) {
  .u-br-sp { display: inline; }
}

.u-text-center { text-align: center; }