@charset "UTF-8";
/* CSS Document */
*{ box-sizing: border-box; }
html{ font-size: 62.5%; /* 10px */ }

.commonHeader__drawerContent{
	text-align: left;
}
.zen-maru-gothic-regular {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 400;
	font-style: normal;
}
.zen-maru-gothic-bold {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.blue{ color: #0071bc; }
.red{ color: #ff7d82; }
.f120{ font-size: 110%; }

/* html:after{
	width: 10px;
	top: 0;
	right: 0;
	bottom: 0;
	content: "";
	background: #8cc63f;
	position: fixed;
	display: block;
	z-index: 5;
}
html:before{
	height: 10px;
	left: 0;
	right: 0;
	top: 0;
	content: "";
	background: #ec8a15;
	position: fixed;
	display: block;
	z-index: 5;
}
body:after{
	width: 10px;
	top: 0;
	bottom: 0;
	left: 0;
	content: "";
	background: #0271bd;
	position: fixed;
	display: block;
	z-index: 9999;
}
	body:before{
	height: 10px;
	right: 0;
	bottom: 0;
	left: 0;
	content: "";
	background: #da362d;
	position: fixed;
	display: block;
	z-index: 5;
} */

body{
	font-family: "Zen Maru Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1.6;
	min-width: 320px;
	margin: 0;
	color: #333;
	/* background-image: url(../img/bg01.webp);
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed; */
	/* position: sticky;		 */
}
img{
	-webkit-touch-callout:none;
	-webkit-user-select:none;
	-moz-touch-callout:none;
	-moz-user-select:none;
	user-select:none;
}

.sp{ display: block; }
.pc{ display: none; }

h1,h2,h3,h4,h5,h6{
	font-size: 100%;
	font-weight: normal;
	padding: 0; margin: 0;
}
ul,li,ol{
	list-style: none outside none;
	margin: 0;
	padding: 0;
}
em{ font-style: normal; }
dl{ margin: 0; padding: 0; }
p{ margin: 0; padding: 0; }
img{ max-width: 100%; vertical-align: top; transition: 0.5s; }

a{ color: #333; text-decoration: none; }
/*a:visited{ color: #4900c1; text-decoration: none; }*/
a:hover, a:active, a:focus{ color: #000; text-decoration: none; transition: 0.5s; }
a:hover img, a:active img, a:focus img{ opacity: 0.8; filter: alpha(opacity=80); transition: 0.5s; }



div#wrap{}
div#ctv_tab{}

	div#container{
		width: 100%;
		margin: 0 auto;
		padding: 0;
	}
	.contents{
		padding-top: 20px;
	}
	header{
		width: 100%;
		margin: 0 auto;
		text-align: left;
	}

/* フッター */
footer{
/*
	background:#e62e8b;
	padding:1em 0 2em 0;
*/
}
footer div{
}

footer p{
	clear:both;
	color:#fff;
	margin:0 auto;
	padding:1%;
	font-size: 12px;
}
.copyright a,
.copyright .attention{
	display: block;
	color: #000000;
	text-decoration: none;
	padding-bottom: 10px;
}

#pageTopBar{
	display: block;
	background: #56acea;
}
#pageTopBar a{
	display: block;
	width: 100%;
	padding: 2rem 0;
	color: #fff;
	font-family: 'Poppins', sans-serif;
	font-size: 2.0rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.5rem;
}

#main{}
#nav .api-nav-main div a:hover{
	color: #E40003;
}

.iflame-wrap{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.iflame-wrap iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}

/* 右下 見逃しバナー =================================== */
.appear{
	opacity: 0;
	transition: .5s;
}
.fix_contents{
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 100;
}
.delivery_bnr_close{
	position: absolute;
	top: -1.8rem;
	left: -1.8rem;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.8);
	background: #4c96d4de;
	
	z-index: 1;
}
.delivery_bnr_close::after{
	content: "×";
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	font-family: "Share Tech Mono", monospace;
	font-weight: bold;
	font-size: 2em;
	font-size: 1.4em;
	transform: translate(-50%, -50%);
	color: #fff;
	cursor: pointer;
}
.delivery_bnr{
	margin-bottom: 3rem;
	margin-right: 1rem;
}

/* Chrome、Safari以外 */
summary{
	display: block;
}

/* Chrome、Safari */
summary::-webkit-details-marker{
	display: none;
}

.youtube iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.youtube{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0 auto;
}

/* .js-tver-embed{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
*/


