/* OSHIMISE PREMIUM オーバーライド層（2026-08-15 19:35 JST）
   ★app.css の「後」に読み込む。app.css は無改変のまま残す（構造・クラス名は推し店と同一）。
   ★ここで変えるのは見た目だけ＝タイポグラフィ・形状・罫・余白・アクセントの当て方。
     レイアウトの骨格（flex/grid の組み方・stickyの段組み）は app.css のものをそのまま使う。

   狙い: 東京カレンダー的な「黒地・明朝・金の細罫・広い字送り」。
   - 角丸をほぼ全廃（--radius-* は tokens.css で 2px）＝直線だけで構成する
   - 影を全廃し、面の区切りは 1px のヘアラインだけで行う
   - 見出しと店名は明朝（Shippori Mincho B1）、数字と英字は Cormorant Garamond
   - 彩度の高い色は使わない。差し色はゴールド1色に絞る */

/* ============================================================
   1. 基本タイポグラフィ
   ============================================================ */
body {
    font-family: var(--font-body);
    font-weight: 300;
    letter-spacing: 0.03em;
    line-height: 1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 見出し・店名・リードはすべて明朝。太らせず、字間を空けて品を出す */
.hero-card__title,
.article-card__title,
.tile-card__title,
.article-page__title,
.talent-header__name,
.section-title,
.side-box__title,
.rank-row__title,
.stream-row__title,
.empty-state__title,
.content-body h2,
.content-body h3,
.content-body h4 {
    font-family: var(--font-serif);
    font-weight: 500;
    letter-spacing: var(--tracking-title);
}

/* 数字・英字（価格・評価・順位・年月日）はガラモン。数字が締まって見える */
.ranking-row__num,
.rank-row__num,
.header-version,
.price-band,
.rating-score {
    font-family: var(--font-latin);
    font-style: normal;
}

/* ============================================================
   2. ブランド（ヘッダのワードマーク）
   ============================================================ */
.site-header {
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    border-bottom: 1px solid var(--hairline);
}
.site-header__inner { height: 76px; }

.brand { flex-shrink: 0; text-decoration: none; }
.brand__wordmark {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1;
}
.brand__wordmark-main {
    font-family: var(--font-latin);
    font-size: 27px;
    font-weight: 600;
    letter-spacing: 0.20em;
    color: var(--label);
    white-space: nowrap;
}
.brand__wordmark-sub {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-latin);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: var(--accent-text);
    white-space: nowrap;
}
/* サブ行の左右にのびる金の細罫＝箔押しラベルの見立て */
.brand__wordmark-sub::before,
.brand__wordmark-sub::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--hairline-strong);
}
@media (max-width: 480px) {
    .site-header__inner { height: 62px; }
    .brand__wordmark-main { font-size: 19px; letter-spacing: 0.14em; }
    .brand__wordmark-sub { font-size: 8px; letter-spacing: 0.30em; }
}

/* ============================================================
   3. タブ帯（多色チップ → ニュートラル＋金の下線）
   ★app.css の --tab-color による7色塗り分けを打ち消す。
     色数の多さはラグジュアリーと相反するため、選択状態は「金の下線」だけで示す。
   ============================================================ */
.tab-strip {
    top: 76px;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
}
.tab-strip__inner { gap: 0; padding: 0 12px; }

.tab-block {
    background: transparent !important;
    color: var(--secondary-label) !important;
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.16em;
    padding: 15px 16px 13px;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    box-shadow: none !important;
    transition: color 0.18s ease-out, border-color 0.18s ease-out;
}
.tab-block:hover { color: var(--label) !important; }
.tab-block.is-active {
    color: var(--label) !important;
    border-bottom-color: var(--accent-brand);
}
.tab-block:active { transform: none; }

.tab-add {
    color: var(--accent-text);
    background: transparent;
    border-radius: 0;
}

@media (max-width: 480px) {
    .tab-strip { top: 62px; }
    .tab-block { font-size: 13px; letter-spacing: 0.10em; padding: 13px 12px 11px; }
}

/* ============================================================
   4. ヒーロー（全面写真＋暗いグラデーション＋明朝の大見出し）
   ★.hero-card の子要素の順序（img → h2 → p）は変えずに、
     img だけを絶対配置へ回して残りをフレックスで下寄せする。HTMLは無改変。
   ============================================================ */
.hero-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 480px;
    margin: 0 0 8px;
    padding: 0 28px 34px;
    overflow: hidden;
    border-bottom: none;
    background: #0B0B0C;
}
.hero-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
    border-radius: 0;
}
.hero-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6, 6, 7, 0.92) 0%, rgba(6, 6, 7, 0.72) 38%, rgba(6, 6, 7, 0.28) 72%, rgba(6, 6, 7, 0.10) 100%);
}
/* 金のアイブロウ（「今月の一軒」の位置） */
.hero-card::before {
    content: "TONIGHT'S ONE";
    position: absolute;
    left: 28px;
    top: 30px;
    z-index: 2;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: #E0C173;
}
.hero-card__title,
.hero-card .card-meta,
.hero-card .store-excerpt {
    position: relative;
    z-index: 2;
}
.hero-card__title {
    font-size: 34px;
    line-height: 1.42;
    letter-spacing: 0.05em;
    color: #F7F4EE;
    margin-top: 0;
    text-shadow: 0 1px 24px rgba(0, 0, 0, 0.6);
}
.hero-card .card-meta {
    order: 3;
    margin-top: 14px;
    color: rgba(247, 244, 238, 0.72);
    letter-spacing: 0.14em;
}
.hero-card .store-excerpt {
    order: 4;
    margin-top: 10px;
    max-width: 46em;
    font-size: 13.5px;
    line-height: 1.95;
    color: rgba(247, 244, 238, 0.86);
}
.hero-card:active { opacity: 1; }
@media (max-width: 680px) {
    .hero-card { min-height: 400px; padding: 0 18px 26px; }
    .hero-card__title { font-size: 24px; }
    .hero-card::before { left: 18px; top: 22px; font-size: 9.5px; letter-spacing: 0.32em; }
}

