@charset "UTF-8";
/* ============================================================================
   A'staff Cloud ｜ おひとりサマーキャンペーン（美容室向け）LP  style.css
   ----------------------------------------------------------------------------
   ・設計：BEM + 名前空間プレフィックス「lp-」（WordPress/Lightning等と非衝突）
   ・方針：レスポンシブファースト（スマホ→タブレット→PCへ min-width で拡張）
   ・CWV ：レイアウトシフト回避（imgはHTML側でwidth/height指定）、余計な再描画を避ける
   ・保守：色・余白・字サイズはCSS変数（--lp-*）に集約。ブランド色は要確認（下記）
   ・注意：セクションの上下余白は .lp-section 等の padding-block のみで管理し、
           セレクタ同士の相殺（margin/paddingの打ち消し）を避けています。
   ============================================================================ */

/* ===== 1. デザイントークン（変数） =====================================
   ※ブランドカラーはロゴ・現行サイトからの参考値です。公開前に logo.png /
   　サイトCSSから正確なHEXを確定し、下記の値のみ差し替えてください。 */
:root {
  /* Brand */
  --lp-red:      #e60012;  /* ロゴ「A'staff」レッド（アクセント用） */
  --lp-blue:     #0091d6;  /* ロゴ「Cloud」ブルー（見出し・アイコン） */
  --lp-blue-d:   #0a6fa8;  /* ブルー濃（テキスト強調） */
  --lp-navy:     #133a6b;  /* 帯・見出し・信頼感 */
  --lp-navy-d:   #0e2d54;  /* ネイビー濃（暗背景） */
  --lp-pink:     #e7508f;  /* キャンペーン・無料・主要CTA */
  --lp-pink-d:   #cf3f7b;  /* ピンク濃（ホバー） */
  --lp-yellow:   #ffe100;  /* アクセント・お得 */
  --lp-line:     #06c755;  /* LINEボタン（ブランド緑） */
  --lp-pink-tint: #fdeef4; /* オファーカード（お1人様）背景の淡色 */
  --lp-blue-tint: #e8f6fc; /* オファーカード（それ以外）背景の淡色 */

  /* Neutral */
  --lp-text:     #333333;
  --lp-muted:    #6b7785;
  --lp-border:   #e3e9f0;
  --lp-white:    #ffffff;
  --lp-sky:      #eaf6fc;  /* ファーストビュー背景 */
  --lp-sky-d:    #d7ecf8;
  --lp-cream:    #f6fbfe;  /* セクション背景（淡） */

  /* Semantic marks（比較表） */
  --lp-ok:       #2aa06a;  /* ○ */
  --lp-part:     #e0952f;  /* △ */
  --lp-no:       #b7c0cc;  /* × */

  /* Layout */
  --lp-container: 1080px;  /* コンテンツ最大幅 */
  --lp-pad-x:     1.25rem; /* 左右最小余白 */
  --lp-section:   3.25rem; /* セクション上下余白（スマホ） */
  --lp-radius:    14px;
  --lp-radius-sm: 10px;
  --lp-shadow:      0 6px 22px rgba(19, 58, 107, .08);
  --lp-shadow-card: 0 2px 10px rgba(19, 58, 107, .06);

  /* Type scale（clampで画面幅に応じて可変） */
  --lp-fs-hero: clamp(2rem, 7.5vw, 3.2rem);
  --lp-fs-h2:   clamp(1.4rem, 4.6vw, 2rem);
  --lp-fs-h3:   1.125rem;
  --lp-fs-lead: clamp(1rem, 2.6vw, 1.1rem);
  --lp-fs-body: 1rem;
  --lp-fs-sm:   .875rem;
  --lp-lh:      1.85;
}

/* ===== 2. ベース（LP範囲のみにスコープ） ===============================
   WordPressのテーマCSSへ影響しないよう、reset/typographyは
   .lp / .site-header / .site-footer 配下に限定します。 */

