@charset "utf-8";
/*Reset*/
html{margin:0; padding:0; border:0; overflow-y:scroll;}
*{border:0; box-sizing: border-box; margin:0; padding:0;}
body{background: #000;color: #fff;text-align: center;line-height:1; -webkit-text-size-adjust:100%; width:100%;}
h1,h2,h3,h4,h5,h6,p,span,table,a,img,dl,dt,dd,ul,li,ol,iframe,nav,small{
margin:0; padding:0; font-size:100%;font-weight:normal; background:transparent;
vertical-align:baseline; border:none;}
img{vertical-align:top;}
ol, ul{list-style:none; list-style-type:none;}
/*-- Link --*/
a:link{color:#fff; text-decoration:none;}
a:visited{color:#fff; text-decoration:none;}
a:hover{color:#f00; text-decoration:none;}
.onlyPc{display: block;}
.onlySp{display: none;}
main {
display: flex;
}
#left_side {
margin: 0 0 50px !important;
width: 980px;
}
.TAminchogf01Reg{
font-family: ta-mincho-gf-01, sans-serif;
font-weight: 400;
font-style: normal;
}
.TAminchogf02Reg{
font-family: ta-mincho-gf-02, sans-serif;
font-weight: 400;
font-style: normal;
}
.TAminchogf03Reg{
font-family: ta-mincho-gf-03, sans-serif;
font-weight: 400;
font-style: normal;
}
.V7MinM{
font-family: vdl-v7mincho, sans-serif;
font-weight: 500;
font-style: normal;
}
.V7MinB{
font-family: vdl-v7mincho, sans-serif;
font-weight: 700;
font-style: normal;
}
.V7MinEB{
font-family: vdl-v7mincho, sans-serif;
font-weight: 800;
font-style: normal;
}

/*-------------------------*/
#wrapper {
color: #0f1433;
font-family: Arial, Helvetica,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,"sans-serif";
margin: 0 auto;
text-align: left;
width: 1280px;
}
#contents{
line-height: 1.6;
float: left;
width: 960px;
}
.brockL{
width: 100%;
}

/*パンくずリスト----------------------------------*/
nav.panlist{
background: #b9a849;
color: #010101;
padding: 4px 0;
width: 100%;
}
nav.panlist a{
color: #010101;
}
nav.panlist strong{
font-weight:normal;
}
nav.panlist ol {
color: #010101;
display: flex;
white-space: nowrap;
font-size: min(0.7em,2.4vw);
list-style: none;
line-height:1.5;
margin: 0 auto;
padding: 0;
max-width: 1270px;
width: 98%;
}
nav.panlist li + li::before {
content: ">";
margin: 0 0.5em;
}

/*-- title ----------------------*/
#title{
background: url('../img/titleBack.webp') no-repeat ;
height: 810px;
position: relative;
width: 100%;
}
#title #logo {
position: absolute;
right: 40px;
top: 470px;
width: 440px;
}
#title #logo img {
height: auto;
width: 100%;
}
#title .time {
color: #b7aa48;
font-family: vdl-v7mincho, sans-serif;
font-size: 1.8em;
line-height: 1.3;
font-weight: 700;
font-style: normal;
position: absolute;
bottom: 175px;
right: 100px;
text-align: center;
}

