/* ============================================================
   Auguri! ─ SP（スマートフォン）の組み：共通部分（手書き）
   ------------------------------------------------------------
   2026-09-21 高野様「Codex の SP 版レイアウト作成のプロンプトを確認の上、反映」
   ・PC（768px 以上）には 1 行も効かない（すべて @media (max-width: 767px) の中）
   ・ズームや縮小はしない。767px 以下では絶対配置をやめ、帯の中身を縦に流す
   ・帯ごとの並び順・文字の大きさ・写真の幅は、生成物 sp-<slug>.css（build/sp.py）が持つ。
     ここは全ページ共通の部品（余白の変数・ヘッダー・全画面メニュー・FV・下層ヒーロー・
     GARAGE88 帯・フッター・お問い合わせフォーム・View All ボタン）と、種類ごとの既定
   ・文字の大きさは **すべて偶数の px**（2026-09-21 高野様「全て偶数のフォントサイズに揃えて」）。
     本文 14px／行送り 2.0、ラベル 10〜12px。見出しは vw で連続に変えず、画面幅 3 段（390 以上／360〜389／359 以下）で偶数の値に切り替える（下の --sp-fs-*）
   ・文言・写真・リンク・図形（SVG）は変えない。出さないのは装飾の面・縦罫・短い罫だけ
   ============================================================ */
