/* With inspiration from: Josh's Custom CSS Reset(2023.6.9) - https://www.joshwcomeau.com/css/custom-css-reset/ font-size: https://min-max-calculator.9elements.com/ */
@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{margin:0;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 {
	--global-color: #3fa7f3;
	--main-color: #289fd0;
	--sub-color: #20639b;
	--sub-light-color: #8fcee7;
	--accent-color: #f2e829;
}

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

a {
	color: var(--main-color);
	text-decoration: none;
	cursor: pointer;
	user-select: none;
}

a:hover { 
	color: #28c9d0;
	opacity: .8;
	transition: all .3s;
}

hr {
	margin: 2em auto;
	padding: 0;
	height: 10px;
	background-color: #f2f2f2;
	border: none;
	border-radius: 20px;
}

.brsp-only {
	display: none;
}
@media screen and (max-width: 500px) {
	.brsp-only {
		display: block;
	}
}

@media screen and (max-width: 500px) {
	.br {
		display: block;
	}
}

/* テキストの装飾
-------------------------------------------- */
.t-small {
	font-size: .8rem;
	font-weight: 700;
}



/* ============================================
 ヘッダー
============================================ */
.c-header {
	display: flex;
	flex-direction: column;
	text-align: center;
}

/* 番組タイトル
------------------------- */
.program-title-box {
	background-color: var(--main-color);
	background-image: linear-gradient(315deg, var(--main-color) 0%, #6dd5ed 74%, #c6ffdd);
	padding-top: 12px;
	padding-bottom: 12px;
}
.program-title {
	margin: 12px 0;
	background-color: initial;
	color: #fff;
	font-size: clamp(1.5rem, 1.318rem + .91vw, 2rem);
	line-height: 1;
}

/* サブタイトルなど */
.sub-title {
	display:block;
	margin-bottom: .3em;
	font-size: 75%;
}


/* キービジュアル
------------------------- */
.main-visual {
	order: -1;
}
.bg-fluid {
	position: relative;
	z-index: 0;
	background: center bottom no-repeat;
	background-size: cover;
	overflow: hidden;
}
.bg-fluid::before {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: -2;
	background: inherit;
	filter: blur(8px);
}
.bg-fluid::after {
	content: "";
	position: absolute;
	inset: -5px;
	z-index: -1;
	/*background: url(/mbc-dist/image/dot.png) repeat;*/
	opacity: .5;
}

.main-visual img {
	width: 100%;
	max-width: 960px;
	height: auto;
}
.ratio-16x9 {
	aspect-ratio: 16 / 9;
}
.ratio-8x5 {
	aspect-ratio: 8 / 5;
}
@media screen and (max-width: 768px) {
	.main-visual {
		border-top: 7px solid var(--sub-light-color);
	}
}



/* ============================================
 メイン
============================================ */
.c-body {
	padding: 30px 0 50px;
	background-color: #f2f2f2;
}

/* セクション
------------------------- */
.c-container {
	margin: auto;
	padding: 0 min(7vw, 40px);
}
.c-container + .c-container {
	margin-top: 40px;
}
.c-frame {
	margin: auto;
	padding: min(7vw, 40px);
	max-width: 960px;
	background-color: #fff;
	border: 1px solid var(--main-color);
	border-radius: 20px;
}
.c-inner {
	margin: auto;
	max-width: 840px;
}


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

/* セクション見出し h2 */
.c-title {
	position: relative;
	margin-bottom: 30px;
	padding-bottom: .65em;
	color: var(--sub-color);
	font-size: clamp(1.313rem, 1.153rem + .8vw, 1.75rem);
	text-align: center;
	letter-spacing: .05em;
}
.c-title::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 2em;
	height: 5px;
	background-color: var(--sub-light-color);
}

/* 中見出し h3 */
.c-subtitle {
	margin: 0 auto;
	color: var(--sub-color);
	font-size: clamp(1.125rem, 1.08rem + .23vw, 1.25rem);
	font-weight: bold;
	text-align: left;
}
* + .c-subtitle {
	margin-top: 1.2em;
}
.c-subtitle + * {
	margin-top: .5em;
}


/* アイコンフォント
------------------------- */
.iconfont {
	margin-right: .3em;
}



/* --------------------------------------------
 番組概要 #about-program
-------------------------------------------- */

/* 放送時間
------------------------- */
.time-box {
	margin: 30px auto;
	padding: min(3vw, 1em) 2em;
	max-width: min(100%, 500px);
	background-color: var(--main-color);
	background-image: linear-gradient(-135deg, rgba(145, 182, 247, 1) 5%, rgba(40, 159, 208, 1));
	border-radius: 100vh;
	color: #fff;
	font-weight: bold;
	text-align: center;
}

#about-program .program-segment.time-schedule {
	margin-bottom: 1em;
	max-width: min(80%, 300px);
}

