/**
 * consult-flow.css — 相談フロー（かんたんな質問 → 費用の目安 → お問い合わせ）の見た目。
 *
 * 読み込み元:
 *   - /index.html … 右下の相談パネル
 *   - /assets/consult-panel.js … 記事ページなどで「無料相談」が押されたときに読み込む
 *   （将来 /contact/ を作るときも、このファイルを読み込めば同じ見た目になります）
 *
 * assets/consult-flow.js（動き）と対になっています。片方だけ差し替えないこと。
 * 色・角丸などはトップページのデザイントークン（--primary / --accent / --line …）を使っています。
 */

/* ============================================================
   相談パネル（.cp-*）
   ・PC   … 画面の右下に浮かぶパネル（幅400px前後）。
            暗幕を出さず、背面のページもそのまま読めて操作できます。
   ・スマホ／タブレット … 画面の下から立ち上がる、ほぼ全画面のシート。
            画面を占有するので暗幕を出し、背面は固定します。
   どちらも「質問 → 費用の目安 → お問い合わせの送信」までこの中で完結します。
   ============================================================ */
.cp-root[hidden]{display:none;}
.cp-root{position:fixed;inset:0;z-index:9000;}
/* パネルの中の「隠す／出す」は Tailwind の .hidden に頼らず、この1行で必ず効くようにする。
   （記事ページのように、パネルをあとから差し込むページでも取りこぼさないため） */
