/* EDITION SEE? 予約UI — スマホファースト
   色・フォントは既存LP(assets/css/style.css)のトークンに合わせている */
:root{
  --black:#0c0c0c; --white:#fff; --cream:#f8f5f0; --lgray:#f2f0ed;
  --border:#e0ddd8; --text:#1a1a1a; --muted:#6b6b6b;   /* 4.5:1 を満たす濃さに調整 */
  --accent:#E07820;          /* 枠線・アイコン等のブランドカラー（LP準拠） */
  --accent-dark:#a85508;     /* 白文字を載せるボタン用。#E07820 は白文字で3.05:1しかない */
  --accent-soft:#fdf2e6;
  --line-green:#047c3f;      /* LINE緑#06c755は白文字2.26:1のため、ボタンは濃い緑にする */
  --ok:#1b7f4c; --ok-soft:#e8f5ee; --warn:#9a6700; --warn-soft:#fff8e1;
  --danger:#b3261e; --danger-soft:#fdecea; --req:#5b4bbd; --req-soft:#eeebfa;
  --radius:10px; --radius-sm:6px;
  --tap:48px;
  --font:'Noto Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif;
  --shadow:0 2px 12px rgba(0,0,0,.06);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--cream);
  font-size:16px;line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--accent-dark)}

/* ---- レイアウト ---- */
.wrap{max-width:560px;margin:0 auto;padding:0 16px;padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
.wrap.no-sticky{padding-bottom:40px}
header.hd{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30}
header.hd .in{max-width:560px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:10px;min-height:52px;flex-wrap:wrap}
.brand{font-weight:700;font-size:15px;letter-spacing:.02em;line-height:1.3}
.brand small{display:block;font-weight:400;font-size:12px;color:var(--muted);letter-spacing:0}
.mockflag{margin-left:auto;font-size:12px;background:var(--warn-soft);color:var(--warn);
  border:1px solid #e8d9a0;border-radius:999px;padding:3px 8px;white-space:nowrap;font-weight:700}

/* ---- ステップ表示 ---- */
.steps{display:flex;gap:4px;margin:14px 0 18px;list-style:none;padding:0}
.steps li{flex:1;font-size:12px;text-align:center;color:var(--muted);padding-top:16px;position:relative;line-height:1.25}
.steps li::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--border);border-radius:2px}
.steps li.done::before{background:var(--accent)}
.steps li.now::before{background:var(--accent)}
.steps li.now{color:var(--accent-dark);font-weight:700}

h1{font-size:20px;margin:0 0 6px;line-height:1.4}
h2.sec{font-size:17px;margin:0 0 4px;line-height:1.45}
.lead{font-size:13px;color:var(--muted);margin:0 0 16px}

/* ---- カード ---- */
.card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin-bottom:14px;box-shadow:var(--shadow)}
.card.flat{box-shadow:none}
.card.calcard{padding:14px 2px}
.card h3{font-size:14px;margin:0 0 10px}

/* ---- 5名以上の相談入口 ---- */
/* 5名以上の案内。カレンダーの下に控えめに置く（日付選択を主役にするため） */
.groupnote{margin:14px 2px 0;padding:12px 0 0;border-top:1px solid var(--border)}
.groupnote .gn-lead{margin:0 0 8px;font-size:13px;color:var(--text);line-height:1.6}
.groupnote .gn-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  padding:10px 18px;border:1px solid var(--line-green);border-radius:var(--radius-sm);
  background:var(--white);color:var(--line-green);font-size:13.5px;font-weight:700;text-decoration:none}
.groupnote .gn-more{margin-top:10px}
.groupnote .gn-more summary{cursor:pointer;font-size:12.5px;color:var(--accent-dark);
  min-height:32px;display:flex;align-items:center;font-weight:700}
.groupnote .gn-more ul{margin:4px 0 2px;padding-left:1.1em;font-size:12.5px;line-height:1.85;color:var(--text)}

/* ---- カレンダー ---- */
.calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 8px 8px}
.calhead .ym{font-weight:700;font-size:16px}
.navbtn{min-width:var(--tap);min-height:var(--tap);border:1px solid var(--border);background:var(--white);
  border-radius:var(--radius-sm);font-size:16px;cursor:pointer}
