/* エステティックサロン しらつゆ（架空）— Web工房Pono 自主制作デモ
   テーマ：朝露と青磁。骨色の地に、深い青磁の緑と、琥珀のアクセント。写真は「しずく形のアーチ」で切り抜く。
   色はテンプレートとして差し替えられるよう、すべて :root の変数にまとめる。 */
:root {
  --bg: #F4F2ED;        /* 背景（骨色） */
  --bg2: #E7ECE8;       /* 背景2（朝霧） */
  --paper: #FCFBF8;     /* カード */
  --ink: #25302E;       /* 文字 */
  --sub: #66716D;       /* 弱い文字 */
  --line: rgba(37, 48, 46, .14);  /* 線 */
  --main: #4C6B65;      /* メイン（青磁） */
  --main-d: #3A5550;
  --main-l: #DCE6E2;
  --accent: #B8875A;    /* アクセント（琥珀） */
  --accent-l: #F3E7D8;
  --dark: #1F2826;      /* フッター */
  --en: "Italiana", "Hina Mincho", serif;   /* 英字のラベル */
  --num: "Cinzel", "Hina Mincho", serif;     /* 数字（高さがそろう書体） */
  --mc: "Hina Mincho", "Yu Mincho", serif;
  --jp: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --db: 31px; --hh: 64px; --rail: 268px; --r: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--db) + var(--hh) + 56px); }
body { margin: 0; padding-top: calc(var(--db) + var(--hh)); padding-bottom: 64px; background: var(--bg); color: var(--ink); font-family: var(--jp); font-weight: 400; font-size: 15.5px; line-height: 1.95; letter-spacing: .04em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.5; letter-spacing: .06em; text-wrap: pretty; }
p { margin: 0; text-wrap: pretty; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; } figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } button { cursor: pointer; }
svg { flex: none; }
.wrap { width: min(1080px, calc(100% - 40px)); margin: 0 auto; position: relative; }
.wrap.narrow { max-width: 860px; margin-left: calc((100% - min(1080px, 100% - 40px)) / 2); } /* 狭い段も、ページ見出しと左端をそろえる */
.en { font-family: var(--en); font-size: 14px; letter-spacing: .2em; color: var(--main); line-height: 1.6; }
.lbl { font-size: 13px; font-weight: 500; color: var(--sub); margin: 0 0 8px; display: block; letter-spacing: .08em; }
.note { margin-top: 16px; font-size: 12.5px; color: var(--sub); line-height: 1.8; }
.demo-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 90; background: var(--ink); color: rgba(255, 255, 255, .8); font-size: 12px; text-align: center; padding: 6px 12px; line-height: 1.6; }
.demo-bar a { text-decoration: underline; margin-left: 6px; }

