/*
Theme Name: Indeyherbs Theme
Author: 開発担当者
Version: 1.1.0
*/

/* ==========================================================================
   Design system — ColorMe / THREE 系（カラーミーショップと同期）
   ========================================================================== */

:root {
	/* 確定パレット（カラーミー / 記事テーマ同期） */
	--wp--preset--color--main-text: #2b3230;
	--wp--preset--color--bg-base: #faf6f1;
	--wp--preset--color--accent: #00a99d;
	--wp--preset--color--brand: #00a99d;
	--wp--preset--color--button: #5d705c;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--border: #e0dcd7;

	--font-serif: "Shippori Mincho", "YuMincho", "Yu Mincho", serif;
	--font-sans: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;

	--ih-content-max: 42rem;
	--ih-wide-max: 72rem;
	--ih-radius: 0;
	--ih-border-width: 1px;
	--ih-space-section: clamp(3rem, 8vw, 5.5rem);
	--ih-space-block: clamp(1.75rem, 4vw, 2.75rem);
	--ih-space-major: clamp(4rem, 10vw, 6rem);

	/* グローバルヘッダー／フッター（カラーミー同期エイリアス） */
	--color-brand: #00a99d;
	--color-bg-base: #faf6f1;
	--color-white: #ffffff;
	--color-text-main: #2b3230;
	--color-border: #e0dcd7;
	--header-h: 56px;

	/* COMPANY_PROFILE §13 グローバルデザイントークン（カラーミー top.css と同期） */
	--gr-main:   #5d705c; /* モスグリーン — 見出し・主CTA */
	--gr-accent: #d99e8f; /* サーモンピンク — ジャーナル深掘りリンクのみ */
	--gr-text:   #4a4a4a; /* 本文ダークグレー */
	--gr-sub:    #3f5240; /* 濃い緑系補助面 */
	--journal-accent: #d99e8f; /* top.css .p-top-journal の --journal-accent と同値 */
}

html {
	background-color: var(--wp--preset--color--bg-base);
}

/* --------------------------------------------------------------------------
   ベース — 背景・角丸排除・装飾の原則
   -------------------------------------------------------------------------- */

body,
.site {
	background-color: var(--wp--preset--color--bg-base);
	color: var(--wp--preset--color--main-text);
}

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-main {
	flex: 1 0 auto;
}

/* 角丸の排除（テーマ表示範囲） */
.site img,
.site picture,
.site video,
.site iframe,
.site button,
.site input,
.site textarea,
.site select,
.site .wp-block-button__link,
.site .wp-element-button,
.site .single-editorial__hero-img,
.site .archive-card__media {
	border-radius: 0;
}

/* 影の排除 */
.site * {
	box-shadow: none;
}

/* リンクの下線は原則なし（ホバーは色のみ） */
.site a {
	text-decoration: none;
}

.site a:hover,
.site a:focus-visible {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   タイポグラフィ — .entry-title / .entry-content
   -------------------------------------------------------------------------- */

.entry-title {
	color: var(--wp--preset--color--main-text);
	font-family: var(--font-serif);
	font-size: clamp(24px, 2.5vw, 28px);
	font-weight: 400;
	letter-spacing: 0.15em;
	line-height: 1.4;
	margin: 0 0 var(--ih-space-major);
}

.entry-content p {
	color: var(--wp--preset--color--main-text);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.8;
	margin-bottom: 1.5em;
}

.entry-content > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   ボタン — カラーミー埋め込み / リンクボタン風
   -------------------------------------------------------------------------- */

.site .wp-block-button__link,
.site .wp-element-button,
.site .single-related-products__cart a,
.site .single-related-products__cart button,
.site .single-related-products__cart input[type="submit"] {
	background-color: var(--wp--preset--color--button);
	border: 0;
	border-radius: var(--ih-radius);
	box-shadow: none;
	color: var(--wp--preset--color--white);
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	padding: 15px 30px;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.site .wp-block-button.is-style-outline > .wp-block-button__link,
.site .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: var(--ih-border-width) solid var(--wp--preset--color--button);
	box-shadow: none;
	color: var(--wp--preset--color--button);
}

.site .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.site .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible,
.site .wp-block-button.is-style-outline .wp-block-button__link:hover,
.site .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	opacity: 0.85;
}

.site .wp-block-search__button,
.site .wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--button);
	border: 0;
	border-radius: var(--ih-radius);
	color: var(--wp--preset--color--white);
}

.site .wp-block-search__button:hover,
.site .wp-block-search__button:focus-visible,
.site .wp-block-file .wp-block-file__button:hover,
.site .wp-block-file .wp-block-file__button:focus-visible {
	opacity: 0.85;
}

.site .wp-block-button__link:hover,
.site .wp-block-button__link:focus-visible,
.site .wp-element-button:hover,
.site .single-related-products__cart a:hover,
.site .single-related-products__cart button:hover,
.site .single-related-products__cart input[type="submit"]:hover {
	opacity: 0.8;
}

