@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 {
	--v-space: max(60px, min(9vw, 100px)); /*clamp(60px, 9vw, 100px)*/
	--base-color: #f3f0ec; /* ライトベージュ */
	--main-color: #a92708; /* 暗赤 */
	--main-light-color: #ef857d;  /* 薄赤 */
	--sub-color: #4d473d; /* こげ茶 */
	--sub-color: #303f3d; /* こげ茶 */
	--accent-color: #088aaa; /* 青 */
	/*--accent-color-rgb: 45, 79, 227;*/
	
	/* font-size: var(--16px); */
	--10px: .625rem;
	--11px: .6875rem;
	--12px: .75rem;
	--13px: .8125rem;
	--14px: .875rem;
	--15px: .9375rem;
	--16px: 1rem;
	--18px: 1.125rem;
	--20px: 1.25rem;
	--22px: 1.375rem;
	--24px: 1.5rem;
	--26px: 1.625rem;
	--28px: 1.75rem;
	--32px: 2rem;
}

body {
	background: #fff;
	color: #252525;
	font-family: YakuHanJPs, "Helvetica Neue", Helvetica, "Hiragino Sans", Arial, "Yu Gothic", "游ゴシック", "Yu Gothic Medium", "游ゴシック Medium", Meiryo, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a {
	color: var(--accent-color);
}
.hidden {
	position: absolute;
	top: -9999px;
	left: -9999px;
}
.cg {
	pointer-events: none;
}


/* breadcrumb
---------------------- */
.breadcrumb {
	padding: 1.5em 20px;
	background: var(--main-color);
	font-size: clamp(.75rem, .694rem + 0.24vw, .875rem);
}
.breadcrumb-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.breadcrumb-list li + li::before {
	content: "/";
	padding: 0 .3em;
	color: #ddd;
}
.breadcrumb-item {
	color: #fff;
	line-height: 1.2;
}
.breadcrumb-item a {
	color: #fff;
}
@media (max-width: 768px) {
	.breadcrumb-item span {
		display: none;
	}
}
@media (min-width: 769px) {
	.breadcrumb {
		padding: 1.5em 4%;
	}
	.breadcrumb-list {
		margin: auto;
		max-width: 1160px;
	}
}



/* ------------------------------------------------------
   レイアウト
------------------------------------------------------ */
main section {
	padding: var(--v-space) 0;
	background: var(--base-color);
}
.i-container {
	margin: auto;
	padding: 0 20px;
	max-width: 1040px;
}

.br {
	display: inline-block;
}
.small {
	font-size: 65%;
}



/* ------------------------------------------------------
   ヘッダー header
------------------------------------------------------ */
.header {
	margin: auto;
	background: var(--base-color);
	text-align: center;
}

.hero {
	position: relative;
	margin: auto;
	padding: 0 0 clamp(40px, 8.5vw, 90px);
}

.program-title {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	margin: 0 auto;
	padding: 0 4%;
}

@media (min-width: 769px) {
	.hero {
		padding: min(4%, 4em) 2em clamp(40px, 8.5vw, 90px);
		max-width: calc(1000px + 2em * 2);
	}
}

.onair-meta {
}

.onair-date {
	margin-top: 1em;
	font-size: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem);
}

.onair-date .copyrights {
	display: block;
	font-size: clamp(0.875rem, 0.739rem + 0.68vw, 1.25rem);
}

.onair-date .onair-datetime {
	display: block;
	margin: 1em auto 0;
	max-width: min(11em, 100%);
}
@media (min-width: 769px) {
	.onair-date .onair-datetime {
		
	}
}



/* 概要 intro
---------------------- */
.intro {
	padding-top: calc(var(--v-space) / 2);
}

.intro .c-title {
	margin-bottom: calc(var(--v-space) / 2);
	font-size: clamp(1.25rem, 0.977rem + 1.36vw, 2rem);
	line-height: 1.4;
}

.intro-content {
	position: relative;
	font-size: clamp(1rem, 0.864rem + 0.68vw, 1.375rem);
}

.intro-text {
	margin: auto;
	max-width: 660px;
}
.intro-text p:first-child {
	margin-top: 0;
}

.deco-1 {
	color: var(--main-color);
	font-weight: bold;
	font-size: 1.1em;
}
.deco-2 {
	background: linear-gradient(transparent 70%, var(--main-light-color) 70%);
}

/* 予告動画
---------------------- */
.promotion {
	margin: auto;
	padding: 5% 0;
	max-width: 660px;
}

