/*
  凪 -NAGI- 整体院（デモ・整体リラクゼーション）
  1ページ構成だが、サロン(カードグリッド)・パン屋(丸型パララックスLP)とは異なるレイアウト言語：
  実写風フルブリード画像ブロック＋細罫線リスト＋本格的な料金テーブル＋丸型フローティング予約ボタン。
  配色＝オリーブグリーン×クリーム×濃茶（写真パネル）
*/
:root{
  --cream:#f7f4ea;
  --sand:#efe9d8;
  --olive:#6f6b45;
  --olive-d:#57543690;
  --olive-deep:#4c4930;
  --brass:#a68a5a;
  --ink:#3c3a2e;
  --charcoal:#2c2a22;
  --photo-dark:#3a382f;
  --gray:#8b8770;
  --line:rgba(255,255,255,.28);
  --line-soft:#ded7bd;
  --maxw:1180px;
  --display:Georgia,"Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --sans:"Hiragino Sans","Yu Gothic",-apple-system,"Noto Sans JP",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:var(--cream);font-family:var(--sans);
  line-height:1.9;font-size:16px;letter-spacing:normal;-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px}
.en{font-family:var(--display);letter-spacing:.1em}

/* ヘッダー：固定しない・素通しの簡易バー（他2デモと違いスクロールで流れていく） */
header.site{padding:26px 0}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--charcoal);line-height:1.1}
.brand b{font-family:var(--display);font-size:22px;letter-spacing:.04em;font-weight:600}
.brand small{font-size:10px;color:var(--gray);letter-spacing:.32em;margin-top:4px;font-family:var(--sans)}
.nav-book{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--charcoal);
  text-decoration:none;padding:11px 26px;border-radius:999px;font-size:12.5px;letter-spacing:.04em;
  border:1px solid var(--charcoal)}
.nav-book:hover{background:var(--charcoal);color:var(--cream)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);
  font-weight:600;font-size:13.5px;letter-spacing:.03em;padding:15px 30px;border-radius:2px;
  text-decoration:none;min-height:50px;border:1px solid transparent;
  transition:transform .12s ease,background .2s ease,box-shadow .2s ease,color .2s ease}