/* カラーミーが生成するラッパー内はレイアウトのみ（既存マークアップを尊重） */
.single-related-products__cart {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0.5rem 0;
	text-align: center;
	width: 100%;
}

.single-related-products__cart > * {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   トップ FEATURE 枠（REST API で記事を差し込み。失敗時は hidden のまま）
   -------------------------------------------------------------------------- */

.feature-section__inner {
	margin: 0 auto;
	max-width: var(--ih-wide-max);
	padding: var(--ih-space-major) clamp(1.25rem, 5vw, 2rem) 0;
}

.feature-section__heading {
	font-family: var(--font-serif);
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 400;
	letter-spacing: 0.2em;
	margin: 0 0 var(--ih-space-block);
	text-align: center;
	text-transform: uppercase;
}

.feature-section__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   記事一覧 — エディトリアルカード
   -------------------------------------------------------------------------- */

.archive-editorial {
	margin: 0 auto;
	max-width: var(--ih-wide-max);
	padding: var(--ih-space-major) clamp(1.25rem, 5vw, 2rem) var(--ih-space-section);
}

.archive-editorial__grid {
	display: grid;
	gap: var(--ih-space-major);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.archive-editorial__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.archive-editorial__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.archive-card {
	margin: 0;
}

.archive-card__link {
	color: inherit;
	display: block;
	text-decoration: none;
}

.archive-card__link:hover .archive-card__title,
.archive-card__link:focus-visible .archive-card__title {
	color: var(--wp--preset--color--button);
}

/* 画像 4:5、枠線なし */
.archive-card__media {
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--border);
	line-height: 0;
	overflow: hidden;
	width: 100%;
}

.archive-card__media img,
.archive-card__img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.archive-card__title {
	font-family: var(--font-serif);
	font-size: clamp(18px, 2vw, 20px);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin: 1.25rem 0 0;
	transition: color 0.2s ease;
}

.archive-editorial__empty {
	font-family: var(--font-sans);
	font-size: 15px;
	margin: 0;
	padding: var(--ih-space-major) 0;
	text-align: center;
}

.posts-navigation,
.navigation.pagination {
	font-family: var(--font-sans);
	font-size: 14px;
	letter-spacing: 0.08em;
	margin-top: var(--ih-space-major);
	padding-top: var(--ih-space-major);
	border-top: var(--ih-border-width) solid var(--wp--preset--color--border);
}

.posts-navigation .nav-links,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

.posts-navigation a,
.navigation.pagination a {
	color: var(--wp--preset--color--main-text);
}

.posts-navigation a:hover,
.posts-navigation a:focus-visible,
.navigation.pagination a:hover,
.navigation.pagination a:focus-visible {
	color: var(--wp--preset--color--button);
}

/* --------------------------------------------------------------------------
   Gutenberg — 引用・区切り
   -------------------------------------------------------------------------- */

.entry-content blockquote,
.entry-content .wp-block-quote {
	background: none;
	border: 0;
	border-left: var(--ih-border-width) solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--main-text);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.8;
	margin: 0 0 var(--ih-space-major);
	padding: 0 0 0 1.25rem;
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	display: block;
	font-size: 13px;
	font-style: normal;
	margin-top: 0.75rem;
	opacity: 0.85;
}

.entry-content hr,
.entry-content .wp-block-separator {
	border: 0;
	border-top: var(--ih-border-width) solid var(--wp--preset--color--border);
	margin: var(--ih-space-major) auto;
	max-width: 100%;
	opacity: 1;
}