/* 横スクロール防止の安全策（フォールバック）。
   他社比較は横幅固定の表からカード表示に変更済みのため、通常はこの指定に
   頼らずとも横スクロールは発生しない想定だが、保険として残している。 */
html, body { overflow-x: hidden; max-width: 100%; }

.lp *, .lp *::before, .lp *::after,
.site-header *, .site-header *::before, .site-header *::after,
.site-footer *, .site-footer *::before, .site-footer *::after { box-sizing: border-box; }

.lp, .site-header, .site-footer {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
               "Yu Gothic", "YuGothic", "Meiryo", system-ui, sans-serif;
  color: var(--lp-text);
  line-height: var(--lp-lh);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}

/* 余白リセット（コンポーネント側で必要分を付与）
   ※ :where() で詳細度を0にし、個別クラス（例：.lp-hero__ribbon）側の
     margin指定が確実に優先されるようにしている。 */
:where(.lp) h1, :where(.lp) h2, :where(.lp) h3, :where(.lp) p, :where(.lp) ul, :where(.lp) ol, :where(.lp) figure,
:where(.lp) blockquote, :where(.lp) address { margin: 0; }
.lp ul, .lp ol { list-style: none; padding: 0; }

/* 画像：比率維持でレスポンシブ（HTMLのwidth/heightでCLS防止） */
.lp img, .site-header img, .site-footer img { max-width: 100%; height: auto; display: block; }

/* リンク基本 */
.lp a, .site-header a, .site-footer a { color: inherit; text-decoration: none; }

/* SVGアイコンの表示基本 */
.lp svg { display: inline-block; vertical-align: middle; fill: none; }

/* アクセシビリティ：キーボードフォーカスを明示 */
.lp a:focus-visible, .lp summary:focus-visible, .lp [tabindex]:focus-visible,
.site-header a:focus-visible, .site-footer a:focus-visible {
  outline: 3px solid var(--lp-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* スクリーンリーダー専用テキスト（○△×の意味を読み上げ） */
.u-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* モーション配慮：アニメーションを抑制する設定を尊重 */
@media (prefers-reduced-motion: reduce) {
  .lp *, .site-header *, .lp-sticky * { transition: none !important; }
}


/* ===== 3. 共通レイアウト：中央寄せ（ラッパーdivなし） ==================
   セクションは全幅（背景色は全幅表示）、コンテンツのみ最大幅で中央寄せ。
   余計な入れ子divを増やさないための padding-inline テクニック。 */
.lp-breadcrumb,
.lp-hero,
.lp-included,
.lp-section {
  padding-inline: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2));
}

/* セクション標準の上下余白 */
.lp-section { padding-block: var(--lp-section); }

/* セクション背景でリズムをつける（淡い交互） */
.lp-solution,
.lp-benefits,
.lp-cases { background: var(--lp-cream); }

/* パンくず */
.lp-breadcrumb { padding-block: .8rem; font-size: .78rem; color: var(--lp-muted); }
.lp-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: .3em; }
.lp-breadcrumb__list li { display: inline-flex; align-items: center; }
.lp-breadcrumb__list li:not(:last-child)::after { content: "›"; margin-left: .3em; color: var(--lp-muted); }
.lp-breadcrumb__list a { color: var(--lp-muted); }
.lp-breadcrumb__list a:hover { text-decoration: underline; }
.lp-breadcrumb__list [aria-current="page"] { color: var(--lp-text); }


/* ===== 4. 見出し・リード（共通） ======================================= */
.lp-heading {
  font-size: var(--lp-fs-h2);
  font-weight: 800;
  line-height: 1.4;
  color: var(--lp-navy);
  text-align: center;
}
/* 見出し下の短いアクセントバー */
.lp-heading::after {
  content: ""; display: block; width: 48px; height: 4px; border-radius: 2px;
  margin: .7rem auto 0; background: var(--lp-pink);
}
.lp-heading--invert { color: var(--lp-white); }
.lp-heading--invert::after { background: var(--lp-yellow); }

