@charset "utf-8";

/* ─────────────────────────────────────────────────────────────
   KAKUCHO 共通スタイル
   申込ページ・完了ページ・解約ページ・管理画面で共有します。
   色は「紺 × 金 × 生成り」。数字は等幅で桁をそろえます。
   ───────────────────────────────────────────────────────────── */

:root {
  --nv: #0f2350;      /* 紺 */
  --nv2: #1b3566;
  --nv3: #35507f;
  --gd: #b08d4f;      /* 金 */
  --gd2: #cba96e;
  --gd3: #8f7038;
  --rd: #c0272d;
  --gr: #2f7a4a;

  --bg: #faf9f6;
  --bg2: #f3f1ea;
  --bg3: #fbf9f4;
  --line: #e5e1d8;
  --line2: #d6d0c3;

  --ink: #1a1a1a;
  --body: #454545;
  --muted: #7c7c7c;
  --dim: #a8a8a8;

  --mn: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
  --gt: 'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Noto Sans JP', sans-serif;

  --s1: 0 1px 2px rgba(15, 35, 80, .05);
  --s2: 0 6px 24px rgba(15, 35, 80, .09);
  --s3: 0 18px 50px rgba(15, 35, 80, .14);

  --r: 4px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--gt);
  font-size: 15px;
  line-height: 1.85;
  font-feature-settings: 'palt';
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nv3); text-underline-offset: 3px; }
a:hover { color: var(--nv); }

b, strong { color: var(--ink); font-weight: 700; }