/* -------------------------------------------------------------------------------------------------------------------
Tablet&SP																																																				
------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width: 959px){
	.pc{ 
		display: none;
	}
	.sp{
		display: block;
	}

	.copyright a, .copyright .attention{
		display: block;
		color: #000000;
		text-decoration: none;
		padding-bottom: 10px;
		font-size: 1rem;
	}

	/* ios用
	=================================== */
	#wrap{
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		/* clip-path: inset(0); */
		/* width: 100%;
		margin: 100%; */
	}
	#wrap:before{
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:-1;
		width:100%;
		height:100vh;
		background-image: url(../img/bg01.webp);
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		mix-blend-mode: soft-light;
	}
/* *,
*::before,
*::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	word-break: break-all;
	overflow-wrap: break-word;
	line-break: strict;
	font-family: sans-serif;
} */

	.fas img{
		width: 80px;
		margin-top: -45px;
	}
	.fix_contents{
		width: 26%;
	}

	#main{
		width: 100%;
		margin: 0 auto;
	}
	.logo{
		width: 88%;
		margin: 12px auto 0;
	}
	#about{
		width: 100%;
		margin: 0 auto;
		margin-top: 5%;
	}
	.ttl{
		width: 40%;
		margin: 0 auto;
	}
	.about_text{
		background-color: #ffffff9e;
		background-image: url(../img/note.webp);
		background-size: 377px;
		background-position: center top;
		background-repeat: repeat;
		border-radius: 16px;
		padding: 24px 0 16px;
		padding: 48px 0 16px;
		margin: -32px auto 0;
		width: 94%;
	}
	.about_text_info{
		padding: 16px 16px;
	}
		.about_text_info img{
			width: 88%;
		}
	.photo,
	.photo2,
	.photo01,
	.photo02{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.photo img,
	.photo2 img,
	.photo01 img,
	.photo02 img{
		width: 50%;
		padding: 4px;
		background: #FFF;
		border: 1px solid #CCC;
		filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
	}
	.photo img{
		width: 65%;
		margin-bottom: 0.5em;
	}
		.photo2 img:first-child{
			transform: rotate(-5deg);
		}
		.photo2 img:nth-child(2){
			transform: rotate(3deg);
		}

	.photo01{
		margin-bottom: 4px;
	}
	.photo02{
		margin-top: 4px;
	}
	.photo01 img,
	.photo02 img{
		width: 50%;
		padding: 4px;
		background: #FFF;
		border: 1px solid #CCC;
		filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
	}
		.photo01 img:first-child{
			transform: rotate(-5deg);
		}
		.photo01 img:nth-child(2){
			transform: rotate(3deg);
		}
		.photo01 img:nth-child(3){
			width: 60%;
			transform: rotate(-2deg);
		}
		.photo02 img:first-child{
			transform: rotate(-4deg);
		}
		.photo02 img:nth-child(2){
			transform: rotate(5deg);
		}
		.photo02 img:nth-child(3){
			width: 60%;
			transform: rotate(1deg);
		}

	#time{
		font-size: 2.2rem;
		font-weight: bold;
		color: #fff;
        background-color: #ff7e837d;
		border-radius: 50px;
		width: 88%;
		max-width: 720px;
		padding: 8px 0;
		margin: 16px auto;
		line-height: 2.4rem;
	}
	#time span{
		font-size: 1.64rem;
	}

	#cast{
		width: 55%;
		margin: 0 auto;
		margin-top: 5%;
	}

	#tver{
		width: 90%;
		margin: 0 auto;
		border: solid 1px #4c96d4;
		border-radius: 16px;
		overflow: hidden;
		margin-top: 5%;
	}
	#tver .ttl{
		width: 100%;
		background-color: #4c96d4;
		color: #fff;
		padding: 10px 0;
		font-size: 1.5rem;
	}
	#tver .info{
		background-color: #fff;
	}
	#tver .info a.none{
		pointer-events: none;
		opacity: 0.35;
	}
	#tver .info img{
		width: 60%;
		margin: 5% 0;
		border: 1px solid #DDD;
	}

	#form{
		width: 90%;
		margin: 0 auto;
		margin-top: 10%;
		margin-bottom: 10%;
	}
	#banner{
		width: 60%;
		max-width: 320px;
		margin: 0 auto;
		margin-bottom: 5%;
	}
	.top_form{
		width: 70%;
		margin: 0 auto;
		margin-bottom: 20px;
	}
		.bnr-form{
			border: 2px solid #56a2fc;
			border-radius: 16px;
			filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
		}
}


