@charset "UTF-8";
/*
Theme Name: 海音ミヅチ
Theme URI: https://amane-midsuchi.com/
Author: 熊谷拓哉
Author URI: https://anchovy.jp/
Description: 海音ミヅチ公式サイト用オリジナルテーマ。既存サイトのデザインを完全継承しつつWordPress化。
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: amane-midsuchi
*/

/*
クライアント要望「フォントが古い」への対応。
元CSS（css/style.css・css/colors/default.css）のシステム明朝指定を、Webフォントで上書きする。
元CSSは触らず、上書きのみで対応する。

クライアント選定（2026-05-18 → 2026-05-26 更新）：
- 見出し（h1〜h6）・メニューバー：Kaisei Opti（解星オプティ。漢字と仮名のデザイン統一感が高い）
- 本文系（.font-noto / .font-min / .font-panel / .modal-body / pre）：Noto Serif JP（明朝・可読性重視）
- テキストボックス／目次：Noto Sans JP（ゴシック・元サイトのbody標準フォント。クライアント好み）
*/
.font-noto,
.font-min,
.font-panel,
.modal-body,
pre {
	font-family: "Noto Serif JP", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/*
 * メニューバー（ヘッダー）：navbar には .font-min（Noto Serif JP）が付くが、
 * クライアント要望でヘッダータイトル・メニュー項目を見出しと同じ Kaisei Opti に統一。
 * .font-min より詳細度が高いセレクタでピンポイント上書き。
 */
.navbar-custom .navbar-brand,
.navbar-custom .nav > li > a {
	font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
}

/*
テキスト表示欄カード（about / guideline / contact で使い回す共通パーツ）。
前任者が <pre> でグレーのコードブロック表示にしていた「古い」見た目を、
サイトの深海テーマ（アクセント #27acd9）に合わせた角丸ダークカードへ刷新する。
*/
.parts-textbox {
	margin-top: 18px;
	padding: 38px 34px;
	border: 1px solid rgba(39, 172, 217, 0.35);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
	color: #111;
	/* クライアント要望（2026-05-26）：目次と同じ Noto Sans JP（ゴシック）に統一。
	   元は Noto Serif JP（明朝）だったが、目次（body継承の Noto Sans JP）に揃える */
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS PGothic", sans-serif;
	font-size: 1.5rem;
	line-height: 2;
	text-align: left;
	&:after {
		display: block;
		clear: both;
		content: "";
	}
	> *:first-child {
		margin-top: 0;
	}
	> *:last-child {
		margin-bottom: 0;
	}
	p {
		margin: 1.4em 0 0;
	}
	h2, h3, h4 {
		margin: 1.9em 0 .6em;
		padding-left: 14px;
		border-left: 5px solid #27acd9;
		line-height: 1.5;
		color: #1b3b49;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.75rem;
	}
	h4 {
		font-size: 1.55rem;
	}
	strong, b {
		font-weight: 700;
	}
	em, i {
		font-style: italic;
	}
	a {
		color: #1f8fb3;
		text-decoration: underline;
		transition: all .2s ease-in-out;
		&:hover {
			opacity: .7;
		}
	}
	ul, ol {
		margin: 1.2em 0 0;
		padding-left: 1.7em;
	}
	ul {
		list-style: disc;
	}
	ol {
		list-style: decimal;
	}
	li {
		margin-top: .4em;
		&::marker {
			color: #27acd9;
		}
	}
	blockquote {
		margin: 1.4em 0 0;
		padding: 14px 22px;
		border-left: 4px solid #27acd9;
		background: rgba(39, 172, 217, 0.08);
		color: #444;
	}
	hr {
		margin: 1.9em 0;
		border: 0;
		border-top: 1px solid rgba(39, 172, 217, 0.3);
	}
	img {
		max-width: 100%;
		height: auto;
		border-radius: 8px;
	}
	.aligncenter {
		display: block;
		margin-right: auto;
		margin-left: auto;
	}
	.alignleft {
		float: left;
		margin: .4em 1.4em .8em 0;
	}
	.alignright {
		float: right;
		margin: .4em 0 .8em 1.4em;
	}
	/*
	 * テーブル：プロフィール項目（旧 dl.facts）の見た目を継承。
	 * 1列目は項目名（5em・シアン左帯・太字）／2列目は内容。罫線は行間のみ。
	 * Gutenberg のテーブルブロックは <figure class="wp-block-table"><table>…</table></figure> で
	 * 出力されるため figure のデフォルト margin はリセットする。
	 * 左帯は border-left を直接かけると border-collapse の影響でズレやすいため、
	 * td/th を position:relative にして ::before の絶対配置バーで描く。
	 */
	figure {
		margin: 0;
	}
	table {
		width: 100%;
		margin: 30px 0;
		border-collapse: collapse;
	}
	tr {
		border-bottom: 1px solid rgba(39, 172, 217, 0.22);
		&:first-child {
			border-top: 1px solid rgba(39, 172, 217, 0.22);
		}
	}
	td, th {
		position: relative;
		padding: 14px 0;
		border: 0;
		vertical-align: top;
	}
	td:first-child, th:first-child {
		width: 5em;
		padding-left: 16px; /* バー幅(4px) + バーから文字までの余白(12px) */
		color: #27acd9;
		font-weight: 700;
		text-align: left;
		white-space: nowrap;
		padding-left: 0;
		&::before {
			content: "";
			display: inline-block;
			vertical-align: -0.4em;
			height: 1.6em;
			width: 4px;
			margin-right: 14px;
			background: #27acd9;
		}
	}
	@media (max-width: 767px) {
		padding: 26px 20px;
		border-radius: 12px;
		font-size: 1.4rem;
		h2 {
			font-size: 1.8rem;
		}
		/* SP表示：プロフィール項目は1列目（項目名）の下に2列目（内容）を折り返して見せる。
		   ::before バー（4px）＋margin-right(14px)=18px が項目名テキストの開始位置なので、
		   内容セルにも padding-left:18px を付けて項目名テキストと左を揃える（FB② 2026-05-26 対応） */
		table, tbody, tr {
			display: block;
			width: 100%;
		}
		td, th {
			display: block;
			padding: 4px 0;
			width: 100%;
		}
		td:first-child, th:first-child {
			width: 100%;
			padding: 14px 0 4px 0;
		}
		tr td:last-child {
			padding: 0 0 14px 18px;
		}
	}
}

/*
 * セクション見出し（contact の「お問い合わせフォーム」「個人情報保護方針」）。
 * 前任者は .mam-title-size-4（48px・字間24px・本文 Noto Serif）の巨大 <span> で、
 * ヒーロー見出し（Kaisei Opti）とフォントが揃わず、上の .parts-textbox にも密着していた。
 * 見出しフォント Kaisei Opti に統一し、サイズを上品に整え、深海テーマのシアン下線で再デザイン。
 * 上下マージンで textbox／フォームから分離する。
 */
.parts-section_ttl {
	margin: 66px 0 38px;
	color: #1b3b49;
	font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
	font-size: 2.8rem;
	font-weight: 400;
	letter-spacing: .14em;
	/* 字間で最終文字に余白が付き中央が右にズレるのを相殺 */
	text-indent: .14em;
	line-height: 1.5;
	text-align: center;
	&:after {
		display: block;
		width: 60px;
		height: 3px;
		margin: 16px auto 0;
		border-radius: 2px;
		/* 中央が濃い深海シアンのグラデ下線（泡モチーフと馴染ませる） */
		background: linear-gradient(90deg, rgba(39, 172, 217, 0) 0%, #27acd9 50%, rgba(39, 172, 217, 0) 100%);
		content: "";
	}
	@media (max-width: 767px) {
		margin: 48px 0 28px;
		font-size: 2.1rem;
		letter-spacing: .08em;
		text-indent: .08em;
	}
}

/*
 * 個人情報保護方針の本文（.box_15_txt）。
 * 元は <h4> で見出しフォント（Kaisei Opti）になり本文として不自然だったため <p> に変更。
 * 本文フォントは .parts-textbox と揃えて Noto Sans JP、行間も line-height:2 に合わせる。
 * 元CSS（css/colors/default.css）は触らず上書きのみで対応。
 */
.box_15_txt {
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS PGothic", sans-serif;
	font-weight: 400;
	line-height: 2;
}

/*
 * お問い合わせフォームの微調整（指示対応 2026-06-05）。
 * 元CSS（css/colors/default.css）は触らず上書きのみで対応。
 *  - .wrapper-contact：元の height:20px だと各項目が固定高で詰まるため auto に。
 *    項目間の間隔は元CSSの margin-bottom:30px へ集約（テンプレの <br> 区切りは撤去済み）。
 *  - .textarea-contact：お問い合わせ【必須】欄（textarea）の初期高さを 10em に。
 */
.wrapper-contact {
	height: auto;
}
.textarea-contact {
	height: 10em;
}

/* h1・ヘッダーまわりの調整（細部改修 2026-05-23） */
.mam-caption h1 {
	margin: 0;
	font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
}
.page-home_logo {
	margin: 0;
}
.navbar-custom {
	transition: background-color .3s ease, padding .3s ease;
	@media (max-width: 991px) {
		.nav > li > a {
			padding: 15px 9px;
		}
	}
}

/* ガイドライン：目次・セクション */
.parts-guide_row {
	display: flow-root;
}
.parts-guide_toc {
	margin: 6px 0 46px;
	padding: 26px 30px;
	border: 1px solid rgba(39, 172, 217, 0.35);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.8);
	/* テキストボックスと同フォント（Noto Sans JP）を明示。元は body 継承だったが意図を固定 */
	font-family: "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS PGothic", sans-serif;
	.ttl {
		margin: 0 0 14px;
		color: #1b3b49;
		font-size: 1.9rem;
		font-weight: 700;
		text-align: center;
	}
	.list {
		margin: 0;
		padding-left: 1.6em;
		font-size: 1.4rem;
		line-height: 1.9;
		ul {
			margin: 2px 0 8px;
			padding-left: 1.3em;
			list-style: none;
		}
		a {
			color: #1f8fb3;
			text-decoration: none;
			transition: all .2s ease-in-out;
			&:hover {
				opacity: .7;
				text-decoration: underline;
			}
		}
	}
}
.parts-guide_sec {
	margin-bottom: 80px;
	scroll-margin-top: 80px;
	.ttl {
		margin: 0 0 6px;
		padding-left: 16px;
		border-left: 6px solid #27acd9;
		color: #1b3b49;
		font-size: 2.1rem;
		line-height: 1.5;
	}
	.parts-textbox h3 {
		scroll-margin-top: 80px;
	}
}

/*
 * ボイスサンプル（/voicesample/ 単一ページ・hash連動タブ切替）。
 * 白背景前提：カードは半透明白＋薄シャドウ、文字は深海ネイビーで濃く。
 * 見出しは about/guideline の左ボーダー型と毛色を変え、
 *   「番号プレフィックス（Cormorant Garamond）＋名前＋拡張シアン罫線＋件数」のエディトリアル型に。
 * R18 専用差し替えは .parts-voice_panel--r18 配下で行う（パネル単位で完結）。
 */
/*
 * タブ枠とパネル枠：水玉アニメ背景の上で可読性を確保するため、
 * `.parts-voice_frame` で 1つの container にまとめて bg+border+radius+shadow を担わせる。
 * frame 1枚に shadow を集約することで、tabs と panels それぞれに別々に影をかけて
 * 半透明背景同士が二重影で汚くなるパターンを回避（自己紹介ページの parts-textbox と同じ shadow）。
 * 親子関係の表現は引き続き：tabs は内側余白なしで境界に接する／panels は padding で content を内側に置く。
 * タブとコンテンツの境界はアクティブタブの 3px 罫線が担う。
 */
.parts-voice_frame {
	margin: 8px 0 0;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(39, 172, 217, 0.3);
	border-radius: 8px;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
	/* タブを sticky 追従させるため overflow:hidden は外す（タブ側で角丸＋追従bgを担う＝出演履歴 .parts-history_frame と同方式） */
}
.parts-voice_tabs {
	/* 出演履歴 .parts-history_segtabs と同じく固定ナビ(51px)直下に追従 */
	position: sticky;
	top: 51px;
	z-index: 6;
	display: flex;
	margin: 0;
	padding: 0;
	border-radius: 8px 8px 0 0;
	background: rgba(247, 252, 254, 0.96);
	backdrop-filter: blur(4px);
	box-shadow: 0 2px 10px rgba(39, 96, 122, 0.12);
}
.parts-voice_tab {
	flex: 1;
	padding: 18px 14px;
	/* 非アクティブでも薄い罫線を出してタブ／コンテンツの境界を常に明示。
	   active 時はカラーが満タンになり、状態の遷移は色濃度で読み取れる。 */
	border-bottom: 3px solid rgba(39, 172, 217, 0.3);
	color: rgba(27, 59, 73, 0.6);
	text-align: center;
	text-decoration: none;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
	.ttl {
		display: block;
		font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
		font-size: 1.7rem; /* 出演履歴 .parts-history_segtab と統一 */
		letter-spacing: 0.06em;
	}
	.sub {
		display: block;
		margin-top: 4px;
		color: rgba(27, 59, 73, 0.5);
		font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
		font-size: 1.4rem;
		font-style: italic;
		letter-spacing: 0.08em;
	}
	&:hover {
		background: rgba(39, 172, 217, 0.05);
		color: #1b3b49;
		text-decoration: none;
	}
	&.is-active {
		border-bottom-color: #27acd9;
		color: #1f8fb3;
		background: rgba(39, 172, 217, 0.06);
		.sub {
			color: #27acd9;
		}
	}
}
/* R18タブは「成人向け」を視覚的に切り分けるため非アクティブ時も赤系で示す。
   （フォントサイズは2026-06-02に出演履歴タブと統一＝1.7rem。区別は色＝赤のみで担保）
   active 時に色が一段濃くなり、状態の遷移は読み取れる。 */
.parts-voice_tab--r18 {
	border-bottom-color: rgba(200, 74, 108, 0.3);
	color: rgba(169, 53, 84, 0.7);
	.ttl {
		font-size: 1.7rem; /* モノラルタブと統一（R18の区別は色＝赤で担保） */
	}
	.sub {
		color: rgba(200, 74, 108, 0.55);
	}
	&:hover {
		background: rgba(200, 74, 108, 0.05);
		color: #a93554;
	}
	&.is-active {
		border-bottom-color: #c84a6c;
		color: #a93554;
		background: rgba(200, 74, 108, 0.06);
		.sub {
			color: #c84a6c;
		}
	}
}

/* SP表示時もタブの見出しは1行のまま（タブ内フォント見直しで2段改行は不要になったため
   .parts-voice_tab_wrap の display:block は撤去・2026-06-02）。フォントサイズだけ出演履歴SPと統一 */
@media (max-width: 767px) {
	.parts-voice_tab .ttl {
		font-size: 1.45rem; /* 出演履歴 .parts-history_segtab SP と統一 */
	}
}

.parts-voice_panels {
	padding: 28px 44px 44px;
	@media (max-width: 767px) {
		padding: 20px 14px;
	}
}

.parts-voice_panel {
	transition: opacity .2s ease; /* 出演履歴パネルと同じフェード切替 */
}
.parts-voice_panel[hidden] {
	display: none;
}
.parts-voice_panel.is-fadeout { opacity: 0; }
.parts-voice_panel.is-fadein { opacity: 0; } /* 表示直後の初期値。クラス除去で 1 へトランジション */

/* カード個別の音量コントロール（ミニプレイヤー内・全カードで状態同期） */
.parts-voice_card_volume {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 auto;
}
.parts-voice_card_volume_mute {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #1f8fb3;
	cursor: pointer;
	transition: background-color .2s ease;
	&:hover {
		background: rgba(39, 172, 217, 0.12);
	}
}
.parts-voice_card_volume_icon {
	display: block;
	width: 16px;
	height: 16px;
}
.parts-voice_card_volume_icon--off {
	display: none;
}
.parts-voice_card_volume.is-muted {
	.parts-voice_card_volume_mute {
		color: rgba(27, 59, 73, 0.45);
	}
	.parts-voice_card_volume_icon--on {
		display: none;
	}
	.parts-voice_card_volume_icon--off {
		display: block;
	}
}
.parts-voice_card_volume_slider {
	width: 90px;
	height: 16px;
	margin: 0;
	accent-color: #27acd9;
	cursor: pointer;
	@media (max-width: 480px) {
		width: 70px;
	}
}

.parts-voice_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}
.parts-voice_chip {
	padding: 7px 18px;
	border: 1px solid rgba(39, 172, 217, 0.4);
	border-radius: 30px;
	background: rgba(39, 172, 217, 0.05);
	color: #1f8fb3;
	font-size: 1.2rem;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	&:hover {
		background: #27acd9;
		color: #fff;
		border-color: #27acd9;
		text-decoration: none;
	}
}

