@charset "utf-8";*,*::before,*::after{box-sizing:border-box}*{margin:0}html{scroll-behavior:smooth}body{font-weight:400;font-size:1rem;line-height:1.5;font-family:sans-serif}h1,h2,h3,h4,h5,h6{line-height:1.15;overflow-wrap:break-word}p{margin-top:1em;overflow-wrap:break-word}b,strong{font-weight:700}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{background-color:transparent;text-decoration:none}a:active,a:hover{outline-width:0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}code,kbd,samp{font-family:monospace,monospace;font-size:1em}nav ul,nav ol{list-style:none;padding:0}ul,ol{padding-left:1.5em}img,svg{display:inline;max-width:100%;height:auto;vertical-align:middle;background-repeat:no-repeat;background-size:cover;shape-margin:.75rem}picture,video,canvas{display:block;max-width:100%}iframe{border:none}table{border-collapse:collapse}details{display:block}summary{display:list-item}input,button,textarea,select{font:inherit}input,button{line-height:1.15}*:focus{outline:none}


:root {
	--space: clamp(90px, 9vw, 120px);
}


body {
	color: #252525;
	font-family: "Hiragino Sans", Roboto, "Segoe UI", "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", Arial, "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", Meiryo, sans-serif;
}


/* レイアウト
 ----------------------------------------- */
/* sticky footer */
html, body {
	height: 100%;
}
body > footer {
	position: sticky;
	top: 100vh;
	top: 100dvh;
}

/* 非表示 */
.hidden {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

/* 時計アイコン */
.i-clock {
	box-sizing: content-box;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: .1em;
	margin-right: .2em;
	width: .9em;
	height: .9em;
	border: .1em solid currentColor;
	border-radius: 50%;
	color: #999;
	line-height: 1;
}
.i-clock::before,
.i-clock::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 50%;
	background: currentColor;
	border-radius: .1em;
	transform: translate(-.05em, .05em);
}
.i-clock::before {
	width: .1em;
	height: .4em;
}
.i-clock::after {
	width: .35em;
	height: .1em;
}

/* はんなり明朝 */
.wf-hannari {
	font-family: "Hannari";
}



/* ----------------------------------------- */
/* header
/* ----------------------------------------- */

/* hero
 ---------------------------------------- */
.hero {
	position: relative;
	clip-path: inset(0);
	width: 100%;
	height: auto;
}
.hero::before {
	content: "";
	position: relative;
	display: block;
	aspect-ratio: 2 / 3;
}
@media(min-width: 769px) {
	.hero::before {
		aspect-ratio: 16 / 9;
	}
}

/* hero-img */
img.hero-img {
	position: fixed;
	inset: 0;
	z-index: 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
	opacity: 0;
	animation: fade-animation 30s infinite;
}
@keyframes fade-animation {
	  0% { opacity: 0; }
	7.5% { opacity: 1; }
	 15% { opacity: 1; }
	 20% { opacity: 0; }
	100% { opacity: 0; }
}
.hero-img:nth-of-type(1) {
	animation-delay: 0s;
}
.hero-img:nth-of-type(2) {
	animation-delay: 5s;
}
.hero-img:nth-of-type(3) {
	animation-delay: 10s;
}
.hero-img:nth-of-type(4) {
	animation-delay: 15s;
}
.hero-img:nth-of-type(5) {
	animation-delay: 20s;
}
.hero-img:nth-of-type(6) {
	animation-delay: 25s;
}

.hero-bottom {
	position: absolute;
	left: 0;
	bottom: -2px;
	z-index: 2;
}

/* メインタイトル */
.main-title {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	width: min(80%, 1000px);
}



/* ----------------------------------------- */
/* main
/* ----------------------------------------- */

/* グラーデーション背景 */
.wrapper {
	margin: 0 auto;
	background: #21b3ed;
	background:
	linear-gradient(to top,rgba(236, 247, 255, 1),
	                       rgba(217, 175, 217, .7) 10%,
	                       rgba(151, 217, 225, .7),
	                       rgba(255, 255, 255, .7) 100%);
}
.inner {
	margin: auto;
	padding: 0 1.25em;
	max-width: 1000px;
}


/* concept
 ---------------------------------------- */
.concept {
	margin: auto;
	max-width: 800px;
	font-size: clamp(1rem, .864rem + .68vw, 1.375rem);
	line-height: 2;
}
.concept .inner {
	padding-top: var(--space);
	padding-bottom: var(--space);
}
@media (max-width: 767px) {
	.concept br.none {
		display: none;
	}
}


/* キービジュアル
 ----------------------------------------- */
.key-wrapper {
	padding: calc(var(--space) * 1.5) 0;
	background: #0786d3 url("img/sky.jpg") center center / cover no-repeat;
	clip-path: polygon(0 10vw, 100% 0, 100% calc(100% - 10vw), 0 100%);
}
@media (min-width: 768px) {
	.key-wrapper {
		background-attachment: fixed;
	}
}

.key-visual {
	margin: auto;
	max-width: 960px;
}
@media (min-width: 960px) {
	.key-visual {
		border: 1px solid #fff;
	}
}

