/* 予約ページ（公開側）。事業者ごとの色・丸み・書体は、画面側で出力する CSS 変数（App\Support\SiteTheme）で切り替える */
:root{
  --bg:var(--bg-l,#EEF1F0);--panel:#fff;--ink:#1C2B33;--sub:#5B6B73;--line:#D5DCDA;
  --hi:#F2C230;--hi-ink:#1C2B33;--err:#B3261E;
  --acc:var(--acc-l,#0E6A6A);--acc-ink:var(--acc-ink-l,#fff);
  --r:8px;--rp:10px;
  --font:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)
}
@media (prefers-color-scheme:dark){
  :root{--bg:#12191D;--panel:#1B262C;--ink:#E7EEEC;--sub:#9AACB3;--line:#32434B;--acc:var(--acc-d);--acc-ink:var(--acc-ink-d);--err:#FF8A80}
}

html{font-size:calc(18px*var(--fs,1));scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.7}
.wrap{max-width:640px;margin:0 auto;padding:20px 16px 48px}
header h1{font-size:1.5rem;margin:8px 0 2px;letter-spacing:.02em}
header p{margin:0;color:var(--sub);font-size:.9rem}
.shop{display:inline-block;font-weight:900;font-size:1.2rem;color:var(--ink);text-decoration:none;padding:4px 0}
a.shop:hover{color:var(--acc);text-decoration:underline}
header h1{margin-top:14px}
/* 工程バー */
.track{display:flex;margin:20px 0;gap:0}
.track div{flex:1;font-size:.75rem;color:var(--sub);padding-top:10px;border-top:4px solid var(--line);margin-right:4px}
.track div.on{border-color:var(--acc);color:var(--ink);font-weight:700}
.track div.done{border-color:var(--acc)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--rp);padding:20px}
/* 完了画面では進捗バーを隠すので、見出しとの間に余白を足す */
.track[hidden]+.panel{margin-top:20px}
h2{font-size:1.1rem;margin:0 0 4px}
h2:focus{outline:none}
.hint{color:var(--sub);font-size:.85rem;margin:0 0 16px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:420px){.opts{grid-template-columns:1fr}}
.opt{border:1.5px solid var(--line);border-radius:var(--r);padding:12px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.opt b{display:block;font-size:.95rem}
.opt span{font-size:.78rem;color:var(--sub)}
.opt[aria-pressed="true"]{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
.tab{border:1.5px solid var(--line);border-radius:var(--r);padding:8px 4px;background:transparent;color:inherit;font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;text-align:center}
.tab small{display:block;font-weight:400;font-size:.72rem;color:var(--sub)}
.tab[aria-pressed="true"]{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc);background:color-mix(in srgb,var(--acc) 10%,transparent)}
.calhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;font-weight:700}
.calhead button{font:inherit;border:1.5px solid var(--line);background:transparent;color:inherit;border-radius:var(--r);padding:4px 12px;cursor:pointer}
.calhead button:disabled{opacity:.3;cursor:not-allowed}
.calgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:10px;text-align:center}
.calgrid i{font-style:normal;font-size:.72rem;color:var(--sub)}
.cal{border:1.5px solid transparent;border-radius:var(--r);padding:8px 0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.cal:not(:disabled){border-color:var(--line)}
.cal[aria-pressed="true"]{background:var(--hi);border-color:var(--hi);color:var(--hi-ink);font-weight:700}
.cal:disabled{opacity:.3;cursor:not-allowed}
.clear{background:none;border:0;color:var(--acc);font:inherit;font-size:.85rem;text-decoration:underline;cursor:pointer;margin-top:12px;padding:0}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slot{border:1.5px solid var(--line);border-radius:var(--r);padding:10px 0;text-align:center;background:transparent;color:inherit;font:inherit;cursor:pointer}
.slot[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.slot:disabled{opacity:.35;cursor:not-allowed}
label{display:block;font-weight:700;font-size:.88rem;margin:14px 0 4px}
.req{color:var(--err);font-weight:500;font-size:.75rem;margin-left:6px}
input,select,textarea{width:100%;font:inherit;padding:10px 12px;border:1.5px solid var(--line);border-radius:var(--r);background:var(--bg);color:var(--ink)}
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--err)}
textarea{min-height:90px;resize:vertical}
.sec-box{margin:18px 0 0;padding:16px;background:var(--panel);border:1.5px solid var(--line);border-radius:var(--rp)}
.sec-box .sec{margin-top:0}
.sec{font-size:1rem;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid var(--line)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--hi);outline-offset:2px}
.err{color:var(--err);font-size:.85rem;margin:10px 0 0}
.err:empty{display:none}
.err p{margin:0 0 2px}
.err:focus{outline:none}
.ferr{color:var(--err);font-size:.82rem;margin:4px 0 0}
.ferr:empty{display:none}
.photos{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.photo{position:relative}
.photo img{display:block;width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--line)}
.photo button{position:absolute;top:-8px;right:-8px;width:24px;height:24px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--ink);font:inherit;font-size:.8rem;line-height:1;cursor:pointer;padding:0}
.nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.btn{font:inherit;font-weight:700;padding:12px 22px;border-radius:var(--r);border:1.5px solid var(--acc);cursor:pointer;background:var(--acc);color:var(--acc-ink)}
.btn.ghost{background:transparent;color:var(--acc)}
.btn:disabled{opacity:.6;cursor:wait}
dl{margin:0;display:grid;grid-template-columns:7em 1fr;gap:8px 12px;font-size:.92rem}
dt{color:var(--sub)}dd{margin:0;word-break:break-word}
.done-box{text-align:center;padding:12px 0}
.done-box .mark{width:56px;height:56px;border-radius:50%;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;font-size:1.8rem;margin:0 auto 12px}
/* LINE をご希望の方への友だち追加の案内（完了画面） */
.line-box{margin:18px auto 0;max-width:420px;padding:14px 16px;border:1.5px solid #06C755;border-radius:var(--r);background:color-mix(in srgb,#06C755 7%,transparent);text-align:center}
.line-box p{margin:0 0 10px}.line-box p:last-child{margin:0}
.mail-box{margin:18px auto 0;max-width:420px;padding:14px 16px;border:1.5px solid var(--acc);border-radius:var(--r);background:color-mix(in srgb,var(--acc) 6%,transparent);text-align:center}
.mail-box p{margin:0}
.line-btn{display:inline-block;text-decoration:none;background:#06C755;border-color:#06C755;color:#fff}
.foot{margin-top:24px;font-size:.78rem;color:var(--sub);text-align:center}
.foot a{color:var(--acc)}
/* ハニーポット：人間には見えず、フォーカスもされない場所に置く（display:none だと見分けるボットがいる） */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* 既存ホームページへの埋め込み（?embed=1）：余白を詰める */
.embed{background:transparent}
.embed .wrap{padding:8px 8px 20px}

/* 個人情報の取り扱いへの同意 */
.agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font-size:.95rem;line-height:1.6;cursor:pointer}
.agree input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--acc)}
.agree a{color:var(--acc);text-decoration:underline}
/* 予約ページを使わない設定のときの案内（reserve/closed.blade.php） */
.closed p{margin:0 0 12px}
.closed-tel{margin:16px 0 20px!important}
.closed-tel .btn{display:inline-block;text-decoration:none}
.closed a:not(.btn){color:var(--acc)}
.done-box .rno{display:inline-block;margin:0 auto 14px;padding:8px 18px;border:1.5px solid var(--line);border-radius:10px;line-height:1.5}
.done-box .rno b{font-size:1.25rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.done-box .rno small{color:var(--sub);font-size:.78rem}


/* ============ 見た目の仕上げ（華やかさ）：ホームページと同じ色・動き・区切り ============
   <html data-motion="none|fade|rise|slide|pop" data-divider="wave|slant|flat">（設定 ＞ デザイン） */
:root{--acc-edge:color-mix(in srgb,var(--acc) 62%,#000);--shadow:0 1px 2px rgba(20,30,40,.05),0 10px 28px rgba(20,30,40,.09);--hdh:26px}
@media (prefers-color-scheme:dark){:root{--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);--acc-edge:color-mix(in srgb,var(--acc) 55%,#000)}}
body{background:radial-gradient(color-mix(in srgb,var(--acc) 12%,transparent) 1.4px,transparent 1.6px) 0 0/22px 22px,var(--bg)}

/* 見出し：色の帯＋区切りの形 */
.wrap>header{position:relative;overflow:hidden;margin:0 0 20px;padding:20px 22px calc(18px + var(--hdh));border-radius:var(--rp);background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 68%,#000));color:var(--acc-ink);box-shadow:var(--shadow)}
.wrap>header::before{content:"";position:absolute;right:-40px;top:-60px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12);pointer-events:none}
.wrap>header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--hdh);background:var(--bg);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C130 2 260 2 400 20S660 38 800 20 1070 2 1200 22V40Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V22C130 2 260 2 400 20S660 38 800 20 1070 2 1200 22V40Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
html[data-divider="slant"] .wrap>header::after{-webkit-mask:none;mask:none;clip-path:polygon(0 100%,100% 0,100% 100%)}
html[data-divider="flat"] .wrap>header{padding-bottom:20px}
html[data-divider="flat"] .wrap>header::after{display:none}
.wrap>header .shop,.wrap>header h1,.wrap>header p{position:relative;color:var(--acc-ink)}
.wrap>header p{opacity:.9}
.wrap>header .shop::before{content:"✦ ";color:var(--hi)}
a.shop:hover{color:var(--acc-ink);text-decoration:underline}
header h1{margin:8px 0 6px}

/* 工程バー：いまの工程が少し太く */
.track div{border-top-width:5px;border-radius:3px;transition:border-color .3s,color .3s}
.track div.on{transform:none}
.panel{box-shadow:var(--shadow);border-color:transparent}
.opt,.slot,.tab,.cal{transition:transform .15s,box-shadow .15s,background .2s,border-color .2s}
.opt:hover:not([aria-pressed="true"]),.slot:hover:not(:disabled):not([aria-pressed="true"]){transform:translateY(-2px);box-shadow:0 6px 14px rgba(20,30,40,.1)}
.opt[aria-pressed="true"]::after{content:"✓";float:right;color:var(--acc);font-weight:900}

/* ボタン：立体 */
.btn{box-shadow:0 4px 0 var(--acc-edge);transition:transform .15s,box-shadow .15s;border-color:transparent}
.btn:hover:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 var(--acc-edge)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:none}
.btn.ghost{box-shadow:none;border-color:var(--acc)}
.btn.ghost:hover:not(:disabled){transform:none;background:color-mix(in srgb,var(--acc) 10%,transparent)}
.line-btn{box-shadow:0 4px 0 #04883b}

/* 工程が変わったときの動き（JSが .pin を付ける）。なし／端末が「視差効果を減らす」のときは動かさない */
@keyframes rv-fade{from{opacity:0}to{opacity:1}}
@keyframes rv-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes rv-slide-f{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes rv-slide-b{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes rv-pop{from{opacity:0;transform:scale(.9) translateY(10px)}60%{opacity:1;transform:scale(1.02)}to{opacity:1;transform:none}}
html[data-motion="fade"] .panel.pin{animation:rv-fade .9s ease both}
html[data-motion="rise"] .panel.pin{animation:rv-rise .95s cubic-bezier(.2,.7,.2,1) both}
html[data-motion="slide"] .panel.pin[data-dir="fwd"]{animation:rv-slide-f .9s cubic-bezier(.2,.7,.2,1) both}
html[data-motion="slide"] .panel.pin[data-dir="back"]{animation:rv-slide-b .9s cubic-bezier(.2,.7,.2,1) both}
html[data-motion="pop"] .panel.pin{animation:rv-pop .95s cubic-bezier(.3,1.4,.5,1) both}
/* 選択肢は順に現れる */
html:not([data-motion="none"]) .panel.pin .opt,html:not([data-motion="none"]) .panel.pin .slot{animation:rv-rise .9s cubic-bezier(.2,.7,.2,1) both}
.panel.pin .opt:nth-child(2){animation-delay:.06s!important}.panel.pin .opt:nth-child(3){animation-delay:.12s!important}.panel.pin .opt:nth-child(4){animation-delay:.18s!important}.panel.pin .opt:nth-child(n+5){animation-delay:.24s!important}
/* 完了画面のチェック */
html:not([data-motion="none"]) .done-box .mark{animation:rv-markpop .7s cubic-bezier(.3,1.5,.5,1) both,rv-ring 1.4s .4s ease-out}
@keyframes rv-markpop{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rv-ring{from{box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 45%,transparent)}to{box-shadow:0 0 0 26px transparent}}
@media(prefers-reduced-motion:reduce){
  .panel.pin,.panel.pin .opt,.panel.pin .slot,.done-box .mark{animation:none!important}
  .btn,.opt,.slot,.tab,.cal{transition:none}
}
/* 既存ホームページへの埋め込みでは、帯をやめて静かに（親ページの邪魔をしない） */
.embed{background:transparent}
.embed .wrap>header{background:none;box-shadow:none;color:var(--ink);padding:0 0 4px;margin-bottom:8px;overflow:visible}
.embed .wrap>header::before,.embed .wrap>header::after{display:none}
.embed .wrap>header .shop,.embed .wrap>header h1,.embed .wrap>header p{color:inherit}
.embed .wrap>header p{color:var(--sub);opacity:1}
.embed .wrap>header .shop::before{content:none}
.embed.embed{background-image:none}
.embed .panel.pin,.embed .panel.pin .opt,.embed .panel.pin .slot{animation-duration:.3s!important}

/* 相談のみ（サービス選択の下のチェック）／対応エリア外の注意 */
.agree.consult{margin:18px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px}
.agree.consult small{display:block;color:var(--sub);font-size:.82rem;line-height:1.5;margin-top:2px}
.area-warn{color:var(--err);font-size:.85rem;font-weight:700;line-height:1.5;margin:6px 0 0}
.area-warn[hidden]{display:none}
.cbadge{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:var(--err);color:#fff;font-size:.72rem;font-weight:700}
.agree-note{margin:6px 0 0;font-size:12.5px;line-height:1.6;color:var(--muted,#666)}