/* ==================================================================
 * 和文ウェイトの底上げ（CEO指示 2026-09-01）
 *
 * 旧サイトの A1ゴシック（モリサワ・丸ゴシック）を Zen Maru Gothic へ置換した後、
 * 「細いテキストは全てウェイトを1段階上げたい」との指示を受けての調整。
 *
 * Zen Maru Gothic の利用可能ウェイト: 300 / 400 / 500 / 700 / 900
 *   400 → 500 （14件）
 *   500 → 700 （15件）… 600 が無いため次段は700
 *   700 / 900 は「細い」に当たらないため据え置き
 *   欧文（Inter / Lexend Deca 等）も対象外
 *
 * ★ これは意図的に本番と変える調整。完全再現からの逸脱として記録する。
 *   元に戻す場合は tmp/campain.css.bak を参照。
 * ================================================================== */


/* ------------------------------------------------------------------
 * cp-fixed-width-guard
 * 設計ツリーの width は STUDIO キャンバス基準の実測値（例 .cp-cta__reco-title の 700px）。
 * STUDIO 実行時は親側の制約で縮むため、本番では 446px に収まり溢れない。
 * 素のCSSに移すと固定幅がそのまま効いて親からはみ出し、文字が切れる。
 * → cp- 名前空間の要素すべてに max-width:100% を当てて本番の挙動に合わせる。
 * （2026-09-01 CEO指摘「文字のずれ」の修正。実測: #message-1/#cta-3 が 149px はみ出していた）
 * ------------------------------------------------------------------ */
.cp-body [class*="cp-"] {
  max-width: 100%;
}


/* ------------------------------------------------------------------
 * ブランド青・赤のコントラスト調整（CEO決定 2026-09-15「直してOK」）
 *
 * なぜ: このファイルが担当する /reblue/liteblue と /campain で、
 *   #369bdc（var(--s-color-04ab6cae)）と #ff2d60（var(--s-color-eba1e906)）を
 *   文字色・ボタン地色に使っており WCAG AA を下回っていた。
 *   根拠（tools/audit_page.py lowContrast・2026-09-15 実測・2ページ合計）:
 *     #369bdc 文字 / 白地      3.05（要 4.5）… 58件
 *     白文字 / #369bdc ボタン  3.05（要 4.5）… 22件
 *     #ff2d60 文字 / #f5f5f5   3.32（要 4.5）… 18件
 *     #369bdc 文字 / #f3e9dc   2.54（要 3）  … 16件
 *     #ff2d60 文字 / 白地      3.62（要 4.5）…  8件 ほか
 *
 * 何をしたか: 上記2トークンの **このファイル内の全宣言** を、色相そのままで
 *   明度だけ下げた派生トークン（tokens.css）へ差し替えた。
 *     var(--s-color-04ab6cae) #369bdc → var(--o-c-brand-blue-d) #2976a7（24%暗）
 *     var(--s-color-eba1e906) #ff2d60 → var(--o-c-brand-red-d)  #d62651（16%暗）
 *   罫線・枠線・装飾の棒も同時に差し替えている。文字だけ暗くすると、
 *   同じ見出しの下線やカード枠が元の明るい色のまま残り、1画面に
 *   2種類の青／赤が並んで色ミスに見えるため。
 *   ★ tokens.css の元トークンは値を変えていない。ロゴ・グラデーション等
 *     他ページの用途は一切変わらない。コメント中の #369bdc / #ff2d60 の
 *     記述は「設計ツリーの一次資料はこの値」という記録なので残してある。
 * ------------------------------------------------------------------ */
@charset "UTF-8";
/* ==================================================================
 * campain.css — /reblue/liteblue/campain 専用スタイル
 *
 * 一次資料（優先度順）:
 *   1. 設計ツリー原本 pageviews/77e5eed8-1a79-4591-8ade-4da7f1b3a947.json
 *      （#cta のみ symbolviews/3747760b-d9fd-4259-9817-c1cb38994c9a.json）
 *   2. tests/baseline_campain.json（1440px・全高 18,941px）
 *   3. theme/assets/css/tokens.css（STUDIOカラートークン46件・実測値）
 *   ★ specs/A_core.md ／ specs/00_共有シンボル.md ／ specs/_確定事項_ブレークポイント.md は
 *     Drive ストリームが応答せず本作業では読めなかった（Operation timed out）。
 *     TODO: Drive 復帰後に突き合わせること。
 *
 * ---- 守ること --------------------------------------------------------
 * ・色は tokens.css の --s-color-* を使う。**新しい色を発明しない。**
 *   トークンに無い直値（#2e2e2e / #333 / #f3e9dc / #fbfafaff）だけ、
 *   下の :root で --cp-c-* として一度だけ定義している。それ以外の直値は書かない。
 * ・フォントは --s-font-* を使う。
 *   旧「A1ゴシック M JIS2004」は --s-font-aca0103b（= Noto Sans JP）。CEO決定2・B案。
 *   ★字面が変わるので、見出しの <br> 位置は実装後に必ず目視確認すること。
 * ・ブレークポイントは max-width の4段のみ。min-width との範囲指定は使わない。
 *     @media screen and (max-width: 1140px)   ... @small
 *     @media screen and (max-width:  840px)   ... @tablet
 *     @media screen and (max-width:  540px)   ... @mobile
 *     @media screen and (max-width:  320px)   ... @mini
 *   狭い側ほど後ろに書く（後勝ち）。**display は全段で明示し、継承に頼らない。**
 *   display 以外の値は STUDIO と同じく「上書きが無ければ広い側から継承」でよい。
 *
 * ---- 命名 ------------------------------------------------------------
 *   .cp-*  … campain ページ専用。共通パーツの .o-* とは名前空間を分ける。
 *
 * ---- このファイルの並び ----------------------------------------------
 *   0. ローカル変数
 *   1. 骨格（.cp-main / .cp-hero / .cp-body）
 *   2. セクション共通（.cp-section / .cp-head）
 *   3. CTA 共通（#cta / #cta-1 / #cta-2 / #cta-3）
 *   4. #footerbar
 *   5. セクション別の区画（担当エージェントはここに追記する）
 *
 * ★ セクション担当は 5. の自分の区画にだけ書くこと。
 *   1〜4 を書き換えると他セクションに波及する。
 * ================================================================== */


/* ==================================================================
 * 0. ローカル変数
 * ------------------------------------------------------------------
 * tokens.css に載っていない直値だけをここで一度だけ名前付けする。
 * このファイルは page-campain.php のときだけ読まれる（inc/enqueue.php）。
 * ================================================================== */
:root {
  /* 見出し既定色。設計ツリー実測 #2e2e2e（トークン化されていない直値）。 */
  --cp-c-ink: #2e2e2e;
  /* 本文・リストの文字色。設計ツリー実測 #333。 */
  --cp-c-body: #333333;
  /* ヒーロー地色 ＝ #cta（ブランド版）の地色。設計ツリー実測 #f3e9dc。 */
  --cp-c-sand: #f3e9dc;
  /* CTA（クーポン版）の地色。設計ツリー実測 #fbfafaff。 */
  --cp-c-cta-bg: #fbfafaff;
  /* ボタン共通の影。設計ツリー実測（末尾の半角スペースまで原文どおり）。 */
  --cp-shadow-btn: 0px 3px 10px 0px rgba(0, 0, 0, 0.25);
}


/* ==================================================================
 * 1. 骨格
 * ------------------------------------------------------------------
 * Base
 *  └ メインコンテンツ <main> .cp-main   flex row / justify-content:flex-end
 *      ├ メインビジュアル  .cp-hero     position:fixed / left:0 / width:50% / 100vh
 *      └ ボディ            .cp-body     width:50% / padding:168px 80px 80px
 *
 * .cp-hero が position:fixed で流れから外れるため、.cp-body は
 * justify-content:flex-end によって右半分に寄る。@mobile で縦積みになる。
 * ================================================================== */

.cp-main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-end;
  flex: none;
  gap: 0px;
  padding: 0px;
  width: 100%;
  /*
   * なぜ: .cp-hero は position:fixed ＋ filter で独立したスタッキングコンテキストになるため、
   *   static なフッターより常に前面に来て、フッター左半分（ロゴ・会社概要・プライバシー
   *   ポリシー・お問い合わせ）を覆い隠していた（541px 以上の全幅で発生）。
   * 根拠: 計測 elementFromPoint（ローカル 768/900/1440）で フッターロゴ・「会社概要」の
   *   中心点が H2.cp-hero__logo / H1.cp-hero__sub / DIV.cp-hero にヒット。
   *   現行サイト（lgbtqordinary.com）の同じ点は A.text.link＝自分自身にヒットしており覆われていない
   *   （現行は main が position:relative; z-index:0 で hero を内包している）。
   * 対処: main 側にスタッキングコンテキストを作って hero を閉じ込め、
   *   フッターを下の page スコープ規則で 1 段上に置く。
   * 2026-09-14
   */
  position: relative;
  z-index: 0;
}

/* ---- ヒーロー（メインビジュアル） ---- */
.cp-hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 40px;
  margin: 0 0 0 0;
  padding: 80px 50px 80px 50px;
  background-color: var(--cp-c-sand);
  box-shadow: none;
  mix-blend-mode: normal;
  overflow: hidden;
  /* 実測: filter: brightness(118%) が要素自体に掛かっている（下の ::before とは別）。 */
  filter: brightness(118%);
}

/*
 * 背景画像。STUDIO は content:image を ::before の background-image で敷く。
 * 画像は hero.php 側からインラインで --cp-hero-img を渡せば差し替えられる。
 * 既定値は設計ツリーの src（s-1440x1440_v-fms_webp_5e1dd2ee-….jpg）を
 * WebP 最適化したもの。
 * TODO: background-position は抽出データに含まれていない。STUDIO 既定の center を
 *   仮に置いている。実機比較でずれていたらここを直すこと。
 */
.cp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--cp-hero-img, url("../img/static/s-1440x1440_v-fms_webp_5e1dd2ee-8f63-41ae-8650-7f33e34907c5.webp"));
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: brightness(102%) contrast(76%);
}

/* ::before より前面に出す。 */
.cp-hero > * {
  position: relative;
  z-index: 1;
}

/* ---- ボディ（右カラム） ---- */
.cp-body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 0px;
  width: 50%;
  padding: 168px 80px 80px 80px;
  background: var(--o-c-white);
  box-shadow: none;
  overflow: hidden;
}
/*
 * 設計ツリーの ボディ には ":before": { "filter": "blur(3px)" } があるが、
 * 背景画像が無いため描画結果に現れない。よってここでは ::before を作らない。
 */

/*
 * フッターを .cp-main（z-index:0）より前面に置く。上の .cp-main の注記とセット。
 * なぜ: フッターは <main> の外の static 要素なので、z-index:0 の main より後ろに描かれ、
 *   固定ヒーローに覆われてロゴとリンク3本がクリックできなくなっていた。
 * 根拠: 現行サイトも footer 側を position:relative で持ち上げている（計測で覆われていない）。
 * スコープ: この2ページだけに閉じる（parts.css / footer.php は触らない）。
 *   body class は実測: page-template-page-campain / page-template-page-liteblue。
 * #footerbar（fixed / z-index:5 / main外）は 5 > 1 のままなので影響なし。
 * 2026-09-14
 */
body.page-template-page-campain .o-footer,
body.page-template-page-liteblue .o-footer {
  position: relative;
  z-index: 1;
}

@media screen and (max-width: 1140px) {
  .cp-main { display: flex; }
  .cp-hero { display: flex; }
  /* @small は padding のみ上書き（top も 40px になる。実測どおり）。 */
  .cp-body {
    display: flex;
    padding: 40px;
  }
}

@media screen and (max-width: 840px) {
  .cp-main { display: flex; }
  .cp-hero {
    display: flex;
    padding: 50px 20px;
  }
  .cp-body {
    display: flex;
    gap: 40px;
    padding: 80px 20px;
  }
}

@media screen and (max-width: 540px) {
  .cp-main {
    display: flex;
    flex-direction: column;
  }
  /* @mobile で fixed をやめ、ページ先頭に 100vh のブロックとして積む。 */
  .cp-hero {
    display: flex;
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    flex: none;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 104px 20px 200px 20px;
  }
  .cp-body {
    display: flex;
    width: 100%;
    flex: none;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    padding: 80px 0px;
  }
}

@media screen and (max-width: 320px) {
  .cp-main { display: flex; }
  .cp-hero {
    display: flex;
    padding: 64px 20px;
  }
  .cp-body {
    display: flex;
    padding: 64px 0px;
  }
}


/* ==================================================================
 * 2. セクション共通
 * ------------------------------------------------------------------
 * .cp-body 直下のセクションは全て width:450px / flex column / 中央寄せ で、
 * 上に padding-top:80px を持つ（#about だけ 0）。
 *
 * ---- 実測の差分表（セクション担当は自分の区画で上書きすること）--------
 *   id          gap    padding-top   @mobile width   その他
 *   #about       24px    0px           80%
 *   #message-1   24px   80px          100%
 *   #service     24px   80px           (継承)
 *   #features    40px   80px           80%           @tablet gap:24px
 *   #message     24px   80px          100%
 *   #detail      40px   80px          100%           @small gap:32px
 *   #system      24px   48px 24px     90%            枠線2px solid #ff2d60 / radius12px /
 *                                                    margin-top:80px / @tablet gap:16px /
 *                                                    @mobile padding:32px 0
 *   #plan        40px   80px          100%           @tablet gap:24px
 *   #voice       40px   80px           80%
 *   #faq         40px   80px           90%           @mobile padding:32px 0
 *   #company     40px   80px           80%           @tablet gap:24px / @mobile padding:32px 0
 *   #plivacy     24px   80px           (継承)
 *   （#cta / #cta-1 / #cta-2 / #cta-3 は 3. の CTA 共通が持つ）
 * ================================================================== */

