@charset "UTF-8";
/* 理容室 燕（BARBER TSUBAME）
   お手本: BARBER GALAHAD の構成 / DAN BRISE のジャンプ率 / BARBER cotch の二層料金
   色は生成りの白を地にして、濃色は「顔そり」とフッターだけに使う。 */

/* ---------------- トークン ---------------- */
:root{
  /* 背景は4色まで */
  --paper:#FAF8F5;
  --white:#FFFFFF;
  --sand:#F0EAE0;
  --ink:#1B1E24;

  --text:#1B1E24;
  --text-2:#585C66;
  --muted:#7A7266;
  --brass:#A8814B;
  --brass-d:#8C6A38;
  --red:#B3352E;
  --line:#DFD8CC;
  --line-d:#3A3E47;

  /* 6段の文字サイズ（本文16px・最大104px＝ジャンプ率6.5倍） */
  --fs-1:clamp(2.75rem, 9vw, 6.5rem);
  --fs-2:clamp(1.625rem, 3.6vw, 2.5rem);
  --fs-3:clamp(1.25rem, 2.2vw, 1.625rem);
  --fs-4:1.125rem;
  --fs-5:1rem;
  --fs-6:.8125rem;

  /* 余白（4px系・緩急をつける） */
  --sp-1:160px; --sp-2:120px; --sp-3:96px; --sp-4:72px; --sp-5:56px; --sp-6:40px;

  --wrap:1120px;
  --r-s:2px;      /* 写真・カードの角 */
  --r-p:999px;    /* ボタン・バッジ */
  --ease:cubic-bezier(.16,1,.3,1);
}
@media (max-width:900px){
  :root{ --sp-1:104px; --sp-2:88px; --sp-3:72px; --sp-4:56px; --sp-5:40px; --sp-6:32px; }
}