.youtube-video {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.youtube-video iframe {
	width: 100%;
	height: 100%;
}
@supports not (aspect-ratio: 16 / 9) {
	.youtube-video {
		position: relative;
		padding-top: 56.25%;
	}
	.youtube-video iframe {
		position: absolute;
		top: 0;
		right: 0;
		object-fit: cover;
	}
}

@media (min-width: 801px) {
	.intro-content {
		display: flex;
	}
	.intro-text {
		flex: 1;
		margin: 0;
		padding-right: 1em;
		max-width: 100%;
	}
	.promotion {
		flex: 1;
		margin: 0;
		padding: 0;
		max-width: 100%;
	}
}



/* ------------------------------------------------------
   コンテンツ
------------------------------------------------------ */
.c-title {
	position: relative;
	margin-bottom: 2em;
	padding: calc(var(--v-space) / 4) .5em;
	background: var(--main-color);
	border: 3px solid var(--main-color);
	color: #fff;
	font-size: max(1.5rem, min(1.227rem + 1.36vw, 2.25rem)); /* 24px〜36px */
	text-align: center;
}
.c-title::before {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0 12px;
	border-style: solid;
	border-color: var(--main-color) transparent transparent transparent;
}
.c-title::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 1em;
	width: 0;
	height: 0;
	border-width: 14px 12px 0 12px;
	border-style: solid;
	border-color: var(--main-color) transparent transparent transparent;
}



/* 内容 segment
---------------------- */
.segment {
	position: relative;
	background: url(../img/bg-map.jpg) #fff center center / cover no-repeat;
}
@media (min-width: 769px) {
	.segment {
		background: url(../img/bg-map.jpg) #fff center top / 150% no-repeat fixed;
	}
}

.segment .i-container {
	max-width: 840px;
}

.segment-title {
	position: relative;
	display: grid;
	place-items: center;
	margin-bottom: calc(var(--v-space) / 2);
	padding: 0 .5em;
	color: var(--accent-color-a);
	font-size: max(1.5rem, min(1.227rem + 1.36vw, 2.25rem)); /* 24px〜36px */
	text-align: center;
	text-shadow: 2px 1px 0 #fff;
}
.segment-title > * {
	grid-area: 1 / 1;
}
.rotate-circle {
	display: inline-block;
	width: min(40vw, 7em);
	height: min(40vh, 7em);
	background: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20500%20500%22%3E%3Cdefs%3E%3Cstyle%3E.cls-2%7Bfill%3A%232e6282%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-2%22%20d%3D%22m334.11%2046.95-13.33%2012.21c4.8%201.78%209.51%203.74%2014.12%205.86l-.79-18.07ZM453.05%20165.89l-18.07-.79c2.12%204.62%204.08%209.33%205.86%2014.12l12.21-13.33ZM453.05%20334.11l-12.21-13.33c-1.78%204.8-3.74%209.51-5.86%2014.12l18.07-.79ZM334.11%20453.05l.79-18.07c-4.62%202.12-9.33%204.08-14.12%205.86l13.33%2012.21ZM165.89%20453.05l13.33-12.21c-4.8-1.78-9.51-3.74-14.12-5.86l.79%2018.07ZM46.95%20334.11l18.07.79c-2.12-4.62-4.08-9.33-5.86-14.12l-12.21%2013.33ZM46.95%20165.89l12.21%2013.33c1.78-4.8%203.74-9.51%205.86-14.12l-18.07.79ZM165.89%2046.95l-.79%2018.07c4.62-2.12%209.33-4.08%2014.12-5.86l-13.33-12.21ZM269.82%2047.46%20250%205l-19.82%2042.46c6.52-.63%2013.13-.96%2019.82-.96s13.29.33%2019.82.96ZM452.54%20269.82%20495%20250l-42.46-19.82c.63%206.52.96%2013.13.96%2019.82s-.33%2013.29-.96%2019.82ZM47.46%20230.18%205%20250l42.46%2019.82c-.63-6.52-.96-13.13-.96-19.82s.33-13.29.96-19.82ZM379.2%20407.23l44.04%2016.01-16.01-44.04a205.106%20205.106%200%200%201-28.03%2028.03ZM230.18%20452.54%20250%20495l19.82-42.46c-6.52.63-13.13.96-19.82.96s-13.29-.33-19.82-.96ZM92.77%20379.2l-16.01%2044.04%2044.04-16.01a205.106%20205.106%200%200%201-28.03-28.03ZM120.8%2092.77%2076.76%2076.76l16.01%2044.04c8.41-10.22%2017.8-19.61%2028.03-28.03ZM407.23%20120.8l16.01-44.04-44.04%2016.01c10.22%208.41%2019.61%2017.8%2028.03%2028.03Z%22%2F%3E%3Ccircle%20cx%3D%22250%22%20cy%3D%22250%22%20r%3D%22203.5%22%20style%3D%22fill%3Anone%3Bstroke%3A%232e6282%3Bstroke-miterlimit%3A10%3Bstroke-width%3A3px%22%2F%3E%3C%2Fsvg%3E')
	center center no-repeat;
	filter: opacity(70%);
	transform-origin: calc(100% * 250 / 500) calc(100% * 250 / 500);
	animation: rotate 10s linear infinite;
}
@keyframes rotate {
	to {
		transform: rotate(1turn);
	}
}