.entry-content .wp-block-separator.is-style-wide {
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   単一投稿（特集記事）
   -------------------------------------------------------------------------- */

body.single {
	background-color: var(--wp--preset--color--bg-base);
}

.single-editorial {
	padding-bottom: var(--ih-space-section);
}

.single-editorial__article {
	margin: 0 auto;
	max-width: var(--ih-wide-max);
}

/* 特集記事メインビジュアル — スマホ基準 4:5（CSS）／PC は高さ抑えてトリミング */
.single-editorial__hero {
	aspect-ratio: 4 / 5;
	line-height: 0;
	margin: 0 auto;
	max-width: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

/* スマホ: ビューポート幅いっぱい */
@media (max-width: 780px) {
	.single-editorial__article > .single-editorial__hero {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		max-width: 100vw;
		width: 100vw;
	}
}

/* PC: 縦長になりすぎないよう高さを抑え、中央で cover トリミング */
@media (min-width: 781px) {
	.single-editorial__hero {
		aspect-ratio: 16 / 9;
		max-height: 600px;
		width: 100%;
	}
}

.single-editorial__hero .single-editorial__hero-img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.single-editorial__header {
	margin: 0 auto;
	max-width: var(--ih-content-max);
	padding: var(--ih-space-section) clamp(1.25rem, 5vw, 2rem) 0;
	text-align: center;
}

.single-editorial__label {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

.single-editorial__label a {
	color: var(--wp--preset--color--main-text);
	opacity: 0.55;
	transition: opacity 0.2s ease, color 0.2s ease;
}

.single-editorial__label a:hover,
.single-editorial__label a:focus-visible {
	color: var(--wp--preset--color--button);
	opacity: 1;
}

.single-editorial__content {
	margin: 0 auto;
	max-width: var(--ih-content-max);
	padding: 0 clamp(1.25rem, 5vw, 2rem) var(--ih-space-section);
}

.single-editorial__content > *:first-child {
	margin-top: 0;
}

.single-editorial__content h2,
.single-editorial__content h3 {
	color: var(--wp--preset--color--main-text);
	font-family: var(--font-serif);
	font-weight: 400;
	letter-spacing: 0.1em;
	margin: 2.25em 0 1em;
}

.single-editorial__content h2 {
	font-size: 1.25rem;
}

.single-editorial__content h3 {
	font-size: 1.0625rem;
}

.single-editorial__content a {
	color: var(--wp--preset--color--accent);
	transition: opacity 0.2s ease;
}

.single-editorial__content a:hover,
.single-editorial__content a:focus-visible {
	color: var(--wp--preset--color--button);
	opacity: 1;
}

.single-editorial__content img {
	height: auto;
	max-width: 100%;
}

/* 関連商品（ACF） */
.single-related-products {
	background-color: var(--wp--preset--color--white);
	border: var(--ih-border-width) solid var(--wp--preset--color--border);
	margin: 0 auto var(--ih-space-section);
	max-width: var(--ih-content-max);
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
}

.single-related-products__heading {
	font-family: var(--font-serif);
	font-size: 0.8125rem;
	font-weight: 400;
	letter-spacing: 0.12em;
	margin: 0 0 var(--ih-space-block);
	text-align: center;
}

.single-related-products__item + .single-related-products__item {
	border-top: var(--ih-border-width) solid var(--wp--preset--color--border);
	margin-top: var(--ih-space-block);
	padding-top: var(--ih-space-block);
}

.single-related-products__name {
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.5;
	margin: 0 0 0.75rem;
}

.single-related-products__desc {
	color: var(--wp--preset--color--main-text);
	font-family: var(--font-sans);
	font-size: 0.8125rem;
	line-height: 1.85;
	margin-bottom: 1.25rem;
	opacity: 0.85;
}

.single-related-products__desc p {
	font-size: inherit;
	margin: 0 0 0.75em;
}

.single-related-products__desc p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   どこでもカラーミー cartjs — document.write で同一ドキュメントに .cartjs_box を挿入（iframe ではない）
   インライン style（例: background #555, border-radius 6px）を !important で上書き
   ========================================================================== */

.indeyherbs-cart-embed--colorme {
	box-sizing: border-box;
	margin: 0.5rem auto 0;
	max-width: 100%;
	padding: clamp(1rem, 3vw, 1.5rem) 0;
}

.indeyherbs-cart-embed--colorme .cartjs_box {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* 「カートに入れる」ボタンの形状のみ（ショップ商品詳細の .button--orange.button--large 相当） */
.cartjs_box .cartjs_cart_in input[type="submit"],
.cartjs_box .cartjs_cart_in button {
	-moz-border-radius: 999px !important;
	-webkit-border-radius: 999px !important;
	border-radius: 999px !important;
	-moz-box-sizing: border-box !important;
	-webkit-box-sizing: border-box !important;
	box-sizing: border-box !important;
	display: block !important;
	width: 100% !important;
	height: 54px !important;
	line-height: 54px !important;
	padding: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background: #5d705c !important;
	background-color: #5d705c !important;
	background-image: none !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: bold !important;
	border: none !important;
	text-align: center !important;
	cursor: pointer !important;
	letter-spacing: 0.04em !important;
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
}

.cartjs_box .cartjs_cart_in input[type="submit"]:hover,
.cartjs_box .cartjs_cart_in input[type="submit"]:active,
.cartjs_box .cartjs_cart_in button:hover,
.cartjs_box .cartjs_cart_in button:active {
	display: block !important;
	width: 100% !important;
	height: 54px !important;
	line-height: 54px !important;
	padding: 0 !important;
	background: #5d705c !important;
	background-color: #5d705c !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 999px !important;
	box-shadow: none !important;
}

.cartjs_box .cartjs_product_input_txt {
	background-color: #ffffff !important;
	border: var(--ih-border-width) solid var(--wp--preset--color--border) !important;
	border-radius: 0 !important;
	color: var(--wp--preset--color--main-text) !important;
}

.cartjs_box table,
.cartjs_box th,
.cartjs_box td {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-collapse: collapse !important;
	box-shadow: none !important;
}

.cartjs_box .colorme-option-tbl {
	border-top: var(--ih-border-width) solid var(--wp--preset--color--border) !important;
}

.cartjs_box .colorme-option-tbl tr {
	border-bottom: var(--ih-border-width) solid var(--wp--preset--color--border) !important;
}

.cartjs_box .colorme-option-tbl th,
.cartjs_box .colorme-option-tbl td {
	border-right: var(--ih-border-width) solid var(--wp--preset--color--border) !important;
}

/* ============================================================
   グローバルヘッダー（fixed なし：スクロールで上へ退避）
   ============================================================ */

.icon-btn {
	align-items: center;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--color-text-main);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	line-height: 0;
	margin: 0;
	padding: 8px;
}

.icon-btn:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 2px;
}

.global-header {
	align-items: center;
	background-color: var(--color-bg-base);
	border-bottom: 1px solid var(--color-border);
	box-sizing: border-box;
	display: flex;
	height: var(--header-h);
	justify-content: space-between;
	left: auto;
	padding: 0 16px;
	position: relative;
	top: auto;
	width: 100%;
	z-index: 1000;
}

/* 左・右エリア */
.header-left,
.header-right {
	align-items: center;
	display: flex;
	flex: 1;
}

.header-right {
	justify-content: flex-end;
}

/* 中央エリア */
.header-center {
	align-items: center;
	display: flex;
	flex: 1;
	justify-content: center;
}

/* ============================================================
   ロゴ・ブランドエリア（カラーミー .header-brand / .header-tagline と同期）
   ============================================================ */

.header-brand {
	align-items: center;
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	line-height: 0;
	max-width: 100%;
	text-decoration: none;
}

.header-logo {
	align-items: center;
	align-self: center;
	display: inline-flex;
	line-height: 0;
}

.header-logo__img {
	display: block;
	height: 28px;
	max-height: 28px;
	object-fit: contain;
	transition: opacity 0.2s ease;
	width: auto;
}

.header-tagline {
	color: #6b756a;
	font-family: var(--font-serif);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.25;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

.header-brand:hover .header-logo__img,
.header-brand:active .header-logo__img {
	opacity: 0.8;
}

/* ============================================================
   ハンバーガー — MENU ラベルスタック（カラーミー .header-menu-stack と同期）
   ============================================================ */

.header-menu-stack {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	gap: 2px;
	justify-content: center;
}

.header-menu-label {
	color: var(--gr-main);
	font-family: var(--font-serif);
	font-size: 8px;
	font-weight: normal;
	letter-spacing: 0.22em;
	line-height: 1;
	opacity: 0.88;
}

/* ============================================================
   フッター
   ============================================================ */

.footer {
	background-color: var(--color-bg-base);
	border-top: 1px solid var(--color-border);
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: var(--ih-wide-max);
	padding: 30px clamp(1rem, 4vw, 1.5rem) 24px;
	text-align: center;
}

.footer nav {
	margin-left: auto;
	margin-right: auto;
	max-width: 36rem;
	width: 100%;
}

.footer-linklist {
	list-style: none;
	margin: 0 auto 24px;
	padding: 0;
}

.footer-linklist li {
	border-bottom: 1px solid var(--color-border);
}

.footer-linklist a {
	color: var(--color-text-main);
	display: block;
	font-family: var(--font-serif);
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.45;
	min-height: 2.25rem;
	padding: 13px 0;
	text-align: center;
	text-decoration: none;
}

.footer-linklist a:active {
	opacity: 0.6;
}

.footer-copyright {
	margin-left: auto;
	margin-right: auto;
	margin-top: 18px;
	max-width: 36rem;
	text-align: center;
}

.footer-copyright p {
	color: var(--color-text-main);
	font-size: 11px;
	letter-spacing: 0.1em;
	opacity: 0.5;
}

/* --------------------------------------------------------------------------
   アクセシビリティ — スクリーンリーダー向け非表示ラベル
   -------------------------------------------------------------------------- */

.screen-reader-text {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* ============================================================
   ヘッダー — 左並び・検索パネル
   ============================================================ */

.header-left {
	column-gap: 4px;
}

.header-search-panel {
	background-color: var(--color-bg-base);
	border-bottom: 1px solid var(--color-border);
	box-sizing: border-box;
	display: none;
	padding: 12px 16px;
	width: 100%;
}

.header-search-panel.is-open {
	display: block;
}

.header-search-panel__form {
	align-items: stretch;
	column-gap: 8px;
	display: flex;
	margin: 0 auto;
	max-width: 42rem;
}

.header-search-panel__input {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	box-sizing: border-box;
	color: var(--color-text-main);
	flex: 1 1 auto;
	font-family: var(--font-sans);
	font-size: 15px;
	min-width: 0;
	padding: 10px 12px;
}

.header-search-panel__submit {
	background-color: var(--color-text-main);
	border: 0;
	color: var(--color-white);
	cursor: pointer;
	flex: 0 0 auto;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 0 18px;
}

.header-search-panel__submit:hover,
.header-search-panel__submit:focus-visible {
	opacity: 0.9;
}

/* ============================================================
   ドロワー・オーバーレイ
   ============================================================ */

.drawer-overlay {
	background-color: rgba(43, 50, 48, 0.45);
	box-sizing: border-box;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	visibility: hidden;
	z-index: 1100;
}

.drawer-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.drawer {
	background-color: var(--color-bg-base);
	box-sizing: border-box;
	display: block;
	height: 100%;
	left: 0;
	max-width: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 52px 0 32px;
	position: fixed;
	top: 0;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	width: min(88vw, 360px);
	z-index: 1200;
}

.drawer.open {
	transform: translateX(0);
}

.drawer .u-close {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--color-text-main);
	cursor: pointer;
	display: flex;
	font-size: 28px;
	height: 44px;
	justify-content: center;
	line-height: 1;
	padding: 0;
	position: absolute;
	right: 8px;
	top: 8px;
	width: 44px;
}

.drawer .u-close:hover,
.drawer .u-close:focus-visible {
	opacity: 0.7;
}

.drawer-nav {
	padding: 0 20px;
}

.drawer-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.drawer-nav__list li {
	border-bottom: 1px solid var(--color-border);
}

.drawer-nav__list a {
	color: var(--color-text-main);
	display: block;
	font-family: var(--font-serif);
	font-size: 13px;
	letter-spacing: 0.06em;
	line-height: 1.5;
	min-height: 3rem;
	padding: 18px 0;
	text-decoration: none;
}

.drawer-nav__list a:hover,
.drawer-nav__list a:focus-visible {
	color: var(--color-brand);
}

/* ============================================================
   ジャーナル一覧（JOURNAL）— エディトリアルグリッド
   ============================================================ */

.journal-archive-main {
	background-color: var(--color-bg-base);
	margin: 0 auto;
	max-width: var(--ih-wide-max);
	padding: 0 clamp(1rem, 4vw, 1.5rem) clamp(3.5rem, 8vw, 5rem);
}

.journal-archive-main .feature-section__inner {
	padding-bottom: 0;
}

.archive-title {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	font-weight: 400;
	letter-spacing: 0.35em;
	line-height: 1.35;
	margin: 0;
	padding: 80px 0 60px;
	text-align: center;
	text-transform: uppercase;
}

.journal-list {
	box-sizing: border-box;
	display: grid;
	gap: 20px 12px;
	grid-template-columns: repeat(2, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.journal-list {
		gap: 40px 24px;
		grid-template-columns: repeat(3, 1fr);
	}
}

.journal-card {
	color: inherit;
	display: block;
	overflow: hidden;
	text-decoration: none;
}

.journal-card__image {
	aspect-ratio: 4 / 5;
	background-color: var(--wp--preset--color--border);
	line-height: 0;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.journal-card__image--empty {
	background-color: var(--wp--preset--color--border);
}

.journal-card__thumb {
	display: block;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 100%;
}

.journal-card:hover .journal-card__thumb,
.journal-card:focus-visible .journal-card__thumb {
	opacity: 0.92;
	transform: scale(1.03);
}

.journal-card__info {
	padding: 12px 0 0;
}

.journal-card__date {
	color: var(--color-text-main);
	display: block;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.4;
	margin: 0 0 6px;
	opacity: 0.75;
}

.journal-card__title {
	-webkit-box-orient: vertical;
	color: var(--color-text-main);
	display: -webkit-box;
	font-family: var(--font-serif);
	font-size: clamp(14px, 1.6vw, 15px);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.55;
	margin: 0;
	overflow: hidden;
	-webkit-line-clamp: 2;
}

.journal-archive__empty {
	font-family: var(--font-sans);
	font-size: 15px;
	margin: 0;
	padding: 3rem 0 4rem;
	text-align: center;
}

/* ペジネーション（ミニマル） */
.journal-archive__pagination {
	margin-top: clamp(3rem, 6vw, 4rem);
	padding-top: clamp(2rem, 4vw, 2.5rem);
}

.journal-archive__pagination .navigation.pagination {
	border-top: 1px solid var(--color-border);
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: 0.1em;
	margin-top: 0;
	padding-top: clamp(1.75rem, 3vw, 2.25rem);
}

.journal-archive__pagination .nav-links {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	justify-content: center;
}

.journal-archive__pagination .page-numbers {
	border: 1px solid transparent;
	box-sizing: border-box;
	color: var(--color-text-main);
	display: inline-flex;
	min-height: 2.25rem;
	min-width: 2.25rem;
	opacity: 0.55;
	padding: 0.35rem 0.6rem;
	text-align: center;
	text-decoration: none;
	transition: opacity 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.journal-archive__pagination a.page-numbers:hover,
.journal-archive__pagination a.page-numbers:focus-visible {
	color: var(--color-brand);
	opacity: 1;
}

.journal-archive__pagination .page-numbers.current {
	border-color: var(--color-border);
	opacity: 1;
}

.journal-archive__pagination .prev,
.journal-archive__pagination .next {
	letter-spacing: 0.14em;
	min-width: auto;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

/* ============================================================
   ジャーナル記事詳細（single.php）
   ============================================================ */

.journal-post-main {
	background-color: var(--color-bg-base);
	padding-bottom: clamp(4rem, 10vw, 6rem);
}

.journal-post {
	margin: 0;
	padding: 0;
}

/* ---- ヒーロー画像 ---- */

.journal-post__hero {
	aspect-ratio: 4 / 5;
	line-height: 0;
	overflow: hidden;
	position: relative;
	width: 100%;
}

@media (min-width: 768px) {
	.journal-post__hero {
		aspect-ratio: 3 / 2;
		max-height: 640px;
	}
}

.journal-post__hero-img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

/* ---- ヘッダー：カテゴリ・タイトル・日付 ---- */

.journal-post__header {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 700px;
	padding: clamp(2.5rem, 6vw, 4rem) clamp(1.25rem, 5vw, 2rem) clamp(2rem, 5vw, 3rem);
	text-align: center;
}

.journal-post__category {
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.28em;
	margin: 0 0 1.25rem;
	text-transform: uppercase;
}

.journal-post__category a {
	color: var(--color-text-main);
	opacity: 0.5;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

.journal-post__category a:hover,
.journal-post__category a:focus-visible {
	opacity: 1;
}

.journal-post__title {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 4vw, 2.125rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.55;
	margin: 0 0 1.5rem;
}

.journal-post__date {
	color: var(--color-text-main);
	display: block;
	font-family: var(--font-sans);
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	opacity: 0.45;
}

/* 信頼カテゴリ記事：カテゴリ・日付は非出力。タイトル・本文見出しをやや小さく */
.journal-post--trust .journal-post__title {
	font-size: clamp(1.35rem, 3.5vw, 1.85rem);
	margin-bottom: 0;
}

.journal-post--trust .journal-post__content h2 {
	font-size: clamp(1rem, 2.2vw, 1.25rem);
}

.journal-post--trust .journal-post__content h3 {
	font-size: clamp(0.9375rem, 1.85vw, 1.0625rem);
}

.journal-post--trust .journal-post__content h4 {
	font-size: 0.9375rem;
}

/* ---- 本文 ---- */

.journal-post__content {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 700px;
	padding: 0 clamp(1.25rem, 5vw, 2rem) clamp(3rem, 7vw, 5rem);
}

.journal-post__content > *:first-child {
	margin-top: 0;
}

/* 本文段落 */
.journal-post__content p {
	color: var(--color-text-main);
	font-family: var(--font-sans);
	font-size: 15px;
	line-height: 1.9;
	margin-bottom: 1.75em;
}

/* 見出し — 明朝体・上下に大きな余白 */
.journal-post__content h2 {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 400;
	letter-spacing: 0.12em;
	line-height: 1.5;
	margin: 4rem 0 2rem;
}

.journal-post__content h3 {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: clamp(1rem, 2vw, 1.125rem);
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.55;
	margin: 3.5rem 0 1.5rem;
}

.journal-post__content h4 {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	margin: 2.5rem 0 1rem;
}

.journal-post__content a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-color: transparent;
	transition: text-decoration-color 0.2s ease, color 0.2s ease;
}

.journal-post__content a:hover,
.journal-post__content a:focus-visible {
	color: var(--wp--preset--color--button);
	text-decoration-color: currentcolor;
}

/* 本文内画像 */
.journal-post__content img {
	display: block;
	height: auto;
	max-width: 100%;
}

.journal-post__content figure {
	margin: 2.5rem 0;
}

.journal-post__content figcaption {
	color: var(--color-text-main);
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: 0.08em;
	margin-top: 0.6rem;
	opacity: 0.55;
	text-align: center;
}

/* 引用ブロック */
.journal-post__content blockquote,
.journal-post__content .wp-block-quote {
	border: 0;
	border-left: 1px solid var(--color-border);
	font-size: 15px;
	line-height: 1.9;
	margin: 2.5rem 0;
	padding: 0.25rem 0 0.25rem 1.25rem;
}

/* 水平線 */
.journal-post__content hr,
.journal-post__content .wp-block-separator {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 3rem auto;
	max-width: 100%;
	opacity: 1;
}

/* ---- 関連商品（single-related-products）— 700px 列に揃える ---- */

.journal-post .single-related-products {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	box-sizing: border-box;
	margin: 0 auto clamp(3rem, 7vw, 5rem);
	max-width: 700px;
	padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
}

/* ---- カートボタン — ブランドスタイル強制同期 ---- */

.journal-post .cartjs_box .cartjs_cart_in input[type="submit"],
.journal-post .cartjs_box .cartjs_cart_in button {
	background: #5d705c !important;
	background-color: #5d705c !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	font-family: "Shippori Mincho", "YuMincho", "Yu Mincho", serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: 0.1em !important;
}

.journal-post .cartjs_box .cartjs_cart_in input[type="submit"]:hover,
.journal-post .cartjs_box .cartjs_cart_in input[type="submit"]:active,
.journal-post .cartjs_box .cartjs_cart_in button:hover,
.journal-post .cartjs_box .cartjs_cart_in button:active {
	background: #4e5f4d !important;
	background-color: #4e5f4d !important;
}

/* ============================================================
   カラーミーショップ WP プラグイン — ジャーナル UI 同期
   対象ショートコード:
     [colormeshop_page]        → .colormeshop-page（default.php テンプレート）
     [colormeshop_image]       → <img> のみ（クラスなし）
     [colormeshop_product]     → プレーンテキスト（CSS 対象外）
     [colormeshop_cart_button] → cartjs → .cartjs_box（以下および既存ルール）
   ============================================================ */

/* ---- [colormeshop_page] ラッパー ---- */

.colormeshop-page {
	box-sizing: border-box;
	margin: 2.5rem auto;
	max-width: 360px;
	width: 100%;
}

/* ---- 商品画像（4:5・cover・角丸なし） ---- */

.colormeshop-page__figure {
	aspect-ratio: 4 / 5;
	background-color: var(--color-border);
	line-height: 0;
	margin: 0 0 1.25rem;
	overflow: hidden;
}

.colormeshop-page__img {
	border-radius: 0 !important;
	display: block;
	height: 100% !important;
	object-fit: cover !important;
	width: 100% !important;
}

/* [colormeshop_image] が単独で使用された場合：
   エディタ上で <div class="colormeshop-image"> 等で囲んで使用推奨。
   囲みなしの場合は journal-post__content img の共通ルールが適用される。 */

.colormeshop-image {
	aspect-ratio: 4 / 5;
	line-height: 0;
	margin: 0 auto 1.25rem;
	max-width: 360px;
	overflow: hidden;
	width: 100%;
}

.colormeshop-image img {
	border-radius: 0 !important;
	display: block;
	height: 100% !important;
	object-fit: cover !important;
	width: 100% !important;
}

/* ---- ボディ（商品名・説明・価格） ---- */

.colormeshop-page__body {
	padding: 0 4px;
}

.colormeshop-page__name {
	color: var(--color-text-main);
	font-family: var(--font-serif) !important;
	font-size: 1rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.1em !important;
	line-height: 1.55 !important;
	margin: 0 0 0.75rem !important;
}

.colormeshop-page__desc {
	color: var(--color-text-main);
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: 0.04em;
	line-height: 1.75;
	margin-bottom: 1rem;
	opacity: 0.85;
}

.colormeshop-page__desc p {
	font-size: inherit;
	margin: 0 0 0.6em;
}

.colormeshop-page__price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0 0 1.25rem;
}

.colormeshop-page__price-label {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: 11px;
	letter-spacing: 0.14em;
	opacity: 0.55;
}

.colormeshop-page__price-num {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: 1.0625rem;
	font-weight: 400;
	letter-spacing: 0.08em;
}

.colormeshop-page__price-unit {
	color: var(--color-text-main);
	font-family: var(--font-serif);
	font-size: 11px;
	letter-spacing: 0.08em;
	opacity: 0.55;
}

/* ---- [colormeshop_cart_button] → cartjs ボタン（全コンテキスト共通） ---- */

.colormeshop-page__cart {
	margin-top: 0.5rem;
}

.colormeshop-page__cart .cartjs_box,
.entry-content .cartjs_box {
	margin-left: auto !important;
	margin-right: auto !important;
}

.colormeshop-page__cart .cartjs_box .cartjs_cart_in input[type="submit"],
.colormeshop-page__cart .cartjs_box .cartjs_cart_in button,
.entry-content .cartjs_box .cartjs_cart_in input[type="submit"],
.entry-content .cartjs_box .cartjs_cart_in button {
	background: #5d705c !important;
	background-color: #5d705c !important;
	background-image: none !important;
	border: none !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	display: block !important;
	filter: none !important;
	font-family: "Shippori Mincho", "YuMincho", "Yu Mincho", serif !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	height: 50px !important;
	letter-spacing: 0.1em !important;
	line-height: 50px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 !important;
	text-align: center !important;
	text-shadow: none !important;
	width: 100% !important;
}

.colormeshop-page__cart .cartjs_box .cartjs_cart_in input[type="submit"]:hover,
.colormeshop-page__cart .cartjs_box .cartjs_cart_in input[type="submit"]:active,
.colormeshop-page__cart .cartjs_box .cartjs_cart_in button:hover,
.colormeshop-page__cart .cartjs_box .cartjs_cart_in button:active,
.entry-content .cartjs_box .cartjs_cart_in input[type="submit"]:hover,
.entry-content .cartjs_box .cartjs_cart_in input[type="submit"]:active,
.entry-content .cartjs_box .cartjs_cart_in button:hover,
.entry-content .cartjs_box .cartjs_cart_in button:active {
	background: #4e5f4d !important;
	background-color: #4e5f4d !important;
	border-radius: 999px !important;
	box-shadow: none !important;
	height: 50px !important;
	line-height: 50px !important;
}

/* cartjs テーブル系の装飾リセット（全コンテキスト） */

.entry-content .cartjs_box table,
.entry-content .cartjs_box th,
.entry-content .cartjs_box td,
.colormeshop-page__cart .cartjs_box table,
.colormeshop-page__cart .cartjs_box th,
.colormeshop-page__cart .cartjs_box td {
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-collapse: collapse !important;
	box-shadow: none !important;
}

.entry-content .cartjs_box .cartjs_product_input_txt,
.colormeshop-page__cart .cartjs_box .cartjs_product_input_txt {
	background-color: var(--color-white) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 0 !important;
	color: var(--color-text-main) !important;
}

/* =========================================================
   カラーミープラグイン ショートコード出力のスタイル上書き
   ========================================================= */

.colormeshop-product {
	background: transparent !important;
	border: none !important;
	margin: 4rem auto !important;
	max-width: 400px !important;
	padding: 0 !important;
}

.colormeshop-product-image img {
	aspect-ratio: 4 / 5 !important;
	border-radius: 0 !important;
	height: auto !important;
	object-fit: cover !important;
	width: 100% !important;
}

.colormeshop-product-name,
.colormeshop-product-price {
	color: #2b3230 !important;
	font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif) !important;
	font-size: 15px !important;
	letter-spacing: 0.05em !important;
	margin-top: 1rem !important;
	text-align: center !important;
}

.colormeshop-product-button a {
	background-color: #5d705c !important;
	border: none !important;
	border-radius: 999px !important;
	color: #ffffff !important;
	display: block !important;
	font-family: var(--font-serif, "Shippori Mincho", "Yu Mincho", serif) !important;
	font-size: 14px !important;
	margin: 1.5rem auto 0 !important;
	padding: 14px 0 !important;
	text-align: center !important;
	text-decoration: none !important;
	transition: background-color 0.4s ease !important;
	width: 80% !important;
}

.colormeshop-product-button a:hover {
	background-color: #4e5f4d !important;
}

/* =============================================================
   信頼ストリップ A/B/C — WP版（カラーミー .p-top-trust* と視覚同期）
   CONFIRMED_SPEC.md §5 / COMPANY_PROFILE.md §9 / top.css 参照
   ============================================================= */

.trust-block {
	box-sizing: border-box;
	margin: 0;
	padding: 16px clamp(12px, 4vw, 20px) 20px;
}

.trust-block__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* カード — 白背景・角丸 8px・モスグリーン系 1px ボーダー */
.trust-card {
	border: 1px solid rgba(93, 112, 92, 0.12);
	border-radius: 8px;
	box-sizing: border-box;
	color: inherit;
	display: block;
	margin: 0 0 12px;
	overflow: hidden;
	text-decoration: none;
}

.trust-card:last-child {
	margin-bottom: 0;
}

/* サムネイル — 4:3 横長（カラーミーTOP A/B/C サムネイル規格と同一） */
.trust-card__thumb {
	aspect-ratio: 4 / 3;
	background-color: var(--color-bg-base);
	overflow: hidden;
	position: relative;
	width: 100%;
}

.trust-card__img {
	display: block;
	height: 100%;
	object-fit: cover;
	object-position: center;
	width: 100%;
}

.trust-card__body {
	box-sizing: border-box;
	padding: 14px 16px 16px;
}

/* キャッチ見出し — 明朝体・モスグリーン */
.trust-card__catch {
	color: var(--gr-main);
	font-family: var(--font-serif);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.45;
	margin: 0 0 10px;
}

.trust-card__copy {
	margin: 0;
	padding: 0;
}

/* 本文段落 — ゴシック・ダークグレー */
.trust-card__para {
	color: var(--gr-text);
	font-size: 13px;
	letter-spacing: 0.03em;
	line-height: 1.75;
	margin: 0 0 0.75em;
}

.trust-card__para:last-child {
	margin-bottom: 0;
}

/* ジャーナル深掘りリンク — アクセント色（サーモンピンク）はここのみ使用 */
.trust-card__journal-link {
	color: var(--journal-accent);
	display: inline-block;
	font-family: var(--font-serif);
	font-size: 13px;
	letter-spacing: 0.08em;
	margin-top: 12px;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.trust-card__journal-link:hover,
.trust-card__journal-link:focus-visible {
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.trust-card__journal-link {
		transition: none;
	}
}