.parts-voice_section {
	margin-top: 40px;
	/* カテゴリチップで飛んだ時、固定ナビ(51px)＋追従タブの裏に見出しが隠れないように
	   （タブを sticky 化したため。出演履歴の scroll-margin-top:124px と同趣旨） */
	scroll-margin-top: 132px;
}
.parts-voice_section_ttl {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	.num {
		color: #27acd9;
		font-family: "Cormorant Garamond", "Times New Roman", serif;
		font-size: 2.5rem;
		font-weight: 500;
		font-style: italic;
		letter-spacing: 0.08em;
		line-height: 1;
		position: relative;
		top: -.05em;
	}
	.name {
		font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
		color: #1b3b49;
		font-size: 2.3rem;
		font-weight: 400;
		letter-spacing: 0.08em;
		line-height: 1.2;
	}
	.rule {
		flex: 1 1 auto;
		min-width: 24px;
		height: 1px;
		margin: 0 6px;
		background: linear-gradient(to right, rgba(39, 172, 217, 0.55), rgba(39, 172, 217, 0));
	}
	.count {
		color: rgba(27, 59, 73, 0.5);
		font-family: "Cormorant Garamond", "Times New Roman", serif;
		font-size: 1.8rem;
		font-style: italic;
		letter-spacing: 0.1em;
		white-space: nowrap;
		position: relative;
		top: -.05em;
	}
}

