@charset "UTF-8";
/* ==========================================================================
   MEGRIA — 公開サイト（megria.jp のトップ）

   ★ この1枚で完結させる。rinto.css / mock.css / shop.css を読み込まない。
     理由は2つ。
       1. 業務画面（rinto）とECストア（shop）は別の担当・別のセッションが
          触っている。共有すると、向こうの調整がそのまま公開サイトの見た目を
          変えてしまう。
       2. 公開サイトはヒーロー・セクション構成という別の作りで、業務画面の
          部品をほとんど使わない。
     色だけはブランドを合わせる（青 #1E7690 ／ 金茶 #B07C3A）。
   ========================================================================== */

:root {
  /* 主色は青。2026-09-02 のご指示で**茶（#6E5240）から入れ替えた**。
     ★ 管理画面（theme-staff.css）・会員様の画面（theme-customer.css）と
       **同じ #1E7690**。3枚が同じ色を持っているので、変えるときは3枚とも直す。
     ★ 地と面（--c-bg / --c-surface）は生成りのまま**残してある**。ロゴの
       「金のマークと青の波」と同じ組み合わせで、地まで寒色に振ると印象が入れ替わる。
     ★ 金茶（--c-accent）も**そのまま**。青と並べて「押せるもの」と
       「見出し・補助」を言い分けている。両方を青にすると区別が付かなくなる。
     ★ --c-primary-deep は**公開サイトだけの色**。下部の CTA の帯の、濃いほうの
       端に使う。業務画面には帯が無いので対応する色が無い。
       （MV でも使っていたが、MV は茶に戻したので今は CTA だけ） */
  --c-primary:      #1E7690;
  --c-primary-dark: #155B71;
  --c-primary-deep: #0F4557;
  --c-primary-soft: #EAF3F6;
  --c-primary-mid:  #AECDD8;
  /* ★ **MV（.hero）だけは茶のまま**（2026-09-02 のご指示）。写真に重ねる膜と
       その下の地に、上の青ではなく茶（#3A2A20〜#6E5240）を直に書いてある。
       **塗り忘れではない。**青にそろえないこと。 */
  --c-accent:       #B07C3A;
  --c-accent-dark:  #8E6229;
  --c-accent-soft:  #F8F0E2;

  --c-ink-900: #24201C;
  --c-ink-700: #3E3730;
  --c-ink-500: #6A6259;
  --c-line:    #E8E2DA;
  --c-line-soft:#F4F0EA;
  --c-bg:      #FAF8F5;
  --c-surface: #FFFFFF;

  --wrap: 1120px;
  --header-h: 76px;

  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-pill: 999px;
  --sh-1: 0 1px 2px rgba(36,32,28,.04), 0 2px 6px rgba(36,32,28,.05);
  --sh-2: 0 6px 14px rgba(36,32,28,.06), 0 18px 36px rgba(36,32,28,.08);

  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Meiryo", sans-serif;
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* 固定ヘッダーの下にアンカー先が潜らないようにする */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.9;
  color: var(--c-ink-900);
  background: var(--c-surface);
  letter-spacing: .02em;
}
img { max-width: 100%; height: auto; }
a { color: var(--c-primary); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- ヘッダー ---------- */

.shead {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--c-line);
}
.shead__bar { height: var(--header-h); display: flex; align-items: center; gap: 24px; }

.shead__brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex: none; }
.shead__logo {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, var(--c-primary) 0%, var(--c-primary-deep) 100%);
  color: #fff; font-family: var(--font-serif); font-size: 21px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(30,118,144,.3);
}
.shead__name { display: flex; flex-direction: column; line-height: 1.15; }
.shead__name b { font-family: var(--font-serif); font-size: 20px; font-weight: 600; letter-spacing: .12em; }
.shead__name small { font-size: 10px; letter-spacing: .22em; color: var(--c-ink-500); }

.shead__nav { display: flex; gap: 4px; margin-left: auto; }
.shead__nav a {
  padding: 8px 13px; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 500; color: var(--c-ink-700); text-decoration: none;
  white-space: nowrap;
}
.shead__nav a:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }

.shead__acts { display: flex; align-items: center; gap: 10px; flex: none; }

/* ---------- ハンバーガー（幅の狭い画面だけ出る） ----------
   ★ 2026-09-01：**狭い画面に入口が無かった。**それまでは 1000px 以下で
     ナビを display:none にしていただけで、メニュー・料金にも店舗情報にも
     たどり着けなかった（スクロールで探すしかなかった）。
   ★ ボタン2つ（ログイン・新規会員登録）も同時に隠す。ロゴと並べると
     360px 幅で横にはみ出し、ページ全体が横スクロールしていた。
     行き先はドロワーの中に全部入れてあるので、消してはいない。
   ★ 押せる面は 44px 角。指で押す最小の大きさ。 */
.shead__toggle {
  display: none;
  margin-left: auto; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 0; border-radius: 12px;
  color: var(--c-primary-dark); cursor: pointer;
  align-items: center; justify-content: center;
}
.shead__toggle:hover { background: var(--c-primary-soft); }
.shead__toggle-box { display: block; width: 22px; height: 15px; position: relative; }
.shead__toggle-box i {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}
.shead__toggle-box i:nth-child(1) { top: 0; }
.shead__toggle-box i:nth-child(2) { top: 6.5px; }
.shead__toggle-box i:nth-child(3) { top: 13px; }
/* 開いているあいだは×に変わる。閉じ方が分からない、を防ぐ */
.nav-open .shead__toggle-box i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-open .shead__toggle-box i:nth-child(2) { opacity: 0; }
.nav-open .shead__toggle-box i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- ドロワー（狭い画面のメニュー） ----------
   ★ 右から出す。ハンバーガーが右にあるので、出てくる向きをそろえる。
   ★ display で出し入れしない。**動きを付けるため**に visibility＋opacity で
     消しておき、開いたら滑り込ませる。
   ★ 背後の地（scrim）を押しても閉じる。閉じる×を探せない方のため。 */
.drawer {
  position: fixed; inset: 0; z-index: 100;
  visibility: hidden; pointer-events: none;
}
.nav-open .drawer { visibility: visible; pointer-events: auto; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(36,32,28,.5);
  opacity: 0; transition: opacity .28s ease;
}
.nav-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(88vw, 340px);
  display: flex; flex-direction: column;
  background: var(--c-surface);
  box-shadow: -12px 0 40px rgba(36,32,28,.22);
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  overflow-y: auto; overscroll-behavior: contain;
  /* 端末のノッチ・ホームバーを避ける */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-open .drawer__panel { transform: none; }

.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--c-line);
}
.drawer__logo { display: block; height: 30px; width: auto; }
.drawer__close {
  width: 40px; height: 40px; flex: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 10px;
  color: var(--c-ink-500); cursor: pointer;
}
.drawer__close:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }

