/* =========================================================
   PANDOLA / XINGFU Group
   参考構成: syn hair salon（黒×白モード）
   フォント: 案A（Klee One / Caveat / Zen Kurenaido）
   配色: 黒ベース + 看板の深緑
   ========================================================= */

:root {
  /* --- 色 --- */
  --bg:        #0d1512;   /* ほぼ黒。緑を帯びている */
  --bg-2:      #121d18;   /* セクション交互の一段明るい黒 */
  --text:      #f2efe8;   /* 生成りの白 */
  --text-dim:  #a3b0a7;   /* 補助テキスト */
  --green:     #305844;   /* 看板の深緑 = ブランドカラー */
  --green-lt:  #7ea896;   /* 明るい方の緑。黒地で沈まないよう #688d7b から一段上げている */
  --line:      rgba(104, 141, 123, .28);

  /* --- 写真のトーン統一 ---
     既存写真は明るい日常サロン写真なので、暗く落として全体に馴染ませている。
     撮り直した写真に差し替えたら、この値を弱めるか none にする。 */
  --photo: grayscale(.08) brightness(.98) contrast(1.03) saturate(.94);

  /* --- 字送り --- */
  --ls-wide: .18em;
  --ls-mid:  .1em;

  --pad-x: clamp(20px, 5vw, 80px);
  --maxw:  1120px;              /* 本文の最大幅。ヘッダーもこの幅に揃える */
  --gap:   clamp(90px, 16vw, 240px);   /* セクション間の隙間。ここから固定背景が覗く */
}

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Zen Kurenaido', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  font-size: 17.5px;
  line-height: 2.15;
  letter-spacing: .04em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- 共通パーツ ---------- */
.jp   { font-family: 'Klee One', 'Hiragino Mincho ProN', serif; }
.en   { font-family: 'Caveat', cursive; }
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-x); }
section[id] { scroll-margin-top: 78px; }

/* セクション見出し（「6つの店 / our salons ————」の形） */
.sec-head {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 40px;
}
.sec-head .t  { font-family: 'Klee One', serif; font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); letter-spacing: var(--ls-mid); }
.sec-head .e  { font-family: 'Caveat', cursive; font-size: 25px; color: var(--green-lt); }
.sec-head .ln { flex: 1; height: 1px; background: var(--line); }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Klee One', serif; font-size: 16.5px; letter-spacing: var(--ls-mid);
  padding: 16px 34px;
  border: 1px solid var(--green-lt);
  background: var(--green);
  color: var(--text);
  transition: background .35s ease, letter-spacing .35s ease;
}
.btn:hover { background: var(--green-lt); letter-spacing: .16em; }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--green); }

/* 写真の枠 */
.photo { overflow: hidden; background: #000; }
.photo img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); transition: transform 1.2s cubic-bezier(.16,.84,.44,1), filter .6s ease; }

/* スクロールで浮かび上がる */
.rise { opacity: 0; transform: translateY(26px); transition: opacity 1s ease, transform 1s cubic-bezier(.16,.84,.44,1); }
.rise.on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   ヘッダー
   ========================================================= */
.hd {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  /* 本文（.wrap）の左右端とロゴ／ナビを揃える。画面いっぱいだとロゴだけ外に飛び出して見える */
  padding: 18px max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x)));
  background: transparent;
  transition: background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
.hd.stuck {
  background: rgba(13, 21, 18, .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding-block: 11px;
  border-bottom-color: var(--line);
}
/* ロゴは元が白地に黒。assets/img/logo-white.png に白抜き透過を作って差し替えてある
   （作り直したいとき: 元 logo.jpg を輝度反転してアルファに、色は #f2efe8 の単色） */
.hd__logo img { width: 112px; }
.hd__nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 30px); }
.hd__nav a {
  font-family: 'Klee One', serif; font-size: 14.5px; letter-spacing: var(--ls-mid);
  position: relative; padding-bottom: 3px; color: var(--text);
}
.hd__nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px;
  background: var(--green-lt); transition: width .4s ease;
}
.hd__nav a:hover::after { width: 100%; }
.hd__nav .btn { padding: 11px 21px; font-size: 14px; }
.hd__nav .btn::after { display: none; }

/* ハンバーガー（スマホ） */
.hd__burger { display: none; width: 34px; height: 22px; position: relative; background: none; border: 0; cursor: pointer; padding: 0; }
.hd__burger span { position: absolute; left: 0; width: 100%; height: 1px; background: var(--text); transition: transform .4s ease, opacity .3s ease; }
.hd__burger span:nth-child(1) { top: 2px; }
.hd__burger span:nth-child(2) { top: 10px; }
.hd__burger span:nth-child(3) { top: 18px; }
body.nav-open .hd__burger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.nav-open .hd__burger span:nth-child(2) { opacity: 0; }
body.nav-open .hd__burger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* =========================================================
   ヒーロー
   ========================================================= */
/* --- 画面に貼り付く背景 ---
   syn hair salon と同じ仕掛け。背景は position:fixed で画面に固定し、
   その上を各セクションが半透明の黒で流れていく。
   .hero の中に置くと親の重なり順に巻き込まれるので body 直下に出してある */
