@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* 投稿本文の h2: 左に赤バー + 下に薄グレー線のダブルアクセント */
.post_content h2 {
	margin: 2.2em 0 1em;
	padding: .15em 0 .4em .7em;
	background: none;
	border: none;
	border-left: 6px solid #fc2348;
	border-bottom: 2px solid #e5e7eb;
	border-radius: 0;
	color: inherit;
	font-weight: 800;
	line-height: 1.4;
}

.post_content h2::before,
.post_content h2::after {
	content: none;
	display: none;
	background: none;
	border: none;
}

/* 投稿本文の h3 を #333 の細い下線スタイルに統一 */
.post_content h3 {
	margin: 2em 0 1.2em;
	padding: 0 0 .5em;
	background: none;
	border: none;
	border-bottom: 1px solid #333;
	border-radius: 0;
	color: inherit;
	line-height: 1.5;
}

.post_content h3::before,
.post_content h3::after {
	content: none;
	display: none;
	background: none;
	border: none;
}

/* ============================================================
   投稿ヘッダー（作品情報ヒーロー / IMDB 型 + フル幅バンド）
   フル幅の暗いバンドの中に、横長ポスター + テキストの 2 カラム
   ============================================================ */

/* ----- フル幅バンド本体（チバテレ「イチオシ情報」風: 斜めストライプ） ----- */
.cv-work-hero-band {
	position: relative;
	overflow: hidden;
	color: #333;
	isolation: isolate;
	background: repeating-linear-gradient(-45deg,
		#fafafa 0,
		#fafafa 15px,
		#f5f5f5 15px,
		#f5f5f5 30px);
}

/* 単一投稿: パンくずをヒーローバンドと白で繋いで一体感を出す */
.single .p-breadcrumb.-bg-on {
	background: transparent;
}

/* 記事本文中の目次は非表示にする（サイドバーの目次は #sidebar .p-toc なので残る） */
#main_content .p-toc {
	display: none;
}

/* PR表記（大サイズ）をプレーンテキスト化（背景・枠なし） */
.single .c-prNotation[data-style="big"] {
	border: none;
	background: none;
	color: #6b7280;
	font-size: .82em;
	padding: 0;
	margin: 0;
	line-height: 1.4;
}

/* 縞模様の背景もキャンセル */
.single .c-prNotation[data-style="big"].is-style-bg_stripe {
	background: none;
}

/* 単一投稿: ヒーロー直下〜本文の上下余白を圧縮（PR表記をヒーローに寄せる）
 * 元の SWELL は .l-content padding-top:4em + .post_content margin:4em 0 で
 * 上下 4em ずつ取られて PR が目立っていたのを抑える */
.single .l-content {
	padding-top: 1.5em;
}

.single .l-mainContent__inner > .c-prNotation + .post_content {
	margin-top: 1.2em;
}


/* 中身を最大幅で内包 */
.cv-work-hero-band__inner {
	padding-top: 2.5em;
	padding-bottom: 2.5em;
}

/* ----- IMDB 型 2 カラムカード ----- */
.cv-work-hero {
	display: grid;
	grid-template-columns: minmax(280px, 440px) 1fr;
	gap: 36px;
	align-items: center;
	margin: 0;
}

.cv-work-hero__poster {
	aspect-ratio: 16 / 9;
	border-radius: 10px;       /* 他ブロック（vod-status / episode-list）と統一 */
	overflow: hidden;
	background: #f4f4f4;
	border: 2px solid #e5e7eb; /* アイキャッチ画像の縁取り（細い灰色） */
}

/* WordPress 標準のアイキャッチ画像（一覧・関連記事 等）にも同じ縁取りを */
img.wp-post-image {
	border: 2px solid #e5e7eb;
	box-sizing: border-box;
}

.cv-work-hero__poster-img,
.cv-work-hero__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cv-work-hero__source {
	margin: 6px 0 0;
	font-size: .72em;
	color: #999;
	line-height: 1.4;
	text-align: center;
}

.cv-work-hero__body {
	min-width: 0;
}

.cv-work-hero__title {
	color: #222;
	margin: 0 0 .7em;
	font-size: clamp(1.35em, 1em + 1.1vw, 2em);
	font-weight: 800;
	line-height: 1.4;          /* チバテレ風の余裕のある行間 */
	text-shadow: none;
}

/* SWELL 親テーマの h1 装飾を打ち消す */
.cv-work-hero__title::before,
.cv-work-hero__title::after {
	content: none;
	display: none;
	background: none;
	border: none;
}