.drawer__nav { display: flex; flex-direction: column; padding: 8px 0; }
.drawer__nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 15px 20px; text-decoration: none;
  font-size: 15.5px; font-weight: 500; color: var(--c-ink-900);
  border-bottom: 1px solid var(--c-line-soft);
}
.drawer__nav a:hover { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.drawer__nav a::after {
  content: ""; flex: none;
  width: 7px; height: 7px;
  border-right: 2px solid var(--c-primary-mid); border-bottom: 2px solid var(--c-primary-mid);
  transform: rotate(-45deg);
}
/* ★ ボタンは**縦に積む**。横に2つ並べると、狭い画面で文字が折り返す */
.drawer__acts { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.drawer__acts .btn { width: 100%; }
.drawer__facts {
  margin-top: auto; padding: 18px 20px 22px;
  border-top: 1px solid var(--c-line);
  font-size: 12.5px; line-height: 1.9; color: var(--c-ink-500);
}
.drawer__facts b { color: var(--c-ink-700); }

/* 画面の奥を触れないようにする。開いているあいだは後ろが動かない */
.nav-open, .nav-open body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .drawer__panel, .drawer__scrim, .shead__toggle-box i { transition: none; }
}

/* ---------- ボタン ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 26px; border: 0; border-radius: var(--r-pill);
  font-family: inherit; font-size: 15.5px; font-weight: 700; letter-spacing: .04em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--c-primary); color: #fff;
  box-shadow: 0 4px 14px rgba(30,118,144,.28);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(30,118,144,.32); }
.btn--ghost { background: transparent; color: var(--c-primary-dark); box-shadow: inset 0 0 0 1.5px var(--c-primary-mid); }
.btn--ghost:hover { background: var(--c-primary-soft); box-shadow: inset 0 0 0 1.5px var(--c-primary); }
.btn--gold { background: var(--c-accent); box-shadow: 0 4px 14px rgba(176,124,58,.3); }
.btn--gold:hover { box-shadow: 0 8px 20px rgba(176,124,58,.34); }
.btn--light { background: #fff; color: var(--c-primary-dark); box-shadow: 0 4px 14px rgba(0,0,0,.14); }
/* ★ お知らせのページの押しどころ（2026-09-10 のご指示）。**小さく・茶色。**
     ★ 青緑の大きな枠だと、読んでいただきたい記事より枠のほうが目立っていた。
       ここは読み終わったあとの道なので、記事より引いた見た目にする。
     ★ 色は NEXT／PREV や一覧へ戻る印と同じ金茶（--c-accent-dark）。同じページで
       同じ役目のものが2色あると、別のものに見える。
     ★ .btn--ghost（青緑）は**そのまま残す。**トップの「会員の方はログイン」や
       ヘッダーのログインが同じ形を使っており、あちらは押していただく側なので
       色も大きさも変えない。 */
.btn--news {
  min-height: 36px; padding: 0 16px;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  background: transparent;
  color: var(--c-accent-dark);
  box-shadow: inset 0 0 0 1.3px rgba(176, 124, 58, .55);
}
/* ★ 浮かせない（transform も影も戻す）。地の色だけで押せることが分かる。
     .btn の青い影が残ると、茶色の枠に青い光が付く。 */
.btn--news:hover {
  transform: none;
  background: var(--c-accent-soft);
  box-shadow: inset 0 0 0 1.3px var(--c-accent);
}

/* ---------- 濃い地・写真の上に置く白抜きのボタン（2026-09-02） ----------
   MV と、下部の CTA の帯で使う。
   ★ **もとは HTML 側に style= で直接書いていた。**インラインは CSS より強いので、
     :hover を書いても効かず、**触っても何も起きないボタンになっていた**
     （正確には .btn--ghost:hover の薄い地だけが効き、白い文字が読めなくなっていた）。
     class に出したのはこのため。**HTML に style= で書き戻さないこと。**
   ★ ふだんは枠線だけ。地は透明で、後ろの写真がそのまま見える。 */
.btn--onphoto {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}
/* ★ MV の上では、触ると**青（主色）で塗る**（ご指示）。MV の地は茶なので、
     青が乗ると押せる場所だとはっきり分かる。文字は白のまま（青地で 5.19:1）。 */
.hero .btn--onphoto:hover {
  background: var(--c-primary); color: #fff;
  box-shadow: inset 0 0 0 1.5px var(--c-primary);
}
/* ★ CTA の帯は**地がすでに青**なので、青で塗っても変化が見えない。
     ここだけ「白をうっすら乗せて枠線をはっきりさせる」形にする。 */
.cta .btn--onphoto:hover {
  background: rgba(255,255,255,.16); color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
}

/* ★ MV の中の白いボタンだけ、文字を茶にする（2026-09-02 のご指示）。
     MV は茶で残しているので、既定の青（--c-primary-dark）だと文字だけが浮く。
     ★ .btn--light は下部の CTA の帯（地が青）でも使っている。**そちらは青のまま**
       なので、.hero を頭に付けて MV に閉じ込めてある。 */
.hero .btn--light { color: #523C2D; }

/* ---------- 開業前の札（2026-09-02） ----------
   「オープンに合わせて公開」。ボタンの場所に出る、押せない表示。
   ★ **opacity で薄くしない。**もとは HTML に style="opacity:.55" と書いていたが、
     オンラインショップの帯に写真を敷いた結果、**札ごと透けて文字が読めなくなった**
     （ちょうど下がカプセルの器で、いちばん細かい所に重なる）。
   ★ 押せないことは、地を白く落として金茶の枠線にすることで伝える。
     塗りつぶしのボタン（ショップを見る）と見分けが付けば足りる。
   ★ pointer-events も CSS 側に持たせた。HTML に style= で書き戻さないこと。 */
.btn--soon {
  background: #fff; color: var(--c-accent-dark);
  cursor: default; pointer-events: none;
}
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }

/* ---------- ヒーロー ---------- */

/* ★ 2026-09-01：**MV の高さをたっぷり取る**（ご指示）。
   それまでは中身（padding 96/104px）の分しか高さが無く、写真が帯にしか見えなかった。
   ★ 高さは clamp で決める。**画面いっぱい（100vh）にはしない。**
     下に続きがあることが分からなくなると、そこで読むのをやめてしまう。
     いちばん下に次の節の頭が少しだけのぞく 88vh にしてある。
   ★ 上限 960px を付けているのは、縦に長い外部モニタ（1440px 超）で
     写真だけが延々と伸びるのを避けるため。
   ★ 下限 600px は、横向きのスマホ・低い画面でも文字が詰まらない高さ。
   ★ dvh はブラウザのアドレスバーの出入りに追従する単位。対応していない
     ブラウザには先に書いた vh のほうが残る（**2行の順番を入れ替えないこと**）。
   ★ 中身は flex で上下中央に置く。高さを増やしたぶん、文字が上に寄ったままだと
     下半分が空いて見える。 */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(600px, 88vh, 960px);
  /* ★ **ここは茶のまま**（2026-09-02 のご指示）。ページの主色は青（#1E7690）に
       入れ替えたが、**MV だけは茶で残す**というご指示。写真が肌と暖色の
       タオルなので、寒色の膜をかけると顔色まで変わって見える。
       ★ 変数（--c-primary ほか）を使わず**色を直に書いてある**のはこのため。
         変数に戻すと、次に主色を変えたときに MV まで一緒に動いてしまう。 */
  background:
    radial-gradient(ellipse at 18% 12%, rgba(176,124,58,.30) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 78%, rgba(217,198,180,.34) 0%, transparent 52%),
    linear-gradient(152deg, #3A2A20 0%, #57402F 48%, #6E5240 100%);
  color: #fff;
}
@supports (min-height: 100dvh) {
  .hero { min-height: clamp(600px, 86dvh, 960px); }
}
/* ★ 細い縦線の装飾は外した（2026-09-01）。**写真が入るまでの繋ぎ**として
   置いていたもので、MV が入った以上は写真の上に線が乗るだけになる。

   ---------- MV（3枚をゆっくり入れ替える） ----------
   ★ **JS を持たない。**同じアニメーションを1枚ずつ時間をずらして当てているだけ。
     枚数を変えるときは、この :nth-child と home.php の img を足し引きする。
   ★ 1周 24秒／1枚あたり8秒。**ゆっくり**というご指示なので、切り替えにも
     時間をかけて溶かす。動きで気を引く面ではない。
   ★ 途中で「どれも消えている瞬間」を作らないこと。delay を 8秒ずつずらしてあり、
     どの時点でも必ずどれか1枚が opacity:1 になっている。 */
/* ★ 重なり順を明示する。::before は .hero の**最初の子**として描かれるので、
   あとから置いた .hero__slides のほうが上に来てしまい、膜が写真の下に入る
   （実際にそうなって文字が読めなかった）。写真 0 → 膜 1 → 文字 2 で固定する。 */
.hero__slides { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* ★ object-fit で切り抜く。縦横比の違う写真を混ぜても崩れない */
  object-fit: cover; object-position: center 42%;
  opacity: 0;
  animation: heroFade 24s linear infinite;
}
.hero__slide:nth-child(2) { animation-delay: -8s; }
.hero__slide:nth-child(3) { animation-delay: -16s; }

@keyframes heroFade {
  0%   { opacity: 0; }
  6%   { opacity: 1; }
  33%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

/* ★ 動きを減らす設定にしている方には切り替えない。1枚だけ出す。
   目の疲れやめまいに関わるので、見た目より優先する。 */
@media (prefers-reduced-motion: reduce) {
  .hero__slide { animation: none; opacity: 0; }
  .hero__slide:first-child { opacity: 1; }
}

/* ★ 写真の上にかける膜。**白い文字を読ませるために要る。**
   左を濃く、右を薄くして、文字のある側だけしっかり沈める。 */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  /* ★ 2026-09-01 のご指示で**左から右へ抜ける**形にした。
     文字のある左端はしっかり茶で沈め、右へ行くほど薄れて、
     右端は完全に透明（写真がそのまま見える）。
     ★ 途中の 40% を .62 に置いているのは、文字の右端（約720px）までは
       まだ濃さを残すため。ここを外すと、長い行の終わりが読みにくくなる。
     ★ 上下の薄いかぶせは残す。ヘッダーの白と、下の節との境目をなじませている。 */
  background:
    linear-gradient(90deg,
      rgba(43,31,22,.92) 0%,
      rgba(43,31,22,.80) 22%,
      rgba(43,31,22,.62) 40%,
      rgba(43,31,22,.30) 66%,
      rgba(43,31,22,0)   88%),
    linear-gradient(180deg, rgba(43,31,22,.26) 0%, transparent 26%, rgba(43,31,22,.30) 100%);
}
/* ★ 高さは .hero の min-height が決めるようになったので、ここは
   「上下に最低限これだけは空ける」ぶんだけ持たせる（2026-09-01）。
   ヘッダーが上に重なるので、上を少し厚くしてある。 */
.hero__inner { position: relative; z-index: 2; padding: 72px 0 64px; max-width: 720px; }
/* .hero を flex にしたので、中の .wrap が横いっぱいに伸びるようにしておく */
.hero > .wrap { flex: 1 1 auto; min-width: 0; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 600; letter-spacing: .3em;
  color: var(--c-accent-soft); margin-bottom: 26px;
}
.hero__eyebrow::before { content: ""; width: 34px; height: 1px; background: var(--c-accent); }
.hero__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(30px, 5.2vw, 50px); line-height: 1.5; letter-spacing: .06em;
  margin: 0 0 26px;
}
.hero__title em { font-style: normal; color: #EBD9BC; }
.hero__lead { font-size: 16.5px; line-height: 2.1; color: rgba(255,255,255,.9); margin: 0 0 36px; }
.hero__acts { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__facts {
  display: flex; flex-wrap: wrap; gap: 10px 28px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.2);
  font-size: 14px; color: rgba(255,255,255,.86);
}
.hero__facts b { color: #fff; font-weight: 700; }

/* ---------- セクション ---------- */

.sec { padding: 86px 0; }
.sec--tint { background: var(--c-bg); }
.sec--soft { background: var(--c-primary-soft); }

.sec__head { max-width: 720px; margin: 0 0 44px; }
.sec__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.sec__label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .28em;
  color: var(--c-accent-dark); margin-bottom: 12px;
}
.sec__title {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(23px, 3.4vw, 33px); line-height: 1.6; letter-spacing: .05em;
  margin: 0 0 16px;
}
.sec__lead { font-size: 15.5px; color: var(--c-ink-700); margin: 0; }

/* ---------- カード（3本柱・流れ・マイページ） ---------- */

.grid { display: grid; gap: 22px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--sh-1);
}
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  background: var(--c-primary-soft); color: var(--c-primary);
  display: flex; align-items: center; justify-content: center;
}
.card__icon .material-symbols-outlined { font-size: 25px; }
.card__title { font-size: 18px; font-weight: 700; margin: 0 0 10px; letter-spacing: .03em; }
.card__text { font-size: 14.5px; line-height: 1.95; color: var(--c-ink-700); margin: 0; }