@media screen and (max-width: 500px) {
	.time-box {
		border-radius: 1em;
		font-size: 3.8vw;
	}
	.time-box .br {
		display: inline-block;
		margin-left: .5em;
	}
}
@media screen and (min-width: 501px) {
	.time-box .br {
		display: inline-block;
		margin-left: .5em;
	}
}
@media screen and (max-width: 768px) {
	.time-box .rerun {
		margin-top: .5em;
	}
}
@media screen and (min-width: 769px) {
	.time-box dt {
		display: inline-block;
		margin-right: 1em;
	}
	.time-box .rerun dt {
		margin-left: 1em;
	}
	.time-box dd {
		display: inline-block;
	}
}


/* 番組の紹介文 */
.time-box ~ p {
	margin: 2em auto 0;
	font-size: clamp(1rem, .955rem + .23vw, 1.125rem);
}
@media screen and (min-width: 769px) {
	.time-box ~ p + * {
		margin-top: 2em;
	}
}

.c-subtitle ~ p {
	margin-top: 1em;
	font-size: 1rem;
}

.intro {
	margin: 2em auto 0;
	max-width: 640px;
	font-size: clamp(1rem, .955rem + .23vw, 1.125rem);
}
.intro ~* {
	margin-top: 2em;
}

.c-box {
	margin-left: auto;
	margin-right: auto;
	max-width: 640px;
}


/* button
------------------------- */
.btn {
	position: relative;
	display: block;
	overflow: hidden;
	margin: .5em auto;
	padding: .5em 0;
	width: 100%;
	max-width: 300px;
	background-color: var(--accent-color);
	background-image: linear-gradient(135deg, rgba(255, 243, 208, 1), rgba(242, 232, 41, 1) 40%);
	border: 1px solid #000;
	border-radius: 3em;
	color: #333;
	font-size: clamp(.875rem, .83rem + .23vw, 1rem);
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	user-select: none;
}
.btn:hover {
	color: #000;
	transform: translate(0, 4px);
}


