/* ============================================================
   Style by Saori — 予約システム 共通スタイル
   ============================================================ */

:root {
  /* ---- 白・ベージュ・くすんだピンク・グレー・水色すこし ---- */
  --paper:#faf7f5;      /* いちばん外側。白に少しベージュ */
  --surface:#ffffff;    /* カードの白 */
  --surface-2:#f4ede8;  /* ベージュ */
  --surface-3:#eae0d9;
  --ink:#332e2c;        /* 本文。黒すぎない、温かみのある濃茶 */
  --ink-2:#5c5350;
  --muted:#746962;      /* 補足。温かみのあるグレー */
  --line:#eae1db; --line-2:#d9cdc5;
  --accent:#96585a;     /* くすんだピンク。ボタン・選択中 */
  --accent-2:#f6e7e6;   /* その淡い版 */
  --accent-ink:#77413f;
  --on-accent:#ffffff;  /* ピンクの上に載る文字 */
  --sky:#42707f;        /* 水色。リンクや土曜に少しだけ */
  --sky-2:#e6f0f4;
  --rose:#9a5f66;       /* 日曜 */
  --flag:#8a5333; --flag-bg:#f6ebe3;
  --ok:#456049; --ok-bg:#e7efe8;
  --shadow:0 1px 1px rgba(51,46,44,.03), 0 14px 40px -28px rgba(51,46,44,.28);
  --display:"Zen Old Mincho","Yu Mincho","Hiragino Mincho ProN",serif;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --mono:"SFMono-Regular",Consolas,"Courier New",monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#191614; --surface:#211d1b; --surface-2:#2b2522; --surface-3:#3a322e;
    --ink:#f0e9e5; --ink-2:#cbbfb8; --muted:#9b8f88;
    --line:#39312d; --line-2:#4c423d;
    --accent:#d99a9a; --accent-2:#3a2a2a; --accent-ink:#eab9b8; --on-accent:#221d1b;
    --sky:#8dbccd; --sky-2:#22313a; --rose:#d59aa2;
    --flag:#d69a70; --flag-bg:#332419;
    --ok:#8fc39c; --ok-bg:#1e2c22;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --paper:#191614; --surface:#211d1b; --surface-2:#2b2522; --surface-3:#3a322e;
  --ink:#f0e9e5; --ink-2:#cbbfb8; --muted:#9b8f88;
  --line:#39312d; --line-2:#4c423d;
  --accent:#d99a9a; --accent-2:#3a2a2a; --accent-ink:#eab9b8; --on-accent:#221d1b;
  --sky:#8dbccd; --sky-2:#22313a; --rose:#d59aa2;
  --flag:#d69a70; --flag-bg:#332419;
  --ok:#8fc39c; --ok-bg:#1e2c22;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 30px -20px rgba(0,0,0,.7);
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:15.5px; line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
button, input, textarea, select { font-family:inherit; font-size:inherit; color:inherit; }
a { color:var(--accent); }

.wrap { max-width:720px; margin:0 auto; padding:0 20px 90px; }
.wrap-wide { max-width:1040px; }

/* ---- ヘッダー ---- */
.site-head { padding:42px 0 30px; }
.site-head .brand {
  font-family:var(--display); font-size:17px; font-weight:700;
  letter-spacing:.03em; text-decoration:none; color:var(--ink);
  display:inline-flex; align-items:center; gap:11px;
}
/* 屋号の左に出る小さい丸アイコン。写真を設定していないときは出ません。 */
.site-head .brandico {
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--line-2);
}
.site-head .brand .bn > span {
  color:var(--muted); font-family:var(--body); font-size:12px; font-weight:400; margin-left:10px;
}

/* ---- ページ下の小さなリンク ---- */
.site-foot {
  margin-top:40px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; gap:20px; flex-wrap:wrap;
  font-size:12px;
}
.site-foot a { color:var(--muted); text-decoration:none; }
.site-foot a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }

/* 予約完了画面のひとこと。写真も名前も左上に出ているので、言葉だけ置きます。 */
.donemsg {
  margin:22px 0 0; padding:15px 18px; background:var(--surface-2); border-radius:10px;
  font-size:13.5px; line-height:1.95; color:var(--ink);
}

/* ---- カード ---- */
.card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); padding:38px 40px 42px;
}
@media (max-width:600px) { .card { padding:26px 20px 30px; border-radius:12px; } }