.parts-voice_grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
	/* 同じ行の片方のカードが is-current 展開しても、他方のカードを
	   行高さに引き伸ばさず自然な高さに維持する（再生していないカードの
	   ボタン・タイトル位置を動かさないため） */
	align-items: start;
	@media (max-width: 767px) {
		grid-template-columns: 1fr;
	}
}

.parts-voice_card {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	/* row1=タイトル列（playとdurationもこの行で中央配置）、row2=メタ（タイトル直下）、row3=ミニプレイヤー
	   この構造により title と play は同じ row1 でcenter揃え → 縦中央が一致する。
	   meta は title 下の独立行に置くことで title の中央位置に影響しない */
	grid-template-areas:
		"play title duration"
		".    meta  ."
		"player player player";
	align-items: center;
	/* column-gap だけ。row-gap を効かせるとミニプレイヤーが閉じてる時にも
	   2行目との隙間が残って下padding が大きく見えてしまうため。
	   開き時の余白はミニプレイヤー側の margin-top / padding-top で表現する */
	column-gap: 14px;
	padding: 12px 18px;
	border: 1px solid rgba(39, 172, 217, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 4px rgba(39, 96, 122, 0.08);
	color: #1b3b49;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
	&:hover {
		border-color: #27acd9;
		box-shadow: 0 3px 12px rgba(39, 172, 217, 0.18);
	}
	&.is-current {
		grid-template-rows: auto auto;
		border-color: #27acd9;
		background: #f1fbff;
		box-shadow: 0 3px 16px rgba(39, 172, 217, 0.1);
		.parts-voice_card_player {
			max-height: 240px;
			opacity: 1;
			margin-top: 8px;
			padding-top: 10px;
			border-top-width: 1px;
			pointer-events: auto;
		}
	}
	&.is-playing {
		.parts-voice_card_play_icon--play {
			display: none;
		}
		.parts-voice_card_play_icon--pause {
			display: block;
		}
	}
	&.is-loading {
		.parts-voice_card_play {
			animation: parts-voice_pulse 1.1s ease-in-out infinite;
		}
	}
}
.parts-voice_card_play {
	grid-area: play;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #27acd9;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 6px rgba(39, 172, 217, 0.35);
	transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
	&:hover {
		background: #1f8fb3;
		transform: scale(1.06);
		box-shadow: 0 3px 9px rgba(31, 143, 179, 0.5);
	}
}
.parts-voice_card_play_icon {
	display: block;
	width: 16px;
	height: 16px;
	fill: #fff;
}
.parts-voice_card_play_icon--pause {
	display: none;
}
.parts-voice_card_name {
	grid-area: title;
	min-width: 0;
	margin: 0;
	color: #1b3b49;
	font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
	font-size: 1.8rem;
	line-height: 1.4;
}
.parts-voice_card_meta {
	grid-area: meta;
	margin: 2px 0 0;
	color: rgba(27, 59, 73, 0.55);
	font-size: 1.1rem;
	letter-spacing: 0.02em;
}
.parts-voice_card_duration {
	grid-area: duration;
	color: rgba(27, 59, 73, 0.65);
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: 2rem;
	font-style: italic;
	letter-spacing: 0.05em;
	white-space: nowrap;
}
/*
 * ミニプレイヤー：再生開始でスライドダウンして表示／停止で閉じる。
 * display:none ↔ block は CSS transition できないため、max-height + opacity + 余白系を
 * トランジションプロパティとしてアニメさせる。
 * 閉じ状態：max-height:0 / opacity:0 / margin/padding/border-width 全部0
 * 開き状態（.is-current）：max-height:240px（コンテンツ十分カバー）/ opacity:1 / 通常余白
 * overflow:hidden で展開中のコンテンツがカード外にハミ出ないようクリップ。
 * pointer-events:none で閉じ状態の誤クリック防止。
 */
.parts-voice_card_player {
	grid-area: player;
	box-sizing: border-box;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	margin-top: 0;
	padding-top: 0;
	border-top: 0 dashed rgba(39, 172, 217, 0.4);
	pointer-events: none;
	transition:
		max-height .35s ease,
		opacity .25s ease,
		margin-top .3s ease,
		padding-top .3s ease,
		border-top-width .3s ease;
}
.parts-voice_card_progress {
	height: 8px;
	margin: 2px 0;
	border-radius: 4px;
	background: rgba(39, 172, 217, 0.18);
	overflow: hidden;
	cursor: pointer;
	touch-action: none; /* スマホでドラッグスクラブする時にスクロールしないように */
}
.parts-voice_card_progress_fill {
	width: 0;
	height: 100%;
	background: linear-gradient(90deg, #27acd9, #6cb6dc);
	transition: width .12s linear;
}
.parts-voice_card_player_meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	color: rgba(27, 59, 73, 0.55);
	font-family: "Cormorant Garamond", "Times New Roman", serif;
	font-size: 1.15rem;
	font-style: italic;
	letter-spacing: 0.05em;
}

.parts-voice_empty {
	margin: 36px 0;
	padding: 28px 22px;
	border: 1px dashed rgba(39, 172, 217, 0.3);
	border-radius: 12px;
	color: rgba(27, 59, 73, 0.6);
	text-align: center;
}

@keyframes parts-voice_pulse {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.08); }
}

