@charset "UTF-8";
/*=======================================================
コラム本文(ブロック)の装飾

公開ページ(.bl-column-body)とブロックエディタ(.editor-styles-wrapper)の両方で読む。
エディタは iframe でテーマの他の CSS が届かないため、色はここで直接持つ(faq.css の変数に頼らない)。
ブロックスタイル(is-style-column-*)の登録は include/column.php。
=======================================================*/
:root {
	--column-accent: #ff6a00;
	--column-accent-weak: #ffe4d1;
	--column-accent-bg: #fff6f0;
	--column-text: #3e4145;
	--column-sub: #666;
	--column-line: #e4e4e4;
	--column-marker: #ffe4d1;
}

:is(.bl-column-body, .editor-styles-wrapper) {
	font-size: 15px;
	line-height: 2;
	letter-spacing: 0.04em;
	color: var(--column-text);
	overflow-wrap: anywhere;
}

.bl-column-body > * + * {
	margin-top: 1.4em;
}

/*-------------------------------------------------------
見出し
-------------------------------------------------------*/
/* H2: 黒文字 + 太いグレーの下線。左端だけブランド色(参考: mens-rinx.jp) */
:is(.bl-column-body, .editor-styles-wrapper) h2 {
	margin-top: 3.2em;
	margin-bottom: 1.4em;
	padding-bottom: 14px;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.06em;
	border-bottom: 4px solid #e8e8e8;
	border-image: linear-gradient(90deg, var(--column-accent) 0 64px, #e8e8e8 64px) 1;
	/* 目次から飛んだときに固定ヘッダーの下へ潜らないようにする */
	scroll-margin-top: 100px;
}

/* H3: 左にグレーの縦線 */
:is(.bl-column-body, .editor-styles-wrapper) h3 {
	margin-top: 2.6em;
	padding: 6px 0 6px 14px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.05em;
	border-left: 5px solid #e3e3e3;
}

/* H4: 先頭に丸 */
:is(.bl-column-body, .editor-styles-wrapper) h4 {
	position: relative;
	margin-top: 1.8em;
	padding-left: 20px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.5;
}

:is(.bl-column-body, .editor-styles-wrapper) h4::before {
	position: absolute;
	top: 0.5em;
	left: 0;
	width: 10px;
	height: 10px;
	content: "";
	background: var(--column-accent);
	border-radius: 50%;
}

/*-------------------------------------------------------
文字の装飾
-------------------------------------------------------*/
/* 太字は淡いブランド色のマーカー */
:is(.bl-column-body, .editor-styles-wrapper) strong {
	font-weight: 700;
	background: linear-gradient(transparent 62%, var(--column-marker) 62%);
}

:is(.bl-column-body, .editor-styles-wrapper) a:not(.wp-block-button__link) {
	color: var(--column-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* 文字色(赤など)を付けたときは太字にして目立たせる */
:is(.bl-column-body, .editor-styles-wrapper) mark.has-inline-color {
	font-weight: 700;
}

/*-------------------------------------------------------
リスト
-------------------------------------------------------*/
:is(.bl-column-body, .editor-styles-wrapper) ul:not([class*="is-style-column"]) {
	padding-left: 1.4em;
	list-style: none;
}

:is(.bl-column-body, .editor-styles-wrapper) ul:not([class*="is-style-column"]) > li {
	position: relative;
}

:is(.bl-column-body, .editor-styles-wrapper) ul:not([class*="is-style-column"]) > li::before {
	position: absolute;
	top: 0.75em;
	left: -1em;
	width: 7px;
	height: 7px;
	content: "";
	background: var(--column-accent);
	border-radius: 50%;
}

:is(.bl-column-body, .editor-styles-wrapper) ol:not([class*="is-style-column"]) {
	padding-left: 1.6em;
	list-style: decimal;
}

:is(.bl-column-body, .editor-styles-wrapper) li + li {
	margin-top: 0.4em;
}

/* チェック: 枠付きで、行頭にチェックマーク */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-check {
	padding: 18px 20px;
	list-style: none;
	background: var(--column-accent-bg);
	border: 1px solid var(--column-accent-weak);
	border-radius: 8px;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-check > li {
	position: relative;
	padding-left: 30px;
	font-weight: 700;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-check > li::before {
	position: absolute;
	top: 0.35em;
	left: 0;
	width: 20px;
	height: 20px;
	content: "";
	background: var(--column-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
	border-radius: 50%;
}

/* 番号ボックス: 1項目ずつ箱に入れ、丸数字を付ける */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-number {
	padding: 0;
	list-style: none;
	counter-reset: column-num;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-number > li {
	position: relative;
	padding: 14px 16px 14px 56px;
	background: #fff;
	border: 1px solid var(--column-line);
	border-radius: 8px;
	counter-increment: column-num;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-number > li + li {
	margin-top: 10px;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-number > li::before {
	position: absolute;
	top: 50%;
	left: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-family: Roboto, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	content: counter(column-num);
	background: var(--column-accent);
	border-radius: 50%;
	transform: translateY(-50%);
}

/*-------------------------------------------------------
段落のブロックスタイル
-------------------------------------------------------*/
:is(.bl-column-body, .editor-styles-wrapper) :is(.is-style-column-point, .is-style-column-caution, .is-style-column-lead) {
	position: relative;
	padding: 20px 22px;
	border-radius: 8px;
}

/* ポイント: 左上にラベル */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-point {
	margin-top: 2em;
	padding-top: 26px;
	background: var(--column-accent-bg);
	border: 2px solid var(--column-accent);
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-point::before {
	position: absolute;
	top: -13px;
	left: 16px;
	padding: 0 12px;
	font-size: 13px;
	font-weight: 700;
	line-height: 24px;
	color: #fff;
	letter-spacing: 0.1em;
	content: "POINT";
	background: var(--column-accent);
	border-radius: 999px;
}

/* 注意 */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-caution {
	padding-left: 56px;
	background: #fff8f8;
	border: 1px solid #f3c6c6;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-caution::before {
	position: absolute;
	top: 20px;
	left: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	content: "!";
	background: #d64545;
	border-radius: 50%;
}

/* 囲み(要約): 結論・まとめを本文から一段上げる */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-lead {
	font-weight: 500;
	background: #fff;
	border: 1px solid var(--column-line);
	box-shadow: 0 2px 8px #0000000f;
}

/* 吹き出し(編集部): 左にアイコン、右に吹き出し */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-bubble {
	position: relative;
	min-height: 72px;
	margin-left: 88px;
	padding: 16px 20px;
	background: var(--column-accent-bg);
	border: 1px solid var(--column-accent-weak);
	border-radius: 12px;
}

/* アイコン */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-bubble::before {
	position: absolute;
	top: 0;
	left: -88px;
	width: 68px;
	height: 68px;
	content: "";
	background: url("../images/column/editor-avatar.svg") center / cover no-repeat;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px var(--column-accent-weak);
}

/* しっぽ */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-bubble::after {
	position: absolute;
	top: 24px;
	left: -9px;
	width: 16px;
	height: 16px;
	content: "";
	background: var(--column-accent-bg);
	border-bottom: 1px solid var(--column-accent-weak);
	border-left: 1px solid var(--column-accent-weak);
	transform: rotate(45deg);
}

/*-------------------------------------------------------
表
-------------------------------------------------------*/
:is(.bl-column-body, .editor-styles-wrapper) .wp-block-table {
	overflow-x: auto;
	border-radius: 8px;
	box-shadow: 0 0 0 1px var(--column-line);
}

:is(.bl-column-body, .editor-styles-wrapper) table {
	width: 100%;
	font-size: 15px;
	line-height: 1.6;
	border-collapse: collapse;
}

:is(.bl-column-body, .editor-styles-wrapper) th,
:is(.bl-column-body, .editor-styles-wrapper) td {
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
	border: 0;
	border-bottom: 1px solid var(--column-line);
}

:is(.bl-column-body, .editor-styles-wrapper) tr:last-child > * {
	border-bottom: 0;
}

:is(.bl-column-body, .editor-styles-wrapper) thead th {
	font-weight: 700;
	color: var(--column-accent);
	background: var(--column-accent-bg);
	border-bottom: 2px solid var(--column-accent);
}

:is(.bl-column-body, .editor-styles-wrapper) tbody th {
	width: 26%;
	font-weight: 700;
	background: #fafafa;
}

/* 比較表: 2列目以降を見比べやすく、交互に淡く塗る */
:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-compare tbody tr:nth-child(even) td {
	background: #fcfcfc;
}

:is(.bl-column-body, .editor-styles-wrapper) .is-style-column-compare thead th:not(:first-child) {
	text-align: center;
}

:is(.bl-column-body, .editor-styles-wrapper) figcaption {
	margin-top: 6px;
	font-size: 13px;
	color: var(--column-sub);
	text-align: center;
}

/*-------------------------------------------------------
その他のブロック
-------------------------------------------------------*/
:is(.bl-column-body, .editor-styles-wrapper) img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* 写真: 見出しのすぐ下に置く前提で、横幅いっぱい・3:2 に揃える */
:is(.bl-column-body, .editor-styles-wrapper) .wp-block-image.is-style-column-photo img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

:is(.bl-column-body, .editor-styles-wrapper) blockquote {
	position: relative;
	padding: 18px 20px 18px 52px;
	color: var(--column-sub);
	background: #f7f7f7;
	border-radius: 8px;
}

:is(.bl-column-body, .editor-styles-wrapper) blockquote::before {
	position: absolute;
	top: 6px;
	left: 16px;
	font-family: Georgia, serif;
	font-size: 44px;
	line-height: 1;
	color: #cfcfcf;
	content: "“";
}

:is(.bl-column-body, .editor-styles-wrapper) hr {
	border: 0;
	border-top: 1px dashed #d8d8d8;
}

:is(.bl-column-body, .editor-styles-wrapper) details {
	padding: 14px 18px;
	background: #fff;
	border: 1px solid var(--column-line);
	border-radius: 8px;
}

:is(.bl-column-body, .editor-styles-wrapper) summary {
	font-weight: 700;
	cursor: pointer;
}

/* ボタン: 黒の丸型(参考: mens-rinx.jp) */
:is(.bl-column-body, .editor-styles-wrapper) .wp-block-buttons {
	justify-content: center;
	margin-top: 2.4em;
	margin-bottom: 2.4em;
}

:is(.bl-column-body, .editor-styles-wrapper) .wp-block-button__link {
	position: relative;
	display: inline-block;
	min-width: 320px;
	padding: 18px 56px 18px 40px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-align: center;
	letter-spacing: 0.08em;
	text-decoration: none;
	background: #111;
	border-radius: 999px;
	transition: opacity 0.2s;
}

:is(.bl-column-body, .editor-styles-wrapper) .wp-block-button__link::after {
	position: absolute;
	top: 50%;
	right: 24px;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	content: "+";
	transform: translateY(-52%);
}

@media (hover: hover) and (pointer: fine) {
	.bl-column-body .wp-block-button__link:hover {
		opacity: 0.8;
	}
}

/*-------------------------------------------------------
SP
-------------------------------------------------------*/
@media screen and (max-width: 750px) {

	.bl-column-body {
		font-size: 14px;
		line-height: 1.95;
	}

	.bl-column-body h2 {
		font-size: 18px;
		scroll-margin-top: 72px;
	}

	.bl-column-body h3 {
		padding-left: 10px;
		font-size: 16px;
		border-left-width: 4px;
	}

	.bl-column-body h4 {
		font-size: 16px;
	}

	.bl-column-body table {
		font-size: 13px;
	}

	.bl-column-body th,
	.bl-column-body td {
		padding: 10px;
	}

	.bl-column-body .is-style-column-bubble {
		margin-left: 64px;
		padding: 12px 14px;
	}

	.bl-column-body .is-style-column-bubble::before {
		left: -64px;
		width: 52px;
		height: 52px;
	}

	.bl-column-body .is-style-column-bubble::after {
		top: 18px;
	}

	.bl-column-body :is(.is-style-column-point, .is-style-column-lead) {
		padding: 18px 14px 14px;
	}

	.bl-column-body .is-style-column-caution {
		padding: 14px 14px 14px 48px;
	}

	.bl-column-body .is-style-column-caution::before {
		top: 14px;
		left: 14px;
	}

	.bl-column-body .wp-block-button__link {
		min-width: 0;
		width: 100%;
		font-size: 16px;
	}
}