/* =========================================================
   AERO TOOLS
   CPT 共通（カスタム投稿タイプ）
   ---------------------------------------------------------
   対象：コラム・メディア掲載情報などの
   - 一覧        /{cpt}/
   - 分類一覧    /{cpt}/category/.../
   - 記事ページ
   テンプレート：template-parts/cpt-*.php
   投稿タイプごとに変えたい場合は body の class
   （.single-media_post / .post-type-archive-column など）で書き分ける
========================================================= */

/* =========================================================
   COMMON
========================================================= */

.cpt_category_area,
.cpt_category_intro,
#cpt_single,
#cpt_single * {
	box-sizing: border-box;
}


/* =========================================================
   ARCHIVE / CATEGORY
   CATEGORY NAV
========================================================= */

.cpt_category_area {
	margin: 0 0 50px;
}

.cpt_category_label {
	margin: 0 0 14px;
	color: #858267;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
}

.cpt_category_nav {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 50px;
}

.cpt_category_area .cpt_category_nav {
	margin-bottom: 0;
}

.cpt_category_nav a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 100px;
	padding: 12px 22px;
	border: 1px solid #8b8869;
	background: #fff;
	color: #5f5c45;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition:
		background-color .25s ease,
		color .25s ease,
		border-color .25s ease;
}

.cpt_category_nav a:hover,
.cpt_category_nav a.current {
	border-color: #8b8869;
	background: #8b8869;
	color: #fff;
}

.cpt_category_nav a.current {
	font-weight: 700;
}

.cpt_category_nav a.current::before {
	content: "";
	width: 5px;
	height: 5px;
	margin-right: 8px;
	background: currentColor;
}


/* =========================================================
   ARCHIVE / CATEGORY
   CATEGORY INTRO
========================================================= */

.cpt_category_intro {
	position: relative;
	margin: 0 0 50px;
	padding: 28px 32px 28px 36px;
	border-left: 4px solid #858267;
	background: #f5f4f1;
}

.cpt_category_intro_label {
	margin: 0 0 12px;
	color: #858267;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
}

.cpt_category_intro_text {
	color: #241f1c;
	font-size: 15px;
	line-height: 1.9;
}

.cpt_category_intro_text p {
	margin: 0;
}

.cpt_category_intro_text p + p {
	margin-top: 12px;
}


/* =========================================================
   SINGLE
   KV
========================================================= */

.cpt_single_kv .wrap_kv {
	max-width: 1200px;
}

.cpt_single_kv_title {
	max-width: 1100px;
	font-size: 40px;
	line-height: 1.45;
	letter-spacing: .02em;
}


/* =========================================================
   SINGLE
   ARTICLE WRAPPER / META
========================================================= */

#cpt_single {
	padding: 70px 0 100px;
}

#cpt_single .wrap_cpt_single {
	max-width: 900px;
}

#cpt_single .cpt_single_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin-bottom: 36px;
	padding-bottom: 18px;
	border-bottom: 1px solid #deddd7;
}

#cpt_single .cpt_single_cat {
	margin: 0;
}

#cpt_single .cpt_single_cat .cat {
	position: relative;
	display: inline-block;
	padding-left: 14px;
	color: #77745c;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
}

#cpt_single .cpt_single_cat .cat::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 6px;
	height: 6px;
	background: #858267;
	transform: translateY(-50%);
}

#cpt_single .cpt_single_date {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	color: #999;
	font-size: 12px;
}


/* =========================================================
   SINGLE
   THUMBNAIL
========================================================= */

#cpt_single .cpt_single_thumb {
	margin: 0 0 50px;
}

#cpt_single .cpt_single_thumb img {
	display: block;
	width: 100%;
	height: auto;
}


/* =========================================================
   SINGLE
   BASIC TYPOGRAPHY
========================================================= */

#cpt_single .cpt_single_content {
	color: #211b18;
	font-size: 16px;
	line-height: 2;
}

#cpt_single .cpt_single_content > p {
	margin: 0 0 24px;
}

#cpt_single .cpt_single_content strong {
	font-weight: 700;
}


/* =========================================================
   SINGLE
   H2
========================================================= */

