/* 「コーヒーの相談室」— ブースと同じ、コンクリート・木・墨の見た目（1つの見た目に固定） */
:root{
  --concrete:#DCDAD6; --concrete-deep:#CBC8C2; --paper:#F7F6F3; --white:#FFFFFF;
  --ink:#1D1E20; --ink-2:#46484C; --muted:#727478; --line:#BEBBB5; --line-soft:#D8D5D0;
  --wood:#8C6A43; --wood-light:#B8956A; --wood-soft:#EFE6DA;
  --ok:#2F6B4F; --ok-soft:#E1EFE7; --warn:#8A5A12; --warn-soft:#F7ECD8; --err:#A3372B; --err-soft:#F7E3E0;
  --f-display:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --f-body:"Zen Kaku Gothic New","Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --f-latin:"Jost","Futura","Avenir Next","Helvetica Neue",sans-serif;
  --gut:clamp(16px,4vw,48px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--concrete);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.8;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .12 0 0 0 0 .12 0 0 0 0 .12 0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:1.3;margin:0;text-wrap:balance}
p{margin:0}
:focus-visible{outline:2px solid var(--wood);outline-offset:3px}
[id]{scroll-margin-top:76px}
/* 日本語は文節で折り返す（対応していないブラウザではふつうの折り返し） */
.hero .lead,.hero .window,.sec-head h2,.sec-head p,.menu .ask,.menu .desc,.tapes-note,.steps p{word-break:auto-phrase}
[hidden]{display:none !important}
.wrap{max-width:1120px;margin:0 auto;padding-inline:var(--gut)}
.latin{font-family:var(--f-latin);letter-spacing:.14em}
.muted{color:var(--muted)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* ヘッダー */
.gh{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(220,218,214,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.gh .wrap{display:flex;align-items:center;gap:16px;min-height:60px}
.gh .brand{display:flex;align-items:baseline;gap:10px;text-decoration:none}
.gh .brand b{font-family:var(--f-display);font-size:19px;font-weight:800}
.gh .brand small{font-size:11px;color:var(--muted);letter-spacing:.12em}
.gh nav{margin-left:auto;display:flex;align-items:center;gap:clamp(10px,2vw,24px);font-size:14px}
.gh nav a:not(.btn){text-decoration:none;color:var(--ink-2)}
.gh nav a:not(.btn):hover{color:var(--ink)}
@media (max-width:760px){.gh nav a:not(.btn){display:none}.gh .brand small{display:none}}

/* ボタン */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--white);font:inherit;font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;line-height:1.3}
.btn:hover{background:#000}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:rgba(0,0,0,.05)}
.btn.sm{padding:8px 16px;font-size:13.5px}
.btn.wood{background:var(--wood);border-color:var(--wood)}
.btn.wood:hover{background:#735633}
.btn[disabled]{opacity:.45;cursor:default}
.btn .arr{font-family:var(--f-latin)}

/* ヒーロー：去年の映像を、音なしで透かして流す */
.hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;min-height:min(88svh,820px);background:#1A1816;color:#fff}
.hero-in{width:100%;padding-block:clamp(48px,9vw,96px) clamp(40px,7vw,80px)}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;container-type:size;pointer-events:none}
.hero-media .frame{position:absolute;left:50%;top:50%;width:100%;height:100%;width:max(100cqw,calc(100cqh * 16 / 9));height:max(100cqh,calc(100cqw * 9 / 16));transform:translate(-50%,-50%) scale(1.2)}
.hero-media .poster{position:absolute;inset:0;background:#1A1816 url("https://i.ytimg.com/vi/TtbiQZnYHOo/sddefault.jpg") center/100% 133.4% no-repeat}
.hero-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity 1.6s ease}
.hero-media.playing iframe{opacity:1}
.hero-veil{position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(180deg,rgba(26,24,22,.35),rgba(26,24,22,0) 26%,rgba(26,24,22,0) 60%,rgba(26,24,22,.72)),
  linear-gradient(100deg,rgba(26,24,22,.9) 0%,rgba(26,24,22,.7) 42%,rgba(26,24,22,.3) 100%)}
.hero-veil::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.hero :focus-visible{outline-color:#fff}
.hero .presents{display:flex;align-items:flex-end;gap:14px}
.hero .presents img{height:clamp(84px,10vw,124px);width:auto}
.hero .presents span{font-family:var(--f-latin);font-size:12px;font-weight:500;letter-spacing:.34em;color:rgba(255,255,255,.72)}
.hero h1{font-size:clamp(46px,9vw,104px);letter-spacing:.04em;margin-top:clamp(18px,3vw,30px);text-shadow:0 2px 28px rgba(0,0,0,.3)}
.hero .lead{margin-top:18px;font-size:clamp(16px,2vw,19px);color:rgba(255,255,255,.9);max-width:32em}
.hero .meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;font-size:14px;color:rgba(255,255,255,.82)}
.hero .meta b{font-family:var(--f-latin);font-weight:600;letter-spacing:.12em;color:#fff}
.hero .cta{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}
/* 開幕までのカウントダウン（会期中は「開催中」） */
.hero .count{margin-top:26px;display:inline-flex;flex-direction:column;gap:8px;padding:14px 20px 16px;border:1px solid rgba(255,255,255,.3);background:rgba(20,18,16,.34);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero .count[hidden]{display:none}
.hero .count-k{font-size:13px;letter-spacing:.1em;color:rgba(255,255,255,.8)}
.hero .count-n{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline}
.hero .count-n b{font-family:var(--f-latin);font-size:clamp(30px,5vw,50px);font-weight:500;line-height:1;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.hero .count-n small{margin-left:4px;font-size:13px;color:rgba(255,255,255,.75)}
.hero .count-live{display:flex;align-items:center;gap:12px;font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:.14em}
.hero .count-live .dot{width:11px;height:11px;border-radius:50%;background:#E5483B}
@media (prefers-reduced-motion:no-preference){.hero .count-live .dot{animation:live 1.8s ease-out infinite}}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(229,72,59,.7)}70%,100%{box-shadow:0 0 0 12px rgba(229,72,59,0)}}
.hero .window{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.68)}
.hero-cap{position:absolute;right:var(--gut);bottom:12px;margin:0;font-size:11.5px;letter-spacing:.04em;color:rgba(255,255,255,.62)}
@media (max-width:640px){.hero-cap{right:auto;left:var(--gut);bottom:8px}}
.hero-play{display:inline-flex;align-items:center;gap:12px;margin-top:28px;color:#fff;text-decoration:none;font-size:14px;letter-spacing:.04em}
.hero-play .ic{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.72);background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M8 5.5v13l10.5-6.5z'/></svg>") 56% 50%/15px no-repeat;transition:background-color .2s}
.hero-play:hover .ic{background-color:rgba(255,255,255,.16)}
.btn.light{background:#fff;border-color:#fff;color:var(--ink)}
.btn.light:hover{background:var(--wood-soft);border-color:var(--wood-soft)}
.btn.line{background:transparent;border-color:rgba(255,255,255,.72);color:#fff}
.btn.line:hover{background:rgba(255,255,255,.12)}
@media (prefers-reduced-motion:no-preference){
  .hero-in > *{animation:rise 1s cubic-bezier(.2,.8,.2,1) both}
  .hero-in > :nth-child(2){animation-delay:.1s}.hero-in > :nth-child(3){animation-delay:.2s}.hero-in > :nth-child(4){animation-delay:.28s}
  .hero-in > :nth-child(5){animation-delay:.36s}.hero-in > :nth-child(6){animation-delay:.44s}.hero-in > :nth-child(7){animation-delay:.52s}.hero-in > :nth-child(8){animation-delay:.6s}
}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}

/* 格子とタペストリー（ブースの天井から下がる問い） */
.tapes-sec{padding-bottom:clamp(36px,6vw,60px)}
.lattice{position:relative;padding-top:26px}
.lattice::before{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:linear-gradient(var(--wood-light),var(--wood));border-radius:2px;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.tapes{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1.4vw,18px);list-style:none;margin:0;padding:0}
.tape{position:relative}
.tape::before,.tape::after{content:"";position:absolute;top:-26px;width:1px;height:26px;background:var(--ink-2)}
.tape::before{left:22%}.tape::after{right:22%}
.tape a{display:flex;justify-content:center;height:100%;min-height:clamp(210px,24vw,300px);padding:18px 6px 14px;background:var(--white);border-top:6px solid var(--line-soft);text-decoration:none;box-shadow:0 8px 18px rgba(0,0,0,.08);transition:transform .25s ease,box-shadow .25s ease}
.tape a:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(0,0,0,.12)}
.tape .q{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--f-display);font-weight:800;font-size:clamp(14px,1.5vw,18px);letter-spacing:.12em;line-height:1.9}
.tape .to{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:11.5px;color:var(--muted)}
.tapes-note{margin-top:40px;font-size:14px;color:var(--ink-2)}
@media (max-width:900px){
  .tapes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(96px,1fr);overflow-x:auto;padding-block:26px 34px;margin-top:-26px;scroll-snap-type:x mandatory}
  .tape{scroll-snap-align:start}
}
@media (prefers-reduced-motion:reduce){.tape a{transition:none}.tape a:hover{transform:none}}
/* 梁が伸びて、問いが1枚ずつ下りてきて、ゆっくり揺れる */
.tape:nth-child(2){--i:1}.tape:nth-child(3){--i:2}.tape:nth-child(4){--i:3}.tape:nth-child(5){--i:4}.tape:nth-child(6){--i:5}.tape:nth-child(7){--i:6}.tape:nth-child(8){--i:7}
@media (prefers-reduced-motion:no-preference){
  .lattice::before{transform-origin:left center;animation:beam 1.1s cubic-bezier(.2,.8,.2,1) .2s both}
  .tape{transform-origin:50% -26px;animation:drop .9s cubic-bezier(.2,.8,.2,1) both,sway ease-in-out infinite both;
    animation-delay:calc(.5s + var(--i,0) * .08s),calc(1.4s - var(--i,0) * .7s);animation-duration:.9s,calc(5.6s + var(--i,0) * .45s)}
  .lattice.wait::before,.lattice.wait .tape{animation-play-state:paused}
}
@keyframes beam{from{scale:0 1}to{scale:1 1}}
@keyframes drop{from{opacity:0;translate:0 -28px}to{opacity:1;translate:0 0}}
@keyframes sway{0%,100%{rotate:-.7deg}50%{rotate:.7deg}}

/* 流れる帯 */
.ticker{overflow:hidden;border-block:1px solid var(--line);padding-block:14px;background:rgba(247,246,243,.45)}
.ticker .track{display:flex;align-items:center;width:max-content}
.ticker span{font-family:var(--f-latin);font-weight:500;font-size:clamp(14px,1.8vw,20px);letter-spacing:.26em;color:var(--ink-2);white-space:nowrap}
.ticker i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--wood);margin-inline:clamp(18px,3vw,36px)}
@media (prefers-reduced-motion:no-preference){.ticker .track{animation:tick 60s linear infinite}}
@keyframes tick{to{translate:-50% 0}}