.bgfix { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; }

/* 768px以下は動画を止めて看板写真に切り替える（下の .bgfix video / .bgfix__still 参照）。
   デスクトップ側はここで動画を主役にしておく */
.bgfix__still { display: none; }

.bgfix img {
  width: 100%; height: 100%; object-fit: cover; object-position: 62% 48%;
  filter: grayscale(.08) brightness(.98) contrast(1.03) saturate(.94);
}
/* 動画は object-fit だけだと環境によって幅が縮んで左に寄る（右に黒帯が残る）ことがあったため、
   昔ながらの「min-width/min-height 100% + transform で中央固定」の組み方に変えている。
   これなら video の実寸に関係なく、常に画面全体を覆って中央に来る */
.bgfix video {
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%; width: auto; height: auto;
  transform: translate(-50%, -50%);
  filter: grayscale(.08) brightness(.98) contrast(1.03) saturate(.94);
}
/* 静止画のときだけゆっくりズームさせる。動画は素材そのものが動いているので、
   CSSズームを重ねると二重に動いて見えてしまうため付けない */
.bgfix img { animation: kenburns 26s ease-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .bgfix img { animation: none; } }

/* 看板写真は白い建物が大きく明るいので、文字が乗る左下を三重に沈めている */
.bgfix__veil {
  position: absolute; inset: 0; display: block;
  background:
    linear-gradient(to right, rgba(13,21,18,.78) 0%, rgba(13,21,18,.26) 44%, rgba(13,21,18,.03) 100%),
    linear-gradient(to bottom, rgba(13,21,18,.46) 0%, rgba(13,21,18,.03) 26%, rgba(13,21,18,.6) 100%),
    radial-gradient(ellipse 56% 48% at 24% 70%, rgba(48,88,68,.2), transparent 64%);
}

