@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════
   page-column.css — 舞妓さんの豆知識コラム（/maiko/{slug}/）
   下層ページの器（.page:not(.ska-flush)）が上余白・中央寄せ・本文幅を持つ。
   ここでは読み物としての組み（見出し・段落・写真）を、白基調・明朝で整える。
   ══════════════════════════════════════════════════════════════════════ */

/* 記事は一定幅の読み物カラムに統一して中央に置く（写真も本文も同じ幅にそろえ、
   右側だけ余白が空く・写真だけ巨大、というアンバランスを避ける）。 */
.column{width:100%;max-width:44em;margin-inline:auto;padding:0 clamp(18px,4vw,26px) clamp(60px,8vw,104px)}

/* パンくず */
.col-crumbs{margin:0 0 clamp(14px,2vw,22px);display:flex;flex-wrap:wrap;align-items:center;gap:8px;
 font-family:var(--f-lat);font-size:11.5px;letter-spacing:.1em;color:var(--moji-2)}
.col-crumbs a{color:var(--kogane-moji);text-decoration:none}
.col-crumbs a:hover{color:var(--enji)}
.col-crumbs span[aria-hidden]{color:var(--keisen)}

/* 見出し（.sec-h を流用）。日付を副題に添える */
.column .sec-h{padding-inline:0}
.col-date{margin-left:1em;font-family:var(--f-lat);font-size:11px;letter-spacing:.14em;color:var(--usukin)}

/* リード（記事の要約）。本文より少し大きい明朝で、記事の入口を示す */
.col-lead{margin:clamp(18px,2.4vw,28px) 0 0;
 font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(15px,1.7vw,18px);line-height:1.95;letter-spacing:.04em;color:var(--midashi)}

/* 目次。罫線で囲わず、地色の面に番号つきで置く。SEO/LLMO で拾われやすい構造 */
.col-toc{margin:clamp(24px,3.2vw,38px) 0 0;padding:clamp(16px,2vw,22px) clamp(18px,2.2vw,26px);
 background:var(--ji-2);border:1px solid var(--keisen)}
.col-toc-h{display:block;font-family:var(--f-lat);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
 color:var(--kogane-moji);margin-bottom:10px}
.col-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;
 display:grid;grid-template-columns:1fr 1fr;gap:7px clamp(16px,2vw,28px)}
.col-toc li{counter-increment:toc;position:relative;padding-left:1.7em;font-size:13px;line-height:1.7}
.col-toc li::before{content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:.05em;
 font-family:var(--f-lat);font-size:10.5px;letter-spacing:.06em;color:var(--usukin)}
.col-toc a{color:var(--moji);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease)}
.col-toc a:hover{color:var(--enji);border-color:rgba(var(--enji-rgb),.4)}
/* 見出しが「1月」など自前の数字を持つページでは、連番を出さない（番号の重複回避）。
   月名がそのまま目印になるので、番号ぶんの字下げも詰める。 */
.col-toc ol.is-selfnum{counter-reset:none}
.col-toc ol.is-selfnum li{counter-increment:none;padding-left:0}
.col-toc ol.is-selfnum li::before{content:none}
@media (max-width:520px){.col-toc ol{grid-template-columns:1fr}}

/* 記事の見出し写真。カラム幅いっぱい。高さは上限を設けて大きくなりすぎないように */
.col-hero{margin:clamp(22px,3vw,36px) 0 0;overflow:hidden;background:var(--ji-2)}
.col-hero img{display:block;width:100%;height:auto;max-height:clamp(340px,48vh,520px);object-fit:cover;filter:var(--shashin)}

/* 本文。読みやすい幅・行間で。余白は「段落＜小見出し＜大見出し」の順に広げ、
   どこからどこまでが一つのまとまりか、余白の差で分かるようにする。 */
.col-body{margin:clamp(30px,4vw,48px) 0 0}

/* 大見出し（章）。上に大きく空け、下罫線で章の始まりをはっきり示す */
.col-h{margin:clamp(40px,5vw,60px) 0 clamp(14px,1.8vw,18px);
 font-family:var(--f-disp);font-weight:600;font-feature-settings:"palt" 1;
 font-size:clamp(18px,2.1vw,23px);letter-spacing:.05em;line-height:1.5;color:var(--midashi);
 padding-bottom:clamp(10px,1.4vw,14px);border-bottom:1px solid var(--keisen)}