h1 { font-family:var(--display); font-size:25px; font-weight:700; line-height:1.65;
     letter-spacing:.04em; margin:0 0 10px; text-wrap:balance; }
h2 { font-family:var(--display); font-size:19px; font-weight:700; letter-spacing:.03em; margin:0 0 6px; }
h3 { font-size:14px; font-weight:700; letter-spacing:.03em; margin:30px 0 11px; }
p  { margin:0 0 16px; }
.lead { color:var(--muted); font-size:13.5px; line-height:1.95; margin:0 0 26px; }
.muted { color:var(--muted); }
.small { font-size:12.5px; }

/* ---- ステップ表示 ---- */
.steps { display:flex; flex-wrap:wrap; gap:0; margin-bottom:24px; }
.steps .st { display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--muted); padding-right:14px; }
.steps .st i {
  font-style:normal; font-size:10px; width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center; background:var(--surface-2); color:var(--muted); flex:none;
}
/* 終わったステップは押して戻れます。押せることが伝わるように、
   下線と、指の形のカーソルを出します。 */
a.st { text-decoration:none; cursor:pointer; }
a.st:hover { color:var(--accent); }
a.st:hover i { background:var(--accent); color:var(--on-accent); }
a.st.done { text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-2); }
.steps .st.on { color:var(--accent); font-weight:700; }
.steps .st.on i { background:var(--accent); color:var(--on-accent); }
.steps .st.done i { background:var(--accent-2); color:var(--accent-ink); }

/* ---- カレンダー ---- */
.calhead { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:12px; }
.calhead .mo { font-family:var(--display); font-size:17px; font-weight:700; }
.navbtn {
  border:1px solid var(--line); background:var(--surface); width:34px; height:34px;
  border-radius:8px; cursor:pointer; color:var(--ink-2); text-decoration:none;
  display:grid; place-items:center; font-size:16px;
}
.navbtn:hover { border-color:var(--accent); color:var(--accent); }
.navbtn.off { opacity:.3; pointer-events:none; }

