/* ============================================================
   Kanoa 共通デザインシステム（site.css）
   - 既存ページのインラインCSSは壊さない方針で、追加分は k- 名前空間。
   - nav.js が全ページに <link> を注入する（?as= 埋め込みでは読まれない）。
   - サービス3色・余白・角丸・影・タイポを“単一の真実源”として集約。
   ============================================================ */
:root{
  /* ブランド／サービス色（drift していた #b07ba0 / #AFA9EC 等をここで一本化） */
  --k-accent:#E8623A;          /* 主アクセント（橙・塗りボタン用） */
  --k-accent-text:#C24A22;     /* 小さいリンク文字用の濃いめ橙（白地で AA を満たす） */
  --k-mix:#E8623A;   --k-mix-bg:#FAECE7;   --k-mix-line:#F0997B;   --k-mix-ink:#993C1D;
  --k-illust:#7C6BE0;--k-illust-bg:#EEEDFE;--k-illust-line:#AFA9EC;--k-illust-ink:#3C3489;
  --k-video:#1FA67C; --k-video-bg:#E1F5EE; --k-video-line:#9FE1CB; --k-video-ink:#0F6E56;
  --k-ink:#2c2925; --k-sub:#6f685e; --k-line:#ece2d2; --k-card:#ffffff; --k-bg:#FBF6EE;
  /* 旧来の素トークン（各ページのインライン :root を一元化。値は --k-* と同一） */
  --accent:#E8623A; --accent-ink:#fff; --bg:#FBF6EE; --card:#ffffff; --ink:#2c2925; --sub:#6f685e; --line:#ece2d2; --ok:#1FA67C;
  --mix:#E8623A; --illust:#7C6BE0; --video:#1FA67C;
  /* 余白・角丸・影・タイポ（モジュラースケール） */
  --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-5:24px; --k-space-6:32px;
  --k-radius-sm:10px; --k-radius-md:14px; --k-radius-lg:18px; --k-radius-pill:999px;
  --k-shadow-card:0 1px 3px rgba(60,45,30,.06); --k-shadow-pop:0 14px 40px rgba(60,45,30,.16);
  --k-header-h:52px;
}
/* 固定ヘッダー(52px)下にアンカー見出しが潜らないよう全ページ一括（個別 scroll-margin-top の代替） */
html{ scroll-padding-top:calc(var(--k-header-h) + 8px); }

/* ---- ボタン（共通プリミティブ） ---- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border:1px solid transparent;
  border-radius:var(--k-radius-pill);padding:13px 20px;line-height:1.2;transition:filter .12s,transform .04s}
.k-btn:active{transform:translateY(1px)}
.k-btn-primary{background:var(--k-accent);color:#fff}
.k-btn-primary:active{filter:brightness(.94)}
.k-btn-ghost{background:#fff;color:var(--k-ink);border-color:var(--k-line)}
.k-btn-block{display:flex;width:100%}

/* ---- 下層ページの共通ミニヘッダー（.pagehead）：回遊時の“同じサイト感” ---- */
.k-pagehead{text-align:center;padding:26px 0 6px}
/* .k-dots / .k-sub / .k-rule は .hero 内など .k-pagehead の外でも効くよう非スコープ */
.k-dots{display:flex;gap:5px;justify-content:center;margin-bottom:9px}
.k-dots span{width:9px;height:9px;border-radius:50%;display:inline-block}
.k-pagehead h1{font-size:1.4rem;margin:.1em 0;line-height:1.35}
.k-sub{color:var(--k-sub);font-size:.9rem;margin:.35em 0 0}
.k-rule{width:46px;height:3px;border-radius:3px;background:var(--k-accent);margin:12px auto 0;opacity:.85}

/* ---- 安心バッジの横並び（CTA直近に信頼を近接配置） ---- */
.k-trust{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:12px 0}
.k-trust span{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--k-line);
  border-radius:var(--k-radius-pill);padding:5px 11px;font-size:.76rem;font-weight:700;color:var(--k-sub)}

/* ---- サービス直リンク（カード内の小さな「このサービスを依頼 →」） ---- */
.k-svc-link{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:700;text-decoration:none;color:var(--k-accent-text)}
.k-svc-link:active{opacity:.7}

/* ---- 作例ギャラリー（TOP/ABOUTで共有・PCは3列） ---- */
.k-works{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:8px}
@media(min-width:520px){ .k-works{grid-template-columns:repeat(3,1fr)} }

/* ---- お客様の声（器のみ・中身はオーナーが手動で足す。捏造しない） ---- */
.k-voice{background:#fff;border:1px solid var(--k-line);border-left:3px solid var(--k-accent);
  border-radius:var(--k-radius-sm);padding:12px 14px;margin:8px 0;font-size:.9rem;line-height:1.7}
.k-voice .k-voice-by{display:block;margin-top:6px;color:var(--k-sub);font-size:.8rem}