/* ============================================================
   5. 一覧カード（罫線1本・角丸なし・サムネ大きめ）
   ============================================================ */
.list-block { border-top: 1px solid var(--hairline); }
.article-card {
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid var(--separator);
    transition: opacity 0.15s ease-out;
}
.article-card:active { opacity: 0.6; }
.article-card__body { min-height: 96px; }
.article-card__title {
    font-size: 17.5px;
    line-height: 1.62;
}
.article-card__thumb {
    flex: 0 0 132px;
    width: 132px;
    height: 96px;
    border-radius: 0;
    border: 1px solid var(--hairline);
}

.card-meta {
    margin-top: 10px;
    font-size: 11px;
    letter-spacing: 0.13em;
    color: var(--secondary-label);
}
.card-meta__source { font-weight: 400; }

.store-excerpt {
    margin-top: 8px;
    font-size: 12.5px;
    line-height: 1.85;
    letter-spacing: 0.03em;
    color: var(--secondary-label);
}

/* タイルカード（2列モザイク） */
.tile-card__image { border-radius: 0; border: 1px solid var(--hairline); }
.tile-card__title { font-size: 15px; line-height: 1.6; }
.block-divider { height: 1px; background: var(--hairline); margin: 28px -14px; }

/* ============================================================
   6. 価格帯・評価（プレミアムで新設する小部品）
   ============================================================ */
.price-band {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-text);
    white-space: nowrap;
}
.rating-score {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--accent-text);
}
/* ミシュラン等の格付けバッジ（金の細枠・塗りなし） */
.honor-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--hairline-strong);
    font-family: var(--font-latin);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.20em;
    color: var(--accent-text);
    white-space: nowrap;
}
.honor-badge--fill {
    background: var(--accent-soft);
    border-color: transparent;
}
/* 「予約困難」のような注意喚起ラベル */
.scarce-label {
    display: inline-block;
    padding: 3px 9px;
    border: 1px solid color-mix(in srgb, var(--live) 55%, transparent);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    color: var(--live);
    white-space: nowrap;
}

/* ============================================================
   7. ボタン・チップ（角丸を捨てて字間を広げる）
   ============================================================ */
.btn-primary {
    border-radius: 0;
    border: 1px solid var(--accent-brand);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.18em;
    padding: 17px 24px;
    transition: background 0.2s ease-out, color 0.2s ease-out;
}
.btn-primary:hover { background: var(--accent-brand); color: #14120F; }

.search-form__btn,
.pagination__btn {
    border-radius: 0;
    letter-spacing: 0.14em;
    font-weight: 500;
    font-family: var(--font-serif);
}
.pagination__btn {
    background: transparent;
    border: 1px solid var(--hairline);
    color: var(--accent-text);
    padding: 13px 10px;
}
.search-form__input,
.header-search__input {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--separator);
    letter-spacing: 0.06em;
}
.header-search__input { height: 38px; }

.talent-chip {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--separator);
    color: var(--secondary-label);
    font-size: 12.5px;
    font-weight: 400;
    letter-spacing: 0.10em;
    padding: 8px 15px;
    transition: border-color 0.18s ease-out, color 0.18s ease-out;
}
.talent-chip:hover { border-color: var(--hairline-strong); color: var(--label); }
.talent-chip.is-active {
    background: transparent;
    border-color: var(--accent-brand);
    color: var(--accent-text);
}
.chip-row { gap: 10px; margin: 18px 0; }

/* ============================================================
   8. セクション見出し（左の色バー → 金の細罫と英字の副題）
   ============================================================ */
.section-title,
.talent-group__title {
    position: relative;
    padding-left: 0;
    padding-bottom: 12px;
    border-left: none;
    border-bottom: 1px solid var(--hairline);
    font-size: 18px;
    letter-spacing: 0.14em;
    margin: 42px 0 4px;
}
.section-title::after,
.talent-group__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 1px;
    background: var(--accent-brand);
}
.page-lead {
    font-size: 12.5px;
    line-height: 1.9;
    letter-spacing: 0.05em;
    margin: 14px 0 22px;
}

/* ============================================================
   9. ランキング（順位はガラモンの大きな数字）
   ============================================================ */
.ranking-row { gap: 20px; }
.ranking-row__num {
    flex: 0 0 46px;
    padding-top: 20px;
    font-size: 34px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--tertiary-label);
}
.ranking-row__num.is-top { color: var(--accent-text); }
.rank-row__num { font-size: 17px; font-weight: 600; font-style: normal; }

/* ============================================================
   10. 読み物（店舗紹介・規約など）
   ============================================================ */
/* 読み物ページ（店舗詳細・規約など）。コンテンツ幅を広げる指示に合わせて 760 → 920px。
   ただし本文の1行が長くなりすぎないよう、.content-body 側で 46em に頭打ちさせる。 */
.narrow { max-width: 920px; padding: 36px 32px 8px; }
.content-body > p,
.content-body > ul,
.content-body > ol { max-width: 46em; }
@media (max-width: 679px) { .narrow { padding: 20px 18px 8px; } }
.article-page__title { font-size: 30px; line-height: 1.5; letter-spacing: 0.05em; }
.article-page__image { border-radius: 0; border: 1px solid var(--hairline); }
.article-page__summary { font-size: 15px; line-height: 2.0; letter-spacing: 0.04em; }
.content-body { font-size: 15px; line-height: 2.05; letter-spacing: 0.04em; }
.content-body h2 {
    font-size: 21px;
    letter-spacing: 0.10em;
    border-left: none;
    padding-left: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hairline);
}
.content-body h3 { font-size: 17px; letter-spacing: 0.08em; border-left: none; padding-left: 0; }
.content-body blockquote {
    border-left: 1px solid var(--accent-brand);
    background: transparent;
    font-family: var(--font-serif);
    font-style: normal;
    letter-spacing: 0.05em;
}
.content-body table th { background: var(--accent-soft); font-weight: 500; font-family: var(--font-serif); letter-spacing: 0.06em; }
.content-body table th,
.content-body table td { border-color: var(--separator); padding: 12px 14px; }
.content-body img { border-radius: 0; }

/* ============================================================
   11. サイド・フッタ
   ============================================================ */
