@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ（もくめディア用。記事カード・見出し・目次・主役の軸）
    Version: 1.7.7
    Author: LOOS WEB STUDIO / もくめディア
    Author URI: https://mokumedia.jp/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

:root {
	--mm-green: #e3f1e5;
	--mm-green-deep: #749378;
	--mm-brown: #792100;
	--mm-tag: #8cc68a;
	--mm-card-line: #a09d9a;
	--mm-text: #444;
}

/* ──────────────────────────────────────────────
   記事カード（K6 木札・2026-10-03に確定）
   角丸の写真、写真の左上に主役の名前を書いた木札（明朝・縦書き）、
   その下に題名だけ（2行で切る）。日付・抜粋・タグは出さない。
   木札の中身は functions.php の swl_parts__post_list_category が出す。
   ────────────────────────────────────────────── */
.-type-card .p-postList__item,
.p-postSlider .p-postList__item {
	overflow: visible;
	margin-top: 8px;
}

.-type-card .p-postList__link,
.p-postSlider .p-postList__link {
	display: block;
	box-shadow: none;
	background: none;
}

.-type-card .p-postList__thumb,
.p-postSlider .p-postList__thumb {
	position: relative;
	border-radius: 12px;
	overflow: visible;
	box-shadow: none;
}

.-type-card .c-postThumb__figure,
.p-postSlider .c-postThumb__figure {
	border-radius: 12px;
	overflow: hidden;
}

.-type-card .p-postList__link:hover .c-postThumb__img,
.p-postSlider .p-postList__link:hover .c-postThumb__img {
	transform: scale(1.04);
}

/* 木札 */
.mm-fuda {
	position: absolute;
	top: -6px;
	left: 12px;
	z-index: 2;
	padding: 16px 8px 8px;
	background: #e2c9a3;
	color: #3a2210;
	border-radius: 3px 3px 5px 5px;
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .18em;
	writing-mode: vertical-rl;
	text-orientation: upright;   /* 「1号」「LVL」などの数字・英字も立てる */
	white-space: nowrap;
	max-height: calc(100% - 8px); /* 長い名前でも写真からはみ出さない */
	overflow: hidden;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
	pointer-events: none;
}

.mm-fuda--2 {
	left: 46px;
	top: -2px;
}

/* カーソルで木札が紐穴を軸に傾く（2026-10-08） */
.mm-fuda {
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
	transform-origin: 50% 5px;
}

.p-postList__link:hover .mm-fuda,
.p-postList__link:focus .mm-fuda {
	transform: rotate(-14deg);
}

.p-postList__link:hover .mm-fuda--2,
.p-postList__link:focus .mm-fuda--2 {
	transform: rotate(-9deg);
	transition-delay: .06s;
}

.mm-fuda::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: #3a2210;
	opacity: .6;
}

.-type-card .p-postList__body,
.p-postSlider .p-postList__body {
	position: static;
	margin: 2px 2px 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

.-type-card .p-postList__title,
.p-postSlider .p-postList__title {
	margin: 0;
	color: #4f4a45;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: .01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* 題名の下のタグのピル（タグB・2026-10-04に確定）。中身は functions.php の mm_card_tags */
.mm-cardtags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 4px;
	margin-top: 6px;
}

.mm-cardtag {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 999px;
	background: var(--mm-tag);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: .02em;
	white-space: nowrap;
}

.-type-card .p-postList__meta,
.-type-card .p-postList__excerpt,
.p-postSlider .p-postList__meta,
.p-postSlider .p-postList__excerpt {
	display: none;
}

/* ──────────────────────────────────────────────
   「タグから探す」の板（G1-A 木の板・双葉・2026-10-04に確定）
   中身は functions.php のショートコード [mm_tags]。
   薄い木目の板に茶の文字、角に釘。カーソル（スマホは押した瞬間）で板が少し傾き、
   板の上から茎が伸びて双葉が約35度に開く。
   ────────────────────────────────────────────── */
.mm-tagboard {
	margin: 2.5em 0;
}

.mm-tagboard__ttl {
	margin: 0 0 18px;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .08em;
	text-align: center;
	color: var(--mm-text);
}

.mm-tagboard__ttl small {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .12em;
	color: #7a746e;
}

.mm-tagboard__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

@media (max-width: 599px) {
	.mm-tagboard__list {
		grid-template-columns: repeat(2, 1fr);
		gap: 9px;
	}
}

.mm-tagboard__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 8px 12px;
	border-radius: 5px;
	background: #f1e4cf;
	background-image: repeating-linear-gradient(100deg, rgba(121, 33, 0, .045) 0 2px, transparent 2px 9px);
	box-shadow: 0 2px 0 #d9c3a3, 0 3px 6px rgba(0, 0, 0, .08);
	color: var(--mm-brown);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	overflow: visible;
	transition: transform .18s, box-shadow .18s;
}

.mm-tagboard__item::before,
.mm-tagboard__item::after {
	content: "";
	position: absolute;
	top: 6px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #9a6a3d;
	opacity: .7;
}

.mm-tagboard__item::before { left: 7px; }
.mm-tagboard__item::after { right: 7px; }

.mm-tagboard__item:hover,
.mm-tagboard__item:focus,
.mm-tagboard__item:active {
	transform: rotate(-1.2deg) translateY(-2px);
	color: var(--mm-brown);
}

/* 双葉 */
.mm-tagboard__sprout {
	position: absolute;
	left: 50%;
	top: -2px;
	width: 2px;
	height: 0;
	margin-left: -1px;
	background: var(--mm-green-deep);
	border-radius: 1px;
	transition: height .22s ease-out;
}

.mm-tagboard__sprout::before,
.mm-tagboard__sprout::after {
	content: "";
	position: absolute;
	top: -14px;
	width: 15px;
	height: 15px;
	background: var(--mm-tag);
	transform: scale(0);
	transition: transform .28s cubic-bezier(.34, 1.56, .64, 1) .14s;
}