/* ---------- オンラインショップの帯（2026-09-02 のご指示） ----------
   写真を背景に敷いた1枚。**もとは MENU 節の頭に敷いていた写真**を、
   ドリンクとサプリメントが写っていて中身と合うこちらへ移した。

   ★ 写真は右を見せる。品物が右半分に寄っているので、background-position を
     右に寄せて、**左に文字の居場所を空ける**。
   ★ 文字の下には**白の膜**を左から重ねる。写真の左は白い大理石なので
     ふだんは膜が無くても読めるが、幅が変わると品物が左まで寄ってくる。
     膜が無いと、そのとき文字が読めなくなる。
   ★ 背景色（--c-surface）を写真より先に置いてある。**写真を置き忘れても
     白いカードとして成立する**（空の枠にならない）。
   ★ 高さは中身が決める。min-height は「写真が帯に見える最低限」だけ。
     文言が増えても切れない。 */
.shopban {
  position: relative; overflow: hidden;
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 20px;
  align-items: center; justify-content: space-between;
  padding: 34px 32px;
  min-height: 210px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  background: var(--c-surface) url("img/shop-bg.jpg") right center / cover no-repeat;
}
.shopban::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.88) 42%,
    rgba(255,255,255,.55) 66%,
    rgba(255,255,255,0)   92%);
}
/* 膜は ::before が敷くので、中身は必ずその上へ出す */
.shopban > * { position: relative; z-index: 1; }
.shopban__body { max-width: 620px; }
.shopban__title { font-size: 18px; font-weight: 700; margin: 0 0 6px; letter-spacing: .03em; }
.shopban__text { font-size: 14.5px; line-height: 1.95; color: var(--c-ink-700); margin: 0; }
/* ★ ボタンの周りに白の縁を回す。**写真の中でいちばん細かい所（カプセルの器）に
     ちょうど重なる**ため、縁が無いと金のボタンが写真に溶けて見える。
     影ではなく縁なので、地の色が変わっても効き目が変わらない。 */
.shopban .btn {
  box-shadow: 0 0 0 7px rgba(255,255,255,.62), 0 4px 14px rgba(176,124,58,.3);
}
/* 帯の中では、写真から浮かせるための白い縁も一緒に回す
   （.shopban .btn の box-shadow を上書きするので、必ずその後に置く） */
.shopban .btn--soon {
  box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 0 0 7px rgba(255,255,255,.62);
}

/* ★ 狭い画面では文字とボタンが上下に積まれ、**文字が写真の全幅にかかる**。
     左右に抜ける膜では右端の品物の上に文字が乗るので、ここだけ
     「全面にうっすら」へ切り替える。写真は地の模様として残る。 */
@media (max-width: 900px) {
  .shopban {
    padding: 28px 24px; min-height: 0;
    background-position: 74% center;
  }
  .shopban::before {
    background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.87) 100%);
  }
}

/* 手順（ご利用の流れ） */
.step { position: relative; padding-left: 62px; }
.step__n {
  position: absolute; left: 0; top: 2px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--c-primary); color: #fff;
  font-family: var(--font-serif); font-size: 19px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.step__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; }
.step__text { font-size: 14.5px; line-height: 1.95; color: var(--c-ink-700); margin: 0; }

/* ---------- 料金表 ---------- */

.price { display: grid; gap: 16px; }
.price__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 24px 28px; box-shadow: var(--sh-1);
}
.price__row--feature { border-color: var(--c-accent); background: var(--c-accent-soft); }
.price__name { font-size: 18px; font-weight: 700; letter-spacing: .03em; }
.price__meta { font-size: 13.5px; color: var(--c-ink-500); }
.price__amount {
  margin-left: auto; font-family: var(--font-serif);
  font-size: 27px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.price__amount small { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--c-ink-500); margin-left: 6px; }

/* ---------- メニュー（カテゴリごとのカード。2026-09-01 のご指示） ----------
   ★ それまでは名前と金額だけの1行が11本並んでいた。増えると探せないので、
     カテゴリで束ね、写真を添えたカードにする。
   ★ **写真はファイルを置けば出る。**app/public/assets/img/menu/<code>.jpg。
     無いあいだはカテゴリのアイコンを薄く置く（空の枠にしない）。
   ★ 料金は右下に固定。カードの高さがそろわなくても、目線が同じ位置で拾える。 */

.mcat { margin-top: 40px; }
.mcat:first-of-type { margin-top: 0; }
.mcat__title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 21px; letter-spacing: .06em; color: var(--c-ink-900);
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.mcat__title .material-symbols-outlined { font-size: 24px; color: var(--c-accent); }

/* ★ 2026-09-01：折り返す格子をやめ、**1行に並べて横へ流す**（ご指示）。
   2段に折り返すと、行の途中で目が切れて件数が読み取りにくい。
   ★ カードの幅は固定寄り（clamp）。可変にすると、件数によって1枚の大きさが
     変わり、カテゴリ間で見た目がそろわない。
   ★ scroll-snap で1枚ずつ気持ちよく止める。横棒は隠すが、指のスワイプと
     マウスの横スクロールでは動く（矢印はマウスだけの方のための補助）。 */
.mcarousel { position: relative; }
.mcards {
  display: flex; gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* 影が切れないよう上下に少し余白を取る */
  padding: 4px 2px 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.mcards::-webkit-scrollbar { display: none; }
.mcards > .mcard { flex: 0 0 clamp(255px, 31%, 340px); scroll-snap-align: start; }

/* 送りの矢印。はみ出しているときだけ JS が出す */
.mcarousel__nav {
  position: absolute; top: 40%; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--c-line);
  box-shadow: 0 4px 14px rgba(58,42,32,.16);
  color: var(--c-primary); cursor: pointer;
}
.mcarousel__nav:hover { border-color: var(--c-accent); color: var(--c-accent-dark); }
.mcarousel__nav--prev { left: -14px; }
.mcarousel__nav--next { right: -14px; }
.mcarousel__nav[hidden] { display: none; }

