@charset "UTF-8";

/* ==========================================================================
 * 株式会社アーク AIO/LLMO サービスLP
 *
 * 構成
 *   1. 共通変数
 *   2. 全体の土台
 *   3. ヘッダー
 *   4. ボタン
 *   5. ファーストビュー
 *   6. フォーム
 *   7. シートと共通見出し
 *   8. 検索結果のスクリーンショットと注釈
 *   9. 大きな数字3つ
 *  10. 5社に1社
 *  11. 年表
 *  12. CTA帯
 *  13. 導入事例の棒グラフとKPI
 *  14. キーワードの3階層
 *  15. キーワード例のチップ
 *  16. キーワード例のカード
 *  17. 施策4項目
 *  18. 対応するAI媒体
 *  19. 表
 *  20. 料金プラン
 *  21. お問い合わせの2カラム
 *  22. 進め方の5ステップ
 *  23. 効きやすい会社
 *  24. 計測とご報告
 *  25. SEOも一緒に
 *  26. よくあるご質問
 *  27. 電話番号と会社概要
 *  28. フッター
 *  29. スマホ下部の固定CTAバー
 *  30. レスポンシブ（1000px / 860px / 620px の3段階）
 * ========================================================================== */


/* ==========================================================================
 * 1. 共通変数
 * ========================================================================== */
:root{
  /* ブランドカラー（青系）。色名ではなく役割で命名している */
  --brand:#2c6ee6; --brand-d:#1f52b0; --brand-l:#5d86d8;
  /* CTAボタンの黄色 */
  --cta:#ffcd55; --cta-d:#f5bd33;
  /* 濃色。見出しの文字色とヘッダー・フッターの背景に使う */
  --dark:#232f44;
  /* 本文の文字色（濃い順）。--ink-3 は注釈用。
     白背景でのコントラスト比 約5.0 を確保するためこの濃さにしている（WCAG AA） */
  --ink:#2d2d2d; --ink-2:#545961; --ink-3:#6b7079;
  /* 罫線と薄い背景 */
  --line:#e6e6e6; --gray:#f7f8fa; --gray-2:#fbfbfc;
  /* ブランドカラーの淡い面（バッジ・枠の内側） */
  --brand-tint:#e9f1fd; --brand-tint-line:#b9d0f5;
  /* コンテンツの最大幅 */
  --wrap:1080px;
}


/* ==========================================================================
 * 2. 全体の土台
 * ========================================================================== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* 背景のグラデーションは、白いシートの隙間とCTA帯にだけ見える下地。
   このページで1回しか使わない色なので変数化していない */
body{margin:0;color:var(--ink);
  background:linear-gradient(170deg,#a726dd 0%,#7a63d9 46%,#4c9ed7 100%);
  background-attachment:fixed;
  /* Noto Sans JP は index.html でWebフォントとして読み込んでいる。
     以降は読み込めなかった場合のフォールバック */
  font-family:"Noto Sans JP","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",メイリオ,Meiryo,sans-serif;
  line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;}
img{max-width:100%;display:block;}
/* 明朝体（見出し用） */
.mc{font-family:"Hiragino Mincho ProN","ヒラギノ明朝 ProN W3","Yu Mincho","YuMincho",serif;}
/* 数字を等幅で揃える */
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;}
/* 固定ヘッダーの高さ分、アンカー遷移先を下げる */
[id]{scroll-margin-top:118px;}
/* 画面に出さないロゴのスプライト定義用 */
.svg-sprite{position:absolute;}

