:root {
	--ao-pink: #E64096;
	--ao-ink-accent: #BC1A6E;
	--ao-accent2: #ff6fb5;
	--ao-bg: #ffffff;
	--ao-panel: #f6f6f7;
	--ao-soft: #f0f0f2;
	--ao-line: rgba(0, 0, 0, 0.12);
	--ao-text: #141414;
	--ao-muted: rgba(0, 0, 0, 0.52);
	--ao-band: repeating-linear-gradient(45deg, #0c0c0c 0, #0c0c0c 10px, #171717 10px, #171717 20px);
	--ao-head-h: 50px;
}

html {
	background: var(--ao-bg);
}
body {
	background: var(--ao-bg) !important;
	color: var(--ao-text);
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif !important;
	letter-spacing: 0.2px;

	overflow-x: hidden;
	padding-top: var(--ao-head-h);
}

#ao-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--ao-head-h);
	background: #fff;
	border-bottom: 1px solid var(--ao-line);
	text-align: center;
	z-index: 9000;
}
.admin-bar #ao-header { top: 32px; }
@media (max-width: 782px) {
	.admin-bar #ao-header { top: 46px; }
}
#ao-header-in {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	height: var(--ao-head-h);
}
#ao-logo {
	display: inline-block;
	line-height: var(--ao-head-h);
	color: var(--ao-pink) !important;
	font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 1px;
	text-decoration: none !important;
}
#ao-logo span {
	margin-left: 3px;
	color: var(--ao-text);
	font-size: 15px;
	letter-spacing: 0;
}

.ao-dd {
	position: absolute;
	top: 0;
	z-index: 9002;
}
#ao-menu { left: 0; }
#ao-search { right: 0; }
.ao-hd-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--ao-head-h);
	height: var(--ao-head-h);
	color: var(--ao-text);
	cursor: pointer;
	list-style: none;
}
.ao-hd-btn::-webkit-details-marker { display: none; }
.ao-hd-btn svg { display: block; }
.ao-dd[open] .ao-hd-btn { color: var(--ao-ink-accent); }
.ao-drawer {
	position: absolute;
	top: calc(var(--ao-head-h) - 6px);
	width: 268px;
	max-width: calc(100vw - 24px);
	text-align: left;
	background: #fff;
	border: 1px solid var(--ao-line);
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	padding: 16px 16px 6px;
}
#ao-menu-panel { left: 12px; }
#ao-search-panel { right: 12px; }
.ao-drawer a {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 11px;
	padding: 0 0 9px;
	color: var(--ao-text) !important;
	font-size: 14.5px;
	text-decoration: none !important;
	border-bottom: 1px solid var(--ao-line);
}
.ao-drawer a::before {
	content: "";
	flex: 0 0 15px;
	height: 15px;
	background: var(--ao-pink);
	-webkit-mask: var(--ao-ic-arrow) center/contain no-repeat;
	mask: var(--ao-ic-arrow) center/contain no-repeat;
}
.ao-drawer .ao-drawer-h {
	margin: 0 0 8px;
	font-size: 11.5px;
	font-weight: 700;
	color: var(--ao-muted);
	letter-spacing: 0.08em;
}
#ao-search-panel .ao-search { margin-bottom: 14px; }

:root {
	--ao-ic-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M8%205v14l11-7z'/%3E%3C/svg%3E");
	--ao-ic-tag: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='m21.4%2011.6-9-9A2%202%200%200%200%2011%202H4a2%202%200%200%200-2%202v7a2%202%200%200%200%20.6%201.4l9%209a2%202%200%200%200%202.8%200l7-7a2%202%200%200%200%200-2.8M6.5%208A1.5%201.5%200%201%201%208%206.5%201.5%201.5%200%200%201%206.5%208'/%3E%3C/svg%3E");
}

#ao-container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
#ao-main {
	padding: 0 4% 20px;
}

#ao-main.ao-light-panel {
	padding-top: 30px;
}

