/*
 * 作品ページの共通レイアウト。
 * 色や雰囲気は、body に付けるクラス（theme-glitcher など）で作品ごとに切り替える。
 * 土台の部品（ヘッダー・フッター・ボタン）は style.css を使う。
 */

/* ---- 共通の並び ---- */
.work-back { display: inline-flex; align-items: center; gap: 8px; margin: 28px 0 0; color: var(--text-dim); font-size: 14px; text-decoration: none; }
.work-back:hover { color: var(--text); }

.work-hero { position: relative; padding: 72px 0 96px; overflow: hidden; }
.work-hero__inner { position: relative; z-index: 1; }
.work-hero__no { margin: 0; color: var(--text-dim); font-size: 13px; letter-spacing: 0.3em; }
.work-hero__title { margin: 8px 0 0; font-size: clamp(48px, 9vw, 104px); line-height: 1.1; letter-spacing: 0.02em; }
.work-hero__en { display: block; margin-top: 10px; color: var(--text-dim); font-size: clamp(13px, 1.6vw, 16px); letter-spacing: 0.4em; font-weight: 400; }
.work-hero__type {
	display: inline-block; margin-top: 22px; padding: 3px 14px;
	border: 1px solid var(--accent-1); border-radius: 999px;
	color: var(--accent-1); font-size: 13px; letter-spacing: 0.08em;
}
.work-hero__catch { margin: 26px 0 0; font-size: clamp(20px, 3vw, 28px); font-weight: 700; line-height: 1.6; }