/* Youtube動画 */
.video-container {
	margin: 0 auto;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.video-container iframe {
	width: 100%;
	height: 100%;
}

/* テーマ曲 */
.theme-music {
	position: relative;
	padding: calc(var(--space) / 2) 2em var(--space);
	background: rgba(255, 255, 255, .5);
	border-bottom: 1px solid #fff;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
}
@media (min-width: 960px) {
	.theme-music {
		padding: calc(var(--space) / 2) 0;
		border-bottom: none;
		clip-path: none;
	}
}

.credit {
	margin: auto;
	width: fit-content;
}
.credit dt {
	font-size: .9em;
}
.credit-title {
	display: flex;
	align-items: center;
	gap: 1em;
}
.credit-title dd {
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
	font-size: clamp(1.25rem, 1.159rem + .45vw, 1.5rem);
	text-align: center;
}
.credit-composer {
	display: flex;
	align-items: center;
	gap: 1em;
	margin-top: .75em;
}
.credit-composer dd {
	font-size: .9em;
}
.credit-composer dd span.name {
	font-family: "Zen Old Mincho", serif;
	font-weight: 700;
	font-size: clamp(1.125rem, 1.08rem + .23vw, 1.25rem);
}
.credit-composer dd a {
	color: #252525;
}
@media (max-width: 420px) {
	.theme-music {
		padding-left: 1em;
		padding-right: 1em;
	}
}
@media (max-width: 500px) {
	.credit-composer {
		align-items: baseline;
	}
	.credit-composer dd span.job {
		display: block;
		margin-left: -.5em;
	}
}


/* 番組コンテンツ
 ----------------------------------------- */
.contents-wrapper {
	padding: var(--space) 0 calc(var(--space) * 1.5);
}

.contents-sec + .contents-sec {
	margin-top: var(--space);
}
.contents-title {
 margin: 0 auto 1.5em;
 font-family: "Zen Old Mincho", serif;
 font-size: clamp(1.5rem, 1.409rem + .45vw, 1.75rem);
 font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem);
 font-weight: 700;
 text-align: center;
}

/* カードデザイン */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	max-width: 450px;
	background-color: #fefefe;
	border: 1px solid #fff;
}
.card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(-45deg, #b84fce 0%, #d4acfb 100%);
	transform: translate3d(0px, 20px, 0) scale(.95);
	filter: blur(20px);
	opacity: var(.7);
	transition: opacity .3s;
}
.card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: inherit;
}

.card + .card {
	margin-top: calc(var(--space) / 1.5);
}

.card-thumb {
	order: 1;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.card-thumb img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
}
.card-thumb .text-on {
	position: relative;
}
.card-thumb .text-on span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
	display: block;
	color: #fff;
	font-size: clamp(1.5rem, 1.364rem + .68vw, 1.875rem);
	font-weight: bold;
}

.card-text {
	order: 2;
	display: flex;
	flex-direction: column;
	padding: 0 1em 1em;
}
.card-title {
	order: 2;
	margin-top: 1em;
	font-size: clamp(1.125rem, 1.08rem + .23vw, 1.25rem);
	line-height: 1.2;
}
.card-title span {
	font-size: .9em;
	line-height: 1.5;
}
.card-meta {
	order: 1;
	font-size: .9rem;
}
span.meta-week {
	display: block;
	margin: 1.25em 0 -.65em;
	padding: .2em .5em;
	width: fit-content;
	background-color: #a0d8ef;
	font-size: .9rem;
}
.card-desc {
	order: 3;
}
.card-link {
	order: 4;
}
.card-link {
	margin-top: 1.5em;
	padding: 1.25em 0 .5em;
	width: 100%;
	border-top: 1px solid #ccc;
}
.link-btn a {
	display: block;
	margin: auto;
	padding: .5em 1em;
	width: fit-content;
	background: #ccc;
	border-radius: .3em;
	color: #fff;
	font-size: 14px;
	transition: opacity .5s ease;
	cursor: default;
}
.link-btn a:hover {
	opacity: .8;
}
.link-btn a[href] {
	background: #2ca9e1;
	cursor: pointer;
}

@media (min-width: 768px) {
	.card {
		position: relative;
		flex-direction: row;
		align-items: center;
		gap: clamp(1.5em, 2.67vw, 2em);
		max-width: 100%;
		padding: 1em;
	}
	.card-thumb {
		flex: 1;
	}
	.card-text {
		flex: 1;
		padding: 0;
		min-width: 16em;
	}
	.card-meta {
		margin-top: 0;
	}
	.card-desc {
		margin-top: 1em;
		width: 100%;
		max-height: 90px;
		overflow-y: auto;
	}
	.card-desc p:first-child {
		margin-top: 0;
	}
	.card-link {
		position: absolute;
		right: 0;
		bottom: -20px;
		margin-top: 0;
		padding: 0;
		border-top: none;
	}
	.link-btn a {
		margin-right: 1em;
		border: .1em solid #fff;
		border-radius: .2em;
	}
}