@charset "UTF-8";

/* ================================================================
   ORIGINAL CALENDAR | column.css
   お役立ちコラム専用CSS（base.css の後に読み込む）
   ----------------------------------------------------------------
   - 読み込むのはコラム系ページ（column/ 以下）だけ。
     Header / Footer / .c-btn 等の共通パーツは base.css にある。
   - 色 / 余白 / フォントサイズ / 角丸 / トランジションは base.css の変数を使い、
     直値を書かない（1px罫線・aspect-ratio・grid列数など構造上必要な値は除く）。
   - 並びは top.css と同じく「セクション本体 → そのセクションのメディアクエリ」。

   目次
     1. コラム系共通のローカルトークン
     2. Column Archive（記事一覧・ページネーション）
     3. Column Article（記事詳細の本文フォーマット）
     4. Column Related（関連記事・一覧へ戻る）
     5. Column Contact（一覧・記事詳細で共有するお問い合わせカード）
   ================================================================ */


/* ============================================================
   1. コラム系共通のローカルトークン
   ------------------------------------------------------------
   一覧・記事詳細のどちらでも同じ罫線幅を使うため、両方の
   ルート要素に持たせる（記事詳細では関連記事カードが .p-column__card
   を再利用するので、変数が届かないと罫線が消えてしまう）。
   ============================================================ */
.p-column,
.p-column-article,
.p-column-related,
.p-column-contact {
	--column-hairline: 1px;   /* 細罫線 */
	--column-accent: 3px;     /* 引用の左ラインなど、罫線より太いアクセント */
}


/* ============================================================
   2. Column Archive（column/index.html）
   ------------------------------------------------------------
   お役立ちコラムの記事一覧。記事カードは SP 1列 / Tablet 2列 / PC 3列。
   見出しはTOPと同じ .c-section-title を再利用している。
   ============================================================ */
.p-column {
	padding-block: var(--section-space);
	background-color: var(--color-bg-main);
}


/* ---- 記事一覧 ------------------------------------------------ */
.p-column__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl) var(--space-lg);
}

/* カードを行の高さいっぱいに伸ばし、横に並ぶカードの下端を揃える */
.p-column__item {
	display: flex;
}

/* カード全体がリンク。文字色は継承のままにして、hoverは枠線だけ静かに変える */
.p-column__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: var(--column-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
	overflow: hidden;
	transition: border-color var(--transition-base);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06) ;
}

.p-column__card:hover {
	transition: 0.3s ease-out;
    opacity: 0.7;
}

/* アイキャッチは全カード同じ比率。素材の比率が違っても16:9で揃える
   （比率は img 側に持たせる。figure に置くと素材の縦横比が優先されてしまう） */
.p-column__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
}

/* 本文側。flex:1 で、抜粋の行数が違ってもカード下端が揃う */
.p-column__body {
	flex: 1;
	padding: var(--space-md);
}

.p-column__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-sm);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
}

.p-column__category {
	color: var(--color-primary);
}

.p-column__date {
	flex: 0 0 auto;
	color: var(--color-text-sub);
}

.p-column__title {
	margin-top: var(--space-xs);
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: 1.5;
	color: var(--color-text-main);
	text-wrap: pretty;
}

.p-column__excerpt {
	margin-top: var(--space-xs);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}


/* ---- ページネーション ---------------------------------------- */
/* ボタンより弱いUIにする。現在ページだけブランドカラーで塗る */
.p-column__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-xl);
}

.p-column__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding-inline: var(--space-xs);
	border: var(--column-hairline) solid var(--color-border);
	border-radius: var(--radius-sm);
	background-color: var(--color-white);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-tight);
	color: var(--color-text-main);
	transition: border-color var(--transition-base), color var(--transition-base);
}

.p-column__page:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	transition: 0.3s ease-out;
}

.p-column__page--current {
	border-color: var(--color-primary);
	background-color: var(--color-primary);
	color: var(--color-white);
}

.p-column__page--next {
	padding-inline: var(--space-md);
}


/* ============================================================
   Column Archive : Tablet（min-width 768px）
   ============================================================ */