.btn-primary{background:var(--olive);color:#fff}
.btn-primary:hover{background:var(--olive-deep)}
.btn-outline{background:transparent;color:var(--charcoal);border-color:var(--charcoal)}
.btn-outline:hover{background:var(--charcoal);color:#fff}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn-outline-light:hover{background:#fff;color:var(--olive-deep)}

/* スクロール演出 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.in-view{opacity:1;transform:none}
.reveal-1{transition-delay:.08s}
.reveal-2{transition-delay:.18s}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none}}

section{padding:0}
.pad{padding:96px 0}
h1,h2{font-family:var(--display);font-weight:500;color:var(--charcoal);margin:0;letter-spacing:.03em}
h2{font-size:clamp(28px,4.4vw,44px)}
.eyebrow{font-size:11px;letter-spacing:.34em;color:var(--brass);text-transform:uppercase;display:block;margin-bottom:16px}
.lead{margin:18px 0 0;color:var(--ink);font-size:14.5px;max-width:30em}

/* 1) ヒーロー：フル画像＋下にキャプション行 */
.hero-img{aspect-ratio:16/9;background:linear-gradient(150deg,#8b8560,#5f5c3f) center/cover no-repeat;position:relative;overflow:hidden}
.hero-img .cap{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding:0 24px 40px;text-align:center}
.hero-img h1{color:#fff;font-size:clamp(30px,5.6vw,56px);line-height:1.4;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero-caption{display:flex;justify-content:space-between;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--line-soft);font-size:11.5px;letter-spacing:.14em;color:var(--gray)}
.hero-caption em{font-style:italic;font-family:var(--display);letter-spacing:.02em;color:var(--ink)}

/* 2) こだわり：ダーク画像＋テキスト2カラム */
.split-dark{background:var(--olive);color:#f1efe2}
.split-dark .grid2{display:grid;gap:0}
@media(min-width:900px){.split-dark .grid2{grid-template-columns:1fr 1fr;align-items:center}}
.split-dark .copy{padding:80px 40px}
.split-dark .copy .inner{max-width:420px}
.split-dark h2{color:#fff}
.split-dark p{font-size:14.5px;color:#e6e2cf}
.split-dark .photo{aspect-ratio:4/5;background:linear-gradient(155deg,var(--photo-dark),#232219) center/cover no-repeat}

/* 3) こだわりの理由：細罫線リスト＋サイド写真 */
.hallmarks{background:var(--cream)}
.hallmarks .grid2{display:grid;gap:48px}
@media(min-width:900px){.hallmarks .grid2{grid-template-columns:1.1fr .9fr}}
.rule-list{border-top:1px solid var(--line-soft)}
.rule-list .item{border-bottom:1px solid var(--line-soft);padding:26px 0}
.rule-list .item b{display:block;font-family:var(--display);font-size:16px;color:var(--charcoal);margin-bottom:6px}
.rule-list .item span{font-size:13px;color:var(--gray)}
.hallmark-photo{aspect-ratio:3/4;background:linear-gradient(160deg,var(--olive),#4c4930) center/cover no-repeat}

/* 4) 施術メニュー紹介：交互の帯（カードではなく横帯） */
.treatments{background:var(--sand)}
.treat-row{display:grid;border-top:1px solid var(--line-soft)}
.treat-row:last-child{border-bottom:1px solid var(--line-soft)}
@media(min-width:820px){.treat-row{grid-template-columns:280px 1fr}}
.treat-row .t-photo{aspect-ratio:4/3;background:linear-gradient(160deg,#c8bf98,#8b8560) center/cover no-repeat}
.treat-row:nth-child(2n) .t-photo{background:linear-gradient(160deg,#b7c0a8,#6f7d5c) center/cover no-repeat}
.treat-row:nth-child(3n) .t-photo{background:linear-gradient(160deg,#cfc2ab,#a68a5a) center/cover no-repeat}
.treat-row .t-copy{display:flex;align-items:center;padding:30px 8px}
.treat-row .t-copy .inner{display:grid;gap:10px;width:100%}
@media(min-width:620px){.treat-row .t-copy .inner{grid-template-columns:1fr 1.4fr;align-items:center}}
.treat-row h3{font-family:var(--display);font-size:18px;color:var(--charcoal);margin:0;letter-spacing:.02em}
.treat-row p{margin:0;font-size:13.5px;color:var(--ink)}

/* 5) 料金テーブル（本物の表・カードではない） */
.pricing{background:var(--olive-deep);color:#f1efe2}
.pricing h2{color:#fff}
.price-cat{font-size:11.5px;letter-spacing:.24em;color:var(--brass);margin:56px 0 6px;text-transform:uppercase}
.price-cat:first-of-type{margin-top:36px}
.price-head{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.35);
  font-size:11px;letter-spacing:.16em;color:#cfcab3}
.price-row{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,.16)}
.price-row .name{font-family:var(--display);font-size:16.5px;color:#fff}
.price-row .desc{font-size:12.5px;color:#cfcab3;margin-top:4px}
.price-row .meta{display:flex;gap:26px;flex-shrink:0;font-size:13.5px;color:#e6e2cf;min-width:160px;justify-content:flex-end}
.price-row .meta .p{font-family:var(--display);color:var(--brass);min-width:64px;text-align:right}

/* 6) お客様の声：暗い写真背景に細枠カード */
.voices-dark{position:relative;background:linear-gradient(160deg,var(--photo-dark),#242219);padding:96px 0;color:#fff}
.voice-grid{display:grid;gap:20px}
@media(min-width:820px){.voice-grid{grid-template-columns:repeat(3,1fr)}}
.vquote{border:1px solid rgba(255,255,255,.28);padding:34px 26px;text-align:center}
.vquote p{font-family:var(--display);font-size:15px;line-height:1.9;margin:0 0 18px;color:#f1efe2}
.vquote .who{font-size:11.5px;letter-spacing:.03em;color:#c8c2a6}

/* 7) ギャラリー写真ストリップ */
.strip{background:var(--cream)}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;padding:80px 0 26px}
.strip-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px}
@media(min-width:760px){.strip-grid{grid-template-columns:repeat(4,1fr)}}
.strip-item{aspect-ratio:3/4;background:linear-gradient(160deg,#c8bf98,#8b8560) center/cover no-repeat}
.strip-item:nth-child(2){background:linear-gradient(160deg,#b7c0a8,#6f7d5c)}
.strip-item:nth-child(3){background:linear-gradient(160deg,var(--photo-dark),#232219)}
.strip-item:nth-child(4){background:linear-gradient(160deg,#cfc2ab,#a68a5a)}

/* 8) ご予約フォーム */
.book{background:var(--cream)}
.book .grid2{display:grid;gap:0}
@media(min-width:900px){.book .grid2{grid-template-columns:1fr 1fr;align-items:stretch}}
.book-form{padding:80px 40px}
.book-form .inner{max-width:440px}
.book-form label{display:block;font-size:12px;color:var(--gray);letter-spacing:.03em;margin:20px 0 8px}
.book-form label:first-of-type{margin-top:0}
.book-form input,.book-form textarea{width:100%;padding:14px 16px;border:1px solid var(--line-soft);
  border-radius:2px;background:#fff;color:var(--ink);font-family:var(--sans);font-size:14px}
.check-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line-soft);
  border-radius:2px;background:#fff;margin-bottom:10px;font-size:13.5px}
.check-row input{width:16px;height:16px;flex-shrink:0}
.slot-row{display:block;padding:14px 16px;border:1px solid var(--line-soft);border-radius:2px;background:#fff;
  margin-bottom:10px;font-size:13.5px;cursor:pointer}
.slot-row.active{border-color:var(--olive);background:var(--sand)}
.book-form .submit{width:100%;margin-top:20px;background:var(--olive-deep);color:#fff;border:none}
.book-form .note{font-size:11px;color:var(--gray);text-align:center;margin-top:12px}
.book-photo{aspect-ratio:3/4;background:linear-gradient(160deg,#c8bf98,#6f6b45) center/cover no-repeat}
@media(max-width:899px){.book-photo{aspect-ratio:16/9}}

/* フッター */
footer.site{background:#e9e2cb;color:var(--ink);padding:64px 0 120px}
.foot-grid{display:grid;gap:24px}
@media(min-width:760px){.foot-grid{grid-template-columns:1fr 1fr;align-items:start}}
.foot-grid .row{margin-bottom:6px;font-size:13.5px}
footer .fname{font-family:var(--display);font-size:15vw;line-height:.9;color:var(--olive);
  letter-spacing:.02em;margin-top:56px;opacity:.9;white-space:nowrap;overflow:hidden}
@media(min-width:760px){footer .fname{font-size:64px}}
.sample-note{background:#fff;border:1px dashed var(--brass);color:#5a4a2c;font-size:12.5px;
  border-radius:6px;padding:10px 14px;margin:0 auto;max-width:var(--maxw);text-align:center}
.sample-note-wrap{padding:18px 32px 0}

/* 丸型フローティング予約ボタン（他2デモの帯/ピルとは異なる） */
.fab-round{position:fixed;right:18px;bottom:18px;z-index:50;width:78px;height:78px;border-radius:50%;
  background:var(--olive-deep);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-decoration:none;font-size:11px;letter-spacing:.03em;box-shadow:0 10px 26px rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.25);gap:2px}
.fab-round:hover{background:var(--olive)}
.fab-round .ico{font-size:16px}

a:focus-visible,button:focus-visible{outline:3px solid var(--brass);outline-offset:2px}