/* 背景の上に乗る側。半透明にして下の写真を透かす（syn は .87 / .79 の黒） */
.hd, .hero, .intro, .shops, .band, .news, .ft { position: relative; z-index: 1; }
body.page-top { background: #000; }
.hero { height: 100svh; min-height: 560px; display: flex; align-items: flex-end; }
.intro { background: rgba(13, 21, 18, .9); }
/* セクションの間に同じ幅の隙間を空けて、そこから固定背景を覗かせる */
.shops, .band, .news, .ft { margin-top: var(--gap); }
.news  { background: rgba(13, 21, 18, .93); }
.hero__inner { position: relative; width: 100%; padding-bottom: clamp(70px, 11vh, 130px); }
.hero__en { font-family: 'Caveat', cursive; font-size: clamp(19px, 2.2vw, 25px); color: #a8ccbb; letter-spacing: .05em; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,.6), 0 2px 20px rgba(0,0,0,.5); }
.hero__ttl {
  font-family: 'Klee One', serif; font-weight: 600;
  font-size: clamp(38px, 6.4vw, 78px); line-height: 1.32; letter-spacing: .04em;
  /* 背景が明るいぶん、近い影で輪郭を、遠い影で全体を沈めて文字を守る */
  text-shadow: 0 1px 4px rgba(0,0,0,.5), 0 2px 34px rgba(0,0,0,.66);
}
/* A案の「マーカー下線」を1点だけ持ち込んでいる */
.mark { position: relative; white-space: nowrap; z-index: 0; }
.mark::after {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: .12em; height: .16em;
  background: rgba(104,141,123,.55); transform: rotate(-.7deg); z-index: -1;
}
.hero__lead { margin-top: 24px; font-size: 17px; line-height: 2.3; color: #e8e5dd; max-width: 36em; text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 18px rgba(0,0,0,.5); }
.hero__cta { margin-top: 34px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero__tel { font-family: 'Caveat', cursive; font-size: 26px; color: var(--green-lt); letter-spacing: .06em; }

.hero__scroll { position: absolute; right: var(--pad-x); bottom: 34px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero__scroll span { font-family: 'Caveat', cursive; font-size: 15px; color: var(--text-dim); writing-mode: vertical-rl; letter-spacing: .2em; }
.hero__scroll i { display: block; width: 1px; height: 70px; background: linear-gradient(to bottom, var(--green-lt), transparent); }

/* =========================================================
   イントロ（syn の "A salon that you can go to for a lifetime." の位置）
   ========================================================= */
.intro { padding: clamp(40px, 6vw, 75px) 0; }   /* 背景は画面幅いっぱいの帯。中身は .wrap が本文幅に収める */
.intro__en { font-family: 'Caveat', cursive; font-size: clamp(24px, 3.6vw, 40px); color: var(--green-lt); line-height: 1.5; margin-bottom: 30px; }
.intro__jp { font-family: 'Klee One', serif; font-weight: 600; font-size: clamp(21px, 2.5vw, 28px); line-height: 2.05; letter-spacing: .08em; margin-bottom: 28px; }
.intro__body { font-size: 17.5px; line-height: 2.4; color: #cfd4cf; max-width: 46em; }
.intro__sign { font-family: 'Caveat', cursive; font-size: 25px; color: var(--green-lt); margin-top: 26px; }

/* =========================================================
   6店舗（syn のバナー群に相当）
   ========================================================= */
.shops { padding: clamp(60px, 9vw, 110px) 0; background: rgba(18, 29, 24, .92); }
.shops__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.shop { position: relative; display: block; aspect-ratio: 4 / 3.1; overflow: hidden; background: #000; }
.shop img { width: 100%; height: 100%; object-fit: cover; filter: var(--photo); transition: transform 1.4s cubic-bezier(.16,.84,.44,1), filter .6s ease; }
.shop__veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13,21,18,.95) 0%, rgba(13,21,18,.68) 32%, rgba(13,21,18,.12) 66%, rgba(13,21,18,.02) 100%); transition: background .5s ease; }
.shop__txt { position: absolute; inset: auto 0 0 0; padding: 26px 24px; }
.shop__cat { font-family: 'Caveat', cursive; font-size: 21px; color: #9dc0b0; letter-spacing: .05em; }
.shop__name { font-family: 'Klee One', serif; font-weight: 600; font-size: clamp(17px, 1.65vw, 21px); letter-spacing: .03em; margin-top: 3px; }
.shop__desc { font-size: 14.5px; line-height: 2; color: #c3c9c3; margin-top: 8px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .55s ease, opacity .45s ease, margin .55s ease; }
.shop:hover img { transform: scale(1.07); filter: grayscale(0) brightness(1.06) contrast(1.02) saturate(1); }
.shop:hover .shop__veil { background: linear-gradient(to top, rgba(13,21,18,.97) 0%, rgba(13,21,18,.78) 42%, rgba(13,21,18,.4) 75%, rgba(13,21,18,.2) 100%); }
.shop:hover .shop__desc { max-height: 110px; opacity: 1; }

/* =========================================================
   横長バナー（syn の PRODUCT バナーに相当 → 着付け）
   ========================================================= */
.band { position: relative; min-height: clamp(440px, 56vw, 640px); display: flex; align-items: center; overflow: hidden; padding-block: clamp(60px, 8vw, 100px); }
.band__bg { position: absolute; inset: 0; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.08) brightness(.98) contrast(1.03) saturate(.94); }
.band__veil { position: absolute; inset: 0; background:
  linear-gradient(to right, rgba(13,21,18,.8) 0%, rgba(13,21,18,.36) 46%, rgba(13,21,18,.08) 100%),
  linear-gradient(to bottom, rgba(13,21,18,.42) 0%, rgba(13,21,18,.06) 42%, rgba(13,21,18,.6) 100%); }
.band__inner { position: relative; width: 100%; }   /* flexの子なので幅を明示しないと中央に寄る */
.band__en { font-family: 'Caveat', cursive; font-size: clamp(22px, 3vw, 34px); color: var(--green-lt); }
.band__ttl { font-family: 'Klee One', serif; font-weight: 600; font-size: clamp(26px, 3.8vw, 44px); line-height: 1.6; letter-spacing: .07em; margin: 10px 0 20px; }
.band__body { font-size: 17px; line-height: 2.3; color: #cfd4cf; max-width: 30em; margin-bottom: 30px; }

/* =========================================================
   お知らせ
   ========================================================= */
.news { padding: clamp(70px, 10vw, 130px) 0; }
.news__list li { border-bottom: 1px solid var(--line); }
.news__list a { display: flex; align-items: baseline; gap: 24px; padding: 20px 4px; transition: padding-left .4s ease, background .4s ease; }
.news__list a:hover { padding-left: 16px; background: rgba(104,141,123,.06); }
.news__date { font-family: 'Caveat', cursive; font-size: 24px; color: #9dc0b0; white-space: nowrap; min-width: 4.6em; }
.news__ttl { font-size: 16.5px; line-height: 1.9; }
.news__more { margin-top: 34px; text-align: right; }

/* =========================================================
   フッター
   ========================================================= */
.ft { background: rgba(10, 17, 14, .95); border-top: 1px solid var(--line); padding: clamp(56px, 8vw, 90px) 0 30px; }
.ft__top { display: grid; grid-template-columns: 1.1fr 2fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
.ft__logo img { width: 150px; margin-bottom: 20px; }
.ft__co { font-size: 14.5px; line-height: 2.1; color: var(--text-dim); }
.ft__shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 30px; }
.ft__shop .n { font-family: 'Klee One', serif; font-size: 16px; letter-spacing: .04em; margin-bottom: 5px; }
.ft__shop .d { font-size: 13.5px; line-height: 2; color: var(--text-dim); }
.ft__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.ft__copy { font-family: 'Caveat', cursive; font-size: 18px; color: var(--text-dim); letter-spacing: .06em; }
.ft__links { display: flex; gap: 22px; font-size: 13.5px; color: var(--text-dim); }
.ft__links a:hover { color: var(--green-lt); }

/* =========================================================
   レスポンシブ（DOMは一本。CSSだけで畳む）
   ========================================================= */
@media (max-width: 1000px) {
  .shops__grid { grid-template-columns: repeat(2, 1fr); }
  .ft__top { grid-template-columns: 1fr; }
  .ft__shops { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  body { font-size: 16.5px; }
  .hd__logo img { width: 64px; }
  .hd { padding: 12px max(var(--pad-x), calc((100% - var(--maxw)) / 2 + var(--pad-x))); }
  /* 動画は店内を切り替わる構成なので、縦画面で中央だけ大きく切り取ると毎回別の場所が
     ズームで映り「何を映しているか分からない」状態になる。スマホは動画を止めて
     看板写真1枚に切り替える（<source media> で動画自体もダウンロードしない） */
  .bgfix__video { display: none; }
  .bgfix__still { display: block; }
  .bgfix img { object-position: 56% 58%; }   /* 縦画面は白い外壁が大きく入るので下へ寄せる */
  /* 縦長だと明るい面が広く残るので、覆いを一段強くする */
  .bgfix__veil {
    background:
      linear-gradient(to right, rgba(13,21,18,.72) 0%, rgba(13,21,18,.4) 60%, rgba(13,21,18,.18) 100%),
      linear-gradient(to bottom, rgba(13,21,18,.5) 0%, rgba(13,21,18,.14) 24%, rgba(13,21,18,.68) 100%);
  }
  .hd__burger { display: block; }
  .hd__nav {
    position: fixed; inset: 0; z-index: -1;
    flex-direction: column; justify-content: center; gap: 26px;
    background: rgba(10, 17, 14, .97);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    opacity: 0; pointer-events: none; transition: opacity .45s ease;
  }
  body.nav-open .hd__nav { opacity: 1; pointer-events: auto; }
  .hd__nav a { font-size: 17px; letter-spacing: .22em; }
  .shops__grid { grid-template-columns: 1fr; }
  .shop { aspect-ratio: 4 / 3; }
  .shop__desc { max-height: 110px; opacity: 1; }   /* スマホはホバーが無いので常時表示 */
  .ft__shops { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  .news__list a { flex-direction: column; gap: 4px; }
}

/* =========================================================
   店舗ページ（honten / kotobukicho / nail / larima / trico / datsumou）
   ========================================================= */
.page-shop { padding-top: 0; }
.lead-note { font-size: 16px; color: var(--text-dim); margin-bottom: 22px; }

/* ---------- 店舗ヒーロー ---------- */
.shero { position: relative; min-height: clamp(320px, 42vw, 460px); display: flex; align-items: flex-end; overflow: hidden; }
.shero__bg { position: absolute; inset: 0; }
.shero__bg img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.08) brightness(.98) contrast(1.03) saturate(.94); animation: kenburns 30s ease-out infinite alternate; }
.shero__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,21,18,.7) 0%, rgba(13,21,18,.08) 34%, rgba(13,21,18,.5) 68%, rgba(13,21,18,.88) 100%),
    radial-gradient(ellipse 70% 46% at 42% 82%, rgba(13,21,18,.55), transparent 74%);
}
.shero__inner { position: relative; width: 100%; padding-bottom: clamp(34px, 5vw, 56px); padding-top: 110px; }
.shero__crumb { font-size: 13.5px; color: var(--text-dim); letter-spacing: .1em; margin-bottom: 14px; }
.shero__crumb a:hover { color: var(--green-lt); }
.shero__crumb span { margin: 0 .6em; opacity: .5; }
.shero__en { font-family: 'Caveat', cursive; font-size: clamp(20px, 2.2vw, 25px); color: var(--green-lt); letter-spacing: .06em; }
.shero__ttl { font-family: 'Klee One', serif; font-weight: 600; font-size: clamp(26px, 4.2vw, 46px); letter-spacing: .05em; line-height: 1.45; text-shadow: 0 2px 26px rgba(0,0,0,.55); }

/* ---------- 紹介文 ---------- */
.sintro { padding: clamp(46px, 6vw, 80px) var(--pad-x) clamp(30px, 4vw, 50px); }
.sintro__body p { font-size: 17.5px; line-height: 2.4; color: #cfd4cf; max-width: 48em; margin-bottom: 1.1em; }
.sintro__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; }

/* ---------- タブ ---------- */
.sdetail { padding-block: clamp(40px, 5vw, 66px); }
.tabs__head { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 0; }
.tab {
  font-family: 'Klee One', serif; font-size: 16px; letter-spacing: .1em;
  padding: 15px 28px; cursor: pointer;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line); border-bottom: none;
  transition: background .3s ease, color .3s ease;
}
.tab:hover { color: var(--text); background: rgba(104,141,123,.08); }
.tab.is-on { background: var(--green); color: var(--text); border-color: var(--green-lt); }
.pane { display: none; border: 1px solid var(--line); padding: clamp(20px, 3vw, 34px); }
.pane.is-on { display: block; }

.kv { width: 100%; border-collapse: collapse; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 13px 4px; border-bottom: 1px solid rgba(104,141,123,.16); font-weight: 400; }
.kv th { font-family: 'Klee One', serif; font-size: 15px; color: var(--green-lt); letter-spacing: .06em; width: 10em; white-space: nowrap; }
.kv td { font-size: 16px; line-height: 2; color: #d5dad5; }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: none; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  font-size: 14.5px; letter-spacing: .04em; color: #d5dad5;
  border: 1px solid var(--line); padding: 9px 17px; line-height: 1.7;
}

/* ---------- メニュー（アコーディオン） ---------- */
.smenu { padding-block: clamp(40px, 5vw, 66px); }
/* メニューのタブ。カテゴリが10個ある店（Nail&Eyelash）があるので折り返す */
.tabs--menu .tabs__head { gap: 2px; }
.tabs--menu .tab { font-size: 15px; padding: 14px 24px; }
.tabs--menu .pane { padding: clamp(10px, 1.6vw, 20px) clamp(14px, 2.4vw, 28px); }

.menu { width: 100%; border-collapse: collapse; margin: 0; }
.menu td { vertical-align: top; padding: 14px 4px; border-top: 1px dashed rgba(104,141,123,.2); }
.menu tr:first-child td { border-top: none; }
.m-name { font-size: 16px; line-height: 1.9; }
.m-desc { display: block; font-size: 14px; line-height: 1.95; color: var(--text-dim); margin-top: 6px; max-width: 46em; }
.m-price { font-family: 'Caveat', cursive; font-size: 25px; color: var(--green-lt); text-align: right; white-space: nowrap; padding-left: 20px; letter-spacing: .03em; }
.menu tr.sub td { font-family: 'Klee One', serif; font-size: 15px; letter-spacing: .1em; color: var(--green-lt); background: rgba(104,141,123,.07); padding: 10px 12px; border-top: none; }

/* ---------- 他の店 ---------- */
.sother { padding-block: clamp(40px, 5vw, 66px); }
.sother__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; }
.sother__list a {
  font-family: 'Klee One', serif; font-size: 15.5px; letter-spacing: .05em;
  padding: 22px 26px; border: 1px solid var(--line);
  transition: background .3s ease, padding-left .3s ease;
}
.sother__list a:hover { background: var(--green); padding-left: 30px; }

/* ---------- 地図 ---------- */
.smap { line-height: 0; }
/* Googleマップを暗く見せる定番の合わせ技。invert だけだと色相が反転して汚くなるので
   hue-rotate(180deg) で色相を戻している */
.smap iframe { width: 100%; height: clamp(280px, 34vw, 420px); border: 0;
  filter: invert(.92) hue-rotate(180deg) grayscale(.25) contrast(1.02) brightness(1.18); }

.ft--slim { padding-block: 26px; }
.ft--slim .ft__bottom { margin-top: 0; padding-top: 0; border-top: none; }

@media (max-width: 768px) {
  .shero__inner { padding-top: 88px; }
  /* スマホはタブ幅がバラつくと押しにくいので2列に揃える */
  .tabs__head { display: grid; grid-template-columns: repeat(2, 1fr); }
  .tab { padding: 15px 8px; font-size: 14.5px; letter-spacing: .02em; }
  .tabs--menu .tab { font-size: 14px; }
  .kv th { width: auto; display: block; border-bottom: none; padding-bottom: 2px; }
  .kv td { display: block; padding-top: 0; }
  .m-price { font-size: 22px; }
  .sother__list { grid-template-columns: 1fr; }
}

/* =========================================================
   中央揃えは店舗ページ（.page-shop）だけ。トップは左寄せのまま
   「項目と値」「メニュー名と価格」の対になっている表は、中央にすると
   対応が読めなくなるので左右に振ったまま
   ========================================================= */
.page-shop .sec-head { justify-content: center; }
.page-shop .sec-head::before { content: ''; height: 1px; background: var(--line); flex: 0 1 clamp(30px, 12vw, 190px); }
.page-shop .sec-head .ln     { flex: 0 1 clamp(30px, 12vw, 190px); }

.shero__inner, .sintro, .lead-note { text-align: center; }
.sintro__body p { margin-inline: auto; }
.sintro__cta { justify-content: center; }
.tabs__head { justify-content: center; }
.chips { justify-content: center; }
.sother__list a { text-align: center; }

@media (max-width: 768px) {
  .page-shop .sec-head::before, .page-shop .sec-head .ln { flex: 0 1 20px; }
}

/* =========================================================
   採用ページ（recruit.html）
   syn の recruit と同じ骨格：左に写真、右に本文。メッセージは縦書き、
   募集要項と会社概要は黒帯の折りたたみに畳む
   ========================================================= */
.page-recruit { background: var(--bg); }

.rsplit { display: grid; grid-template-columns: 42% 58%; align-items: start; }

/* 左：写真は画面に貼り付いたまま、右だけが流れる */
.rsplit__photo {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rsplit__photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.08) brightness(.98) contrast(1.03) saturate(.94);
  animation: kenburns 30s ease-out infinite alternate;
}
.rsplit__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(13,21,18,.38) 0%, rgba(13,21,18,.06) 45%, rgba(13,21,18,.56) 100%),
    radial-gradient(ellipse 66% 46% at 50% 50%, rgba(13,21,18,.42), transparent 72%);
}
.rsplit__ttl {
  position: relative;
  font-family: 'Klee One', serif; font-weight: 600;
  font-size: clamp(30px, 3.6vw, 50px); letter-spacing: .3em; text-indent: .3em;
  text-shadow: 0 2px 30px rgba(0,0,0,.6);
}

