/*
 * コラム記事デザイン用CSS(単体で完結する自己完結型スタイルシート)
 *
 * 【使い方】
 * このファイルの中身をまるごと、サイトの「追加CSS」
 * (外観 > カスタマイズ > 追加CSS。または利用しているテーマ/プラグインの
 * カスタムCSS欄)に貼り付けてください。他のテーマのCSS変数には一切
 * 依存していないので、このファイル単体で見た目が完成します。
 *
 * 本文は page-column-article.php / page-column-index.php が
 * カスタムフィールド(inc/meta-boxes.php)のデータから自動的に
 * このクラス名を使ったHTMLを組み立てます。手書きHTMLは不要です。
 */

.colart{
	--colart-gold: #9b7b3d;
	--colart-gold-deep: #7a5f2c;
	--colart-gold-light: #dccca4;
	--colart-bg: #f7f4ef;
	--colart-line: #e6ddcf;
	font-family:"Yu Mincho","Hiragino Mincho ProN","YuMincho",serif;
	color:#333;
	background:#fff;
}

.colart *{ box-sizing:border-box; }

.colart-wrap{
	max-width:1100px;
	margin:0 auto;
	padding:0 24px;
}

/* ===== ヒーロー(タイトル・キャッチ・日付) ===== */
.colart-hero{
	padding:100px 0 60px;
	background:linear-gradient(rgba(20,18,14,.55),rgba(20,18,14,.72));
	background-size:cover;
	background-position:center;
	color:#fff;
	position:relative;
}
.colart-hero::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:0;
	height:4px;
	background:linear-gradient(to right, var(--colart-gold), transparent 70%);
}
.colart-eyebrow{
	display:inline-block;
	color:#e3cd8a;
	letter-spacing:.35em;
	text-transform:uppercase;
	font-size:0.78rem;
	margin:0 0 20px;
}
.colart-hero h1{
	margin:0 0 16px;
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-size:2.6rem;
	line-height:1.6;
	font-weight:400;
	letter-spacing:.06em;
	text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.colart-catch{
	margin:0 0 22px;
	font-size:1.05rem;
	color:#f0ece3;
	letter-spacing:.06em;
}
.colart-date{
	margin:0;
	font-size:0.85rem;
	color:#cfc6b4;
	letter-spacing:.05em;
}
.colart-date span{ color: var(--colart-gold); margin-left:4px; }

.colart-lead{
	max-width:760px;
	margin:0;
	line-height:1.9;
	color:#f0ece3;
}

/* ===== リード文(記事冒頭の導入文。タイトル・キャッチと左端を揃える) ===== */
.colart-intro{
	max-width:820px;
	margin:44px 0 36px;
}
.colart-intro p{
	margin:0 0 1.4em;
	font-size:1.02rem;
	line-height:1.75;
	letter-spacing:.05em;
	color:#3c3c3c;
}
.colart-intro p:last-child{ margin-bottom:0; }

/* ===== パンくず(サイト共通ヘッダー側で表示。ここでは念のため最低限のみ) ===== */
.colart-breadcrumb{
	padding:24px 0;
	color:#777;
	font-size:0.85rem;
}
.colart-breadcrumb a{ color:#777; text-decoration:underline; }

/* ===== 見出し共通 ===== */
.colart h2{
	display:flex;
	align-items:center;
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-size:1.6rem;
	font-weight:400;
	letter-spacing:.06em;
	line-height:1.6;
	margin:0 0 22px;
}
.colart h3{ font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }

/* 「記事」ブロックの連番(01, 02...)。大きめの数字+右にゴールドの縦罫線を挟んで
   見出しテキストと横並びに表示する */
.colart-section-no{
	display:inline-block;
	margin-right:22px;
	padding-right:22px;
	border-right:1px solid var(--colart-gold);
	font-family:"Yu Mincho","Georgia",serif;
	font-weight:300;
	font-size:3rem;
	line-height:1;
	letter-spacing:.02em;
	color: var(--colart-gold-light);
}

/* ===== 目次(本文の流れとは切り離したパネル扱い) ===== */
.colart-toc{
	position:relative;
	background: var(--colart-bg);
	border:1px solid var(--colart-line);
	padding:26px 28px 28px;
	margin:36px 0;
}
.colart-toc::before{
	content:"";
	position:absolute;
	top:0; left:0;
	width:100%; height:3px;
	background: var(--colart-gold);
}
.colart-toc h2{
	font-size:1rem;
	margin-bottom:14px;
	gap:0;
}
.colart-toc ol{
	margin:0;
	padding:0;
	list-style:none;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	column-gap:32px;
	row-gap:6px;
	counter-reset:toc;
}
.colart-toc li{
	counter-increment:toc;
	line-height:1.8;
	font-size:0.9rem;
}
.colart-toc li::before{
	content:counter(toc, decimal-leading-zero) ".";
	color: var(--colart-gold);
	margin-right:8px;
	font-family:"Yu Mincho",serif;
}
.colart-toc a{ color:#333; text-decoration:none; }
.colart-toc a:hover{ color: var(--colart-gold); text-decoration:underline; }

/* ===== 本文エリア共通 =====
   目次(.colart-toc)が無い設定のときでも、直前の要素(リード文など)との
   余白が確保されるよう、本文エリア自体にも上マージンを持たせておく
   (通常のブロック要素同士なので、目次がある場合はそちらの余白と
   相殺されて二重には広がらない) */
.colart-body{ margin-top:36px; }

/* ===== 本文セクション共通 ===== */
.colart-section{
	margin:70px 0;
	padding-top:50px;
	border-top:1px solid var(--colart-line);
}
.colart-section:first-child{
	margin-top:0;
	padding-top:0;
	border-top:none;
}

/* ===== ワードプレス標準のブロックエディタ本文(the_content) ===== */
.colart-native-content{ max-width:820px; margin-left:auto; margin-right:auto; }
.colart-native-content p{
	margin:0 0 1.3em;
	font-size:1rem;
	line-height:2.0;
	color:#3c3c3c;
}
.colart-native-content h2,
.colart-native-content h3,
.colart-native-content h4{
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-weight:400;
	color:#333;
	margin:1.6em 0 0.8em;
}
.colart-native-content h2{ font-size:1.4rem; }
.colart-native-content h3{ font-size:1.2rem; }
.colart-native-content h4{ font-size:1.05rem; }
.colart-native-content ul,
.colart-native-content ol{
	margin:0 0 1.3em;
	padding-left:1.4em;
	font-size:1rem;
	line-height:1.9;
	color:#3c3c3c;
}
.colart-native-content li{ margin-bottom:0.4em; }
.colart-native-content blockquote{
	margin:0 0 1.3em;
	padding:14px 24px;
	background:#faf7f0;
	border-left:4px solid var(--colart-gold);
	color:#555;
}
.colart-native-content img{ max-width:100%; height:auto; border-radius:8px; }
.colart-native-content a{ color: var(--colart-gold-deep); }
.colart-native-content > *:last-child{ margin-bottom:0; }

/* ネイティブ本文用:定義表(項目名+説明)。<table class="native-table"> */
.colart table.native-table{
	width:100%;
	border-collapse:collapse;
	margin:0 0 1.3em;
	border-top:2px solid var(--colart-gold);
	border-bottom:2px solid var(--colart-gold);
}
.colart table.native-table th{
	width:28%;
	background:#f8f5ef;
	color: var(--colart-gold-deep);
	font-weight:600;
	text-align:left;
	vertical-align:middle;
	padding:16px 20px;
	border-bottom:1px solid var(--colart-line);
	font-size:0.95rem;
}
.colart table.native-table td{
	background:#fff;
	padding:16px 20px;
	border-bottom:1px solid var(--colart-line);
	font-size:0.92rem;
	line-height:1.9;
	color:#3c3c3c;
	vertical-align:middle;
}
.colart table.native-table tr:last-child th,
.colart table.native-table tr:last-child td{ border-bottom:none; }
.colart table.native-table td.native-table__num{
	width:64px;
	text-align:center;
	vertical-align:middle;
	background:#f8f5ef;
	font-family:"Yu Mincho","Georgia",serif;
	font-weight:700;
	font-size:1.05rem;
	color: var(--colart-gold);
}
.colart table.native-table img{
	display:block;
	max-width:100%;
	height:auto;
	margin:0 0 1.3em;
}
/* 表の上に置く説明画像は表に対してセンター揃え。<img class="native-table-image"> */
.colart .native-table-image{
	display:block;
	max-width:100%;
	height:auto;
	margin:0 auto 1.3em;
}

/* ネイティブ本文用:白背景+金枠のボックスを1項目ずつ独立して並べる。
   <div class="native-box"><div class="native-box__item">... */
.colart .native-box{
	margin:0 0 1.3em;
}
.colart .native-box__item{
	margin-bottom:16px;
	padding:24px 28px;
	background:#FFFFFF;
	border:1px solid #E8E1D2;
	transition:box-shadow .3s ease;
}
.colart .native-box__item:hover{ box-shadow:0 8px 20px rgba(0,0,0,.05); }
.colart .native-box__item:last-child{ margin-bottom:0; }
.colart .native-box__item h3{
	margin:0 0 10px;
	font-size:1.1rem;
	font-weight:400;
	color:#333;
}
.colart .native-box__item h3::before{ content:"・"; color: var(--colart-gold); }
.colart .native-box__item p{ margin:0; color:#6F6A63; }

/* ネイティブ本文用:クリーム背景+ゴールド文字の注記パネル(単発の案内文)。
   <div class="native-note"> */
.colart .native-note{
	margin:0 0 1.3em;
	padding:24px 28px;
	background:#FAF8F3;
	border:1px solid #E8E1D2;
	border-left:2px solid #C9A961;
}
.colart .native-note h3{
	margin:0 0 10px;
	font-size:1.1rem;
	font-weight:700;
	color:#333;
}
.colart .native-note p{
	margin:0;
	line-height:1.9;
	color:#6F6A63;
}

@media(max-width:768px){
	.colart table.native-table,
	.colart table.native-table tbody,
	.colart table.native-table tr,
	.colart table.native-table th,
	.colart table.native-table td{ display:block; width:100%; }
	.colart table.native-table tr{ margin-bottom:12px; }
	.colart table.native-table th{ border-bottom:none; padding-bottom:6px; }
	.colart table.native-table td{ padding-top:0; }
	.colart table.native-table td.native-table__num{
		width:auto;
		text-align:left;
		padding:8px 20px;
	}
	.colart .native-box__item{ padding:18px 20px; }
}

.colart-point{
	background:#faf7f0;
	border-left:4px solid var(--colart-gold);
	padding:20px 24px;
	margin-top:26px;
	border-radius:0 4px 4px 0;
}
.colart-point strong{
	color: var(--colart-gold);
	font-weight:700;
	letter-spacing:.05em;
}
.colart-point p{ margin:0; font-size:1rem; line-height:1.9; }

/* ===== 記事ブロック本文 + 画像レイアウト ===== */
.colart-text-wrap p{
	margin:0 0 1.3em;
	font-size:1rem;
	line-height:2.0;
	color:#3c3c3c;
}
.colart-text-wrap p:last-child{ margin-bottom:0; }

.colart-text-media{
	display:flex;
	gap:36px;
	align-items:flex-start;
}
.colart-text-media--right{ flex-direction:row-reverse; }
.colart-text-media--bottom{ flex-direction:column; }

.colart-text-media__image{
	flex:0 0 38%;
}
.colart-text-media--bottom .colart-text-media__image{
	flex:none;
	width:100%;
	order:2;
	margin-top:8px;
}
/* チェック(is-full)がない限り、エリア(左右配置なら列幅・本文の下なら全幅)の中で
   実寸センター表示にする */
.colart-text-media__image img{
	width:auto;
	max-width:100%;
	height:auto;
	display:block;
	margin:0 auto;
	border-radius:8px;
	box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.colart-text-media__image.is-full img{
	width:100%;
	margin:0;
}
.colart-text-media__body{ flex:1; min-width:0; }

/* ===== 特徴カードなどのグリッド ===== */
.colart-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:20px;
}
.colart-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding:30px 20px;
	background:#fff;
	border:1px solid var(--colart-line);
	transition:border-color .2s ease;
}
.colart-card:hover{ border-color: var(--colart-gold); }
.colart-card h3{
	margin:0 0 14px;
	font-size:0.95rem;
	font-weight:600;
	line-height:1.6;
	color: var(--colart-gold-deep);
}
.colart-card p{
	margin:0;
	padding-top:14px;
	border-top:1px solid var(--colart-line);
	line-height:1.9;
	font-size:0.85rem;
	color:#555;
	text-align:left;
}

/* ===== 比較表 ===== */
.colart-table-wrap{ overflow-x:auto; }
.colart-section table{
	width:100%;
	min-width:480px;
	border-collapse:collapse;
	border-top:2px solid var(--colart-gold);
	border-bottom:2px solid var(--colart-gold);
}
.colart-section th,
.colart-section td{
	padding:14px 18px;
	border-bottom:1px solid var(--colart-line);
	text-align:left;
	font-size:0.92rem;
}
.colart-section tr:last-child th,
.colart-section tr:last-child td{ border-bottom:none; }
.colart-section thead th,
.colart-section tr:first-child th{
	background:#f8f5ef;
	color: var(--colart-gold-deep);
	font-weight:600;
	border-bottom:1px solid var(--colart-line);
}
.colart-section td{ background:#fff; }

/* ===== FAQ(details/summary) ===== */
.colart-faq-list details{
	background:#fcfbf8;
	border:1px solid var(--colart-line);
	margin:0 0 12px;
	transition:box-shadow .3s ease;
}
.colart-faq-list details:hover{ box-shadow:0 8px 20px rgba(0,0,0,.05); }
.colart-faq-list details:last-child{ margin-bottom:0; }
.colart-faq-list summary{
	cursor:pointer;
	list-style:none;
	padding:18px 46px 18px 22px;
	position:relative;
	line-height:1.6;
	letter-spacing:.03em;
}
.colart-faq-list summary::-webkit-details-marker{ display:none; }
.colart-faq-list summary::after{
	content:"+";
	position:absolute;
	right:22px;
	top:50%;
	transform:translateY(-50%);
	color: var(--colart-gold);
	font-size:1.4rem;
	line-height:1;
	transition:transform .3s ease;
}
.colart-faq-list details[open] summary::after{ transform:translateY(-50%) rotate(45deg); }
.colart-faq-list details p{
	margin:0;
	padding:20px 22px;
	border-top:1px solid var(--colart-line);
	line-height:1.9;
	color:#555;
	font-size:0.92rem;
	background:#fff;
}

/* ===== 画像のみ(チェックがない限り実寸センター表示) ===== */
.colart-image-block{ text-align:center; }
.colart-image-block img{
	width:auto;
	max-width:100%;
	height:auto;
	display:inline-block;
	border-radius:8px;
	box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.colart-image-block.is-full img{
	width:100%;
	display:block;
}

/* ===== おすすめ商品 ===== */
.colart-products{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
}
.colart-prod{
	display:flex;
	flex-direction:column;
	border:1px solid var(--colart-line);
	border-radius:8px;
	overflow:hidden;
	background:#fff;
	text-decoration:none;
	color:#333;
	transition:transform .2s ease, box-shadow .2s ease;
}
.colart-prod:hover{
	transform:translateY(-4px);
	box-shadow:0 14px 28px rgba(0,0,0,.1);
}
.colart-prod__thumb{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	background:#f3f0ea;
	overflow:hidden;
}
.colart-prod__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.colart-prod__name{
	display:block;
	padding:14px 14px 4px;
	font-size:0.92rem;
	line-height:1.6;
}
.colart-prod__desc{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	padding:0 14px;
	margin-bottom:6px;
	font-size:0.8rem;
	line-height:1.6;
	color:#777;
}
.colart-prod__price{
	display:block;
	padding:0 14px 16px;
	font-weight:700;
	color: var(--colart-gold-deep);
	font-size:0.92rem;
}

.colart-btn{
	display:inline-block;
	margin-top:26px;
	background: var(--colart-gold);
	color:#fff;
	padding:14px 34px;
	text-decoration:none;
	border-radius:4px;
	letter-spacing:.05em;
	transition:background .2s ease;
}

/* ===== 商品グループ(グループ見出し+商品カード) ===== */
.colart-group{ margin:0 0 44px; }
.colart-group:last-child{ margin-bottom:0; }
.colart-group__head{
	display:flex;
	align-items:baseline;
	gap:14px;
	margin:0 0 18px;
	padding-bottom:10px;
	border-bottom:1px solid var(--colart-line);
}
.colart-group__head h3{
	margin:0;
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-size:1.1rem;
	font-weight:400;
	color: var(--colart-gold-deep);
}
.colart-group__desc{ font-size:0.85rem; color:#888; }
.colart-group__products{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
}
.colart-group__card{
	display:flex;
	flex-direction:column;
	border:1px solid var(--colart-line);
	border-radius:8px;
	overflow:hidden;
	background:#fff;
	transition:transform .2s ease, box-shadow .2s ease;
}
.colart-group__card:hover{
	transform:translateY(-4px);
	box-shadow:0 14px 28px rgba(0,0,0,.1);
}
.colart-group__thumb{
	display:block;
	width:100%;
	aspect-ratio:1/1;
	background:#f3f0ea;
	overflow:hidden;
}
.colart-group__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.colart-group__name{
	margin:0;
	padding:14px 14px 4px;
	font-size:0.92rem;
	line-height:1.6;
}
.colart-group__desc{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	overflow:hidden;
	margin:0 0 6px;
	padding:0 14px;
	font-size:0.8rem;
	line-height:1.6;
	color:#777;
}
.colart-group__price{
	margin:0;
	padding:0 14px;
	font-weight:700;
	color: var(--colart-gold-deep);
	font-size:0.92rem;
}
.colart-group__btn{
	display:block;
	margin:14px;
	padding:8px 0;
	text-align:center;
	border:1px solid var(--colart-gold);
	color: var(--colart-gold-deep);
	text-decoration:none;
	font-size:0.85rem;
	border-radius:4px;
	transition:background .2s ease, color .2s ease;
}
.colart-group__btn:hover{ background: var(--colart-gold); color:#fff; }
.colart-group__all{ text-align:center; margin-top:20px; }

/* ===== CTAバナー ===== */
.colart-cta{
	margin:0;
	padding:60px 40px;
	text-align:center;
	background:#2b2620 center/cover no-repeat;
	color:#fff;
}
.colart-cta h2{
	margin:0 0 14px;
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-size:1.5rem;
	font-weight:400;
	color:#fff;
}
.colart-cta p{
	margin:0 auto 24px;
	max-width:560px;
	font-size:0.95rem;
	line-height:1.9;
	color:#e6e0d4;
}
.colart-cta__btn{
	display:inline-block;
	background: var(--colart-gold);
	color:#fff;
	padding:14px 40px;
	text-decoration:none;
	border-radius:4px;
	letter-spacing:.05em;
	transition:background .2s ease;
}
.colart-cta__btn:hover{ background: var(--colart-gold-deep); }
.colart-btn:hover{ background: var(--colart-gold-deep); text-decoration:none; }

/* ===== ポイントまとめ(チェックリスト風ボックス) ===== */
.colart-section:has(.colart-points){
	background: var(--colart-bg);
	border:1px solid var(--colart-line);
	padding:30px 34px;
}
.colart-points{
	margin:0;
	padding:0;
	list-style:none;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:10px 24px;
}
.colart-points li{
	position:relative;
	padding-left:28px;
	font-size:1.1rem;
	line-height:1.7;
	color:#333;
}
.colart-points li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:0;
	color: var(--colart-gold);
	font-weight:700;
}

/* ===== コラムTOP:カテゴリー絞り込み(page-column-index.php) ===== */
.colart-index-filter{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin:36px 0 0;
}
.colart-index-filter__item{
	display:inline-block;
	padding:6px 16px;
	border:1px solid var(--colart-line);
	border-radius:20px;
	color:#555;
	font-size:0.85rem;
	text-decoration:none;
	transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.colart-index-filter__item:hover{
	border-color: var(--colart-gold);
	color: var(--colart-gold-deep);
}
.colart-index-filter__item.is-active{
	background: var(--colart-gold);
	border-color: var(--colart-gold);
	color:#fff;
}

/* ===== コラムTOP:記事一覧カード(page-column-index.php) ===== */
.colart-index-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:24px;
	margin:36px 0;
}
.colart-index-card{
	display:flex;
	flex-direction:column;
	background:#fff;
	border:1px solid var(--colart-line);
	border-radius:10px;
	overflow:hidden;
	text-decoration:none;
	color:#333;
	box-shadow:0 6px 16px rgba(0,0,0,.04);
	transition:transform .2s ease, box-shadow .2s ease;
}
.colart-index-card:hover{
	transform:translateY(-3px);
	box-shadow:0 12px 24px rgba(0,0,0,.08);
}
.colart-index-card__thumb{
	width:100%;
	aspect-ratio:16/9;
	background:#eee;
	overflow:hidden;
}
.colart-index-card__thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}
.colart-index-card__noimg{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	color:#999;
	font-size:0.8rem;
	letter-spacing:.1em;
}
.colart-index-card__body{
	padding:16px;
}
.colart-index-card__cat{
	margin:0 0 6px;
	font-size:0.75rem;
	letter-spacing:.05em;
	color: var(--colart-gold-deep);
}
.colart-index-card__title{
	margin:0 0 8px;
	font-family:"Yu Mincho","Hiragino Mincho ProN",serif;
	font-size:1.05rem;
	line-height:1.6;
	color:#333;
}
.colart-index-card__excerpt{
	margin:0;
	font-size:0.85rem;
	line-height:1.7;
	color:#777;
}

/* ===== 監修者フッター(本文の流れとは切り離したパネル扱い) ===== */
.colart-author{
	position:relative;
	margin:60px 0 20px;
	background: var(--colart-bg);
	border:1px solid var(--colart-line);
	padding:26px 28px;
}
.colart-author::before{
	content:"";
	position:absolute;
	top:0; left:0;
	width:100%; height:3px;
	background: var(--colart-gold);
}
.colart-author h2{ font-size:1rem; margin-bottom:10px; gap:0; }
.colart-author p{ margin:0; color:#555; }

/* ===== レスポンシブ ===== */
@media(max-width:900px){
	.colart-grid{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px){
	.colart-grid,
	.colart-products,
	.colart-index-grid,
	.colart-group__products,
	.colart-points{ grid-template-columns:1fr; }
	.colart-section:has(.colart-points){ padding:22px 20px; }
	.colart-group__head{ flex-direction:column; align-items:flex-start; gap:4px; }
	.colart-cta{ padding:40px 20px; }
	.colart-hero{ padding:70px 0 40px; }
	.colart-hero h1{ font-size:1.5rem; }
	.colart-toc{ padding:18px 20px 20px; }
	.colart-toc ol{ grid-template-columns:1fr; }
	.colart-section-no{ font-size:2rem; margin-right:14px; padding-right:14px; }
	.colart-text-media,
	.colart-text-media--right{
		flex-direction:column;
	}
	.colart-text-media__image{
		flex:none;
		width:100%;
		order:-1;
		margin-bottom:20px;
	}
}