/* リンクボタンリスト
------------------------- */
.link-box {
	list-style: none;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 1em;
	padding: 0;
}
.intro ~ .link-box {
	margin-top: 2em;
}
.linkbtn {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
@media screen and (min-width: 769px) {
	.link-box {
		flex-direction: row;
	}
	.linkbtn {
		padding: 0 .5em;
		width: calc(100% / 3);
	}
	.linkbtn p{
		margin-top: 0;
		margin-bottom: .5em;
	}
	.linkbtn .btn {
		margin-top: auto;
	}
}


/* スポンサーリンクボタン
------------------------- */
.sponsored-btn {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 1em 3em;
	color: #fff;
	background-color: #000;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	user-select: none;
}
.sponsored-btn span {
	position: relative;
}
.sponsored-btn::before {
	content: "";
	position: absolute;
	top: 0;
	left: 30px;
	width: 150%;
	height: 500%;
	background-color: #fff100;
	transition: all .5s ease-in-out;
	transform: translateX(-110%) translateY(-70%) rotate(135deg);
}
.sponsored-btn:hover {
	color: #000;
}
.sponsored-btn:hover::before {
	transform: translateX(-9%) translateY(-15%) rotate(135deg);
}


/* テキストリンク
------------------------- */
.link-list {
	list-style: none;
	margin-top: 1em;
	padding-left: 0;
}


/* 折りたたみテキスト
------------------------- */
* + .accordion-panel {
	margin-top: 1em;
}
.accordion-panel summary {
	width: 100%;
	color: var(--main-color);
	font-weight: bold;
	text-align: center;
	cursor: pointer;
}
.accordion-panel-body {
	text-align: left;
}



/* --------------------------------------------
 コーナー紹介 #about-segment
-------------------------------------------- */
.program-segment {
	margin: 30px auto 0;
	width: min(100%, 500px);
}
.program-segment + .program-segment {
	margin-top: 4em;
}
.seg-box + .seg-box {
	margin-top: 2em;
}
.seg-term {
	position: relative;
	margin-bottom: .5em;
	padding: 0 0 .5em 0;
	width: fit-content;
	min-width: 5em;
	font-size: clamp(1.125rem, 1.08rem + .23vw, 1.25rem);
	font-weight: bold;
}
.seg-term::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	min-width: 5.5em;
	height: 3px;
	background-color: var(--sub-light-color);
}

/* タイムスケジュール */
@media screen and (min-width: 601px) {
	.program-segment.time-schedule {
		padding: 2em;
		border: 1px solid var(--sub-light-color);
		border-radius: 10px;
	}
}

/* 詳細タイムスケジュール有り */
.seg-width-detail {
	margin-top: 1em;
}
.seg-detail-dt {
	font-size: clamp(1rem, .955rem + .23vw, 1.125rem);
	font-weight: bold;
}
.seg-detail-title {
	margin-top: .2em;
	font-size: clamp(1.125rem, 1.08rem + .23vw, 1.25rem);
}
.seg-detail-img {
	display: block;
	margin: 1em auto auto;
	text-align: center;
}
.seg-with-detail .seg-desc + .seg-desc {
	margin-top: 2em;
}

/* 曜日スケジュール */
.week-schedule {}

/* カテゴリー紹介 */
.seg-cat-intro {}



/* --------------------------------------------
 トピックス #topics
-------------------------------------------- */

/* スライダー Swipper
------------------------- */
.sw-container {
	position: relative;
}
.swiper-slide img {
	border-radius: 6px;
	width: 100%;
	border-radius: 1rem;
	aspect-ratio: 16 / 9;
	-o-object-fit: cover;
	object-fit: cover;
}
.swiper-slide .article-data {
	margin-top: .5em;
	color: #333;
	font-size: 12px;
}
.swiper-slide .article-title {
	margin-top: .3em;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.15;
}
.swiper-slide .article-txt {
	margin-top: .5em;
	color: #333;
	font-size: 13px;
	line-height: 1.15;
}

/* prev・next */
.sw-container .swiper-button-prev,
.sw-container .swiper-button-next {
	width: 40px;
	height: 40px;
	opacity: .7;
}
.sw-container .swiper-button-prev {
	left: 0;
}
.sw-container .swiper-button-next {
	right: 0;
}

.sw-container .swiper-button-prev::after,
.sw-container .swiper-button-next::after {
	content: "";
	margin: auto;
	width: 40px;
	height: 40px;
	background-repeat: no-repeat;
	background-size: contain;
}
.sw-container .swiper-button-prev::after {
	background-image: url(/mbc-dist/image/arrow-l.svg);
}
.sw-container .swiper-button-next::after {
	background-image: url(/mbc-dist/image/arrow-r.svg);
}

.swiper-slide .fit {
	border-radius: 10px;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}



/* --------------------------------------------
 動画 #video
-------------------------------------------- */
#video .c-inner {
	max-width: 600px;
}
.youtube-container ~* {
	margin-top: 1.5em;
}

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