/* 下の章：画面に入ったら、ふわっと出す（JS が付けたときだけ） */
.reveal{opacity:0;translate:0 26px;transition:opacity .8s ease,translate .9s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;translate:0 0}

/* 章 */
.sec{padding-block:clamp(56px,9vw,104px)}
.sec + .sec{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:10px;margin-bottom:clamp(24px,4vw,40px);max-width:40em}
.sec-head .en{font-family:var(--f-latin);font-size:12px;letter-spacing:.24em;color:var(--wood);font-weight:600}
.sec-head h2{font-size:clamp(26px,4vw,40px)}
.sec-head p{color:var(--ink-2)}

/* 相談メニュー */
.menus{display:grid;gap:14px}
.menu{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 28px;align-items:end;background:var(--paper);padding:clamp(20px,3vw,32px);border-left:4px solid var(--wood)}
.menu .ask{font-family:var(--f-display);font-weight:800;font-size:clamp(20px,2.6vw,26px);line-height:1.4}
.menu h3{font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--wood);letter-spacing:.06em;margin-bottom:6px}
.menu .desc{margin-top:10px;color:var(--ink-2);font-size:15px;max-width:44em}
.menu .facts{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted)}
.menu .note{margin-top:10px;font-size:13px;color:var(--err)}
.menu .models{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
/* 機種の札（新機種・家庭用・機能説明のみ） */
.mtag{display:inline-block;margin-left:6px;padding:0 6px;border-radius:4px;font-family:var(--f-body);font-size:11px;font-weight:700;line-height:1.7;letter-spacing:0;vertical-align:.12em;background:var(--line-soft);color:var(--ink-2);white-space:nowrap}
.mtag.new{background:var(--wood);color:#fff}
.chip .mtag{margin-left:4px;font-size:10.5px}
.chip{display:inline-block;padding:2px 10px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;background:var(--white);color:var(--ink-2)}
@media (max-width:720px){.menu{grid-template-columns:minmax(0,1fr)}.menu .btn{justify-self:start}}

/* 動画 */
.pv{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,4fr);gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:820px){.pv{grid-template-columns:minmax(0,1fr)}}
.yt{position:relative;aspect-ratio:16/9;max-width:100%;background:#111;overflow:hidden}
.yt button{position:absolute;inset:0;border:0;padding:0;cursor:pointer;background:#111 center/cover no-repeat}
.yt button::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:rgba(0,0,0,.65) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='white' d='M9 7v10l8-5z'/></svg>") center/40px no-repeat;transition:background-color .2s}
.yt button:hover::after{background-color:var(--wood)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 催し */
.events{display:grid;gap:0;border-top:1px solid var(--line)}
.event{display:grid;grid-template-columns:9em 8em minmax(0,1fr);gap:6px 20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.event .d{font-weight:700}
.event .t{font-family:var(--f-latin);letter-spacing:.06em;color:var(--ink-2)}
.event b{font-family:var(--f-display);font-size:19px}
.event small{display:block;color:var(--muted);font-size:13.5px}
.event .ev-link{display:inline-block;margin-top:8px;font-size:14px;font-weight:700;text-underline-offset:3px}
/* 講座（エスプレッソマシン解剖学）の行：表紙の小さな画像を添えて、告知のページへ */
.event .ev-body{display:flow-root}
.event .ev-thumb{float:right;width:clamp(96px,12vw,150px);margin:2px 0 8px 18px;box-shadow:0 10px 26px rgba(0,0,0,.2)}
.event .ev-thumb img{display:block;width:100%;height:auto}
.event b a{text-decoration:none}
.event .nw{white-space:nowrap}
.event b a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
/* 会場：SCAJ 2026 の公式サイトへ（ロゴつき） */
.scaj-link{display:inline-flex;align-items:center;gap:14px;padding:12px 18px;background:#fff;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--ink);font-size:13.5px;font-weight:700}
.scaj-link:hover{border-color:var(--ink)}
.scaj-link img{display:block;height:32px;width:auto}
@media (max-width:640px){.event{grid-template-columns:minmax(0,1fr)}}

/* 流れ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{background:var(--paper);padding:22px;counter-increment:s}
.steps li::before{content:counter(s);display:block;font-family:var(--f-latin);font-size:30px;font-weight:500;color:var(--wood);line-height:1}
.steps b{display:block;margin-top:10px;font-family:var(--f-display);font-size:18px}
.steps p{margin-top:6px;font-size:14.5px;color:var(--ink-2)}
@media (max-width:760px){.steps{grid-template-columns:minmax(0,1fr)}}
.rules{margin-top:22px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 28px;padding:0;list-style:none;font-size:14.5px;color:var(--ink-2)}
.rules li{padding-left:1.2em;position:relative}
.rules li::before{content:"";position:absolute;left:0;top:.8em;width:.55em;height:1px;background:var(--wood)}
@media (max-width:640px){.rules{grid-template-columns:minmax(0,1fr)}}

/* アクセス・よくある質問 */
.access{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:720px){.access{grid-template-columns:minmax(0,1fr)}}
.access dl{margin:0;display:grid;grid-template-columns:7em minmax(0,1fr);gap:8px 16px;font-size:15px}
.access dt{color:var(--muted);font-size:13.5px}
.access dd{margin:0}
.notebox{background:var(--warn-soft);color:var(--warn);padding:16px 18px;font-size:14.5px;font-weight:700}
.faq{display:grid;gap:8px;max-width:48em}
.faq details{background:var(--paper);padding:14px 18px}
.faq summary{cursor:pointer;font-weight:700}
.faq details p{margin-top:8px;color:var(--ink-2);font-size:15px}

/* フッター */
.ft{background:var(--ink);color:#D6D4CF;padding-block:44px 36px;font-size:13.5px}
.ft .wrap{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 32px}
.ft-logo{height:clamp(68px,8vw,88px);width:auto}
/* フッター：大一電化社のロゴ → 公式サイト、SCAJ 2026 のバナー → SCAJ の公式サイト */
.ft-links{display:flex;align-items:flex-end;gap:clamp(18px,3vw,32px)}
.ft-brand,.ft-scaj{display:block;line-height:0;transition:opacity .2s}
.ft-brand:hover,.ft-scaj:hover{opacity:.8}
.ft-scaj{background:#fff;border-radius:6px;padding:6px 8px}
.ft-scaj img{display:block;height:clamp(56px,6.6vw,76px);width:auto}
.ft-meta{display:grid;gap:4px;justify-items:end;text-align:right}
@media (max-width:560px){.ft-meta{justify-items:start;text-align:left}}
.ft a{color:#fff}
/* フッター：大一電化社の Instagram・YouTube（公式サイトのフッターと同じアカウント） */
.ft-sns{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:8px}
.ft-sns a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:700;letter-spacing:.02em;transition:opacity .2s}
.ft-sns a:hover{opacity:.8}
.ft-sns svg{width:20px;height:20px;flex:none}

/* 予約の画面 */
.steps-bar{display:flex;gap:6px;list-style:none;margin:0 0 20px;padding:0;font-size:13px;flex-wrap:wrap}
.steps-bar li{padding:4px 12px;border-radius:999px;background:var(--concrete-deep);color:var(--ink-2)}
.steps-bar li.on{background:var(--ink);color:#fff}
.steps-bar li.done{background:var(--wood-soft);color:var(--wood)}
.panel{background:var(--paper);padding:clamp(18px,3vw,32px);display:grid;gap:18px}
.panel h2{font-size:clamp(22px,3vw,28px)}
.panel .sub{color:var(--ink-2);font-size:14.5px}
.pick{display:grid;gap:10px}
.pick button,.pick a.card{display:grid;gap:2px;text-align:left;padding:14px 16px;background:var(--white);border:1px solid var(--line);font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.pick button:hover{border-color:var(--ink)}
.pick button[aria-pressed="true"]{border-color:var(--wood);box-shadow:inset 0 0 0 1px var(--wood);background:var(--wood-soft)}
.pick button[disabled]{opacity:.45;cursor:default}
.pick .t{font-weight:700}
.pick .s{font-size:13px;color:var(--muted)}
.pick.cols{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
/* 予約満了の相談・機種：全体を薄くせず、札「予約満了」をはっきり見せる（トップページの相談メニューは .btn.full） */
.tag-full{display:inline-block;margin-left:10px;padding:2px 10px;border-radius:999px;background:var(--ink-2);color:var(--white);font-family:var(--f-body);font-weight:700;font-size:12px;line-height:1.5;letter-spacing:.08em;white-space:nowrap;vertical-align:1px}
.tag-full.solo{margin-left:0}
.pick button.full[disabled]{opacity:1;background:transparent;border-color:var(--line-soft)}
.pick button.full[disabled]:hover{border-color:var(--line-soft)}
.pick button.full .t{color:var(--muted)}
.btn.full,.btn.full:hover{background:transparent;border-color:var(--line);color:var(--muted);cursor:default;letter-spacing:.08em}
.daytabs{display:flex;flex-wrap:wrap;gap:6px}
.daytabs button{font:inherit;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--white);cursor:pointer}
.daytabs button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.times{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.times button{display:grid;gap:2px;padding:12px;background:var(--white);border:1px solid var(--line);font:inherit;cursor:pointer;text-align:left}
.times button b{font-family:var(--f-latin);font-size:18px;letter-spacing:.04em}
.times button span{font-size:12.5px;color:var(--muted)}
.times button[aria-pressed="true"]{border-color:var(--wood);background:var(--wood-soft);box-shadow:inset 0 0 0 1px var(--wood)}
.times button[disabled]{opacity:.5;cursor:default;background:transparent}
.form{display:grid;gap:16px}
.field{display:grid;gap:6px;align-content:start} /* 隣の欄に説明があっても、入力欄を縦に伸ばさない */
.field > label,.field > .lab{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;min-height:24px;font-weight:700;font-size:14.5px} /* 「必須」の有無で高さを変えない */
.req{display:inline-block;margin-left:0;font-size:11px;font-weight:700;color:var(--err);border:1px solid var(--err);border-radius:4px;padding:0 5px;line-height:1.6;vertical-align:.1em}
.field .hint{font-size:12.5px;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=password],select,textarea{width:100%;min-width:0;font:inherit;font-size:16px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=password],select{height:3.2em} /* 入力欄と選ぶ欄の高さをそろえる（選ぶ欄だけ低くならないように） */
textarea{min-height:96px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;cursor:pointer}
.check input{width:18px;height:18px;margin-top:.3em;accent-color:var(--wood);flex:none}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){.row2{grid-template-columns:minmax(0,1fr)}}
.err-box{background:var(--err-soft);color:var(--err);padding:12px 16px;font-weight:700;font-size:14.5px}
.err-box .err-sub{margin-top:6px;font-weight:500;font-size:14px;line-height:1.75}
/* 予約完了：確認メールが届いたかを確かめてから閉じてもらう（赤で目立たせる） */
.mailcheck{margin-top:18px;padding:16px 18px;background:var(--err-soft);border:2px solid var(--err);border-radius:8px;display:grid;gap:6px}
.mailcheck .mc-h{color:var(--err);font-weight:800;font-size:16px;line-height:1.6}
.mailcheck p{font-size:14.5px;line-height:1.8}
.nav-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.summary{display:grid;grid-template-columns:8em minmax(0,1fr);gap:8px 16px;margin:0;font-size:15px}
.summary dt{color:var(--muted);font-size:13.5px}
.summary dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}

/* 相談票（完了・確認の画面） */
.ticket{position:relative;background:var(--white);border:1px solid var(--line);padding:clamp(20px,3vw,32px);display:grid;gap:14px;max-width:560px}
.ticket::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--wood)}
.ticket .k{font-family:var(--f-latin);font-size:12px;letter-spacing:.24em;color:var(--wood);font-weight:600}
.ticket h2{font-size:clamp(22px,3vw,30px)}
.ticket .when{font-family:var(--f-display);font-size:clamp(20px,2.6vw,26px);font-weight:800}
.ticket .no{font-family:var(--f-latin);letter-spacing:.12em;font-size:15px}
.ticket.cancelled{opacity:.6}

/* 社内の画面 */
.admin body,body.admin{background-image:none;background:#E9E8E5}
.admin-top{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-block:18px}
.admin-top h1{font-size:24px}
.admin-top .me{margin-left:auto;font-size:13px;color:var(--muted)}
.board{overflow-x:auto;background:var(--white);border:1px solid var(--line)}
.board table{border-collapse:collapse;width:100%;min-width:900px;font-size:13.5px}
.board th,.board td{border:1px solid var(--line-soft);padding:8px;vertical-align:top;text-align:left}
.board thead th{background:#F1F0ED;font-size:12.5px;position:sticky;top:0}
.board .tm{font-family:var(--f-latin);font-weight:600;white-space:nowrap;width:6em}
.cell-head{display:flex;justify-content:space-between;gap:6px;font-size:11.5px;color:var(--muted);margin-bottom:4px}
.cell-head .blocked{color:var(--err);font-weight:700}
.bk{display:block;padding:6px 8px;margin-top:4px;border-radius:6px;background:var(--wood-soft);text-decoration:none;color:var(--ink);line-height:1.5}
.bk:hover{outline:1px solid var(--wood)}
.bk small{display:block;color:var(--ink-2);font-size:12px}
.bk.arrived{background:var(--warn-soft)}
.bk.done{background:var(--ok-soft)}
.bk.noshow{background:#EEE;color:var(--muted)}
.st{display:inline-block;font-size:11px;font-weight:700;padding:0 6px;border-radius:4px;background:rgba(0,0,0,.06)}
.admin-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:18px;align-items:start}
@media (max-width:900px){.admin-grid{grid-template-columns:minmax(0,1fr)}}
.box{background:var(--white);border:1px solid var(--line);padding:18px;display:grid;gap:12px}
.box h2{font-size:18px}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 18px;border-radius:999px;font-size:14px;z-index:50}
.blocks table{border-collapse:collapse;font-size:13px}
.blocks th,.blocks td{border:1px solid var(--line-soft);padding:6px 8px;text-align:center}
.blocks td button{font:inherit;font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);background:var(--ok-soft);color:var(--ok);cursor:pointer}
.blocks td button.off{background:var(--err-soft);color:var(--err)}
/* 日ごとの組数（枠の設定） */
.caps{border-collapse:collapse;font-size:13px}
.caps th,.caps td{border:1px solid var(--line-soft);padding:6px 8px;text-align:center}
.caps td:first-child{text-align:left;white-space:nowrap}
.caps td input{width:4.5em;height:2.4em;padding:0 6px;text-align:center}

/* 社内の画面の上の帯 */
.abar{background:var(--ink);color:#E6E4DF}
.abar-in{max-width:1400px;margin:0 auto;padding:10px var(--gut);display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.abar-brand{font-family:var(--f-display);font-size:16px;color:#fff}
.abar-brand small{margin-left:8px;font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.1em;padding:1px 8px;border-radius:999px;background:var(--wood);color:#fff;vertical-align:.15em}
.abar-nav{display:flex;flex-wrap:wrap;gap:4px}
.abar-nav a{color:#E6E4DF;text-decoration:none;font-size:14px;padding:6px 12px;border-radius:999px}
.abar-nav a:hover{background:rgba(255,255,255,.1)}
.abar-nav a[aria-current="page"]{background:#fff;color:var(--ink);font-weight:700}
.abar-me{margin-left:auto;font-size:12.5px;color:#BEBCB6}
.abar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.abar .btn.ghost:hover{background:rgba(255,255,255,.1)}
.abar :focus-visible{outline-color:#fff}

/* 顧客台帳 */
.ledger-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.ledger-tools input[type=search]{max-width:320px;font-size:14px;padding:8px 10px}
.ledger-tools select{width:auto;font-size:14px;padding:8px 10px}
.ledger-tools input[type=search],.ledger-tools select{height:2.9em} /* 台帳の探す欄と選ぶ欄の高さをそろえる */
.lg td small{display:block;color:var(--ink-2);font-size:12px;overflow-wrap:anywhere}
.lg tr.off td{color:var(--muted);background:#F6F5F3}
.lg-bk{display:block;margin-bottom:4px;padding:4px 8px;border-radius:6px;background:var(--wood-soft);color:var(--ink);text-decoration:none;font-size:12.5px;line-height:1.5}
.lg-bk:hover{outline:1px solid var(--wood)}
.lg-bk.off{background:#EEE;color:var(--muted)}
.rank{display:inline-block;min-width:1.8em;text-align:center;font-weight:700;border-radius:4px;padding:0 4px}
.rank.rA{background:var(--err-soft);color:var(--err)}
.rank.rB{background:var(--warn-soft);color:var(--warn)}
.rank.rC{background:#ECEBE8;color:var(--ink-2)}
.due-over{color:var(--err);font-weight:700}
.due-today{color:var(--warn);font-weight:700}

/* スマホでは、表を1枠（1件）ずつのカードにする */
@media (max-width:700px){
  .board.stack{overflow:visible;border:0;background:transparent}
  .board.stack table{min-width:0;display:block}
  .board.stack thead{display:none}
  .board.stack tbody,.board.stack tr{display:block}
  .board.stack tr{background:var(--white);border:1px solid var(--line);margin-bottom:12px}
  .board.stack td{display:block;border:0;border-top:1px solid var(--line-soft);padding:8px 12px}
  .board.stack td:first-child{border-top:0}
  .board.stack td.tm{background:#F1F0ED;width:auto}
  .board.stack td.tm br{display:none}
  .board.stack td[data-label]::before{content:attr(data-label);display:block;font-weight:700;font-size:12px;color:var(--wood);margin-bottom:2px}
  .board.stack td[data-label]:empty{display:none}
  .ledger-tools input[type=search]{flex:1 1 100%;max-width:none}
}

/* 社内の画面の注意（設定の不足など）。上の帯のすぐ下に出す */
.awarn-wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--gut)}
.awarn{margin-top:16px;display:grid;gap:4px;padding:10px 14px;background:var(--warn-soft);color:var(--warn);border-left:4px solid var(--warn);font-size:13.5px;font-weight:700}
/* 予約の確認：ボット対策の欄 */
.ts{min-height:66px}

/* ── 連絡（LINE のようなチャット）── */
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#06C755;color:#fff;font:700 11.5px/1 var(--f-latin);letter-spacing:0}
.abar-nav .badge{margin-left:6px;vertical-align:1px}
.chat{background:#fff;border:1px solid var(--line);display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-height:0}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line-soft);background:#fff}
.chat-head .who{flex:1;min-width:0;display:grid;gap:1px}
.chat-head .who b{font-size:15.5px}
.chat-head .who small{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .back{display:none;border:0;background:none;font-size:26px;line-height:1;padding:0 6px 2px 0;cursor:pointer;color:var(--ink)}
.msgs{background:#DCE3EC;padding:14px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;min-height:240px}
.msgs .empty{margin:auto;color:#5b6778;font-size:13.5px;text-align:center}
.day-sep{align-self:center;margin:6px 0;font-size:11.5px;color:#fff;background:rgba(40,50,70,.32);padding:2px 12px;border-radius:999px}
.msg{display:flex;align-items:flex-end;gap:6px}
.msg .col{display:grid;gap:2px;max-width:min(76%,480px)}
.msg .from{font-size:11px;color:#4b5563;margin-left:4px}
.msg .bubble{padding:8px 12px;border-radius:18px;font-size:14.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;box-shadow:0 1px 1px rgba(0,0,0,.06)}
.msg.them{justify-content:flex-start}
.msg.them .bubble{background:#fff;color:var(--ink);border-top-left-radius:6px}
.msg.me{justify-content:flex-end}
.msg.me .bubble{background:#8DE055;color:#10200a;border-top-right-radius:6px}
.msg .meta{font-size:10.5px;color:#4b5563;line-height:1.35;white-space:nowrap;padding-bottom:2px}
.msg.me .meta{text-align:right}
.msg .meta .read{display:block;color:#2f7a2a;font-weight:700}
.quick{display:flex;gap:6px;overflow-x:auto;padding:8px 10px;border-top:1px solid var(--line-soft);background:#F6F7F9}
.quick button{flex:none;font:inherit;font-size:12.5px;padding:6px 12px;border-radius:999px;border:1px solid #cfd6df;background:#fff;color:var(--ink);cursor:pointer}
.quick button:hover{border-color:#06C755}
.composer{display:flex;gap:8px;align-items:flex-end;padding:8px 10px;border-top:1px solid var(--line-soft);background:#fff}
.composer textarea{flex:1;min-height:42px;max-height:140px;resize:none;border-radius:21px;padding:10px 14px;font-size:15px;line-height:1.4}
.composer .send{flex:none;font:inherit;font-weight:700;font-size:14.5px;border:0;border-radius:999px;padding:11px 18px;background:#06C755;color:#fff;cursor:pointer}
.composer .send[disabled]{opacity:.45;cursor:default}
.chat-note{padding:8px 14px;font-size:12px;color:var(--muted);background:#fff;border-top:1px solid var(--line-soft)}
.chat-note.chat-info{font-size:13.5px;line-height:1.75;color:var(--err);font-weight:700;background:var(--err-soft);border-top:2px solid var(--err)}
/* お客さまの予約の確認ページ */
.panel .chat{max-height:78svh}
.panel .chat .msgs{min-height:200px}
/* 社内の「連絡」の画面：左にトーク一覧、右にチャット */
body.chat-page{height:100svh;display:flex;flex-direction:column}
.chat-wrap{flex:1 1 auto;width:100%;max-width:1400px;margin:0 auto;padding:14px var(--gut) 16px;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:14px;min-height:0}
.talks{background:#fff;border:1px solid var(--line);display:grid;grid-template-rows:auto minmax(0,1fr);min-height:0}
.talks-head{display:grid;gap:8px;padding:12px;border-bottom:1px solid var(--line-soft)}
.talks-head h1{font-size:20px}
.talks-head input{font-size:14px;padding:8px 12px;border-radius:999px}
.talk-list{list-style:none;margin:0;padding:0;overflow-y:auto;min-height:0}
.talk{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line-soft)}
.talk:hover{background:#F5F6F8}
.talk[aria-current="true"]{background:#EAF0F7}
.talk .avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--wood-soft);color:var(--wood);font:800 17px/1 var(--f-display)}
.talk .t-main{min-width:0;display:grid;gap:1px}
.talk .t-main b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk .t-main small{font-size:11.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk .preview{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.talk.unread .preview{color:var(--ink);font-weight:700}
.talk .t-side{display:grid;justify-items:end;gap:5px;font-size:11px;color:var(--muted)}
.talks .none{padding:18px 14px;color:var(--muted);font-size:13.5px}
.room{display:grid;min-height:0}
.room .chat{height:100%}
.room-empty{display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--muted);font-size:14px}
@media (max-width:860px){
  .chat-wrap{grid-template-columns:minmax(0,1fr);padding-inline:0;padding-top:0}
  .chat-wrap.has-room .talks,.chat-wrap:not(.has-room) .room{display:none}
  .talks,.chat{border-inline:0}
  .chat-head .back{display:block}
}

/* ── 社内：使い方のページ ── */
.help{max-width:1000px;padding-bottom:88px}
.help-top{background:var(--white);border:1px solid var(--line);padding:26px clamp(16px,3vw,32px)}
.help-lead{font-size:16.5px;line-height:1.95}
.help-note{margin-top:16px;padding:14px 18px;background:var(--wood-soft);border-left:4px solid var(--wood);display:grid;gap:4px;font-size:15px;line-height:1.8}
.help-toc{margin-top:18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.help-toc a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;text-decoration:none;color:var(--ink);font-size:14.5px;font-weight:700}
.help-toc a:hover{border-color:var(--ink);background:var(--paper)}
.help-toc .no,.help-sec h2 .no{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--f-latin);font-size:14px;font-weight:600}
.help-small{margin-top:12px;font-size:13px;color:var(--muted);line-height:1.8}
.help-sec{margin-top:24px;padding:28px clamp(16px,3vw,32px);background:var(--white);border:1px solid var(--line);scroll-margin-top:84px}
.help-sec h2{display:flex;align-items:center;gap:12px;font-size:clamp(20px,2.4vw,24px);margin:0 0 10px}
.help-sec h2 .no{width:36px;height:36px;font-size:17px}
.help-sec h3{font-size:17px;margin:26px 0 4px}
.help-sec > p,.help-sec li,.help-sec dd{font-size:15px;line-height:1.9}
.help-sec code{font-size:13.5px;background:var(--paper);padding:2px 6px;border-radius:4px;word-break:break-all}
.help-fig{margin:16px 0 0}
.help-fig img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:6px;background:#fff}
.help-fig figcaption{margin-top:6px;font-size:12.5px;color:var(--muted)}
.help-fig.narrow{max-width:420px}
.help-fig.phone{max-width:330px}
.help-2col{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 28px;align-items:start}
@media (max-width:760px){.help-2col{grid-template-columns:minmax(0,1fr)}}
.mk{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:#E0452D;color:#fff;font:700 13px/1 var(--f-latin);margin:0 6px 0 0;vertical-align:-5px}
.help-keys{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.help-keys li{display:flex;align-items:flex-start;gap:2px}
.help-keys li .mk{margin-top:4px}
.help-num{margin:8px 0 0;padding-left:1.4em;display:grid;gap:8px}
.help-dots{margin:12px 0 0;padding-left:1.2em;display:grid;gap:4px}
/* 全体の流れ（会期の前・当日・会期のあと） */
.help-flow{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:ph}
.help-flow .phase{position:relative;display:grid;gap:10px;align-content:start;background:var(--paper);padding:14px;border-radius:10px}
.help-flow .phase:not(:last-child)::after{content:"→";position:absolute;right:-13px;top:50%;translate:0 -50%;width:24px;height:24px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;z-index:1}
.help-flow h3{margin:0;font-size:16px}
.help-flow h3 small{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.help-flow .lane{border-radius:8px;padding:10px 12px;background:#fff;border:1px solid var(--line-soft)}
.help-flow .lane.us{background:#FDF0EE;border-color:#F1B8AE}
.help-flow .who{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;padding:2px 8px;border-radius:99px;background:var(--line-soft);color:var(--ink-2)}
.help-flow .us .who{background:#E0452D;color:#fff}
.help-flow ol{margin:8px 0 0;padding-left:1.2em;display:grid;gap:4px}
.help-flow li{font-size:14px;line-height:1.7}
@media (max-width:760px){.help-flow{grid-template-columns:minmax(0,1fr)}.help-flow .phase:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-19px;translate:-50% 0}}
/* 画面の地図（黒い帯のまね） */
.help-bar{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 16px;background:#1D1E20;color:#fff;border-radius:8px;font-size:14px}
.help-bar b small{margin-left:6px;font-size:10.5px;padding:1px 6px;border-radius:99px;background:var(--wood);vertical-align:2px}
.help-bar span{display:inline-flex;align-items:center;gap:6px}
.help-bar span.out{margin-left:auto;border:1px solid rgba(255,255,255,.6);border-radius:99px;padding:4px 12px}
.help-bar i{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#E0452D;font:700 11px/1 var(--f-latin);font-style:normal}
.help-bar em{font-style:normal;font-size:11px;font-weight:700;background:#06C755;border-radius:99px;padding:1px 6px}
/* 当日の受付の5つの手順 */
.help-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.help-steps li{position:relative;display:grid;gap:4px;align-content:start;background:var(--paper);border-top:4px solid #E0452D;padding:14px 12px 16px;border-radius:0 0 8px 8px}
.help-steps li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:22px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:11px;z-index:1}
.help-steps .n{font-family:var(--f-latin);font-size:26px;font-weight:600;line-height:1;color:#E0452D}
.help-steps b{font-size:15px;line-height:1.5}
.help-steps small{font-size:12.5px;line-height:1.6;color:var(--ink-2)}
@media (max-width:860px){.help-steps{grid-template-columns:minmax(0,1fr)}.help-steps li:not(:last-child)::after{content:"↓";right:auto;left:22px;top:auto;bottom:-16px}}
.help-status{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.help-status .chip{padding:6px 12px;border-radius:99px;font-size:14px;font-weight:700;background:var(--wood-soft)}
.help-status .chip.arrived{background:var(--warn-soft);color:var(--warn)}
.help-status .chip.done{background:var(--ok-soft);color:var(--ok)}
.help-status .chip.noshow{background:#EEE;color:var(--muted)}
.help-status .to{color:var(--muted)}
.help-status .or{flex-basis:100%;margin-top:6px;font-size:13px;color:var(--muted)}
.help-cases{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.help-cases > div{background:var(--paper);padding:14px 16px;border-radius:8px}
.help-cases h4{margin:0 0 4px;font-size:15px}
.help-cases p{font-size:14px;line-height:1.8}
@media (max-width:860px){.help-cases{grid-template-columns:minmax(0,1fr)}}
/* 困ったとき・守ってほしいこと */
.help-faq{margin:12px 0 0;display:grid;gap:10px}
.help-faq dt{font-weight:700;font-size:15px;padding-left:1.6em;position:relative}
.help-faq dt::before{content:"Q";position:absolute;left:0;font-family:var(--f-latin);color:#E0452D}
.help-faq dd{margin:0 0 6px;padding:10px 14px 10px 1.6em;background:var(--paper);border-radius:8px}
.help-promise{margin:12px 0 0;padding-left:1.2em;display:grid;gap:8px}
.help-promise li::marker{color:#E0452D}
/* 画面の中の確かめ（取り消し・今すぐ送る）。ブラウザの確認の小窓は使わない */
.ask-inline{display:grid;gap:12px;padding:14px 16px;border:2px solid var(--err);background:var(--err-soft);border-radius:8px}
.ask-inline p{color:var(--err);font-weight:700;font-size:14.5px;line-height:1.7}
.ask-inline .ask-row{display:flex;flex-wrap:wrap;gap:10px}
.btn.danger{background:var(--err);border-color:var(--err);color:var(--white)}
.btn.danger:hover{background:#8A2C22;border-color:#8A2C22}