/*-- boxEpisode ----------------------*/
#boxEpisode {
background: #111 url("../img/bg_oa.webp") top center / 100%;
color: #fff;
margin: 0 0 60px;
position: relative;
}
#boxEpisode h3{
border-bottom: 2px solid #b9a849;
color: #b9a849;
display: block;
font-size: min(2.4em,6.5vw);
line-height: 1.5em;
padding: 0 2% 0 0;
text-align: right;
}
#boxEpisode #nextSche {
background: #333;
color: #ddd;
height: 35px;
overflow: auto;
position: absolute;
top: 14px;
left: 0px;
padding: 6px 15px 4px;
width: 70%;
z-index: 5;
}
.midashi {
color: #fff;
font-size: min(1.5em,4.5vw);
line-height: 1.5;
margin: 0 auto;
width: 100%;
}
.oadate {
font-size: min(1.4em,4.5vw);
margin: 16px auto 4px;
width: 96%;
}
.btnMv {
background: #383838;
border-radius: 6px;
color: #8d8d8d;
display: block;
font-size: 1.2em;
line-height: 1.5;
padding: 8px 0;
margin: 20px auto 0;
text-align: center;
width: 70%;
}
#nextSche{
background: #333;
color: #ddd;
width: 70%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
}
#guestArea{
margin: 0 auto 50px;
width: 94%;
}
#guestArea .guestIn {
margin: 25px 0;
}
#guestArea .guestIn strong{
font-size: min(1.2em,4.5vw);
line-height: 1.7;
}
.guestBox{
display: flex;
flex-wrap: wrap;
}
.movieBrock{
width: 55%;
}
.movieBrock a{
display: block;
text-decoration: none;
}
.movieBrock a p {
background: #9a1d1d;
border-radius: 6px;
color: #fff;
display: block;
font-size: min(1.2em,3.5vw);
line-height: 1.5em;
padding: 8px 0;
margin: 20px auto 0;
text-align: center;
width: 70%;
}
.movieBrock a:hover{
color: #fff;
opacity: 0.5;
}
.infoBrock {
margin: 0 0 0 5%;
width: 40%;
}
.infoBrock .img {
text-align: center;
}
.infoBrock .img img {
height: auto;
margin: 0 auto;
max-width: 75%;
max-height: 250px;
}
.infoBrock .text{
font-size: min(0.9em,3.5vw);
line-height: 1.2;
padding: 10px 0 0;
}
.textBox {
font-size: min(1.2em, 3.8vw);
margin: 20px auto;
width: 96%;
}
.textBox a {
text-decoration: underline;
}
.movie{
margin: 10px auto;
width: 96%;
}
.movie img{
height: auto;
width: 100%;
}
.guest2,
.guest3{
border-top: 2px solid #666;
padding: 40px 0 0 0;
}

/* --- #boxGuest ------------------------------- */
#boxGuest {
background: #111 url("../img/bg_oa.webp") top center / 100%;
color: #fff;
margin: 0 0 60px;
position: relative;
}
#boxGuest h3{
border-bottom: 2px solid #d05647;
color: #d05647;
display: block;
font-size: 2.4em;
line-height: 1.5em;
padding: 0 2% 0 0;
text-align: right;
}
#boxGuest .grad-btn {
background: #d05647;
}

/* --- #boxOther ------------------------------- */
#boxOther h3 {
border-bottom: 2px solid #26797d;
color: #26797d;
display: block;
font-size: min(2.4em,5.5vw);
line-height: 1.5;
padding: 0 2% 0 0;
text-align: right;
}
#boxOther .grad-btn {
background: #26797d;
}

/* --- #boxCnrAsami ------------------------------- */
#boxCnrAsami{
background: #111 url("../img/bg_asami.webp") top center / 100%;
color: #fff;
margin: 0 0 60px;
position: relative;
}
#boxCnrAsami h3 {
border-bottom: 2px solid #ee509b;
color: #ee509b;
display: block;
font-size: min(2.4em,5.5vw);
line-height: 1.5;
padding: 0 2% 0 0;
text-align: right;
}

#boxCnrAsami .cnrBox {
margin: 20px auto;
overflow: hidden;
width: 95%;
}
#boxCnrAsami .cnrBox img {
float: left;
height: auto;
margin: 0 3% 0 0;
width: 30%;
}
#boxCnrAsami .textBox img {
height: auto;
width: 100%;
}
#boxCnrAsami .textBox img:hover{
opacity: 0.6;
}
#boxCnrAsami .pickup{
margin: 0 auto;
overflow: hidden;
width: 95%;
}
#boxCnrAsami .pickup ul{
display: flex;
flex-wrap: wrap;
margin: 30px auto;
width: 100%;
}
#boxCnrAsami .pickup li{
margin: 0 auto;
width: 48%;
}
#boxCnrAsami .pickup .img{
margin: 0 auto 6px;
width: 100%!important;
}
#boxCnrAsami .pickup .img img{
height: auto;
width: 100%;
}
#boxCnrAsami .pickup .img img:hover{
color: #fff;
opacity: 0.6;
}
#boxCnrAsami .grad-btn {
background: #ee509b;
}
#boxAbout{
color: #fff;
}
#boxCast{
color: #fff;
}
#boxAbout h3,
#boxCast h3{
border-bottom: 2px solid #bca84f;
color: #bca84f;
display: block;
font-size: min(2.4em,5.5vw);
line-height: 1.5;
padding: 0 2% 0 0;
text-align: right;
}