.cv-work-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 1.2em;
}

/* カテゴリラベル: 反転スタイル（ベース=コーラル赤、文字=白） */
.cv-work-hero__cat {
	display: inline-block;
	padding: 4px 12px;
	background: #fc2348;
	color: #fff;
	border-radius: 999px;
	font-weight: 700;
	font-size: .82em;
	letter-spacing: .03em;
	line-height: 1.3;
	text-decoration: none;
	transition: background .15s ease;
}

.cv-work-hero__cat:hover,
.cv-work-hero__cat:focus {
	background: #d11d3c;
	color: #fff;
}

.cv-work-hero__info {
	color: #777;
	font-weight: 600;
	font-size: .82em;
	letter-spacing: .03em;
	font-variant-numeric: tabular-nums;
}

.cv-work-hero__synopsis {
	color: #444;
	line-height: 1.8;
	font-size: .94em;
	max-width: 620px;
}

.cv-work-hero__updated {
	margin-top: 1em;
	color: #777;
	font-size: .82em;
	letter-spacing: .03em;
}

.cv-work-hero__updated time {
	color: inherit;
	font-variant-numeric: tabular-nums;
}

.cv-work-hero__synopsis p {
	margin: 0 0 .8em;
}

.cv-work-hero__synopsis p:last-child {
	margin-bottom: 0;
}

/* ----- レスポンシブ ----- */

/* タブレット: ポスター少し小さく */
@media (max-width: 960px) {
	.cv-work-hero {
		grid-template-columns: minmax(220px, 320px) 1fr;
		gap: 24px;
	}
	.cv-work-hero-band__inner {
		padding-top: 2.5em;
		padding-bottom: 2.5em;
	}
}

/* スマホ: 縦積み */
@media (max-width: 600px) {
	.cv-work-hero {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.cv-work-hero__poster {
		max-width: 480px;
		margin: 0 auto;
		width: 100%;
	}
	.cv-work-hero-band__inner {
		padding-top: 2em;
		padding-bottom: 2em;
	}
	.cv-work-hero__synopsis {
		font-size: .9em;
		line-height: 1.7;
	}
}


/* ============================================================
   ヘッダー: SWELLサイトロゴの隣に追加ロゴ（チバテレ等）を並列表示
   ============================================================ */

.cv-head-logos {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex-wrap: nowrap;
}

.cv-head-logos .c-headLogo {
	margin: 0;
}

/* サイトロゴと追加ロゴの間に挟む "by" */
.cv-head-by {
	display: inline-flex;
	align-items: center;
	color: #888;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1;
	margin: 0 -4px; /* 親の gap(16px) を少し詰めて "by" が両ロゴと近づくよう調整 */
}

.cv-head-extra {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity .15s ease;
}

.cv-head-extra:hover,
.cv-head-extra:focus {
	opacity: .75;
}

.cv-head-extra img {
	display: block;
	max-height: var(--cv-extra-h, 36px);
	width: auto;
	height: auto;
}

/* SP は 75% に縮小 */
@media (max-width: 768px) {
	.cv-head-logos {
		gap: 10px;
	}
	.cv-head-extra img {
		max-height: calc(var(--cv-extra-h, 36px) * 0.75);
	}
}

/* 固定ヘッダー（スクロール後の細いバー）でも同じ並び */
.cv-head-logos--fix {
	gap: 12px;
}


/* ============================================================
   フッター（チバテレ本体の見た目に合わせる）
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

.cv-foot-widget {
	background: #f4f4f4;
	color: #333;
}

.cv-foot-widget > .l-container {
	max-width: none;
	padding-left: 100px;
	padding-right: 220px;
}

.cv-foot-widget > .l-container.cv-foot-widget__inner {
	padding-top: 150px;
	padding-bottom: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: start;
}

@media (max-width: 1280px) {
	.cv-foot-widget > .l-container {
		padding-left: 50px;
		padding-right: 50px;
	}
	.cv-foot-widget > .l-container.cv-foot-widget__inner {
		padding-top: 120px;
	}
}

@media (max-width: 768px) {
	.cv-foot-widget > .l-container {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cv-foot-widget > .l-container.cv-foot-widget__inner {
		padding-top: 100px;
		padding-bottom: 0;
		grid-template-columns: 1fr;
		gap: 50px;
	}
}

.cv-foot-widget__title {
	display: block;
	margin: 0 0 80px;
	padding: 0;
	border: none;
	/* チバテレ本サイトと同じく normal にして、日本語タイトル直下に自然な余白を残す */
	line-height: normal;
	font-weight: 900;
	font-size: 1.8rem;
	color: #333;
}

