/* ========================================================================== 
   4KTV.jp Home CSS v3.9
   TOPページ専用 / is_front_page() のみで読み込む
   2026-08-11

   v3.9変更
   - 「テレビ」「配信」など棚見出しリンクの青文字・下線を解消
   - 棚見出し専用クラス home-section-title に対応
   - 導入文専用クラス home-lead に対応
   - 投稿カードのSWELL標準下余白をTOPだけ縮小
   - 棚と棚の間隔を整理して縦の間延びを改善
   - v3.8のヘッダー視認性改善・バナー高さ統一・お知らせ表示は維持

   目的
   - TOPを専門メディアの入口として見せつつ、重要な「お知らせ」は残す
   - ピックアップバナーは「ラジオ / テレビ / 配信 / 専門知見 + 楽しむ」の4+1構成
   - 右側の大きなデッドスペースをなくす
   - 図版が強いサイトなのでカード枠を弱め、画像を主役にする
   - メインビジュアルの src / srcset / picture / source には触れない
   - Gravatarは使用しない
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. TOPヘッダー用ブランドアイコン
   -------------------------------------------------------------------------- */
:root {
	--4ktv-header-icon: url('/wp-content/uploads/2025/12/cropped-Gemini_Generated_Image_vifoazvifoazvifo-1-1-192x192.png');
}

/* --------------------------------------------------------------------------
   1. TOPレイアウト
   本文は全幅化し、サイドバー由来の「お知らせ」だけを本文下に残す。
   メニュー / 新着記事 / アーカイブはTOPでは非表示。
   -------------------------------------------------------------------------- */
#body_wrap.home #content {
	display: block;
	padding-top: 28px;
}

@media (min-width: 960px) {
	#body_wrap.home.-sidebar-on .l-mainContent {
		width: 100%;
		max-width: 100%;
	}
}

#body_wrap.home .l-mainContent {
	border-radius: 14px;
}

/* TOPではサイドバー領域自体は本文の下へ回す */
#body_wrap.home #sidebar {
	display: block;
	width: 100%;
	max-width: none;
	margin: 26px 0 0;
	font-size: inherit;
}

/* 「お知らせ」以外のサイドバーウィジェットはTOPでは出さない */
#body_wrap.home #sidebar > .c-widget:not(#nav_menu-6) {
	display: none;
}

/* お知らせをTOP下部の案内ボックスとして表示 */
#body_wrap.home #nav_menu-6 {
	display: block;
	margin: 0 0 18px;
	padding: 24px 28px !important;
	border: 1px solid var(--color_border);
	border-radius: 14px;
	background: var(--color_content_bg, #fff);
	box-shadow: none;
}

#body_wrap.home #nav_menu-6 .c-widget__title {
	margin: 0 0 12px;
	padding: 0;
	border: 0;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

#body_wrap.home #nav_menu-6 .c-widget__title::before,
#body_wrap.home #nav_menu-6 .c-widget__title::after {
	content: none;
}

#body_wrap.home #nav_menu-6 ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#body_wrap.home #nav_menu-6 li {
	margin: 0;
}

#body_wrap.home #nav_menu-6 a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 0;
	border: 0;
	background: transparent;
	color: var(--color_link);
	font-size: 14px;
	line-height: 1.5;
	text-decoration: none;
}

#body_wrap.home #nav_menu-6 a::before {
	content: "›";
	font-weight: 700;
	color: var(--color_main);
}

@media (hover: hover) and (pointer: fine) {
	#body_wrap.home #nav_menu-6 a:hover {
		text-decoration: underline;
	}
}

@media (max-width: 959px) {
	#body_wrap.home #content {
		padding-top: 18px;
	}
}

@media (max-width: 599px) {
	#body_wrap.home #sidebar {
		margin-top: 18px;
	}

	#body_wrap.home #nav_menu-6 {
		padding: 20px !important;
	}

	#body_wrap.home #nav_menu-6 ul.menu {
		display: block;
	}

	#body_wrap.home #nav_menu-6 a {
		display: flex;
		padding: 9px 0;
	}
}

/* --------------------------------------------------------------------------
   2. TOP透過ヘッダー
   -------------------------------------------------------------------------- */
#body_wrap.home .l-header {
	border-bottom: none;
	box-shadow: none;
}

#body_wrap.home .l-header .l-header__logo {
	flex-direction: column;
	align-items: flex-start;
}

#body_wrap.home .l-header .c-headLogo__link {
	font-weight: 700;
	letter-spacing: .01em;
	text-shadow:
		0 1px 3px rgba(0, 0, 0, .65),
		0 3px 14px rgba(0, 0, 0, .48);
}

