/*
===============================================================================
 本文内の段組（2 カラム）部品 — NEWS 詳細（投稿）の本文・管理画面のエディタで共有
 ---------------------------------------------------------------------------
 【2026-10-21 追加】編集者が本文に貼り付けて使う段組。管理画面のエディタの「テンプレート」
 （TinyMCE Templates）から挿入する HTML は、次のクラス構成にする。

   <div class="cols cols--70-30">
     <div class="cols__main"> …テキスト… </div>
     <div class="cols__side"> …画像… </div>
   </div>

 PC（768px 以上）: 左 70%（テキスト）／右 30%（画像）。間隔 32px は幅に含めず、残りを 7:3 に配分する。
 SP（767px 以下）: 1 列。上にテキスト、下に画像（本文カラムの幅いっぱい）。DOM の順序どおりに積む。
 比率を足すときは、下の「比率」ブロックに `.cols--XX-YY` を 1 本足すだけでよい（SP の挙動は共通）。
 クラスは `.cols` 配下でスコープしており、他の要素・他ページには影響しない。
===============================================================================
*/
.cols {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	align-items: start;
	margin-top: 30px;
	margin-bottom: 30px;
}

/* 比率（PC）。minmax(0, …) で、長い単語や画像が列を押し広げないようにする */
@media (min-width: 768px) {
	.cols {
		gap: 32px;
	}
	.cols--70-30 {
		grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	}
}

/* 各セルの先頭・末尾の余白を消し、段組の上下だけで間隔を決める */
.cols__main > :first-child,
.cols__side > :first-child {
	margin-top: 0;
}
.cols__main > :last-child,
.cols__side > :last-child {
	margin-bottom: 0;
}

/* 画像: セル（PC は 30% の列、SP は本文の幅）に収める。縦長の画像が画面1枚分に伸びないよう、高さに上限を付け、
   上限に掛かったときは中央に寄せる（縦横比は保つ）。エディタが付ける width/height 属性・
   alignleft 等のクラスの影響を受けないようにする */
.cols__side img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 280px;
	margin: 0 auto;
	float: none;
}
.cols__side p,
.cols__side figure,
.cols__side .wp-caption {
	width: 100%;
	max-width: 100%;
	margin: 0;
}
.cols__side .wp-caption-text {
	margin-top: 8px;
	font-size: 1.3rem;
	line-height: 1.6;
}