.cp-section {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 450px;
  /*
   * ★ 統合時に全セクション共通へ引き上げた（#detail / #system / #plivacy が
   *   個別に同値を入れて同じ TODO を残していたものを1箇所に集約）。
   *   本番実測（vw=800）: #detail の computed は width:352.5px / max-width:100%。
   *   STUDIO は width:Npx を書いた要素すべてに max-width:100% を対で出すため、
   *   これが無いと 450px のまま .cp-body（vw=800 で 353px）を 78px はみ出し、
   *   overflow:hidden で右端が切れる。
   */
  max-width: 100%;
  gap: 24px;
  margin: 0px 0px 0px 0px;
  padding: 80px 0px 0px 0px;
}

/*
 * 見出しの型（日本語見出し ＋ 英字ラベル）。
 * 設計ツリーでは flex-direction:column-reverse で、DOM 上は
 *   <h2 class="cp-head__ja">…</h2>
 *   <span class="cp-head__en">About</span>
 * の順（＝見出しが先）だが、見た目は英字ラベルが上に来る。
 * ★ #voice だけ column（英字が先に DOM にある）。voice の区画で上書きすること。
 */
.cp-head {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 24px;
  padding: 0px;
}

/*
 * 日本語見出し（h2）。既定は #detail / #faq / #plan / #company の実測値。
 *   #about    48px（@small 40 / @tablet 24 / @mobile 36 / @mini 32）・色 var(--s-color-04ab6cae)
 *   #features 32px（@small 28 / @tablet 24）・色 var(--s-color-e89cf142)
 *   #voice    32px（@small 28・@tablet の上書き無し）・色 var(--cp-c-ink)
 * 差分は各セクションの区画で上書きすること。
 */
.cp-head__ja {
  flex: none;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 2px;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  text-shadow: none;
}

/*
 * 英字ラベル。Lexend Deca（--s-font-5297e0b2）。
 *   色は #features / #detail / #faq / #voice が var(--s-color-04ab6cae)、
 *   #plan / #company が var(--s-color-eba1e906)（= #ff2d60）、
 *   #about が var(--cp-c-ink)。
 *   #voice のみ 24px。差分は各区画で上書きすること。
 */
.cp-head__en {
  flex: none;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-5297e0b2);
  font-size: 20px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

@media screen and (max-width: 1140px) {
  .cp-section { display: flex; }
  .cp-head { display: flex; }
  .cp-head__ja { font-size: 28px; }
}

@media screen and (max-width: 840px) {
  .cp-section { display: flex; }
  .cp-head {
    display: flex;
    gap: 12px;
  }
  .cp-head__ja { font-size: 24px; }
  .cp-head__en { font-size: 14px; }
}

/* #about の見出しグループだけ @tablet でも gap:24px のまま（実測）。 */
.cp-head--gap-fixed { gap: 24px; }
@media screen and (max-width: 840px) {
  .cp-head--gap-fixed { gap: 24px; }
}

@media screen and (max-width: 540px) {
  .cp-section { display: flex; }
  .cp-head { display: flex; }
}

@media screen and (max-width: 320px) {
  .cp-section { display: flex; }
  .cp-head { display: flex; }
}


/* ==================================================================
 * 3. CTA 共通（#cta / #cta-1 / #cta-2 / #cta-3）
 * ------------------------------------------------------------------
 * テンプレート: template-parts/campain/cta.php（1本を4箇所で使い回す）
 *
 *   .cp-cta            既定 ＝ クーポン版（#cta-1 / #cta-2 / #cta-3）
 *   .cp-cta--brand     #cta のみ。地色・枠線・見出し・注記が別
 *   .cp-cta--flush     #cta-3 のみ。margin-top:0
 *
 * ★ ここは4箇所共通。1箇所だけ直したいときは必ず修飾クラスを足すこと。
 * ================================================================== */

.cp-cta {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 450px;
  /* .cp-section と同じ理由（STUDIO は width:Npx に max-width:100% を対で出す）。 */
  max-width: 100%;
  height: auto;
  gap: 24px;
  margin: 80px 0px 0px 0px;
  padding: 80px 0px 0px 0px;
  background: var(--cp-c-cta-bg);
  border: 2px solid var(--o-c-brand-red-d);
  border-radius: 12px;
}

/* #cta（共有シンボル版）。地色と枠線だけが違う。 */
.cp-cta--brand {
  background: var(--cp-c-sand);
  border-color: var(--o-c-brand-blue-d);
}

/* #cta-3 は #message-1 の中に入るため上マージンを持たない。 */
.cp-cta--flush { margin-top: 0px; }

/* ---- キャッチコピーセクション ---- */
.cp-cta__catch {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 12px;
  width: 100%;
  padding: 32px 0px 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
}

/* 「さらに」（#cta-1 のみ） */
.cp-cta__lead {
  width: 100%;
  height: auto;
  margin: 0;
  color: var(--s-color-e89cf142);
  font-family: var(--s-font-aca0103b);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

/* 大見出し2行。scale:0.95 1 は原文どおり（横方向だけ 95% に潰している）。 */
.cp-cta__hl1,
.cp-cta__hl2 {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--s-font-aca0103b);
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  scale: 0.95 1;
  text-align: center;
  text-shadow: none;
}

/* クーポン版1行目「初回参加者限定」 */
.cp-cta__hl1 { color: var(--s-color-53bb1a5b); }

/*
 * クーポン版2行目「5000円→3000円」。
 * 設計ツリーは color: var(--s-color-5993f4bc) だが、この変数の実体は
 * linear-gradient（orange→pink）。color にグラデーションは指定できないので、
 * tokens.css の指示どおり background-clip:text で文字に載せる。
 */
.cp-cta__hl2 {
  background-image: var(--s-color-5993f4bc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ブランド版（#cta）は2行とも単色 var(--s-color-04ab6cae)。グラデーションを解除する。 */
.cp-cta--brand .cp-cta__hl1,
.cp-cta--brand .cp-cta__hl2 {
  background-image: none;
  color: var(--o-c-brand-blue-d);
  -webkit-text-fill-color: var(--o-c-brand-blue-d);
}

/* ブランド版の説明行「価値観でつながる／少人数制の出会いイベント」 */
.cp-cta__desc {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  box-shadow: none;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.40;
  text-align: center;
  text-shadow: none;
}

/* クーポン枠。リンクではない（設計ツリーに link が無い）。 */
.cp-cta__coupon {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 400px;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  background: var(--s-color-5993f4bc);
  border-radius: 16px 16px 16px 16px;
  box-shadow: var(--cp-shadow-btn);
}

.cp-cta__coupon-label,
.cp-cta__coupon-code {
  width: 100%;
  height: auto;
  margin: 0;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}
.cp-cta__coupon-label { font-size: 18px; }
.cp-cta__coupon-code  { font-size: 48px; }

/* ---- メインビジュアル（装飾画像・4箇所とも同一） ---- */
.cp-cta__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 450px;
  height: 180px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 0;
}
/*
 * TODO: background-position は抽出データに無い。STUDIO 既定の center を仮置き。
 * TODO: width:450px は @mobile（親が 95%）ではみ出す。実測値どおりに置いており、
 *   はみ出し分は .cp-body の overflow:hidden が飲む。実機比較でずれたら要相談。
 */
.cp-cta__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/static/s-3938x2675_f91866a2-e8a9-4158-8b30-0920734eea14.webp");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ---- ボタンセクション ---- */
.cp-cta__actions {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 16px;
  padding: 0px;
}

.cp-cta__note {
  width: auto;
  height: auto;
  margin: 0;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 18px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.05em;
  line-height: 1.2;
  text-align: left;
}

.cp-cta__button {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 400px;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  background: var(--o-c-brand-blue-d);
  border-radius: 1000px;
  box-shadow: var(--cp-shadow-btn);
  text-decoration: none;
}

.cp-cta__button-label {
  width: 100%;
  height: auto;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

/* ---- おすすめセクション ---- */
.cp-cta__reco {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  background: var(--o-c-white);
  border-radius: 12px;
}

/*
 * TODO: width:700px は 450px の枠からはみ出す実測値。原文どおりに置いている。
 *   text-align:left なので見た目は左寄せのまま。実機比較でずれたら要相談。
 */
.cp-cta__reco-title {
  flex: none;
  width: 700px;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-c-body);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left;
}

.cp-cta__list {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 6px;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.cp-cta__item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 100%;
  padding: 0px;
}

/* Material Icons の check。 */
.cp-cta__check {
  color: var(--o-c-brand-blue-d);
  font-size: 16px;
}

.cp-cta__text {
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-c-body);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: left;
}

@media screen and (max-width: 1140px) {
  .cp-cta { display: flex; }
  .cp-cta__catch { display: flex; }
  .cp-cta__coupon { display: flex; }
  .cp-cta__visual { display: flex; }
  .cp-cta__actions { display: flex; }
  .cp-cta__button { display: flex; }
  .cp-cta__list { display: flex; }
  .cp-cta__item { display: flex; }
  .cp-cta__reco {
    display: flex;
    padding: 16px;
  }
}

@media screen and (max-width: 840px) {
  .cp-cta {
    display: flex;
    gap: 14px;
    padding: 10px;
  }
  .cp-cta__catch {
    display: flex;
    padding: 12px 0px 0px 0px;
  }
  .cp-cta__lead { font-size: 13px; }
  .cp-cta__hl1,
  .cp-cta__hl2 { font-size: 24px; }
  .cp-cta__desc { font-size: 13px; }
  .cp-cta__coupon {
    display: flex;
    padding: 12px 16px;
  }
  .cp-cta__coupon-label,
  .cp-cta__coupon-code { font-size: 13px; }
  .cp-cta__visual {
    display: flex;
    flex: none;
    height: 150px;
  }
  .cp-cta__actions {
    display: flex;
    gap: 6px;
  }
  .cp-cta__note { font-size: 13px; }
  .cp-cta__button {
    display: flex;
    padding: 12px 16px;
  }
  .cp-cta__button-label { font-size: 13px; }
  .cp-cta__reco {
    display: flex;
    gap: 6px;
    padding: 10px;
  }
  .cp-cta__reco-title {
    font-size: 14px;
    text-align: center;
  }
  .cp-cta__list { display: flex; }
  .cp-cta__item {
    display: flex;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
  }
  .cp-cta__check {
    font-size: 14px;
    margin: 2px 0px 0px 0px;
  }
  .cp-cta__text { font-size: 13px; }
}

@media screen and (max-width: 540px) {
  .cp-cta {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex: none;
    gap: 16px;
    width: 95%;
    padding: 40px 0px 0px 0px;
  }
  .cp-cta__catch {
    display: flex;
    gap: 8px;
    padding: 0px 0px 0px 0px;
  }
  .cp-cta__lead { font-size: 16px; }
  .cp-cta__hl1,
  .cp-cta__hl2 { font-size: 32px; }
  .cp-cta__desc {
    font-size: 18px;
    margin: 12px 0px;
  }
  .cp-cta__coupon {
    display: flex;
    flex: none;
    gap: 2px;
    opacity: 1;
    padding: 20px 24px;
    width: 100%;
  }
  .cp-cta__coupon-label,
  .cp-cta__coupon-code { font-size: 16px; }
  .cp-cta__visual {
    display: flex;
    flex: none;
    height: 160px;
  }
  .cp-cta__actions {
    display: flex;
    gap: 6px;
  }
  .cp-cta__note {
    font-size: 16px;
    line-height: 1.4;
  }
  .cp-cta__button {
    display: flex;
    flex: none;
    gap: 2px;
    opacity: 1;
    padding: 20px 24px;
    width: 100%;
  }
  .cp-cta__button-label { font-size: 16px; }
  .cp-cta__reco {
    display: flex;
    flex: none;
    width: 100%;
    padding: 16px;
    border-radius: 0px 0px 12px 12px;
  }
  .cp-cta__reco-title {
    flex: none;
    width: 100%;
    font-size: 14px;
  }
  .cp-cta__list { display: flex; }
  .cp-cta__item {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: center;
  }
  .cp-cta__text {
    flex: 1;
    width: auto;
    font-size: 14px;
  }
}

@media screen and (max-width: 320px) {
  .cp-cta { display: flex; }
  .cp-cta__catch { display: flex; }
  .cp-cta__hl1,
  .cp-cta__hl2 { font-size: 16px; }
  .cp-cta__desc { font-size: 16px; }
  .cp-cta__coupon { display: flex; }
  .cp-cta__visual { display: flex; }
  .cp-cta__actions { display: flex; }
  .cp-cta__note {
    flex: none;
    width: 90%;
  }
  .cp-cta__button { display: flex; }
  .cp-cta__reco { display: flex; }
  .cp-cta__list { display: flex; }
  .cp-cta__item { display: flex; }
}


/* ==================================================================
 * 4. #footerbar（固定_LINE登録）
 * ------------------------------------------------------------------
 * テンプレート: template-parts/campain/footerbar.php
 * 表示は @mobile / @mini のみ。display を全段で明示している。
 * ================================================================== */

.cp-footerbar {
  display: none;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 200px;
  height: 160px;
  background: #EEEEEE;
}

.cp-footerbar__btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 400px;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  border-radius: 1000px;
  box-shadow: var(--cp-shadow-btn);
  text-decoration: none;
}

.cp-footerbar__btn--event { background: var(--o-c-brand-blue-d); }
.cp-footerbar__btn--line  { background: var(--s-color-12a2a4e5); }