#rightBrock{
display: inline-block;
padding-top: 10px;
text-align: left;
width: 300px;
}
#rightBrock #right_side{
display: inline-block;
padding-top: 0;
text-align: left;
width: 100%!important;
}
#rightBrock #LinkYT,
#rightBrock #LinkPresent{
margin: 20px 0 0 0;
width: 100%;
}
#rightBrock #LinkYT a,
#rightBrock #LinkPresent a{
box-sizing: border-box;
border-radius: 5px;
color: #fff;
display: block;
font-size: min(1.1em,4.5vw);
font-weight: bold;
padding: 18px 15px;
text-align: left;
text-decoration: none;
text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
width: 100%;
}
#rightBrock #LinkYT a {
background: linear-gradient(180deg,rgba(135,0,0,1) 0%,rgba(151,0,0,1) 49%,rgba(194,0,0,1) 50%,rgba(135,0,0,1) 100%);
border: solid 4px #dd9e9e;
}
#rightBrock #LinkPresent a {
background: linear-gradient(    180deg,rgba(109,60,16,1) 0%,rgba(109,60,16,1) 49%,rgba(130,74,24,1) 50%,rgba(109,60,16,1) 100%);
border: solid 4px #ddc99e;
}

/*-- 配信 ----------------------*/
#stream {
margin: 0 auto 50px;
position: absolute;
right: 112px;
top: 660px;
width: 280px;
}
#stream img{
height: auto;
width:100%;
}

/*-- SNS ----------------------*/
#sns_button_pc {
margin: 10px auto;
position: absolute;
right: 5px;
top: 0;
}
#sns_button_pc .btn_sns img{
height: 32px;
width: 32px;
margin: 0 5px;
}
#sns_button_pc .sns{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
height:40px;
margin: 20px auto;
width:30%;
}
#sns_button_pc .sns a{
display:block;
margin:0 !important;
height:40px;
width:40px;
}
#sns_button_pc .sns img{
width:40px;
height:40px;
margin:0;
}


.boxEpisode{
width: 100%;
}
.movieBrock img {
height: auto;
width: 100%;
}
.log {
margin: 0px auto;
width: 100%;
}
.log ul {
display: flex;
flex-wrap: wrap;
margin: 30px auto;
padding: 0 2%;
width: 100%;
}
.log ul li {
font-size: 0.9em;
line-height: 1.3;
margin: 0 1% 12px;
width: 23%;
}
.log ul li a {
color: #eee;
line-height: 0.8rem!important;
}
.log ul li img {
height: auto;
margin: 0 0 8px;
width: 100%;
}
.grad-item {
position: relative;
overflow: hidden;
height: 360px;
}
.grad-item::before {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background: -webkit-linear-gradient(top, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 90%) 50%, rgb(0 0 0 / 90%) 50%, #000 100%);
background: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.9) 50%, rgba(0,0,0,0.9) 50%, #000 100%);
content: "";
}
.grad-wrap {
position: relative;
}
.grad-btn {
background: #b0921b;
border-radius: 10px;
box-shadow: 0 0 3px rgb(0 0 0 / 30%);
cursor: pointer;
color: #fff;
font-size: 1.2rem;
margin: auto;
padding: 0.5em 0;
text-align: center;
transition: .2s ease;
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: 20%;
z-index: 2;
}
.grad-btn::before {
content: "もっとみる"
}
.grad-trigger {
display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked + .grad-btn::before {
display: none; 
}
.grad-trigger:checked ~ .grad-item {
height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ .grad-item::before {
display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

/* 動画囲いタグ ----------------------　<div class="video-container"></div> */
.video-container {
padding: 56.25% 0 0;
position: relative;
width: 100%;
}
.video-container iframe{
height: 100% !important;
position: absolute;
right: 0;
top: 0;
width: 100% !important;
}


/*-- ローディング ----------------------*/
#loader{background-color:#000; position:fixed;width:100%;height:100%;z-index: 100;}/*背景*/
.loader,.loader:before,.loader:after {
background: #aaa;
-webkit-animation: load1 1s infinite ease-in-out;
animation: load1 1s infinite ease-in-out;
height: 4em;
width: 1em;
top: 50%;
}
.loader {
color: #ccc;
text-indent: -9999em;
margin: auto;
position: relative;
font-size: 11px;
-webkit-transform: translateZ(0);-ms-transform: translateZ(0);transform: translateZ(0);
-webkit-animation-delay: -0.16s;animation-delay: -0.16s;
position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
}
.loader:before,.loader:after {
position: absolute;
top: 0;
content: '';
}
.loader:before {
left: -1.5em;
-webkit-animation-delay: -0.32s;animation-delay: -0.32s;
}
.loader:after {
left: 1.5em;
}
@-webkit-keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
	}
	@keyframes load1 {
	0%,80%,100% {
	box-shadow: 0 0;
	height: 4em;
	}
	40% {
	box-shadow: 0 -2em;
	height: 5em;
	}
}
/*--------------------------------------------------------*/
#uraPc{
display: block;
margin: 20px 0 0;
width: 100%;
}
#uraPc img{
height: auto;
width: 100%;
}