#consult-panel .hidden{display:none;}
/* reCAPTCHA のバッジは出さない。代わりに、パネルの下に Google の規約への案内文を必ず置いている */
.grecaptcha-badge{visibility:hidden;}
/* シート表示のときだけ、背面のページを動かさない（JSが cp-open を付け外しします） */
html.cp-open,html.cp-open body{overflow:hidden;}
.cp-backdrop{position:absolute;inset:0;background:rgba(16,20,34,.42);opacity:0;transition:opacity .22s ease;}
.cp-root.is-open .cp-backdrop{opacity:1;}
.cp-dialog{
  position:absolute;display:flex;flex-direction:column;overflow:hidden;
  background:#fff;color:var(--ink,#1B2436);
  border:1px solid var(--line,#E8E5DD);
  box-shadow:0 30px 70px -22px rgba(16,20,34,.55);
}
.cp-head{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-shrink:0;
  padding:.7rem .9rem .7rem 1.15rem;
  background:var(--primary,#2E3B84);color:#fff;
}
.cp-title{font-family:'Noto Serif JP',serif;font-size:.98rem;font-weight:700;letter-spacing:.02em;margin:0;}
.cp-close{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:2rem;height:2rem;border:0;border-radius:.5rem;padding:0;
  background:rgba(255,255,255,.14);color:#fff;cursor:pointer;transition:background .15s;
}
.cp-close:hover{background:rgba(255,255,255,.28);}
.cp-close svg{width:1.05rem;height:1.05rem;}
.cp-close:focus-visible,.cp-root :focus-visible{outline:2px solid var(--accent,#C2872B);outline-offset:2px;}
.cp-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#fff;}

/* パネルの中では、フローのカードは枠なし（パネル自体が枠のため） */
.cp-body .cf-card{box-shadow:none;border-radius:0;padding:1.05rem 1.05rem .2rem;}
@media (min-width:640px){ .cp-body .cf-card{padding:1.15rem 1.25rem .2rem;} }
.cp-body .cf-av{width:2.6rem;height:2.6rem;}
@media (min-width:640px){ .cp-body .cf-av{width:2.9rem;height:2.9rem;} }
.cp-body .cf-assist{margin-bottom:.8rem;}
/* 操作するボタンは、内容が長くてもいつでも押せるよう枠の下端に貼り付ける */
/* --cp-skip-h は「そのまま相談内容を書く」の実測の高さ（JSが入れます）。
   文言が2行に折り返しても、戻る／次へがその上に正しく積まれるようにするため */
.cp-body .cf-nav{position:sticky;bottom:var(--cp-skip-h,2.95rem);background:#fff;z-index:2;padding-top:.35rem;}
.cp-body .cf-skip{position:sticky;bottom:0;background:#fff;z-index:2;margin-top:0;padding-bottom:.55rem;}
/* 費用の目安のときも、主ボタン（この内容で相談する）を下端に貼り付ける。
   outline は白い下敷き。うしろを流れる文字が透けないようにするためのもの */
.cp-body #cf-to-form{position:sticky;bottom:.45rem;z-index:2;outline:.45rem solid #fff;}

/* お問い合わせフォーム */
.cp-form{border-top:1px solid var(--line,#E8E5DD);background:#FAFBFF;padding:1.05rem 1.05rem 1.3rem;}
@media (min-width:640px){ .cp-form{padding:1.15rem 1.25rem 1.4rem;} }
.cp-form-title{font-size:1rem;font-weight:700;color:var(--primary,#2E3B84);margin:0 0 .2rem;}
.cp-form-lead{font-size:.75rem;line-height:1.7;color:var(--muted,#5C6373);margin:0 0 .9rem;}
.cp-field{margin-bottom:.8rem;}
.cp-field label{display:block;font-size:.78rem;font-weight:600;color:#475067;margin-bottom:.25rem;}
.cp-req{color:#dc2626;font-weight:500;}
.cp-form input,.cp-form textarea{width:100%;font-size:.9rem;}
.cp-submit{
  display:block;width:100%;text-align:center;border:0;border-radius:.7rem;cursor:pointer;
  background:var(--accent-dark,#9C6B1C);color:#fff;font-weight:700;font-size:.95rem;padding:.85rem 1rem;
  box-shadow:0 6px 18px -8px rgba(156,107,28,.9);transition:background .15s;
}
.cp-submit:hover{background:var(--accent,#C2872B);}
.cp-submit:disabled{opacity:.6;cursor:default;}
.cp-thanks{margin-top:1rem;padding:1rem;border-radius:.7rem;background:#F0FDF4;border:1px solid #BBF7D0;color:#166534;font-size:.82rem;line-height:1.7;text-align:center;}
.cp-thanks-mark{font-size:1.6rem;margin-bottom:.2rem;}
.cp-thanks-head{font-weight:700;font-size:.92rem;margin:0 0 .2rem;}
.cp-error{margin-top:1rem;padding:.8rem .9rem;border-radius:.6rem;background:#FEF2F2;border:1px solid #FECACA;color:#b91c1c;font-size:.8rem;line-height:1.7;text-align:center;}
.cp-error a{font-weight:700;text-decoration:underline;}
.cp-legal{font-size:.66rem;line-height:1.7;color:#98A1B3;margin:.7rem 0 0;text-align:center;}
.cp-legal a{text-decoration:underline;}

/* ── PC：右下に浮かぶパネル（暗幕なし・背面もそのまま使えます） ── */
@media (min-width:1024px){
  /* 枠は画面いっぱいに広げてあるが、クリックもスクロールも背面へ素通りさせる。
     こうすると、ページを読みながら片隅で相談を続けられる */
  .cp-root{pointer-events:none;}
  .cp-backdrop{display:none;}
  .cp-dialog{
    pointer-events:auto;
    right:1.25rem;bottom:1.25rem;left:auto;top:auto;
    width:400px;max-width:calc(100vw - 2.5rem);
    max-height:min(84vh,780px);
    border-radius:1rem;
    transform:translateY(14px) scale(.98);opacity:0;
    transition:transform .22s cubic-bezier(.2,.9,.3,1),opacity .22s ease;
  }
  .cp-root.is-open .cp-dialog{transform:none;opacity:1;}
}

/* ── スマホ・タブレット：下から立ち上がるシート ─────────── */
@media (max-width:1023px){
  .cp-dialog{
    left:0;right:0;bottom:0;top:2.5rem;
    width:auto;max-width:none;border-radius:1.1rem 1.1rem 0 0;border-bottom:0;
    transform:translateY(100%);
    transition:transform .26s cubic-bezier(.2,.9,.3,1);
  }
  .cp-root.is-open .cp-dialog{transform:none;}
  .cp-head{padding:.85rem .9rem .85rem 1.15rem;}
  .cp-body{padding-bottom:env(safe-area-inset-bottom);}
}

@media (prefers-reduced-motion: reduce){
  .cp-dialog,.cp-backdrop{transition:none;}
}

/* ===== お問い合わせフォームの入力欄 ===== */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form select,
.contact-form textarea {
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 1rem;
}
.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    outline: none;
}

/* ===== 相談フロー本体（質問→目安→フォーム） ===== */
.cf-card{background:#fff;color:var(--ink,#1B2436);border-radius:1rem;box-shadow:0 20px 45px -20px rgba(0,0,0,.55);padding:1.25rem 1.15rem;}
@media (min-width:640px){ .cf-card{padding:1.7rem 1.9rem;} }
.cf-fade{animation:cfFade .3s ease;}
@keyframes cfFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cf-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.9rem;}
.cf-progress-label{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--muted,#5C6373);}
.cf-dots{display:inline-flex;gap:.35rem;align-items:center;}
.cf-dots i{display:block;width:.5rem;height:.5rem;border-radius:999px;background:#DDE0EA;transition:background .2s,transform .2s;}
.cf-dots i.on{background:var(--primary-2,#3D4EAC);}
.cf-dots i.now{background:var(--accent,#C2872B);transform:scale(1.3);}
.cf-assist{display:flex;align-items:flex-start;gap:.7rem;margin-bottom:1rem;}
.cf-av{width:3.1rem;height:3.1rem;border-radius:.85rem;object-fit:cover;flex-shrink:0;box-shadow:0 3px 10px rgba(27,36,54,.16);}
@media (min-width:640px){ .cf-av{width:3.9rem;height:3.9rem;} }
.cf-bubble{position:relative;flex:1 1 auto;min-width:0;background:#F7F6F2;border:1px solid var(--line,#E8E5DD);border-radius:1rem;padding:.7rem .95rem;font-size:.85rem;line-height:1.7;color:#475067;}
.cf-bubble::before{content:'';position:absolute;left:-9px;top:18px;border:8px solid transparent;border-right-color:var(--line,#E8E5DD);border-left:0;}
.cf-bubble::after{content:'';position:absolute;left:-8px;top:19px;border:7px solid transparent;border-right-color:#F7F6F2;border-left:0;}
.cf-bubble-name{display:block;font-size:.66rem;font-weight:700;letter-spacing:.05em;color:var(--primary,#2E3B84);margin-bottom:.15rem;}
.cf-q{font-size:1.02rem;font-weight:700;line-height:1.6;margin-bottom:.3rem;}
.cf-hint{font-size:.75rem;color:var(--muted,#5C6373);margin-bottom:.75rem;}
.cf-hint:empty{display:none;}
.cf-opts{display:grid;grid-template-columns:1fr;gap:.5rem;}
@media (min-width:640px){ .cf-opts.two{grid-template-columns:1fr 1fr;} }
.cf-opt{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;border:1.5px solid var(--line,#E8E5DD);border-radius:.75rem;background:#fff;padding:.75rem .9rem;font-size:.88rem;font-weight:500;line-height:1.5;color:var(--ink,#1B2436);cursor:pointer;transition:border-color .14s,background .14s,box-shadow .14s;}
.cf-opt:hover{border-color:var(--primary-2,#3D4EAC);background:#FAFBFF;box-shadow:0 2px 8px rgba(16,24,40,.05);}
.cf-opt .cf-mark{width:1.05rem;height:1.05rem;border:2px solid #C7CDDA;border-radius:999px;flex-shrink:0;transition:.14s;}
.cf-opt.multi .cf-mark{border-radius:.3rem;}
.cf-opt.sel{border-color:var(--primary,#2E3B84);background:rgba(46,59,132,.06);font-weight:700;color:var(--primary-dark,#23306E);}
.cf-opt.sel .cf-mark{border-color:var(--primary,#2E3B84);background:var(--primary,#2E3B84);box-shadow:inset 0 0 0 3px #fff;}
.cf-opt.multi.sel .cf-mark{box-shadow:none;}
/* 選択肢が長文になる設問（Q1）は、印だけ上端に揃えて折り返しても崩れないようにする */
.cf-opt.wrap{align-items:flex-start;}
.cf-opt.wrap .cf-mark{margin-top:.2rem;}
/* Q1：上段（クラウド導入まわりの主力領域）は1列・大きめ。下段は小見出しでまとめて一段弱く */
.cf-opts.needs{grid-template-columns:1fr;}
.cf-subgroup{margin-top:.65rem;padding-top:.7rem;border-top:1px dashed var(--line,#E8E5DD);}
.cf-subgroup-title{font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--muted,#5C6373);margin-bottom:.45rem;}
.cf-subgrid{display:grid;grid-template-columns:1fr;gap:.4rem;}
@media (min-width:640px){ .cf-subgrid{grid-template-columns:1fr 1fr;} .cf-subgrid .cf-opt.other{grid-column:1/-1;} }
.cf-opt.sub{padding:.55rem .8rem;font-size:.8rem;font-weight:500;color:#475067;border-radius:.6rem;}
.cf-opt.sub .cf-mark{width:.92rem;height:.92rem;}
.cf-otherwrap{margin-top:.45rem;}
.cf-othertext{width:100%;border:1.5px solid var(--line,#E8E5DD);border-radius:.6rem;padding:.55rem .8rem;font-size:.82rem;line-height:1.6;color:var(--ink,#1B2436);background:#fff;}
.cf-othertext:focus{outline:none;border-color:var(--primary-2,#3D4EAC);}
/* 金額を出さないとき（人数が未確定／そのほかのご相談のみ）の案内カード */
.cf-plan.quiet{border-color:var(--line,#E8E5DD);background:#F7F6F2;}
.cf-plan.quiet .cf-plan-name{font-size:1rem;color:var(--ink,#1B2436);}
.cf-gws{border:1px solid var(--accent,#C2872B);background:rgba(194,135,43,.07);border-radius:.7rem;padding:.6rem .85rem;margin-bottom:.8rem;}
.cf-gws-title{font-size:.8rem;font-weight:700;color:var(--accent-dark,#9C6B1C);}
.cf-gws-note{font-size:.75rem;line-height:1.7;color:#475067;margin-top:.15rem;}
.cf-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.9rem;min-height:2.5rem;}
.cf-next{background:var(--primary,#2E3B84);color:#fff;font-weight:700;font-size:.88rem;padding:.62rem 1.45rem;border-radius:.6rem;border:0;cursor:pointer;transition:background .15s;}
.cf-next:hover{background:var(--primary-dark,#23306E);}
.cf-next:disabled{opacity:.4;cursor:default;}
.cf-linkbtn{font-size:.82rem;font-weight:700;color:var(--muted,#5C6373);background:none;border:0;padding:.35rem .1rem;cursor:pointer;transition:color .15s;}
.cf-linkbtn:hover{color:var(--primary,#2E3B84);}
.cf-linkbtn:disabled{opacity:0;cursor:default;pointer-events:none;}
.cf-skip{display:block;width:100%;text-align:center;margin-top:.6rem;padding-top:.8rem;border:0;border-top:1px dashed var(--line,#E8E5DD);background:none;font-size:.8rem;color:var(--muted,#5C6373);cursor:pointer;transition:color .15s;}
.cf-skip:hover{color:var(--primary,#2E3B84);text-decoration:underline;}
.cf-plan{border:1.5px solid var(--primary,#2E3B84);background:rgba(46,59,132,.04);border-radius:.9rem;padding:1rem 1.15rem;margin-bottom:.8rem;}
.cf-plan-name{font-family:'Noto Serif JP',serif;font-size:1.05rem;font-weight:700;}
.cf-plan-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--accent-dark,#9C6B1C);background:rgba(194,135,43,.12);border-radius:999px;padding:.18rem .6rem;margin-left:.5rem;vertical-align:middle;}
.cf-plan-price{font-family:'Noto Serif JP',serif;font-size:1.5rem;font-weight:700;color:var(--primary,#2E3B84);margin:.15rem 0 .35rem;}
.cf-plan-why{font-size:.8rem;line-height:1.7;color:#475067;}
.cf-plan-desc{font-size:.74rem;line-height:1.7;color:var(--muted,#5C6373);margin-top:.4rem;}
.cf-addon-title{font-size:.8rem;font-weight:700;margin:.85rem 0 .4rem;}
/* 金額を出さないときに、月額メニューが「はじめの費用」と混ざって見えないようにする一文 */
.cf-addon-lead{font-size:.74rem;line-height:1.7;color:var(--muted,#5C6373);margin:-.15rem 0 .45rem;}
.cf-addon{border:1px solid var(--line,#E8E5DD);border-radius:.7rem;background:#FAFBFF;padding:.6rem .85rem;margin-bottom:.4rem;}
.cf-addon-head{display:flex;align-items:baseline;justify-content:space-between;gap:.15rem .6rem;flex-wrap:wrap;}
.cf-addon-name{font-size:.83rem;font-weight:700;min-width:0;overflow-wrap:anywhere;}
/* 価格の文言が長い項目（例:「〜10名は標準プランに含む…」）でも折り返して枠内に収める */
.cf-addon-price{font-size:.8rem;font-weight:700;color:var(--primary,#2E3B84);min-width:0;overflow-wrap:anywhere;}
/* 幅が狭いときは名前を上・価格を下に積む（名前が潰れて読めなくなるのを防ぐ） */
@media (max-width:640px){
  .cf-addon-head{flex-direction:column;align-items:flex-start;}
  .cf-addon-price{font-size:.78rem;}
}
.cf-addon-note{font-size:.72rem;color:var(--muted,#5C6373);margin-top:.15rem;line-height:1.6;}
.cf-detail{margin:.7rem 0;border:1px solid var(--line,#E8E5DD);border-radius:.7rem;padding:.55rem .85rem;}
.cf-detail>summary{font-size:.8rem;font-weight:700;color:var(--muted,#5C6373);cursor:pointer;list-style:revert;}
.cf-summary{white-space:pre-wrap;font-size:.78rem;line-height:1.8;color:#475067;margin-top:.5rem;}
.cf-note{font-size:.72rem;line-height:1.7;color:#98A1B3;margin:.6rem 0 .9rem;}
.cf-cta{display:block;width:100%;text-align:center;background:var(--accent,#C2872B);color:#fff;font-weight:700;font-size:1rem;border:0;border-radius:.7rem;padding:.9rem 1.2rem;cursor:pointer;box-shadow:0 6px 18px -8px rgba(194,135,43,.9);transition:background .15s,transform .15s;}
.cf-cta:hover{background:var(--accent-dark,#9C6B1C);transform:translateY(-1px);}
.cf-ask{font-size:.85rem;font-weight:700;text-align:center;margin-bottom:.5rem;color:var(--ink,#1B2436);}
/* 感想の選択肢（主ボタンより一段弱い見た目。押さなくても先に進める任意項目） */
.cf-react-row{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-top:.6rem;}
.cf-chip{font-size:.78rem;font-weight:700;color:var(--muted,#5C6373);background:#fff;border:1px solid var(--line,#E8E5DD);border-radius:999px;padding:.35rem .85rem;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.cf-chip:hover{border-color:var(--primary-2,#3D4EAC);color:var(--primary,#2E3B84);}
.cf-chip.sel{border-color:var(--primary,#2E3B84);color:var(--primary-dark,#23306E);background:rgba(46,59,132,.06);}
.cf-react-say{margin-top:.6rem;padding:.65rem .85rem;border:1px solid var(--line,#E8E5DD);background:#F7F6F2;border-radius:.6rem;font-size:.8rem;line-height:1.75;color:#475067;}
.cf-react-say a,.cf-react-say button{font-weight:700;color:var(--primary,#2E3B84);text-decoration:underline;background:none;border:0;padding:0;cursor:pointer;font-size:inherit;}
.cf-subrow{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;margin-top:.4rem;}
.cf-collapsed{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;font-size:.83rem;color:var(--muted,#5C6373);}
.cf-applied{margin-bottom:1rem;padding:.75rem .9rem;border-radius:.6rem;background:#EEF2FF;border:1px solid #C7D2FE;color:#1E3A8A;font-size:.82rem;line-height:1.7;text-align:left;}
@media (prefers-reduced-motion: reduce){ .cf-fade{animation:none;} .cf-cta:hover{transform:none;} }