.ao-hero {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	background: var(--ao-band);
	color: #fff;
	text-align: center;
	padding: 44px 20px 48px;
	margin-bottom: 8px;
}
.ao-hero-catch {
	font-size: 21px;
	font-weight: 700;
	line-height: 1.5;
	margin: 0 0 8px;
}
.ao-hero-desc {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

.ao-section-head {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	margin: 46px 0 16px;
}
.ao-section-title {
	color: var(--ao-text);
	font-size: 27px;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 16px;
}
.ao-section-head .ao-section-title { margin: 0; }
.ao-section-sub {
	font-size: 12px;
	color: var(--ao-muted);
}
.ao-section-more {
	margin-left: auto;
	font-size: 13px;
	color: var(--ao-text) !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.ao-section-more::after {
	content: "›";
	color: var(--ao-pink);
	font-weight: 700;
	margin-left: 5px;
}
.ao-section-more:hover { text-decoration: underline !important; }

.ao-front-note {
	font-size: 11.5px;
	color: var(--ao-muted);
	text-align: center;
	margin: 40px 0 0;
	line-height: 1.8;
}

.post-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 26px 14px;
	margin-bottom: 30px;
}
@media (min-width: 821px) {
	.post-list { grid-template-columns: repeat(3, 1fr); gap: 34px 22px; }
}
.post-list > a {
	position: relative;
	display: block;
	color: var(--ao-text) !important;
	text-decoration: none !important;
}
.post-list-image {
	position: relative;
	width: 100%;

	padding-bottom: 75%;
	background: #111;
	border: 1px solid var(--ao-line);
	overflow: hidden;
	margin-bottom: 6px;
}
.post-list-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.post-list-image .pl-bg {
	object-fit: cover;
	filter: blur(16px) brightness(0.55) saturate(1.1);
	transform: scale(1.15);
}

.post-list-image .pl-main {
	object-fit: contain;
	object-position: center;
	transition: transform 0.15s ease;
}
.post-list > a:hover .post-list-image .pl-main { transform: scale(1.03); }
.post-list > a > span {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	width: 100%;
	line-height: 1.55;
	font-size: 13px;
}

.post-list-time {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	height: 20px;
	line-height: 20px;
	padding: 0 7px;
	font-size: 10px;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
	white-space: nowrap;
}

.post-list--ranked { counter-reset: ao-rank; }
.post-list--ranked > a::before {
	counter-increment: ao-rank;
	content: counter(ao-rank);
	position: absolute;
	top: 5px;
	right: 0;
	z-index: 3;
	width: 30px;
	height: 30px;
	line-height: 30px;
	text-align: center;
	background: var(--ao-pink);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}
.post-list--ranked > a:nth-child(n+100)::before { font-size: 11px; }

.post-list--ranked-cont > a::before { background: #444; }
.post-list--ranked-cont > a:nth-child(n+80)::before { font-size: 11px; }

.aol-genre-chips,
.ao-chip-list,
.ao-hub-index .aol-genre-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 18px;
	margin: 0 0 8px;
}
.ao-hub-index .aol-genre-chips { margin: 6px 0 26px; }
.aol-genre-chips a.chip,
.ao-chip-list a.chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 0 0 1px;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--ao-line);
	border-radius: 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--ao-text) !important;
	text-decoration: none !important;
}
.aol-genre-chips a.chip::before,
.ao-chip-list a.chip::before {
	content: "";
	flex: 0 0 14px;
	height: 14px;
	background: var(--ao-pink);
	-webkit-mask: var(--ao-ic-tag) center/contain no-repeat;
	mask: var(--ao-ic-tag) center/contain no-repeat;
}
.aol-genre-chips a.chip:hover,
.ao-chip-list a.chip:hover {
	background: none;
	color: var(--ao-ink-accent) !important;
	border-bottom-color: var(--ao-pink);
}
.ao-hub-index .chip .n,
.ao-chip-list .chip .n {
	margin-left: 2px;
	font-size: 10px;
	color: var(--ao-muted);
}

.aol-hub {
	max-width: 1200px;
	margin: 0 auto;
	line-height: 1.8;
}
.aol-hub .aol-breadcrumb {
	font-size: 12px;
	color: var(--ao-muted);
	margin-bottom: 12px;
}
.aol-hub .aol-breadcrumb a { color: var(--ao-muted) !important; }
.aol-hub .aol-breadcrumb .sep { margin: 0 6px; }
.aol-hub-title {
	font-size: 27px;
	font-weight: 700;
	color: var(--ao-text);
	margin: 0 0 4px;
	line-height: 1.35;
}
.aol-hub-meta {
	font-size: 12.5px;
	color: var(--ao-muted);
	margin: 0 0 14px;
}
.aol-hub-profile {
	font-size: 14px;
	color: var(--ao-text);
	background: var(--ao-panel);
	border: 1px solid var(--ao-line);
	padding: 14px 16px;
	margin: 0 0 18px;
}
.aol-hub .ao-section-title { margin-top: 40px; }

.ao-archive-head { margin: 30px 0 20px; }
.ao-archive-head h1 {
	font-size: 27px;
	font-weight: 700;
	line-height: 1.35;
	margin: 0 0 8px;
}
.ao-archive-desc {
	font-size: 13px;
	color: var(--ao-muted);
	margin: 0;
}
.ao-archive-date { margin-left: 8px; }

.ao-search {
	display: flex;
	max-width: 560px;
	margin: 0 0 24px;
	height: 42px;
	border: 1px solid var(--ao-line);
	border-radius: 21px;
	background: #fff;
	overflow: hidden;
}
.ao-search input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 0 18px;
	border: 0;
	background: none;
	color: var(--ao-text);
	font-size: 14px;
	outline: none;
}
.ao-search input[type="search"]::placeholder { color: rgba(0, 0, 0, 0.42); }
.ao-search button {
	padding: 0 22px;
	border: none;
	background: var(--ao-pink);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}

.ao-search-hero {
	margin: 20px auto 0;
	border-color: transparent;
}
.ao-search-count {
	margin-left: 10px;
	font-size: 12px;
	font-weight: 400;
	color: var(--ao-muted);
}
.ao-search-empty { color: var(--ao-muted); }

.ao-free-note {
	font-size: 12.5px;
	color: var(--ao-muted);
	margin: 6px 0 20px;
	line-height: 1.7;
}
.ao-free-counts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 18px;
}
.ao-free-counts span {
	background: var(--ao-panel);
	border: 1px solid var(--ao-line);
	padding: 6px 12px;
	font-size: 13px;
}
.ao-free-counts b { color: var(--ao-ink-accent); font-size: 15px; margin: 0 2px; }

.ao-banner-area {
	margin: 0 0 26px;
	text-align: center;
}
.ao-banner-area img { max-width: 100%; height: auto; }
.aol-banner {
	text-align: center;
	margin: 30px 0;
}
.aol-banner-inner { display: block; margin: 0 auto; }
.aol-banner ins.widget-banner { display: block; text-decoration: none; }
.aol-banner img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}
.aol-banner--home_top { margin: 18px 0 26px; }
.aol-banner--list_mid { margin: 6px 0 36px; }

#ao-footer {
	background: var(--ao-panel);
	border-top: 1px solid var(--ao-line);
	text-align: center;
	padding: 28px 16px 36px;
	margin-top: 50px;
}
#ao-footer-nav ul {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
}
#ao-footer-nav a {
	color: var(--ao-text) !important;
	font-size: 12.5px;
	text-decoration: none;
}
#ao-footer-nav a:hover { color: var(--ao-ink-accent) !important; }
.ao-footer-note {
	font-size: 11px;
	color: var(--ao-muted);
	margin: 0 0 6px;
	line-height: 1.8;
}
.ao-footer-copy {
	font-size: 11px;
	color: var(--ao-muted);
	margin: 0;
}