/* キーボード操作時だけ出るフォーカス枠。マウスのクリックでは出ない */
.logo:focus-visible,
.nav-link:focus-visible,
.header-tel:focus-visible,
.btn:focus-visible,
.faq-q:focus-visible,
.telbox-num:focus-visible{outline:3px solid var(--brand-d);outline-offset:2px;}
/* 濃い背景の上では白い枠にする */
.cta-tel:focus-visible,
.sticky-cta a:focus-visible{outline:3px solid #fff;outline-offset:2px;}


/* ==========================================================================
 * 3. ヘッダー
 * ========================================================================== */
.site-header{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 2px 10px rgba(20,40,80,.1);}
.topbar{background:var(--dark);color:#cfd6e2;font-size:11.5px;}
.topbar .wrap{display:flex;gap:16px;padding-top:5px;padding-bottom:5px;flex-wrap:wrap;}
.header-inner{display:flex;align-items:center;gap:24px;height:70px;}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--dark);}
.logo-mk{width:44px;height:43px;color:var(--brand);flex:none;}
.logo-nm{font-size:17px;font-weight:800;letter-spacing:.06em;line-height:1.3;}
.nav{margin-left:auto;display:flex;gap:19px;align-items:center;}
.nav-link{color:var(--dark);text-decoration:none;font-size:13.5px;font-weight:600;}
.nav-link:hover{color:var(--brand);}
.header-tel{color:var(--dark);text-align:right;line-height:1.2;text-decoration:none;font-size:13.5px;font-weight:600;}
.header-tel small{display:block;font-size:9.5px;letter-spacing:.08em;color:var(--ink-3);}
.header-tel-num{font-size:19px;font-weight:900;color:var(--brand-d);}


/* ==========================================================================
 * 4. ボタン（丸型・黄色）
 * ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--cta);color:#2d2d2d;
  text-decoration:none;font-weight:800;padding:16px 38px;border-radius:999px;font-size:16.5px;border:none;cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transition:transform .14s,box-shadow .14s,background .14s;font-family:inherit;}
.btn:hover{background:var(--cta-d);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.22);}
.btn-sm{padding:11px 22px;font-size:13.5px;box-shadow:0 3px 10px rgba(0,0,0,.16);}
.btn-arrow{font-size:11px;opacity:.7;}


/* ==========================================================================
 * 5. ファーストビュー（背景写真は無加工のまま全面表示。覆いは一切かけない）
 * ========================================================================== */
.hero{padding:44px 0 30px;color:#fff;position:relative;overflow:hidden;
  background:#101a2e url("../img/hero-bg.webp") center/cover no-repeat;}
.hero .wrap{position:relative;}
.hero-grid{display:grid;grid-template-columns:1.2fr .95fr;gap:40px;align-items:start;}
/* タグラインはガラスと質感を分けるため、バッジ列と同じ濃紺のベタ塗りにする */
.tagline{display:inline-block;background:var(--dark);border-radius:999px;
  padding:7px 22px;font-size:13px;font-weight:700;margin-bottom:14px;}
/* 見出し・リード文を載せるすりガラスのタイル（写真の光を透かす）。
   brightness で下の写真だけを暗く見せ、色の膜を足さずに黒っぽいガラスにする */
.glass{background:rgba(9,16,34,.05);
  -webkit-backdrop-filter:blur(9px) saturate(1.15) brightness(.76);
  backdrop-filter:blur(9px) saturate(1.15) brightness(.76);
  border:1px solid rgba(255,255,255,.16);border-radius:18px;
  box-shadow:0 14px 34px rgba(4,9,22,.24);}
/* すりガラスが効かない環境では、板そのものを濃くして白文字の可読性を確保する
   （このフォールバックが無いと、背景写真の明るい部分で見出しが読めなくなる） */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(9,16,34,.55);}
}
/* タイルの内側余白と下マージンは、この2クラスだけで管理する
   （h1・p の既定マージンはここで上書きし切っている） */
.glass-title{padding:22px 28px 24px;margin:0 0 12px;}
.glass-lead{padding:20px 28px;margin:0 0 16px;}
/* 改行は本文の <br> で行う。折り返し禁止にすると幅1000〜1100px付近で
   枠外にはみ出す恐れがあるため、指定しない */
.hero-title{font-size:clamp(23px,3.05vw,35px);line-height:1.5;font-weight:700;letter-spacing:-.015em;}
.hero-lead{font-size:15.5px;color:#eaf0fb;line-height:1.9;}
.hero-title,.hero-lead{text-shadow:0 1px 3px rgba(4,9,22,.6);}
.hero-stat{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.28);
  border-radius:14px;padding:14px 20px 16px;margin-bottom:16px;}