.mm-tagboard__sprout::before {
	right: 1px;
	border-radius: 0 100% 0 100%;
	transform-origin: 100% 100%;
	transform: scale(0) rotate(-10deg);
}

.mm-tagboard__sprout::after {
	left: 1px;
	border-radius: 100% 0 100% 0;
	transform-origin: 0 100%;
	transform: scale(0) rotate(10deg);
}

.mm-tagboard__item:hover .mm-tagboard__sprout,
.mm-tagboard__item:focus .mm-tagboard__sprout,
.mm-tagboard__item:active .mm-tagboard__sprout {
	height: 16px;
}

.mm-tagboard__item:hover .mm-tagboard__sprout::before,
.mm-tagboard__item:focus .mm-tagboard__sprout::before,
.mm-tagboard__item:active .mm-tagboard__sprout::before {
	transform: scale(1) rotate(-10deg);
}

.mm-tagboard__item:hover .mm-tagboard__sprout::after,
.mm-tagboard__item:focus .mm-tagboard__sprout::after,
.mm-tagboard__item:active .mm-tagboard__sprout::after {
	transform: scale(1) rotate(10deg);
}

@media (prefers-reduced-motion: reduce) {
	.mm-tagboard__item,
	.mm-tagboard__sprout,
	.mm-tagboard__sprout::before,
	.mm-tagboard__sprout::after {
		transition: none;
	}
}

/* ──────────────────────────────────────────────
   お問い合わせフォーム（[mm_contact]・2026-10-07）
   ────────────────────────────────────────────── */
.mm-contact {
	max-width: 640px;
	margin: 1.5em auto;
}

.mm-contact p {
	margin: 0 0 1.2em;
}

.mm-contact label {
	display: block;
	margin-bottom: .35em;
	font-size: 14px;
	font-weight: 700;
	color: var(--mm-text);
}

.mm-contact label span {
	display: inline-block;
	margin-left: .6em;
	padding: 1px 7px;
	border-radius: 999px;
	background: var(--mm-green-deep);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	vertical-align: middle;
}

.mm-contact input[type="text"],
.mm-contact input[type="email"],
.mm-contact textarea {
	width: 100%;
	padding: .7em .9em;
	border: 1.5px solid #d9d3cc;
	border-radius: 8px;
	background: #fff;
	font-size: 15px;
	color: var(--mm-text);
}

.mm-contact input:focus,
.mm-contact textarea:focus {
	outline: none;
	border-color: var(--mm-green-deep);
	box-shadow: 0 0 0 3px var(--mm-green);
}

.mm-contact__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mm-contact__submit {
	text-align: center;
	margin-top: 1.6em;
}

.mm-contact__submit button {
	min-width: 220px;
	padding: .9em 2em;
	border: 0;
	border-radius: 999px;
	background: var(--mm-green-deep);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	cursor: pointer;
	transition: transform .15s, opacity .15s;
}

.mm-contact__submit button:hover {
	transform: translateY(-2px);
	opacity: .92;
}

.mm-contact__error {
	padding: .6em .9em;
	border-radius: 6px;
	background: #fbeeee;
	color: #a33;
	font-size: 14px;
}

.mm-contact--done {
	padding: 1.4em 1.2em;
	border-radius: 10px;
	background: var(--mm-green);
	text-align: center;
	color: var(--mm-text);
}

/* ──────────────────────────────────────────────
   ヘッダー（2026-10-07）：PCでもSTUDIOと同じ三本線メニュー。
   SWELLは三本線（.l-header__menuBtn.sp_）と引き出し（.p-spMenu）をPC幅で隠すので、PCでも出す。
   PCのグローバルナビは使わない（メニューは引き出しの中）。
   ────────────────────────────────────────────── */
@media (min-width: 960px) {
	.l-header__menuBtn.sp_,
	.l-header__customBtn.sp_ {   /* customBtn＝検索（search_pos_sp: header） */
		display: block !important;
	}

	.p-spMenu {
		display: block;
	}

	.l-header__gnav,
	.c-gnavWrap {
		display: none !important;
	}

	/* PCでは引き出しを360px幅に（SWELL既定は88vw） */
	.p-spMenu.-right .p-spMenu__inner {
		width: 360px;
		transform: translateX(100%);
	}

	[data-spmenu="opened"] .p-spMenu.-right .p-spMenu__inner {
		transform: translateX(0);
	}
}

.l-header__menuBtn .c-iconBtn__icon,
.l-header__customBtn .c-iconBtn__icon {
	color: var(--mm-text);
}

/* ──────────────────────────────────────────────
   フッター（F2 整列・2026-10-07に確定）
   上端は白から淡緑への波。中央にロゴ（ウィジェット footer_box2／footer_sp の画像ブロック）、
   リンクは横一列（メニュー footer_menu）、コピーライト。背景色はカスタマイズ値の固定で。
   ────────────────────────────────────────────── */
.l-footer {
	position: relative;
	margin-top: 60px;
	padding-top: 44px;
}

.l-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 44' preserveAspectRatio='none'%3E%3Cpath d='M0 44V30C180 8 360 0 560 10s400 30 600 22 240-14 240-14V44z' fill='%23e3f1e5'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.l-footer .l-footer__widgetArea {
	padding-top: 10px;
	padding-bottom: 0;
}

.l-footer .w-footer__box {
	text-align: center;
}

.l-footer .mm-footer-logo {
	display: block;
	width: min(360px, 70%);
	height: auto;
	margin: 0 auto;
}

.l-footer .mm-footer-company {
	margin: 18px 0 0;
	font-size: 12px;
	letter-spacing: .06em;
	color: #6f6a65;
}

.l-footer .mm-footer-company a {
	color: #6f6a65;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.l-footer__nav {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px 28px;
	margin: 26px 0 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .08em;
}

.l-footer__nav a {
	color: var(--mm-text);
}

.l-footer .copyright {
	margin-top: 26px;
	font-size: 13px;
	color: #6f6a65;
	letter-spacing: .04em;
}