.cp-footerbar__label {
  width: 100%;
  height: auto;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

.cp-footerbar__note {
  width: auto;
  height: auto;
  color: var(--s-color-2c90be8a);
  font-family: var(--s-font-f88553ee);
  font-feature-settings: 'palt' 1;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 1px 1px 20px rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 1140px) {
  .cp-footerbar { display: none; }
}

@media screen and (max-width: 840px) {
  /*
   * 実測では display:none のまま、背景・高さ・padding だけが定義されている
   * （STUDIO の編集途中の値が残っているだけで描画には出ない）。原文どおり残す。
   */
  .cp-footerbar {
    display: none;
    flex: none;
    width: 100%;
    height: auto;
    padding: 30px 0px;
    background: linear-gradient(90deg, #41ee16ff, #5bbf71);
  }
  .cp-footerbar__btn { padding: 16px 20px; }
  .cp-footerbar__label { font-size: 15px; }
}

@media screen and (max-width: 540px) {
  .cp-footerbar {
    display: flex;
    position: fixed;
    top: auto;
    right: 0px;
    bottom: 0px;
    left: 0px;
    z-index: 5;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    padding: 0px 0px;
    background: transparent;
    border-radius: 0px 0px 0px 0px;
  }
  .cp-footerbar__btn {
    display: flex;
    flex: none;
    gap: 2px;
    opacity: 1;
    width: 100%;
    padding: 20px 24px;
    border-radius: 0px 0px 0px 0px;
  }
  .cp-footerbar__btn--line { box-shadow: 0px 0px 0px 0px transparent; }
  .cp-footerbar__label { font-size: 18px; }
  .cp-footerbar__note { font-size: 11px; }

  /*
   * なぜ: この固定バーは 148px あるのに parts.css のフッター下余白は 100px しかなく、
   *   ページ最下部まで送ってもコピーライト「©︎LGBTQ Ordinary inc.」がバーの下に
   *   隠れたままで読めない（現行サイトも同じ）。
   * 根拠: #footerbar 実測 h=148px（320/375/430/540 すべて148）。
   *   コピーライトはページ末から 100px 上（375px 実測）＝バーの内側。
   * 値: 148px（バー実測）＋ 20px（このファイルが @tablet/@mobile で使っている左右ガター）。
   *   148px ちょうどだとコピーライト下端がバー上端と接する（実測 375px で 1px 重なる）。
   * スコープ: このバーを出すのは campain / liteblue の2ページだけなので
   *   body class で限定する（parts.css / footer.php は触らない）。
   * 2026-09-14
   */
  body.page-template-page-campain .o-footer,
  body.page-template-page-liteblue .o-footer {
    padding-bottom: 168px;
  }
}

@media screen and (max-width: 320px) {
  .cp-footerbar { display: flex; }
  .cp-footerbar__btn { display: flex; }
}


/* ==================================================================
 * 5. セクション別の区画
 * ------------------------------------------------------------------
 * 並びは実測のセクション順（tests/baseline_campain.json）。
 * ★ 担当エージェントは自分の区画の中だけに書くこと。区画を消さないこと。
 * ★ 各区画の中でも BP は 1140 → 840 → 540 → 320 の順に書くこと。
 * ================================================================== */


/* === hero（メインビジュアル）=====================================
 * 骨格側の .cp-hero は 1. で定義済み。
 * ここには中身（見出し・ボタン2本）のスタイルだけを書く。
 * 実測リンク: ボタン1 https://re-blue.peatix.com
 *             ボタン2 https://s.lmes.jp/landing-qr/2007470936-jEOVPOZE?uLand=UxXzTm
 * ================================================================ */

/* ---- 内枠（100% / space-between） ---- */
.cp-hero__inner {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  gap: 40px;
  width: auto;
  height: 100%;
  padding: 0px 0px 0px 0px;
}

/* ---- 上段：キャッチコピー ---- */
/*
 * 設計ツリーでは column-reverse だが子が1つしか無いため見た目は column と同じ。
 * 実測値どおりに残す（後で兄弟が増えたときに順序が壊れないように）。
 */
.cp-hero__headline {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 12px;
  padding: 0px;
}

/* scale:0.95 1 は原文どおり（横方向だけ 95% に潰している）。 */
.cp-hero__catch {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  box-shadow: none;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.40;
  text-align: center;
  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.4);
  scale: 0.95 1;
}

/* ---- 下段（タイトル群 ＋ ボタン2本） ---- */
.cp-hero__lower {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 20px;
  padding: 0px;
}

/* titles と tagline-wrap は実測値が同一（gap:0 → @small 20px → @mobile 12px）。 */
.cp-hero__titles,
.cp-hero__tagline-wrap {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 0px;
  padding: 0px;
}

/* tagline と sub は色・書体・字送り・影が同一。サイズと太さだけが違う。 */
.cp-hero__tagline,
.cp-hero__sub {
  width: auto;
  height: auto;
  color: var(--s-color-3c823ec0);
  font-family: var(--s-font-f88553ee);
  font-feature-settings: 'palt' 1;
  font-style: normal;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 1px 1px 20px rgba(255, 255, 255, 0.4);
}

.cp-hero__tagline {
  font-size: 20px;
  font-weight: 700;
}

.cp-hero__sub {
  font-size: 16px;
  font-weight: 600;
}

/*
 * 「LiteBlue」。設計ツリーの color は
 *   linear-gradient(270deg, #15aadbff, #3ed3e8ff) = var(--s-color-499d4f5b)
 * グラデーションは color に入れられないので background-clip:text で文字に載せる。
 * TODO: height:97px は実測値（font-size 92px × line-height 1.4 = 128.8px より小さい）。
 *   STUDIO はテキストノードを flex ボックスとして描くため、ここでも
 *   display:flex ＋ align-items:center で中央に収めている。実機比較でずれたら要調整。
 */
.cp-hero__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: none;
  width: auto;
  height: 97px;
  font-family: var(--s-font-f88553ee);
  font-size: 92px;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  background-image: var(--s-color-499d4f5b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---- ボタン2本 ---- */
/*
 * 設計ツリー上は tagName 空 ＋ link のノード（＝ STUDIO の <a>）。
 * @mobile / @mini では非表示になり、代わりに #footerbar（固定_LINE登録）が出る。
 */
.cp-hero__btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 400px;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  background: var(--o-c-brand-blue-d);
  border-radius: 1000px;
  box-shadow: var(--cp-shadow-btn);
  text-decoration: none;
}

/* 2本目（LINE）だけ地色がグラデーション。 */
.cp-hero__btn--line {
  background: var(--s-color-12a2a4e5);
}

.cp-hero__btn-label {
  width: 100%;
  height: auto;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

/* 「※早割特典あり！」。1本目にしか無い。 */
.cp-hero__btn-note {
  width: auto;
  height: auto;
  color: var(--s-color-2c90be8a);
  font-family: var(--s-font-f88553ee);
  font-feature-settings: 'palt' 1;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-align: center;
  text-shadow: 1px 1px 20px rgba(255, 255, 255, 0.4);
}

@media screen and (max-width: 1140px) {
  .cp-hero__inner { display: flex; gap: 20px; }
  .cp-hero__headline { display: flex; }
  .cp-hero__lower { display: flex; gap: 20px; }
  .cp-hero__titles,
  .cp-hero__tagline-wrap { display: flex; gap: 20px; }
  .cp-hero__logo { display: flex; }
  /* @small は base と同じ 48px を明示（@tablet の 28px を継がせないため）。 */
  .cp-hero__catch { font-size: 48px; }
  .cp-hero__btn { display: flex; }
}

@media screen and (max-width: 840px) {
  /*
   * なぜ: .cp-hero__btn の width:400px が min-content を 400px に固定するため、
   *   親（inner / lower）が width:auto だと 400px まで膨らみ、ヒーロー（@tablet は
   *   padding 20px・幅 vw/2）の内側幅を超えて overflow:hidden で左右が切れていた。
   *   実測 768px: inner/lower/ボタン2本が x=-8 w=400（16px カット）、h1.cp-hero__sub も x=-5 w=394。
   * 根拠: 現行サイト 768px は ボタン x=20 w=344 / sub w=344 h=90(4行)。
   *   max-width:100% を inner に当てるとヒーローの内容幅（定値）で頭打ちになり、
   *   その後 lower / ボタンの 100% も解決できるようになる（ボタン単独では親幅が不定で効かない）。
   * 範囲: 実害が出るのは 400px > vw/2−40 すなわち 541〜799px。@tablet 内に収まるので
   *   841px 以上（ボタンがヒーロー内に収まりカットされない帯）は現状維持にしている。
   * 実測（適用後）: 768 → inner/ボタン x=20 w=344・sub w=344 h=90 で現行と一致。
   *   375/430 は変化なし（@mobile はボタン非表示）、1000/1140/1440 も変化なし。
   * 2026-09-14
   */
  .cp-hero__inner { display: flex; max-width: 100%; }
  .cp-hero__headline { display: flex; }
  .cp-hero__lower { display: flex; max-width: 100%; }
  .cp-hero__titles,
  .cp-hero__tagline-wrap { display: flex; }
  .cp-hero__catch { font-size: 28px; }
  .cp-hero__logo { display: flex; font-size: 72px; }
  .cp-hero__btn {
    display: flex;
    /* 上の注記とセット。inner が確定幅になったのでここの 100% が解決できる。 */
    max-width: 100%;
    padding: 16px 20px;
  }
  .cp-hero__btn-label { font-size: 15px; }
}

@media screen and (max-width: 540px) {
  .cp-hero__inner { display: flex; flex: none; gap: 12px; }
  .cp-hero__headline { display: flex; }
  .cp-hero__lower { display: flex; gap: 12px; }
  .cp-hero__titles,
  .cp-hero__tagline-wrap { display: flex; gap: 12px; }
  /* 原文は 2.25rem（＝ 36px）。単位も原文どおりにしておく。 */
  .cp-hero__catch { font-size: 2.25rem; }
  .cp-hero__tagline { font-size: 11px; }
  .cp-hero__logo {
    display: flex;
    flex: none;
    width: auto;
    height: 57px;
    font-size: 72px;
  }
  .cp-hero__sub { font-size: 11px; }
  /*
   * @mobile ではボタンを消し、画面下の #footerbar（固定_LINE登録）に役割を渡す。
   * display 以外の実測値（gap / padding / width / opacity）も原文どおり残す。
   */
  .cp-hero__btn {
    display: none;
    flex: none;
    gap: 2px;
    width: 100%;
    padding: 20px 24px;
    opacity: 1;
  }
  .cp-hero__btn-label { font-size: 18px; }
  .cp-hero__btn-note { font-size: 11px; }
}

@media screen and (max-width: 320px) {
  .cp-hero__inner { display: flex; }
  .cp-hero__headline { display: flex; }
  .cp-hero__lower { display: flex; }
  .cp-hero__titles,
  .cp-hero__tagline-wrap { display: flex; }
  .cp-hero__logo { display: flex; }
  .cp-hero__btn { display: none; }
}


/* === #about ======================================================
 * 実測: width:450px / gap:24px / padding:0 / @mobile width:80%
 * 見出し: 「明日につながる<br>出会いをしよう」48px var(--s-color-04ab6cae)
 *         英字ラベル「About」20px var(--cp-c-ink)・@tablet の上書き無し
 *         見出しグループは .cp-head--gap-fixed を付ける（@tablet でも gap:24px）
 * ================================================================ */

/* #about だけ padding-top を持たない（.cp-section 既定の 80px を打ち消す）。 */
#about {
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
}

/* 見出し 48px ＋ 色。.cp-head__ja 既定（32px / var(--cp-c-ink)）からの差分。 */
.cp-about__title {
  color: var(--o-c-brand-blue-d);
  font-size: 48px;
}

/*
 * 英字ラベルだけ色が違う（既定は var(--s-color-04ab6cae)）。
 * さらに #about は @tablet でサイズを落とさない（既定は 14px）ので 20px を明示する。
 */
.cp-about__en {
  color: var(--cp-c-ink);
  font-size: 20px;
}

.cp-about__lead {
  flex: none;
  width: auto;
  height: auto;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: left;
}

@media screen and (max-width: 1140px) {
  #about { display: flex; }
  .cp-about__title { font-size: 40px; }
  .cp-about__en { font-size: 20px; }
}

@media screen and (max-width: 840px) {
  #about { display: flex; }
  .cp-about__title { font-size: 24px; }
  /* .cp-head__en の @tablet 14px を #about だけ打ち消す（実測: 上書き無し）。 */
  .cp-about__en { font-size: 20px; }
  .cp-about__lead { line-height: 1.6; }
}

@media screen and (max-width: 540px) {
  #about {
    display: flex;
    flex: none;
    width: 80%;
  }
  .cp-about__title { font-size: 36px; }
  .cp-about__en { font-size: 20px; }
}

@media screen and (max-width: 320px) {
  #about { display: flex; }
  .cp-about__title { font-size: 32px; }
  .cp-about__en { font-size: 20px; }
}


/* === #message-1 ==================================================
 * 実測: width:450px / gap:24px / padding-top:80px / margin:0 / @mobile width:100%
 * テンプレート: template-parts/campain/message-1.php
 * 子に #cta-3 だけを持つ（見出しも本文も無い CTA の外枠）。
 *
 * base の実測値は .cp-section の既定と全て同値のため上書き不要。
 * 実測にある border:0px solid #ff2d60 / border-radius:0 /
 * background:rgba(0,0,0,0.0) は幅0・透明で見た目に出ないので書かない。
 * display は .cp-section が全BPで明示済み（継承に頼っていない）。
 * ================================================================ */