/* ボタン */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 28px; border-radius: 999px; border: 1px solid transparent; font-size: 15px; font-weight: 500; letter-spacing: .08em; transition: background .3s, color .3s, border-color .3s; text-align: center; line-height: 1.4; }
.btn svg { width: 22px; height: 10px; transition: transform .3s var(--ease); } .btn:hover svg { transform: translateX(4px); }
.btn--main { background: var(--main); color: #fff; } .btn--main:hover { background: var(--main-d); }
.btn--line { border-color: var(--ink); background: transparent; } .btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--full { width: 100%; }
.more { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; border-bottom: 1px solid currentColor; padding: 6px 0; color: var(--main-d); }
.more svg { width: 22px; height: 10px; transition: transform .3s var(--ease); } .more:hover svg { transform: translateX(4px); }

/* ヘッダー（スマホ＝上の帯／PC＝左に固定の縦の帯） */
.hd { position: fixed; top: var(--db); left: 0; right: 0; z-index: 60; height: var(--hh); display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; background: rgba(244, 242, 237, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.lg { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.lg__m { width: 24px; color: var(--main); } .lg__m svg { width: 24px; height: 31px; display: block; }
.lg__t { display: flex; flex-direction: column; line-height: 1.2; }
.lg__t b { font-family: var(--mc); font-weight: 400; font-size: 21px; letter-spacing: .14em; }
.lg__t small { font-family: var(--en); font-size: 9.5px; letter-spacing: .2em; color: var(--sub); margin-top: 3px; }
.hd__nav { display: none; }
.hd__side { display: none; }
.hd__mrsv { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--main); color: #fff; font-size: 14px; font-weight: 500; }
.mb { width: 48px; height: 48px; border: 0; background: none; display: grid; place-content: center; gap: 7px; padding: 0; }
.mb i { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: transform .35s var(--ease); }
.is-open .mb i:first-child { transform: translateY(4.25px) rotate(30deg); } .is-open .mb i:last-child { transform: translateY(-4.25px) rotate(-30deg); }
/* backdrop-filter があると fixed の基準がヘッダーになるので、開いている間は外す */
.is-open .hd { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
.is-open .hd__nav { display: flex; flex-direction: column; position: fixed; top: calc(var(--db) + var(--hh)); left: 0; right: 0; bottom: 0; background: var(--bg); padding: 24px 24px 120px; overflow-y: auto; animation: fadeIn .35s var(--ease); }
.hd__nav a { display: flex; flex-direction: column; padding: 16px 4px; border-bottom: 1px solid var(--line); font-family: var(--mc); font-size: 20px; letter-spacing: .1em; }
.hd__nav a small { font-family: var(--en); font-size: 12px; letter-spacing: .2em; color: var(--main); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* スマホ下のボタン */
.spb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-template-columns: 1fr 1.2fr 1.6fr; background: var(--paper); border-top: 1px solid var(--line); }
.spb a { min-height: 60px; display: grid; place-items: center; font-size: 13.5px; font-weight: 500; border-right: 1px solid var(--line); }
.spb a.is-main { background: var(--main); color: #fff; border: 0; }

/* 下層ページの見出し */
.ph { position: relative; padding: 56px 0 44px; overflow: hidden; }
.ph h1 { font-family: var(--mc); font-size: 32px; margin: 6px 0 14px; }
.ph__l { max-width: 640px; color: var(--sub); }
.ph__drop { position: absolute; right: -30px; top: 10px; width: 160px; color: var(--main-l); pointer-events: none; }
.ph__drop svg { width: 100%; height: auto; }

/* 共通の見出し */
.sec { padding: 72px 0; } .sec--t { padding-top: 24px; } .sec--mist { background: var(--bg2); }
.st { margin-bottom: 32px; } .st h2 { font-family: var(--mc); font-size: 25px; margin-top: 6px; }
.st__l { margin-top: 14px; color: var(--sub); max-width: 640px; }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0 24px; margin-bottom: 32px; } .row .st { margin-bottom: 12px; }
.h2s { font-family: var(--mc); font-size: 22px; margin-bottom: 8px; }
.lead { font-family: var(--mc); font-size: 23px; margin: 8px 0 20px; }
.two { display: grid; gap: 56px; }

/* アーチ（しずく形の写真の枠） */
.arch { border-radius: 999px 999px var(--r) var(--r); overflow: hidden; background: var(--main-l); }
.arch img { width: 100%; height: 100%; object-fit: cover; }

/* ===== トップ ===== */
.hero { position: relative; display: grid; }
.hero__img { order: -1; margin: 0 0 0 20px; aspect-ratio: 5 / 4; border-radius: 0 0 0 160px; overflow: hidden; background: var(--main-l); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; }
.hero__txt { padding: 36px 20px 8px; }
.hero__en { font-size: 12px; }
.hero__t { font-family: var(--mc); font-size: 33px; line-height: 1.55; letter-spacing: .1em; margin: 14px 0 18px; }
.hero__t span { display: block; }
.hero__d { color: var(--sub); }
.hero__b { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; } .hero__b .btn { flex: 1 1 220px; }
.hero__slot { position: relative; z-index: 2; order: -1; justify-self: start; margin: -34px 0 0 20px; display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-radius: 999px; background: var(--paper); box-shadow: 0 10px 30px rgba(37, 48, 46, .12); font-size: 14px; }
.hero__slot b { font-family: var(--num); font-size: 26px; color: var(--main-d); margin: 0 2px; line-height: 1; }
.hero__slot small { display: block; font-size: 11px; color: var(--sub); line-height: 1.3; }
.hero__slot .en { font-size: 12px; border-right: 1px solid var(--line); padding-right: 12px; }
.hero__slot svg { width: 22px; height: 10px; color: var(--main); }

.intro { padding: 72px 0 24px; text-align: center; }
.intro__k { font-family: var(--mc); color: var(--accent); letter-spacing: .3em; font-size: 14px; }
.intro__t { font-family: var(--mc); font-size: 24px; margin: 16px 0 22px; line-height: 1.8; }
.intro__d { max-width: 600px; margin: 0 auto; text-align: left; color: var(--sub); }

.pls__l { display: grid; gap: 56px; }
.pl { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: start; }
.pl__img { aspect-ratio: 4 / 5; }
.pl__n { display: block; font-family: var(--num); font-weight: 400; font-size: 46px; line-height: 1; color: var(--accent); }
.pl h3 { font-family: var(--mc); font-size: 19px; margin: 8px 0 10px; }
.pl p { font-size: 14.5px; color: var(--sub); }

.mcs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
.mc__img { aspect-ratio: 3 / 4; margin-bottom: 14px; }
.mc__img img { transition: transform 1s var(--ease); } .mc:hover .mc__img img { transform: scale(1.04); }
.mc .en { font-size: 12px; } .mc h3 { font-family: var(--mc); font-size: 19px; }
.mc__p { font-size: 13px; color: var(--sub); } .mc__p b { font-family: var(--num); font-size: 22px; color: var(--ink); font-weight: 400; margin-right: 2px; }

.mini { display: grid; gap: 32px; }
.mini__t h2 { font-family: var(--mc); font-size: 25px; margin: 6px 0 14px; } .mini__t p { color: var(--sub); margin-bottom: 18px; }
.mini__f { background: var(--paper); border-radius: 28px; padding: 26px 20px; border: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.chip input, .rc input, .ck input, .rm input, .sf input, .tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); font-size: 14px; cursor: pointer; transition: all .25s; }
.chip input:checked + span { background: var(--main); border-color: var(--main); color: #fff; }
.chip input:focus-visible + span, .rc input:focus-visible + span, .ck input:focus-visible + span, .rm input:focus-visible + span, .sf input:focus-visible + span, .tg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.mini__r { border-top: 1px solid var(--line); padding-top: 18px; }
.mini__r > p:first-child { font-size: 13px; color: var(--sub); }
.mini__tot b { font-family: var(--num); font-size: 48px; font-weight: 400; line-height: 1.1; margin-right: 4px; }
.mini__per { font-size: 13.5px; color: var(--sub); } .mini__per b { color: var(--ink); font-weight: 500; }
.law-chip { display: inline-block; margin-top: 12px; padding: 6px 14px; border-radius: 999px; font-size: 12.5px; background: var(--main-l); color: var(--main-d); line-height: 1.6; }
.law-chip.is-hit { background: var(--accent-l); color: #7A5532; }

.fl { display: grid; gap: 28px; }
.fl__l { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; counter-reset: f; }
.fl__l li { display: flex; flex-direction: column; justify-content: center; min-height: 150px; background: var(--paper); border-radius: 999px 999px 18px 18px; padding: 30px 10px 20px; text-align: center; border: 1px solid var(--line); }
.fl__m { display: block; font-family: var(--num); font-size: 40px; line-height: 1; color: var(--main); } .fl__m small { font-family: var(--jp); font-size: 12px; margin-left: 2px; }
.fl__l b { display: block; font-weight: 500; font-size: 13px; letter-spacing: .02em; margin-top: 8px; }

.wk { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wk > a, .wk > span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 92px; border-radius: 999px 999px 14px 14px; background: var(--paper); border: 1px solid var(--line); font-size: 12px; line-height: 1.4; padding: 10px 0 8px; transition: border-color .25s, transform .25s; }
.wk > a:hover { border-color: var(--main); transform: translateY(-2px); }
.wk b { font-family: var(--num); font-size: 22px; font-weight: 400; }
.wk i { font-style: normal; font-size: 18px; color: var(--main); margin-top: 2px; }
.wk .is-sun { color: #A2564A; } .wk .is-sat { color: #3E6A8A; }
.wk .is-x i { color: var(--sub); } .wk .is-off { background: transparent; color: var(--sub); }
.wk__w { font-size: 11.5px; }
.wk__key { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 14px; font-size: 12px; color: var(--sub); } .wk__key span { white-space: nowrap; }

.info { display: grid; gap: 40px; }
.info__img { aspect-ratio: 4 / 5; max-width: 420px; }
.dl > div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.dl dt { font-size: 13px; color: var(--sub); } .dl dd small { color: var(--sub); font-size: 12.5px; }
.info .more { margin-top: 22px; }

/* CTA・フッター */
.cta { background: var(--main); color: #fff; padding: 80px 0; text-align: center; position: relative; overflow: hidden; }
.cta__in { width: min(720px, calc(100% - 40px)); margin: 0 auto; position: relative; }
.cta__drop { display: block; width: 34px; margin: 0 auto 10px; color: var(--accent-l); } .cta__drop svg { width: 34px; height: 44px; }
.cta .en { color: var(--accent-l); } .cta h2 { font-family: var(--mc); font-size: 25px; margin: 8px 0 16px; } .cta p { opacity: .9; }
.cta__b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; } .cta__b .btn { flex: 1 1 240px; max-width: 320px; }
.cta .btn--main { background: var(--paper); color: var(--ink); } .cta .btn--main:hover { background: var(--accent-l); }
.cta .btn--line { border-color: rgba(255, 255, 255, .7); color: #fff; } .cta .btn--line:hover { background: #fff; color: var(--ink); }
.ft { background: var(--dark); color: rgba(244, 242, 237, .85); padding: 56px 0 24px; font-size: 13.5px; }
.ft__in { width: min(1080px, calc(100% - 40px)); margin: 0 auto; display: grid; gap: 32px; }
.lg--ft .lg__m { color: var(--accent-l); } .lg--ft .lg__t small { color: rgba(244, 242, 237, .6); }
.ft__ad { margin-top: 18px; line-height: 1.9; }
.ft__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; align-content: start; } .ft__nav a { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ft__note { width: min(1080px, calc(100% - 40px)); margin: 32px auto 0; font-size: 12px; opacity: .7; }
.ft__bt { width: min(1080px, calc(100% - 40px)); margin: 20px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; opacity: .75; }

/* ===== メニューと料金 ===== */
.tabs { position: sticky; top: calc(var(--db) + var(--hh)); z-index: 30; background: rgba(244, 242, 237, .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.tabs .wrap { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; } .tabs .wrap::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; background: var(--paper); }
.tabs a:last-child { background: var(--main); color: #fff; border-color: var(--main); }
.fp { display: grid; gap: 18px; background: var(--accent-l); border-radius: 24px; padding: 26px 22px; margin: 32px 0 56px; }
.fp h2 { font-family: var(--mc); font-size: 22px; margin: 4px 0 8px; } .fp p { font-size: 14px; color: #6B5743; } .fp .en { color: #8D6640; }
.pr li { display: flex; align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px dotted rgba(37, 48, 46, .3); }
.pr li span { flex: 1; } .pr li b { font-family: var(--num); font-weight: 400; font-size: 24px; white-space: nowrap; } .pr li b small { font-family: var(--jp); font-size: 12px; margin-left: 2px; }
.mg { display: grid; grid-template-columns: 104px 1fr; gap: 0 18px; padding: 40px 0; border-top: 1px solid var(--line); }
.mg__img { aspect-ratio: 2 / 3; }
.mg__h { align-self: end; padding-bottom: 6px; } .mg__h h2 { font-family: var(--mc); font-size: 25px; }
.mg__l { grid-column: 1 / -1; margin-top: 20px; }
.ml__i { padding: 20px 0; border-bottom: 1px solid var(--line); } .ml__i:first-child { padding-top: 4px; } .ml__i:last-child { border-bottom: 0; padding-bottom: 0; }
.ml__h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ml__h h3 { font-family: var(--mc); font-size: 19px; }
.ml__p b { font-family: var(--num); font-size: 28px; font-weight: 400; margin-right: 2px; } .ml__p { font-size: 13px; }
.ml__d { margin: 8px 0 10px; font-size: 14.5px; color: var(--sub); }
.ml__m { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 12.5px; color: var(--sub); }
.ml__m a { display: inline-flex; align-items: center; gap: 8px; color: var(--main-d); font-weight: 500; font-size: 13.5px; min-height: 40px; }
.ml__m a svg { width: 20px; height: 9px; }
.opts { padding: 40px 0 0; border-top: 1px solid var(--line); } .opts > p { color: var(--sub); font-size: 14px; margin-bottom: 8px; }

.calc, .cx { display: grid; gap: 24px; align-items: start; }
.calc__f fieldset, .rsv__s { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
legend { display: flex; align-items: center; gap: 10px; font-family: var(--mc); font-size: 19px; margin-bottom: 14px; padding: 0; }
legend b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--main); color: #fff; font-family: var(--num); font-size: 16px; font-weight: 400; }
.rcs { display: grid; gap: 8px; } .rcs--c { grid-template-columns: repeat(2, 1fr); }
.rc span { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; padding: 10px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; transition: all .25s; }
.rc span b { font-weight: 500; font-size: 14.5px; } .rc span em { font-style: normal; font-family: var(--num); font-size: 19px; white-space: nowrap; }
.rc--c span { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; padding: 12px 16px; line-height: 1.5; }
.rc--c span em { font-family: var(--jp); font-size: 12.5px; color: var(--accent); font-weight: 500; } .rc--c span small { font-size: 11.5px; color: var(--sub); }
.rc input:checked + span { border-color: var(--main); box-shadow: inset 0 0 0 1px var(--main); background: #fff; }
.rc input:checked + span b::before { content: "● "; color: var(--main); font-size: 10px; vertical-align: 2px; }
.cks { display: grid; gap: 8px; }
.ck span { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 50px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; position: relative; font-size: 14.5px; }
.ck span::before { content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; border: 1px solid rgba(37, 48, 46, .35); background: #fff; }
.ck input:checked + span::before { background: var(--main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: var(--main); }
.ck span em { font-style: normal; font-size: 13px; color: var(--sub); white-space: nowrap; }
.calc__r, .cx__r { background: var(--paper); border-radius: 28px; padding: 28px 22px; border: 1px solid var(--line); }
.calc__lbl { font-size: 13px; color: var(--sub); }
.calc__tot { line-height: 1.1; margin: 4px 0 18px; } .calc__tot b { font-family: var(--num); font-weight: 400; font-size: 56px; } .calc__tot em { font-style: normal; font-size: 16px; margin-left: 4px; }
.calc__dl > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.calc__dl dt { color: var(--sub); display: flex; align-items: center; gap: 8px; } .calc__dl dd b { font-weight: 500; font-size: 16px; }
.calc__dl .is-save dd { color: #8D6640; }
.law { margin: 18px 0; padding: 18px; border-radius: 16px; background: var(--main-l); font-size: 13.5px; line-height: 1.8; }
.law b.law__t { display: block; font-size: 14.5px; margin-bottom: 6px; color: var(--main-d); }
.law ul { padding-left: 1.1em; list-style: disc; } .law li { margin: 2px 0; }
.law.is-hit { background: var(--accent-l); } .law.is-hit b.law__t { color: #7A5532; }
.calc__b { display: grid; gap: 10px; }

/* ===== 初めての方へ ===== */
.tl { display: grid; gap: 28px; align-items: start; }
.tl__ctl { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 24px 20px; }
.tl__start select, .cx__f select { display: block; width: 100%; min-height: 50px; padding: 0 44px 0 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2325302E' stroke-width='1.4'/%3E%3C/svg%3E") right 16px center / 12px no-repeat; appearance: none; -webkit-appearance: none; font-size: 15px; }
.tl__sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.tl__sum > p:first-child { font-size: 13px; color: var(--sub); width: 100%; }
.tl__end b { font-family: var(--num); font-size: 52px; font-weight: 400; line-height: 1.1; margin-right: 4px; color: var(--main-d); }
.tl__tot { font-size: 13px; color: var(--sub); } .tl__tot b { color: var(--ink); font-weight: 500; }
.tl__bar { display: flex; height: 10px; border-radius: 99px; overflow: hidden; margin-top: 14px; background: var(--bg); }
.tl__bar span { height: 100%; transition: flex-grow .5s var(--ease); } .tl__bar span:nth-child(1) { background: var(--accent); } .tl__bar span:nth-child(2) { background: var(--accent-l); } .tl__bar span:nth-child(3) { background: var(--main); } .tl__bar span:nth-child(4) { background: var(--main-l); }
.tl__l { position: relative; }
.tl__l::before { content: ""; position: absolute; left: 62px; top: 14px; bottom: 14px; width: 1px; background: var(--line); }
.tl__i { display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 4px 0 26px; position: relative; }
.tl__i::before { content: ""; position: absolute; left: 57px; top: 11px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--main); }
.tl__time { font-family: var(--num); font-size: 20px; line-height: 1.6; color: var(--main-d); }
.tl__h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 4px; } .tl__h b { font-family: var(--mc); font-weight: 400; font-size: 19px; } .tl__h span { font-size: 12.5px; color: var(--accent); font-weight: 500; }
.tl__b > p:last-child { font-size: 14.5px; color: var(--sub); }
.br li { padding: 16px 0 16px 30px; border-bottom: 1px solid var(--line); position: relative; }
.br li::before { content: ""; position: absolute; left: 4px; top: 25px; width: 10px; height: 13px; background: var(--main); border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; clip-path: polygon(50% 0, 100% 55%, 100% 100%, 0 100%, 0 55%); border-radius: 0 0 99px 99px; }
.br b { font-weight: 500; } .br p { font-size: 14px; color: var(--sub); margin-top: 2px; }
.wide { aspect-ratio: 3 / 2; border-radius: 160px 160px var(--r) var(--r); overflow: hidden; margin-bottom: 56px; background: var(--main-l); } .wide img { width: 100%; height: 100%; object-fit: cover; }
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-weight: 500; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); background: linear-gradient(var(--ink), var(--ink)) center / 10px 1px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1px 10px no-repeat; transition: transform .3s; }
.faq__i[open] summary::after { transform: rotate(45deg); }
.faq__i p { padding: 0 0 20px; color: var(--sub); font-size: 14.5px; }

/* ===== 予約 ===== */
.rv2 { display: grid; gap: 24px; align-items: start; }
.tg { display: block; margin-bottom: 14px; }
.tg span { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 14px; cursor: pointer; position: relative; padding-left: 34px; }
.tg span::before { content: ""; position: absolute; left: 0; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(37, 48, 46, .35); background: #fff; }
.tg input:checked + span::before { background: var(--main) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3L15 7' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center / 18px no-repeat; border-color: var(--main); }
.rms { display: grid; gap: 8px; }
.rm span { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 12px; min-height: 60px; padding: 10px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; transition: all .25s; }
.rm b { font-weight: 500; font-size: 14.5px; } .rm small { grid-row: 2; font-size: 12px; color: var(--sub); } .rm em { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-family: var(--num); font-size: 20px; white-space: nowrap; }
.rm em.is-first { color: #8D6640; }
.rm input:checked + span, .sf input:checked + span { border-color: var(--main); box-shadow: inset 0 0 0 1px var(--main); background: #fff; }
.sfs { display: grid; gap: 8px; }
.sf span { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 0 14px; min-height: 64px; padding: 10px 16px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); cursor: pointer; }
.sf i { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--main-l); color: var(--main-d); font-style: normal; font-family: var(--mc); font-size: 18px; }
.sf i.sf__a { background: var(--accent-l); color: #7A5532; }
.sf b { font-weight: 500; font-size: 14.5px; line-height: 1.4; } .sf small { font-size: 12px; color: var(--sub); line-height: 1.4; }
.dp__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dp__h p { font-family: var(--num); font-size: 18px; letter-spacing: .12em; }
.dp__nav { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); display: grid; place-items: center; }
.dp__nav svg { width: 22px; height: 10px; } .dp__prev svg { transform: scaleX(-1); }
.dp__nav:disabled { opacity: .35; cursor: default; }
.dp__l { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dp__l button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 82px; padding: 8px 0; border-radius: 999px 999px 14px 14px; border: 1px solid var(--line); background: var(--paper); font-size: 11.5px; line-height: 1.35; transition: all .2s; }
.dp__l button b { font-family: var(--num); font-weight: 400; font-size: 21px; }
.dp__l button i { font-style: normal; font-size: 15px; color: var(--main); }
.dp__l button.is-sun { color: #A2564A; } .dp__l button.is-sat { color: #3E6A8A; }
.dp__l button:disabled { background: transparent; color: var(--sub); cursor: default; } .dp__l button:disabled i { color: var(--sub); }
.dp__l button.is-on { background: var(--main); border-color: var(--main); color: #fff; } .dp__l button.is-on i { color: #fff; }
.dp__day { margin: 18px 0 10px; font-weight: 500; }
.tm { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.tm button { min-height: 52px; border-radius: 14px; border: 1px solid var(--line); background: var(--paper); font-family: var(--num); font-size: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2; }
.tm button small { font-family: var(--jp); font-size: 10.5px; color: var(--main); }
.tm button:disabled { background: transparent; color: rgba(37, 48, 46, .3); text-decoration: line-through; cursor: default; } .tm button:disabled small { color: inherit; }
.tm button.is-on { background: var(--main); border-color: var(--main); color: #fff; } .tm button.is-on small { color: #fff; }
.tm__none { grid-column: 1 / -1; padding: 18px; border-radius: 14px; background: var(--paper); color: var(--sub); font-size: 14px; }
.rsv label:not(.tg):not(.rm):not(.sf) { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 14px; }
.req { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 4px; background: var(--accent-l); color: #7A5532; font-size: 11px; }
.rsv input[type=text], .rsv input[type=tel], .rsv input[type=email], .rsv textarea { display: block; width: 100%; margin-top: 6px; min-height: 52px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 16px; font-weight: 400; }
.rsv textarea { resize: vertical; line-height: 1.7; }
.rsv input:focus, .rsv textarea:focus, select:focus { outline: 2px solid var(--main); outline-offset: 1px; }
.is-err { border-color: #B5543F !important; background: #FFF6F3 !important; }
.err { color: #9C4433; font-size: 13.5px; margin-top: 4px; }
.f2 { display: grid; gap: 0 14px; }
.sum { background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 24px 20px; }
.sum__dl { margin: 10px 0 18px; } .sum__dl > div { display: grid; grid-template-columns: 6em 1fr; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.sum__dl dt { color: var(--sub); font-size: 13px; } .sum__dl dd { font-weight: 500; word-break: break-word; }
.conf, .modal { position: fixed; inset: 0; z-index: 100; background: rgba(31, 40, 38, .55); display: grid; place-items: center; padding: 20px; }
.conf[hidden], .modal[hidden] { display: none; }
.conf__b, .modal__b { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; background: var(--bg); border-radius: 28px; padding: 30px 22px; animation: fadeIn .35s var(--ease); }
.conf__b h2 { font-family: var(--mc); font-size: 22px; margin-top: 4px; }
.conf__nav { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; } .conf__nav .btn { padding: 0 12px; font-size: 14px; letter-spacing: .04em; }
.modal__b { text-align: center; }
.modal__drop { display: block; width: 30px; margin: 0 auto 10px; color: var(--main); } .modal__drop svg { width: 30px; height: 39px; }
.modal__t { font-family: var(--mc); font-size: 20px; margin-bottom: 12px; } .modal__d { color: var(--sub); font-size: 14.5px; margin-bottom: 24px; text-align: left; }

/* ===== サロン ===== */
.msg { display: grid; gap: 36px; align-items: center; }
.msg__img { aspect-ratio: 2 / 3; max-width: 380px; }
.msg__t p { margin-bottom: 14px; } .sign { font-family: var(--mc); text-align: right; margin-top: 20px; }
.scs { display: grid; gap: 16px; }
.sc { display: grid; grid-template-columns: 64px 1fr; gap: 18px; background: var(--paper); border-radius: 24px; padding: 24px 20px; border: 1px solid var(--line); }
.sc__i { display: grid; place-items: center; width: 64px; height: 80px; border-radius: 999px 999px 14px 14px; background: var(--main-l); color: var(--main-d); font-family: var(--mc); font-size: 26px; }
.sc__r { font-size: 12px; color: var(--accent); font-weight: 500; }
.sc h3 { font-family: var(--mc); font-size: 21px; margin: 2px 0 8px; } .sc h3 small { font-family: var(--jp); font-size: 12px; color: var(--sub); margin-left: 10px; letter-spacing: .04em; }
.sc p { font-size: 14px; color: var(--sub); } .sc__off { margin-top: 8px; font-size: 12.5px !important; }
.two--img figure { aspect-ratio: 2 / 3; max-width: 380px; }
.dl--w { background: var(--paper); border-radius: 24px; padding: 8px 20px; } .dl--w > div:last-child { border-bottom: 0; }

/* ===== 契約 ===== */
.tblw { overflow-x: auto; border-radius: 20px; border: 1px solid var(--line); background: var(--paper); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tbl th, .tbl td { padding: 11px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.tbl thead th { font-weight: 500; font-size: 13px; background: var(--bg2); } .tbl thead th + th { text-align: right; } .tbl thead th small { display: block; font-weight: 400; color: var(--sub); font-size: 11px; }
.tbl tbody th { font-weight: 500; }
.tbl td { text-align: right; white-space: nowrap; } .tbl td b { font-weight: 500; } .tbl td small { display: block; font-size: 11px; color: var(--sub); }
.tbl td.is-hit { background: var(--accent-l); } .tbl td.is-hit small { color: #7A5532; font-weight: 500; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.cs li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.cs__n { display: grid; place-items: center; width: 44px; height: 54px; border-radius: 999px 999px 12px 12px; background: var(--main); color: #fff; font-family: var(--num); font-size: 22px; }
.cs b { font-family: var(--mc); font-weight: 400; font-size: 18px; } .cs p { font-size: 14.5px; color: var(--sub); margin-top: 4px; }
.cx__f { display: grid; gap: 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 28px; padding: 24px 20px; }
.cx__f label { display: block; }
.cx__f input[type=range] { width: 100%; accent-color: var(--main); height: 32px; }
.cx__f .lbl b { font-family: var(--num); font-size: 22px; color: var(--ink); font-weight: 400; }
.cx__dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cx__dots i { width: 22px; height: 28px; border-radius: 999px 999px 6px 6px; border: 1px solid var(--main); }
.cx__dots i.is-used { background: var(--main); }
.cx__opt { font-size: 13px; color: var(--sub); }
.cx__bar { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--bg); margin-bottom: 14px; }
.cx__bar span { height: 100%; transition: width .5s var(--ease); }
.cx__bar .b1, .calc__dl i.d1 { background: var(--main); } .cx__bar .b2, .calc__dl i.d2 { background: var(--accent); } .cx__bar .b3, .calc__dl i.d3 { background: var(--main-l); box-shadow: inset 0 0 0 1px var(--main); }
.calc__dl i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; } .calc__dl i.d0 { background: transparent; border: 1px solid var(--sub); }
.cx__why { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: var(--bg2); font-size: 13.5px; line-height: 1.8; }
.hot { display: flex; align-items: center; gap: 18px; margin-top: 18px; padding: 18px 22px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line); }
.hot b { font-family: var(--num); font-size: 48px; font-weight: 400; line-height: 1; color: var(--main-d); }
.hot span { font-weight: 500; } .hot small { display: block; font-weight: 400; font-size: 12.5px; color: var(--sub); }

/* 出現 */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ===== タブレット ===== */
@media (min-width: 720px) {
  .wrap { width: min(1080px, calc(100% - 80px)); } .wrap.narrow { margin-left: calc((100% - min(1080px, 100% - 80px)) / 2); }
  .hero__img { margin-left: 40px; aspect-ratio: 16 / 9; border-radius: 0 0 0 220px; }
  .hero__txt { padding: 48px 40px 8px; } .hero__slot { margin-left: 40px; }
  .hero__t { font-size: 42px; }
  .pl { grid-template-columns: 200px 1fr; gap: 32px; align-items: center; }
  .mcs { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .fl__l { grid-template-columns: repeat(4, 1fr); } .fl__l b { font-size: 14px; }
  .tbl { font-size: 13.5px; } .tbl th, .tbl td { padding: 12px 14px; } .tbl tbody th { white-space: nowrap; }
  .info { grid-template-columns: .8fr 1fr; align-items: center; gap: 56px; }
  .ft__in { grid-template-columns: 1.2fr 1fr; }
  .two { grid-template-columns: 1fr 1fr; gap: 64px; }
  .fp { grid-template-columns: 1fr 1fr; align-items: center; padding: 34px 36px; gap: 40px; }
  .mg { grid-template-columns: 240px 1fr; gap: 0 48px; padding: 56px 0; }
  .mg__img { grid-row: 1 / 3; align-self: start; position: sticky; top: calc(var(--db) + var(--hh) + 80px); }
  .mg__h { align-self: start; padding: 0 0 4px; } .mg__l { grid-column: 2; margin-top: 12px; }
  .rcs--c { grid-template-columns: repeat(4, 1fr); }
  .f2 { grid-template-columns: 1fr 1fr; }
  .sfs { grid-template-columns: repeat(3, 1fr); }
  .sf span { grid-template-columns: 1fr; justify-items: center; text-align: center; padding: 16px 10px; gap: 4px; } .sf i { grid-row: auto; }
  .scs { grid-template-columns: 1fr 1fr; }
  .msg { grid-template-columns: 380px 1fr; gap: 64px; }
  .ph { padding: 80px 0 56px; } .ph h1 { font-size: 40px; } .ph__drop { width: 240px; right: 4%; top: 24px; }
  .st h2 { font-size: 30px; } .intro__t { font-size: 30px; }
  .sec { padding: 104px 0; } .sec--t { padding-top: 32px; }
  .calc__r, .cx__r, .sum, .tl__ctl { padding: 32px 30px; }
  .conf__b, .modal__b { padding: 40px 40px; }
}
@media (min-width: 960px) {
  .calc { grid-template-columns: 1.35fr 1fr; gap: 40px; } .calc__r { position: sticky; top: calc(var(--db) + var(--hh) + 80px); }
  .cx { grid-template-columns: 1fr 1fr; gap: 40px; }
  .tl { grid-template-columns: 360px 1fr; gap: 56px; } .tl__ctl { position: sticky; top: calc(var(--db) + var(--hh) + 30px); }
  .rv2 { grid-template-columns: 1fr 340px; gap: 40px; } .sum { position: sticky; top: calc(var(--db) + var(--hh) + 30px); }
  .mini { grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
  .pls__l { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .pl { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .pl:nth-child(2) { margin-top: 64px; } .pl:nth-child(3) { margin-top: 128px; }
  .pl__img { aspect-ratio: 4 / 5; }
}

/* ===== PC：左に固定の縦の帯 ===== */
@media (min-width: 1180px) {
  :root { --hh: 0px; }
  body { padding-bottom: 0; }
  .hd { top: var(--db); bottom: 0; right: auto; width: var(--rail); height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 44px 30px 30px; border-bottom: 0; border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
  .lg { margin: 0 0 44px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .lg__m, .lg__m svg { width: 30px; height: 39px; } .lg__t b { font-size: 30px; } .lg__t small { font-size: 10.5px; margin-top: 8px; }
  .hd__nav { display: flex; flex-direction: column; }
  .hd__nav a { font-size: 15px; padding: 12px 0; border-bottom: 0; font-family: var(--jp); letter-spacing: .08em; position: relative; transition: color .25s, padding .3s var(--ease); }
  .hd__nav a small { font-size: 11px; line-height: 1.4; }
  .hd__nav a::before { content: ""; position: absolute; left: -30px; top: 50%; width: 0; height: 1px; background: var(--main); transition: width .3s var(--ease); }
  .hd__nav a:hover, .hd__nav a.is-cur { color: var(--main-d); padding-left: 10px; } .hd__nav a:hover::before, .hd__nav a.is-cur::before { width: 26px; }
  .hd__side { display: block; margin-top: auto; padding-top: 28px; }
  .hd__rsv { width: 100%; padding: 0 18px; }
  .hd__today { margin-top: 12px; text-align: center; font-size: 13px; color: var(--sub); } .hd__today b { font-family: var(--num); font-size: 22px; color: var(--main-d); font-weight: 400; margin: 0 2px; }
  .hd__info { margin-top: 18px; font-size: 12px; color: var(--sub); line-height: 1.8; }
  .hd__mrsv, .mb, .spb { display: none; }
  main, .cta, .ft { margin-left: var(--rail); }
  .tabs { top: var(--db); }
  html { scroll-padding-top: calc(var(--db) + 70px); }
  .hero { grid-template-columns: minmax(370px, .8fr) 1.5fr; min-height: calc(100vh - var(--db)); align-items: center; }
  .hero__img { order: 0; margin: 0; height: calc(100vh - var(--db) - 64px); min-height: 560px; aspect-ratio: auto; border-radius: 360px 0 0 0; align-self: start; }
  .hero__txt { padding: 40px 32px 40px 56px; }
  .hero__t { writing-mode: vertical-rl; font-size: 38px; line-height: 1.9; letter-spacing: .18em; margin: 26px 0 28px; }
  .hero__t span { display: block; white-space: nowrap; } .hero__t span:last-child { padding-top: 2.4em; }
  .hero__b { flex-direction: column; } .hero__b .btn { flex: none; }
  .hero__slot { position: absolute; margin: 0; left: auto; right: 40px; top: calc(max(560px, 100vh - var(--db) - 64px) - 36px); }
}
@media (min-width: 1440px) and (min-height: 960px) {
  .hero__t { font-size: 44px; }
}