.side-box {
    border-radius: 0;
    border: 1px solid var(--hairline);
    background: transparent;
}
.rank-row { border-bottom-color: var(--separator); }

.site-footer {
    margin-top: 64px;
    padding-top: 40px;
    border-top: 1px solid var(--hairline);
}
.site-footer__nav {
    gap: 10px 22px;
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0.10em;
}
.site-footer__note { font-size: 11.5px; letter-spacing: 0.06em; }
.site-footer__sponsor,
.site-footer__copy { letter-spacing: 0.08em; }
/* フッタのブランド署名（HTML側で .site-footer__brand を先頭に置く） */
.site-footer__brand {
    font-family: var(--font-latin);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.30em;
    color: var(--label);
    margin-bottom: 6px;
}
.engine-badge {
    border-radius: 0;
    background: transparent;
    border: 1px solid var(--separator);
    color: var(--secondary-label);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.10em;
    padding: 7px 15px;
}

/* ============================================================
   12. 広告・バッジ類の角を落とす
   ============================================================ */
.ad-pr-label,
.feed-badge,
.ad-card__label { border-radius: 0; }
.feed-badge {
    letter-spacing: 0.14em;
    font-weight: 400;
    padding: 1px 7px;
}
.feed-badge--original { background: transparent; border: 1px solid var(--hairline-strong); color: var(--accent-text); }
.ad-card__img, .ad-card__html { border-radius: 0; }
.lang-switch {
    border-radius: 0;
    font-family: var(--font-latin);
    font-weight: 600;
    letter-spacing: 0.14em;
    border-color: var(--separator);
}
.header-version { letter-spacing: 0.10em; }

/* ============================================================
   13. モバイル固定ボトムナビ
   ============================================================ */
@media (max-width: 768px) {
    .bottom-nav {
        background: color-mix(in srgb, var(--surface) 94%, transparent);
        border-top: 1px solid var(--hairline);
    }
    .bottom-nav__item { font-weight: 400; letter-spacing: 0.06em; }
}

/* ============================================================
   14. 汎用ユーティリティ（各ページの <style> から使う）
   ============================================================ */
.gold-rule {
    height: 1px;
    background: var(--gold-gradient);
    opacity: 0.55;
    margin: 32px 0;
    border: none;
}
.eyebrow {
    display: block;
    font-family: var(--font-latin);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.42em;
    color: var(--accent-text);
    margin-bottom: 10px;
}
.serif { font-family: var(--font-serif); font-weight: 500; letter-spacing: 0.05em; }

/* ============================================================
   15-a. 明朝の可読性補正
   ★2026-08-15 20:0x JST ユーザー指示「明朝体はやや見にくいのでフォントサイズを少し上げる」
     明朝は同じ級数でもゴシックより線が細く見える（特に黒地＋白文字）。
     ここで①級数を一段上げ ②小さめの見出しはウェイトを600へ ③本文も少し上げる。
   ============================================================ */
body { font-size: 16px; }

.hero-card__title { font-size: 38px; }
.article-card__title { font-size: 19.5px; font-weight: 600; }
.tile-card__title { font-size: 17px; font-weight: 600; }
.article-page__title { font-size: 34px; }
.talent-header__name { font-size: 30px; }
.section-title,
.side-box__title,
.talent-group__title { font-size: 20.5px; font-weight: 600; }
.rank-row__title,
.stream-row__title { font-size: 15.5px; font-weight: 600; }
.empty-state__title { font-size: 19px; font-weight: 600; }
.content-body { font-size: 16px; }
.content-body h2 { font-size: 24px; }
.content-body h3 { font-size: 19.5px; font-weight: 600; }
.content-body h4 { font-size: 17px; font-weight: 600; }
.article-page__summary { font-size: 16.5px; }
.btn-primary { font-size: 17px; font-weight: 600; }
.tab-block { font-size: 16px; font-weight: 600; }
.store-excerpt { font-size: 13.5px; }
.card-meta { font-size: 12px; }
.page-lead { font-size: 13.5px; }
.side-box__text { font-size: 14px; line-height: 1.9; }
.talent-chip { font-size: 13.5px; }
.site-footer__nav { font-size: 12.5px; }
.site-footer__note { font-size: 12.5px; }

@media (min-width: 1024px) {
    .article-card__title { font-size: 26px; }
}
@media (max-width: 680px) {
    .hero-card__title { font-size: 27px; }
    .article-card__title { font-size: 18px; }
    .tab-block { font-size: 14.5px; }
}

/* ============================================================
   15-b. 一覧カードの情報階層
   ★2026-08-15 20:1x JST ユーザー指示
     「店名／エリア・ジャンル・評価／説明文 のフォントサイズを上げ、
       各要素が視覚的に分かりやすいようにする。説明文は2〜3倍の文字量に」
     → 3要素で「書体・級数・色・間隔」をすべて変え、役割を見て分かるようにする。
        ①店名   = 明朝・最大級・白（--label）
        ②メタ   = 極小・字間最大・二次色。ジャンルは金の細罫で囲って独立させる
        ③説明文 = 本文級・行間2.0・二次色。1行の長さは 40em で頭打ち
   ============================================================ */
.article-card__title,
.tile-card__title {
    color: var(--label);
    margin-bottom: 2px;
}
.article-card .card-meta,
.tile-card .card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0.16em;
    white-space: normal;
    overflow: visible;
}
/* ジャンル＝金の細罫の小さな箱にして、店名からも説明文からも切り離す */
.article-card .card-meta__source,
.tile-card .card-meta__source {
    padding: 3px 10px 2px;
    border: 1px solid var(--separator);
    color: var(--secondary-label);
    overflow: visible;
    text-overflow: clip;
}
/* 評価＝ガラモンの金の数字。ここだけ色と書体が変わるので一瞬で拾える */
.card-rating {
    font-family: var(--font-latin);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-text);
    line-height: 1;
}
/* 説明文は本文色（ダークでは白／ライトでは墨）。二次色だと沈んで読みにくいため。
   ★2026-08-15 20:2x JST ユーザー指示「フォントカラーはホワイトで、少しサイズ下げて」 */