@media screen and (max-width: 1140px) {
  /* @small に固有指定は無い。base の 450px（＋max-width:100%）のまま。 */
  .cp-section--message-1 { width: 450px; }
}

@media screen and (max-width: 840px) {
  /* @tablet にも固有指定は無い。継承に頼らず明示する。 */
  .cp-section--message-1 { width: 450px; }
}

@media screen and (max-width: 540px) {
  /* 実測: @mobile のみ width:100%。 */
  .cp-section--message-1 { width: 100%; }
}

@media screen and (max-width: 320px) {
  /* @mini に固有指定は無い。@mobile の 100% を明示して引き継ぐ。 */
  .cp-section--message-1 { width: 100%; }
}


/* === #cta-3 ======================================================
 * 3. の CTA 共通が持つ。ここには書かない。
 * 個別調整が要る場合のみ #cta-3 のセレクタでここに追記すること。
 * ================================================================ */


/* === #service ====================================================
 * 実測: width:450px / gap:24px / padding-top:80px / margin:0
 * 子に #problem を持つ
 * ================================================================ */

/*
 * このセクションだけで使う直値。tokens.css に無い色なのでここで名前を付ける
 * （スコープを #service に閉じているので他セクションへ波及しない）。
 */
#service {
  /* 「LiteBlueが提供する価値」ボックスの地色。設計ツリー実測 #fbf5edff。 */
  --cp-c-cream: #fbf5edff;
  /* 価値リストの説明文の色。設計ツリー実測 #666666。 */
  --cp-c-muted: #666666;
}

/* ---- メインビジュアル（装飾画像） ---- */
.cp-service__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 450px;
  height: 250px;
  margin: 24px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 12px;
  overflow: hidden;
}
/*
 * TODO: 設計ツリーの ":before" には filter しか無く、backgroundSize /
 *   backgroundPosition は抽出データに含まれていない。STUDIO 既定の
 *   cover / center を仮置きしている。実機比較でずれていたらここを直すこと。
 * TODO: 画像は後でメディアライブラリへ移す。移したら url() を
 *   インライン変数（--cp-service-img）に差し替えること。
 */
.cp-service__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/static/s-1536x1024_v-fms_webp_1b9bd633-94d0-4bf5-b588-b3e093f63f9b.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: brightness(113%) contrast(100%) saturate(109%) blur(0px);
}

/* ---- 見出し（PC版とSP版で文言が入れ替わる） ---- */
/*
 * 文字サイズ・色は .cp-head__ja の既定（32px / @small 28 / @tablet 24 /
 * var(--cp-c-ink)）と実測値が一致するので、ここでは display だけを切り替える。
 *   --pc「心でつながる出会いを。」        base / @small / @tablet
 *   --sp「安心できる環境と…ずっと繋がる出会い」 @mobile / @mini
 */
.cp-service__title--pc { display: flex; }
.cp-service__title--sp { display: none; }

/* ---- リード文 ---- */
.cp-service__lead {
  flex: none;
  width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: center;
}

/* ---- 「LiteBlueが提供する価値」ボックス ---- */
.cp-service__value {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 0px;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 24px 0px;
  background: var(--cp-c-cream);
  border-radius: 12px;
}

.cp-service__value-title {
  flex: none;
  width: 90%;
  height: auto;
  padding: 32px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-top: 0px solid var(--o-c-brand-blue-d);
  border-right: 0px solid var(--o-c-brand-blue-d);
  border-bottom: 2px solid var(--o-c-brand-blue-d);
  border-left: 0px solid var(--o-c-brand-blue-d);
  border-radius: 0;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

.cp-service__value-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 0px;
}

.cp-service__value-item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 12px;
  width: 90%;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

/* Font Awesome Solid。未読込のため現状は何も描画されない（service.php の TODO 参照）。 */
.cp-service__value-icon {
  flex: none;
  width: 64px;
  height: 64px;
  color: var(--o-c-brand-blue-d);
  font-size: 48px;
}

.cp-service__value-body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: 1;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0px;
}

.cp-service__value-item-title {
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 20px;
  font-style: normal;
  font-weight: var(--s-font-aca0103b-w800, 800); /* Zen Maru Gothic に800が無いため900で受ける */
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}

.cp-service__value-item-desc {
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-c-muted);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}

@media screen and (max-width: 1140px) {
  #service { display: flex; }
  .cp-service__visual {
    display: flex;
    flex: none;
    height: 200px;
  }
  .cp-service__title--pc { display: flex; }
  .cp-service__title--sp { display: none; }
  .cp-service__value { display: flex; }
  .cp-service__value-list {
    display: flex;
    gap: 16px;
    padding: 30px 0px;
  }
  .cp-service__value-item { display: flex; }
  .cp-service__value-body { display: flex; }
  .cp-service__value-icon { font-size: 36px; }
}

@media screen and (max-width: 840px) {
  #service { display: flex; }
  .cp-service__visual {
    display: flex;
    flex: none;
    height: 150px;
  }
  .cp-service__title--pc { display: flex; }
  .cp-service__title--sp { display: none; }
  .cp-service__lead { line-height: 1.8; }
  .cp-service__value { display: flex; }
  .cp-service__value-title {
    font-size: 16px;
    padding: 16px 0px;
  }
  .cp-service__value-list {
    display: flex;
    padding: 20px 0px;
  }
  .cp-service__value-item {
    display: flex;
    gap: 6px;
  }
  .cp-service__value-body { display: flex; }
  .cp-service__value-icon {
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
  .cp-service__value-item-title { font-size: 16px; }
}

@media screen and (max-width: 540px) {
  /* @mobile の実測は flex:none のみ。width は 450px のまま（#about の 80% とは違う）。 */
  #service {
    display: flex;
    flex: none;
  }
  .cp-service__visual {
    display: flex;
    flex: none;
    height: 150px;
    border-radius: 0;
  }
  /* ここで PC/SP の見出しが入れ替わる。 */
  .cp-service__title--pc {
    display: none;
    flex: none;
    width: 80%;
  }
  .cp-service__title--sp {
    display: flex;
    width: auto;
  }
  .cp-service__lead {
    flex: none;
    width: 80%;
    text-align: left;
  }
  .cp-service__value {
    display: flex;
    flex: none;
    width: 100%;
    border-radius: 0;
  }
  .cp-service__value-title { padding: 24px 0px; }
  .cp-service__value-list { display: flex; }
  .cp-service__value-item { display: flex; }
  .cp-service__value-body { display: flex; }
}

@media screen and (max-width: 320px) {
  #service { display: flex; }
  .cp-service__visual { display: flex; }
  .cp-service__title--pc { display: none; }
  .cp-service__title--sp { display: flex; }
  .cp-service__value { display: flex; }
  .cp-service__value-list { display: flex; }
  .cp-service__value-item { display: flex; }
  .cp-service__value-body { display: flex; }
}


/* === #problem ====================================================
 * 実測: width:100%（#service の子）
 * ================================================================ */

/*
 * #service の子ノード（経験説明セクション）。
 * 地色 var(--s-color-e89cf142)（#082b34 ネイビー）の上に
 * var(--s-color-2c90be8a)（#fbf8f5 オフホワイト）の文字が乗る。
 * 罫線だけ var(--s-color-04ab6cae)（#369bdc）。
 */
#problem {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 0px;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 24px 0px;
  background: var(--s-color-e89cf142);
  border-radius: 12px;
}

.cp-problem__title {
  flex: none;
  width: 90%;
  height: auto;
  padding: 32px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-top: 0px solid var(--o-c-brand-blue-d);
  border-right: 0px solid var(--o-c-brand-blue-d);
  border-bottom: 2px solid var(--o-c-brand-blue-d);
  border-left: 0px solid var(--o-c-brand-blue-d);
  border-radius: 0;
  color: var(--s-color-2c90be8a);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

.cp-problem__list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 24px;
  padding: 40px 0px;
}

.cp-problem__item {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 12px;
  width: 90%;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

/* Font Awesome Solid。未読込のため現状は何も描画されない（service.php の TODO 参照）。 */
.cp-problem__icon {
  flex: none;
  width: 64px;
  height: 64px;
  color: var(--s-color-2c90be8a);
  font-size: 48px;
}

.cp-problem__body {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: 1;
  gap: 6px;
  width: auto;
  height: auto;
  padding: 0px;
}

.cp-problem__item-title {
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  color: var(--s-color-2c90be8a);
  font-family: var(--s-font-aca0103b);
  font-size: 20px;
  font-style: normal;
  font-weight: var(--s-font-aca0103b-w800, 800); /* Zen Maru Gothic に800が無いため900で受ける */
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}

.cp-problem__item-desc {
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--s-color-2c90be8a);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}

@media screen and (max-width: 1140px) {
  #problem { display: flex; }
  .cp-problem__list {
    display: flex;
    gap: 16px;
    padding: 30px 0px;
  }
  .cp-problem__item { display: flex; }
  .cp-problem__body { display: flex; }
  .cp-problem__icon { font-size: 36px; }
}

@media screen and (max-width: 840px) {
  #problem { display: flex; }
  .cp-problem__title {
    font-size: 16px;
    padding: 16px 0px;
  }
  .cp-problem__list {
    display: flex;
    padding: 20px 0px;
  }
  .cp-problem__item {
    display: flex;
    gap: 6px;
  }
  .cp-problem__body { display: flex; }
  .cp-problem__icon {
    flex: none;
    width: 32px;
    height: 32px;
    font-size: 24px;
  }
  .cp-problem__item-title { font-size: 16px; }
}

@media screen and (max-width: 540px) {
  #problem {
    display: flex;
    flex: none;
    width: 100%;
    border-radius: 0;
  }
  .cp-problem__title { padding: 24px 0px; }
  .cp-problem__list { display: flex; }
  .cp-problem__item { display: flex; }
  .cp-problem__body { display: flex; }
}

@media screen and (max-width: 320px) {
  #problem { display: flex; }
  .cp-problem__list { display: flex; }
  .cp-problem__item { display: flex; }
  .cp-problem__body { display: flex; }
}


/* === #features ===================================================
 * 実測: width:450px / gap:40px / padding-top:80px
 *       @tablet gap:24px / @mobile width:80%
 * 見出し: 「価値観でつながる<br>3つの設計」32px var(--s-color-e89cf142)
 *         英字ラベル「Features<br>」20px var(--s-color-04ab6cae)
 * ================================================================ */

/* ---- セクション本体 ----
 * .cp-section の既定（width:450px / gap:24px / padding:80px 0 0 0）に対し、
 * gap だけ実測が 40px。@tablet で 24px に戻る。 */
.cp-section--features { gap: 40px; }

/* 見出し。h2 の色だけ .cp-head__ja の既定（--cp-c-ink）と違う。
 * font-size 32 → @small 28 → @tablet 24 は既定と同値なので上書きしない。
 * 英字ラベル「Features<br>」の色 var(--s-color-04ab6cae) も .cp-head__en の既定と同値。 */
.cp-section--features .cp-head__ja { color: var(--s-color-e89cf142); }

/* ---- リスト（設計ツリーの List ノード / ul）----
 * 実測にあるのは gap:40px（@tablet 36px）と padding:0 のみ。
 * flex-direction / width は STUDIO のコンテナ既定（column / 100%）と判断した。
 * TODO: 実機と見比べて確認すること。
 * ul の margin / padding / list-style は base.css が既にリセット済み。 */
.cp-features__list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 40px;
  padding: 0px;
  width: 100%;
}

/*
 * リスト項目（li）。
 * TODO: 実測には &appear（opacity:0 / translate:0 20px / duration 600ms / delay 200ms）の
 *   スクロール出現アニメーションがあるが、テーマにまだ発火の仕組みが無い。
 *   IntersectionObserver を入れる担当が決まったらここに .is-appear 等を足すこと。
 *   ※ 出現前提の初期 opacity:0 を今書くと、仕組みが無い今は永久に見えなくなるため書かない。
 */
.cp-features__item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 12px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  width: 100%;
}

/*
 * カバー画像。STUDIO は content:image を ::before の background-image で敷く。
 * 画像URLは features.php が --cp-features-img で1件ずつ渡す。
 * TODO(§画像): メディアライブラリ移行後は CSS 変数ではなく <img> に差し替えを検討すること。
 * TODO: background-size は設計ツリーに :before の指定が無く STUDIO 既定（cover）と判断した。
 */
.cp-features__cover {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: 200px;
  border: 4px solid var(--o-c-brand-blue-d);
  border-radius: 50%;
  overflow: hidden;
}
.cp-features__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cp-features-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* 見出し（h3）。 */
.cp-features__title {
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}

/* 説明文（p）。実測の色は #333333 ＝ --cp-c-body。 */
.cp-features__text {
  flex: none;
  width: auto;
  height: auto;
  color: var(--cp-c-body);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.8;
  text-align: left;
}

@media screen and (max-width: 1140px) {
  .cp-features__list { display: flex; }
  .cp-features__item { display: flex; }
  .cp-features__cover {
    display: block;
    height: 180px;
  }
  .cp-features__title { font-size: 24px; }
}

@media screen and (max-width: 840px) {
  .cp-section--features { gap: 24px; }
  .cp-features__list {
    display: flex;
    gap: 36px;
  }
  .cp-features__item { display: flex; }
  .cp-features__cover {
    display: block;
    flex: none;
    height: 120px;
  }
  .cp-features__title { font-size: 20px; }
  .cp-features__text { line-height: 1.6; }
}