/* --------------------------------------------
 ラジオ配信サービス #audio-distribute
-------------------------------------------- */

/* ラジオ配信サービス
------------------------- */
#audio-distribute p {
	margin-bottom: 1em;
}
.audio-container {
	margin: auto;
}
.audio-container > iframe {
	width: 100%;
}



/* --------------------------------------------
 メッセージ #message
-------------------------------------------- */
#message .c-frame {
	padding: 0;
	text-align: center;
}
#message .c-inner {
	margin: min(7vw, 40px);
	text-align: left;
}
@media screen and (min-width: 981px) {
	#message .c-inner {
		margin-left: auto;
		margin-right: auto;
	}
}


/* google form
------------------------- */
.gform-container {
	margin-top: min(5vw, 30px);
	margin-bottom: min(7vw, 40px);
	background-color: #fff;
}
.gform-container iframe {
	width: 100%;
}

#message .memo {
	position: relative;
	margin-left: 1.2em;
	color: #eb3237;
}
#message .memo::before {
	content: "※";
	position: absolute;
	left: -1.2em;
}
#message .notice {
	font-size: 90%;
}
@media screen and (min-width: 769px) {
	#message .notice {
		text-align: center;
	}
}


/* テーブル
------------------------- */
.table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 1em 0 0;
	width: 100%;
	border: 1px solid #80b9d4;
	border-radius: 10px;
}
.table tbody th,
.table tbody td {
	border-bottom: 1px solid #80b9d4;
}
.table tbody th {
	padding: .7em 2em;
	background-color: #d6e6f3;
	text-align: left;
	font-weight: normal;
}
.table tbody td {
	padding: .7em;
	border-left: 1px solid #80b9d4;
}
.table tbody tr:last-child th,
.table tbody tr:last-child td {
	border-bottom: none;
}
@media screen and (max-width: 500px) {
	.table {
		margin-bottom: 1em;
		border: none;
	}
	.table tbody th {
		display: block;
		padding: 0;
		background-color: initial;
		border: none;
		font-weight: bold;
	}
	.table tbody th::before {
		content: "●";
		margin-right: .4em;
		color: #1594e1;
		font-size: 70%;
	}
	.table tbody td {
		display: block;
		margin-bottom: 1em;
		padding: 0;
		border: none;
	}
	.table tbody tr:last-child td {
		margin-bottom: 0;
	}
}



/* --------------------------------------------
 出演者 #cast
-------------------------------------------- */

