@charset "utf-8";
/* ==========================================================================
   開業ワンストップITパック LP（デザイン案B）
   色・書体・余白は :root の変数だけで差し替えられるようにしてある。
   スマートフォン幅（390px）を基準に組み、900px 以上で2〜3列に広げる。
   ★ 子テーマの assets/css/kp.css は、このファイルの内容 ＋ Contact Form 7 用の追記。
     片方だけ直すと見た目がずれるので、両方を同時に直すこと。
   ========================================================================== */

/* ==========================================================================
   変数
   ========================================================================== */
:root{
  /* 文字 */
  --kp-ink:#13233A;          /* 見出し・強い文字 */
  --kp-text:#3A4960;         /* 本文 */
  --kp-muted:#56637A;        /* 補助（白地 6.07:1 / 淡灰地 5.55:1） */
  /* 地・罫 */
  --kp-bg:#FFFFFF;
  --kp-bg-alt:#F3F5F8;
  --kp-border:#DCE2EA;
  --kp-border-soft:#E6EAF0;
  --kp-input-border:#8A96A8; /* 入力欄の枠（白地 3.0:1。UI の境界は 3:1 以上） */
  /* アクセント・CTA */
  --kp-accent:#1B55B8;       /* 白地 6.91:1 */
  --kp-accent-dark:#143F8A;
  --kp-accent-pale:#E8EFFB;
  --kp-cta:#B8480F;          /* 白文字 5.29:1 */
  --kp-cta-dark:#9A3C0C;
  --kp-rail:#AEB8C6;         /* 流れ図の「済んだ段」の点 */
  /* 暗い帯 */
  --kp-dark:#13233A;
  --kp-dark-sub:#C9D3E0;     /* 暗い帯の補助文字 10.44:1 */
  /* エラー */
  --kp-error:#B42318;        /* 白地 6.57:1 */
  --kp-error-pale:#FEF3F2;
  /* 書体 */
  --kp-font-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  /* 本文は Web フォントを読まず端末の日本語フォントを使う（表示を止めない・通信量を減らす。2026-09-28） */
  --kp-font-body:system-ui,-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",Meiryo,sans-serif;
  /* 形・寸法 */
  --kp-radius-s:10px;
  --kp-radius:14px;
  --kp-radius-l:16px;
  --kp-wrap:1080px;
  --kp-gutter:20px;
  --kp-sec-pad:40px;
  --kp-hdr-h:56px;
  --kp-bar-h:64px;
}

/* ==========================================================================
   基本
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kp-hdr-h) + 8px);-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--kp-font-body);
  font-weight:400;font-size:15px;line-height:1.8;
  color:var(--kp-ink);background:var(--kp-bg);
  /* ★ "palt"（約物詰め）は使わない。Web フォントには効かず代替フォント（ヒラギノ等）にだけ効くため、
     フォントの読み込み前後で行の折り返しが変わり、FV が大きくずれる（CLS）。 */
}
img{max-width:100%;height:auto;display:block}
svg{flex-shrink:0}
a{color:var(--kp-accent)}
a:hover{color:var(--kp-accent-dark)}
/* 見出しは文節で折り返す（対応ブラウザのみ。非対応でも通常の折り返しになるだけ） */
h1,h2,h3{margin:0;line-height:1.45;font-weight:700;word-break:auto-phrase}
p{text-wrap:pretty}
p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
b,strong{font-weight:700}

/* フォーカスは必ず見えるようにする（マウス操作では出さない） */
:focus-visible{outline:3px solid var(--kp-accent);outline-offset:2px}

/* 数字・価格は桁をそろえる */
.plan__price,.cmp,.way__main,.opt__list{font-variant-numeric:tabular-nums}

/* 句の途中で折り返さない（見出しの区切り用） */
.u-ib{display:inline-block}

/* ==========================================================================
   レイアウト
   ========================================================================== */
.wrap{width:min(100% - var(--kp-gutter) * 2,var(--kp-wrap));margin-inline:auto}
.wrap--narrow{width:min(100% - var(--kp-gutter) * 2,720px)}
.sec{padding:var(--kp-sec-pad) 0}
.sec--alt{background:var(--kp-bg-alt)}
.sec__h2{font-family:var(--kp-font-head);font-size:22px;font-weight:900;line-height:1.45;color:var(--kp-ink)}
.sec__lead{margin-top:8px;font-size:13px;color:var(--kp-muted)}
.sec__body{margin-top:16px}