@media screen and (max-width: 540px) {
  .cp-section--features {
    flex: none;
    width: 80%;
  }
  .cp-features__list { display: flex; }
  .cp-features__item { display: flex; }
  .cp-features__cover {
    display: block;
    flex: none;
    height: 150px;
  }
  .cp-features__title { text-align: center; }
}

@media screen and (max-width: 320px) {
  .cp-features__list { display: flex; }
  .cp-features__item { display: flex; }
  .cp-features__cover {
    display: block;
    flex: none;
  }
}


/* === #message ====================================================
 * 実測: width:450px / gap:24px / padding-top:80px / @mobile width:100%
 * 子に #cta-2 を持つ（cta.php を anchor_id='cta-2' で呼ぶ）
 * ================================================================ */

/* ---- セクション本体 ----
 * 実測の width:450px / gap:24px / padding:80px 0 0 0 / margin:0 は
 * .cp-section の既定と同値なので base では上書き不要。
 * 実測にある border:0px solid #ff2d60 / border-radius:0 / background:rgba(0,0,0,0.0) は
 * 幅0・透明で見た目に出ないため書かない（新しい色を増やさない）。
 * 見出し h2「イベントへの想い」の色 #2e2e2e ＝ .cp-head__ja 既定の var(--cp-c-ink)。
 * 英字ラベル「Message」の色・サイズも .cp-head__en 既定と同値。上書き無し。 */

/*
 * メインビジュアル。STUDIO は content:img を ::before の background-image で敷く。
 * 画像URLは message.php が --cp-message-img で渡す。
 *
 * TODO: 実測は height:auto。背景画像だと高さが出ないため、元画像
 *   s-1536x1024_…（1536x1024 ＝ 3:2）の比を aspect-ratio で与えている。
 *   実機と見比べて 3:2 で合っているか確認すること。
 * TODO: width:450px は実測どおりだが、@mobile では親セクションが width:100% になるため
 *   幅 450px 未満の端末でははみ出す（.cp-body が overflow:hidden で切る）。
 *   現行サイトと同じ挙動なのでそのままにしてある。max-width:100% を足すかは CEO 判断。
 */
.cp-message__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 450px;
  height: auto;
  aspect-ratio: 3 / 2;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 12px;
  overflow: hidden;
  filter: brightness(100%);
  mix-blend-mode: normal;
}
.cp-message__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--cp-message-img);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* リード（h3）。「「明日はどこ行く？」って<br>言える場所をあなたと」 */
.cp-message__lead {
  flex: none;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  box-shadow: none;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.6;
  opacity: 1;
  text-align: center;
  text-shadow: none;
}

/* 本文（長文）。実測の色は #333 ＝ --cp-c-body。text-align は justify。 */
.cp-message__body {
  flex: none;
  width: auto;
  height: auto;
  color: var(--cp-c-body);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.6;
  text-align: justify;
}

@media screen and (max-width: 1140px) {
  .cp-message__visual { display: flex; }
  .cp-message__lead { font-size: 24px; }
}

@media screen and (max-width: 840px) {
  /* 実測: @tablet だけ固定高 150px（＝ aspect-ratio を無効化する）。 */
  .cp-message__visual {
    display: flex;
    flex: none;
    height: 150px;
    aspect-ratio: auto;
  }
  .cp-message__lead { font-size: 20px; }
  .cp-message__body { font-size: 14px; }
}

@media screen and (max-width: 540px) {
  .cp-section--message { width: 100%; }
  /* 実測: @mobile は height:auto に戻り、角丸が 0 になる。
   * @tablet で殺した aspect-ratio をここで明示的に戻す（継承に頼らない）。 */
  .cp-message__visual {
    display: flex;
    height: auto;
    aspect-ratio: 3 / 2;
    border-radius: 0;
  }
  .cp-message__body {
    flex: none;
    width: 80%;
  }
}

@media screen and (max-width: 320px) {
  .cp-message__visual { display: flex; }
}


/* === #cta-2 ======================================================
 * 3. の CTA 共通が持つ。ここには書かない。
 * ================================================================ */


/* === #detail =====================================================
 * 実測: width:450px / gap:40px / padding-top:80px
 *       @small gap:32px / @mobile width:100%
 * 見出し: 「当日の流れ」32px var(--cp-c-ink) ／ 英字「Detail」20px var(--s-color-04ab6cae)
 * ================================================================ */

/* ---- ローカル変数（#detail / #system 用）-----------------------------
 * tokens.css にも 0. ローカル変数 にも無い直値だけをここで名前付けする。
 * どちらも設計ツリーの実測値（発明した色ではない）。
 * TODO: 他セクションでも同値が出てきたら 0. ローカル変数 へ昇格させること。
 *   （区画外を触らない運用のため、いまはこの2セクションにスコープしている）
 */
.cp-detail,
.cp-system {
  --cp-c-note: #666666;   /* フローリストの説明文（text2）*/
  --cp-c-rule: #eeeeee;   /* フローリストの下罫線 */
}

/* ---- セクション本体 ---- */
.cp-detail {
  /* .cp-section から width:450px / flex column / 中央寄せ / padding-top:80px を継承。
   * 差分は gap のみ（40px。共通は 24px）。 */
  gap: 40px;
  /* 【解決済み】max-width:100% は 2. の .cp-section へ引き上げた。ここでは不要。 */
}

/* ---- フローリスト（#detail / #system 共用）-------------------------
 * STUDIO の list コンポーネント。#detail は7件・#system は3件。
 * 構造・実測値は両者まったく同一で、色だけが違う（#system 区画で上書き）。
 *   ul  .cp-flow
 *   └ li .cp-flow__item        border-bottom:1px / padding-bottom:24px
 *       └ div .cp-flow__body   flex column / gap:16px
 *           ├ div .cp-flow__head  丸バッジ ＋ 見出し（row / gap:10px）
 *           │   ├ span .cp-flow__num    64×36 / border-radius:128px
 *           │   └ h3   .cp-flow__title  24px
 *           └ p   .cp-flow__text        16px / var(--cp-c-note)
 * -------------------------------------------------------------------- */
.cp-flow {
  display: flex;
  flex-direction: column;
  /*
   * なぜ: @mobile / @mini で .cp-flow__item が 80% / 95% 幅になるのに align-items が
   *   無いため既定の stretch → flex-start 相当で左端に密着し、番号丸「01」が
   *   画面左端（x=0）に触れていた。#system の「通知の流れ」も同じ。
   * 根拠: 375px 実測 h3.cp-flow__title x=50（現行 88）／#system 79（現行 111）、
   *   430px 50（現行 93）／#system 83（現行 119）。設計ツリーの List ノードに
   *   alignItems は無く、STUDIO の List 既定が中央寄せ（現行実測から逆算:
   *   (375−300)/2=37.5 ＋ 丸40 ＋ gap10 = 87.5 ≒ 88）。
   * 効果範囲: 項目が 100% 幅の base/@small/@tablet は見た目不変。
   * 実測（適用後）: 375 → title x=88 / #system 111、430 → 93 / 119 で現行と一致。
   * 2026-09-14
   */
  align-items: center;
  gap: 24px;
  padding: 0px;
}

.cp-flow__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  width: 100%;
  height: auto;
  padding: 0px 0px 24px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-top: 0px solid var(--cp-c-rule);
  border-right: 0px solid var(--cp-c-rule);
  border-bottom: 1px solid var(--cp-c-rule);
  border-left: 0px solid var(--cp-c-rule);
}

.cp-flow__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: 1;
  gap: 16px;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background: rgba(0, 0, 0, 0.0);
}

.cp-flow__head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

/*
 * 丸バッジ。設計ツリーは text-align:center ＋ 固定 height のみで、
 * line-height の指定が無い。縦中央を確実に取るため flex 中央寄せで受ける。
 */
.cp-flow__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 64px;
  height: 36px;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 1px solid var(--o-c-brand-blue-d);
  border-radius: 128px;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0em;
  text-align: center;
  text-decoration: none;
}

.cp-flow__title {
  position: relative;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  /*
   * 0em → -0.03em。なぜ: A1ゴシック→Zen Maru Gothic 置換（CEO決定2）で字幅が広がり、
   *   PC幅で「グループトーク（アイスブレイク）」（16字）が 384px になって
   *   利用可能幅 376px（＝450 − 番号丸64 − gap10）を 8px 超え、2行目が「ク）」だけ落ちていた。
   * 根拠: 1440px 実測 local w=376 h=67(2行) ／ 現行 w=376 h=34(1行)。
   *   font-feature-settings:'palt' は Zen Maru Gothic が持たず無効（注入テストで幅不変）。
   *   -0.02em では 376.3px で届かず、-0.03em（24px で 0.72px/字）で 372px → 1行。
   *   同コンポーネントの .cp-flow__num は @mobile で letter-spacing:-0.04em を
   *   既に使っており、設計側も負の字送りを許容している。
   * 実測（適用後）: 1440 → 該当見出しのみ 1行（w=372）、他7件は行数不変。
   *   768 は全件1行（現行と一致）、900 は現行と同じ2行のまま。
   * 2026-09-14
   */
  letter-spacing: -0.03em;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
}

/* 説明文。ブレークポイントごとの上書きは一切無い（実測）。 */
.cp-flow__text {
  position: relative;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-c-note);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0em;
  line-height: 1.6;
  text-align: left;
  text-decoration: none;
}

@media screen and (max-width: 1140px) {
  .cp-detail { display: flex; gap: 32px; }
  .cp-flow       { display: flex; }
  .cp-flow__item { display: flex; }
  .cp-flow__body { display: flex; }
  .cp-flow__head { display: flex; }
  .cp-flow__num  { display: flex; }
}

@media screen and (max-width: 840px) {
  .cp-detail { display: flex; }
  .cp-flow {
    display: flex;
    gap: 20px;
  }
  .cp-flow__item {
    display: flex;
    padding: 0px 0px 20px 0px;
  }
  .cp-flow__body {
    display: flex;
    gap: 10px;
  }
  .cp-flow__head {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
  }
  .cp-flow__num {
    display: flex;
    flex: none;
    width: 50px;
    height: 26px;
    /* @tablet だけ欧文フォントに切り替わる（実測）。 */
    font-family: var(--s-font-5297e0b2);
    font-size: 14px;
  }
  .cp-flow__title { font-size: 16px; }
}

@media screen and (max-width: 540px) {
  .cp-detail {
    display: flex;
    flex: none;
    width: 100%;
  }
  .cp-flow {
    display: flex;
    flex: none;
    width: auto;
    /* @tablet の 20px を 24px に戻す（実測）。 */
    gap: 24px;
  }
  .cp-flow__item {
    display: flex;
    flex: none;
    width: 80%;
  }
  .cp-flow__body {
    display: flex;
    flex: none;
    width: auto;
    padding: 0px 0px 0px 0px;
  }
  .cp-flow__head {
    display: flex;
    gap: 10px;
    margin: 0px 0px 0px 0px;
  }
  .cp-flow__num {
    display: flex;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0px;
    font-size: 16px;
    letter-spacing: -0.04em;
    text-align: center;
  }
  .cp-flow__title { font-size: 20px; }
}

@media screen and (max-width: 320px) {
  .cp-detail { display: flex; }
  .cp-flow       { display: flex; }
  .cp-flow__item {
    display: flex;
    flex: none;
    width: 95%;
  }
  .cp-flow__body { display: flex; }
  .cp-flow__head { display: flex; }
  .cp-flow__num  {
    display: flex;
    font-size: 12px;
  }
  .cp-flow__title { font-size: 16px; }
}


/* === #system =====================================================
 * 実測: width:450px / gap:24px / padding:48px 24px / margin-top:80px
 *       border:2px solid #ff2d60（= var(--s-color-eba1e906)）/ border-radius:12px
 *       @tablet gap:16px / @mobile width:90% padding:32px 0
 * ================================================================ */

/* ---- セクション本体 ----
 * .cp-section の padding:80px 0 0 0 / margin:0 を全面的に上書きする。
 * 枠線色 #ff2d60 は tokens.css の var(--s-color-eba1e906) と同値。
 */
.cp-system {
  flex: none;
  width: 450px;
  /* max-width:100% は .cp-section が持つ（統合時に引き上げ済み）。 */
  height: auto;
  gap: 24px;
  margin: 80px 0px 0px 0px;
  padding: 48px 24px 48px 24px;
  background: rgba(0, 0, 0, 0.0);
  border: 2px solid var(--o-c-brand-red-d);
  border-radius: 12px 12px 12px 12px;
}

/* 「価値観でつながる出会いを自社設計」 */
.cp-system__lead {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  box-shadow: none;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
  text-shadow: none;
}

/* 「想い共有システム」。設計ツリーの直値は #ff2d60ff（= var(--s-color-eba1e906)）。 */
.cp-system__title {
  flex: none;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 0;
  box-shadow: none;
  color: var(--o-c-brand-red-d);
  font-family: var(--s-font-aca0103b);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1;
  opacity: 1;
  text-align: center;
  text-shadow: none;
}

/*
 * メインビジュアル（920×450）。
 * 設計ツリーは div ＋ ::before background-size:cover だが、base/@mobile の
 * height が auto なので <img> で出している。@tablet だけ height:150px の
 * 固定になるため、そこで object-fit:cover（= backgroundSize:cover）が効く。
 * 実体: assets/img/static/s-920x450_v-fs_webp_3a21d884-….webp
 * TODO: メディアライブラリ移行後に wp_get_attachment_image() へ差し替えること。
 */