/* ──────────────────────────────────────────────
   トップページの大項目の見出し（S1 ラベルと短い線・2026-10-07に確定）
   「もくめディアとは」「登場人物」「今月の特集」「最新の記事」を同じ階層・同じ大きさに。
   英字ラベル（.mk-label / .mk-sec__en）を上、丸ゴシックの見出し、下に短い濃緑の線。
   記事用の見出し（D案）より強い指定にしてある。SWELLのグループは内側コンテナ（.is-row__inner-container）に当てる。
   ────────────────────────────────────────────── */
body .post_content .mk-label,
body .post_content .mk-sec__en {
	margin: 0 0 6px !important;
	font-size: 11px !important;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: center;
	color: var(--mm-green-deep);
}

body .post_content h2.mk-about__title,
body .post_content h2.mk-chars__title,
body .post_content h2.mk-sec__title {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	letter-spacing: .22em !important;
	line-height: 1.5 !important;
	text-align: center !important;
	color: var(--mm-text) !important;
	counter-increment: none !important;
}

body .post_content h2.mk-about__title::before,
body .post_content h2.mk-chars__title::before,
body .post_content h2.mk-sec__title::before {
	content: none !important;
}

body .post_content h2.mk-about__title::after,
body .post_content h2.mk-chars__title::after,
body .post_content h2.mk-sec__title::after {
	content: "" !important;
	display: block !important;
	width: 46px;
	height: 3px;
	margin: 12px auto 0;
	border-radius: 2px;
	background: var(--mm-green-deep);
	position: static;
}

body .post_content .mk-sec__text > .is-row__inner-container {
	display: flex !important;
	flex-direction: column-reverse !important;
	align-items: center !important;
}

body .post_content .mk-sec__head > .is-row__inner-container {
	display: flex !important;
	align-items: flex-end !important;
	justify-content: center !important;
	gap: 18px;
}

body .post_content .mk-sec__head {
	margin-bottom: 26px;
}

body .post_content .mk-sec__head.-right > .is-row__inner-container {
	flex-direction: row-reverse !important;
}

body .post_content .mk-about__lead,
body .post_content .mk-chars__sub {
	margin-top: 22px;
}

/* ──────────────────────────────────────────────
   引き出しメニューの追いかけっこ（2026-10-08）
   三本線で開くパネルの内側の足元に、左にトリ・右にイノシシ（イノシシがトリを追う）。パネルと一緒に滑って出てきて、
   開いた直後だけトリは跳ね、イノシシは四足のまま駆ける。画像はメディアの tori.png / inoshishi.png。
   ────────────────────────────────────────────── */
.p-spMenu__inner::after {
	content: "";
	position: absolute;
	left: 96px;
	bottom: 56px;
	width: 60px;
	height: 60px;
	background: url("https://2023041214412311133241.onamaeweb.jp/wp-content/uploads/2026/09/tori.png") center bottom / contain no-repeat;
	transform: scaleX(-1);   /* 元絵は右向き。進行方向（左）へ */
	z-index: 2;
	pointer-events: none;
}

.p-spMenu__body::after {
	content: "";
	position: absolute;
	right: 96px;
	bottom: 44px;
	width: 96px;
	height: 96px;
	background: url("https://2023041214412311133241.onamaeweb.jp/wp-content/uploads/2026/09/inoshishi.png") center bottom / contain no-repeat;
	z-index: 2;
	pointer-events: none;
}

[data-spmenu="opened"] .p-spMenu__inner::after {
	animation: mm-hop .18s ease-in-out 4;
}

[data-spmenu="opened"] .p-spMenu__body::after {
	animation: mm-gallop .14s ease-in-out 5;
}

@keyframes mm-hop {
	0%, 100% { transform: scaleX(-1) translateY(0); }
	50% { transform: scaleX(-1) translateY(-14px) rotate(6deg); }
}

@keyframes mm-gallop {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-7px) rotate(-3deg); }
}

@media (max-width: 959px) {
	.p-spMenu__inner::after { width: 50px; height: 50px; left: 22%; bottom: 58px; }
	.p-spMenu__body::after { width: 84px; height: 84px; right: 22%; }
}

@media (prefers-reduced-motion: reduce) {
	.p-spMenu__inner::after,
	.p-spMenu__body::after {
		animation: none !important;
	}
}

/* ──────────────────────────────────────────────
   ビジュアルから選ぶ（[mm_visual]・2026-10-08に確定）
   写真だけの正方形の格子。木札は「？？？」、カーソルで持ち上がって主役の名前に変わる。
   ────────────────────────────────────────────── */
.mm-visual {
	margin: 2.5em 0;
}

body .post_content h2.mm-visual__ttl {
	margin: 0 0 4px !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important;
	font-size: 24px !important;
	font-weight: 700 !important;
	letter-spacing: .22em !important;
	text-align: center !important;
	color: var(--mm-text) !important;
	counter-increment: none !important;
}

body .post_content h2.mm-visual__ttl::before,
body .post_content h2.mm-visual__ttl::after {
	content: none !important;
}

.mm-visual__ttl small {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .18em;
	color: var(--mm-green-deep);
}

.mm-visual__sub {
	margin: 0 0 22px;
	text-align: center;
	font-size: 13px;
	color: #7a746e;
}

.mm-visual__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

@media (max-width: 700px) {
	.mm-visual__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
}

.mm-visual__pick {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
}

.mm-visual__pick img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
	display: block;
	transition: transform .35s;
}

.mm-visual__pick::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
	box-shadow: inset 0 0 0 0 rgba(116, 147, 120, 0);
	transition: box-shadow .3s;
	pointer-events: none;
}

.mm-visual__pick:hover img,
.mm-visual__pick:focus img {
	transform: scale(1.03);
}

.mm-visual__pick:hover::after,
.mm-visual__pick:focus::after {
	box-shadow: inset 0 0 0 3px rgba(116, 147, 120, .9);
}

