/*
Theme Name: Gaymassage Tokyo
Theme URI: https://gaymassage-tokyo.com
Author: gaymassage-tokyo.com 編集部
Description: 東京のゲイマッサージ情報・ランキングサイト用の自作軽量テーマ。白地×深いティールの「審査室」トーン、モバイルファースト、50〜60代の可読性重視。
Version: 2.8.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: gaymassage-tokyo
*/

/* ============================================================
   デザイントークン（色はここが唯一の定義。勝手に増やさない）

   方針：白地 × 深いティール。比較・審査メディアとしての客観性を出す。
   グレーは青緑寄りの寒色に統一している（温かいグレーは別サイトの領域）。
   ============================================================ */
:root {
	--bg:          #ffffff; /* 基調：白 */
	--bg-alt:      #f2f6f7; /* 交互セクション（寒色グレー） */
	--panel:       #ffffff; /* カード面 */
	--panel-2:     #f7fbfb; /* カード面（強調） */
	--ink:         #14171c; /* 本文 */
	--ink-2:       #3d4650; /* やや落とした本文 */
	--muted:       #5b6672; /* 補足テキスト（白地で4.5:1以上） */
	--accent:      #0d6459; /* アクセント：深いティール */
	--accent-2:    #0a4a42; /* 濃いティール（ホバー・押下） */
	--accent-soft: #eaf2f2; /* アクセントの淡い面（チップ地など） */
	--line:        #dfe4e8; /* 罫線 */
	--line-soft:   #eaeef1; /* 弱い罫線 */
	--shadow:      0 1px 2px rgba(20, 23, 28, .05);
	--shadow-top:  0 10px 30px -14px rgba(13, 100, 89, .38);
	--radius:      6px;
	/* 幅の三階層。読む幅は日本語1行40〜46文字を保つための上限で、広げてはいけない。
	   見る幅はカード3列（340px×3＋余白）から逆算した値。
	   いずれも「中身の幅」として定義し、左右の余白は --gutter で別に足す。
	   こうしないと .wrap と .wrap-wide で中身の開始位置がずれ、縦のラインが揃わない。 */
	--w-prose:     720px;  /* 記事本文・FAQ・運営者情報 */
	--w-content:   1120px; /* 店舗カード・一覧・ヘッダー・フッター */
	/* 画面端の余白。本文17pxに対して18pxでは文字が端に迫って窮屈に見えたため24pxを基準にする。
	   文字を大きくするときは、この余白も合わせて見直すこと。 */
	--gutter:      24px;
	--font-sans:   "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", system-ui, sans-serif;
}