.cp-system__visual {
  display: block;
  flex: none;
  width: 450px;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 12px;
  /*
   * 本番（1440px）の実測は width:398px / height:194.672px / object-fit:fill。
   * width:450px は base.css の img{max-width:100%} で親の内容幅 398px に丸められる
   * （450 - padding48 - border4 = 398）。本番もまったく同じ値で描かれている。
   * @tablet で height:150px の固定になると本番は object-fit:fill のまま縦に潰れる。
   * 見た目を本番に合わせるため cover にはしない（実測どおり fill）。
   */
  object-fit: fill;
}

/* 「LiteBlueでは、…」本文 */
.cp-system__note {
  flex: none;
  width: auto;
  height: auto;
  color: var(--cp-c-body);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.6;
  text-align: left;
}

/* ---- 通知の流れ（グレーのカード） ---- */
.cp-system__flow {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 24px;
  padding: 24px;
  /* 設計ツリー実測 #f5f5f5ff ＝ tokens.css の --o-c-card-bg。 */
  background: var(--o-c-card-bg);
  border-radius: 12px;
}

/* 見出しの型。column-reverse なので DOM 順（和文 → 英字）と上下が逆になる。 */
.cp-system__flow-head {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px;
  margin: 24px 0px 0px 0px;
  padding: 0px;
}

.cp-system__flow-ja {
  flex: none;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-radius: 2px;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.4;
  text-align: center;
  text-shadow: none;
}

.cp-system__flow-en {
  flex: none;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--o-c-brand-red-d);
  font-family: var(--s-font-5297e0b2);
  font-size: 20px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.05em;
  line-height: 1;
  text-align: center;
}

/*
 * フローリストは #detail 区画の .cp-flow をそのまま共用する。
 * #system では色だけが var(--s-color-04ab6cae) → #ff2d60 に変わる（実測）。
 * 構造・サイズ・余白・ブレークポイントの差分は一切無い。
 */
.cp-system .cp-flow__num {
  border-color: var(--o-c-brand-red-d);
  color: var(--o-c-brand-red-d);
}
.cp-system .cp-flow__title {
  color: var(--o-c-brand-red-d);
}

@media screen and (max-width: 1140px) {
  .cp-system            { display: flex; }
  .cp-system__visual    { display: block; }
  .cp-system__flow      { display: flex; }
  .cp-system__flow-head { display: flex; }
  .cp-system__title     { font-size: 24px; }
  .cp-system__flow-ja   { font-size: 20px; }
}

@media screen and (max-width: 840px) {
  .cp-system {
    display: flex;
    gap: 16px;
  }
  .cp-system__visual {
    display: block;
    flex: none;
    height: 150px;
  }
  .cp-system__flow {
    display: flex;
    padding: 12px;
  }
  .cp-system__flow-head { display: flex; }
  .cp-system__lead {
    font-size: 16px;
    line-height: 1.4;
  }
  .cp-system__title {
    font-size: 20px;
    line-height: 1.4;
  }
}

@media screen and (max-width: 540px) {
  .cp-system {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex: none;
    width: 90%;
    padding: 32px 0px;
  }
  .cp-system__visual {
    display: block;
    flex: none;
    width: 90%;
    /* @tablet の 150px を auto に戻す（実測）。 */
    height: auto;
  }
  .cp-system__flow {
    display: flex;
    flex: none;
    width: 95%;
    padding: 0px;
  }
  .cp-system__flow-head { display: flex; }
  .cp-system__lead {
    flex: none;
    width: 80%;
    font-size: 16px;
  }
  .cp-system__title {
    flex: none;
    width: 80%;
    line-height: 1.4;
  }
  .cp-system__note {
    flex: none;
    width: 80%;
  }
  .cp-system__flow-en { font-size: 14px; }
}

@media screen and (max-width: 320px) {
  .cp-system            { display: flex; }
  .cp-system__visual    { display: block; }
  .cp-system__flow      { display: flex; }
  .cp-system__flow-head { display: flex; }
  .cp-system__lead      { font-size: 16px; }
}


/* === #plan =======================================================
 * 実測: width:450px / gap:40px / padding-top:80px
 *       @tablet gap:24px / @mobile width:100%
 * 見出し: 「参加費<br>」32px var(--cp-c-ink) ／ 英字「Plan」20px var(--s-color-eba1e906)
 * ================================================================ */

/* ---- ローカル変数（tokens.css に無い実測直値。この区画の中だけで使う）---- */
#plan {
  /* 料金カード枠の地色。設計ツリー実測 #f9f9f9。 */
  --cp-plan-box-bg: #f9f9f9;
  /* 各プランカード／二次会ボックスの地色。設計ツリー実測 #FFFFFF。 */
  --cp-plan-card-bg: var(--o-c-white);
  /* 通常チケット側の文字・アイコン色。設計ツリー実測 #666666。 */
  --cp-plan-muted: #666666;
  /* 枠線（実質透明の 0px 指定）と注記の地色。設計ツリー実測 #EEEEEE。 */
  --cp-plan-gray: #EEEEEE;
}

/* セクション本体。共通 .cp-section との差分は gap だけ（24px → 40px）。 */
.cp-plan { gap: 40px; }

/* 英字ラベルだけ色が違う（共通の既定は var(--s-color-04ab6cae)）。 */
.cp-plan__en { color: var(--o-c-brand-red-d); }

/* ---- 料金カード枠（2枚のプラン＋注記＋二次会をまとめる外箱）---- */
.cp-plan__box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 24px;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  background: var(--cp-plan-box-bg);
  border: 2px solid var(--o-c-brand-blue-d);
  border-radius: 12px;
}

/* ---- プランカード共通（既定＝プラン1／通常チケット）---- */
.cp-plan__card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 20px;
  width: 100%;
  padding: 40px 24px;
  background: var(--cp-plan-card-bg);
  /* プラン1 は 0px solid #EEEEEE ＝実質枠線なし。実測どおり残す。 */
  border: 0px solid var(--cp-plan-gray);
  border-radius: 12px;
}

/* プラン2（早割チケット）。枠線が付き、「おすすめ」帯の位置基準になる。 */
.cp-plan__card--rec {
  /*
   * TODO: position は設計ツリーに無い。「おすすめ」帯が position:absolute /
   *   right:0 / top:24px でこのカードの右上に載るため、包含ブロックとして relative が要る。
   *   STUDIO ランタイムが全コンテナに relative を敷いているための省略と判断した。
   *   実画面で帯がカード右上に付いているか目視確認すること。
   */
  position: relative;
  border: 2px solid var(--o-c-brand-red-d);
}

/* ---- 「おすすめ」縦帯 ---- */
.cp-plan__ribbon {
  position: absolute;
  top: 24px;
  right: 0px;
  bottom: auto;
  left: auto;
  display: block;
  flex: none;
  width: auto;
  height: auto;
  margin: 0 0 0 0;
  padding: 24px 8px;
  background: var(--o-c-brand-red-d);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 12px 0px 0px 12px;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
  /* 日本語を縦組みにし、1文字ずつ正立させる（設計ツリー実測）。 */
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* ---- 価格ブロック ---- */
.cp-plan__price-group {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 8px;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

/* 「先着10名限定」。プラン2 にしか無い。 */
.cp-plan__limit {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--o-c-brand-red-d);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

/* 「通常チケット」／「早割チケット」。既定はプラン1 の色。 */
.cp-plan__ticket {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 28px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
.cp-plan__ticket--rec { color: var(--o-c-brand-red-d); }

.cp-plan__price {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* 数字と「円」の下端を揃える。 */
  align-items: flex-end;
  align-content: flex-end;
  justify-content: flex-start;
  gap: 0px;
  padding: 0px;
}

.cp-plan__amount {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 40px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1;
  text-align: center;
}
.cp-plan__amount--rec { color: var(--o-c-brand-red-d); }

.cp-plan__yen {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 20px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}
.cp-plan__yen--rec { color: var(--o-c-brand-red-d); }

/* ---- 特典リスト ---- */
/*
 * プラン2 だけ ul の外側に1階層ある（設計ツリー実測。プラン1 には無い）。
 * 実測の alignItems / alignContent は "space-between" だが flex の align-* に
 * space-between は無効値でブラウザが破棄するため、ここでは指定しない（＝初期値）。
 */
.cp-plan__perks-wrap {
  display: flex;
  flex: none;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

.cp-plan__perks {
  display: flex;
  flex: none;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 12px;
  width: 100%;
  margin: 0;
  padding: 0px;
  list-style: none;
}

/*
 * 各特典。実測は width:50%（＝2列）だが、列間 12px を足すと 100% を超えるため
 * 実際には折り返して1列2段になる。STUDIO 側の値をそのまま持ち込んでおり、
 * ベースライン（#plan h=1053）との差はこの折り返し分に相当する可能性がある。
 * TODO: 本番と並べて 2列／2段のどちらで出ているか目視確認すること。
 */
.cp-plan__perk {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 50%;
  margin: 0px 0px 0px 0px;
  padding: 0px;
}

/* 丸囲みチェック。既定はプラン1（グレー）。 */
.cp-plan__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--cp-plan-muted);
  border-radius: 128px;
  color: var(--cp-plan-muted);
  font-size: 10px;
}
.cp-plan__check--rec {
  border-color: var(--o-c-brand-red-d);
  color: var(--o-c-brand-red-d);
}

.cp-plan__perk-text {
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-plan-muted);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-align: left;
}
/* プラン2 側だけ本文色（#333）。 */
.cp-plan__perk-text--rec { color: var(--cp-c-body); }

/* ---- キャンセル規定 ---- */
.cp-plan__cancel {
  position: relative;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-plan-muted);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0em;
  line-height: 1.6;
  text-align: left;
  text-decoration: none;
}

/* ---- 二次会ボックス ---- */
.cp-plan__after {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 12px;
  width: 100%;
  padding: 24px;
  background: var(--cp-plan-card-bg);
  border-radius: 12px;
}

.cp-plan__after-head {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  align-content: flex-end;
  justify-content: center;
  gap: 12px;
  padding: 0px;
}

/* 見出しの左右に置く斜めの棒（装飾）。 */
.cp-plan__tick {
  display: block;
  flex: none;
  width: 3px;
  height: 16px;
  background: var(--o-c-brand-blue-d);
  border-radius: 4px;
}
.cp-plan__tick--l { rotate: -25deg; }
.cp-plan__tick--r { rotate: 25deg; }

.cp-plan__after-label {
  flex: none;
  width: auto;
  height: auto;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-align: center;
}

.cp-plan__after-price {
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 32px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

.cp-plan__after-note {
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 4px 8px;
  background: var(--cp-plan-gray);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

/* ---- @small ---- */
@media screen and (max-width: 1140px) {
  .cp-plan            { display: flex; }
  .cp-plan__box       { display: flex; }
  .cp-plan__card      { display: flex; }
  .cp-plan__ribbon    { display: block; }
  .cp-plan__price-group { display: flex; }
  .cp-plan__price     { display: flex; }
  .cp-plan__perks-wrap { display: flex; }
  .cp-plan__perks     { display: flex; }
  .cp-plan__perk      { display: flex; }
  .cp-plan__check     { display: inline-flex; }
  .cp-plan__after     { display: flex; }
  .cp-plan__after-head { display: flex; }
  .cp-plan__tick      { display: block; }

  .cp-plan__ticket      { font-size: 24px; }
  .cp-plan__amount      { font-size: 32px; }
  .cp-plan__after-price { font-size: 28px; }
}

/* ---- @tablet ---- */
@media screen and (max-width: 840px) {
  .cp-plan            { display: flex; gap: 24px; }
  .cp-plan__box       { display: flex; padding: 16px 10px; }
  .cp-plan__card      { display: flex; padding: 24px 16px; }
  .cp-plan__ribbon    { display: block; font-size: 12px; }
  .cp-plan__price-group { display: flex; }
  .cp-plan__price     { display: flex; }
  .cp-plan__perks-wrap { display: flex; }
  .cp-plan__perks     { display: flex; }
  .cp-plan__perk      { display: flex; flex: none; width: 100%; }
  .cp-plan__check     { display: inline-flex; }
  .cp-plan__after     { display: flex; padding: 16px; }
  .cp-plan__after-head { display: flex; }
  .cp-plan__tick      { display: block; }

  .cp-plan__limit       { font-size: 12px; }
  .cp-plan__ticket      { font-size: 20px; }
  .cp-plan__amount      { font-size: 24px; }
  .cp-plan__yen         { font-size: 16px; }
  .cp-plan__cancel      { font-size: 14px; line-height: 1.4; }
  .cp-plan__after-label { font-size: 14px; }
  .cp-plan__after-price { font-size: 20px; }
  .cp-plan__after-note  { font-size: 12px; }
}

/* ---- @mobile ---- */
@media screen and (max-width: 540px) {
  .cp-plan            { display: flex; flex: none; width: 100%; }
  .cp-plan__box       { display: flex; flex: none; padding: 16px 16px; width: 90%; }
  .cp-plan__card      { display: flex; flex: none; width: 100%; }
  .cp-plan__ribbon    { display: block; }
  .cp-plan__price-group { display: flex; }
  .cp-plan__price     { display: flex; }
  .cp-plan__perks-wrap { display: flex; }
  .cp-plan__perks     { display: flex; }
  .cp-plan__perk      { display: flex; }
  .cp-plan__check     { display: inline-flex; }
  .cp-plan__after     { display: flex; padding: 16px; }
  .cp-plan__after-head { display: flex; }
  .cp-plan__tick      { display: block; }

  .cp-plan__ticket      { font-size: 20px; }
  .cp-plan__amount      { font-size: 36px; }
  .cp-plan__cancel      { font-size: 15px; }
  .cp-plan__after-label { font-size: 15px; }
  .cp-plan__after-price { font-size: 20px; }
}

/* ---- @mini ---- */
/* 設計ツリーに @mini の上書きは1件も無い。display だけ明示して継承に頼らない。 */
@media screen and (max-width: 320px) {
  .cp-plan            { display: flex; }
  .cp-plan__box       { display: flex; }
  .cp-plan__card      { display: flex; }
  .cp-plan__ribbon    { display: block; }
  .cp-plan__price-group { display: flex; }
  .cp-plan__price     { display: flex; }
  .cp-plan__perks-wrap { display: flex; }
  .cp-plan__perks     { display: flex; }
  .cp-plan__perk      { display: flex; }
  .cp-plan__check     { display: inline-flex; }
  .cp-plan__after     { display: flex; }
  .cp-plan__after-head { display: flex; }
  .cp-plan__tick      { display: block; }
}


/* === #cta-1 ======================================================
 * 3. の CTA 共通が持つ（lead='さらに' 付き）。ここには書かない。
 * ================================================================ */


/* === #voice ======================================================
 * 実測: width:450px / gap:40px / padding-top:80px / @mobile width:80%
 * 見出しグループだけ flex-direction:column（他セクションは column-reverse）。
 *   → .cp-head に対して #voice 側で flex-direction:column を上書きすること。
 * 英字「Voice」24px var(--s-color-04ab6cae)／見出し「参加者の声」32px（@small 28px）
 * リード文「過去の弊社イベント参加者の感想です」16px lh:2
 * ================================================================ */

/* ---- ローカル変数（tokens.css に無い実測直値。この区画の中だけで使う）---- */
#voice {
  /* 各感想の下罫。設計ツリー実測 #EEEEEE。 */
  --cp-voice-rule: #EEEEEE;
}

/* セクション本体。共通 .cp-section との差分は gap だけ（24px → 40px）。 */
.cp-voice { gap: 40px; }

/*
 * このセクションだけ見出しグループが flex-direction:column（他は column-reverse）。
 * DOM も span（Voice）→ h2（参加者の声）→ リード文 の順で、見た目と一致する。
 */
.cp-head--column { flex-direction: column; }

/* 英字ラベルだけ 24px（共通の既定は 20px）。色は共通と同じ var(--s-color-04ab6cae)。 */
.cp-voice__en { font-size: 24px; }

.cp-voice__lead {
  flex: none;
  width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: center;
}

/*
 * 感想リスト。設計ツリーに flex-direction が無いが、
 *   ・各 <li> が width:100%
 *   ・ベースライン #voice h=1163 は縦積み計算とだけ一致する（横並びでは成立しない）
 * ことから column と確定した。width も指定が無い（＝auto）ので原文どおり触らない。
 */
.cp-voice__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 0;
  padding: 0px;
  list-style: none;
}

