:root{
    --green:#06c755; --green2:#04b34c; --green-d:#039a42; --green-rgb:6,199,85;
    --ink:#2b2f36; --sub:#8a9099; --line:#eceff2; --bg1:#e9faf0; --bg2:#f6f8f7;
  }
  *{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
  body{ margin:0; font-family:-apple-system,"Hiragino Kaku Gothic ProN",sans-serif; color:var(--ink);
    background:linear-gradient(180deg,var(--bg1),var(--bg2) 240px); min-height:100vh; }
  header{ background:linear-gradient(135deg,var(--green),var(--green2)); color:#fff; padding:15px 13px 17px;
    font-weight:800; font-size:15px; letter-spacing:.01em; border-radius:0 0 22px 22px;
    box-shadow:0 6px 18px rgba(var(--green-rgb),.25); display:flex; align-items:center; justify-content:space-between; gap:8px; }
  header .htitle{ display:flex; align-items:center; gap:8px; min-width:0; }
  header .htitle .ht{ white-space:nowrap; line-height:1.25; }
  header .logo{ width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
    background:rgba(255,255,255,.22); border-radius:9px; font-size:14px; flex:0 0 auto; }
  header .hdrlogos{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:#fff; border-radius:8px; padding:3px 6px; }
  header .hdrlogos img{ display:block; height:13px; width:auto; max-width:104px; object-fit:contain; }
  header .hdrtheme{ display:flex; flex-direction:column; align-items:center; gap:5px; border:0; background:none; cursor:pointer; padding:2px; flex:0 0 auto; }
  header .hdrtheme:active{ transform:scale(.94); }
  header .hdrtheme-lbl{ font-size:10.5px; color:#fff; font-weight:800; opacity:.98; white-space:nowrap; }
  .rainbow-dot{ width:20px; height:20px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.15);
    background:conic-gradient(#ff3b30,#ff9500,#ffcc00,#34c759,#00c7be,#007aff,#5856d6,#af52de,#ff2d55,#ff3b30); }
  .wrap{ padding:16px 5px; max-width:560px; margin:0 auto; animation:fade .4s ease both; }
  @keyframes fade{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
  .card{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:14px;
    box-shadow:0 2px 14px rgba(20,40,30,.05); }
  .muted{ color:var(--sub); font-size:13px; }
  /* 初回ログイン画面の「新規入会者は担当者のシステム入力後」案内。読み飛ばされると
     何度も登録を試して1時間ブロックに掛かるので、muted より一段はっきり見せる。 */
  .regnote{ margin:.4em 0 .6em; padding:9px 11px; font-size:13px; line-height:1.6;
            background:rgba(var(--green-rgb),.07); border-left:3px solid var(--green);
            border-radius:8px; color:var(--ink); }
  .hello{ font-size:16px; } .hello b{ font-size:19px; }
  .btn{ display:block; width:100%; padding:15px; border:0; border-radius:14px;
    background:linear-gradient(135deg,var(--green),var(--green2)); color:#fff; font-size:16px; font-weight:800;
    box-shadow:0 6px 16px rgba(var(--green-rgb),.3); transition:transform .08s; }
  .btn:active{ transform:scale(.98); }
  input[type=text],input[type=date],input[type=email],input[type=tel]{ width:100%; padding:13px; font-size:16px; border:1.5px solid var(--line); border-radius:12px; outline:none; background:#fff; }
  input[type=text]:focus,input[type=date]:focus,input[type=email]:focus,input[type=tel]:focus{ border-color:var(--green); }
  .storebtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border:2px solid var(--green);
    border-radius:14px; background:#fff; color:var(--green); font-weight:800; margin-bottom:10px; transition:transform .08s; }
  .storebtn:active{ transform:scale(.98); }
  .storebtn.on{ background:linear-gradient(135deg,var(--green),var(--green2)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(var(--green-rgb),.3); }
  .storebtn .tag{ font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; background:#eafaf0; color:var(--green-d); }
  .storebtn.on .tag{ background:rgba(255,255,255,.25); color:#fff; }
  .storesel{ width:100%; padding:13px; font-size:15px; border:1.5px solid var(--line); border-radius:12px; background:#fff; }
  .todaypill{ display:inline-block; padding:5px 13px; border-radius:999px; background:rgba(var(--green-rgb),.1);
    color:var(--green-d); font-weight:800; font-size:13px; border:1.5px solid rgba(var(--green-rgb),.35); }
  .freq{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
  .freqchip{ position:relative; flex:0 0 calc((100% - 16px)/3); padding:12px 6px; border:2px solid var(--green); border-radius:14px;
    background:#fff; color:var(--green); font-weight:800; font-size:13px; text-align:center; transition:transform .08s; }
  .freqchip:active{ transform:scale(.97); }
  .freqchip.on{ background:linear-gradient(135deg,var(--green),var(--green2)); color:#fff; border-color:transparent; box-shadow:0 6px 16px rgba(var(--green-rgb),.3); }
  .freqchip .fx{ position:absolute; top:-7px; right:-7px; width:19px; height:19px; line-height:17px; border-radius:50%;
    background:#b8bec4; color:#fff; font-size:12px; font-weight:700; box-shadow:0 1px 3px rgba(0,0,0,.15); }
  .tabs{ display:flex; gap:6px; margin-bottom:14px; background:#e6ebe8; padding:5px; border-radius:14px; }
  .tab{ flex:1; text-align:center; padding:11px; border-radius:10px; font-weight:800; color:#7a8189; transition:.15s; }
  .tab.on{ background:#fff; color:var(--green-d); box-shadow:0 2px 8px rgba(0,0,0,.08); }
  .calnav{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .calnav .caltitle{ font-weight:800; font-size:16px; color:var(--green-d); }
  .calnav button{ width:38px; height:38px; border:1.5px solid var(--line); border-radius:12px; background:#fff;
    color:var(--green-d); font-size:20px; font-weight:800; line-height:1; transition:transform .08s; }
  .calnav button:active{ transform:scale(.94); }
  .calnav button:disabled{ opacity:.28; color:#aeb4ba; }
  .calhead{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11px; font-weight:800; color:#8a9199; margin-bottom:6px; }
  .calhead .sat{ color:#2a72e5; } .calhead .sun{ color:#e5484d; }
  .calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
  .cday{ aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; text-align:center;
    border:1.5px solid var(--line); border-radius:12px; background:#fff; font-size:15px; font-weight:800; transition:transform .08s; }
  .cday[data-d]:active{ transform:scale(.94); }
  .cday.blank{ border:0; background:transparent; }
  .cday.gray{ opacity:.32; }
  /* すでにご予約がある日＝押せる（空き状況を見られる・2026-09-06）。グレーにしない＝押せる日だと判る */
  .cday.mine{ background:rgba(var(--green-rgb),.10); border-color:rgba(var(--green-rgb),.38); font-weight:800; }
  .cday.on{ background:linear-gradient(135deg,var(--green),var(--green2)); color:#fff; border-color:transparent; box-shadow:0 6px 14px rgba(var(--green-rgb),.32); }
  .cday.sat{ color:#2a72e5; } .cday.sun{ color:#e5484d; }
  .cday.on.sat,.cday.on.sun{ color:#fff; }
  .slot{ display:flex; justify-content:space-between; align-items:center; padding:13px 14px; border:1px solid var(--line);
    border-left:4px solid var(--green); border-radius:12px; margin-bottom:9px; background:#fff; box-shadow:0 1px 8px rgba(20,40,30,.04); }
  .slot .t{ font-weight:800; font-size:17px; } .slot .tr{ color:var(--sub); font-size:13.5px; margin-top:3px; display:flex; align-items:center; }
  .slot button{ padding:9px 20px; border:0; border-radius:20px; background:linear-gradient(135deg,var(--green),var(--green2));
    color:#fff; font-weight:800; box-shadow:0 4px 12px rgba(var(--green-rgb),.3); transition:transform .08s; }
  .slot button:active{ transform:scale(.95); }
  .plan{ background:linear-gradient(135deg,rgba(var(--green-rgb),.1),rgba(var(--green-rgb),.04)); border:1px solid rgba(var(--green-rgb),.24); font-weight:600; }
  .bk{ padding:13px 14px; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:12px; margin-bottom:9px; background:#fff; }
  .bk .d{ font-weight:800; } .bk .c{ margin-top:10px; }
  /* 予約カード＝1行：左=トレーナー写真(小)・中央=日時/店舗/担当・右=キャンセルボタン（2026-07-17 本人依頼・高さ抑制） */
  .bk-row{ display:flex; align-items:center; gap:10px; }
  .bk-left{ display:flex; align-items:center; gap:10px; flex:1 1 auto; min-width:0; }   /* 文字（左）＋アイコン（そのすぐ右）をひとまとめ */
  .bk-info{ flex:0 1 auto; min-width:0; } .bk-info .d{ font-size:14px; } .bk-info .muted{ line-height:1.5; font-size:12.5px; }
  /* 右端＝「変更」と「キャンセル」を縦に2つ（2026-09-06 本人依頼・お客様の声「変更ボタンが欲しい」） */
  .bk-c{ flex:0 0 auto; display:flex; flex-direction:column; align-items:stretch; gap:6px; }
  .bk .cxlnote{ display:block; margin:6px 0 0; }
  .bk .cancel{ padding:9px 16px; border:1.5px solid #e5484d; color:#e5484d; background:#fff; border-radius:20px; font-weight:700; }
  .bk .cancel[disabled]{ border-color:#d7dbdf; color:#aeb4ba; }
  .bk .chgbtn{ padding:9px 16px; border:1.5px solid var(--green); color:var(--green-d); background:#fff; border-radius:20px; font-weight:700; white-space:nowrap; cursor:pointer; }
  .bk .chgbtn:active{ transform:scale(.96); }
  /* お時間の変更中に画面の上へ出す帯 */
  .chgbar{ background:#fff8ec; border:1.5px solid #f0d9a8; border-radius:12px; padding:11px 13px; margin-bottom:10px; }
  .chgbar .t{ font-weight:800; color:#8a6412; font-size:13.5px; line-height:1.6; }
  .chgbar .s{ color:#7a6a4a; font-size:12.5px; line-height:1.65; margin-top:3px; }
  .chgbar button{ margin-top:8px; padding:8px 14px; border:1.5px solid #d9c08a; background:#fff; color:#8a6412; border-radius:18px; font-weight:800; font-size:12.5px; cursor:pointer; }
  .bk .cxlnote{ display:inline-block; margin-left:8px; font-size:11px; color:#767c83; line-height:1.5; vertical-align:middle; }
  .histhead{ font-weight:800; color:#5a636b; margin:20px 0 8px; font-size:14px; cursor:pointer; user-select:none;
    background:#fff; border:1px solid var(--line); border-radius:12px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; }
  .histhead:active{ transform:scale(.99); }
  .harrow{ color:var(--green-d); font-size:12px; }
  .bk.hist{ border-left-color:#c7ccd1; opacity:.9; }
  .hbadge{ font-size:11px; font-weight:800; padding:2px 8px; border-radius:999px; margin-left:6px; white-space:nowrap; }
  .hbadge.cxl{ background:#fdecec; color:#c0392b; } .hbadge.done{ background:#eef0f2; color:#7a8189; }
  .hbadge.waiting{ background:#fff3e0; color:#c67a12; } .hbadge.notif{ background:#e7f6ec; color:#039a42; }
  /* キャンセル待ち（満席枠） */
  .wlhead{ font-weight:800; color:#8a7020; background:#fff8ec; border:1px solid #f2e2c0; border-radius:10px; padding:8px 12px; margin:16px 0 9px; font-size:13px; }
  .slot.wl{ background:#edf0f2; border-color:#e0e4e7; }        /* キャンセル待ち（満席）＝薄グレーのタイル */
  .slot.wl .t{ color:#7a828a; } .slot.wl .tr{ color:#98a0a7; }
  .slot.wl .wlbtn{ padding:9px 14px; border:1px solid #e2b96a; border-radius:20px; background:#fff6e6; color:#a4600a; font-weight:800; font-size:12.5px; cursor:pointer; white-space:nowrap; }
  .slot.wl .wlbtn:active{ transform:scale(.96); }
  .slot.wl .wlon{ color:#039a42; font-weight:800; font-size:13px; white-space:nowrap; }
  /* お時間の変更中＝いまのご予約と同じお時間（グレーアウト・押せない。本人指示 2026-09-06） */
  .slot.cur{ background:#eef0f2; border-color:#e0e4e7; opacity:.85; }
  .slot.cur .t{ color:#7a828a; }
  .slot.cur .tr{ color:#98a0a7; filter:grayscale(1); }   /* 担当名とお写真もグレーに（写真は背景画像の場合もある） */
  .slot .curnow{ color:#6b7279; font-weight:800; font-size:12.5px; white-space:nowrap;
    border:1.5px solid #d7dbdf; border-radius:20px; padding:8px 13px; background:#f7f8f9; }
  /* すでにご予約がある日の空き枠＝見えるだけ（1日1件なので取れない・2026-09-06） */
  .slot .viewonly{ color:#7a828a; font-weight:700; font-size:12px; line-height:1.4; text-align:center;
    border:1.5px dashed #d7dbdf; border-radius:14px; padding:7px 11px; background:#fafbfb; max-width:104px; }
  /* 同じ時間に2ブースある枠＝横2列（本人依頼 2026-09-18＝1列だと同じ時間か分かりにくい）。
     ボタンは名前とアイコンの下へ（.slotのDOM順は inner→button のまま・column化で自動的に下へ回る）。 */
  .slot-pairrow{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; }
  .slot-pairrow .slot{ margin-bottom:0; }
  .slot.pair{ flex-direction:column; align-items:center; text-align:center; gap:8px; padding:12px 10px; }
  .slot.pair .t{ font-size:15px; }
  /* 狭い機種（320px級）で「担当：石川」が『担/当：』と字の途中で折れないよう、折るなら行ごと折る */
  .slot.pair .tr{ justify-content:center; flex-wrap:wrap; white-space:nowrap; }
  .slot.pair > button{ width:100%; padding:9px 10px; box-sizing:border-box; }
  .slot.pair .wlbtn{ white-space:normal; line-height:1.45; padding:8px 6px; }   /* 文中の<br>で2行＝語の途中で折らない */
  .slot.pair .curnow{ width:100%; box-sizing:border-box; }
  .slot.pair .viewonly{ max-width:none; width:100%; box-sizing:border-box; }
  .bookednote{ background:rgba(var(--green-rgb),.08); border:1.5px solid rgba(var(--green-rgb),.3);
    border-radius:12px; padding:11px 13px; margin-bottom:10px; }
  .bookednote .t{ font-weight:800; color:var(--green-d); font-size:13.5px; line-height:1.6; }
  .bookednote .s{ color:#5a636b; font-size:12.5px; line-height:1.7; margin-top:3px; }
  .bookednote button{ margin-top:8px; padding:9px 15px; border:1.5px solid var(--green); background:#fff;
    color:var(--green-d); border-radius:18px; font-weight:800; font-size:12.5px; cursor:pointer; }
  .wlmyhead{ font-weight:800; color:#5a636b; margin:20px 0 9px; font-size:14px; }
  .bk .wlcancel{ padding:7px 14px; border:1px solid var(--line); border-radius:18px; background:#fff; color:#767c83; font-weight:700; font-size:12.5px; cursor:pointer; }
  .hnote{ font-size:12px; color:#c0392b; margin-top:5px; font-weight:600; }
  /* 過去の履歴：トレーニングメニューを見る（本人依頼 2026-08-07・トレーナーが入力したメニューをお客様も見られる） */
  .bk .mnview{ padding:8px 11px; border:1.5px solid var(--green); border-radius:14px; background:#f4faf6; color:var(--green-d); font-weight:800; font-size:11.5px; line-height:1.45; cursor:pointer; text-align:center; white-space:nowrap; }
  .bk .mnview:active{ transform:scale(.96); }
  .menu-view-body{ text-align:left; white-space:pre-wrap; font-size:14px; line-height:1.9; background:#f7f9fa; border:1px solid var(--line); border-radius:10px; padding:12px; max-height:55vh; overflow-y:auto; }
  .notice{ font-size:12px; color:#767c83; line-height:1.9; background:#fbfcfb; }
  .notice a{ color:var(--green-d); font-weight:600; }
  .center{ text-align:center; padding:34px 10px; color:var(--sub); }
  .err{ color:#e5484d; }
  .modal-bg{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; padding:24px; z-index:100; animation:fade .2s ease both; }
  /* カスタムプルダウン（ネイティブselectの全画面化を避け、四方に余白＝後ろの画面が見える・外側タップで閉じる）。全プルダウン共通の見た目。 */
  .pickbtn{ text-align:left; cursor:pointer; position:relative; }
  .picker-card{ background:#fff; border-radius:16px; width:100%; max-width:420px; max-height:74vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,.3); animation:pickpop .18s ease both; }
  @keyframes pickpop{ from{opacity:0;transform:scale(.96);} to{opacity:1;transform:none;} }
  .picker-h{ padding:14px 16px; font-weight:800; font-size:15px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
  .picker-x{ border:0; background:none; font-size:17px; color:var(--sub); padding:2px 8px; cursor:pointer; }
  .picker-list{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:8px; }
  .picker-it{ display:block; width:100%; text-align:left; padding:14px 14px; margin:4px 0; border:1px solid var(--line); border-radius:11px; background:#fff; font-size:15px; font-weight:700; color:var(--ink); cursor:pointer; }
  .picker-it:active{ transform:scale(.99); filter:brightness(.96); }
  .modal{ background:#fff; border-radius:20px; padding:26px 22px; max-width:360px; width:100%; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.25); }
  .modal-emoji{ font-size:46px; line-height:1; }
  .modal-title{ font-size:23px; font-weight:800; margin:8px 0 14px; color:var(--green-d); }
  .modal-body{ font-size:19px; font-weight:700; line-height:1.6; margin-bottom:14px; }
  .modal-note{ font-size:14px; color:#3a6a4c; background:#eafaf0; border-radius:12px; padding:13px; margin-bottom:18px; line-height:1.7; }
  .modal .btn{ max-width:200px; margin:0 auto; }
  .modal-actions{ display:flex; flex-direction:column; gap:10px; }
  .modal-actions .btn{ max-width:none; margin:0; }
  .btn.ghost{ background:#fff; color:var(--green-d); border:2px solid var(--line); box-shadow:none; }
  /* 使い方ボタン＆ガイド */
  .usagewrap{ margin:18px 0 8px; text-align:center; }
  .usagebtn{ width:100%; padding:14px; border:1.5px solid var(--line); border-radius:14px; background:#fff; color:var(--green-d); font-weight:800; font-size:15px; cursor:pointer; }
  .usagebtn:active{ transform:scale(.98); }
  .guide-bg{ position:fixed; inset:0; background:var(--bg,#f5f7f8); z-index:200; overflow-y:auto; -webkit-overflow-scrolling:touch; animation:fade .2s ease both; }
  .guide-head{ position:sticky; top:0; background:linear-gradient(135deg,var(--green),var(--green-d)); color:#fff; display:flex; align-items:center; justify-content:space-between; padding:15px 16px; box-shadow:0 2px 8px rgba(0,0,0,.12); z-index:2; }
  .guide-head .gt{ font-weight:800; font-size:17px; }
  .guide-head .gclose{ background:rgba(255,255,255,.22); border:0; color:#fff; font-size:20px; font-weight:800; width:34px; height:34px; border-radius:50%; cursor:pointer; line-height:1; }
  .guide-body{ max-width:560px; margin:0 auto; padding:16px 14px 40px; }
  .glead{ color:#5a636b; font-size:13.5px; line-height:1.8; margin:2px 4px 14px; }
  .gcard{ background:#fff; border:1px solid var(--line); border-left:4px solid var(--green); border-radius:14px; padding:14px 15px; margin-bottom:12px; }
  .gcard h3{ margin:0 0 7px; font-size:15.5px; font-weight:800; color:var(--ink,#20303a); }
  .gcard p{ margin:0 0 6px; font-size:13.5px; line-height:1.8; color:#42505a; }
  .gcard p:last-child{ margin-bottom:0; }
  .gcard b{ color:var(--green-d); }
  .gcard .gwarn{ color:#c0392b; font-weight:700; }
  .gcard ol{ margin:4px 0 2px; padding-left:1.3em; }
  .gcard ol li{ font-size:13.5px; line-height:1.9; color:#42505a; }
  /* 配色スイッチ */
  .themebtn{ display:flex; flex-direction:column; align-items:center; gap:6px; border:0; background:none; cursor:pointer; padding:2px 0; }
  .themebtn:active{ transform:scale(.94); }
  .themedot{ width:23px; height:23px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1.5px var(--line); }
  .themelbl{ font-size:12px; color:var(--sub); font-weight:800; white-space:nowrap; }
  .theme-list{ display:flex; flex-wrap:wrap; gap:15px; justify-content:center; padding:4px 2px; }
  .theme-auto{ display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:10px 12px; border:1.5px solid var(--line);
    border-radius:12px; background:#fff; font-weight:800; font-size:13.5px; color:#42505c; cursor:pointer; }
  .theme-auto.on{ border-color:var(--green); background:rgba(var(--green-rgb),.08); color:var(--green-d); }
  .theme-auto .theme-sw{ flex:0 0 auto; }
  /* 店舗ブランドの色3択 */
  .theme-brands{ display:flex; gap:6px; margin-top:8px; }
  .theme-brand{ flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; min-height:52px; padding:8px 4px;
    border:1.5px solid var(--line); border-radius:12px; background:#fff; font-weight:800; font-size:11px; color:#42505c; cursor:pointer; line-height:1.25; }
  .theme-brand.on{ border-color:var(--green); background:rgba(var(--green-rgb),.08); color:var(--green-d); }
  .theme-brand .theme-sw{ flex:0 0 auto; }
  .theme-opt{ width:40px; height:40px; border-radius:50%; border:2.5px solid transparent; padding:0; background:none; cursor:pointer; display:flex; align-items:center; justify-content:center; }
  .theme-opt.on{ border-color:var(--green-d); }
  .theme-sw{ width:31px; height:31px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.10); }
  /* ホームの機能ボタン（自分記録・食事記録・体重/体組成・生理周期・天気）＝必ず横1行に収める */
  .featrow{ display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; gap:6px; }
  .featbtn{ display:flex; flex-direction:column; align-items:center; gap:3px; border:0; background:none; cursor:pointer; padding:0; flex:1 1 0; min-width:0; }
  .featbtn:active{ transform:scale(.93); }
  .featbtn .fbi{ font-size:22px; line-height:1; height:26px; display:flex; align-items:center; justify-content:center; } /* 絵文字ごとの高さ差を吸収して天気アイコンも他と整列 */
  .featbtn .fbl{ font-size:10px; color:var(--sub); font-weight:800; white-space:normal; text-align:center; line-height:1.15; }
  .featbtn .fbv{ font-size:11px; font-weight:800; line-height:1.12; text-align:center; white-space:normal; margin-top:1px; }
  /* ホーム2行目：目標（左から3列ぶんの幅）＋UV指数＋洗濯の乾きやすさ。上の行と同じ5列グリッドで綺麗に整列 */
  .featrow2{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; align-items:stretch; margin-top:14px; }
  .goalbox{ grid-column:span 3; min-width:0; text-align:left; border:1.5px solid var(--line); background:linear-gradient(#ffffff,#f7fbf9); border-radius:14px; padding:8px 11px; cursor:pointer; display:flex; flex-direction:column; }
  .goalbox:active{ transform:scale(.98); }
  .goalbox .gh{ font-size:11.5px; font-weight:800; color:var(--green-d); }
  .goalbox .gb{ font-size:12.5px; color:var(--ink); line-height:1.45; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
  .goalbox .gempty{ font-size:12px; color:var(--sub); line-height:1.45; margin-top:5px; }
  .goalbox .gd{ font-size:9.5px; color:var(--sub); margin-top:auto; padding-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* 記録メニュー＝画面下の固定ドック（開閉可・既定=開。2026-07-17 本人依頼） */
  #fisDock{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.97);
    border-top:1px solid var(--line); box-shadow:0 -4px 18px rgba(0,0,0,.08);
    padding:0 10px calc(6px + env(safe-area-inset-bottom)); }
  #fisDock .dockin{ max-width:560px; margin:0 auto; }
  .dockbar{ display:flex; align-items:center; gap:2px; }
  #dockToggle{ flex:1; min-height:44px; border:0; background:none; color:var(--sub); font-size:11.5px; font-weight:800;
    padding:6px 0 4px; cursor:pointer; letter-spacing:.04em; text-align:center; }
  .dockmini{ flex:0 0 auto; width:44px; height:44px; border:0; background:none; font-size:17px; cursor:pointer;
    color:var(--sub); border-radius:12px; display:flex; align-items:center; justify-content:center; }
  .dockmini:active{ transform:scale(.92); }
  #dockBody{ padding-bottom:4px; }
  #dockBody .featrow2{ margin-top:10px; }
  /* 項目を減らしても崩れない：アイコンは中央寄せ・1個あたりの幅を一定に */
  #dockBody .featrow{ justify-content:center; gap:8px; }
  #dockBody .featrow .featbtn{ flex:0 1 70px; }
  /* タブレット・PC（広い画面）ではドックをコンパクトに＝全項目を1行に並べ、はみ出したら右へスクロール（2026-07-17 本人依頼） */
  @media (min-width:700px){
    #fisDock{ padding-bottom:8px; }
    #fisDock .dockin{ max-width:820px; }
    #dockToggle{ min-height:30px; font-size:10.5px; padding:4px 0 2px; }
    .dockmini{ width:34px; height:34px; font-size:14px; }
    #dockBody{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:12px;
      overflow-x:auto; -webkit-overflow-scrolling:touch; padding:2px 2px 8px; }
    #dockBody .featrow, #dockBody .featrow2{ display:contents; }   /* 2行構成を解いて1行のフレックスに */
    #fisDock .featbtn{ flex:0 0 auto; min-width:62px; }
    #fisDock .featbtn .fbi{ font-size:17px; height:20px; }
    #fisDock .featbtn .fbl{ font-size:9px; }
    #fisDock .featbtn .fbv{ font-size:10px; }
    #fisDock .goalbox{ flex:0 0 240px; padding:6px 9px; }
    #fisDock .goalbox .gh{ font-size:10.5px; }
    #fisDock .goalbox .gb{ font-size:11.5px; -webkit-line-clamp:1; }
  }
  /* ブランド別トーン（テーマ「おまかせ」時。フォントは全ブランドともゴシック基本＝明朝は使わない） */
  body.bt-neutral{ --sub:#6e7680; }   /* 男女共通＝コントラスト強めで読みやすく */
  body.bt-ladys{ --sub:#8a7d82; }
  body.bt-pilates{ --sub:#7d7887; }
  /* 可読性（40代以上にも読みやすく）：小さめ文字の底上げ */
  .muted{ font-size:13.5px; }
  .featbtn .fbl{ font-size:10.5px; }
  .notice{ font-size:12.5px; color:#6f7680; }
  /* 店舗ボタンの2行ラベル（1行目=ブランド／2行目=店名・中央揃え） */
  .curstore{ text-align:center; }
  .stb2{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0; }
  .stb2-b{ font-size:11.5px; font-weight:800; opacity:.8; line-height:1.2; }
  .stb2-n{ font-size:15px; font-weight:800; line-height:1.25; word-break:break-word; }
  .freqchip .stb2-b{ font-size:9.5px; }
  .freqchip .stb2-n{ font-size:12px; }
  /* よく利用する店舗＝小さめチップ（選択中＋ほかの店舗の下に控えめに） */
  .freq-sm{ gap:6px; margin-bottom:2px; }
  .freq-sm .freqchip{ padding:6px 4px; border-width:1px; border-radius:11px; }
  .freq-sm .freqchip .stb2-b{ font-size:8.5px; }
  .freq-sm .freqchip .stb2-n{ font-size:10.5px; font-weight:700; }
  .freq-sm .freqchip .fx{ width:16px; height:16px; line-height:14px; font-size:10px; top:-6px; right:-6px; }
  /* 目標ボックス：右下に編集マーク（タップで編集できると分かるように） */
  .goalbox{ position:relative; }
  .goalbox::after{ content:'✎ 編集'; position:absolute; right:9px; bottom:5px; font-size:9.5px; font-weight:800; color:var(--sub); pointer-events:none; }
  .goalbox .gd{ padding-right:48px; }
  /* 目標に写真が添付されていたら、ダイジェストにも小さくサムネイル表示（2026-07-17 本人依頼） */
  #goalPrevPhoto{ position:absolute; right:8px; top:7px; width:36px; height:36px; object-fit:cover; border-radius:8px; border:1px solid rgba(0,0,0,.08); }
  .goalbox.haspic .gh, .goalbox.haspic .gb, .goalbox.haspic .gempty{ padding-right:44px; }
  /* カレンダーの空き状況記号（◎空きあり／△残りわずか／×満席／−受付終了・2026-07-17） */
  .cday{ flex-direction:column; gap:1px; }
  .cav{ display:block; font-size:8.5px; font-weight:800; line-height:1; height:9px; }
  .cav-ok{ color:var(--green-d); }
  .cav-few{ color:#c9932e; }
  .cav-full{ color:#c0576b; }
  .cav-na{ color:#c3bab2; }
  /* ★1日1件（2026-08-19）＝すでにご予約がある日。◎△×−とは別の色で「予約済」と出す。 */
  .cav-mine{ color:var(--green-d); font-size:7.5px; letter-spacing:-.3px; }
  .cday.gray .cav-mine{ color:#8aa596; }
  .cday.on .cav{ color:#fff; }
  /* 画像ビューア（写真タップで全画面・ピンチ拡大） */
  #imgViewer{ position:fixed; inset:0; background:rgba(10,8,8,.93); z-index:9999;
    display:flex; align-items:center; justify-content:center; touch-action:none; overflow:hidden; }
  #imgViewer #ivImg{ max-width:96vw; max-height:92vh; object-fit:contain; transform-origin:center center;
    transition:transform .06s linear; user-select:none; -webkit-user-select:none; border-radius:6px; }
  #imgViewer #ivClose{ position:absolute; top:calc(10px + env(safe-area-inset-top)); right:12px; width:44px; height:44px;
    border:0; border-radius:50%; background:rgba(255,255,255,.18); color:#fff; font-size:24px; font-weight:800; cursor:pointer; line-height:1; z-index:2; }
  #imgViewer #ivHint{ position:absolute; bottom:calc(18px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.55); color:#fff; font-size:11.5px; font-weight:700; border-radius:999px; padding:7px 14px;
    white-space:nowrap; pointer-events:none; opacity:1; transition:opacity .6s; }
  /* 写真・グラフは拡大できることが分かるように（PCはズームカーソル） */
  .guide-body img:not(#ivImg), #mlPrev img, svg[data-zoom], #bgChart{ cursor:zoom-in; }
  /* 初回登録：ブランドロゴ・性別の選択ボタン */
  .gdbtn{ flex:1; min-height:48px; padding:9px 4px; border:1.5px solid var(--line); border-radius:12px;
    background:#fff; font-weight:800; font-size:12.5px; line-height:1.35; color:#42505c; cursor:pointer; }
  .gdbtn.on{ border-color:var(--green); background:rgba(var(--green-rgb),.08); color:var(--green-d); }
  .brlogo{ flex:1; min-height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
    padding:12px 6px; border:1.5px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; min-width:0; }
  .brlogo .brlogo-imgs{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:32px; }
  .brlogo img{ display:block; max-width:100%; max-height:28px; object-fit:contain; }
  .brlogo .brlogo-t{ font-size:10px; font-weight:800; color:var(--sub); line-height:1.45; text-align:center; }
  .brlogo.on{ border-color:var(--green); border-width:2px; background:rgba(var(--green-rgb),.07); }
  .brlogo.on .brlogo-t{ color:var(--green-d); }