@media (min-width: 768px) {

	.p-column__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* ============================================================
   Column Archive : PC（min-width 1024px）
   ============================================================ */
@media (min-width: 1024px) {

	.p-column__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* ============================================================
   3. Column Article（column/〇〇/index.html：記事詳細）
   ------------------------------------------------------------
   SP / Tablet / PC いずれも1カラム。本文幅は --article-content-width の
   1箇所だけで管理する。
   本文の体裁は .p-column-article__body 配下の素のタグ（h2 / h3 / p /
   ul / ol / table / blockquote / figure）に当てているため、WPの
   ブロックエディタで書いた本文がそのまま同じ見た目になる。
   例外は横スクロールさせたい表のみで、そこだけラッパーを使う。
   ============================================================ */
.p-column-article {
	--article-content-width: 800px;

	padding-bottom: var(--section-space);
}

/* 本文幅のコンテナ。.l-container と同じく gutter を max-width に足し込む */
.p-column-article__inner {
	width: 100%;
	max-width: calc(var(--article-content-width) + var(--container-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}


/* ---- パンくず ------------------------------------------------ */
.p-column-article__breadcrumb {
	padding-block: var(--space-sm);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
	color: var(--color-text-sub);
}

.p-column-article__breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-xs);
}

.p-column-article__breadcrumb-item + .p-column-article__breadcrumb-item::before {
	content: "\003E";   /* > */
	margin-right: var(--space-xs);
	color: var(--color-border);
}


/* ---- 記事ヘッダー（公開日 → H1 → アイキャッチ） -------------- */
.p-column-article__header {
	padding-top: var(--space-lg);
}

.p-column-article__date {
	display: block;
	font-size: var(--font-size-xs);
	line-height: var(--line-height-tight);
	color: var(--color-text-sub);
}

.p-column-article__title {
	margin-top: var(--space-sm);
	font-family: var(--font-family-serif);
	font-size: var(--font-size-xl);
	font-weight: 500;
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
	text-wrap: pretty;
}

.p-column-article__eyecatch {
	margin-top: var(--space-lg);
}

/* 素材の比率が違っても記事間で見え方を揃える。角丸・影は最小限 */
.p-column-article__eyecatch img {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-md);
}


/* ---- リード文 ------------------------------------------------ */
/* 囲みにはせず、本文よりわずかに強い文字色・行間だけで差をつける */
.p-column-article__lead {
	margin-top: var(--space-lg);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-main);
}


/* ---- 目次 ---------------------------------------------------- */
.p-column-article__toc {
	margin-top: var(--space-xl);
	padding: var(--space-md);
	border: var(--column-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-white);
}

.p-column-article__toc-title {
	font-family: var(--font-family-base);
	font-size: var(--font-size-lg);
	font-weight: 700;
	line-height: var(--line-height-tight);
	color: var(--color-text-main);
}

/* 番号は本文のh2と同じくカウンタで振る。手打ちしないので、
   セクションを増減しても目次と見出しの番号がずれない */
.p-column-article__toc-list {
	counter-reset: article-toc;
	margin-top: var(--space-sm);
}

.p-column-article__toc-item {
	display: flex;
	gap: var(--space-xs);
	counter-increment: article-toc;
}

.p-column-article__toc-item + .p-column-article__toc-item {
	margin-top: var(--space-xs);
}

.p-column-article__toc-item::before {
	content: "\003E";   /* > */
	flex: 0 0 auto;
	font-size: var(--font-size-md);
	line-height: var(--line-height-heading);
	color: var(--color-primary);
}

.p-column-article__toc-link {
	display: inline-flex;
	gap: var(--space-xs);
	font-size: var(--font-size-md);
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
}

.p-column-article__toc-link::before {
	content: counter(article-toc, decimal-leading-zero) ".";
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--color-primary);
}


/* ---- 本文（WPの the_content() が入る範囲） -------------------- */
.p-column-article__body {
	counter-reset: article-section;
	margin-top: var(--space-2xl);
}

/* 要素の縦リズム。個別指定が無い要素はすべてこの余白になる */
.p-column-article__body > * + * {
	margin-top: var(--space-md);
}

/* 見出しは素の h2。「01.」等の番号はCSSのカウンタで自動採番するので、
   記事を書くときに番号を手入力する必要がない（順番の入れ替えにも追従する） */