.mm-visual__fuda {
	position: absolute;
	top: -6px;
	left: 14px;
	z-index: 2;
	padding: 16px 8px 9px;
	background: #e2c9a3;
	color: #3a2210;
	border-radius: 3px 3px 5px 5px;
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: .18em;
	writing-mode: vertical-rl;
	text-orientation: upright;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .22);
	transform-origin: 50% 5px;
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.mm-visual__fuda::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 50%;
	width: 5px;
	height: 5px;
	margin-left: -2.5px;
	border-radius: 50%;
	background: #3a2210;
	opacity: .6;
}

.mm-visual__fuda span {
	display: block;
	transition: opacity .2s;
}

.mm-visual__a {
	position: absolute;
	top: 16px;
	left: 8px;
	opacity: 0;
	white-space: nowrap;
}

.mm-visual__pick:hover .mm-visual__fuda,
.mm-visual__pick:focus .mm-visual__fuda {
	transform: translateY(-12px) rotate(-8deg);
}

.mm-visual__pick:hover .mm-visual__q,
.mm-visual__pick:focus .mm-visual__q {
	opacity: 0;
}

.mm-visual__pick:hover .mm-visual__a,
.mm-visual__pick:focus .mm-visual__a {
	opacity: 1;
	transition-delay: .12s;
}

@media (prefers-reduced-motion: reduce) {
	.mm-visual__fuda,
	.mm-visual__pick img {
		transition: none;
	}
}

/* パンくず：カテゴリー廃止のため「ホーム > Uncategorized」になるので当面出さない。
   主役で組み直す案（ホーム > サザンカ > 記事）は後で検討 */
.p-breadcrumb {
	display: none;
}

/* ──────────────────────────────────────────────
   記事本文の見出し（D案・2026-10-03に確定）
   H2：帯なし。番号（01、02…）をCSSが自動で振り、濃緑の細い下線。
   H3：濃緑の左線。H4：淡緑の下線。
   SWELLの「見出しのデザイン」はいちばん素の型にしておく。装飾の残りはここで消す。
   見出し文字の「１：」は流し込み時に外してある（新規記事でも書かない）。
   対象は本文の見出しブロック（.wp-block-heading）だけ。記事カードの題名（h2.p-postList__title）には効かせない（1.2.1）。
   ────────────────────────────────────────────── */
.post_content {
	counter-reset: mm-h2;
}

body .post_content h2.wp-block-heading {
	counter-increment: mm-h2;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0 .7em;
	align-items: baseline;
	background: none !important;
	border: 0 !important;
	border-bottom: 2px solid var(--mm-green-deep) !important;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 .35em !important;
	color: var(--mm-text);
	line-height: 1.5;
}

body .post_content h2.wp-block-heading::before {
	content: counter(mm-h2, decimal-leading-zero);
	position: static;
	width: auto;
	height: auto;
	background: none;
	border: 0;
	font-size: 1.7em;
	font-weight: 500;
	line-height: 1;
	letter-spacing: .02em;
	color: var(--mm-green-deep);
	font-variant-numeric: tabular-nums;
}

body .post_content h2.wp-block-heading::after {
	content: none !important;
}

body .post_content h3.wp-block-heading {
	background: none !important;
	border: 0 !important;
	border-left: 4px solid var(--mm-green-deep) !important;
	border-radius: 0;
	box-shadow: none;
	padding: .1em .7em !important;
	color: var(--mm-text);
}

body .post_content h3.wp-block-heading::before,
body .post_content h3.wp-block-heading::after {
	content: none !important;
}

body .post_content h4.wp-block-heading {
	background: none !important;
	border: 0 !important;
	border-bottom: 2px solid var(--mm-green) !important;
	padding: 0 0 .2em !important;
	color: var(--mm-text);
}

body .post_content h4.wp-block-heading::before,
body .post_content h4.wp-block-heading::after {
	content: none !important;
}

/* ──────────────────────────────────────────────
   目次（T2 枠線・2026-10-03に確定）
   細い濃緑の枠に「目次」の文字が乗る。H2は 01、H3は 1-1 の枝番。
   SWELL側の設定：投稿ページに表示オン／olタグ／H3まで。デザインの型は何でもよい（背景はここで消す）。
   SWELLは最初のH2の直前に自動で差し込む＝導入→バナー→目次→H2 の並び。
   ────────────────────────────────────────────── */
#main_content .p-toc {
	position: relative;
	background: none !important;
	border: 1.5px solid var(--mm-green-deep) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 1.5em 1.4em 1.1em !important;
	margin: 2.4em auto 2.8em;
	color: var(--mm-text);
}

#main_content .p-toc .p-toc__ttl {
	position: absolute;
	top: -.8em;
	left: 1em;
	margin: 0;
	padding: 0 .6em;
	background: var(--color_bg, #fff);
	color: var(--mm-green-deep);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.6;
	text-align: left;
}

#main_content .p-toc .p-toc__ttl::before {
	content: none;
}

#main_content .p-toc ol.p-toc__list > li,
#main_content .p-toc ol.p-toc__childList > li {
	margin-left: 2.4em;
}

#main_content .p-toc ol.p-toc__list > li::before {
	content: counter(toc, decimal-leading-zero);
	border-right: 0;
	color: var(--mm-green-deep);
	font-weight: 500;
	letter-spacing: .02em;
	font-variant-numeric: tabular-nums;
	opacity: 1;
}

#main_content .p-toc ol.p-toc__childList > li {
	margin-left: 2.2em;
	font-size: .92em;
	color: #6f6a65;
}

#main_content .p-toc ol.p-toc__childList > li::before {
	content: counters(toc, "-");
	border-right: 0;
	color: var(--mm-green-deep);
	font-size: 11px;
	top: .3em;
	opacity: 1;
}

/* ── キャラクターの掛け合い＝SWELLの「ふきだし」をSTUDIO時代の見た目に合わせる（1.4.9）。
   値は md_chat_generator と同じ：アイコン44〜64px・角丸12px・余白10px 14px・色（イノシシ緑・トリ黄・ゆかわ橙）。しっぽは出さない ── */
