@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap');
/*--------------------------------------------------------*/
/*リセット*/
html{margin:0px;padding:0px;border:0px;}
*{margin:0px;padding:0px;border:0px;}
body{line-height:1;}
h1,h2,h3,h4,h5,h6,p,span,table,a,img,dl,dt,dd,ul,li,ol,iframe,nav{
	margin:0px;
	padding:0px;
	font-size:100%;
	font-weight:normal;
	background:transparent;
	vertical-align:bottom;
	border:none;
	word-break: break-word;
}
ol, ul{list-style:none; list-style-type:none;}
.cleartext{
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
.clearfix:after {
	visibility: hidden;
	display: block;
	content: " ";
	clear: both;
	height: 0;
}
.mx_menu_all{margin-bottom:0px !important;min-width: initial !important;min-width: auto !important;}
.pc_ad_head{text-align:center;}
.banner_bg{margin-bottom:0px !important;}
/*--------------------------------------------------------*/
.span{
	display: inline-block;
}
small {
	line-height: 1.2em;
	font-size: min(2vw, 18px);
	display: block;
	margin-top: 3em;
	text-align: center;
}
body{
	background-image: url(../img/bg_all.png);
	text-align:center;
	font-family: "vdl-v7marugothic", sans-serif;
	font-weight: 600;
	color: #2f3e68;
}
a:link{color:#039bdd; text-decoration:underline;}
a:visited{color:#039bdd; text-decoration:underline;}
a:hover{color:#000; text-decoration:underline;transition-duration: 0.2s;}
#page_all {
	text-align: left;
	word-wrap: break-word;
	line-height: 160%;
	border-bottom: solid 12vw #ffffff;
}
#right_side {
	min-width: 300px;
	padding: 10px 0px 0px 30px;
	align-self: flex-start;
}
/*--------------------------------------------------------*/
/*--パンくず--*/
#pan_box {
	background-color: #0b518c;
	overflow-x: auto;
	overflow-y: hidden;
}
.panlist{
	padding: 8px;
	font-size: 80%;
	line-height: 120%;
	color: #fff;
	text-align:left;
	width: max-content;
}
.panlist a:link{color:#fff; text-decoration:underline;}
.panlist a:visited{color:#fff; text-decoration:underline;}
.panlist a:hover{color:#fff; text-decoration:underline;}
/*--------------------------------------------------------*/
/*--SNS--*/
#sns_button{
	text-align: center;
	margin: 5% 0 0 0;
}
#sns_button img{
	width: 40px !important;
	height: 40px !important;
	margin: 0.5%;
}
/*--------------------------------------------------------*/
/*--フッター--*/
#footer{margin:0 auto;padding:1px 0 10px; padding:1%; line-height:200%;text-align:center;}
.mx_copyright{ color:#09397a; line-height:1.5; }
.mx_copyright a:link,
.mx_copyright a:visited{ color:#09397a; text-decoration:none; }
.mx_copyright a:hover{ color:#ffffff; text-decoration:underline; }
/*-----------------------------------*/
/*-- 緊急テキスト ----------------------*/
#rp_textbox .txt_text{
border: rgb(255 255 255 / 50%) solid 0.25em;
border-radius: 0.5em;
background: rgba(255,255,255,0.6);
margin: 20px auto;
padding: 8px;
line-height: 1.6em;
text-align: left;
max-width: 960px;
width: 90%;
}
#rp_textbox .pop_text{
-webkit-border-radius: 2px;-moz-border-radius: 2px;border-radius: 2px;
border: #c9c9c9 solid 1px;
font-size:0.9em;
line-height:1.5em;
margin:0 auto;
padding:20px;
text-align:left;
max-width: 900px;
word-break: break-all;
width:75%;
}
#rp_textbox .pop_text .popup_title{
border-bottom: #999 dotted 1px;
font-size:1.1em;
line-height:1.5em;
font-weight:bold;
margin:0 0 15px 0;
padding-bottom:5px;
text-align:center;
width:100%;
}
#rp_textbox .eme_img {
display: block;
text-align: center;
width: 100%;
}
#rp_textbox .eme_img img{
margin: 0 auto 10px;
max-width: 100%;
}
#rp_textbox a{
color:#d00;
text-decoration:underline;
}
.txt_title {
border-left: solid 0.5em #333333;
font-weight: bold;
font-size: 1.2em;
text-align: left;
padding: 0.3em;
margin-bottom: 0.5em;
}
#right_side {
float: right;
}
/*-----------------------------------*/
/*google翻訳*/
.skiptranslate.goog-te-gadget,
a.goog-logo-link,.goog-logo-link:link{color:#09397a;text-align:center;}
/*-----------------------------------*/
/* nav */
nav {
	background-color: #0b518c;
	/* background-image: url(../img/bg_nav.png); */
	position: sticky;
	padding: min(3vw, 1em) min(0.1vw, 5%);
	top: 0;
	z-index: 998;
}
	
#box_menu ul li {
	margin-right: 5%;
}
#box_menu ul li:last-child {
	margin-right: 0%;
}
#box_menu ul {
	display: flex;
	width: min(92vw, 870px);
	justify-content: space-between;
	margin: auto;
}
#box_menu img {
	width: 100%;
}
/* index */
#all {
	color: #343434;
	font-size: min(4vw, 1.4em);
	line-height: min(6vw, 1.6em);
}
#title {
	background: url(../img/bg_ttl_pc.jpg) center top / cover no-repeat #fbfaf6;
	padding: min(10vw, 20px) 10px;
}