/* 出演者リスト
------------------------- */
#cast .c-frame {
	padding-bottom: min(4.5vw, 25px);
}
.cast {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin-top: 30px;
	gap: 1em;
}
.cast-list {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: calc((100% - 1em) / 2);
	max-width: 320px;
}
@media screen and (max-width: 500px) {
	.cast-list:first-child {
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width: 501px) {
	.cast {
		justify-content: center;
	}
	.cast-list:nth-child(n+4):last-of-type {
		margin-right: auto;
	}
}
@media screen and (min-width: 601px) {
	cast {
		gap: 2em 1em;
	}
	.cast-list {
		width: calc((100% - 2em) / 3);
	}
}
@media screen and (min-width: 769px) {
	.cast-list {
		width: calc((100% - 3em) / 4);
	}
}

.cast-name {
	order: 2;
	font-weight: bold;
	text-align: center;
}
.cast-name span {
	color: #999;
}
.cast-face {
	order: 1;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: .5em;
	max-width: 150px;
	max-height: 150px;
	border-radius: 100vh;
}
.cast-face img {
	object-fit: cover;
}
.cast-meta {
	order: 3;
	max-width: 11em;
	font-size: .875rem;
}
.cast-link {
	order: 4;
	margin-top: auto;
}
.cast-link a {
	display: block;
	margin: .5em auto;
	padding: .2em 1em;
	width: 100%;
	max-width: 300px;
	background-color: azure;
	border: 1px solid var(--main-color);
	border-radius: 3em;
	color: var(--main-color);
	font-size: .875rem;
	text-align: center;
}
.cast-link a:hover {
	opacity: .7;
}

/* 横並びリスト */
.horizontal-list .cast-list {
	width: 100%;
	max-width: 400px;
}
.horizontal-list .cast-list + .cast-list {
	margin-top: 2em;
}
.horizontal-list .cast-face {
	max-width: 130px;
	max-height: 130px;
}
.horizontal-list .cast-meta {
	margin-top: .75em;
	max-width: 100%;
}

@media screen and (max-width: 768px) {
	.horizontal-list .accordion-panel {
		margin-top: .5em;
	}
}

@media screen and (min-width: 769px) {
	.horizontal-list .cast-list {
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 100%;
	}
	.horizontal-list .cast-face {
		flex: 1;
		margin-bottom: 0;
	}
	.horizontal-list .cast-name {
		flex: 1;
		padding: 0 1em;
	}
	.horizontal-list .cast-meta {
		flex: 2;
		margin-top: 0;
	}
	.horizontal-list .accordion-panel summary {
		text-align: left;
	}
	.horizontal-list .cast-link {
		display: flex;
		justify-content: flex-end;
		width: 100%;
	}
	.horizontal-list .cast-link a {
		margin: .5em 0 0;
		width: fit-content;
		max-width: none;
	}
	.horizontal-list .cast-link a + a {
		margin-left: 1em;
	}
}



/* --------------------------------------------
 提供・協力など #colophon
-------------------------------------------- */

/* 提供・協力リスト
------------------------- */
.colophon {
	margin-top: 1em;
}
.colophon-list dt {
	font-weight: bold;
}
.colophon-link {
	display: flex;
	flex-wrap: wrap;
	column-gap: .5em;
}
.colophon-link a {
	display: block;
	margin: .5em 0;
	padding: .2em 1em;
	background-color: azure;
	border: 1px solid var(--main-color);
	border-radius: 3em;
	color: var(--main-color);
	font-size: .875rem;
	text-align: center;
}
.colophon-link a:hover {
	opacity: .7;
}

@media screen and (max-width: 768px) {
	.colophon-list + .colophon-list {
		margin-top: 1em;
	}
}
@media screen and (min-width: 769px) {
	.colophon {
		display: flex;
		flex-wrap: wrap;
		gap: 2em;
	}
	.colophon-list {
		width: calc((100% - 4em) / 3);
	}
	.colophon-list .br {
		display: block;
	}
}



/* --------------------------------------------
 PRバナー
-------------------------------------------- */

/* PRバナー
------------------------- */
.pc-sp-banner {
	margin: 12px auto;
	padding: 0 20px;
	width: 100%;
	max-width: 100%;
	text-align: center;
}
* + .pc-sp-banner,
.pc-sp-banner + * {
	margin-top: 42px;
}



/* --------------------------------------------
 関連リンク・協賛リンク #aside-container
-------------------------------------------- */
.a-container {
	padding: 45px 1em;
	background-color: #fff;
}
.a-inner {
	margin: auto;
	max-width: 840px;
}
.a-container hr {
	width: 80%;
}

/* バナーリスト
------------------------- */
.bnr-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	list-style: none;
	margin-top: 30px;
	margin-left: -.5em;
	padding: 0;
}
.bnr {
	padding-bottom: .5em;
	padding-left: .5em;
	width: calc(100% / 2);
	max-width: 320px;
	aspect-ratio: 16 / 5;
}
@media screen and (max-width: 540px) {
	.bnr:first-child {
		margin-left: auto;
		margin-right: auto;
	}
}
@media screen and (min-width: 541px) {
	.bnr-list {
		justify-content: center;
	}
	.bnr {
		width: calc(100% / 3);
	}
}
@media screen and (min-width: 769px) {
	.bnr-list {
		margin-left: -1em;
	}
	.bnr {
		padding-bottom: 1em;
		padding-left: 1em;
		width: calc(100% / 3);
	}
}