/* 右：本文 */
.rsplit__body {
  padding: clamp(90px, 9vw, 130px) clamp(24px, 5vw, 90px) clamp(70px, 8vw, 110px);
  max-width: 780px;
}
.rlabel {
  font-family: 'Klee One', serif; font-size: 15px; letter-spacing: var(--ls-wide);
  color: var(--green-lt); text-align: center; margin-bottom: clamp(34px, 5vw, 56px);
}

/* 縦書きのメッセージ。日本語は writing-mode だけで正立する */
.rvert {
  writing-mode: vertical-rl;
  width: max-content;                 /* これが無いと親幅いっぱいになって中央に来ない */
  margin: 0 auto clamp(46px, 6vw, 76px);
  height: clamp(240px, 34vw, 360px);
  font-family: 'Klee One', serif; font-weight: 600;
  font-size: clamp(16px, 1.5vw, 19px); line-height: 2.6; letter-spacing: .18em;
}

.rtext p { font-size: 16px; line-height: 2.5; color: #cfd4cf; margin-bottom: 1.7em; }
.rsign { text-align: right; font-family: 'Klee One', serif; font-size: 15px; letter-spacing: .06em; color: var(--text-dim); margin-bottom: clamp(50px, 6vw, 80px); }

/* 折りたたみ（syn の黒帯） */
.racc { border: 1px solid var(--line); margin-bottom: 2px; background: rgba(10, 17, 14, .6); }
.racc > summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 24px 20px 46px;
  transition: background .35s ease;
}
.racc > summary::-webkit-details-marker { display: none; }
.racc > summary:hover { background: rgba(104, 141, 123, .08); }
.racc > summary::before {
  content: ''; position: absolute; left: 20px; top: 50%; margin-top: -3px;
  width: 9px; height: 9px; border-right: 1px solid var(--green-lt); border-bottom: 1px solid var(--green-lt);
  transform: rotate(45deg); transition: transform .35s ease;
}
.racc[open] > summary::before { transform: rotate(-135deg); margin-top: 0; }
.racc__en { display: block; font-family: 'Klee One', serif; font-size: 19px; letter-spacing: .14em; }
.racc__jp { display: block; font-size: 13px; letter-spacing: .06em; color: var(--text-dim); margin-top: 3px; }
.racc__body { padding: 6px clamp(18px, 2.6vw, 30px) clamp(26px, 3vw, 38px); }
.racc__h {
  font-family: 'Klee One', serif; font-size: 15px; letter-spacing: .1em; color: var(--green-lt);
  margin: 26px 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line);
}
.racc__body .kv { margin-bottom: 4px; }
.racc__body a { border-bottom: 1px solid rgba(126,168,150,.4); }
.racc__body a:hover { color: var(--green-lt); }