.point {
	padding: clamp(1.5em, 3vw, 2.5em) clamp(1em, 2.5vw, 2em);
	background: rgba(255, 255, 255, .7);
	border: 1px solid #fff;
	border-radius: 1em;
}
.point-title {
	--r: .8em;
	margin-left: clamp(-1em, -4vw, -4.5em);
	margin-bottom: 1em;
	padding: .5em calc(var(--r) + .25em) .5em 1.2em;
	background: var(--sub-color);
	clip-path: polygon(-100vw 0,calc(100% - var(--r)) 0,100% 50%,calc(100% - var(--r)) 100%,-100vw 100%);
	width: fit-content;
	color: #fff;
	font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem); /* 20px～28px */
	line-height: 1.3;
}
.point + .point {
	margin-top: max(48px, min(7.5vw, 90px));
}
.point-image {
	position: relative;
	overflow: hidden;
	margin: auto auto 2em;
	max-width: 400px;
}
.point-image::before {
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
}
.point-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.point-3 .point-image img {
	object-position: 50% 50%;
}

.point-text {
	font-size: max(1rem, min(.955rem + .23vw, 1.125rem)); /* 16px～18px */
}
.point-text p:first-child {
	margin-top: 0;
}
.point-text p + p {
	margin-top: .5em;
}
@media (min-width: 769px) {
	.point {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}
	.point-title {
		flex-basis: 100%;
	}
	.point-image {
		flex-basis: 35%;
		margin: 0;
	}
	.point-text {
		flex-basis: calc(65% - 2.5em);
		margin: 0;
		margin-left: 2.5em;
	}
}



/* 出演者 cast
---------------------- */
.cast .i-container {
	max-width: 760px;
}
@media (min-width: 801px) {
	.cast .i-container {
		padding: 0 15px;
	}
}

.cast-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(3, max-content);
	gap: 2em;
}
@media (max-width: 600px) {
	.col-one {
		grid-area: 1 / 1 / 2 / 3;
	}
	.col-one .cast-img {
		width: 50%;
	}
	.col-one .cast-desc {
		max-width: 12em;
	}
}
@media (min-width: 601px) {
	.cast-list {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, max-content);
	}
}

.castlist-wrap {
	text-align: center;
}
.cast-img {
	margin: auto;
	max-width: 200px;
}
.cast-img img {
	margin: auto;
	border-radius: 100vh;
}
.cast-name {
	margin-top: .5em;
	font-size: var(--20px);
	font-weight: bold;
}
.cast-meta {
	margin-top: .3em;
	color: #444;
	font-size: var(--14px);
	line-height: 1.3;
}
.cast-desc {
	margin: auto;
	max-width: 12em;
	font-size: var(--14px);
	text-align: left;
}
.cast-meta + .cast-desc {
	margin-top: .5em;
}
@media (min-width: 601px) {
	.cast-img {
		max-width: 150px;
	}
	.cast-desc {
	max-width: 11em;
	}
}



/* ギャラリー gallery
---------------------- */
.gallery {
	background: var(--sub-color);
}
.gallery-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	grid-gap: 1px;
	padding-left: 0;
	list-style: none;
}
.gallery-item {
	display: inline-block;
	overflow: hidden;
}
.gallery-item a {
	position: relative;
	display: block;
	padding-top: 100%;
	transition-duration: .5s;
}
.gallery-item a:hover {
	transform: scale(1.2);
}
.gallery-item img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: inline;
	margin: auto;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (min-width: 769px) {
	.gallery-list {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	}
	.gallery-item a {
		padding-top: 66.67%; /* 3:2 */
	}
}



/* ------------------------------------------------------
   フッター global-footer
------------------------------------------------------ */

/* sticky-footer */
---------------------- 
html, body { height: 100%;}
body > #global-footer {
	position: sticky;
	top: 100vh;
	top: 100dvh;
}

/* footer
---------------------- */
.contents-footer {
	padding: calc(var(--v-space) / 2) 1em;
	background: var(--main-color);
	color: #fff;
	text-align: center;
}
.colophon {
	margin-top: 0;
	font-size: var(--12px);
}
.colophon strong {
	padding-left: .5em;
	font-size: max(1rem, min(.909rem + .45vw, 1.25rem)); /* 16px〜20px */
	font-weight: bold;
	line-height: 2;
}
.colophon a {
	color: #fff;
}