.cv-foot-widget__title::before,
.cv-foot-widget__title::after {
	content: none;
	display: none;
	background: none;
	border: none;
}

.cv-foot-widget__title-ja {
	display: block;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	letter-spacing: 0;
	/* line-height は親(normal)を継承 — チバテレ本サイトと同じく日本語下に余白を持たせる */
}

.cv-foot-widget__title-en {
	display: block;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fc2348 !important;
	letter-spacing: .05rem;
	line-height: 1;
	margin-top: 10px;
	padding-left: 2px;
	font-family: "Poppins", sans-serif;
}

@media (max-width: 768px) {
	/* SP では SWELL の root font-size が 3.6vw に流体化するため、
	 * rem を使うとチバテレ本サイト(root 16px固定)と文字サイズがずれる。
	 * フッターウィジェット内の主要文字は px で固定してチバテレと一致させる。
	 *  - title: 1.4rem → 22.4px (chiba値)
	 *  - title-en: 0.7rem → 11.2px
	 *  - rec link: 0.8rem → 12.8px */
	.cv-foot-widget__title {
		font-size: 22.4px;
		margin-bottom: 30px;
	}
	.cv-foot-widget__title-en {
		font-size: 11.2px;
	}
}

.cv-foot-cat__grid {
	list-style: none;
	margin: 0;
	padding: 0 0 0 5px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.cv-foot-cat__tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	height: 140px;
	background: #fff;
	color: #333;
	text-decoration: none;
	text-align: center;
	padding: 12px;
	border: 3px solid #fff;
	border-radius: 20px;
	transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.cv-foot-cat__tile:hover,
.cv-foot-cat__tile:focus {
	border-color: #fc2348;
	transform: scale(1.1);
	box-shadow: 0 0 15px rgba(0, 0, 0, .1);
}

.cv-foot-cat__tile-ja {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: #333;
}

.cv-foot-cat__tile-en {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: .05rem;
	color: #fc2348 !important;
	line-height: 1;
	margin-top: 5px;
	font-family: "Poppins", sans-serif;
}

@media (max-width: 1280px) {
	.cv-foot-cat__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}
	.cv-foot-cat__tile {
		height: 100px;
	}
}

@media (max-width: 768px) {
	.cv-foot-cat__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
	}
	.cv-foot-cat__tile {
		height: 80px;
		border-width: 2px;
	}
	.cv-foot-cat__tile:hover,
	.cv-foot-cat__tile:focus {
		transform: none;
	}
}

.cv-foot-rec__list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 5px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 20px;
	row-gap: 40px;
	/* body 由来の line-height:1.6 を継承させず、チバテレと同じ normal にする */
	line-height: normal;
}

.cv-foot-rec__item {
	margin: 0;
	min-width: 0;
}

.cv-foot-rec__link {
	/* チバテレ本サイトの a 同様 inline で描画（inline-block にすると line-box の高さが
	 *  ascender+descender ぶん余分に確保されて 2px ほど大きくなる） */
	display: inline;
	color: #333;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	line-height: normal;
	transition: color .15s ease;
}

@media (max-width: 768px) {
	/* チバテレ本サイトに合わせて SP でも 2 列維持、文字は 12.8px (chiba値) に縮小 */
	.cv-foot-rec__list {
		grid-template-columns: 1fr 1fr;
		row-gap: 30px;
	}
	/* SP の li 自身にも font-size を固定（チバテレと同じ 12.8px。視覚的影響は無いが値を揃える） */
	.cv-foot-rec__item {
		font-size: 12.8px;
	}
	.cv-foot-rec__link {
		font-size: 12.8px;
	}
}

.cv-foot-rec__link:hover,
.cv-foot-rec__link:focus {
	color: #fc2348 !important;
}

.cv-foot-rec__empty {
	margin: 0;
	color: #999;
	font-size: .9em;
}