.article-card .store-excerpt,
.tile-card .store-excerpt {
    margin-top: 14px;
    max-width: 40em;
    font-size: 13.5px;
    line-height: 2.0;
    letter-spacing: 0.04em;
    color: var(--label-soft);
}
/* 説明文が伸びるぶんカードの高さは可変にする（サムネは上端に固定） */
.article-card { align-items: flex-start; }
.article-card__body { justify-content: flex-start; }

@media (min-width: 1024px) {
    .article-card__title { font-size: 26px; line-height: 1.55; }
    .article-card .store-excerpt { font-size: 14px; }
    .article-card .card-meta { font-size: 12.5px; }
}
@media (max-width: 679px) {
    .article-card .store-excerpt { font-size: 13px; line-height: 1.95; margin-top: 10px; }
    .article-card .card-meta { gap: 8px; margin-top: 10px; }
    .card-rating { font-size: 15px; }
}

/* ヒーローも同じ階層で組む（地が写真なので色は明るい側に振る） */
.hero-card .card-meta__source {
    border-color: rgba(224, 193, 115, 0.45);
    color: rgba(247, 244, 238, 0.86);
    padding: 3px 10px 2px;
}
.hero-card .card-rating { color: #E0C173; }
.hero-card .card-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ============================================================
   15. 版面（コンテンツ幅と余白）
   ★2026-08-15 19:5x JST ユーザー指示:
     ①コンテンツ幅は食べログ級までもう少し広げる（app.css の 1080px → 1280px）
     ②ベースのモックより「余白感」を大事にする（行間・段間・カード間をすべて広げる）
   ============================================================ */
.site-header__inner,
.tab-strip__inner,
.layout,
.site-footer {
    max-width: 1280px;
}
.site-header__inner { padding: 0 32px; }
.tab-strip__inner { padding: 0 32px; }
.site-footer { padding: 40px 32px calc(56px + env(safe-area-inset-bottom)); }

.layout {
    gap: 48px;
    padding: 36px 32px 0;
    align-items: flex-start;
}
.feed-main {
    background: var(--surface);
    border: 1px solid var(--separator);
    border-radius: 0;
    padding: 0 40px;
}
@media (min-width: 1024px) {
    .sidebar { width: 324px; flex: 0 0 324px; }
}

/* ヒーローは feed-main の内側パディングを打ち消して左右いっぱいに出す（雑誌の見開き） */
.hero-card {
    margin: 0 -40px 12px;
}
/* プレースホルダの大きなイニシャルは「地紋」として薄く沈める＝主役は文字組み */
.hero-card__image {
    opacity: 0.5;
    filter: saturate(0.85);
}

/* 版面を広げた分、デスクトップではサムネイルも大きく取る（雑誌の図版寸法に寄せる） */
@media (min-width: 1024px) {
    .article-card__thumb { flex: 0 0 208px; width: 208px; height: 142px; }
    .article-card__body { min-height: 142px; }
    /* ★店名の級数は 15-b（PC=26px）が正。ここで再指定すると後勝ちで潰れるため書かない */
}

/* 余白: カード間・見出し前後・本文の行間をベースより広く取る */
.article-card { gap: 26px; padding: 30px 0; }
.list-block { margin-bottom: 8px; }
.tile-grid { gap: 32px 26px; padding: 26px 0; }
.side-box { padding: 22px 20px; margin-bottom: 24px; }
.rank-row { padding: 14px 0; }
.chip-row { gap: 12px; margin: 24px 0; }
.pagination { padding: 32px 0 40px; }

@media (max-width: 1023px) {
    .layout { padding: 24px 20px 0; }
    .feed-main { padding: 0 28px; }
    .hero-card { margin: 0 -28px 12px; }
}
@media (max-width: 679px) {
    .site-header__inner, .tab-strip__inner { padding: 0 16px; }
    .layout { padding: 0; }
    .feed-main { padding: 0 18px; border: none; border-bottom: 1px solid var(--separator); }
    .hero-card { margin: 0 -18px 10px; }
    .article-card { gap: 16px; padding: 22px 0; }
    .site-footer { padding: 32px 20px calc(40px + env(safe-area-inset-bottom)); }
}


/* ============================================================
   16. サイドボックスの見出しと本文
   ★2026-08-15 20:05 JST ユーザー指示
     「行間を抑える／タイトル下の余白をもう少し／タイトル上の余白は少し狭める」
     箱の中の見出しなので、本文用の .section-title（上マージン42px）とは別に定義する。
   ============================================================ */
.side-box__title {
    position: relative;
    margin: 4px 0 22px;          /* 上を詰めて、下を広げる */
    padding: 0 0 13px;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-serif);
    font-size: 20.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    line-height: 1.5;
}
.side-box__title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 56px;
    height: 1px;
    background: var(--accent-brand);
}
.side-box__text {
    font-size: 14px;
    line-height: 1.7;            /* 行間を抑える */
    letter-spacing: 0.02em;
}
.side-box { padding: 20px 20px 22px; }

/* 説明文の扱いは一覧・ランキング・タイル・検索結果で共通にする
   （.article-card 配下だけに当てていたため、ランキング行だけ色が沈んでいた） */
.store-excerpt {
    max-width: 40em;
    font-size: 13.5px;
    line-height: 2.0;
    letter-spacing: 0.04em;
    color: var(--label-soft);
}
@media (min-width: 1024px) { .store-excerpt { font-size: 14px; } }
@media (max-width: 679px) { .store-excerpt { font-size: 13px; line-height: 1.95; } }
/* ヒーローだけは写真の上なので明るい側で固定する（上の共通指定より後に置いて勝たせる） */
.hero-card .store-excerpt { font-size: 13.5px; line-height: 1.95; color: rgba(247, 244, 238, 0.86); max-width: 46em; }


/* ============================================================
   17. 数字だけの部分を大きくする
   ★2026-08-15 20:1x JST ユーザー指示「ランキングの数字など、数字単体の部分が小さい」
     Cormorant Garamond は x-height が低く、同じ級数でもゴシックより数字が小さく見える。
     数字だけで意味を持つ箇所（順位・評価・スコア）は、まとめて一段大きく取る。
   ============================================================ */
