@charset "utf-8";
/* =========================================================================
   コラム記事の部品（/column/ の記事ページだけで読み込む）
   LiPro の記事と同じ見た目の部品を、このサイトの配色で作ったもの（2026-10-08）。
   長い文章を読ませるため、本文は明るい紙の色の面に置く。

   使えるクラス（記事本文のHTMLで指定する）
   - c-marker  黄色のマーカー＋太字（重要な一文）
   - c-red     赤字＋太字（最重要の注意・結論の金額）
   - c-em      濃い金＋太字＋金の下線（数値・強み）
   - c-point / c-point--caution / c-point--check  ポイント箱・注意箱・チェック箱
   - c-balloon 吹き出し（c-balloon__icon に画像、c-balloon__text に文）
   - c-table   表（スマホでは横にスクロール）
   - c-toc     目次
   - c-note    出典などの小さい注記
   - c-cta     店舗への導線の箱
   - c-faq     よくある質問
   - c-shop    店の紹介ボックス（c-shop__name に店名、c-shop__spec に料金などの表、c-shop__good / c-shop__check に要点）
   - c-summary 要点をまとめる箱（c-summary__ttl に見出し）
   ====================================================================== */

.column { max-width: 860px; }
.column__head { margin-bottom: 28px; }
.column__title {
	font-family: var(--font-mc); font-weight: 400;
	font-size: clamp(21px, 3.6vw, 30px); line-height: 1.6; letter-spacing: .06em;
	margin: 0 0 12px; padding: 0; border: 0; color: var(--text);
}
.column__date { color: var(--text-dim); font-size: 13px; letter-spacing: .08em; margin: 0; }
.column__eyecatch { margin-bottom: 28px; }
.column__eyecatch img { width: 100%; height: auto; display: block; }