/* R18 パネル専用のカラーアクセント差し替え */
.parts-voice_panel--r18 {
	.parts-voice_section_ttl {
		.num {
			color: #c84a6c;
		}
		.rule {
			background: linear-gradient(to right, rgba(200, 74, 108, 0.55), rgba(200, 74, 108, 0));
		}
	}
	.parts-voice_chip {
		border-color: rgba(200, 74, 108, 0.4);
		background: rgba(200, 74, 108, 0.05);
		color: #a93554;
		&:hover {
			background: #c84a6c;
			border-color: #c84a6c;
			color: #fff;
		}
	}
	.parts-voice_card_play {
		background: #c84a6c;
		box-shadow: 0 2px 6px rgba(200, 74, 108, 0.35);
		&:hover {
			background: #a93554;
			box-shadow: 0 3px 9px rgba(169, 53, 84, 0.5);
		}
	}
	.parts-voice_card {
		border-color: #e9c6d0;
	}
	.parts-voice_card:hover {
		border-color: #c84a6c;
		box-shadow: 0 3px 12px rgba(200, 74, 108, 0.18);
	}
	.parts-voice_card.is-current {
		border-color: #c84a6c;
		background: #fff7fa;
		box-shadow: 0 3px 16px rgba(200, 74, 108, 0.1);
	}
	.parts-voice_card_progress {
		background: rgba(200, 74, 108, 0.18);
	}
	.parts-voice_card_progress_fill {
		background: linear-gradient(90deg, #c84a6c, #e87298);
	}
}

/*
 * 出演履歴：種別セクション分け × 16:9画像グリッド。
 * voicesample と同じデザイン言語（frame＋エディトリアル見出し＋チップ）。
 * カード本体は <a> または <div>。<a> の時はカード全体がクリッカブル＋hover強調。
 * アイキャッチが無い場合は CSS のグラデで穏やかに埋める（情報の主役は title＋genre＋supplement）。
 */
.parts-history_frame {
	margin: 8px 0 0;
	padding: 28px 24px;
	background: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(39, 172, 217, 0.3);
	border-radius: 8px;
	box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
	@media (max-width: 767px) {
		padding: 20px 14px;
	}
}
.parts-history_chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
}
.parts-history_chip {
	padding: 7px 18px;
	border: 1px solid rgba(39, 172, 217, 0.4);
	border-radius: 30px;
	background: rgba(39, 172, 217, 0.05);
	color: #1f8fb3;
	font-size: 1.2rem;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	&:hover {
		background: #27acd9;
		border-color: #27acd9;
		color: #fff;
		text-decoration: none;
	}
}

