/* ============================================================
   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:12px; --k-radius-md:16px; --k-radius-lg:22px; --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)}

/* ============================================================
   Kanoa Design System v2「あたたかクラフト」(k2-) — 2026-07-02
   - 優勝案: 紙のぬくもり×手描き風。審査steal(サービス色システム/
     段階出現/tabular-nums/spring限定/opt-in記法)を統合。
   - 追加式のみ。既存 id/class/data-* は不変更。
   - !important 不使用: .k2-x.k2-x の詳細度(0,2,0)で、各ページ
     <style> 内の単一クラス規則(0,1,0)に勝つ（直リンク構成では
     ページstyleが site.css より後に来るため、順序でなく詳細度で統一）。
   - 演出は全て prefers-reduced-motion: no-preference 内 = opt-in。
   ============================================================ */
:root{
  /* --- 5色ドット＝意味システム ---------------------------------
     橙/紫/緑は既存 --k-mix / --k-illust / --k-video(+bg/line/ink)を
     そのまま継続利用。黄・桃を「役割つきトークン」に正式昇格。 */
  --k-step:#EF9F27;  --k-step-bg:#FDF3E1;  --k-step-line:#F5CE8E;  --k-step-ink:#8A5B0E;  /* 黄=手順・ステップ・お得 */
  --k-fan:#E0568A;   --k-fan-bg:#FBEAF1;   --k-fan-line:#F0A9C6;   --k-fan-ink:#9C2F58;   /* 桃=お客様の声・お知らせ・キャンペーン */
  /* --- クラフト質感 --- */
  --k2-line-soft:#F0D9B8;                       /* あたたかい枠線（pricingの🎁帯と同色） */
  --k2-paper:#FFF9F0;                           /* ほんのり温かい差し込み地 */
  --k2-shadow-soft:3px 4px 0 rgba(58,47,36,.07), 0 6px 16px rgba(60,45,30,.07);
  --k2-shadow-lift:5px 7px 0 rgba(58,47,36,.09), 0 12px 26px rgba(60,45,30,.12);
  /* --- モーション --- */
  --k2-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --k2-ease-soft:cubic-bezier(.4,0,.6,1);
  --k2-dur-fast:.2s;
  --k2-dur-reveal:.6s;
}

/* --- サービスカラー配線 -----------------------------------------
   下の5クラスのどれかが要素（または祖先）に付くと、k2コンポーネント
   （右上ドット/見出し下線/バッジ）が --k2-svc を拾って自動で色づく。
   既存の .mix/.illust/.video（estimate .svccard・order-set .svcblk が
   既に持っている）にもそのまま配線するので、ページ側の追記が減る。
   ※カスタムプロパティを置くだけなので、既存の見た目には一切影響しない。 */
.is-mix,.mix{--k2-svc:var(--k-mix);--k2-svc-bg:var(--k-mix-bg);--k2-svc-line:var(--k-mix-line);--k2-svc-ink:var(--k-mix-ink)}
.is-illust,.illust{--k2-svc:var(--k-illust);--k2-svc-bg:var(--k-illust-bg);--k2-svc-line:var(--k-illust-line);--k2-svc-ink:var(--k-illust-ink)}
.is-video,.video{--k2-svc:var(--k-video);--k2-svc-bg:var(--k-video-bg);--k2-svc-line:var(--k-video-line);--k2-svc-ink:var(--k-video-ink)}
.is-step{--k2-svc:var(--k-step);--k2-svc-bg:var(--k-step-bg);--k2-svc-line:var(--k-step-line);--k2-svc-ink:var(--k-step-ink)}
.is-fan{--k2-svc:var(--k-fan);--k2-svc-bg:var(--k-fan-bg);--k2-svc-line:var(--k-fan-line);--k2-svc-ink:var(--k-fan-ink)}

/* ---- タイポグラフィ ----------------------------------------------
   html body = 詳細度(0,0,2)。各ページ<style>内の body{font-family:...}
   (0,0,1)に勝つので、全ページのフォントがここ1行で切り替わる。 */