.ranking-row__num {
    flex: 0 0 66px;
    padding-top: 14px;
    font-size: 48px;
    line-height: 1;
    font-weight: 500;
}
.rank-row__num {
    font-size: 24px;
    line-height: 1;
    font-weight: 500;
    padding-top: 2px;
}
.card-rating { font-size: 19px; }
.hero-card .card-rating { font-size: 21px; }
/* 店舗ページの総合評価（ページ内 <style> の .review-summary__score を上書き） */
.review-summary__score {
    font-family: var(--font-latin);
    font-size: 46px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}
/* 予約フローのステップ番号・カレンダーの日付・人数のカウンタ */
.rsv-steps__num { font-family: var(--font-latin); font-size: 17px; font-weight: 600; }
.rsv-day__n { font-family: var(--font-latin); font-size: 18px; font-weight: 600; }
.rsv-stepper__value { font-family: var(--font-latin); font-size: 24px; font-weight: 600; }
.rsv-cal__month { font-family: var(--font-latin); font-size: 20px; font-weight: 600; letter-spacing: .06em; }
/* 管理画面の指標（自己完結CSSのため、こちらのファイルからは触れない＝tenant側で対応済み） */

/* ★2026-08-15 20:1x JST ユーザー指摘: スマホのランキングで順位の列が幅を取りすぎ、
     店名・説明文・サムネのスペースが足りなくなっていた。
     モバイルでは順位を小さめの細い柱にし、行間のgapも詰めて本文に幅を回す。 */
@media (max-width: 679px) {
    .ranking-row { gap: 10px; }
    .ranking-row__num {
        flex: 0 0 24px;
        width: 24px;
        padding-top: 24px;
        font-size: 22px;
        letter-spacing: 0;
        text-align: left;
    }
    .card-rating { font-size: 17px; }
    .review-summary__score { font-size: 38px; }
}


/* ============================================================
   18. モバイルの一覧・ランキングの幅配分
   ★2026-08-15 20:2x JST ユーザー指摘（ranking.html スマホ）
     「数字がかなり幅取っていて、テキストや画像のスペースが十分でない」
     375px の内訳を実測して再配分する:
       余白36 ＋ 順位20 ＋ gap8 ＋ サムネ92 ＋ gap12 → 本文に約207px を確保
     あわせて説明文は4行でクランプし、1件が縦に伸びすぎないようにする。
   ============================================================ */