.p-column-article__body h2 {
	counter-increment: article-section;
	margin-top: var(--space-2xl);
	padding-bottom: var(--space-sm);
	border-bottom: var(--column-hairline) solid var(--color-border);
	font-family: var(--font-family-serif);
	font-size: var(--font-size-xl);
	font-weight: 500;
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
}

.p-column-article__body h2::before {
	content: counter(article-section, decimal-leading-zero) ".";
	margin-right: 0.5em;
	font-weight: 700;
	color: var(--color-primary);
}

.p-column-article__body h3 {
	margin-top: var(--space-xl);
	font-family: var(--font-family-serif);
	font-size: var(--font-size-lg);
	font-weight: 500;
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
}

.p-column-article__body p {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-main);
}

.p-column-article__body a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- 本文：リスト ---- */
/* ブロックエディタの「リスト」をそのまま入れても同じ体裁になるよう、
   ul / ol の素のタグに当てる */
.p-column-article__body ul,
.p-column-article__body ol {
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
}

.p-column-article__body li + li {
	margin-top: var(--space-xs);
}

.p-column-article__body ul > li {
	position: relative;
	padding-left: var(--space-md);
}

.p-column-article__body ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(var(--line-height-base) * 0.5em);
	width: var(--space-xs);
	height: var(--space-xs);
	transform: translateY(-50%);
	border-radius: 50%;
	background-color: var(--color-primary);
}

.p-column-article__body ol {
	list-style: decimal;
	padding-left: var(--space-md);
}

.p-column-article__body ol > li::marker {
	color: var(--color-primary);
}

/* ---- 本文：表 ---- */
/* 記事本文幅いっぱい。見出しセルだけ薄く塗り、影・大きな角丸は使わない */
.p-column-article__body table {
	width: 100%;
	border: var(--column-hairline) solid var(--color-border);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-heading);
}

.p-column-article__body th,
.p-column-article__body td {
	padding: var(--space-xs);
	border: var(--column-hairline) solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

/* 見出しセルは極薄の紫地＋ブランドカラー文字。本文セルは白地 */
.p-column-article__body th {
	background-color: #ecebff;
	font-weight: 500;
	color: var(--color-primary);
}

.p-column-article__body td {
	background-color: var(--color-white);
}

/* 横長の表だけ、この中で横スクロールさせる（ページ全体は横に動かさない） */
.p-column-article__table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.p-column-article__table-scroll table {
	min-width: 40rem;   /* これ未満の幅ではセルを潰さずスクロールさせる */
}

/* ---- 本文：引用 ---- */
.p-column-article__body blockquote {
	padding: var(--space-sm);
	border-left: var(--column-accent) solid var(--color-primary);
	background-color: var(--color-white);
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06) ;
}

.p-column-article__body blockquote > * + * {
	margin-top:     margin-top: 0.5em;;
}

/* 引用文は明朝体。出典（cite）は本文と同じゴシックのまま */
.p-column-article__body blockquote p {
	font-family: var(--font-family-serif);
}

.p-column-article__body cite {
	display: block;
	font-size: var(--font-size-xs);
	font-style: normal;
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

/* ---- 本文：図版 ---- */
.p-column-article__body figure img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-md);
}

.p-column-article__body figcaption {
	margin-top: var(--space-xs);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

/* ---- 本文：補足ボックス ---- */
/* 幅は指定せず、本文と同じ幅のまま流す */
.p-column-article__point {
	padding: var(--space-md);
	border: var(--column-hairline) solid var(--color-border);
	border-radius: var(--radius-md);
	background-color: var(--color-primary-soft);
}

.p-column-article__point-label {
	display: block;
	margin-bottom: var(--space-xs);
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-primary);
}

/* 注釈 */
.p-column-article__note {
	font-size: var(--font-size-xs);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}


/* ============================================================
   Column Article : Tablet / PC（min-width 768px）
   本文は1カラムのまま。文字サイズと余白だけ広げる
   ============================================================ */
@media (min-width: 768px) {

	.p-column-article__breadcrumb {
		padding-block: var(--space-md);
	}

	.p-column-article__title {
		font-size: var(--font-size-2xl);
	}

	.p-column-article__lead {
		font-size: var(--font-size-md);
	}

	.p-column-article__toc {
		padding: var(--space-lg);
	}

	.p-column-article__body p,
	.p-column-article__body ul,
	.p-column-article__body ol,
	.p-column-article__body table {
		font-size: var(--font-size-md);
	}

	.p-column-article__body h2 {
		font-size: var(--font-size-2xl);
	}

	.p-column-article__body h3 {
		font-size: var(--font-size-xl);
	}

	.p-column-article__body th,
	.p-column-article__body td {
		padding: var(--space-xs) var(--space-sm);
	}

	.p-column-article__point {
		padding: var(--space-lg);
	}
}