.cv-foot-widget > .l-container.cv-foot-bottom {
	padding-top: 70px;
	padding-bottom: 80px;
	margin-top: 50px;
	border-top: 1px solid #e1e1e1;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

@media (max-width: 1280px) {
	.cv-foot-widget > .l-container.cv-foot-bottom {
		padding-bottom: 120px;
	}
}

.cv-foot-bottom__logo {
	display: flex;
	align-items: center;
	min-width: 0;
	line-height: 0;
}

.cv-foot-bottom__logo img {
	display: block;
	width: 220px;
	max-width: 100%;
	height: auto;
}

.cv-foot-bottom__logo-link {
	display: inline-flex;
	align-items: center;
	line-height: 0;
	transition: opacity .15s ease;
}

.cv-foot-bottom__logo-link:hover,
.cv-foot-bottom__logo-link:focus {
	opacity: .75;
}

.cv-foot-bottom__nav {
	min-width: 0;
}

.cv-foot-bottom__menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	justify-content: flex-end;
}

.cv-foot-bottom__menu li {
	margin: 0;
	display: inline-block;
}

.cv-foot-bottom__menu li + li {
	margin-left: 50px;
}

.cv-foot-bottom__menu a {
	display: inline-block;
	color: #333;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 600;
	line-height: normal;
	transition: color .15s ease;
}

.cv-foot-bottom__menu a:hover,
.cv-foot-bottom__menu a:focus {
	color: #fc2348 !important;
}

@media (max-width: 768px) {
	/* SP: 元のフルワイド border-top をやめ、左右 20px のインセット線にする
	 *  （チバテレ本サイトでは .bottom が .inner の content-box 内にあり、
	 *   結果として border が viewport の両端 20px から始まる見た目になっている） */
	.cv-foot-widget > .l-container.cv-foot-bottom {
		display: block;
		padding-top: 70px;
		padding-bottom: 60px;
		margin-top: 50px;
		border-top: 0;
		position: relative;
		/* SP の流体 root に引かれず、メニュー文字を 16px 維持するためコンテナにも固定 */
		font-size: 16px;
		line-height: normal;
	}
	.cv-foot-widget > .l-container.cv-foot-bottom::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 20px;
		right: 20px;
		height: 1px;
		background: #e1e1e1;
	}
	.cv-foot-bottom__logo {
		display: flex;
		justify-content: center;
		margin-bottom: 70px;
	}
	.cv-foot-bottom__logo img {
		width: 150px;
	}
	.cv-foot-bottom__menu {
		justify-content: flex-start;
		gap: 0;
	}
	.cv-foot-bottom__menu li,
	.cv-foot-bottom__menu li + li {
		margin: 0 24px 16px 0;
	}
	.cv-foot-bottom__menu a {
		/* SP で SWELL の流体 root に引かれないよう px 固定（chiba値: 1rem×16=16px） */
		font-size: 16px;
	}
}


/* コピーライト行（チバテレ本サイトの footer .copyright と揃える）
 * - .l-footer__foot は SWELL の上下 1em 余白をリセット
 * - 直下の .l-container は max-width と padding を解除して全幅化
 *   （これをしないと <p class="copyright"> の左右 padding がコンテナ内の余白になり、
 *    チバテレのように「ビューポート右端から 220px」にならない）
 * - <p class="copyright"> 自身に padding 50px 220px 50px 100px を適用
 * - SP も右寄せ（チバテレと同じ） */

.l-footer__foot {
	padding: 0 !important;
}

.l-footer__foot > .l-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

.l-footer .copyright,
.l-footer .l-footer__copyrightArea,
.l-footer .l-footer__copyright,
.l-footer .c-copyright,
.l-footer__copyrightArea,
.l-footer__copyright {
	background: #fff !important;
	color: #999 !important;
	text-align: right;
	font-size: 0.8rem;
	/* body 由来の line-height:1.6 を打ち消し、チバテレと同じ normal にする */
	line-height: normal;
	padding: 50px 220px 50px 100px;
	margin: 0;
	border: none;
	display: block;
}

.l-footer .copyright a,
.l-footer .l-footer__copyrightArea a,
.l-footer .l-footer__copyright a,
.l-footer__copyrightArea a,
.l-footer__copyright a {
	color: #999 !important;
}

@media (max-width: 1280px) {
	.l-footer .copyright,
	.l-footer .l-footer__copyrightArea,
	.l-footer .l-footer__copyright,
	.l-footer__copyrightArea,
	.l-footer__copyright {
		padding: 50px;
	}
}

@media (max-width: 768px) {
	.l-footer .copyright,
	.l-footer .l-footer__copyrightArea,
	.l-footer .l-footer__copyright,
	.l-footer__copyrightArea,
	.l-footer__copyright {
		text-align: right;
		/* SP で SWELL の流体 root に引かれないよう px 固定（chiba値: 0.7rem×16=11.2px） */
		font-size: 11.2px;
		padding: 30px;
	}
}