/* =========================================================
   1. 色・文字の設定（ここを変えると全体の雰囲気が変わります）
   ========================================================= */
:root{
  --bg:#fffaf8;      /* 背景（白に近いアイボリー） */
  --bg2:#fdeeea;     /* 背景2（ベージュ） */
  --text:#4a3b3b;    /* 文字色 */
  --sub:#85706f;     /* 補助文字 */
  --accent:#b4636a;  /* アクセント（ボタンなど） */
  --on-accent:#ffffff;
  --line:#f0d9d4;    /* 罫線 */
  --serif:"Hiragino Maru Gothic ProN","Yu Gothic","Hiragino Sans",Meiryo,sans-serif;
  --sans:"Hiragino Maru Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,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:not([data-theme="light"]){--bg:#211a1b;--bg2:#2c2223;--text:#f6e9e8;--sub:#bfa9a8;--accent:#e49aa0;--on-accent:#2a1c1d;--line:#47363a;color-scheme:dark}
}
:root[data-theme="dark"]{--bg:#211a1b;--bg2:#2c2223;--text:#f6e9e8;--sub:#bfa9a8;--accent:#e49aa0;--on-accent:#2a1c1d;--line:#47363a;color-scheme:dark}

/* =========================================================
   2. 全体の基本スタイル
   ========================================================= */
html{scroll-behavior:smooth;scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.9;padding-bottom:76px;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.5;margin:0}
p{margin:0 0 1em}
a{color:inherit}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.alt{background:var(--bg2)}
h2{font-size:1.5rem;letter-spacing:.12em;margin-bottom:32px}
.lead{color:var(--sub)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* サロン写真（明るさは brightness の数字で調整。1が元の明るさ、小さいほど暗くなります） */
.photo{margin:36px 0 0;aspect-ratio:3/2;background:var(--bg2);overflow:hidden}
.photo img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.92) saturate(.92)}

/* ボタン */
.btn{display:inline-block;padding:14px 36px;background:var(--accent);color:var(--on-accent);text-decoration:none;font-family:var(--serif);letter-spacing:.14em;border:1px solid var(--accent);min-width:200px;text-align:center}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--text)}

/* =========================================================
   3. ヘッダー
   ========================================================= */
.notice{background:var(--bg2);color:var(--sub);font-size:.75rem;text-align:center;padding:6px 12px;line-height:1.5}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
.bar{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:var(--serif);font-size:1.25rem;letter-spacing:.2em;text-decoration:none}
.menu-btn{background:none;border:0;color:var(--text);font:inherit;font-size:.85rem;letter-spacing:.1em;padding:12px 4px;cursor:pointer}
nav{display:none;border-top:1px solid var(--line);background:var(--bg)}
nav.open{display:block}
nav a{display:block;padding:14px 24px;text-decoration:none;border-bottom:1px solid var(--line);letter-spacing:.1em}
@media (min-width:768px){
  .menu-btn{display:none}
  nav,nav.open{display:flex;position:static;border:0;gap:28px}
  nav a{border:0;padding:0;font-size:.9rem}
  .bar{max-width:960px;margin:0 auto;padding:0 24px}
}

/* =========================================================
   4. トップ（写真なしでも成立する縦書きキャッチ）
   ========================================================= */
.hero{padding:80px 0 72px;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%)}
.hero .wrap{display:flex;justify-content:center;align-items:flex-start;gap:36px}
.catch{writing-mode:vertical-rl;font-family:var(--serif);font-size:clamp(2rem,9vw,3rem);letter-spacing:.35em;line-height:1.4;margin:0;font-weight:500}
.hero-side{writing-mode:vertical-rl;color:var(--sub);font-size:.9rem;letter-spacing:.25em;line-height:2;padding-top:3.5em}
.hero-cta{text-align:center;margin-top:56px}
.hero-cta .btn{display:block;max-width:280px;margin:0 auto 14px}

/* =========================================================
   5. サービス・料金・営業時間・アクセス
   ========================================================= */
.service{padding:22px 0;border-top:1px solid var(--line)}
.service:last-child{border-bottom:1px solid var(--line)}
.service h3{font-size:1.1rem;letter-spacing:.1em;margin-bottom:6px}
.service p{margin:0;color:var(--sub);font-size:.95rem}

table{width:100%;border-collapse:collapse}
th,td{padding:14px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.price td:last-child,.price th:last-child{text-align:right;white-space:nowrap;font-family:var(--serif)}
.price small,.hours small{color:var(--sub);display:block;line-height:1.5}
.hours th{width:7em;font-family:var(--serif)}
.note{font-size:.8rem;color:var(--sub);margin-top:16px}

.map{margin:24px 0 0;padding:40px 16px;background:var(--bg2);border:1px dashed var(--line);text-align:center;color:var(--sub);font-size:.85rem}
.alt .map{background:var(--bg)}

.reserve{text-align:center}
.reserve .btn{margin:8px 0 24px}

footer{background:var(--bg2);padding:40px 0;text-align:center;font-size:.8rem;color:var(--sub)}
footer a{margin:0 8px}

/* スマホ下部の固定ボタン */
.fixed{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;background:var(--bg);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
.fixed a{flex:1;text-align:center;padding:16px 8px;text-decoration:none;font-family:var(--serif);letter-spacing:.1em;font-size:.95rem}
.fixed .main{background:var(--accent);color:var(--on-accent);flex:1.6}
@media (min-width:768px){.fixed{display:none}body{padding-bottom:0}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* ===== デザイン案C：やさしいカラー（ピンク・グリーン／丸ゴシック／中央寄せ・角丸） ===== */
h1,h2,h3{font-weight:700}
h2{letter-spacing:.1em;text-align:center}
h2::after{content:"";display:block;width:36px;height:4px;border-radius:2px;background:var(--accent);margin:12px auto 0}
.hero{background:radial-gradient(circle at 88% 0%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 55%),var(--bg)}
.hero .wrap{flex-direction:column;align-items:center;gap:20px}
.catch{writing-mode:horizontal-tb;text-align:center;letter-spacing:.12em;font-weight:700}
.hero-side{writing-mode:horizontal-tb;order:2;padding-top:0;letter-spacing:.12em;text-align:center}
.btn{border-radius:999px;letter-spacing:.12em}
.service{border:1px solid var(--line);border-radius:16px;padding:20px;margin-bottom:12px;background:var(--bg)}
.service:last-child{border-bottom:1px solid var(--line)}
#hours{background:color-mix(in srgb,var(--bg2) 78%,#9ccb9a)}
.photo{border-radius:24px}
.map{border-radius:16px}
.fixed .main{border-radius:0}
.logo{letter-spacing:.12em}