.post_content .swell-block-balloon{margin:16px 0 0 !important}
.post_content *:not(.swell-block-balloon)+.swell-block-balloon{margin-top:0 !important}
.post_content .swell-block-balloon+*:not(.swell-block-balloon){margin-top:2em !important}
.c-balloon{align-items:flex-start}
.c-balloon__icon{width:clamp(44px,8vw,64px) !important}
.c-balloon .c-balloon__iconImg{width:clamp(44px,8vw,64px) !important;height:clamp(44px,8vw,64px) !important}
.c-balloon .-circle>.c-balloon__iconImg{border:0}
.c-balloon__body{padding:0 10px !important}
.c-balloon__text{border-radius:12px !important;padding:10px 14px !important;box-shadow:0 2px 4px rgba(0,0,0,.05);max-width:75% !important;font-size:clamp(13px,1.8vw,14px) !important;line-height:1.7;color:#333;font-family:"Hiragino Sans","Noto Sans JP",sans-serif}
.c-balloon__shapes{display:none}
.c-balloon[data-col="green"] .c-balloon__text{background:#dff8e1;border-color:#dff8e1}
.c-balloon[data-col="yellow"] .c-balloon__text{background:#fef9c3;border-color:#fef9c3}
.c-balloon[data-col="gray"] .c-balloon__text{background:#fff5eb;border-color:#fff5eb}

/* ── 太字＝黄マーカー（2026-10-10確定）。STUDIO時代の「太字は淡黄の背景」を引き継ぐ。
   色 #fff1a8、文字の下6割に塗る。見出し・ふきだし・商品枠の中の太字は塗らない ── */
.post_content strong,
.editor-styles-wrapper strong {
	font-weight: 700;
	background: linear-gradient(transparent 40%, #fff1a8 40%);
	padding: 0 .08em;
}
.editor-styles-wrapper h1 strong,
.editor-styles-wrapper h2 strong,
.editor-styles-wrapper h3 strong,
.editor-styles-wrapper h4 strong,
.editor-styles-wrapper .c-balloon strong,
.post_content h1 strong,
.post_content h2 strong,
.post_content h3 strong,
.post_content h4 strong,
.post_content .c-balloon strong {
	background: none;
	padding: 0;
}

/* ── SWELLの「マーカー」4色も同じ太さ・同じ明るさにそろえる（黄＝太字と同色、緑＝補足、桃＝注意、空＝数字） ── */
.post_content .mark_yellow { background: linear-gradient(transparent 40%, #fff1a8 40%) !important; }
.post_content .mark_green  { background: linear-gradient(transparent 40%, #d9eddb 40%) !important; }
.post_content .mark_orange { background: linear-gradient(transparent 40%, #fbe1e6 40%) !important; }
.post_content .mark_blue   { background: linear-gradient(transparent 40%, #dbeef7 40%) !important; }
:root {
	--color_mark_yellow: #fff1a8;
	--color_mark_green: #d9eddb;
	--color_mark_orange: #fbe1e6;
	--color_mark_blue: #dbeef7;
}

/* ── 商品枠（案C 木札＋ひとこと・2026-10-10決定・1.6.0）。SWELLの広告タグ（.p-adBox）を包んで見た目を変える。
   差し込み（is-insert）＝写真大・木札「話に出た品」／おまけ（is-omake）＝写真小・木札「手元に置くなら」 ── */
.mm-product {
	position: relative;
	margin: 30px 0;
	background: #fbfaf7;
	border: 1px solid #e2ded6;
	border-radius: 12px;
	padding: 22px 14px 14px;
}
.mm-product::before {
	content: attr(data-label);
	position: absolute;
	top: -11px;
	left: 12px;
	background: #e2c9a3;
	color: #3a2210;
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
	padding: 3px 10px;
	border-radius: 3px;
	letter-spacing: .1em;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
}
.mm-product.is-empty { color: #999; font-size: 13px; }
.mm-product.is-empty::before { content: "商品枠"; }
.mm-product__lead {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--mm-green-deep);
	font-weight: 700;
}
.mm-product .p-adBox { max-width: none; margin: 0; }
.mm-product .p-adBox__body { display: grid; gap: 12px; align-items: center; }
.mm-product.is-omake .p-adBox__body { grid-template-columns: 96px minmax(0, 1fr); }
.mm-product.is-insert .p-adBox__body { grid-template-columns: minmax(0, 1fr); }
.mm-product .p-adBox__img { flex: none; margin: 0; padding: 0; width: auto; }
.mm-product .p-adBox__img img {
	width: 100%;
	max-width: none;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid #eee;
	background: #fff;
	margin: 0;
}
.mm-product.is-insert .p-adBox__img img { aspect-ratio: 16 / 10; max-height: 320px; object-fit: contain; }
.mm-product .p-adBox__details { margin: 0; display: block; }
.mm-product .p-adBox__name { font-size: 15px; line-height: 1.5; margin: 0 0 4px; color: #333; font-weight: 700; }
.mm-product .p-adBox__price { font-size: 14px; color: #333; opacity: 1; font-weight: 400; }
.mm-product .p-adBox__price b { font-size: 18px; color: #c0392b; font-variant-numeric: tabular-nums; }
.mm-product .p-adBox__price small { display: block; font-size: 11px; color: #999; }
.mm-product .p-adBox__desc { font-size: 13px; color: #666; margin: 4px 0 0; line-height: 1.6; }
.mm-product .p-adBox__btns { padding-top: 12px; margin: 0; gap: 8px; }
.mm-product .p-adBox__btn {
	border-radius: 999px;
	font-weight: 700;
	margin: 0;
	padding: 12px 14px;
	font-size: 15px;
	text-shadow: none;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
.mm-product .p-adBox__btn.-btn1, .mm-items .p-adBox__btn.-btn1 { background: #bf0000; }
.mm-product[data-kind1="a8"] .p-adBox__btn.-btn1, .mm-product[data-kind1="official"] .p-adBox__btn.-btn1, .mm-product[data-kind1="other"] .p-adBox__btn.-btn1,
.mm-items__row[data-kind1="a8"] .p-adBox__btn.-btn1, .mm-items__row[data-kind1="official"] .p-adBox__btn.-btn1, .mm-items__row[data-kind1="other"] .p-adBox__btn.-btn1 { background: #006b35; }
.mm-product[data-kind2="amazon"] .p-adBox__btn.-btn2 { background: #f3a847; color: #222; }
.mm-product[data-kind2="a8"] .p-adBox__btn.-btn2, .mm-product[data-kind2="official"] .p-adBox__btn.-btn2, .mm-product[data-kind2="other"] .p-adBox__btn.-btn2 { background: #006b35; }

/* 末尾の再掲「この記事に出てきた品」（自動） */
.mm-items { margin: 30px 0; border-top: 1px solid #e2ded6; padding-top: 10px; }
.mm-items__ttl {
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--mm-green-deep);
	letter-spacing: .08em;
	margin: 0 0 6px;
}
.mm-items .p-adBox.mm-items__row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	max-width: none;
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px dashed #e2ded6;
}
.mm-items__img { padding: 0; margin: 0; width: 56px; }
.mm-items__img img { width: 56px; height: 56px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 6px; border: 1px solid #eee; background: #fff; margin: 0; }
.mm-items__name { font-size: 13px; font-weight: 700; line-height: 1.4; color: #333; }
.mm-items__price { font-size: 12px; color: #666; }
.mm-items__price b { color: #c0392b; font-size: 14px; }
.mm-items__price small { display: none; }
.mm-items .p-adBox__btn.mm-items__btn {
	display: inline-block;
	flex: none;
	margin: 0;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	text-shadow: none;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .12);
}
@media (max-width: 480px) {
	.mm-items .p-adBox.mm-items__row { grid-template-columns: 48px minmax(0, 1fr); }
	.mm-items .p-adBox__btn.mm-items__btn { grid-column: 2; justify-self: start; }
}
/* 編集画面 */
.mm-product-edit .mm-product { margin: 8px 0; }

/* ── 商品枠のPC幅（600px以上）。写真を左、文字とボタンを右。ボタンは幅なり（1.6.2） ── */
@media (min-width: 600px) {
.mm-product { padding: 26px 22px 20px; }
.mm-product__lead { font-size: 14px; margin-bottom: 12px; }
.mm-product.is-omake .p-adBox__body { grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }
.mm-product.is-insert .p-adBox__body { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center; }
.mm-product.is-insert .p-adBox__img img { aspect-ratio: 1 / 1; max-height: none; object-fit: contain; }
.mm-product .p-adBox__name { font-size: 17px; margin-bottom: 6px; }
.mm-product .p-adBox__price { font-size: 15px; }
.mm-product .p-adBox__price b { font-size: 21px; }
.mm-product .p-adBox__btns { justify-content: flex-start; padding-top: 14px; }
.mm-product .p-adBox__btn { flex: 0 1 auto; min-width: 220px; padding: 12px 30px; }
.mm-items .p-adBox.mm-items__row { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; }
.mm-items__img, .mm-items__img img { width: 64px; height: 64px; }
.mm-items__name { font-size: 14px; }
}

/* ── 木札の文言と大きさ（1.6.3）：差し込みは大きく「関連する商品」、おまけは小さく「おまけ」、末尾の再掲は「本文で紹介した商品」 ── */
.mm-product.is-insert::before { content: "関連する商品"; font-size: 14px; padding: 4px 14px; top: -13px; letter-spacing: .12em; }
.mm-product.is-omake::before { content: "おまけ"; font-size: 11px; padding: 2px 9px; top: -9px; letter-spacing: .08em; }
.mm-product.is-insert { padding-top: 26px; }
.mm-product.is-omake { padding-top: 18px; }

/* ── 記事ページの題名まわり（2026-10-10決定・1.6.4）。SWELLのタイトルエリア（post_title_pos=top）に出す。
   PC：淡緑の帯に 木札 → 題名 → タグ、右にアイキャッチを丸く。スマホ：帯と写真なし、木札 → 題名 → タグ → 短い線 ── */
.l-topTitleArea { background: var(--mm-green); padding: 0; margin: 0; }
.l-topTitleArea .l-topTitleArea__body { padding: 26px 0 24px; }
.mm-head { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 24px; align-items: center; }
.mm-head:not(.has-img) { grid-template-columns: minmax(0, 1fr); }
.mm-head__fudas { margin: 0 0 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.mm-head__fuda {
	display: inline-block;
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .18em;
	background: #e2c9a3;
	color: #3a2210;
	padding: 4px 12px;
	border-radius: 3px;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .12);
	text-decoration: none;
}
.mm-head__fuda:hover { color: #3a2210; transform: rotate(-3deg); }
.mm-head__ttl {
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 1.45;
	color: #3e3935;
	margin: 0;
	text-wrap: balance;
}
.mm-head__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; }
.mm-head__tag { font-size: 11px; padding: 4px 10px; text-decoration: none; }
.mm-head__tag:hover { color: #fff; opacity: .85; }
.mm-head__pr { margin: 10px 0 0; font-size: 11px; color: #8a847c; }
.mm-head__img img {
	width: 200px;
	height: 200px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 14px;
	border: 3px solid #fff;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .08);
	display: block;
	margin: 0;
}
@media (max-width: 959px) {
	.l-topTitleArea { background: none; }
	.l-topTitleArea .l-topTitleArea__body { padding: 18px 0 0; }
	.mm-head, .mm-head:not(.has-img) { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.mm-head__img { display: none; }
	.mm-head__fuda { font-size: 12px; padding: 3px 10px; }
	.mm-head__fudas { margin-bottom: 10px; }
	.mm-head__ttl { font-size: 21px; }
	.mm-head__text::after { content: ""; display: block; width: 46px; height: 3px; background: var(--mm-green-deep); border-radius: 2px; margin: 14px 0 18px; }
}

/* ── タイトルエリアのSWELL既定（アイキャッチの背景・暗いフィルター・11emの高さ）を外す。帯の中身は記事幅にそろえる（1.6.5） ── */
.l-topTitleArea { min-height: 0 !important; padding: 0 !important; margin: 0 !important; background: var(--mm-green) !important; overflow: visible !important; }
.l-topTitleArea .l-topTitleArea__img, .l-topTitleArea::before, .l-topTitleArea::after, .l-topTitleArea.c-filterLayer::before { display: none !important; }
.l-topTitleArea .l-topTitleArea__body.l-container { max-width: var(--article_size, 900px); padding: 26px var(--swl-pad_post_content, 16px) 24px; box-sizing: border-box; }
.l-topTitleArea .mm-head__ttl { color: #3e3935 !important; text-shadow: none !important; }
@media (max-width: 959px) {
.l-topTitleArea { background: none !important; }
.l-topTitleArea .l-topTitleArea__body.l-container { padding: 18px 16px 0; }
}

/* 記事末尾の「Uncategorized・タグ」の行は出さない（カテゴリー廃止。タグは題名の下にある・1.6.5） */
.p-articleFoot .p-articleMetas.-bottom { display: none; }

/* ── 記事末尾のゆかワニ紹介（「この記事を書いた人」の代わり・1.6.5） ── */
.mm-author { margin: 2.5em 0; }
.mm-author__box { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; background: #fbfaf7; border: 1px solid #e2ded6; border-radius: 12px; padding: 18px 20px; }
.mm-author__img img { width: 120px; height: 120px; object-fit: cover; object-position: 50% 100%; border-radius: 50%; background: var(--mm-green); border: 3px solid #fff; box-shadow: 0 2px 0 rgba(0, 0, 0, .08); display: block; margin: 0; }
.mm-author__name { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 700; font-size: 16px; letter-spacing: .12em; color: #3e3935; margin: 0 0 6px; }
.mm-author__desc { font-size: 13.5px; line-height: 1.8; color: #555; margin: 0; }
@media (max-width: 599px) {
	.mm-author__box { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 14px 14px; }
	.mm-author__img img { width: 84px; height: 84px; }
}

/* ── 記事の題名まわり 第2版＝案H（2026-10-10確定）。濃緑の帯に白の角ゴシック、木札、右に写真。スマホも帯のまま写真なし。
   前の淡緑の帯（上の .mm-head 節）をこの節で上書きしている ── */
.l-topTitleArea { background: var(--mm-green-deep) !important; }
.l-topTitleArea .l-topTitleArea__body.l-container { padding: 30px var(--swl-pad_post_content, 16px) 28px; }
.mm-head { grid-template-columns: minmax(0, 1fr) 180px; gap: 26px; }
.mm-head__fuda { box-shadow: 0 1px 0 rgba(0, 0, 0, .3); }
.l-topTitleArea .mm-head__ttl { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif !important; font-weight: 700; font-size: 27px; line-height: 1.5; color: #fff !important; letter-spacing: .03em; }
.mm-head__tags { gap: 0 14px; margin-top: 10px; }
.mm-head__tag, .mm-head__tag:hover { background: none; color: #d6e6d8; font-size: 12px; padding: 0; letter-spacing: .06em; opacity: 1; }
.mm-head__img img { width: 180px; height: 180px; border-radius: 4px; border: 2px solid rgba(255, 255, 255, .7); box-shadow: none; }
.mm-head__pr { color: #c9d9cb; }
@media (max-width: 959px) {
.l-topTitleArea { background: var(--mm-green-deep) !important; }
.l-topTitleArea .l-topTitleArea__body.l-container { padding: 22px 16px 20px; }
.l-topTitleArea .mm-head__ttl { font-size: 21px; }
.mm-head__text::after { display: none; }
.mm-head, .mm-head.has-img { grid-template-columns: minmax(0, 1fr) !important; }
.l-topTitleArea ~ .l-content { margin-top: 18px; }   /* 題名の帯がある記事ページだけ。トップや固定ページには空きを作らない（10-12） */
}

/* 題名の帯を本文の幅に収める（PCのみ・2026-10-11・1.7.5）。スマホは帯のまま */
@media (min-width: 960px) {
.l-topTitleArea { background: none !important; }
.l-topTitleArea .l-topTitleArea__body.l-container { max-width: var(--article_size, 900px); background: var(--mm-green-deep); border-radius: 5px; padding: 32px 32px 30px; margin: 28px auto 0; }
.l-topTitleArea ~ .l-content { margin-top: 26px; }   /* 同上。以前は .l-content 全体に効いてトップの上に白い隙間ができていた */
}

/* ── トップの直し（2026-10-10・1.6.8）：検索と三本線をロゴの高さにそろえる／ヒーローのキャラを560pxに／
   「この木、なんの木」の木札は長い名前でも切れないよう、？？？と名前を同じ升に重ねて大きい方に合わせる ── */
@media (min-width: 960px) {
.l-header__inner { align-items: center !important; }
.l-header__customBtn.sp_, .l-header__menuBtn.sp_ { align-self: center; margin-top: 0 !important; }
body .mk-top .mk-hero__visual dotlottie-wc, body .mk-top .mk-hero__visual lottie-player, body .mk-top .mk-hero__visual img { width: min(100%, 600px) !important; height: auto !important; aspect-ratio: 1 / 1; }
body .mk-top .mk-hero .wp-block-columns { align-items: center !important; }
body .mk-top .mk-hero .wp-block-columns > .wp-block-column:first-child { flex-basis: 42% !important; }
body .mk-top .mk-hero .wp-block-columns > .wp-block-column:last-child { flex-basis: 58% !important; }
body .mk-top .mk-hero__visual dotlottie-wc { margin-top: -150px !important; margin-bottom: -20px !important; }
}
.mm-visual__fuda { display: inline-grid; }
.mm-visual__fuda span { grid-area: 1 / 1; }
.mm-visual__a { position: static; }
.mm-visual .mk-sec__head { margin-bottom: 1.2rem; }

/* ── トップ「たのしい山歩き」（2026-10-10決定・1.6.9）。道・キャラ・立て札。見本は claude.ai/artifact/F87dCNqu1F6sZ8yst9To2T ── */
.mm-road { position: relative; max-width: 1000px; margin: 20px auto 30px; aspect-ratio: 1 / var(--ratio); isolation: isolate; }
.mm-road.is-tall { max-width: 250px; margin: 0; }
.mm-road__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; margin: 0; }
.mm-road.is-flip .mm-road__bg { transform: scaleX(-1); }
.mm-road__guide { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-road__guide path { fill: none; stroke: none; }
.mm-road__ch { position: absolute; z-index: 4; left: 0; top: 0; width: calc(var(--cw, .1) * 100%); height: auto; max-width: none; margin: 0; transform: translate(-50%, -100%); will-change: transform; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .12)); }
.mm-road[data-view="top"] .mm-road__ch { transform: translate(-50%, -50%); }
.mm-road.is-flipc .mm-road__ch { transform: translate(-50%, -100%) scaleX(-1); }
.mm-road[data-view="top"].is-flipc .mm-road__ch { transform: translate(-50%, -50%) scaleX(-1); }
.mm-road__ch.is-walk { animation: mm-walk .55s ease-in-out infinite; }
@keyframes mm-walk { 0%, 100% { margin-top: 0; rotate: -2deg; } 50% { margin-top: -5px; rotate: 2deg; } }
.mm-road__sign { position: absolute; z-index: 3; width: 13%; transform: translate(-50%, -100%); opacity: 0; transition: opacity .5s; container-type: inline-size; }
.mm-road.is-tall .mm-road__sign { width: 34%; }
.mm-road__sign.is-on { opacity: 1; }
.mm-road__sign img { width: 100%; height: auto; display: block; margin: 0; }
.mm-road__board { position: absolute; left: 50%; top: 27%; height: 42%; width: 84%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; padding: 0 6%; box-sizing: border-box; text-align: center; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 700; font-size: clamp(8px, 1.1vw, 13px); font-size: 11.5cqw; word-break: keep-all; overflow-wrap: normal; line-height: 1.25; color: #3a2210; letter-spacing: .04em; }
/* 立て札の文字は札の幅に比例（cqw）。自動改行はせず、文言の「|」でだけ折る（1.7.4） */
/* 大項目の見出し（案A・緑） */
.post_content .mm-sec { margin: 0 0 22px; }
.post_content .mm-sec__en { display: inline-block; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-size: 11px; letter-spacing: .22em; color: var(--mm-green-deep); background: var(--mm-green); padding: 2px 10px; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, .08); font-weight: 700; }
body .post_content .mm-sec__ttl { font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif !important; font-weight: 700 !important; font-size: 24px !important; letter-spacing: .2em !important; color: #3e3935 !important; margin: 4px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; line-height: 1.4 !important; counter-increment: none !important; display: block !important; }
body .post_content .mm-sec__ttl::before { content: none !important; display: none !important; }
body .post_content .mm-sec__ttl::after { content: "" !important; display: block !important; width: 54px; height: 5px; margin-top: 10px; border-radius: 3px; background: var(--mm-green-deep); position: static !important; }
/* 「もくめディアとは」＝左に文章＋特徴4点（案A 道しるべ・2026-10-11決定）、右に縦の森道 */
.mm-about__lead { line-height: 2; font-size: 14.5px; margin: 0 0 22px; }
.mm-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; position: relative; }
.mm-points::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; border-left: 2px dashed #c9dccc; }
.mm-points li { display: flex; gap: 16px; align-items: flex-start; opacity: .55; transition: opacity .5s; margin: 0; position: relative; }
.mm-points li.is-on { opacity: 1; }
.mm-points .num { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--mm-green-deep); color: var(--mm-green-deep); font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-weight: 700; font-size: 16px; line-height: 32px; text-align: center; box-sizing: border-box; transition: background .4s, color .4s; }
.mm-points li.is-on .num { background: var(--mm-green-deep); color: #fff; }
.mm-points b { display: block; font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", sans-serif; font-size: 16px; letter-spacing: .06em; color: #3e3935; margin: 6px 0 2px; }
.mm-points p { margin: 0; font-size: 13.5px; color: #666; line-height: 1.8; }
.mm-about .wp-block-columns { gap: 40px; }
.mm-about .mm-road.is-tall { margin: 0 0 0 auto; }
@media (max-width: 760px) {
	.mm-road { margin: 12px 0 20px; }
	.mm-road.is-tall { max-width: 200px; margin: 10px auto 0; }
	.mm-about .wp-block-columns { gap: 10px; }
	.mm-about .mm-road.is-tall { margin: 10px auto 0; }
}
@media (prefers-reduced-motion: reduce) { .mm-road__ch.is-walk { animation: none; } .mm-points li, .mm-road__sign { transition: none; } }

/* ── ページの下地は真っ白に（SWELL既定は #fdfdfd。白い帯や道の絵と継ぎ目が見えるため・1.7.1） ── */
body, .l-content, #main_content { background-color: #ffffff; }

/* ── スマホ幅の直し（2026-10-11・公開前チェック・1.7.6）：ヒーローを小さく／立て札を読める大きさに／大項目の見出しの折れ／カードの木札が長い名前で切れる ── */
@media (max-width: 599px) {
body .mk-top .mk-hero__visual dotlottie-wc, body .mk-top .mk-hero__visual lottie-player, body .mk-top .mk-hero__visual img { width: 240px !important; height: 240px !important; margin: -24px auto 0 !important; }
body .mk-top .mk-hero__logo img { width: min(100%, 260px) !important; }
body .mk-top .mk-hero .wp-block-columns { gap: 0 !important; }
.mm-road__sign { width: 24%; }
.mm-road.is-tall .mm-road__sign { width: 46%; }
body .post_content .mm-sec__ttl { font-size: 20px !important; letter-spacing: .1em !important; }
.mm-fuda { font-size: 10px; letter-spacing: .06em; padding: 12px 6px 6px; }
.mm-fuda--2 { left: 38px; }
}