/* =============================================================
   hair atelier 凪 -nagi-（大人女性向けヘアサロン）デモサイト
   配色は本案件専用：モノトーン＋ボルドー1色。ハウスカラー不使用。
   世界観：静けさ・余白・上品・モード。明朝見出し＋小さめ本文＋大胆な余白。
   モバイルファースト。
   ============================================================= */

:root{
  --paper:    #F4F2EF; /* やわらかな紙白・基調（ニュートラル寄り） */
  --surface:  #FFFFFF; /* 白面 */
  --ink:      #1A1A1A; /* 墨・見出し・本文（ほぼ黒・ニュートラル） */
  --ink-2:    #4A4744; /* サブグレー */
  --ink-3:    #908B84; /* キャプション・補足 */
  --line:     #DCD8D2; /* 細い罫線・1px線 */
  --accent:   #6E2A2E; /* 深いボルドー：差し色はこの1色だけ */

  --maxw:  1120px;
  --ease:  cubic-bezier(.22,.61,.36,1);

  --mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --latin:  'Cormorant Garamond', 'Times New Roman', serif;
  --sans:   'Zen Kaku Gothic New', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
/* ※ユーザー方針：prefers-reduced-motion でも演出を止めない。スムーススクロールも維持する。 */

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.95;
  font-weight:400;
  letter-spacing:.02em;
  overflow-x:clip;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{ font-size:16px; } }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--accent); color:#fff; }

/* 和文の自然な改行（BudouX未達時の保険） */
.jp{ word-break:keep-all; overflow-wrap:anywhere; line-break:strict; }

h1,h2,h3{ font-family:var(--mincho); font-weight:600; line-height:1.55; margin:0; letter-spacing:.04em; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px; }
@media (min-width:768px){ .container{ padding-inline:40px; } }

.section{ padding:96px 0; position:relative; }
@media (min-width:768px){ .section{ padding:150px 0; } }

/* セクション共通の小見出し（eyebrow）＋手描き短線 */
.eyebrow{
  font-family:var(--latin);
  font-size:14px; letter-spacing:.42em; text-transform:uppercase;
  color:var(--ink-2); margin:0 0 18px; font-weight:500;
  display:flex; align-items:center; gap:14px;
}
.eyebrow--center{ justify-content:center; }
.line-mini{ width:34px; height:1px; background:var(--accent); display:inline-block; position:relative; }
.line-mini::after{ content:""; position:absolute; right:0; top:-2px; width:5px; height:5px; border-top:1px solid var(--accent); border-right:1px solid var(--accent); transform:rotate(35deg); }

.section-head{ margin-bottom:54px; }
.section-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.section-title{
  font-size:clamp(27px, 6vw, 44px);
  color:var(--ink); letter-spacing:.06em;
}