#body_wrap.home .l-header .c-catchphrase {
	display: block;
	margin: 5px 0 0;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: .025em;
	color: rgba(255, 255, 255, .96);
	text-shadow:
		0 1px 3px rgba(0, 0, 0, .72),
		0 2px 10px rgba(0, 0, 0, .48);
}

@media (min-width: 960px) {
	#body_wrap.home .l-header .l-header__inner {
		align-items: center;
		min-height: 84px;
	}

	#body_wrap.home .l-header .l-header__logo {
		padding: 0 0 0 max(
			0px,
			calc((100vw - var(--container_size, 1200px) - var(--swl-pad_container, 32px) * 2) / 2)
		);
	}

	#body_wrap.home .l-header .c-headLogo {
		max-width: none;
	}

	#body_wrap.home .l-header .c-headLogo__link {
		display: flex;
		align-items: center;
		gap: 10px;
		font-size: 27px;
	}

	#body_wrap.home .l-header .c-headLogo__link::before {
		content: "";
		flex-shrink: 0;
		width: 36px;
		height: 36px;
		border: 2px solid rgba(255, 255, 255, .85);
		border-radius: 50%;
		background-image: var(--4ktv-header-icon);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	}

	#body_wrap.home .l-header .c-catchphrase {
		margin-left: 46px;
		font-size: 13px;
	}
}

/* --------------------------------------------------------------------------
   3. TOPグローバルナビ
   -------------------------------------------------------------------------- */
@media (min-width: 960px) {
	#body_wrap.home .l-header .c-gnavWrap {
		display: flex;
		align-items: center;
		height: 100%;
	}

	#body_wrap.home .l-header .l-header__gnav {
		justify-content: flex-end;
		padding-right: max(
			0px,
			calc((100vw - var(--container_size, 1200px) - var(--swl-pad_container, 32px) * 2) / 2)
		);
	}

	#body_wrap.home .l-header .c-gnav {
		display: inline-flex;
		align-items: center;
		width: fit-content;
		height: 42px;
		padding: 0 5px;
		border: 1px solid rgba(255, 255, 255, .30);
		border-radius: 999px;
		background: rgba(12, 16, 48, .46);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		box-shadow: 0 5px 18px rgba(0, 0, 0, .14);
	}

	#body_wrap.home .l-header .c-gnav > .menu-item > a {
		padding: 0 12px;
	}

	#body_wrap.home .l-header .c-gnav > .menu-item > a .ttl {
		font-size: 14px;
		font-weight: 500;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
	}
}

#body_wrap.home .l-header .c-gnav > .menu-item > a:focus-visible,
#body_wrap.home .c-bannerLink:focus-visible,
#body_wrap.home .p-postList__link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* 固定ヘッダーは普通の青ヘッダーとして読みやすく */
@media (min-width: 960px) {
	#body_wrap.home .l-fixHeader__inner {
		min-height: 62px;
		align-items: center;
	}

	#body_wrap.home .l-fixHeader__logo {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* --------------------------------------------------------------------------
   4. メインビジュアル
   画像ファイル自体には一切介入しない。
   -------------------------------------------------------------------------- */
#body_wrap.home .p-mainVisual.-margin-on {
	padding: 0;
}

/* ヘッダー文字が空や雲に溶けないよう、上端だけごく薄く暗くする */
#body_wrap.home .p-mainVisual::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	width: 100%;
	height: 125px;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(10, 20, 34, .34) 0%,
		rgba(10, 20, 34, .15) 52%,
		rgba(10, 20, 34, 0) 100%
	);
}

@media (min-width: 960px) {
	#body_wrap.home .p-mainVisual__inner {
		height: clamp(350px, 22vw, 440px);
	}
}

@media (min-width: 600px) and (max-width: 959px) {
	#body_wrap.home .p-mainVisual__inner {
		height: clamp(280px, 42vw, 390px);
	}
}

@media (max-width: 599px) {
	#body_wrap.home .p-mainVisual__inner {
		height: 46vw;
		min-height: 230px;
		max-height: 320px;
	}
}

#body_wrap.home .p-mainVisual__scroll {
	opacity: 1;
}

#body_wrap.home .p-mainVisual__scrollLabel {
	font-weight: 600;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

#body_wrap.home .p-mainVisual__scrollLabel,
#body_wrap.home .p-mainVisual__scrollArrow path {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .65));
}

/* --------------------------------------------------------------------------
   5. ピックアップバナー
   1〜4：ラジオ / テレビ / 配信 / 専門知見
   5：楽しむ（横長の特別導線）

   ※ WordPress側のピックアップバナーメニューで「楽しむ」を5番目に追加する。
   -------------------------------------------------------------------------- */
#body_wrap.home .p-pickupBanners {
	margin-bottom: 34px;
}