.logo {
	max-width: 900px;
    margin: auto;
}
#title h1 img {
	display: block;
	margin: 3% auto;
	width: 100%;
}
#title h2 img {
	display: block;
	margin: 3% auto;
	max-width: 100%;
}

#title h2{

}
.box_cmn {
}
#box_guest {
	background: url(../img/bg_blue.png?v1);
	background-size: 60%;
	background-repeat: repeat;
	/* height: min(150vw, 74em); */
	/* overflow: hidden; */
}
.box_1{
	height: min(80vw, 40em) !important;
}
.box_2 {
	height: min(100vw, 50em) !important;
}
#box_spot {
	background: url(../img/bg_blue_2.png);
	background-repeat: repeat;
    background-size: 90%;
}
.box_cmn img{
	width: 100%;
}
.contents {
	margin: auto;
	padding: 5%;
	width: min(78vw, 1200px);
}
#box_guest .contents {
	padding-bottom: 0;
}
.contents h3 {
	/* width: min(50vw, 567px); */
	display: flex;
	justify-content: center;    
    margin: auto;
	/* height: 100px; */
}
.contents h3 img {
	width: 100%;
	height: 95px;
    object-fit: contain;
}
.detail {
	width: min(80vw, 1100px);
	margin: min(5vw, 2em) auto 0;
}
.intro {
	text-align: center;
	display: block;
}
.intro_tx {
	text-align: left;
	display: inline-block;
}
.text_pink {
	color: #ed787a;
}
.text_blue {
	color: #079ed7;
}
.set_oa {
	background-color: #fffade;
	box-shadow: 0.05em 0.1em 0.2em rgba(0, 0, 0, 0.1);
	width: min(80vw, 50%);
	padding: 3%;
	position: relative !important;
	margin-bottom: min(12vw, 5em);
}
.num_oa {
	width: min(15vw, 4em);
	position: absolute;
	top: max(-6vw, -1em);
    left: max(-6vw, -1em);
}
.date_oa {
	text-align: center;
	margin: 0.6em;
	font-size: 1.2em;
	font-weight: bold;
}
.text_oa {
	font-size: 0.9em;
	line-height: 1.4em;
	margin-bottom: 2em;
	text-align: left;
}
.small_tx {
	font-size: 0.8em;
	font-weight: bold;
}
.text_oa_ttl {
	font-size: .9em;
	text-align: center;
}
.num1, .num2, .num3 {
	display: block;
	width: min(30vw, 7em);
	/* position: absolute; */
	margin: auto;
	text-align: bottom;
}
#box_guest .detail {
	display: flex;
	gap: 50px;	
	/* padding: min(12vw, 7em) min(6vw, 3em); */
	/* position: relative; */
	justify-content: center;
}
.detail_oa {
	display: flex;
	gap: 5%;
}
.modaal-content-container .ph_oa {
	min-width: 25em;
	max-width: 1280px;
	width: 50%;
}
.modaal-content-container .text_oa {
	/* margin: 0.6em; */
	font-size: min(3.6vw,.9em);
	line-height: min(6vw, 2em);
	width: 60%;
}
/* .ph_oa img {
	margin-bottom: min(2vw, 1em);
} */
/*-YouTube埋め込みここから-*/
.box_movie {
	position: relative;
	width : 100%;
	margin: min(2vw, 1em) auto;
}
.box_movie:before {
	content:"";
	display: block;
	padding-top: 56%; /* 高さを幅の56%に固定 */
}
.box_movie iframe{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}
/*-YouTube埋め込みここまで-*/
#box_streaming .detail {
	width: auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
