/*
 * No.04 KAZAMIMI：絵本と、冒険の地図。
 * 青い空に流れる雲、風の線、草の丘。丘の上にティオが立っている。
 * 文字は手書きふう（Yusei Magic）と、まるいゴシック。カードはテープで貼った紙。
 * 問いかけの帯は、ティオの毛の金色一色。
 */
.theme-kazamimi {
	--bg: #fbf4e4; --bg-2: #fffaf0; --card: #fffdf6;
	--line: #ead9b4; --text: #3e2f1f; --text-dim: #7a6650;
	--accent-1: #b9791c; --accent-2: #537b43; --gold: #b9791c;
	--font: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "BIZ UDPGothic", sans-serif;
	--font-hand: "Yusei Magic", "Zen Maru Gothic", sans-serif;
	--radius: 18px;
}
.theme-kazamimi .site-header { background: color-mix(in srgb, #fbf4e4 88%, transparent); }
.theme-kazamimi .logo__mark { border-color: var(--accent-1); color: var(--accent-1); }
.theme-kazamimi .work-back { position: relative; z-index: 2; }

/* ---- 看板：絵本の空 ---- */
.theme-kazamimi main > .wrap:first-child { position: relative; z-index: 2; }
.theme-kazamimi .work-hero {
	min-height: 640px; padding: 90px 0 220px; margin-top: -60px; padding-top: 150px;
	background: linear-gradient(#ddebd4 0%, #e8f1e2 55%, #fdf1cf 100%);
}
.theme-kazamimi .work-hero::before { content: none; }
.sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.sky__sun {
	position: absolute; right: 12%; top: 70px; width: 120px; height: 120px; border-radius: 50%;
	background: radial-gradient(circle, #fff6c9 0 45%, #ffd86b 46% 100%);
	box-shadow: 0 0 0 18px rgb(255 216 107 / 0.25), 0 0 0 40px rgb(255 216 107 / 0.12);
}
.sky__cloud {
	position: absolute; height: 34px; border-radius: 999px; background: #ffffff;
	box-shadow: 30px -18px 0 6px #ffffff, 64px -6px 0 2px #ffffff;
	animation: cloud-drift linear infinite;
}
.sky__cloud--1 { top: 120px; width: 120px; animation-duration: 70s; animation-delay: -10s; }
.sky__cloud--2 { top: 220px; width: 90px; animation-duration: 90s; animation-delay: -55s; opacity: 0.85; }
.sky__cloud--3 { top: 60px; width: 70px; animation-duration: 110s; animation-delay: -80s; opacity: 0.7; }
@keyframes cloud-drift { from { transform: translateX(-200px); } to { transform: translateX(110vw); } }

.theme-kazamimi .work-hero__wind { position: absolute; left: 44%; top: 120px; width: 340px; height: 180px; opacity: 0.9; }
.theme-kazamimi .work-hero__wind path { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 60 260; animation: wind-flow 5s linear infinite; }
.theme-kazamimi .work-hero__wind path:nth-child(2) { animation-delay: -1.6s; }
.theme-kazamimi .work-hero__wind path:nth-child(3) { animation-delay: -3.2s; }
@keyframes wind-flow { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }

.hills { position: absolute; left: 0; bottom: 0; width: 100%; height: 260px; }
.hills__back { fill: #cfe3a6; }
.hills__mid { fill: #e8c46a; }
.hills__front { fill: #fbf4e4; }
.sky__tio {
	position: absolute; right: 16%; bottom: 46px; width: 170px; height: auto;
	transform-origin: 50% 100%; animation: tio-hop 3.2s ease-in-out infinite;
	filter: drop-shadow(0 8px 0 rgb(62 47 31 / 0.12));
}
@keyframes tio-hop {
	0%, 70%, 100% { transform: translateY(0) rotate(0); }
	78% { transform: translateY(-18px) rotate(-4deg); }
	86% { transform: translateY(0) rotate(2deg); }
}

.theme-kazamimi .work-hero__no { color: #537b43; }
.theme-kazamimi .work-hero__title {
	font-family: var(--font-hand); font-weight: 400; font-size: clamp(44px, 10.5vw, 136px); /* 8文字の題名が2行に収まる大きさ */
	color: #8a5a12; -webkit-text-stroke: 10px #ffffff; paint-order: stroke fill;
	text-shadow: 0 8px 0 rgb(138 90 18 / 0.18);
	transform: rotate(-3deg); transform-origin: left bottom;
}
.theme-kazamimi .work-hero__title span { display: inline-block; } /* 「カザミミの」「ティオ」の間でだけ折り返す */
.theme-kazamimi .work-hero__en { color: #537b43; font-size: 16px; }
.theme-kazamimi .work-hero__type { background: #ffffff; border-color: #ffffff; color: var(--accent-1); font-weight: 700; }
.theme-kazamimi .work-hero__catch { font-family: var(--font-hand); font-weight: 400; color: #3e2f1f; font-size: clamp(22px, 3vw, 30px); }

/* ---- 問いかけ：実った麦の金色 ---- */
.theme-kazamimi .work-question {
	background: #e8b84a; color: #3e2f1f; border: 0;
	background-image: radial-gradient(rgb(255 255 255 / 0.25) 2px, transparent 2.5px);
	background-size: 22px 22px;
}
.theme-kazamimi .work-question p { font-family: var(--font-hand); font-weight: 400; }
.theme-kazamimi .work-question p::before, .theme-kazamimi .work-question p::after { color: #ffffff; opacity: 0.9; }

/* ---- 章の見出し：手書きの見出しと、空色の小さな英字 ---- */
.theme-kazamimi .work-section + .work-section { border-top: 0; }
.theme-kazamimi .work-section__en {
	font-family: var(--font-hand); font-size: 20px; letter-spacing: 0.2em; line-height: 1.4;
	color: var(--accent-2); -webkit-text-stroke: 0;
}
.theme-kazamimi .work-section__title {
	font-family: var(--font-hand); font-weight: 400; font-size: clamp(30px, 4.4vw, 44px); margin-top: 2px;
	color: #6b4510;
}
.theme-kazamimi .work-section__title::before { /* 風の印 */
	width: 30px; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 30 30%27%3E%3Cpath d=%27M3 12 H18 C24 12 25 4 19 4 C15 4 15 9 18 9 M3 19 H23 C28 19 28 26 23 26 C20 26 20 22 22 22%27 fill=%27none%27 stroke=%27%233f93bd%27 stroke-width=%272.6%27 stroke-linecap=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.theme-kazamimi .work-story p { font-size: 17px; line-height: 2.1; }

/* カード：テープで貼った紙。少しずつ傾ける */
.theme-kazamimi .work-term,
.theme-kazamimi .work-cast__item,
.theme-kazamimi .work-media__item {
	position: relative; border: 0; border-radius: 6px; background: var(--card);
	box-shadow: 0 2px 0 var(--line), 0 14px 30px -18px rgb(62 47 31 / 0.35);
	transform: rotate(-1deg);
}
.theme-kazamimi .work-term:nth-child(even),
.theme-kazamimi .work-cast__item:nth-child(even),
.theme-kazamimi .work-media__item:nth-child(even) { transform: rotate(1.2deg); }
.theme-kazamimi .work-term::before,
.theme-kazamimi .work-cast__item::before,
.theme-kazamimi .work-media__item::before { /* マスキングテープ */
	content: ""; position: absolute; left: 50%; top: -10px; width: 84px; height: 22px; translate: -50% 0; rotate: -3deg;
	background: rgb(126 200 227 / 0.55);
}
.theme-kazamimi .work-term:nth-child(3n+2)::before,
.theme-kazamimi .work-cast__item:nth-child(3n+2)::before,
.theme-kazamimi .work-media__item:nth-child(3n+2)::before { background: rgb(232 184 74 / 0.6); rotate: 4deg; }
.theme-kazamimi .work-term:nth-child(3n)::before,
.theme-kazamimi .work-cast__item:nth-child(3n)::before,
.theme-kazamimi .work-media__item:nth-child(3n)::before { background: rgb(255 138 31 / 0.45); }
.theme-kazamimi .work-term:hover,
.theme-kazamimi .work-cast__item:hover,
.theme-kazamimi .work-media__item:hover { transform: rotate(0) translateY(-4px); box-shadow: 0 2px 0 var(--line), 0 24px 40px -20px rgb(62 47 31 / 0.4); }
.theme-kazamimi .work-term__name, .theme-kazamimi .work-cast__name, .theme-kazamimi .work-media__title { font-family: var(--font-hand); font-weight: 400; font-size: 19px; color: #6b4510; }
.theme-kazamimi .work-media__item { border: 0; }

.theme-kazamimi .work-portrait { background: linear-gradient(#c9e9f5, #fdf1cf); border: 6px solid #ffffff; box-shadow: 0 14px 30px -18px rgb(62 47 31 / 0.4); border-radius: 50%; aspect-ratio: 1; }
.theme-kazamimi .work-portrait img { width: 76%; height: auto; }
.theme-kazamimi .work-name { font-family: var(--font-hand); font-weight: 400; font-size: 44px; color: #8a5a12; }
.theme-kazamimi .work-profile li { border-bottom: 2px dotted var(--line); }
.theme-kazamimi .work-quote { font-family: var(--font-hand); font-weight: 400; font-size: 22px; border-left: 0; padding: 14px 22px; background: #ffffff; border-radius: 20px; position: relative; display: inline-block; }
.theme-kazamimi .work-quote::after { content: ""; position: absolute; left: 30px; bottom: -12px; border: 12px solid transparent; border-top-color: #ffffff; border-bottom: 0; }
.theme-kazamimi .btn--primary, .theme-kazamimi .buy:not(.buy--soon) { color: #ffffff; }
.theme-kazamimi .buy--soon { background: #ffffff; }
.theme-kazamimi .hero-mini__type { color: var(--text); }

/* ---- 旅の地図：羊皮紙の上に、番号つきの印を点線でつなぐ ---- */
.journey {
	counter-reset: stop;
	display: grid; grid-template-columns: repeat(7, 1fr); gap: 0;
	margin: 0; padding: 40px 28px 34px; list-style: none;
	background: #f6e7c1;
	background-image: radial-gradient(rgb(185 121 28 / 0.08) 1px, transparent 1.5px);
	background-size: 12px 12px;
	border-radius: 10px; box-shadow: inset 0 0 0 2px #e3cc96, inset 0 0 60px rgb(185 121 28 / 0.18);
}
.journey li { position: relative; counter-increment: stop; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.journey li::before {
	content: counter(stop); position: relative; z-index: 1;
	display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
	background: #fffdf6; border: 3px solid var(--accent-1); color: var(--accent-1);
	font-family: var(--font-hand); font-size: 20px;
}
.journey li + li::after { /* 前の印からの点線 */
	content: ""; position: absolute; top: 23px; right: 50%; width: 100%; border-top: 3px dashed var(--accent-1);
}
.journey li:first-child::before { background: var(--accent-1); color: #ffffff; content: "★"; }
.journey li:last-child::before { background: #6f9a3a; border-color: #6f9a3a; color: #ffffff; content: "🌳"; font-size: 22px; }
.journey__place { font-family: var(--font-hand); font-size: 16px; color: #6b4510; white-space: nowrap; }
.journey__note { margin: 18px 0 0; color: var(--text-dim); font-size: 15px; }

@media (max-width: 760px) {
	.theme-kazamimi .work-hero { min-height: 0; padding-bottom: 200px; }
	.sky__sun { width: 70px; height: 70px; right: 8%; top: 80px; }
	.theme-kazamimi .work-hero__wind { left: auto; right: -60px; top: 160px; width: 220px; opacity: 0.6; }
	.sky__tio { width: 110px; right: 8%; bottom: 40px; }
	.hills { height: 180px; }
	.journey { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; }
	.journey li { flex-direction: row; text-align: left; }
	.journey li + li::after { top: auto; bottom: 100%; right: auto; left: 21px; width: 0; height: 18px; border-top: 0; border-left: 3px dashed var(--accent-1); }
}
@media (prefers-reduced-motion: reduce) {
	.sky__cloud, .sky__tio, .theme-kazamimi .work-hero__wind path { animation: none; }
}