.col-body > .col-h:first-child{margin-top:0}
/* 章は <section class="col-sec"> で囲む（構造のみ・見た目は各見出し/段落が持つ）。
   本文の先頭がいきなり章のときは、上の余白を詰める。 */
.col-sec{margin:0}
.col-body > .col-sec:first-child > .col-h{margin-top:0}

/* 小見出し（章の中の項目）。上は段落より広く空けてまとまりの頭と分かるようにし、
   下は詰めて直後の本文とくっつける。頭に金の短い印を添える */
.col-h3{margin:clamp(26px,3.2vw,38px) 0 clamp(4px,.7vw,8px);position:relative;padding-left:14px;
 font-family:var(--f-disp);font-weight:600;font-size:clamp(15px,1.7vw,18px);
 letter-spacing:.04em;line-height:1.55;color:var(--midashi)}
.col-h3::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:2px;background:var(--kogane)}

/* 段落。間隔はいちばん狭く一定に */
.col-p{margin:clamp(12px,1.5vw,16px) 0 0;
 font-family:var(--f-body);font-size:14.5px;line-height:2.1;letter-spacing:.04em;color:var(--moji)}
.col-body > .col-p:first-child{margin-top:0}

/* 見出しの直後の段落は、見出しにくっつけて一つのまとまりに見せる */
.col-h + .col-p,.col-h3 + .col-p{margin-top:clamp(8px,1.1vw,12px)}

/* 本文中の写真。中央に置き、キャプションを下に添える。
   縦長の写真が大きくなりすぎないよう、高さの上限で抑える（横長は幅いっぱい）。 */
.col-fig{margin:clamp(26px,3.4vw,40px) 0 0}
.col-fig img{display:block;width:auto;max-width:100%;height:auto;max-height:clamp(420px,64vh,600px);
 margin-inline:auto;background:var(--ji-2);filter:var(--shashin);cursor:zoom-in}
.col-fig figcaption{margin-top:9px;font-size:12px;letter-spacing:.06em;color:var(--moji-2);text-align:center}

/* 前後・一覧への導線 */
.col-nav{margin:clamp(40px,5.4vw,68px) 0 0;padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--keisen);
 display:flex;align-items:center;justify-content:space-between;gap:14px}
.col-nav a{display:inline-flex;align-items:center;gap:.5em;text-decoration:none;
 font-family:var(--f-disp);font-size:13px;letter-spacing:.04em;color:var(--midashi);line-height:1.5}
.col-nav a i{font-style:normal;color:var(--kogane);transition:transform .32s var(--ease)}
.col-nav-prev{max-width:40%}.col-nav-next{max-width:40%;text-align:right}
.col-nav-prev span,.col-nav-next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-nav-prev:hover i{transform:translateX(-4px)}
.col-nav-next:hover i{transform:translateX(4px)}
.col-nav-index{flex:0 0 auto;font-family:var(--f-lat)!important;font-size:11px!important;letter-spacing:.18em!important;
 color:var(--kogane-moji)!important;border-bottom:1px solid rgba(var(--kogane-rgb),.4);padding-bottom:3px}

/* 予約ボタン */
.col-end{margin:clamp(38px,5vw,60px) 0 0;display:flex}

@media (max-width:560px){
	/* 縦積み。前後・一覧を上から順に、細い罫線で仕切って読みやすく。
	   長いタイトルは省略せず折り返す。前後が無い側は空要素（高さ0）で消える。 */
	.col-nav{flex-direction:column;align-items:stretch;gap:0;padding-top:0}
	.col-nav a{padding:15px 2px;border-bottom:1px solid var(--keisen)}
	.col-nav-prev,.col-nav-next{max-width:none;justify-content:flex-start;text-align:left;align-items:flex-start}
	.col-nav-prev span,.col-nav-next span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.7}
	.col-nav-prev i,.col-nav-next i{flex:0 0 auto;margin-top:.2em}
	/* 「舞妓体験へ」は最後に、中央寄せで置く（前後の導線と役割を分ける） */
	.col-nav-index{order:3;align-self:stretch;justify-content:center;text-align:center;
	 padding:16px 2px 0;border-bottom:0}
}