/* 動作確認用の見本。実際のサイトでは、その店のデザインで作る。 */
:root{--ink:#22201c;--sub:#6d6a62;--line:#d9d4c8;--bg:#faf8f3;--key:#2d5a4c}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.9 "Hiragino Sans","Noto Sans JP",system-ui,sans-serif}
a{color:var(--key)}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}
header.site{border-bottom:1px solid var(--line);padding:18px 0}
header.site .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
header.site a{text-decoration:none;font-weight:700;color:var(--ink)}
header.site .lang{font-weight:400;font-size:15px;color:var(--key)}
h1{font-size:28px;line-height:1.45;margin:48px 0 8px}
h2{font-size:20px;margin:56px 0 12px;padding-bottom:8px;border-bottom:2px solid var(--key)}
.lead{color:var(--sub);margin:0 0 8px}
[data-posts-state="empty"] .none,[data-posts-state="error"] .none{display:block}
.none{display:none;color:var(--sub);font-size:15px}
.rows a{display:grid;grid-template-columns:96px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;align-items:start}
.rows img{width:96px;height:72px;object-fit:cover;border-radius:4px;grid-row:span 3}
.rows a:not(:has(img)){grid-template-columns:1fr}
.rows time{font-size:14px;color:var(--sub);line-height:1.4}
.rows h3{font-size:17px;line-height:1.5;margin:0}
.rows p{font-size:15px;color:var(--sub);margin:0;line-height:1.6}
[data-posts-more]{margin:16px 0;padding:10px 18px;border:1px solid var(--key);background:none;color:var(--key);border-radius:6px;font:inherit;font-size:15px}
article{padding:40px 0 80px}
article .meta{font-size:14px;color:var(--sub)}
article h1{margin:6px 0 28px}
article h2{border:0;padding:0;margin:44px 0 8px}
article img{max-width:100%;height:auto;border-radius:4px;display:block}
article figure{margin:32px 0}
article figcaption{font-size:14px;color:var(--sub);margin-top:6px}
article p{overflow-wrap:anywhere}
footer{border-top:1px solid var(--line);padding:24px 0 48px;font-size:14px;color:var(--sub)}
.join{margin:56px 0 72px}
.join form{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
.join input{min-width:0;padding:12px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:16px;background:#fff}
.join button,.sys button{padding:12px 20px;border:0;border-radius:6px;background:var(--key);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.join [data-subscribe-msg]{grid-column:1/-1;margin:0;font-size:15px;color:var(--key);min-height:1.6em}
.join [data-subscribe-state="error"] [data-subscribe-msg]{color:#a23b2a}
.sys{padding-top:56px;padding-bottom:96px}
/* ---- お店の情報・ビフォーアフター・問い合わせ ---- */
header.site .lang{margin-left:14px}
.bar{font-size:15px;line-height:1.6;padding:10px 0}
.bar .wrap{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.bar.closure{background:#f3e4c9;color:#4a3410}
.bar.slots{background:var(--key);color:#fff}
.bar.slots a{color:#fff;font-weight:600}
.todayline{font-size:15px;color:var(--key);font-weight:600;margin:14px 0 0}
.todayline[data-closed]{color:#a23b2a}
.acts{display:flex;gap:10px;margin:14px 0 0}
.acts a{font-size:15px;padding:8px 14px;border:1px solid var(--key);border-radius:6px;text-decoration:none}
table.hours{border-collapse:collapse;width:100%;max-width:420px}
table.hours th,table.hours td{text-align:left;padding:9px 0;border-bottom:1px solid var(--line);font-weight:400}
table.hours tr[data-today] th,table.hours tr[data-today] td{font-weight:700;color:var(--key)}
table.hours tr[data-closed] td{color:var(--sub)}
[data-info-state="empty"].pricebox,[data-cases-state="empty"].casebox,[data-cases-state="error"].casebox{display:none}
.pgroup h3{font-size:16px;margin:22px 0 4px}
.pgroup ul{list-style:none;margin:0;padding:0}
.pgroup li{display:grid;grid-template-columns:1fr auto;gap:0 12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pgroup small{grid-column:1/-1;color:var(--sub);font-size:14px}
.cases{display:grid;gap:24px}
.cases figure{margin:0}
.cases figcaption{font-size:14px;color:var(--sub);margin-top:6px}
[data-ba]{position:relative;overflow:hidden;border-radius:4px;touch-action:pan-y;background:#ddd;--pos:50%}
[data-ba] img{display:block;width:100%;height:100%;object-fit:cover;user-select:none}
[data-ba] img[data-f="before"]{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
[data-ba] i{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
[data-ba] i::after{content:"";position:absolute;top:50%;left:50%;width:36px;height:36px;margin:-18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3)}
[data-ba] input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.contact{margin:0 0 80px}
.contact form{display:grid;gap:12px;max-width:480px}
.contact label{display:grid;gap:4px;font-size:14px;color:var(--sub)}
.contact input,.contact textarea{padding:12px;border:1px solid var(--line);border-radius:6px;font:inherit;font-size:16px;background:#fff;color:var(--ink)}
.contact button,a.go{padding:12px 20px;border:0;border-radius:6px;background:var(--key);color:#fff;font:inherit;font-weight:600;cursor:pointer;justify-self:start;text-decoration:none;display:inline-block}
.contact [data-contact-msg]{margin:0;font-size:15px;color:var(--key);min-height:1.6em}
.contact [data-contact-state="error"] [data-contact-msg]{color:#a23b2a}
[data-auto-note]{font-size:13px;color:var(--sub);border-top:1px solid var(--line);padding-top:12px;margin-top:40px}