/* 選考の流れ */
.rflow { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.rflow li { display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); padding: 14px 18px; }
.rflow__n {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--green); border: 1px solid var(--green-lt);
  font-family: 'Caveat', cursive; font-size: 18px;
}
.rflow__t { font-size: 15px; line-height: 1.9; }
.rnote { margin-top: 18px; font-size: 14px; line-height: 2.1; color: var(--text-dim); }

.rcontact { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.rcontact a { font-family: 'Caveat', cursive; font-size: 30px; letter-spacing: .06em; color: var(--green-lt); }
.rcontact span { font-size: 13.5px; color: var(--text-dim); }

.rtel { margin-top: clamp(40px, 5vw, 64px); font-family: 'Caveat', cursive; font-size: 26px; letter-spacing: .08em; padding: 18px 40px; }

@media (max-width: 900px) {
  .rsplit { grid-template-columns: 1fr; }
  .rsplit__photo { position: relative; height: clamp(280px, 46vw, 420px); }
  .rsplit__body { max-width: none; padding-top: clamp(50px, 8vw, 80px); }
}
@media (max-width: 768px) {
  .rtext p { font-size: 15.5px; line-height: 2.4; }
  .rvert { font-size: 15.5px; height: clamp(260px, 62vw, 340px); }
  .rflow li { gap: 13px; padding: 13px 15px; }
  .rflow__n { width: 29px; height: 29px; font-size: 16px; }
  .rflow__t { font-size: 14.5px; }
  .rtel { font-size: 22px; padding: 16px 28px; }
}

/* =========================================================
   写真を明るくしたぶん、その上に乗る文字を影で守る
   （近い影で輪郭を出し、遠い影で背景そのものを沈める）
   ========================================================= */
.shero__ttl, .band__ttl, .shop__name, .rsplit__ttl {
  text-shadow: 0 1px 4px rgba(0,0,0,.55), 0 2px 30px rgba(0,0,0,.6);
}
.shero__en, .shero__crumb, .band__en, .band__body, .shop__cat, .shop__desc {
  text-shadow: 0 1px 3px rgba(0,0,0,.6), 0 2px 16px rgba(0,0,0,.5);
}
/* 写真の上の補助テキストは、明るい面でも沈まないよう一段起こす */
.shop__cat  { color: #b8d6c6; }
.shop__desc { color: #dbe0da; }
.shero__crumb { color: #c3cec6; }


/* =========================================================
   応募フォーム（recruit.html）
   入力欄の文字は 16px を下回らないこと。iOS が勝手に拡大する。
   ========================================================= */
.eform { margin-top: 54px; }
.eform__h {
  font-family: 'Klee One', serif; font-size: 21px; letter-spacing: var(--ls-mid);
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.eform__lead { font-size: 16px; line-height: 2; color: var(--text-dim); margin-bottom: 30px; }

.eform__body { display: flex; flex-direction: column; gap: 24px; }
.eform__row { display: flex; flex-direction: column; gap: 9px; border: 0; padding: 0; margin: 0; min-width: 0; }

.eform__label {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  font-family: 'Klee One', serif; font-size: 16.5px; letter-spacing: .05em;
  padding: 0;
}
.eform__label i {
  font-style: normal; font-size: 12px; letter-spacing: .12em;
  padding: 3px 9px; color: var(--text);
  background: var(--green); border: 1px solid var(--green-lt);
}
.eform__note { font-family: 'Zen Kurenaido', sans-serif; font-size: 13.5px; color: var(--text-dim); letter-spacing: 0; }

.eform__in {
  width: 100%; font-family: inherit;
  font-size: 17px; line-height: 1.7; letter-spacing: .03em;
  color: var(--text); background: rgba(0,0,0,.34);
  border: 1px solid var(--line);
  padding: 13px 16px; outline: none;
  transition: border-color .25s ease, background .25s ease;
}
.eform__in:focus { border-color: var(--green-lt); background: rgba(0,0,0,.5); }
.eform__area { resize: vertical; min-height: 130px; }

/* チェックボックスは既製の四角が黒地で見えないので、自前で描く */
.eform__checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.eform__check {
  display: flex; align-items: center; gap: 11px;
  font-size: 16px; line-height: 1.5;
  padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(0,0,0,.24);
  transition: border-color .25s ease, background .25s ease;
}
.eform__check:hover { border-color: var(--green-lt); }
.eform__check input {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 19px; height: 19px; margin: 0; cursor: pointer;
  border: 1px solid var(--green-lt); background: transparent;
  display: grid; place-items: center;
}
.eform__check input::after {
  content: ''; width: 10px; height: 10px; background: var(--green-lt);
  transform: scale(0); transition: transform .2s cubic-bezier(.16,.84,.44,1);
}
.eform__check input:checked::after { transform: scale(1); }
.eform__check input:checked { background: rgba(48,88,68,.5); }
.eform__check:has(input:checked) { border-color: var(--green-lt); background: rgba(48,88,68,.3); }

.eform__send { align-self: flex-start; margin-top: 6px; cursor: pointer; font-family: 'Klee One', serif; }
.eform__policy { font-size: 13.5px; line-height: 1.9; color: var(--text-dim); }

/* ロボット除け。人には見せない */
.eform__honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

@media (max-width: 600px) {
  .eform__checks { grid-template-columns: 1fr; }
  .eform__send { align-self: stretch; justify-content: center; }
}

/* ---------- 送信完了ページ（thanks.html） ---------- */
.thanks {
  padding-top: clamp(130px, 22vh, 240px); padding-bottom: var(--gap);
  text-align: center;
}
.thanks__en { font-family: 'Caveat', cursive; font-size: 26px; color: var(--green-lt); margin-bottom: 14px; }
.thanks__ttl {
  font-family: 'Klee One', serif;
  font-size: clamp(26px, 4.4vw, 38px); line-height: 1.75; letter-spacing: var(--ls-mid);
  margin-bottom: 34px;
}
.thanks__lead { font-size: 17.5px; line-height: 2.3; margin-bottom: 26px; }
.thanks__note { font-size: 14.5px; line-height: 2; color: var(--text-dim); margin-bottom: 44px; }
.thanks__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
@media (max-width: 600px) {
  .thanks__btns .btn { flex: 1 1 100%; justify-content: center; }
}

/* =========================================================
   お知らせ（news.html）
   ・終わった回はたたんで、開催予定のものだけ開いて見せる
   ・長い本文を読ませるページなので、店舗ページと違って左寄せ
   ========================================================= */
.nwrap { padding-top: clamp(110px, 16vh, 170px); padding-bottom: var(--gap); }

.nhead { margin-bottom: clamp(34px, 6vw, 56px); }
.nhead__en { font-family: 'Caveat', cursive; font-size: 26px; color: var(--green-lt); margin-bottom: 8px; }
.nhead__ttl {
  font-family: 'Klee One', serif; font-size: clamp(30px, 5vw, 42px);
  letter-spacing: var(--ls-mid); line-height: 1.5; margin-bottom: 14px;
}
.nhead__note { font-size: 14.5px; color: var(--text-dim); }

.npost { max-width: 40em; margin-bottom: 14px; }

/* ---------- たたまれている状態 ---------- */
.nacc { border: 1px solid var(--line); background: rgba(48,88,68,.10); }
.nacc__head {
  display: flex; align-items: center; gap: 16px;
  padding: 20px clamp(16px, 3vw, 24px);
  cursor: pointer; list-style: none;
  transition: background .3s ease;
}
.nacc__head::-webkit-details-marker { display: none; }
.nacc__head:hover { background: rgba(48,88,68,.22); }
.nacc__head:focus-visible { outline: 2px solid var(--green-lt); outline-offset: -2px; }
.nacc__date {
  flex: none; font-family: 'Caveat', cursive; font-size: 20px;
  color: var(--green-lt); letter-spacing: .06em;
}
.nacc__ttl {
  flex: 1; min-width: 0;
  font-family: 'Klee One', serif; font-size: 17.5px; line-height: 1.7; letter-spacing: .03em;
}
/* 開閉のしるし。＋が×に回る */
.nacc__mark { flex: none; position: relative; width: 15px; height: 15px; }
.nacc__mark::before, .nacc__mark::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  background: var(--green-lt);
  transition: transform .3s cubic-bezier(.16,.84,.44,1), opacity .3s ease;
}
.nacc__mark::before { width: 15px; height: 1px; }
.nacc__mark::after  { width: 1px; height: 15px; }
.nacc[open] .nacc__mark::after { transform: rotate(90deg); opacity: 0; }

.nacc__body {
  padding: 4px clamp(16px, 3vw, 24px) clamp(28px, 5vw, 40px);
  border-top: 1px solid var(--line);
  margin-top: -1px;
  animation: nacc-open .4s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes nacc-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ---------- 開催予定のもの（開いたまま・閉じられない） ---------- */
.npost.is-current { margin-bottom: 40px; }
.npost.is-current .nacc {
  border-color: var(--green-lt);
  background: rgba(48,88,68,.20);
}
.npost.is-current .nacc__head { cursor: default; padding-bottom: 16px; }
.npost.is-current .nacc__head:hover { background: none; }
.npost.is-current .nacc__mark { display: none; }
.npost.is-current .nacc__ttl { font-size: clamp(19px, 3vw, 23px); }
/* 「受付中」の目印 */
.npost.is-current .nacc__head::after {
  content: '受付中'; order: -1;
  flex: none; font-family: 'Zen Kurenaido', sans-serif; font-size: 12px; letter-spacing: .12em;
  padding: 4px 11px; color: var(--bg); background: var(--green-lt);
}
.npost.is-current .nacc__date { order: -2; }

/* ---------- 本文 ---------- */
.npost__lead {
  font-size: 17px; line-height: 2.2; margin: 22px 0 30px;
  padding-left: 16px; border-left: 2px solid var(--green-lt);
}
.npost__h {
  font-family: 'Klee One', serif; font-size: 18.5px; letter-spacing: .06em;
  margin: 36px 0 15px; padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.nacc__body p { font-size: 16.5px; line-height: 2.1; margin-bottom: 16px; }
.nacc__body .kv { margin-bottom: 16px; }
.npost__note { font-size: 14.5px !important; line-height: 1.95 !important; color: var(--text-dim); }

.ndates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 9px; margin: 0 0 20px; padding: 0; list-style: none;
}
.ndates li {
  font-size: 15.5px; padding: 10px 14px;
  border: 1px solid var(--line); background: rgba(48,88,68,.18);
  font-variant-numeric: tabular-nums;
}
.nlist { margin: 0 0 20px; padding-left: 1.4em; }
.nlist li { font-size: 16.5px; line-height: 2.05; margin-bottom: 6px; }

/* ---------- 持ち物の資料画像 ---------- */
.nfigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 0 0 18px; }
.nfig { margin: 0; }
.nfig a { display: block; overflow: hidden; background: #fff; border: 1px solid var(--line); }
.nfig img { width: 100%; height: auto; display: block; transition: transform .5s cubic-bezier(.16,.84,.44,1); }
.nfig a:hover img { transform: scale(1.03); }
.nfig figcaption { margin-top: 9px; font-size: 13.5px; color: var(--text-dim); text-align: center; }

.npost__act { margin: 26px 0 0; }
.nbook { background: var(--green-lt); border-color: var(--green-lt); color: var(--bg); font-weight: 600; }
.nbook:hover { background: var(--text); border-color: var(--text); }

.nback { margin-top: 40px; }

@media (max-width: 560px) {
  .nacc__head { gap: 11px; padding: 16px 15px; flex-wrap: wrap; }
  .nacc__date { font-size: 18px; }
  .nacc__ttl { font-size: 16.5px; flex-basis: 100%; }
  .nacc__mark { position: absolute; right: 15px; top: 19px; }
  .nacc { position: relative; }
  .npost__act .btn, .nback .btn { width: 100%; justify-content: center; }
}