.aol-tracks-body {
	font-size: 14px;
	line-height: 1.8;
	color: var(--ao-text);
	background: var(--ao-panel);
	border: 1px solid var(--ao-line);
	padding: 14px 16px;
	max-height: 520px;
	overflow: auto;
	white-space: pre-wrap;
	word-break: break-word;
}
.aol-tracks-meta { margin: 8px 0 0; font-size: 12px; color: var(--ao-muted); }

.aol-legit-notice {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.aol-legit-notice h2 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.45;
	margin: 34px 0 14px;
	padding-left: 11px;
	border-left: 5px solid var(--ao-pink);
	color: var(--ao-text);
}
.aol-legit-notice p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.9; color: var(--ao-text); }

.aol-summary p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.9; color: var(--ao-text); }

.aol-langbar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; font-size: 12.5px; }
.aol-langbar a,
.aol-langbar .cur {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--ao-line);
	background: #fff;
	color: var(--ao-muted) !important;
	text-decoration: none;
}
.aol-langbar .cur { background: var(--ao-pink); border-color: var(--ao-pink); color: #fff !important; }
.aol-langbar a:hover { color: var(--ao-text) !important; border-color: var(--ao-pink); }
.aol-edition-badge {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	background: var(--ao-panel);
	color: var(--ao-text);
	font-size: 12px;
	border: 1px solid var(--ao-line);
}
.aol-work-head .aol-edition-badge {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.3);
	color: #fff;
}
.aol-lwork-desc {
	white-space: pre-wrap;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ao-text);
	background: var(--ao-panel);
	border: 1px solid var(--ao-line);
	padding: 14px 16px;
	max-height: 520px;
	overflow: auto;
}
.aol-lwork-note { font-size: 12.5px; color: var(--ao-muted); margin: 0 0 8px; }
.aol-lhub-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.8; }
.aol-lhub-about {
	margin: 28px 0 0;
	padding: 14px 16px;
	background: var(--ao-panel);
	border: 1px solid var(--ao-line);
	font-size: 13.5px;
	line-height: 1.8;
}
.aol-lhub-about h2 { font-size: 15px; margin: 0 0 6px; }

#ao-main.ao-light-panel h1,
#ao-main.ao-light-panel .entry-title { font-size: 27px; line-height: 1.4; margin: 0 0 18px; padding: 0; }
#ao-main.ao-light-panel h2 {
	font-size: 21px;
	line-height: 1.45;
	margin: 38px 0 12px;
	padding: 0 0 8px;
	border-bottom: 2px solid var(--ao-line);
	color: var(--ao-text);
}
#ao-main.ao-light-panel h2:first-child { margin-top: 4px; }
#ao-main.ao-light-panel h3 {
	font-size: 16.5px;
	line-height: 1.5;
	margin: 22px 0 8px;
	padding: 0 0 0 10px;
	border-left: 4px solid var(--ao-pink);
	color: var(--ao-text);
}
#ao-main.ao-light-panel h1 + *,
#ao-main.ao-light-panel h2 + *,
#ao-main.ao-light-panel h3 + * { margin-top: 0; }
#ao-main.ao-light-panel > *:first-child { margin-top: 0; }
#ao-main.ao-light-panel #mainContentInner { padding-top: 0; }
#ao-main.ao-light-panel #postHeader { margin: 0 0 22px; }
#ao-main.ao-light-panel #postContent { margin-top: 0; }
#ao-main.ao-light-panel p { margin: 0 0 16px; line-height: 1.85; font-size: 15px; }
#ao-main.ao-light-panel a { color: var(--ao-ink-accent); }
#ao-main.ao-light-panel table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14.5px; }
#ao-main.ao-light-panel th,
#ao-main.ao-light-panel td { border-bottom: 1px solid var(--ao-line); padding: 9px 10px; text-align: left; vertical-align: top; line-height: 1.6; }
#ao-main.ao-light-panel th { width: 8.5em; color: var(--ao-muted); font-weight: 600; white-space: nowrap; background: var(--ao-panel); }
#ao-main.ao-light-panel ul,
#ao-main.ao-light-panel ol { margin: 0 0 16px; padding-left: 1.4em; }
#ao-main.ao-light-panel li { margin: 0 0 4px; line-height: 1.8; }

@media (max-width: 600px) {
	.ao-section-head { row-gap: 4px; }
	.ao-section-head .ao-section-title { white-space: nowrap; font-size: 21px; }
	.ao-section-title { font-size: 21px; }
	.ao-section-sub { order: 3; flex-basis: 100%; }
	.ao-hero { padding: 34px 18px 38px; }
	.ao-hero-catch { font-size: 17px; }
	.aol-hub-title,
	.ao-archive-head h1,
	#ao-main.ao-light-panel h1,
	#ao-main.ao-light-panel .entry-title { font-size: 22px; }

	#ao-main.ao-light-panel table,
	#ao-main.ao-light-panel tbody,
	#ao-main.ao-light-panel tr,
	#ao-main.ao-light-panel th,
	#ao-main.ao-light-panel td { display: block; width: auto; }
	#ao-main.ao-light-panel tr { border-bottom: 1px solid var(--ao-line); }
	#ao-main.ao-light-panel th { border-bottom: none; padding: 9px 10px 3px; white-space: normal; background: transparent; font-size: 12.5px; }
	#ao-main.ao-light-panel td { border-bottom: none; padding: 0 10px 10px; }
}