#tver, #youtube, #rCh {
	margin-bottom: 2%;
	width: min(48%, 24em);
}
.sns_set {
	display: flex;
	justify-content: space-between;
	width: 80%;
	align-items: center;
	gap: 2%;
}
.tl {
	overflow: auto;
	width: min(90vw, 20em);
	height: 16em;
}
.btn {
	min-width: 16em;
	width: 45%;
}
.btn a{
	display: block;
	margin-bottom: 1em;
}

.logo_spot {
	display: flex;
	gap: min(2.5vw, 1em);
	align-items: flex-end;
	width: 100%;
	justify-content: space-around;
}

.logo_spot a {
	display: block;
	width: calc(100% / 3);
	text-align: center;
}
.logo_spot img {
	margin-bottom: 1%;
}
.present {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 3%;
}
.pre_end {
    position: relative;
    display: block;
}
.pre_end::after {
	background: rgba(0, 0, 0, 0.6);
	position: absolute;
	z-index: 900 !important;
	content: '応募受付は終了しました';
	display: block;
	top: 0;
	left: 0;
	width: 99%;
	height: 55%;
	border-radius: min(3vw, 0.6em);
	margin: min(0.1vw, 0.1em) min(0.2vw, 0.2em) min(0.1vw, 0.1em) min(0.1vw, 0.1em) !important;
	color: #fff;
	text-align: center;
	padding-top: calc(24% - min(8vw, 1.6em)) !important;
	font-size: min(6vw, 1.4em);
}
.Pconly {
	display: block;
}
.Sponly {
	display: none;
}
@media screen and (max-width: 1200px) {
	.text_oa {
		font-size: 1.1em;
		display: block;
	}

	#title{
		padding: min(10vw, 20px) 100px;
	}
	.onlySp{
		display: inline;
	}
	#all {
		font-size: 0.9em;
	}
	#page_all {
		border-bottom: solid 25vw #ffffff;
	}
	#box_guest {
		height: auto !important;
	}
	.contents h3 {
		/* position: relative;
		left: -5vw; */
	}
	#box_guest .detail {
		height: auto;
		top: -3em;
		padding-bottom: 0;
		width: 100%;
		left: -2%;
	}
	.set_num1, .set_num2, .set_num3 {
		top: 1em;
		left: -.5em;
		float: unset;
		width: 100%;
	}
	.set_num1, .set_num3 {
		right: 0;
	}
	.set_num3 {
		transform: rotate(2deg);
	}
	.detail_oa {
		flex-wrap: wrap;
	}
	.modaal-content-container .ph_oa {
		min-width: unset;
		max-width: unset;
		width: 100%;
	}
	.modaal-content-container .text_oa {
		width: auto;
		margin-top: 10%;
	}
	small {
		font-size: min(3.6vw,16px);
	}
	#tver, #youtube, #rCh {
		width: 100% !important;
	}
	.sns_set {
		display: block;
		width: 100%;
	}
	.btn {
		margin-top: 5%;
		width: 100%;
	}
	.tl {
		width: 100%;
	}
	#box_guest .detail {
		display: block;
		}
	.contents h3 img {
		width: 100%;
		height: 50px;
		object-fit: contain;
	}
	#box_guest .contents {
		padding-bottom: 3%;
	}
	.Pconly {
		display: none;
	}
	.Sponly {
		display: block;
	}
}

