/*
 * 名前だけ知らないラジオ：テーマの見た目（Plasmic のプロトタイプの値）
 *
 * 文字：SM 0.75 / MD 1 / LG 1.25rem、見出し 1.5rem・2rem（900）、本文の行間 1.75。
 * 角丸：カード 8px・札 4px。セクションの上の余白 48px。
 * 幅の切り替え：タブレット 750px 以下、スマホ 450px 以下。
 */

:root {
	--c-dark: #0a0a0a;
	--c-bg: #fff;
	--c-muted: #f5f5f5;
	--c-border: #e5e5e5;
	--c-ring: #a1a1a1;
	--c-red: #e7000b;
	--font: "LINE Seed JP", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
	--fs-sm: 0.75rem;
	--fs-md: 1rem;
	--fs-lg: 1.25rem;
	--fs-xl: 1.5rem;
	--fs-2xl: 2rem;
	--content: 800px;
	--gutter: 24px;
	--section: 48px;
	--radius: 8px;
}

/* ---- 土台 ---- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

/* 中身が画面より短いページでも、フッターは画面の下に付ける（途中に浮かせない）。 */
body {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
	margin: 0;
	background: var(--c-bg);
	color: var(--c-dark);
	font-family: var(--font);
	font-size: var(--fs-md);
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.site-main {
	flex: 1 0 auto;
}

img,
video,
iframe {
	max-width: 100%;
}

img {
	height: auto;
}

/* リンクに下線は出さない。触れると少し薄くして、押せることを伝える。 */
a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

a:hover {
	opacity: 0.7;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
	margin: 0;
}

:focus-visible {
	outline: 2px solid var(--c-dark);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	z-index: 100000;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip-path: none;
	background: var(--c-bg);
}

.container {
	width: 100%;
	max-width: calc(var(--content) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---- 頭と終わり ---- */

.site-header,
.site-footer {
	display: flex;
	justify-content: center;
	padding: 24px;
}

.site-footer {
	flex-direction: column;
	gap: 24px;
	align-items: center;
	margin-top: 96px;
	background: var(--c-dark);
	color: var(--c-bg);
}

/* フッターのメニュー（外観 → カスタマイズ →「メニュー」の「フッターメニュー」）：横に並べて折り返す */
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: center;
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
	font-size: var(--fs-md);
	font-weight: 400;
}

.footer-menu a {
	color: inherit;
}

.footer-menu .current-menu-item > a {
	opacity: 0.6;
}

.site-brand {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	padding: 8px;
	color: inherit;
	text-decoration: none;
}

.site-title {
	font-size: var(--fs-lg);
	font-weight: 900;
	letter-spacing: 0;
}

.site-catch {
	font-size: var(--fs-sm);
	font-weight: 700;
}

/* ---- 見出し ---- */

.section-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.section-eyebrow,
.wr-part-eyebrow,
.entry-eyebrow,
.wr-show-name {
	font-size: var(--fs-md);
	font-weight: 900;
}

.section-title,
.wr-part-heading {
	font-size: var(--fs-xl);
	font-weight: 900;
	line-height: 1.25;
}

/* ---- ホーム ---- */

/* 放送中のサムネイル（黒地）と番組情報 */
.front-onair .wr-carousel {
	margin: 0;
	background: var(--c-dark);
}

.front-onair .wr-carousel::after {
	background: linear-gradient(90deg, #000 4%, transparent 11%, transparent 89%, #000000e8 96%);
}

.front-onair-info {
	padding: var(--section) var(--gutter);
	border-bottom: 1px solid var(--c-border);
}

.wr-onair-label {
	color: var(--c-red);
	font-size: var(--fs-md);
	font-weight: 900;
}

.wr-onair-show {
	font-size: var(--fs-2xl);
	font-weight: 900;
}

.wr-onair-time {
	font-size: var(--fs-md);
	font-weight: 700;
}

/* 番組一覧（薄いグレー地） */
.front-programs {
	display: flex;
	flex-direction: column;
	gap: 36px;
	padding-block: var(--section);
	background: var(--c-muted);
}

.front-programs .section-head,
.front-commercial .section-head {
	margin-bottom: 0;
}

.front-section {
	padding-top: var(--section);
}

.front-programs + .front-section {
	padding-top: 96px;
}

/* ピックアップ・最新のお知らせ・広告・バナーのあいだは広めに（セクションの余白の 3 倍） */
.front-section + .front-section {
	padding-top: calc(var(--section) * 3);
}

.front-commercial {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ループカルーセルの枠（中身の動きはプラグイン） */
.wr-loop-item {
	border-color: var(--c-dark);
	background: var(--c-border);
}

/*
 * 画像がないときの代わり：マーブル模様のグレーのグラデーション。
 * ピックアップ・カルーセル・記事内のリストで使う。並んだときに同じ模様が続かないよう、3 通りに崩す。
 */
.wr-thumb-empty {
	--marble-a: 18% 22%;
	--marble-b: 82% 28%;
	--marble-c: 62% 84%;
	--marble-d: 12% 88%;

	background-color: #d4d4d4;
	background-image:
		radial-gradient(ellipse 60% 45% at var(--marble-a), #f4f4f4 0%, transparent 70%),
		radial-gradient(ellipse 45% 60% at var(--marble-b), #b9b9b9 0%, transparent 65%),
		radial-gradient(ellipse 70% 40% at var(--marble-c), #ececec 0%, transparent 70%),
		radial-gradient(ellipse 40% 55% at var(--marble-d), #c2c2c2 0%, transparent 60%),
		linear-gradient(135deg, #e3e3e3 0%, #cacaca 50%, #dedede 100%);
}

li:nth-child(3n + 2) > .wr-thumb-empty,
li:nth-child(3n + 2) .wr-thumb-empty,
.wr-carousel-item:nth-child(3n + 2).wr-thumb-empty {
	--marble-a: 75% 15%;
	--marble-b: 20% 55%;
	--marble-c: 85% 75%;
	--marble-d: 40% 95%;
}

li:nth-child(3n) > .wr-thumb-empty,
li:nth-child(3n) .wr-thumb-empty,
.wr-carousel-item:nth-child(3n).wr-thumb-empty {
	--marble-a: 45% 70%;
	--marble-b: 10% 10%;
	--marble-c: 90% 40%;
	--marble-d: 65% 5%;
}

/* 模様の上の番組名は黒で */
.wr-thumb-empty .wr-loop-label,
.wr-thumb-empty .wr-carousel-label {
	color: var(--c-dark);
}

/* ピックアップのカード（16:9・3 列） */
.card-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.card-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: flex-start;
	color: inherit;
	text-decoration: none;
}

.card-thumb {
	display: block;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 1;
	border: 1px solid var(--c-dark);
	border-radius: var(--radius);
	background-color: var(--c-muted);
}

.card-thumb-wide {
	aspect-ratio: 16 / 9;
}

.card-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.card-title {
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.25;
}


.tag {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	background: var(--c-dark);
	color: var(--c-bg);
	font-size: var(--fs-sm);
	line-height: 1;
}

/* 最新のお知らせ（日付と題名の行） */
.news-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 0.5px solid var(--c-border);
}

.news-list li + li {
	border-top: 0.5px solid var(--c-border);
}

.news-list a {
	display: flex;
	gap: 36px;
	align-items: baseline;
	padding-block: 24px;
	color: inherit;
	text-decoration: none;
}


.news-list .entry-date {
	flex: 0 0 auto;
	color: var(--c-ring);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.more-link {
	margin-top: 24px;
	font-weight: 900;
	text-align: center;
}

.more-link a {
	text-decoration: none;
}


/* バナー（5:1・3 列） */
.front-banners {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.front-banners a {
	display: block;
	transition: opacity 0.15s ease;
}

.front-banners a:hover {
	opacity: 0.8;
}

.front-banners img {
	display: block;
	width: 100%;
	aspect-ratio: 5;
	border: 1px solid var(--c-dark);
	border-radius: 4px;
	object-fit: cover;
}


/* ---- 記事（番組・回・CM・投稿） ---- */

.entry {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-top: 24px;
}

.entry-header {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* 頭の画像は正方形（番組・回・CM・固定ページ）。記事（投稿・プレスリリース）だけ横長（16:9）。 */
.entry-hero img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	border-radius: var(--radius);
	object-fit: cover;
}

.single-post .entry-hero img,
.single-wr_press .entry-hero img {
	aspect-ratio: 16 / 9;
}

.entry-meta {
	text-align: right;
}

.entry-heading {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.entry-heading .wr-show-name {
	margin: 0;
}

.wr-show-name a {
	text-decoration: none;
}


.entry-title {
	font-size: var(--fs-xl);
	font-weight: 900;
	line-height: 1.25;
}

.entry-content {
	line-height: 1.75;
}

.entry-content > * + * {
	margin-top: 1.5em;
}

.entry-content h2,
.entry-content h3 {
	line-height: 1.25;
}

.entry-content .wr-part {
	margin-block: var(--section) 0;
	line-height: 1.25;
}

/* YouTube（16:9・幅いっぱい） */
.wr-part-youtube {
	margin-top: var(--section);
}

/* ---- おたより投函 ---- */

.wr-part-letters {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-top: var(--section);
}

/*
 * おたより投函とリストの上下は広めに（前の 2 倍）。
 * 記事の中では上下 96px（隣どうしの余白は重なって 96px）。
 * 回のページで記事の下に出るおたより投函は、前は上 104px（記事の間隔 24px・YouTube の下 32px・48px）
 * だったので上 208px、下はフッターまで 192px。
 */
.entry-content .wr-part-letters,
.entry-content .wr-part-episodes {
	margin-block: calc(var(--section) * 2);
}

.entry > .wr-part-letters {
	margin-top: 152px;
	margin-bottom: calc(var(--section) * 2);
}

.wr-part-letters .wr-part-heading {
	text-align: center;
}

.wr-letter-topic {
	margin: 0;
	padding: 24px 36px;
	border-radius: var(--radius);
	background: var(--c-muted);
}

.wr-letter-topic-label {
	font-size: var(--fs-md);
	font-weight: 700;
}

.wr-letter-topic-theme {
	font-size: var(--fs-lg);
	font-weight: 900;
}

.wr-letter {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.wr-letter > p {
	margin: 0;
}

.wr-letter-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.wr-letter-field label {
	font-weight: 900;
}

.wr-letter input[type="text"],
.wr-letter textarea {
	width: 100%;
	padding: 12px 24px;
	border: 1px solid var(--c-dark);
	border-radius: var(--radius);
	background: var(--c-bg);
	color: inherit;
	font: inherit;
}

.wr-letter textarea {
	height: 300px;
	resize: vertical;
}

.wr-letter .wr-part-note {
	font-size: var(--fs-md);
	text-align: center;
	opacity: 1;
}

.wr-letter-submit {
	text-align: center;
}

.wr-letter button[type="submit"] {
	width: 33%;
	min-width: 200px;
	padding: 8px 16px;
	border: 0;
	border-radius: var(--radius);
	background: var(--c-dark);
	color: var(--c-bg);
	font: inherit;
	font-size: var(--fs-lg);
	font-weight: 900;
	cursor: pointer;
}

.wr-letter button[type="submit"]:hover {
	opacity: 0.85;
}

.wr-letter button[type="submit"]:disabled {
	opacity: 0.5;
	cursor: wait;
}

.wr-letter-status {
	text-align: center;
}

/* 締め切り後：フォームの代わりに、中央寄せの一文だけ（プロトタイプどおり）。 */
.wr-letter-closed {
	margin: 0;
	font-weight: 700;
	text-align: center;
}

.wr-letter-closed[hidden] {
	display: none;
}

/* ---- 番組各回・ほかの回・ほかの CM（正方形のカード・3 列） ---- */

.wr-part-episodes {
	margin: 0;
}

/* 人気・新着リストの見出しも、ほかのセクション（PICK UP など）と同じ間隔に */
.wr-part-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}

.wr-part-episodes > .wr-part-heading {
	margin-bottom: 16px;
}

.wr-part-episodes .wr-part-list,
.wr-part-episodes .wr-part-list:has(.wr-part-thumb) {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 24px;
}

.wr-part-episodes .wr-part-list li {
	display: block;
	padding: 0;
	border: 0;
}

/* リストの文字は 1rem・普通の太さ */
.wr-part-episodes .wr-part-list a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: inherit;
	font-size: var(--fs-md);
	font-weight: 400;
	line-height: 1.25;
	text-decoration: none;
}


.wr-part-episodes .wr-part-thumb {
	border-color: var(--c-dark);
}

.wr-part-episodes time {
	display: none;
}

/* ---- 一覧（お知らせ一覧など） ---- */

.listing {
	padding-top: 24px;
}

.pagination .nav-links {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin-top: 24px;
	font-weight: 700;
}

/* ---- PC：カルーセルの画像はプロトタイプの 75%（放送中 35% → 26.25%、CM 32 → 24。番組一覧は CM と同じ大きさ） ---- */

@media (min-width: 751px) {
	/*
	 * 放送中のサムネイルは、画面の高さにも合わせる。ヘッダー（約 108px）・カルーセルの上下の余白（96px）・
	 * 番組情報の再生時間まで（約 196px）・放送バー（約 72px）と、その上の余白 24px を引いた残りを超えない
	 * （再生時間がバーに隠れないように）。低すぎる画面でも 240px は保つ。
	 */
	.front-onair .wr-carousel {
		--wr-carousel-item: min(26.25%, max(240px, 100svh - 500px));
	}

	.front-programs .wr-loop-show,
	.front-commercial .wr-loop-cm {
		--wr-loop-item: 24cqi;
	}
}

/* ---- タブレット ---- */

@media (max-width: 750px) {
	/* 番組一覧も CM と同じ大きさ（47%） */
	.front-programs .wr-loop-show {
		--wr-loop-item: 47cqi;
	}

	.card-grid,
	.wr-part-episodes .wr-part-list,
	.wr-part-episodes .wr-part-list:has(.wr-part-thumb),
	.front-banners {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wr-letter button[type="submit"] {
		width: 100%;
	}
}

/* ---- スマホ ---- */

@media (max-width: 450px) {
	:root {
		--gutter: 16px;
	}

	/*
	 * 放送中のサムネイル：上下の余白を詰め、1 枚を 60% にして左右の番組の端が見えるようにする。
	 * 下の番組情報も最初の画面に入るように、こちらの余白も詰める。
	 */
	.front-onair .wr-carousel {
		--wr-carousel-item: 60%;
		--wr-carousel-gap: 16px;

		padding-block: 24px;
	}

	.front-onair .wr-carousel::after {
		background: linear-gradient(90deg, #000 0%, transparent 8%, transparent 92%, #000 100%);
	}

	.front-onair-info {
		padding-block: 24px;
	}

	.card-grid,
	.wr-part-episodes .wr-part-list,
	.wr-part-episodes .wr-part-list:has(.wr-part-thumb),
	.front-banners {
		grid-template-columns: minmax(0, 1fr);
	}

	.news-list a {
		gap: 16px;
	}

	.wr-letter-topic {
		padding: 24px;
	}
}