/* 手描き風 1px ルール */
.rule{ display:block; height:1px; background:var(--line); border:0; }
.rule--draw{
  width:120px; height:8px; margin-top:34px; background:none;
  border-bottom:1px solid var(--accent);
  border-radius:0 0 60% 40%/0 0 100% 100%;
  transform:rotate(-.6deg);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:50px; padding:14px 32px; border-radius:2px;
  font-family:var(--mincho); font-weight:500; font-size:15px; letter-spacing:.08em;
  cursor:pointer; line-height:1.2; border:1px solid var(--ink);
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn--solid{ background:var(--accent); color:#fff; border-color:var(--accent); }
.btn--solid:hover{ background:#561F23; border-color:#561F23; transform:translateY(-2px); }
.btn--line{ background:transparent; color:var(--ink); }
.btn--line:hover{ background:var(--ink); color:var(--paper); transform:translateY(-2px); }

/* ヘッダーの予約：ボルドーの細枠 */
.btn-book{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:10px 22px; border-radius:2px;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--mincho); font-weight:500; font-size:14px; letter-spacing:.1em;
  transition:background .35s var(--ease), color .35s var(--ease);
}
.btn-book:hover{ background:var(--accent); color:#fff; }

/* =============================================================
   Header
   ============================================================= */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:18px 24px;
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
@media (min-width:768px){ .header{ padding:24px 40px; } }
.header.is-scrolled{
  background:rgba(244,242,239,.86);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--line);
  padding-top:14px; padding-bottom:14px;
}

.brand{ display:flex; flex-direction:column; line-height:1.1; color:var(--ink); }
.brand__lat{ font-family:var(--latin); font-size:13px; letter-spacing:.34em; text-transform:uppercase; color:var(--ink-2); }
.brand__jp{ font-family:var(--mincho); font-weight:600; font-size:19px; letter-spacing:.14em; }
.brand__jp em{ font-style:normal; font-family:var(--latin); font-size:.7em; letter-spacing:.08em; color:var(--accent); margin-left:.2em; }

.nav{ margin-left:auto; }
.nav__list{ list-style:none; display:flex; gap:30px; margin:0; padding:0; }
.nav__link{ position:relative; display:inline-block; padding:4px 0; }
.nav__lat{ font-family:var(--latin); font-size:15px; letter-spacing:.16em; color:var(--ink); }
.nav__link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.nav__link:hover::after{ transform:scaleX(1); }

/* ハンバーガー */
.nav-toggle{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; position:relative; }
.nav-toggle span{ position:absolute; left:9px; width:26px; height:1px; background:var(--ink); transition:transform .35s var(--ease), opacity .35s; }
.nav-toggle span:nth-child(1){ top:16px; }
.nav-toggle span:nth-child(2){ top:22px; }
.nav-toggle span:nth-child(3){ top:28px; }

@media (max-width:899px){
  .nav, .header .btn-book{ display:none; }
  .nav-toggle{ display:block; }
}

/* モバイルナビ（全画面オーバーレイ） */
.m-nav{
  position:fixed; inset:0; z-index:55;
  background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:96px 32px 40px;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
body.nav-open .m-nav{ opacity:1; visibility:visible; transform:none; }
body.nav-open{ overflow:hidden; }
body.nav-open .nav-toggle span:nth-child(1){ top:22px; transform:rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity:0; }
body.nav-open .nav-toggle span:nth-child(3){ top:22px; transform:rotate(-45deg); }
.m-nav__list{ list-style:none; margin:0 0 36px; padding:0; }
.m-nav__link{
  display:flex; align-items:baseline; gap:16px;
  padding:18px 0; border-bottom:1px solid var(--line);
}
.m-nav__link em{ font-family:var(--latin); font-style:normal; font-size:14px; color:var(--accent); letter-spacing:.1em; }
.m-nav__link span{ font-family:var(--latin); font-size:26px; letter-spacing:.1em; }
.m-nav__link small{ font-size:12px; color:var(--ink-3); margin-left:auto; letter-spacing:.1em; }
.m-nav__book{ align-self:flex-start; }
@media (min-width:900px){ .m-nav{ display:none; } }

/* =============================================================
   モノトーン プレースホルダ（写真ゼロでも“狙ったモノクロ”に見せる）
   実案件時に実写真（モノトーン推奨）へ差し替え。
   ============================================================= */
.ph{
  position:relative; overflow:hidden; background:#cfccc8;
  /* 粒状ノイズ＋斜光でフィルムのモノクロ感を出す */
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.5), rgba(0,0,0,.18) 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-blend-mode:multiply;
}
.ph::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, transparent 40%, rgba(26,26,26,.28));
}
/* 各面の濃淡を変え、単調さを避ける（すべてグレースケール） */
.ph--hero{ background-color:#9d9b98; }
.ph--g1{ background-color:#bdbab6; }
.ph--g2{ background-color:#8f8d8a; }
.ph--g3{ background-color:#c7c4c0; }
.ph--g4{ background-color:#a7a4a1; }
.ph--g5{ background-color:#b4b1ad; }
.ph--g6{ background-color:#9a9794; }
.ph--g7{ background-color:#c0bdb9; }
.ph--g8{ background-color:#a09d9a; }
.ph--st1{ background-color:#a9a6a3; }
.ph--st2{ background-color:#b7b4b0; }
.ph--exterior{ background-color:#9b9895; }

/* =============================================================
   Hero — キネティックタイポが主役
   ============================================================= */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-bottom:14vh; overflow:hidden;
}
.hero__media{ position:absolute; inset:0; z-index:0; background:#1a1a1a; overflow:hidden; }
/* モノクロ動画。グレーディングは書き出し時に焼き込み済み（CSS filterは保険程度）。 */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; will-change:transform;
  filter:grayscale(1) contrast(1.02);
}
/* 動画／poster とも不達時の墨面フォールバック（最背面） */
.hero__fallback{ position:absolute; inset:0; z-index:-1; }
.hero__fallback::after{ background:linear-gradient(160deg, transparent 30%, rgba(26,26,26,.5)); }
/* 可読性ベール：上は紙白の薄霧、下は墨。白文字をのせる前提。 */
.hero__veil{ position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(244,242,239,.30) 0%, rgba(26,26,26,.06) 26%, rgba(26,26,26,.42) 100%),
    radial-gradient(120% 80% at 30% 80%, rgba(26,26,26,.36), transparent 60%);
}

/* 縦書きの「凪」を大きく editorial に */
.hero__kanji{
  position:absolute; top:11vh; right:4vw; z-index:1;
  writing-mode:vertical-rl;
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(96px, 30vw, 300px); line-height:1;
  color:rgba(255,255,255,.82); letter-spacing:.02em;
  text-shadow:0 6px 40px rgba(0,0,0,.25);
  pointer-events:none;
}

.hero__inner{ position:relative; z-index:2; }
.hero__eyebrow{
  font-family:var(--latin); font-size:14px; letter-spacing:.32em;
  color:#fff; margin:0 0 22px; display:flex; align-items:center; gap:14px;
  text-transform:capitalize;
}
.hero__eyebrow .line-mini{ background:#fff; }
.hero__eyebrow .line-mini::after{ border-color:#fff; }
.hero__title{
  font-family:var(--mincho); font-weight:600; color:#fff;
  font-size:clamp(38px, 11vw, 96px); line-height:1.32; letter-spacing:.05em;
  margin:0; text-shadow:0 4px 30px rgba(0,0,0,.22);
}
.hero__sub{
  color:rgba(255,255,255,.94); font-size:clamp(14px,3.6vw,17px);
  max-width:30em; margin:26px 0 0; line-height:2;
  text-shadow:0 2px 16px rgba(0,0,0,.3);
}

/* スクロール誘導：手描き風の細い縦線＋文字 */
.hero__scroll{
  position:absolute; right:24px; bottom:22px; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color:#fff;
}
@media (min-width:768px){ .hero__scroll{ right:40px; } }
.hero__scroll svg{ width:18px; height:54px; overflow:visible; }
.hero__scroll-line{ fill:none; stroke:#fff; stroke-width:1; stroke-dasharray:60; stroke-dashoffset:0; animation:scrollDraw 2.6s var(--ease) infinite; }
.hero__scroll span{ font-family:var(--latin); font-size:11px; letter-spacing:.3em; text-transform:uppercase; writing-mode:vertical-rl; }
@keyframes scrollDraw{
  0%{ stroke-dashoffset:60; opacity:0; }
  30%{ opacity:1; }
  70%{ stroke-dashoffset:0; opacity:1; }
  100%{ stroke-dashoffset:-60; opacity:0; }
}

/* =============================================================
   Concept
   ============================================================= */
.concept{ background:var(--paper); }
.concept__grid{
  display:grid; gap:40px; position:relative;
  grid-template-columns:1fr;
}
@media (min-width:900px){
  .concept__grid{ grid-template-columns:0.42fr 1fr; gap:0 72px; align-items:start; }
}
.concept__aside{ position:relative; }
.concept__en{
  font-family:var(--latin); font-size:clamp(40px,9vw,76px);
  line-height:1.05; color:var(--ink); margin:18px 0 0; letter-spacing:.01em;
}
.concept__en em{ font-style:italic; color:var(--accent); }

.concept__title{
  font-size:clamp(24px,6.5vw,40px); color:var(--ink);
  line-height:1.6; letter-spacing:.05em; margin-bottom:30px;
}
.concept__lead{ color:var(--ink-2); }
.concept__lead p{ margin:0 0 1.4em; max-width:34em; }

/* 縦書きのあしらい（PCのみ右端に） */
.concept__vert{
  display:none;
}
@media (min-width:900px){
  .concept__vert{
    display:block; position:absolute; top:0; right:-8px;
    writing-mode:vertical-rl;
    font-family:var(--mincho); font-size:15px; letter-spacing:.45em;
    color:var(--ink-3); height:100%;
  }
  .concept__grid{ padding-right:48px; }
}

/* =============================================================
   Menu
   ============================================================= */
.menu{ background:var(--surface); }
.menu .section-head{ text-align:center; }
.menu__table{ max-width:680px; margin:0 auto; border-top:1px solid var(--line); }
.menu__row{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  margin:0; padding:22px 6px; border-bottom:1px solid var(--line);
}
.menu__row dt{ font-family:var(--mincho); font-size:clamp(16px,4vw,19px); letter-spacing:.04em; color:var(--ink); }
.menu__row dd{ margin:0; font-family:var(--latin); font-size:clamp(18px,4.4vw,22px); letter-spacing:.04em; color:var(--ink); white-space:nowrap; }
.menu__row dd span{ font-size:.7em; color:var(--ink-3); margin-left:.15em; }
.menu__note{ max-width:680px; margin:18px auto 0; font-size:13px; color:var(--ink-3); text-align:right; }
.menu__lead{ max-width:560px; margin:38px auto 0; text-align:center; color:var(--ink-2); line-height:2; }

/* =============================================================
   Style gallery（マソンリー）
   ============================================================= */
.style{ background:var(--paper); }
.style__ig{
  font-family:var(--latin); font-size:15px; letter-spacing:.06em; color:var(--accent);
  border-bottom:1px solid transparent; transition:border-color .35s var(--ease);
  white-space:nowrap;
}
.style__ig span{ margin-left:.4em; }
.style__ig:hover{ border-bottom-color:var(--accent); }

.style__filter{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 36px; }
.style__tab{
  font-family:var(--latin); font-size:14px; letter-spacing:.12em;
  padding:9px 18px; min-height:40px; cursor:pointer;
  background:none; border:1px solid var(--line); color:var(--ink-2); border-radius:2px;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.style__tab:hover{ border-color:var(--ink); color:var(--ink); }
.style__tab.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* マソンリー：CSS columns で段組み */
.gallery{ column-count:2; column-gap:16px; }
@media (min-width:700px){ .gallery{ column-count:3; column-gap:20px; } }
@media (min-width:1000px){ .gallery{ column-count:4; column-gap:22px; } }
.gcard{
  break-inside:avoid; margin:0 0 16px; position:relative;
}
@media (min-width:700px){ .gcard{ margin-bottom:20px; } }
.gcard .ph{ width:100%; }
/* 高さに変化を付けて雑誌的なリズムに */
.ph--g{ aspect-ratio:3/4; }
.ph--g1,.ph--g5,.ph--g8{ aspect-ratio:3/5; }
.ph--g3,.ph--g6{ aspect-ratio:4/5; }
.gcard figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:16px 14px 14px; color:#fff;
  font-family:var(--mincho); font-size:14px; letter-spacing:.06em;
  background:linear-gradient(transparent, rgba(26,26,26,.6));
  opacity:0; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.gcard:hover figcaption, .gcard:focus-within figcaption{ opacity:1; transform:none; }
.gcard__cat{
  display:block; font-family:var(--latin); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(255,255,255,.8); margin-bottom:3px;
}
/* フィルタで隠す */
.gcard.is-hidden{ display:none; }

/* =============================================================
   Staff
   ============================================================= */
.staff{ background:var(--surface); }
.staff .section-head{ text-align:center; }
.staff__grid{
  display:grid; gap:30px; max-width:780px; margin:0 auto;
  grid-template-columns:1fr;
}
@media (min-width:700px){ .staff__grid{ grid-template-columns:1fr 1fr; gap:44px; } }
.stcard .ph--st{ aspect-ratio:4/5; width:100%; }
.stcard figcaption{ padding:24px 4px 0; }
.stcard__role{ font-family:var(--latin); font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin:0 0 8px; }
.stcard__name{ font-size:22px; letter-spacing:.06em; margin:0 0 14px; }
.stcard__name span{ font-family:var(--sans); font-weight:400; font-size:13px; color:var(--ink-3); letter-spacing:.08em; margin-left:.4em; }
.stcard__txt{ color:var(--ink-2); font-size:14px; margin:0 0 16px; }
.stcard__quote{ font-family:var(--mincho); color:var(--ink); font-size:15px; letter-spacing:.04em; padding-left:14px; border-left:1px solid var(--accent); }

/* オーナー1名のみ：中央寄せ。広い画面では肖像＋テキストの横並びで均整を取る */
.staff__grid--solo{ max-width:560px; }
@media (min-width:700px){
  .staff__grid--solo{ grid-template-columns:1fr; }
  .staff__grid--solo .stcard{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:36px; align-items:center; }
  .staff__grid--solo .stcard figcaption{ padding-top:0; }
}

/* =============================================================
   Access
   ============================================================= */
.access{ background:var(--paper); }
.access__grid{ display:grid; gap:44px; grid-template-columns:1fr; }
@media (min-width:900px){ .access__grid{ grid-template-columns:1fr 1fr; gap:64px; align-items:start; } }
.access__title{ font-size:clamp(24px,6vw,36px); letter-spacing:.05em; margin:6px 0 28px; }
.info{ width:100%; border-collapse:collapse; }
.info th,.info td{ text-align:left; vertical-align:top; padding:15px 0; border-bottom:1px solid var(--line); font-weight:400; }
.info th{ width:6.5em; font-family:var(--mincho); color:var(--ink); font-size:14px; letter-spacing:.08em; }
.info td{ color:var(--ink-2); font-size:14px; }
.info td a{ color:var(--accent); border-bottom:1px solid var(--line); }
.access__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.access__actions .btn{ flex:1 1 200px; }

.access__media{ display:flex; flex-direction:column; gap:18px; }
.ph--exterior{ width:100%; aspect-ratio:4/3; }
.access__map{ position:relative; aspect-ratio:4/3; border:1px solid var(--line); overflow:hidden; filter:grayscale(1) contrast(1.02); }
.access__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =============================================================
   Reserve（ご予約・外部予約システム iframe 埋め込み枠）
   雑誌の1ページのように静かに。モノトーンの面＋1px罫線＋余白で構成。
   ============================================================= */
.reserve{ background:var(--surface); }
.reserve__lead{
  text-align:center; max-width:30em; margin:0 auto 40px;
  color:var(--ink-2); font-size:15px; line-height:2.1;
}
@media (min-width:768px){ .reserve__lead{ margin-bottom:52px; } }

/* フォーム枠：本文より少し締めた中央カラム。静かなモノトーンの面＋1px罫線＋余白。 */
.reserve__frame{
  width:100%; max-width:560px; margin-inline:auto;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:3px;                       /* 角丸は控えめ */
  box-shadow:0 1px 0 rgba(26,26,26,.025);  /* 影は最小限 */
  padding:34px 26px;
}
@media (min-width:768px){ .reserve__frame{ padding:48px 52px; } }

/* ---- モックフォーム（明朝ラベル＋アンダーライン入力） ---- */
.reserve__form{ display:flex; flex-direction:column; gap:26px; }
.field{ display:flex; flex-direction:column; gap:9px; }
.field__label{
  font-family:var(--mincho); font-weight:500; font-size:14px;
  letter-spacing:.06em; color:var(--ink);
  display:flex; align-items:center; gap:10px;
}
.field__req, .field__opt{
  font-family:var(--latin); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:2px 7px; border-radius:2px; line-height:1.4;
}
.field__req{ color:var(--accent); border:1px solid var(--accent); }
.field__opt{ color:var(--ink-3); border:1px solid var(--line); }

.field__input{
  width:100%; min-height:44px;
  font-family:var(--sans); font-size:15px; color:var(--ink);
  background:transparent;
  border:0; border-bottom:1px solid var(--line);
  border-radius:0; padding:8px 2px;
  transition:border-color .35s var(--ease);
}
.field__input::placeholder{ color:var(--ink-3); opacity:.8; }
.field__input:focus, .field__input:focus-visible{ outline:none; border-bottom-color:var(--accent); }
.field__select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:24px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23908B84' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center;
}
.field__textarea{
  min-height:88px; resize:vertical; line-height:1.9;
  border:1px solid var(--line); border-radius:2px; padding:12px;
}
.field__textarea:focus, .field__textarea:focus-visible{ border-color:var(--accent); }
.field__row{ display:flex; gap:14px; }
.field__row .field__input{ flex:1 1 0; min-width:0; }

.reserve__note{ margin:2px 0 0; font-size:12px; line-height:1.9; color:var(--ink-3); }
.reserve__submit{ align-self:center; margin-top:6px; min-width:240px; }

/* 完了メッセージ：フォームと差し替えてフェードイン */
.reserve__done{
  text-align:center; padding:30px 10px;
  opacity:0; transition:opacity .7s var(--ease);
}
.reserve__done.is-visible{ opacity:1; }
.reserve__done[hidden]{ display:none; }
.reserve__done-lat{
  font-family:var(--latin); font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 16px;
}
.reserve__done-title{ font-family:var(--mincho); font-weight:600; font-size:21px; letter-spacing:.06em; color:var(--ink); margin:0; line-height:1.7; }
.reserve__done-txt{ font-size:14px; color:var(--ink-2); margin:12px 0 0; }
.reserve__done-bar{ display:block; width:34px; height:1px; background:var(--accent); margin:22px auto 0; }

/* =============================================================
   クロージングCTA（Footer 直前・全幅 ink 面）
   ============================================================= */
.closing-cta{
  background:var(--ink); color:var(--paper);
  padding:88px 0; border-top:1px solid rgba(244,242,239,.10);
}
@media (min-width:768px){ .closing-cta{ padding:120px 0; } }
.closing-cta__inner{ text-align:center; }
.closing-cta__title{
  font-family:var(--mincho); font-weight:600; color:var(--paper);
  font-size:clamp(22px,5.2vw,34px); letter-spacing:.06em; line-height:1.75; margin:0;
}
.closing-cta__sub{ margin:18px 0 0; color:rgba(244,242,239,.74); font-size:14px; letter-spacing:.04em; }
/* 白抜きアウトライン → ホバーで白塗り・文字 ink に反転（.btn の寸法・最小高50pxを継承） */
.closing-cta__btn{ margin-top:34px; background:transparent; color:var(--paper); border:1px solid var(--paper); }
.closing-cta__btn:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px); }

/* =============================================================
   Footer
   ============================================================= */
.footer{ background:var(--ink); color:var(--paper); padding:80px 0 28px; }
.footer__inner{ display:grid; gap:40px; grid-template-columns:1fr; }
@media (min-width:768px){ .footer__inner{ grid-template-columns:1.4fr 1fr; align-items:start; } }
.brand--footer .brand__lat{ color:rgba(244,242,239,.6); }
.brand--footer .brand__jp{ color:var(--paper); }
.footer__tagline{ margin:22px 0 0; color:rgba(244,242,239,.78); font-size:14px; line-height:2; }
/* フッターのネット予約ボタン：ink 面の上で白抜きアウトライン→ホバーで白塗り・文字 ink に反転 */
.footer__book{ display:flex; width:fit-content; margin-top:26px; background:transparent; color:var(--paper); border:1px solid var(--paper); }
.footer__book:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); transform:translateY(-2px); }
.footer__ig{ display:inline-flex; align-items:center; gap:10px; margin-top:24px; color:rgba(244,242,239,.78); transition:color .3s; }
.footer__ig svg{ width:20px; height:20px; fill:currentColor; }
.footer__ig span{ font-family:var(--latin); font-size:14px; letter-spacing:.12em; }
.footer__ig:hover{ color:#fff; }
.footer__nav{ display:flex; flex-direction:column; gap:14px; }
.footer__nav a{ font-family:var(--latin); font-size:15px; letter-spacing:.14em; color:rgba(244,242,239,.78); width:fit-content; border-bottom:1px solid transparent; transition:border-color .3s, color .3s; }
.footer__nav a:hover{ color:#fff; border-bottom-color:var(--accent); }
.footer__copy{ margin:56px 0 0; padding-top:24px; border-top:1px solid rgba(244,242,239,.16); font-size:11px; letter-spacing:.06em; color:rgba(244,242,239,.5); text-align:center; }

/* =============================================================
   スマホ固定CTAバー
   ============================================================= */
.cta-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:none; grid-template-columns:1fr 1fr;
  background:var(--surface); border-top:1px solid var(--line);
  padding:8px; gap:8px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.cta-bar__btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; border-radius:2px;
  font-family:var(--mincho); font-size:14px; letter-spacing:.06em;
}
.cta-bar__btn svg{ width:18px; height:18px; }
.cta-bar__btn--tel{ border:1px solid var(--ink); color:var(--ink); }
.cta-bar__btn--book{ background:var(--accent); color:#fff; }
@media (max-width:899px){
  .cta-bar{ display:grid; }
  body{ padding-bottom:70px; }
}

/* =============================================================
   ページTOPへ戻るボタン
   ============================================================= */
.to-top{
  position:fixed; right:22px; bottom:26px; z-index:45;
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--ink); color:var(--paper);
  border:1px solid var(--ink); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s, background-color .3s, border-color .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--accent); border-color:var(--accent); }
.to-top svg{ width:20px; height:20px; }
/* スマホは固定CTAバーの上に重ねて配置 */
@media (max-width:899px){
  .to-top{ right:14px; bottom:calc(70px + env(safe-area-inset-bottom) + 12px); width:42px; height:42px; }
}

/* =============================================================
   モーション初期状態（has-motion）。main.js 完了で解除。
   prefers-reduced-motion 環境では一切隠さない。
   ============================================================= */
/* reduced-motion でもキネティックを動かす方針のため、プリハイドは常時適用。
   main.js が走らない場合は失敗時フェイルセーフ(2.6s)で必ず解除され内容が出る。 */
.has-motion [data-reveal],
.has-motion [data-hero],
.has-motion .gcard{ opacity:0; }
/* main.js が GSAP でインラインstyleを当てるため、これはプリハイドのみ。 */

/* ※ユーザー方針：prefers-reduced-motion でも演出を止めない（scroll誘導線も動かし続ける）。 */

/* line リビール用のマスク（main.js が挿入）。行・文字ともクリップで“静かに立ち上げる”。 */
.line-mask{ display:block; overflow:hidden; }
/* 文字単位のクリップマスク（main.js が各 .char を包む）。
   overflow:hidden の枠から yPercent で下からせり上がる＝マスク/クリップ立ち上げ。 */
.char-mask{ display:inline-block; overflow:hidden; vertical-align:top; }

/* キネティック分割文字（SplitType が付与する .char）。せり上がりが滲まないよう個別レイヤー化 */
.hero__title .char,
.section-title .char{ display:inline-block; will-change:transform; backface-visibility:hidden; }
.section-title{ will-change:letter-spacing; }
/* 見出しは文字単位で出すため、JSが走るまで親ごと伏せる（reduced-motion でも適用） */
.has-motion .hero__title,
.has-motion .section-title{ opacity:0; }

/* ④ 区切りの 1px 線は“スッと引かれる”。JS が走るまで畳んでおき、reveal時に scaleX(0→1)。 */
.has-motion .line-mini,
.has-motion .rule--draw{ transform:scaleX(0); transform-origin:left center; }

/* ② ページめくりワイプ：セクション切替を白〜墨の上品なクリップで。
   main.js が各セクションに1枚だけ挿入。スクロール連動でゆっくり退く。
   JS不在時はそもそも挿入されないので内容を妨げない。 */
.page-wipe{
  position:absolute; inset:0; z-index:4; pointer-events:none;
  will-change:transform; /* yPercent はJSが制御。背景色＝そのセクション色（色面でにぎやかにしない） */
}
/* 退いていく面の先端に、ごく細い“紙の縁”を1本。これがゆっくり降りて紙面が差し替わって見える。 */
.page-wipe::after{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:rgba(26,26,26,.14);
  box-shadow:0 16px 28px -12px rgba(26,26,26,.12);
}
.section{ overflow:hidden; } /* ワイプ面がセクション外へはみ出さないように */

/* スマホ：SplitTypeの1文字spanは任意位置で折返すため、改行が崩れて「時間」等が割れる。
   折返しを禁止し、<br>で意図した2行のみに固定。フォントを少し詰めて画面内に収める。 */
@media (max-width:600px){
  .hero__title{ white-space:nowrap; font-size:clamp(30px, 8.6vw, 44px); letter-spacing:.02em; }
}

/* =================================================================
   QUALITY UPLIFT — refined luxury minimal
   既存トークン（モノトーン＋ボルドー1色）のみ。すべて加算実装で、
   既存の data-属性演出・Lenis 配線・予約フォームには干渉しない。
   ================================================================= */

/* ---------- ① シネマティック導入（プリローダー → 上下カーテン） ---------- */
.loader{ position:fixed; inset:0; z-index:200; pointer-events:none; }
.loader__curtain{
  position:absolute; left:0; right:0; height:50%; background:var(--ink);
  transition:transform 1.05s var(--ease); will-change:transform;
}
.loader__curtain--t{ top:0; }
.loader__curtain--b{ bottom:0; }
.loader__inner{
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .55s var(--ease);
}
.loader__mark{ width:48px; height:48px; overflow:visible; }
.loader__mark-line{
  fill:none; stroke:var(--paper); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:60; stroke-dashoffset:60; animation:loaderDraw 1.1s var(--ease) .15s forwards;
}
.loader__mark-wave{
  fill:none; stroke:var(--accent); stroke-width:1.6; stroke-linecap:round;
  stroke-dasharray:16; stroke-dashoffset:16; animation:loaderDraw 1s var(--ease) .6s forwards;
}
.loader__label{
  font-family:var(--latin); font-size:13px; letter-spacing:.5em; text-transform:uppercase;
  color:rgba(244,242,239,.7); padding-left:.5em; opacity:0;
  animation:loaderFade .9s var(--ease) .55s forwards;
}
@keyframes loaderDraw{ to{ stroke-dashoffset:0; } }
@keyframes loaderFade{ to{ opacity:1; } }
.loader.is-done .loader__inner{ opacity:0; }
.loader.is-done .loader__curtain--t{ transform:translateY(-101%); }
.loader.is-done .loader__curtain--b{ transform:translateY(101%); }
.loader.is-gone{ display:none; }

/* ナビ遷移カーテン：既定は画面外（開）→ is-cover で上下から覆う→外して開く */
.page-trans{ position:fixed; inset:0; z-index:150; pointer-events:none; }
.page-trans__c{
  position:absolute; left:0; right:0; height:50%; background:var(--ink);
  transition:transform .52s var(--ease); will-change:transform;
}
.page-trans__c--t{ top:0; transform:translateY(-101%); }
.page-trans__c--b{ bottom:0; transform:translateY(101%); }
.page-trans.is-cover{ pointer-events:auto; }            /* 覆っている間はクリック遮断 */
.page-trans.is-cover .page-trans__c{ transform:translateY(0); }
/* 退場・登場の先端に細いワイン線を一筋（編集的なアクセント） */
.page-trans__c--t::after, .page-trans__c--b::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:var(--accent); opacity:.7;
}
.page-trans__c--t::after{ bottom:0; }
.page-trans__c--b::after{ top:0; }

/* ---------- ② フィルムグレイン（全面・極薄） ---------- */
.grain{
  position:fixed; inset:0; z-index:100; pointer-events:none; opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
/* スマホでは position:fixed × mix-blend の全面再描画がスクロールの揺れ・カクつきの
   原因になるため、グレインを無効化（質感は犠牲にしても滑らかさを優先）。 */
@media (max-width:899px){ .grain{ display:none; } }

/* ---------- ④ スクロール進捗＋セクション番号（PCのみ） ---------- */
.scroll-rail{
  position:fixed; top:50%; right:22px; transform:translateY(-50%); z-index:70;
  display:none; flex-direction:column; align-items:center; gap:14px;
  mix-blend-mode:difference; color:#fff;
}
@media (min-width:1000px){ .scroll-rail{ display:flex; } }
.scroll-rail__idx, .scroll-rail__total{ font-family:var(--latin); font-size:12px; letter-spacing:.16em; }
.scroll-rail__total{ opacity:.5; }
.scroll-rail__track{ position:relative; width:1px; height:120px; background:rgba(255,255,255,.45); overflow:hidden; }
.scroll-rail__bar{ position:absolute; top:0; left:0; width:100%; height:0%; background:#fff; }

/* ---------- ⑤ 流れる帯（マーキー） ---------- */
.marquee{
  background:var(--ink); color:var(--paper); overflow:hidden; padding:17px 0;
  border-top:1px solid rgba(244,242,239,.10); border-bottom:1px solid rgba(244,242,239,.10);
  contain:paint;   /* 合成レイヤー化した子(トラック)が overflow:hidden を突き抜けないよう確実にクリップ */
}
/* will-change/backface は付けない（WebKitで合成レイヤーが親のクリップを突き抜け横はみ出しの原因になる） */
.marquee__track{ display:flex; align-items:center; width:max-content; animation:marquee 34s linear infinite; }
.marquee--rev .marquee__track{ animation-direction:reverse; }
.marquee__track span{
  font-family:var(--mincho); font-size:clamp(15px,2.4vw,20px); letter-spacing:.12em;
  white-space:nowrap; color:rgba(244,242,239,.9);
}
.marquee__dot{ width:5px; height:5px; border-radius:50%; background:var(--accent); margin:0 28px; flex:none; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
.marquee:hover .marquee__track{ animation-play-state:paused; }
/* スマホでは横に流れる帯が「横揺れ・端での字切れ」に見えるため非表示（PCのみ残す）。 */
@media (max-width:899px){ .marquee{ display:none; } }

/* ---------- ⑥ セクションのゴースト数字（背面の editorial index） ---------- */
.section .container{ position:relative; z-index:1; }   /* 数字より前面に内容を置く */
.sec-num{
  position:absolute; z-index:0; top:clamp(20px,5vw,52px);
  left:max(14px, calc((100% - var(--maxw)) / 2 - 6px));
  font-family:var(--latin); font-weight:500; font-style:italic;
  font-size:clamp(86px,16vw,200px); line-height:.8; letter-spacing:-.02em;
  color:var(--ink); opacity:.045; pointer-events:none;
}

/* ---------- ⑦ Hero：細罫インセット枠＋所在地メタ ---------- */
.hero__frame{
  position:absolute; z-index:2; inset:clamp(14px,2.2vw,26px);
  border:1px solid rgba(244,242,239,.42); pointer-events:none;
}
.hero__meta{ display:none; }
@media (min-width:768px){
  .hero__meta{
    position:absolute; left:40px; bottom:30px; z-index:3; margin:0;
    display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.9);
    text-shadow:0 2px 14px rgba(0,0,0,.3);
  }
}
.hero__meta-lat{ font-family:var(--latin); font-size:12px; letter-spacing:.28em; text-transform:uppercase; }
.hero__meta-sep{ width:26px; height:1px; background:rgba(255,255,255,.55); }
.hero__meta-jp{ font-family:var(--mincho); font-size:12px; letter-spacing:.14em; }

/* ---------- ⑧ 触覚的な micro-interaction ---------- */
/* ギャラリー：枠内でゆっくりズーム */
.gcard{ overflow:hidden; }
.gcard .ph{ transition:transform .9s var(--ease); }
.gcard:hover .ph, .gcard:focus-within .ph{ transform:scale(1.055); }
/* メニュー行：ホバーで極わずかにワイン地＋右へにじり */
.menu__row{ transition:background-color .4s var(--ease), padding-left .4s var(--ease); }
.menu__row:hover{ background:rgba(110,42,46,.035); padding-left:14px; }
/* 店舗情報の行：ホバーで罫が締まる */
.info tr{ transition:background-color .4s var(--ease); }
.info tr:hover{ background:rgba(110,42,46,.025); }