/* メルティア 顧客情報提出システム 専用CSS（intake系3ページ限定enqueue・専用クラススコープ）
   ブランド: メルティア赤 #EB2A2A / 淡ピンク入力 #FFEBEE（既存お問い合わせと統一）
   SWELLのデフォルト見出し装飾（h2のborder-left赤バー / h3の点線）は本スコープ内で打ち消す */

:root{
  --mt-red:#EB2A2A;
  --mt-red-dark:#c81f1f;
  --mt-pink:#FFEBEE;
  --mt-pink-soft:#FFF5F7;
}

/* ページ共通 */
.meltia-intake-page{max-width:760px;margin:0 auto;}

/* ページタイトル（SWELLのh2赤バーを打ち消して中央＋赤アンダーラインに）*/
.meltia-intake-page .mip-title{
  border:none !important;
  padding:0 0 .5em !important;
  margin:1.2em 0 .8em !important;
  text-align:center;
  font-size:1.6em;
  color:#333;
  position:relative;
  background:none !important;
}
.meltia-intake-page .mip-title::before{display:none !important;}
.meltia-intake-page .mip-title::after{
  content:"";
  display:block;
  width:56px;height:3px;
  background:var(--mt-red);
  border-radius:2px;
  margin:.55em auto 0;
}
.mip-desc{line-height:1.9;margin-bottom:1.6em;text-align:center;color:#555;}
.mip-back a{font-size:.9em;color:#999;text-decoration:none;}
.mip-back a:hover{text-decoration:underline;color:var(--mt-red);}
.mip-back--bottom{margin-top:2.2em;text-align:center;}

/* ハブ カード */
.mih-cards{display:flex;gap:20px;flex-wrap:wrap;margin:1.8em 0;}
/* ①②③はPCで横並び3カラム（モバイルは縦積み） */
@media (min-width:781px){
  .meltia-intake-hub .mih-cards{display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;}
  .meltia-intake-hub .mih-card{display:flex;flex-direction:column;}
  .meltia-intake-hub .mih-card__btn{margin-top:auto;}
}
.mih-card{flex:1 1 300px;border:1px solid #f3d3d6;border-radius:14px;padding:26px 24px;background:var(--mt-pink-soft);position:relative;}
.mih-card__num{position:absolute;top:-15px;left:22px;width:32px;height:32px;border-radius:50%;background:var(--mt-red);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;box-shadow:0 2px 6px rgba(235,42,42,.3);}
.meltia-intake-page .mih-card__title{
  border:none !important;
  border-bottom:2px solid var(--mt-pink) !important;
  padding:0 0 .5em !important;
  margin:.5em 0 .7em !important;
  font-size:1.15em;color:#333;background:none !important;
}
.meltia-intake-page .mih-card__title::before,
.meltia-intake-page .mih-card__title::after{display:none !important;}
.mih-card__text{font-size:.9em;line-height:1.85;color:#666;min-height:6.5em;}
.mih-card__btn{margin:0;}
.mih-btn{display:block;text-align:center;white-space:nowrap;background:var(--mt-red);color:#fff !important;padding:15px 10px;border-radius:8px;text-decoration:none;font-weight:bold;font-size:.95em;transition:background .2s,transform .1s;box-shadow:0 3px 10px rgba(235,42,42,.25);}
.mih-btn:hover{background:var(--mt-red-dark);transform:translateY(-1px);}
/* 灰色＋コンパクトは entry の書面ボタン（.mi-tab-panel 内）だけにスコープ。
   入口(hub)等の .mih-btn は上の赤=本来色に戻る。2026-07-23 前田社長指示 */
.mi-tab-panel .mih-btn{display:inline-block;background:#757575;padding:.6em 1.2em;font-size:13.5px;box-shadow:0 2px 6px rgba(0,0,0,.15);}
.mi-tab-panel .mih-btn:hover{background:#5f5f5f;}
.mih-note{font-size:.85em;color:#999;margin-top:1.8em;text-align:center;}

/* フォーム共通 */
.meltia-intake .mi-lead{line-height:1.9;background:var(--mt-pink-soft);border:1px solid #f6dde0;border-radius:10px;padding:16px 18px;margin-bottom:1.8em;color:#444;}
.meltia-intake .mi-field{margin:0 0 1.4em;padding:0 0 1.2em;border-bottom:1px dashed #f0e0e2;}
.meltia-intake .mi-field>label{display:block;font-weight:bold;margin-bottom:.5em;color:#333;}

/* セクション見出し（既存お問い合わせの「赤い全幅バー」に寄せる・SWELL装飾を打ち消し）*/
.meltia-intake .mi-sec{
  border:none !important;
  background:var(--mt-red) !important;
  color:#fff !important;
  font-size:1.12em;
  font-weight:bold;
  padding:.65em 1em !important;
  border-radius:7px;
  margin:2em 0 1.1em !important;
  box-shadow:0 2px 8px rgba(235,42,42,.2);
}
.meltia-intake .mi-sec::before,
.meltia-intake .mi-sec::after{display:none !important;}

.meltia-intake .mi-hint{display:block;font-size:.82em;color:#999;margin:.2em 0 .5em;}
.meltia-intake .mi-badge{display:inline-block;font-size:.7em;background:var(--mt-red);color:#fff;border-radius:4px;padding:2px 8px;margin-left:8px;vertical-align:middle;font-weight:bold;}
.meltia-intake .mi-badge--opt{background:#b9b9b9;}

/* 入力欄（淡ピンク・既存お問い合わせと統一）*/
.meltia-intake input[type=text],
.meltia-intake input[type=email],
.meltia-intake input[type=tel],
.meltia-intake input[type=number],
.meltia-intake input[type=date],
.meltia-intake textarea,
.meltia-intake select{
  max-width:100%;
  background:var(--mt-pink);
  border:1px solid #f0c4c8;
  border-radius:5px;
  padding:9px 12px;
}
.meltia-intake input:focus,
.meltia-intake textarea:focus,
.meltia-intake select:focus{outline:2px solid rgba(235,42,42,.35);outline-offset:1px;}
.meltia-intake textarea{min-height:7em;width:100%;}
.meltia-intake .wpcf7-list-item{display:inline-block;margin:.2em 1.1em .2em 0;}
.meltia-intake .wpcf7-list-item.first{margin-left:0;}
.meltia-intake input[type=file]{display:block;margin:.25em 0;background:none;border:none;padding:0;}

/* 送信ボタン */
.meltia-intake .mi-submit{margin-top:2em;text-align:center;}
.meltia-intake .mi-submit input{background:var(--mt-red);color:#fff;border:none;padding:15px 48px;border-radius:8px;font-size:1.05em;font-weight:bold;cursor:pointer;transition:background .2s;box-shadow:0 3px 10px rgba(235,42,42,.25);}
.meltia-intake .mi-submit input:hover{background:var(--mt-red-dark);}

/* 送信ボタン中央ズレ対策（PC/SP両方・本件のみPCも修正・前田社長指示 2026-07-22）:
   CF7スピナーを絶対配置でフローから外し、text-align:center がボタンだけを中央寄せする。
   /contact の既存修正を踏襲。 */
.meltia-intake .mi-submit{position:relative;}
.meltia-intake .mi-submit .wpcf7-spinner{position:absolute;margin:0 0 0 8px;}

/* 条件分岐は初期非表示（チラ見え防止／JSが条件成立時に block 表示）*/
.meltia-intake .mi-cond{display:none;}

/* 容量メーター */
.mi-capacity{margin:1.4em 0;padding:14px 16px;border:1px solid #f3d3d6;border-radius:10px;background:#fff;}
.mi-capacity__label{font-size:.85em;color:#777;margin-right:6px;}
.mi-capacity__now{font-weight:bold;font-size:1.2em;color:#333;}
.mi-capacity__bar{height:8px;background:#f1e3e4;border-radius:4px;overflow:hidden;margin:.5em 0;}
.mi-capacity__fill{height:100%;width:0;background:#5cb85c;transition:width .25s;}
.mi-capacity.is-warn .mi-capacity__fill{background:#f0ad4e;}
.mi-capacity.is-over .mi-capacity__fill{background:var(--mt-red);}
.mi-capacity__warn{font-size:.85em;color:var(--mt-red);margin:.3em 0 0;line-height:1.6;}

/* PC: 右下フロート常時表示 */
@media (min-width:769px){
  .meltia-intake--docs .mi-capacity{position:fixed;right:20px;bottom:20px;width:280px;z-index:9999;box-shadow:0 4px 18px rgba(0,0,0,.15);background:#fff;}
}
/* SP: 下部固定バー */
@media (max-width:768px){
  .meltia-intake--docs .mi-capacity{position:fixed;left:0;right:0;bottom:0;border-radius:0;z-index:9999;box-shadow:0 -2px 12px rgba(0,0,0,.12);background:#fff;margin:0;}
  .meltia-intake--docs{padding-bottom:130px;}
  .mih-card__text{min-height:0;}
  .mih-cards{gap:28px;}
}

/* 送信成功演出 */
.mi-success{background:#eaf7ea;border:1px solid #5cb85c;color:#2e7d32;padding:16px 20px;border-radius:10px;margin:1em 0;font-weight:bold;animation:miFade .4s ease;}
.mi-success__check{display:inline-block;background:#5cb85c;color:#fff;border-radius:50%;width:24px;height:24px;text-align:center;line-height:24px;margin-right:8px;}
@keyframes miFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* 電子交付同意ページ */
.mip-desc ul{margin:.6em 0 1em;padding-left:1.3em;}
.mip-desc li{margin:.4em 0;}
.mip-note{background:var(--mt-pink-soft);border:2px solid #f3d3d6;border-radius:14px;padding:18px 22px;margin:1.6em 0;}
.mip-note p{margin:0 0 .7em;font-weight:bold;color:var(--mt-red);}
.mip-note ul{margin:0;padding-left:1.2em;}
.mip-note li{margin:.55em 0;font-size:.95em;line-height:1.75;color:#444;}
.meltia-intake .mi-accept{background:#fff;border:2px solid var(--mt-pink);border-radius:12px;padding:18px 20px;margin:1.6em 0;line-height:1.8;font-size:.95em;color:#333;}
.meltia-intake .mi-accept .wpcf7-list-item{margin:0;display:flex;gap:10px;align-items:flex-start;}
.meltia-intake .mi-accept input[type=checkbox]{margin-top:.25em;width:20px;height:20px;accent-color:var(--mt-red);flex-shrink:0;}

/* 電子交付同意ページ個別調整（2026-06-29 前田社長指示）：説明文は左寄せ・送信ボタン下に余白 */
body.page-denshi-koufu-doui .mip-desc{text-align:left;}
body.page-denshi-koufu-doui .meltia-intake-page{padding-bottom:96px;}

/* ============================================================
   SPレイアウト調整：entry限定・SP専用（@media max-width:768px）・PC非対象
   フォームの入力行(.mi-field)と同意ブロック(.mi-accept)が画面端まで全幅
   だったのを、ヒーローカードと同じ左右16pxのコンテンツ幅に揃える。
   .page-entry スコープなので contact / m-intake / simulation には波及しない。
   2026-07-23 前田社長指示 ============================================ */
@media (max-width:768px){
  .page-entry .meltia-intake .mi-field{margin-left:16px;margin-right:16px;}
  .page-entry .meltia-intake .mi-field input{width:100%;box-sizing:border-box;}
  .page-entry .meltia-intake .mi-accept{margin-left:16px;margin-right:16px;}
}

/* ============================================================
   SPレイアウト調整：contact限定・SP専用（タイトルのみPC/SP出し分け）・PC描画不変
   入力行/ご用件ラジオ/お問合せ内容/同意ブロックを左右16pxのコンテンツ幅に。
   タイトルはPC『お問い合わせ・資料請求』/SP『お問合せ＋改行＋資料請求』を出し分け。
   .page-contact スコープ。2026-07-23 前田社長指示 ==================== */
.page-contact .mel-join-hero__page-ttl .mel-ttl-sp{display:none;}
@media (max-width:768px){
  .page-contact .mel-join-hero__page-ttl .mel-ttl-pc{display:none;}
  .page-contact .mel-join-hero__page-ttl .mel-ttl-sp{display:inline;}
  .page-contact .meltia-intake .mi-field{margin-left:16px;margin-right:16px;}
  .page-contact .meltia-intake .mi-field input[type=text],
  .page-contact .meltia-intake .mi-field input[type=email],
  .page-contact .meltia-intake .mi-field input[type=tel],
  .page-contact .meltia-intake .mi-field textarea{width:100%;box-sizing:border-box;}
  .page-contact .meltia-intake .mi-accept{margin-left:16px;margin-right:16px;}
}

/* ============================================================
   SPレイアウト調整：m-intake 4ページ限定・SP専用・PC非対象
   本文を左右16pxのコンテンツ幅に＋入力欄を幅いっぱいに。
   .mel-sp-br は改行出し分けヘルパー（空spanをSPだけblock化）。
   2026-07-23 前田社長指示 ============================================ */
.mel-sp-br{display:none;}
@media (max-width:768px){
  .mel-sp-br{display:block;}
  .page-m-intake-q7w2e9 .meltia-intake-page,
  .page-m-intake-info-q7w2e9 .meltia-intake-page,
  .page-m-intake-pr-q7w2e9 .meltia-intake-page,
  .page-m-intake-docs-q7w2e9 .meltia-intake-page{padding-left:16px;padding-right:16px;box-sizing:border-box;}
  .page-m-intake-info-q7w2e9 .mi-field input[type=text],
  .page-m-intake-info-q7w2e9 .mi-field input[type=email],
  .page-m-intake-info-q7w2e9 .mi-field input[type=tel],
  .page-m-intake-info-q7w2e9 .mi-field input[type=number],
  .page-m-intake-info-q7w2e9 .mi-field input[type=date],
  .page-m-intake-info-q7w2e9 .mi-field select,
  .page-m-intake-info-q7w2e9 .mi-field textarea,
  .page-m-intake-pr-q7w2e9 .mi-field textarea,
  .page-m-intake-pr-q7w2e9 .mi-field input[type=text]{width:100%;box-sizing:border-box;}
}

/* ============================================================
   文字数上限つき欄（お相手への希望コメント・40文字）2026-08-15 前田社長指示
   ・高さだけ1行に。横幅は上の textarea{width:100%} をそのまま使うので変わらない
   ・カウンタは欄の右下。超過で赤字＋太字
   ・エラー文言そのものは CF7 標準の .wpcf7-not-valid-tip をそのまま使う
   ============================================================ */
.meltia-intake textarea[name="b-partner-comment"]{min-height:0;resize:none;}
.meltia-intake .mi-count{display:block;text-align:right;font-size:.85em;color:#999;margin-top:.35em;}
.meltia-intake .mi-count.is-over{color:var(--mt-red);font-weight:bold;}

/* =====================================================================
   IBJ仕様統一（2026-09-02）で追加した分
   ⚠️ このブロックより上は本番から取得した版が正。本番反映の前に必ず突合すること
      （2026-08-15 にローカルが本番より3世代古かった前例あり）
   ===================================================================== */

/* ---- 凡例 ---- */
.meltia-intake .mi-legend{
  background:var(--mt-pink-soft);border:1px solid #f3d3d6;border-radius:12px;
  padding:16px 18px;margin:0 0 1.6em;font-size:.88em;line-height:1.9;color:#555;
}
.meltia-intake .mi-legend__title{font-weight:bold;color:#333;margin:0 0 .4em;}
.meltia-intake .mi-legend ul{margin:0;padding-left:1.2em;}
.meltia-intake .mi-legend li{margin:0 0 .2em;}

/* ---- セクション進捗（画面上部に固定）---- */
.meltia-intake .mi-progress{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.96);border-bottom:1px solid #f0e0e2;
  padding:10px 4px;margin:0 0 1.2em;font-size:.86em;
  /* バーは見せるだけで押す要素が無い。クリックを透過させないと、
     スクロールでバーの下に潜り込んだボタンが押せなくなる
     （2026-09-02 実機で家族カードの「閉じる」が押せず発覚）*/
  pointer-events:none;
}
.meltia-intake .mi-progress__label{font-weight:bold;color:var(--mt-red);white-space:nowrap;}
.meltia-intake .mi-progress__dots{display:flex;align-items:center;gap:8px;}
.meltia-intake .mi-progress__arrow{
  color:#d9b7ba;font-style:normal;font-size:.9em;line-height:1;
  padding:0 2px;user-select:none;
}
.meltia-intake .mi-progress__dot{
  width:11px;height:11px;border-radius:50%;
  border:2px solid var(--mt-red);background:transparent;display:block;
}
.meltia-intake .mi-progress__dot.is-on{background:var(--mt-red);}

/* ---- バッジ（必須/任意 と 掲載先の2軸）---- */
.meltia-intake .mi-badge--req{background:var(--mt-red);}
.meltia-intake .mi-badge--pub{background:#2f7fd1;}
.meltia-intake .mi-badge--agency{background:#7a5aa8;}
.meltia-intake .mi-badge--own{background:#5c8f5c;}

/* ---- 性別ゲート（続柄・婿養子）---- */
.meltia-intake .mi-gender-gated.is-locked select{background:#eee;color:#999;cursor:not-allowed;}
.meltia-intake .mi-gate-msg{margin:.4em 0 0;font-size:.85em;color:var(--mt-red);}

/* ---- 年収 ⇄ 所得（自営業かどうかで必須が入れ替わる）----
   必須バッジの出し分けだけで示す。欄を薄くすると「入力できない」と誤解されるので
   彩度は他の項目と同じにする（前田社長指示 2026-09-02）*/

/* ---- 移住可能地域（地域見出しでまとめて選ぶ）---- */
.meltia-intake .mi-area__group{border:1px solid #f0e0e2;border-radius:10px;margin:0 0 8px;overflow:hidden;}
.meltia-intake .mi-area__head{display:block;background:var(--mt-pink-soft);padding:8px 12px;font-weight:bold;font-size:.92em;}
.meltia-intake .mi-area__head label{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer;}
.meltia-intake .mi-area__list{display:grid;grid-template-columns:repeat(4,1fr);gap:4px 10px;padding:10px 12px;}
.meltia-intake .mi-area__list .wpcf7-list-item{margin:0;}

/* ---- 家族構成（1人＝1カード）---- */
.meltia-intake .mi-blocknote{margin:0 0 1.2em;font-size:.9em;color:#555;line-height:1.9;}
.meltia-intake .mi-fam{
  border:1px solid #f0e0e2;border-radius:12px;padding:14px 16px 4px;margin:0 0 14px;
  background:#fff;
}
.meltia-intake .mi-fam--closed{display:none;}
.meltia-intake .mi-fam__head{display:flex;align-items:center;justify-content:space-between;margin:0 0 .8em;}
.meltia-intake .mi-fam__no{font-weight:bold;color:var(--mt-red);}
.meltia-intake .mi-fam__close{
  background:none;border:1px solid #ccc;border-radius:6px;color:#777;
  font-size:.82em;padding:4px 12px;cursor:pointer;
}
.meltia-intake .mi-fam__close:hover{border-color:var(--mt-red);color:var(--mt-red);}
.meltia-intake .mi-fam .mi-field{margin:0 0 1em;padding:0 0 .8em;}
.meltia-intake .mi-fam .mi-field:last-child{border-bottom:none;}
.meltia-intake .mi-fam__addwrap{text-align:center;margin:0 0 1.6em;}
.meltia-intake .mi-fam__add{
  background:#fff;border:2px dashed var(--mt-red);border-radius:8px;color:var(--mt-red);
  font-weight:bold;padding:12px 28px;cursor:pointer;font-size:.95em;
}
.meltia-intake .mi-fam__add:hover{background:var(--mt-pink-soft);}

/* ---- SP ---- */
@media (max-width:768px){
  .meltia-intake .mi-area__list{grid-template-columns:repeat(2,1fr);}
  .meltia-intake .mi-progress{font-size:.78em;gap:8px;padding:8px 4px;}
  .meltia-intake .mi-progress__dot{width:9px;height:9px;border-width:2px;}
  .meltia-intake .mi-progress__dots{gap:5px;}
  .meltia-intake .mi-progress__arrow{font-size:.8em;padding:0;}
  /* SPは短い表記（data-sec-short）に切り替わるので省略は保険 */
  .meltia-intake .mi-progress__label{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:52vw;
  }
  .meltia-intake .mi-fam{padding:12px 12px 2px;}
  /* 9欄はPCでもSPでも同じ縦積み。表組みにしない（375pxで1列40pxを切るため）*/
  .meltia-intake .mi-fam .mi-field>label{margin-bottom:.3em;}
}

/* 地域見出しのチェックボックスは素のHTML。テーマ側でネイティブcheckboxが
   0x0 に潰されるので、既存の .mi-accept と同じく明示サイズを与える
   （2026-09-02 実機で 0x0 を実測して判明） */
.meltia-intake .mi-area__toggle{
  width:18px;height:18px;flex-shrink:0;accent-color:var(--mt-red);margin-right:2px;
}

/* 進捗バーを画面上部に固定した副作用で、スクロールで上に送られた要素が
   バーの下に潜り込み、クリックがバーに吸われる（2026-09-02 実機で発覚。
   家族カードの「閉じる」ボタンが押せなかった）。
   スクロール時に停止する位置をバーの高さぶん下げる */
.meltia-intake .mi-sec,
.meltia-intake .mi-field,
.meltia-intake .mi-fam{ scroll-margin-top:64px; }
@media (max-width:768px){
  .meltia-intake .mi-sec,
  .meltia-intake .mi-field,
  .meltia-intake .mi-fam{ scroll-margin-top:56px; }
}

/* お客様番号の欄（Discord集約・2026-09）
   ふだんは隠す。番号が取れなかったときだけ JS が .mi-code--show を付けて出す。
   🔴 display:none で完全に消さない理由 → 番号が無い方に手入力していただく必要があるため */
.meltia-intake .mi-code { display: none; }
.meltia-intake .mi-code.mi-code--show { display: block; }

/* お客様番号を保存値で流用中の表示（Discord集約・2026-09） */
.meltia-intake .mi-whoami { margin: .6em 0 1.2em; padding: .7em 1em; background: #fff8e1; border: 1px solid #f0dca0; border-radius: 8px; font-size: .92em; color: #6b5a1e; }

/* ==========================================================
   ② 独身証明書の代替（戸籍謄本・抄本）2026-09-06
   チェックを入れたときだけ開く。開閉は intake.js の .mi-cond が担当。
   ここでは見た目だけを持つ（JSは足していない）。
   ========================================================== */
.meltia-intake .mi-alt{margin:.9em 0 0;}
.meltia-intake .mi-alt .wpcf7-list-item{margin:0;}
.meltia-intake .mi-alt .wpcf7-list-item-label{font-size:.9em;color:#555;}
.meltia-intake .mi-alt__body{margin:.9em 0 .2em;padding:1em 1.1em;background:#fff7f7;border:1px solid #f3d3d6;border-radius:8px;}
.meltia-intake .mi-alt__body>label{display:block;font-weight:bold;margin:1.3em 0 .4em;color:#333;font-size:.95em;}
.meltia-intake .mi-alt__lead{margin:0 0 .8em;font-size:.9em;line-height:1.8;color:#444;}
.meltia-intake .mi-alt__steps{margin:0 0 1em;font-size:.88em;line-height:1.9;color:#444;}
.meltia-intake .mi-alt__dl{margin:0;}
.meltia-intake .mi-dl{display:inline-block;background:#fff;color:var(--mt-red);border:2px solid var(--mt-red);border-radius:8px;padding:11px 22px;font-weight:bold;font-size:.95em;text-decoration:none;transition:background .2s,color .2s;}
.meltia-intake .mi-dl:hover{background:var(--mt-red);color:#fff;}
@media (max-width:768px){
  .meltia-intake .mi-alt__body{padding:.9em;}
  .meltia-intake .mi-dl{display:block;text-align:center;}
}