.work-question { padding: 88px 0; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.work-question p { margin: 0; font-size: clamp(22px, 3.6vw, 34px); font-weight: 700; line-height: 1.6; }

.work-section { padding: 88px 0; }
.work-section + .work-section { border-top: 1px solid var(--line); }
.work-section__en { display: block; color: var(--accent-1); font-size: 12px; letter-spacing: 0.3em; }
.work-section__title { margin: 6px 0 32px; font-size: clamp(24px, 3.4vw, 32px); }
.work-story p { max-width: 680px; margin: 0 0 14px; font-size: 16px; line-height: 2; }

.work-terms { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 40px; }
.work-term { padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.work-term__name { margin: 0; font-weight: 700; color: var(--accent-1); }
.work-term__text { margin: 8px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.8; }

.work-hero-profile { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.work-portrait {
	aspect-ratio: 3 / 4; border-radius: var(--radius);
	background: var(--card); border: 1px solid var(--line);
	display: grid; place-items: center; overflow: hidden;
	color: var(--text-dim); font-size: 13px;
}
.work-portrait svg, .work-portrait img { width: 78%; height: auto; }
.work-name { margin: 0; font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; }
.work-name__ruby { display: block; color: var(--text-dim); font-size: 14px; font-weight: 400; letter-spacing: 0.15em; }
.work-profile { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.work-profile li { display: grid; grid-template-columns: 7em 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.work-profile li span:first-child { color: var(--text-dim); }
.work-quote { margin: 24px 0 0; padding-left: 16px; border-left: 3px solid var(--accent-1); font-size: 17px; font-weight: 700; }

.work-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.work-cast__item { padding: 22px 24px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.work-cast__name { margin: 0; font-weight: 700; font-size: 17px; }
.work-cast__role { margin: 2px 0 0; color: var(--accent-1); font-size: 12px; letter-spacing: 0.06em; }
.work-cast__text { margin: 10px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.8; }

.work-media { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.work-media__item { padding: 26px 24px; background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); }
.work-media__kind { margin: 0; color: var(--accent-1); font-size: 12px; letter-spacing: 0.25em; }
.work-media__title { margin: 6px 0 0; font-size: 18px; font-weight: 700; }
.work-media__text { margin: 8px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.8; }
.work-media__status { display: inline-block; margin-top: 14px; color: var(--text-dim); font-size: 12px; letter-spacing: 0.2em; }

/* 購入・視聴ボタン。発売前は .buy--soon（押せない）、発売後は <a class="buy" href="..."> にする */
.work-media__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.buy {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 40px; padding: 0 16px; border-radius: 999px;
	background: var(--accent-1); color: var(--bg); border: 1px solid var(--accent-1);
	font-size: 13px; font-weight: 700; text-decoration: none;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.buy:hover { transform: translateY(-1px); }
.buy::after { content: "↗"; font-size: 12px; }
.buy--soon {
	background: transparent; color: var(--text-dim); border-color: var(--line);
	cursor: default;
}
.buy--soon:hover { transform: none; }
.buy--soon::after { content: "準備中"; margin-left: 2px; font-size: 10px; letter-spacing: 0.1em; }
.theme-repairlark .buy:not(.buy--soon) { color: #ffffff; }

/* ほかのヒーロー：横スライドの小さなカード（中身は heroes.js が作る） */
.slider--mini .slider__track > .hero-mini { flex: 0 0 min(280px, 78%); scroll-snap-align: start; }
.slider.is-static .slider__controls { display: none; }
.hero-mini {
	position: relative; display: flex; flex-direction: column; gap: 4px;
	padding: 22px 22px 22px 26px; min-height: 170px;
	background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
	text-decoration: none; color: var(--text); overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.hero-mini::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(var(--mini-1), var(--mini-2)); }
.hero-mini:hover, .hero-mini:focus-visible { border-color: var(--mini-1); transform: translateY(-2px); }
.hero-mini__no { color: var(--text-dim); font-size: 12px; letter-spacing: 0.25em; }
.hero-mini__name { font-size: 22px; font-weight: 700; }
.hero-mini__type { align-self: flex-start; margin-top: 2px; padding: 1px 10px; border: 1px solid var(--mini-1); border-radius: 999px; color: var(--mini-1); font-size: 11px; }
.hero-mini__catch { margin-top: 8px; color: var(--text-dim); font-size: 13px; line-height: 1.7; }
.hero-mini--next { border-style: dashed; }
.hero-mini--next .hero-mini__name { color: var(--text-dim); }


@media (max-width: 760px) {
	.work-hero { padding: 48px 0 64px; }
	.work-question, .work-section { padding: 64px 0; }
	.work-hero-profile { grid-template-columns: 1fr; }
	.work-portrait { max-width: 240px; }
}

/* =========================================================
 * No.03 リペアラーク：昼の町工場。白に、蛍光ピンク（スーツの色）。設計図の方眼。（2026-10-26 オレンジから変更）
 * ========================================================= */
.theme-repairlark {
	--bg: #fff8fb; --bg-2: #ffffff; --card: #ffffff;
	--line: #f6d9e8; --text: #2b241f; --text-dim: #7a6d62;
	--accent-1: #ff1a8c; --accent-2: #ffffff; --gold: #e0006f; /* 白い文字を載せるボタンや小さい文字は、読みやすい濃いピンク */
	--font: "Hiragino Maru Gothic ProN", "BIZ UDPGothic", "Yu Gothic UI", "Meiryo", sans-serif;
}
.theme-repairlark .logo__mark { border-color: var(--accent-1); color: var(--accent-1); }
.theme-repairlark .nav a { color: var(--text-dim); }
.theme-repairlark .work-hero {
	background-color: #ffffff;
	background-image:
		linear-gradient(rgb(255 26 140 / 0.10) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 26 140 / 0.10) 1px, transparent 1px);
	background-size: 24px 24px;
	border-bottom: 1px solid var(--line);
}
.theme-repairlark .work-hero__title { color: var(--accent-1); text-shadow: 3px 3px 0 #ffffff, 5px 5px 0 rgb(255 26 140 / 0.2); }
.theme-repairlark .work-hero__gear {
	position: absolute; right: 6%; top: 50%; width: 220px; height: 220px; margin-top: -110px;
	opacity: 0.9; animation: gear-spin 18s linear infinite;
}
@keyframes gear-spin { to { transform: rotate(360deg); } }
.theme-repairlark .work-question { background: var(--accent-1); color: #ffffff; border: 0; }
.theme-repairlark .btn--primary { color: #ffffff; }
.theme-repairlark .hero-mini__type { color: var(--text); } /* 明るい背景では、黄色の文字が読みにくいため */

@media (max-width: 760px) {
	.theme-straighter .work-hero::after { right: 6%; height: 140px; opacity: 0.6; }
	.theme-repairlark .work-hero__gear { width: 140px; height: 140px; right: -30px; opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
	.theme-glitcher .work-hero__title::before, .theme-glitcher .work-hero__title::after,
	.theme-straighter .work-hero::after, .theme-repairlark .work-hero__gear { animation: none; }
}

/* =========================================================
 * 仕上げ（2026-10-28）：作品ページ共通の演出
 * 色は各テーマの --accent-1 をそのまま使うので、テーマごとの雰囲気は崩れない
 * ========================================================= */

/* 看板：奥に大きな作品番号。番号は下のテーマ別の --no で決める */
.theme-glitcher { --no: "01"; }
.theme-straighter { --no: "02"; }
.theme-repairlark { --no: "03"; }
.theme-kazamimi { --no: "04"; }
.theme-amalgam { --no: "05"; }
.work-hero { padding: 96px 0 120px; isolation: isolate; }
.work-hero::before {
	content: var(--no, "");
	position: absolute; right: -0.04em; bottom: -0.2em; z-index: -1;
	font-family: var(--font-en); font-size: clamp(220px, 34vw, 460px); line-height: 1; letter-spacing: -0.02em;
	color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--accent-1) 35%, transparent);
	pointer-events: none;
}
.work-hero__no { font-family: var(--font-en); font-size: 20px; letter-spacing: 0.2em; color: var(--accent-1); }
.work-hero__title { font-weight: 900; }
.work-hero__en { font-family: var(--font-en); font-size: clamp(18px, 2.2vw, 24px); letter-spacing: 0.4em; }
/* 開いたとき、上から順に浮かび上がる */
.work-hero__inner > div > *, .work-hero__inner > :not(div) { animation: rise 0.9s cubic-bezier(.2, .7, .2, 1) both; }
.work-hero__inner > div > :nth-child(2) { animation-delay: 0.08s; }
.work-hero__inner > div > :nth-child(3) { animation-delay: 0.16s; }
.work-hero__inner > div > :nth-child(4) { animation-delay: 0.26s; }
.work-hero__inner > div > :nth-child(5) { animation-delay: 0.36s; }
.work-hero__inner > div > :nth-child(6) { animation-delay: 0.46s; }

/* 問いかけ：大きな引用符で挟む */
.work-question { position: relative; padding: 120px 0; overflow: hidden; }
.work-question p { position: relative; display: inline-block; font-weight: 900; }
.work-question p::before, .work-question p::after {
	position: absolute; font-family: Georgia, serif; font-size: 2.6em; line-height: 1; color: var(--accent-1); opacity: 0.35;
}
.work-question p::before { content: "“"; left: -0.7em; top: -0.35em; }
.work-question p::after { content: "”"; right: -0.7em; bottom: -0.75em; }

/* 章の見出し：英字を大きく */
.work-section { padding: 110px 0; }
.work-section__en {
	font-family: var(--font-en); font-size: clamp(48px, 7vw, 88px); line-height: 0.9; letter-spacing: 0.02em;
	color: transparent; -webkit-text-stroke: 1px var(--accent-1);
}
.work-section__title { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: clamp(18px, 2.2vw, 22px); }
.work-section__title::before { content: ""; width: 30px; height: 2px; background: var(--accent-1); }

/* カード類：触れると浮いて、差し色で縁取る */
.work-term, .work-cast__item, .work-media__item, .member {
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.work-term:hover, .work-cast__item:hover, .work-media__item:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--accent-1) 50%, var(--line));
	box-shadow: 0 20px 50px -30px var(--accent-1);
}
.member:hover { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 24px 50px -28px var(--c); }
.member__img { transition: transform 0.5s cubic-bezier(.2, .7, .2, 1); }
.member:hover .member__img { transform: scale(1.04); }

.hero-mini { transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.hero-mini:hover, .hero-mini:focus-visible { box-shadow: 0 18px 40px -26px var(--mini-1); }
.hero-mini__no { font-family: var(--font-en); font-size: 15px; letter-spacing: 0.18em; color: var(--mini-1); }
.hero-mini__name { font-weight: 900; }

@media (max-width: 760px) {
	.work-hero { padding: 56px 0 80px; }
	.work-hero::before { font-size: 200px; }
	.work-question { padding: 80px 0; }
	.work-question p::before, .work-question p::after { font-size: 1.8em; }
	.work-question p::before { left: -0.3em; top: -0.6em; }
	.work-question p::after { right: -0.3em; }
	.work-section { padding: 72px 0; }
}
@media (prefers-reduced-motion: reduce) {
	.work-hero__inner > div > *, .work-hero__inner > :not(div) { animation: none; }
}


/* ほかのヒーロー：ピクトグラムのアイコン。標識のように、差し色の板に黒い絵（2026-10-28） */
.hero-mini { padding-right: 86px; }
.hero-mini__icon {
	position: absolute; right: 18px; top: 18px;
	display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
	background: var(--mini-1); color: #111318;
	box-shadow: 0 8px 20px -10px var(--mini-1);
	transition: transform 0.3s cubic-bezier(.3, 1.6, .5, 1);
}
.hero-mini__icon svg { width: 36px; height: 36px; }
.hero-mini__icon img { width: 48px; height: 48px; object-fit: contain; }
.hero-mini:hover .hero-mini__icon, .hero-mini:focus-visible .hero-mini__icon { transform: rotate(-8deg) scale(1.08); }
.hero-mini--next .hero-mini__icon { background: linear-gradient(135deg, var(--mini-1), var(--mini-2)); }

/* Adopted series emblems, shared across the five work pages. */
.work-hero__no { display: flex; align-items: center; gap: 12px; }
.work-title-icon { width: 48px; height: 48px; object-fit: contain; flex: 0 0 48px; }
.work-title-icon[src$="nut.svg"], .hero-mini__icon img[src$="nut.svg"] { transform: scale(1.22); }

/* Glitcher emblem uses a black backing in every related-work card. */
.hero-mini[href='../glitcher/'] .hero-mini__icon { background: #000000; }