@media (max-width: 679px) {
    .article-card { gap: 12px; }
    .article-card__thumb { flex: 0 0 92px; width: 92px; height: 66px; }
    .article-card__body { min-height: 66px; }
    .ranking-row { gap: 8px; }
    .ranking-row__num { flex: 0 0 20px; width: 20px; font-size: 20px; padding-top: 22px; }
    .store-excerpt {
        letter-spacing: 0.01em;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* ヒーローは1カラムなのでクランプしない（全文を読ませる） */
    .hero-card .store-excerpt { display: block; overflow: visible; letter-spacing: 0.03em; }
}


/* ============================================================
   19. ボタンの折り返しとモバイルヘッダ
   ★2026-08-15 20:3x JST ユーザー指摘
     ①mypage の買い切りボタンの文字が詰まっている
        → app.css の .auth-btn は height:48px 固定。長い日本語ラベルが押し込まれるため、
          高さを可変にして上下パディングと行間で受ける。
     ②スマホのヘッダが詰まっている
        → ワードマーク＋検索(220px)＋歯車 が 375px に収まらない。検索を縮めて間隔を作る。
   ============================================================ */
.auth-btn {
    height: auto;
    min-height: 54px;
    padding: 16px 20px;
    border-radius: 0;
    border: 1px solid var(--accent-brand);
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.10em;
    line-height: 1.7;
    white-space: normal;
    overflow-wrap: anywhere;
    transition: background 0.2s ease-out, color 0.2s ease-out;
}
.auth-btn:hover { background: var(--accent-brand); color: #14120F; }
.auth-btn--ghost {
    background: transparent;
    border-color: var(--separator);
    color: var(--label);
}
.auth-btn--ghost:hover { background: transparent; border-color: var(--hairline-strong); color: var(--accent-text); }
.account-purchase-lead { line-height: 1.9; margin-bottom: 14px; }

/* モバイルヘッダ: 検索欄を縮めて、ワードマーク・検索・歯車の間に余白を作る */
@media (max-width: 680px) {
    .site-header__inner { gap: 10px; padding: 0 16px; }
    .header-search { flex: 1 1 auto; min-width: 0; margin-left: 0; }
    .header-search__input { height: 36px; padding: 0 12px; font-size: 13px; letter-spacing: 0.02em; }
    .header-gear-wrap { margin-left: 0; }
    .header-gear { margin-left: 0; }
}
@media (max-width: 480px) {
    .brand__wordmark-main { font-size: 17px; letter-spacing: 0.10em; }
    .brand__wordmark-sub { font-size: 7.5px; letter-spacing: 0.24em; gap: 5px; }
    .header-search__input { font-size: 12.5px; }
}


/* ============================================================
   20. 角丸の最終掃除
   app.css には 8/10/12px の角丸が直値で多数残っている（トークン経由ではない）。
   直線基調を全ページで通すため、面・入力・ボタンの角丸をここで落とす。
   ★丸いままにするもの（意図的な円）＝ .nav-dot（未読ドット）／.header-gear（歯車の円）
     ／アバター類。これらは下部で明示的に戻している。
   ============================================================ */
.side-box,
.auth-card,
.auth-input,
.auth-field input,
.account-row,
.account-purchase,
.account-badge,
.account-restore,
.prose,
.empty-state,
.theme-menu,
.tab-modal__sheet,
.tab-modal__input,
.tab-modal__btn,
.tab-modal__section,
.tab-catalog-item,
.tab-catalog-swatch,
.tab-edit-row,
.tab-edit-row__swatch,
.tab-edit-lock,
.tab-edit-lock__btn,
.mytab-row,
.mytab-row__del,
.follow-btn,
.follow-row,
.stream-row__badge,
.suggest-form input,
.talent-cell,
.hero-card__image,
.article-page__image,
.tile-card__image,
.ad-card__img,
.ad-card__html,
.content-body pre,
.content-body img,
.content-body :not(pre) > code,
.store-hero__ph,
.review-item,
.rsv-panel,
.engine-badge,
.lang-switch,
.feed-badge,
.adm-btn,
.adm-tag,
.adm-conn__card { border-radius: 0; }

/* 意図的に円のままにするもの */
.nav-dot { border-radius: 999px; }
.header-gear { border-radius: 999px; }

/* フォローボタンは塗りのピルではなく、金の細枠の角形にする */
.follow-btn {
    border: 1px solid var(--hairline-strong);
    background: transparent;
    color: var(--accent-text);
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.14em;
    transition: background 0.2s ease-out, color 0.2s ease-out;
}
.follow-btn:hover { background: var(--accent-brand); color: #14120F; border-color: var(--accent-brand); }


/* ============================================================
   21. 店舗詳細ページの細部
   ============================================================ */
/* 主役写真は 16:9 だと縦に間延びするので、雑誌の扉のような横長にする */
.store-hero__ph {
    aspect-ratio: 21 / 9;
    font-size: 28px;
    letter-spacing: 0.30em;
    border: 1px solid var(--hairline);
}
.store-hero { margin: 28px 0 40px; }
/* 店名直下のリードは本文級（一覧カードより一段大きく） */
.talent-header .store-excerpt,
.narrow > .store-excerpt,
.talent-header + .store-excerpt {
    font-size: 15.5px;
    line-height: 2.0;
    max-width: 44em;
    margin-top: 12px;
}
.agency-name { border-left: 2px solid var(--accent-brand); padding-left: 18px; }

/* ============================================================
   22. 見出しの装飾を外す＋サイドの「とは」ブロック
   ★2026-08-15 20:1x JST ユーザー指示
     ①「見出しの左側の黄色い線」は不要 → 見出し下の金の短い罫（::after）を全廃する
     ②「OSHIMISE PREMIUM とは」の見出しだけ小さくする（「注目の一軒」は現状維持）
   ============================================================ */
.section-title::after,
.side-box__title::after,
.talent-group__title::after { content: none; }

.side-box--about .side-box__title {
    font-size: 15px;
    letter-spacing: 0.10em;
    margin: 4px 0 16px;
    padding-bottom: 11px;
}
.side-box--about .side-box__text { font-size: 13.5px; line-height: 1.75; }


/* ============================================================
   23. モバイルの順位を大きくする（幅は据え置き）
   ★2026-08-15 20:2x JST ユーザー指示
     「順位の数字が小さい。でもテキストと画像エリアの幅は変えないで」
     → 柱の幅（flex-basis 20px）と gap は一切変えず、字面だけを大きくする。
       ranking.html の順位は1〜9の1桁なので、32px でも 20px の柱に収まる（実測）。
   ============================================================ */
@media (max-width: 679px) {
    .ranking-row__num {
        flex: 0 0 20px;
        width: 20px;
        font-size: 32px;
        line-height: 1;
        padding-top: 18px;
        letter-spacing: 0;
        text-align: left;
        overflow: visible;
    }
}


/* ============================================================
   24. フッタのエンジン表記
   ★2026-08-15 20:1x JST ユーザー指示「もっと目立たなく小さくしていい」
     枠も地も外し、三次色の極小テキストにする（署名としてだけ残す）。
   ============================================================ */
.site-footer__engine { margin: 18px 0 4px; }
.engine-badge {
    display: inline-block;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--tertiary-label);
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0.06em;
}
.engine-badge a { color: var(--tertiary-label); text-decoration: none; border-bottom: 1px solid var(--separator); }
.engine-badge a:hover { color: var(--secondary-label); }


/* ============================================================
   25. フッタの整理
   ★2026-08-15 20:2x JST ユーザー指示
     「要素同士が上下近くてごちゃごちゃする。余白かラインでメリハリを」
     → 3ブロックに分けて、あいだにヘアラインを入れる:
        ①ブランド署名＋タグライン ②サイトマップ ③運営表記＋エンジン表記
   ============================================================ */
.site-footer {
    margin-top: 80px;
    padding-top: 0;
    border-top: 1px solid var(--hairline);
}

/* ① ブランド署名ブロック */
.site-footer__brand {
    font-size: 22px;
    letter-spacing: 0.30em;
    margin: 0;
    padding-top: 48px;
}
.site-footer__note {
    margin: 14px 0 0;
    padding-bottom: 40px;
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--secondary-label);
}

/* ② サイトマップ（上下にヘアラインを引いて独立したブロックにする） */
.site-footer__nav {
    margin: 0;
    padding: 34px 0;
    gap: 18px 30px;
    border-top: 1px solid var(--separator);
    border-bottom: 1px solid var(--separator);
    font-size: 12px;
    letter-spacing: 0.10em;
    line-height: 1.6;
    color: var(--secondary-label);
}
.site-footer__nav a { padding: 2px 0; transition: color 0.18s ease-out; }
.site-footer__nav a:hover { color: var(--accent-text); }

/* ③ 運営表記ブロック */
.site-footer__sponsor {
    margin: 0;
    padding-top: 34px;
    font-size: 11.5px;
    line-height: 1.9;
    letter-spacing: 0.06em;
    color: var(--secondary-label);
}
.site-footer__copy {
    margin: 8px 0 0;
    font-size: 11px;
    letter-spacing: 0.10em;
    color: var(--tertiary-label);
}
.site-footer__engine { margin: 26px 0 0; }

@media (max-width: 679px) {
    .site-footer { margin-top: 56px; }
    .site-footer__brand { font-size: 18px; padding-top: 34px; }
    .site-footer__note { padding-bottom: 28px; }
    .site-footer__nav { padding: 24px 0; gap: 14px 22px; }
    .site-footer__sponsor { padding-top: 24px; }
}


/* ============================================================
   26. 左の縦罫つき見出しの余白
   ★2026-08-15 20:1x JST ユーザー指示
     「左側の線はそのままでいいので、線とテキストがくっつかないように padding を入れて」
     app.css は padding-left:10〜12px と詰まっているため、罫を細くして間隔を広げる。
   ============================================================ */
.prose h2,
.tab-modal__section-title,
.talent-group__title,
.agency-name,
.content-body h2.has-bar {
    padding-left: 20px;
    border-left: 2px solid var(--accent-brand);
    line-height: 1.6;
}
.prose h2 {
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: 0.10em;
    margin: 2.2em 0 0.8em;
}
.tab-modal__section-title {
    font-family: var(--font-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.10em;
    margin-bottom: 10px;
}
.agency-name { padding-left: 22px; }
/* 見出し直後の本文が罫に近づきすぎないよう、上マージンも少し取る */
.prose h2 + p,
.prose h2 + ul,
.prose h2 + table,
.prose h2 + dl { margin-top: 0.9em; }

/* 読み物ページ（運営者情報・規約など）の見出しも明朝に揃える */
.prose h1, .prose h3, .prose h4,
.article-page__breadcrumb + h1 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: 0.08em;
}
.prose h1 { font-size: 26px; line-height: 1.5; margin-bottom: 0.8em; }
.prose h3 { font-size: 16.5px; }


/* ============================================================
   27. 店舗詳細ページ（store.html）の個別調整
   ★2026-08-15 20:1x〜20:2x JST ユーザー指示
     ①スマホ:「プレミアム予約のキャンセル料について」の見出しを大きくせず1行に収める
     ②PC: 最新情報カードの見出しが大きすぎるので少し落とす（一覧の26pxを流用しない）
     ③PC/スマホ共通: 最新情報カードに小さめの抜粋文を2行程度添える
     ④PC: 「店舗基本情報」の地図の上に余白を足す
   ============================================================ */

/* ② 読み物ページ内の一覧カードは、トップの一覧より一段小さい級数にする */
.narrow .list-block .article-card__title {
    font-size: 18px;
    line-height: 1.65;
}
@media (min-width: 1024px) {
    .narrow .list-block .article-card__title { font-size: 19.5px; }
}

/* ③ 最新情報カードの抜粋（本文より小さく、2〜3行で頭打ち） */
.news-excerpt {
    margin-top: 10px;
    max-width: 44em;
    font-size: 13px;
    line-height: 1.9;
    letter-spacing: 0.03em;
    color: var(--label-soft);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 1024px) { .news-excerpt { font-size: 13.5px; -webkit-line-clamp: 2; } }

/* ④ 地図の上に余白（PCのみ。モバイルは詰まっていないので触らない） */
@media (min-width: 1024px) {
    .store-map { margin-top: 40px; }
}

/* ① キャンセルポリシー箱の見出し（スマホでは1行に収める） */
@media (max-width: 679px) {
    .side-box__title {
        font-size: 14px;
        letter-spacing: 0.02em;
        line-height: 1.5;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 2px 0 16px;
        padding-bottom: 10px;
    }
}


/* ============================================================
   28. ヘッダの検索フォーム
   ★2026-08-15 20:2x JST ユーザー指示
     ①プレースホルダを「お店を探す」に ②虫眼鏡の検索ボタンを追加
     ③スマホではロゴと少し離す ④文字を1pxほど小さく
   ============================================================ */
.header-search {
    position: relative;
    display: flex;
    align-items: center;
}
.header-search__input {
    padding-right: 42px;          /* 虫眼鏡のぶんを空ける */
    font-size: 13px;              /* ④ 1px 落とす */
}
.header-search__btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--secondary-label);
    cursor: pointer;
    transition: color 0.18s ease-out;
}
.header-search__btn svg { width: 17px; height: 17px; display: block; }
.header-search__btn:hover { color: var(--accent-text); }
.header-search__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 680px) {
    /* ③ ロゴと検索欄のあいだを空ける */
    .site-header__inner { gap: 14px; }
    .header-search { margin-left: 8px; }
    .header-search__input { font-size: 12px; padding-right: 38px; }
    .header-search__btn { width: 36px; }
    .header-search__btn svg { width: 16px; height: 16px; }
}
@media (max-width: 480px) {
    .site-header__inner { gap: 12px; }
    .header-search { margin-left: 6px; }
    .header-search__input { font-size: 11.5px; }
}