.mcard {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.mcard:hover { box-shadow: 0 10px 26px rgba(58,42,32,.10); transform: translateY(-2px); }
/* 初回のメニューだけ縁を金茶に。いちばん最初に選ぶものなので目を止める */
.mcard--feature { border-color: var(--c-accent); }

/* ★ 管理画面のプレビューで見に来たカード（2026-09-07）。
     ★ **スタッフでログイン中のときしか付かない。**お客様には出ない印。
     ★ 枠を外側に描く（outline）。border を太くすると、そのカードだけ
       内側の幅が変わって、実際の見え方とずれてしまう。 */
.mcard.is-preview {
  outline: 3px solid var(--c-accent-dark);
  outline-offset: 3px;
}

.mcard__pic {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: linear-gradient(150deg, var(--c-accent-soft) 0%, #F3EDE4 100%);
  display: flex; align-items: center; justify-content: center;
}
.mcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 写真がまだ無いときの代わり。薄く置いて、面が空に見えないようにする */
.mcard__ph { font-size: 46px; color: rgba(176,124,58,.34); }
.mcard__badge {
  position: absolute; left: 12px; top: 12px;
  /* ★ site.css の変数は --c-accent-dark。--c-accent-deep は業務画面側の名前で
     ここには無く、指定しても効かない（実際に薄いまま出た）。 */
  background: var(--c-accent-dark); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 10px; border-radius: 999px;
}

.mcard__body { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.mcard__name { font-size: 16.5px; font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.mcard__desc { font-size: 13.5px; line-height: 1.9; color: var(--c-ink-500); margin: 8px 0 0; }
.mcard__foot {
  display: flex; align-items: baseline; justify-content: flex-end; gap: 10px;
  margin-top: auto; padding-top: 14px;
}
/* 分数（.mcard__time）は 2026-09-17 のレビュー会で外した。値段だけを右に置く */
.mcard__price {
  font-family: var(--font-serif); font-size: 22px; font-weight: 600;
  letter-spacing: .02em; color: var(--c-primary-dark);
}
.mcard__note { font-size: 12px; line-height: 1.8; color: var(--c-ink-500); margin: 10px 0 0; }

@media (max-width: 560px) {
  .mcards { gap: 14px; }
  .mcards > .mcard { flex-basis: 78%; }
  .mcarousel__nav { display: none; }   /* 狭い画面は指で送れるので矢印を出さない */
  .mcat__title, .tcat__title { font-size: 18px; }
}

.tag {
  display: inline-block; padding: 3px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  background: var(--c-primary-soft); color: var(--c-primary-dark);
}
.tag--gold { background: var(--c-accent); color: #fff; }

/* 回数券 */
/* ★ 2026-09-02：**カテゴリごとに束ねる**（ご指示）。それまでは
     5回/10回/20回 × 4カテゴリの12枚が、見出しも無く4列に並んでいた。
     「¥96,140 の 5回券」が何の5回券なのか、画面からは読み取れなかった。
   ★ 束ね方は MENU 節（.mcat）にそろえてある。同じページに「束ねた見た目」が
     2種類あると、別の意味のまとまりに見える。 */
.tcat + .tcat { margin-top: 34px; }
.tcat__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  padding-bottom: 12px; margin-bottom: 18px;
  border-bottom: 1px solid var(--c-line);
}
/* ★ 見出しの見た目は MENU 節（.mcat__title）と同じ。アイコンも同じものが出る
     （SQL でカテゴリごと引いているため）。同じページで同じカテゴリが
     別の顔をしていると、別のまとまりに見える。
   ★ 罫線は .tcat__head 側が持つ。都度の料金を同じ行の右に置くため、
     .mcat__title のように見出し自身には引かない。 */
.tcat__title {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-serif); font-weight: 600;
  font-size: 21px; letter-spacing: .06em; color: var(--c-ink-900);
  margin: 0;
}
.tcat__title .material-symbols-outlined { font-size: 24px; color: var(--c-accent); }
/* 都度の料金。**回数券が「何と比べて安いのか」の基準**なので、見出しと同じ行に
   置いて、下のカードの %OFF と目で結べるようにする。 */
/* ★ 金額を**大きく出す**（2026-09-10 のご指示）。下のカードの %OFF は
     すべてこの数字と比べたもので、**ここが読めないと割引の意味が分からない。**
     15px では見出しの陰に隠れて、注意書きのように見えていた。
   ★ 見出しと同じ明朝にして、同じ行の左右で釣り合わせる。 */
.tcat__single { margin: 0 0 0 auto; font-size: 13px; color: var(--c-ink-500); }
.tcat__single b {
  font-family: var(--font-serif); font-size: 23px; font-weight: 600;
  letter-spacing: .02em; color: var(--c-ink-900); margin-left: 4px;
}

.tcat__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
/* ★ 高さを詰めた（2026-09-10 のご指示）。3枚を見比べるカードなので、
     背が高いと3枚が同時に目に入らない。中身は**ひとつも減らしていない**。
     余白と行の取り方だけを詰めてある。 */
.ticket {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: 16px 20px 14px; box-shadow: var(--sh-1);
}
.ticket__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ticket__count { font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1.1; }
.ticket__count span { font-size: 14px; font-family: var(--font-sans); font-weight: 500; margin-left: 2px; }
/* ★ 割引の札は**金茶**にする。青は「押せるもの」に使っているので、
     押せない札を青にすると触れると思わせてしまう。 */
.ticket__off {
  flex: none; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--c-accent-soft); color: var(--c-accent-dark);
}
/* ★ **大きく出すのは1回あたり**（2026-09-18 のご指示）。会員様の画面（.tkprice）と
     同じ並びにそろえた。総額だけを大きく出すと高く見え、回数で割った額が伝わらない。 */
.ticket__price {
  font-size: 23px; font-weight: 700; margin: 8px 0 0; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
/* 「／1回」。金額の添えなので小さく、色は落とさない（数字と地続きに読ませる） */
.ticket__per { font-size: 13px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
/* ★ 総額は小さく添える。**消さない**（ご契約いただく金額なので必ず同じ場所に出す）。
   ★ 有効期限は**同じ行の右端**へ寄せた（2026-09-10）。仕切り線を挟んで
     1行取っていたぶん、カードが 30px ほど高くなっていた。
   ★ 有効期限は**同じ行の右端**へ寄せた（2026-09-10）。仕切り線を挟んで
     1行取っていたぶん、カードが 30px ほど高くなっていた。 */
/* ★ 入りきらないときは**2行に折り返す。**「1回あたり」と金額が離れて
     折れるのを止めるため、それぞれを nowrap にしてある（3列のまま画面が
     狭くなる 700〜900px あたりで起きていた）。 */
.ticket__meta {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 2px 10px; margin-top: 3px;
}
/* ★ 総額は主色にせず、太字にもしない。主役は上の「1回あたり」で、ここは添え（2026-09-18）。
     b が残っている画面（ほかの節で使い回している）でも太くならないように打ち消す。 */
.ticket__unit { font-size: 13px; color: var(--c-ink-500); white-space: nowrap; }
.ticket__unit b { font-weight: 400; color: inherit; }
.ticket__term { font-size: 12.5px; color: var(--c-ink-500); white-space: nowrap; }

.note {
  margin-top: 22px; padding: 18px 22px;
  background: var(--c-line-soft); border-radius: var(--r-md);
  font-size: 13.5px; line-height: 1.9; color: var(--c-ink-700);
}
.note ul { margin: 0; padding-left: 1.2em; }
.note li + li { margin-top: 5px; }

/* ---------- 店舗情報 ---------- */

.info { width: 100%; border-collapse: collapse; }
.info th, .info td { text-align: left; padding: 16px 4px; border-bottom: 1px solid var(--c-line); font-size: 15px; vertical-align: top; }
.info th { width: 160px; font-weight: 700; color: var(--c-ink-700); white-space: nowrap; }
.info .is-tbd { color: var(--c-ink-500); }

/* ---------- よくあるご質問 ---------- */

/* カテゴリの札（2026-09-14 のご指示）。押すとその区切りだけを残す。
   ★ **角丸の枠は付けない。横一列に並べる**（同日2回目のご指示）。
     折り返さず、画面が狭いときはこの列だけ横になぞって動かす。
   ★ 選んでいる札は、色と下線で示す。塗りや枠を使わないぶん、
     選んだかどうかが**2つの手がかり**で分かるようにしてある。
   ★ 横にはみ出していることが分かるよう、スクロールバーは消さない。 */
.faq__cats {
  display: flex; flex-wrap: nowrap; gap: 4px;
  margin-bottom: 22px; padding-bottom: 2px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.faq__cat {
  flex: none; padding: 8px 14px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--c-ink-500); text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.faq__cat:hover { color: var(--c-accent-dark); }
.faq__cat.is-on { color: var(--c-accent-dark); border-bottom-color: var(--c-accent-dark); }

.faq { border-top: 1px solid var(--c-line); }

/* 区切りごとの開閉（2026-09-14 のご指示）。見出しの右の「＋」で開く。
   ★ 入れ物ごと details にしてあるので、開け閉てに JavaScript は要らない。
   ★ 質問の行（.faq__item）と見た目がぶつからないよう、見出しは
     明朝・小さめ・下線なしにして、**質問より一段うしろ**に置く。 */
.faq__group { border-bottom: 1px solid var(--c-line); }
.faq__gttl {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 20px 4px;
}
.faq__gttl::-webkit-details-marker { display: none; }
/* ★ 2026-09-14 のご指示で 17px → 20px。区切りの名前は**この面の入口**なので、
     質問（16px）より一回り大きくして、先に目に入るようにする。
     節の見出し（clamp 23〜33px）は超えないところで止める。 */
.faq__gname {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 20px; letter-spacing: .06em; color: var(--c-accent-dark);
  margin: 0;
}
.faq__gcount { font-size: 12px; font-weight: 700; color: var(--c-ink-500); letter-spacing: .04em; }
/* 「＋」。開くと横棒が重なって「−」になる */
.faq__gmark { position: relative; width: 15px; height: 15px; flex: none; margin-left: auto; }
.faq__gmark::before,
.faq__gmark::after {
  content: ""; position: absolute; left: 0; top: 6.5px;
  width: 15px; height: 2px; background: var(--c-ink-500);
  transition: transform .15s ease;
}
.faq__gmark::after { transform: rotate(90deg); }
.faq__group[open] .faq__gmark::after { transform: rotate(0); }
.faq__group[open] .faq__gmark::before,
.faq__group[open] .faq__gmark::after { background: var(--c-accent-dark); }

.faq__item { border-bottom: 1px solid var(--c-line); }
/* 区切りの中のいちばん下。**線を二重に引かない**（下は区切り自身が引いている） */
.faq__qs .faq__item:last-child { border-bottom: 0; }
.faq__item summary {
  list-style: none; cursor: pointer; padding: 22px 44px 22px 34px; position: relative;
  font-size: 16px; font-weight: 700; letter-spacing: .02em;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before {
  content: "Q"; position: absolute; left: 0; top: 22px;
  font-family: var(--font-serif); font-size: 17px; color: var(--c-accent-dark);
}
.faq__item summary::after {
  content: ""; position: absolute; right: 8px; top: 32px;
  width: 9px; height: 9px; border-right: 2px solid var(--c-ink-500); border-bottom: 2px solid var(--c-ink-500);
  transform: rotate(45deg); transition: transform .15s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg); }
.faq__body { padding: 0 44px 24px 34px; font-size: 14.5px; line-height: 2; color: var(--c-ink-700); }
/* 答えが複数の段落にわたるもの（持ち物・当日キャンセル・写真など）。
   原稿の改行をそのまま段落にしている。1つにつなげると読みどころが消える */
.faq__body p { margin: 0 0 14px; }
.faq__body p:last-child { margin-bottom: 0; }

/* ---------- 締めのCTA ---------- */

.cta {
  background: linear-gradient(140deg, var(--c-primary-deep) 0%, var(--c-primary) 100%);
  color: #fff; text-align: center; padding: 80px 0;
}
.cta__title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(23px, 3.4vw, 32px); letter-spacing: .05em; margin: 0 0 16px; }
.cta__lead { font-size: 15.5px; color: rgba(255,255,255,.88); margin: 0 0 32px; }
.cta__acts { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- フッター ---------- */

.sfoot { background: #2C2119; color: rgba(255,255,255,.72); padding: 56px 0 32px; font-size: 14px; }
.sfoot__top { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; margin-bottom: 26px; }
.sfoot__brand b { display: block; font-family: var(--font-serif); font-size: 22px; font-weight: 600; letter-spacing: .14em; color: #fff; }
.sfoot__brand small { font-size: 11px; letter-spacing: .22em; color: rgba(255,255,255,.5); }
.sfoot__links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.sfoot__links a { color: rgba(255,255,255,.8); text-decoration: none; }
.sfoot__links a:hover { color: #fff; text-decoration: underline; }
/* ★ 2026-09-01：罫線まわりの余白をそろえた（ご指示）。
   それまでは「線の上が 62px・下が 22px」のように上下でばらばらで、
   線が下の文字にくっついて見えていた。**どの線も上下 20px** にする。
   ★ 線は各かたまりの**上**に付ける。下に付けると、最後のかたまりだけ
     線が余って宙に浮く。 */
.sfoot__copy { border-top: 1px solid rgba(255,255,255,.14); padding-top: 20px; font-size: 12.5px; color: rgba(255,255,255,.5); }

/* ---------- 準備中の帯 ---------- */

.openbar {
  background: var(--c-accent-soft); color: #6B5326;
  font-size: 13.5px; text-align: center; padding: 10px 24px; line-height: 1.7;
}
.openbar b { color: #4E3C1B; }

/* ---------- 画面幅 ---------- */

/* ★ ロゴ画像に差し替えた（2026-08-26）。文字だったころの字送りの指定が
     img には効かないので、大きさだけここで決める。 */
.shead__logoimg { display: block; height: 34px; width: auto; }
/* ★ 2026-09-01：42 → 62px（ご指示）。フッターは地が濃く、ロゴは白抜きなので
   大きくしても重くならない。縦横比 393:101 なので幅は約 241px。 */
.sfoot__logoimg { display: block; height: 62px; width: auto; }

/* ノートPC（1100〜1240px）。ナビが7つあるので、ここで字と余白を詰めておく。
   詰めないと、この幅でロゴ＋ナビ＋ボタン2つが収まらずに折り返す。 */
@media (max-width: 1240px) {
  .shead__bar { gap: 16px; }
  .shead__nav a { padding: 8px 9px; font-size: 13.5px; }
  .shead__acts { gap: 8px; }
}

@media (max-width: 1000px) {
  .grid--3 { grid-template-columns: 1fr 1fr; }
  /* ★ ここから下はハンバーガーに切り替える。**ナビもボタンも隠すが、
     行き先はドロワーに全部入っている**（2026-09-01）。 */
  .shead__nav { display: none; }
  .shead__acts { display: none; }
  .shead__toggle { display: flex; }
  .sec { padding: 72px 0; }
}
@media (max-width: 720px) {
  /* ヘッダーを少し低くする。MV と本文に使える高さが増える。
     [id] の scroll-margin-top もこの値を見ているので、
     アンカーで飛んだときの位置は自動でついてくる */
  :root { --header-h: 64px; }
  .wrap { padding: 0 20px; }
  .sec { padding: 56px 0; }
  /* ★ スマホの MV。**PC ほど高くしない。**縦長の画面で 88vh を取ると、
     写真だけで1画面が終わってしまい、何のサロンかが読めないまま
     スクロールが始まる。文字が入りきる高さに留める。 */
  .hero { min-height: clamp(520px, 78vh, 760px); }
  .hero__inner { padding: 52px 0 56px; }
  .hero__lead { font-size: 15.5px; line-height: 2; margin-bottom: 30px; }
  .hero__eyebrow { margin-bottom: 18px; font-size: 11px; letter-spacing: .24em; }
  .openbar { font-size: 12.5px; padding: 9px 16px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .card { padding: 26px 22px; }
  .price__row { padding: 20px 22px; }
  .price__amount { margin-left: 0; font-size: 24px; }
  .info th, .info td { display: block; width: auto; border-bottom: 0; padding: 4px 0; }
  .info td { padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
  .hero__acts .btn, .cta__acts .btn { flex: 1 1 100%; }
  .sfoot__top { flex-direction: column; }

  /* ヘッダー。**ロゴ＋ボタン2つが横1列に収まらず、ページ全体が横にはみ出していた。**
     2026-09-01 に、ナビとボタンをドロワーへ移して（上の 1000px の指定）根本から直した。
     ここに残すのは、ロゴとハンバーガーの間隔だけ。
     ★ .btn は white-space: nowrap なので、収まらないと折り返さずに突き抜ける。
       ヘッダーに何かを足すときは 360px 幅で必ず確認すること。 */
  .shead__bar { gap: 12px; }

  /* 節の中の細かい詰め。狭い画面では余白が効きすぎて、
     1画面に見出ししか入らなくなる */
  .sec__head { margin-bottom: 32px; }
  .grid { gap: 16px; }
  .faq__item summary { padding: 18px 30px 18px 26px; font-size: 15px; }
  .faq__item summary::before { top: 18px; font-size: 15px; }
  .faq__item summary::after { top: 27px; right: 4px; }
  .faq__body { padding: 0 6px 20px 26px; font-size: 14px; }
  .note { padding: 16px 18px; font-size: 13px; }
  .step { padding-left: 54px; }
  .step__n { width: 38px; height: 38px; font-size: 17px; }
  .cta { padding: 62px 0; }
  .sfoot { padding: 44px 0 26px; }
  .sfoot__links { gap: 8px 20px; font-size: 13.5px; }
  .sfoot__logoimg { height: 48px; }
}

/* 小さめのスマートフォン（iPhone SE など 360〜390px）。
   ここまで来たら、ロゴはさらに小さくてよい。 */
@media (max-width: 400px) {
  .shead__brand { gap: 8px; }
  .shead__logoimg { height: 24px; }
}

/* 回数券。3列が入るのは 700px あたりまで。そこから下は1枚ずつ縦に積む。
   ★ **2列にはしない。**5回/10回/20回 の3枚なので、2列だと最後の1枚だけが
     次の行に残って、並びが比べものに見えなくなる。
   ★ 縦に積むぶん1枚を横長にして、回数・金額・1回あたりを1行で読ませる。 */
@media (max-width: 700px) {
  .tcat__grid { grid-template-columns: 1fr; gap: 10px; }
  .tcat__single { margin-left: 0; }
  .ticket {
    display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 16px; row-gap: 2px; padding: 16px 18px;
  }
  .ticket__top { flex-direction: column; align-items: flex-start; gap: 4px; grid-row: span 2; }
  .ticket__price { margin: 0; font-size: 21px; }
  /* ★ 1回あたりと有効期限は1つの行になった（2026-09-10）。
       ★ ただし狭いところでは**必ず縦に2行**にする。横に並べると、
         「10回」「12%OFF」のように左の列が広い券だけ折り返して、
         5回・10回・20回でカードの高さが揃わなくなる。
         3枚を見比べるものなので、高さが違うと比べにくい。 */
  .ticket__meta {
    grid-column: 2; margin-top: 2px;
    flex-direction: column; align-items: flex-start; gap: 1px;
  }
}

/* 横向きのスマートフォン。高さが 500px ほどしかないので、
   MV に 78vh も割くと文字が入らない。ここだけ高さの指定を外す */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; }
  .hero__inner { padding: 44px 0; }
}

/* 端末の設定で動きを減らしている人には、スクロールの追従とホバーの浮きを止める */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
}


/* 営業のご案内。ヒーローから移した（2026-09-01 のご指示）。
   ★ お問い合わせ先の**すぐ上**に置く。「いつ開いているか」と「どこに聞くか」は
     続けて読むものなので、間に別のものを挟まない。
   ★ 区切りの線はこの節にだけ引く。フッターの中で塊が分かれて見えるようにする。 */
.sfoot__facts {
  display: flex; flex-wrap: wrap; gap: 8px 30px;
  /* 上下そろえて 20px（.sfoot__contact・.sfoot__copy と同じ） */
  margin-top: 0; padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13.5px; color: rgba(255,255,255,.78);
}
.sfoot__facts b { color: #fff; font-weight: 700; }

/* ★ フッターのお問い合わせ先（2026-08-21 の打ち合わせ・タスク5）。
     どこに聞けばよいかが分からないまま帰ってしまうのを防ぐ。 */
.sfoot__contact {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  padding: 20px 0; margin-bottom: 0;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 13px;
}
.sfoot__contact-t { color: rgba(255,255,255,.55); font-size: 11.5px; letter-spacing: .12em; }
.sfoot__contact a { color: #fff; text-decoration: underline; }
.sfoot__contact a:hover { color: var(--c-accent); }
.sfoot__hours { color: rgba(255,255,255,.72); font-size: 12.5px; }

/* ★ 2026-08-27：ヘッダーのロゴを少し大きく。
     スマホ側も同じだけ上げると、ロゴ＋ボタン2つが 360px 幅で
     横にはみ出す。狭い画面はひとまわり小さいままにしてある。
   ★ 2026-09-01：さらに大きく（42 → 52px）。ヘッダーは 76px なので上下に
     12px ずつ余る。縦横比 393:101 なので幅は約 202px。
   ★ **直すのはここだけ。**上の .shead__logoimg（34px）は、この行が後ろに
     あるぶん効いていない。あちらを直しても画面は変わらない。 */
.shead__logoimg { height: 52px; }
@media (max-width: 720px) { .shead__logoimg { height: 38px; } }
@media (max-width: 400px) { .shead__logoimg { height: 30px; } }

/* 住所の横に添える地図への行き先（2026-09-01 のご指示）。
   ★ 茶の面に白抜き（同日の再指示）。**下線は消す。**
     この表の中のリンクは既定で下線が付くので、ここだけ打ち消す。
     面で押せると分かるので、下線まで足すと重くなる。
   ★ 住所より前に出ない大きさにする。主役は住所そのもの。 */
.maplink {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px; padding: 4px 12px;
  border-radius: 999px;
  background: var(--c-primary); color: #fff;
  font-size: 12.5px; font-weight: 700;
  text-decoration: none;
  white-space: nowrap; vertical-align: 2px;
}
.maplink:hover { background: var(--c-primary-dark); color: #fff; text-decoration: none; }
.maplink .material-symbols-outlined { font-size: 15px; text-decoration: none; }

/* ---------- ロゴのモチーフを背景に散らす（2026-09-01 のご指示） ----------
   ★ **装飾なので CSS の背景で出す。**img で置くと読み上げが拾い、
     内容と関係のないものを読み上げてしまう。要素も増やさない。
   ★ 2層に分けてある。**濃さを変えるため。**opacity は要素にしか効かないので、
     1つの要素に7枚まとめると全部同じ濃さになり、模様に奥行きが出ない。
       ::before … 主役の2つ（左上の大きいの・右下の小さいの）。11%
       ::after  … あいだに散らす5つ。6.5% と薄くして、地の模様に見せる
   ★ 2026-09-01（再指示）：もう少し見えるようにした（6%→11% / 3.5%→6.5%）。
     ★ **本文の下に来る中央の1枚がいちばん効く。**これ以上あげると
       「続けていただくために…」の行が読みにくくなる。上げるなら
       中央（52% 48%）を外してからにすること。
   ★ 節から食み出すぶんは overflow: hidden で切る。切らないと横スクロールが出る。
   ★ 幅の狭い画面では出さない。文字の下に柄が来ると、ただ読みにくいだけ。 */
.sec--motif { position: relative; overflow: hidden; }
.sec--motif::before,
.sec--motif::after {
  content: "";
  position: absolute; inset: 0;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* 主役の2つ。左上に大きく、右下に小さく置いて対角に振る */
.sec--motif::before {
  background-image: url(megria-mark.png), url(megria-mark.png);
  background-position: -120px -90px, calc(100% + 70px) calc(100% + 55px);
  background-size: 470px 470px, 250px 250px;
  opacity: .11;
}
/* あいだに散らす5つ。大きさをそろえないことで模様に見せる */
.sec--motif::after {
  background-image:
    url(megria-mark.png), url(megria-mark.png), url(megria-mark.png),
    url(megria-mark.png), url(megria-mark.png);
  background-position: 20% 66%, 40% 14%, 63% 82%, 80% 28%, 52% 48%;
  background-size: 150px 150px, 104px 104px, 190px 190px, 92px 92px, 132px 132px;
  opacity: .065;
}
.sec--motif > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) {
  .sec--motif::before,
  .sec--motif::after { display: none; }
}

/* フッターの公式LINE（2026-09-01）。
   ★ **白抜きのアイコンだけ。緑の面は付けない**（同日の再指示）。
     フッターの地が濃い茶なので、白のアイコンがそのまま映える。
   ★ 文字は出さないが、名前は aria-label と title で持たせてある
     （site_foot.php）。見た目に文字が無くても何のリンクかは分かる。
   ★ ロゴは商標で配布物の形も決められている。**似せて描かない。**
     白のアイコンを assets/img/line-white.svg（または .png）に置けば
     そちらに差し替わる。置くまでは白い吹き出しで代用する。
   ★ 押せる大きさは 40px を確保する。アイコンは 26px だが、指で押す面は
     それより広く要る。 */
.linebtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: #fff; text-decoration: none;
  opacity: .85; transition: opacity .15s;
}
.linebtn:hover { color: #fff; text-decoration: none; opacity: 1; }
.linebtn .material-symbols-outlined { font-size: 26px; }
/* ★ 縦横比は 577:498（横長）。**正方形に押し込めない。**
   高さだけ決めて幅は auto に任せる。object-fit で詰めると左右に余白が出て、
   隣のリンクとの間が不自然に空く。 */
.linebtn img { display: block; height: 28px; width: auto; }

/* ---------- 文字がゆっくり現れる（スローイン。2026-09-01 のご指示） ----------
   ★ **PC だけ。**スマホでは出さない。指でスクロールする速さに対して
     1秒以上かけて現れるものを置くと、「まだ出ていない空白」を送ってしまう。
     出す・出さないの判断は site.js が持っている（画面幅 900px 以上で
     `<html>` に has-reveal を付ける）。ここは付いたときの見た目だけ。
   ★ **JS が動かなかったときに文字が消えたままにならないこと。**
     隠す指定は has-reveal が付いているあいだだけ効く。site.js が読めなければ
     クラスが付かないので、いつもどおり全部見えている。
     （念のため site_head.php 側にも、3秒でクラスを外す保険を入れてある）
   ★ 動きを減らす設定の方には出さない（下の prefers-reduced-motion）。
   ★ 対象の並びは **site.js の RV と同じもの**。片方だけ足すと、
     足したほうが「隠れたまま出てこない」か「動かない」になる。 */
@media (min-width: 900px) {
  .has-reveal .hero__eyebrow,
  .has-reveal .hero__title,
  .has-reveal .hero__lead,
  .has-reveal .hero__acts,
  .has-reveal .sec__label,
  .has-reveal .sec__title,
  .has-reveal .sec__lead,
  .has-reveal .shopban,
  .has-reveal .mcat,
  .has-reveal .card,
  .has-reveal .step,
  .has-reveal .ticket,
  .has-reveal .info,
  .has-reveal .note,
  .has-reveal .faq__item,
  .has-reveal .cta__title,
  .has-reveal .cta__lead,
  .has-reveal .cta__acts {
    opacity: 0;
    transform: translateY(26px);
  }

  /* ★ 現れたあと。**戻さない**（is-in は外さない）ので、
     上下にスクロールするたびに点滅することはない。
   ★ --rv-d は「同時に見えはじめたものを少しずつずらす」ための待ち時間。
     site.js が1枚ずつ入れる。無ければ 0 秒で、いっせいに現れる。 */
  .has-reveal .is-in {
    opacity: 1;
    transform: none;
    transition:
      opacity   1.15s cubic-bezier(.22,.61,.36,1),
      transform 1.15s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--rv-d, 0s);
  }

  /* MV の見出しとリードは、いちばん最初に目に入るのでもう少しゆっくり */
  .has-reveal .hero__title.is-in,
  .has-reveal .hero__lead.is-in { transition-duration: 1.5s; }
  .has-reveal .hero__title { transform: translateY(34px); }
}

@media (prefers-reduced-motion: reduce) {
  .has-reveal .hero__eyebrow,
  .has-reveal .hero__title,
  .has-reveal .hero__lead,
  .has-reveal .hero__acts,
  .has-reveal .sec__label,
  .has-reveal .sec__title,
  .has-reveal .sec__lead,
  .has-reveal .shopban,
  .has-reveal .mcat,
  .has-reveal .card,
  .has-reveal .step,
  .has-reveal .ticket,
  .has-reveal .info,
  .has-reveal .note,
  .has-reveal .faq__item,
  .has-reveal .cta__title,
  .has-reveal .cta__lead,
  .has-reveal .cta__acts { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   新着（9/3打ち合わせ No.42）
   ★ トップの帯（.sec--news / .newsbar）と、お知らせ一覧（.newspage）で
     **同じ .newslist を使う**。1件の見た目を2か所に書かないため。
   ★ たくさん載る場所ではない（キャンペーン・臨時休業は公式LINE）ので、
     節として大きく取らず、ヒーローの下に細く置く。
   ============================================================ */
/* ★ 帯は**低く**保つ（2026-09-09 のご指示で高さを半分に）。ここは
     「新着があること」を知らせるだけの場所で、じっくり読ませる面ではない。
     数字を戻すと、その下の「通うたびに、変化が見えるサロンへ」がまた押し下がる。 */
.sec--news { padding: 23px 0; background: var(--c-bg); }

/* ★ トップの帯は**1行**（2026-09-09 のご指示）。
     NEWS ｜ 日付＋見出し ｜ 札 ｜ 一覧をみる
   ★ 「新着」の文字は置かない。見出しは「NEWS」が兼ねる。
   ★ 本文は出さない（下で display:none）。1行に収まらないため。読むのは /news。 */
.newsbar { display: flex; align-items: center; gap: 20px; }
/* ★ `.sec__label` は節の見出し用で margin-bottom: 12px を持っている。
     横並びのこの行では**下の余白がそのまま行の高さになる**ので消す。 */
.newsbar__label { margin: 0; line-height: 1.2; white-space: nowrap; }
.newsbar__body { flex: 1 1 auto; min-width: 0; }

/* ★ 帯の中だけの決まり。お知らせ一覧（/news）には効かせない。 */
/* ★ 日付の列は**中身の幅だけ**にする。一覧と同じ 116px 固定にすると、
     1行に並べたときに日付と見出しのあいだが不自然に空く。 */
.newsbar .newslist__item {
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: 0; border-top: 0; align-items: center; gap: 0 20px;
}
/* 見出しが長いときは1行のまま「…」で切る。折り返すと帯が2行になる */
.newsbar .newslist__title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ★ 2件目以降は出さない。件数は SiteNews::HOME_LIMIT で1件だが、
     増やされても帯が崩れないように、ここでも1行に留める。 */
.newsbar .newslist__item + .newslist__item { display: none; }

/* ★ 「一覧をみる」は**「新着」と同じ高さの右端**に、**黒い文字**で置く
     （2026-09-09 のご指示）。記事の下に敷くと記事より先に目に入り、
     青いリンク色にすると記事の見出しより目立つ。読ませたいのは記事のほう。 */
.newsbar__more {
  display: inline-flex; align-items: center; gap: 2px;
  /* ★ 太字にしない（2026-09-09 のご指示）。太いと、押していただきたい
       記事の見出しと同じ強さになり、どちらが主役か分からなくなる。 */
  font-size: 14px; font-weight: 400; white-space: nowrap;
  color: var(--c-ink-900); text-decoration: none;
}
/* ★ 下線は**文字にだけ**掛ける（2026-09-09 のご指示）。
     リンク全体に掛けると、隣の「＞」にも下線が伸びる。 */
.newsbar__more:hover,
.newsbar__more:focus-visible { text-decoration: none; }
.newsbar__more:hover .newsbar__more-t,
.newsbar__more:focus-visible .newsbar__more-t {
  text-decoration: underline; text-underline-offset: 3px;
}
.newsbar__more .material-symbols-outlined { font-size: 18px; }

.newslist { list-style: none; margin: 0; padding: 0; }
/* ★ 日付／本文／行き先の3列（2026-09-09 のご指示）。
     行き先は**記事の右側**に、小さな札として置く。 */
.newslist__item {
  display: grid; grid-template-columns: 116px 1fr auto; gap: 0 24px;
  padding: 8px 0;
  /* ★ 日付は本文の1行目に合わせたいので上そろえ。札だけ縦の真ん中に置く */
  align-items: start;
}
/* ★ 区切りは**記事と記事のあいだだけ**。下端に線を引くと、見出しの行の線と
     合わせて1件を四角く囲んでしまい、締まって見えない。 */
.newslist__item + .newslist__item { border-top: 1px solid var(--c-line); }
.newslist__date {
  font-size: 13.5px; font-variant-numeric: tabular-nums;
  color: var(--c-ink-500); line-height: 1.5; white-space: nowrap;
}
.newslist__body { min-width: 0; }
/* ★ 行の高さを詰めてある（帯を低くするため・2026-09-09）。読み物ではなく
     1〜2行で終わる知らせなので、ゆったり取る必要がない。
     お知らせ一覧（/news）でも同じ値を使う。 */
.newslist__title { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
/* ★ 帯・一覧の写真の列はやめた（2026-09-10 のご指示）。
     .newslist__thumb / .newslist--thumb のきまりは、使う場所が無くなったので外した。
     写真は記事のページ（.newsart__img）で大きく出る。 */


/* ★ 押せるのは**見出しの文字**（2026-09-09 のご指示）。右端に置いていた
     「ショップを見る」の札はやめた。押せる場所が2つあると、どちらが本体か迷う。
   ★ 色は本文と同じ黒のまま。青くすると、帯の中で見出しだけが浮く。
     押せることは、マウスを載せたときの下線で示す。 */
.newslist__title a {
  color: inherit; text-decoration: none;
  /* 下線は文字から少し離す（和文は下線が字に触ると読みにくい） */
  text-underline-offset: 3px;
}
.newslist__title a:hover,
.newslist__title a:focus-visible { text-decoration: underline; }

/* ★ 管理のプレビュー枠で「いま確かめている1件」を囲む。
     お客様には出ない（?preview_news= はスタッフでログイン中のときだけ効く）。 */
.newslist__item.is-preview {
  outline: 2px solid var(--c-accent); outline-offset: 6px; border-radius: 4px;
}

.newspage { max-width: 760px; }
/* ★ 記事どうしの区切りは .newsart の上の線が持つ。ここでは引かない */
.newspage__back { margin-top: 40px; }

@media (max-width: 800px) {
  /* ★ お知らせ一覧（/news）は縦積み。日付を見出しの上に置く */
  .newslist__item { grid-template-columns: 1fr; gap: 2px; align-items: start; }
  .newslist__date { padding-top: 0; }

  /* ★ トップの帯は狭い画面でも**1行のまま**。日付は落として、
       「NEWS ｜ 見出し ｜ 一覧をみる」だけにする。
       縦積みにすると、ここだけで画面の3分の1を使ってしまう。 */
  .newsbar { gap: 12px; }
  .newsbar .newslist__item { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .newsbar .newslist__date { display: none; }
}

/* ============================================================
   お知らせ一覧（/news）と、記事1件のページ（/news/{id}）
   ★ **HTML は1つ**（views/site/_news_list.php の「記事の形」）。
     出す場所によって `.newsarts` に印が付き、置き方だけが変わる。
       .newsarts--list   … お知らせ一覧。**写真が左・文字が右**の2列
       .newsarts--single … 記事1件のページ。上から順・写真は大きいまま
   ★ HTML の並びは 日付 → 見出し → 写真 → 本文 → 動画 で固定。一覧で写真が
     左に来るのは grid が置き直しているだけなので、読み上げでも、CSS が
     効かないときでも、書いた順のまま意味が通る。
   ★ トップの帯（.newslist）は今までどおり。作りは同じ部品の中で分けている。
   ============================================================ */
.newsarts { display: flex; flex-direction: column; }
.newsart {
  padding: 28px 0;
  border-top: 1px solid var(--c-line);
}
.newsart:first-child { border-top: 0; padding-top: 0; }

.newsart__date {
  display: block; font-size: 13.5px; font-variant-numeric: tabular-nums;
  color: var(--c-ink-500);
}
.newsart__title {
  margin: 6px 0 0; font-size: 20px; font-weight: 700; line-height: 1.55;
  letter-spacing: .01em;
}
.newsart__title a {
  color: inherit; text-decoration: none; text-underline-offset: 3px;
}
.newsart__title a:hover,
.newsart__title a:focus-visible { text-decoration: underline; }

/* ★ 記事1件のページの写真。**高さを決めない。**縦横比は1枚ずつ違うので、
     決め打ちにすると縦長の写真が潰れる。ここは元の形のまま大きく出す。
     一覧の小さな枠（下の .newsarts--list）とは、あえて別のきまりにしてある。 */
.newsart__img {
  display: block; width: 100%; max-width: 640px; height: auto;
  margin: 16px 0 0; border-radius: 8px; background: var(--c-primary-soft);
}
.newsart__body {
  margin: 14px 0 0; font-size: 15px; color: var(--c-ink-700); line-height: 1.9;
}
.newsart__body ul, .newsart__body ol { margin: .5em 0; padding-left: 1.5em; }
.newsart__body p { margin: 0 0 .6em; }
.newsart__body p:last-child { margin-bottom: 0; }

.newsart__video {
  display: block; width: 100%; max-width: 640px; margin: 16px 0 0;
  border-radius: 8px; background: #000;
}

/* ★ 管理のプレビュー枠で「いま確かめている1件」を囲む。
     お客様には出ない（?preview_news= はスタッフでログイン中のときだけ効く）。 */
.newsart.is-preview {
  outline: 2px solid var(--c-accent); outline-offset: 10px; border-radius: 4px;
}

/* ── お知らせ一覧（/news）は**写真とタイトルだけ**（2026-09-10 のご指示）──
   ★ それまでは記事をそのまま縦に積んでいたので、記事1件のページと見分けが
     付かず、「お知らせ一覧へ」を押しても**飛んでいないように見えていた**。
     本文と動画は HTML ごと出していない（views/site/_news_list.php）。
   ★ 写真が左・文字が右の2列。動かすのは置き場所だけで、HTML の並びは
     変えていない（grid-area で置き直す）。 */
/* ★ 横に2つ並べるだけなので **flex**。grid で2行に分けると、縦にまたがった
     写真のぶんだけ行が広がり、日付と見出しが離れてしまう。 */
.newsarts--list .newsart {
  display: flex;
  align-items: center;   /* 文字は写真の高さの真ん中に置く */
  column-gap: 24px;
}
/* ★ HTML は 日付 → 見出し → 写真 の順のまま。**order で写真だけ左へ回す。**
     読み上げや、CSS が効かないときは、書いた順のまま読める。 */
.newsarts--list .newsart__head { flex: 1 1 auto; min-width: 0; }
.newsarts--list .newsart__title { margin-top: 4px; }
/* ★ 一覧の写真は**大きさをそろえる。**記事ごとに縦横比が違うと、行の頭が
     ガタガタになって一覧に見えない。切り取って（cover）同じ枠に収める。 */
.newsarts--list .newsart__img,
.newsarts--list .newsart__noimg {
  order: -1;
  flex: 0 0 auto;
  display: block;
  /* ★ 大きさは 220x148 の**4分の1**（縦横それぞれ半分・2026-09-10 のご指示）。
       一覧は「何が載っているか」を見渡すところなので、写真は見分けが付けば足りる。 */
  width: 110px; max-width: none; height: 74px;
  margin: 0; border-radius: 6px;
}
.newsarts--list .newsart__img { object-fit: cover; }
/* ★ 写真の無い記事は**枠にロゴを入れる**（2026-09-10 のご指示）。枠ごと省くと、
     写真のある行と無い行でタイトルの左端がずれ、一覧として縦にそろわない。
     空のままだと、写真の読み込みに失敗したように見える。 */
/* ★ **`.newsarts--list` から書き始める。**上の1本で display:block を当てて
     いるので、`.newsart__noimg` だけで書くと詳細度で負けて中身が中央に来ない。 */
.newsarts--list .newsart__noimg {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-line-soft, #F1EAE0);
  border: 1px solid var(--c-line);
}
/* ★ ロゴは**枠いっぱいにしない**（左右に余白を残す）。写真の代わりに置く印なので、
     本物の写真より目立つと、記事の中身を取り違える。薄めに出す。 */
.newsarts--list .newsart__noimg img { width: 66%; height: auto; opacity: .5; }

@media (max-width: 800px) {
  .newsart { padding: 22px 0; }
  .newsart__title { font-size: 18px; }

  /* ★ 狭い画面でも**写真は左のまま。**縦積みにすると1件で画面が埋まり、
       何件あるのかが分からなくなる。枠だけ小さくする。 */
  .newsarts--list .newsart { column-gap: 14px; }
  .newsarts--list .newsart__title { font-size: 16px; line-height: 1.5; }
}



/* ============================================================
   お知らせ1件のページの下のナビ（2026-09-09 のご指示：PREV → ／ NEXT ←）
   ★ 左が NEXT（新しいほう）、右が PREV（古いほう）。矢印は外へ向く。
     時間の並びと同じ向き（左が新しい・右が古い）。
   ★ 片方が無いときは**場所だけ空ける**（.is-void）。残ったほうが真ん中へ
     寄ると、押す場所が記事ごとに動く。
   ============================================================ */
.newsnav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--c-line);
}
.newsnav__b {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  color: var(--c-ink-900); text-decoration: none; font-size: 14px;
}
.newsnav__b--prev { justify-self: end; text-align: right; }
.newsnav__b:hover .newsnav__t { text-decoration: underline; text-underline-offset: 3px; }
.newsnav__b.is-void { pointer-events: none; }
.newsnav__k {
  font-size: 11.5px; font-weight: 700; letter-spacing: .18em; white-space: nowrap;
  color: var(--c-accent-dark, var(--c-accent));
}
.newsnav__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.newsnav__b .material-symbols-outlined { font-size: 18px; color: var(--c-ink-500); }
/* ★ 一覧へ戻る道は**■を9つ均等に並べた印**（2026-09-10 のご指示）。
     左右の NEXT／PREV が記事の題名を出すので、真ん中も文字にすると3つとも
     文字になり、どれが「戻る」なのか一瞬で分からなかった。
   ★ 色は **NEXT／PREV の文字と同じ**（2026-09-10 のご指示）。3つとも同じ役目の
     道しるべなので、真ん中だけ別の色にすると仲間に見えない。
   ★ 文字が無いぶん、**押せる大きさは指で足りるだけ取る**（内側の余白 14px）。
     見た目の印は 21px 角だが、押せるところは 49px 角ある。小さくしたのは
     見た目だけで、**押せる広さは変えていない。** */
.newsnav__all {
  display: inline-flex; align-items: center; justify-content: center;
  justify-self: center;
  padding: 14px; margin: -14px;   /* 押せる範囲だけ広げる。並びは動かさない */
  color: var(--c-accent-dark, var(--c-accent));
  text-decoration: none; border-radius: 8px;
}
.newsnav__grid {
  display: grid;
  grid-template-columns: repeat(3, 5px);
  grid-template-rows: repeat(3, 5px);
  gap: 3px;
}
.newsnav__grid i { display: block; width: 5px; height: 5px; background: currentColor; }
/* ★ 色は変えず、**薄くするだけ**。別の色にすると NEXT／PREV と離れて見える。
     動かすのも無し（隣の題名と重なって見える）。 */
.newsnav__all:hover,
.newsnav__all:focus-visible { opacity: .65; }
.newsnav__link { margin-top: 22px; }

@media (max-width: 800px) {
  /* 狭いときは縦に。並びは NEXT → 一覧 → PREV のまま */
  .newsnav { grid-template-columns: 1fr; gap: 12px; }
  .newsnav__b--prev { justify-self: start; text-align: left; flex-direction: row-reverse; }
  .newsnav__b.is-void { display: none; }
  .newsnav__all { order: 1; }
}