/* ===== 案B: 参考サイト（asmr.one）の構造に合わせた上書き ここから ===== */
/* 案B: 参考サイト（asmr.one/works）の構造を踏襲する。skin.css・audio.css の後に読み込む上書き。
   実物を画像なしで描画して確認した骨格:
     ・PC は左に常時表示のサイドバー、その右が本文（SP は隠してハンバーガーのドロワー）
     ・ページの地はグレー #EEEEEE、カードだけ白
     ・最上部に人気作の横スクロール
     ・カードに「表紙／タイトル／サークル／★評価と件数／発売日・収録時間／赤い価格／タグのピル／声優の色つきピル」を載せる
     ・PC 4列・SP 1列
     ・固定ヘッダー 高さ50px #1976D2／星 #FFC107／リンク #1890FF／本文14px・見出し24px weight400
   寄せないもの: ロゴ画像・名称・素材（ロゴはコードで描く）・配信元の名前をボタンに出すこと */

:root {
	--ao-pink: #1976D2;
	--ao-ink-accent: #1565C0;
	--ao-accent2: #1890FF;
	--ao-star: #FFC107;
	--ao-price: #F44336;
	--ao-bg: #eeeeee;
	--ao-surface: #ffffff;
	--ao-panel: #ffffff;
	--ao-soft: #f5f5f5;
	--ao-ph: #e0e0e0;
	--ao-line: rgba(0, 0, 0, 0.12);
	--ao-text: rgba(0, 0, 0, 0.87);
	--ao-muted: rgba(0, 0, 0, 0.55);
	--ao-band: #eeeeee;
	--ao-shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 1px rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.12);
	--ao-head-h: 50px;
	--ao-rail-w: 190px;
	--ao-ic-star5: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20120%2024%27%3E%3Cpath%20transform%3D%27translate%280%29%27%20d%3D%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27%2F%3E%3Cpath%20transform%3D%27translate%2824%29%27%20d%3D%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27%2F%3E%3Cpath%20transform%3D%27translate%2848%29%27%20d%3D%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27%2F%3E%3Cpath%20transform%3D%27translate%2872%29%27%20d%3D%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27%2F%3E%3Cpath%20transform%3D%27translate%2896%29%27%20d%3D%27M12%2017.27%2018.18%2021l-1.64-7.03L22%209.24l-7.19-.61L12%202%209.19%208.63%202%209.24l5.46%204.73L5.82%2021z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%2020v-6h4v6h5v-8h3L12%203%202%2012h3v8z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-scene: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%203v10.55A4%204%200%201%200%2014%2017V7h4V3z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-length: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%2010%2010A10%2010%200%200%200%2012%202m1%2011H7v-2h4V6h2z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-new: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M20%204H4a2%202%200%200%200-2%202v12a2%202%200%200%200%202%202h16a2%202%200%200%200%202-2V6a2%202%200%200%200-2-2m0%2014H4V8h16z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-rank: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M7%2021h3V9H7zm7%200h3V3h-3zM3%2021h3v-8H3z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-mic: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%2014a3%203%200%200%200%203-3V5a3%203%200%200%200-6%200v6a3%203%200%200%200%203%203m5-3a5%205%200%200%201-10%200H5a7%207%200%200%200%206%206.92V21h2v-3.08A7%207%200%200%200%2019%2011z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-tag: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27m21.4%2011.6-9-9A2%202%200%200%200%2011%202H4a2%202%200%200%200-2%202v7a2%202%200%200%200%20.6%201.4l9%209a2%202%200%200%200%202.8%200l7-7a2%202%200%200%200%200-2.8M6.5%208A1.5%201.5%200%201%201%208%206.5%201.5%201.5%200%200%201%206.5%208%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M16%2011a3%203%200%201%200-3-3%203%203%200%200%200%203%203m-8%200a3%203%200%201%200-3-3%203%203%200%200%200%203%203m0%202c-2.33%200-7%201.17-7%203.5V19h14v-2.5C15%2014.17%2010.33%2013%208%2013m8%200c-.29%200-.62%200-.97.05A4.8%204.8%200%200%201%2017%2016.5V19h6v-2.5c0-2.33-4.67-3.5-7-3.5%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-trial: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M8%205v14l11-7z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-out: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M19%2019H5V5h7V3H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7h-2zM14%203v2h3.59l-9.83%209.83%201.41%201.41L19%206.41V10h2V3z%27%2F%3E%3C%2Fsvg%3E");
	--ao-rc-search: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M15.5%2014h-.79l-.28-.27a6.5%206.5%200%201%200-.7.7l.27.28v.79l5%204.99L20.49%2019zm-6%200A4.5%204.5%200%201%201%2014%209.5%204.5%204.5%200%200%201%209.5%2014%27%2F%3E%3C%2Fsvg%3E");
}

html, body { background: var(--ao-bg) !important; }
body { color: var(--ao-text); font-size: 14px; }

/* ===== ヘッダー ===== */
#ao-header {
	background: var(--ao-pink);
	border-bottom: none;
	box-shadow: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px rgba(0,0,0,.14);
}
#ao-logo { color: #fff !important; }
#ao-logo span { color: rgba(255,255,255,.82); }
#ao-header .ao-hd-btn, #ao-header summary { color: #fff; }
#ao-header .ao-hd-btn svg { fill: #fff; }