.cp-voice__item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  width: 100%;
  height: auto;
  padding: 0px 0px 24px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-top: 0px solid var(--cp-voice-rule);
  border-right: 0px solid var(--cp-voice-rule);
  border-bottom: 1px solid var(--cp-voice-rule);
  border-left: 0px solid var(--cp-voice-rule);
}

/*
 * 設計ツリー上の name は "Image" だが content も tagName も持たない素の箱。
 * List の defs に image（Unsplash）が定義されていても描画ノードが無いため、
 * 画像は現行サイトでも出ていない。ここでも出さない（このセクションに画像アセットは不要）。
 */
.cp-voice__body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  flex: 1;
  gap: 16px;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  background: rgba(0, 0, 0, 0.0);
}

/* 見出しとユーザー属性の行（左右振り分け）。 */
.cp-voice__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  gap: 16px;
  width: 100%;
  padding: 0px;
}

.cp-voice__heading {
  position: relative;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--o-c-brand-blue-d);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0em;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
}

/* 「30代前半・男性」等。設計ツリーでは h3 だが見出しではないので <p> で出している。 */
.cp-voice__attr {
  position: relative;
  flex: none;
  width: 30%;
  /*
   * なぜ: 30% では「30代前半・男性」（8字）が入り切らず「…男／性」と1文字落ちする。
   *   現行サイトも同じ壊れ方をしているが、右寄せの属性表記が1字で折れるのは読みにくい。
   * 根拠: 375px 実測 local w=90 h=39(2行)／現行 w=79 h=39(2行)、
   *   768px local w=103 h=45(2行)／現行 w=92 h=45(2行)。1440 は両方1行。
   * 対処: 幅の下限を内容幅にするだけ（30% は残す）。見出し .cp-voice__heading は
   *   flex:1 で残り幅を取るので、狭まっても行数は変わらないことを実測で確認済み。
   * 実測（適用後）: 375 → attr 3件とも1行（w=97〜98）／見出しの行数は変化なし、
   *   768 → attr 1行（w=111〜112）・見出し「不安も安心に変わった」は1行のまま、
   *   430/1440 は変化なし。
   * 2026-09-14
   */
  min-width: max-content;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--s-color-e89cf142);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0em;
  line-height: 1.4;
  text-align: right;
  text-decoration: none;
}

.cp-voice__text {
  position: relative;
  flex: 1;
  width: auto;
  height: auto;
  margin: 0px 0px 0px 0px;
  color: var(--o-c-black);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0em;
  line-height: 1.6;
  text-align: left;
  text-decoration: none;
}

/* ---- @small ---- */
@media screen and (max-width: 1140px) {
  .cp-voice          { display: flex; }
  .cp-head--column   { display: flex; }
  .cp-voice__list    { display: flex; }
  .cp-voice__item    { display: flex; }
  .cp-voice__body    { display: flex; }
  .cp-voice__row     { display: flex; }

  .cp-voice__heading { font-size: 20px; }
  .cp-voice__text    { font-size: 16px; }
}

/* ---- @tablet ---- */
@media screen and (max-width: 840px) {
  .cp-voice          { display: flex; }
  .cp-head--column   { display: flex; }
  .cp-voice__list    { display: flex; gap: 20px; }
  .cp-voice__item    { display: flex; padding: 0px 0px 20px 0px; }
  .cp-voice__body    { display: flex; gap: 12px; }
  .cp-voice__row     { display: flex; }

  /*
   * ★ 見出し「参加者の声」は @tablet の上書きを持たない（＝@small の 28px のまま）。
   *   共通 .cp-head__ja が @tablet で 24px にするので、ここで 28px に戻す。
   */
  .cp-voice__ja      { font-size: 28px; }
  .cp-voice__lead    { line-height: 1.8; }
  .cp-voice__heading { font-size: 16px; }
  .cp-voice__attr    { font-size: 16px; }
  .cp-voice__text    { font-size: 13px; }
}

/* ---- @mobile ---- */
@media screen and (max-width: 540px) {
  .cp-voice          { display: flex; flex: none; width: 80%; }
  .cp-head--column   { display: flex; }
  .cp-voice__list    { display: flex; flex: none; gap: 24px; width: auto; }
  .cp-voice__item    { display: flex; flex: none; }
  .cp-voice__body    { display: flex; flex: none; width: auto; padding: 0px 0px 0px 0px; }
  .cp-voice__row     { display: flex; }

  .cp-voice__lead    { flex: none; width: 80%; text-align: left; }
  .cp-voice__heading { font-size: 20px; }
  .cp-voice__attr    { font-size: 14px; }
}

/* ---- @mini ---- */
@media screen and (max-width: 320px) {
  .cp-voice          { display: flex; }
  .cp-head--column   { display: flex; }
  .cp-voice__list    { display: flex; }
  .cp-voice__item    { display: flex; flex: none; width: 95%; }
  .cp-voice__body    { display: flex; }
  .cp-voice__row     { display: flex; }

  .cp-voice__heading { font-size: 20px; }
}


/* === #faq ========================================================
 * 実測: width:450px / gap:40px / padding-top:80px
 *       @mobile width:90% padding:32px 0
 * 見出し: 「よくいただくご質問」32px ／ 英字「FAQ<br>」20px var(--s-color-04ab6cae)
 * アコーディオン（input type=button 8個）を含む
 * ================================================================ */

/* ---- ローカル変数（tokens.css に無い実測直値。この区画の中だけで使う）---- */
#faq {
  /* 各項目の下罫。設計ツリー実測 #EEEEEE。 */
  --cp-faq-rule: #EEEEEE;
  /* 回答本文の文字色。設計ツリー実測 #666666。 */
  --cp-faq-answer: #666666;
}

/* セクション本体。共通 .cp-section との差分は gap だけ（24px → 40px）。 */
.cp-faq {
  gap: 40px;
  height: auto;
  margin: 0px 0px 0px 0px;
  background: rgba(0, 0, 0, 0.0);
  border: 0px solid var(--o-c-brand-red-d);
  border-radius: 0;
}

.cp-faq__list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 16px;
  padding: 0px;
  /*
   * 設計ツリーに width は無いが、下の .cp-faq__item と同じ理由で明示する。
   * （<details> だと閉じた本文が幅計算に参加しないため。）
   */
  width: 100%;
}

/*
 * アコーディオン1件。設計ツリーは type:"toggle" の Box ＋ STUDIO ランタイム。
 * WordPress 側は <details>/<summary> に置き換えている（faq.php の冒頭コメント参照）。
 *
 * ★ width について
 *   設計ツリーの実測は width:auto。STUDIO では閉じた本文も height:0 で DOM に残るため
 *   幅計算に参加し、結果として全項目が同じ幅（＝セクション幅）で並ぶ。
 *   <details> は閉時に本文を描画しないので、そのまま auto にすると
 *   閉じている項目だけが質問文の幅に縮んでしまう。同じ見た目にするため 100% を明示する。
 */
.cp-faq__item {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  flex: none;
  gap: 10px;
  width: 100%;
  height: auto;
  padding: 0px 0px 10px 0px;
  background: var(--o-c-white);
  border-top: 0px solid var(--cp-faq-rule);
  border-right: 0px solid var(--cp-faq-rule);
  border-bottom: 1px solid var(--cp-faq-rule);
  border-left: 0px solid var(--cp-faq-rule);
  border-radius: 0px;
}

/*
 * 項目ごとの実測差分。STUDIO 側で編集時にズレた値がそのまま残っているもので、
 * 意味のある区別ではない。原本どおり再現しておく（揃えたくなったら CEO 判断）。
 *   1件目 … 下 padding が 16px（他は 10px）／質問文が @small で 18px
 *   3件目 … 質問行の高さが 56px・上揃え（他は 44px・中央揃え）
 *   4件目 … gap キーが無い（＝質問と回答が密着する）
 */
.cp-faq__item--first { padding-bottom: 16px; }
.cp-faq__item--nogap { gap: 0px; }

/* 質問行。<summary> の既定マーカーは消す（設計ツリーには三角が無い）。 */
.cp-faq__q {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  gap: 0px;
  width: 100%;
  height: 44px;
  padding: 0px;
  cursor: pointer;
  list-style: none;
}
.cp-faq__q::-webkit-details-marker { display: none; }

.cp-faq__item--tall .cp-faq__q {
  height: 56px;
  align-items: flex-start;
  align-content: flex-start;
}

.cp-faq__q-text {
  flex: 1;
  width: auto;
  height: 100%;
  color: var(--cp-c-ink);
  font-family: var(--s-font-aca0103b);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}

/*
 * 開閉アイコン（Material Icons `arrow_drop_up`）。
 * 設計ツリーは「閉じているとき rotate:180deg」。<details> では open の有無で切り替える。
 */
.cp-faq__arrow {
  display: inline-block;
  margin: 0px 0px 0px 0px;
  padding: 0px;
  color: var(--cp-c-ink);
  font-size: 24px;
  rotate: 180deg;
}
.cp-faq__item[open] .cp-faq__arrow { rotate: 0deg; }

.cp-faq__a {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 100%;
  height: auto;
  padding: 0px;
  background: rgba(0, 0, 0, 0.0);
  opacity: 1;
  overflow: hidden;
}