.lp-lead {
  max-width: 46rem; margin: 1.1rem auto 0; text-align: center;
  font-size: var(--lp-fs-lead);
}
.lp-lead--invert { color: var(--lp-white); }


/* ===== 5. ボタン / CTA ================================================= */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .25em; min-height: 48px; padding: .7em 1.4em;
  font-size: var(--lp-fs-body); font-weight: 700; line-height: 1.3;
  border-radius: 999px; border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  cursor: pointer; text-align: center;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn:active { transform: translateY(0); }
.lp-btn__arrow { width: 18px; height: 18px; }

/* 主要（デモ＝ピンク／白文字のコントラスト確保のため濃色を使用）
   ※「.lp-btn.lp-btn--xxx」と2クラス連結にして詳細度を上げ、
     「.lp a { color:inherit }」（詳細度0,1,1）に負けないようにしている。 */
.lp-btn.lp-btn--primary { background: var(--lp-pink-d); color: var(--lp-white); box-shadow: 0 6px 16px rgba(231, 80, 143, .28); }
.lp-btn.lp-btn--primary:hover { background: #b8335f; }
/* 副次（資料＝白＋ネイビー枠） */
.lp-btn.lp-btn--secondary { background: var(--lp-white); color: var(--lp-navy); border-color: var(--lp-navy); }
.lp-btn.lp-btn--secondary:hover { background: var(--lp-navy); color: var(--lp-white); }
/* アクセント（暗背景での主要CTA＝イエロー） */
.lp-btn.lp-btn--accent { background: var(--lp-yellow); color: var(--lp-navy); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.lp-btn.lp-btn--accent:hover { background: #ffd600; }
/* ゴースト（ヘッダー資料請求など） */
.lp-btn.lp-btn--ghost { background: transparent; color: var(--lp-navy); border-color: var(--lp-border); }
.lp-btn.lp-btn--ghost:hover { background: var(--lp-cream); border-color: var(--lp-navy); }
/* LINE */
.lp-btn.lp-btn--line { background: var(--lp-line); color: var(--lp-white); }
.lp-btn.lp-btn--line:hover { background: #05b34c; }
/* 大サイズ */
.lp-btn--lg { min-height: 56px; padding: .85em 1.8em; font-size: 1.0625rem; }

/* CTAブロック：スマホは縦積み・全幅、PCは横並び中央 */
.lp-cta { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 2rem; }
.lp-cta .lp-btn { width: 100%; max-width: 22rem; }


/* ===== 6. ① ファーストビュー（FV） ==================================== */
.lp-hero {
  padding-block: 1rem 2.5rem;
  background: linear-gradient(180deg, var(--lp-sky) 0%, var(--lp-sky-d) 100%);
}

/* 上部リボン（予約システム同時導入の訴求） */
.lp-hero__ribbon {
  display: block; text-align: center; font-weight: 700; color: var(--lp-white);
  background: var(--lp-navy); border-radius: 999px;
  padding: .55em 1.2em; font-size: var(--lp-fs-sm); margin-bottom: 1rem;
}

/* レイアウト：スマホ1カラム → PCで本文＋画像の2カラム */
.lp-hero__grid { display: grid; gap: 1.5rem; }

.lp-hero__title { font-size: var(--lp-fs-hero); font-weight: 800; line-height: 1.15; color: var(--lp-blue); letter-spacing: .01em; }
.lp-hero__title-accent { color: var(--lp-pink); }

/* サブコピー：イエローのハイライト下線（ブランド演出） */
.lp-hero__subtitle {
  display: inline-block; margin-top: .8rem; font-size: clamp(1rem, 3.4vw, 1.25rem); font-weight: 700; color: var(--lp-navy);
  background: linear-gradient(transparent 62%, var(--lp-yellow) 62%);
  line-height: 1.9;
}

/* 期間バッジ */
.lp-hero__period { display: flex; flex-wrap: wrap; align-items: center; gap: .4em; margin-top: 1.1rem; font-weight: 700; color: var(--lp-navy); }
.lp-hero__period-label { background: var(--lp-navy); color: var(--lp-white); font-size: .75rem; border-radius: 4px; padding: .2em .6em; }
.lp-hero__note { margin-top: 1rem; font-size: var(--lp-fs-sm); color: var(--lp-muted); }

/* FV画像 */
.lp-hero__figure { position: relative; }
.lp-hero__figure img { width: 100%; border-radius: var(--lp-radius); }
.lp-hero__bubble {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  max-width: 85%; width: max-content; text-align: center;
  background: var(--lp-white); color: var(--lp-navy); font-size: var(--lp-fs-sm); font-weight: 700;
  padding: .55em 1em; border-radius: 12px; box-shadow: var(--lp-shadow-card);
}


/* ===== 7. オファー（0円 / 半額）※同格・同サイズが最重要 ============== */
.lp-offer { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-top: 1.4rem; }
/* 詳細セクション側は横幅いっぱいに広げ、W特典カード風の太めボーダー表示に。
   カード内が横並びレイアウトのため、スマホでは1カラム縦積みにする。 */
.lp-offer--detail { max-width: none; grid-template-columns: 1fr; gap: 1rem; }

/* 上部の色帯はやめて、淡いティント背景＋細ボーダーで区分を示す今風の見せ方に変更 */
.lp-offer__card {
  position: relative; border-radius: var(--lp-radius);
  border: 1px solid; padding: 1.2rem .7rem 1.3rem; text-align: center; box-shadow: var(--lp-shadow-card);
}
.lp-offer__card--free { background: var(--lp-pink-tint); border-color: rgba(231, 80, 143, .22); }
.lp-offer__card--half { background: var(--lp-blue-tint); border-color: rgba(0, 145, 214, .22); }

.lp-offer__target { display: inline-block; font-size: .78rem; font-weight: 700; color: var(--lp-white); border-radius: 999px; padding: .2em .9em; margin-bottom: .6rem; }
.lp-offer__card--free .lp-offer__target { background: var(--lp-pink); }
.lp-offer__card--half .lp-offer__target { background: var(--lp-blue); }

.lp-offer__from { font-size: .78rem; color: var(--lp-muted); }
.lp-offer__from s { color: var(--lp-muted); }

.lp-offer__to { line-height: 1; margin: .3rem 0 .6rem; }
.lp-offer__amount { font-size: clamp(2.1rem, 9vw, 2.9rem); font-weight: 800; }
.lp-offer__card--free .lp-offer__amount { color: var(--lp-pink); }
.lp-offer__card--half .lp-offer__amount { color: var(--lp-blue); }

.lp-offer__badge { display: inline-block; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .18em .8em; }
.lp-offer__card--free .lp-offer__badge { background: var(--lp-pink); color: var(--lp-white); }
.lp-offer__card--half .lp-offer__badge { background: var(--lp-yellow); color: var(--lp-navy); }

/* --wide：④キャンペーン内容セクション用。横幅いっぱい＋太めボーダーで
   「W特典カード」風に見せる（色は既存のブランドカラーを踏襲）。
   カード内は横並びにせず縦組みのまま、余白バランスを整える。 */
.lp-offer__card--wide { border-width: 3px; padding: 1.3rem 1.2rem; }
.lp-offer__card--wide.lp-offer__card--free { border-color: var(--lp-pink); }
.lp-offer__card--wide.lp-offer__card--half { border-color: var(--lp-blue); }
.lp-offer__card--wide .lp-offer__amount { font-size: clamp(2.2rem, 6vw, 3.2rem); }

.lp-offer__desc { margin-top: -.35rem; font-size: .8rem; font-weight: 700; color: var(--lp-muted); }


/* ===== 8. ①-補 サポート範囲バンド（すべてコミコミ） =================
   「すべてコミコミ！」をリストの一員として横並びに統合し、各項目を
   チップ状に見せる構成に再構成。 */
.lp-included { padding-block: 1.8rem; background: var(--lp-white); text-align: center; }
.lp-included__lead { font-weight: 700; color: var(--lp-navy); font-size: 1.05rem; }
.lp-included__brand { color: var(--lp-blue); }
.lp-included__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: 1.1rem; }
.lp-included__item {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 700; color: var(--lp-navy);
  background: var(--lp-cream); border: 1px solid var(--lp-border);
  border-radius: 999px; padding: .5em 1.1em; font-size: .95rem;
}
.lp-included__icon { width: 22px; height: 22px; color: var(--lp-blue); flex-shrink: 0; }

/* 「すべてコミコミ！」：スマホは単独で全幅にし、3項目すべて込みであることを強調 */
.lp-included__item--tag {
  flex: 1 1 100%; justify-content: center;
  background: var(--lp-pink); color: var(--lp-white); border-color: var(--lp-pink);
  font-weight: 800; margin-top: .2rem;
}
.lp-included__icon--check { width: 18px; height: 18px; color: var(--lp-white); }


/* ===== 9. ② 共感（カード） ============================================
   左のカラーバーはやめ、ナンバリングバッジ＋シャドウのみのフラットな
   カードレイアウトに変更。 */
.lp-problems__list { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.8rem; }
.lp-problems__item {
  display: flex; align-items: flex-start; gap: 1rem;
  background: var(--lp-white); border-radius: var(--lp-radius);
  padding: 1.3rem 1.3rem; box-shadow: var(--lp-shadow-card);
}
.lp-problems__num {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: linear-gradient(135deg, var(--lp-pink) 0%, var(--lp-pink-d) 100%);
  color: var(--lp-white); font-weight: 800; font-size: .95rem; letter-spacing: .02em;
}
.lp-problems__text { margin-top: .3rem; font-weight: 500; line-height: 1.8; }
.lp-problems__lead { margin-top: 1.8rem; text-align: center; font-weight: 700; color: var(--lp-navy); font-size: var(--lp-fs-lead); }


/* ===== 10. ③ 解決 / 主要機能 ========================================= */
/* auto-fitで列数を自動調整（ブレークポイント不要・保守性重視） */
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.lp-feature { background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 1.3rem 1.2rem; box-shadow: var(--lp-shadow-card); }
.lp-feature .lp-feature__icon { width: 40px; height: 40px; color: var(--lp-blue); display: block; margin-inline: auto; }
.lp-feature__title { margin-top: .6rem; font-size: var(--lp-fs-h3); font-weight: 700; color: var(--lp-navy); text-align: center; }
.lp-feature__text { margin-top: .35rem; font-size: var(--lp-fs-sm); color: var(--lp-text); }
.lp-solution__eeat { margin-top: 1.5rem; text-align: center; font-size: var(--lp-fs-sm); color: var(--lp-muted); }


/* ===== 11. ④ キャンペーン内容 / 適用条件・対象外 ==================== */
.lp-campaign__note { margin-top: .8rem; text-align: center; font-size: var(--lp-fs-sm); color: var(--lp-muted); }

.lp-terms { display: grid; gap: 1rem; margin-top: 1.8rem; }
.lp-terms__block { border-radius: var(--lp-radius); padding: 1.2rem 1.3rem; border: 1px solid var(--lp-border); }
.lp-terms__block--include { background: #eef7fd; border-color: #cfe7f7; }
.lp-terms__block--exclude { background: #f4f6f8; }
.lp-terms__title { font-size: var(--lp-fs-h3); font-weight: 700; margin-bottom: .6rem; color: var(--lp-navy); }

/* リストのマーカーは擬似要素で軽量に（主要アイコンはSVG、箇条書き記号はCSS） */
.lp-terms__list li { position: relative; padding-left: 1.5em; margin-top: .45rem; }
.lp-terms__list li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 900; color: var(--lp-ok); }
.lp-terms__list--exclude li::before { content: "×"; color: var(--lp-no); }


/* ===== 12. ⑤ 導入メリット =========================================== */
.lp-benefits__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.lp-benefit { background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius); padding: 1.3rem 1.2rem; box-shadow: var(--lp-shadow-card); }
.lp-benefit .lp-benefit__icon { width: 36px; height: 36px; color: var(--lp-pink); display: block; margin-inline: auto; }
.lp-benefit__title { margin-top: .5rem; font-size: var(--lp-fs-h3); font-weight: 700; color: var(--lp-navy); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .4em; }
.lp-benefit__tag { font-size: .68rem; font-weight: 700; color: var(--lp-blue-d); background: #e7f3fb; border-radius: 4px; padding: .1em .5em; }
.lp-benefit__text { margin-top: .35rem; font-size: var(--lp-fs-sm); }
.lp-benefits__note { margin-top: 1.4rem; text-align: center; font-size: var(--lp-fs-sm); color: var(--lp-muted); }


/* ===== 13. ⑥ なぜ今なのか（暗背景） ================================= */
.lp-now { background: linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy-d) 100%); color: var(--lp-white); text-align: center; }
.lp-now__deadline {
  display: inline-block; margin-top: 1.4rem; font-weight: 800; color: var(--lp-navy);
  background: var(--lp-yellow); border-radius: 999px; padding: .5em 1.3em; font-size: clamp(1rem, 3.4vw, 1.2rem);
}


/* ===== 14. ⑦ 他社比較（カード） =====================================
   横スクロールする表はやめ、比較項目＝1カードとして縦に積む構成に変更。
   PC・スマホともに横スクロールは発生しない（PCはグリッドで複数列に自動配置）。 */
.lp-compare__cards {
  display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.8rem;
}
.lp-compare__card {
  background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--lp-shadow-card);
}
.lp-compare__item { font-size: var(--lp-fs-h3); font-weight: 700; color: var(--lp-navy); }
.lp-compare__rows { display: grid; gap: .5rem; margin-top: .8rem; }
.lp-compare__row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .55em .8em; border-radius: var(--lp-radius-sm); background: var(--lp-cream);
  font-size: var(--lp-fs-sm);
}
.lp-compare__row dt { font-weight: 700; color: var(--lp-muted); }
.lp-compare__row dd { display: inline-flex; align-items: center; gap: .35em; margin: 0; font-weight: 700; color: var(--lp-text); text-align: right; }
/* A'staffの行を強調 */
.lp-compare__row--main { background: #fff3f8; border: 1px solid rgba(231, 80, 143, .25); }
.lp-compare__row--main dt { color: var(--lp-pink-d); }
.lp-compare__hl { color: var(--lp-pink-d); font-weight: 800; }
/* ○△×マーク */
.lp-mark { width: 20px; height: 20px; flex-shrink: 0; }
.lp-mark--ok { color: var(--lp-ok); }
.lp-mark--part { color: var(--lp-part); }
.lp-mark--no { color: var(--lp-no); }
.lp-compare__note { margin-top: 1rem; font-size: .8rem; color: var(--lp-muted); }


/* ===== 15. ⑧ 導入事例 ===============================================
   カード全体を <a> でリンク化。画像はheight固定＋object-fit:coverで高さを統一。 */
.lp-cases__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.lp-case { border-radius: var(--lp-radius); box-shadow: var(--lp-shadow-card); }
.lp-case .lp-case__link {
  display: flex; flex-direction: column; height: 100%;
  background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: inherit;
  color: inherit; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.lp-case .lp-case__link:hover { transform: translateY(-3px); box-shadow: var(--lp-shadow); }
.lp-case .lp-case__link:hover .lp-case__cta { text-decoration: underline; }
.lp-case .lp-case__img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--lp-radius) var(--lp-radius) 0 0; }
.lp-case__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.lp-case__name { font-size: var(--lp-fs-h3); font-weight: 700; color: var(--lp-navy); }
.lp-case__quote { border-left: 3px solid var(--lp-sky-d); padding-left: .8rem; color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.lp-case__cta { margin-top: auto; display: inline-flex; align-items: center; gap: .2em; font-weight: 700; color: var(--lp-blue-d); }
.lp-cases__more { margin-top: 1.4rem; text-align: center; }
.lp-cases__more a { color: var(--lp-blue-d); font-weight: 700; text-decoration: underline; }


/* ===== 16. ⑨ FAQ（details/summary・JSなし） ======================== */
.lp-faq__list { max-width: 48rem; margin: 1.8rem auto 0; }
.lp-faq__item { background: var(--lp-white); border: 1px solid var(--lp-border); border-radius: var(--lp-radius-sm); margin-top: .7rem; overflow: hidden; }
.lp-faq__q {
  position: relative; list-style: none; cursor: pointer;
  padding: 1rem 3rem 1rem 2.6rem; font-weight: 700; color: var(--lp-navy);
}
.lp-faq__q::-webkit-details-marker { display: none; }         /* デフォルト三角を消す */
.lp-faq__q::before { content: "Q"; position: absolute; left: 1rem; top: 1rem; color: var(--lp-pink); font-weight: 800; }
/* 開閉インジケーター（＋→× 回転） */
.lp-faq__q::after {
  content: ""; position: absolute; right: 1.2rem; top: 50%; width: 14px; height: 14px;
  background:
    linear-gradient(var(--lp-navy), var(--lp-navy)) center/14px 2px no-repeat,
    linear-gradient(var(--lp-navy), var(--lp-navy)) center/2px 14px no-repeat;
  transform: translateY(-50%) rotate(0deg); transition: transform .2s ease;
}
.lp-faq__item[open] .lp-faq__q::after { transform: translateY(-50%) rotate(135deg); }
.lp-faq__a { padding: 0 1.2rem 1.1rem 2.6rem; color: var(--lp-text); }


/* ===== 17. ⑩ 最終CTA（暗背景） ===================================== */
.lp-final { position: relative; background: linear-gradient(160deg, var(--lp-navy) 0%, var(--lp-navy-d) 100%); color: var(--lp-white); text-align: center; }
.lp-final__reoffer { margin-top: 1.2rem; font-size: var(--lp-fs-lead); }
.lp-final__reoffer strong { color: var(--lp-yellow); font-size: 1.15em; }
.lp-final__period { display: inline-block; font-size: var(--lp-fs-sm); opacity: .9; }
.lp-cta--final { margin-top: 1.6rem; }
.lp-final__tel { margin-top: 1.4rem; font-size: var(--lp-fs-sm); }
.lp-final__tel a { color: var(--lp-white); font-weight: 700; text-decoration: underline; }
.lp-final__mascot { width: 150px; height: auto; margin: 1.4rem auto 0; }


/* アンカー遷移時に stickyヘッダー分のオフセットを確保 */
#terms { scroll-margin-top: 84px; }


/* ===== 18. スマホ用 追従CTA（CTA⑦・スマホのみ） ==================== */
.lp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--lp-border); box-shadow: 0 -3px 12px rgba(0, 0, 0, .12);
}
.lp-sticky__btn { min-height: 54px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--lp-white); }
.lp-sticky__btn--doc  { background: var(--lp-navy); }
.lp-sticky__btn--demo { background: var(--lp-pink); }