/* ============================================================
   4. Column Related（関連記事・一覧へ戻る）
   ------------------------------------------------------------
   カードは一覧ページの .p-column__card 一式をそのまま再利用する。
   （抜粋・カテゴリを置かないだけで、CSSは共通）
   ============================================================ */
.p-column-related {
	padding-bottom: var(--section-space);
}

.p-column-related__title {
	margin-bottom: var(--space-xl);
	text-align: center;
}

.p-column-related__foot {
	display: flex;
	justify-content: center;
	margin-top: var(--space-xl);
}

.p-column-related__back::after {
	content: "\2192";   /* → */
	line-height: 1;
}


/* ============================================================
   5. Column Contact（一覧・記事詳細で共有）
   ------------------------------------------------------------
   TOPの .p-final-contact と同じ文言・トーンの別バリエーション。
   背景を全幅に敷かず、コンテンツ幅に収めた生成りのカードとして置く。
   一覧ページと記事詳細ページで同じHTMLをそのまま使う想定なので、
   セクション側は下余白だけを持ち、見た目はすべてカード側に持たせている。
   ============================================================ */
.p-column-contact {
	/* 上の余白は直前セクション（.p-column / .p-column-article）の padding-bottom が担当する */
	padding-bottom: var(--section-space);
}

.p-column-contact__card {
	display: grid;
	gap: var(--space-lg);
	padding: var(--space-lg) var(--space-md);
	border-radius: var(--radius-md);
	background-color: var(--color-bg-sub);
}

/* ラベル・見出し・本文のサイズはTOPのContactと同じ値を使う */
.p-column-contact__label {
	display: block;
	margin-bottom: var(--space-xs);
	font-family: var(--font-family-base);
	font-size: var(--font-size-section-label);
	font-weight: 700;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-wide);
	color: var(--color-primary);
}

.p-column-contact__title {
	font-size: var(--font-size-xl);
	line-height: var(--line-height-heading);
	color: var(--color-text-main);
}

.p-column-contact__text {
	margin-top: var(--space-md);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-base);
	color: var(--color-text-sub);
}

/* 写真を出さない SP / Tablet では、<br> と text-wrap による短い行を作らず
   コピーを段落幅いっぱいまで流す（<br> は2カラムになるPCで復活させる） */
.p-column-contact__title br,
.p-column-contact__text br {
	display: none;
}

/* .c-btn の色・高さ・角丸は base.css 側。ここでは幅と矢印だけ */
.p-column-contact__button {
	width: 100%;
	max-width: 25rem;
	margin-top: var(--space-lg);
}

.p-column-contact__button::after {
	content: "\2192";   /* → */
	line-height: 1;
}

/* 写真は2カラムになるPCのみ。SP / Tablet では非表示 */
.p-column-contact__media {
	display: none;
}

.p-column-contact__media img {
	width: 100%;
	aspect-ratio: 3 / 2;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-md);
}


/* ============================================================
   Column Contact : Tablet（min-width 768px）
   ============================================================ */
@media (min-width: 768px) {

	.p-column-contact__card {
		padding: var(--space-xl);
	}

	.p-column-contact__title {
		font-size: var(--font-size-2xl);
	}

	.p-column-contact__text {
		font-size: var(--font-size-md);
	}

	.p-column-contact__button {
		width: auto;
	}
}


/* ============================================================
   Column Contact : PC（min-width 1024px）
   カード内を「左コピー＋CTA ／ 右写真」の2カラムにする
   ============================================================ */
@media (min-width: 1024px) {

	.p-column-contact__card {
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		align-items: center;
		gap: var(--space-xl);
	}

	.p-column-contact__media {
		display: block;
	}

	/* 2カラムになり1行が短くなるので、意図した位置で改行させる */
	.p-column-contact__title br,
	.p-column-contact__text br {
		display: inline;
	}

	.p-column-contact__title {
		text-wrap: pretty;
	}
}