.parts-history_section {
	margin-top: 40px;
	scroll-margin-top: 80px;
}
.parts-history_section_ttl {
	display: flex;
	align-items: center; /* 番号/件数の縦位置をボイスサンプルと統一 */
	gap: 10px;
	margin: 0 0 20px;
	.num {
		color: #27acd9;
		font-family: "Cormorant Garamond", "Times New Roman", serif;
		font-size: 2.5rem; /* ボイスサンプル .parts-voice_section_ttl .num と統一 */
		font-weight: 500;
		font-style: italic;
		letter-spacing: 0.08em;
		line-height: 1;
		position: relative;
		top: -.05em;
	}
	.name {
		font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
		color: #1b3b49;
		font-size: 2.3rem; /* ボイスサンプル .parts-voice_section_ttl .name と統一 */
		font-weight: 400;
		letter-spacing: 0.08em;
		line-height: 1.2;
	}
	.rule {
		flex: 1 1 auto;
		min-width: 24px;
		height: 1px;
		margin: 0 6px;
		background: linear-gradient(to right, rgba(39, 172, 217, 0.55), rgba(39, 172, 217, 0));
	}
	.count {
		color: rgba(27, 59, 73, 0.5);
		font-family: "Cormorant Garamond", "Times New Roman", serif;
		font-size: 1.8rem; /* ボイスサンプル .parts-voice_section_ttl .count と統一 */
		font-style: italic;
		letter-spacing: 0.1em;
		white-space: nowrap;
		position: relative;
		top: -.05em;
	}
}

.parts-history_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	@media (max-width: 991px) {
		grid-template-columns: repeat(2, 1fr);
	}
	@media (max-width: 480px) {
		grid-template-columns: 1fr;
	}
}

.parts-history_card {
	display: block;
	border: 1px solid rgba(39, 172, 217, 0.3);
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.94);
	box-shadow: 0 1px 4px rgba(39, 96, 122, 0.08);
	color: #1b3b49;
	text-decoration: none;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
a.parts-history_card {
	cursor: pointer;
	&:hover {
		border-color: #27acd9;
		box-shadow: 0 3px 12px rgba(39, 172, 217, 0.18);
		text-decoration: none;
		transform: translateY(-1px);
	}
}

.parts-history_image {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(39, 172, 217, 0.22), rgba(39, 172, 217, 0.06));
	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}
}
.parts-history_card.is-no-image .parts-history_image {
	/* 画像未設定時はグラデのみで穏やかに表示。情報はキャプションに依存 */
	background: linear-gradient(135deg, rgba(39, 172, 217, 0.18), rgba(39, 172, 217, 0.04) 60%, rgba(255, 255, 255, 0.4));
}

.parts-history_caption {
	padding: 12px 14px 14px;
}
.parts-history_card_name {
	margin: 0;
	color: #1b3b49;
	font-family: "Kaisei Opti", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "MS Mincho", serif;
	font-size: 1.55rem;
	line-height: 1.4;
}
.parts-history_card_genre {
	margin: 6px 0 0;
	color: rgba(27, 59, 73, 0.7);
	font-size: 1.2rem;
	line-height: 1.5;
}
.parts-history_card_supplement {
	margin: 4px 0 0;
	color: rgba(27, 59, 73, 0.55);
	font-size: 1.1rem;
	line-height: 1.5;
	white-space: pre-line;
}

.parts-history_empty {
	margin: 36px 0;
	padding: 28px 22px;
	border: 1px dashed rgba(39, 172, 217, 0.3);
	border-radius: 12px;
	color: rgba(27, 59, 73, 0.6);
	text-align: center;
}

/*
 * 出演履歴 2パネル構成（商業・コラボ／同人作品）★Phase 6 本実装（モックから移植）
 * トップ階層：追従セグメントタブ → パネル1（種別チップ＋全件）／パネル2（年タブ＋初期24件＋もっと見る）。
 * 商業・コラボ＝サイト標準シアン(#27acd9)／同人作品＝一段濃いネイビー(#04588c)で2層を色分け。
 */
/* トップ階層：追従セグメントタブ（固定ナビ高さ約51pxの直下に追従） */
.parts-history_segtabs {
	position: sticky;
	top: 51px;
	z-index: 6;
	display: flex;
	margin: -28px -24px 22px;
	border-radius: 8px 8px 0 0;
	background: rgba(247, 252, 254, 0.96);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid rgba(39, 172, 217, 0.3);
	box-shadow: 0 2px 10px rgba(39, 96, 122, 0.12);
	overflow: hidden;
	@media (max-width: 767px) {
		margin: -20px -14px 18px;
	}
}
.parts-history_segtab {
	flex: 1;
	padding: 16px 10px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: rgba(27, 59, 73, 0.55);
	font-family: "Kaisei Opti", "游明朝", YuMincho, serif;
	font-size: 1.7rem;
	letter-spacing: 0.06em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
	.c {
		margin-left: 6px;
		font-family: "Cormorant Garamond", "Times New Roman", serif;
		font-size: 1.3rem;
		font-style: italic;
		opacity: .85;
	}
	&:hover {
		background: rgba(39, 172, 217, 0.05);
		color: #1b3b49;
		text-decoration: none;
	}
	&.is-active {
		color: #1f8fb3;
		border-bottom-color: #27acd9;
		background: rgba(39, 172, 217, 0.07);
	}
	&[data-tab="works"]:hover {
		background: rgba(4, 88, 140, 0.06);
	}
	&[data-tab="works"].is-active {
		color: #04588c;
		border-bottom-color: #04588c;
		background: rgba(4, 88, 140, 0.08);
	}
	@media (max-width: 767px) {
		font-size: 1.45rem;
		padding: 13px 6px;
	}
}

.parts-history_panel[hidden] {
	display: none;
}
.parts-history_panel_lead {
	margin: 0 0 16px;
	color: rgba(27, 59, 73, 0.6);
	font-size: 1.5rem;
	letter-spacing: 0.04em;
}
/* 種別アンカーで飛んだ時、固定ナビ(51px)＋追従タブ(61px)の裏に見出しが隠れないように */
.parts-history_panel[data-tab="commercial"] .parts-history_section {
	scroll-margin-top: 124px;
}