.navbtn:disabled{opacity:.35;cursor:default}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.dow span{text-align:center;font-size:12px;color:var(--muted);padding:1px 0;line-height:1.3}
.dow span.s0{color:#c0392b}.dow span.s6{color:#2766b8}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
/* 縦幅はタップ領域の下限(44px)を確保したうえで詰める。
   ラベルが長い日（受付停止・リクエストのみ）は折り返して自然に高くなる */
.cal .cell{border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0;font-size:13px;cursor:pointer;padding:3px 1px;min-height:46px}
.cal .cell .d{font-weight:700;line-height:1.2;font-size:14px}
/* 既定は折り返さない。「リクエストのみ」のような長いラベルだけ2行を許す */
.cal .cell .t{font-size:12px;line-height:1.25;letter-spacing:-.06em;text-align:center;white-space:nowrap}
.cal .cell .t.long{white-space:normal;font-size:11.5px;line-height:1.2;letter-spacing:-.08em}
.cal .cell.empty{border:0;background:transparent;cursor:default}
.cal .cell.open{border-color:#bfe0cd;background:var(--ok-soft);color:#14583a}
.cal .cell.few{border-color:#edd49c;background:var(--warn-soft);color:#7a5200}
.cal .cell.full,.cal .cell.closed{background:var(--lgray);color:#686868;cursor:default}
.cal .cell.holiday{background:var(--lgray);color:#686868;cursor:default}
.cal .cell.request_only{border-color:#cdc6ef;background:var(--req-soft);color:#3f3380}
.cal .cell.past,.cal .cell.before_release{background:#f6f5f3;color:#8e8e8e;cursor:default}
.cal .cell.sel{outline:3px solid var(--accent);outline-offset:-1px;background:var(--accent-soft);color:var(--accent-dark)}
.legend{display:flex;flex-wrap:wrap;gap:4px 12px;margin:10px 8px 0;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px;border:1px solid var(--border)}
.legend .l-open i{background:var(--ok-soft);border-color:#bfe0cd}
.legend .l-few i{background:var(--warn-soft);border-color:#edd49c}
.legend .l-req i{background:var(--req-soft);border-color:#cdc6ef}
.legend .l-x i{background:var(--lgray)}

/* ---- 時間枠（縦に並べる。横スクロールなし） ---- */
.slots{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.slot{display:flex;align-items:center;flex-wrap:wrap;gap:4px 12px;width:100%;text-align:left;
  min-height:var(--tap);padding:12px 14px;border:1px solid var(--border);background:var(--white);
  border-radius:var(--radius-sm);cursor:pointer}
.slot .tm{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;min-width:96px}
.slot .st{margin-left:auto;font-size:12.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.slot .sub{flex:1 0 100%;font-size:12px;font-weight:400;color:var(--muted);line-height:1.5;margin:0}
.slot.s-open{border-color:#bfe0cd}
.slot.s-open .st{background:var(--ok-soft);color:#14583a}
.slot.s-few{border-color:#edd49c}
.slot.s-few .st{background:var(--warn-soft);color:#7a5200}
.slot.s-req{border-color:#cdc6ef;background:#fbfaff}
.slot.s-req .st{background:var(--req-soft);color:#3f3380}
.slot.s-x{background:var(--lgray);color:#5f5f5f;cursor:default}
.slot.s-x .st{background:#dcd9d4;color:#4a4a4a}
.slot.sel{outline:3px solid var(--accent);outline-offset:-1px;background:var(--accent-soft)}
.reqnote{background:var(--req-soft);border:1px solid #cdc6ef;border-radius:var(--radius-sm);
  padding:11px 13px;font-size:12.5px;color:#3f3380;margin-top:10px;line-height:1.75}
.reqnote b{display:block;font-size:13px;margin-bottom:3px}
.reqnote ul{margin:0;padding-left:1.1em}

/* ---- 人数 ---- */
.counter{display:flex;align-items:center;gap:14px;justify-content:center;margin:6px 0 2px}
.counter button{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);
  background:var(--white);font-size:24px;line-height:1;cursor:pointer}
.counter button:disabled{opacity:.3;cursor:default}
.counter .v{font-size:30px;font-weight:700;min-width:76px;text-align:center;font-variant-numeric:tabular-nums}
.counter .v small{font-size:14px;font-weight:400;margin-left:2px}
.pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px}
.pick button{min-height:var(--tap);border:1px solid var(--border);background:var(--white);
  border-radius:var(--radius-sm);font-size:15px;font-weight:700;cursor:pointer}
.pick button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.pick button.more{font-size:12.5px;font-weight:700;background:var(--req-soft);border-color:#cdc6ef;color:#3f3380}

/* ---- フォーム ---- */
.f{margin-bottom:16px}
.f > label{display:block;font-size:13px;font-weight:700;margin-bottom:5px}
.f .req{color:var(--danger);font-size:12px;margin-left:4px;font-weight:700}
.f .opt{color:var(--muted);font-size:12px;margin-left:4px;font-weight:400}
.f .hint{font-size:12px;color:var(--muted);margin:4px 0 0;line-height:1.5}
.f input[type=text],.f input[type=tel],.f input[type=email],.f input[type=password],
.f input[type=date],.f input[type=datetime-local],.f textarea,.f select,.f input[type=number]{
  width:100%;min-height:var(--tap);padding:11px 12px;border:1px solid #c9c5bf;border-radius:var(--radius-sm);
  background:var(--white);font-size:16px}
.f textarea{min-height:92px;resize:vertical;line-height:1.6}
.f input:focus,.f textarea:focus,.f select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)}
.f.err input,.f.err textarea,.f.err select{border-color:var(--danger);background:#fffbfa}
.emsg{display:none;font-size:12.5px;color:var(--danger);margin-top:5px;font-weight:700;line-height:1.5}
.f.err .emsg{display:block}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.7;
  padding:14px 12px;min-height:var(--tap);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--white)}
.chk input{width:24px;height:24px;margin:1px 0 0;flex:0 0 auto}
.f.err .chk{border-color:var(--danger);background:#fffbfa}

/* ---- 確認表示 ---- */
.dl{margin:0;font-size:14px}
.dl div{display:flex;gap:10px;padding:9px 0;border-bottom:1px dashed var(--border)}
.dl div:last-child{border-bottom:0}
.dl dt{flex:0 0 96px;color:var(--muted);font-size:12.5px;margin:0;line-height:1.5}
.dl dd{margin:0;flex:1;word-break:break-word;font-weight:500}
.notice{background:var(--accent-soft);border:1px solid #f0d2ad;border-radius:var(--radius-sm);
  padding:12px 14px;font-size:12.5px;line-height:1.75}
.notice ul{margin:6px 0 0;padding-left:1.1em}
.notice.req{background:var(--req-soft);border-color:#cdc6ef;color:#3f3380}
.prov{font-size:12px;color:var(--warn);background:var(--warn-soft);border:1px solid #e8d9a0;
  border-radius:4px;padding:2px 7px;display:inline-block;margin-left:4px;font-weight:700}

/* 試作であることの注意書き（確認者向け。本番では表示しない） */
.devnote{border:1px dashed #c9a227;background:#fffdf5;border-radius:var(--radius-sm);
  padding:8px 11px;margin:0 0 10px;font-size:12px;line-height:1.65;color:#6b5200}
.devnote b{display:block;font-size:12.5px;margin-bottom:1px;color:#7a5200}
.devnote p{margin:0}
.devnote code{background:#fff6da;border-radius:3px;padding:0 4px;font-size:12px}

/* ---- ボタン ---- */
.btn{display:block;width:100%;min-height:52px;border:0;border-radius:var(--radius-sm);
  font-size:16px;font-weight:700;cursor:pointer;background:var(--accent-dark);color:#fff;
  padding:13px 16px;text-align:center;text-decoration:none;line-height:1.4}
.btn:disabled{background:#cdc8c1;cursor:default}
.btn.sub{background:var(--white);color:var(--text);border:1px solid #c9c5bf}
.btn.req{background:var(--req)}
.btn.line{background:var(--line-green)}
.btn.danger{background:var(--white);color:var(--danger);border:1px solid var(--danger)}
.btn.sm{min-height:44px;font-size:13.5px;padding:10px 14px;width:auto;display:inline-block}
.btnrow{display:flex;gap:8px;margin-top:10px}
.btnrow .btn{width:auto;flex:1}

/* ---- 下部固定バー（入力欄・キーボードを妨げない） ---- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.98);
  border-top:1px solid var(--border);padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sticky .in{max-width:560px;margin:0 auto;display:flex;gap:10px;align-items:center}
.sticky .sum{font-size:12px;color:var(--muted);line-height:1.35;flex:1 1 auto;min-width:0}
.sticky .sum b{display:block;color:var(--text);font-size:13.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sticky .btn{flex:0 0 auto;width:auto;min-width:132px}
body.kb .sticky{position:static;border-radius:0;margin-top:16px;backdrop-filter:none}
body.kb .wrap{padding-bottom:24px}

/* ---- 状態表示（送信中・失敗・完了） ---- */
.ov{position:fixed;inset:0;background:rgba(26,26,26,.5);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:24px}
.ov .box{background:#fff;border-radius:var(--radius);padding:22px 20px;max-width:360px;width:100%;text-align:center}
.spin{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;margin:0 auto 12px;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.banner{border-radius:var(--radius-sm);padding:12px 14px;font-size:13px;margin-bottom:14px;line-height:1.6}
.banner.e{background:var(--danger-soft);border:1px solid #f1b9b4;color:#8c1d16;font-weight:700}
.banner.w{background:var(--warn-soft);border:1px solid #e8d9a0;color:#7a5200}
.banner.i{background:#eef4fb;border:1px solid #c4d8ef;color:#1b4f84}
.done{text-align:center;padding:10px 0 4px}
.done .ic{width:62px;height:62px;border-radius:50%;background:var(--ok-soft);color:var(--ok);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 12px;font-weight:700}
/* リクエストは確定と見分けがつくよう色を変える */
.done .ic.req{background:var(--req-soft);color:var(--req);font-size:26px;letter-spacing:.08em}
.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:19px;font-weight:700;
  letter-spacing:.06em;background:var(--lgray);border-radius:var(--radius-sm);padding:9px 14px;display:inline-block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- 表（管理画面）---- */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.tb{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
table.tb th,table.tb td{border-bottom:1px solid var(--border);padding:8px 7px;text-align:left;vertical-align:top}
table.tb th{background:var(--lgray);font-size:12px;color:#4a4a4a;white-space:nowrap;position:sticky;top:0}
.pill{display:inline-block;font-size:12px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap}
.pill.confirmed{background:var(--ok-soft);color:#14583a}
.pill.requested{background:var(--req-soft);color:#3f3380}
.pill.cancelled,.pill.rejected,.pill.expired{background:var(--lgray);color:#6f6f6f}
.pill.visited{background:#e7f0fb;color:#1b4f84}
.pill.no_show{background:var(--danger-soft);color:#8c1d16}
@media (min-width:600px){
  .wrap,header.hd .in,.sticky .in{max-width:680px}
  h1{font-size:23px}
}

/* ---- 受付の開閉（管理画面）。スマホで押しやすい大きさにする ---- */
.wdrow { display: flex; gap: 6px; flex-wrap: wrap; }
.wd { position: relative; flex: 1 1 44px; min-width: 44px; min-height: 48px; display: flex;
      align-items: center; justify-content: center; gap: 4px;
      border: 1px solid var(--line, #d7dbe0); border-radius: 10px;
      background: #fff; cursor: pointer; font-size: 15px; font-weight: 700;
      -webkit-tap-highlight-color: transparent; }
/* ★チェック自体は隠し、枠全体を押せる大きさにする（スマホで7曜日が1行に収まる） */
.wd input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wd::before { content: ''; width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid #b9c0c8; background: #fff; flex: 0 0 auto; }
.wd.on::before { background: #e45b5b; border-color: #e45b5b;
  box-shadow: inset 0 0 0 2px #fff; }
.wd.on { background: #fdecec; border-color: #e45b5b; color: #c0392b; }
.susform { display: flex; flex-direction: column; gap: 10px; }
.susform .f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.susform .f > span { color: var(--muted, #667); font-weight: 500; }
.susform input, .susform select { min-height: 44px; font-size: 16px; padding: 8px 10px;
  border: 1px solid var(--line, #d7dbe0); border-radius: 8px; background: #fff;
  width: 100%; box-sizing: border-box; }
.susList { display: flex; flex-direction: column; gap: 8px; }
.susItem { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  padding: 10px; border: 1px solid var(--line, #d7dbe0); border-radius: 10px;
  font-size: 13px; flex-wrap: wrap; }
.susItem > div { flex: 1 1 200px; min-width: 0; }
.susItem button { min-height: 40px; }
@media (max-width: 480px) {
  .wd { flex: 1 1 36px; min-width: 36px; font-size: 14px; gap: 3px; }
  .wdrow { gap: 4px; }
  .susItem { flex-direction: column; }
  .susItem button { width: 100%; }
}

/* ---- カレンダー（週／日）。Airリザーブと同じ「横=日付・縦=時間」 ---- */
.calbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 10px; }
.calrange { font-weight: 700; font-size: 14px; margin-left: auto; }
.calwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calgrid { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 0; }
.calgrid th.ct, .calgrid td { padding: 0; }
.calgrid th.ct { width: 46px; font-size: 11px; color: var(--muted, #667); font-weight: 500;
  text-align: right; padding-right: 4px; white-space: nowrap; }
.calgrid thead th { vertical-align: bottom; }
.calgrid thead th.tdy .dayhd { outline: 2px solid #3b7ddd; }
.dayhd { width: 100%; min-height: 56px; display: flex; flex-direction: column; gap: 1px;
  align-items: center; justify-content: center; border: 1px solid var(--line, #d7dbe0);
  border-radius: 8px; background: #fff; cursor: pointer; padding: 6px 2px; }
.dayhd .dh-d { font-size: 15px; font-weight: 700; }
.dayhd .dh-w { font-size: 11px; }
.dayhd .dh-w.s0 { color: #d33; } .dayhd .dh-w.s6 { color: #37c; }
.dayhd .dh-n, .dayhd .dh-s { font-size: 10px; color: var(--muted, #667); }
.calgrid thead th.cl .dayhd { background: #f1f2f4; color: #8b9199; }
.cs { width: 100%; min-height: 54px; display: flex; flex-direction: column; gap: 0;
  align-items: center; justify-content: center; border: 1px solid var(--line, #d7dbe0);
  border-radius: 8px; background: #fff; cursor: pointer; padding: 4px 2px; line-height: 1.25;
  -webkit-tap-highlight-color: transparent; }
.cs:active { transform: scale(.97); }
.cs .cs-t { font-size: 10px; color: var(--muted, #667); }
.cs .cs-u { font-size: 15px; font-weight: 700; }
.cs .cs-u small { font-size: 10px; font-weight: 500; margin-left: 1px; }
.cs .cs-g { font-size: 11px; }
.cs .cs-g.sub { color: var(--muted, #667); }
.cs .cs-b { font-size: 9px; background: #ede3ff; color: #5b3fa8; border-radius: 4px; padding: 0 4px; }
.cs.has { background: #eef5ff; border-color: #9cc0f0; }
.cs.full { background: #fdecec; border-color: #e9a7a7; }
.cs.susp, .cs.muted { background: #f1f2f4; color: #8b9199; }
.cs.over { background: #ffe3e3; border-color: #e45b5b; box-shadow: inset 0 0 0 2px #e45b5b; }
.cs.req { border-style: dashed; }
.cs.none { background: repeating-linear-gradient(45deg,#fafbfc,#fafbfc 5px,#f1f2f4 5px,#f1f2f4 10px);
  color: #98a0a8; }
.callegend .lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  border: 1px solid var(--line, #d7dbe0); vertical-align: -2px; margin-right: 3px; }
.callegend .lg.has { background: #eef5ff; border-color: #9cc0f0; }
.callegend .lg.susp { background: #f1f2f4; }
.callegend .lg.over { background: #ffe3e3; border-color: #e45b5b; }
.callegend .lg.req { border-style: dashed; }
.slotcard { margin-top: 14px; border: 2px solid #3b7ddd; }
.slotstat { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0 2px; }
.slotstat span { display: flex; flex-direction: column; }
.slotstat b { font-size: 20px; } .slotstat small { font-size: 11px; color: var(--muted, #667); }
.bklist { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.bkitem { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%;
  text-align: left; padding: 8px 10px; min-height: 44px;
  border: 1px solid var(--line, #d7dbe0); border-radius: 8px; background: #fff; font-size: 13px; }
.bkitem.ext { background: #fbfbfc; }
.src { font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.src.s-web, .src.s-admin { background: #e3efff; color: #1f5fab; }
.src.s-migrated, .src.s-air { background: #e6f7ef; color: #1c7a53; }
.src.s-jalan { background: #fff0e0; color: #a85c12; }
.src.s-asoview { background: #f0e8ff; color: #5b3fa8; }

/* ---- 予約と勤務の時間軸 ---- */
.tl { border: 1px solid var(--line, #d7dbe0); border-radius: 10px; padding: 10px; background: #fff; }
.tlhead { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.tlaxis { position: relative; height: 14px; margin-left: 76px; }
.tltick { position: absolute; font-size: 9px; color: var(--muted, #667); transform: translateX(-50%); }
.tlsec { font-size: 11px; font-weight: 700; color: var(--muted, #667); margin: 8px 0 3px; }
.tlrow { display: flex; align-items: stretch; gap: 6px; margin-bottom: 4px; }
.tllab { width: 70px; flex: 0 0 70px; font-size: 11px; display: flex; align-items: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tltrack { position: relative; flex: 1 1 auto; height: 30px; background: #f6f7f9;
  border-radius: 6px; overflow: hidden; }
.tlbar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; border: none;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 5px; font-size: 10px; line-height: 1.15; overflow: hidden; cursor: pointer;
  background: #cfe2ff; color: #123; }
.tlbar b { font-size: 11px; }
.tlbar.s-migrated, .tlbar.s-air { background: #c7efdc; }
.tlbar.s-jalan { background: #ffdfb8; }
.tlbar.s-asoview { background: #e0d0ff; }
.tlbar.ext { cursor: default; }
.tlbar.focus { outline: 2px solid #3b7ddd; }
.tlwork { position: absolute; top: 4px; bottom: 4px; border-radius: 5px; background: #dfe6ee;
  font-size: 10px; display: flex; align-items: center; padding: 0 5px; color: #35414d; }
.tlwork.absent { background: #f1dede; text-decoration: line-through; }
.tlbrk { position: absolute; top: 4px; bottom: 4px;
  background: repeating-linear-gradient(45deg,#b9c0c8,#b9c0c8 3px,transparent 3px,transparent 6px); }
.tlwarn { position: absolute; top: 0; bottom: 0; background: rgba(228,91,91,.14);
  border-left: 1px solid rgba(228,91,91,.5); border-right: 1px solid rgba(228,91,91,.5); }
.tlnone { position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: #8b9199; }

@media (max-width: 760px) {
  .calgrid th.ct { width: 38px; font-size: 10px; }
  .cs { min-height: 60px; }
  .cs .cs-u { font-size: 17px; }
  .calrange { width: 100%; margin-left: 0; order: -1; }
  .tllab { width: 56px; flex: 0 0 56px; }
  .tlaxis { margin-left: 62px; }
}

/* ---- 自動メール設定 ---- */
.mtlist { display: flex; flex-direction: column; gap: 8px; }
.mtitem { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between;
  padding: 10px; border: 1px solid var(--line, #d7dbe0); border-radius: 10px;
  font-size: 13px; flex-wrap: wrap; background: #fff; }
.mtitem.on { border-color: #3b7ddd; background: #f3f8ff; }
.mtitem > div:first-child { flex: 1 1 200px; min-width: 0; }
.inuse { font-size: 11px; font-weight: 700; background: #3b7ddd; color: #fff;
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.noen { font-size: 11px; font-weight: 700; background: #fff0e0; color: #a85c12;
  border-radius: 4px; padding: 1px 6px; margin-left: 6px; }
.susform textarea { min-height: 150px; font-size: 15px; padding: 8px 10px; line-height: 1.6;
  border: 1px solid var(--line, #d7dbe0); border-radius: 8px; width: 100%;
  box-sizing: border-box; font-family: inherit; }
.mailprev { border: 1px solid var(--line, #d7dbe0); border-radius: 8px; overflow: hidden; margin: 8px 0; }
.mpsub { background: #f6f7f9; padding: 8px 10px; font-weight: 700; font-size: 13px;
  border-bottom: 1px solid var(--line, #d7dbe0); word-break: break-all; }
.mpbody { margin: 0; padding: 10px; font-size: 13px; line-height: 1.7; white-space: pre-wrap;
  word-break: break-word; font-family: inherit; background: #fff; }
@media (max-width: 480px) { .mtitem { flex-direction: column; } .mtitem .btnrow { width: 100%; } }
.mpframe { width: 100%; height: 520px; border: 0; display: block; background: #f6f5f2; }
.mpframe.narrow { width: 375px; max-width: 100%; margin: 0 auto; border-left: 1px solid #e3e6ea;
  border-right: 1px solid #e3e6ea; }

/* ---- 言語の切り替え（お客様向け画面） ---- */
.langsw { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.langsw a { font-size: 12px; font-weight: 700; text-decoration: none; color: var(--muted, #667);
  padding: 7px 10px; min-height: 36px; display: flex; align-items: center;
  border: 1px solid var(--line, #d7dbe0); background: #fff;
  /* ★狭い画面で「日/本/語」と縦に割れないようにする */
  white-space: nowrap; flex: 0 0 auto; }
.langsw a:first-child { border-radius: 8px 0 0 8px; }
.langsw a:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.langsw a.on { background: #2b2b2b; color: #fff; border-color: #2b2b2b; }
@media (max-width: 480px) {
  .langsw { margin-left: 0; width: 100%; justify-content: flex-end; margin-top: 6px; }
  .langsw a { padding: 6px 10px; font-size: 11px; min-height: 34px; }
}