/* 本文: 明るい紙の面 */
.column__body {
	--paper: #fbf8f2;
	--ink: #2b2723;
	--ink-dim: #6d655c;
	--line: #e3d9c6;
	--deep: #8a6a2a;
	background: var(--paper); color: var(--ink);
	font-family: var(--font-go); font-size: 16px; line-height: 1.95; letter-spacing: .02em;
	padding: clamp(22px, 5vw, 56px) clamp(16px, 5vw, 56px);
	border-radius: 4px;
}
/* サイト共通の .pagebody p（暗い面用の薄い文字色）を打ち消す */
.pagebody .column__body p { margin: 0 0 1.4em; color: var(--ink); }
.pagebody .column__body .c-note, .pagebody .column__body .c-operator, .pagebody .column__body .c-table__scroll { color: var(--ink-dim); }
.pagebody .column__body .c-cta p { color: #f2efe9; }
.pagebody .column__body .c-cta .c-cta__ttl { color: var(--gold-bright); }
.pagebody .column__body .c-point__ttl { color: #fff; }
.column__body a { color: #1a5fd0; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.column__body a:not([class]):hover { color: #0b3f9a; text-decoration-thickness: 2px; }
.column__body strong, .column__body b { font-weight: 700; }
.column__body img { max-width: 100%; height: auto; display: block; margin: 0 auto 1.6em; }
.column__body figure { margin: 0 0 1.8em; }
.column__body figcaption { font-size: 12px; color: var(--ink-dim); text-align: center; margin-top: 6px; }
.column__body ul, .column__body ol { margin: 0 0 1.6em; padding-left: 1.4em; }
.column__body li { margin-bottom: .4em; }

.column__body h2 {
	font-family: var(--font-mc); font-weight: 600; font-size: clamp(19px, 2.8vw, 23px); line-height: 1.6;
	color: #fff; background: #1a1714; border-left: 5px solid var(--gold);
	padding: 14px 18px; margin: 2.8em 0 1.3em; letter-spacing: .04em;
	scroll-margin-top: calc(var(--head-h) + 12px);
}
.column__body h3 {
	font-family: var(--font-mc); font-weight: 600; font-size: clamp(17px, 2.4vw, 20px); line-height: 1.6;
	color: var(--ink); border-bottom: 2px solid var(--gold); padding: 0 0 8px 2px; margin: 2.2em 0 1.1em;
	scroll-margin-top: calc(var(--head-h) + 12px);
}
.column__body h4 {
	font-size: 17px; font-weight: 700; color: var(--ink); margin: 1.8em 0 .9em;
	padding-left: 12px; border-left: 3px solid var(--gold-dim);
}

/* 装飾3種 */
.c-marker { font-weight: 700; background: linear-gradient(transparent 55%, #ffe94d 55%); padding: 0 2px; }
.c-red { font-weight: 700; color: #cd0000; }
.c-em { font-weight: 700; color: var(--deep); border-bottom: 2px solid var(--gold); }

/* ポイント箱・注意箱・チェック箱 */
.c-point {
	position: relative; border: 2px solid var(--gold); border-radius: 6px; background: #fff;
	padding: 26px 20px 8px; margin: 2.2em 0 1.8em;
}
.c-point__ttl {
	position: absolute; top: -14px; left: 14px; background: var(--gold); color: #fff;
	font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1; padding: 7px 14px; border-radius: 3px;
}
.c-point ul { list-style: none; padding-left: 0; }
.c-point li { position: relative; padding-left: 1.6em; }
.c-point li::before { content: ""; position: absolute; left: .3em; top: .78em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.c-point--caution { border-color: #d9534f; background: #fff8f7; }
.c-point--caution .c-point__ttl { background: #d9534f; }
.c-point--caution li::before { background: #d9534f; }
.c-point--check li::before {
	width: 9px; height: 5px; border-radius: 0; background: none; top: .62em;
	border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg);
}

/* 吹き出し */
.c-balloon { display: flex; align-items: flex-start; gap: 14px; margin: 1.8em 0; }
.c-balloon__icon { flex: 0 0 64px; text-align: center; font-size: 11px; color: var(--ink-dim); line-height: 1.4; }
.c-balloon__icon img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; margin: 0 auto 4px; border: 2px solid var(--line); }
.c-balloon__text {
	position: relative; flex: 1; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px;
}
.c-balloon__text::before {
	content: ""; position: absolute; left: -9px; top: 20px; width: 16px; height: 16px; background: #fff;
	border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transform: rotate(45deg);
}
.c-balloon__text p:last-child { margin-bottom: 0; }

/* 表（スマホは横スクロール） */
.c-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 .6em; }
.c-table table { width: 100%; min-width: 560px; border-collapse: collapse; background: #fff; font-size: 14px; line-height: 1.6; }
.c-table--narrow table { min-width: 0; }
.c-table th, .c-table td { border: 1px solid var(--line); padding: 9px 10px; text-align: center; vertical-align: middle; }
.c-table thead th { background: #1a1714; color: #f3e6c8; font-weight: 600; white-space: nowrap; }
.c-table tbody th { background: #f3ecdf; font-weight: 700; text-align: left; }
.c-table tr.is-own td, .c-table tr.is-own th { background: #fff7dc; }
.c-table__scroll { font-size: 12px; color: var(--ink-dim); margin: 0 0 .4em; }
@media (min-width: 760px) { .c-table__scroll { display: none; } }

/* 注記 */
.c-note { font-size: 12px; line-height: 1.7; color: var(--ink-dim); margin: 0 0 1.8em; }
.column__body .c-note a { color: #1a5fd0; }

/* 目次 */
.c-toc { border: 1px solid var(--line); background: #fff; padding: 18px 22px 10px; margin: 2em 0; }
.c-toc__ttl { font-weight: 700; margin: 0 0 .6em; letter-spacing: .1em; }
.c-toc ol { margin: 0 0 .6em; }
.column__body .c-toc a { color: #1a5fd0; text-decoration: underline; }

/* 店舗への導線 */
.c-cta { background: #1a1714; color: #f2efe9; border: 1px solid var(--gold-dim); padding: 24px 20px; margin: 2.4em 0; text-align: center; }
.c-cta p { margin: 0 0 1em; }
.c-cta__ttl { font-family: var(--font-mc); font-size: 18px; color: var(--gold-bright); letter-spacing: .08em; }
.c-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.column__body .c-cta__btn {
	display: inline-block; min-width: 200px; padding: 12px 18px; text-decoration: none; font-weight: 700;
	border: 1px solid var(--gold); color: var(--gold-bright);
}
.column__body .c-cta__btn--main { background: var(--gold); color: #1a1714; }
.column__body .c-cta__btn:hover { color: #fff; border-color: #fff; }

/* よくある質問 */
.c-faq { margin: 0 0 2em; }
.c-faq dt { font-weight: 700; padding: 12px 14px 12px 44px; position: relative; background: #f3ecdf; margin-top: 12px; }
.c-faq dt::before { content: "Q"; position: absolute; left: 14px; top: 10px; font-family: var(--font-en); font-size: 22px; color: var(--deep); line-height: 1.2; }
.c-faq dd { margin: 0; padding: 12px 14px 4px 44px; position: relative; background: #fff; border: 1px solid #f3ecdf; }
.c-faq dd::before { content: "A"; position: absolute; left: 14px; top: 8px; font-family: var(--font-en); font-size: 22px; color: var(--accent); line-height: 1.2; }

/* 運営元の明記 */
.c-operator { font-size: 13px; color: var(--ink-dim); border: 1px solid var(--line); background: #fff; padding: 10px 14px; margin: 0 0 1.8em; }

/* 店の紹介ボックス */
.c-shop { border: 1px solid var(--line); background: #fff; margin: 0 0 1.6em; border-radius: 6px; overflow: hidden; }
.c-shop__name {
	margin: 0; padding: 12px 16px; background: #1a1714; color: #f3e6c8;
	font-family: var(--font-mc); font-size: 17px; font-weight: 600; letter-spacing: .04em; line-height: 1.5;
}
.c-shop__tag { display: inline-block; margin-left: 8px; padding: 2px 8px; background: var(--gold); color: #1a1714; font-family: var(--font-go); font-size: 12px; font-weight: 700; vertical-align: middle; }
.c-shop--own { border: 2px solid var(--gold); }
.c-shop--own .c-shop__name { background: #2a2116; }
.c-shop__spec { display: grid; grid-template-columns: 7.5em 1fr; margin: 0; font-size: 14px; line-height: 1.7; }
.c-shop__spec dt { background: #f3ecdf; font-weight: 700; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.c-shop__spec dd { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--line); }
.c-shop__body { padding: 12px 16px 4px; }
.pagebody .column__body .c-shop__body p { margin: 0 0 .9em; font-size: 15px; line-height: 1.85; }
.c-shop__lbl { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; margin-right: 6px; border-radius: 3px; color: #fff; background: var(--deep); }
.c-shop__lbl--check { background: #d9534f; }
.c-shop__src { font-size: 12px; color: var(--ink-dim); }

/* 要点をまとめる箱 */
.c-summary { background: #fff7dc; border: 1px solid #ecd9a3; border-radius: 6px; padding: 16px 20px 6px; margin: 1.8em 0; }
.pagebody .column__body .c-summary__ttl { font-weight: 700; color: var(--deep); margin: 0 0 .6em; }
.c-summary ul, .c-summary ol { margin-bottom: .8em; }
/* 店名は暗い帯の上なので、本文の文字色（.pagebody .column__body p）より強く指定する */
.pagebody .column__body .c-shop__name { color: #f3e6c8; margin: 0; }
.pagebody .column__body .c-shop__spec { margin: 0; }

/* 店の紹介ボックスの写真（当店は店内とキャスト、他店は掲載先の写真ページへのリンク） */
.c-shop__photos { padding: 12px 16px 10px; }
.column__body .c-shop__interior { margin: 0 0 .8em; }
.column__body .c-shop__interior img { width: 100%; margin: 0; border-radius: 4px; }
.pagebody .column__body .c-shop__castttl { font-size: 13px; font-weight: 700; color: var(--deep); margin: 0 0 .4em; }
.c-shop__casts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 600px) { .c-shop__casts { grid-template-columns: repeat(3, 1fr); } }
.column__body .c-shop__cast { display: block; text-decoration: none; text-align: center; color: var(--ink); font-size: 12px; line-height: 1.5; }
.column__body .c-shop__cast img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; margin: 0 0 4px; border-radius: 4px; }
.pagebody .column__body .c-shop__castmore, .pagebody .column__body .c-shop__photolink { font-size: 13px; margin: .6em 0 0; }
.pagebody .column__body .c-shop__photolink a::before { content: ""; display: inline-block; width: 14px; height: 11px; margin-right: 6px; vertical-align: -1px; border: 2px solid currentColor; border-radius: 2px; }

/* お店選び診断（[nakajima_shop_finder]） */
.pagebody .column__body .c-finder p { color: #f2efe9; }
.c-finder__back { display: block; margin: 14px auto 0; padding: 6px 10px; background: none; border: 0; color: #cfc6b8; font-size: 13px; text-decoration: underline; cursor: pointer; }
.c-finder__main { background: var(--paper); color: var(--ink); border: 2px solid var(--gold); border-radius: 6px; padding: 18px 16px 16px; max-width: 560px; margin: 0 auto; position: relative; }
.pagebody .column__body .c-finder .c-finder__main p { color: var(--ink); }
.pagebody .column__body .c-finder .c-finder__badge {
	position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
	background: var(--gold); color: #1a1714; font-size: 13px; font-weight: 700; padding: 4px 14px; border-radius: 3px; margin: 0;
}
.column__body .c-finder__img { width: 100%; border-radius: 4px; margin: 6px 0 10px; }
.pagebody .column__body .c-finder .c-finder__name { font-family: var(--font-mc); font-size: 19px; font-weight: 600; text-align: center; margin: 0 0 .2em; }
.pagebody .column__body .c-finder .c-finder__spec { font-size: 13px; text-align: center; color: var(--ink-dim); margin: 0 0 .8em; }
.c-finder__reasons { margin: 0 0 .8em; padding-left: 1.3em; font-size: 15px; }
.pagebody .column__body .c-finder .c-finder__note { font-size: 13px; background: #fff3f2; border-left: 3px solid #d9534f; padding: 8px 10px; margin: 0 0 .8em; }
.c-finder__btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.column__body .c-finder__btn { flex: 1 1 140px; text-align: center; padding: 10px 12px; border: 1px solid var(--gold); color: #7a5a1c; text-decoration: none; font-weight: 700; font-size: 14px; border-radius: 3px; }
.column__body .c-finder__btn--main { background: var(--gold); color: #1a1714; }
.pagebody .column__body .c-finder .c-finder__subttl { font-size: 14px; font-weight: 700; color: var(--gold-bright); text-align: center; margin: 1.4em 0 .5em; }
.c-finder__others { max-width: 560px; margin: 0 auto; padding-left: 1.2em; font-size: 14px; }
.column__body .c-finder__others a { color: #8ab8ff; text-decoration: underline; }
.c-finder { scroll-margin-top: calc(var(--head-h) + 12px); }
.c-finder__reasons li { list-style: disc; }

/* 他店の店内写真（掲載先の画像をそのまま表示し、出典を下に書く） */
.c-shop__gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.c-shop__gallery--one { grid-template-columns: 1fr; }
.column__body .c-shop__gallery img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: 4px; background: #eee6d8; }
.column__body .c-shop__gallery--one img { aspect-ratio: 3 / 2; }
.pagebody .column__body .c-shop__credit { font-size: 12px; color: var(--ink-dim); margin: .5em 0 0; }
.pagebody .column__body .c-shop__credit a { color: #1a5fd0; }

/* お店選び診断の見た目（2026-10-08 目立つ版。ユーザー指示） */
.c-finder {
	position: relative; overflow: hidden; margin: 2.4em 0; padding: 0 0 26px;
	background: linear-gradient(180deg, #1d1813 0%, #120f0c 100%); color: #f2efe9;
	border: 2px solid var(--gold); border-radius: 10px;
	box-shadow: 0 0 0 5px rgba(200, 164, 92, .18), 0 14px 34px rgba(0, 0, 0, .28);
}
.c-finder__head {
	position: relative; text-align: center; padding: 30px 18px 26px; margin-bottom: 22px;
	/* 背景は当店の写真を使わず、夜の街の光のボケを描く（2026-10-08 ユーザー指示） */
	background:
		radial-gradient(circle at 8% 22%, rgba(232, 190, 110, .55) 0 18px, transparent 34px),
		radial-gradient(circle at 18% 78%, rgba(190, 90, 60, .45) 0 22px, transparent 40px),
		radial-gradient(circle at 30% 12%, rgba(245, 215, 150, .35) 0 12px, transparent 26px),
		radial-gradient(circle at 72% 18%, rgba(214, 150, 70, .45) 0 20px, transparent 38px),
		radial-gradient(circle at 88% 70%, rgba(245, 215, 150, .5) 0 24px, transparent 44px),
		radial-gradient(circle at 95% 15%, rgba(190, 90, 60, .4) 0 14px, transparent 28px),
		radial-gradient(circle at 60% 90%, rgba(232, 190, 110, .3) 0 16px, transparent 32px),
		radial-gradient(ellipse at 50% 50%, rgba(14, 10, 8, .9) 0%, rgba(14, 10, 8, 0) 70%),
		linear-gradient(180deg, #2e2218 0%, #120d09 100%);
	border-bottom: 1px solid rgba(200, 164, 92, .55);
}
.pagebody .column__body .c-finder .c-finder__kicker { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; }
.c-finder__kicker span {
	display: inline-block; padding: 5px 14px; border-radius: 30px; font-size: 13px; font-weight: 700; letter-spacing: .06em;
	background: linear-gradient(135deg, #f1d796 0%, #c8a45c 55%, #a8833c 100%); color: #1a1408;
}
.pagebody .column__body .c-finder .c-finder__ttl {
	font-family: var(--font-mc); font-weight: 600; font-size: clamp(24px, 5.6vw, 32px); line-height: 1.4; letter-spacing: .08em; margin: 0 0 .35em;
	color: #f7e3b0; text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}
.pagebody .column__body .c-finder .c-finder__lead { font-size: 14px; margin: 0; color: #e9e1d2; }
.c-finder__stage { padding: 0 18px; }
@media (max-width: 480px) { .c-finder__stage { padding: 0 12px; } .c-finder__opt { gap: 10px; } }
.c-finder__progress { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto 18px; }
.c-finder__bar { flex: 1; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.c-finder__bar span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #a8833c, #f1d796); transition: width .4s ease; }
.c-finder__count { font-size: 13px; font-weight: 700; color: var(--gold-bright); white-space: nowrap; }
.c-finder__qline { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 18px; }
.c-finder__qno {
	flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	font-family: var(--font-go); font-size: 18px; font-weight: 800; letter-spacing: 0; color: #1a1408;
	background: linear-gradient(135deg, #f1d796 0%, #c8a45c 60%, #a8833c 100%);
}
.pagebody .column__body .c-finder .c-finder__q { font-size: clamp(18px, 4.6vw, 23px); font-weight: 700; line-height: 1.5; letter-spacing: .02em; margin: 0; color: #fff; }
.pagebody .column__body .c-finder .c-finder__step { font-size: 13px; font-weight: 700; color: var(--gold-bright); letter-spacing: .12em; text-align: center; margin: 0 0 .9em; }
.c-finder__opts { display: grid; gap: 12px; max-width: 520px; margin: 0 auto; }
.c-finder__opt {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px 10px 10px; cursor: pointer; text-align: left;
	background: #fffaf0; color: #1a1714; border: 2px solid var(--gold); border-radius: 10px;
	font: 700 15px/1.5 var(--font-go); letter-spacing: 0;
	box-shadow: 0 4px 0 #8a6a2a; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.c-finder__opt-key {
	flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
	background: #1a1714; color: var(--gold-bright); font-family: var(--font-go); font-weight: 800; font-size: 14px;
}
.c-finder__opt-label { flex: 1; }
.c-finder__opt-arrow { flex: 0 0 auto; width: 10px; height: 10px; border-top: 3px solid var(--deep, #8a6a2a); border-right: 3px solid var(--deep, #8a6a2a); transform: rotate(45deg); margin-right: 4px; }
.c-finder__opt:hover, .c-finder__opt:focus-visible { background: #f6e3b4; transform: translateY(-2px); box-shadow: 0 6px 0 #8a6a2a; outline: none; }
.c-finder__opt:active { transform: translateY(3px); box-shadow: 0 1px 0 #8a6a2a; }
@media (prefers-reduced-motion: no-preference) {
	.c-finder { animation: finder-glow 2.8s ease-in-out infinite; }
}
@keyframes finder-glow {
	0%, 100% { box-shadow: 0 0 0 5px rgba(200, 164, 92, .18), 0 14px 34px rgba(0, 0, 0, .28); }
	50% { box-shadow: 0 0 0 8px rgba(200, 164, 92, .32), 0 14px 34px rgba(0, 0, 0, .28); }
}