/* SP  -------------------------------------------------- */
@media screen and (max-width:640px) {/* 640pxまで */
	.onlyPc{display: none;}
	.onlySp{display: block;}
	#wrapper {
	color: #eee;
	width: 100%;
	}
	main{
	display: block;
	}
	#left_side{
	width: 100%;
	}
	#contents{
	width: 100%;
	}
	/*-- title ----------------------*/
	#title {
	background: unset;
	height: unset;
	position: unset;
	margin: 0 0 20px;
	}
	#title img {
    height: auto;
    width: 100%;
	}
	#title .time {
	display: none;
	}
	#stream {
	margin: 3% auto 0;
	position: unset;
	max-width: 70%;
	}

	#boxEpisode h3 {
	font-size: 6.5vw;
	line-height: 1.5em;
	padding: 0 8px 0 0;
	text-align: right;
	}
	#boxEpisode #nextSche {
	font-size: 3vw;
	text-align: left;
	padding: 2%;
	position: unset;
	width: 100%;
	}
	.oadate {
	margin: 16px auto 0px;
	}
	.btnMv {
	font-size: 3.5vw;
	}

	.guestBox{
	display: block;
	margin: 0 auto 20px;
	width: 94%;
	}
	.movieBrock{
	width: 100%;
	}
/*	.movieBrock a p {
	font-size: 3.5vw;
	}*/
	.infoBrock {
	margin: 40px auto;
	width: 100%;
	}
/*	.textBox {
	font-size: 3.8vw;
	}*/
	/* --- #boxGuest ------------------------------- */
	#boxGuest h3{
	font-size: 5.5vw;
	padding: 0 8px 0 0;
	}

	/* --- #boxOther ------------------------------- */
	#boxOther {
	background: #111 url("../img/bg_oa.webp") top center / 100%;
	color: #fff;
	margin: 0 0 60px;
	position: relative;
	}
	#boxOther h3{
	padding: 0 8px 0 0;
	}
	/* --- #boxCnrAsami ------------------------------- */
	#boxCnrAsami h3 {
	padding: 0 8px 0 0;
	}
	#boxCnrAsami .cnrBox {
	line-height: 1.5em;
	}
	#boxCnrAsami .cnrBox strong{
	font-size: 3.5vw;
	}
	#boxCnrAsami .cnrBox .text{
	line-height: 1.5!important;
	}
	#boxCnrAsami .cnrBox .log ul li a{
	line-height: 1.5!important;
	text-decoration: underline;
	}
	#boxAbout h3,
	#boxCast h3{
	padding: 0 8px 0 0;
	}

	#rightBrock{
	/*max-width: 300px;*/
	width: 100%;
	}
	#rightBrock #LinkYT,
	#rightBrock #LinkPresent{
	margin: 20px auto;
	width: 95%;
	}

	/*-- SNS -----------------------*/
	#sns_button_sp {
	padding: 0 0 25px;
	text-align: center;
	}
	#sns_button_sp .btn_sns{
	margin: 0 10px;
	}
	#sns_button_sp .btn_sns img{
	height: 50px;
	width: 50px;
	}
	/*-- SNS -----------------------*/
	.log ul li {
	font-size: unset;
	margin: 0 1% 3%;
	width: 31%;
	}
	.grad-btn {
	padding: 2.4vw 0;
	width: 40%;
	max-width: 50%;
	}
	#uraSp{
	display: block;
	margin: 0 auto 40px;
	text-align: center;
	width: 90%;
	}
	#uraSp img{
    height: auto;
    margin: 0 auto;
    max-width: 470px;
    width: 100%;
	}
	#uraPc{display: none;}

}