.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.cal .dow { text-align:center; font-size:10.5px; color:var(--muted); padding-bottom:4px; }
.cal .dow.sat { color:var(--sky); } .cal .dow.sun { color:var(--rose); }
.cal .cell { height:52px; }
.cal .day {
  width:100%; height:100%; border:1px solid var(--line); background:var(--surface);
  border-radius:8px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; font-size:13.5px; color:var(--ink);
  text-decoration:none; font-variant-numeric:tabular-nums;
}
.cal a.day { box-shadow:0 1px 2px rgba(51,46,44,.04); }
.cal a.day:hover { border-color:var(--accent); background:var(--accent-2); }
.cal .day .mk { width:5px; height:5px; border-radius:50%; background:var(--accent); }
.cal .day.none { color:var(--line-2); background:transparent; border-color:transparent; }
.cal .day.none .mk { background:transparent; }
.cal .day.sel { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
@media (max-width:520px) { .cal .cell { height:44px; } .cal .day { font-size:12.5px; } }

.callegend { display:flex; gap:16px; margin-top:12px; font-size:11.5px; color:var(--muted); flex-wrap:wrap; }
.callegend span { display:flex; align-items:center; gap:6px; }
.callegend i { width:6px; height:6px; border-radius:50%; background:var(--accent); display:block; }
.callegend i.grey { background:var(--line-2); }

/* ---- 時間の候補 ---- */
.slotgroup { margin-top:20px; }
.slotgroup > .t { font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:10px; }
.slotgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:10px; }
.slotgrid a {
  border:1px solid var(--line); background:var(--surface); border-radius:8px;
  padding:11px 12px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; gap:2px;
}
.slotgrid a:hover { border-color:var(--accent); background:var(--accent-2); }
.slotgrid a b { font-size:15px; font-weight:500; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
.slotgrid a span { font-size:11px; color:var(--muted); }

/* ---- フォーム ---- */
.field { margin-bottom:18px; }
.field label { display:block; font-size:12.5px; font-weight:700; margin-bottom:6px; }
.field label em { font-style:normal; font-size:10px; color:var(--flag); margin-left:6px; letter-spacing:.06em; }
.field input[type=text], .field input[type=email], .field input[type=password], .field textarea, .field select {
  width:100%; border:1px solid var(--line-2); background:var(--surface);
  border-radius:8px; padding:10px 12px; line-height:1.6;
}
.field textarea { min-height:96px; resize:vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.field .hint { font-size:11.5px; color:var(--muted); margin-top:5px; }

.checkline { display:flex; gap:9px; align-items:flex-start; font-size:13px; margin-bottom:20px; }
.checkline input { margin-top:6px; width:16px; height:16px; accent-color:var(--accent); flex:none; }

.radios { display:flex; flex-direction:column; gap:7px; }
.radios label {
  display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line);
  border-radius:8px; padding:10px 13px; cursor:pointer; font-size:13px; line-height:1.6;
}
.radios label:hover { border-color:var(--accent); }
.radios input { margin-top:5px; width:15px; height:15px; accent-color:var(--accent); flex:none; }
.radios input:checked ~ .rt b { color:var(--accent-ink); }
.radios .rt b { display:block; font-size:13px; }
.radios .rt span { color:var(--muted); font-size:11.5px; }

/* ---- ボタン ---- */
.btnrow { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:8px; }
.btn {
  border:0; border-radius:10px; padding:13px 28px; cursor:pointer; font-weight:700;
  font-size:14px; letter-spacing:.04em; background:var(--accent); color:var(--on-accent);
  text-decoration:none;
  display:inline-block; text-align:center;
}
.btn:hover { opacity:.88; }
.btn.ghost { background:transparent; color:var(--ink-2); border:1px solid var(--line-2); }
.btn.ghost:hover { border-color:var(--accent); color:var(--accent); opacity:1; }
.btn.danger { background:transparent; color:var(--flag); border:1px solid var(--flag); }
.btn.sm { padding:7px 14px; font-size:12.5px; }

/* ---- 通知 ---- */
.err { color:var(--flag); font-size:13px; background:var(--flag-bg); border-radius:8px; padding:11px 14px; margin-bottom:18px; }
.okmsg { color:var(--ok); font-size:13px; background:var(--ok-bg); border-radius:8px; padding:11px 14px; margin-bottom:18px; }
.badge-done {
  display:inline-flex; align-items:center; gap:9px; background:var(--ok-bg); color:var(--ok);
  padding:8px 16px; border-radius:20px; font-size:13px; font-weight:700; margin-bottom:18px;
}

/* ---- 内容の確認 ---- */
.kv { border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:22px; }
.kv .r { display:grid; grid-template-columns:110px 1fr; border-bottom:1px solid var(--line); }
.kv .r:last-child { border-bottom:0; }
.kv .k { background:var(--surface-2); padding:11px 14px; font-size:12px; color:var(--muted); font-weight:700; }
.kv .v { padding:11px 14px; font-size:13.5px; white-space:pre-wrap; word-break:break-word; }
.kv .v.big { font-family:var(--display); font-size:16px; font-weight:700; }

/* ---- お客様の声（公開） ---- */
/* 文章ページの箇条書き（プライバシーポリシーなど） */
.card ul { margin:0 0 16px; padding-left:1.3em; }
.card ul li { margin-bottom:7px; line-height:1.85; }

.pubvoices { margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.pubvoices h3 { font-family:var(--display); font-size:17px; font-weight:700; margin:0 0 4px; }
.pubvoices .pl { color:var(--muted); font-size:12.5px; margin:0 0 18px; }
/* 質問と答えをセットで出す。長さが揃わないほうが本物として読まれるので、
   横並びのカードではなく、縦に積んでいます。 */
.pvlist { display:grid; gap:12px; }
.pv { background:var(--surface-2); border-radius:12px; padding:19px 21px 15px; }
.pv .pvq {
  font-size:11.5px; font-weight:700; line-height:1.6; color:var(--accent-ink);
  border-left:2px solid var(--accent); padding-left:9px; margin:0 0 7px;
}
/* 過去にいただいた声の見出し（「気づきが得られました」など）。
   質問文とは役割が違うので、少し大きく、飾りの罫線はつけません。 */
.pv .pvh {
  font-family:var(--display); font-size:14.5px; font-weight:700;
  line-height:1.6; color:var(--ink); margin:0 0 10px;
}
.pv .pva { font-size:13.5px; line-height:1.95; margin:0 0 17px; }
.pv .pva:last-of-type { margin-bottom:13px; }
.pv .by {
  font-size:11.5px; color:var(--muted); padding-top:11px;
  border-top:1px solid var(--line-2); display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
}
.pv .by span::before { content:"／ "; }

/* ============================================================
   管理画面
   ============================================================ */
.admin-bar {
  background:var(--surface); border-bottom:1px solid var(--line); margin-bottom:28px;
}
.admin-bar .in { max-width:1040px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.admin-bar .brand { font-family:var(--display); font-weight:700; font-size:15px; padding:14px 0; text-decoration:none; color:var(--ink); }
.admin-bar nav { display:flex; gap:2px; flex-wrap:wrap; margin-left:auto; }
.admin-bar nav a {
  padding:14px 13px; font-size:13.5px; color:var(--muted); text-decoration:none;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.admin-bar nav a:hover { color:var(--ink); }
.admin-bar nav a.on { color:var(--accent); border-bottom-color:var(--accent); font-weight:700; }
.admin-bar .out { font-size:12px; color:var(--muted); text-decoration:none; padding:14px 0; }

.split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:30px; }
@media (max-width:860px) { .split { grid-template-columns:1fr; gap:24px; } }

.panel { background:var(--surface-2); border-radius:10px; padding:18px; align-self:start; }
.panel h3 { margin:0 0 3px; font-size:14px; }
.panel .pd { font-size:11.5px; color:var(--muted); margin-bottom:14px; }
.panel .empty { font-size:12.5px; color:var(--muted); }

.toggle { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:9px 12px; margin-bottom:7px; }
.toggle .tt b { display:block; font-size:14px; font-weight:500; font-variant-numeric:tabular-nums; }
.toggle .tt span { font-size:10.5px; color:var(--muted); }
.sw { border:0; background:var(--line-2); width:38px; height:21px; border-radius:20px; position:relative; cursor:pointer; flex:none; padding:0; }
.sw::after { content:""; position:absolute; top:2.5px; left:2.5px; width:16px; height:16px; border-radius:50%; background:var(--surface); transition:transform .15s; }
.sw.on { background:var(--accent); }
.sw.on::after { transform:translateX(17px); }

.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:24px; }
.stat { background:var(--surface-2); border-radius:9px; padding:14px 16px; }
.stat .lab { font-size:11px; color:var(--muted); margin-bottom:2px; }
.stat .val { font-family:var(--display); font-size:24px; font-weight:700; line-height:1.2; font-variant-numeric:tabular-nums; }
.stat .val small { font-size:12px; font-family:var(--body); font-weight:400; color:var(--muted); margin-left:3px; }

.tw { overflow-x:auto; border:1px solid var(--line); border-radius:9px; background:var(--surface); }
table { border-collapse:collapse; width:100%; min-width:560px; font-size:13px; }
th, td { text-align:left; padding:11px 13px; border-bottom:1px solid var(--line); vertical-align:top; line-height:1.7; }
thead th { font-size:10.5px; letter-spacing:.06em; color:var(--muted); font-weight:500; background:var(--surface-2); white-space:nowrap; }
tbody tr:last-child td { border-bottom:0; }
td.mono { font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
/* 1列目（お名前・日時）は折り返しません。
   「どい な／なこ」のように名前の途中で改行されると読みにくいためです。
   そのぶん表が横に長くなったときは、表全体が横にスクロールします。 */
/* 名前が途中で折り返さないように。通し番号を付けた表では2列目が名前になります。 */
tbody td:first-child, td.nm { white-space:nowrap; }

.tag { display:inline-block; font-size:10.5px; padding:2px 8px; border-radius:11px; background:var(--surface-3); color:var(--ink-2); margin:0 4px 3px 0; white-space:nowrap; }
.tag.free { background:var(--accent-2); color:var(--accent-ink); }
.tag.client { background:var(--flag-bg); color:var(--flag); }
.tag.new { background:var(--ok-bg); color:var(--ok); }
.tag.off { background:var(--surface-3); color:var(--muted); }

/* 管理画面のメニューに出す未読の数。数字が0のときは出しません。 */
.badge {
  display:inline-block; min-width:17px; margin-left:6px; padding:1px 5px;
  background:var(--accent); color:#fff; border-radius:9px;
  font-family:var(--mono); font-size:10.5px; font-weight:700; line-height:1.5; text-align:center;
  vertical-align:middle;
}
.voicecard { border:1px solid var(--line); border-radius:9px; padding:15px 17px; margin-bottom:11px; background:var(--surface); }
/* この画面を開いたときに未読だったもの。左に色をつけて、見つけやすくします。 */
.voicecard.fresh { border-left:3px solid var(--accent); background:var(--surface-2); }
.voicecard .vh { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:9px; }
.voicecard .vh .who { font-weight:700; font-size:13.5px; }
.voicecard .vh .dt { font-family:var(--mono); font-size:11px; color:var(--muted); }
.voicecard .qa { font-size:12.5px; line-height:1.85; margin-bottom:8px; }
.voicecard .qa b { display:block; color:var(--muted); font-size:11px; font-weight:500; }
.voicecard .vfoot { display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--line); margin-top:11px; padding-top:11px; }
.voicecard .vfoot .lbl { font-size:11.5px; color:var(--muted); }

.notebox { font-size:12px; color:var(--muted); margin-top:16px; line-height:1.8; }
.rulebox { margin-top:18px; background:var(--accent-2); border-radius:9px; padding:14px 17px; font-size:12.5px; line-height:1.8; color:var(--accent-ink); }
.rulebox b { display:block; font-size:12px; margin-bottom:5px; }
.rulebox ul { margin:0; padding-left:1.15em; }

/* ---- 折りたたみの入力欄 ------------------------------------------
   「新しく追加する」のような欄を画面の上に置きつつ、
   ふだんは畳んでおくためのものです。押したときだけ開きます。 */
.fold { border:1px solid var(--line); border-radius:10px; background:var(--surface);
        margin-bottom:20px; overflow:hidden; }
.fold > summary { cursor:pointer; list-style:none; padding:12px 16px;
        font-size:13.5px; font-weight:600; color:var(--ink-2); user-select:none; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:'＋'; margin-right:8px; color:var(--accent); font-weight:700; }
.fold[open] > summary::before { content:'−'; }
.fold > summary:hover { background:var(--surface-2); }
.fold > summary .sub { font-weight:400; font-size:11.5px; color:var(--muted); margin-left:8px; }
.fold .foldbody { padding:14px 16px 16px; border-top:1px solid var(--line); }
.fold .foldbody > .panel { background:transparent; padding:0; }

/* ---- ワンクリックの絞り込み -------------------------------------- */
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.chips a { display:inline-block; font-size:12.5px; padding:7px 14px; border-radius:20px;
        border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
        text-decoration:none; white-space:nowrap; }
.chips a:hover { background:var(--surface-2); }
.chips a.on { background:var(--accent); border-color:var(--accent);
        color:var(--on-accent); font-weight:600; }
.chips a .n { font-family:var(--mono); font-size:11px; opacity:.75; margin-left:5px; }

/* 一覧の通し番号 */
td.no, th.no { width:42px; text-align:right; font-family:var(--mono); font-size:11px;
        color:var(--muted); white-space:nowrap; }

/* ---- 横に動かさない表 --------------------------------------------
   .tw は幅が足りないと横スクロールしますが、画面の中で表だけが
   左右に動くのは気持ちのいいものではありません。
   こちらは「はみ出さない」ことを優先した入れものです。
   列を減らし、長いものは折り返して、画面の幅に収めます。 */
.fit { border:1px solid var(--line); border-radius:9px; background:var(--surface);
       overflow:hidden; }
.fit table { min-width:0; width:100%; table-layout:auto; }
.fit th, .fit td { padding:10px 11px; }

/* お名前の下に、小さくメールアドレス */
td.who { white-space:normal; min-width:150px; }
td.who > a { font-weight:500; white-space:nowrap; }
.fit .sub { font-size:11px; color:var(--muted); margin-top:2px;
            word-break:break-all; line-height:1.5; }
/* 状態の下の「同意 2026/09/01」は折り返さない */
.fit td .tag + .sub { white-space:nowrap; word-break:normal; }
/* ボタンの文字が「登／録」と割れないように */
.fit .btn, .fit .tag { white-space:nowrap; }
.fit td form { margin:0; }

@media (max-width: 640px) {
  .fit table { font-size:12px; }
  .fit th, .fit td { padding:8px 7px; }
  /* 狭い画面では、登録日と最終開封を隠します。
     どちらも詳細ページで見られるので、ここで無理に見せません。 */
  .fit th:nth-child(3), .fit td:nth-child(3),
  .fit th:nth-child(4), .fit td:nth-child(4) { display:none; }
}

:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { * { transition:none !important; } }