:focus-visible {
  outline: 2px solid var(--gd);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── ヘッダ / フッタ ─────────────────────────── */
.hd {
  background: var(--nv);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
}
.hd-in {
  max-width: 1120px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-k {
  width: 26px; height: 26px; flex: 0 0 auto;
  border: 1px solid var(--gd2); color: var(--gd2);
  display: grid; place-items: center;
  font-family: var(--mn); font-size: 14px;
}
.brand-n { font-family: var(--mn); font-size: 15px; letter-spacing: .22em; }
.hd-sep { width: 1px; height: 18px; background: rgba(255,255,255,.24); }
.hd-ttl { font-size: 12.5px; letter-spacing: .1em; color: rgba(255,255,255,.82); }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 12.5px; }
.hd-right a { color: rgba(255,255,255,.8); }
.hd-right a:hover { color: #fff; }

.ft { border-top: 1px solid var(--line); margin-top: 72px; background: var(--bg2); }
.ft-in {
  max-width: 1120px; margin: 0 auto; padding: 22px 24px;
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  font-size: 12.5px; color: var(--muted);
}
.ft-in a { color: var(--muted); }
.ft-in a:hover { color: var(--nv); }
.ft-sp { margin-left: auto; }

/* ── テストモードの帯 ───────────────────────── */
.testbadge {
  background: #fff5d6; border-bottom: 1px solid #eadCA6;
  color: #6b5518; font-size: 12.5px; text-align: center;
  padding: 8px 16px; letter-spacing: .02em;
}
.testbadge b { color: #5a4512; }

/* ── ページ骨格 ─────────────────────────────── */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.page { max-width: 1120px; margin: 0 auto; padding: 0 24px 80px; }

.hero { padding: 56px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.hero-in { max-width: 720px; }
.eyebrow {
  font-size: 11px; letter-spacing: .3em; color: var(--gd);
  margin: 0 0 16px; font-weight: 500;
}
.h1 {
  font-family: var(--mn); font-weight: 600;
  font-size: clamp(26px, 4vw, 38px); line-height: 1.5;
  color: var(--nv); margin: 0 0 20px; letter-spacing: .02em;
}
.hero-p { font-size: 15px; line-height: 2; color: var(--body); margin: 0; max-width: 640px; }

@media (max-width: 640px) { .brsp { display: none; } }

/* ── ステップ表示 ───────────────────────────── */
.steps {
  list-style: none; margin: 30px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  font-size: 12.5px; color: var(--dim);
}
.steps li { display: flex; align-items: center; gap: 8px; }
.steps li::after { content: ''; width: 22px; height: 1px; background: var(--line2); margin-left: 14px; }
.steps li:last-child::after { display: none; }
.s-n {
  width: 21px; height: 21px; border-radius: 50%;
  border: 1px solid var(--line2); color: var(--dim);
  display: grid; place-items: center; font-size: 11px;
  transition: .18s;
}
.steps li.is-now { color: var(--nv); font-weight: 500; }
.steps li.is-now .s-n { border-color: var(--nv); background: var(--nv); color: #fff; }
.steps li.is-done { color: var(--gd3); }
.steps li.is-done .s-n { border-color: var(--gd); background: var(--gd); color: #fff; }
.steps li.is-done .s-n::before { content: '✓'; font-size: 11px; }
.steps li.is-done .s-n { font-size: 0; }

/* ── レイアウト（本文 + サイドバー） ─────────── */
.grid { display: grid; grid-template-columns: minmax(0, 1fr) 316px; gap: 48px; align-items: start; }
@media (max-width: 940px) { .grid { grid-template-columns: 1fr; gap: 32px; } }

.step { margin-bottom: 48px; scroll-margin-top: 80px; }
.step-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 10px; }
.step-n {
  font-family: var(--mn); font-size: 12px; letter-spacing: .16em;
  color: var(--gd); flex: 0 0 auto;
}
.step-t { font-family: var(--mn); font-size: 19px; color: var(--nv); margin: 0; font-weight: 600; letter-spacing: .04em; }
.step-lead { font-size: 14px; color: var(--body); margin: 0 0 20px; line-height: 1.9; }

.sub-t {
  font-family: var(--mn); font-size: 14px; font-weight: 600; letter-spacing: .1em;
  color: var(--nv); margin: 32px 0 12px;
}

/* ── 入力欄 ─────────────────────────────────── */
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .fields { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 7px; }
.field-w { grid-column: 1 / -1; }
.field-l { font-size: 12.5px; color: var(--nv); letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.field-l i {
  font-style: normal; font-size: 10px; letter-spacing: .08em;
  color: var(--rd); border: 1px solid rgba(192,39,45,.3); border-radius: 2px;
  padding: 0 5px; line-height: 1.7;
}
.field-l i.opt { color: var(--muted); border-color: var(--line2); }

input[type='text'], input[type='email'], input[type='tel'], input[type='password'],
input[type='number'], input[type='date'], input[type='time'], select, textarea {
  font-family: var(--gt); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--line2); border-radius: var(--r);
  padding: 12px 14px; width: 100%; transition: border-color .15s, box-shadow .15s;
}
textarea { line-height: 1.8; resize: vertical; min-height: 84px; }
input:hover, select:hover, textarea:hover { border-color: var(--gd2); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--nv); box-shadow: 0 0 0 3px rgba(15,35,80,.08);
}
input.bad, select.bad { border-color: var(--rd); }
input::placeholder, textarea::placeholder { color: #b8b8b8; }
.field-h { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; line-height: 1.85; }

/* ── ボタン ─────────────────────────────────── */
.btn {
  font-family: var(--gt); font-size: 15px; letter-spacing: .06em;
  background: var(--nv); color: #fff; border: 1px solid var(--nv);
  border-radius: var(--r); padding: 14px 26px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  transition: background .16s, box-shadow .16s, transform .16s, opacity .16s;
}
.btn:hover:not(:disabled) { background: #16305f; box-shadow: var(--s2); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .42; cursor: not-allowed; }
.btn-main { width: 100%; padding: 17px 26px; font-size: 16px; margin-top: 26px; }
.btn-ar { font-size: 11px; opacity: .85; }
.btn-ghost { background: transparent; color: var(--nv); border-color: var(--line2); }
.btn-ghost:hover:not(:disabled) { background: #fff; border-color: var(--gd2); box-shadow: var(--s1); }
.btn-danger { background: var(--rd); border-color: var(--rd); }
.btn-danger:hover:not(:disabled) { background: #a92126; }
.btn-sm { padding: 8px 14px; font-size: 13px; border-radius: 3px; }

/* ── 状態表示 ───────────────────────────────── */
.state { max-width: 560px; margin: 96px auto; text-align: center; padding: 0 24px; }
.state-ttl { font-family: var(--mn); font-size: 21px; color: var(--nv); margin: 0 0 12px; font-weight: 600; }
.state-msg { color: var(--body); margin: 0 0 8px; }
.state-sub { font-size: 13px; color: var(--muted); margin: 0; }

.spinner {
  width: 26px; height: 26px; margin: 0 auto 18px;
  border: 2px solid var(--line2); border-top-color: var(--gd);
  border-radius: 50%; animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 読み込みの進み具合。終わったものに印が付くので、
   「止まっているのか、待てばよいのか」が見て分かります。 */
.load-steps {
  list-style: none; margin: 14px auto 0; padding: 0;
  display: inline-block; text-align: left; font-size: 13px; color: var(--muted);
}
.load-steps li { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.load-steps i {
  width: 14px; height: 14px; flex: 0 0 auto; border-radius: 50%;
  border: 1.5px solid var(--line2); position: relative;
}
.load-steps li.ls-done { color: var(--body); }
.load-steps li.ls-done i { border-color: var(--gd); background: var(--gd); }
.load-steps li.ls-done i::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 3px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
/* 「読み込み直す」は、待たされた人にだけ出します */
#load-verylong { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 2s; }
  * { scroll-behavior: auto !important; }
}

.notice {
  background: #fff8e8; border: 1px solid #e8d7a8; border-left: 3px solid var(--gd);
  border-radius: var(--r); padding: 15px 18px; font-size: 13.5px; color: #6b5518;
  margin-bottom: 28px; line-height: 1.85;
}
.err {
  background: #fdf0f0; border: 1px solid #f0c9ca; border-left: 3px solid var(--rd);
  border-radius: var(--r); padding: 15px 18px; font-size: 13.5px; color: #8f1e22;
  line-height: 1.85;
}
.err-main { margin-top: 24px; }
.ok {
  background: #eef7f0; border: 1px solid #c3e0cc; border-left: 3px solid var(--gr);
  border-radius: var(--r); padding: 15px 18px; font-size: 13.5px; color: #1f5c36;
  line-height: 1.85;
}
.lock {
  display: flex; align-items: flex-start; gap: 13px;
  background: var(--bg2); border: 1px dashed var(--line2); border-radius: var(--r);
  padding: 18px 20px; font-size: 13.5px; color: var(--muted); line-height: 1.8;
}
.lock-i {
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: var(--line2); color: #fff; display: grid; place-items: center;
  font-size: 10.5px; margin-top: 3px;
}
.dim { color: var(--dim); }
.fine { font-size: 12.5px; color: var(--muted); line-height: 1.9; margin: 14px 0 0; }
.fine b { color: var(--body); }

/* ── カレンダー ─────────────────────────────── */
.cal { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--s1); }
.cal-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--line);
}
.cal-m { font-family: var(--mn); font-size: 17px; color: var(--nv); letter-spacing: .06em; }
.cal-nav { display: flex; gap: 8px; }
.cal-btn {
  width: 34px; height: 34px; border: 1px solid var(--line2); background: #fff;
  border-radius: 3px; cursor: pointer; color: var(--nv3); font-size: 13px;
  display: grid; place-items: center; transition: .15s;
}
.cal-btn:hover:not(:disabled) { border-color: var(--gd2); background: var(--bg3); }
.cal-btn:disabled { opacity: .3; cursor: not-allowed; }

/* 空きのある日の件数と、最短の日程へ飛ぶボタン */
.cal-top {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 12px; margin-bottom: 14px;
}
.cal-top-t { font-size: 13.5px; color: var(--body); margin: 0; }
.cal-top-t b { color: var(--nv); font-size: 15px; }
.cal-soon {
  border: 1px solid var(--nv); background: #fff; color: var(--nv);
  border-radius: 3px; padding: 9px 16px; font-family: var(--gt); font-size: 13px;
  cursor: pointer; transition: .15s; white-space: nowrap;
}
.cal-soon:hover { background: var(--nv); color: #fff; box-shadow: var(--s2); }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 6px; padding: 4px 14px 14px;
}
.cal-wd {
  text-align: center; font-size: 11px; letter-spacing: .1em; color: var(--muted);
  padding: 12px 0 2px;
}
.cal-wd.sun { color: #b9585c; }
.cal-wd.sat { color: #5a7ba8; }

/* 空きのない日。数字だけを薄く置きます。 */
.cal-d {
  position: relative; height: 62px;
  border: 1px solid transparent; background: transparent; border-radius: 4px;
  font-family: var(--gt); font-size: 14px; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; cursor: default; padding: 0;
}

/* 空きのある日。押せるものだと分かるよう、枠と下地をつけて浮かせます。 */
.cal-d.has {
  color: var(--nv); cursor: pointer; font-weight: 700;
  background: #fdfaf3; border-color: var(--gd2); box-shadow: var(--s1);
  transition: background .14s, border-color .14s, box-shadow .14s, transform .14s;
}
.cal-d.has:hover {
  background: #fff; border-color: var(--gd);
  box-shadow: var(--s2); transform: translateY(-1px);
}
.cal-d.has .cal-dn { font-size: 15.5px; }
.cal-d.has:focus-visible { outline: 2px solid var(--nv); outline-offset: 2px; }

/* その日に選べる開始時刻の数。あと1件のときだけ赤にします。 */
.cal-left { font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--gd3); }
.cal-d.few .cal-left { color: var(--rd); }

.cal-d.on, .cal-d.has.on:hover {
  background: var(--nv); border-color: var(--nv); color: #fff;
  transform: none; box-shadow: var(--s2);
}
.cal-d.on .cal-left { color: rgba(255, 255, 255, .78); }
.cal-d.today .cal-dn { text-decoration: underline; text-decoration-color: var(--gd); text-underline-offset: 3px; }
.cal-dn { font-variant-numeric: tabular-nums; }
.cal-empty { height: 62px; }

.cal-none {
  margin: 0; padding: 0 18px 18px; font-size: 13px; color: var(--muted); text-align: center;
}
.cal-none b { color: var(--nv); }

.cal-legend {
  display: flex; gap: 18px; align-items: center; padding: 12px 18px;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.cal-legend span { display: flex; align-items: center; gap: 7px; }
.cal-key {
  width: 20px; height: 16px; border-radius: 3px;
  background: #fdfaf3; border: 1px solid var(--gd2); flex: 0 0 auto;
}

/* 画面が狭いときは、マスを詰めて指で押せる大きさを保ちます。 */
@media (max-width: 560px) {
  .cal-top { flex-direction: column; align-items: stretch; }
  .cal-soon { width: 100%; padding: 12px 16px; }
  .cal-grid { gap: 4px; padding: 2px 8px 12px; }
  .cal-d, .cal-empty { height: 56px; }
  .cal-d { gap: 1px; }
  .cal-d.has .cal-dn { font-size: 14.5px; }
  .cal-left { font-size: 9.5px; letter-spacing: 0; }
  .cal-legend { flex-direction: column; align-items: flex-start; gap: 7px; }
  /* 指で押す前月・次月は 44px 以上にします（それ未満は押し間違えます） */
  .cal-btn { width: 44px; height: 44px; font-size: 20px; }
  /* 開始時刻は2列に並べ、端まで使って押しやすくします */
  .time-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .time { padding: 13px 10px; justify-content: center; gap: 6px; font-size: 14px; }
  .time-list .time { flex-direction: column; align-items: center; gap: 2px; }
}

.times { margin-top: 20px; }
/* h3 なので、見出しの既定マージンと太さを打ち消します（見た目は変えません） */
.times-h { font-size: 12.5px; color: var(--nv); letter-spacing: .06em; font-weight: 500; margin: 0 0 12px; }
.time-list { display: flex; flex-wrap: wrap; gap: 10px; }
.time {
  background: #fff; border: 1px solid var(--line2); border-radius: 3px;
  padding: 11px 18px; cursor: pointer; font-family: var(--gt); font-size: 14.5px;
  color: var(--ink); display: flex; align-items: baseline; gap: 10px;
  transition: .15s; font-variant-numeric: tabular-nums;
}
.time:hover { border-color: var(--gd2); box-shadow: var(--s1); }
.time.on { border-color: var(--nv); background: var(--nv); color: #fff; box-shadow: var(--s2); }
.time small { font-size: 11.5px; color: var(--muted); }
.time.on small { color: rgba(255,255,255,.72); }
.time-none { font-size: 13.5px; color: var(--muted); }

/* ── 選択済みの帯 ───────────────────────────── */
.picked {
  display: flex; align-items: flex-start; gap: 14px; margin-top: 20px;
  padding: 18px 20px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--gd); border-radius: var(--r); box-shadow: var(--s1);
}
.picked-mark {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--gd); color: var(--gd);
  display: grid; place-items: center; font-size: 14px; margin-top: 2px;
}
.picked-k { font-size: 11.5px; letter-spacing: .12em; color: var(--gd3); margin-bottom: 4px; }
.picked-v { font-family: var(--mn); font-size: 19px; color: var(--nv); letter-spacing: .02em; line-height: 1.5; }
.picked-n { font-size: 12.5px; color: var(--muted); margin-top: 6px; }

/* ── ご請求のまとめ ─────────────────────────── */
.digest { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); }
.digest li {
  display: grid; grid-template-columns: 1fr auto; gap: 8px 20px;
  align-items: baseline; padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.digest li:last-child { border-bottom: 0; }
.digest li.hi { background: #fbf8f1; border-left: 3px solid var(--gd); padding-left: 17px; }
.d-k { font-size: 12px; letter-spacing: .1em; color: var(--gd3); grid-column: 1; grid-row: 1; }
.digest li:not(.hi) .d-k { color: var(--muted); }
.d-w { font-size: 14.5px; color: var(--ink); grid-column: 1; grid-row: 2; line-height: 1.65; }
.d-a {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
  font-family: var(--mn); font-size: 21px; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.d-a small { font-family: var(--gt); font-size: 11.5px; color: var(--muted); display: block; text-align: right; margin-top: 2px; }
.digest li.sup { background: var(--bg3); }
.digest li.tot { background: var(--bg2); }
.digest li.tot .d-k, .digest li.tot .d-a { color: var(--nv); }

@media (max-width: 560px) {
  .digest li { grid-template-columns: minmax(0, 1fr); }
  .d-a { grid-column: 1; grid-row: auto; text-align: left; margin-top: 8px; font-size: 19px; }
  .d-a small { text-align: left; }
}

/* ── 注記ボックス ───────────────────────────── */
.consent {
  margin-top: 22px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--gd); border-radius: var(--r); padding: 20px 22px;
}
.consent-h { font-family: var(--mn); font-size: 14px; color: var(--nv); letter-spacing: .08em; margin-bottom: 12px; }
.consent-l { margin: 0; padding-left: 1.2em; font-size: 13.5px; color: var(--body); line-height: 1.95; }
.consent-l li { margin-bottom: 6px; }
.consent-l li:last-child { margin-bottom: 0; }

/* ── キャンセルポリシーの表 ─────────────────── */
.pol-lead { font-size: 13.5px; color: var(--body); margin: 0 0 14px; line-height: 1.9; }
/* 段階制で列が増えたため、狭い画面では表だけを横スクロールさせます。
   ページ全体が横に動くのは避けたいので、包む要素の中だけで完結させます。 */
.pol-wrap { overflow-x: auto; margin: 0 0 16px; -webkit-overflow-scrolling: touch; }
.pol-wrap .pol { margin-bottom: 0; }

.pol {
  width: 100%; border-collapse: collapse; margin: 0 0 16px;
  font-size: 13px; line-height: 1.7;
  min-width: 380px;
}
.pol th, .pol td {
  border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.pol th {
  background: var(--bg2); color: var(--nv); font-weight: 500;
  font-size: 12px; letter-spacing: .04em; white-space: nowrap;
}
.pol td { color: var(--body); }
.pol .pol-y {
  text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 700;
}
.pol tr.pol-no td { color: var(--muted); background: #fdfdfc; }
.pol tr.pol-no .pol-y { color: var(--rd); font-weight: 500; }

@media (max-width: 560px) {
  .pol { font-size: 12px; }
  .pol th, .pol td { padding: 8px 8px; }
  .pol th { white-space: normal; }
}

/* ── 同意のチェック ─────────────────────────── */
.agree {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  margin-top: 22px; padding: 16px 18px;
  background: #fff; border: 1px solid var(--line2); border-radius: var(--r);
  font-size: 13.5px; line-height: 1.85; color: var(--body);
  transition: border-color .15s, box-shadow .15s;
}
.agree:hover { border-color: var(--gd2); }
.agree:has(input:checked) { border-color: var(--nv); box-shadow: 0 0 0 3px rgba(15, 35, 80, .07); }
.agree input {
  width: 19px; height: 19px; flex: 0 0 auto; margin: 2px 0 0;
  accent-color: var(--nv); cursor: pointer;
}

/* ── 右サイドバー ───────────────────────────── */
.side { position: sticky; top: 84px; }
.sum { background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--s2); overflow: hidden; }
.sum-h {
  background: var(--nv); color: #fff; padding: 14px 20px;
  font-family: var(--mn); font-size: 13.5px; letter-spacing: .14em;
}
.sum-rows { padding: 6px 20px; }
.sum-r {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  padding: 13px 0; border-bottom: 1px dashed var(--line);
  font-size: 13px; color: var(--muted);
}
.sum-r:last-child { border-bottom: 0; }
.sum-r b { font-size: 14px; color: var(--ink); text-align: right; font-weight: 500; }
.sum-r b.dash { color: var(--dim); font-weight: 400; }
.sum-first { background: var(--bg3); border-top: 1px solid var(--line); padding: 16px 20px; }
.sum-first-k { font-size: 11px; letter-spacing: .12em; color: var(--gd3); margin-bottom: 6px; }
.sum-first-v { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.sum-first-v span { font-size: 13px; color: var(--body); }
.sum-first-v + .sum-first-v { margin-top: 6px; }
.sum-first-v b { font-family: var(--mn); font-size: 15px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-first-n { font-size: 12px; color: var(--muted); margin-top: 8px; line-height: 1.8; }
.sum-today {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 15px 20px; border-top: 1px solid var(--line); background: #fff;
  font-size: 13px; color: var(--nv);
}
.sum-today b { font-family: var(--mn); font-size: 20px; font-variant-numeric: tabular-nums; }
.go-hint { padding: 0 20px 14px; font-size: 12.5px; color: var(--gd3); line-height: 1.8; margin: 12px 0 0; }
.sum-note, .sum-legal { padding: 0 20px 16px; font-size: 11.5px; color: var(--muted); line-height: 1.85; margin: 0; }
.sum-legal { border-top: 1px solid var(--line); padding-top: 14px; }

/* ── 完了ページ ─────────────────────────────── */
.done { max-width: 620px; margin: 72px auto 0; text-align: center; }
.done-mark {
  width: 56px; height: 56px; margin: 0 auto 26px; border-radius: 50%;
  border: 1px solid var(--gd); color: var(--gd);
  display: grid; place-items: center; font-size: 24px;
}
.done h1 { font-family: var(--mn); font-size: 27px; line-height: 1.6; color: var(--nv); margin: 0 0 18px; font-weight: 600; }
.done > p { font-size: 14.5px; line-height: 2; color: var(--body); margin: 0 0 34px; }
.recap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); text-align: left; box-shadow: var(--s1); }
.recap dl { margin: 0; padding: 6px 24px; }
.recap dt { font-size: 11.5px; letter-spacing: .1em; color: var(--gd3); padding-top: 16px; }
.recap dd {
  margin: 5px 0 16px; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid var(--line); padding-bottom: 16px; line-height: 1.7;
}
.recap dd:last-child { border-bottom: 0; }
.next { background: var(--bg2); border-radius: var(--r); padding: 22px 26px; margin-top: 30px; text-align: left; }
.next-h { font-family: var(--mn); font-size: 13.5px; letter-spacing: .1em; color: var(--nv); margin-bottom: 12px; }
.next-l { margin: 0; padding-left: 1.3em; font-size: 13.5px; color: var(--body); line-height: 1.95; }
.next-l li { margin-bottom: 7px; }

/* ── 覆い（送信中） ─────────────────────────── */
.wait {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(250,249,246,.95); backdrop-filter: blur(3px);
}
.wait-in { text-align: center; padding: 24px; }
.wait-t { font-family: var(--mn); font-size: 19px; color: var(--nv); margin: 6px 0 8px; letter-spacing: .04em; }
.wait-s { font-size: 13.5px; color: var(--body); margin: 0; }

/* ── 文書ページ（規約・特商法） ─────────────── */
.doc { max-width: 760px; margin: 56px auto 0; }
.doc h2 {
  font-family: var(--mn); font-size: 17px; color: var(--nv); font-weight: 600;
  margin: 40px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
  letter-spacing: .04em;
}
.doc ol, .doc ul { padding-left: 1.4em; font-size: 14px; line-height: 2; }
.doc li { margin-bottom: 8px; }
.doc dl { border-top: 1px solid var(--line); }
.doc dt {
  font-size: 12.5px; letter-spacing: .08em; color: var(--gd3);
  padding-top: 18px;
}
.doc dd { margin: 6px 0 18px; padding-bottom: 18px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.95; }
.todo {
  display: inline-block; font-size: 11px; letter-spacing: .06em; color: #8a6d1f;
  background: #fdf3d6; border: 1px solid #e6d3a0; border-radius: 2px;
  padding: 0 6px; line-height: 1.8; margin-right: 6px;
}

/* ── 表 ─────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tbl th {
  background: var(--bg2); color: var(--nv); font-weight: 500; font-size: 11.5px;
  letter-spacing: .06em; text-align: left; padding: 11px 16px; white-space: nowrap;
  border-bottom: 1px solid var(--line);
}
table.tbl td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl tr:last-child td { border-bottom: 0; }
table.tbl tbody tr:hover { background: var(--bg3); }
table.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tbl .nowrap { white-space: nowrap; }

/* ── バッジ ─────────────────────────────────── */
.tag {
  display: inline-block; font-size: 11px; letter-spacing: .05em; line-height: 1.9;
  padding: 0 8px; border-radius: 2px; border: 1px solid; white-space: nowrap;
}
.tag-paid { color: var(--gr); border-color: rgba(47,122,74,.35); background: rgba(47,122,74,.06); }
.tag-pending { color: #8a6d1f; border-color: #e6d3a0; background: #fdf7e6; }
.tag-canceled { color: var(--muted); border-color: var(--line2); background: var(--bg2); }
.tag-expired { color: var(--dim); border-color: var(--line2); background: var(--bg2); }
.tag-failed { color: var(--rd); border-color: rgba(192,39,45,.3); background: rgba(192,39,45,.05); }
.tag-open { color: var(--nv3); border-color: rgba(53,80,127,.3); background: rgba(53,80,127,.05); }
.tag-closed { color: var(--muted); border-color: var(--line2); background: var(--bg2); }

.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─────────────────────────────────────────────────────────────
   管理画面
   ───────────────────────────────────────────────────────────── */

.adm { max-width: 1240px; margin: 0 auto; padding: 32px 24px 80px; }

.login-card {
  max-width: 420px; margin: 72px auto; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--s2);
  padding: 36px 34px;
}
.login-card h1 {
  font-family: var(--mn); font-size: 21px; color: var(--nv); font-weight: 600;
  margin: 0 0 6px; letter-spacing: .04em;
}
.login-card .sub { font-size: 13px; color: var(--muted); margin: 0 0 26px; line-height: 1.8; }
.login-card .btn { width: 100%; margin-top: 22px; }
.login-back {
  background: none; border: 0; color: var(--nv3); cursor: pointer;
  font-family: var(--gt); font-size: 12.5px; padding: 12px 0 0; text-decoration: underline;
  text-underline-offset: 3px;
}
.code-input {
  font-family: var(--mn); font-size: 26px; letter-spacing: .5em;
  text-align: center; padding: 14px 10px 14px 24px;
}

.adm-head {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  padding-bottom: 20px; border-bottom: 1px solid var(--line); margin-bottom: 26px;
}
.adm-head h1 { font-family: var(--mn); font-size: 22px; color: var(--nv); margin: 0; font-weight: 600; letter-spacing: .05em; }
.adm-who { margin-left: auto; font-size: 12.5px; color: var(--muted); display: flex; align-items: center; gap: 14px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 30px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 17px 19px; box-shadow: var(--s1);
}
.card-k { font-size: 11px; letter-spacing: .1em; color: var(--gd3); margin-bottom: 7px; }
.card-v { font-family: var(--mn); font-size: 25px; color: var(--nv); font-variant-numeric: tabular-nums; line-height: 1.3; }
.card-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 26px; flex-wrap: wrap; }
.tab {
  background: none; border: 0; border-bottom: 2px solid transparent;
  font-family: var(--gt); font-size: 14px; color: var(--muted);
  padding: 11px 18px; cursor: pointer; transition: .15s; letter-spacing: .04em;
}
.tab:hover { color: var(--nv); }
.tab.on { color: var(--nv); border-bottom-color: var(--gd); font-weight: 500; }

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.toolbar input[type='text'], .toolbar select { width: auto; min-width: 180px; padding: 9px 12px; font-size: 14px; }
.toolbar .sp { margin-left: auto; }

.panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 24px; margin-bottom: 26px; box-shadow: var(--s1);
}
.panel-h { font-family: var(--mn); font-size: 15px; color: var(--nv); margin: 0 0 16px; font-weight: 600; letter-spacing: .06em; }
.panel .fields { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
/* ラベルが2行に折り返した項目だけ入力欄が下にずれるのを防ぎます。
   各項目を下端そろえにすると、行内の入力欄が必ず同じ高さに並びます。 */
.panel .field { justify-content: flex-end; }
.panel .field .field-l { margin-bottom: auto; }
.panel-actions { display: flex; gap: 12px; align-items: center; margin-top: 18px; flex-wrap: wrap; }

.row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; color: var(--muted); }
.muted { color: var(--muted); }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* 詳細ダイアログ */
.modal {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center;
  background: rgba(15,35,80,.34); padding: 24px; overflow-y: auto;
}
.modal-in {
  background: #fff; border-radius: var(--r); box-shadow: var(--s3);
  max-width: 560px; width: 100%; padding: 28px 30px; max-height: 90vh; overflow-y: auto;
}
.modal-h {
  font-family: var(--mn); font-size: 17px; color: var(--nv); margin: 0 0 4px;
  font-weight: 600; letter-spacing: .04em;
}
.modal-sub { font-size: 12px; color: var(--muted); margin: 0 0 20px; }
.modal dl { margin: 0 0 20px; border-top: 1px solid var(--line); }
.modal dt { font-size: 11px; letter-spacing: .08em; color: var(--gd3); padding-top: 13px; }
.modal dd { margin: 3px 0 13px; padding-bottom: 13px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); }
.modal-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; margin-top: 20px; }
/* チェックボックスの並び。入力欄のグリッドに混ぜると、長い説明が折り返して
   窮屈になるので、縦に積んで上に余白をとります。 */
.checks { display: flex; flex-direction: column; gap: 12px; margin-top: 22px; }

.check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--ink); line-height: 1.7; }
.check > span { padding-top: 1px; }
.check input { width: 17px; height: 17px; margin-top: 4px; accent-color: var(--nv); cursor: pointer; flex: 0 0 auto; }

/* ── 管理画面の開催カレンダー ─────────────── */
.acal { max-width: 560px; }
.acal .cal-h { padding: 12px 16px; }
.acal .cal-m { font-size: 15px; }
.acal .cal-btn { width: auto; min-width: 34px; padding: 0 10px; font-size: 12px; }

.acal-d {
  position: relative; aspect-ratio: 1 / .82; border: 0; background: transparent;
  font-family: var(--gt); font-size: 13px; color: var(--dim); padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  cursor: default; border-radius: 3px;
}
.acal-d .acal-n { font-variant-numeric: tabular-nums; }
.acal-d .acal-s {
  font-size: 10px; line-height: 1.5; padding: 0 5px; border-radius: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.acal-d.has { cursor: pointer; color: var(--ink); }
.acal-d.has:hover { background: var(--bg3); }
.acal-d.free .acal-s { background: rgba(176,141,79,.16); color: var(--gd3); }
.acal-d.some .acal-s { background: rgba(192,39,45,.1); color: var(--rd); }
.acal-d.full .acal-s { background: var(--nv); color: #fff; }
.acal-d.closed .acal-s { background: var(--line2); color: #fff; }
.acal-d.on, .acal-d.has.on:hover { outline: 2px solid var(--nv); outline-offset: -2px; background: var(--bg2); }
.acal-empty { aspect-ratio: 1 / .82; }

.acal-legend {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  margin-top: 14px; font-size: 12px; color: var(--muted);
}
.acal-legend span { display: flex; align-items: center; gap: 7px; }
/* 会議室へのリンク。当日そのまま押せるよう、文字より少し目立たせます */
.meet-a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: 999px;
  background: rgba(176,141,79,.14); border: 1px solid var(--gd2);
  color: var(--gd3); font-size: 11.5px; text-decoration: none; white-space: nowrap;
}
.meet-a::before { content: '▶'; font-size: 8px; }
.meet-a:hover { background: var(--gd); color: #fff; border-color: var(--gd); }
.meet-a:focus-visible { outline: 2px solid var(--nv); outline-offset: 2px; }
/* 詳細ダイアログの「会議室」。他の行は文字なので、ボタンだけ浮かないよう少し詰めます */
.m-meet { display: flex; align-items: center; min-height: 22px; }
.m-meet .meet-a { padding: 3px 10px; font-size: 12px; }

/* ── 管理画面のカレンダー（ワークショップ・相談・ホストの予定を1枚に） ── */
.mcal { max-width: 820px; }
.mcal .cal-h { padding: 12px 16px; }
.mcal .cal-m { font-size: 15px; }
.mcal .cal-btn { width: auto; min-width: 34px; padding: 0 10px; font-size: 12px; }

.mcal-d {
  display: flex; flex-direction: column; gap: 4px; justify-content: flex-start;
  min-height: 66px; padding: 6px 6px 5px; text-align: left;
  background: #fff; border: 1px solid var(--line); border-radius: 6px;
  cursor: pointer; color: var(--ink); font: inherit;
}
.mcal-d:hover { background: var(--bg3); border-color: var(--gd2); }
.mcal-d:focus-visible { outline: 2px solid var(--nv); outline-offset: 2px; }
.mcal-empty { min-height: 66px; }

.mcal-dh { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.mcal-n { font-variant-numeric: tabular-nums; font-size: 13px; }
.mcal-d.today .mcal-n {
  text-decoration: underline; text-decoration-color: var(--gd); text-underline-offset: 3px; font-weight: 700;
}
.mcal-d.off { background: var(--bg2); }
.mcal-d.off .mcal-n { color: var(--line2); }
.mcal-tag {
  font-size: 9.5px; letter-spacing: .04em; padding: 1px 4px; border-radius: 3px;
  background: rgba(192,39,45,.1); color: var(--rd);
}
.mcal-d.on, .mcal-d.on:hover { outline: 2px solid var(--nv); outline-offset: -2px; background: var(--bg2); }

.mcal-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.mcal-more { font-size: 9.5px; color: var(--gd3); }

/* 何が入っているかの印。凡例と同じものを使います */
.mk { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; display: inline-block; }
.mk-workshop { background: var(--nv); }
.mk-consult  { background: var(--gd); }
.mk-pending  { background: rgba(176,141,79,.4); }
.mk-open     { background: #fff; border: 1px solid var(--gd2); }
.mk-busy     { background: var(--line2); }
.mk-holiday  { background: rgba(192,39,45,.25); }

.mcal-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-top: 12px; font-size: 12px; color: var(--body);
}
.mcal-legend span { display: flex; align-items: center; gap: 7px; }

/* 選んだ日の中身。
   左から【印】【時刻】【中身】と並べ、会議室のボタンだけ右端に寄せます。
   お名前のすぐ後ろにボタンを置くと、名前の長さで押す位置が毎行ずれます。 */
.mday { display: flex; flex-direction: column; }
.mday-r {
  display: grid;
  grid-template-columns: 10px 94px minmax(0, 1fr) auto;
  column-gap: 14px; row-gap: 4px;
  align-items: center;
  padding: 11px 6px; border-bottom: 1px solid var(--line);
}
.mday-r:last-child { border-bottom: 0; }
.mday-r .mk { grid-column: 1; grid-row: 1; }
.mday-t { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--nv); }
.mday-x { grid-column: 3; grid-row: 1; font-size: 12.5px; color: var(--body); line-height: 1.5; }
.mday-who { grid-column: 3; grid-row: 2; font-size: 12px; color: var(--gd3); line-height: 1.5; }
/* ボタンは横に並べます。縦に積むと、その列の高さで行全体が押し広げられ、
   左の文字（中身とお名前）が間延びして見えます。 */
.mday-act {
  grid-column: 4; grid-row: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px;
}

@media (max-width: 640px) {
  .mcal-d, .mcal-empty { min-height: 56px; }
  /* 狭いときは右に寄せず、下に積みます（横に潰れるより読めます） */
  .mday-r { grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; align-items: start; }
  .mday-r .mk { margin-top: 4px; }
  .mday-t { grid-column: 2; grid-row: 1; }
  .mday-x { grid-column: 2; grid-row: 2; }
  .mday-who { grid-column: 2; grid-row: 3; }
  .mday-act { grid-column: 2; grid-row: 4; align-items: flex-start; justify-content: flex-start; }
}

.sw { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 auto; }
.sw-free { background: rgba(176,141,79,.35); }
.sw-some { background: rgba(192,39,45,.22); }
.sw-full { background: var(--nv); }
.sw-closed { background: var(--line2); }

/* ── 操作履歴 ─────────────────────────────── */
.log-what { color: var(--ink); }
.log-target { color: var(--body); }
.log-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--dim); }
.log-detail { color: var(--muted); font-size: 12.5px; line-height: 1.7; }
.log-actor { white-space: nowrap; }
.log-warn .log-what { color: var(--rd); }
.log-money .log-what { color: var(--gd3); font-weight: 500; }

/* 注意を促す注記ボックス（返金の条件など） */
.consent.warn { border-left-color: var(--rd); background: #fffbfb; }
.consent.warn .consent-h { color: #8f1e22; }

/* ── 受付ルール（管理画面） ───────────────── */
.panel-sub {
  font-family: var(--mn);
  font-size: 14px;
  color: var(--nv);
  margin: 26px 0 8px;
  font-weight: 600;
}

/* 曜日ごとの受付時間 */
.hours { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.hour-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* 共通の input は幅100%なので、この行の中だけ固定幅に戻します */
.hour-row select,
.hour-row input[type="time"] {
  padding: 9px 12px;
  font-size: 13.5px;
  width: auto;
  flex: 0 0 auto;
}
.hour-row select { width: 104px; }
.hour-row input[type="time"] { width: 132px; }
.hour-row .btn { flex: 0 0 auto; }
.hour-sep { color: var(--muted); font-size: 13px; flex: 0 0 auto; }

@media (max-width: 560px) {
  .hour-row select { width: 84px; }
  .hour-row input[type="time"] { width: 110px; }
}

/* Google 連携 */
.gbox {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--bg3);
  padding: 14px 16px;
  margin-top: 16px;
}
.gbox p { margin: 0 0 6px; font-size: 13.5px; color: var(--body); line-height: 1.8; }
.gbox p:last-child { margin-bottom: 0; }
.gbox .fine { margin: 6px 0 0; word-break: break-all; }
.gbox .warn { color: var(--rd); }

/* 共有先として貼り付けてもらうアドレス。長いので折り返しつつ、
   ひと目で「これをコピーする」と分かるようにします。 */
.gaddr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 9px 12px;
  margin: 8px 0 10px !important;
  word-break: break-all;
  user-select: all;
}

/* 設定と規約の記載が食い違っているときの注意 */
.fine.warn { color: var(--rd); }

.cals { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 4px; }
#g-write {
  border: 1px solid var(--line2);
  border-radius: var(--r);
  padding: 9px 12px;
  font-family: var(--gt);
  font-size: 13.5px;
  color: var(--ink);
  background: #fff;
  min-width: 240px;
  max-width: 100%;
}

/* いま出ている候補の下見 */
.prev { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.prev-i {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--body);
  white-space: nowrap;
}
.prev .empty { padding: 20px; }

/* ── 折りたたみ（実務の補足） ───────────────── */
/* 決済の直前に読ませる分量を抑えるためのもの。
   条件そのものは畳まず、必ず開いた状態で見せます。 */
.more { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.more > summary {
  cursor: pointer;
  font-size: 12.5px;
  color: var(--nv3);
  letter-spacing: .04em;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  min-height: 32px;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
  content: '＋';
  font-size: 11px;
  color: var(--gd);
  width: 15px;
  text-align: center;
  flex: 0 0 auto;
}
.more[open] > summary::before { content: '−'; }
.more > summary:hover { color: var(--nv); }
.more .consent-l { margin-top: 6px; }

/* 受付ルールの種別切り替え（ワークショップ／無料相談）。
   選んでいないほうを薄くして、いまどちらを編集しているかを分かるようにします。 */
.kindsw{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px;}
.kindsw .btn:not(.on){opacity:.45;}