@charset "utf-8";

/* 産後ケアマップ 会員ページ（会員登録・ログイン・パスワード再設定・マイページ・登録情報の編集・予約・口コミ・お気に入り・退会）
   デザインの根拠：.claude/docs/261006-member-design-notes.md 2-0（共通の様式）・2-3（マイページの確定図と付箋8枚）
   - 色は common.css の --primary 系（#ca3660。白文字 4.99:1）。デザイン画像の #F0386E は使わない
     261007 玉井さん 10/7 指示で --primary は #e85f73（予約するボタンの色・白文字 3.33:1）に変わった。このファイルは --primary を参照するだけなので変更なし
   - スマホ優先。PC は1カラムを中央に置く（最大 640px）。PC の左ナビは作っていない（設計メモ 6章 18 が未決）
   - クラスは mb- で始める（公開側の既存 CSS とぶつけない） */

:root{
  --mb-text:var(--sgn-ink-body, #454545);
  --mb-sub:#5b6673;          /* 補足の文字。白 5.84:1／薄ピンク 5.44:1 */
  --mb-line:#eee3e7;         /* カードの枠・区切り線（飾り） */
  --mb-field-line:#948a8f;   /* 入力欄・ラジオ・チェックの枠（白地で 3.34:1。部品の境界は 3:1 以上） */
  --mb-placeholder:#677079;  /* 例）の文字（白地 5.04:1／エラーの薄赤 #fff2f2 で 4.61:1） */
  --mb-chev:#7d868f;
  --mb-error:#c0262d;        /* 白 5.9:1／薄赤 5.41:1 */
  --mb-error-soft:#fff2f2;
  --mb-ok:#276b43;           /* 薄緑の上で 5.91:1 */
  --mb-ok-soft:#eef8f1;
  --mb-radius:14px;
}

/* ===== ページの骨組み ===== */
.mb-main{padding:20px 0 72px;color:var(--mb-text)}
/* 語のまとまりを1つの箱にして、途中で折り返さない（完了の見出し・ガイドラインの行で、最後の1文字だけが次の行へ落ちるのを防ぐ） */
.mb-nb{display:inline-block}
/* 261011 花弥さん決定：本文の語末2文字だけが次の行へ落ちる折り返し（「ま／す。」等。12幅×17画面で81件）を、文節の切れ目で折る（auto-phrase）→ 10件（「必須」のバッジが次の行へ回る 9 件と、mypage.html の登録・<wbr>管理）。
   Chrome 系だけで効き、Safari は元の折り返しのまま（未対応の値は無視される）。前例は detail.css 1103・top.css 591 の見出し・リード。
   word-break を自前で持つ .mb-item-title・.mb-item-text・.mb-profile-name は、break-word を
   同じ意味の overflow-wrap:anywhere に置き換えて auto-phrase を足した（長い英数字は前と同じく折れる）。
   261011 花弥さん決定（2 回目）：文節で折ると行の右が大きく空く所（前 30% 未満 → 後 50% 超。開発 dev/tests/j261011_gap.sh）は前の折り方に戻す：
   確認画面・予約詳細の表（.mb-dl）、助成の根拠の表（.sgn-table）、お気に入りの施設名（.mb-fav-name）、404・パスワード再設定の無効リンクの本文（.mb-nophrase） */
.mb-wrap{max-width:656px;margin:0 auto;padding:0 24px;word-break:auto-phrase}
.mb-wrap .sgn-table,.mb-nophrase{word-break:normal}
/* 261010 481〜671px で本文の左端が 16px のままで、ヘッダーのロゴ（24px）より 8px 外にずれていた。サイト共通の .container と同じく 481px 以上は 24px・480px 以下は 16px に。
   max-width を 640 → 656 にして中身の幅（608px）と PC での位置は前と同じ */
@media(max-width:480px){.mb-wrap{padding:0 16px}}
.mb-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;font-size:.85rem;color:var(--mb-sub)}
.mb-back:hover{color:var(--primary)}
.mb-back .mb-ico{width:18px;height:18px;color:currentColor}
.mb-title{margin:4px 0 0;text-align:center;font-size:1.5rem;font-weight:700;line-height:1.4;letter-spacing:.02em;color:var(--sgn-ink-head, #323232)}
/* タイトル下の3色の点（確定図どおり。飾り） */
.mb-dots{display:flex;justify-content:center;gap:10px;margin:12px 0 28px}
.mb-dots span{width:8px;height:8px;border-radius:50%;background:#f29bb0}
.mb-dots span:nth-child(2){background:#8fd3cb}
.mb-dots span:nth-child(3){background:#f3b81f}
.mb-lead{margin:-12px 0 24px;text-align:center;font-size:.9rem;line-height:1.8;color:var(--mb-sub)}
.mb-text{font-size:.92rem;line-height:1.9;color:var(--mb-text)}
.mb-text+.mb-text{margin-top:8px}

/* ===== 区分の見出し（ピンクの縦バー） ===== */
.mb-sec{margin-top:28px}
.mb-sec:first-of-type{margin-top:0}
/* 261009 ログイン・お問い合わせでは最初の区分がカードの直後に来る（:first-of-type で 0 になる）。カードの直後は空ける */
.mb-card+.mb-sec{margin-top:28px}
/* 261011 :first-of-type はタグごとに数えるので、区分（section）の直後の form.mb-sec も「最初の form」として 0 になり、退会・口コミ投稿のガイドラインで枠がくっついていた。区分の直後は空ける */
.mb-sec+.mb-sec{margin-top:28px}
.mb-sec-title{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:1.05rem;font-weight:700;line-height:1.4;color:var(--sgn-ink-head, #323232)}
.mb-sec-title::before{content:"";flex:0 0 4px;width:4px;height:1.15em;border-radius:2px;background:var(--primary, #e85f73)}
/* フォームの先頭には CSRF の hidden が差し込まれるので :first-child では詰められない。上の余白は持たせない */
.mb-sub-title{margin:0 0 14px;font-size:.95rem;font-weight:700;color:var(--primary)}

/* ===== カード ===== */
.mb-card{background:#fff;border:1px solid var(--mb-line);border-radius:var(--mb-radius);box-shadow:0 2px 12px rgba(0,0,0,.035);overflow:hidden}
.mb-card--pad{padding:20px 16px}
.mb-card+.mb-card{margin-top:12px}

/* ===== アイコン（線画。大きさ・線の太さを全行でそろえる＝付箋 #2） ===== */
.mb-ico{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--primary)}

/* ===== メニューの行（マイページ） ===== */
.mb-menu{list-style:none;margin:0;padding:0}
.mb-menu>li+li{border-top:1px solid var(--mb-line)}
.mb-row{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px 12px 16px;background:none;border:0;font:inherit;text-align:left;color:var(--mb-text);cursor:pointer;transition:background .2s}
.mb-row:hover{background:var(--primary-pale)}
.mb-row:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
/* ラベルと右の補足は1つの箱。ラベルは1行のまま、補足は右に置き、入りきらなければ右の中で「・」や空白の位置で2行にする（行の高さは 64px のまま）。
   補足の一番長いまとまりも右に入らない幅（320px の一部の行）だけ、補足がラベルの下（右寄せ）へ回る。どちらも語の途中では折り返さない */
.mb-row-text{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 10px}
.mb-row-label{flex:0 1 auto;min-width:0;font-size:.98rem;font-weight:500;line-height:1.5;word-break:keep-all;overflow-wrap:break-word}
.mb-row-label small{display:block;font-size:.78rem;font-weight:400;color:var(--mb-sub)}
.mb-row-sub{flex:1 1 0;min-width:min-content;font-size:.8rem;line-height:1.5;color:var(--mb-sub);text-align:right;word-break:keep-all;overflow-wrap:break-word}
.mb-row-chev{width:18px;height:18px;color:var(--mb-chev)}
.mb-menu-foot{margin:14px 4px 0;text-align:right}
.mb-menu-foot a{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;color:var(--mb-sub);text-decoration:underline;text-underline-offset:3px}
.mb-menu-foot a:hover{color:var(--primary)}

/* プロフィールのカード（あなた） */
.mb-profile{display:flex;align-items:center;gap:16px;padding:18px 14px 14px 16px}
.mb-avatar{flex:0 0 64px;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--primary-light);color:var(--primary)}
.mb-avatar .mb-ico{width:34px;height:34px;stroke-width:1.2}
.mb-profile-body{flex:1 1 auto;min-width:0}
.mb-profile-name{font-size:1.25rem;font-weight:700;line-height:1.35;color:var(--sgn-ink-head, #323232);overflow-wrap:anywhere;word-break:auto-phrase}
/* ふりがなの行。右端に「プロフィール ＞」。入りきらないときはリンクだけ次の行の右へ回る（ふりがなが折り返すのは、本文の幅そのものを超えるときだけ） */
.mb-profile-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;column-gap:6px;margin-top:2px}
.mb-profile-kana{flex:1 1 auto;min-width:0;font-size:.85rem;line-height:1.5;color:var(--mb-sub);overflow-wrap:anywhere}
/* 押せる高さ 44px は保ち、上下の負の余白でカードの高さには足さない */
.mb-profile-link{flex:0 0 auto;display:inline-flex;align-items:center;gap:2px;min-height:44px;margin:-11px 0 -11px auto;font-size:.84rem;font-weight:700;color:var(--primary-ink)}
.mb-profile-link .mb-row-chev{width:16px;height:16px;color:var(--primary)}
.mb-profile-link:hover{text-decoration:underline}

/* ===== フォーム ===== */
.mb-field{margin:0 0 22px}
.mb-field:last-child{margin-bottom:0}
.mb-field:has(+ [data-mb-when][hidden]:last-child){margin-bottom:0}   /* 隠れた条件つきの欄が最後の子のとき（261026 里帰り先） */
fieldset.mb-field{min-width:0;padding:0;border:0}
legend.mb-label{padding:0}
.mb-label{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 8px;font-size:.92rem;font-weight:700;line-height:1.5;color:var(--mb-text)}
/* 必須の表示はこの1種類だけ（任意には何も付けない）。設計メモ 4章 #5 の3種混在を1つにした */
.mb-req{display:inline-block;padding:0 7px;border-radius:4px;background:var(--primary);color:#fff;font-size:.7rem;font-weight:700;line-height:1.7;letter-spacing:.04em}
.mb-input,.mb-select,.mb-textarea{display:block;width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--mb-field-line);border-radius:10px;background:#fff;font:inherit;font-size:16px;line-height:1.5;color:var(--mb-text);-webkit-appearance:none;appearance:none}
.mb-input::placeholder,.mb-textarea::placeholder{color:var(--mb-placeholder);opacity:1}
.mb-select{padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.mb-select:disabled{background-color:#f5f2f3;color:var(--mb-sub)}
.mb-textarea{min-height:168px;resize:vertical}
/* 日付欄は Chrome の内側の余白で 52px になるので、ほかの入力欄と同じ 50px にそろえる */
.mb-input[type="date"]{height:50px}
.mb-input:focus,.mb-select:focus,.mb-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(202,54,96,.16)}
.is-error .mb-input,.is-error .mb-select,.is-error .mb-textarea{border-color:var(--mb-error);background-color:var(--mb-error-soft)}
.mb-help{margin:6px 0 0;font-size:.8rem;line-height:1.7;color:var(--mb-sub)}
.mb-err{margin:6px 0 0;font-size:.84rem;font-weight:500;line-height:1.6;color:var(--mb-error)}
.mb-counter{margin-top:4px;text-align:right;font-size:.78rem;color:var(--mb-sub);font-variant-numeric:tabular-nums}
.mb-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mb-value{font-size:1rem;color:var(--mb-text);word-break:break-all}

/* パスワード（右端に表示切り替えの目のアイコン） */
.mb-pw{position:relative}
.mb-pw .mb-input{padding-right:54px}
.mb-pw-toggle{position:absolute;top:50%;right:3px;display:grid;place-items:center;width:46px;height:46px;transform:translateY(-50%);border:0;background:none;color:var(--mb-sub);cursor:pointer;border-radius:8px}
.mb-pw-toggle .mb-ico{width:22px;height:22px;color:currentColor}
.mb-pw-toggle:focus-visible{outline:2px solid var(--primary)}
.mb-pw-toggle .mb-pw-hide{display:none}
.mb-pw-toggle[aria-pressed="true"] .mb-pw-show{display:none}
.mb-pw-toggle[aria-pressed="true"] .mb-pw-hide{display:block}

/* ラジオ（ピンクの丸。横並び） */
.mb-choices{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;border:0}
.mb-choices--col{flex-direction:column}
.mb-choice{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 16px;border:1px solid var(--mb-field-line);border-radius:12px;background:#fff;font-size:.95rem;line-height:1.5;color:var(--mb-text);cursor:pointer}
.mb-choices--col .mb-choice{display:flex}
.mb-choice input{flex:0 0 20px;display:grid;place-items:center;width:20px;height:20px;margin:0;border:1.5px solid var(--mb-field-line);border-radius:50%;background:#fff;-webkit-appearance:none;appearance:none;cursor:pointer}
.mb-choice input:checked{border-color:var(--primary)}
.mb-choice input:checked::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--primary)}
.mb-choice input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mb-choice:has(input:checked){border-color:var(--primary);background:var(--primary-pale)}
.is-error .mb-choice{border-color:var(--mb-error)}

/* チェックボックス（同意） */
.mb-check{display:flex;align-items:flex-start;gap:10px;min-height:44px;padding:9px 0;font-size:.92rem;line-height:1.6;color:var(--mb-text);cursor:pointer}
.mb-check input{flex:0 0 22px;display:grid;place-items:center;width:22px;height:22px;margin:0;border:1.5px solid var(--mb-field-line);border-radius:5px;background:#fff;-webkit-appearance:none;appearance:none;cursor:pointer}
.mb-check input:checked{border-color:var(--primary);background:var(--primary)}
.mb-check input:checked::after{content:"";width:6px;height:11px;margin-top:-2px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.mb-check input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mb-check .mb-req{margin-left:8px;vertical-align:1px}
.mb-lead .mb-req{margin:0 2px;vertical-align:1px}
.mb-agree{padding:8px 14px;border:1px solid var(--sgn-stay-line, #f2b8c7);border-radius:12px;background:var(--primary-pale)}
.mb-agree a,.mb-link{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px}
.mb-agree-links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 4px;font-size:.85rem}
.mb-agree-links a{display:inline-flex;align-items:center;gap:2px;min-height:40px}

/* トグル（通知設定） */
.mb-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:60px;cursor:pointer}
.mb-toggle-text{flex:1 1 auto;min-width:0}
.mb-toggle-text strong{display:block;font-size:.95rem;font-weight:700;color:var(--mb-text)}
.mb-toggle-text small{display:block;margin-top:2px;font-size:.8rem;line-height:1.6;color:var(--mb-sub)}
.mb-switch{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.mb-switch input{position:relative;width:52px;height:30px;margin:0;border-radius:999px;background:#b8afb3;-webkit-appearance:none;appearance:none;cursor:pointer;transition:background .2s}
.mb-switch input::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.mb-switch input:checked{background:var(--primary)}
.mb-switch input:checked::after{transform:translateX(22px)}
.mb-switch input:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mb-switch-state{min-width:2.4em;font-size:.8rem;font-weight:700;color:var(--mb-sub)}
.mb-switch-state::before{content:"OFF"}
.mb-switch input:checked+.mb-switch-state{color:var(--primary)}
.mb-switch input:checked+.mb-switch-state::before{content:"ON"}

/* ===== ボタン（主＝ピンクの塗り／副＝白地＋グレーの枠） ===== */
.mb-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:52px;padding:12px 24px;border:1px solid transparent;border-radius:999px;font:inherit;font-size:1rem;font-weight:700;line-height:1.4;text-align:center;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.mb-btn .mb-ico{width:20px;height:20px;color:currentColor}
.mb-btn--primary{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(202,54,96,.22)}
.mb-btn--primary:hover{background:var(--primary-dark)}
.mb-btn--secondary{background:#fff;color:var(--mb-text);border-color:var(--mb-field-line)}
.mb-btn--secondary:hover{border-color:var(--primary);color:var(--primary)}
.mb-btn--outline{background:#fff;color:var(--primary);border-color:var(--primary)}
.mb-btn--outline:hover{background:var(--primary-pale)}
.mb-btn--danger{background:#fff;color:var(--mb-error);border-color:var(--mb-error)}
.mb-btn--danger:hover{background:var(--mb-error-soft)}
.mb-btn--block{display:flex;width:100%}
.mb-btn--sm{min-height:44px;padding:8px 18px;font-size:.88rem}
.mb-btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.mb-actions{display:flex;gap:12px;margin-top:28px}
.mb-actions .mb-btn{flex:1 1 0}
.mb-actions .mb-btn--primary{flex:2 1 0}
.mb-actions--stack{flex-direction:column}
.mb-actions--stack .mb-btn{flex:0 0 auto}
/* 確認画面の「戻る」「登録する」は別々のフォーム。フォームごと 1:2 で並べる */
.mb-btn-form{flex:1 1 0;display:flex;margin:0}
.mb-btn-form--main{flex:2 1 0}
.mb-under{margin-top:20px;text-align:center;font-size:.9rem;line-height:2}
.mb-under a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px}

/* ===== ステップ（① 入力 ― ② 確認 ― ③ 完了） ===== */
.mb-steps{display:flex;justify-content:center;margin:0 0 24px;padding:0;list-style:none;counter-reset:mbstep}
.mb-steps li{position:relative;flex:1 1 0;max-width:120px;padding-top:36px;text-align:center;font-size:.78rem;line-height:1.4;color:var(--mb-sub)}
.mb-steps li::before{counter-increment:mbstep;content:counter(mbstep);position:absolute;top:0;left:50%;z-index:1;display:grid;place-items:center;width:28px;height:28px;transform:translateX(-50%);border:1.5px solid var(--mb-field-line);border-radius:50%;background:#fff;font-size:.85rem;font-weight:700;color:var(--mb-sub)}
.mb-steps li+li::after{content:"";position:absolute;top:14px;right:50%;width:100%;height:1.5px;background:#ddd2d6}
.mb-steps li.is-done::before,.mb-steps li.is-current::before{border-color:var(--primary);background:var(--primary);color:#fff}
.mb-steps li.is-current{font-weight:700;color:var(--primary)}

/* ===== 確認画面・詳細の表 ===== */
.mb-dl{margin:0;word-break:normal}
.mb-dl-row{display:grid;grid-template-columns:9.5em 1fr;gap:12px;padding:14px 16px}
.mb-dl-row+.mb-dl-row{border-top:1px solid var(--mb-line)}
.mb-dl dt{font-size:.85rem;font-weight:700;line-height:1.6;color:var(--mb-sub)}
.mb-dl dd{margin:0;font-size:.95rem;line-height:1.6;color:var(--mb-text);word-break:break-word}
.mb-dl dd a{color:var(--primary-ink);text-decoration:underline;text-underline-offset:3px}
.mb-none{color:var(--mb-sub)}

/* ===== お知らせ（保存しました・エラー・注意） ===== */
.mb-flash{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px;padding:12px 14px;border:1px solid transparent;border-radius:12px;font-size:.9rem;line-height:1.7}
.mb-flash .mb-ico{width:20px;height:20px;margin-top:2px;color:currentColor}
.mb-flash--ok{background:var(--mb-ok-soft);border-color:#bfe3cb;color:var(--mb-ok)}
.mb-flash--error{background:var(--mb-error-soft);border-color:#f1c3c5;color:var(--mb-error)}
.mb-flash--info{background:var(--primary-pale);border-color:var(--sgn-stay-line, #f2b8c7);color:var(--mb-text)}
.mb-flash--info .mb-ico{color:var(--primary)}
.mb-flash ul{margin:0;padding:0 0 0 1.1em;list-style:disc}

/* ===== バッジ（予約・口コミの状態） ===== */
/* 261011 花弥さん決定：状態のバッジ（確認待ち・審査中）の文字だけ濃い茶 #9a5a0c（薄い背景の上で 5.19:1）。
   --sgn-day-ink は 10/7 の玉井さん指示で種別の色（#ed922b・2.28:1）に戻したので使わない。種別のタグの色は変えていない。
   261011 花弥さん決定（2 回目）：予約確定・生後◯か月のバッジも文字だけ #ca3660（10/6 までの --primary。薄いピンクの上で 3.09 → 4.64:1）。
   --primary（#e85f73）は 10/7 の玉井さん指示のボタン等の色なので変えていない */
.mb-badge{display:inline-block;padding:2px 10px;border:1px solid transparent;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.6;white-space:nowrap}
.mb-badge--pending{background:var(--sgn-day-soft, #fff8ef);border-color:var(--sgn-day-line, #f2c98f);color:#9a5a0c}
.mb-badge--confirmed{background:var(--primary-pale);border-color:var(--sgn-stay-line, #f2b8c7);color:#ca3660}
.mb-badge--completed{background:#eef1f4;border-color:#d8dee4;color:#4f5b67}
.mb-badge--cancelled{background:#f4f4f4;border-color:#e2e2e2;color:#595959}
.mb-badge--declined{background:var(--mb-error-soft);border-color:#f1c3c5;color:var(--mb-error)}
.mb-badge--review0,.mb-badge--review1{background:var(--sgn-day-soft, #fff8ef);border-color:var(--sgn-day-line, #f2c98f);color:#9a5a0c}
.mb-badge--review2{background:var(--mb-ok-soft);border-color:#bfe3cb;color:var(--mb-ok)}
.mb-badge--review3{background:#f4f4f4;border-color:#e2e2e2;color:#595959}
.mb-badge--age{background:var(--primary-pale);border-color:var(--sgn-stay-line, #f2b8c7);color:#ca3660}

/* ===== 予約・口コミの一覧 ===== */
.mb-list{list-style:none;margin:0;padding:0}
.mb-list>li+li{border-top:1px solid var(--mb-line)}
.mb-item{display:block;padding:16px;color:var(--mb-text)}
a.mb-item:hover{background:var(--primary-pale)}
.mb-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mb-item-date{font-size:.98rem;font-weight:700;line-height:1.5}
.mb-item-title{margin-top:6px;font-size:.98rem;font-weight:700;line-height:1.5;color:var(--sgn-ink-head, #323232);overflow-wrap:anywhere;word-break:auto-phrase}
.mb-item-meta{margin-top:2px;font-size:.82rem;line-height:1.6;color:var(--mb-sub)}
.mb-item-text{margin-top:8px;font-size:.9rem;line-height:1.8;white-space:pre-wrap;overflow-wrap:anywhere;word-break:auto-phrase}
.mb-item-foot{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.mb-empty{padding:28px 16px;text-align:center;font-size:.9rem;line-height:1.8;color:var(--mb-sub)}
.mb-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mb-pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--primary-pale);font-size:.75rem;font-weight:500;line-height:1.7;color:var(--primary)}
.mb-pill--best{background:var(--sgn-best-soft, #e6f7f4);color:var(--sgn-best-ink, #127a6c)}

/* ===== お気に入り ===== */
.mb-tabs{display:flex;margin:0 0 16px;border-bottom:1px solid var(--mb-line)}
.mb-tabs a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:10px 8px;border-bottom:2px solid transparent;margin-bottom:-1px;font-size:.92rem;font-weight:700;color:var(--mb-sub)}
.mb-tabs a.is-active{border-bottom-color:var(--primary);color:var(--primary)}
.mb-tabs .mb-count{font-size:.78rem;font-weight:500}
.mb-fav{display:flex;align-items:center;gap:12px;padding:14px 16px}
.mb-fav-thumb{flex:0 0 88px;width:88px;height:66px;border-radius:8px;background:var(--primary-pale);object-fit:cover}
.mb-fav-thumb--none{display:grid;place-items:center;color:var(--primary)}
.mb-fav-body{flex:1 1 auto;min-width:0}
.mb-fav-name{font-size:.98rem;font-weight:700;line-height:1.5;color:var(--sgn-ink-head, #323232);word-break:break-word}
a.mb-fav-name:hover{color:var(--primary)}
.mb-fav-meta{margin-top:2px;font-size:.8rem;line-height:1.6;color:var(--mb-sub)}
.mb-fav form{flex:0 0 auto}

/* ===== 登録情報の編集（1ページ＋アンカー） ===== */
.mb-toc{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;padding:0;list-style:none}
.mb-toc a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--mb-line);border-radius:999px;background:#fff;font-size:.85rem;font-weight:500;color:var(--mb-text)}
.mb-toc a:hover{border-color:var(--primary);color:var(--primary)}
.mb-edit-sec{margin-top:32px}
/* 固定ヘッダー（SP 60px・PC 約100px）の下に見出しが隠れないように */
.mb-edit-sec,.mb-anchor{scroll-margin-top:76px}
.mb-child{padding:16px;border:1px solid var(--mb-line);border-radius:12px;background:#fff}
.mb-child+.mb-child{margin-top:12px}
.mb-child-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 14px}
.mb-child-head strong{font-size:.95rem;color:var(--sgn-ink-head, #323232)}
.mb-child .mb-actions{margin-top:16px}
.mb-add{margin-top:16px;padding:16px;border:1px dashed var(--sgn-stay-line, #f2b8c7);border-radius:12px;background:var(--primary-pale)}

/* ===== 完了画面 ===== */
.mb-done{padding:32px 20px;text-align:center}
.mb-done-ico{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;border-radius:50%;background:var(--primary-light);color:var(--primary)}
.mb-done-ico .mb-ico{width:34px;height:34px;stroke-width:1.4}
.mb-done-title{font-size:1.2rem;font-weight:700;line-height:1.5;color:var(--sgn-ink-head, #323232)}
.mb-done .mb-text{margin-top:10px}
.mb-done-list{display:inline-block;padding-left:1.4em;text-align:left}   /* 予約の前に足りない項目（261026）。中央寄せの中で左揃えの塊にする */

/* ===== 口コミのガイドライン ===== */
.mb-guide+.mb-guide{margin-top:16px}
.mb-guide .sgn-list{grid-template-columns:minmax(0,1fr)}
.mb-guide .sgn-list>li small{display:block;font-size:.8rem;color:var(--mb-sub)}

/* ===== 幅ごとの調整 ===== */
@media(max-width:400px){
  .mb-grid2{grid-template-columns:1fr}
  .mb-dl-row{grid-template-columns:1fr;gap:2px}
  .mb-row{gap:12px;padding-right:10px}
}
@media(min-width:769px){
  .mb-main{padding:36px 0 96px}
  .mb-title{font-size:1.75rem}
  .mb-card--pad{padding:28px 28px}
  .mb-edit-sec,.mb-anchor{scroll-margin-top:116px}
}

/* 261101 文字が中心のページ（規約・プライバシー・計算根拠・運営会社）と施設向けのページ（施設向け・申込）は地を #ffffff に（玉井さん 17:42）。
   お問い合わせ・ログイン・マイページなど白い箱があるページは common.css の地のまま。施設向けの帯は for_facility.css */
body:has(.fr-basis),body:has(.ff-main),body:has(.mb-main--white){background:#fff}