#cpt_single .cpt_single_content h2 {
	position: relative;
	margin: 80px 0 30px;
	padding: 20px 24px 20px 28px;
	background: #18110e;
	color: #fff;
	font-size: 27px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .01em;
}

#cpt_single .cpt_single_content h2::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: #858267;
}


/* =========================================================
   SINGLE
   H3
   ---------------------------------------------------------
   番号付き見出し・手順見出しに不要な四角マーカーが
   付かないよう、H3はマーカーなしを標準にする。
========================================================= */

#cpt_single .cpt_single_content h3 {
	position: relative;
	margin: 50px 0 20px;
	padding: 0 0 12px;
	border-bottom: 1px solid #d9d7ce;
	color: #211b18;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.6;
}

#cpt_single .cpt_single_content h3::before {
	content: none !important;
	display: none !important;
}
/*
 * 万一H3がリスト項目内に入った場合も、
 * li側の独自マーカーを表示しない。
 */
#cpt_single .cpt_single_content li:has(> h3) {
	padding-left: 0;
}

#cpt_single .cpt_single_content li:has(> h3)::before {
	content: none !important;
	display: none !important;
}


/* =========================================================
   SINGLE
   LIST
   ---------------------------------------------------------
   既存テーマの list-style:none の影響を完全に避けるため、
   マーカーは ::before で独自描画する。
========================================================= */

#cpt_single .cpt_single_content ul,
#cpt_single .cpt_single_content ol {
	margin: 24px 0 32px;
	padding: 0;
	list-style: none !important;
}

#cpt_single .cpt_single_content ul > li,
#cpt_single .cpt_single_content ol > li {
	position: relative;
	display: block;
	margin: 0 0 10px;
	list-style: none !important;
	line-height: 1.8;
}

#cpt_single .cpt_single_content ul > li {
	padding-left: 1.6em;
}

#cpt_single .cpt_single_content ul > li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: .25em;
	width: 6px;
	height: 6px;
	background: #858267;
}

#cpt_single .cpt_single_content ol {
	counter-reset: column-ordered-list;
}

#cpt_single .cpt_single_content ol > li {
	counter-increment: column-ordered-list;
	padding-left: 2em;
}

#cpt_single .cpt_single_content ol > li::before {
	content: counter(column-ordered-list) ".";
	position: absolute;
	top: 0;
	left: 0;
	color: #858267;
	font-weight: 700;
}


/* =========================================================
   SINGLE
   BODY LINKS
========================================================= */

#cpt_single .cpt_single_content > p a {
	color: #69664f;
	text-decoration: underline;
	text-underline-offset: 4px;
}

#cpt_single .cpt_single_content > p a:hover {
	color: #18110e;
}


/* =========================================================
   SINGLE
   AUTHOR
========================================================= */

#cpt_single .cpt_single_author {
	margin-top: 70px;
	padding: 24px 0;
	border-top: 1px solid #deddd7;
	border-bottom: 1px solid #deddd7;
	color: #777;
	font-size: 13px;
}

#cpt_single .cpt_single_author p {
	margin: 0;
}


/* =========================================================
   SINGLE
   VIDEO（「動画URL」：本文の後・記事の横幅いっぱい・16:9）
   template-parts/cpt-video.php
========================================================= */

#cpt_single .cpt_single_video {
	margin-top: 50px;
}

#cpt_single .cpt_single_video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* YouTube ショート（縦長）：中央寄せ・最大幅 360px */
#cpt_single .cpt_single_video--short {
	max-width: 360px;
	margin-right: auto;
	margin-left: auto;
}

#cpt_single .cpt_single_video--short iframe {
	aspect-ratio: 9 / 16;
}


/* =========================================================
   SINGLE
   RELATED PRODUCTS（関連商品 → 製品ページの購入ボタン一覧へ）
   template-parts/related-products.php
========================================================= */

#cpt_single .related_products {
	margin-top: 70px;
	padding-top: 40px;
	border-top: 1px solid #deddd7;
}

#cpt_single .related_products_label {
	margin: 0 0 8px;
	color: #858267;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1;
}

#cpt_single .related_products_title {
	margin: 0 0 24px;
	color: #211b18;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
}

