/**
 * p-column-single
 * コラム記事詳細ページのページ固有スタイル。新規機能につき手書き。
 *
 * 本文のタイポグラフィは共通の .an-richText（assets/css/base.css）に任せる。
 * ここではヘッダー部・レイアウト（本文＋目次の2カラム）・余白だけを定義する。
 */
.p-column-single {
	/* an-box 併用のため align-items を明示（inherit する center だと本文が中央寄せの幅で崩れる） */
	width: 840px;
	max-width: 100%;
	margin: 0 auto;
	padding: 24px 40px 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}
.p-column-single__header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 8px 0 28px;
}
.p-column-single__cat {
	pointer-events: none;
}
.p-column-single__title {
	font-family: var(--an-font-base);
	font-weight: 700;
	font-size: 30px;
	line-height: 1.5;
	color: var(--an-color-text);
}
.p-column-single__meta {
	/* an-box 併用のため flex-direction を明示（base.css の .an-box は既定 column） */
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	font-family: var(--an-font-base);
	font-size: 13px;
	color: var(--an-color-text);
	opacity: 0.55;
}
.p-column-single__eyecatch {
	/* an-box 併用のため display を明示（子img側でwidth/height:100%指定済みのため
	   実害は薄いが、念のため揃えておく） */
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: var(--an-color-surface);
}
.p-column-single__eyecatch-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-column-single__layout {
	/* an-box 併用のため flex-direction を明示（base.css の .an-box は既定 column）。
	   840px以下で column-reverse に切り替える（下部の @media 参照）。 */
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	margin-top: 32px;
}
.p-column-single__body {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	line-height: 2;
}
/* 目次リンクでジャンプした際、固定ヘッダー(80px)の下に見出しが隠れないようにする */
.p-column-single__body h2,
.p-column-single__body h3 {
	scroll-margin-top: 96px;
}

/*
 * .an-richText の見出しは元々ブラウザ既定に近い簡素な指定しか無いため、
 * 参考サイト（shwat.jp/ultra/article-design）の「見出し・マーカー線での装飾」という
 * 方針に合わせ、記事本文だけに効くマーカー付き見出しを追加する
 * （.an-richText 自体は他ページでも使うので手を入れない）。
 */
.p-column-single__body h2 {
	font-size: 24px !important;
	font-weight: 700;
	color: var(--an-color-text);
	margin: 48px 0 20px !important;
	padding-left: 16px;
	border-left: 6px solid var(--an-color-brand);
	line-height: 1.5 !important;
}
.p-column-single__body h3 {
	font-size: 19px !important;
	font-weight: 700;
	color: var(--an-color-text);
	margin: 36px 0 16px !important;
	padding-bottom: 8px;
	background: linear-gradient(transparent 70%, var(--an-color-surface-green) 70%);
	display: inline-block;
}
.p-column-single__body p {
	margin: 0 0 20px !important;
}
.p-column-single__body img {
	border-radius: 8px;
	margin: 24px 0;
}
.p-column-single__body a {
	color: var(--an-color-link);
	text-decoration: underline;
}
.p-column-single__body ul,
.p-column-single__body ol {
	margin: 0 0 20px !important;
	padding-left: 1.6em !important;
}
.p-column-single__body li {
	list-style: revert !important;
	margin-bottom: 8px !important;
}
.p-column-single__credit {
	/* an-box 併用のため display を明示（inherit すると中央寄せの flex-column になる） */
	display: block;
	margin-top: 28px;
	padding: 16px 20px;
	background: var(--an-color-surface);
	border-radius: 8px;
}
.p-column-single__credit-text {
	font-family: var(--an-font-base);
	font-size: 12.5px;
	color: var(--an-color-text);
	opacity: 0.6;
}
.p-column-single__back {
	/*
	 * 下側の余白が無く、フッターとボタンが密着していた（ユーザーのスクリーンショットで発覚）。
	 * 求人詳細ページの同種の「戻る」ボタン部（.p-job__sec3、元サイト由来）に
	 * padding-bottom:80px の実績があるため、それに合わせて統一した。
	 */
	width: 1280px;
	max-width: 100%;
	margin: 0 auto;
	padding: 24px 40px 80px;
	/* an-box 併用のため flex-direction/align-items を明示（base.css の .an-box は既定 column/center） */
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.p-column-single__layout {
		flex-direction: column-reverse;
		gap: 24px;
	}
}

@media (max-width: 840px) {
	.p-column-single {
		padding: 24px 24px 0;
	}
	.p-column-single__title {
		font-size: 24px;
	}
}