@media screen and (max-width: 600px) {
	#title{
		padding: min(10vw, 20px) 10px;
	}
	.logo_spot {
		display: block;
		width: 100%;
	}
	.logo_spot a {
		min-width: 100%;
		margin-bottom: 6%;
	}
	.text_oa {
        font-size: 0.9em;
    }
}
/* ----------
各話場面写真
----------- */
:root {
  --overlay-color: rgb(75 86 89/.5);
}
/* ラッパー */
.bl_imgSwitcher {
  /* inline-size: min(100%, 712px); */
  margin-inline: auto;
  /* margin-block: 3rem; */
}
/* メイン画像 */
.bl_imgSwitcher_main img {
  aspect-ratio: 3/2;
  inline-size: 100%;
  object-fit: contain;
  /* border-radius: 20px; */
  transition: opacity .4s cubic-bezier(.25, 1, .5, 1);
}
/* サムネイルのエリア */
.bl_imgSwitcher_thumb {
  display: flex;
  gap: 0 .5rem;
  /* margin-block-start: 2rem; */
  flex-wrap: wrap;
  /* overflow-x: scroll; */
	row-gap: .5rem;
}
/* サムネイルの各ボタン */
.bl_imgSwitcher_btn {
  flex-shrink: 0;
  /* inline-size: 10rem; */
  width: calc((100% - 2.4em) / 5);
  overflow: hidden;
  /* border-radius: 20px; */
  position: relative;
  &::before {
    content: "";
    border-radius: inherit;
    position: absolute;
    inset: 0;
    z-index: 10;
    transition: background-color .4s;
  }
  &:focus-visible::before {
    background-color: var(--overlay-color);
  }
  img {
    aspect-ratio: 1;
    inline-size: 100%;
    object-fit: cover;
  }
}
@media (any-hover: hover) {
  .bl_imgSwitcher_btn:hover::before {
    background-color: var(--overlay-color);
  }
}
/* is_activeクラスが付与されたら、サムネイルに半透明の黒背景を適用 */
.bl_imgSwitcher_btn.is_active::before {
  background-color: var(--overlay-color);
}

/* ---------
コメント
--------- */
.comment {
	
}
.flex_a,
.flex_b {
	display: flex;
	gap: 3%;
	row-gap: 3%;
}

.comment_img {
	flex: 30%;
}
.comment_txbox {
	flex: 70%;
}
.comment_txbox p {
	font-size: min(4vw, .8em);
    line-height: min(6vw, 1.5em);
	font-weight: 600;
}
.comment_txbox h5 {
	font-size: min(5vw, 1.1em);
	font-weight: 600;
	margin-bottom: 3%;
}
.comment h4 {
	margin-bottom: 3%;
	font-weight: 600;
	font-size: 1.2em;
}
.comment_box {
	margin-bottom: 5%;
}
.comment_flex_a_1,
.comment_flex_a_2 {
	flex: 1;
}

@media screen and (max-width: 1500px) {
	.flex_a {
	display: block;
	}
	.comment_img {
	width: 50%;
	}
	.comment_img {
	flex: 15%;
	}
	.comment_txbox {
	flex: 85%;
	}
	.modaal-content-container .text_oa {
	font-size: min(4vw, .8em);
	line-height: min(6vw, 1.9em);
	}
}
@media screen and (max-width: 1200px) {
	.comment_img {
	flex: 20%;
	}
	.comment_txbox {
	flex: 80%;
	}
}
@media screen and (max-width: 600px) {
	.flex_b {
		display: block;
	}
	.comment_img {
		width: 50%;
		margin: 0 auto 3%;
	}
	.comment_txbox h5 {
		text-align: center;
	}
	.comment_box {
    margin-bottom: 10%;
	}
	.num1, .num2, .num3 {
		width: min(30vw, 8em);
	}
	.comment h4 {
    margin-bottom: 10%;
    font-weight: 600;
	}
    .comment_img {
        width: 50%;
		margin: 0 auto 3%;
    }

}