.hero-stat-label{width:100%;font-size:12px;color:#dfe8fa;line-height:1.5;font-weight:700;margin-bottom:2px;}
.hero-stat-before{font-size:22px;font-weight:800;color:#c6d7f2;text-decoration:line-through;}
.hero-stat-arrow{font-size:20px;padding-bottom:4px;}
.hero-stat-after{font-size:44px;font-weight:900;line-height:1;}
.hero-stat-after small{font-size:16px;}
.hero-stat-badge{font-size:13px;font-weight:800;background:var(--dark);color:#fff;border-radius:999px;padding:3px 12px;margin-bottom:6px;}
.badges{display:flex;flex-wrap:wrap;gap:8px;}
.badge{background:var(--dark);border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:700;}
.badge b{font-size:14.5px;}
/* バッジ列の下に置く料金セクションへのボタン */
.hero-btn{margin-top:18px;}


/* ==========================================================================
 * 6. フォーム（ファーストビュー内とお問い合わせ内の2箇所で共用）
 * ========================================================================== */
.form-card{background:#fff;border-radius:18px;padding:24px 24px 22px;box-shadow:0 20px 46px rgba(0,0,0,.3);color:var(--ink);}
/* お問い合わせ内の2つめは、白いシートの上に置くため影を外して枠線にする */
.form-card-flat{box-shadow:none;border:1px solid var(--line);}
.form-card-title{margin:0 0 2px;font-size:20px;font-weight:800;color:var(--brand-d);text-align:center;}
.form-card-sub{text-align:center;font-size:12px;color:var(--ink-3);margin:0 0 14px;}
.field{margin-bottom:11px;}
.field label{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;font-weight:700;margin-bottom:5px;}
.badge-required{font-size:10.5px;color:#fff;background:var(--brand);border-radius:999px;padding:2px 11px;font-weight:800;}
.badge-optional{font-size:10.5px;color:var(--ink-3);border:1px solid var(--line);border-radius:999px;padding:2px 11px;font-weight:700;}
.field input,.field textarea{width:100%;border:1px solid #d9d9d9;border-radius:10px;padding:10px 13px;font-size:14.5px;font-family:inherit;background:var(--gray-2);color:var(--ink);}
.field input:focus,.field textarea:focus{outline:2px solid var(--brand-l);outline-offset:-1px;background:#fff;}
.form-card .btn{width:100%;padding:15px;font-size:16.5px;margin-top:6px;}
.form-note{font-size:11px;color:var(--ink-3);text-align:center;margin:9px 0 0;line-height:1.6;}


/* ==========================================================================
 * 7. 白いシート（各セクションの土台）と共通見出し
 * ========================================================================== */
.sheet{background:#fff;border-radius:22px;margin:26px auto;max-width:var(--wrap);padding:58px 54px;}
.sheet-gray{background:var(--gray);}
/* 英字のセクションラベル（WHAT CHANGED など） */
.sec-label{text-align:center;font-size:12.5px;letter-spacing:.28em;font-weight:800;color:var(--brand);margin-bottom:10px;}
.sec-title{text-align:center;font-size:34px;line-height:1.5;font-weight:700;margin:0 0 16px;letter-spacing:.03em;color:var(--dark);}
.sec-title em{font-style:normal;color:var(--brand);}
.sec-lead{text-align:center;font-size:15.5px;color:var(--ink-2);margin:0 auto 36px;max-width:40em;}
/* セクション内の中見出し（画面幅を問わず22px） */
.sub-title{margin:46px 0 12px;text-align:center;font-size:22px;font-weight:800;color:var(--dark);}
/* 出典・但し書き */
.source-note{font-size:11.5px;color:var(--ink-3);line-height:1.8;margin-top:14px;}
.source-note-center{text-align:center;}


/* ==========================================================================
 * 8. 検索結果のスクリーンショット
 *
 * 注意：赤枠・青枠・社名のぼかしといった注釈は画像側に焼き込んである。
 *       CSSで重ねている注釈はないため、差し替え時は比率の調整だけでよい。
 * ========================================================================== */
.pcshot{position:relative;max-width:900px;margin:0 auto;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 16px 38px rgba(0,0,0,.16);background:#fff;}
/* 画像の実寸は 1811×1506（比率83.16%）。クロップせず全体を表示している */
.pcshot-frame{position:relative;width:100%;padding-top:83.16%;overflow:hidden;}
.pcshot-frame img{position:absolute;top:0;left:0;width:100%;height:auto;}
.serp-caption{max-width:760px;margin:22px auto 0;font-size:14.5px;color:var(--ink-2);text-align:left;}
.serp-caption b{color:var(--brand-d);}


/* ==========================================================================
 * 9. 大きな数字3つ（検索行動の統計）
 * ========================================================================== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:30px;}
.stat{padding:26px 24px;border-right:1px solid var(--line);text-align:center;}
.stat:last-child{border-right:none;}
.stat-label{font-size:12.5px;color:var(--ink-2);font-weight:700;}
.stat-value{font-size:56px;font-weight:900;color:var(--brand);line-height:1.12;margin:4px 0;}
.stat-value small{font-size:19px;}
.stat-was{font-size:23px;color:var(--ink-3);text-decoration:line-through;font-weight:700;}
.stat-note{font-size:12px;color:var(--ink-3);}
.stats-conclusion{font-size:17px;font-weight:700;margin:26px 0 0;text-align:center;color:var(--dark);}


/* ==========================================================================
 * 10. 5社に1社（実施率）
 * ========================================================================== */
.ratio{background:#fff;border:1px solid var(--line);border-radius:18px;padding:34px 38px;
  display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;}
.ratio-figs{display:flex;gap:12px;}
.ratio-figs svg{width:56px;height:auto;flex:none;}
.ratio-value{font-size:56px;font-weight:900;color:var(--brand);line-height:1.1;letter-spacing:-.02em;}
.ratio-value small{font-size:22px;}
.ratio-caption{font-size:17px;font-weight:800;color:var(--dark);margin-top:2px;}
.ratio-rest{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2);}
.ratio-rest b{color:var(--dark);font-size:22px;font-weight:900;}


/* ==========================================================================
 * 11. 年表
 * ========================================================================== */
.timeline{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:26px;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;}
.timeline-item{padding:22px 22px 20px;border-right:1px solid var(--line);position:relative;}
/* 最後の1つは右の区切り線だけ消す */
.timeline-item:last-child{border-right:none;}
.timeline-year{font-size:13px;font-weight:800;color:var(--brand);letter-spacing:.04em;}
.timeline-title{font-size:17px;font-weight:800;margin:4px 0 6px;color:var(--dark);}
.timeline-item p{margin:0;font-size:13px;color:var(--ink-2);}


/* ==========================================================================
 * 12. CTA帯（背景のグラデーションが透ける部分）
 * ========================================================================== */
.cta{padding:50px 0 54px;text-align:center;color:#fff;}
.cta-text{font-size:21px;font-weight:700;margin:0 0 22px;letter-spacing:.03em;}
.cta-tel{display:block;margin-top:16px;color:#e2ecfa;font-size:13px;text-decoration:none;}
.cta-tel-num{font-size:20px;font-weight:700;color:#fff;}


/* ==========================================================================
 * 13. 導入事例の棒グラフとKPI
 * ========================================================================== */
.chart-figure{margin:0;}
/* 縦軸が何の数値かを示す説明。狭い画面では横軸ラベルが斜めに回るため、
   ぶつからないようグラフの上に置いている */
.chart-caption{font-size:12.5px;font-weight:700;color:var(--ink-2);text-align:center;margin-bottom:14px;}
.chart{display:flex;align-items:flex-end;gap:8px;height:230px;}
.chart-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;}
.chart-value{font-size:11.5px;font-weight:800;margin-bottom:5px;}
.chart-bar{width:100%;background:#dcdcdc;border-radius:6px 6px 0 0;}
.chart-col-up .chart-bar{background:#7fa8e8;}
.chart-col-last .chart-bar{background:var(--brand);}
.chart-col-last .chart-value{color:var(--brand);font-size:15px;}
.chart-label{font-size:10px;color:var(--ink-3);margin-top:7px;white-space:nowrap;}
.case-note{max-width:780px;margin:34px auto 0;text-align:center;font-size:16.5px;font-weight:700;color:var(--dark);line-height:1.9;}
.case-note b{color:var(--brand);}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:30px;}
.kpi{border:1px solid var(--line);border-radius:16px;padding:22px;background:var(--gray-2);text-align:center;}
.kpi-label{font-size:12px;color:var(--ink-2);font-weight:700;margin-bottom:8px;}
.kpi-row{display:flex;align-items:baseline;justify-content:center;gap:7px;}
.kpi-before{font-size:19px;color:var(--ink-3);font-weight:700;}
.kpi-after{font-size:34px;font-weight:900;color:var(--brand);}
.kpi-unit{font-size:11.5px;color:var(--ink-2);}


/* ==========================================================================
 * 14. キーワードの3階層（同心円図と一覧）
 * ========================================================================== */
.target{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:center;}
.target svg{width:430px;height:auto;}
.tier-list{display:grid;gap:14px;}
.tier{border-bottom:1px solid var(--line);padding-bottom:14px;}
.tier:last-child{border-bottom:none;}
.tier-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin:0;font-size:16.5px;font-weight:800;color:var(--dark);}
.tier-rate{font-size:12px;font-weight:800;color:var(--brand-d);background:var(--brand-tint);border-radius:999px;padding:3px 12px;}
.tier-dot{width:13px;height:13px;border-radius:50%;flex:none;}
/* 同心円図の内側から外側に対応する3色 */
.tier-dot-core{background:#1f52b0;}
.tier-dot-spec{background:#7fa8e8;}
.tier-dot-ai{background:#eef4fe;border:1px solid var(--brand-tint-line);}
.tier p{margin:4px 0 0 23px;font-size:13.5px;color:var(--ink-2);}


/* ==========================================================================
 * 15. キーワード例のチップ
 * ========================================================================== */
.kw-example{background:var(--gray-2);border:1px solid var(--line);border-radius:16px;padding:24px 26px;margin-top:30px;}
.kw-row{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:12px;}
.kw-row-label{font-size:11.5px;font-weight:800;color:var(--ink-3);width:96px;flex:none;}
.chip{border:1px solid var(--line);border-radius:999px;padding:5px 14px;font-size:13px;background:#fff;color:var(--ink-2);}
.chip-core{background:var(--brand);color:#fff;border-color:var(--brand);font-weight:800;}
.chip-spec{background:var(--brand-tint);border-color:var(--brand-tint-line);color:var(--brand-d);font-weight:800;}
.kw-plus{color:var(--ink-3);}
.kw-goal{font-size:13px;color:var(--ink-2);margin-left:6px;}
.kw-note{margin-top:14px;padding:14px 18px;background:#fff;border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--ink-2);}
.kw-note b{color:var(--brand-d);}


/* ==========================================================================
 * 16. キーワード例のカード
 * ========================================================================== */
.kw-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;}
.kw-card{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:#fff;}
.kw-card-industry{display:inline-block;font-size:11px;font-weight:800;color:#fff;background:var(--brand);border-radius:999px;padding:2px 11px;margin-bottom:6px;}
.kw-card-word{display:block;font-size:16px;font-weight:800;color:var(--dark);}
.kw-card-volume{display:block;font-size:12px;color:var(--ink-3);margin-top:2px;}


/* ==========================================================================
 * 17. 施策4項目
 * ========================================================================== */
.works{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:26px;}
.work svg{width:50px;height:50px;margin:0 0 12px;}
.work-title{margin:0 0 6px;font-size:15.5px;font-weight:800;color:var(--dark);}
.work p{margin:0;font-size:13px;color:var(--ink-2);}


/* ==========================================================================
 * 18. 対応するAI媒体
 * ========================================================================== */
.media{display:flex;gap:16px;flex-wrap:wrap;}
.media-card{flex:1;min-width:260px;border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:#fff;}
.media-card-name{margin:0;font-size:18px;font-weight:800;color:var(--dark);}
.media-card-badge{font-size:10.5px;font-weight:800;color:#fff;background:var(--brand);border-radius:999px;padding:2px 11px;margin-left:8px;vertical-align:2px;}
.media-card p{margin:8px 0 0;font-size:13px;color:var(--ink-2);}


/* ==========================================================================
 * 19. 表（料金表・会社概要）
 * ========================================================================== */
.table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;}
.table th,.table td{border:1px solid var(--line);padding:13px 15px;text-align:left;}
.table thead th{background:var(--dark);color:#fff;font-size:13px;font-weight:700;}
.table tbody th{background:var(--gray);font-size:13.5px;color:var(--dark);}
/* 上位の順位帯（単価が高い側）を強調する */
.table-hi{background:var(--brand-tint);color:var(--brand-d);font-weight:800;}
/* セル既定の左寄せを上書きするため .table と組で指定している */
.table .table-center{text-align:center;}
/* 狭い画面では表を横スクロールさせる */
.table-scroll{overflow-x:auto;margin-top:22px;}
.table-scroll .table{min-width:620px;}


/* ==========================================================================
 * 20. 料金プラン
 * ========================================================================== */
.plan{border:2px solid var(--line);border-radius:20px;padding:34px 36px;background:#fff;}
.plan-main{border-color:var(--brand);position:relative;}
.plan-tag{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:var(--brand);color:#fff;font-size:12px;font-weight:800;border-radius:999px;padding:5px 22px;white-space:nowrap;}
.plan-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:start;}
.plan-title{margin:0 0 6px;font-size:18px;font-weight:800;color:var(--dark);}
.plan-price{font-size:30px;font-weight:900;color:var(--brand);margin:8px 0 2px;line-height:1.25;}
.plan-price small{font-size:13px;font-weight:700;}
.plan-price-note{font-size:12px;color:var(--ink-3);margin:0 0 10px;}
.plan-desc{margin:0;font-size:13px;color:var(--ink-2);}
.plan-desc + .plan-desc{margin-top:10px;}


/* ==========================================================================
 * 21. お問い合わせの2カラム
 * ========================================================================== */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;}


/* ==========================================================================
 * 22. 進め方の5ステップ
 * ========================================================================== */
.flow{display:grid;grid-template-columns:repeat(5,1fr);margin-top:30px;}
.step{padding:0 14px;position:relative;}
/* ステップ間をつなぐ矢羽根 */
.step:after{content:"";position:absolute;right:-9px;top:16px;width:16px;height:16px;border-top:2px solid #c6d8f5;border-right:2px solid #c6d8f5;transform:rotate(45deg);}
.step:last-child:after{display:none;}
.step-num{width:42px;height:42px;border-radius:50%;background:var(--brand);color:#fff;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;}
.step-title{margin:0 0 5px;font-size:15px;font-weight:800;text-align:center;color:var(--dark);}
.step p{margin:0;font-size:12.5px;color:var(--ink-2);}
.step-tag{display:block;width:fit-content;margin:0 auto 6px;font-size:11px;font-weight:800;color:var(--brand-d);background:var(--brand-tint);border-radius:999px;padding:1px 11px;}
/* 「無料」表示がないステップでも高さを揃えるための見えないダミー */
.step-tag-ph{visibility:hidden;}


/* ==========================================================================
 * 23. 効きやすい会社
 * ========================================================================== */
.fit{border:1px solid var(--line);border-radius:16px;padding:26px 30px;background:#fff;margin-top:44px;}
.fit-title{margin:0 0 10px;font-size:16.5px;font-weight:800;color:var(--dark);}
.fit-list{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 20px;}
.fit-list li{font-size:14px;color:var(--ink-2);padding:6px 0 6px 20px;position:relative;}
.fit-list li:before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:2px;background:var(--brand);}
.industries{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;}
.industry{border:1.5px solid var(--brand);color:var(--brand-d);border-radius:999px;padding:4px 15px;font-size:13px;font-weight:800;}


/* ==========================================================================
 * 24. 計測とご報告
 * ========================================================================== */
.strip{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;}
.strip-col{padding:24px 26px;background:#fff;}
/* 2つめの列は淡い背景にして、箇条書きの点も灰色にする */
.strip-col-sub{border-left:1px solid var(--line);background:var(--gray-2);}
.strip-title{margin:0 0 10px;font-size:15.5px;font-weight:800;color:var(--dark);}
.strip-col ul{margin:0;padding:0;list-style:none;}
.strip-col li{font-size:13.5px;color:var(--ink-2);padding:6px 0 6px 20px;position:relative;}
.strip-col li:before{content:"";position:absolute;left:0;top:14px;width:8px;height:8px;border-radius:2px;background:var(--brand);}
.strip-col-sub li:before{background:#b6b6b6;}


/* ==========================================================================
 * 25. SEOも一緒に
 * ========================================================================== */
.seobox{background:linear-gradient(140deg,#f3f8ff,#fff);border:1px solid #cfdff9;border-radius:18px;padding:30px 34px;margin-top:8px;}
.seobox-title{font-size:20px;font-weight:800;color:var(--dark);margin:0 0 8px;}
.seobox-title em{font-style:normal;color:var(--brand);}
.seobox-text{margin:0 0 16px;font-size:14.5px;color:var(--ink-2);}
.seo-list{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.seo-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;font-size:13.5px;color:var(--ink-2);}
.seo-item-title{display:block;color:var(--dark);font-size:14.5px;font-weight:700;margin-bottom:4px;}


/* ==========================================================================
 * 26. よくあるご質問
 * ========================================================================== */
.faq-list{max-width:800px;margin:26px auto 0;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item:first-of-type{border-top:1px solid var(--line);}
.faq-q{list-style:none;cursor:pointer;padding:19px 42px 19px 34px;position:relative;font-size:16px;font-weight:800;color:var(--dark);}
.faq-q::-webkit-details-marker{display:none;}
.faq-q:before{content:"Q";position:absolute;left:4px;top:19px;color:var(--brand);font-weight:900;}
/* 右端の下向き矢印。開くと上向きになる */
.faq-q:after{content:"";position:absolute;right:12px;top:28px;width:9px;height:9px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform .2s;}
.faq-item[open] .faq-q:after{transform:rotate(-135deg);}
.faq-a{padding:0 18px 20px 34px;font-size:14px;color:var(--ink-2);}
/* 回答が複数の段落に分かれる場合の行間。最後の段落は下の余白を二重に取らない */
.faq-a p{margin:0 0 .9em;}
.faq-a p:last-child{margin-bottom:0;}


/* ==========================================================================
 * 27. 電話番号と会社概要
 * ========================================================================== */
.telbox{background:linear-gradient(140deg,#f3f8ff,#fff);border:1px solid #cfdff9;border-radius:16px;padding:20px 24px;margin-bottom:18px;text-align:center;}
.telbox-label{font-size:12.5px;font-weight:800;color:var(--ink-2);letter-spacing:.06em;}
.telbox-num{display:block;font-size:33px;font-weight:900;color:var(--brand-d);text-decoration:none;line-height:1.35;letter-spacing:.01em;}
.telbox-note{font-size:12px;color:var(--ink-3);line-height:1.7;margin-top:2px;}
.company-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.company-table th,.company-table td{border:1px solid var(--line);padding:12px 15px;text-align:left;vertical-align:top;background:#fff;}
.company-table th{background:var(--gray);width:140px;font-weight:800;font-size:12.5px;color:var(--dark);}


/* ==========================================================================
 * 28. フッター
 * 下方向の余白は、スマホの固定CTAバーに隠れないための逃げ。
 * バーが出る860px以下でのみ付ける（PCでは不要な空白になるため）
 * ========================================================================== */
.site-footer{background:var(--dark);color:#a9b2c1;padding:44px 0;font-size:13px;}
.footer-inner{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start;}
.footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.footer-logo{width:42px;height:41px;color:#fff;flex:none;}
.footer-name{color:#fff;font-weight:800;font-size:17px;letter-spacing:.06em;}
.footer-address{margin-top:6px;}
.footer-copy{width:100%;border-top:1px solid #3a465c;margin-top:26px;padding-top:16px;font-size:11.5px;color:#8794a6;line-height:1.9;}


/* ==========================================================================
 * 29. スマホ下部の固定CTAバー（860px以下でのみ表示）
 * ========================================================================== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(35,47,68,.97);padding:10px 14px;display:none;gap:10px;}
.sticky-cta a{flex:1;text-align:center;border-radius:999px;padding:14px 8px;font-weight:800;font-size:14.5px;text-decoration:none;}
.sticky-btn-main{background:var(--cta);color:#2d2d2d;}
.sticky-btn-sub{background:#fff;color:var(--dark);}


/* ==========================================================================
 * 30. レスポンシブ
 *
 * ブレークポイントは3段階のみ。
 *   1000px … タブレット。ヘッダーのメニューを畳み、横2カラムを縦積みにする
 *    860px … 小型タブレット・横向きスマホ。3カラムを縦積みにし、固定CTAバーを出す
 *    620px … スマホ。カード類を1カラムにし、文字サイズをさらに詰める
 * ========================================================================== */

/* --- 1000px以下 ---------------------------------------------------------- */
@media(max-width:1000px){
  /* ヘッダー */
  .nav-link{display:none;}
  .header-tel{display:none;}
  .topbar{font-size:10.5px;}
  .topbar-sub{display:none;}

  /* ファーストビュー */
  .hero{padding:32px 0 30px;background-position:64% center;}
  .hero-grid{grid-template-columns:1fr;gap:26px;}
  .hero-title{font-size:26px;line-height:1.55;}
  .hero-stat-after{font-size:36px;}
  .glass{border-radius:14px;}
  .glass-title{padding:18px 18px 20px;}
  .glass-lead{padding:16px 18px;}

  /* シートと見出し */
  .sheet{padding:36px 20px;margin:16px 12px;border-radius:16px;}
  .sec-title{font-size:23px;}

  /* 検索結果のスクリーンショット */
  .serp-caption{font-size:13.5px;}

  /* 5社に1社 */
  .ratio{grid-template-columns:1fr;gap:22px;padding:26px 22px;}
  .ratio-figs{justify-content:center;gap:8px;}
  .ratio-figs svg{width:44px;}
  .ratio-txt{text-align:center;}
  .ratio-value{font-size:46px;}

  /* キーワードの3階層 */
  .target{grid-template-columns:1fr;gap:24px;}
  .target svg{width:100%;max-width:400px;margin:0 auto;}

  /* 進め方の5ステップ（番号を左に置いた縦並びへ） */
  .flow{grid-template-columns:1fr;gap:24px;}
  .step{padding:0 0 0 58px;}
  .step:after{display:none;}
  .step-num{position:absolute;left:0;top:0;margin:0;}
  .step-title{text-align:left;}
  .step-tag{margin:0 0 6px;}
  .step-tag-ph{display:none;}
}

/* --- 860px以下 ----------------------------------------------------------- */
@media(max-width:860px){
  /* 大きな数字3つ */
  .stats{grid-template-columns:1fr;}
  .stat{border-right:none;border-bottom:1px solid var(--line);}
  .stat-value{font-size:42px;}

  /* 年表 */
  .timeline{grid-template-columns:1fr;}
  .timeline-item{border-right:none;border-bottom:1px solid var(--line);}

  /* CTA帯 */
  .cta-text{font-size:17px;}

  /* 棒グラフとKPI（横軸ラベルは斜めにして重なりを避ける） */
  .chart{height:170px;gap:4px;}
  .chart-value{font-size:9.5px;}
  .chart-label{font-size:9px;transform:rotate(-58deg);margin-top:13px;}
  .kpis{grid-template-columns:1fr;}

  /* キーワード例 */
  .kw-row-label{width:100%;}
  .kw-cards{grid-template-columns:1fr 1fr;}

  /* 施策4項目 */
  .works{grid-template-columns:1fr 1fr;gap:24px;}

  /* 料金・お問い合わせ */
  .plan-grid{grid-template-columns:1fr;gap:16px;}
  .offer{grid-template-columns:1fr;gap:22px;}

  /* 効きやすい会社・計測とご報告・SEO */
  .fit-list{grid-template-columns:1fr;}
  .strip{grid-template-columns:1fr;}
  .strip-col-sub{border-left:none;border-top:1px solid var(--line);}
  .seobox{padding:24px 20px;}
  .seo-list{grid-template-columns:1fr;}

  /* 電話番号 */
  .telbox-num{font-size:29px;}

  /* スマホ下部の固定CTAバーを出し、その分フッターの下に逃げを作る */
  .sticky-cta{display:flex;}
  .site-footer{padding-bottom:96px;}
}

/* --- 620px以下 ----------------------------------------------------------- */
@media(max-width:620px){
  .hero-title{font-size:21px;}

  /* 5社に1社のビルアイコン */
  .ratio-figs svg{width:36px;}

  /* キーワード例のカード */
  .kw-cards{grid-template-columns:1fr;}

  /* 施策4項目（アイコンを左に置いた1カラムへ） */
  .works{grid-template-columns:1fr;gap:22px;}
  .work{position:relative;padding-left:58px;min-height:44px;}
  .work svg{position:absolute;left:0;top:0;width:44px;height:44px;margin:0;}
  .work-title{margin:6px 0 4px;}
}


/* ==========================================================================
 * 31. 動きを減らす設定への対応
 * OS側で「視差効果を減らす／アニメーションをオフ」にしている閲覧者には、
 * スクロールの滑走・ボタンの浮き上がり・矢印の回転を止める
 * ========================================================================== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .btn{transition:none;}
  .btn:hover{transform:none;}
  .faq-q:after{transition:none;}
}