/* GOETHE の紙面文法（DESIGN_goethe.md）: 白い紙面＋チャコールの帯、太いゴシック、Lato の大文字、赤い短線、角丸なし */
:root {
	--black: #000;
	--ink: #191919;
	--text: #191919;
	--text-2: #3b3a36;
	--sub: #666;
	--rule: #d8d8d8;
	--rule-list: #e8e3da;
	--paper: #f2f2f2;
	--band: #444;
	--char: #232323;
	--red: #ff0000;
	--gold: #a38f6c;
	--c-club: #a38f6c;
	--c-kikon: #36b73f;
	--c-match: #2f6fd6;
	--en: "Lato", sans-serif;
	--sans: YakuHanJPs, "Lato", "Noto Sans JP", sans-serif;
	--serif: "Noto Serif JP", serif;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
body { margin: 0; background: #fff; color: var(--text); font: 400 17px/1.75 var(--sans); letter-spacing: .1px; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.wrap.narrow { max-width: 835px; }
.note { font-size: 12px; color: var(--sub); line-height: 1.7; margin: 12px 0 0; }

/* ---- ボタン（黒・角丸0・›） ---- */
.apply { display: inline-block; background: var(--ink); color: #fff; font: 700 15px/1.4 var(--sans); text-decoration: none; text-align: center; padding: 13px 40px 13px 26px; position: relative; transition: opacity .15s; }
.apply::after { content: ""; position: absolute; right: 16px; top: 50%; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: translateY(-50%) rotate(45deg); }
.apply:hover { opacity: .8; color: #fff; }
.apply-lg { font-size: 17px; padding: 18px 54px 18px 40px; }
.apply-xs { font-size: 12px; padding: 7px 26px 7px 12px; }
.apply-xs::after { right: 10px; width: 5px; height: 5px; }
.apply-hd { font-size: 13px; padding: 9px 30px 9px 16px; }
.apply-hd::after { right: 12px; }
.apply-gold { box-shadow: inset 0 -3px 0 var(--gold); }
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 220px; padding: 12px 26px; background: #fff; color: var(--ink); border: 1px solid var(--ink); font: 700 15px var(--sans); text-decoration: none; }
.pill i { display: inline-block; width: 6px; height: 6px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.pill:hover { background: var(--ink); color: #fff; }

/* ---- ヘッダー ---- */
.hd { position: sticky; top: 0; z-index: 30; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.hd-in { display: flex; align-items: center; gap: 32px; height: 64px; padding: 0 28px; max-width: 1280px; margin: 0 auto; }
.logo { display: flex; flex-direction: column; text-decoration: none; color: var(--black); line-height: 1; }
.logo b { font: 900 26px/1 var(--en); letter-spacing: -.02em; }
.logo small { font-size: 10px; font-weight: 700; color: var(--sub); margin-top: 4px; letter-spacing: .08em; }
.gnav { display: flex; gap: 22px; margin: 0 auto; font: 700 16px var(--en); }
.gnav a { color: var(--black); text-decoration: none; }
.gnav a:hover { opacity: .6; }
@media (max-width: 860px) {
	.hd-in { padding: 0 16px; gap: 12px; }
	.gnav { display: none; }
	.apply-hd { margin-left: auto; }
	.logo b { font-size: 22px; }
}

/* ---- セクション見出し（赤い短線＋英字＋和文） ---- */
.label { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 34px; font-weight: 400; }
.label::before { content: ""; align-self: center; width: 32px; height: 2px; background: var(--red); }
.label-en { font: 400 32px/1.2 var(--en); color: var(--text-2); letter-spacing: .01em; }
.label-ja { font-size: 16px; font-weight: 700; color: var(--text-2); }
.label:not(:has(.label-en)) .label-ja { font-size: 22px; color: var(--ink); }
.sec { padding: 88px 0; }
.sec-gray { background: var(--paper); }
.sec-dark { background: var(--char); color: #fff; }
.sec-char { background: var(--band); color: #fff; }
.sec-dark .label-en, .sec-dark .label-ja, .sec-char .label-en, .sec-char .label-ja { color: #fff; }
.sec-lead { margin: -14px 0 32px; color: var(--text-2); font-size: 15px; }
.sec-dark .sec-lead, .sec-char .sec-lead { color: #c9c9c9; }
@media (max-width: 720px) { .sec { padding: 60px 0; } .label-en { font-size: 26px; } .label { margin-bottom: 26px; } }

/* ---- ヒーロー（濃色帯＋白い細枠の特集タイトル） ---- */
.hero { background: var(--char); color: #fff; padding: 72px 0 64px; }
.hero-frame { display: inline-flex; align-items: center; gap: 18px; margin: 0 0 40px; padding: 18px 30px; border: 1px solid rgba(255, 255, 255, .7); }
.hero-tag { font: 500 15px/1.15 var(--serif); writing-mode: vertical-rl; letter-spacing: .2em; }
.hero-frame-t { font: 500 clamp(24px, 4vw, 40px)/1.3 var(--serif); letter-spacing: .14em; }
.hero-cat { margin: 0 0 10px; font: 700 13px var(--en); color: #bdbdbd; letter-spacing: .04em; }
.hero-h { margin: 0; font: 700 clamp(30px, 4.6vw, 48px)/1.32 var(--sans); color: #fff; word-break: keep-all; overflow-wrap: anywhere; max-width: 20em; }
.hero-h span { display: block; margin-top: 10px; font-size: .55em; color: #e0e0e0; }
.hero-h .bar { display: none; }
.hero-lead { margin: 22px 0 34px; max-width: 40em; font-size: 16px; color: #d6d6d6; }
.hero-act { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hero .apply { background: #fff; color: var(--ink); }
.hero .apply:hover { color: var(--ink); }
.hero .pill { background: transparent; color: #fff; border-color: #fff; }
.hero .pill:hover { background: #fff; color: var(--ink); }
.hero .note { color: #9a9a9a; }
@media (max-width: 720px) {
	.hero { padding: 44px 0 44px; }
	.hero-frame { padding: 14px 18px; margin-bottom: 28px; gap: 12px; }
	.hero-act .apply-lg, .hero-act .pill { width: 100%; }
}

/* ---- 種別の色（GOETHE のカテゴリ色の文法） ---- */
.rk-type, .t3-type, .cmp-type, .svc-catch small { display: inline-block; font: 700 12px var(--sans); letter-spacing: .04em; padding-top: 6px; border-top: 3px solid currentColor; }
.t-club { color: var(--c-club); }
.t-kikon { color: var(--c-kikon); }
.t-match { color: var(--c-match); }

/* ---- ランキング（濃色帯の上の一覧） ---- */
.rk { list-style: none; margin: 0; padding: 0; border-top: 1px solid #4a4a4a; }
.rk li { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid #4a4a4a; }
.rk-no, .t3-no, .step-no, .cmp-no { font: 300 44px/1 var(--en); margin: 0; color: #8a8a8a; }
.rk li:first-child .rk-no { color: #fff; font-weight: 700; }
.rk-type { margin: 0 0 8px; }
.sec-dark .t-club { color: #c9b48d; }
.rk-name { margin: 0; font-size: 21px; font-weight: 700; color: #fff; }
.rk-catch { margin: 4px 0 2px; font-size: 14px; color: #c9c9c9; }
.rk-point { margin: 0; font-size: 13px; color: #9a9a9a; }
.sec-dark .apply { background: #fff; color: var(--ink); }
.sec-dark .apply:hover { color: var(--ink); }
.sec-dark .rk li:first-child .apply { box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 720px) {
	.rk li { grid-template-columns: 48px minmax(0, 1fr); gap: 6px 14px; padding: 22px 0; }
	.rk-no { font-size: 30px; }
	.rk-act { grid-column: 2; margin-top: 8px; }
	.rk-name { font-size: 18px; }
}

/* ---- 編集部の結論 ---- */
.feature { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 56px; align-items: start; }
.feature-label { margin: 0 0 10px; font: 700 13px var(--en); color: var(--sub); letter-spacing: .06em; }
.feature-big { margin: 0; font: 700 52px/1.25 var(--sans); color: var(--ink); }
.feature-h { margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--rule); font-size: 24px; font-weight: 700; line-height: 1.5; }
.feature-body p { margin: 0 0 1em; }
.feature-body .pill { margin-top: 12px; }
@media (max-width: 820px) { .feature { grid-template-columns: minmax(0, 1fr); gap: 16px; } .feature-big { font-size: 38px; } .feature-big br { display: none; } }

/* ---- 目的から選ぶ ---- */
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
.two-col-item { border: 2px solid var(--rule); padding: 28px 28px 30px; }
.two-col-item h3 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 2px solid var(--rule); font-size: 20px; font-weight: 700; }
.two-col-item p { margin: 0 0 22px; font-size: 16px; color: var(--text-2); }
@media (max-width: 720px) { .two-col { grid-template-columns: minmax(0, 1fr); gap: 24px; } }

/* ---- 地域一覧 ---- */
.areas { columns: 3 300px; column-gap: 40px; }
.area { break-inside: avoid; margin-bottom: 30px; }
.area-h { margin: 0 0 6px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); font: 700 17px var(--sans); }
.area ul { list-style: none; margin: 0; padding: 0; }
.area li { padding: 9px 0; border-bottom: 1px solid var(--rule-list); line-height: 1.6; }
.area .pref { font-weight: 700; text-decoration: none; }
.area .pref:hover, .cities a:hover { text-decoration: underline; text-decoration-color: var(--red); }
.shop { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--c-club); }
.cities { display: flex; flex-wrap: wrap; gap: 0 12px; margin-top: 2px; }
.cities a { font-size: 13px; color: var(--text-2); text-decoration: none; }

/* ---- ステップ（濃色帯） ---- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px; }
.steps h3 { margin: 12px 0 10px; padding-bottom: 10px; border-bottom: 1px solid #666; font-size: 18px; font-weight: 700; color: #fff; }
.steps p { margin: 0; font-size: 15px; color: #d6d6d6; }
.step-no { color: #fff !important; }
@media (max-width: 720px) { .steps { grid-template-columns: minmax(0, 1fr); gap: 30px; } }

/* ---- 記事 ---- */
.crumbs { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; font: 400 12px var(--en); color: var(--sub); text-transform: uppercase; }
.crumbs li + li::before { content: ">"; margin: 0 8px; color: #ccc; }
.crumbs a { color: var(--ink); text-decoration: none; }
.art-head { padding: 26px 0 8px; }
.art-area { margin: 0 0 12px; font: 700 14px var(--sans); color: var(--sub); }
.art-head h1 { margin: 0; font: 700 clamp(26px, 4vw, 40px)/1.31 var(--sans); color: var(--black); }
.meta { margin: 16px 0 0; font: 400 14px var(--en); color: var(--sub); }
.meta span { border: 1px solid var(--sub); padding: 0 4px; margin-left: 6px; font-size: 11px; }

.prose { margin-top: 28px; font-size: 18px; line-height: 1.6; }
.prose > p, .prose li > p { margin: 0 0 1.6em; }
.prose h2 { margin: 80px 0 28px; padding: 0 0 0 21px; border-left: 4px solid var(--rule); font-size: 28px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.prose h3 { margin: 52px 0 18px; padding-bottom: 8px; border-bottom: 2px solid var(--rule); font-size: 24px; font-weight: 700; line-height: 1.5; color: var(--ink); }
.prose h4 { font-size: 19px; margin: 32px 0 10px; }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.4em; margin: 0 0 1.6em; }
.prose li { margin: .3em 0; }
.prose strong { font-weight: 700; }
.prose a:not([class]) { text-decoration: none; border-bottom: 1px solid var(--red); }
.prose blockquote { margin: 0 0 1.6em; padding: 18px 22px; border: 2px solid var(--rule); }
.prose blockquote p { margin: 0; }
.table-wrap, .cmp-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.6em; }
.prose .table-wrap table { border-collapse: collapse; width: 100%; min-width: 540px; font-size: 15px; }
.prose .table-wrap th, .prose .table-wrap td { border: 1px solid var(--rule); padding: 11px 14px; text-align: left; vertical-align: top; line-height: 1.7; }
.prose .table-wrap thead th { background: var(--ink); color: #fff; font-weight: 700; }
.prose .table-wrap tbody th { background: var(--paper); }
.toc { margin: 44px 0; padding: 24px 30px; border: 2px solid var(--rule); }
.toc-h { margin: 0 0 10px; font: 700 16px var(--en); letter-spacing: .08em; }
.toc-h::before { content: "CONTENTS "; }
.toc ol { margin: 0; padding-left: 1.4em; font-size: 16px; }
.toc li { margin: 6px 0; }
.toc a { text-decoration: none; }
.toc a:hover { border-bottom: 1px solid var(--red); }

/* 迷ったらこの3つ */
.t3 { margin: 40px 0 36px; }
.t3 .label { margin-bottom: 16px; }
.t3-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.t3-list li { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--rule-list); }
.t3-no { font-size: 36px; color: #bbb; }
.t3-list li:first-child .t3-no { color: var(--ink); font-weight: 700; }
.t3-type { margin: 0 0 6px; }
.t3-name { margin: 0; font-size: 19px; font-weight: 700; }
.t3-catch { margin: 2px 0; font-size: 14px; color: var(--text-2); }
.t3-point { margin: 0; font-size: 13px; color: var(--sub); }
.t3-act { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.t3-more { font-size: 13px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--red); }
.t3-list li:first-child .apply { box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 640px) {
	.t3-list li { grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; }
	.t3-no { font-size: 26px; }
	.t3-act { grid-column: 2; flex-direction: row; justify-content: flex-start; gap: 16px; margin-top: 8px; }
}

/* 比較表 */
.cmp { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 840px; font-size: 14px; }
.cmp th, .cmp td { border-bottom: 1px solid var(--rule); padding: 14px 12px; vertical-align: middle; line-height: 1.6; text-align: left; }
.cmp thead th { background: var(--ink); color: #fff; font-weight: 700; font-size: 13px; white-space: nowrap; }
.cmp tbody th { position: sticky; left: 0; z-index: 1; background: #fff; min-width: 156px; font-weight: 700; border-right: 1px solid var(--rule); }
.cmp thead th:first-child { position: sticky; left: 0; z-index: 2; }
.cmp-no { display: block; font-size: 22px; margin-bottom: 4px; color: #bbb; }
.cmp tbody tr:first-child .cmp-no { color: var(--ink); font-weight: 700; }
.cmp-name { display: block; text-decoration: none; margin-bottom: 8px; }
.cmp-type { padding-top: 4px; border-top-width: 2px; }
.cmp td:nth-child(3) { min-width: 210px; }
.cmp td:nth-child(4) { min-width: 170px; }

/* サービス詳細 */
.svc { margin: 22px 0 56px; }
.svc-catch { margin: 0 0 18px; font-weight: 700; font-size: 18px; }
.svc-catch small { display: table; margin-bottom: 8px; }
.spec { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 18px; border-top: 2px solid var(--ink); }
.spec th, .spec td { border-bottom: 1px solid var(--rule); padding: 12px 14px; text-align: left; vertical-align: top; line-height: 1.7; }
.spec th { width: 9em; background: var(--paper); font-weight: 700; }
@media (max-width: 560px) { .spec th { width: 6.8em; font-size: 13px; padding: 10px 8px; } .spec td { font-size: 14px; } }
.svc-feat { margin: 0; padding: 0 0 0 1.3em; font-size: 16px; }
.svc-feat li { margin: .3em 0; }

.cta { margin: 30px 0 0; text-align: center; }
.cta-catch { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.cta-catch::before { content: "＼ "; }
.cta-catch::after { content: " ／"; }
.cta .apply-lg { min-width: 360px; }
@media (max-width: 560px) { .cta .apply-lg { min-width: 0; width: 100%; } }

.cta-block { margin: 56px 0; padding: 40px 28px; border: 2px solid var(--rule); text-align: center; }
.cta-block-h { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px solid var(--rule); font: 700 clamp(20px, 3vw, 26px)/1.5 var(--sans); }
.cta-block-sub { margin: 0 auto 24px; max-width: 34em; font-size: 15px; color: var(--text-2); }

/* 関連地域 */
.related { margin: 72px 0 56px; }
.related ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.related li a { display: inline-block; padding: 4px 14px; background: var(--sub); color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; border-radius: 999px; }
.related li a:hover { background: var(--ink); }

/* フッター（チャコール・白い極太ロゴ・英字ナビ） */
.ft { background: var(--char); color: #bdbdbd; padding: 0 0 110px; font-size: 13px; }
.ft-top { padding: 56px 0 26px; text-align: center; border-bottom: 1px solid #3a3a3a; }
.ft-logo { margin: 0 0 22px; font: 900 30px/1 var(--en); color: #fff; letter-spacing: -.02em; }
.ft-logo small { display: block; margin-top: 8px; font: 700 11px var(--sans); color: #9a9a9a; letter-spacing: .08em; }
.ft-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 26px; }
.ft-nav a { color: #fff; text-decoration: none; font: 700 15px var(--sans); }
.ft-body { padding-top: 26px; text-align: center; }
.ft-desc, .ft-pr { max-width: 760px; margin: 0 auto 10px; line-height: 1.8; }
.copy { margin: 18px 0 0; color: #9a9a9a; font: 400 12px var(--en); }
.page-h { margin: 28px 0 16px; font: 700 32px var(--sans); }

/* スマホ下部の申込ボタン */
.sticky { display: none; }
@media (max-width: 720px) {
	.sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); box-shadow: 0 -2px 8px rgba(0, 0, 0, .12); }
	.sticky .apply { display: block; font-size: 15px; padding: 13px 34px 13px 20px; box-shadow: inset 0 -3px 0 var(--gold); }
}
/* 白地のランキング */
#ranking .rk { border-top: 2px solid var(--ink); }
#ranking .rk li { border-bottom: 1px solid var(--rule-list); }
#ranking .rk-no { color: #bbb; }
#ranking .rk li:first-child .rk-no { color: var(--ink); }
#ranking .rk-name { color: var(--ink); }
#ranking .rk-catch { color: var(--text-2); }
#ranking .rk-point { color: var(--sub); }
#ranking .rk li:first-child .apply { box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 560px) { .apply-lg { font-size: 16px; padding: 16px 38px 16px 18px; } .hero-frame-t { letter-spacing: .08em; } }

/* ===== 日本語主体の見出し（和文を大きく、英字は小さく添える） ===== */
.label { gap: 4px 14px; }
.label-ja { font: 700 28px/1.35 var(--sans) !important; color: var(--ink) !important; }
.label-en { font: 400 14px var(--en) !important; color: var(--sub) !important; letter-spacing: .12em !important; }
.sec-dark .label-ja, .sec-char .label-ja { color: #fff !important; }
.label:not(:has(.label-en)) .label-ja { font-size: 22px !important; }
@media (max-width: 720px) { .label-ja { font-size: 22px !important; } }

/* ロゴ・ナビは日本語 */
.logo b { font: 900 22px/1 var(--sans); letter-spacing: .02em; }
.logo small { font: 700 9px var(--en); color: var(--sub); letter-spacing: .2em; margin-top: 5px; }
.gnav { font: 700 15px var(--sans); gap: 26px; }
.ft-logo { font: 900 24px/1 var(--sans); letter-spacing: .02em; }
.ft-logo small { font: 700 10px var(--en); letter-spacing: .2em; }
.hero-cat { font: 700 13px var(--sans); }
@media (max-width: 860px) { .logo b { font-size: 17px; } }

/* ===== 主要エリアの写真カード（GOETHE の記事カード） ===== */
.ac-list { list-style: none; margin: 0 0 56px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 34px; }
.ac { display: block; text-decoration: none; color: var(--ink); }
.ac-img { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--char) center / cover no-repeat; overflow: hidden; }
.ac-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, .55)); }
.ac-en { position: absolute; left: 16px; bottom: 12px; z-index: 1; font: 900 22px/1 var(--en); color: #fff; letter-spacing: .04em; }
.ac-cat { display: inline-block; margin-top: 12px; padding-top: 6px; border-top: 3px solid var(--c-club); font: 700 12px var(--sans); color: var(--c-club); }
.ac-t { display: block; margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.55; }
.ac-d { display: block; margin-top: 4px; font-size: 12px; color: var(--sub); }
.ac:hover .ac-t { text-decoration: underline; text-decoration-color: var(--red); }
.ac:hover .ac-img { opacity: .9; }
@media (max-width: 900px) { .ac-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .ac-t { font-size: 14px; } }

/* 都道府県ボタン */
.pref-board { background: #fff; padding: 32px 32px 18px; }
.pref-board-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 18px; font-weight: 700; }
.pref-board-h span { font-size: 12px; font-weight: 400; color: var(--sub); }
.pg { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--rule-list); }
.pg:last-child { border-bottom: 0; }
.pg-h { margin: 0; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--text-2); }
.pg-list { display: flex; flex-wrap: wrap; gap: 8px; }
.pb { display: inline-block; min-width: 76px; padding: 7px 12px; border: 1px solid var(--rule); font-size: 14px; font-weight: 700; text-align: center; text-decoration: none; color: var(--ink); transition: background .15s, color .15s; }
.pb.has-shop { box-shadow: inset 0 -3px 0 var(--c-club); }
.pb:hover { background: var(--ink); color: #fff; }
@media (max-width: 720px) {
	.pref-board { padding: 22px 16px 10px; }
	.pg { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.pb { min-width: 0; padding: 7px 10px; font-size: 13px; }
}
.center { text-align: center; margin: 36px 0 0; }

/* /area/ の索引見出し */
.area-h { display: flex; justify-content: space-between; align-items: baseline; }
.area-h span { font: 400 11px var(--en); color: var(--sub); letter-spacing: .14em; }

/* ===== ファーストビューの写真（GOETHE の特集ビジュアル：写真の上に白い細枠のタイトル） ===== */
.hero { padding: 0 0 64px; }
.hero > .wrap { max-width: 1240px; }
.hero-visual { position: relative; display: flex; align-items: flex-end; aspect-ratio: 16 / 7; margin: 0 -20px 40px; padding: 0 0 48px 56px; background: #111 center / cover no-repeat; }
.hero-visual::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15) 70%), linear-gradient(transparent 50%, rgba(35, 35, 35, .9)); }
.hero-visual .hero-frame { position: relative; z-index: 1; margin: 0; background: rgba(0, 0, 0, .15); }
.credit { position: absolute; right: 12px; bottom: 8px; z-index: 1; font: 400 10px var(--en); color: rgba(255, 255, 255, .6); }
.hero-cat, .hero-h, .hero-lead, .hero-act, .hero .note { position: relative; }
@media (max-width: 720px) {
	.hero-visual { aspect-ratio: 4 / 3; margin: 0 -20px 28px; padding: 0 16px 24px; }
}
.hero-visual { filter: grayscale(1) contrast(1.05); }
.hero-visual .hero-frame, .hero-visual .credit { filter: none; }
.ac-img { filter: saturate(.75) contrast(1.02); }
.ft-credit { max-width: 760px; margin: 18px auto 0; text-align: left; font-size: 11px; color: #8a8a8a; }
.ft-credit summary { cursor: pointer; text-align: center; }
.ft-credit ul { margin: 8px 0 0; padding-left: 1.2em; }
.ft-credit a { color: #bdbdbd; }
@media (max-width: 900px) { .ac-en { font-size: 15px; left: 10px; bottom: 8px; } .ac-t { font-size: 13px; } }


/* ===== 配色を絞る: 黒・グレー＋ゴールド1色（＋記事のマーカー） ===== */
:root {
	--red: var(--gold);
	--c-club: var(--text-2);
	--c-kikon: var(--text-2);
	--c-match: var(--text-2);
	--band: var(--char);
	--marker: #f3e3b3;
}
.label::before { background: var(--gold); }
.rk-type, .t3-type, .cmp-type, .svc-catch small, .ac-cat { color: var(--text-2) !important; border-top-color: var(--ink) !important; border-top-width: 2px !important; }
.sec-dark .rk-type { color: #bdbdbd !important; border-top-color: #bdbdbd !important; }
.sec-dark .t-club { color: #bdbdbd; }
.shop { color: var(--gold); }
.pb.has-shop { box-shadow: inset 0 -3px 0 var(--gold); }
.prose a:not([class]), .t3-more { border-bottom-color: var(--gold); }
.area .pref:hover, .cities a:hover, .ac:hover .ac-t { text-decoration-color: var(--gold); }
.toc a:hover { border-bottom-color: var(--gold); }

/* 記事のマーカー（太字と ==…== の要点） */
.prose strong, .prose mark { font-weight: 700; color: var(--ink); background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 1px; }

/* ===== 行間（詰まりすぎを解消） ===== */
body { line-height: 1.9; }
.prose { font-size: 17px; line-height: 2.05; letter-spacing: .03em; }
.prose > p, .prose li > p { margin: 0 0 2em; }
.prose li { margin: .55em 0; line-height: 1.9; }
.prose h2 { line-height: 1.6; margin: 96px 0 36px; }
.prose h3 { line-height: 1.6; margin: 64px 0 24px; }
.prose .table-wrap th, .prose .table-wrap td, .spec th, .spec td, .cmp th, .cmp td { line-height: 1.85; }
.svc-feat li { line-height: 1.85; margin: .45em 0; }
.rk-catch, .t3-catch, .two-col-item p, .steps p, .feature-body p, .hero-lead { line-height: 1.95; }
.feature-body p { margin-bottom: 1.4em; }
.cta-block-sub, .note { line-height: 1.85; }
.area li { line-height: 1.8; }
@media (max-width: 560px) { .prose { font-size: 16px; line-height: 2; } .prose h2 { font-size: 23px; margin-top: 76px; } .prose h3 { font-size: 20px; } }

/* ===== 見出しデザイン ===== */
.prose h2 { border-left: 0; padding: 0 0 18px; margin: 104px 0 30px; position: relative; display: flex; flex-direction: column; gap: 10px; }
.prose h2::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule); }
.prose h2::before { content: ""; position: absolute; left: 0; bottom: 0; z-index: 1; width: 72px; height: 3px; background: var(--ink); }
.h2-no { font: 700 12px/1 var(--en); letter-spacing: .24em; color: var(--gold); }
.h2-t { font-size: 28px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.prose h3 { position: relative; border-bottom: 0; padding: 0 0 0 20px; font-size: 22px; line-height: 1.6; }
.prose h3::before { content: ""; position: absolute; left: 0; top: .32em; width: 6px; height: 1.05em; background: var(--ink); }
.prose h3::after { content: ""; position: absolute; left: 0; top: calc(.32em + 1.05em - 6px); width: 6px; height: 6px; background: var(--gold); }
.prose h4 { padding-left: 14px; border-left: 2px solid var(--gold); }
.page-h, .art-head h1 { word-break: auto-phrase; text-wrap: balance; }
.prose h2, .prose h3, .label-ja, .hero-h, .rk-name, .t3-name, .ac-t, .cta-block-h, .feature-h, .two-col-item h3, .steps h3, .svc-catch, .qt-h { word-break: auto-phrase; text-wrap: balance; }
.prose p, .prose li { text-wrap: pretty; line-break: strict; }

/* ===== 写真 ===== */
.fig { margin: 0 0 36px; }
.fig img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.fig figcaption { margin-top: 6px; font: 400 11px var(--en); color: var(--sub); text-align: right; }
.fig-eye { margin: 8px 0 32px; }
.fig-sec { margin-top: -6px; }

/* ===== 冒頭の簡易表 ===== */
.qt { margin: 0 0 40px; border: 2px solid var(--ink); }
.qt-h { margin: 0; padding: 12px 18px; background: var(--ink); color: #fff; font-size: 16px; font-weight: 700; }
.qt-wrap { overflow-x: auto; }
.qt table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.qt th, .qt td { padding: 12px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; line-height: 1.7; }
.qt thead th { font-size: 12px; color: var(--sub); font-weight: 700; background: var(--paper); }
.qt tbody th { white-space: nowrap; font-weight: 700; }
.qt-no { margin-right: 10px; font: 300 20px var(--en); color: #bbb; }
.qt tbody tr:first-child .qt-no { color: var(--ink); font-weight: 700; }
.qt tbody tr:first-child .apply { box-shadow: inset 0 -3px 0 var(--gold); }
.qt tr:last-child th, .qt tr:last-child td { border-bottom: 0; }
.qt-more { margin: 0; padding: 10px 18px; border-top: 1px solid var(--rule); font-size: 13px; text-align: right; }
.qt-more a { text-decoration: none; border-bottom: 1px solid var(--gold); }

/* ===== サービスのバナー ===== */
.svc-banner { display: block; margin: 0 0 18px; }
.svc-banner img { display: block; width: 100%; height: auto; }
.svc-banner:hover { opacity: .9; }

/* ===== FV・地域カードの画像を img に ===== */
.hero-visual { overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-visual::before { z-index: 1; }
.hero-visual .hero-frame, .credit { z-index: 2; }
.ac-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-img::after, .ac-en { z-index: 1; }

/* ===== スマホ ===== */
@media (max-width: 560px) {
	.wrap { padding: 0 18px; }
	.h2-t { font-size: 22px; }
	.prose h2 { margin-top: 80px; }
	.prose h3 { font-size: 19px; padding-left: 16px; }
	.prose { font-size: 16px; line-height: 2; }
	.art-head h1 { font-size: 24px; line-height: 1.5; }
	.qt-h { font-size: 15px; }
	.qt table { min-width: 0; }
	.qt thead { display: none; }
	.qt tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-bottom: 1px solid var(--rule); }
	.qt tbody tr:last-child { border-bottom: 0; }
	.qt th, .qt td { padding: 0; border: 0; }
	.qt td:nth-child(2) { grid-column: 1; font-size: 13px; color: var(--text-2); }
	.qt td:nth-child(3) { grid-column: 1; font-size: 12px; color: var(--sub); }
	.qt td:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
	.fig { margin-left: -18px; margin-right: -18px; }
	.fig figcaption { padding: 0 18px; }
	.svc-catch { font-size: 16px; }
	.cta-catch { font-size: 13px; }
	.hero-h { font-size: 27px; }
	.label-ja { font-size: 21px !important; }
	.rk li { grid-template-columns: 40px minmax(0, 1fr); }
	.spec th { width: 6.2em; }
}
@media (max-width: 560px) {
	.spec, .spec tbody, .spec tr, .spec th, .spec td { display: block; width: 100%; }
	.spec tr { border-bottom: 1px solid var(--rule); }
	.spec th { width: 100%; padding: 8px 12px 4px; border: 0; background: none; font-size: 12px; color: var(--sub); }
	.spec td { padding: 0 12px 12px; border: 0; font-size: 15px; }
}
/* 赤字（重要な文字列だけ。マーカーとは併用しない） */
.prose strong.red { color: #c8102e; background: none; padding: 0; }
/* 記事タイトルは行を均等にせず、幅いっぱいで自然に折り返す */
.art-head h1, .page-h { word-break: normal; text-wrap: wrap; }

/* ===== よくある質問（Q/A カード） ===== */
.prose .qa { margin: 0 0 16px; border: 1px solid var(--rule); background: #fff; }
.prose .qa-q { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 18px 20px; background: var(--paper); border-bottom: 1px solid var(--rule); font-size: 17px; line-height: 1.6; }
.prose .qa-q::before, .prose .qa-q::after { content: none; }
.qa-mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font: 700 16px/1 var(--en); }
.qa-q .qa-mark { background: var(--ink); color: #fff; }
.qa-a { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px 6px; }
.qa-a .qa-mark { background: #fff; color: var(--gold); border: 1.5px solid var(--gold); }
.qa-text { padding-top: 3px; }
.qa-body { flex: 1; min-width: 0; padding-top: 2px; font-size: 16px; }
.qa-body p { margin: 0 0 12px; }
@media (max-width: 560px) {
	.prose .qa-q { padding: 14px; gap: 10px; font-size: 16px; }
	.qa-a { padding: 14px 14px 4px; gap: 10px; }
	.qa-mark { width: 28px; height: 28px; font-size: 14px; }
	.qa-body { font-size: 15px; }
}

/* 運営者情報・広告ポリシー：装飾なしの文書 */
.prose.plain { font-size: 16px; line-height: 1.95; }
.prose.plain h2 { display: block; margin: 56px 0 16px; padding: 0; border: 0; font-size: 20px; }
.prose.plain h2::before, .prose.plain h2::after { content: none; }
.prose.plain h3 { margin: 32px 0 10px; padding: 0; font-size: 17px; }
.prose.plain h3::before, .prose.plain h3::after { content: none; }
.prose.plain strong { font-weight: 400; background: none; color: inherit; padding: 0; }
.prose.plain .table-wrap table { min-width: 0; font-size: 15px; }
.prose.plain .table-wrap th, .prose.plain .table-wrap td { border: 1px solid var(--rule); padding: 8px 12px; }
.prose.plain .table-wrap thead th { background: none; color: var(--ink); font-weight: 700; text-align: left; }
.prose.plain .table-wrap tbody th { background: none; }
.prose.plain ul { padding-left: 1.4em; }
/* 太字は太字だけ。黄色のマーカーは ==…==（<mark>）にだけ付ける */
.prose strong:not(.red) { background: none; padding: 0; }
.ft-small { margin: 14px 0 0; font-size: 11px; }
.ft-small a { color: #8a8a8a; text-decoration: none; }
.credit-list { font-size: 13px; line-height: 1.8; padding-left: 1.2em; }
.credit-list li { margin: 6px 0; }

/* 濃色帯の英字ラベルは明るいグレー（読みやすさ） */
.sec-dark .label-en, .sec-char .label-en { color: #a8a8a8 !important; }