/* ==========================================================================
   ボタン
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:44px;padding:0 24px;border:0;border-radius:999px;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.4;
  text-decoration:none;cursor:pointer;
}
.btn--cta{background:var(--kp-cta);color:#fff}
.btn--cta:hover{color:#fff}
.btn--lg{min-height:56px;padding:0 32px;font-size:17px}
.btn--block{display:flex;width:100%}

/* ==========================================================================
   追従ヘッダー
   ========================================================================== */
.hdr{position:sticky;top:0;z-index:50;background:rgba(243,245,248,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hdr__in{width:min(100% - 32px,var(--kp-wrap));margin-inline:auto;height:var(--kp-hdr-h);display:flex;align-items:center;justify-content:space-between;gap:12px}
.hdr__logo{display:flex;align-items:baseline;gap:4px;font-family:var(--kp-font-head);font-size:22px;font-weight:900;letter-spacing:.04em;line-height:1;color:var(--kp-ink);text-decoration:none}
.hdr__logo:hover{color:var(--kp-ink)}
.hdr__logo span{font-size:11px;font-weight:700;letter-spacing:0;color:var(--kp-muted)}
.hdr__logo img{display:block;height:40px;max-height:40px;width:auto} /* ai-wp の LP とロゴの大きさをそろえる（高さ 40px） */
.hdr__cta{padding:0 16px;font-size:13px}
/* ヘッダーの電話番号はパソコン幅だけ出す（スマートフォンは画面下の固定バーに電話があるため二重になる） */
.hdr__tel{display:none}

/* ==========================================================================
   FV（ファーストビュー）
   ========================================================================== */
.fv{background:var(--kp-bg-alt);padding:8px 0 28px}
.fv__in{display:grid;gap:14px}
.fv__copy{display:grid;gap:14px}
.fv__label{font-size:12px;font-weight:700;letter-spacing:.08em;line-height:1.6;color:var(--kp-accent)}
.fv__h1{font-family:var(--kp-font-head);font-size:26px;font-weight:900;line-height:1.4;color:var(--kp-ink)}
.fv__sub{font-size:14px;line-height:1.75;color:var(--kp-text)}
.fv__act{display:grid;gap:10px}
.fv__note{font-size:12px;text-align:center;color:var(--kp-muted)}

/* FV の流れ図（物件契約 → ここでご相談 → 内装と並行 → 開業日）
   ========================================================================== */
.fvflow{padding:16px;background:#fff;border:1px solid var(--kp-border);border-radius:var(--kp-radius-l)}
.fvflow__step{display:flex;gap:12px;align-items:stretch}
.fvflow__rail{display:flex;flex-direction:column;align-items:center;width:24px;flex-shrink:0}
.fvflow__dot{width:12px;height:12px;margin-top:6px;border-radius:50%;background:var(--kp-accent)}
.fvflow__step--done .fvflow__dot{background:var(--kp-rail)}
.fvflow__step--best .fvflow__dot{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:8px;color:#fff}
.fvflow__line{flex-grow:1;width:2px;margin-top:4px;background:var(--kp-border)}
.fvflow__body{flex-grow:1;padding-bottom:14px}
.fvflow__step:last-child .fvflow__body{padding-bottom:0}
.fvflow__t{font-size:14px;font-weight:700;line-height:1.6;color:var(--kp-ink)}
.fvflow__step--done .fvflow__t{color:var(--kp-muted)}
.fvflow__d{margin-top:2px;font-size:12px;line-height:1.65;color:var(--kp-muted)}
.fvflow__step--best .fvflow__body{margin-bottom:14px;padding:10px 12px;border-radius:var(--kp-radius-s);background:var(--kp-accent-pale)}
.fvflow__step--best .fvflow__t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:15px}
.fvflow__step--best .fvflow__d{margin-top:4px;font-size:13px;color:var(--kp-text)}
.fvflow__tag{padding:2px 8px;border-radius:10px;background:var(--kp-accent);color:#fff;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}

/* FV 直下の施工写真
   ========================================================================== */
.fv-shot{position:relative;margin:0}
.fv-shot img{width:100%;height:220px;object-fit:cover;object-position:50% 40%}
.fv-shot__badge{
  position:absolute;left:16px;bottom:14px;right:16px;width:fit-content;
  display:flex;align-items:center;gap:6px;padding:6px 12px 6px 10px;border-radius:20px;
  background:#fff;color:var(--kp-ink);font-size:12px;font-weight:700;line-height:1.5;
}
.fv-shot__badge svg{color:var(--kp-accent)}

/* ==========================================================================
   お悩み
   ========================================================================== */
.problems{display:grid;gap:10px;margin-top:16px}
.problem{display:flex;gap:14px;padding:16px;border-radius:var(--kp-radius);background:var(--kp-bg-alt)}
.problem svg,.svc svg{color:var(--kp-accent)}
.problem__h3{font-size:15px;line-height:1.5;color:var(--kp-ink)}
.problem__quote{margin-top:6px;font-size:13px;line-height:1.7;color:var(--kp-text)}

/* ==========================================================================
   対応範囲（6項目）
   ========================================================================== */
.svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px}
.svc{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:var(--kp-radius);background:#fff}
.svc__h3{font-size:14px;line-height:1.5;color:var(--kp-ink)}
.svc__t{font-size:12px;line-height:1.7;color:var(--kp-text)}

/* ==========================================================================
   選ばれる3つの理由
   ========================================================================== */
.points{display:grid;gap:14px;margin-top:18px}
.pt{padding:18px;border:1px solid var(--kp-border);border-radius:var(--kp-radius);background:#fff}
.pt__no{font-family:var(--kp-font-head);font-size:13px;font-weight:900;letter-spacing:.1em;line-height:1.4;color:var(--kp-accent)}
.pt__no b{font-weight:900}
.pt__h3{margin-top:6px;font-size:16px;line-height:1.5;color:var(--kp-ink)}
.pt__t{margin-top:8px;font-size:13px;line-height:1.8;color:var(--kp-text)}

/* ==========================================================================
   料金
   ========================================================================== */
.plans{display:grid;gap:14px;margin-top:18px;align-items:start}
.plan{display:flex;flex-direction:column;gap:10px;padding:20px;border:1px solid var(--kp-border);border-radius:var(--kp-radius-l);background:#fff}
.plan--feature{border:2px solid var(--kp-accent)}
.plan__badge{align-self:flex-start;padding:4px 10px;border-radius:12px;background:var(--kp-accent);color:#fff;font-size:12px;font-weight:700;line-height:1.5}
.plan__name{font-size:18px;line-height:1.45;color:var(--kp-ink)}
.plan__tag{font-size:13px;line-height:1.6;color:var(--kp-muted)}
.plan__feat{display:grid;gap:6px;font-size:13px;line-height:1.6;color:var(--kp-ink)}
.plan__feat li{position:relative;padding-left:24px}
/* チェックの線画（色は currentColor ではなくアクセント色で塗る） */
.plan__feat li::before{
  content:"";position:absolute;left:0;top:3px;width:16px;height:16px;background:var(--kp-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/contain no-repeat;
}
.plan__price{display:grid;gap:6px;padding-top:10px;border-top:1px solid var(--kp-border-soft);font-size:13px;line-height:1.6;color:var(--kp-ink)}
.plan__price b{font-size:20px;white-space:nowrap}
/* 料金の1行は「項目名／金額／補足」に分け、改行は要素の境目でしか起きないようにする（半端な位置で折り返さない） */
.plan__price li{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:2px}
.plan__plabel{font-size:12px;color:var(--kp-muted);white-space:nowrap}
.plan__pnote{flex-basis:100%;padding-left:2em;text-indent:-1em;font-size:12px;line-height:1.5;color:var(--kp-muted)}
.plan__pnote::before{content:"※"}
.plan__inc{padding:10px 12px;border-radius:var(--kp-radius-s);background:var(--kp-bg-alt);font-size:12px;line-height:1.7;color:var(--kp-text)}
.plan--feature .plan__inc{background:var(--kp-accent-pale)}

/* 追加オプション・注記 */
.opt{margin-top:14px;padding:18px 20px;border-radius:var(--kp-radius-l);background:#fff}
.opt__h3{font-size:15px;line-height:1.5;color:var(--kp-ink)}
.opt__list{display:grid;margin-top:8px;font-size:13px;line-height:1.9;color:var(--kp-ink)}
.notes{display:grid;gap:2px;margin-top:14px}
.notes li{font-size:12px;line-height:1.8;color:var(--kp-muted)}

/* ==========================================================================
   比較表（スマートフォンでも表のまま3列。横スクロールさせない）
   ========================================================================== */
.cmp{width:100%;margin-top:18px;border-collapse:separate;border-spacing:0;font-size:12px;line-height:1.6}
.cmp th,.cmp td{padding:12px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--kp-border-soft)}
.cmp thead th{padding:10px 8px;font-size:11px;font-weight:700;color:var(--kp-muted);border-bottom-color:var(--kp-border)}
.cmp thead th:first-child{width:26%;padding-left:6px}
.cmp thead th:nth-child(2){width:37%}
.cmp thead th.cmp__us{background:var(--kp-accent);color:#fff;font-size:12px;border-radius:10px 10px 0 0;border-bottom:0}
.cmp tbody th{padding-left:6px;font-weight:700;color:var(--kp-ink)}
.cmp tbody td{color:var(--kp-text)}
.cmp tbody td.cmp__us{background:var(--kp-accent-pale);font-weight:700;color:var(--kp-ink);border-bottom-color:#fff}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}
.cmp tbody tr:last-child td.cmp__us{border-radius:0 0 10px 10px}
.cmp__src{margin-top:8px;font-size:11px;line-height:1.6;color:var(--kp-muted)}
.cmp__note{margin-top:20px;font-size:13px;line-height:1.8;color:var(--kp-text)}

/* ==========================================================================
   施工事例
   ========================================================================== */
.works{display:grid;gap:14px;margin-top:18px}
.work{margin:0;border:1px solid var(--kp-border);border-radius:var(--kp-radius);overflow:hidden;background:#fff}
.work img{width:100%;height:230px;object-fit:cover;object-position:50% 30%}
.work figcaption{padding:14px 16px;font-size:13px;line-height:1.75;color:var(--kp-text)}
.work figcaption b{display:block;margin-bottom:2px;font-size:14px;color:var(--kp-ink)}

/* ==========================================================================
   よくあるご質問（details/summary。JS 不要）
   ========================================================================== */
.faq{display:grid;gap:10px;margin-top:16px}
.faq details{padding:0 16px;border-radius:12px;background:#fff}
.faq summary{
  position:relative;padding:16px 28px 16px 0;list-style:none;cursor:pointer;
  font-size:14px;font-weight:700;line-height:1.6;color:var(--kp-ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:4px;top:22px;width:8px;height:8px;
  border-right:2px solid var(--kp-muted);border-bottom:2px solid var(--kp-muted);transform:rotate(45deg);
}
.faq details[open] summary::after{top:26px;transform:rotate(-135deg)}
.faq details p{margin-bottom:16px;font-size:13px;line-height:1.8;color:var(--kp-text)}
.faq details p + p{margin-top:-8px}

/* ==========================================================================
   問い合わせ（紺の CTA 帯 ＋ 白地のフォーム）
   ========================================================================== */
.cta-band{padding:44px 0 40px;background:var(--kp-dark);color:#fff}
.cta-band :focus-visible{outline-color:#fff}
.cta-band__h2{font-family:var(--kp-font-head);font-size:24px;font-weight:900;line-height:1.45}
.cta-band__lead{margin-top:10px;font-size:13px;line-height:1.7;color:var(--kp-dark-sub)}
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:18px}
.way{
  display:flex;flex-direction:column;gap:2px;min-height:72px;padding:12px;
  border-radius:12px;background:#fff;color:var(--kp-ink);text-decoration:none;line-height:1.5;
}
.way:hover{color:var(--kp-ink)}
.way__label{font-size:12px;font-weight:700;color:var(--kp-muted)}
.way__main{font-size:16px;font-weight:700}
.way__sub{font-size:11px;color:var(--kp-muted)}
.way__note{margin-top:4px;font-size:11px;line-height:1.6;color:var(--kp-muted)}

.form-area{padding:32px 0 40px;background:#fff}
.form__title{font-size:15px;line-height:1.5;color:var(--kp-ink)}
/* 子テーマでは見出し・注記がフォーム（CF7）の外に出るので、間を空ける */
.form__title + .form{margin-top:18px}
.form + .form__note{margin-top:12px}

/* 静的版のフォーム（子テーマは Contact Form 7 の出力に同じ見た目を当てる）
   ========================================================================== */
.form{display:grid;gap:18px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:13px;font-weight:700;line-height:1.6;color:var(--kp-ink)}
.req{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;background:var(--kp-cta);color:#fff;font-size:11px;font-weight:700;line-height:1.6;vertical-align:1px;white-space:nowrap}
.req--either{background:var(--kp-accent-pale);color:var(--kp-accent)}
.fld input,.fld select,.fld textarea{
  width:100%;min-height:48px;padding:0 12px;
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--kp-ink);
  background:#fff;border:1px solid var(--kp-input-border);border-radius:var(--kp-radius-s);
}
.fld textarea{padding:10px 12px;resize:vertical}
.fld select{
  padding-right:36px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356637A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:3px solid var(--kp-accent);outline-offset:1px;border-color:var(--kp-accent)}
.fld input[aria-invalid="true"]{border-color:var(--kp-error);background:var(--kp-error-pale)}
.fld__help{font-size:12px;line-height:1.6;color:var(--kp-muted)}
.fld__err{font-size:13px;font-weight:700;line-height:1.6;color:var(--kp-error)}
.fld--sub{padding:12px;border-radius:var(--kp-radius-s);background:var(--kp-bg-alt)}
.fld[hidden]{display:none}
.form__note{margin-top:-6px;font-size:12px;text-align:center;color:var(--kp-muted)}

/* ==========================================================================
   フッター
   ========================================================================== */
.ft{padding:28px 0;background:var(--kp-bg-alt);font-size:12px;line-height:1.8;color:var(--kp-text)}
.ft__name{font-size:14px;font-weight:700;color:var(--kp-ink)}
.ft__t{margin-top:2px}

/* ==========================================================================
   画面下の固定バー（スマートフォンのみ）
   ========================================================================== */
.fixbar{display:none}

/* ==========================================================================
   動き（控えめ）
   ・隠す指定は html.js-motion（JS が付ける）の下でだけ効かせる。
     JS が動かない・失敗した場合は、最初から全部見えている。
   ・prefers-reduced-motion: reduce では一切動かさない（no-preference の中にだけ書く）。
   ・動かすのは opacity と transform だけ（レイアウトを動かさない＝CLS を出さない）。
   ========================================================================== */
@media screen and (prefers-reduced-motion:no-preference){

  /* 各節: 画面に入ったら浮き上がる（節の背景は動かさず、中身だけ動かす） */
  .js-motion [data-reveal] > .wrap{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
  .js-motion [data-reveal].is-in > .wrap{opacity:1;transform:none}

  /* FV の流れ図: 上から順に点灯し、縦の線が伸びてつながる（合計 1.25 秒） */
  .js-motion .fvflow__step{opacity:.15;transform:translateY(6px);transition:opacity .35s ease,transform .35s ease}
  .js-motion .fvflow__line{transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
  .js-motion .fvflow.is-lit .fvflow__step{opacity:1;transform:none}
  .js-motion .fvflow.is-lit .fvflow__line{transform:none}
  .js-motion .fvflow__step:nth-child(2){transition-delay:.3s}
  .js-motion .fvflow__step:nth-child(3){transition-delay:.6s}
  .js-motion .fvflow__step:nth-child(4){transition-delay:.9s}
  .js-motion .fvflow__step:nth-child(1) .fvflow__line{transition-delay:.15s}
  .js-motion .fvflow__step:nth-child(2) .fvflow__line{transition-delay:.45s}
  .js-motion .fvflow__step:nth-child(3) .fvflow__line{transition-delay:.75s}

  /* 押したときに少し沈む */
  .btn,.way,.fixbar__i{transition:transform .12s ease,background-color .2s ease}
  .btn:active,.way:active,.fixbar__i:active{transform:scale(.98)}
}

/* ホバーはマウスのある環境だけ（タッチでは貼り付いて見えるため） */
@media (hover:hover){
  .btn--cta:hover{background:var(--kp-cta-dark)}
  .way:hover{background:var(--kp-accent-pale)}
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */

/* スマートフォン: 固定バーを出す
   ========================================================================== */
@media (max-width:640px){
  body{padding-bottom:calc(var(--kp-bar-h) + env(safe-area-inset-bottom))}
  .fixbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;
    min-height:var(--kp-bar-h);padding-bottom:env(safe-area-inset-bottom);
    background:#fff;border-top:1px solid var(--kp-border);
  }
  .fixbar__i{
    flex:1 1 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    min-height:var(--kp-bar-h);font-size:11px;font-weight:700;line-height:1.3;color:var(--kp-ink);text-decoration:none;
  }
  .fixbar__i:hover{color:var(--kp-ink)}
  .fixbar__i--cta,.fixbar__i--cta:hover{background:var(--kp-cta);color:#fff}
}
@media (max-width:360px){
  .fv__h1{font-size:24px}
  .cmp th,.cmp td{padding-left:6px;padding-right:6px}
}

/* タブレット以上
   ========================================================================== */
@media (min-width:641px){
  .hdr__tel{display:flex;flex-direction:column;align-items:flex-end;margin-left:auto;line-height:1.25;color:var(--kp-ink);text-decoration:none}
  .hdr__tel b{font-size:18px;font-variant-numeric:tabular-nums}
  .hdr__tel small{font-size:11px;color:var(--kp-muted)}
  .hdr__tel:hover{color:var(--kp-accent)}
  :root{--kp-gutter:32px;--kp-sec-pad:64px}
  .sec__h2{font-size:28px}
  .sec__lead{font-size:14px}
  .problems{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .problem{flex-direction:column;gap:12px;padding:20px}
  .svcs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .svc{padding:20px}
  .svc__h3{font-size:16px}
  .svc__t{font-size:13px}
  .works{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .work img{height:auto;aspect-ratio:4/3}
  .cmp{font-size:14px}
  .cmp th,.cmp td{padding:14px 14px}
  .cmp thead th{font-size:13px}
  .cmp thead th.cmp__us{font-size:14px}
  .cta-band{padding:64px 0}
  .cta-band__h2{font-size:30px}
  .cta-band__lead{font-size:14px}
  .ways{max-width:640px}
  .way{padding:16px 20px}
  .way__main{font-size:20px}
  .form-area{padding:56px 0 72px}
  .ft{padding:36px 0}
}

/* デスクトップ（900px 以上）: FV を2カラム、料金・理由を3列に
   ========================================================================== */
@media (min-width:900px){
  :root{--kp-sec-pad:80px}
  .fv{padding:48px 0 64px}
  .fv__in{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;row-gap:28px;align-items:start}
  .fv__copy{grid-column:1;grid-row:1;gap:18px}
  .fvflow{grid-column:2;grid-row:1 / span 2;padding:24px}
  .fv__act{grid-column:1;grid-row:2;justify-items:start}
  .fv__h1{font-size:40px;line-height:1.35}
  .fv__label{font-size:13px}
  .fv__sub{font-size:16px}
  .fv__note{text-align:left}
  .fv__act .btn{width:auto;padding:0 40px}
  .fvflow__t{font-size:15px}
  .fvflow__step--best .fvflow__t{font-size:17px}
  .fvflow__d{font-size:13px}
  .fvflow__step--best .fvflow__d{font-size:14px}

  .fv-shot{width:min(100% - var(--kp-gutter) * 2,var(--kp-wrap));margin:40px auto 0;border-radius:var(--kp-radius-l);overflow:hidden}
  .fv-shot img{height:360px}
  .fv-shot__badge{left:20px;bottom:20px;font-size:13px}

  .points{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .pt{padding:24px}
  .pt__h3{font-size:17px}
  .pt__t{font-size:14px}

  .plans{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
  .plan{padding:24px}
  .plan__price{margin-top:auto}
  .plan__feat,.plan__price,.plan__inc{font-size:14px}
  .plan__inc{font-size:13px}
  .opt{margin-top:16px;padding:24px 28px}
  .opt__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;font-size:14px}

  .cmp{max-width:900px}
  .faq summary{font-size:15px}
  .faq details p{font-size:14px}
}

/* ==========================================================================
   印刷（動きの指定は screen に限っているので、隠れたまま印刷されることはない）
   ========================================================================== */
@media print{
  .hdr{position:static}
  .fixbar{display:none}
}

/* ==========================================================================
   親テーマ（etbs-parent）・WordPress との取り合い（子テーマだけの追記）
   ========================================================================== */
/* 親テーマの main{padding:2rem 0} を打ち消す（FV の上とフッターの上に帯状の余白が出るため） */
.kp-main{padding:0}
/* ログイン中は管理バーの下に追従ヘッダーを止める */
.admin-bar .hdr{top:32px}
@media (max-width:782px){.admin-bar .hdr{top:46px}}
@media (max-width:600px){.admin-bar .hdr{top:0}}

/* ==========================================================================
   Contact Form 7（子テーマだけの追記）
   静的版の .fld / .req と同じ見た目を、CF7 が出すマークアップに当てる。
   ・CF7 は項目ごとに <p> で包み、ラベルと入力欄の間に <br> を入れる。
     <br> は消して、余白は p 側（gap）で作る。
   ・CF7 本体の CSS は `.wpcf7 form .wpcf7-response-output` のように詳細度が高いので、
     結果表示だけは同じ形のセレクタで上書きする。
   ========================================================================== */
.form .wpcf7{max-width:none}
.form .wpcf7-form{display:grid;gap:18px}
.form .wpcf7-form > p{display:flex;flex-direction:column;gap:6px;margin:0}
.form .wpcf7-form > p > br{display:none}
.form .wpcf7-form > p[hidden]{display:none}
.form .wpcf7-form label{font-size:13px;font-weight:700;line-height:1.6;color:var(--kp-ink)}
.form .wpcf7-form-control-wrap{display:block}

/* 入力欄
   ========================================================================== */
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  width:100%;min-height:48px;padding:0 12px;
  font-family:inherit;font-size:16px;line-height:1.5;color:var(--kp-ink);
  background:#fff;border:1px solid var(--kp-input-border);border-radius:var(--kp-radius-s);
}
.form textarea{padding:10px 12px;resize:vertical}
.form select{
  padding-right:36px;-webkit-appearance:none;appearance:none;cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356637A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/16px no-repeat;
}
.form input:focus,.form select:focus,.form textarea:focus{outline:3px solid var(--kp-accent);outline-offset:1px;border-color:var(--kp-accent)}

/* 必須・どちらか必須のバッジと補足（フォーム定義側で <span class="req"> 等を書いて使う）
   ========================================================================== */
.form .fld__help{display:block;font-size:12px;font-weight:400;line-height:1.6;color:var(--kp-muted)}

/* 紹介元の欄（「業者・専門家からのご紹介」を選んだときだけ lp.js が表示する） */
.form .kp-shoukai{padding:12px;border-radius:var(--kp-radius-s);background:var(--kp-bg-alt)}

/* 送信ボタン
   ========================================================================== */
.form .wpcf7-submit{
  display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;padding:0 32px;
  border:0;border-radius:999px;background:var(--kp-cta);color:#fff;
  font-family:inherit;font-size:17px;font-weight:700;line-height:1.4;cursor:pointer;
}
.form .wpcf7-submit:disabled{opacity:.7;cursor:wait}
/* 送信中の回転表示はボタンの右端に重ねる（下に置くと、普段は空白の帯になるため） */
.form .wpcf7-form > p{position:relative}
.form .wpcf7-spinner{position:absolute;right:16px;top:16px;margin:0}

/* 検証メッセージ・送信結果（CF7 既定の黄色や緑の枠は、このLPの配色から浮くため上書き）
   ========================================================================== */
.form .wpcf7-not-valid-tip{display:block;margin-top:2px;font-size:13px;font-weight:700;line-height:1.6;color:var(--kp-error)}
.form input.wpcf7-not-valid,.form select.wpcf7-not-valid,.form textarea.wpcf7-not-valid{border-color:var(--kp-error);background-color:var(--kp-error-pale)}
.form .wpcf7 form .wpcf7-response-output{
  margin:0;padding:12px 16px;border:1px solid var(--kp-border);border-radius:var(--kp-radius-s);
  background:var(--kp-bg-alt);font-size:14px;line-height:1.8;color:var(--kp-ink);
}
.form .wpcf7 form.invalid .wpcf7-response-output,
.form .wpcf7 form.unaccepted .wpcf7-response-output,
.form .wpcf7 form.payment-required .wpcf7-response-output,
.form .wpcf7 form.failed .wpcf7-response-output,
.form .wpcf7 form.aborted .wpcf7-response-output,
.form .wpcf7 form.spam .wpcf7-response-output{border-color:var(--kp-error);background:var(--kp-error-pale);color:var(--kp-error)}
.form .wpcf7 form.sent .wpcf7-response-output{border-color:#1E7A45;background:#EEF7F1;color:#1E7A45}

/* 動き・ホバー（静的版の .btn と同じ扱い）
   ========================================================================== */
@media screen and (prefers-reduced-motion:no-preference){
  .form .wpcf7-submit{transition:transform .12s ease,background-color .2s ease}
  .form .wpcf7-submit:active{transform:scale(.98)}
}
@media (hover:hover){
  .form .wpcf7-submit:hover{background:var(--kp-cta-dark)}
}