/* ===== 19. サイトヘッダー（外枠・WPではテーマ側を使用） ============= */
.site-header { position: sticky; top: 0; z-index: 40; background: var(--lp-white); box-shadow: 0 1px 6px rgba(0, 0, 0, .06); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 60px; padding-block: .5rem;
  padding-inline: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2));
}
.site-header__logo img { height: 40px; width: auto; }
.site-header__actions { display: flex; align-items: center; gap: .6rem; }
.site-header__tel { display: none; text-align: right; line-height: 1.2; }
.site-header__tel-num { display: block; font-weight: 800; color: var(--lp-navy); font-size: 1.05rem; }
.site-header__tel-note { display: block; font-size: .7rem; color: var(--lp-muted); }
.site-header__cta { min-height: 42px; padding: .4em 1em; font-size: var(--lp-fs-sm); }
/* スマホでは追従バーがあるため、ヘッダーの資料請求ボタンは省略 */
.site-header__cta.lp-btn--ghost { display: none; }


/* ===== 20. サイトフッター（外枠・WPではテーマ側を使用） ============= */
.site-footer { background: var(--lp-cream); border-top: 1px solid var(--lp-border); }
.site-footer__inner { text-align: center; padding-block: 2.5rem; padding-inline: max(var(--lp-pad-x), calc((100% - var(--lp-container)) / 2)); }
/* .site-footer img（詳細度：クラス+要素）に負けないよう親要素を含めて詳細度を上げる */
.site-footer .site-footer__logo { height: 46px; width: auto; margin: 0 auto; }
.site-footer__tagline { margin-top: .6rem; font-weight: 700; color: var(--lp-navy); }
.site-footer__address { margin-top: 1rem; font-style: normal; font-size: var(--lp-fs-sm); color: var(--lp-muted); line-height: 1.9; }
.site-footer__address a { color: var(--lp-navy); font-weight: 700; }
.site-footer__copy { margin-top: 1.2rem; font-size: .75rem; color: var(--lp-muted); }