html body{font-family:"Hiragino Maru Gothic ProN","Zen Maru Gothic","Hiragino Kaku Gothic ProN","Segoe UI",system-ui,sans-serif;line-height:1.9;letter-spacing:.012em}
/* 読みやすさ強化（審査steal・全ページ一括）：段落・箇条書きにゆとりの行間と段落間。詳細度(0,1,0)を(0,2,0)で確保 */
.k2-card.k2-card p{margin:0 0 .85em;line-height:1.95}
.k2-card.k2-card p:last-child{margin-bottom:0}
.k2-card.k2-card li{line-height:1.85}

/* 見出しの流体サイズ（付けた見出しだけに効く・審査steal）
   .k-pagehead h1{font-size:1.4rem}(0,1,1)に勝つため詳細度2。 */
.k2-fluid-h1.k2-fluid-h1{font-size:clamp(1.6rem,4.8vw + .55rem,2.5rem);line-height:1.28;letter-spacing:.005em;margin:.35em 0 .3em}
/* 見出しにゆとり（審査steal・全ページ）：h2/.k2-title の上に間、下に少し */
.k2-card.k2-card h2,.k2-card.k2-card .k2-title{margin-top:.2em;margin-bottom:.55em}

/* 金額の桁ぶれ防止（審査steal・ページ編集ゼロで全ページ自動適用）
   .price/.pr/.total は estimate/order-set/pricing の金額表示で使用中。 */
.k-plan-price,.k-pricelist .pr,.price,.pr,.total,.k2-num{font-variant-numeric:tabular-nums}

/* ---- ヒーロー：極薄オーロラ（静的・opacity≤.06・アニメなし=審査条件） ---- */
.k2-hero{background-image:
  radial-gradient(circle at 18% 22%,rgba(232,98,58,.06),transparent 55%),
  radial-gradient(circle at 82% 72%,rgba(124,107,224,.05),transparent 55%)}

/* ---- クラフトカード -----------------------------------------------
   紙テクスチャは background-image の CSS グラデ2枚のみ（画像ゼロ・
   擬似要素ゼロ＝ z-index/stacking 事故なし・描画コストほぼゼロ）。
   .k2-card.k2-card = 詳細度(0,2,0)で各ページの .sec/.card/.svccard
   (0,1,0)の border/border-radius に勝つ。
   ※色付きカード（index のできること3つ・order-set の .svcblk）には
     付けないこと。白カード専用。 */
.k2-card.k2-card{
  background-color:var(--k-card);
  background-image:
    repeating-linear-gradient(45deg,rgba(210,180,140,.028) 0 2px,transparent 2px 4px),
    repeating-linear-gradient(-45deg,rgba(160,140,120,.018) 0 3px,transparent 3px 6px);
  border:1px solid var(--k2-line-soft);
  border-radius:var(--k-radius-lg);
  box-shadow:var(--k2-shadow-soft);
  padding:22px 22px;      /* もっと間を：本文にゆとりを持たせる（旧18-20px→22px） */
  margin-top:22px;        /* カード同士の間隔を広げて“詰まって見える”を解消 */
}
@media(max-width:520px){ .k2-card.k2-card{padding:18px 16px} }
/* 決済・確認面用: 紙の質感は残し影を最小に（「お金の場面は静かな紙」＝審査steal） */
.k2-card.k2-card--calm{box-shadow:var(--k-shadow-card)}

/* 右上のサービスドット（--k2-svc の色が乗る。単独でも使える） */
.k2-dotmark{position:relative}
.k2-dotmark::after{content:"";position:absolute;top:14px;right:14px;width:9px;height:9px;
  border-radius:50%;background:var(--k2-svc,var(--k-accent));opacity:.9;pointer-events:none}

/* ---- セクション見出し ----------------------------------------------
   既存 .k-sec-title と重複させない（審査指摘対応）: 新しい見出しクラスは
   作らず、「下線だけ」を足すエンハンサー。h2 / .k-sec-title に併記する。
   色は --k2-svc（is-mix 等を同時に付けるか、色付き祖先の中に置く）。 */
.k2-title{position:relative;display:inline-block;padding-bottom:7px}
.k2-title::after{content:"";position:absolute;left:0;bottom:2px;width:58%;min-width:56px;max-width:180px;
  height:3px;border-radius:2px;background:var(--k2-svc,var(--k-accent));opacity:.5}

