/* ありがとうシステム 自社サイト — 共通の見た目（モバイルがはじめ・大きな文字・コントラスト4.5以上）
   色と形は試作品 v0.3 のものを引きついでいます。文字の大きさは rem なので、「文字の大きさ」ボタンで全体が変わります。 */
:root{
  --bg:#f4f7fb; --surface:#ffffff; --surface-2:#e9f0fa; --ink:#13213a; --ink-2:#44536b; --ink-3:#526179; --line:#c9d4e4;
  --brand:#1f58c4; --brand-ink:#ffffff; --brand-soft:#dbe7fd; --sun:#ffc83a; --sun-ink:#3a2a00; --sun-soft:#fff2cc;
  --ok:#16703c; --ok-soft:#dcf2e5; --warn:#8c5200; --warn-soft:#fbecd2; --crit:#ad2e20; --crit-soft:#fbe2de; --shade:rgba(19,33,58,.45);
  --f-body:"BIZ UDPGothic","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif;
  --f-display:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",system-ui,sans-serif;
  --f-num:ui-rounded,"SF Pro Rounded",system-ui,"Hiragino Sans","Yu Gothic UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1523; --surface:#142035; --surface-2:#1a2944; --ink:#e7eef9; --ink-2:#b4c0d4; --ink-3:#a3b1c8; --line:#34456a;
  --brand:#7ea6ff; --brand-ink:#0a1325; --brand-soft:#1b2e54; --sun:#ffd35a; --sun-ink:#2a1f00; --sun-soft:#3a3016;
  --ok:#5cc88a; --ok-soft:#163726; --warn:#e6a846; --warn-soft:#3a2b13; --crit:#f58a7b; --crit-soft:#3f1d19; --shade:rgba(0,0,0,.6); color-scheme:dark}}
html[data-hc="1"]{--bg:#fff;--surface:#fff;--surface-2:#eef1f5;--ink:#000;--ink-2:#1a1a1a;--ink-3:#2a2a2a;--line:#4d4d4d;--brand:#0b3a9c;--brand-soft:#dfe9ff;--sun-soft:#fff0b8;--ok:#0b5a28;--ok-soft:#d6f2e0;--warn:#6b3d00;--warn-soft:#ffe9c2;--crit:#8a1a10;--crit-soft:#ffdcd6;color-scheme:light}
html[data-fs="1"]{font-size:118%} html[data-fs="2"]{font-size:136%}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:1.0625rem;line-height:1.8;overflow-wrap:anywhere}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;line-height:1.4;margin:0;text-wrap:balance}
h1{font-size:clamp(1.6rem,6vw,2.4rem);font-weight:900}
h2{font-size:1.5rem} h3{font-size:1.2rem} h4{font-size:1.05rem}
p,ul,ol,dl,figure,table{margin:0}
a{color:var(--brand);text-underline-offset:3px}
img,svg{max-width:100%}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)} .small{font-size:.9rem} .tiny{font-size:.82rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px;z-index:100;font-weight:700}
.skip:focus{top:8px}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:4px}
html[data-hc="1"] :focus-visible{outline-color:#000;outline-width:4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.wrap{max-width:68rem;margin-inline:auto;padding-inline:20px}
@media (max-width:480px){.wrap{padding-inline:16px}}
main{display:block;padding-bottom:3rem}
.stack{display:grid;gap:1.1rem}
.stack-lg{display:grid;gap:2rem}
.sec{display:grid;gap:1rem;padding-top:2.4rem}
.eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.1em;color:var(--brand)}
.page-h{padding-top:1.6rem;display:grid;gap:.6rem}
.crumb{font-size:.9rem;color:var(--ink-2);padding-top:1rem}
.crumb a{color:var(--ink-2)}