/* ============================================================================
   21. レスポンシブ拡張（min-width で上書き）
   ============================================================================ */

/* --- タブレット以上（600px〜） --- */
@media (min-width: 600px) {
  :root { --lp-section: 4.25rem; }

  /* CTAは横並び・自動幅に */
  .lp-cta { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .lp-cta .lp-btn { width: auto; }

  /* ヘッダーの資料請求ボタンを表示 */
  .site-header__cta.lp-btn--ghost { display: inline-flex; }

  /* オファーカードの余白を拡大 */
  .lp-offer { gap: 1rem; }
  .lp-offer__card { padding: 1.4rem 1rem 1.5rem; }

  /* オファー詳細（W特典カード）：タブレット以上で2カラムに */
  .lp-offer--detail { grid-template-columns: repeat(2, 1fr); }

  /* 「すべてコミコミ！」：タブレット以上は他チップと同様に自動幅へ */
  .lp-included__item--tag { flex: 0 1 auto; margin-top: 0; }

  /* 共感カード：タブレット以上は2列 */
  .lp-problems__list { grid-template-columns: repeat(2, 1fr); }

  /* 他社比較カード：タブレットは2列 */
  .lp-compare__cards { grid-template-columns: repeat(2, 1fr); }
}

/* --- PC（900px〜） --- */
@media (min-width: 900px) {
  :root { --lp-section: 5rem; }

  /* FV：本文＋画像の2カラム */
  .lp-hero { padding-block: 1.6rem 3.2rem; }
  .lp-hero__ribbon { margin-bottom: 1.2rem; }
  .lp-hero__grid { grid-template-columns: 1.05fr .95fr; align-items: center; gap: 2.4rem; }
  .lp-hero__bubble { font-size: 1.05rem; padding: .6em 1.2em; }

  /* h1にインパクトを：PCではモバイル/タブレットの頭打ちサイズ(3.2rem)より
     ひとまわり大きく固定表示（超ワイド画面ではさらに拡大） */
  .lp-hero__title { font-size: clamp(3.6rem, 3vw, 4.2rem); letter-spacing: 0; }

  /* 適用条件・対象外を2カラムに */
  .lp-terms { grid-template-columns: 1fr 1fr; }

  /* 他社比較カード：PCは3列（項目数が多いので少しゆとりを持たせる） */
  .lp-compare__cards { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }

  /* ヘッダー電話番号を表示 */
  .site-header__tel { display: block; }
}

/* --- スマホのみ：追従バー分の余白確保 & PCでは追従バー非表示 --- */
@media (min-width: 768px) {
  .lp-sticky { display: none; }         /* PC/タブレットでは追従CTAを隠す */
}
@media (max-width: 767.98px) {
  /* 追従バーとコンテンツの重なり防止（テーマのbodyに余白を付与） */
  body { padding-bottom: 58px; }
}