@media (max-width: 767px) {

/* ── 余白の変数（プロンプト指定） ── */
body {
  font-size: 14px;          /* 大きさを指定していない文字も 14（PC の倍率 --s で 9.92px になっていた） */
  --sp-gutter: clamp(20px, 6.15vw, 24px);
  --sp-section-space: clamp(88px, 25vw, 120px);
  --sp-text-gap: 24px;
  --sp-vh: 100vh;
}
@supports (height: 100svh) { body { --sp-vh: 100svh; } }

/* ── 見出しの大きさ（偶数・画面幅 3 段）──
   以前は clamp(…, vw, …) で画面幅に合わせて連続に変えていたため、375 などでは 28.9px のような半端な値になっていた。
   390 以上（iPhone 標準〜大）／360〜389（iPhone mini・SE）／359 以下（小型 Android など）で段を切り替える */
body {
  --sp-fs-display: 40px;   /* PC 100px 以上 */
  --sp-fs-h1: 30px;        /* PC 72・60：大見出し */
  --sp-fs-h2: 26px;        /* PC 48 */
  --sp-fs-h3: 22px;        /* PC 36：中見出し */
  --sp-fs-copy: 28px;      /* TOP FV のコピー */
  --sp-fs-sl-en: 24px;     /* TOP 暮らしの品々 4 行の英字 */
  --sp-fs-live: 28px;      /* TOP「Live with what moves you.」（1 行に収める） */
  --sp-ls-live: .05em;
}
@media (max-width: 389px) {
  body { --sp-fs-display: 36px; --sp-fs-h1: 28px; --sp-fs-h2: 24px; --sp-fs-copy: 26px; --sp-fs-live: 26px; }
}
@media (max-width: 359px) {
  body { --sp-fs-display: 34px; --sp-fs-h1: 26px; --sp-fs-h2: 22px; --sp-fs-h3: 20px; --sp-fs-copy: 24px; --sp-fs-sl-en: 22px; --sp-fs-live: 24px; --sp-ls-live: .02em; }
}
.skip { font-size: 14px; }

/* ── 帯：高さは中身なり。中身は縦に流す ── */
main.page .band { height: auto; }
.band__in {
  width: auto; height: auto; margin: 0;
  /* 横に流して折り返す。文字は幅いっぱい、小さな写真（48%・34%）は 2 枚が横に並ぶ */
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: var(--sp-text-gap) 4%;
  padding: calc(var(--sp-section-space) * .5) var(--sp-gutter);
}
/* 絶対配置をやめる（生成 CSS の left/top/width/height を無効にする） */
.band__in > *, .grp > *, .grp > .grp-list > *, .nw__list li, .nw__list li > * {
  position: static; left: auto; top: auto; right: auto; bottom: auto; inset: auto;
  flex: 0 0 auto; width: 100%; height: auto; max-width: 100%;
}
/* グループ（入れ子）は透明な入れ物。中身を帯に直接並べる。ひとかたまりのものは生成 CSS 側で flex に戻す */
.grp, .grp-list, .nw__list li { position: static; inset: auto; display: contents; pointer-events: auto; }

/* ── 文字 ── */
/* 語の途中で改行しない（2026-09-21 高野様「不自然な改行があります。全てチェックして修正して」）。
   HTML の文節の切れ目に <wbr>（build/sp.py の add_phrase_breaks・BudouX）。生成 CSS は見出し・短い文に keep-all、
   長い本文に text-wrap:pretty を付ける。ここは手書きの部品（FV・ヒーロー・フォーム・フッター・メニュー・GARAGE88）の分 */
main.page .band__in, main.page .band__in *, .mn, .mn * { word-break: keep-all; overflow-wrap: anywhere; }
/* 両端揃え（PC のスタッフ紹介・プライバシー本文・エステのコース本文）は、文節で折り返すと字間が大きく開くので SP は左揃え */
main.page .band__in [class*="__comment"], main.page .b-pv-main [class*="pv__p"], main.page .esa__body, main.page .esa__catch { text-align: left; text-justify: auto; }
/* 長い本文は、最後の行が 1〜2 文節だけにならないように */
main.page .b-hero .hero__lead, main.page .b-g88 .g88__lead, .fm-dialogue .fm__intro, .fm-dialogue .fm__close,
main.page .b-sh-people [class*="__comment"] { text-wrap: pretty; }
/* 見出しは行の長さをそろえる（1 行目だけ長く、2 行目が 1 語だけ、にならないように） */
main.page h1.t, main.page h2.t, main.page h3.t, main.page .b-hero .hero__h, .page-top .b-fv .fv__copy { text-wrap: balance; }
/* 暮らしの品々の光（PC のホバーの仕掛け・JS が差し込む）は SP では出さない。流れの中で行間（24px）を 4 つぶん取り、帯の上が空いていた */
main.page .band__in > .slm-glow { display: none !important; }
.t { white-space: normal; max-width: 100%; }
.t.nowrap { white-space: normal; }
/* 大見出しは 1 行に収まらないときも語の途中で切らない */
h1.t, h2.t { text-wrap: balance; }
/* ぶら下げ（text-indent）は ai どおり残す。行ごとの左端の差（.ln の margin）は生成 CSS で消す */

/* ── 写真 ── */
.ph, .imgbox { position: relative; overflow: hidden; flex: none; }
.ph > img, .imgbox > img, .ph > video, .imgbox > video { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
.ph__label { font-size: 10px; padding: 3px 6px; }

/* ── 手描きのパーツ（SVG）・アイコン・円 ── */
.svgbox { position: relative; flex: none; }
.svgbox > svg, .svgbox > img { width: 100%; height: 100%; }
.circle { position: relative; flex: none; }
/* 罫：残すものは生成 CSS が幅 100% にする。既定は出さない（縦罫・短い罫） */
.rule { flex: none; }

/* 読み上げ専用の文字は、上の「幅 100%」に当たらないよう 1px のまま */
main.page .visually-hidden { width: 1px; height: 1px; }

/* ── 右レール（縦罫・縦書き・Location）は出さない ── */
.railwrap { display: none; }

/* ── ヘッダー：高さ 64px。ロゴ左・Menu 右（タップ領域 44×44）。ナビ・SNS・住所・縦罫は出さない ── */
main.page .hd {
  display: block; position: absolute; inset: auto; left: 0; top: 0; right: 0;
  width: auto; height: 64px; z-index: 7; pointer-events: none;
}
main.page .hd > * { display: none; }
main.page .hd .hd__brand, main.page .hd .hd__menu, main.page .hd .hd__bottom { display: block; }
main.page .hd .hd__postal, main.page .hd .hd__addr { display: none; }
main.page .hd .hd__logo {
  display: block; position: absolute; left: var(--sp-gutter); top: 13px; width: 82px; height: 38.7px; pointer-events: auto;
}
main.page .hd .hd__menu {
  position: absolute; left: auto; right: calc(var(--sp-gutter) - 10px); top: 10px; width: 44px; height: 44px;
  pointer-events: auto; cursor: pointer;
}
main.page .hd .hd__menu-l1, main.page .hd .hd__menu-l2 {
  display: block; position: absolute; left: 10px !important; width: 24px; height: 1px; transform: none;
}
main.page .hd .hd__menu-l1 { top: 17px; }
main.page .hd .hd__menu-l2 { top: 26px; }
main.page .hd .hd__menu-label { display: none; }
main.page .hd .hd__bottom {
  display: block; position: absolute; left: 0; top: 64px; width: 100%; height: 1px; transform: scaleY(.5); transform-origin: 0 0;
}
/* TOP は PC では白い写真の上に白いヘッダーだが、SP ではヘッダーの下に地色（アイボリー）が来るので黒にする */
.page-top main.page .hd .hd__logo { color: var(--c-ink); }
.page-top main.page .hd .hd__menu-l1, .page-top main.page .hd .hd__menu-l2, .page-top main.page .hd .hd__bottom { background: var(--c-ink); }

/* ── 全画面メニュー（採用案 03）：100dvh・中央の軸・5 項目 ── */
.mn { height: 100vh; }
@supports (height: 100dvh) { .mn { height: 100dvh; } }
.mn__in { width: 100%; }
.mn__logo { left: var(--sp-gutter); top: 13px; width: 82px; height: 38.7px; }
.mn__close { left: auto; right: calc(var(--sp-gutter) - 10px); top: 10px; width: 44px; height: 44px; }
.mn__close-l1, .mn__close-l2 { left: 10px; top: 22px; width: 24px; }
.mn__close-label { display: none; }
.mn__hline { top: 64px; }
.mn__nav { top: 65px; }
[data-menu] .mn__axis { left: 50%; top: 65px; }
[data-menu] .mn__item { height: auto; margin: 0 0 22px; }
[data-menu] .mn__item a { gap: 8px; padding: 6px 24px; }
[data-menu] .mn__en { font-size: 10px; }
[data-menu] .mn__ja { font-size: 24px; }
[data-menu] .mn__foot {
  left: var(--sp-gutter); right: var(--sp-gutter); bottom: 22px;
  flex-direction: column; align-items: center; gap: 12px;
}
[data-menu] .mn__foot .mn__nap { gap: 16px; font-size: 12px; flex-wrap: wrap; justify-content: center; }
[data-menu] .mn__foot .mn__links { gap: 6px 18px; font-size: 12px; flex-wrap: wrap; justify-content: center; }
[data-menu] .mn__foot .mn__links a { white-space: nowrap; }   /* 「LINE 公式アカウント」「Instagram」を語の途中で折らない。はみ出すときはリンクごと次の行へ */
[data-menu] .mn__foot .mn__links a span.jp { font-size: 10px; }   /* LINE・Instagram の「公式アカウント」（PC の倍率のままで 7.4px だった） */
[data-menu] .mn__foot .mn__links a svg { width: 11px; height: 11px; }

/* ── TOP の FV：100svh。ヘッダー 64 → 写真いっぱいに、ロゴ・コピー・住所を **重ねる**（PC と同じ）──
   2026-09-21 総点検：PC はロゴ・コピー・Live・ADDRESS/LOCAL TIME を写真に重ねている。SP も写真の上に置く。
   写真は 100svh − ヘッダーで切り取り（中央）。文字はその下寄り（PC：ロゴ 24%・コピー 63%・住所 88% の高さ）。
   SP の切り取りでは地が明るい（ノート・手元）ので、ロゴは PC の白ではなく墨で出す */
.page-top .b-fv .band__in {
  display: block; position: relative; height: var(--sp-vh); min-height: 560px; padding: 0;
}
.page-top .b-fv .fv__photo { position: absolute; left: 0; top: 64px; width: 100%; height: calc(100% - 64px); min-height: 0; }
.page-top .b-fv .fv__body {
  position: absolute; left: var(--sp-gutter); right: var(--sp-gutter); bottom: 7%; width: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0; z-index: 2;
}
/* 2026-09-25 高野様「文字を見やすい右上の位置に」→ B-2 案（ヘッダーの下 5%・右の余白 14px）で一度反映。
   同日、高野様の修正図で位置を確定：かたまりの左端を**ロゴの左端（--sp-gutter）に揃え**、
   上端は B-2 より約 37px 下＝**ヘッダーの下 11%**（写真が高さに合わせて伸び縮みするので % で持つ）。
   文字は左揃えのまま。写真の下半分（ノートとペン）の手元には掛からない */
.page-top .b-fv .fv__body {
  top: calc(64px + 11%); bottom: auto; left: var(--sp-gutter); right: auto;
  width: max-content; max-width: calc(100% - var(--sp-gutter) * 2);
}
.page-top .b-fv .fv__logo { width: 150px; height: auto; aspect-ratio: 655 / 310; color: var(--c-ink); margin-bottom: 8px; }
/* 2026-09-22 ロゴは画面から外す（h1 は読み上げ用に残す）。場所も取らない */
.page-top .b-fv .fv__logo { position: absolute !important; width: 1px !important; height: 1px !important; margin: 0 !important; overflow: hidden; }
.page-top .b-fv .fv__copy { font-size: var(--sp-fs-copy); line-height: 1.5; margin-top: 4px; }
.page-top .b-fv .fv__live { font-size: 16px; line-height: 1.4; }
.page-top .b-fv .fv__meta {
  display: grid; grid-template-columns: max-content 1fr; column-gap: 14px; row-gap: 4px; align-items: baseline;
  margin-top: 10px;
}
.page-top .b-fv .fv__addr-lab, .page-top .b-fv .fv__time-lab { font-size: 10px; line-height: 1.6; letter-spacing: .12em; }
.page-top .b-fv .fv__addr-jp, .page-top .b-fv .fv__time { font-size: 12px; line-height: 1.6; }

/* ── 下層ページの FV（ヒーロー）：写真 60vh → ラベル・見出し・罫・英文・リード ──
   「地になる」（fv-motion）は SP では動かさない（assets/js/fv-motion.js が 767px 以下で外す） */
main.page .fvm-wrap, main.page .fvm-wrap.is-on { height: auto; }
main.page .fvm-wrap.is-on > .b-hero { position: relative; top: auto; }
main.page .b-hero .band__in { padding: 64px var(--sp-gutter) calc(var(--sp-section-space) * .5); gap: 0; }
main.page .b-hero .hero__ph {
  order: 1; left: auto; top: auto; width: calc(100% + 2 * var(--sp-gutter)); max-width: none; height: calc(var(--sp-vh) * .6);
  margin: 0 calc(-1 * var(--sp-gutter));
}
main.page .b-hero .hero__ph::after { display: none; }
main.page .b-hero .hero__label {
  order: 2; position: static; margin: 32px 0 0; font-size: 12px; line-height: 1.6; letter-spacing: .14em; color: inherit;
}
main.page .b-hero .hero__h { order: 3; margin: 10px 0 0; font-size: var(--sp-fs-h1); line-height: 1.5; color: inherit; }
main.page .b-hero .hero__rule { order: 4; display: block; width: 100%; height: 1px; margin: 20px 0 0; transform: scaleY(.5); transform-origin: 0 0; background-color: var(--c-ink); }
main.page .b-hero .hero__en { order: 5; margin: 16px 0 0; font-size: 20px; line-height: 1.4; color: inherit; }
main.page .b-hero .hero__lead { order: 6; margin: 18px 0 0; font-size: 14px; line-height: 2; color: inherit; }
main.page .b-hero .hero__lead br { display: none; }
main.page .t br.sp-br { display: inline; }   /* SP だけの改行（例：店舗のご案内のリード「質感を確かめ、／味わえない時間を、」2026-09-21 高野様） */
main.page .b-hero .t .ln { margin-left: 0 !important; }

/* ── GARAGE88 帯：写真を地にして、ロゴ・リード・View All ── */
main.page .b-g88 .band__in { position: relative; padding: 56px var(--sp-gutter) 32px; gap: 20px; }   /* 550 → 486px（2026-09-21 高野様「セクションの高さをもう少し抑えたい」） */
main.page .b-g88 .g88__photo, main.page .b-g88 .g88__tint { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
main.page .b-g88 .g88__logo { position: relative; z-index: 1; order: 1; width: 180px; height: auto; aspect-ratio: 905 / 106.9; margin-right: auto; }
main.page .b-g88 .g88__lead { position: relative; z-index: 1; order: 2; font-size: 14px; line-height: 2; text-align: left; }
main.page .b-g88 .g88__lead br { display: none; }
/* ロゴと文は左揃え、View All は帯の左右中央（2026-09-21 高野様） */
/* 円周文字の環は開くと円の外へ 30px 張り出す。開ききっても文と 24px 以上あくように（2026-09-21 高野様「ボタンが開ききった後にテキストと近くなりすぎる」） */
main.page .b-g88 .g88__viewall { order: 3; z-index: 1; margin: 34px auto 30px; }
.page-top main.page .b-esthetic .es__viewall { margin: 30px auto 30px; }

/* ── View All 円ボタン（TOP のエステ帯・GARAGE88 帯） ── */
.viewall {
  display: block; position: relative; inset: auto; width: 104px; height: 104px; flex: none; pointer-events: auto;
  margin-left: 32px;   /* 左に回る円周文字（環）が画面の外に出ないように */
}
.viewall > * { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; }
.viewall .va-pen, .viewall .va-hit { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; }
.viewall [data-va="ring"] { left: -29.2%; top: -29.2%; width: 158.4%; height: 158.4%; max-width: none; }
.viewall .t { display: flex; align-items: center; justify-content: center; padding-bottom: 14px; font-size: 12px; line-height: 1; white-space: nowrap; }
.viewall [data-va="arrow"] { left: 50%; top: auto; bottom: 30px; width: 26px; height: 4.8px; transform: translateX(-50%); }
.viewall .va-hit { display: block; }

/* ── 予約セクション「一本の線」（美容とエステ・記事詳細） ── */
.rs__row { position: relative; width: 100%; margin: 0; padding-bottom: 14px; }
.rs__row-lab { font-size: 12px; }
.rs__row-main { font-size: 22px; margin-top: 10px; }
.rs__row-arrow { right: 0; bottom: 18px; width: 26px; height: 4.8px; }   /* 行の右端（PC と同じ、行の中） */
.rs__row::after { width: 100%; }
.rs__rowline { display: none; }
.b-es-reservation .rsv__rule, .b-ar-cta .rsv__rule { width: 100%; height: 1px; transform: scaleY(.5); transform-origin: 0 0; }

/* ── エステ 3 コース（A 案の 3 列 → 1 列） ── */
.esa { position: static; width: auto; height: auto; margin-top: 16px; }
.esa__ph { width: 100%; height: auto; aspect-ratio: 400 / 265; }
.esa__num, .esa__cat { font-size: 14px; }
.esa__name-en { font-size: 28px; }
.esa__name-jp { font-size: 12px; }
.esa__catch { font-size: 16px; line-height: 1.8; }
.esa__body { font-size: 14px; line-height: 2; }
.esa__lab { font-size: 12px; }
.esa__rec, .esa__eff { font-size: 14px; }
.esa__rec li, .esa__eff li { padding-left: 16px; }
.esa__rec li::before { top: 10px; width: 5px; height: 5px; }
.esa__eff li::before { top: 13px; width: 8px; }
.esa__eff { column-gap: 12px; }
.esa__sub { padding-top: 16px; }
.esa__price { height: 72px; margin-top: 28px; }
.esa__price-c, .esa__price-min { width: 72px; height: 72px; }
.esa__price-c { box-shadow: inset 0 0 0 1px #d3d3d2; }
.esa__price-min { font-size: 12px; }
.esa__price-p { left: 100px; font-size: 20px; }
.esa__price-t { font-size: 12px; vertical-align: .28em; }   /* （税込）は金額の数字の見かけ上の中心に（2026-09-21 高野様） */
/* お試しメニューの価格（白い円に分・右に料金） */
.trial__price { display: grid; grid-template-columns: 72px auto 1fr; align-items: center; column-gap: 20px; height: 72px; }
.trial__price > * { position: static; }
.trial__price .circle { grid-row: 1; grid-column: 1; width: 72px; height: 72px; }
.trial__price__min { grid-row: 1; grid-column: 1; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 12px; text-align: center; }
.trial__price__price { grid-row: 1; grid-column: 2; font-size: 20px; line-height: 1; }
/* （税込）は金額の右・数字の見かけ上の中心に（2026-09-21 高野様。下に落ちていた） */
.trial__price__tax { grid-row: 1; grid-column: 3; align-self: center; width: auto; justify-self: start; margin-left: -14px; font-size: 12px; line-height: 1; transform: translateY(var(--sp-tax-dy, 0px)); }

/* ── 店舗のご案内：スタッフ 5 枠は、枠どうしの間を広く（写真→名前→文の並びが近すぎる・2026-09-21 高野様） ── */
main.page .pp__list li.grp { margin-top: 40px; gap: 14px; }
main.page .pp__list li.grp + li.grp { margin-top: 56px; }

/* ── 店舗のご案内：地図・店舗情報の表 ── */
.ac__map { width: 100%; aspect-ratio: 4 / 3; }
main.page .ac__table { display: grid; grid-template-columns: max-content 1fr; column-gap: 24px; row-gap: 0; align-items: baseline; }
main.page .ac__table > * { width: auto; }
main.page .ac__table > .t { padding: 12px 0; }
/* 店舗情報の見出し（店舗名・営業時間 など）は折り返さない（2026-09-24 高野様「営業時間を 1 行に」）。SP の .t は折り返し可にしているため、実書体で「営業時／間」と割れていた */
main.page .ac__table dt.t { white-space: nowrap; }
/* 行の罫は PC と同じに残す（格子の 1 行ぶん） */
main.page .ac__table .rule { display: block; grid-column: 1 / -1; width: 100%; height: 1px; transform: scaleY(.5); transform-origin: 0 0; }

/* ヘッダーを持つ帯（記事詳細の頭・プライバシーポリシー）は、ヘッダー 64px のぶん上を空ける */
main.page .b-ar-head .band__in, main.page .b-pv-main .band__in { padding-top: calc(64px + var(--sp-section-space) * .5); }

/* ── お知らせ：最新記事の 6 枚は 2 列（記事詳細「ほかの読みもの」も同じ） ── */
.nl__list { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 16px; }
.nl__list li.grp { display: flex; }
.nl__list [class$="__meta"] { font-size: 12px !important; line-height: 1.7 !important; }   /* 日付とジャンルは小さく（生成 CSS の 14px より優先） */

/* ── TOP 受け継ぐ：灰色の面を地にする（面は z-index:-1、帯の中で重なりを閉じる） ── */
.page-top main.page .b-concept .band__in, main.page .b-sh-flow .band__in { isolation: isolate; }

/* ── TOP 暮らしの品々の 4 行：PC と同じ関係（2026-09-21 高野様「罫線、タイトル、写真の関係を PC 版と同じように」）──
   PC：罫 → その下に「装う」＋ Wear（写真の高さの中央）→ 右に写真（上下とも罫にぴったり）→ 一言は写真の上に白で重ねる。
   SP も同じ組みを 3 列（和名｜英字｜写真 44%）の格子で。行ぜんぶが各ジャンルへのリンク（PC と同じ） */
.page-top main.page .b-selection .sl__table {
  display: grid; order: 5; position: relative; margin-top: 24px;   /* 写真 19 と最初の罫のあいだ 48px（2026-09-21 高野様「画像と罫線との間に適切なマージンを」） */
  grid-template-columns: auto 1fr 44%; column-gap: 14px; align-items: center;
}
.page-top main.page .b-selection .sl__table > * { width: auto; margin: 0; }
.page-top main.page .b-selection .sl__table .rule { grid-column: 1 / -1; width: 100%; }
.page-top main.page .b-selection .sl__table .sl__rule0 { grid-row: 1; }
.page-top main.page .b-selection .sl__table .sl__rule1 { grid-row: 3; }
.page-top main.page .b-selection .sl__table .sl__rule2 { grid-row: 5; }
.page-top main.page .b-selection .sl__table .sl__rule3 { grid-row: 7; }
.page-top main.page .b-selection .sl__table .sl__rule4 { grid-row: 9; }
.page-top main.page .b-selection .sl__table [class*="sl__jp"] { grid-column: 1; font-size: 14px; line-height: 1.6; }
.page-top main.page .b-selection .sl__table [class*="sl__en"] { grid-column: 2; font-size: var(--sp-fs-sl-en); line-height: 1.3; }
.page-top main.page .b-selection .sl__table [class*="sl__th"] { grid-column: 3; width: 100%; aspect-ratio: 3 / 2; }
.page-top main.page .b-selection .sl__table [class*="sl__cap"] {
  grid-column: 3; justify-self: center; z-index: 3; padding: 0 8px;
  font-size: 12px; line-height: 1.6; letter-spacing: .04em; text-align: center; white-space: normal;
}
.page-top main.page .b-selection .sl__table .sl__hit { display: block; grid-column: 1 / -1; align-self: stretch; width: 100%; height: 100%; z-index: 6; }
.page-top main.page .b-selection .sl__table .sl__jp1, .page-top main.page .b-selection .sl__table .sl__en1,
.page-top main.page .b-selection .sl__table .sl__th1, .page-top main.page .b-selection .sl__table .sl__cap1, .page-top main.page .b-selection .sl__table .sl__hit1 { grid-row: 2; }
.page-top main.page .b-selection .sl__table .sl__jp2, .page-top main.page .b-selection .sl__table .sl__en2,
.page-top main.page .b-selection .sl__table .sl__th2, .page-top main.page .b-selection .sl__table .sl__cap2, .page-top main.page .b-selection .sl__table .sl__hit2 { grid-row: 4; }
.page-top main.page .b-selection .sl__table .sl__jp3, .page-top main.page .b-selection .sl__table .sl__en3,
.page-top main.page .b-selection .sl__table .sl__th3, .page-top main.page .b-selection .sl__table .sl__cap3, .page-top main.page .b-selection .sl__table .sl__hit3 { grid-row: 6; }
.page-top main.page .b-selection .sl__table .sl__jp4, .page-top main.page .b-selection .sl__table .sl__en4,
.page-top main.page .b-selection .sl__table .sl__th4, .page-top main.page .b-selection .sl__table .sl__cap4, .page-top main.page .b-selection .sl__table .sl__hit4 { grid-row: 8; }

/* ── TOP お知らせの 3 行：罫と罫のあいだに、日付・分類（1 行目）と記事名（2 行目）。
      間延びしていたので詰める（2026-09-21 高野様「バランスがとても悪い」「マージンも間延び」）。
      原因は行ぜんぶを覆う透明なリンク（nw-hit・50px）が流れの中で場所を取っていたこと ── */
.page-top main.page .b-news [class*="nw__item"] {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; align-items: baseline;
  position: relative; width: 100%; padding: 16px 0 18px; margin: calc(-1 * var(--sp-text-gap)) 0;
}
.page-top main.page .b-news [class*="nw__item"] > * { width: auto; margin: 0; }
.page-top main.page .b-news [class*="nw__date"] { grid-row: 1; grid-column: 1; font-size: 12px; line-height: 1.6; letter-spacing: .06em; }
.page-top main.page .b-news [class*="nw__cat"] { grid-row: 1; grid-column: 2; font-size: 12px; line-height: 1.6; letter-spacing: .06em; text-align: right; opacity: .7; }
.page-top main.page .b-news [class*="nw__title"] { grid-row: 2; grid-column: 1 / -1; font-size: 14px; line-height: 1.8; }
.page-top main.page .b-news .nw-hit { position: absolute; inset: 0; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; z-index: 2; }   /* 行の style 属性（PC の座標）より優先 */
.page-top main.page .b-news .nw__lab { margin-top: -8px; }
.page-top main.page .b-news .nw__quote { margin-top: 12px; }
/* 受け継ぐセクションの、写真の後ろに薄く出る大きな年号（inherit-motion）は SP では出さない */
/* 「年がめぐる」の年号は SP でも出す。置き場所（年表の写真の真ん中）は assets/js/inherit-motion.js が SP で測って入れる */
.ihm-year { font-size: 128px; letter-spacing: .02em; }
body:not([data-ih]) main.page .b-concept.ihm-in .ihm-year { opacity: .08; }   /* 小さな画面では少しだけ濃く（PC .06） */
body:not([data-ih]) main.page .b-concept.ihm-in .ihm-year.is-out { opacity: 0; }
/* Since 1905 の数字のモーション（2026 → 1905 の巻き戻し）を SP でも（2026-09-21 高野様「1905 が PC と同じようにモーションで動くように」）。
   回る数字の窓（.sd）を、柱の「1905」（.cc__1905・幅 44px）とぴったり同じ箱に重ねる。
   窓の中の 4 桁の位置は PC の ai 座標を 1905 の箱（x75 y220 w125 h865）に対する割合にしたもの。上端は sp-calli.js が写真 4 に合わせる */
main.page .b-concept .band__in > .sd {
  position: absolute; left: var(--sp-gutter); top: 0; right: auto; bottom: auto; width: 44px; height: auto; aspect-ratio: 125 / 865;
  margin: 0; --sp-align-top: "cc__ph2";
}
main.page .b-concept .sd__col { position: absolute; width: 136%; }
main.page .b-concept .sd__col--1 { top: -0.512%;  height: 23.285%; left: -17.648%; }
main.page .b-concept .sd__col--2 { top: 25.220%;  height: 25.142%; left: -17.6%; }
main.page .b-concept .sd__col--3 { top: 49.416%;  height: 23.643%; left: -17.6%; }
main.page .b-concept .sd__col--4 { top: 74.794%;  height: 25.892%; left: -17.928%; }

/* ── フッター ── */
main.page .b-footer .band__in { padding: 40px var(--sp-gutter) 20px; gap: 0; }
/* 2026-09-24 フッター上段を案 2「写真に重ねる」に（footer-index.css）。SP：写真を幅いっぱい → INDEX → 索引 2 列（和文＋英語）
   2026-09-24 高野様「スマホは B英語なしにして」（デモ SPフッター1画面_AB の B′）：1077 → 734px（幅 390）
     写真は 12:5 の細い帯（真ん中のりんごの彫り文字「Auguri!」が入る切り取り）・索引は和文だけ・ロゴと SNS を横一列・余白を詰める */
main.page .b-footer .ft__photo { order: 2; width: 100%; height: auto; aspect-ratio: 12 / 5; margin: 0 0 24px; }
main.page .b-footer .ft__photo > img { object-position: 50% 29%; }   /* 写真 3000×4000 の y 約 26〜45% にある彫り文字が帯に入る */
main.page .b-footer .ft__see { left: 16px; bottom: 50px; font-size: 15px; letter-spacing: .04em; }
main.page .b-footer .ft__aug { left: 14px; bottom: 14px; font-size: 38px; }
main.page .b-footer .ft__lab { order: 3; gap: 14px; font-size: 11px; line-height: 1.5; margin-bottom: 14px; }
main.page .b-footer .ft__labrule { width: 72px; }
main.page .b-footer .ft__index { display: block; order: 3; margin-bottom: 28px; }
main.page .b-footer .ft__indexlist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
main.page .b-footer .ft__indexlist li { position: relative; font-size: 14px; line-height: 1.5; letter-spacing: .08em; }
main.page .b-footer .ft__indexlist .en { display: none; }   /* 英語の小見出しは SP では出さない（PC は和文＋英語） */
main.page .b-footer .ft__indexlist .ul { top: calc(14px * 1.5); }
/* 幅 375 未満（SE 第 1 世代 320・Android の 360 など）：「オンラインショップ」「プライバシーポリシー」が 1〜2 字だけ次の行に落ちていた → 2 列を中身の幅にし、13px・字間 .02em で 1 行に収める */
@media (max-width: 374px) {
  main.page .b-footer .ft__indexlist { grid-template-columns: max-content max-content; justify-content: space-between; }
  main.page .b-footer .ft__indexlist li { font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
  main.page .b-footer .ft__indexlist .ul { top: calc(13px * 1.5); }
}
main.page .b-footer .ft__indexlist .ar { display: none; }
main.page .b-footer .ft__rule2 { order: 4; display: block; width: 100%; height: 1px; transform: scaleY(.5); transform-origin: 0 0; margin-bottom: 24px; }
/* ロゴと SNS を横一列（帯の中は横並び・折り返し）。SNS は右端へ、ロゴの高さ 88×68/142 ≒ 42 の中央に SNS 24 を合わせる */
main.page .b-footer .ft__logo { order: 5; width: 88px; height: auto; aspect-ratio: 142 / 68; margin-bottom: 24px; align-self: flex-start; }
main.page .b-footer .ft__sns { display: flex; order: 6; gap: 20px; align-items: center; width: auto; margin: 9px 0 0 auto; align-self: flex-start; }
main.page .b-footer .ft__line, main.page .b-footer .ft__ig { width: 24px; height: 24px; }
main.page .b-footer .ft__yt { width: 34px; height: 24px; }
main.page .b-footer .ft__info { display: flex; flex-direction: column; gap: 2px; order: 7; margin-bottom: 24px; }
main.page .b-footer .ft__info p { font-size: 12px; line-height: 1.7; }
main.page .b-footer .ft__cal {
  display: grid; order: 8; grid-template-columns: repeat(7, 1fr); row-gap: 6px; align-items: end;
  margin-bottom: 24px; text-align: center;
}
main.page .b-footer .ft__cal > * { position: static; }
main.page .b-footer .ft__cal .rule { display: none; }
main.page .b-footer .ft__cal dt { grid-row: 1; font-size: 10px; line-height: 1.3; letter-spacing: .02em; white-space: normal; }   /* 2026-09-21 洗い出し：9 → 10（最小は 10px） */
main.page .b-footer .ft__cal dd { line-height: 1; }
main.page .b-footer .ft__cal [data-cal-date] { grid-row: 2; font-size: 20px; }
main.page .b-footer .ft__cal [data-cal-state] { grid-row: 3; font-size: 12px; }
main.page .b-footer .ft__cal-lab1, main.page .b-footer .ft__cal-num1, main.page .b-footer .ft__cal-st1, main.page .b-footer .ft__cal-r1 { grid-column: 1; }
main.page .b-footer .ft__cal-lab2, main.page .b-footer .ft__cal-num2, main.page .b-footer .ft__cal-st2, main.page .b-footer .ft__cal-r2 { grid-column: 2; }
main.page .b-footer .ft__cal-lab3, main.page .b-footer .ft__cal-num3, main.page .b-footer .ft__cal-st3, main.page .b-footer .ft__cal-r3 { grid-column: 3; }
main.page .b-footer .ft__cal-lab4, main.page .b-footer .ft__cal-num4, main.page .b-footer .ft__cal-st4, main.page .b-footer .ft__cal-r4 { grid-column: 4; }
main.page .b-footer .ft__cal-lab5, main.page .b-footer .ft__cal-num5, main.page .b-footer .ft__cal-st5, main.page .b-footer .ft__cal-r5 { grid-column: 5; }
main.page .b-footer .ft__cal-lab6, main.page .b-footer .ft__cal-num6, main.page .b-footer .ft__cal-st6, main.page .b-footer .ft__cal-r6 { grid-column: 6; }
main.page .b-footer .ft__cal-lab7, main.page .b-footer .ft__cal-num7, main.page .b-footer .ft__cal-st7, main.page .b-footer .ft__cal-r7 { grid-column: 7; }
main.page .b-footer .ft__cal [class*="ft__cal-r"] { display: block; grid-row: 4; width: 24px; height: 1px; justify-self: center; transform: none; }
main.page .b-footer .ft__rule3 { order: 9; display: block; width: 100%; height: 1px; transform: scaleY(.5); transform-origin: 0 0; margin-bottom: 14px; }
main.page .b-footer .ft__copy { order: 10; width: auto; font-size: 10px; line-height: 1.6; text-align: center; }
main.page .b-footer .ft__copy small { font-size: inherit; }   /* <small> で 9.2px に縮んでいた → 親の 10px に（2026-09-21 洗い出し・偶数） */

/* ── お問い合わせフォーム（対話）：幅いっぱい・入力は 16px 以上 ── */
.fm-dialogue .band__in { width: auto; padding: 48px var(--sp-gutter) calc(var(--sp-section-space) * .5); gap: 0; }   /* 下の余白を他の帯と同じに（2026-09-21 セクション間のマージンを統一） */
.fm-dialogue .fm__intro { font-size: 14px; line-height: 2; text-align: center; margin-bottom: 44px; }
.fm-dialogue .fm__intro br { display: none; }
.fm-dialogue .fm__q { display: flex; margin: 52px 0 18px; }
.fm-dialogue .fm__q-no { font-size: 12px; }
.fm-dialogue .fm__q-no::after { width: 24px; margin: 12px auto 14px; }
.fm-dialogue .fm__q-t { font-size: 18px; }
.fm-dialogue .fm__topic { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 0; }
.fm-dialogue .fm__radio1, .fm-dialogue .fm__radio2, .fm-dialogue .fm__radio3, .fm-dialogue .fm__radio4 { font-size: 14px; line-height: 1.9; padding: 0 8px; border-left: 0; }
.fm-dialogue .fm__radio2, .fm-dialogue .fm__radio4 { border-left: 1px solid rgba(0,0,0,.25); }
/* 罫と文字の間をそろえる（2026-09-24 高野様「罫線と文字が近いので、バランスよく」）。
   これまでは左右の欄の中で真ん中に置いていたので、長い「商品・在庫について」だけ罫に 8px まで寄り、右の欄は 23px 空いていた。
   左の欄は右寄せ・右の欄は左寄せにして、罫の両側を同じ 20px にする（欄は本文の幅いっぱい） */
.fm-dialogue .fm__topic { width: 100%; }
.fm-dialogue .fm__radio1, .fm-dialogue .fm__radio3 { text-align: right; padding: 0 20px 0 0; }
.fm-dialogue .fm__radio2, .fm-dialogue .fm__radio4 { text-align: left; padding: 0 0 0 20px; }
@media (max-width: 359px) {   /* 320 幅：「商品・在庫について」が 2 行に割れないよう、罫の両側を 12px に */
  .fm-dialogue .fm__radio1, .fm-dialogue .fm__radio3 { padding-right: 12px; }
  .fm-dialogue .fm__radio2, .fm-dialogue .fm__radio4 { padding-left: 12px; }
}
.fm-dialogue .fm__cond { display: flex; width: 100%; margin-top: 28px; }
.fm-dialogue .fm__cond-q { font-size: 14px; line-height: 1.9; margin-bottom: 4px; }
.fm-dialogue .fm__opt { font-size: 12px; }
.fm-dialogue .fm__cond-in { width: 100%; font-size: 16px; line-height: 2; }
.fm-dialogue .fm__date { width: 100%; }
.fm-dialogue .fm__datefield { width: 100%; font-size: 16px; line-height: 2; padding: 4px 0 8px; }
.fm-dialogue .fm__cal { width: 100%; margin-top: 16px; padding: 16px 12px 12px; }
.fm-dialogue .fm__cal-hd { padding-bottom: 10px; }
.fm-dialogue .fm__cal-ym { font-size: 14px; }
.fm-dialogue .fm__cal-nav { width: 34px; height: 24px; }
.fm-dialogue .fm__cal-wd { padding: 8px 0 6px; }
.fm-dialogue .fm__cal-note { margin-top: 10px; padding-top: 10px; font-size: 12px; }
.fm-dialogue .fm__cond-note { font-size: 14px; line-height: 1.9; margin-bottom: 18px; }
.fm-dialogue .fm__cond-note br { display: none; }
.fm-dialogue .fm__cond-hint { font-size: 12px; line-height: 1.8; margin-top: 12px; }
.fm-dialogue .fm__slots { margin-top: 18px; }
.fm-dialogue .fm__slot { font-size: 14px; line-height: 2; padding: 0 12px; }
.fm-dialogue .band__in > .fm__ph2, .fm-dialogue .band__in > .fm__ph3, .fm-dialogue .band__in > .fm__ph4 { width: 100%; font-size: 16px; line-height: 2; }
.fm-dialogue .band__in > .fm__rule2, .fm-dialogue .band__in > .fm__rule3, .fm-dialogue .band__in > .fm__rule4 { width: 100%; margin-top: 6px; }
.fm-dialogue .band__in > .fm__ph5 { width: 100%; height: 180px; padding: 14px 16px; font-size: 16px; line-height: 1.9; }
/* 結び（Thank you・一言・同意・送信）は記入欄に寄せる（2026-09-21 高野様「もう少し上に」） */
.fm-dialogue .band__in > .fm__ty { width: min(70%, 260px); height: auto; aspect-ratio: 400 / 128; margin: 24px 0 8px; }
.fm-dialogue .fm__close { font-size: 14px; line-height: 2; margin-bottom: 20px; }
.fm-dialogue .fm__agree { display: flex; justify-content: center; align-items: baseline; gap: 8px; margin-bottom: 22px; }
.fm-dialogue .fm__agree > * { width: auto; flex: none; }
.fm-dialogue .fm__check { position: relative; font-size: 14px; }
.fm-dialogue .fm__check-box { width: 14px; height: 14px; }
.fm-dialogue .fm__agree-label { font-size: 14px; line-height: 1.6; }
.fm-dialogue .fm__submit { width: auto; min-width: 200px; margin-inline: auto; padding: 14px 24px; font-size: 16px; }

/* ── 見出しのにじみ（heading-motion）はそのまま。写真のズームループもそのまま。
      ホバーでしか出ない仕掛け（View All の環・カーソル）は、指の端末では触れない ── */
@media (pointer: coarse) {
  .viewall [data-va="ring"] { transform: none; opacity: 1; }
}
}

/* 動きを減らす設定（幅に関係なく） */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .band__in *, .band__in *::before, .band__in *::after { transition: none !important; animation: none !important; }
}

@media (max-width: 767px) {
/* 予約の行は下線のために 14px の内余白を持つので、そのぶん帯の下を詰めて他の帯とそろえる（2026-09-21） */
main.page .b-es-reservation .band__in, main.page .b-ar-cta .band__in { padding-bottom: calc(var(--sp-section-space) * .5 - 10px); }
}

/* ============================================================
   2026-09-23 高野様 SP のご指摘（一気に）
   ============================================================ */
@media (max-width: 767px) {
/* 全画面メニュー：中央の縦線が、下の営業時間・電話・リンクを貫いていた →
   項目と同じく、文字の塊の後ろに地色を敷いて、縦線を塊の上 16px で止める */
[data-menu] .mn__foot { bottom: 0; padding: 16px 0 22px; background-color: var(--c-sage); }
/* 全画面メニューの下の 2 行（営業時間・電話／リンク）：左端と右端をそろえる（2026-09-23 高野様「2 行の左と右のラインを揃えて」）。
   長いほうの行（リンク）の幅に合わせ、短いほうの行は両端に振り分ける */
[data-menu] .mn__foot { display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; row-gap: 12px; }
[data-menu] .mn__foot .mn__nap, [data-menu] .mn__foot .mn__links { justify-content: space-between; }

/* TOP の FV の写真（SP）：手書きの「Auguri!」（写真の左から 3 割のノート）が見えるよう、切り取りを左へ（中央 50% → 20%） */
.page-top main.page .b-fv .fv__photo > img { object-position: 20% 50%; }

/* TOP「Since 1905」：Since を 1905 の字面の中心（左右）にそろえ、1905 に近づける（字面の間 44 → 24px）。
   Since の字面の中心は 1905 より 16.7px 右にあった（字面を測った値）。流れは動かさず、見た目だけ送る */
.page-top main.page .b-concept .cc__since { translate: -16.7px 20px; }

/* TOP「Welcome」：写真との重なりを少し減らす（下へ 12px） */
.page-top main.page .b-choose .ch__thank { translate: 0 12px; }

/* 地色の面と写真・地図をくっつける：帯の上の余白（48.75px）で白い帯が見えていた */
main.page .b-chosen .band__in,               /* 暮らしの品々：ヒーローの地色 → 写真 25 */
main.page .b-sh-access .band__in { padding-top: 0; }   /* 店舗のご案内：地色の面 → 地図 */

/* 暮らしの品々「Pick up」：文字を楕円の見かけの中心に（楕円と文字の字面の中心を測って、その差だけ楕円を送る。
   文字は「p」の下がりのぶん、字面の中心より 1px 上を見かけの中心とした）。sp-calli.js の --sp-nudge（右へ px 下へ px） */
main.page .b-selection .cat1__pick-orn { --sp-nudge: 4.3 6.9; }
main.page .b-selection .cat2__pick-orn { --sp-nudge: 5.6 6.2; }
main.page .b-selection .cat3__pick-orn { --sp-nudge: 6.1 5.8; }
main.page .b-selection .cat4__pick-orn { --sp-nudge: 6.2 6.0; }
/* ジャンル見出し：Care は PC と同じく、小さな輪を「整える」にかけ、流れを Care の下へ（左へ 64px）。
   Taste は楕円を下へ（Taste が楕円の中に入るように） */
main.page .b-selection .cat2__orn { --sp-nudge: -30 2; --sp-edge: 8; }   /* 2026-09-23：-64 だと輪が画面の左端で切れた → 端から 8px の位置まで */
main.page .b-selection .cat4__orn { --sp-nudge: 0 9; }

/* エステ「Our Esthetic」の飾り：見出しの 1 行目にかかっていた → 上へ 14px */
main.page .b-es-our .eso__orn { --sp-nudge: 0 -14; }

/* TOP の GARAGE88 帯：タイトルと文の塊を、画面の見かけの中心に（sp-calli.js が字面を測って塊ごと横に送る） */
main.page .b-g88 .band__in { --sp-optical: "g88__logo g88__lead"; }

/* 記事詳細：本文中の写真の前後に余白（前の文と 32px・キャプションと次の要素 28px。写真とキャプションは 10px） */
main.page .b-ar-body .ar__article .ar__figure { margin: 20px 0 16px; gap: 10px; }
}

/* 2026-09-23 高野様 SP のご指摘（つづき・暮らしの品々） */
@media (max-width: 767px) {
/* 「Our Select」と見出し「Auguri!が見つめる3つのこと」が離れすぎ：
   見出しにかかる楕円のぶん、見出しの上を空けていた（sp-calli.js）→ 空けない（楕円は筆記体との間にかかってよい） */
main.page .b-ourselect .os__orn { --sp-reserve: none; }
/* ジャンル見出し Wear の飾りを左へ（小さな輪が「Wear」の頭にかかるように） */
main.page .b-selection .cat1__orn { --sp-nudge: -48 0; }
/* 4 ジャンル共通：ジャンルとジャンルのあいだ（前の文の終わり → 次のジャンルの上の罫）を 24 → 56px に */
main.page .b-selection .cat1__rule1, main.page .b-selection .cat2__rule1,
main.page .b-selection .cat3__rule1, main.page .b-selection .cat4__rule1 { margin-top: 32px; }
}
@media (max-width: 767px) {
/* エステ：コースとコースのあいだ（前のコースの料金 → 次のコースの写真）を 40 → 72px に（2026-09-23 高野様「エステページも同様に、コースごとのマージンを」） */
main.page .b-es-our .esa + .esa { margin-top: 48px; }   /* 見出し「コース」→ 最初のコースはこれまでどおり */
}
@media (max-width: 767px) {
/* 店舗のご案内「Discover what moves you.」などの写真の添え書きを 1 行に（2026-09-23 高野様「1 行に収まりますか？」）。
   写真の幅（48%）では、書体によって「you.」だけが次の行に落ちていた。写真の左端から始めたまま、折り返さない
   （はみ出すぶんは右の余白 24px の中に収まる） */
main.page .b-sh-flow .fl__vert1, main.page .b-sh-flow .fl__vert2, main.page .b-sh-flow .fl__vert3 { white-space: nowrap; }
}
@media (max-width: 767px) {
/* 暮らしの品々：ジャンルの写真 3 枚を横スワイプに（2026-09-23 高野様「A スワイプにしてください」・デモ 02_demo/写真3枚の見せ方AB_0923.html）。
   1 枚＝画面幅の約 78%。次の写真の端がのぞき、横に送ると 1 枚ずつ止まる。右下に「1 / 3」（数字は sp-calli.js）。
   帯の中の並び順は sp-items.css の末尾（build/g3.py が ph1 の order を引き継ぐ） */
main.page .b-selection .g3 {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  width: calc(100% + 2 * var(--sp-gutter)); max-width: none; margin: 0 calc(-1 * var(--sp-gutter));
  padding: 0 var(--sp-gutter); scroll-padding-inline: var(--sp-gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
main.page .b-selection .g3::-webkit-scrollbar { display: none; }
/* 入れものの中の写真にも「流れに戻す」指定（上の .band__in > * と同じ）を当てる */
main.page .b-selection .g3 > .ph {
  position: relative; left: auto; top: auto; right: auto; bottom: auto; transform: none;
  flex: 0 0 78%; width: auto !important; max-width: none; height: auto; margin: 0 !important; scroll-snap-align: start;
}
main.page .b-selection .g3__count {
  display: block; width: 100%; margin: -12px 0 0; text-align: right;
  font-family: var(--ff-en-display); font-size: 12px; letter-spacing: .14em; color: #6b6b68;
}
/* 横に送れることがわかる控えめな矢印（2026-09-24 高野様「スクロールとわかるように、控えめな矢印を」）。
   「1 / 3」のあとに細い線の矢印。最後の写真まで送ったら消える（.is-end は sp-calli.js）。
   帯が画面に入ったとき 1 回だけ、右へ小さく 2 度ゆれる（.is-seen・動きを減らす設定では動かさない） */
main.page .b-selection .g3__count::after {
  content: ""; display: inline-block; width: 22px; height: 7px; margin-left: 10px; vertical-align: 1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 7'%3E%3Cpath d='M0 3.5h21M17.5 .5l3.5 3-3.5 3' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 7'%3E%3Cpath d='M0 3.5h21M17.5 .5l3.5 3-3.5 3' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transition: opacity .4s ease;
}
main.page .b-selection .g3__count.is-end::after { opacity: 0; }
main.page .b-selection .g3__count.is-seen::after { animation: g3-nudge 1.4s cubic-bezier(.45,0,.2,1) .4s 2 both; }
@keyframes g3-nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { main.page .b-selection .g3__count.is-seen::after { animation: none; } }
/* 見出し「暮らしの中に、好きなものを。」を 1 行に（2026-09-24 高野様「一行にしてください」）。
   13 字は大見出しの大きさ（30px）では 1 行に入らないので、この見出しだけ本文の幅に合わせた大きさにする
   （13 字＋字間 .04em が幅に収まる大きさ。390 で約 25px・430 で約 28px・320 で約 20px） */
main.page .b-selection .tas__h { white-space: nowrap; text-wrap: nowrap; font-size: min(var(--sp-fs-h1), calc((100vw - 2 * var(--sp-gutter)) / 13.7)); }
main.page .b-selection .tas__h wbr { display: none; }   /* 語の区切り（wbr）で折り返さないように */
}
@media (max-width: 767px) {
/* ── 2026-09-23 SP 総点検（高野様のご判断 1〜5・7。1 は build/common.py と preview.js・2 は build/article.py・3 は build/sp.py） ── */
/* 1. 営業カレンダー：今日の欄は「TODAY」だけ（「WED・TODAY」は欄の幅 約 49px に入りきらず 2 行になっていた）。
      今日であることは、オレンジの文字・日付の下のオレンジの線でも示す。PC は「WED・TODAY」のまま */
main.page .b-footer .ft__cal .ft__cal-wd { display: none; }
/* 4. 記事詳細：メイン写真と本文のあいだ（約 98px → 40px）。ほかの間（24〜32px）に近づける */
main.page .b-ar-head .band__in { padding-bottom: 0; }
main.page .b-ar-body .band__in { padding-top: 40px; }
/* 5. エステ「Our Esthetic」の飾り線：画面の右端で切れていた → 本文の幅（右の余白の内側）に収める */
main.page .b-es-our .eso__orn { --sp-edge: 24; }
/* 7. 押せる範囲を広げる（見た目・位置は変えない。padding と同じだけ margin を戻す）
      フッターの索引（高さ 22 → 36px）・TEL／MAIL（14 → 30px）・読みもののページ送り（15 → 45px）・
      お問い合わせ「プライバシーポリシー」（15 → 35px） */
main.page .b-footer [class*="ft__idx"] > a { padding-block: 7px; margin-block: -7px; }   /* 押せるのは中の a（inline-block） */
main.page .b-footer .ft__tel a, main.page .b-footer .ft__mail a { padding-block: 8px; }
main.page .nl__pager a { padding: 15px 8px; margin: 0 -8px; }
.fm__agree-label a { padding-block: 10px; }
/* 記事詳細：パンくず「お知らせ・読みもの」「COLUMN」・日付の「COLUMN」・「← 一覧へもどる」「COLUMN の記事をもっと見る →」
   （高さ 15 → 43px。2026-09-23 高野様「1. は直してください」。文字の a は inline なので、並び・位置は変わらない） */
main.page .ar__crumb a, main.page .ar__meta a, main.page .ar__back a, main.page .ar__more a { padding-block: 14px; }
}
@media (max-width: 767px) {
/* 店舗のご案内 Welcome：写真 66（動画）の下端にかかっていた飾り（楕円 wc__orn2）を SP では出さない
   （2026-09-23 高野様「動画にかかる装飾パーツを削除」）。--sp-anchor を空にして sp-calli.js が置かない
   → 写真の下に空けていた余白（約 29px）もなくなり、「Visit Auguri!」が写真のすぐ下（10px）に来る
   （高野様「Visit〜の位置を画像下に」。暮らしの添え書き「Discover what moves you.」と同じ間）。PC は ai のまま */
main.page .b-sh-welcome .wc__orn2 { display: none; --sp-anchor: ""; }
}