/* ---- ボタン ---------------------------------------------------------
   グラデ塗り・ぽよんバウンドは不採用（チャラ化回避=審査総意）。
   塗りボタン: 温かい影＋押すと1px沈む、それだけ。既存 .k-btn/.cta/
   button に併記。ページ側が id/element で塗りを定義していても、
   影の追加とactive挙動は必ず効く。 */
.k2-btn-craft.k2-btn-craft{border-radius:var(--k-radius-pill);box-shadow:0 3px 10px rgba(232,98,58,.22)}
.k2-btn-craft:active{transform:translateY(1px);filter:brightness(.96)}

.k2-btn-ghost-craft.k2-btn-ghost-craft{background:#fff;color:var(--k-ink);
  border:1px solid var(--k2-line-soft);border-radius:var(--k-radius-pill);box-shadow:var(--k-shadow-card)}
.k2-btn-ghost-craft:active{background:#f6efe6}

/* ---- バッジ（サービス色ドット付きピル。k-trust の姉妹・色で意味が付く版） ---- */
.k2-badge{display:inline-flex;align-items:center;gap:6px;background:#fff;
  border:1px solid var(--k2-line-soft);border-radius:var(--k-radius-pill);
  padding:5px 12px;font-size:.78rem;font-weight:700;color:var(--k-sub);box-shadow:var(--k-shadow-card)}
.k2-badge::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--k2-svc,var(--k-accent))}

/* ---- 価格表 ---------------------------------------------------------
   .k-plan にほんのり影（.k-plan.pop の強い影は詳細度で勝ち続けるので不変）。
   金額の tabular-nums は §3 で適用済み。
   ★料金カウントアップ演出は実装禁止（審査で却下: 決済サイトで金額を
     動かすと信頼を削る）。.k-plans の中に k2-reveal / k2-pop も入れない。 */
.k-plan{box-shadow:var(--k-shadow-card)}

/* ---- フッター（紙の折り目のような点線＋ミニ5色ドット） ---- */
.k2-footer{border-top:1px dashed var(--k2-line-soft);padding-top:16px}
.k2-footer .k-dots{margin-bottom:12px}
.k2-footer .k-dots span{width:7px;height:7px;opacity:.55}

/* ============================================================
   演出（全て opt-in 記法＝審査steal）
   - reduce環境: この media 全体が無効 → 即・全表示/静止
   - JS無し環境: html.k2-js が付かない → 隠れない/凍らない
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  /* FX-1 ふわっと出現（全ページ共通の骨格演出） */
  html.k2-js .k2-reveal{opacity:0;transform:translateY(12px);
    transition:opacity var(--k2-dur-reveal) ease,transform var(--k2-dur-reveal) ease}
  html.k2-js .k2-reveal.is-in{opacity:1;transform:none}

  /* FX-2 5色ドットの呼吸（画面内のみ再生＝省電力。優勝案の
     play-state paused → IntersectionObserver running パターン） */
  html.k2-js .k2-dots-breath span{animation:k2-breath 2.4s var(--k2-ease-soft) infinite;animation-play-state:paused}
  html.k2-js .k2-dots-breath.is-in span{animation-play-state:running}
  .k2-dots-breath span:nth-child(2){animation-delay:.24s}
  .k2-dots-breath span:nth-child(3){animation-delay:.48s}
  .k2-dots-breath span:nth-child(4){animation-delay:.72s}
  .k2-dots-breath span:nth-child(5){animation-delay:.96s}

  /* FX-3 spring登場（ステップ表示“限定”。サイト全体で2箇所まで） */
  html.k2-js .k2-pop{opacity:0}
  html.k2-js .k2-pop.is-in{animation:k2-pop .5s var(--k2-ease-spring) both}

  /* FX-4 ゆらゆら（絵文字/マスコット専用・1ページ1箇所まで） */
  .k2-sway{display:inline-block;animation:k2-sway 3.2s ease-in-out infinite;transform-origin:50% 100%}
}

/* FX-5 ホバーリフト（ポインタ環境のみ＝スマホで無駄なtransitionを持たない） */
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .k2-lift{transition:transform var(--k2-dur-fast) var(--k2-ease-spring),box-shadow var(--k2-dur-fast) ease}
  .k2-lift:hover{transform:translateY(-3px);box-shadow:var(--k2-shadow-lift)}
}
.k2-lift:active{filter:brightness(.97)}