.cp-faq__a-text {
  width: auto;
  height: auto;
  margin: 0;
  color: var(--cp-faq-answer);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  font-weight: 500;  /* 400→500: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.6;
  text-align: justify;
}

/* ---- @small ---- */
@media screen and (max-width: 1140px) {
  .cp-faq        { display: flex; }
  .cp-faq__list  { display: flex; }
  .cp-faq__item  { display: flex; }
  .cp-faq__q     { display: flex; }
  .cp-faq__arrow { display: inline-block; }
  .cp-faq__a     { display: flex; }

  /* 1件目だけ @small の指定を持つ（gap は base と同値・質問文だけ 18px）。 */
  .cp-faq__item--first { gap: 10px; }
  .cp-faq__item--first .cp-faq__q-text { font-size: 18px; }
}

/* ---- @tablet ---- */
@media screen and (max-width: 840px) {
  .cp-faq        { display: flex; }
  .cp-faq__list  { display: flex; }
  .cp-faq__item  { display: flex; }
  .cp-faq__q     { display: flex; }
  .cp-faq__arrow { display: inline-block; }
  .cp-faq__a     { display: flex; }

  /* 8件すべて @tablet で 16px。 */
  .cp-faq__q-text { font-size: 16px; }
  /*
   * 1件目は @small で 18px を当てているぶん詳細度が高い（2クラス）ので、
   * ここでも同じ詳細度で 16px に戻す。書かないと @tablet 以降も 18px のまま残る。
   */
  .cp-faq__item--first .cp-faq__q-text { font-size: 16px; }
}

/* ---- @mobile ---- */
@media screen and (max-width: 540px) {
  .cp-faq {
    display: flex;
    flex: none;
    width: 90%;
    padding: 32px 0px;
  }
  .cp-faq__list  { display: flex; }
  .cp-faq__item  { display: flex; flex: none; width: 90%; }
  .cp-faq__q     { display: flex; }
  .cp-faq__arrow { display: inline-block; }
  .cp-faq__a     { display: flex; }
}

/* ---- @mini ---- */
/* 設計ツリーに @mini の上書きは1件も無い。display だけ明示して継承に頼らない。 */
@media screen and (max-width: 320px) {
  .cp-faq        { display: flex; }
  .cp-faq__list  { display: flex; }
  .cp-faq__item  { display: flex; }
  .cp-faq__q     { display: flex; }
  .cp-faq__arrow { display: inline-block; }
  .cp-faq__a     { display: flex; }
}


/* === #cta ========================================================
 * 3. の CTA 共通が持つ（.cp-cta--brand）。ここには書かない。
 * ================================================================ */


/* === #company ====================================================
 * 実測: width:450px / gap:40px / padding-top:80px
 *       @tablet gap:24px / @mobile width:80% padding:32px 0
 * 見出し: 「運営会社紹介」32px ／ 英字「Company」20px var(--s-color-eba1e906)
 * Googleマップ iframe を1件含む（会場地図）。
 *   ★ iframe は loading="lazy" と title 属性を付けること。
 *   base.css が iframe{border:0; max-width:100%} を持っているので枠線指定は不要。
 * 会社紹介の画像は取得済み（2026-09-13）。原本は STUDIO のストック画像CDN
 *   https://storage.stock.studio.design/optimized/FGTo0cMGcNvliP5rZdpzn.webp（896x1280 WebP）。
 *   自前配信に切り替えたので assets/img/static/FGTo0cMGcNvliP5rZdpzn.webp を参照している。
 * ================================================================ */

/* ---- ★ 重要な実測（2026-09-01・本番サイトの computed style を直接測定）--------
 * STUDIO は `width: Npx` を書いた要素すべてに **`max-width: 100%`** を対で出している。
 * `width: N%` の要素には **`max-width: N%`**（同じ値）を出す。
 * これが無いと 375px 幅で width:450px の要素がはみ出し、本番と見た目が変わる。
 * 本番 375px 実測: #company 300px / 中の画像・リスト・地図はいずれも 300px
 *                 （max-width:100% で親に収まっている。450px のままではない）
 * → 以下、この区画の要素にはすべて max-width を対で書いている。
 *
 * ☆ 骨格担当への申し送り: 同じ対応が .cp-section / .cp-cta / .cp-cta__visual /
 *   .cp-cta__reco-title など**ページ全体の width:Npx 要素すべて**に必要。
 *   2.〜3. は他セクションと共有のためこの区画からは触っていない。
 * ------------------------------------------------------------------------- */

/* ---- セクション枠 ---------------------------------------------
 * .cp-section 既定との差分だけを書く（既定: width:450px / gap:24px /
 * padding:80px 0 0 0 / flex column / 中央寄せ）。
 * 実測に @small・@mini の上書きは無い。display は全段で明示する。
 * 本番 1440px 実測 450×1061 ＝ baseline_campain.json の h:1061 と一致。 */
.cp-company {
  gap: 40px;
  max-width: 100%;
}

/* 英字ラベル「Company」だけ色が違う（#ff2d60 = var(--s-color-eba1e906)）。
 * サイズ 20px・@tablet 14px は .cp-head__en 既定と同じなので書かない。 */
.cp-head__en--red { color: var(--o-c-brand-red-d); }

/* ---- 会社写真 -------------------------------------------------
 * STUDIO は content:image を ::before の background-image で敷く。
 * 実測: width:450px / max-width:100% / height:200px / border-radius:12px /
 *       ":before": { backgroundRepeat:no-repeat, backgroundSize:cover }
 * TODO: 画像 FGTo0cMGcNvliP5rZdpzn.webp は未取得（区画冒頭の TODO 参照）。
 *   置くまでは空箱として 450×200 の高さだけを占める。 */
.cp-company__visual {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 450px;
  max-width: 100%;
  height: 200px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  border-radius: 12px;
}

/* background-position は本番の computed style が 50% 50%（＝center）。実測どおり。
 * border-radius:inherit は角丸で背景を切り抜くため（STUDIO は要素自身に背景を持つので
 * 同じ見え方になる。実測値の追加ではない）。 */
.cp-company__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("../img/static/FGTo0cMGcNvliP5rZdpzn.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* ---- 会社情報リスト -------------------------------------------
 * 実測（List ノード）: flex:none / gap:0 / padding:0 / width:100% / max-width:100%
 * flex-direction は実測に無い（STUDIO List の既定が縦積み）。li が width:100% の
 * ため縦積みで一致する。 */
.cp-company__list {
  display: flex;
  flex-direction: column;
  flex: none;
  gap: 0px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0px;
  list-style: none;
}

/* 1行。下線 2px solid #2e2e2e（= var(--cp-c-ink)）。
 * 実測の borderLeft / borderRight / borderTop は 0px なので書かない。 */
.cp-company__row {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: space-between;
  flex: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 20px 0px;
  border-bottom: 2px solid var(--cp-c-ink);
}

/* 項目名（20%）と値（78%）。色はどちらも #333（= var(--cp-c-body)）。
 * 太さと行間だけが違う。max-width は本番実測どおり width と同値。
 *
 * ★ フォント置換の影響（実測差分・許容範囲）:
 *   375px 幅で本番と1行だけ高さが違う。5行目「サイトURL」のラベルが、
 *   本番（A1ゴシック M JIS2004）では 20%＝60px に収まらず2行になり 70px、
 *   Noto Sans JP では1行に収まり 46px。差は24pxで、#company 全体では
 *   本番769px に対し 745px。1440px では 1061px で**完全一致**。
 *   CEO決定2（Noto Sans JP 置換）に伴う字面差であり、レイアウト崩れではない。
 *   実機で気になる場合はこの区画で @mobile のラベル幅だけを調整すること。 */
.cp-company__label,
.cp-company__value {
  flex: none;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px;
  color: var(--cp-c-body);
  font-family: var(--s-font-aca0103b);
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: left;
}
.cp-company__label {
  width: 20%;
  max-width: 20%;
  font-weight: 700;
  line-height: 2;
}
.cp-company__value {
  width: 78%;
  max-width: 78%;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.8;
}
/*
 * TODO: 値をリンク化する経路（設計ツリーの {{url.value}}）は5件とも空のため
 *   本番では一度も発火しない。リンク時の色・下線は抽出データに無いので
 *   ここでは定義していない（base.css の a に従う）。url を入れる運用が始まったら要指定。
 */

/* ---- Googleマップ ---------------------------------------------
 * 実測（Iframe ノード）: width:100% / max-width:100% / height:200px /
 *   border-radius:12px / background:rgba(0,0,0,0) / box-shadow:none /
 *   opacity:1 / margin:0 / padding:0
 * 角丸で iframe を切り抜くため overflow:hidden を付けている。 */
.cp-company__map {
  flex: none;
  width: 100%;
  max-width: 100%;
  height: 200px;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  background: rgba(0, 0, 0, 0);
  border-radius: 12px;
  box-shadow: none;
  opacity: 1;
  overflow: hidden;
}
.cp-company__map > iframe {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 1140px) {
  /* @small の上書きは実測に無い。display だけ明示する。 */
  .cp-company { display: flex; }
  .cp-company__visual { display: flex; }
  .cp-company__list { display: flex; }
  .cp-company__row { display: flex; }
}

@media screen and (max-width: 840px) {
  .cp-company {
    display: flex;
    gap: 24px;
  }
  .cp-company__visual {
    display: flex;
    flex: none;
    height: 150px;
  }
  .cp-company__list { display: flex; }
  .cp-company__row {
    display: flex;
    padding: 10px 0px;
  }
  .cp-company__label,
  .cp-company__value { font-size: 12px; }
  .cp-company__map {
    flex: none;
    height: 150px;
  }
}

@media screen and (max-width: 540px) {
  .cp-company {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    flex: none;
    width: 80%;
    max-width: 80%;
    padding: 32px 0px;
  }
  .cp-company__visual {
    display: flex;
    flex: none;
    height: 150px;
  }
  .cp-company__list { display: flex; }
  .cp-company__row { display: flex; }
}

@media screen and (max-width: 320px) {
  /* @mini の上書きは実測に無い。display だけ明示する。 */
  .cp-company { display: flex; }
  .cp-company__visual { display: flex; }
  .cp-company__list { display: flex; }
  .cp-company__row { display: flex; }
}


/* === #plivacy ====================================================
 * ★ 原文のスペルミス。アンカー互換のため綴りを直さない（privacy にしない）。
 * 実測: width:450px / gap:24px / padding-top:80px / margin:0
 * ================================================================ */

/* ---- セクション枠 ---------------------------------------------
 * 実測値（width:450px / gap:24px / padding:80px 0 0 0 / margin:0 /
 * flex column / 中央寄せ / flex:none）は .cp-section 既定と一致するため、
 * gap / padding / width は上書きしない。@mobile の { flex:none } も既定と同値。
 * display は 2. の .cp-section が全4段で明示済み。
 *
 * max-width:100%（本番 375px 実測で #plivacy は 375×592 ＝ 親いっぱい・450px ではない）は
 * 統合時に 2. の .cp-section へ引き上げたため、ここでは持たない。 */

/* ---- ネイビーのボックス ---------------------------------------
 * 実測: background var(--s-color-e89cf142) / border-radius:12px /
 *       gap:0 / padding:24px 0 / width:100% / max-width:100%
 *       @mobile: border-radius:0 / width:100% */
.cp-plivacy__box {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  gap: 0px;
  width: 100%;
  max-width: 100%;
  margin: 0px 0px 0px 0px;
  padding: 24px 0px;
  background: var(--s-color-e89cf142);
  border-radius: 12px;
}

/* 見出し（h3）。下線 2px var(--s-color-04ab6cae)。
 * 実測の borderLeft / borderRight / borderTop は 0px なので書かない。
 * ★ Noto Sans JP 置換後も原文の <br>（「LGBTQ Ordinaryは」で改行）で
 *   ちょうど2行に収まることを 1440px で確認済み（1行目 244px / 2行目 333px / 枠 405px）。
 *   本番の h3 実測 405×133 と一致。 */
.cp-plivacy__title {
  flex: none;
  width: 90%;
  max-width: 90%;
  height: auto;
  margin: 0;
  padding: 32px 0px;
  background: rgba(0, 0, 0, 0.0);
  border-bottom: 2px solid var(--o-c-brand-blue-d);
  border-radius: 0;
  color: var(--s-color-2c90be8a);
  font-family: var(--s-font-aca0103b);
  font-size: 24px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

/*
 * 本文。実測の色は #ffffffff。tokens.css の指示どおり var(--o-c-white) へ寄せる。
 *
 * ★ フォント置換の影響（実測差分・許容範囲）:
 *   1440 / 840 / 375px は本番と**完全一致**（#plivacy = 606 / 527 / 592px）。
 *   320px だけ本番 672px に対し 644px。差の28pxは本文がちょうど1行少なく
 *   折り返すため（16px × line-height 1.8 = 28.8px）。CEO決定2（Noto Sans JP 置換）
 *   に伴う字面差であり、レイアウト崩れではない。
 */
.cp-plivacy__body {
  flex: none;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 16px;
  font-weight: 700;  /* 500→700: 細い和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.1em;
  line-height: 2;
  text-align: left;
}

/* ピル型ボタン。.cp-cta__button と同値だが、CTA 共通（3.）を巻き込まないよう
 * 別クラスで持つ（CTA 側を触ると4箇所に波及するため）。 */
.cp-plivacy__btn {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  gap: 4px;
  width: 400px;
  max-width: 100%;
  height: auto;
  margin: 0px 0px 0px 0px;
  padding: 24px 24px;
  background: var(--o-c-brand-blue-d);
  border-radius: 1000px;
  box-shadow: var(--cp-shadow-btn);
  text-decoration: none;
}

/* 実測の色は #FFFFFF。var(--o-c-white) へ寄せる。 */
.cp-plivacy__btn-label {
  width: 100%;
  max-width: 100%;
  height: auto;
  color: var(--o-c-white);
  font-family: var(--s-font-aca0103b);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-align: center;
}

@media screen and (max-width: 1140px) {
  /* @small の上書きは実測に無い。display だけ明示する。 */
  .cp-plivacy__box { display: flex; }
  .cp-plivacy__btn { display: flex; }
}

@media screen and (max-width: 840px) {
  .cp-plivacy__box { display: flex; }
  .cp-plivacy__title {
    font-size: 16px;
    padding: 16px 0px;
  }
  .cp-plivacy__body { line-height: 1.8; }
  .cp-plivacy__btn {
    display: flex;
    padding: 12px 16px;
  }
  .cp-plivacy__btn-label { font-size: 13px; }
}

@media screen and (max-width: 540px) {
  .cp-plivacy__box {
    display: flex;
    flex: none;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
  /* @mobile は padding だけ上書き。font-size は @tablet の 16px を継承する（実測どおり）。 */
  .cp-plivacy__title { padding: 24px 0px; }
  .cp-plivacy__body {
    flex: none;
    width: 90%;
    max-width: 90%;
    text-align: left;
  }
  .cp-plivacy__btn {
    display: flex;
    flex: none;
    gap: 2px;
    opacity: 1;
    width: 80%;
    max-width: 80%;
    padding: 20px 24px;
  }
  .cp-plivacy__btn-label { font-size: 16px; }
}

@media screen and (max-width: 320px) {
  /* @mini の上書きは実測に無い。display だけ明示する。 */
  .cp-plivacy__box { display: flex; }
  .cp-plivacy__btn { display: flex; }
}