/* 段階22：Google の書体は layout.php の <link> で読む（@import だと読み込みが遅れて画面がちらつく） */
/* 段階19：見出し・数字の書体を RESTORE BASE / CIRCLE のロゴと同じ系統（Anton）に。自前配信（OFL） */
@font-face { font-family:'Anton'; src:url('fonts/Anton-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:block; }
:root { --fhead:'Anton','Barlow Condensed','Arial Narrow',sans-serif; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height:100%;
  overflow:hidden;
  overscroll-behavior:none;
  position:fixed;
  inset:0;
  width:100%;
}
body.rl {
  --jet:#0D0D0C; --panel:#1C1C1A; --panel2:#262523; --rule:#3E3D38;
  --fg:#F7F7F4; --fg60:#B4B3AA; --fg30:#86857D;
  --yellow:#FFD400; --sky:#5CC8F5; --mint:#3ED9A0; --coral:#FF8A47; --red:#FF6B4A;
  font-family:'Zen Kaku Gothic New',system-ui,sans-serif;
  background:var(--jet); color:var(--fg);
  display:flex; justify-content:center; -webkit-font-smoothing:antialiased;
}
button, input, select { font-family:inherit; font-size:16px; color:var(--fg); }
button { cursor:pointer; border:none; background:none; }
a { color:var(--yellow); }
:focus-visible { outline:3px solid var(--yellow); outline-offset:2px; }

.shell { width:100%; max-width:460px; height:100%; background:var(--jet);
  border-left:1px solid var(--rule); border-right:1px solid var(--rule);
  display:flex; flex-direction:column; overflow:hidden; }
.shell > main { flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
.shell > .head, .shell > .tabs, .shell > .flash, .shell > .gatebar { flex:0 0 auto; }

/* header */
.head { background:var(--jet); padding:13px 15px; border-bottom:1px solid var(--rule); }
.brand { display:flex; align-items:center; gap:8px; }
.mark { width:34px; height:34px; display:block; flex:none; }
.mark img { width:34px; height:34px; display:block; border-radius:50%; }
.brand h1 { font-family:var(--fhead); font-weight:400; font-size:21px; letter-spacing:.08em; white-space:nowrap; line-height:1; margin-top:2px; }
.brand h1 em { font-style:normal; color:var(--yellow); }
.rl { font-synthesis:none; }   /* Anton は1ウェイトなので擬似ボールドをかけない */
.badge { margin-left:auto; font-size:10px; letter-spacing:.04em; padding:4px 7px 3px; color:var(--jet); font-weight:700; }

.pane { padding:15px 11px 28px; }
.flash { margin:11px 11px 0; padding:12px 13px; font-size:13.5px; background:var(--yellow); color:var(--jet); font-weight:500; }
.flash[data-type="err"] { background:var(--red); color:#fff; }

.sheet, .block { background:var(--panel); border:1px solid var(--rule); padding:14px; margin-bottom:11px; }
.sheet-h { display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.08em; color:var(--fg60); padding-bottom:10px; margin-bottom:13px; border-bottom:1px solid var(--rule); }
.block-h { margin-bottom:13px; }
.block-h h3 { font-size:15px; font-weight:700; }

.f { margin-bottom:13px; }
.f label { display:block; font-size:13.5px; color:var(--fg60); margin-bottom:6px; }
.f input, .f select { width:100%; padding:12px 11px; background:var(--jet); border:1px solid var(--rule); min-height:48px; }

.save { width:100%; padding:15px; background:var(--yellow); color:var(--jet); font-size:15px; font-weight:700; min-height:52px; }
.alt  { width:100%; padding:14px; background:var(--jet); border:1px solid var(--yellow); color:var(--yellow); font-size:14.5px; font-weight:700; min-height:50px; }

.priv { display:flex; align-items:flex-start; gap:11px; margin-bottom:13px; padding:12px; background:var(--panel2);
  font-size:13px; line-height:1.7; color:var(--fg60); text-align:left; width:100%; cursor:pointer; }
.priv b { color:var(--fg); display:block; margin-bottom:3px; font-size:14px; }
.priv input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
.sw { width:44px; height:26px; flex:none; border-radius:13px; background:var(--rule); position:relative; transition:background .18s; }
.sw i { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--fg60); transition:all .18s; }
.sw[data-on="1"] { background:var(--yellow); }
.sw[data-on="1"] i { left:21px; background:var(--jet); }

.err { padding:12px; background:rgba(255,107,74,.12); border-left:3px solid var(--red); color:#FFC7B8; font-size:13.5px; line-height:1.7; margin-bottom:14px; }
.ok-box { padding:12px; background:var(--panel2); border-left:3px solid var(--mint); font-size:13.5px; line-height:1.7; margin-bottom:14px; }
.hint { font-size:12.5px; line-height:1.8; color:var(--fg60); margin-top:14px; }

/* 会員証 */
.mcard { background:var(--panel); border:1px solid var(--rule); border-top:5px solid var(--brand); padding:18px 16px 16px; margin-bottom:11px; }
.mcard-top { display:flex; align-items:center; }
.mcard-logo { font-family:var(--fhead); font-size:21px; font-weight:400; letter-spacing:.1em; }
.mcard-logo em { font-style:normal; color:var(--brand); }
.mcard-brand { margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.06em; padding:4px 8px 3px; background:var(--brand); color:var(--jet); }
.mcard-name { display:flex; align-items:center; gap:13px; margin:18px 0 20px; }
.mcard-name b { font-size:21px; font-weight:700; display:block; line-height:1.3; }
.mcard-name em { font-style:normal; font-size:12.5px; color:var(--fg60); }
.ava { width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:var(--jet);
  font-family:var(--fhead); font-weight:700; font-size:20px; flex:none; }
.mcard-code { width:100%; height:64px; background:#fff; padding:6px; display:block; }
.mcard-no { font-family:var(--fhead); font-size:26px; letter-spacing:.14em; text-align:center; margin-top:8px; }
.mcard-foot { display:flex; margin-top:16px; padding-top:12px; border-top:1px solid var(--rule); font-size:11px; color:var(--fg60); letter-spacing:.06em; }
.mcard-foot span:last-child { margin-left:auto; }

.mrow { display:flex; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid var(--rule); font-size:14px; }
.mrow:last-child { border-bottom:none; }
.mrow .swatch { width:6px; height:24px; flex:none; }
.mrow .gym { color:var(--fg60); font-size:12.5px; }
.mrow em { margin-left:auto; font-style:normal; font-size:12.5px; color:var(--fg60); }

/* 招待コード */
.trow { padding:13px 0; border-bottom:1px solid var(--rule); }
.trow-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pill { margin-left:auto; font-size:10.5px; padding:3px 7px 2px; border:1px solid var(--rule); color:var(--fg60); }
.pill.live { border-color:var(--mint); color:var(--mint); }
.pill.used { border-color:var(--fg30); color:var(--fg30); }
.tcode { display:block; font-family:ui-monospace,monospace; font-size:12px; color:var(--yellow); word-break:break-all; margin-bottom:8px; }
.turl { display:flex; gap:8px; align-items:center; font-size:11.5px; color:var(--fg60); word-break:break-all; }
.copy { flex:none; padding:8px 10px; border:1px solid var(--rule); color:var(--fg); font-size:12px; }

/* タブ */
.tabs { background:var(--jet); border-top:2px solid var(--yellow); display:grid;
  padding-bottom:env(safe-area-inset-bottom); }
.tab { padding:10px 0 12px; display:grid; justify-items:center; gap:5px; color:var(--fg30); min-height:58px; text-decoration:none; }
.tab[data-on="1"] { color:var(--yellow); }
.tab svg { width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; }
.tab em { font-style:normal; font-size:10.5px; font-weight:500; }

/* 文字を大きく */
body[data-big="1"] .f label, body[data-big="1"] .priv, body[data-big="1"] .hint { font-size:16px; }
body[data-big="1"] .mrow, body[data-big="1"] .block-h h3 { font-size:17px; }

/* ============ 段階2：投稿 ============ */
.rail { display:flex; gap:6px; padding:11px 0 0; overflow-x:auto; scrollbar-width:none; }
.rail::-webkit-scrollbar { display:none; }
.rail:last-of-type { padding-bottom:12px; }
.chip, .tagchip { padding:7px 12px 6px; border:1px solid var(--rule); color:var(--fg60);
  white-space:nowrap; min-height:34px; display:inline-flex; align-items:center; text-decoration:none; font-size:12px; }
.chip[data-on="1"] { background:var(--fg); color:var(--jet); border-color:var(--fg); font-weight:700; }
.chip[data-k="BASE"][data-on="1"] { background:var(--sky); border-color:var(--sky); }
.chip[data-k="CIRCLE"][data-on="1"] { background:var(--yellow); border-color:var(--yellow); }
.tagchip { color:var(--yellow); font-size:12.5px; }
.tagchip[data-on="1"] { background:var(--yellow); color:var(--jet); border-color:var(--yellow); font-weight:700; }

.feed { padding:13px 11px 28px; display:flex; flex-direction:column; gap:11px; }
.banner { background:var(--panel); border:1px dashed var(--fg30); padding:14px; font-size:13.5px; line-height:1.8; color:var(--fg60); }
.banner b { display:block; color:var(--fg); font-size:15px; margin-bottom:5px; }

.pcard { background:var(--panel); border:1px solid var(--rule); display:flex; overflow:hidden; }
.spine { width:6px; flex:none; }
.pbody { flex:1; min-width:0; }
.slip { display:flex; align-items:center; gap:8px; padding:9px 12px; border-bottom:1px solid var(--rule);
  font-size:11px; color:var(--fg60); }
.slip .kind { font-weight:700; color:var(--fg); }
.slip .t { margin-left:auto; }
.who { display:flex; align-items:center; gap:10px; padding:12px 12px 0; }
.who b { font-size:14.5px; font-weight:700; display:block; line-height:1.3; }
.who em { font-style:normal; font-size:11px; color:var(--fg60); }
.who .del { margin-left:auto; }
.who .del button { font-size:11.5px; color:var(--fg30); padding:6px 8px; border:1px solid var(--rule); }
.ava.sm { width:32px; height:32px; font-size:13px; }

.ptext { padding:11px 12px 0; font-size:15.5px; line-height:1.82; word-break:break-word; }
.ptext a { color:var(--yellow); text-decoration:none; }

.shots { display:grid; gap:2px; margin:12px 12px 0; }
.shots[data-n="1"] { grid-template-columns:1fr; }
.shots[data-n="2"], .shots[data-n="4"] { grid-template-columns:1fr 1fr; }
.shots[data-n="3"] { grid-template-columns:1fr 1fr 1fr; }
.shots img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; display:block; background:#111; }
/* img の height 属性（元画像の高さ）が効いて2枚以上のとき縦長に伸びていたので height:auto を明示 */
.shots[data-n="3"] img { aspect-ratio:1/1; }
.shots[data-n="1"] img { aspect-ratio:auto; max-height:420px; object-fit:contain; }

.tags { display:flex; flex-wrap:wrap; gap:6px; padding:11px 12px 0; }
.tag { font-size:12.5px; color:var(--yellow); border:1px solid rgba(255,212,0,.45); padding:4px 8px; text-decoration:none; }

.acts { display:flex; align-items:center; gap:4px; padding:11px 8px 11px 12px; margin-top:12px; border-top:1px solid var(--rule); }
.act { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; font-size:12px; color:var(--fg60);
  min-height:36px; text-decoration:none; }
.act[data-on="1"] { color:var(--yellow); font-weight:700; }
.act.mute { color:var(--fg30); }
.act.rep { margin-left:auto; color:var(--fg30); }

.more { display:block; text-align:center; padding:15px; border:1px solid var(--rule); color:var(--fg60);
  text-decoration:none; font-size:13.5px; }

/* コメント */
.cmt { display:flex; gap:10px; padding:12px 0; border-bottom:1px solid var(--rule); }
.cmt:last-of-type { border-bottom:none; }
.cmt b { font-size:13.5px; display:block; margin-bottom:4px; }
.cmt p { font-size:14px; line-height:1.8; color:var(--fg60); }
.cmt em { font-style:normal; font-size:11px; color:var(--fg30); display:block; margin-top:5px; }
.cmt[data-pin="1"] { background:var(--panel2); padding:12px; margin-bottom:8px; }
.pin { font-style:normal; font-size:9.5px; background:#fff; color:var(--jet); padding:2px 5px 1px; margin-left:6px; }

/* 投稿フォーム */
.ta { width:100%; padding:12px 11px; background:var(--jet); border:1px solid var(--rule);
  font-size:16px; line-height:1.75; resize:vertical; color:var(--fg); }
.shotgrid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.shotgrid:empty { display:none; }
.shotgrid figure { position:relative; aspect-ratio:1; }
.shotgrid img { width:100%; height:100%; object-fit:cover; display:block; }
.shotgrid button { position:absolute; top:2px; right:2px; width:26px; height:26px;
  background:rgba(13,13,12,.85); border:1px solid var(--rule); color:var(--fg); font-size:12px; }
.f label.shot, .shot { height:96px; border:1px dashed var(--fg30); display:grid; place-items:center; gap:4px;
  color:var(--fg60); font-size:13.5px; background:var(--jet); width:100%; cursor:pointer; }
.shot em { font-style:normal; font-size:11px; color:var(--fg30); }
.upstat { font-size:12px; color:var(--fg30); margin-top:8px; min-height:16px; }
.tagpick { display:flex; flex-wrap:wrap; gap:6px; }
.tagpick .tagchip { cursor:pointer; }
.tagpick .tagchip[data-on="1"] { background:var(--yellow); color:var(--jet); border-color:var(--yellow); font-weight:700; }
#chosen .tag { cursor:pointer; }

.badge.solo { background:var(--panel2); color:var(--fg60); border:1px solid var(--rule); margin-left:auto; }
.badge.solo + .badge { margin-left:6px; }
a.mark { text-decoration:none; }

/* ============ 段階3：トレーニング記録 ============ */
.resume { display:block; background:var(--yellow); color:var(--jet); padding:14px; margin-bottom:11px; text-decoration:none; }
.resume b { display:block; font-size:15px; font-weight:700; }
.resume span { font-size:12.5px; opacity:.75; }
.resume em { float:right; font-style:normal; font-weight:700; font-size:13px; }

.grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tile { background:var(--jet); border:1px solid var(--rule); padding:14px 12px; display:flex; align-items:center; gap:11px;
  min-height:66px; text-decoration:none; color:var(--fg); }
.tile:active, .tile:hover { border-color:var(--yellow); background:var(--panel2); }
.tile span { font-size:16.5px; font-weight:700; }
.tile em { margin-left:auto; font-style:normal; font-size:15px; color:var(--fg30); }
.picon { width:28px; height:28px; flex:none; stroke:var(--yellow); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

.exrow { display:flex; gap:7px; margin-bottom:7px; }
.pick { flex:1; background:var(--jet); border:1px solid var(--rule); padding:13px 12px; display:flex; align-items:center; gap:9px;
  min-height:56px; text-decoration:none; color:var(--fg); }
.pick:active, .pick:hover { border-color:var(--yellow); }
.pick > span:first-child { font-size:15.5px; font-weight:500; }
.pick em { margin-left:auto; font-style:normal; font-size:11.5px; color:var(--fg30); white-space:nowrap; }
.kindtag { font-size:10px; padding:3px 5px 2px; border:1px solid var(--rule); color:var(--fg60); white-space:nowrap; text-decoration:none; }
.kindtag[data-t="machine"] { border-color:var(--sky); color:var(--sky); }
.kindtag[data-t="free"] { border-color:var(--yellow); color:var(--yellow); }
.kindtag[data-t="body"] { border-color:var(--mint); color:var(--mint); }
.kindtag[data-t="cardio"] { border-color:var(--coral); color:var(--coral); }

.thumb { flex:none; width:64px; position:relative; border:1px solid var(--rule);
  background:linear-gradient(140deg,#3A3A34,#161614); display:grid; place-items:center; text-decoration:none; }
.thumb .pl { width:22px; height:22px; border-radius:50%; background:rgba(255,212,0,.92); color:var(--jet);
  display:grid; place-items:center; font-size:9px; padding-left:2px; }
.thumb .lbl { position:absolute; left:0; right:0; top:0; font-size:8.5px; background:rgba(13,13,12,.7);
  color:var(--yellow); text-align:center; padding:1px 0; }
.thumb[data-empty="1"] { background:var(--jet); border-style:dashed; }
.thumb[data-empty="1"] span { font-size:9.5px; color:var(--fg30); text-align:center; line-height:1.3; }
.thumb.big { width:100%; height:150px; margin-bottom:12px; }

.back { margin-left:auto; font-size:13px; color:var(--yellow); text-decoration:none; }
.chosen { background:var(--yellow); color:var(--jet); padding:11px 13px; font-size:15.5px; font-weight:700;
  margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.howto { margin-left:auto; width:34px; height:34px; border:1px solid var(--jet); color:var(--jet);
  display:grid; place-items:center; text-decoration:none; font-size:12px; }

.stp { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--rule); }
.stp-l { font-size:14.5px; }
.stp-r { margin-left:auto; display:flex; align-items:center; gap:4px; }
.stp-r button { width:48px; height:48px; border:1px solid var(--rule); background:var(--jet); font-size:21px; color:var(--yellow); }
.stp-r b { min-width:82px; text-align:center; }
.stp-r input { width:82px; text-align:center; background:transparent; border:none;
  font-family:var(--fhead); font-size:27px; font-weight:700; color:var(--fg); }

.total { display:flex; align-items:baseline; gap:8px; margin-top:14px; padding:12px 13px; background:var(--panel2); }
.total span { font-size:13.5px; color:var(--fg60); }
.total b { margin-left:auto; font-family:var(--fhead); font-size:30px; font-weight:700; color:var(--yellow); line-height:1; }
.total i { font-style:normal; font-size:10px; color:var(--fg30); }

.exgroup { border-bottom:1px solid var(--rule); padding:12px 0; }
.exgroup:last-of-type { border-bottom:none; }
.exgroup h4 { font-size:15px; font-weight:700; margin-bottom:8px; display:flex; }
.exgroup h4 em { margin-left:auto; font-style:normal; font-size:11.5px; color:var(--fg30); }
.setrow { display:flex; align-items:center; gap:10px; padding:7px 0; }
.setrow .no { width:22px; height:22px; border:1px solid var(--rule); display:grid; place-items:center;
  font-family:var(--fhead); font-size:13px; color:var(--fg30); flex:none; }
.setrow b { font-size:15px; }
.setrow form { margin-left:auto; }
.setrow button { width:34px; height:34px; border:1px solid var(--rule); color:var(--fg30); }

.mymenu { border:1px solid var(--yellow); padding:13px; margin-bottom:9px; background:var(--jet); }
.mymenu h4 { font-size:15.5px; font-weight:700; margin-bottom:5px; }
.mymenu p { font-size:12.5px; color:var(--fg60); line-height:1.7; }
.mymenu .go { display:flex; gap:8px; margin-top:10px; }
.mymenu .go a, .mymenu .go span { flex:1; text-align:center; padding:9px; border:1px solid var(--rule);
  font-size:12.5px; text-decoration:none; color:var(--fg); }

.picklist { max-height:340px; overflow-y:auto; border:1px solid var(--rule); padding:8px; }
.picksep { font-size:11px; color:var(--fg30); padding:8px 2px 5px; }
.chk { display:flex; align-items:center; gap:10px; padding:11px 10px; border:1px solid var(--rule);
  margin-bottom:6px; min-height:48px; cursor:pointer; }
.chk input[type=checkbox] { position:absolute; opacity:0; width:0; height:0; }
.chk .box { width:22px; height:22px; border:1.5px solid var(--fg30); flex:none; display:grid; place-items:center;
  font-size:13px; color:transparent; }
.chk input:checked ~ .box { background:var(--yellow); border-color:var(--yellow); color:var(--jet); }
.chk input:checked ~ span { color:var(--fg); }
.chk .kindtag { margin-left:auto; }

.cal { background:var(--panel); border:1px solid var(--rule); padding:13px; }
.cal-h { display:flex; align-items:center; margin-bottom:12px; }
.cal-h b { font-family:var(--fhead); font-size:21px; letter-spacing:.04em; }
.cal-h a { width:42px; height:42px; border:1px solid var(--rule); color:var(--yellow); display:grid;
  place-items:center; text-decoration:none; }
.cal-h a:first-of-type { margin-left:auto; margin-right:5px; }
.dow { display:grid; grid-template-columns:repeat(7,1fr); margin-bottom:4px; }
.dow span { text-align:center; font-size:10px; color:var(--fg30); padding:4px 0; }
.days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.day { aspect-ratio:1; border:1px solid transparent; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; font-family:var(--fhead); font-size:16px; color:var(--fg60); text-decoration:none; }
.day[data-has="1"] { border-color:var(--rule); background:var(--jet); color:var(--fg); }
.day[data-on="1"] { background:var(--yellow); color:var(--jet); border-color:var(--yellow); font-weight:700; }
.dots { display:flex; gap:2px; height:5px; }
.dots i { width:5px; height:5px; border-radius:50%; display:block; }
.daylist { margin-top:13px; border-top:1px solid var(--rule); padding-top:12px; }
.dl { display:flex; align-items:center; gap:9px; padding:10px 0; border-bottom:1px solid var(--rule); }
.dl:last-child { border-bottom:none; }
.dl .c { width:4px; height:30px; flex:none; }
.dl b { font-size:14px; font-weight:500; display:block; }
.dl em { font-style:normal; font-size:11.5px; color:var(--fg30); }
.dl > i { font-style:normal; font-family:var(--fhead); font-size:19px; color:var(--yellow); }
.dl > i small { font-size:10px; color:var(--fg30); }
.legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; font-size:11.5px; color:var(--fg60); }
.legend span { display:flex; align-items:center; gap:5px; }
.legend i { width:10px; height:10px; display:block; }

.strip { margin:13px 12px 0; }
.strip-h { display:flex; align-items:baseline; gap:6px; margin-bottom:6px; font-size:10px; color:var(--fg30); }
.strip-h b { color:var(--fg); font-family:var(--fhead); font-size:19px; }
.bars { display:flex; align-items:flex-end; gap:4px; height:44px; }
.bar { flex:1; background:var(--yellow); display:block; }
.ruler { height:7px; border-top:1px solid var(--fg30); display:flex; }
.ruler i { flex:1; border-right:1px solid var(--rule); height:4px; display:block; }
.ruler i:last-child { border-right:none; }
.menu { margin:12px 12px 0; border-top:1px solid var(--rule); }
.row { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--rule); }
.row .n { font-size:14px; font-weight:500; }
.row .v { margin-left:auto; font-family:var(--fhead); font-size:20px; font-weight:600; color:var(--yellow); }
.row .u { font-size:10px; color:var(--fg30); }
.cta { margin:12px 12px 0; width:calc(100% - 24px); padding:13px; background:var(--yellow); color:var(--jet);
  font-size:14px; font-weight:700; min-height:46px; }

.vidlink { display:flex; align-items:center; gap:12px; padding:13px; border:1px solid var(--rule);
  background:var(--jet); text-decoration:none; color:var(--fg); margin-bottom:9px; }
.vidlink .pl { width:44px; height:44px; border-radius:50%; background:var(--yellow); color:var(--jet);
  display:grid; place-items:center; font-size:15px; flex:none; padding-left:3px; }
.vidlink b { display:block; font-size:14.5px; }
.vidlink em { font-style:normal; font-size:11.5px; color:var(--fg30); }

.vrow { padding:12px 0; border-bottom:1px solid var(--rule); }
.vrow-h { display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:14px; }
.vrow-h b { font-weight:700; }
.vrow-h .kindtag { margin-left:auto; }

.btn { display:block; text-align:center; text-decoration:none; padding:14px; }

/* ============ 段階4：食事・からだ・目標 ============ */
.quad { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.aibox { border:1px solid var(--mint); background:rgba(62,217,160,.07); padding:12px; margin-bottom:13px; }
.aibox-h { font-size:12px; color:var(--mint); margin-bottom:5px; display:flex; gap:8px; }
.aibox-h span { color:var(--fg); font-weight:700; }
.aiconf { margin-left:auto; font-style:normal; font-size:10.5px; padding:2px 6px; border:1px solid var(--rule); color:var(--fg60); }
.aiconf[data-c="high"] { border-color:var(--mint); color:var(--mint); }
.aiconf[data-c="low"]  { border-color:var(--coral); color:var(--coral); }
.aiitems { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:4px; }
.aiitems th { font-weight:500; color:var(--fg30); font-size:10.5px; text-align:left; padding:2px 4px; border-bottom:1px solid var(--rule); }
.aiitems td { padding:4px; border-bottom:1px solid var(--rule); }
.aiitems tr:last-child td { border-bottom:none; }
.aiitems .n, .aiitems th + th { text-align:right; font-variant-numeric:tabular-nums; }
.pubopts { padding:0 0 4px; }
.f textarea { width:100%; padding:12px 11px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); font-family:inherit; font-size:15px; resize:vertical; }
.mealpost .row.sub .n { font-weight:400; font-size:13px; color:var(--fg60); }
.mealpost .row.sub .n small { color:var(--fg30); font-size:11px; }
.mealpost .row.sub .v { font-size:15px; color:var(--fg60); }
.mealitems { display:block; color:var(--fg30); font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mealrow { display:flex; align-items:center; gap:11px; padding:10px 0; border-bottom:1px solid var(--rule); }
.mealrow:last-of-type { border-bottom:none; }
.mealrow img, .mealrow .noimg { width:52px; height:52px; object-fit:cover; flex:none; background:var(--jet); border:1px solid var(--rule); }
.mealrow b { font-size:14px; display:block; }
.mealrow em { font-style:normal; font-size:11.5px; color:var(--fg30); }
.mealrow form { margin-left:auto; }
.mealrow button { width:34px; height:34px; border:1px solid var(--rule); color:var(--fg30); }

.det { border:1px solid var(--rule); padding:12px; margin-bottom:13px; }
.det summary { font-size:14px; font-weight:700; cursor:pointer; }
.det > *:not(summary) { margin-top:12px; }

.calc { background:var(--jet); border:1px solid var(--rule); padding:12px; margin-bottom:13px; }
.calc-r { padding:9px 0; border-bottom:1px solid var(--rule); }
.calc-r:last-child { border-bottom:none; }
.ct { font-size:12.5px; color:var(--fg60); margin-bottom:5px; }
.ce { font-size:11.5px; color:var(--sky); line-height:1.7; word-break:break-word; }
.co { font-family:var(--fhead); font-size:22px; font-weight:700; color:var(--yellow); margin-top:3px; }
.co i { font-size:10px; font-style:normal; color:var(--fg30); margin-left:4px; }

.tg { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.tg div { background:var(--panel2); padding:11px 8px; text-align:center; }
.tg span { display:block; font-size:9.5px; color:var(--fg30); margin-bottom:4px; }
.tg b { font-family:var(--fhead); font-size:25px; font-weight:700; line-height:1; }
.tg b i { font-size:9.5px; font-style:normal; color:var(--fg30); }

.opt { display:flex; gap:7px; }
.opt button { flex:1; padding:11px 5px; border:1px solid var(--rule); font-size:13px; color:var(--fg60); min-height:48px; }
.opt button[data-on="1"] { border-color:var(--yellow); background:rgba(255,212,0,.1); color:var(--yellow); font-weight:700; }

.stats { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--rule); border:1px solid var(--rule); }
.stat { background:var(--panel); padding:11px 12px; }
.stat span { display:block; font-size:11.5px; color:var(--fg60); margin-bottom:4px; }
.stat b { font-family:var(--fhead); font-size:26px; font-weight:700; line-height:1; }
.stat b i { font-size:10px; font-style:normal; color:var(--fg30); margin-left:3px; }
.stat em { font-style:normal; font-family:var(--fhead); font-size:15px; margin-left:7px; }
.up { color:var(--mint); } .down { color:var(--sky); } .flat { color:var(--fg30); }

.ach { padding:12px 0; border-bottom:1px solid var(--rule); }
.ach:last-of-type { border-bottom:none; }
.ach-t { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.ach-t b { font-size:14px; }
.ach-t span { font-size:10.5px; color:var(--fg30); }
.ach-t em { margin-left:auto; font-style:normal; font-family:var(--fhead); font-size:21px; }
.gauge { height:16px; background:var(--jet); border:1px solid var(--rule); position:relative; overflow:hidden; }
.gauge .band { position:absolute; top:0; bottom:0; background:rgba(255,255,255,.07); }
.gauge .fl { position:absolute; top:0; bottom:0; left:0; }
.gauge .mk { position:absolute; top:-2px; bottom:-2px; width:2px; background:var(--fg); }
.ach-s { font-size:11.5px; color:var(--fg30); margin-top:6px; }

.bar2 { display:flex; align-items:center; gap:9px; padding:8px 0; }
.bar2 .lb { font-size:13.5px; width:96px; flex:none; }
.bar2 .tr { flex:1; height:12px; background:var(--jet); border:1px solid var(--rule); }
.bar2 .fl { height:100%; display:block; }
.bar2 .vl { font-family:var(--fhead); font-size:19px; width:52px; text-align:right; flex:none; }

.track { height:10px; background:var(--jet); border:1px solid var(--rule); }
.track .fill { height:100%; background:var(--yellow); display:block; }

.note { background:var(--panel); border:1px solid var(--rule); padding:14px; font-size:13px; line-height:1.85; color:var(--fg60); margin-bottom:11px; }
.note b { color:var(--fg); }
.warn { border-left:3px solid var(--coral); }
.guard { border-left:3px solid var(--mint); }

.seg { display:flex; border:1px solid var(--rule); background:var(--panel); margin-bottom:11px; }
.seg a { flex:1; padding:11px 3px; font-size:12.5px; font-weight:500; color:var(--fg60); min-height:44px;
  display:flex; align-items:center; justify-content:center; text-decoration:none; }
.seg a + a { border-left:1px solid var(--rule); }
.seg a[data-on="1"] { background:var(--yellow); color:var(--jet); font-weight:700; }

.gear { width:32px; height:32px; display:grid; place-items:center; margin-left:6px; }
.gear svg { width:20px; height:20px; stroke:var(--fg60); fill:none; stroke-width:1.8; }

/* ============ 段階5：本牧マップ ============ */
.maphead { background:var(--jet); padding:0 15px; border-bottom:1px solid var(--rule); }
.mapbox { height:300px; background:#141413; border-bottom:1px solid var(--rule); }
.mapbox.mapfail { display:grid; place-items:center; padding:20px; text-align:center;
  font-size:13.5px; color:var(--fg60); height:auto; min-height:120px; }
/* 明るい地図を暗い画面になじませる。出典表示は別レイヤーなので読める */
.leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.92) saturate(.7); }
.leaflet-container { background:#141413 !important; font-family:'Zen Kaku Gothic New',sans-serif; }
/* Leaflet の divIcon は既定で白い背景と枠が付く。すべて透明にする */
.leaflet-div-icon,
.leaflet-marker-icon,
.leaflet-marker-icon.pin,
.pin, .pin.gym {
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:0 !important;
}
.leaflet-marker-icon.leaflet-div-icon { padding:0 !important; }
.leaflet-control-attribution { background:rgba(13,13,12,.8) !important; color:var(--fg30) !important; font-size:9.5px; }
.leaflet-control-attribution a { color:var(--fg60) !important; }
.leaflet-popup-content-wrapper { background:var(--panel); color:var(--fg); border-radius:0; border:1px solid var(--yellow); }
.leaflet-popup-tip { background:var(--yellow); }
.leaflet-popup-content { font-size:13px; line-height:1.7; margin:11px 13px; }
.leaflet-popup-content b { font-size:14.5px; }
.leaflet-popup-content .pp { color:var(--yellow); font-size:12px; }
.leaflet-popup-content a { color:var(--yellow); }
.pindot { display:block; width:14px; height:14px; border-radius:50%; border:2px solid #0D0D0C; }
.gymdot { width:34px; height:34px; background:var(--yellow); color:var(--jet); display:grid; place-items:center;
  font-family:var(--fhead); font-weight:700; font-size:18px; border:none; }
.gymicon { width:44px; height:44px; object-fit:contain; display:block; background:transparent; border-radius:50%; box-shadow:0 0 0 2px var(--yellow), 0 2px 8px rgba(0,0,0,.6); }
.pinimg { width:26px; height:26px; object-fit:contain; display:block; background:transparent; }
.pinlabel { position:absolute; top:16px; left:50%; transform:translateX(-50%); white-space:nowrap;
  font-size:9.5px; color:var(--fg); text-shadow:0 1px 3px #0D0D0C, 0 0 6px #0D0D0C; }
.pin.gym .pinlabel { top:46px; color:var(--yellow); font-weight:700; font-size:10.5px; }

.pcardlink { text-decoration:none; color:var(--fg); display:block; margin-bottom:11px; }
.perk { margin:11px 12px 0; padding:10px 11px; background:var(--panel2); border-left:3px solid var(--yellow); }
.perk span { display:block; font-size:9.5px; color:var(--yellow); margin-bottom:4px; }
.perk b { font-size:14px; font-weight:700; line-height:1.6; }
.perk em { display:block; font-style:normal; font-size:12px; color:var(--fg60); margin-top:4px; }

.coupon { border:2px dashed var(--yellow); padding:18px 14px; text-align:center; margin-bottom:11px; background:var(--panel); }
.coupon b { display:block; font-size:17px; font-weight:700; margin-bottom:6px; }
.coupon span { font-size:12.5px; color:var(--fg60); line-height:1.8; }
.coupon .code { font-family:var(--fhead); font-size:34px; letter-spacing:.16em;
  color:var(--yellow); margin:12px 0 6px; }

.btnbox { border:1px solid var(--rule); justify-content:center; padding:12px 14px; text-decoration:none; }
.rep { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule); border:1px solid var(--rule); }
.rep div { background:var(--panel); padding:12px 8px; text-align:center; }
.rep span { display:block; font-size:10.5px; color:var(--fg60); margin-bottom:5px; }
.rep b { font-family:var(--fhead); font-size:26px; font-weight:700; line-height:1; }
.swatch { display:block; flex:none; }

/* ============ 段階6：ランキング・クラス・通知 ============ */
.board { background:var(--panel); border:1px solid var(--rule); }
.board-h { padding:13px; border-bottom:1px solid var(--rule); }
.board-h h3 { font-size:16px; font-weight:700; }
.board-h p { font-size:12px; color:var(--fg60); margin-top:5px; }
.rk { display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid var(--rule); }
.rk:last-child { border-bottom:none; }
.rk .no { font-family:var(--fhead); font-size:25px; font-weight:700; width:28px; line-height:1; color:var(--fg30); }
.rk[data-top="1"] .no { color:var(--yellow); }
.rk .nm { font-size:14px; font-weight:500; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk .val { margin-left:auto; font-family:var(--fhead); font-size:23px; font-weight:600; line-height:1; }
.rk .un { font-size:9.5px; color:var(--fg30); width:32px; }
.rk[data-me="1"] { background:var(--yellow); color:var(--jet); }
.rk[data-me="1"] .no, .rk[data-me="1"] .un { color:rgba(13,13,12,.6); }
.rk .tv { font-size:9.5px; border:1px solid var(--yellow); color:var(--yellow); padding:3px 5px 2px; text-decoration:none; white-space:nowrap; }
.rk[data-me="1"] .tv { border-color:var(--jet); color:var(--jet); }

.clsrow { display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--rule); }
.clsrow:last-of-type { border-bottom:none; }
.cls-when { width:46px; flex:none; text-align:center; }
.cls-when b { display:block; font-family:var(--fhead); font-size:19px; line-height:1.1; }
.cls-when em { font-style:normal; font-size:10px; color:var(--fg30); display:block; }
.cls-when span { display:block; font-family:var(--fhead); font-size:16px; color:var(--yellow); margin-top:4px; }
.cls-body { flex:1; min-width:0; }
.cls-body b { font-size:15px; font-weight:700; display:block; line-height:1.4; }
.cls-body em { font-style:normal; font-size:11.5px; color:var(--fg30); display:block; margin-top:3px; }
.cls-body .kindtag { display:inline-block; margin-top:6px; }
.cls-act { width:82px; flex:none; text-align:right; }
.cls-act .left { display:block; font-size:11px; color:var(--fg30); margin-bottom:6px; }
.bookbtn { width:100%; padding:9px 4px; background:var(--yellow); color:var(--jet); font-size:12.5px; font-weight:700; min-height:40px; }
.cancelbtn { width:100%; padding:9px 4px; background:var(--jet); border:1px solid var(--yellow); color:var(--yellow); font-size:12.5px; min-height:40px; }

.ntrow { display:flex; gap:11px; padding:13px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:var(--fg); }
.ntrow:last-of-type { border-bottom:none; }
.ntrow .dot { width:8px; height:8px; border-radius:50%; background:transparent; flex:none; margin-top:6px; }
.ntrow[data-new="1"] .dot { background:var(--yellow); }
.ntrow b { font-size:14px; font-weight:500; display:block; line-height:1.6; }
.ntrow em { font-style:normal; font-size:11.5px; color:var(--fg30); }

.gear { position:relative; }
.badge-dot { position:absolute; top:-2px; right:-4px; background:var(--yellow); color:var(--jet);
  font-style:normal; font-size:9px; font-weight:700; min-width:15px; height:15px; border-radius:8px;
  display:grid; place-items:center; padding:0 3px; }

.hub { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px; }
.hub[data-n="3"] { grid-template-columns:repeat(3,1fr); }
.hub[data-n="3"] a { justify-content:center; padding:14px 6px; font-size:13.5px; text-align:center; }
.hub a { background:var(--panel); border:1px solid var(--rule); padding:14px 12px; text-decoration:none;
  color:var(--fg); font-size:14.5px; font-weight:700; min-height:52px; display:flex; align-items:center; }
.hub a:active { border-color:var(--yellow); }
.composebtn { display:block; text-align:center; padding:14px; background:var(--yellow); color:var(--jet);
  font-weight:700; font-size:14.5px; text-decoration:none; }

/* ============ 段階7：ゲストと会員 ============ */
.gatebar { display:block; padding:12px 15px; background:var(--panel2); border-bottom:1px solid var(--yellow);
  text-decoration:none; color:var(--fg60); font-size:12.5px; line-height:1.7; }
.gatebar b { display:block; color:var(--yellow); font-size:13.5px; margin-bottom:2px; }
.gatebar.guest { border-bottom-color:var(--rule); }
.gatebar.guest b { color:var(--fg); }

.segbox { display:flex; border:1px solid var(--rule); margin-bottom:14px; }
.segbox a { flex:1; padding:11px 4px; text-align:center; font-size:12.5px; color:var(--fg60);
  text-decoration:none; min-height:44px; display:flex; align-items:center; justify-content:center; }
.segbox a + a { border-left:1px solid var(--rule); }
.segbox a[data-on="1"] { background:var(--yellow); color:var(--jet); font-weight:700; }

.save.btn { display:block; text-align:center; text-decoration:none; padding:15px; }

/* 書き手の区分 */
.who-badge { display:inline-block; font-size:9.5px; font-weight:700; padding:2px 5px 1px;
  font-style:normal; letter-spacing:.02em; vertical-align:1px; }
.cmt .who-badge { margin-left:6px; }

/* 入館QR */
.qrbox { background:#fff; padding:14px; display:flex; justify-content:center; margin-bottom:10px; min-height:60px;
  align-items:center; color:#0D0D0C; font-size:12px; text-align:center; }
.qrbox img, .qrbox canvas { display:block; }

/* アイコン画像 */
.avaimg { border-radius:50%; object-fit:cover; flex:none; display:block; }
.avaimg[hidden] { display:none; }
.avarow { display:flex; align-items:center; gap:13px; }

/* アイコンの変更 */
.avaslot { position:relative; width:72px; height:72px; flex:none; }
.avaslot .ava, .avaslot .avaimg { width:72px; height:72px; }
.f label.avachange, .avachange { display:inline-flex; width:auto; margin:0; align-items:center; gap:7px; padding:9px 14px; min-height:38px;
  border:1px solid var(--sky); color:var(--sky); background:transparent; border-radius:4px;
  font-size:13px; font-weight:700; cursor:pointer; line-height:1; }
.avachange:active { background:rgba(92,200,245,.12); }
.avachange svg { flex:none; }
.f label.rmava, .rmava { display:flex; width:auto; align-items:center; gap:7px; font-size:12px; color:var(--fg60); margin-top:10px; cursor:pointer; }
.rmava input[type=checkbox] { width:14px; height:14px; min-height:0; padding:0; margin:0; flex:none; accent-color:var(--yellow); }

/* ---------- 段階12：ダッシュボード・履歴・目標 ---------- */
.seg.sub { margin-top:-3px; }
.seg.sub a[data-on="1"] { background:var(--sky); }
.goalblk { padding:9px 0 4px; border-bottom:1px solid var(--rule); }
.goalblk:last-of-type { border-bottom:none; }
.goalblk h4 { margin:0 0 6px; font-size:12px; letter-spacing:.06em; color:var(--fg60); font-weight:500; }
.goalrow { display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:5px 0; }
.goalrow .gl { font-size:13px; }
.goalrow .gv { font-family:var(--fhead); font-size:17px; text-align:right; }
.goalrow .gv b { font-size:19px; font-weight:700; }
.goalrow .gv i { font-style:normal; font-size:11px; color:var(--fg30); font-family:inherit; }
.goalrow .gt { grid-column:1; height:6px; background:var(--jet); border:1px solid var(--rule); }
.goalrow .gf { display:block; height:100%; background:var(--fg30); }
.goalrow .gf[data-ok="1"] { background:var(--mint); }
.goalrow .gp { grid-column:2; font-size:11px; color:var(--fg30); text-align:right; }
.hrow { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--rule); text-decoration:none; color:inherit; }
.hrow:last-child { border-bottom:none; }
.hrow img, .hrow .noimg { width:46px; height:46px; object-fit:cover; flex:none; background:var(--jet); border:1px solid var(--rule); }
.hrow b { display:block; font-size:14px; font-weight:500; }
.hrow em { display:block; font-style:normal; font-size:11.5px; color:var(--fg60); }
.hrow .more { flex:none; font-size:11.5px; color:var(--yellow); white-space:nowrap; }
a.hcard { display:block; text-decoration:none; color:inherit; }
a.hcard:active { border-color:var(--yellow); }
.hline { display:flex; justify-content:space-between; gap:8px; font-size:13px; padding:3px 0; }
.hline em { font-style:normal; color:var(--fg60); font-size:12.5px; white-space:nowrap; }
.dtl-h { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
.dtl-h b { font-size:18px; }
.dtl-h em { font-style:normal; color:var(--fg60); font-size:12.5px; }
.dtl-h .badge2 { margin-left:auto; font-size:10.5px; padding:3px 6px; border:1px solid var(--rule); color:var(--fg60); }
.settbl { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
.settbl th { font-weight:500; color:var(--fg30); font-size:10.5px; text-align:right; padding:2px 6px; border-bottom:1px solid var(--rule); }
.settbl th:first-child, .settbl td:first-child { text-align:left; }
.settbl td { padding:5px 6px; text-align:right; border-bottom:1px solid var(--rule); font-variant-numeric:tabular-nums; }
.settbl tr:last-child td { border-bottom:none; }
.settbl .pr { color:var(--mint); }
.goalbar { display:flex; align-items:center; gap:10px; padding:11px 12px; margin-bottom:11px; background:var(--panel); border:1px solid var(--rule); text-decoration:none; color:inherit; }
.goalbar .ic { width:30px; height:30px; flex:none; display:grid; place-items:center; border:1px solid var(--rule); color:var(--yellow); }
.goalbar .ic svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.goalbar b { font-size:13.5px; display:block; }
.goalbar em { font-style:normal; font-size:11.5px; color:var(--fg60); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goalbar .go { margin-left:auto; color:var(--fg30); font-size:14px; }
.dash-link { display:flex; align-items:center; gap:10px; }
.dash-link .mini { flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.dash-link .mini span { display:block; font-size:10.5px; color:var(--fg60); }
.dash-link .mini b { font-family:var(--fhead); font-size:20px; }
.dash-link .mini b i { font-style:normal; font-size:10px; color:var(--fg30); }
.dl > .kindtag { flex:none; padding:7px 9px; font-size:11px; color:var(--yellow); border-color:var(--yellow); margin-left:4px; }
.dl > .kindtag:active { background:rgba(255,212,0,.12); }
.setrep { display:flex; align-items:center; gap:3px; flex:none; font-size:11px; color:var(--fg30); }
.setrep input { width:46px; min-height:32px; padding:4px 5px; font-size:13px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); text-align:center; }
.vrow[data-conf="low"] { border-left:3px solid var(--coral); padding-left:9px; }
.vrow[data-conf="medium"] { border-left:3px solid var(--rule); padding-left:9px; }
.dash-link .sheet-h { display:flex; align-items:center; }
.chk2 { display:grid; grid-template-columns:22px minmax(0,1fr) auto; gap:6px 10px; align-items:center; }
.chk2 .nm { font-size:14px; }
.chk2 .setrep { grid-column:2 / 4; justify-content:flex-end; }
.chk2 input[type=checkbox]:checked ~ .nm { color:var(--fg); }
select { max-width:100%; }
.f label.chk { display:flex; width:auto; margin:0 0 6px; font-size:14px; color:var(--fg60); }
.f label.chk2 { display:grid; }
.f label.priv { display:flex; width:auto; }

/* ---------- 段階13：メニュー（種目）のタグ・プログラム作成 ---------- */
.lbl { font-size:11px; letter-spacing:.06em; color:var(--fg60); margin:8px 0 4px; }
.pkbox { border:1px solid var(--rule); padding:10px 12px; margin-bottom:9px; background:var(--panel2); }
.pkbox summary { font-size:13.5px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:8px; min-height:26px; }
.pkbox summary b { font-size:11px; padding:1px 7px; border:1px solid var(--yellow); color:var(--yellow); font-weight:700; }
.ckgrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.ck { display:flex; align-items:center; gap:7px; font-size:13px; padding:8px 9px; border:1px solid var(--rule); background:var(--jet); cursor:pointer; min-height:40px; }
.ck input[type=checkbox] { width:16px; height:16px; min-height:0; padding:0; margin:0; flex:none; accent-color:var(--yellow); }
.ck:has(input:checked) { border-color:var(--yellow); }
.purGroup .lbl { margin-top:10px; }
.tagrow { display:flex; flex-wrap:wrap; gap:4px; margin-top:5px; }
.excat { font-size:10.5px; padding:2px 6px; border:1px solid var(--rule); color:var(--fg60); white-space:nowrap; }
.excat.part { border-color:var(--mint); color:var(--mint); }
.excat.eq { border-color:var(--sky); color:var(--sky); }
.excat.warn { border-color:var(--coral); color:var(--coral); }
.sxrow { display:flex; gap:10px; align-items:flex-start; padding:12px 0; border-bottom:1px solid var(--rule); }
.sxrow:last-child { border-bottom:none; }
.sxrow b { font-size:14px; }
.exbtns { display:flex; flex-direction:column; gap:6px; flex:none; align-items:stretch; width:78px; }
.exbtns .kindtag { display:block; text-align:center; padding:7px 4px; font-size:11px; color:var(--fg); }
.exbtns .kindtag.danger { color:var(--coral); border-color:var(--coral); }
.exbtns form { display:block !important; }
.exbtns form .kindtag { width:100%; }
.filterbar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.seg .cnt { margin-left:4px; font-size:10.5px; padding:0 6px; border-radius:9px; background:var(--jet); color:var(--fg60); }
.seg a[data-on="1"] .cnt { background:var(--jet); color:var(--yellow); }
/* プログラム作成：選んだメニュー */
.picked { border:1px solid var(--rule); margin-bottom:8px; }
.picked:empty { display:none; }
.prow2 { display:grid; grid-template-columns:22px minmax(0,1fr) 34px 34px; gap:6px 8px; align-items:center; padding:8px 9px; border-bottom:1px solid var(--rule); background:var(--panel); }
.prow2:last-child { border-bottom:none; }
.prow2 .no { font-family:var(--fhead); color:var(--yellow); font-size:16px; text-align:center; }
.prow2 .nm { font-size:13.5px; font-weight:500; }
.prow2 input[type=text] { grid-column:2 / 5; padding:7px 9px; min-height:36px; font-size:13px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); }
.prow2 button { width:34px; height:34px; border:1px solid var(--rule); color:var(--fg60); font-size:14px; }
.mfilter { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin:8px 0; }
.mfilter select, .mfilter input { padding:8px; min-height:40px; font-size:13px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); width:100%; }
.mlist { max-height:330px; overflow-y:auto; border:1px solid var(--rule); }
.mi { display:flex; align-items:center; gap:8px; padding:9px 10px; border-bottom:1px solid var(--rule); }
.mi:last-child { border-bottom:none; }
.mi .nm { flex:1; min-width:0; font-size:13.5px; }
.mi .nm small { display:block; font-size:10.5px; color:var(--fg30); }
.mi .add { width:36px; height:36px; flex:none; border:1px solid var(--yellow); color:var(--yellow); font-size:18px; font-weight:700; }
.mi.on { opacity:.45; }
.mi.on .add { border-color:var(--rule); color:var(--fg30); }
.plcard { padding:12px 0; border-bottom:1px solid var(--rule); }
.plcard:last-child { border-bottom:none; }
.plcard .l1 { display:flex; align-items:center; gap:8px; }
.plcard .l1 b { font-size:15px; }
.plcard .l2 { display:flex; gap:6px; margin-top:8px; }
.plcard .l2 .kindtag { padding:7px 10px; font-size:11.5px; color:var(--fg); }
.plcard .l2 .kindtag.danger { color:var(--coral); border-color:var(--coral); }
.act.like .heart { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linejoin:round; transition:transform .15s; }
.act.like[data-on="1"] { color:#FF5A7A; }
.act.like[data-on="1"] .heart { fill:currentColor; stroke:currentColor; transform:scale(1.1); }
.act.like:active .heart { transform:scale(.9); }

/* ---- ダッシュボード：グラフで見る（段階15） ---- */
.ovrange { display:flex; gap:4px; }
.ovrange a { font-size:10.5px; padding:3px 8px; border:1px solid var(--rule); color:var(--fg60); border-radius:2px; letter-spacing:0; font-weight:500; }
.ovrange a[data-on="1"] { background:var(--yellow); color:var(--jet); border-color:var(--yellow); font-weight:700; }
.ovsvg text { font-family:inherit; }
.ovlegend { display:grid; grid-template-columns:1fr; gap:6px 10px; margin-top:12px; }
@media (min-width:480px) { .ovlegend { grid-template-columns:1fr 1fr; } }
.f .ovlegend label, .ovchk { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--fg); margin:0; letter-spacing:0; text-transform:none; cursor:pointer; min-height:0; }
.ovchk input { width:15px; height:15px; margin:0; accent-color:var(--yellow); flex:none; }
.ovchk i { width:10px; height:10px; display:block; flex:none; }
.ovchk small { color:var(--fg60); font-size:10.5px; margin-left:auto; }
.ovchk.none { color:var(--fg30); }
.ovchk.none small { color:var(--fg30); }
.ovchk:has(input:not(:checked)) i { opacity:.25; }

/* ---- メニュー一括取り込み：行ごとのチェック（段階15） ---- */
.vrow-on { display:flex; align-items:center; gap:8px; margin:0 0 8px; padding:8px 10px; background:var(--jet); border:1px solid var(--rule); font-size:12.5px; cursor:pointer; letter-spacing:0; text-transform:none; }
.vrow-on input { width:18px; height:18px; margin:0; accent-color:var(--yellow); flex:none; }
.vrow[data-on="0"] { opacity:.55; }
.vrow[data-on="0"] .vrow-on { opacity:1; border-color:var(--yellow); }

/* ---- 食事：内訳の編集・マイミール（段階16） ---- */
.items-edit { table-layout:fixed; width:100%; }
.items-edit input { width:100%; min-width:0; padding:4px 2px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); font-size:11.5px; min-height:34px; text-align:right; -moz-appearance:textfield; appearance:textfield; }
.items-edit input::-webkit-outer-spin-button, .items-edit input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.items-edit td:first-child input { text-align:left; }
.items-edit th { font-size:10px; padding:0 2px 4px; text-align:right; }
.items-edit th:first-child { text-align:left; }
.items-edit td { padding:2px 1px; }
.items-edit th:nth-child(1), .items-edit td:nth-child(1) { width:31%; }
.items-edit th:nth-child(2), .items-edit td:nth-child(2) { width:13%; }
.items-edit th:nth-child(3), .items-edit td:nth-child(3) { width:15%; }
.items-edit th:nth-child(4), .items-edit td:nth-child(4), .items-edit th:nth-child(5), .items-edit td:nth-child(5), .items-edit th:nth-child(6), .items-edit td:nth-child(6) { width:11.5%; }
.items-edit th:nth-child(7), .items-edit td:nth-child(7) { width:7%; }
.items-edit td.hint { width:auto; }
.items-edit .idel { background:none; border:0; color:var(--fg60); font-size:14px; padding:6px 2px; cursor:pointer; min-height:34px; }
.items-edit td.hint { text-align:left; padding:8px 4px; }
.mymeals { margin:0; }
.mmchip { display:flex; flex-direction:column; align-items:flex-start; gap:1px; padding:7px 11px; text-align:left; line-height:1.25; }
.mmchip b { font-size:12.5px; }
.mmchip small { font-size:10px; opacity:.75; letter-spacing:0; }
.mmchip[data-on="1"] { background:var(--yellow); color:var(--jet); border-color:var(--yellow); }
.mealedit { flex:none; font-size:11px; color:var(--yellow); text-decoration:none; border:1px solid var(--rule); padding:6px 8px; min-height:0; align-self:center; }

/* ---- 記録ページ：ダッシュボード統合（段階16） ---- */
.hub a small { display:block; font-size:10.5px; color:var(--fg60); font-weight:400; letter-spacing:0; margin-top:3px; }
.hub[data-n="3"] a { flex-direction:column; gap:0; }
.dashtabs { display:flex; align-items:center; gap:8px; margin:2px 0 11px; }
.dashtabs .seg { flex:1; margin:0; }
.streakmini { flex:none; display:flex; align-items:baseline; gap:3px; padding:0 10px; border:1px solid var(--rule); min-height:44px; align-items:center; background:var(--panel); }
.streakmini span { font-size:9.5px; color:var(--fg60); letter-spacing:.06em; }
.streakmini b { font-family:var(--fhead); font-size:20px; color:var(--yellow); line-height:1; }
.streakmini i { font-style:normal; font-size:9.5px; color:var(--fg30); }
.vpanel[hidden], .hpanel[hidden] { display:none; }

/* ---- 本牧マップ：ロゴのピン・電話・WEB（段階16） ---- */
.pinimg { width:36px; height:36px; border-radius:50%; background:#fff; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35); object-fit:contain; }
.pin .pinimg + .pinlabel { top:40px; }
.popicon { width:40px; height:40px; border-radius:50%; background:#fff; object-fit:contain; display:block; margin-bottom:4px; border:1px solid #ddd; }
.popl { display:inline-block; margin:2px 0; color:#0D0D0C; font-size:12px; }
.plogo { width:52px; height:52px; border-radius:50%; background:#fff; object-fit:contain; border:1px solid var(--rule); flex:none; }

/* ---- MYZONE への導線（段階17） ---- */
.mzbar { display:flex; align-items:center; gap:10px; padding:9px 12px; margin-bottom:8px; background:var(--panel); border:1px solid var(--rule); text-decoration:none; color:inherit; }
.mzbar b { font-family:var(--fhead); font-size:15px; letter-spacing:.08em; color:var(--sky); flex:none; }
.mzbar em { font-style:normal; font-size:11.5px; color:var(--fg60); flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mzbar .go { color:var(--fg30); }

/* ---- 段階18：トレーニング入力（日付・続けて入れる・次へ） ---- */
.daterow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px; }
.daterow label { font-size:12px; color:var(--fg60); letter-spacing:.06em; }
.daterow input[type=date] { width:auto; min-width:150px; padding:8px 10px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); font-size:14px; }
.daterow em { font-style:normal; font-size:11.5px; color:var(--yellow); }
.nextrow { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:11px; }
.nextrow a { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; text-decoration:none; padding:12px 8px; font-size:13.5px; }
.nextrow a.on { background:var(--yellow); color:var(--jet); border-color:var(--yellow); }
.nextrow a small { display:block; font-size:11px; font-weight:500; opacity:.7; margin-top:2px; }
.nextrow a:only-child { grid-column:1 / -1; }

/* ---- 段階18：食事の入れ方タブ・料理候補 ---- */
.mtabs { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr) minmax(0,.8fr); gap:6px; margin-bottom:12px; }   /* 段階21：写真でAI／料理名・食材で検索／マイミール。真ん中を広めに、高さは揃える */
.mtabs button { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px 2px; background:var(--jet); border:1px solid var(--rule); color:var(--fg60); text-align:center; min-height:56px; line-height:1.2; min-width:0; }
.mtabs button b { display:block; font-size:12px; font-weight:700; color:var(--fg); white-space:nowrap; letter-spacing:0; max-width:100%; }
.mtabs button small { display:block; font-size:10px; margin-top:4px; letter-spacing:.02em; opacity:.8; white-space:nowrap; }
.mtabs button:only-child { grid-column:1 / -1; }
@media (max-width: 370px) { .mtabs button b { font-size:11px; } .mtabs button small { font-size:9.5px; } }
.mtabs button[data-on="1"] { background:var(--yellow); border-color:var(--yellow); color:var(--jet); }
.mtabs button[data-on="1"] b { color:var(--jet); }
.mpanel { margin-bottom:4px; }
.addedbar { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; background:var(--yellow); color:var(--jet); padding:10px 14px; margin-bottom:11px; font-size:12.5px; line-height:1.5; }
.addedbar b { font-size:14px; }
.items-edit .altrow td { padding:2px 0 8px; border-bottom:1px solid var(--rule); }
.items-edit .altlab { display:inline-block; font-size:11px; color:var(--yellow); margin:0 6px 4px 0; letter-spacing:.06em; }
.items-edit .altchip { display:inline-block; margin:0 4px 4px 0; padding:5px 9px; font-size:12px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); }
.items-edit .altchip[data-on="1"] { background:var(--yellow); border-color:var(--yellow); color:var(--jet); font-weight:700; }

/* ---- 段階20：本牧マップの RESTORE 店舗・会員プロフィール ---- */
.gymrow { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--rule); }
.gymrow:last-child { border-bottom:none; padding-bottom:0; }
.gymrow .plogo { width:56px; height:56px; background:transparent; border:2px solid var(--yellow); }
.gymrow b { display:block; font-size:15px; }
.gymrow p { margin:3px 0 0; font-size:12.5px; color:var(--fg60); line-height:1.5; }
.gymrow dl { display:grid; grid-template-columns:auto 1fr; gap:2px 10px; margin:6px 0 0; font-size:12.5px; }
.gymrow dt { color:var(--fg60); } .gymrow dd { margin:0; }
.gymlinks { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:7px; font-size:12.5px; }
.gymlinks a { color:var(--yellow); text-decoration:none; }
.who a.uname { color:inherit; text-decoration:none; }
.who a.uname:active { color:var(--yellow); }
.uhead { display:flex; gap:14px; align-items:center; }
.uhead .avaimg, .uhead .ava { flex:none; }
.uhead h2 { font-size:19px; margin:0; line-height:1.2; }
.uhead .sub { display:block; font-size:12px; color:var(--fg60); margin-top:3px; }
.ubio { margin:12px 0 0; font-size:13.5px; line-height:1.7; white-space:pre-wrap; }
.ustats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px; }
.ustats div { background:var(--jet); border:1px solid var(--rule); padding:9px 6px; text-align:center; }
.ustats b { display:block; font-family:var(--fhead); font-size:22px; line-height:1; color:var(--yellow); }
.ustats span { display:block; font-size:10.5px; color:var(--fg60); margin-top:4px; letter-spacing:.04em; }

/* ---- 段階20hotfix：ダブルタップで画面が拡大されないように ----
   touch-action:manipulation はダブルタップ拡大だけを止め、ピンチ拡大（写真や地図）は残す */
html, body, a, button, label, input, select, textarea, .tile, .hub a, .stp button, .seg a, .mtabs button, .chip, .setrow, .pcard { touch-action: manipulation; }
.shots img, .shotgrid img, .mapbox, .leaflet-container { touch-action: auto; }

/* ============ 段階22：ページ切り替えのちらつき防止 ============ */
/* 次のページが描けるまで今の画面を残し、ヘッダーと下のタブは入れ替えのアニメーションをしない */
@view-transition { navigation: auto; }
.shell > .head { view-transition-name: rl-head; }
.shell > .tabs { view-transition-name: rl-tabs; }
::view-transition-group(rl-head), ::view-transition-group(rl-tabs),
::view-transition-old(rl-head), ::view-transition-new(rl-head),
::view-transition-old(rl-tabs), ::view-transition-new(rl-tabs) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .12s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
.head .mark img, .head .avaimg, .head .ava { flex:none; }
/* 幅の狭いスマホでも右端の設定ボタンまで収める（はみ出すと切り替えのたびに位置がずれて見える） */
.head .brand { min-width:0; }
.head .gear { flex:none; width:30px; margin-left:2px; }
@media (max-width: 420px) {
  .brand { gap:6px; }
  .brand h1 { font-size:18px; letter-spacing:.05em; }
  .head .badge { font-size:9.5px; padding:4px 5px 3px; }
}

/* ============ 段階22：記録（トレーニング・食事・からだ）を直感的に ============ */
.ricon { width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.hub.rechub a { flex-direction:column; justify-content:center; gap:9px; padding:18px 6px 15px; min-height:104px; color:var(--fg); font-size:15px; letter-spacing:.02em; }
.hub.rechub a .ricon { width:38px; height:38px; color:var(--yellow); }
.hub.rechub a:active { background:var(--panel2); border-color:var(--yellow); }
/* 記録画面の文字はグレーではなく白 */
.rec .sheet-h, .rec .f label, .rec .daterow label, .rec .stp-l, .rec .lbl, .rec .tile em, .rec .pick em,
.rec .shot, .rec .shot span, .rec .shot em, .rec .exgroup h4 em, .rec .setrow button, .rec .total span, .rec .det summary,
.rec .mymenu p, .rec .mealrow em, .rec .priv, .rec .upstat, .rec .items-edit th, .rec .aiitems th, .rec .mtabs button { color:var(--fg); }
.rec .sheet-h { font-size:13px; font-weight:700; letter-spacing:.06em; }
.rec .f label { font-size:14px; font-weight:500; }
/* 写真を撮るボタン：大きいカメラ */
.rec .shot { height:120px; border:1.5px dashed var(--yellow); background:var(--jet); gap:6px; }
.rec .shot .ricon { width:40px; height:40px; color:var(--yellow); }
.rec .shot span { font-size:15px; font-weight:700; }
.rec .shot em { font-size:11px; opacity:.85; }
/* 食事の入れ方タブ：アイコン＋名前だけ */
.rec .mtabs { grid-template-columns:repeat(3,minmax(0,1fr)); }
.rec .mtabs button { gap:5px; min-height:72px; }
.rec .mtabs button .ricon { width:24px; height:24px; color:var(--yellow); }
.rec .mtabs button b { font-size:12.5px; white-space:normal; line-height:1.25; }
.rec .mtabs button[data-on="1"] .ricon { color:var(--jet); }
.rec .mealwhen { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.rec .mealwhen .f { margin-bottom:12px; }
/* 判定のあとに出す欄 */
.mealres[hidden] { display:none; }
.mealres { border-top:1px solid var(--rule); padding-top:13px; margin-top:4px; }
.addrow { display:inline-block; margin-top:8px; padding:8px 12px; border:1px solid var(--rule); color:var(--yellow); font-size:12.5px; background:var(--jet); }
/* 重さの単位（kg / lb） */
.unitsw { display:inline-flex; margin-left:8px; border:1px solid var(--rule); vertical-align:middle; }
.unitsw button { padding:5px 10px; font-size:12.5px; font-weight:700; color:var(--fg60); min-height:32px; background:var(--jet); }
.unitsw button[data-on="1"] { background:var(--yellow); color:var(--jet); }
.stp-conv { display:block; font-size:11px; color:var(--fg60); margin-top:2px; font-weight:400; }
.stp-r input.wedit { border-bottom:1px dashed var(--rule); }
.lastset { display:flex; align-items:baseline; gap:8px; margin:0 0 12px; padding:9px 12px; background:var(--panel2); font-size:13px; }
.lastset span { color:var(--fg); opacity:.85; }
.lastset b { margin-left:auto; font-size:15px; color:var(--yellow); }
.stp-l { line-height:1.3; }

/* ============ 段階22：使い方ガイド（/guide） ============ */
.guide { padding-bottom:40px; }
.gtop { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.gtitle-main { display:flex; align-items:center; gap:10px; min-width:0; }
.gtitle-main img { border-radius:50%; flex:none; }
.gtitle-main b { display:block; font-size:17px; font-weight:700; line-height:1.3; }
.gtitle-main span { display:block; font-family:var(--fhead); font-size:12px; letter-spacing:.12em; color:var(--yellow); }
.glang { margin-left:auto; display:flex; border:1px solid var(--rule); flex:none; }
.glang a { padding:8px 10px; font-size:12px; font-weight:700; color:var(--fg); text-decoration:none; min-height:36px; display:flex; align-items:center; }
.glang a[data-on="1"] { background:var(--yellow); color:var(--jet); }
.glead { font-size:14px; line-height:1.8; color:var(--fg); margin:0 0 14px; }
.gindex { display:grid; gap:8px; }
.gcard { display:flex; align-items:center; gap:12px; padding:13px 12px; background:var(--panel); border:1px solid var(--rule); text-decoration:none; color:var(--fg); min-height:68px; }
.gcard:active { border-color:var(--yellow); background:var(--panel2); }
.gic { width:44px; height:44px; flex:none; display:grid; place-items:center; border:1px solid var(--rule); background:var(--jet); color:var(--yellow); }
.gic svg { width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.gtx { display:flex; flex-direction:column; min-width:0; flex:1; }
.gtx em { font-style:normal; font-family:var(--fhead); font-size:12px; letter-spacing:.1em; color:var(--yellow); line-height:1.2; }
.gtx b { font-size:15.5px; font-weight:700; line-height:1.4; }
.gtx small { font-size:11.5px; color:var(--fg60); }
.gcard .go { color:var(--fg60); font-size:18px; }
.gback { display:inline-block; color:var(--yellow); text-decoration:none; font-size:13.5px; margin:0 0 10px; }
.ghead { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.ghead em { font-style:normal; font-family:var(--fhead); font-size:12px; letter-spacing:.1em; color:var(--yellow); }
.ghead h2 { font-size:21px; font-weight:700; line-height:1.3; }
.gjump { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.gjump a { display:inline-flex; align-items:center; gap:6px; padding:7px 10px 7px 7px; border:1px solid var(--rule); color:var(--fg); text-decoration:none; font-size:12.5px; background:var(--panel); }
.gjump i { font-style:normal; width:20px; height:20px; border-radius:50%; background:var(--yellow); color:var(--jet); font-size:11px; font-weight:700; display:grid; place-items:center; }
.gstep { background:var(--panel); border:1px solid var(--rule); padding:14px; margin-bottom:12px; scroll-margin-top:12px; }
.gstep-h { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--rule); }
.gstep-h span { font-family:var(--fhead); font-size:13px; letter-spacing:.1em; color:var(--yellow); flex:none; }
.gstep-h h3 { font-size:16.5px; font-weight:700; line-height:1.4; }
.gshot { margin:0 auto 14px; max-width:290px; }
.gshot img { display:block; width:100%; height:auto; border:1px solid var(--rule); border-radius:18px; background:var(--jet); }
.gshot.icon { max-width:160px; }
.gshot.icon img { border-radius:36px; border:none; box-shadow:0 6px 24px rgba(0,0,0,.6); }
.gpts { list-style:none; counter-reset:gp; display:grid; gap:10px; }
.gpts li { counter-increment:gp; position:relative; padding-left:36px; font-size:14.5px; line-height:1.75; color:var(--fg); }
.gpts li::before { content:counter(gp); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; background:var(--yellow); color:var(--jet); font-weight:700; font-size:14px; display:grid; place-items:center; line-height:1; }
.gpts.plain li::before { background:transparent; color:var(--yellow); border:1px solid var(--yellow); }
.gpager { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:6px; }
.gpager a { display:flex; flex-direction:column; gap:3px; padding:12px; border:1px solid var(--rule); background:var(--panel); color:var(--fg); text-decoration:none; min-height:64px; }
.gpager a.nx { grid-column:2; text-align:right; border-color:var(--yellow); }
.gpager small { font-size:11.5px; color:var(--yellow); }
.gpager b { font-size:14px; }
.guidelink { display:flex; align-items:center; gap:10px; padding:12px; margin-bottom:11px; background:var(--panel); border:1px solid var(--yellow); color:var(--fg); text-decoration:none; }
.guidelink b { font-size:14px; }
.guidelink .go { margin-left:auto; color:var(--yellow); }
.guidelink .ricon { color:var(--yellow); }

/* 段階22：お店のページの営業時間・住所など（これまで見た目の指定がなく、文字が詰まっていた） */
.spec { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; margin:12px 12px 0; padding-top:12px; border-top:1px solid var(--rule); }
.spec span { display:block; font-size:11px; letter-spacing:.04em; color:var(--fg60); margin-bottom:2px; }
.spec b { display:block; font-size:13.5px; font-weight:500; line-height:1.5; }

/* ============ 段階23：有酸素の距離（m / km）とタイム（時間・分・秒） ============ */
.timerow { margin-top:12px; }
.timerow label small { font-weight:400; margin-left:4px; opacity:.8; }
.hms { display:flex; align-items:center; gap:6px; }
.hms input { width:64px; min-height:48px; padding:8px 4px; text-align:center; font-family:var(--fhead); font-size:22px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); }
.hms span { font-size:13px; color:var(--fg); margin-right:6px; }
.distpre { display:flex; gap:6px; justify-content:flex-end; margin:8px 0 2px; }
.distpre .kindtag { padding:8px 12px; }
.kcalbox { display:flex; align-items:baseline; gap:8px; margin-top:8px; padding:12px 13px; background:var(--panel2); }
.kcalbox span { font-size:13.5px; color:var(--fg); }
.kcalbox b { margin-left:auto; font-family:var(--fhead); font-size:26px; color:var(--coral); line-height:1; }
.kcalbox i { font-style:normal; font-size:10px; color:var(--fg60); }
.kcalnote { font-size:11px; color:var(--fg60); margin:6px 0 0; line-height:1.6; }

/* ============ 段階25：カレンダーのセット表示・トレーニングの修正 ============ */
/* 段階25.1：カレンダーのトレーニング。文字はすべて本文の書体、種目名と内容は同じ大きさ、列をそろえる */
.dl.calses { align-items:flex-start; }
.dl.calses > .c { height:auto; align-self:stretch; min-height:30px; }
.calbody { flex:1; min-width:0; }
.calsets { display:grid; grid-template-columns:minmax(0, max-content) minmax(0, 1fr); column-gap:12px; row-gap:6px;
           font-size:13px; line-height:1.5; }
.calset { display:contents; }
.calex { color:var(--fg); font-weight:500; max-width:8.5em; overflow-wrap:anywhere; }
.calruns { display:flex; flex-direction:column; color:var(--fg60); font-variant-numeric:tabular-nums; }
.calruns span { overflow-wrap:anywhere; }
.calmeta { margin-top:8px; font-size:11.5px; color:var(--fg30); line-height:1.5; display:flex; align-items:center; gap:8px; }
.calmeta > span { flex:1; min-width:0; }
.calmeta > .kindtag { flex:none; padding:6px 10px; font-size:11px; color:var(--yellow); border-color:var(--yellow); }
.calmeta b { display:inline; font-size:inherit; font-weight:600; color:var(--yellow); }
.pcard .menu .row .n:empty { min-height:1px; }
.sedit { width:100%; border-collapse:collapse; font-size:13px; }
.sedit th, .sedit td { border-bottom:1px solid var(--rule); padding:6px 3px; text-align:left; vertical-align:middle; }
.sedit th { font-size:11px; color:var(--fg60); font-weight:500; }
.sedit input[type=text], .sedit select { width:100%; min-width:0; padding:7px 5px; font-size:14px; background:var(--jet); border:1px solid var(--rule); color:var(--fg); }
.sedit .del input { width:20px; height:20px; }
.sedit tr.gone td { opacity:.35; text-decoration:line-through; }
.thumbimg { background:#000 center/cover no-repeat !important; position:relative; }
.thumbimg .lbl { background:rgba(0,0,0,.6); padding:1px 5px; }

/* ============ 段階25.3：登録・ログインの入口（3択）と見出し ============ */
.authpath { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:6px; margin:0 0 12px; }
.authpath a { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 4px 10px; text-align:center;
  background:var(--panel); border:1px solid var(--rule); border-top:3px solid var(--rule); color:var(--fg60); text-decoration:none; min-height:96px; }
.authpath .ap-ic { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:15px; font-weight:700;
  background:var(--panel2); color:var(--fg60); }
.authpath b { font-size:12.5px; color:var(--fg); line-height:1.3; }
.authpath em { font-style:normal; font-size:10.5px; line-height:1.35; }
.authpath a[data-k="new"]   { --ap:var(--yellow); }
.authpath a[data-k="login"] { --ap:#F7F7F4; }
.authpath a[data-k="guest"] { --ap:var(--sky); }
.authpath a[data-on="1"] { border-color:var(--ap); border-top-color:var(--ap); background:var(--panel2); }
.authpath a[data-on="1"] .ap-ic { background:var(--ap); color:var(--jet); }
.authpath a[data-on="1"] em { color:var(--fg); }
.authpath .ap-here { position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-style:normal; font-size:9.5px; font-weight:700;
  background:var(--ap); color:var(--jet); padding:2px 7px; white-space:nowrap; letter-spacing:.04em; }
.authhead { border-left:4px solid var(--ap, var(--yellow)); padding:2px 0 2px 11px; margin:0 0 14px; }
.authhead[data-k="new"] { --ap:var(--yellow); } .authhead[data-k="login"] { --ap:#F7F7F4; } .authhead[data-k="guest"] { --ap:var(--sky); }
.authhead small { display:block; font-size:11px; letter-spacing:.08em; color:var(--ap); font-weight:700; }
.authhead h2 { margin:2px 0 0; font-size:19px; line-height:1.35; }
.authhead p { margin:5px 0 0; font-size:12.5px; color:var(--fg60); line-height:1.7; }
.author { display:flex; align-items:center; gap:10px; margin:16px 0; color:var(--fg30); font-size:11.5px; }
.author::before, .author::after { content:""; flex:1; height:1px; background:var(--rule); }
.btn-line { display:flex !important; align-items:center; justify-content:center; gap:8px; background:#06C755 !important; color:#fff !important;
  border-color:#06C755 !important; font-weight:700; text-decoration:none; }
.btn-line::before { content:"LINE"; font-size:10px; font-weight:800; letter-spacing:.04em; background:#fff; color:#06C755; padding:2px 5px; border-radius:4px; }
.stepnum { display:flex; flex-direction:column; gap:8px; margin:12px 0 0; padding:0; list-style:none; counter-reset:st; }
.stepnum li { counter-increment:st; display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.65; color:var(--fg60); }
.stepnum li::before { content:counter(st); flex:none; width:22px; height:22px; border-radius:50%; background:var(--yellow); color:var(--jet);
  font-size:12px; font-weight:800; display:grid; place-items:center; margin-top:1px; }
.stepnum li b { color:var(--fg); }
.lineprof { display:flex; align-items:center; gap:11px; }
.lineprof img, .lineprof .ph { width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none; background:#06C755; }
.lineprof b { font-size:15px; display:block; }
.lineprof span { font-size:11.5px; color:var(--fg60); }
.choice2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0 0; }
.choice2 a { display:block; padding:12px 10px; border:1px solid var(--rule); border-top:3px solid var(--rule); background:var(--panel); color:var(--fg60);
  text-decoration:none; font-size:11px; line-height:1.5; }
.choice2 a b { display:block; font-size:13.5px; color:var(--fg); margin-bottom:2px; }
.choice2 a[data-on="1"] { border-color:var(--ap); border-top-color:var(--ap); background:var(--panel2); color:var(--fg); }
.choice2 a[data-k="new"] { --ap:var(--yellow); } .choice2 a[data-k="existing"] { --ap:#F7F7F4; }
@media (max-width:360px) { .authpath b { font-size:11.5px; } .authpath em { font-size:10px; } }