/* ---- フォームのステップ表示（order-set：①記入 ②確認 →送信） ---- */
.k-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin:10px 0 4px;flex-wrap:wrap}
.k-steps .k-step{display:inline-flex;align-items:center;gap:5px;font-size:.8rem;font-weight:700;color:var(--k-sub);
  background:#fff;border:1px solid var(--k-line);border-radius:var(--k-radius-pill);padding:5px 12px}
.k-steps .k-step.is-on{color:#fff;background:var(--k-accent);border-color:var(--k-accent)}
.k-steps .k-step-sep{color:var(--k-line);font-weight:700}

/* ---- カテゴリ目次ピル（faq 等のアンカージャンプ） ---- */
.k-toc{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0 14px}
.k-toc a{font-size:.82rem;font-weight:700;text-decoration:none;color:var(--k-ink);
  background:#fff;border:1px solid var(--k-line);border-radius:var(--k-radius-pill);padding:6px 13px}
.k-toc a:active{background:#f6efe6}

/* ============================================================
   Bold redesign 2026-06-28（テーマ＝カノアの自由）
   ページ採用は各HTML側でクラスを付与。既存スタイルは壊さない。
   ============================================================ */
/* 共通カード（白・枠・大きめ角丸・控えめ影・たっぷり余白） */
.k-card{background:var(--k-card);border:1px solid var(--k-line);border-radius:var(--k-radius-lg);padding:18px 20px;box-shadow:var(--k-shadow-card);margin-top:var(--k-space-4)}
/* セクション見出し */
.k-sec-title{font-size:1.08rem;font-weight:800;margin:.1em 0 .7em;letter-spacing:.01em}
.k-sec-title small{display:block;font-weight:600;font-size:.8rem;color:var(--k-sub);margin-top:3px}

/* プランカード（料金の主役・価格を大きく見せる） */
.k-plans{display:grid;gap:12px;grid-template-columns:1fr;margin-top:10px}
@media(min-width:560px){ .k-plans.cols2{grid-template-columns:1fr 1fr} .k-plans.cols3{grid-template-columns:repeat(3,1fr)} }
.k-plan{position:relative;background:var(--k-card);border:1px solid var(--k-line);border-top:3px solid var(--k-accent);border-radius:var(--k-radius-md);padding:16px 16px 14px;display:flex;flex-direction:column}
.k-plan.pop{border-color:var(--k-accent);box-shadow:0 6px 22px rgba(232,98,58,.13)}
.k-plan .k-plan-name{font-weight:800;font-size:1rem}
.k-plan .k-plan-price{font-weight:800;font-size:1.7rem;line-height:1.1;margin:7px 0 2px}
.k-plan .k-plan-price .yen{font-size:1rem;font-weight:700}
.k-plan .k-plan-price s{color:var(--k-sub);font-weight:400;font-size:.95rem}
.k-plan .k-plan-note{color:var(--k-sub);font-size:.78rem;line-height:1.6}
.k-plan .k-ribbon{position:absolute;top:-10px;right:12px;background:var(--k-accent);color:#fff;font-size:.7rem;font-weight:800;padding:3px 10px;border-radius:var(--k-radius-pill)}
.k-plan ul{list-style:none;padding:0;margin:10px 0 0}
.k-plan ul li{position:relative;padding:3px 0 3px 20px;font-size:.85rem}
.k-plan ul li::before{content:"✓";position:absolute;left:0;color:var(--k-video);font-weight:800}

/* 料金リスト（テーブルの代替・見やすい行） */
.k-pricelist{margin-top:6px}
.k-pricelist .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:9px 2px;border-bottom:1px dashed var(--k-line)}
.k-pricelist .row:last-child{border-bottom:0}
.k-pricelist .row .nm{font-size:.92rem}
.k-pricelist .row .nm small{color:var(--k-sub);font-size:.76rem}
.k-pricelist .row .pr{font-weight:800;white-space:nowrap}

/* 折りたたみ（詳細・オプションを隠して主従をつくる） */
.k-fold{border:1px solid var(--k-line);border-radius:var(--k-radius-md);background:var(--k-card);margin-top:10px}
.k-fold > summary{cursor:pointer;font-weight:700;font-size:.9rem;padding:12px 14px;list-style:none}
.k-fold > summary::-webkit-details-marker{display:none}
.k-fold > summary::after{content:"＋";float:right;color:var(--k-sub)}
.k-fold[open] > summary::after{content:"－"}
.k-fold .k-fold-body{padding:0 14px 13px;font-size:.86rem;line-height:1.7}

/* サービス色のアクセント（カードの上線を色分け） */
.k-plan.is-mix{border-top-color:var(--k-mix)} .k-plan.is-illust{border-top-color:var(--k-illust)} .k-plan.is-video{border-top-color:var(--k-video)}

/* セクション間の“余白でプロ感”を出すラッパ（任意適用） */
.k-section{margin-top:var(--k-space-5)}