/*
Theme Name: 超絶美少女研究
Theme URI: https://takeino-game.com/
Description: 「超絶美少女研究」用の独立テーマ。分析編・実証編・法則・お題募集を持つ。
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bishoujo-lab
*/

:root {
	--bl-ink: #1A1A1F;
	--bl-paper: #FAFAF7;
	--bl-white: #FFFFFF;
	--bl-rule: #E2DFD8;
	--bl-rule-strong: #C9C5BB;
	--bl-ph: #ECE9E2;
	--bl-ph-border: #DAD6CC;
	--bl-ph-text: #6B6A65;
	--bl-muted: #5F5E5A;
	--bl-body: #3E3D3A;
	--bl-soft: #F3F1EC;
	--bl-dark-sub: #D8D6CF;
	--bl-accent: #B0204F;
	--bl-accent-hover: #7E1238;
	--bl-serif: 'Noto Serif JP', serif;
	--bl-sans: 'Zen Kaku Gothic New', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bl-paper); color: var(--bl-ink); font-family: var(--bl-sans); font-size: 16px; line-height: 1.8; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bl-accent); }
a:hover { color: var(--bl-accent-hover); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.bl-wrap { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.bl-serif { font-family: var(--bl-serif); }

/* ヘッダー */
.bl-header { border-bottom: 1px solid var(--bl-rule); background: var(--bl-paper); }
.bl-crumb { padding-top: 14px; font-size: 13px; color: var(--bl-muted); }
.bl-crumb a { color: var(--bl-muted); text-decoration: none; }
.bl-crumb a:hover { text-decoration: underline; }
.bl-header__bar { padding-top: 12px; padding-bottom: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.bl-logo { font-family: var(--bl-serif); font-weight: 900; font-size: 26px; color: var(--bl-ink); text-decoration: none; letter-spacing: .04em; }
.bl-logo:hover { color: var(--bl-ink); }
.bl-nav { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; font-weight: 500; }
.bl-nav a { color: var(--bl-ink); text-decoration: none; padding: 12px 0; display: inline-block; }
.bl-nav a:hover, .bl-nav a.is-current { color: var(--bl-accent); }
.bl-nav a.is-current, .bl-nav a.bl-nav__cta { font-weight: 700; }
.bl-nav a.bl-nav__cta { color: var(--bl-accent); }

/* 共通部品 */
.bl-ph { background: var(--bl-ph); border: 1px solid var(--bl-ph-border); display: flex; align-items: center; justify-content: center; color: var(--bl-ph-text); font-size: 14px; text-align: center; padding: 16px; }
.bl-ratio-34 { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.bl-ratio-169 { aspect-ratio: 16 / 9; width: 100%; }
.bl-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bl-tag { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 3px; line-height: 1.6; }
.bl-tag--full { background: var(--bl-accent); color: #fff; }
.bl-tag--rough { background: var(--bl-ph); color: var(--bl-ink); }
.bl-tag--line { border: 1px solid var(--bl-rule-strong); color: var(--bl-body); }
.bl-tag--dark { background: var(--bl-ink); color: var(--bl-paper); }
.bl-meta { font-size: 13px; color: var(--bl-muted); }
.bl-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 28px; border-radius: 4px; font-weight: 700; text-decoration: none; font-family: inherit; font-size: 16px; cursor: pointer; }
.bl-btn--dark { background: var(--bl-ink); color: var(--bl-paper); border: 0; }
.bl-btn--dark:hover { color: var(--bl-paper); opacity: .88; }
.bl-btn--line { border: 1.5px solid var(--bl-ink); color: var(--bl-ink); background: transparent; }
.bl-btn--line:hover { color: var(--bl-ink); background: var(--bl-white); }
.bl-btn--accent { background: var(--bl-accent); color: #fff; border: 0; }
.bl-btn--accent:hover { color: #fff; background: var(--bl-accent-hover); }
.bl-more { font-weight: 700; padding: 12px 0; display: inline-block; }
.bl-sec { padding-top: 64px; }
.bl-sec__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.bl-h2 { margin: 0; font-family: var(--bl-serif); font-size: 32px; line-height: 1.4; }
.bl-h2--s { font-size: 24px; }
.bl-box { background: var(--bl-white); border: 1px solid var(--bl-rule); border-radius: 6px; padding: 24px; }
.bl-box__title { margin: 0 0 12px; font-size: 15px; font-weight: 700; }
.bl-dark { background: var(--bl-ink); color: var(--bl-paper); border-radius: 6px; padding: 32px; }
.bl-dark p { color: var(--bl-dark-sub); }
.bl-dark a { color: var(--bl-paper); }

/* カード */
.bl-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
.bl-grid--s { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 16px; }
.bl-card { display: flex; flex-direction: column; gap: 10px; color: var(--bl-ink); text-decoration: none; }
.bl-card:hover { color: var(--bl-ink); }
.bl-card:hover .bl-card__title { text-decoration: underline; }
.bl-card__title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.6; }
.bl-dark .bl-card { color: var(--bl-paper); }

/* 分析編の文字札（原作画像の代わり） */
.bl-textcard { background: var(--bl-ink); color: var(--bl-paper); display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px; border-radius: 2px; }
.bl-textcard__chara { font-family: var(--bl-serif); font-weight: 900; font-size: 26px; line-height: 1.35; }
.bl-textcard__work { font-size: 13px; color: var(--bl-dark-sub); }

/* 法則リスト */
.bl-laws { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--bl-ink); }
.bl-laws li { border-bottom: 1px solid var(--bl-rule); }
.bl-laws a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 18px 0; color: var(--bl-ink); text-decoration: none; }
.bl-laws a:hover .bl-law__name { text-decoration: underline; }
.bl-law__no { font-family: var(--bl-serif); font-weight: 900; font-size: 20px; color: var(--bl-accent); min-width: 80px; }
.bl-law__name { flex: 1 1 240px; font-size: 17px; font-weight: 700; }
.bl-law__def { flex-basis: 100%; font-size: 14px; color: var(--bl-muted); margin: -8px 0 0; }

/* トップ */
.bl-hero { padding-top: 72px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.bl-hero__text { flex: 999 1 520px; min-width: 0; }
.bl-hero__kicker { margin: 0 0 16px; font-size: 14px; letter-spacing: .2em; color: var(--bl-accent); font-weight: 700; }
.bl-hero__title { margin: 0; font-family: var(--bl-serif); font-weight: 900; font-size: clamp(40px, 6vw, 64px); line-height: 1.25; }
.bl-hero__lead { margin: 28px 0 0; font-size: 18px; line-height: 1.9; color: var(--bl-body); max-width: 560px; }
.bl-hero__btns { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 12px; }
.bl-hero__fig { flex: 1 1 360px; margin: 0; min-width: 0; }
.bl-hero__fig a { display: block; }
.bl-hero__fig figcaption { margin-top: 12px; }
.bl-pillars { border-top: 1px solid var(--bl-rule); border-bottom: 1px solid var(--bl-rule); background: var(--bl-white); }
.bl-pillars__in { padding-top: 56px; padding-bottom: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; }
.bl-pillar { display: flex; flex-direction: column; gap: 12px; }
.bl-pillar__no { margin: 0; font-size: 13px; letter-spacing: .16em; color: var(--bl-muted); font-weight: 700; }
.bl-pillar p { margin: 0; color: var(--bl-body); }
.bl-split { display: flex; flex-wrap: wrap; gap: 48px; }
.bl-split__main { flex: 999 1 560px; min-width: 0; }
.bl-split__side { flex: 1 1 320px; min-width: 0; }

/* お題フォーム */
.bl-odai { display: flex; flex-direction: column; gap: 14px; align-self: flex-start; }
.bl-odai h2 { margin: 0; font-family: var(--bl-serif); font-size: 26px; color: var(--bl-paper); }
.bl-odai p { margin: 0; font-size: 15px; }
.bl-odai label { font-size: 13px; font-weight: 700; color: var(--bl-dark-sub); }
.bl-odai textarea, .bl-odai input[type="text"] { font-family: inherit; font-size: 15px; padding: 12px; border-radius: 4px; border: 1px solid #55544F; background: #26262B; color: var(--bl-paper); width: 100%; }
.bl-odai textarea { resize: vertical; min-height: 96px; }
.bl-odai .bl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bl-odai__note { font-size: 12px !important; color: #B5B3AC !important; }
.bl-notice { padding: 12px 14px; border-radius: 4px; font-size: 14px; font-weight: 700; }
.bl-notice--ok { background: #E6F2EA; color: #1E5631; }
.bl-notice--ng { background: #FBE9E9; color: #8A1C1C; }

/* 記事共通 */
.bl-crumb--page { padding-top: 16px; }
.bl-article-wrap { padding-top: 32px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 56px; }
.bl-article { flex: 999 1 640px; min-width: 0; }
.bl-aside { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.bl-title { margin: 20px 0 0; font-family: var(--bl-serif); font-weight: 900; font-size: clamp(30px, 4vw, 44px); line-height: 1.4; }
.bl-sub { margin: 12px 0 0; font-size: 16px; color: var(--bl-muted); }
.bl-content { font-size: 17px; line-height: 2; color: #26262B; }
.bl-content h2 { font-family: var(--bl-serif); font-size: 28px; line-height: 1.5; margin: 56px 0 16px; color: var(--bl-ink); }
.bl-content h3 { font-size: 21px; margin: 40px 0 12px; color: var(--bl-ink); }
.bl-content blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--bl-ink); background: var(--bl-white); font-size: 16px; line-height: 1.9; }
.bl-content figure { margin: 24px 0; }
.bl-content figcaption { margin-top: 8px; font-size: 13px; color: var(--bl-muted); line-height: 1.6; }
.bl-content img { border: 1px solid var(--bl-ph-border); }
.bl-toc ol { margin: 0; padding-left: 20px; font-size: 14px; line-height: 2.1; }
.bl-postnav { margin-top: 48px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; border-top: 1px solid var(--bl-rule); padding-top: 24px; }
.bl-postnav a { font-weight: 700; padding: 12px 0; display: inline-block; }

/* 分析編 */
.bl-ketsuron { margin-top: 40px; border: 1.5px solid var(--bl-ink); border-radius: 6px; padding: 28px; }
.bl-ketsuron__title { margin: 0 0 6px; font-size: 14px; letter-spacing: .16em; color: var(--bl-accent); }
.bl-ketsuron__lead { margin: 0 0 20px; font-size: 15px; color: var(--bl-body); }
.bl-lawcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.bl-lawcard { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--bl-white); border: 1px solid var(--bl-rule); border-radius: 4px; color: var(--bl-ink); text-decoration: none; }
.bl-lawcard:hover { color: var(--bl-ink); border-color: var(--bl-ink); }
.bl-lawcard__no { font-family: var(--bl-serif); font-weight: 900; color: var(--bl-accent); }
.bl-lawcard__name { font-weight: 700; font-size: 16px; }
.bl-lawcard__def { font-size: 13px; color: var(--bl-muted); line-height: 1.7; }
.bl-layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--bl-ph-border); border: 1px solid var(--bl-ph-border); }
.bl-layer { background: var(--bl-white); padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.bl-layer__no { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--bl-muted); }
.bl-layer__name { font-size: 18px; font-weight: 700; }
.bl-layer__hint { font-size: 13px; color: var(--bl-ph-text); }
.bl-layer__body { font-size: 15px; color: var(--bl-body); line-height: 1.8; }

/* 実証編 */
.bl-odai-hero { margin-top: 24px; border: 2px solid var(--bl-ink); border-radius: 6px; padding: 40px 32px; background: var(--bl-white); display: flex; flex-direction: column; gap: 12px; }
.bl-odai-hero__label { margin: 0; font-size: 14px; letter-spacing: .2em; font-weight: 700; color: var(--bl-accent); }
.bl-odai-hero__text { margin: 0; font-family: var(--bl-serif); font-weight: 900; font-size: clamp(28px, 4vw, 48px); line-height: 1.35; }
.bl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.bl-step { border-top: 3px solid var(--bl-ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.bl-step--accent { border-top-color: var(--bl-accent); }
.bl-step--off { border-top-color: var(--bl-rule-strong); color: var(--bl-muted); }
.bl-step__no { font-family: var(--bl-serif); font-weight: 900; font-size: 22px; }
.bl-step__name { font-size: 17px; font-weight: 700; }
.bl-step__desc { font-size: 14px; color: var(--bl-body); line-height: 1.7; }
.bl-sheet { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--bl-white); }
.bl-sheet tr { border-top: 1px solid var(--bl-rule); }
.bl-sheet tr:last-child { border-bottom: 1px solid var(--bl-rule); }
.bl-sheet th { text-align: left; padding: 14px 16px; width: 30%; background: var(--bl-soft); font-weight: 700; vertical-align: top; }
.bl-sheet td { padding: 14px 16px; color: var(--bl-body); line-height: 1.7; }
.bl-uses { display: flex; flex-direction: column; gap: 12px; }
.bl-use { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 16px; background: var(--bl-white); border: 1px solid var(--bl-rule); border-radius: 4px; color: var(--bl-ink); text-decoration: none; }
.bl-use:hover { color: var(--bl-ink); border-color: var(--bl-ink); }
.bl-use__desc { flex-basis: 100%; font-size: 14px; color: var(--bl-muted); line-height: 1.7; }
.bl-stack { display: flex; flex-direction: column; gap: 40px; }

/* 押すだけアンケート */
.bl-poll { background: var(--bl-white); border: 1.5px solid var(--bl-ink); border-radius: 6px; padding: 28px; }
.bl-poll__q { margin: 0 0 16px; font-family: var(--bl-serif); font-size: 22px; line-height: 1.5; }
.bl-poll__form { display: flex; flex-wrap: wrap; gap: 10px; }
.bl-poll__btn { min-height: 48px; padding: 0 24px; border: 1.5px solid var(--bl-ink); border-radius: 24px; background: var(--bl-white); color: var(--bl-ink); font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.bl-poll__btn:hover, .bl-poll__btn:focus-visible { background: var(--bl-ink); color: var(--bl-paper); }
.bl-poll__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bl-poll__results li { display: grid; grid-template-columns: minmax(80px, 140px) 1fr 48px; align-items: center; gap: 12px; font-size: 15px; }
.bl-poll__label { font-weight: 700; }
.bl-poll__bar { height: 12px; background: var(--bl-ph); border-radius: 6px; overflow: hidden; }
.bl-poll__bar span { display: block; height: 100%; background: var(--bl-accent); }
.bl-poll__pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--bl-muted); }

/* 一覧・その他 */
.bl-page-head { padding-top: 40px; padding-bottom: 8px; }
.bl-page-head p { color: var(--bl-body); margin: 12px 0 0; }
.bl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.bl-filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--bl-rule-strong); border-radius: 20px; color: var(--bl-ink); text-decoration: none; font-size: 14px; }
.bl-filter a.is-current { background: var(--bl-ink); color: var(--bl-paper); border-color: var(--bl-ink); }
.bl-pagination { margin-top: 48px; }
.bl-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--bl-rule-strong); border-radius: 4px; color: var(--bl-ink); text-decoration: none; }
.bl-pagination .page-numbers.current { background: var(--bl-ink); color: var(--bl-paper); border-color: var(--bl-ink); }
.bl-empty { padding: 40px 0; color: var(--bl-muted); }

/* フッター */
.bl-footer { border-top: 1px solid var(--bl-rule); background: var(--bl-white); margin-top: 80px; }
.bl-footer__in { padding-top: 32px; padding-bottom: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 13px; color: var(--bl-muted); }

@media (max-width: 600px) {
	.bl-hero { padding-top: 40px; }
	.bl-odai-hero { padding: 28px 20px; }
	.bl-ketsuron, .bl-dark { padding: 22px; }
	.bl-sheet th { width: 38%; }
}