#body_wrap.home .p-pickupBanners .c-bannerLink {
	border-radius: 10px;
}

#body_wrap.home .p-pickupBanners .c-bannerLink__label {
	top: 8px;
	left: 8px;
	padding: 3px 12px;
	border-radius: 999px;
	background-color: rgba(255, 255, 255, .94);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .03em;
	box-shadow: 0 2px 7px rgba(0, 0, 0, .16);
}

#body_wrap.home .p-pickupBanners__item .c-bannerLink {
	transition: transform .22s, box-shadow .22s;
}

/* PC：上段4枚 + 下段「楽しむ」1枚 */
@media (min-width: 960px) {
	#body_wrap.home #pickup_banner .p-pickupBanners__item {
		width: 25%;
	}

	#body_wrap.home #pickup_banner.-pc-fix_col4 > .p-pickupBanners__list > .p-pickupBanners__item:nth-child(5),
	#body_wrap.home #pickup_banner > .p-pickupBanners__list > .p-pickupBanners__item:nth-child(5) {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
		padding-top: 8px;
	}

	/* 上段4枚と「楽しむ」を同じ高さにする */
	#body_wrap.home #pickup_banner .p-pickupBanners__item .c-bannerLink__figure {
		height: 96px;
	}

	#body_wrap.home #pickup_banner .p-pickupBanners__item .c-bannerLink__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	#body_wrap.home #pickup_banner .p-pickupBanners__item:nth-child(5) .c-bannerLink__label {
		top: 50%;
		left: 24px;
		transform: translateY(-50%);
		padding: 7px 16px;
		font-size: 15px;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
	}

	/* 補助コピーは装飾。リンク名そのものはSWELLの「楽しむ」を使用 */
	#body_wrap.home #pickup_banner .p-pickupBanners__item:nth-child(5) .c-bannerLink::after {
		content: "音楽・映画・スポーツ・落語など";
		position: absolute;
		left: 118px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		padding: 5px 10px;
		border-radius: 999px;
		background: rgba(0, 0, 0, .36);
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: .02em;
		text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
		pointer-events: none;
	}
}

/* タブレット / スマホ：2列 + 「楽しむ」だけ全幅 */
@media (max-width: 959px) {
	#body_wrap.home #pickup_banner .p-pickupBanners__item {
		width: 50%;
	}

	#body_wrap.home #pickup_banner > .p-pickupBanners__list > .p-pickupBanners__item:nth-child(5) {
		flex: 0 0 100% !important;
		width: 100% !important;
		max-width: 100% !important;
	}

	/* タブレットでも全バナーを同じ高さにする */
	#body_wrap.home #pickup_banner .p-pickupBanners__item .c-bannerLink__figure {
		height: 88px;
	}

	#body_wrap.home #pickup_banner .p-pickupBanners__item .c-bannerLink__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: center;
	}

	#body_wrap.home #pickup_banner .p-pickupBanners__item:nth-child(5) .c-bannerLink__label {
		top: 50%;
		left: 14px;
		transform: translateY(-50%);
		padding: 6px 13px;
		font-size: 14px;
	}

	#body_wrap.home #pickup_banner .p-pickupBanners__item:nth-child(5) .c-bannerLink::after {
		content: "音楽・映画・スポーツ・落語など";
		position: absolute;
		left: 98px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 2;
		color: #fff;
		font-size: 11px;
		font-weight: 600;
		line-height: 1.4;
		text-shadow: 0 1px 4px rgba(0, 0, 0, .75);
		pointer-events: none;
	}
}

@media (max-width: 599px) {
	#body_wrap.home #pickup_banner .p-pickupBanners__item .c-bannerLink__figure {
		height: 72px;
	}
}

@media (max-width: 420px) {
	#body_wrap.home #pickup_banner .p-pickupBanners__item:nth-child(5) .c-bannerLink::after {
		content: "音楽・映画・スポーツなど";
		left: 92px;
		font-size: 10px;
	}
}

@media (hover: hover) and (pointer: fine) {
	#body_wrap.home .p-pickupBanners__item .c-bannerLink:hover {
		transform: translateY(-2px);
		box-shadow: 0 9px 22px rgba(0, 0, 0, .14);
	}
}

/* --------------------------------------------------------------------------
   6. TOP本文導入
   -------------------------------------------------------------------------- */
#body_wrap.home .post_content > .home-lead,
#body_wrap.home .post_content > p:first-child {
	margin-bottom: 34px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.9;
	color: #333;
}

/* 「特集」「テレビ」「配信」などの棚見出し
   Gutenberg側では段落ブロックに home-section-title を付けるのを推奨。 */
#body_wrap.home .post_content > .home-section-title,
#body_wrap.home .post_content > p:has(> .swl-marker) {
	margin-top: 46px;
	margin-bottom: 0;
}