/* ============================================================
   29. マイページ（mypage.html）
   ★2026-08-15 20:2x JST ユーザー指示
     ①最上部の「マイページ」を明朝体にする
     ②PC版だけ、セクションがごちゃごちゃして見えるので節ごとに余白を持たせる
        → .narrow--account は mypage.html 専用のスコープ（他の読み物ページには効かせない）
   ============================================================ */
.auth-title {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.5;
    margin-bottom: 20px;
}
.auth-lead { font-size: 14px; line-height: 1.9; }

/* ② PC版のセクション間隔（節の切れ目をはっきりさせる） */
@media (min-width: 1024px) {
    .narrow--account > .auth-card { margin-bottom: 20px; padding-bottom: 8px; }
    .narrow--account > section {
        margin-top: 76px;
        padding-top: 4px;
    }
    .narrow--account > section:first-of-type { margin-top: 56px; }
    /* 節の見出しは上マージンを持たせない（section 側で間隔を取っているため二重にしない） */
    .narrow--account > section > .section-title { margin-top: 0; margin-bottom: 22px; }
    /* 節の中身どうしも少し離す */
    .narrow--account > section > * + * { margin-top: 18px; }
    .narrow--account > section .page-lead { margin: 0 0 22px; }
}
@media (max-width: 1023px) {
    .narrow--account > section > .section-title { margin-top: 44px; }
}


/* ============================================================
   30. サイドボックス見出しの左罫と文字の間隔
   ★2026-08-15 20:3x JST ユーザー指摘「線と文字が重なっている」
     app.css の .side-box__title は `padding-left:10px + border-left:3px` だが、
     セクション16で padding を 0 に上書きしてしまい、文字が罫に接していた。
     罫は残す方針（指示8と同じ）なので、左padding を戻して広めに取る。
   ============================================================ */