@keyframes k2-breath{0%,20%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
@keyframes k2-pop{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes k2-sway{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(1.2deg)}}

/* ===== flow-: ご依頼の流れ/はじめてガイド「先回りのしおり」(2026-07-03・追加式) ===== */
ol.steps.flow-map{position:relative;
  background-image:repeating-linear-gradient(to bottom,var(--k2-line-soft) 0 6px,transparent 6px 13px);
  background-size:2px calc(100% - 40px);background-repeat:no-repeat;background-position:26px 20px}
ol.steps.flow-map li::before{background:var(--k-step-bg);color:var(--k-step-ink);
  box-shadow:inset 0 0 0 2px var(--k-step-line)}
.flow-meta{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.flow-time,.flow-pay,.flow-who{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;
  font-weight:700;border-radius:999px;padding:2px 10px;background:#fff}
.flow-time{color:var(--sub);border:1px dashed var(--line)}
.flow-pay{color:var(--sub);border:1px solid var(--line)}
.flow-pay.is-due{background:var(--k-step-bg);border-color:var(--k-step-line);color:var(--k-step-ink)}
.flow-who.is-you{border:1.5px solid var(--accent);color:var(--k-accent-text)}
.flow-who.is-studio{border:1px solid var(--line);color:var(--sub)}
.flow-who.is-both{border:1px dashed var(--accent);color:var(--k-accent-text)}
.flow-moneymap{padding:14px 16px;margin-top:16px}
.flow-mm-h{font-weight:800;font-size:.92rem;margin-bottom:8px;text-align:center}
.flow-mm-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px}
.flow-mm-node{flex:1 1 105px;background:#fff;border:1px solid var(--line);border-radius:10px;
  padding:7px 9px;font-size:.72rem;color:var(--sub);text-align:center;line-height:1.5}
.flow-mm-node b{display:block;color:var(--ink);font-size:.82rem;font-variant-numeric:tabular-nums}
.flow-mm-node.is-due{background:var(--k-step-bg);border-color:var(--k-step-line)}
.flow-mm-node.is-due b{color:var(--k-step-ink)}
.flow-mm-arrow{align-self:center;color:var(--sub)}
.flow-mm-note{margin-top:8px;font-size:.76rem;color:var(--sub);text-align:center}
.flow-help{text-align:center;font-size:.84rem;color:var(--sub);margin:12px auto 0;max-width:fit-content;
  background:var(--k2-paper);border:1px solid var(--k2-line-soft);border-radius:999px;padding:7px 14px}
.flow-help a{color:var(--k-accent-text);font-weight:700}
.hint.flow-hint{display:block;margin-top:6px;background:var(--k2-paper);
  border:1px dashed var(--k2-line-soft);border-radius:9px;padding:6px 10px;line-height:1.6}
.flow-chap{display:flex;align-items:center;gap:8px;margin:26px 2px 0;font-weight:800;font-size:.95rem;color:var(--ink)}
.flow-chap::after{content:"";flex:1;height:2px;border-radius:2px;
  background:repeating-linear-gradient(90deg,var(--k2-line-soft) 0 6px,transparent 6px 12px)}
.flow-chap-n{background:var(--k-step-bg);color:var(--k-step-ink);border:1px solid var(--k-step-line);
  border-radius:999px;padding:2px 10px;font-size:.74rem;flex:0 0 auto}
.why.flow-why{color:#3E5A38;background:#EFF5EC;border-radius:10px;padding:8px 12px}
.step.flow-stamp{position:relative}
.step.flow-stamp::after{content:"できた！";position:absolute;top:12px;right:12px;width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  border:2px solid var(--ok);color:var(--ok);font-size:.64rem;font-weight:800;
  transform:rotate(-12deg);opacity:0;pointer-events:none}
.step.flow-stamp:has(input[data-k]:checked)::after{opacity:.25}
.step.flow-stamp:has(input[data-k]):not(:has(input[data-k]:not(:checked)))::after{opacity:1}
@media (prefers-reduced-motion: no-preference){.step.flow-stamp::after{transition:opacity .35s ease}}
.bar.flow-milestones{background-image:
  radial-gradient(circle 2px at 25% 50%,#cfc7b8 98%,transparent),
  radial-gradient(circle 2px at 50% 50%,#cfc7b8 98%,transparent),
  radial-gradient(circle 2px at 75% 50%,#cfc7b8 98%,transparent)}
.flow-echo{background:#FAECE7;border:1px solid #d98cc0;border-radius:10px;padding:8px 12px;margin:2px 0 10px;font-size:.85rem}
.flow-echo a{color:var(--accent);font-weight:700}
.flow-turn{display:flex;align-items:center;gap:8px;justify-content:center;text-align:center;margin:14px 0 0;
  padding:10px 14px;border-radius:999px;background:var(--k2-paper);border:1px dashed var(--k2-line-soft);
  font-size:.85rem;color:var(--sub)}
.flow-turn b{color:var(--ink)}
.flow-goal{text-align:center;font-weight:800;margin:14px 0 4px;color:var(--k-step-ink)}
.flow-cheer{text-align:center;font-size:.86rem;color:var(--sub);margin:16px 0 -8px}
.flow-more{text-align:center;margin:10px 0 0;font-size:.84rem}
.k-fold.flow-fold-inset{margin:2px 0 8px 28px}
.k-fold.flow-fold-inset > summary{font-size:.84rem;padding:9px 12px}

/* ===== gift-: ギフトの特別感演出 (2026-07-03・追加式・reduced-motion配慮) ===== */
.gift-ribbon{position:relative;overflow:hidden}
.gift-ribbon::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,transparent 30%,rgba(224,86,138,.10) 46%,rgba(239,159,39,.10) 54%,transparent 70%);
  background-size:250% 100%;background-position:120% 0}
.gift-sparkle{position:relative}
.gift-sparkle::after{content:"✦";position:absolute;top:-2px;right:-16px;font-size:.7em;color:#E0568A;opacity:.85}
@media (prefers-reduced-motion: no-preference){
  html.k2-js .gift-ribbon::before{animation:gift-shine 3.2s ease 1 .5s}
  @keyframes gift-shine{from{background-position:120% 0}to{background-position:-40% 0}}
  html.k2-js .gift-sparkle::after{animation:gift-twinkle 2.6s ease-in-out infinite}
  @keyframes gift-twinkle{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
  html.k2-js .gtier{transform:translateX(-14px);opacity:0;animation:gift-slidein .45s ease forwards}
  html.k2-js .gtier:nth-of-type(2){animation-delay:.12s}
  html.k2-js .gtier:nth-of-type(3){animation-delay:.24s}
  @keyframes gift-slidein{to{transform:none;opacity:1}}
  html.k2-js .tier.gift-slide{transform:translateX(-14px);opacity:0;animation:gift-slidein .45s ease forwards}
  html.k2-js .tier.gift-slide:nth-of-type(2){animation-delay:.12s}
  html.k2-js .tier.gift-slide:nth-of-type(3){animation-delay:.24s}
}

/* ===== waku-: わくわくパスv3「好きが映る工房」P1 (2026-07-03・追加式・!important 0) =====
   骨格=案3「小さな喜びの連鎖」＋案2の鏡＋案1の灯り。封印ゾーン
   (order-set #review / .k-plans金額内 / estimate .total / 法務3ページ) 不触。
   新設アニメ=全て1回再生・0.45s以下・無限ループなし。 */
:root{--waku-dur:.3s}

/* P1-1 選べた！の色づき。.pick=svcPickBlock(配線外)なのでvalue別に直書き、
   label.inline=.svccard/.svcblk配線内なので--k2-svc変数で自動色。
   金額(.price)を含むinline行は色のみ・パルスは.pick限定(金額不動の原則)。 */
.pick:has(input[value="mix"]:checked){border-color:var(--k-mix-line);background:var(--k-mix-bg);color:var(--k-mix-ink)}
.pick:has(input[value="illust"]:checked){border-color:var(--k-illust-line);background:var(--k-illust-bg);color:var(--k-illust-ink)}
.pick:has(input[value="video"]:checked){border-color:var(--k-video-line);background:var(--k-video-bg);color:var(--k-video-ink)}
label.inline:has(input:checked){border-color:var(--k2-svc-line,var(--k2-line-soft));background:var(--k2-svc-bg,var(--k2-paper))}
@media (prefers-reduced-motion: no-preference){
  html.k2-js .pick,html.k2-js label.inline{transition:background var(--waku-dur) ease,border-color var(--waku-dur) ease}
  html.k2-js .pick:has(input:checked){animation:waku-picked var(--waku-dur) ease}
}
@keyframes waku-picked{0%{transform:scale(1)}45%{transform:scale(1.015)}100%{transform:scale(1)}}

/* P1-2 開く喜び（faq details / k-fold / estimateカード展開） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js details[open] > .a,
  html.k2-js details[open] > .k-fold-body,
  html.k2-js .svccard.on .svcbody{animation:waku-unfold var(--waku-dur) ease}
}
@keyframes waku-unfold{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* P1-3 チップ・infoの押し込み */
@media (prefers-reduced-motion: no-preference){
  html.k2-js .tplchip,html.k2-js .optinfo,html.k2-js .info{transition:transform .15s ease}
  html.k2-js .tplchip:active,html.k2-js .optinfo:active,html.k2-js .info:active{transform:scale(.92)}
}

/* P1-4 温かいフォーカスリング（waku-formを付けたフォーム内のみ。
   svcblk内は--k2-svc-lineで自動的にサービス色）。outlineは消すが
   box-shadowリングで可視フォーカスは維持(アクセシビリティ)。 */
.waku-form input[type=text]:focus,.waku-form input[type=url]:focus,.waku-form input[type=date]:focus,
.waku-form input[type=email]:focus,.waku-form textarea:focus,.waku-form select:focus{
  outline:none;border-color:var(--k2-svc-line,#F0997B);
  box-shadow:0 0 0 3px rgba(232,98,58,.12);caret-color:var(--k-accent)}
@media (prefers-reduced-motion: no-preference){
  html.k2-js .waku-form input,html.k2-js .waku-form textarea,html.k2-js .waku-form select{
    transition:border-color var(--waku-dur) ease,box-shadow var(--waku-dur) ease}
}

/* P1-5 料金タブが選んだサービスの色に（data-g実在確認済み） */
.svctab.on[data-g="mix"]{background:var(--k-mix);border-color:var(--k-mix)}
.svctab.on[data-g="illust"]{background:var(--k-illust);border-color:var(--k-illust)}
.svctab.on[data-g="video"]{background:var(--k-video);border-color:var(--k-video)}
@media (prefers-reduced-motion: no-preference){
  html.k2-js .svctab{transition:background .15s ease,border-color .15s ease}
}

/* P1-6 アンカー着地の下線スイープ（:target=faq目次/pricing直リンク着地） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js h2.k2-title:target::after,
  html.k2-js :target > .k2-title::after{animation:waku-sweep .45s ease both}
}
@keyframes waku-sweep{from{width:0;opacity:0}to{width:58%;opacity:.5}}

/* P1-7 ドアノブのマイクロコピー（全文が実装済み事実・演出なし） */
.waku-door{font-size:.78rem;color:var(--sub);margin-top:8px;text-align:center}

/* P1-8 FAQ目次の意味色ドット（「共通」には付けない=6色目の無意味を作らない） */
.k-toc a[href="#faq-mix"],.k-toc a[href="#faq-illust"],.k-toc a[href="#faq-video"]{
  display:inline-flex;align-items:center;gap:6px}
.k-toc a[href="#faq-mix"]::before,.k-toc a[href="#faq-illust"]::before,.k-toc a[href="#faq-video"]::before{
  content:"";width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.k-toc a[href="#faq-mix"]::before{background:var(--k-mix)}
.k-toc a[href="#faq-illust"]::before{background:var(--k-illust)}
.k-toc a[href="#faq-video"]::before{background:var(--k-video)}

/* P1-9 作例▶の手応え（transform=レイアウト不動。font-sizeアニメは不採用） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js .vid .thumb .play{transition:background .1s,transform var(--waku-dur) ease}
  html.k2-js .vid:active .thumb .play{transform:scale(1.15)}
  @media (hover:hover){ html.k2-js .vid:hover .thumb .play{transform:scale(1.15)} }
}
/* ===== /waku- P1 ===== */

/* ===== waku- P2 ===== */
/* P2-1 工房の灯り：時間帯でヒーロー極薄オーロラの色だけ変わる
   （静的・opacity≤.06=審査条件どおり・アニメなし・昼=既定のまま） */
html.waku-morning .k2-hero{background-image:
  radial-gradient(circle at 18% 22%,rgba(239,159,39,.06),transparent 55%),
  radial-gradient(circle at 82% 72%,rgba(31,166,124,.04),transparent 55%)}
html.waku-evening .k2-hero{background-image:
  radial-gradient(circle at 18% 22%,rgba(232,98,58,.06),transparent 55%),
  radial-gradient(circle at 82% 72%,rgba(224,86,138,.05),transparent 55%)}
html.waku-night .k2-hero{background-image:
  radial-gradient(circle at 18% 22%,rgba(124,107,224,.06),transparent 55%),
  radial-gradient(circle at 82% 72%,rgba(232,98,58,.04),transparent 55%)}

/* P2-2 選んだ「好き」が5色ドットに灯る（order-set=name=svc / estimate=inc_*。
   静的状態変化なのでmedia外=reduce環境でも伝わる。:has非対応=何も起きない） */
body:has(input[name="svc"][value="mix"]:checked) .k2-dots-breath span:nth-child(1),
body:has(#inc_mix:checked) .k2-dots-breath span:nth-child(1),
body:has(input[name="svc"][value="illust"]:checked) .k2-dots-breath span:nth-child(2),
body:has(#inc_illust:checked) .k2-dots-breath span:nth-child(2),
body:has(input[name="svc"][value="video"]:checked) .k2-dots-breath span:nth-child(3),
body:has(#inc_video:checked) .k2-dots-breath span:nth-child(3){
  animation:none;opacity:1;transform:scale(1.3);
  box-shadow:0 0 0 3px rgba(255,255,255,.95),0 2px 8px rgba(60,45,30,.22)}
@media (prefers-reduced-motion: no-preference){
  html.k2-js .k2-dots-breath span{transition:transform .25s ease,box-shadow .25s ease}
}

/* P2-3 作例の隣の「あなたの席」（ゴーストフレーム） */
.waku-next{display:block;text-align:center;margin-top:12px;padding:16px 14px;
  border:2px dashed var(--k2-line-soft);border-radius:14px;background:var(--k2-paper);
  text-decoration:none;color:var(--ink)}
.waku-next-frame{display:block;font-size:1.4rem;margin-bottom:2px;opacity:.7}
.waku-next-t{display:block;font-weight:800}
.waku-next-d{display:block;font-size:.8rem;color:var(--sub);margin-top:2px}
.waku-next:active{background:#f6efe6}

/* P2-4 セット割達成のひとはずみ（1回再生・ease・金額非接触=setMsgは.totalの外） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js .setmsg.on{animation:waku-cheer .4s ease}
}
@keyframes waku-cheer{0%{transform:scale(.96)}55%{transform:scale(1.03)}100%{transform:scale(1)}}

/* P2-5 pricingタブ切替の呼吸（#g_mixは付けない=金額初期面は静けさ優先） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js .waku-fade{animation:waku-fadein .25s ease}
}
@keyframes waku-fadein{from{opacity:0}to{opacity:1}}

/* P2-6 ヒーローの好きピル＝入口（?svc=はorder-set側で実際に読まれる） */
.waku-pill-link{text-decoration:none}
.waku-pill-link:active span{filter:brightness(.95)}

/* P2-7 5色ドット凡例（フッター・法務3ページには置かない） */
.waku-dotslegend{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  font-size:.7rem;color:var(--sub);margin-bottom:8px}
.waku-dotslegend i{font-style:normal;display:inline-flex;align-items:center;gap:4px}
.waku-dotslegend i::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--k2-svc,var(--k-accent))}
/* ===== /waku- P2 ===== */

/* ===== waku- P3（オーナー承認2026-07-03: 裁定A/B/C/D全採用） ===== */
/* P3-A1 howtoスタンプの押印（spring許可・機構は:hasのCSSのみ＝チェックJS不触） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js .step.flow-stamp:has(input[data-k]):not(:has(input[data-k]:not(:checked)))::after{
    animation:waku-stampin .4s var(--k2-ease-spring) both}
}
@keyframes waku-stampin{0%{opacity:0;transform:rotate(-20deg) scale(1.6)}100%{opacity:1;transform:rotate(-12deg) scale(1)}}
/* P3-A2 依頼完了の着地（1回再生・#reviewとは別カード） */
@media (prefers-reduced-motion: no-preference){
  html.k2-js .waku-arrive{animation:waku-arrive .45s var(--k2-ease-spring) both}
}
@keyframes waku-arrive{0%{opacity:0;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
/* P3-B 時間帯あいさつ（高さは常時予約=CLSゼロ。文言はk2-fx.jsが時計だけを根拠に入れる） */
.waku-hello{display:block;min-height:2.1em;margin:2px auto 0;font-size:.82rem;color:var(--sub)}
.waku-hello span{display:inline-block;background:var(--k2-paper);border:1px dashed var(--k2-line-soft);
  border-radius:999px;padding:4px 14px}
/* P3-D 手描きマーカー（静的。金額文字列・封印ゾーンには使わない。1ページ1〜2箇所まで） */
.waku-mark{background:linear-gradient(transparent 62%,var(--k-step-bg) 62% 94%,transparent 94%);
  padding:0 2px;border-radius:2px}
/* ===== /waku- P3 ===== */

/* ===== kbMotion（入口）：ページを開いたときのフェード（2026-08-23 オーナー要望
   「画面遷移したときにぱっと切り替わる感が否めない」） =====

   ⚠️ **k3.css ではなく site.css に書くこと**。
      index / pricing / order / demo / works-admin など 7 ページは k3.css を読んでいない。
      k3.css に書くとトップと料金ページだけフェードしない（実測で判明）。

   ⚠️ なぜ JS ではなく CSS なのか（実測にもとづく）
      以前は nav.js（body の末尾）があとから body を隠す方式だったが、
        ・faq … 641ms まで普通に見えている → 真っ白 → 0.45秒かけて出る（出る前に一度消える）
        ・works … 隠す class と出す class が同じ処理内に付き、フェードがまったく起きない
      site.css は <head> で読まれるので、最初の描画から効く＝ちらつきが原理的に起きない。

   ⚠️ 白紙事故の防止：transition ではなく animation + `both`。
      JS を一切必要とせず、途中で止まる経路が無い（必ず opacity:1 で終わる）。 */

/* ⚠️ ここで `html{background}` を塗ってはいけない（2026-08-23 に一度入れて外した）。
   body に背景があって html に無いとき、body の背景は「キャンバス」へ伝播し、
   **body の opacity の影響を受けない**。つまり何もしなくても白は出ない。
   html を塗ると伝播が止まり、地色が違うページで**2色に割れる**：
     ・portal.html（body.k2m の #FAFAF7）gift / gift-order（#FAFAF7）
     ・rec.html の🌙ナイトモード（#211d18）… 暗色がフェード対象になり
       「明るい→暗い」のランプが毎回見える（真っ暗で使う機能なので劣化） */

@media (prefers-reduced-motion: no-preference){
  /* ⚠️ `body.k3` ではなく **body 全体**。index/pricing/portal など8ページは
        <body> に k3 クラスが無い。
     ⚠️ 動かすのは opacity だけ。transform を body にかけると position:fixed の基準が
        body になり、固定ヘッダーや入力欄が壊れる。 */
  body{ animation: kbPageIn .5s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes kbPageIn{ from{ opacity: 0 } to{ opacity: 1 } }
}

/* ⚠️ 印刷では演出を切る。領収書や発注書を印刷するときに
   アニメーションの途中で拿われて、薄い紙が出る事故を防ぐ。
   ⚠️ ！important は使わない（CLAUDE.md §1）。**このブロックを上の
      body{animation} より後ろに置く**ことで、同じ強さ→後勝ちで勝つ。
      順番を入れ替えると黙って効かなくなるので注意。
   （.k2-reveal 側の印刷保険は k3.css の末尾。site.css に書くと
     あとから読まれる k3.css に負ける） */
@media print{
  body{ animation: none; opacity: 1; }
}

/* ⚠️ 演出の印刷保険は **site.css にも** 必要。
   pricing.html は k3.css を読まないので、k3.css 側の保険が届かない。
   下までスクロールせずに印刷すると、まだ出ていない節が opacity:0 のまま紙に出る。
   ⚠️ site.css の reveal 定義（FX-1）より**後ろ**にあることが前提（！important を使わないため）。 */
@media print{
  html.k2-js .k2-reveal,
  html.k2-js .k2-pop{ opacity: 1; transform: none; }
}
/* ===== /kbMotion（入口） ===== */