/* ===== 左サイドバー（PC） ===== */
#ao-rail { display: none; }
@media (min-width: 900px) {
	#ao-container { display: flex; align-items: flex-start; max-width: 1280px; }
	#ao-rail {
		display: block;
		position: sticky;
		top: var(--ao-head-h);
		flex: 0 0 var(--ao-rail-w);
		width: var(--ao-rail-w);
		max-height: calc(100vh - var(--ao-head-h));
		overflow-y: auto;
		background: var(--ao-surface);
		border-right: 1px solid var(--ao-line);
		padding: 8px 0 24px;
	}
	#ao-main { flex: 1 1 auto; min-width: 0; padding: 0 20px 24px; }
}
.ao-rail-i {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 18px;
	color: var(--ao-text) !important;
	text-decoration: none !important;
	font-size: 14px;
}
.ao-rail-i:hover { background: rgba(0,0,0,.04); }
.ao-rail-i.is-current { background: #e3f2fd; color: var(--ao-ink-accent) !important; font-weight: 500; }
.ao-rail-ic {
	width: 22px; height: 22px; flex: 0 0 22px;
	background: currentColor;
	opacity: .66;
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}
.ao-rail-i.is-current .ao-rail-ic { opacity: 1; }
.ao-ic-home   { -webkit-mask-image: var(--ao-rc-home);   mask-image: var(--ao-rc-home); }
.ao-ic-scene  { -webkit-mask-image: var(--ao-rc-scene);  mask-image: var(--ao-rc-scene); }
.ao-ic-length { -webkit-mask-image: var(--ao-rc-length); mask-image: var(--ao-rc-length); }
.ao-ic-new    { -webkit-mask-image: var(--ao-rc-new);    mask-image: var(--ao-rc-new); }
.ao-ic-rank   { -webkit-mask-image: var(--ao-rc-rank);   mask-image: var(--ao-rc-rank); }
.ao-ic-mic    { -webkit-mask-image: var(--ao-rc-mic);    mask-image: var(--ao-rc-mic); }
.ao-ic-tag    { -webkit-mask-image: var(--ao-rc-tag);    mask-image: var(--ao-rc-tag); }
.ao-ic-circle { -webkit-mask-image: var(--ao-rc-circle); mask-image: var(--ao-rc-circle); }
.ao-ic-trial  { -webkit-mask-image: var(--ao-rc-trial);  mask-image: var(--ao-rc-trial); }
.ao-ic-search { -webkit-mask-image: var(--ao-rc-search); mask-image: var(--ao-rc-search); }

/* ===== 見出し・本文まわり ===== */
#ao-main.ao-dark, #ao-main.ao-light-panel { background: transparent; color: var(--ao-text); }
.ao-section-title, #ao-main h1, #ao-main h2 { font-size: 24px; font-weight: 400; line-height: 1.45; }
#ao-main h3 { font-size: 18px; font-weight: 500; }
.ao-section-head { margin: 28px 0 12px; }
#ao-main a { color: var(--ao-accent2); }

/* ===== 作品カード ===== */
.ao-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0 0 28px;
}
@media (min-width: 600px)  { .ao-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .ao-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1150px) { .ao-cards { grid-template-columns: repeat(4, 1fr); } }

.ao-cards--row {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 10px;
}
.ao-cards--row .ao-card { scroll-snap-align: start; }