/* 未決定・仮・デモ */
.tbd{display:inline-block;font-size:.78rem;font-weight:700;color:var(--warn);border:1px dashed var(--warn);border-radius:6px;padding:0 .4em;line-height:1.6;white-space:nowrap;vertical-align:.1em}
.banner{background:var(--sun);color:var(--sun-ink);font-weight:700;text-align:center;padding:.55rem 1rem;font-size:.95rem}
.banner.mock{background:var(--brand-soft);color:var(--ink)}
.caution{background:var(--warn-soft);color:var(--ink);border-radius:12px;padding:.8rem 1rem;font-size:.95rem}
.note{background:var(--surface-2);color:var(--ink);border-radius:12px;padding:.8rem 1rem;font-size:.95rem}
.done{background:var(--ok-soft);color:var(--ink);border-left:6px solid var(--ok);border-radius:12px;padding:.8rem 1rem}
.err{background:var(--crit-soft);color:var(--ink);border-left:6px solid var(--crit);border-radius:12px;padding:.8rem 1rem}

/* ヘッダー・フッター */
.site-h{background:var(--surface);border-bottom:1px solid var(--line)}
.site-h .wrap{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding-block:.7rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);flex-wrap:wrap}
.logo b{font-family:var(--f-display);font-weight:900;font-size:1.3rem;line-height:1.3}
.logo .sup{font-size:.78rem;color:var(--ink-2);border-left:1px solid var(--line);padding-left:.6rem;line-height:1.4}
.site-h nav{display:flex;gap:.3rem 1.1rem;flex-wrap:wrap;align-items:center}
.site-h nav a:not(.btn){color:var(--ink);text-decoration:none;padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center}
.site-h nav a:not(.btn):hover,.site-h nav a:not(.btn)[aria-current="page"]{color:var(--brand);text-decoration:underline}
.a11y{display:flex;gap:.5rem 1rem;flex-wrap:wrap;align-items:center;font-size:.9rem;color:var(--ink-2);flex-basis:100%;border-top:1px solid var(--line);padding-top:.5rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;background:var(--surface);color:var(--ink);padding:.4rem .8rem;min-height:44px;font:inherit;font-size:.95rem;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"],.tog[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.tog{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:10px;padding:.4rem .9rem;min-height:44px;font:inherit;font-size:.95rem;cursor:pointer}
.foot{margin-top:3rem;border-top:1px solid var(--line);background:var(--surface)}
.foot .wrap{padding-block:1.6rem;display:grid;gap:.8rem;font-size:.92rem;color:var(--ink-2)}
.foot nav{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem}
.foot nav a{color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center}

/* ボタン・フォーム */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:2px solid var(--brand);background:var(--brand);color:var(--brand-ink);font:inherit;font-weight:700;padding:.65rem 1.3rem;min-height:48px;border-radius:12px;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn.sun{background:var(--sun);border-color:var(--sun);color:var(--sun-ink)}
.btn.ghost{background:transparent;color:var(--brand)}
.btn.sm{padding:.35rem .9rem;min-height:44px;font-size:.95rem}
.btn.wide{width:100%}
.btn.danger{background:var(--crit);border-color:var(--crit);color:#fff}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;filter:none}
.acts{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.field{display:grid;gap:.3rem;min-width:0}
.field>label,.field>.lab,legend.lab{font-weight:700;font-size:.95rem}
.field .hint{font-size:.85rem;color:var(--ink-2)}
.req{color:var(--crit);font-weight:700}
input,select,textarea{font:inherit;font-size:1rem;padding:.6rem .75rem;min-height:48px;border:2px solid var(--ink-3);border-radius:10px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
textarea{min-height:5.5rem;resize:vertical}
input[type=checkbox],input[type=radio]{width:1.4rem;height:1.4rem;min-height:0;accent-color:var(--brand);flex:none}
fieldset{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.5rem}
.opt{display:flex;align-items:center;gap:.7rem;border:2px solid var(--line);border-radius:12px;padding:.6rem .85rem;min-height:48px;cursor:pointer;background:var(--surface)}
.opt:has(input:checked){border-color:var(--brand);background:var(--brand-soft)}
.opt .pr{margin-left:auto;font-family:var(--f-num);white-space:nowrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}   /* 人には見えない「わな」の欄 */
.stepper{display:flex;align-items:center;gap:.6rem}
.stepper button{width:48px;height:48px;border-radius:50%;border:2px solid var(--ink-3);background:var(--surface);color:var(--ink);font-size:1.4rem;cursor:pointer;line-height:1}
.stepper output{font-family:var(--f-num);font-size:1.4rem;min-width:2ch;text-align:center}

/* カード・表 */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1.1rem 1.2rem;display:grid;gap:.7rem;min-width:0}
.card.sun{border-color:var(--sun);border-width:2px}
.card.warn{border-color:var(--warn);border-width:2px}
.card.ok{border-color:var(--ok);border-width:2px}
.tbl{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:12px}
table{border-collapse:collapse;width:100%;font-size:.98rem}
th,td{text-align:left;padding:.65rem .85rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child>*{border-bottom:0}
th{font-size:.88rem;color:var(--ink-2);font-weight:700}
td.r,th.r{text-align:right;white-space:nowrap}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.35rem 1rem;font-size:.98rem}
.kv dt{color:var(--ink-2)} .kv dd{margin:0}
@media (max-width:480px){.kv{grid-template-columns:1fr;gap:0}.kv dd{margin-bottom:.6rem}}
ul.plain{padding-left:1.2em;display:grid;gap:.3rem}
.lines{list-style:none;padding:0;display:grid}
.lines li{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line)}
.lines li:last-child{border-bottom:0}
.lines .free{color:var(--ok);font-weight:700}

/* トップ */
.hero{background:var(--brand-soft);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:center;padding-block:2.4rem}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr;padding-block:1.6rem}.hero .art{display:none}}
.hero h1 span{color:var(--brand)}
.hero .lead{margin-top:.8rem;font-size:1.1rem;max-width:34em}
.free-line{margin-top:1rem;display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:.6rem 1rem;font-weight:700}
.free-line .zero{background:var(--sun);color:var(--sun-ink);border-radius:999px;padding:0 .7rem;font-family:var(--f-num)}
.promise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--surface);border:1px solid var(--line);border-radius:16px}
.promise>div{padding:1.1rem;display:grid;gap:.4rem;align-content:start;border-left:1px solid var(--line)}
.promise>div:first-child{border-left:0}
@media (max-width:900px){.promise{grid-template-columns:repeat(2,minmax(0,1fr))}.promise>div:nth-child(3){border-left:0}.promise>div:nth-child(n+3){border-top:1px solid var(--line)}}
@media (max-width:480px){.promise{grid-template-columns:1fr}.promise>div{border-left:0}.promise>div+div{border-top:1px solid var(--line)}}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
@media (max-width:820px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.menu{display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.8rem}
.menu .it{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;display:grid;gap:.2rem;align-content:start}
.menu .price{font-family:var(--f-num);font-size:1.6rem;font-weight:700}
.menu .price small{font-size:.85rem;font-family:var(--f-body);color:var(--ink-2);font-weight:400}
.menu .price.ask{font-family:var(--f-body);font-size:1.1rem}
.areas{display:flex;flex-wrap:wrap;gap:.5rem}
.areas a,.areas span{text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);padding:.35rem 1rem;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.areas a:hover{border-color:var(--brand);color:var(--brand)}
.story{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(1.2rem,4vw,2.4rem);display:grid;gap:1rem}
.story blockquote{margin:0;padding:.9rem 1.1rem;background:var(--surface-2);border-radius:14px}

/* 手順 */
.steps-bar{display:flex;gap:.4rem;flex-wrap:wrap;list-style:none;padding:0;margin:0}
.steps-bar li{flex:1 1 auto;min-width:5.5rem;text-align:center;font-size:.85rem;padding:.4rem .3rem;border-radius:10px;background:var(--surface-2);color:var(--ink-2);border:2px solid transparent}
.steps-bar li[aria-current="step"]{background:var(--brand);color:var(--brand-ink);font-weight:700}
.steps-bar li.past{background:var(--ok-soft);color:var(--ink)}
.photo-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
@media (max-width:480px){.photo-slots{grid-template-columns:1fr}}
.photo-slot{border:2px dashed var(--ink-3);border-radius:12px;padding:.6rem;display:grid;gap:.4rem;align-content:start;background:var(--surface)}
.photo-slot img{width:100%;height:7rem;object-fit:cover;border-radius:8px}

/* 空き枠カレンダー（1週間ずつ） */
.cal{display:grid;gap:.5rem}
.cal-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.cal-row{display:grid;grid-template-columns:4.6rem repeat(3,minmax(0,1fr));gap:.4rem;align-items:stretch}
.cal-row .d{display:grid;align-content:center;font-weight:700;line-height:1.3}
.cal-row .d small{font-weight:400;color:var(--ink-2)}
.slot{border:2px solid var(--brand);background:var(--surface);color:var(--ink);border-radius:12px;min-height:56px;padding:.3rem .2rem;display:grid;gap:0;place-items:center;font:inherit;cursor:pointer;line-height:1.25}
.slot .t{font-size:.8rem;color:var(--ink-2)}
.slot .s{font-size:1.4rem;font-weight:900;color:var(--brand)}
.slot.few .s{color:var(--warn)} .slot.few{border-color:var(--warn)}
.slot[disabled]{border-style:dashed;border-color:var(--ink-3);background:transparent;cursor:not-allowed}
.slot[disabled] .s{color:var(--ink-3)}
.slot[aria-pressed="true"]{background:var(--brand);border-color:var(--brand)}
.slot[aria-pressed="true"] .t,.slot[aria-pressed="true"] .s{color:var(--brand-ink)}
.legend{display:flex;gap:.4rem 1.2rem;flex-wrap:wrap;font-size:.92rem}

/* 見積り・合計 */
.total{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;flex-wrap:wrap;border-top:2px solid var(--ink);padding-top:.8rem}
.total b{font-family:var(--f-num);font-size:2rem}
.promise3{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:.8rem;background:var(--ok-soft);border:1px solid var(--ok);border-radius:14px;padding:1rem}
.promise3 .ic{width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-weight:900}
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip{border:2px solid var(--ink-3);background:var(--surface);color:var(--ink);border-radius:999px;padding:.35rem 1rem;min-height:44px;font:inherit;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* マイページ */
.eta{font-family:var(--f-num);font-size:1.8rem;font-weight:700}
.thumbs{display:flex;gap:.5rem;flex-wrap:wrap}
.thumbs img{width:9rem;max-width:45%;border-radius:10px;border:1px solid var(--line)}
.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.faq details{border-top:1px solid var(--line);padding:.8rem 1.1rem}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;font-weight:700;min-height:44px;display:flex;align-items:center}
.faq p{margin-top:.4rem;color:var(--ink-2)}
pre.prompt{background:var(--surface-2);border-radius:12px;padding:1rem;white-space:pre-wrap;font-family:var(--f-body);font-size:.92rem;line-height:1.7;margin:0;overflow-x:auto}
code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--surface-2);padding:.1em .35em;border-radius:4px}
.recgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(18rem,1fr));gap:1rem}
.cta{background:var(--brand);color:var(--brand-ink);border-radius:16px;padding:1.2rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.cta .btn.sun{border-color:var(--sun)}
.legal{max-width:48rem;margin-inline:auto}

/* 保証書（画面でも印刷でも同じ） */
.warr{background:#fff;color:#000;border:2px solid #222;border-radius:6px;padding:clamp(1rem,4vw,2.2rem);display:grid;gap:1rem;max-width:44rem;margin-inline:auto}
.warr h1{text-align:center;letter-spacing:.5em;font-size:1.8rem}
.warr .kv dt{color:#333}
@media print{
  body{background:#fff;font-size:12pt}
  .site-h,.foot,.banner,.skip,.no-print,.a11y{display:none!important}
  main{padding:0}.warr{border-color:#000;max-width:none}
  a{color:#000;text-decoration:none}
}