/* ---------------- 土台 ---------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:84px; }
body{
  margin:0; background:var(--paper); color:var(--text);
  font-family:"Noto Sans JP",system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  font-size:var(--fs-5); font-weight:400; line-height:1.9;
  letter-spacing:.02em; text-wrap:pretty;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
img{ background:var(--sand); }
a{ color:inherit; }
h1,h2,h3{ margin:0; line-height:1.35; font-weight:700; letter-spacing:.01em; }
p{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
figure{ margin:0; }
dl,dd,dt{ margin:0; }

.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; z-index:200; background:var(--ink); color:#fff; padding:12px 16px; }
.pc{ display:none; }
@media (min-width:768px){ .pc{ display:inline; } }

.en{ font-family:"Oswald",sans-serif; font-weight:500; letter-spacing:.14em; }

/* 見出しの共通形 */
.sec-en{
  font-family:"Oswald",sans-serif; font-weight:500; font-size:var(--fs-6);
  letter-spacing:.26em; color:var(--brass); margin:0 0 16px;
}
.sec-ttl{ font-size:var(--fs-2); line-height:1.45; margin:0 0 24px; }
.lnk{
  display:inline-block; font-size:var(--fs-6); font-weight:500; letter-spacing:.14em;
  padding-bottom:2px; color:var(--text);
}
.lnk::after{ content:"→"; margin-left:10px; }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; padding:0 32px; border-radius:var(--r-p);
  background:var(--ink); color:#fff; font-size:var(--fs-5); font-weight:500;
  text-decoration:none; border:1px solid var(--ink); text-align:center;
}
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--text); }
.btn--sm{ min-height:44px; padding:0 22px; font-size:var(--fs-6); letter-spacing:.1em; white-space:nowrap; }
.hd__cta{ white-space:nowrap; }
@media (max-width:400px){ .hd__in{ gap:12px; } .hd__cta{ padding:0 16px; letter-spacing:.04em; } }
.btn--full{ display:flex; width:100%; }
@media (hover:hover){
  .btn:hover{ background:var(--brass-d); border-color:var(--brass-d); color:#fff; }
  .btn--ghost:hover{ background:var(--text); color:#fff; }
}

/* ---------------- ヘッダー ---------------- */
.hd{ background:transparent; padding-block:16px; }
.hd.is-scrolled{ background:rgba(250,248,245,.95); box-shadow:0 1px 0 var(--line); }
.hd__in{
  max-width:1280px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:24px;
}
.hd__logo{ text-decoration:none; display:grid; line-height:1.2; margin-right:auto; }
.hd__logo-en{ font-family:"Oswald",sans-serif; font-weight:700; font-size:1.0625rem; letter-spacing:.2em; color:#fff; }
.hd__logo-ja{ font-size:var(--fs-6); letter-spacing:.3em; color:rgba(255,255,255,.82); }
.hd.is-scrolled .hd__logo-en{ color:var(--text); }
.hd.is-scrolled .hd__logo-ja{ color:var(--muted); }
.hd__nav{ display:none; gap:28px; font-size:var(--fs-6); letter-spacing:.1em; }
.hd__nav a{ text-decoration:none; color:#fff; }
.hd.is-scrolled .hd__nav a{ color:var(--text); }
.hd__tel{ display:none; text-decoration:none; text-align:right; line-height:1.3; }
.hd__tel-label{ display:block; font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.7); }
.hd__tel-num{ font-family:"Oswald",sans-serif; font-weight:500; font-size:1.25rem; letter-spacing:.06em; color:#fff; }
.hd.is-scrolled .hd__tel-label{ color:var(--muted); }
.hd.is-scrolled .hd__tel-num{ color:var(--text); }
.hd__cta{ background:var(--brass); border-color:var(--brass); }
.hd.is-scrolled .hd__cta{ background:var(--ink); border-color:var(--ink); }

.nav-toggle{
  width:48px; height:48px; border:1px solid rgba(255,255,255,.5); background:transparent;
  border-radius:var(--r-p); display:grid; place-items:center; cursor:pointer; padding:0;
}
.hd.is-scrolled .nav-toggle{ border-color:var(--line); }
.nav-toggle__bar{ position:relative; display:block; width:20px; height:1px; background:#fff; }
.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:""; position:absolute; left:0; width:20px; height:1px; background:#fff; transition:transform .3s var(--ease);
}
.nav-toggle__bar::before{ top:-6px; } .nav-toggle__bar::after{ top:6px; }
.hd.is-scrolled .nav-toggle__bar,
.hd.is-scrolled .nav-toggle__bar::before,
.hd.is-scrolled .nav-toggle__bar::after{ background:var(--text); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar{ background:transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before{ transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after{ transform:translateY(-6px) rotate(-45deg); }

@media (min-width:1025px){
  .hd__nav{ display:flex; }
  .hd__tel{ display:block; }
  .nav-toggle{ display:none; }
}

/* ドロワー（全画面を覆う） */
.drawer{
  position:fixed; inset:0; z-index:150; background:var(--ink); color:#fff;
  overflow-y:auto; display:grid; place-items:center;
}
.drawer__in{ width:min(420px,84vw); padding:80px 0; }
.drawer__ttl{ font-size:var(--fs-6); letter-spacing:.34em; color:var(--brass); margin-bottom:24px; }
.drawer__list{ display:grid; gap:4px; margin-bottom:32px; }
.drawer__list a{
  display:block; padding:14px 0; text-decoration:none; font-size:var(--fs-4);
  border-bottom:1px solid var(--line-d);
}
.drawer .btn{ background:var(--brass); border-color:var(--brass); }
.drawer__meta{ margin-top:24px; font-size:var(--fs-6); color:#A7ABB4; line-height:1.9; }

/* ---------------- 1. ヒーロー ---------------- */
.hero{ position:relative; min-height:100svh; display:grid; align-items:end; margin-top:-80px; padding-top:80px; }
.hero__media{ position:absolute; inset:0; overflow:hidden; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:56% 40%; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(15,17,21,.62) 0%,rgba(15,17,21,.22) 34%,rgba(15,17,21,.5) 66%,rgba(15,17,21,.86) 100%);
}
.hero__body{
  position:relative; z-index:1; width:100%; max-width:var(--wrap);
  margin:0 auto; padding:0 20px 88px; color:#fff;
}
.hero__eyebrow{
  font-family:"Oswald",sans-serif; font-weight:500; font-size:var(--fs-6);
  letter-spacing:.22em; color:#E7D6BC; margin-bottom:20px;
}
.hero__ttl{
  font-size:var(--fs-1); font-weight:700; line-height:1.08; letter-spacing:.01em;
  margin-bottom:24px; text-shadow:0 2px 28px rgba(0,0,0,.32);
}
.hero__lead{ font-size:var(--fs-4); line-height:1.95; max-width:40em; margin-bottom:32px; color:rgba(255,255,255,.93); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:32px; }
.hero__cta .btn{ background:var(--brass); border-color:var(--brass); }
.hero__cta .btn--ghost{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.7); color:#fff; }
@media (hover:hover){ .hero__cta .btn--ghost:hover{ background:#fff; color:var(--text); border-color:#fff; } }
.hero__meta{
  display:grid; gap:8px 32px; grid-template-columns:1fr;
  border-top:1px solid rgba(255,255,255,.28); padding-top:24px;
  font-size:var(--fs-6); letter-spacing:.06em; color:rgba(255,255,255,.9);
}
.hero__meta span{
  display:inline-block; min-width:3.4em; margin-right:12px;
  color:#E7D6BC; font-weight:500;
}
@media (min-width:768px){ .hero__meta{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1100px){ .hero__meta{ grid-template-columns:repeat(4,minmax(0,1fr)); } .hero__meta span{ display:block; margin:0 0 4px; } }
.hero__scroll{
  position:absolute; right:24px; bottom:24px; z-index:1; display:none;
  font-family:"Oswald",sans-serif; font-size:11px; letter-spacing:.24em; color:#fff;
  text-decoration:none; writing-mode:vertical-rl;
}
.hero__scroll span{ display:block; width:1px; height:56px; background:rgba(255,255,255,.6); margin:0 auto 12px; }
@media (min-width:1025px){ .hero__scroll{ display:block; } }

/* ---------------- 2. 数値 ---------------- */
.stats{ background:var(--paper); padding:var(--sp-4) 20px var(--sp-3); }
.stats__ttl{
  max-width:var(--wrap); margin:0 auto var(--sp-6); font-size:var(--fs-6);
  font-weight:500; letter-spacing:.1em; color:var(--muted); display:grid; gap:6px;
}
.stats__ttl .en{ font-size:var(--fs-6); letter-spacing:.26em; color:var(--brass); }
.stats__list{
  max-width:var(--wrap); margin:0 auto; display:grid; gap:2px;
  grid-template-columns:repeat(2,minmax(0,1fr)); background:var(--line);
  border:1px solid var(--line);
}
@media (min-width:900px){ .stats__list{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stat{ background:var(--paper); padding:28px 20px 32px; }
.stat__num{
  font-family:"Oswald",sans-serif; font-weight:700; font-size:clamp(3rem,7vw,4.25rem);
  line-height:1; color:var(--ink); display:flex; align-items:baseline; gap:6px; margin-bottom:12px;
}
.stat__unit{ font-family:"Noto Sans JP",sans-serif; font-size:var(--fs-5); font-weight:500; color:var(--brass); }
.stat__label{ font-size:var(--fs-6); line-height:1.85; color:var(--text-2); }

/* ---------------- 3. 当店について ---------------- */
.about{ background:var(--white); padding:var(--sp-2) 20px var(--sp-1); }
.about__head{ max-width:var(--wrap); margin:0 auto var(--sp-4); }
.about__lead{ max-width:44em; color:var(--text-2); margin-bottom:24px; }

.feats{ max-width:var(--wrap); margin:0 auto; display:grid; gap:var(--sp-4); }
.feat{ display:grid; gap:24px; }
.feat__fig{ overflow:hidden; border-radius:var(--r-s); }
.feat__fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease); }
@media (hover:hover){ .feat:hover .feat__fig img{ transform:scale(1.04); } }
.feat__no{
  font-family:"Oswald",sans-serif; font-weight:700; font-size:var(--fs-6);
  letter-spacing:.2em; color:var(--brass); margin-bottom:10px;
}
.feat__ttl{ font-size:var(--fs-3); margin-bottom:14px; }
.feat__body p{ color:var(--text-2); }
@media (min-width:900px){
  .feat{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:center; }
  /* 偶数行は写真を右に置く。写真の列幅は左右どちらでも同じにする */
  .feat:nth-child(even){ grid-template-columns:minmax(0,6fr) minmax(0,5fr); }
  .feat:nth-child(even) .feat__fig{ order:2; }
  .feat__fig img{ aspect-ratio:4/5; }
  .feat:nth-child(3) .feat__fig img{ aspect-ratio:3/2; }
}

/* ---------------- 4. 顔そり（濃色） ---------------- */
.shave{ background:var(--ink); color:#EDEAE4; padding:var(--sp-2) 20px var(--sp-2); }
.shave__head{ max-width:var(--wrap); margin:0 auto var(--sp-6); }
.shave .sec-ttl{ color:#fff; }
.shave__lead{ max-width:42em; color:#B9BDC5; }
.shave__fig{
  max-width:var(--wrap); margin:0 auto var(--sp-5); border-radius:var(--r-s); overflow:hidden;
}
.shave__fig img{ width:100%; aspect-ratio:16/9; object-fit:cover; }

/* motion.css の mask は「要素自身」を切り取るため、切り取られた結果
   画面に入ったと判定されず永久に出てこない。切り取りは中の写真側に移す。 */
.shave__fig[data-motion="mask"]{ clip-path:none; }
.shave__fig[data-motion="mask"] > img{
  clip-path:inset(0 0 100% 0); transition:clip-path 1s var(--ease);
}
.shave__fig[data-motion="mask"].is-in > img{ clip-path:inset(0 0 0 0); }

.steps--shave{
  max-width:var(--wrap); margin:0 auto var(--sp-5);
  display:grid; gap:2px; grid-template-columns:1fr; background:var(--line-d); border:1px solid var(--line-d);
}
@media (min-width:900px){ .steps--shave{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.steps--shave .step{ background:var(--ink); padding:24px 20px 28px; font-size:var(--fs-6); color:#B9BDC5; line-height:1.85; }
.steps--shave .step b{ display:block; color:#fff; font-size:var(--fs-5); font-weight:500; margin:8px 0 6px; }
.step__no{
  display:inline-grid; place-items:center; width:34px; height:34px; border-radius:var(--r-p);
  border:1px solid var(--brass); color:var(--brass);
  font-family:"Oswald",sans-serif; font-weight:500; font-size:var(--fs-6);
}

.notes{ max-width:var(--wrap); margin:0 auto; display:grid; gap:1px; background:var(--line-d); border:1px solid var(--line-d); }
@media (min-width:900px){ .notes{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.note{ background:var(--ink); padding:24px 24px 28px; }
.note dt{ font-size:var(--fs-6); font-weight:500; letter-spacing:.14em; color:var(--brass); margin-bottom:10px; }
.note dd{ font-size:var(--fs-6); line-height:1.9; color:#C4C8D0; }

/* ---------------- 5. 理容師 ---------------- */
.staff{ background:var(--sand); padding:var(--sp-2) 20px var(--sp-2); }
.staff__head{ max-width:var(--wrap); margin:0 auto var(--sp-5); }
.staff__lead{ max-width:40em; color:var(--text-2); }
.staff__list{ max-width:var(--wrap); margin:0 auto; display:grid; gap:24px; }
@media (min-width:900px){ .staff__list{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; } }
.staff-card{ background:var(--white); border-radius:var(--r-s); overflow:hidden; display:grid; }
@media (min-width:560px){ .staff-card{ grid-template-columns:minmax(0,4fr) minmax(0,6fr); } }
.staff-card__fig img{ width:100%; height:100%; aspect-ratio:1/1; object-fit:cover; }
.staff-card__body{ padding:24px 24px 28px; }
.staff-card__role{ font-size:var(--fs-6); letter-spacing:.2em; color:var(--brass); margin-bottom:8px; }
.staff-card__name{ font-size:var(--fs-3); margin-bottom:8px; }
.staff-card__name span{ display:block; font-size:var(--fs-6); font-weight:400; color:var(--muted); letter-spacing:.14em; margin-top:4px; }
.staff-card__meta{ font-size:var(--fs-6); color:var(--brass-d); border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:14px; text-wrap:balance; }
.staff-card__body p:last-child{ font-size:var(--fs-6); line-height:1.9; color:var(--text-2); }

/* ---------------- 6. スタイル ---------------- */
.gallery{ background:var(--paper); padding:var(--sp-2) 0 var(--sp-2); }
.gallery__head,.gallery__tabs,.gallery__note{ max-width:var(--wrap); margin-inline:auto; padding-inline:20px; }
.gallery__head{ margin-bottom:28px; }
.gallery__lead{ max-width:40em; color:var(--text-2); }
.gallery__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.tab{
  border:1px solid var(--line); background:transparent; border-radius:var(--r-p);
  min-height:44px; padding:0 22px; font-size:var(--fs-6); font-weight:500; letter-spacing:.08em;
  color:var(--text-2); cursor:pointer; font-family:inherit;
  transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.tab.is-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
@media (hover:hover){ .tab:hover{ border-color:var(--ink); color:var(--ink); } .tab.is-on:hover{ color:#fff; } }

.gallery__list{
  display:grid; grid-auto-flow:column; grid-auto-columns:74vw; gap:12px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:0 20px 12px;
  -webkit-overflow-scrolling:touch;
}
.shot{ scroll-snap-align:start; }
.shot figure{ overflow:hidden; border-radius:var(--r-s); background:var(--sand); }
.shot img{ width:100%; aspect-ratio:1/1; object-fit:cover; transition:transform .8s var(--ease); }
.shot--tall img{ aspect-ratio:4/5; }
.shot--wide img{ aspect-ratio:3/2; }
.shot figcaption{ font-size:var(--fs-6); color:var(--muted); padding:10px 2px 0; letter-spacing:.06em; }
@media (hover:hover){ .shot:hover img{ transform:scale(1.05); } }
@media (min-width:900px){
  .gallery__list{
    grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-columns:auto;
    gap:32px 24px; overflow:visible; max-width:var(--wrap); margin-inline:auto; padding:0 20px;
    align-items:stretch;
  }
  /* 上下にずれると読みにくいので、行ごとに写真の高さとキャプションの位置を揃える */
  .shot,.shot figure{ display:grid; grid-template-rows:1fr auto; min-height:0; }
  .shot img,
  .shot--tall img,
  .shot--wide img{ aspect-ratio:4/5; height:100%; }
  .shot figcaption{ padding-top:12px; }
  /* 1枚だけ主役を作る（2列×2行）。ほかは同じ大きさで揃える */
  .shot--lead{ grid-column:span 2; grid-row:span 2; }
  .shot--lead img{ aspect-ratio:auto; }
  .shot--lead figcaption{ font-size:var(--fs-5); color:var(--text); padding-top:14px; }
}
.gallery__note{ margin-top:24px; font-size:var(--fs-6); color:var(--muted); }

/* ---------------- 7. メニュー・料金 ---------------- */
.menu{ background:var(--white); padding:var(--sp-2) 20px var(--sp-1); }
.menu__head{ max-width:var(--wrap); margin:0 auto var(--sp-5); }
.menu__lead{ max-width:40em; color:var(--text-2); }
.courses{ max-width:var(--wrap); margin:0 auto var(--sp-4); display:grid; gap:20px; }
@media (min-width:900px){ .courses{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; } }
.course-card{
  border:1px solid var(--line); border-radius:var(--r-s); padding:28px 24px 32px;
  background:var(--white); display:flex; flex-direction:column;
}
.course-card--pick{ border-color:var(--brass); border-width:2px; background:#FDFBF7; }
.course-card__cap{
  display:inline-block; align-self:flex-start; border-radius:var(--r-p);
  background:var(--sand); color:var(--brass-d); font-size:11px; font-weight:500;
  letter-spacing:.16em; padding:5px 14px; margin-bottom:16px;
}
.course-card--pick .course-card__cap{ background:var(--brass); color:#fff; }
.course-card__ttl{ font-size:var(--fs-3); margin-bottom:10px; }
.course-card__price{
  font-family:"Oswald",sans-serif; font-weight:700; font-size:2.25rem; line-height:1.1;
  color:var(--ink); margin-bottom:6px; white-space:nowrap;
}
.course-card__time{
  font-size:var(--fs-6); color:var(--muted); letter-spacing:.06em; white-space:nowrap;
  margin-bottom:20px; padding-bottom:20px; border-bottom:1px solid var(--line);
}
.course-card__in{ display:grid; gap:8px; margin-bottom:18px; }
.course-card__in li{ position:relative; padding-left:22px; font-size:var(--fs-6); line-height:1.8; }
.course-card__in li::before{
  content:""; position:absolute; left:0; top:.72em; width:10px; height:2px; background:var(--brass);
}
.course-card__out{ margin-top:auto; font-size:11px; color:var(--muted); letter-spacing:.04em; }

.price{ max-width:var(--wrap); margin:0 auto; }
.price__ttl{ font-size:var(--fs-3); margin-bottom:20px; }
.price__table caption{ text-align:left; font-size:var(--fs-6); color:var(--muted); padding-bottom:12px; }
.price__table th,.price__table td{ text-align:left; padding:16px 8px; border-bottom:1px solid var(--line); font-size:var(--fs-6); }
.price__table thead th{ font-weight:500; letter-spacing:.12em; color:var(--muted); border-bottom:1px solid var(--ink); padding-block:10px; }
.price__table tbody th{ font-weight:500; }
.price__table td:last-child,.price__table thead th:last-child{
  text-align:right; font-family:"Oswald",sans-serif; font-size:var(--fs-5); font-weight:500; white-space:nowrap;
}
.price__table thead th:last-child{ font-family:"Noto Sans JP",sans-serif; font-size:var(--fs-6); }
.price__table td:nth-child(2){ color:var(--muted); white-space:nowrap; }
.price__note{ margin:20px 0 24px; font-size:var(--fs-6); color:var(--text-2); }

/* ---------------- 8. 流れ ---------------- */
.flow{ background:var(--paper); padding:var(--sp-2) 20px var(--sp-2); }
.flow__head{ max-width:var(--wrap); margin:0 auto var(--sp-5); }
.steps--flow{ max-width:var(--wrap); margin:0 auto var(--sp-5); display:grid; gap:20px; }
@media (min-width:900px){ .steps--flow{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; } }
.steps--flow .step{ border-top:2px solid var(--ink); padding-top:20px; }
.steps--flow .step b{ display:block; font-size:var(--fs-4); font-weight:700; margin:14px 0 10px; }
.steps--flow .step p{ font-size:var(--fs-6); line-height:1.9; color:var(--text-2); }
.flow__fig{ max-width:var(--wrap); margin:0 auto; }
.flow__fig img{ width:100%; aspect-ratio:3/1.4; object-fit:cover; border-radius:var(--r-s); }
.flow__fig figcaption{ margin-top:12px; font-size:var(--fs-6); color:var(--muted); }

/* ---------------- 9. FAQ ---------------- */
.faq{ background:var(--white); padding:var(--sp-2) 20px var(--sp-2); }
.faq__head{ max-width:var(--wrap); margin:0 auto var(--sp-6); }
.faq__list{ max-width:840px; margin:0 auto; border-top:1px solid var(--line); }
.qa{ border-bottom:1px solid var(--line); }
.qa summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 34px; position:relative;
  font-size:var(--fs-4); font-weight:500; line-height:1.7;
  transition:color .3s var(--ease);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::before{
  content:"Q"; position:absolute; left:0; top:22px;
  font-family:"Oswald",sans-serif; font-weight:700; color:var(--brass);
}
.qa summary::after{
  content:""; position:absolute; right:8px; top:34px; width:13px; height:13px;
  border-right:1px solid var(--text); border-bottom:1px solid var(--text);
  transform:rotate(45deg); transition:transform .3s var(--ease);
}
.qa[open] summary::after{ transform:rotate(-135deg); }
@media (hover:hover){ .qa summary:hover{ color:var(--brass-d); } }
.qa p{ padding:0 44px 26px 34px; font-size:var(--fs-6); line-height:1.95; color:var(--text-2); }

/* ---------------- 10. お知らせ ---------------- */
.news{ background:var(--paper); padding:var(--sp-3) 20px var(--sp-3); }
.news__head{ max-width:var(--wrap); margin:0 auto var(--sp-6); }
.news__list{ max-width:840px; margin:0 auto; border-top:1px solid var(--line); }
.news-item{ display:grid; gap:6px; padding:22px 0; border-bottom:1px solid var(--line); }
@media (min-width:720px){ .news-item{ grid-template-columns:150px minmax(0,1fr); gap:24px; align-items:baseline; } }
.news-item time{ font-family:"Oswald",sans-serif; font-size:var(--fs-6); letter-spacing:.12em; color:var(--brass); }
.news-item p{ font-size:var(--fs-6); line-height:1.9; color:var(--text-2); }

/* ---------------- 11. アクセス ---------------- */
.access{ background:var(--white); padding:var(--sp-2) 20px var(--sp-2); }
.access__head{ max-width:var(--wrap); margin:0 auto var(--sp-5); }
.access__grid{ max-width:var(--wrap); margin:0 auto; display:grid; gap:var(--sp-5); }
@media (min-width:960px){ .access__grid{ grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:56px; align-items:start; } }
.hours caption{ text-align:left; font-size:var(--fs-6); letter-spacing:.16em; color:var(--brass); padding-bottom:12px; }
.hours th,.hours td{ text-align:left; padding:12px 6px; border-bottom:1px solid var(--line); font-size:var(--fs-6); }
.hours th{ font-weight:500; width:6em; }
.hours td span{ display:block; color:var(--muted); font-size:11px; }
.hours .is-off{ color:var(--red); }
.hours__note{ margin:14px 0 var(--sp-6); font-size:11px; color:var(--muted); line-height:1.9; }
.shopinfo{ border-top:1px solid var(--ink); }
.shopinfo > div{ display:grid; gap:2px; padding:14px 0; border-bottom:1px solid var(--line); }
@media (min-width:560px){ .shopinfo > div{ grid-template-columns:6em minmax(0,1fr); gap:16px; } }
.shopinfo dt{ font-size:var(--fs-6); font-weight:500; color:var(--muted); letter-spacing:.1em; }
.shopinfo dd{ font-size:var(--fs-6); line-height:1.85; text-wrap:balance; }

.access__side{ display:grid; gap:24px; }
.map svg{ width:100%; height:auto; border-radius:var(--r-s); }
.map figcaption,.access__fig figcaption{ margin-top:12px; font-size:var(--fs-6); color:var(--muted); line-height:1.8; }
.access__fig img{ width:100%; border-radius:var(--r-s); object-fit:cover; }
.access__fig:nth-of-type(1) img{ aspect-ratio:3/2; }
@media (min-width:960px){
  .access__side{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .map{ grid-column:1 / -1; }
  .access__fig img{ aspect-ratio:3/4; height:100%; }
  .access__fig:nth-of-type(1) img{ aspect-ratio:3/4; }
}

/* ---------------- 12. ご予約 ---------------- */
.reserve{ background:var(--sand); display:grid; }
@media (min-width:1025px){ .reserve{ grid-template-columns:minmax(0,4fr) minmax(0,7fr); align-items:stretch; } }
.reserve__media{ overflow:hidden; }
.reserve__media img{ width:100%; height:100%; aspect-ratio:3/2; object-fit:cover; }
@media (min-width:1025px){ .reserve__media img{ aspect-ratio:auto; min-height:100%; } }
.reserve__body{ padding:var(--sp-3) 20px var(--sp-3); max-width:760px; margin:0 auto; }
@media (min-width:1025px){ .reserve__body{ padding:var(--sp-2) 56px; margin:0; } }
.reserve__lead{ max-width:38em; color:var(--text-2); margin-bottom:32px; }
.ways{ display:grid; gap:16px; margin-bottom:24px; }
.way-card{ background:var(--white); border-radius:var(--r-s); padding:24px 24px 28px; }
.way-card__no{ font-family:"Oswald",sans-serif; font-weight:700; font-size:var(--fs-6); letter-spacing:.2em; color:var(--brass); margin-bottom:8px; }
.way-card h3{ font-size:var(--fs-3); margin-bottom:8px; }
.way-card__when{ font-size:var(--fs-6); color:var(--muted); border-bottom:1px solid var(--line); padding-bottom:12px; margin-bottom:12px; }
.way-card__when b{ color:var(--red); font-weight:500; }
.way-card > p:nth-of-type(3){ font-size:var(--fs-6); line-height:1.9; color:var(--text-2); margin-bottom:20px; }
.reserve__note{ font-size:11px; color:var(--muted); line-height:1.9; }

/* ---------------- フッター ---------------- */
.ft{ background:var(--ink); color:#C4C8D0; padding:var(--sp-4) 20px 32px; }
.ft__in{ max-width:var(--wrap); margin:0 auto; display:grid; gap:40px; }
@media (min-width:900px){ .ft__in{ grid-template-columns:minmax(0,4fr) minmax(0,4fr) minmax(0,4fr); gap:32px; } }
.ft__logo-en{ font-family:"Oswald",sans-serif; font-weight:700; font-size:1.25rem; letter-spacing:.2em; color:#fff; }
.ft__logo-ja{ font-size:var(--fs-6); letter-spacing:.26em; color:var(--brass); margin:6px 0 16px; }
.ft__addr{ font-size:var(--fs-6); line-height:1.9; }
.ft__nav{ display:grid; gap:10px; font-size:var(--fs-6); }
.ft__nav a{ text-decoration:none; }
.ft__tel a{ font-family:"Oswald",sans-serif; font-size:1.5rem; letter-spacing:.06em; color:#fff; text-decoration:none; }
.ft__hours{ font-size:var(--fs-6); line-height:1.9; margin:8px 0 20px; }
.ft .btn--sm{ background:var(--brass); border-color:var(--brass); }
.ft__copy{
  max-width:var(--wrap); margin:40px auto 0; padding-top:24px;
  border-top:1px solid var(--line-d); font-size:11px; color:#8A8F99; letter-spacing:.06em;
}

/* 動きを減らす設定の人にも中身は見せる */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .shave__fig[data-motion="mask"] > img{ clip-path:none !important; }
}