@charset "UTF-8";

/* ==================================================
   コラム記事本文（microCMSリッチエディタの出力）
   既存サイトのトンマナ（Shippori Mincho / alika-accent #8C7B6C）に合わせています
   ================================================== */

.column-body {
	color: #4b5563;
	line-height: 2;
	font-family: 'Shippori Mincho', serif;
}

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

/* ---- 見出し ---- */
.column-body h2 {
	font-size: 1.5rem;
	line-height: 1.6;
	color: #2C2C2C;
	font-weight: 500;
	margin-top: 3.5em;
	padding-bottom: 0.6em;
	border-bottom: 1px solid #e5e7eb;
	scroll-margin-top: 120px; /* 固定ヘッダー分のオフセット（JSが効かない場合の保険） */
}

.column-body h3 {
	font-size: 1.175rem;
	line-height: 1.7;
	color: #2C2C2C;
	font-weight: 500;
	margin-top: 2.75em;
	padding-left: 0.75em;
	border-left: 2px solid #8C7B6C;
	scroll-margin-top: 120px;
}

/* H4以下は通常使いません（エディタ側で H2・H3 のみ選択可にしています）。
   過去記事や貼り付けで混入した場合に本文と区別がつくよう、最低限の指定を残します。 */
.column-body h4,
.column-body h5,
.column-body h6 {
	font-size: 1.05rem;
	color: #2C2C2C;
	font-weight: 500;
	margin-top: 2.25em;
	scroll-margin-top: 120px;
}

.column-body h5,
.column-body h6 {
	font-size: 1rem;
}

.column-body h2:first-child,
.column-body h3:first-child {
	margin-top: 0;
}

/* ---- 本文 ---- */
.column-body p {
	text-align: justify;
}

.column-body strong,
.column-body b {
	font-weight: 600;
	color: #2C2C2C;
	background: linear-gradient(transparent 65%, rgba(140, 123, 108, 0.18) 65%);
}

.column-body em {
	font-style: normal;
	color: #8C7B6C;
}

/* ---- リンク ---- */
.column-body a {
	color: #8C7B6C;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: opacity 0.3s;
}

.column-body a:hover {
	opacity: 0.7;
}

/* ---- リスト ---- */
.column-body ul,
.column-body ol {
	padding-left: 1.5em;
}

.column-body ul > li {
	list-style: none;
	position: relative;
	padding-left: 1.2em;
}

.column-body ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 6px;
	height: 1px;
	background: #8C7B6C;
}

.column-body ol {
	list-style: decimal;
}

.column-body li + li {
	margin-top: 0.6em;
}

.column-body li > ul,
.column-body li > ol {
	margin-top: 0.6em;
}

/* ---- 画像 ---- */
.column-body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

.column-body figure {
	margin-top: 2.5em;
}

.column-body figcaption {
	margin-top: 0.75em;
	font-size: 0.8rem;
	color: #9ca3af;
	text-align: center;
	font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
}

/* ---- 引用 ---- */
.column-body blockquote {
	position: relative;
	padding: 1.5em 1.75em;
	background: #F4F4F4;
	color: #6b7280;
	font-size: 0.95rem;
}

.column-body blockquote > * + * {
	margin-top: 1em;
}

/* ---- 表 ---- */
.column-body .column-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.column-body table {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-size: 0.9rem;
	font-family: 'Jost', 'Zen Kaku Gothic New', sans-serif;
}

.column-body th,
.column-body td {
	border: 1px solid #e5e7eb;
	padding: 0.85em 1em;
	text-align: left;
	line-height: 1.8;
}

.column-body th {
	background: #F4F4F4;
	color: #2C2C2C;
	font-weight: 500;
	white-space: nowrap;
}

/* ---- 区切り線 ---- */
.column-body hr {
	border: 0;
	border-top: 1px solid #e5e7eb;
	margin-top: 3em;
}

/* ---- コード ---- */
.column-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.875em;
	background: #F4F4F4;
	padding: 0.15em 0.4em;
}

.column-body pre {
	background: #2C2C2C;
	color: #f4f4f4;
	padding: 1.25em 1.5em;
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.7;
}

.column-body pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

/* ==================================================
   目次
   ================================================== */

.column-toc ol {
	counter-reset: toc;
}

/* 番号は H2 の項目にだけ振る（H3 を数えると 01・04・07 のように飛んでしまう） */
.column-toc .toc-lv2 {
	counter-increment: toc;
}

.column-toc .toc-lv2 > a::before {
	content: counter(toc, decimal-leading-zero);
	color: #8C7B6C;
	font-family: 'Jost', sans-serif;
	font-size: 0.75rem;
	margin-right: 0.85em;
}

/* ==================================================
   本文の折り返し（長いURL等でのはみ出し防止）
   ================================================== */

.column-body,
.column-toc {
	overflow-wrap: break-word;
	word-break: break-word;
}