.side-box__title {
    padding-left: 18px;
    border-left: 2px solid var(--accent-brand);
    padding-bottom: 13px;
}
.side-box--about .side-box__title { padding-left: 16px; padding-bottom: 11px; }
@media (max-width: 679px) {
    .side-box__title { padding-left: 14px; padding-bottom: 10px; }
}


/* ============================================================
   31. ヘッダーのアカウントメニュー
   ★2026-08-15 20:5x JST ユーザー指示
     「マイページへの導線がないのでヘッダーに追加。スマホはハンバーガーのように
       マイページ・設定などが並ぶ形でも」
     → 歯車の単純リンクを人物アイコンのボタンに替え、ドロップダウンを出す。
       デスクトップ＝右上のパネル／スマホ＝画面幅いっぱいのシート。
   ============================================================ */
.header-gear { cursor: pointer; }
.header-gear[aria-expanded="true"] { color: var(--accent-text); border-color: var(--hairline-strong); }

.acct-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 14px);
    z-index: 200;
    width: 268px;
    padding: 16px 0 10px;
    background: var(--surface);
    border: 1px solid var(--hairline);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}
.acct-menu[hidden] { display: none; }
.acct-menu__head {
    padding: 0 18px 8px;
    margin-top: 12px;
    font-family: var(--font-latin);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.28em;
    color: var(--accent-text);
    border-bottom: 1px solid var(--separator);
}
.acct-menu__head:first-child { margin-top: 0; }
.acct-menu__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    color: var(--label);
    text-decoration: none;
    font-size: 13.5px;
    letter-spacing: 0.06em;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}
.acct-menu__item svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--secondary-label); }
.acct-menu__item:hover { background: var(--fill); color: var(--accent-text); }
.acct-menu__item:hover svg { color: var(--accent-text); }

.acct-menu__themes { display: flex; gap: 0; padding: 12px 18px 6px; }
.acct-theme {
    flex: 1;
    padding: 9px 4px;
    border: 1px solid var(--separator);
    border-right-width: 0;
    border-radius: 0;
    background: transparent;
    color: var(--secondary-label);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.04em;
    transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.acct-theme:last-child { border-right-width: 1px; }
.acct-theme:hover { color: var(--label); }
.acct-theme.is-active { border-color: var(--accent-brand); color: var(--accent-text); position: relative; z-index: 1; }

/* スマホ: 画面幅いっぱいのシートにする（ハンバーガーメニュー相当） */
@media (max-width: 680px) {
    .acct-menu {
        position: fixed;
        left: 0;
        right: 0;
        top: 62px;
        width: auto;
        max-height: calc(100vh - 62px);
        overflow-y: auto;
        padding: 10px 0 calc(20px + env(safe-area-inset-bottom));
        border-left: none;
        border-right: none;
    }
    .acct-menu__item { padding: 15px 20px; font-size: 15px; }
    .acct-menu__item svg { width: 19px; height: 19px; flex: 0 0 19px; }
    .acct-menu__head { padding: 0 20px 8px; }
    .acct-menu__themes { padding: 14px 20px 8px; }
    .acct-theme { padding: 12px 4px; font-size: 12px; }
}

/* SNSリンクの下線を消す（.prose a 由来の下線が付くため） */
.sns-link, .sns-link:hover { text-decoration: none; }


/* ============================================================
   32. 検索フォーム（search.html / stores.html）
   ★2026-08-16 11:0x JST ユーザー指摘
     「スマホで検索窓と検索ボタンの天地が合わない／窓の文字は15pxくらいに」
     app.css は入力に height:44px を持つがボタンは padding だけで高さが決まるため、
     文字サイズ差で高さがズレていた。両方に同じ高さを与えて揃える。
   ============================================================ */
.search-form { align-items: stretch; }
.search-form__input {
    height: 48px;
    font-size: 15px;
    letter-spacing: 0.04em;
}
.search-form__btn {
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}
@media (max-width: 679px) {
    .search-form { gap: 8px; }
    .search-form__input { height: 46px; font-size: 15px; padding: 0 14px; }
    .search-form__btn { height: 46px; padding: 0 18px; font-size: 14px; }
}


/* ============================================================
   33. ガラモンの数字を日本語と同じ大きさに見せる
   ★2026-08-16 11:1x JST ユーザー指摘
     「reserve の『人数を選ぶ』の 2名 が小さい。このフォントだと数字が小さくなるので
       日本語と同じ大きさになるよう他箇所も気をつけて」
     Cormorant Garamond は x-height / cap-height が低く、同じ級数だと日本語より一回り小さく見える。
     --font-latin を使っている箇所は、おおむね 1.25〜1.35 倍の級数を当てて釣り合いを取る。
     （font-size-adjust は実測で効きが読みにくかったため、明示指定で揃える）
   ============================================================ */

/* 予約フロー（reserve.html）
   ★数字と日本語が「同じ文字列」に混ざる箇所（2名／2026年8月）は、ガラモンを当てると
     数字だけが小さく見えて不揃いになる。そこは本文フォントに戻し、
     数字だけで完結する箇所（順位・日付の数字・予約番号）にガラモンを使う。
   ★ページ内 <style> の方が後に読まれるため、これらは reserve.html 側で直接指定している。 */
.rsv-day__n        { font-family: var(--font-latin); font-size: 21px; font-weight: 600; line-height: 1; }
.rsv-steps__num    { font-family: var(--font-latin); font-size: 19px; font-weight: 600; }

/* 共通の小さめラベル・数値 */
.acct-menu__head        { font-size: 12px; }
/* .brand__wordmark-sub は意匠のロックアップなので級数を上げない（10.5px のまま） */
.hero-card::before      { font-size: 12.5px; }
.honor-badge            { font-size: 12px; }
.eyebrow                { font-size: 12.5px; }
.rating-panel__den      { font-size: 24px; }
.photo-block__count     { font-size: 15px; }
.gallery__counter       { font-size: 14px; }
.facet-count            { font-size: 20px; }
.site-footer__copy      { font-size: 11.5px; }

/* 金額・件数など、日本語の中に混ざるガラモンの数字は少しだけ持ち上げる */
.price-band, .rating-score { font-size: 1.18em; }