/* -------------------------------------------------------------------------------------------------------------------
961px-																																																					 
------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 960px){
	.pc{
		display: block;
	}
	.sp{
		display: none;
	}
	
	.f-small{
		font-size: 1.4rem;
	}
	
	.f-middle{
		font-size: 1.6rem;
	}

	/* ios用
	=================================== */
	#wrap:before{
		content:"";
		display:block;
		position:fixed;
		top:0;
		left:0;
		z-index:-1;
		width:100%;
		height:100vh;
		background-image: url(../img/bg01.webp);
		background-size: cover;
		background-position: center top;
		background-repeat: no-repeat;
		mix-blend-mode: soft-light;
	}
	#wrap{
		max-width: 100%; 
		margin-left: auto; 
		margin-right: auto; 
	}


/* フッター =================================== */
	#pageTopBar{
		margin-top: 50px;
		padding-top: 10px;
	}
	.fas img{
		width: 150px;
		margin-top: -100px;
	}
	.fix_contents{
		width: 13%;
	}



	#main{
		width: 60%;
		margin: 0 auto;
		/* display: flex;
		align-items: center; */
		margin-top: 20px;
	}
	.logo{
		width: 720px;
		margin: 0 auto;
	}
	#about{
		width: 1000px;
		margin: 0 auto;
		margin-top: 64px;
	}
	.ttl{
		width: 220px;
		margin: 0 auto;
		z-index: 2;
	}
	.about_text{
		background-color: #ffffff6b;
		background-image: url(../img/note.webp);
		background-size: 970px;
		background-position: center top;
		background-repeat: repeat;
		border-radius: 16px;
		padding: 16px 0;
		padding: 64px 0 16px;
		margin: -36px auto 0;
	}
	.about_text_info{
		padding: 32px 32px;
	}
		.about_text_info img{
			width: 80%;
		}

	.photo,
	.photo2,
	.photo01,
	.photo02{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.photo img,
	.photo2 img,
	.photo01 img,
	.photo02 img{
		width: 50%;
		padding: 10px;
		background: #FFF;
		border: 1px solid #CCC;
		filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.25));
	}
	.photo img{
		width: 60%;
		margin-bottom: 2em;
	}
		.photo2 img:first-child{
			transform: rotate(-5deg);
		}
		.photo2 img:nth-child(2){
			transform: rotate(3deg);
		}

	.photo01{
		margin-bottom: 4px;
	}
	.photo02{
		margin-top: 12px;
	}
	.photo01 img,
	.photo02 img{
		width: 36%;
		margin: 0 7%;
		padding: 4px;
		background: #FFF;
		border: 1px solid #CCC;
		filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
	}
		.photo01 img:first-child{
			transform: rotate(-5deg);
		}
		.photo01 img:nth-child(2){
			transform: rotate(3deg);
		}
		.photo01 img:nth-child(3){
			margin-top: -24px;
			width: 46%;
			transform: rotate(-1deg);
		}
		.photo02 img:first-child{
			transform: rotate(-4deg);
		}
		.photo02 img:nth-child(2){
			transform: rotate(5deg);
		}
		.photo02 img:nth-child(3){
			margin-top: -16px;
			width: 46%;
			transform: rotate(1deg);
		}

	#time{
		font-size: 4.6rem;
		font-weight: bold;
        background-color: #ff7e837d;
		border-radius: 50px;
		color: #fff;
		padding: 2px 0 8px;
		margin: 24px auto 32px;
		width: 720px;
	}
	#time span{
		font-size: 2.8rem;
	}

	#cast_delivery_flex{
		display: flex;
		flex-wrap: nowrap;
		align-items: flex-start;
		justify-content: space-evenly;
		width: 1000px;
		margin: 0 auto;
		margin-top: 5%;
	}
	#cast{
		width: 400px;
	}

	#tver{
		width: 640px;
		border: solid 4px #4c96d4;;
		border-radius: 16px;
		overflow: hidden;
		margin-top: 10px;
	}
	#tver .ttl{
		width: 100%;
		background-color: #4c96d4;
		color: #fff;
		padding: 10px 0;
		font-size: 2rem;
	}
	#tver .info{
		background-color: #fff;
	}
	#tver .info a.none{
		pointer-events: none;
		opacity: 0.35;
	}
	#tver .info img{
		width: 60%;
		margin: 5% 0;
		border: 1px solid #DDD;
	}
	#form{
		width: 50%;
		margin: 0 auto;
		margin-top: 5%;
		margin-bottom: 5%;
	}
	#banner{
		width: 460px;
		margin: 0 auto;
		margin-bottom: 5%;
	}

	.top_form{
		width: 460px;
		margin: 0 auto;
	}
		.bnr-form{
			border: 2px solid #56a2fc;
			border-radius: 16px;
			filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.25));
		}

}