.ao-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ao-surface);
	border-radius: 4px;
	box-shadow: var(--ao-shadow);
	overflow: hidden;
}
.ao-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: var(--ao-ph);
}
.ao-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ao-card__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.ao-card__title {
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
	color: #000 !important;
	font-size: 20px; font-weight: 400; line-height: 32px; text-decoration: none !important;
}
.ao-card__title:hover { color: var(--ao-ink-accent) !important; }
.ao-card__maker {
	font-size: 16px; line-height: 28px; color: #9e9e9e !important; text-decoration: none !important;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ao-card__maker:hover { text-decoration: underline !important; }
.ao-card__rate { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; line-height: 21px; }
.ao-stars5 {
	--p: 0%;
	display: inline-block; width: 120px; height: 24px; flex: 0 0 120px;
	background: linear-gradient(90deg, var(--ao-star) var(--p), #dcdcdc var(--p));
	-webkit-mask: var(--ao-ic-star5) 0 0 / 120px 24px no-repeat;
	mask: var(--ao-ic-star5) 0 0 / 120px 24px no-repeat;
}
.ao-card__rate .v { color: var(--ao-price); font-size: 16px; font-weight: 500; line-height: 24px; }
.ao-card__rate .n { color: #9e9e9e; font-size: 14px; }
.ao-card__meta {
	display: flex; align-items: center; gap: 4px; margin: 2px 0 0;
	font-size: 14px; line-height: 21px; color: #000;
}
.ao-card__meta .t { margin-right: 10px; }
.ao-card__meta .src { color: #2196F3 !important; text-decoration: none !important; font-size: 14px; }
.ao-card__meta .src:hover { text-decoration: underline !important; }
.ao-mi {
	width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; opacity: .82;
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}
.ao-mi-time { -webkit-mask-image: var(--ao-rc-length); mask-image: var(--ao-rc-length); }
.ao-mi-out  { -webkit-mask-image: var(--ao-rc-out);    mask-image: var(--ao-rc-out); }
.ao-card__price { margin: 4px 0 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.ao-card__price .sales { margin-left: auto; }
.ao-card__price strong { color: var(--ao-price); font-size: 20px; font-weight: 500; line-height: 32px; }
.ao-card__price s { color: #9e9e9e; font-size: 14px; }
.ao-card__price .off { color: var(--ao-price); font-size: 14px; font-weight: 500; }
.ao-card__price .sales { color: #000; font-size: 14px; }
.ao-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ao-card__tags .t {
	border: none; border-radius: 16px; background: #f0f0f0;
	padding: 5px 12px; font-size: 14px; line-height: 21px;
	color: rgba(0, 0, 0, .87) !important; text-decoration: none !important;
}
.ao-card__tags .t:hover { background: #e3f2fd; color: var(--ao-ink-accent) !important; }
.ao-card__cvs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ao-card__cvs .cv {
	border-radius: 16px; padding: 5px 12px; font-size: 14px; line-height: 21px;
	color: #fff !important; text-decoration: none !important;
}
.ao-card__cvs .cv:hover { filter: brightness(1.1); }

.ao-cards--ranked { counter-reset: ao-rank; }
.ao-cards--ranked .ao-card::before {
	counter-increment: ao-rank; content: counter(ao-rank);
	position: absolute; top: 8px; right: 8px; z-index: 3;
	width: 28px; height: 28px; line-height: 28px; border-radius: 50%;
	text-align: center; background: var(--ao-pink); color: #fff; font-size: 13px; font-weight: 500;
	box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.ao-cards--ranked-cont .ao-card::before { background: #757575; }

/* ===== ヒーロー・一覧の見出し ===== */
.ao-hero { background: var(--ao-pink); color: #fff; padding: 24px 20px 28px; margin-bottom: 4px; }
.ao-hero-catch { font-size: 20px; font-weight: 500; }
.ao-hero-desc { color: rgba(255,255,255,.85); font-size: 13px; }
.ao-search-hero input { border-radius: 24px 0 0 24px; }
.ao-search-hero button { border-radius: 0 24px 24px 0; }
.ao-archive-head { background: transparent; padding: 18px 0 4px; }

/* ===== チップ ===== */
.aol-genre-chips, .ao-chip-list { gap: 8px; }
.aol-genre-chips a.chip, .ao-chip-list a.chip {
	padding: 5px 12px; border-radius: 16px; background: var(--ao-surface);
	border: 1px solid var(--ao-line); color: var(--ao-text) !important; font-size: 13px;
}
.aol-genre-chips a.chip::before, .ao-chip-list a.chip::before { display: none; }
.aol-genre-chips a.chip:hover, .ao-chip-list a.chip:hover { border-color: var(--ao-accent2); color: var(--ao-ink-accent) !important; }
.aol-genre-chips a.chip.is-current { background: var(--ao-pink); border-color: var(--ao-pink); color: #fff !important; }
.aol-genre-chips .chip .n, .ao-chip-list .chip .n { color: var(--ao-muted); margin-left: 6px; font-size: 12px; }
.aol-genre-chips a.chip.is-current .n { color: rgba(255,255,255,.85); }

/* ===== 作品ページ ===== */
.aol-work-head { background: var(--ao-surface) !important; color: var(--ao-text) !important; padding: 18px 0 22px; margin-bottom: 18px; }
.aol-work-head h1 { color: var(--ao-text) !important; font-size: 22px; font-weight: 500; margin: 0 0 10px; }
.aol-work-head img { max-height: 400px; width: auto; margin: 0 auto; display: block; }
.aol-work-head .aol-pr, .aol-work-head .aol-breadcrumb span { color: var(--ao-muted) !important; }
.aol-work-head .aol-breadcrumb a { color: var(--ao-accent2) !important; }
.aol-productno { border-radius: 4px; }
.aol-cta a {
	border-radius: 28px; background: var(--ao-pink); color: #fff !important;
	box-shadow: 0 1px 5px rgba(0,0,0,.2); font-weight: 500; letter-spacing: .04em;
}
.aol-cta a:hover { background: var(--ao-ink-accent); }
.aol-review .stars { color: var(--ao-star); }
.aol-stars .bar i { background: var(--ao-star); }
.aol-pricecard, .aol-reviewstats, .aol-taginfo, .aol-features, .aol-details, .aol-facts,
.aol-risks .aol-risk, .aol-benefits .aol-benefit, .aol-tips .aol-tip {
	background: var(--ao-surface); border-radius: 4px; box-shadow: var(--ao-shadow); border: none;
}
.aol-pricecard, .aol-reviewstats, .aol-taginfo { padding: 14px 16px; }
.aol-hub-profile { background: var(--ao-surface); border-radius: 4px; box-shadow: var(--ao-shadow); padding: 14px 16px; }

/* ===== フッター ===== */
#ao-footer { background: var(--ao-surface); border-top: 1px solid var(--ao-line); }

/* 作品ページの帯は、PC ではサイドバーの下に潜らないよう本文の幅に収める */
@media (min-width: 900px) {
	.aol-work-head, .ao-hero { width: 100%; margin-left: 0; margin-right: 0; }
}

/* シーン一覧: 1目的＝1枚の白カードにし、件数は見出しから離す */
.ao-scene-block {
	background: var(--ao-surface);
	border-radius: 4px;
	box-shadow: var(--ao-shadow);
	padding: 14px 16px 16px;
	margin: 0 0 14px;
}
.ao-scene-block .ao-section-title { font-size: 20px; margin: 0; }
.ao-scene-block .ao-section-title .n { margin-left: 10px; font-size: 14px; color: var(--ao-muted); font-weight: 400; }
.ao-scene-lead { margin: 4px 0 10px; font-size: 13px; color: var(--ao-muted); }
.ao-hub-index .aol-genre-chips { margin: 0; }
.ao-archive-desc .ao-archive-date { margin-left: 10px; color: var(--ao-muted); }


/* ===== トップ（参考サイトの構成に合わせる） ===== */
.ao-row-sec { margin: 14px 0 6px; }
.ao-row-title {
	display: flex; align-items: center; gap: 8px;
	font-size: 24px; font-weight: 400; line-height: 1.4; margin: 0 0 12px;
}
.ao-row-title a { color: var(--ao-text) !important; text-decoration: none !important; font-size: 26px; line-height: 1; }
.ao-all-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 22px 0 6px; }
.ao-all-title { font-size: 24px; font-weight: 400; line-height: 1.4; margin: 0; }
.ao-sort { display: flex; gap: 8px; }
.ao-sort-i {
	padding: 5px 14px; border-radius: 18px; border: 1px solid var(--ao-line);
	background: var(--ao-surface); color: var(--ao-text) !important;
	text-decoration: none !important; font-size: 14px;
}
.ao-sort-i:hover { border-color: var(--ao-accent2); color: var(--ao-ink-accent) !important; }
.ao-sort-i.is-current { background: var(--ao-pink); border-color: var(--ao-pink); color: #fff !important; }
.ao-all-lead { font-size: 14px; color: var(--ao-muted); margin: 0 0 14px; }
.ao-more-line { text-align: center; margin: 4px 0 26px; }
.ao-more-btn {
	display: inline-block; padding: 10px 28px; border-radius: 28px;
	background: var(--ao-pink); color: #fff !important; text-decoration: none !important;
	font-size: 14px; font-weight: 500;
	box-shadow: 0 1px 5px rgba(0,0,0,.2);
}
.ao-more-btn:hover { background: var(--ao-ink-accent); }
.ao-front-note { font-size: 12px; color: var(--ao-muted); margin: 20px 0 0; }


/* サイトロゴのマーク（サイトアイコンと同じヘッドホン。色は文字色に合わせる） */
#ao-logo { display: inline-flex; align-items: center; gap: 7px; }
.ao-logo-mark {
	width: 26px;
	height: 26px;
	flex: 0 0 26px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5.88%2012.5a6.12%206.12%200%200%201%2012.24%200%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.76%27%2F%3E%3Crect%20x%3D%273.66%27%20y%3D%2711.4%27%20width%3D%274.44%27%20height%3D%275.4%27%20rx%3D%272.22%27%2F%3E%3Crect%20x%3D%2715.9%27%20y%3D%2711.4%27%20width%3D%274.44%27%20height%3D%275.4%27%20rx%3D%272.22%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M5.88%2012.5a6.12%206.12%200%200%201%2012.24%200%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.76%27%2F%3E%3Crect%20x%3D%273.66%27%20y%3D%2711.4%27%20width%3D%274.44%27%20height%3D%275.4%27%20rx%3D%272.22%27%2F%3E%3Crect%20x%3D%2715.9%27%20y%3D%2711.4%27%20width%3D%274.44%27%20height%3D%275.4%27%20rx%3D%272.22%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}

/* ===== 案B ここまで ===== */

/* ===== 左メニューはアイコンだけ（参考サイトと同じ幅60px。ラベルは読み上げ・クローラ向けに残す） ===== */
@media (min-width: 900px) {
	:root { --ao-rail-w: 60px; }
	#ao-rail { padding: 6px 0 24px; }
	.ao-rail-i { justify-content: center; padding: 12px 0; gap: 0; }
	.ao-rail-t {
		position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
		overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
	}
	.ao-rail-i.is-current { background: #e3f2fd; box-shadow: inset 3px 0 0 var(--ao-pink); }
	#ao-main { padding: 0 16px 24px; }
}

/* ===== 横スクロールのカード（参考サイトの Popular works と同じ作り） ===== */
.ao-cards--row .ao-card { flex: 0 0 245px; }
.ao-card--row .ao-card__body { padding: 8px 10px 10px; gap: 4px; }
.ao-card--row .ao-card__title {
	font-size: 14px; line-height: 20px; -webkit-line-clamp: 3; font-weight: 400;
}
.ao-card--row .ao-card__tags { margin-top: 4px; gap: 5px; }
.ao-card--row .ao-card__tags .t,
.ao-card--row .ao-card__cvs .cv { font-size: 13px; line-height: 20px; padding: 0 9px; border-radius: 10px; }
.ao-card--row .ao-card__cvs { margin-top: 5px; align-items: center; }
.ao-card__len {
	display: inline-flex; align-items: center; gap: 3px;
	background: #9e9e9e; color: #fff; border-radius: 10px;
	padding: 0 9px; font-size: 13px; line-height: 20px;
}
.ao-card__len .ao-mi { width: 14px; height: 14px; flex: 0 0 14px; opacity: 1; }
.ao-card__code, .ao-card__date {
	position: absolute; z-index: 2;
	background: rgba(0, 0, 0, .55); color: #fff;
	font-size: 12px; line-height: 18px; padding: 1px 7px; border-radius: 3px;
}
.ao-card__code { top: 6px; left: 6px; }
.ao-card__date { right: 0; bottom: 6px; border-radius: 3px 0 0 3px; }

/* 本文は画面幅いっぱい（参考サイトと同じ。1280px で止めない） */
@media (min-width: 900px) {
	#ao-container { max-width: none; }
}
/* グリッドは幅に応じて列数が変わる（参考サイトと同じ 245px 前後の列） */
.ao-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
@media (min-width: 600px)  { .ao-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (min-width: 900px)  { .ao-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (min-width: 1150px) { .ao-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); } }
@media (max-width: 599px)  { .ao-cards { grid-template-columns: 1fr; } }
.ao-cards--row { grid-template-columns: none; }

/* ===== 一覧の表示切替（参考サイトと同じ位置・3段階） ===== */
:root {
	--ao-vw-large: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M4%2011h5V5H4zm0%207h5v-6H4zm6%200h5v-6h-5zm6%200h5v-6h-5zm-6-7h5V5h-5zm6-6v6h5V5z%27%2F%3E%3C%2Fsvg%3E");
	--ao-vw-grid: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M10%2018h5V5h-5zM4%2018h5V5H4zm12%200h5V5h-5z%27%2F%3E%3C%2Fsvg%3E");
	--ao-vw-list: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M3%2013h2v-2H3zm0%204h2v-2H3zm0-8h2V7H3zm4%204h14v-2H7zm0%204h14v-2H7zM7%207v2h14V7z%27%2F%3E%3C%2Fsvg%3E");
}
.ao-view { display: inline-flex; margin-left: auto; border-radius: 4px; overflow: hidden; border: 1px solid var(--ao-line); background: var(--ao-surface); }
.ao-view-b {
	width: 38px; height: 34px; padding: 0; border: 0; cursor: pointer;
	background: var(--ao-surface); color: var(--ao-muted);
	display: inline-flex; align-items: center; justify-content: center;
}
.ao-view-b + .ao-view-b { border-left: 1px solid var(--ao-line); }
.ao-view-b::before {
	content: ""; width: 22px; height: 22px; background: currentColor;
	-webkit-mask-size: contain; mask-size: contain;
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-position: center; mask-position: center;
}
.ao-vi-large::before { -webkit-mask-image: var(--ao-vw-large); mask-image: var(--ao-vw-large); }
.ao-vi-grid::before  { -webkit-mask-image: var(--ao-vw-grid);  mask-image: var(--ao-vw-grid); }
.ao-vi-list::before  { -webkit-mask-image: var(--ao-vw-list);  mask-image: var(--ao-vw-list); }
.ao-view-b:hover { color: var(--ao-ink-accent); }
.ao-view-b[aria-pressed="true"] { background: var(--ao-pink); color: #fff; }
.ao-archive-head + .ao-view { margin: 0 0 14px; }

/* 大きく表示 */
[data-view="large"] .ao-cards:not(.ao-cards--row) { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* リスト表示: 表紙を左、情報を右に */
@media (min-width: 600px) {
	[data-view="list"] .ao-cards:not(.ao-cards--row) { grid-template-columns: 1fr; gap: 12px; }
	[data-view="list"] .ao-cards:not(.ao-cards--row) .ao-card { flex-direction: row; }
	[data-view="list"] .ao-cards:not(.ao-cards--row) .ao-card__thumb { flex: 0 0 240px; width: 240px; }
	[data-view="list"] .ao-cards:not(.ao-cards--row) .ao-card__body { flex: 1 1 auto; min-width: 0; }
	[data-view="list"] .ao-cards:not(.ao-cards--row) .ao-card__title { -webkit-line-clamp: 2; }
	[data-view="list"] .ao-cards--ranked .ao-card::before { top: 8px; right: auto; left: 8px; }
}

/* お問い合わせフォーム（Contact Form 7・2026-09-24）
   計算の質問の欄は JIN:R の .wpcf7-text の対象外で素の見た目だった → 他の入力欄（JIN:R 既定）にそろえる。
   送信ボタンは JIN:R 既定の灰色 → サイトの色。select は JIN:R が矢印を消しているので付け直す */
.wpcf7 input.wpcf7-quiz {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin-top: 6px;
	border: 1px solid #ececec;
	background-color: #fff;
	padding: 9px;
	border-radius: 3px;
	font-size: 1em;
	font-weight: 300;
}
.wpcf7 input.wpcf7-quiz:focus { border-color: #6495ed; }
.wpcf7 .wpcf7-form-control-wrap select.wpcf7-select {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 12 8%27%3E%3Cpath d=%27M1 1l5 5 5-5%27 fill=%27none%27 stroke=%27%23757575%27 stroke-width=%271.6%27/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
	box-sizing: border-box;
	width: 100%;
	padding-right: 38px;
}
.wpcf7 .wpcf7-form input[type=submit] {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0 auto;
	padding: 14px;
	border: none;
	border-radius: 8px;
	background: var(--ao-pink);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	box-shadow: none;
	cursor: pointer;
}
.wpcf7 .wpcf7-form input[type=submit]:hover { background: var(--ao-ink-accent); }

/* ===== ハブの作品一覧（並べ替え・ページ送り 2026-09-29） =====
   声優・サークル・タグ・シリーズ・聴く目的・収録時間のページ。部品はトップの並べ替え（.ao-sort）と /latest-works/ のページ送りを使う。
   並べ替えのリンクは #works 付きなので、開き直した後も一覧の頭が固定ヘッダーの下に来るようにする */
.ao-hl { scroll-margin-top: calc(var(--ao-head-h) + 12px); }
.ao-hl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 40px; }
/* 聴く目的・収録時間・シリーズのページは見出しに下線が付く（#ao-main.ao-light-panel h2）。ID 付きで余白を消し、下線が表示の切り替えの手前まで届くよう横に伸ばす */
#ao-main .ao-hl-head .ao-hl-title { margin: 0; flex: 1 1 auto; min-width: 0; }
.ao-hl-sort { flex-wrap: wrap; margin: 14px 0 8px; }
.ao-hl-note { font-size: 13px; line-height: 1.7; color: var(--ao-muted); margin: 0 0 14px; }
@media (max-width: 600px) {
	.ao-hl-head { margin-top: 30px; }
	.ao-hl-sort { gap: 6px; }
	.ao-hl-sort .ao-sort-i { padding: 4px 11px; font-size: 13.5px; }
}
/* 599px 以下は一覧が1列で、表示の切り替えを押しても見た目が変わらない（リスト表示は 600px 以上だけ）ので出さない */
@media (max-width: 599px) {
	.ao-hl-head .ao-view { display: none; }
}

/* ===== 作品ページの関連作品（2026-10-05・plan §24）: 表紙＋作品名だけのカード。リンクは1枚に1本 =====
   一覧ページのカード（.ao-card）とは別。PC は幅に合わせて列が増え、スマホは横に流す */
.ao-minis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; margin: 0 0 28px; }
.ao-mini { display: flex; flex-direction: column; min-width: 0; background: var(--ao-surface); border-radius: 4px; box-shadow: var(--ao-shadow); overflow: hidden; }
.ao-mini__link { display: block; color: var(--ao-text) !important; text-decoration: none !important; }
.ao-mini__thumb { display: block; aspect-ratio: 4 / 3; background: var(--ao-ph); }
.ao-mini__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ao-mini__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 10px 0; font-size: 14px; line-height: 20px; }
.ao-mini__link:hover .ao-mini__title { color: var(--ao-ink-accent); }
.ao-mini__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin: 4px 10px 10px; font-size: 13px; line-height: 18px; color: var(--ao-muted); }
.ao-mini__meta .rate { color: var(--ao-price); font-weight: 500; }
.ao-mini__meta .n { margin-left: -6px; }
@media (max-width: 599px) {
	.ao-minis { display: flex; overflow-x: auto; scroll-snap-type: x proximity; gap: 10px; padding-bottom: 8px; -webkit-overflow-scrolling: touch; }
	.ao-mini { flex: 0 0 44%; scroll-snap-align: start; }
}