/* 画面が広くなるほど余白も広げる */
@media (min-width: 640px)  { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ============================================================
   リセット・ベース（モバイルファースト：基準 375〜480px）
   本文17px。50〜60代が長文を読む前提での下限に合わせている。
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: 17px;
	line-height: 1.85;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt";
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
ul, ol { list-style: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 見出し用の書体クラス。明朝は使わず、太いゴシックで字面を作る */
.display { font-weight: 700; letter-spacing: .01em; }
.accent { color: var(--accent); }
.wrap      { max-width: calc(var(--w-prose)   + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-wide { max-width: calc(var(--w-content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }

/* 「見る幅」の中に置かれた読みもの（本文・FAQなど）は読む幅に収める。
   .wrap と同じ中身の幅になるため、ページ内で文章の開始位置が揃う。 */
.wrap-wide .entry-content,
.wrap-wide .archive-desc,
.wrap-wide .term-body,
.wrap-wide .faq,
.wrap-wide .author-box,
.wrap-wide .post-nav,
.wrap-wide .pr-note { max-width: var(--w-prose); margin-inline: auto; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 8px; top: 8px; background: var(--accent); color: #fff; padding: 10px 14px; z-index: 100; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================================================
   ヘッダー・ナビ
   ============================================================ */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 15px; }
.brand-logo { font-size: 21px; color: var(--ink); display: inline-block; font-weight: 700; letter-spacing: .01em; }
.brand-sub { display: block; font-size: 12px; color: var(--muted); letter-spacing: .06em; margin-top: 3px; }

/* タップ領域48px（Google推奨値） */
.nav-toggle {
	background: none; border: 1px solid var(--line); border-radius: var(--radius);
	width: 48px; height: 48px; display: inline-flex; flex-direction: column;
	align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.nav-toggle span:not(.visually-hidden) { display: block; width: 20px; height: 2px; background: var(--accent); }
.global-nav { display: none; border-top: 1px solid var(--line-soft); }
.global-nav.is-open { display: block; }
.global-nav ul { padding: 6px 0 12px; }
.global-nav li a {
	display: flex; align-items: center; min-height: 48px;
	padding: 6px 4px; color: var(--ink); font-size: 16px;
	border-bottom: 1px solid var(--line-soft);
}
.global-nav li a.nav-cta { color: var(--accent); font-weight: 700; }

@media (min-width: 768px) {
	.nav-toggle { display: none; }
	.global-nav { display: block; border-top: none; }
	.global-nav ul { display: flex; gap: 2px; padding: 0 0 10px; }
	.global-nav li a { min-height: 40px; border-bottom: none; padding: 4px 12px; }
}

/* ============================================================
   パンくず
   ============================================================ */
.breadcrumbs { font-size: 13px; color: var(--muted); background: var(--bg-alt); border-bottom: 1px solid var(--line-soft); }
/* 幅と余白は他の容器と揃える（固定値を書くとページ内で行頭がずれる） */
.breadcrumbs ol {
	display: flex; flex-wrap: wrap; gap: 5px;
	max-width: calc(var(--w-content) + var(--gutter) * 2);
	margin: 0 auto; padding: 11px var(--gutter);
}
.breadcrumbs li + li::before { content: "›"; margin-right: 5px; color: var(--muted); }
.breadcrumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumbs a:hover { color: var(--accent); }

/* ============================================================
   ヒーロー・セクション
   ============================================================ */
/* ヒーロー。背景写真は「外観 → カスタマイズ → トップページの背景写真」で設定する。
   未設定なら単色のまま（--hero-bg が無いので ::before は描画されない）。 */
.hero {
	position: relative; overflow: hidden;
	padding: 46px 0 40px; text-align: center;
	background: var(--bg-alt); border-bottom: 1px solid var(--line);
}
/* 写真本体。薄く敷くだけなので、文字の読みやすさを損なわない */
.hero::before {
	content: ""; position: absolute; inset: 0;
	background-image: var(--hero-bg, none);
	background-size: cover; background-position: center;
	opacity: var(--hero-bg-opacity, 0);
	pointer-events: none;
}
/* 白いベール。写真が濃い部分に文字が重なっても contrast を確保するための保険 */
.hero::after {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.72), rgba(255,255,255,.34) 70%, transparent);
	pointer-events: none;
	display: var(--hero-veil, none);
}
.hero > .wrap { position: relative; z-index: 1; }
.hero-eyebrow { font-size: 13px; color: var(--accent); letter-spacing: .1em; margin-bottom: 13px; font-weight: 700; }
.hero h1 { font-size: 26px; line-height: 1.48; text-wrap: balance; }
.hero-lead { color: var(--ink-2); font-size: 17px; margin: 16px auto 24px; max-width: 30em; }
.hero-actions { display: flex; gap: 11px; justify-content: center; flex-wrap: wrap; }

.section { padding: 44px 0; }
.section.alt { background: var(--bg-alt); }
.section-title { font-size: 22px; margin-bottom: 9px; text-wrap: balance; }
.section-note { font-size: 15px; color: var(--muted); margin-bottom: 22px; }
.more-link { text-align: right; font-size: 16px; margin-top: 18px; }
.more-link a { font-weight: 700; }
.empty-note { color: var(--muted); padding: 26px 0; }

/* ボタン（最小高さ50px） */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 50px; padding: 12px 26px; border-radius: var(--radius);
	font-size: 16.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.4;
}
.btn.gold { background: var(--accent); color: #fff; }
.btn.gold:hover { background: var(--accent-2); color: #fff; }
.btn.ghost { border: 1px solid var(--line); color: var(--ink); background: var(--bg); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================
   店舗カード・グリッド
   ============================================================ */
.shop-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .shop-grid { grid-template-columns: 1fr 1fr; } }

.shop-card {
	position: relative;
	background: var(--panel); border: 1px solid var(--line);
	border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
/* 上位3件だけを別格に。白地では発光ではなく、輪郭と落ち影で格を出す */
.shop-card.is-top { border-color: var(--accent); box-shadow: var(--shadow-top); }
.shop-card .card-link { display: block; color: inherit; }
/* 順位バッジ：スマホでは画像の左上に重ねる（デスクトップでは独立した列になる） */
.card-rank { position: absolute; top: 0; left: 0; z-index: 2; }
.card-media { position: relative; aspect-ratio: 16 / 9; background: var(--bg-alt); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media-plate {
	width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
	color: var(--muted); font-size: 15px; padding: 14px; text-align: center;
	background: linear-gradient(140deg, var(--panel-2), var(--bg-alt));
}

/* 順位バッジ本体（位置は .card-rank 側で制御する） */
.rank-badge {
	background: var(--ink); color: #fff;
	padding: 8px 14px 7px; line-height: 1;
	display: flex; align-items: baseline; gap: 1px;
	font-variant-numeric: tabular-nums;
}
.rank-badge .no { font-size: 21px; font-weight: 700; }
.rank-badge .i { font-size: 12px; }
.rank-badge.top1 { background: var(--accent); }
.rank-badge.top2 { background: #4a5a63; }
.rank-badge.top3 { background: #6b7076; }

/* ---- 営業状態 ----
   閉店・営業未確認の店舗は、現役店と見分けがつくよう彩度を落とす。
   ただし文字は読める濃さを保つ（情報としては価値があるため隠さない）。 */
.status-badge {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
	padding: 4px 10px; border-radius: 3px; line-height: 1.5;
}
.status-badge.closed      { background: #4a5259; color: #fff; }
.status-badge.unconfirmed { background: #f0ece1; color: #6b5f45; }
.card-media .status-badge { position: absolute; left: 0; bottom: 0; border-radius: 0 3px 0 0; }
.shop-card.is-inactive .card-media img,
.shop-card.is-inactive .card-media-plate { filter: grayscale(.85); opacity: .75; }
.shop-card.is-inactive .card-title { color: var(--muted); }
.shop-card.is-inactive .card-cta { background: #6b757d; }

/* 詳細ページ冒頭の注意書き */
.status-note {
	font-size: 16px; line-height: 1.8; border-radius: var(--radius);
	padding: 15px 18px; margin: 0 0 24px;
}
.status-note.closed      { background: #eef0f1; border-left: 4px solid #4a5259; color: var(--ink); }
.status-note.unconfirmed { background: #fbf7ec; border-left: 4px solid #b08d3f; color: var(--ink); }
.status-note a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

.pr-chip {
	display: inline-block; background: var(--bg-alt); color: var(--muted);
	font-size: 12px; letter-spacing: .08em; padding: 3px 9px;
	border-radius: 3px; margin-left: 7px; font-weight: 700;
}
.card-media .pr-chip { position: absolute; top: 9px; right: 9px; margin: 0; background: rgba(255,255,255,.94); }

/* カードの内側余白。スマホでは画像以外の中身にまとめて余白を与える。
   （デスクトップでは .card-link を5列グリッドに組み替え、余白はそちらで管理する）
   HTMLの要素名は card-main / card-price / card-action。ここを取り違えると
   余白が0になり文字が枠に張り付くので、テンプレートを変えたら必ず対応させること。 */
.card-main   { padding: 16px 18px 0; }
.card-price  { padding: 0 18px; }
.card-action { padding: 0 18px 18px; }
.card-title { font-size: 19px; line-height: 1.5; margin-bottom: 9px; }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 11px; font-size: 15px; }
.stars .s { color: var(--accent); letter-spacing: .12em; font-size: 16px; }
.stars .n { font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }
.stars .c { color: var(--muted); font-size: 14px; }

/* 料金：比較サイトの中核。数字を主役にして拾い読みできるようにする */
.price-bar {
	display: flex; align-items: baseline; gap: 10px;
	margin: 13px 0; padding: 11px 0;
	border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pb-label { font-size: 13px; color: var(--muted); letter-spacing: .08em; flex: 0 0 auto; }
.pb-value {
	margin-left: auto; font-size: 25px; font-weight: 700; color: var(--ink);
	font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.01em;
}
.pb-value em { font-size: 14px; font-style: normal; font-weight: 700; margin-left: 1px; }
.pb-unit { font-size: 13.5px; color: var(--muted); font-weight: 500; margin-left: 5px; letter-spacing: 0; }
/* 一覧・ランキング行など、1行に収める場面の料金表記 */
.price { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.card-chips, .chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 12px; }
.chip {
	font-size: 12.5px; color: var(--muted); background: var(--bg-alt);
	padding: 5px 11px; border-radius: 3px; line-height: 1.5;
}
.chip.area { color: var(--accent); background: var(--accent-soft); font-weight: 700; }
.chip.line { color: #1f6b4a; background: #ecf5f0; }

.card-comment {
	font-size: 15px; line-height: 1.8; color: var(--ink-2);
	margin: 0 0 15px; border-left: 3px solid var(--accent); padding-left: 12px;
}
/* 一覧（.is-list）では編集部コメントを2行で止め、カードの高さを抑える。
   一覧は「探す」ページなので比較しやすさを優先し、続きは店舗詳細で読ませる。
   トップ・/ranking/ は10店に絞った「読ませる」ページなので全文のまま。
   店名・料金・チップは隠さないため、判断に必要な情報は欠けない。 */
.shop-grid.is-list .card-comment {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}

/* 「詳しく見る」を高さ50pxのボタンへ。唯一の行動導線 */
.card-cta {
	display: flex; align-items: center; justify-content: center; gap: 6px;
	height: 50px; background: var(--accent); color: #fff;
	font-weight: 700; font-size: 16.5px; border-radius: var(--radius); letter-spacing: .02em;
}
.card-cta::after { content: "→"; }
.card-link:hover .card-cta { background: var(--accent-2); }

/* ============================================================
   エリア・ジャンルカード
   ============================================================ */
.term-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-bottom: 30px; }
@media (min-width: 640px) { .term-grid { grid-template-columns: repeat(4, 1fr); } }
.term-card {
	background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
	padding: 15px 16px; min-height: 56px;
	display: flex; align-items: baseline; justify-content: space-between; color: var(--ink);
}
.term-card:hover { border-color: var(--accent); color: var(--accent); }
.t-name { font-size: 16.5px; font-weight: 700; }
.t-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ============================================================
   記事カード・記事本文
   ============================================================ */
.article-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 640px) { .article-grid { grid-template-columns: 1fr 1fr; } }
.article-card a {
	display: block; color: inherit; background: var(--panel);
	border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.article-card a:hover { border-color: var(--accent); }
.a-thumb { aspect-ratio: 16 / 9; background: var(--bg-alt); }
.a-thumb img { width: 100%; height: 100%; object-fit: cover; }
.a-thumb.is-plate { display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(140deg, var(--panel-2), var(--bg-alt)); }
.plate-title { color: var(--muted); font-size: 15px; text-align: center; line-height: 1.7; }
.a-title { font-size: 17px; line-height: 1.6; padding: 14px 16px 5px; font-weight: 700; }
.article-card time { display: block; font-size: 13px; color: var(--muted); padding: 0 16px 14px; }

.article-head { padding: 34px 0 8px; }
.article-head h1 { font-size: 24px; line-height: 1.55; text-wrap: balance; }
.article-dates { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); margin-top: 12px; }
.article-body { padding-bottom: 50px; }
.article-eyecatch { margin: 22px 0; border-radius: var(--radius); overflow: hidden; }
.pr-note {
	font-size: 14px; color: var(--ink-2); background: var(--bg-alt);
	border-left: 3px solid var(--muted); padding: 11px 14px; margin: 18px 0;
}

.entry-content { font-size: 17px; }
.entry-content h2 {
	font-size: 21px; font-weight: 700; line-height: 1.5; margin: 2em 0 .8em;
	padding-bottom: .4em; border-bottom: 2px solid var(--accent); text-wrap: balance;
}
.entry-content h3 { font-size: 18.5px; font-weight: 700; margin: 1.7em 0 .6em; color: var(--accent-2); }
.entry-content p { margin: 1em 0; }
.entry-content ul, .entry-content ol { margin: 1em 0 1em 1.5em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin: .4em 0; }
.entry-content a { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.entry-content strong { font-weight: 700; }
.entry-content blockquote {
	border-left: 3px solid var(--accent); padding: .3em 0 .3em 1.1em;
	color: var(--ink-2); margin: 1.3em 0;
}
.table-scroll { overflow-x: auto; margin: 1.3em 0; -webkit-overflow-scrolling: touch; }
.table-scroll table { margin: 0; min-width: 100%; }
.entry-content table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: 15px; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.entry-content th { background: var(--bg-alt); font-weight: 700; }

/* 目次 */
.toc { background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin: 24px 0; }
.toc-t { color: var(--accent); font-size: 15px; font-weight: 700; margin-bottom: 10px; letter-spacing: .08em; }
.toc ol { list-style: decimal; margin-left: 1.5em; font-size: 16px; }
.toc li { margin: 6px 0; }
.toc a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.toc a:hover { color: var(--accent); }

/* FAQ */
.faq { margin: 38px 0; }
.faq h2 { font-size: 21px; margin-bottom: 16px; font-weight: 700; }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 11px; padding: 0 16px; }
.faq-item summary {
	cursor: pointer; padding: 15px 0; font-weight: 700; font-size: 16.5px; line-height: 1.65;
	list-style: none; position: relative; padding-right: 30px; min-height: 50px;
	display: flex; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before { content: "Q."; color: var(--accent); margin-right: 7px; flex: 0 0 auto; }
.faq-item summary::after { content: "＋"; position: absolute; right: 0; color: var(--accent); font-size: 18px; }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 0 16px; font-size: 16px; color: var(--ink-2); line-height: 1.85; }
.faq-item p::before { content: "A."; color: var(--accent); font-weight: 700; margin-right: 7px; }

/* 著者ボックス */
.author-box {
	display: flex; gap: 16px; background: var(--bg-alt);
	border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin: 38px 0;
}
.author-avatar {
	flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
	background: var(--accent); color: #fff;
	display: flex; align-items: center; justify-content: center; font-size: 21px; font-weight: 700;
}
.author-name { font-weight: 700; font-size: 16px; }
.author-bio { font-size: 15px; color: var(--ink-2); margin-top: 5px; line-height: 1.8; }

.post-nav { display: flex; flex-direction: column; gap: 10px; margin-top: 32px; font-size: 16px; }
.post-nav .next { text-align: right; }

/* ============================================================
   店舗詳細
   ============================================================ */
.shop-head { padding: 32px 0 22px; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.shop-head h1 { font-size: 24px; margin: 10px 0 12px; line-height: 1.5; text-wrap: balance; }
.shop-head-badges { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.rank-label {
	font-size: 13.5px; color: #fff; background: var(--accent);
	border-radius: 3px; padding: 5px 13px; font-weight: 700;
}
.rank-label strong { font-size: 16px; }
.shop-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 16px; }
/* 上下だけを指定する。padding の一括指定（26px 0 50px）にすると
   .wrap / .wrap-wide が持つ左右の余白を 0 で打ち消してしまい、文字が端に張り付く。 */
.shop-cols { padding-top: 26px; padding-bottom: 50px; }
.shop-photo { border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.spec h2, .editor-comment h2, .related-shops h2 { font-size: 21px; margin-bottom: 14px; font-weight: 700; }
.spec-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec-table th { width: 7em; color: var(--muted); font-weight: 500; text-align: left; }
.spec-table th, .spec-table td { border-bottom: 1px solid var(--line); padding: 12px 6px; }
.official-btn { margin: 22px 0 6px; }
.editor-comment { margin: 32px 0; }
.editor-comment blockquote {
	background: var(--accent-soft); border-left: 4px solid var(--accent);
	border-radius: 0 var(--radius) var(--radius) 0;
	padding: 18px 20px; font-size: 16.5px; line-height: 1.85; color: var(--ink);
}
.shop-review { margin: 32px 0; }
.related-shops { margin: 40px 0 8px; }
.back-link { margin-top: 30px; font-size: 16px; }

/* ============================================================
   ランキングページ（/ranking/）
   ============================================================ */
.ranking-list { margin-top: 30px; }
.ranking-row {
	background: var(--panel); border: 1px solid var(--line);
	border-radius: var(--radius); padding: 20px; margin-bottom: 18px; box-shadow: var(--shadow);
}
.ranking-row.is-top { border-color: var(--accent); box-shadow: var(--shadow-top); }
.ranking-row-head { display: flex; align-items: center; gap: 13px; margin-bottom: 12px; }
.ranking-row-head .rank-badge { position: static; border-radius: 3px; flex: 0 0 auto; }
.ranking-row-head h2 { font-size: 20px; line-height: 1.5; font-weight: 700; }
.ranking-row-head h2 a { color: var(--ink); }
.ranking-row-head h2 a:hover { color: var(--accent); }
.row-comment {
	border-left: 3px solid var(--accent); padding-left: 13px;
	color: var(--ink-2); font-size: 16px; margin: 14px 0; line-height: 1.8;
}
.row-excerpt { font-size: 16px; margin: 12px 0; }

/* ============================================================
   アーカイブ・その他
   ============================================================ */
.archive-head { padding: 34px 0 22px; }
.archive-head h1 { font-size: 24px; line-height: 1.5; text-wrap: balance; }
.archive-desc { color: var(--ink-2); font-size: 17px; margin-top: 12px; }

/* ---- 一覧の絞り込みチップ ----
   横スクロールにはしない。50〜60代の主読者には隠れた選択肢が見つけづらいため、
   行数が増えても折り返して全部見せる方を取っている。
   タップ領域は主要導線の基準に合わせて最小44px。 */
.shop-filter { margin: 0 0 26px; }
.filter-row { display: flex; align-items: baseline; gap: 10px; margin-top: 12px; }
.filter-label {
	flex: 0 0 auto; font-size: 13px; font-weight: 700; color: var(--muted);
	letter-spacing: .08em; padding-top: 12px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fchip {
	display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
	padding: 6px 15px; border: 1px solid var(--line); border-radius: var(--radius);
	background: var(--panel); color: var(--ink); font-size: 16px; line-height: 1.4;
}
.fchip .fc-count {
	font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.fchip:hover { border-color: var(--accent); color: var(--accent); }
.fchip.all { font-weight: 700; }
/* 現在地。背景を塗って「いまここ」を一目で分かるようにする */
.fchip.is-current {
	background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700;
}
.fchip.is-current .fc-count { color: rgba(255,255,255,.85); }
/* エリア・ジャンルページの解説本文（店舗一覧の下） */
.term-body { margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.pagination { margin: 32px 0; text-align: center; }
.pagination .nav-links { display: inline-flex; gap: 7px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 48px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--line);
	border-radius: var(--radius); color: var(--ink); font-size: 16px; font-variant-numeric: tabular-nums;
}
.pagination .page-numbers.current { background: var(--accent); color: #fff; border-color: var(--accent); }
.notfound { padding-top: 80px; padding-bottom: 80px; text-align: center; }
.notfound h1 { font-size: 60px; color: var(--accent); }
.notfound p { margin: 16px 0; color: var(--ink-2); }

/* CTAバンド */
.cta-band { text-align: center; background: var(--accent); border-top: none; color: #fff; }
.cta-band h2 { font-size: 23px; margin-bottom: 12px; color: #fff; font-weight: 700; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 16px; max-width: 32em; margin: 0 auto 22px; }
.cta-band .btn.gold { background: #fff; color: var(--accent); }
.cta-band .btn.gold:hover { background: var(--accent-soft); color: var(--accent-2); }

/* ============================================================
   フッター
   ============================================================ */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0 46px; background: var(--bg-alt); }
.footer-brand { font-size: 19px; margin-bottom: 16px; font-weight: 700; }
.footer-nav { display: flex; flex-direction: column; gap: 2px; font-size: 16px; margin-bottom: 22px; }
.footer-nav a { color: var(--ink-2); display: flex; align-items: center; min-height: 44px; }
.footer-nav a:hover { color: var(--accent); }
@media (min-width: 640px) { .footer-nav { flex-direction: row; flex-wrap: wrap; gap: 2px 22px; } }
.footer-note { font-size: 14px; color: var(--muted); line-height: 1.95; margin-bottom: 16px; }
.copyright { font-size: 14px; color: var(--muted); }

/* ============================================================
   デスクトップ（1024px〜）

   ここから下は大きい画面にだけ効く。スマホの見た目は一切変わらない。

   最大の変更は店舗カード：縦積みのカードから「横長の行」に組み替える。
   料金が縦一列に揃うため、上から下へ視線を落とすだけで全店の価格を比較できる。
   カードを横に3列並べると料金がバラバラの位置に散り、比較しづらくなるため。
   ============================================================ */
@media (min-width: 1024px) {

	/* ---- 店舗カード → 横長の行 ---- */
	.shop-grid { grid-template-columns: 1fr; gap: 12px; }

	/* 詳細度をベース側の「.shop-card .card-link」に合わせる。
	   .card-link だけだと上書きできず縦積みのまま残る。 */
	.shop-card .card-link {
		display: grid;
		grid-template-columns: 62px 252px minmax(0, 1fr) 150px 152px;
		gap: 20px; align-items: center; padding: 18px 20px;
	}
	/* 余白は .card-link 側（padding: 18px 20px）でまとめて持つので、
	   スマホ用に各セルへ付けた余白は打ち消す（二重になるのを防ぐ） */
	.card-main, .card-price, .card-action { padding: 0; }

	.card-rank { position: static; }
	.rank-badge { border-radius: 4px; justify-content: center; padding: 10px 8px; }

	/* 写真は店選びの判断材料。列幅を確保して 252×158px で見せる */
	.card-media { aspect-ratio: 16 / 10; border-radius: 5px; overflow: hidden; }
	.card-media-plate { font-size: 14px; padding: 10px; }
	.card-media .pr-chip { top: 7px; right: 7px; font-size: 11px; }

	.card-title { font-size: 18px; margin-bottom: 7px; }
	.card-meta { gap: 9px; font-size: 14px; }
	.card-chips { margin: 8px 0 0; gap: 6px; }
	.chip { font-size: 12px; padding: 4px 10px; }
	.card-comment { font-size: 14px; line-height: 1.75; margin: 9px 0 0; padding-left: 11px; }

	/* 料金：罫線を外し、右揃えの縦組みにして桁位置を揃える */
	.card-price .price-bar {
		display: block; text-align: right;
		margin: 0; padding: 0; border: none;
	}
	.pb-label { display: block; font-size: 11.5px; margin-bottom: 1px; }
	.pb-value { margin-left: 0; font-size: 24px; display: block; }
	.pb-unit { display: block; margin-left: 0; font-size: 12.5px; }

	.card-cta { height: 48px; font-size: 15.5px; }

	/* ---- エリア・ジャンルの絞り込みカード ---- */
	.term-grid { grid-template-columns: repeat(5, 1fr); gap: 12px; }

	/* ---- 記事カードは3列 ---- */
	.article-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }

	/* ---- 見出し・余白をひとまわり大きく ---- */
	.hero { padding: 64px 0 58px; }
	.hero h1 { font-size: 38px; }
	.hero-lead { font-size: 18px; }
	.section { padding: 58px 0; }
	.section-title { font-size: 27px; }
	.article-head h1 { font-size: 31px; }
	.shop-head h1 { font-size: 31px; }
	.archive-head h1 { font-size: 30px; }
	.entry-content h2 { font-size: 24px; }

	/* ---- フッターのリンクを横に流す ---- */
	.footer-nav { gap: 2px 26px; }
}

/* 1400px以上でも 1120px で頭打ちにする。
   これ以上広げると視線の移動距離が伸びて逆に読みにくくなるため、上限は設計判断。 */