#body_wrap.home .post_content > .home-section-title > .swl-marker,
#body_wrap.home .post_content > p > .swl-marker {
	position: relative;
	display: inline-block;
	padding: 0 0 7px 14px;
	background: none;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color_text, #333);
}

#body_wrap.home .post_content > .home-section-title > .swl-marker::before,
#body_wrap.home .post_content > p > .swl-marker::before {
	content: "";
	position: absolute;
	left: 0;
	top: .12em;
	bottom: .42em;
	width: 4px;
	border-radius: 4px;
	background: var(--color_main);
}

#body_wrap.home .post_content > .home-section-title > .swl-marker::after,
#body_wrap.home .post_content > p > .swl-marker::after {
	content: "";
	position: absolute;
	left: 14px;
	bottom: 0;
	width: 42px;
	height: 3px;
	border-radius: 999px;
	background: #f3dc58;
}


/* 棚見出しがカテゴリリンクでも、見出しとして同じ見た目にする */
#body_wrap.home .home-section-title a,
#body_wrap.home .post_content > p > .swl-marker a {
	color: inherit;
	text-decoration: none;
	text-decoration-thickness: auto;
	text-underline-offset: auto;
}

@media (hover: hover) and (pointer: fine) {
	#body_wrap.home .home-section-title a:hover,
	#body_wrap.home .post_content > p > .swl-marker a:hover {
		color: var(--color_main);
		opacity: .82;
	}
}

/* --------------------------------------------------------------------------
   7. TOPの記事カード
   図版が強いので「箱」より画像とタイトルを主役にする。
   -------------------------------------------------------------------------- */
#body_wrap.home .post_content > .p-postListWrap {
	margin-top: 16px;
	margin-bottom: 28px;
}

/* SWELL標準のカード下余白(2.5em)をTOPだけ縮小 */
#body_wrap.home .p-postList.-type-card > .p-postList__item {
	margin-bottom: 28px;
}

#body_wrap.home .p-postList.-type-card > .p-postList__item > .p-postList__link {
	height: 100%;
	padding-bottom: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transition: transform .2s;
}

#body_wrap.home .p-postList.-type-card .p-postList__thumb {
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
	overflow: hidden;
}

#body_wrap.home .p-postList.-type-card .p-postList__body {
	padding: 12px 2px 0;
}

#body_wrap.home .p-postList.-type-card .p-postList__title {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.55;
	letter-spacing: .01em;
	color: #222;
}

#body_wrap.home .p-postList.-type-card .p-postList__meta {
	margin-top: 7px;
	font-size: 11px;
	color: #666;
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	#body_wrap.home .p-postList.-type-card > .p-postList__item > .p-postList__link:hover {
		transform: translateY(-2px);
	}
}

@media (max-width: 599px) {
	#body_wrap.home .l-header .c-headLogo__link {
		font-size: 23px !important;
	}

	#body_wrap.home .l-header .c-catchphrase {
		font-size: 11px;
	}

	#body_wrap.home .p-mainVisual::before {
		height: 105px;
	}

	#body_wrap.home .post_content > .home-lead,
	#body_wrap.home .post_content > p:first-child {
		font-size: 15px;
		line-height: 1.8;
	}

	#body_wrap.home .p-postList.-type-card .p-postList__title {
		font-size: 15px;
		line-height: 1.5;
	}

	#body_wrap.home .p-postList.-type-card .p-postList__meta {
		font-size: 11px;
	}

	#body_wrap.home .post_content > .home-section-title > .swl-marker,
	#body_wrap.home .post_content > p > .swl-marker {
		font-size: 19px;
	}

	#body_wrap.home .post_content > .home-section-title,
	#body_wrap.home .post_content > p:has(> .swl-marker) {
		margin-top: 38px;
	}

	#body_wrap.home .post_content > .p-postListWrap {
		margin-bottom: 22px;
	}

	#body_wrap.home .p-postList.-type-card > .p-postList__item {
		margin-bottom: 24px;
	}
}

/* --------------------------------------------------------------------------
   8. TOP固有のその他調整
   -------------------------------------------------------------------------- */
#body_wrap.home #fix_tocbtn {
	display: none;
}

/* --------------------------------------------------------------------------
   9. モーション低減
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	#body_wrap.home .p-pickupBanners__item .c-bannerLink,
	#body_wrap.home .p-postList__link {
		transition: none;
	}

	#body_wrap.home .p-pickupBanners__item .c-bannerLink:hover,
	#body_wrap.home .p-postList__link:hover {
		transform: none;
	}

	#body_wrap.home .p-mainVisual__scrollArrow {
		animation: none;
	}
}