#cpt_single .related_products_list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#cpt_single .related_products_link {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 100%;
	min-height: 84px;
	padding: 12px 55px 12px 12px;
	border: 1px solid #18110e;
	background: #18110e;
	color: #fff;
	text-decoration: none;
	transition:
		background-color .25s ease,
		border-color .25s ease;
}

#cpt_single .related_products_link::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 22px;
	font-size: 18px;
	transform: translateY(-50%);
	transition: transform .25s ease;
}

#cpt_single .related_products_link:hover {
	border-color: #858267;
	background: #858267;
}

#cpt_single .related_products_link:hover::after {
	transform: translate(5px, -50%);
}

/* サムネイル：製品ページの商品画像スライダー 1 枚目 */
#cpt_single .related_products_thumb {
	flex: 0 0 72px;
	width: 72px;
	height: 72px;
	overflow: hidden;
	background: #fff;
}

#cpt_single .related_products_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

#cpt_single .related_products_body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

#cpt_single .related_products_name {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
}

#cpt_single .related_products_action {
	font-size: 12px;
	letter-spacing: .05em;
	opacity: .8;
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

#cpt_single a:focus-visible,
.cpt_category_nav a:focus-visible {
	outline: 2px solid #858267;
	outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media screen and (max-width: 900px) {

	.cpt_single_kv_title {
		font-size: 34px;
	}

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media screen and (max-width: 767px) {

	/* CATEGORY NAV */
	.cpt_category_area {
		margin-bottom: 35px;
	}

	.cpt_category_label {
		font-size: 11px;
	}

	.cpt_category_nav {
		flex-wrap: nowrap;
		gap: 8px;
		margin-bottom: 35px;
		padding-bottom: 8px;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.cpt_category_area .cpt_category_nav {
		margin-bottom: 0;
	}

	.cpt_category_nav::-webkit-scrollbar {
		display: none;
	}

	.cpt_category_nav a {
		flex: 0 0 auto;
		min-width: auto;
		padding: 11px 18px;
		font-size: 13px;
		white-space: nowrap;
	}

	/* CATEGORY INTRO */
	.cpt_category_intro {
		margin-bottom: 35px;
		padding: 22px 20px 22px 24px;
	}

	.cpt_category_intro_label {
		margin-bottom: 10px;
		font-size: 11px;
	}

	.cpt_category_intro_text {
		font-size: 14px;
		line-height: 1.8;
	}

	/* SINGLE KV */
	.cpt_single_kv_title {
		font-size: 25px;
		line-height: 1.5;
	}

	/* ARTICLE */
	#cpt_single {
		padding: 45px 0 70px;
	}

	#cpt_single .cpt_single_content {
		font-size: 15px;
		line-height: 1.9;
	}

	#cpt_single .cpt_single_header {
		display: block;
		margin-bottom: 28px;
	}

	#cpt_single .cpt_single_cat {
		margin-bottom: 12px;
	}

	/* H2 */
	#cpt_single .cpt_single_content h2 {
		margin-top: 58px;
		padding: 16px 17px 16px 20px;
		font-size: 21px;
		line-height: 1.5;
	}

	#cpt_single .cpt_single_content h2::before {
		width: 4px;
	}

	/* H3 */
	#cpt_single .cpt_single_content h3 {
		margin-top: 40px;
		padding-left: 0;
		font-size: 18px;
	}

	/* LIST */
	#cpt_single .cpt_single_content ul,
	#cpt_single .cpt_single_content ol {
		margin: 20px 0 28px;
	}

	/* AUTHOR */
	#cpt_single .cpt_single_author {
		margin-top: 55px;
	}

	/* VIDEO */
	#cpt_single .cpt_single_video {
		margin-top: 36px;
	}

	/* RELATED PRODUCTS */
	#cpt_single .related_products {
		margin-top: 55px;
		padding-top: 32px;
	}

	#cpt_single .related_products_title {
		font-size: 18px;
	}

	#cpt_single .related_products_list {
		grid-template-columns: 1fr;
	}

	#cpt_single .related_products_link {
		min-height: 72px;
		gap: 14px;
	}

	#cpt_single .related_products_thumb {
		flex-basis: 60px;
		width: 60px;
		height: 60px;
	}

}