/* 同人パネル内：年タブ（入れ子） */
.parts-history_yeartabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 4px;
}
.parts-history_yeartab {
	padding: 7px 18px;
	border: 1px solid rgba(4, 88, 140, 0.5);
	border-radius: 30px;
	background: rgba(4, 88, 140, 0.05);
	color: #04588c;
	font-size: 1.25rem;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	.c {
		margin-left: 5px;
		font-size: 1.05rem;
		opacity: .8;
	}
	&:hover,
	&.is-active {
		background: #04588c;
		border-color: #04588c;
		color: #fff;
	}
}
.parts-history_yearpanel[hidden] {
	display: none;
}
.parts-history_yearpanel .parts-history_section {
	margin-top: 16px;
}

/* 「もっと見る」より後ろのカードを初期は隠す */
.parts-history_card.is-clip {
	display: none;
}
.parts-history_more {
	display: block;
	width: 260px;
	max-width: 90%;
	margin: 22px auto 4px;
	padding: 11px 24px;
	border: 1px solid rgba(4, 88, 140, 0.5);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.9);
	color: #04588c;
	font-family: "Kaisei Opti", "游明朝", serif;
	font-size: 1.35rem;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
	&:hover {
		background: #04588c;
		color: #fff;
	}
	&[hidden] {
		display: none;
	}
}
.parts-history_morenote {
	margin: 14px 0 0;
	color: rgba(27, 59, 73, 0.5);
	font-size: 1.1rem;
	text-align: center;
}

/* 同人パネル内のアクセントを全てネイビー(#04588c)系に統一し、商業（シアン）と視覚分離 */
.parts-history_panel[data-tab="works"] {
	.parts-history_section_ttl .num {
		color: #04588c;
	}
	.parts-history_section_ttl .rule {
		background: linear-gradient(to right, rgba(4, 88, 140, 0.55), rgba(4, 88, 140, 0));
	}
	.parts-history_section_ttl .count {
		color: rgba(4, 88, 140, 0.6);
	}
	.parts-history_card {
		border-color: rgba(4, 88, 140, 0.32);
	}
	a.parts-history_card:hover {
		border-color: #04588c;
		box-shadow: 0 3px 12px rgba(4, 88, 140, 0.18);
	}
	.parts-history_card.is-no-image .parts-history_image {
		background: linear-gradient(135deg, rgba(4, 88, 140, 0.16), rgba(4, 88, 140, 0.04) 60%, rgba(255, 255, 255, 0.4));
	}
	.parts-history_panel_lead {
		color: rgba(4, 88, 140, 0.75);
	}
	/* 同人作品＝DLsite商品画像(560×420=4:3)のアスペクト比で表示。
	   16:9だと画像が上下トリミングされるため、商品画像と同比率にして全体を見せる。
	   （商業・コラボ側は従来どおり 16:9 のまま＝この上書きは works パネル限定） */
	.parts-history_image {
		aspect-ratio: 560 / 420;
	}
}

/* タブ切替のフェードイン/アウト（商業・コラボ ⇄ 同人作品） */
.parts-history_panel {
	transition: opacity .2s ease;
}
.parts-history_panel.is-fadeout {
	opacity: 0;
}
.parts-history_panel.is-fadein {
	opacity: 0; /* 表示直後の初期値。クラス除去で 1 へトランジション */
}

/* =====================================================================
 * ページのコンテンツとフッターの間隔（サイト全体・一括指定）
 * footer.php のフッター直前 hr（.divider-d）にのみ margin-top を付与。
 * .divider-d はテーマ内でこの1箇所のみ使用＝他CSSと競合しない。
 * このシートは css/style.css より後に読み込まれる（functions.php: amane-style）ため上書きが効く。
 * ===================================================================== */
.divider-d {
	margin-top: 60px;
}

/* =====================================================================
 * TOP（front-page）専用スタイル（モック page-top-mock.php から集約・2026-06-03 本番化）
 * クラスは .parts-top_* 接頭辞で front-page 固有。グローバルに効く2件のみ .home でスコープ。
 * ===================================================================== */

/* Bootstrap 最大コンテナ幅をそのまま使う（TOPのみ・他ページの #services 幅は不変） */
.home #services .container { width: 100%; }
/* 自己紹介リード文（既存 .module-subtitle）の微調整（TOPのみ） */
.home .module-subtitle { line-height: 1.8; margin-bottom: 0; }

/* --- 共通：セクション見出し（メイン大＋英字サブの2行） --- */
.parts-top_heading {
	margin: 0 0 64px;
	text-align: center;
}
.parts-top_heading .h_ja {
	display: block;
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 3.4rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.3;
	color: #1b3b49;
}
.parts-top_heading .h_en {
	display: inline-block;
	margin-top: 10px;
	padding-top: 8px;
	font-family: "Cormorant Garamond","Times New Roman",serif;
	font-style: italic;
	font-size: 1.8rem;
	letter-spacing: 0.22em;
	color: #27acd9;
	text-transform: lowercase;
	border-top: 1px solid rgba(39,172,217,0.45);
}
@media (max-width:767px){
	.parts-top_heading .h_ja { font-size: 2.6rem; }
	.parts-top_heading .h_en { font-size: 1.5rem; }
}
.parts-top_lead {
	margin: -16px 0 32px;
	color: rgba(27,59,73,0.62);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.6rem;
	text-align: center;
	letter-spacing: 0.03em;
}

/* --- ヒーロー直下の依頼導線クラスタ --- */
/* ロゴ＋自己紹介＋aboutボタンの一塊。下余白をここで持たせることで、
   受注ステータスの表示/非表示どちらでも下要素（ステータス or CTA）との間隔を一定に保つ */
.parts-top_intro { margin-bottom: 46px; }
.parts-top_hero_cta { margin: 30px auto 0; }
.parts-top_aboutbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 auto;
	padding: 11px 30px;
	border: 1px solid rgba(39,172,217,0.55);
	border-radius: 40px;
	background: rgba(255,255,255,0.9);
	color: #1f8fb3;
	font-family: "Kaisei Opti","游明朝",serif;
	font-size: 1.45rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.parts-top_aboutbtn .en { font-family: "Cormorant Garamond",serif; font-style: italic; font-size: 1.2rem; opacity: .8; }
.parts-top_aboutbtn:hover { background: #27acd9; color: #fff; text-decoration: none; }
.parts-top_center { text-align: center; }

/* 受注ステータス（バッジ＋ステータス文。位置はCTA群の上） */
.parts-top_status {
	max-width: 760px;
	margin: 0 auto 24px;
	padding: 16px 22px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
}
.parts-top_status .badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 16px;
	border-radius: 30px;
	font-size: 1.4rem;
	font-weight: 700;
	white-space: nowrap;
}
.parts-top_status .badge::before { content:""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.parts-top_status .stext { color: #1b3b49; font-size: 1.6rem; }
.parts-top_status.is-open    { background: rgba(45,140,90,0.10);  border: 1px solid rgba(45,140,90,0.35); }
.parts-top_status.is-open .badge    { background: rgba(45,140,90,0.15);  color: #2d8c5a; }
.parts-top_status.is-partial { background: rgba(214,158,46,0.10); border: 1px solid rgba(214,158,46,0.35); }
.parts-top_status.is-partial .badge { background: rgba(214,158,46,0.15); color: #b9821f; }
.parts-top_status.is-closed  { background: rgba(180,70,70,0.10);  border: 1px solid rgba(180,70,70,0.35); }
.parts-top_status.is-closed .badge  { background: rgba(180,70,70,0.15);  color: #b44646; }

/* --- CTA4連（リッチ・幅一杯） --- */
.parts-top_cta_grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	width: 100%;
}
@media (max-width: 991px){ .parts-top_cta_grid { gap: 14px; } }
@media (max-width: 767px){ .parts-top_cta_grid { grid-template-columns: 1fr 1fr; } }
.parts-top_cta_btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding: 30px 18px 26px;
	border: 1px solid rgba(39,172,217,0.4);
	border-radius: 14px;
	background: linear-gradient(165deg, #ffffff 0%, #eef8fc 100%);
	box-shadow: 0 4px 18px rgba(39,96,122,0.10);
	color: #1b3b49;
	text-decoration: none;
	text-align: center;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease;
}
.parts-top_cta_btn:hover {
	border-color: #27acd9;
	box-shadow: 0 10px 26px rgba(39,172,217,0.22);
	transform: translateY(-3px);
	text-decoration: none;
}
.parts-top_cta_btn .ico {
	display: flex; align-items: center; justify-content: center;
	width: 58px; height: 58px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: rgba(39,172,217,0.12);
	color: #27acd9;
	font-size: 2.6rem;
	transition: background .2s ease, color .2s ease;
}
.parts-top_cta_btn:hover .ico { background: #27acd9; color: #fff; }
.parts-top_cta_btn .lbl {
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 2.0rem;
	letter-spacing: 0.04em;
	color: #1b3b49;
}
.parts-top_cta_btn .dsc {
	margin-top: 9px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.2rem;
	line-height: 1.65;
	color: rgba(27,59,73,0.66);
}

/* --- セクションの余白・区切り --- */
.parts-top_block { margin: 0 0 64px; }
.parts-top_block:last-child { margin-bottom: 0; }
.parts-top_divider { margin: 0 0 64px; border: 0; border-top: 1px solid rgba(39,172,217,0.18); }

/* --- 提携・出演実績：商業ブランド（サムネ＋社名＋カテゴリラベル） --- */
.parts-top_brands {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 991px){ .parts-top_brands { grid-template-columns: repeat(3, 1fr); gap: 18px; } }
@media (max-width: 575px){ .parts-top_brands { grid-template-columns: 1fr 1fr;} }
.parts-top_brand {
	display: flex;
	flex-direction: column;
	border: none;
	background: none;
	box-shadow: none;
	color: #1b3b49;
	text-decoration: none;
}
a.parts-top_brand:hover { text-decoration: none; }
.parts-top_brand_thumb {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f6f8;
	color: rgba(27,59,73,0.3);
	font-family: "Cormorant Garamond",serif;
	font-style: italic;
	font-size: 1.5rem;
	letter-spacing: 0.1em;
}
.parts-top_brand_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
a.parts-top_brand:hover .parts-top_brand_thumb img { transform: scale(1.05); }
.parts-top_brand_body { padding: 12px 0 14px; }
.parts-top_brand_name {
	margin: 0;
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 1.6rem;
	line-height: 1.45;
	color: #1b3b49;
	transition: color .3s ease;
}
a.parts-top_brand:hover .parts-top_brand_name { color: #1f8fb3; }
.parts-top_brand_cat {
	display: inline-block;
	margin-top: 9px;
	padding: 3px 12px;
	border-radius: 4px;
	background: rgba(27,59,73,0.06);
	color: rgba(27,59,73,0.55);
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.05rem;
	letter-spacing: 0.03em;
}

/* 実績セクション内のサブ見出し（同人音声） */
.parts-top_subhead {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin: 44px 0 32px;
}
.parts-top_subhead .t {
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 2.0rem;
	letter-spacing: 0.06em;
	color: #1b3b49;
	white-space: nowrap;
	border-left: 3px solid #04588c;
	padding-left: 12px;
}
.parts-top_subhead .c {
	font-family: "Cormorant Garamond",serif;
	font-style: italic;
	font-size: 1.3rem;
	color: rgba(27,59,73,0.55);
	white-space: nowrap;
}
.parts-top_subhead .rule { flex: 1; height: 1px; background: linear-gradient(to right, rgba(4,88,140,0.45), rgba(4,88,140,0)); }

/* --- 同人音声 出演履歴（横2列・スマホ1列） --- */
.parts-top_doujin {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 767px){ .parts-top_doujin { grid-template-columns: 1fr; } }
.parts-top_doujin_item {
	display: flex;
	gap: 18px;
	align-items: stretch;
	padding: 14px;
	border: 1px solid rgba(4,88,140,0.22);
	border-left: 3px solid #04588c;
	border-radius: 8px;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 1px 4px rgba(39,96,122,0.07);
	color: #1b3b49;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
a.parts-top_doujin_item:hover {
	border-color: rgba(4,88,140,0.5);
	border-left-color: #04588c;
	box-shadow: 0 5px 16px rgba(4,88,140,0.16);
	transform: translateY(-1px);
	text-decoration: none;
}
.parts-top_doujin_thumb {
	flex: 0 0 160px;
	width: 160px;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(4,88,140,0.16), rgba(4,88,140,0.04) 60%, rgba(255,255,255,0.5));
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(4,88,140,0.55);
	font-family: "Cormorant Garamond",serif;
	font-style: italic;
	font-size: 1.2rem;
}
.parts-top_doujin_thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 575px){
	.parts-top_doujin_item { gap: 12px; padding: 12px; }
	.parts-top_doujin_thumb { flex-basis: 110px; width: 110px; }
}
.parts-top_doujin_body { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.parts-top_doujin_name {
	margin: 0;
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 1.6rem;
	line-height: 1.45;
	color: #1b3b49;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
}
@media (max-width: 767px){
	.parts-top_doujin_name { -webkit-line-clamp: 2; line-clamp: 2; }
}
.parts-top_doujin_meta {
	margin: 7px 0 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.2rem;
	color: #04588c;
	letter-spacing: 0.02em;
}
.parts-top_doujin_sup {
	margin: 5px 0 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.15rem;
	color: rgba(27,59,73,0.6);
	line-height: 1.6;
}

/* もっと見る系リンク */
.parts-top_morelink {
	display: inline-block;
	margin: 26px auto 0;
	padding: 12px 34px;
	border: 1px solid rgba(39,172,217,0.5);
	border-radius: 6px;
	background: rgba(255,255,255,0.9);
	color: #1f8fb3;
	font-family: "Kaisei Opti","游明朝",serif;
	font-size: 1.4rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.parts-top_morelink:hover { background:#27acd9; color:#fff; text-decoration:none; }
.parts-top_morelink::after {
	content: "\f105";
	font-family: FontAwesome;
	margin-left: 10px;
	font-size: 0.95em;
	vertical-align: baseline;
}
.parts-top_morelink.is-doujin { border-color: rgba(4,88,140,0.5); color: #04588c; }
.parts-top_morelink.is-doujin:hover { background:#04588c; color:#fff; }

/* --- 各種チャンネル（レスポンシブ統一カード：固定16:9枠＋object-fit） --- */
.parts-top_channels {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 991px){ .parts-top_channels { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
@media (max-width: 768px){ .parts-top_channels { grid-template-columns: 1fr 1fr; gap: 16px; } }
@media (max-width: 480px){ .parts-top_channels { grid-template-columns: 1fr; } }
.parts-top_ch {
	position: relative;
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(39,96,122,0.16);
	border-radius: 12px;
	background: rgba(255,255,255,0.96);
	box-shadow: 0 4px 14px rgba(39,96,122,0.13);
	overflow: hidden;
	color: #1b3b49;
	text-decoration: none;
	transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.parts-top_ch::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	z-index: 1;
	background: var(--ch, #27acd9);
}
.parts-top_ch.is-youtube { --ch: #ff0000; }
.parts-top_ch.is-cien    { --ch: #1c9ad6; }
.parts-top_ch.is-x       { --ch: #15202b; }
.parts-top_ch.is-booth   { --ch: #fc4d50; }
a.parts-top_ch:hover {
	border-color: var(--ch, #27acd9);
	box-shadow: 0 12px 28px rgba(39,96,122,0.22);
	transform: translateY(-3px);
	text-decoration: none;
}
.parts-top_ch_media {
	position: relative;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: linear-gradient(135deg, rgba(39,172,217,0.07), rgba(255,255,255,0.65));
	border-bottom: 1px solid rgba(39,172,217,0.12);
}
.parts-top_ch_media img {
	max-width: 76%;
	max-height: 66%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform .3s ease;
}
a.parts-top_ch:hover .parts-top_ch_media img { transform: scale(1.06); }
.parts-top_ch.is-youtube .parts-top_ch_media img {
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.parts-top_ch_play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding-left: 3px;
	border-radius: 50%;
	background: rgba(255,0,0,0.88);
	color: #fff;
	font-size: 1.6rem;
	box-shadow: 0 2px 8px rgba(0,0,0,0.28);
	transition: transform .2s ease, background-color .2s ease;
	pointer-events: none;
}
.parts-top_ch.is-youtube:hover .parts-top_ch_play {
	background: #ff0000;
	transform: translate(-50%, -50%) scale(1.08);
}
.parts-top_ch_body { padding: 14px 16px 16px; }
.parts-top_ch_ttl {
	margin: 0 0 7px;
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 1.7rem;
	letter-spacing: 0.04em;
	color: var(--ch, #1f8fb3);
}
.parts-top_ch_desc {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.25rem;
	line-height: 1.7;
	color: rgba(27,59,73,0.66);
}

/* --- ヒーロー見出しの装飾ハイフン「- 〜 -」をCSSで付与 --- */
/* 全ページ共通の見出し（.mam-title-size-4）に前後のハイフンを擬似要素で足す。
   テンプレ側のハードコード「- 」「 -」は撤去済み（見出しテキスト＝純粋なページ名のみに）。
   letter-spacing:24px は元定義から継承されるので、従来のハードコード版と見た目は同一。 */
.mam-title-size-4::before { content: "- "; }
.mam-title-size-4::after  { content: " -"; }

/* --- 404ページ（テンプレ 404.php） --- */
/* ヒーローの見出しは既存の .mam-title-size-4 を流用。本文エリアだけ整える */
.parts-404 {
	text-align: center;
	padding: 20px 0 10px;
}
.parts-404_lead {
	margin: 0 0 16px;
	font-family: "Kaisei Opti","游明朝",YuMincho,serif;
	font-size: 2rem;
	letter-spacing: 0.04em;
	color: #1b3b49;
}
.parts-404_text {
	margin: 0 auto;
	max-width: 640px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1.35rem;
	line-height: 2;
	color: rgba(27,59,73,0.7);
}
.parts-404_actions {
	margin-top: 36px;
}
.parts-404_btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 38px;
	border: 1px solid rgba(39,172,217,0.55);
	border-radius: 40px;
	background: rgba(255,255,255,0.9);
	color: #1f8fb3;
	font-family: "Kaisei Opti","游明朝",serif;
	font-size: 1.5rem;
	letter-spacing: 0.06em;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.parts-404_btn .en {
	font-family: "Cormorant Garamond",serif;
	font-style: italic;
	font-size: 1.2rem;
	opacity: .8;
}
.parts-404_btn:hover {
	background: #27acd9;
	color: #fff;
	text-decoration: none;
}

@media (max-width: 767px) {
	.parts-404_lead { font-size: 1.7rem; }
	.parts-404_text { font-size: 1.2rem; }
	.parts-404_btn  { font-size: 1.35rem; padding: 12px 30px; }
}