/*	mainArea
============================== */
#page-top{
    font-family: zen-kaku-gothic-antique, sans-serif;
font-style: normal;
font-weight: 500;
	overflow:hidden;
	color: #000;
	background-color:#fff;
}
header {background-color:#fff;}
#topContents{
	background-repeat: no-repeat;
}
#tbsfreeArea { margin: 0 auto;}
#tbsfreeBlock {position: relative; z-index: 1;}

#poster {background-color: #fff;}
#mainArea{width:100%; height:0; padding-top: -webkit-calc(810 / 1080 * 100%); padding-top: calc(810 / 1080 * 100%); margin:0 auto; position:relative; }
#mainArea .main1{background-image: url(../img/main.jpg?1); background-size:cover; width:100%; height:0; padding-top: -webkit-calc(810 / 1080 * 100%); padding-top: calc(810 / 1080 * 100%); position:absolute; top:0; left:0;
animation: fadein 2.5s ease 0s 1 normal;
-webkit-animation: fadein 2.5s ease 0s 1 normal;}

#mainArea .main1 img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

@keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
@-webkit-keyframes fadein {
    0% {opacity:0;}
    100% {opacity:1;}
}
#schedule { background-color: #FF1F1F ; background-repeat:no-repeat; color: #fff; text-align: center;}
#schedule p { margin: 0 auto; background-position: center center; background-repeat:no-repeat; background-size: contain; background-image:  url(../img/schedule.png); text-indent: -9999px;}

@media all and (min-width: 992px) {
header .inner { 
	max-width: 1080px;
    margin: 0 auto;
}
	#schedule { background-position: center center; background-size: contain; background-image: url(../img/bg_schedule_pc.png); height: 80px;}
	#schedule p {width: 510px; height: 80px;}
}

@media all and (max-width: 991.98px) {
	#schedule { background-position: right center; background-size: contain; background-image: url(../img/bg_schedule_sp.png); height: 40px;}
	#schedule p {width: 100%; height: 40px;}
}


#trailer h2, #about h2, #member h2, #contents h2, #topics h2, #caststaff h2 {position: relative; display: block; width:100%;
font-family: itc-avant-garde-gothic-pro, sans-serif;
font-weight: 600;
font-style: normal;
color:#000; 
}

p.button { padding-top: 1em;}
p.button a{
    text-align: center;
    margin: 0 auto;
	padding:0;
	font-family: zen-kaku-gothic-antique, sans-serif;
	font-style: normal;
	font-weight: 900;
	color: #000;
	font-size: 1.5em;
	transition:0.5s;
	background-image:  url(../img/icon_arrow.png);
	background-repeat: no-repeat;
	background-position:left center;
	background-size: 30px 30px;
	display: table;
}
p.button a:hover {
filter: brightness(1.1);
}
p.button a span {vertical-align: middle;display: table-cell; line-height: 1.0em;

min-height: 30px;}


@media all and (min-width: 992px) {
	#topContents { padding:25px 0 0; background-position: center top; background-repeat:no-repeat; background-size: auto; background-image:  url(../img/bg_topcontents_pc.png);}
	#trailer, #about, #topics { margin-bottom: 100px;}
	section .titArea { width: 95%; max-width: 840px; margin: 0 auto 40px;}
	#trailer h2, #about h2, #member h2, #contents h2, #topics h2, #caststaff h2{font-size: 3.3em; padding-left: 15px; border-left: solid 20px #FF1F1F;}
	p.button a {}
	p.button a span {padding: 10px 0 10px 40px;}
}
@media all and (max-width: 991.98px) {
	#topContents { padding:25px 0 0; background-position: right top; background-repeat:no-repeat; background-size: contain; background-image:  url(../img/bg_topcontents_sp.png);}
	#trailer, #about, #topics { margin-bottom: 50px;}
	section .titArea { width: 100%; margin: 0 0 25px;}
	#trailer h2, #about h2, #member h2, #contents h2, #topics h2, #caststaff h2{font-size: 2.2em; padding-left: 10px; border-left: solid 15px #FF1F1F;}
	p.button a { font-size: 1.2em;}
	p.button a span {padding: 10px 0 10px 40px;}
}

/*	trailer
============================== */
#trailer{background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 40%, rgba(207,255,255,1.00) 40%, rgba(207,255,255,1.00) 100%);}
#trailer h3 {line-height: 1.0em;
	position: relative;
	display: inline-block;
	padding: 0 0 0 40px;}
#trailer h3:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 30px;
  height: 3px;
  background-color: #000;
	left:0;
}
.Ename {font-family: itc-avant-garde-gothic-pro, sans-serif;
font-weight: 600;
font-style: normal;
}

@media all and (min-width: 992px) {
	#trailer { padding : 50px 0 100px;}
	#trailerBox { padding-bottom: 3em;}
	#trailer h3 { font-size: 2em; margin-bottom: 0.5em; padding: 0 0 0 40px;}
	#trailer h3:before {width: 30px;}
}
@media all and (max-width: 991.98px) {
	#trailer { padding : 20px 0 50px;}
	#trailerBox { padding-bottom: 2em;}
	#trailer h3 { font-size: 1.5em; margin-bottom: 0.3em; padding: 0 0 0 30px;}
	#trailer h3:before {width: 20px;}
}

/*	about
============================== */
#about{ background-color: #FFEEEB;}
#about .read { text-align: center;}
#about .read:not(:last-child) {background-position:center bottom 30px; background-repeat: no-repeat; background-size: 37px 36px; background-image: url(../img/img_star.png);}


@media all and (min-width: 992px) {
	#about { padding : 50px 0 100px;
	 background-position:center bottom; background-repeat: no-repeat; background-size: 1170px 410px; background-image: url(../img/bg_about_pc.png);}
	#about .read:not(:last-child) {padding-bottom: 100px;}
	#about .read p{font-size: 1.2em; line-height: 1.8em;}
	#about .read p:not(:last-child) {padding-bottom: 2em}
}
@media all and (max-width: 991.98px) {
	#about { padding : 20px 0 100px;
	 background-position:right bottom; background-repeat: no-repeat; background-size: 390px 300px; background-image: url(../img/bg_about_sp.png);}
	#about .read:not(:last-child) {padding-bottom: 100px;}
	#about .read p{font-size: 1.1em; line-height: 1.6em;}
	#about .read p:not(:last-child) {padding-bottom: 1.5em}
}







/*	contents
============================== */
#contents{ background-color: #CFFFFF;}
#contents .titArea p.subTit {font-weight: 900;}
#contents .thumbArea { width: 100%;}
#contents .thumbArea .ph_cut span {padding-top: -webkit-calc(563 / 1000 * 100%); padding-top: calc(563 / 1000 * 100%);}
#contents .read { text-align: center; font-weight: 700;}
#contents .read p:not(:last-child) { padding-bottom: 0.5em;}
#contents ul li a, #contents ul li a span, #contents ul li span.soon {
	display:block;
}
#contents ul li a, #contents ul li span.soon {
	position:relative;
	height:0;
	padding-top: -webkit-calc(94 / 405 * 100%);
	padding-top: calc(94 / 405 * 100%);
	background-color: #fff;
	display: block;
}
#contents ul li a {box-shadow: 5px 5px #01DBDC;}
#contents ul li a span, #contents ul li span.soon span {
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	white-space:nowrap;overflow:hidden;
	text-indent:-9999px;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center center;
}
#contents li.tver a span, #contents li.tver span.soon span {background-image: url(../img/bnr_tver.png?2);}
#contents li.youtube a span, #contents li.youtube span.soon span {background-image: url(../img/bnr_youtube.png?2);}
#contents li a:hover { filter: brightness(1.1); /* 明るくする */}

#contents li span.soon { box-shadow: 5px 5px rgba(1,219,220,0.4);}
#contents li span.soon span {opacity:0.4;}



@media all and (min-width: 992px) {
	#contentsBlock {background-position: center bottom; background-repeat:repeat-x; background-size: auto; background-image:  url(../img/bg_contents_pc.png); padding-bottom: 150px;}
	#contents { padding : 50px 0 100px;}
	#contents .titArea {
	display: table;}
	#contents h2, #contents .titArea p {display: table-cell; vertical-align: middle;}
	#contents h2 {width:265px;}
	#contents .titArea p.subTit {width: 510px; font-size: 1.4em; font-weight: 900;}
	#contents .read { padding: 25px 0;}
	#contents .read p{font-size: 1.3em; line-height: 1.8em;}

#contents ul {
	width: 100%;
	margin:0 auto 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
#contents ul li {
	width:calc((100% - 25px)/2);
}
	#contents ul li:not(:last-child) {margin-right: 25px;}
}
@media all and (max-width: 991.98px) {
	#contentsBlock {background-position: right bottom; background-repeat:no-repeat; background-size: contain; background-image:  url(../img/bg_contents_sp.png); padding-bottom: 90px;}
	#contents { padding : 20px 0 20px;}
	#contents .titArea {margin-bottom: 25px;}
	#contents h2 {margin-bottom: 10px;}
	#contents .titArea p.subTit { font-size: 1.2em; padding-left: 20px;}
	#contents .read { padding: 20px 0;}
	#contents .read p{font-size: 1.0em; line-height: 1.4em;}

#contents ul {
	margin-bottom:10px;
}
#contents ul li {
	margin:0 auto 15px;
}
#contents ul li {
	width:100%;
}

}




/*	topicsArea
============================== */
#topics {
	position: relative; background-color: #FFF6D9;
}

.slider-unit div.outer ul.inner li { position: relative;}

	p.tolist a{
	display: block;
	transition:0.5s;
}
p.tolist a span {background-image: url(../img/t_topics_arrow_r.png);
	background-repeat:no-repeat;
	background-position: right center;
	background-size: 12px 20px;
	color: #000;
	font-family: zen-kaku-gothic-antique, sans-serif;
	font-style: normal;
	font-weight: 900;
	display: block;
	font-size:1.3em; padding: 15px 20px 15px 0;}
p.tolist a:hover {
filter: brightness(1.1);
}
p.tolist { position: absolute; top:75px; right: 0;}

#topics div.topixBox { margin: 0 auto;}
#topics div.topixBox a {
    text-decoration: none;
    color: #000;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
	display: block;
}
#topics div.topixBox a span.title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    flex-grow: 1;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.25em;
}
#topics div.topixBox a span.date {
    line-height: 1.3;
    margin-bottom: 0.5em;
    color: #000;
	display: block;
}
#topics div.topixBox .ph_cut span {
    height: 0;
    padding-top: -webkit-calc(563 / 750 * 100%); padding-top: calc(563 / 750 * 100%);
    position: relative;
	display: block;
	background-size: cover;
  }


@media all and (min-width: 992px) {
	#topics { padding : 60px 0 50px;}
	#topics .wrap { width: 960px; max-width: 960px; position: relative;}
	p.tolist { position: absolute; top:55px; right: 10px;}
	
	#topics div.topixBox {
        max-width: 400px;
        width: 400px;
        min-width: 400px;
    }
	#topics div.topixBox a {
        padding: 15px;
    }
	#topics div.topixBox a .ph_cut {
        margin-bottom: 16px;
    }
	#topics div.topixBox a span.title {
        font-size: 1.0em;
    }
	#topics div.topixBox a span.date {
        font-size: 0.9em;
    }
}
@media all and (max-width: 991.98px) {
	#topics { padding : 35px 0 30px;}
	#topics .wrap { width: 100%;}
	p.tolist { position: absolute; top:55px; right: 10px;}
	p.tolist a span {font-size:1.1em; background-size: 10px 17px;}
	
	#topics div.topixBox {
        max-width: 300px;
        width: 300px;
        min-width: 300px;
    }
	#topics div.topixBox a {
        padding: 10px;
    }
	    #topics div.topixBox a .ph_cut {
        margin-bottom: 8px;
    }
	#topics div.topixBox a span.title {
        font-size: 0.9em;
    }
	    #topics div.topixBox a span.date {
        font-size: 0.8em;
    }
	
}

/*	cast staff
============================== */
#caststaff {}
#caststaff #cast, #caststaff #staff { position: relative;}
#caststaff #cast { background-repeat: no-repeat;  background-image: url(../img/img_star.png);}
#caststaff #cast h3, #caststaff #staff h3 { position: absolute; top:0; left: 0;}
#caststaff #cast h3, #caststaff #staff h3 {
	display: block;
	text-indent:-9999px;
    background-size: contain;
    background-repeat: no-repeat;
	background-position: center center;
	}
#caststaff #cast h3 {background-image: url(../img/h3_cast.png);}
#caststaff #staff h3 {background-image: url(../img/h3_staff.png);}

#caststaff table {
 border-collapse:collapse;
 border-spacing:0;
 margin: 0 auto;
 letter-spacing: 0.05em;
	-moz-font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-feature-settings: "palt";
}

#caststaff table th, #caststaff table td {
	display:block;
	text-align:center;
	font-weight: 900;
	vertical-align: baseline;
	line-height: 1.5em;
padding-bottom: 0.4em;}


#cast table th {
 color: #FF1F1F;
}
#staff table th {
 color: #009697;
}
.person { display: block; line-height: 1.2em; padding-bottom: 0.5em;}
.person:last-child { padding-bottom: 0;}

@media all and (min-width: 992px) {
	#caststaffArea {background-image: linear-gradient(0deg, #f2f3c9 10%, #dcebe6 50%);}
	#caststaff { padding : 50px 0 700px; background-position:center bottom; background-repeat: no-repeat; background-size:auto; background-image: url(../img/bg_caststaff_pc.jpg?1);}
	#caststaff #cast { padding-bottom: 140px; background-position:center bottom 50px; background-size: 55px 54px;}
	#caststaff #cast h3, #caststaff #staff h3 { width: 110px; height: 303px;}
	#caststaff table  {font-size:1.5em;}
	#caststaff table th, #caststaff table td { line-height: 2.0em; }


}
@media all and (max-width: 991.98px) {
	section#caststaff .titArea {margin: 0 0 50px;}
	#caststaff { padding : 20px 0 100%; background-color: #DCEBE6; background-position:center bottom; background-repeat: no-repeat; background-size: contain; background-image: url(../img/bg_caststaff_sp.jpg?1);}
	#caststaff div.wrap { width: 100%;}
	#caststaff #cast { padding-bottom: 120px; background-position:center bottom 50px; background-size: 37px 36px;}
	#caststaff #cast h3, #caststaff #staff h3 {width: 80px; height: 220px;}
	#caststaff table {font-size:1.2em;}	
	#caststaff table th, #caststaff table td { line-height: 2.0em;}
 
}




/*	YouTube
============================== */
div.mov-inner {
	position:relative;
	height:0;
	padding-top:56.25%;
	background-color:#000;
	background-size:cover;
}
div.mov-inner iframe {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
}
@media all and (min-width: 992px) {
div.mov-outer {
	padding:0 30px;
	margin:0 auto 80px;
	max-width:980px;
}
}
@media all and (max-width: 991.98px) {
div.mov-outer {
	padding:0 3.125vw;
}
}


@media all and (min-width: 992px) {
div.yt-player {
	padding:0 0px;
	margin:0 auto;
	max-width:900px;
}
}
@media all and (max-width: 991.98px) {
div.yt-player {
	padding:0;
}
}


/*	.slider-pics
============================== */
.slider-pics {
	text-align:left; background-color: #fff;
}
.slider-pics .outer {
	position:relative;
	overflow-x: hidden;
}
.slider-pics .outer ul {
	display: flex;
	flex-wrap: nowrap;
	/**/
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	/**/
	width:fit-content;
}
.slider-pics.slider-off .outer ul {
	justify-content: center;
	width:auto;
}
.slider-pics .outer ul.inner li {
}
.slider-pics .outer ul.inner li,
.slider-pics .outer ul.inner li a,
.slider-pics .outer ul.inner li a img {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.slider-pics ul li a,
.slider-pics ul li a span,
.slider-pics ul li a span img {
	display:block;
}
.slider-pics .outer ul.inner li a {
	text-decoration:none;
}
.slider-pics ul li a span {
	position:relative;
}
.slider-pics ul li a span.lazy-done {
	-webkit-animation: fadeIn 500ms;
	animation: fadeIn 500ms;
}
.slider-pics .outer ul.inner li a span.thumb {
	background-position:center center;
	background-size:cover;
}

.slider-pics .outer ul.inner li span.slazy-done img {
	background-image:url(/um/img/play_yt_thumb.svg);
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}
.slider-pics .outer ul.inner li a.yt-playing span.slazy-done img {
	border:3px solid #fff;
}

@media all and (min-width: 992px) {
.slider-pics {
	position:relative;
	padding:12px 0;
}
.slider-pics .outer {
	margin:0 40px;
}
.slider-pics .outer ul.inner li:not(:last-child) {
	padding-right:12px;
}
.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	width:202px;
}
.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	height:114px;
}
}
@media all and (max-width: 991.98px) {
.slider-pics {
	padding:6px 0;
}
.slider-pics .outer {
}
.slider-pics .outer ul.inner li:not(:last-child) {
	padding-right:6px;
}

.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	width:142px;
}
.slider-pics ul li a span.thumb,
.slider-pics ul li a span.thumb img {
	height:80px;
}
}

/*	arrow
============================== */
@media all and (min-width: 992px) {
.slider-pics ul.ctrl.ctrl-off {
	display:none;
}
.slider-pics ul.ctrl li {
	position:absolute;
	top:50%;
	margin-top:-57px;
}
.slider-pics ul.ctrl li.ctrl-lef {
	left:0;
}
.slider-pics ul.ctrl li.ctrl-rig {
	right:0;
}
.slider-pics ul.ctrl li a {
	position:relative;
	width:40px;
	height:114px;
	overflow:hidden;
}
.slider-pics ul.ctrl li a.off {
	opacity:0.25;
	cursor:default;
}
.slider-pics ul.ctrl li a span {
	display: inline-block;
	color: #333;
	width: 32px;
	height: 32px;
	border: 3px solid #333;
	border-left: 0;
	border-bottom: 0;
	/**/
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	/**/
	position: absolute;
	top: 50%;
	left: 50%;
}
.slider-pics ul.ctrl li.ctrl-lef a span {
	transform: translate(-25%, -50%) rotate(-135deg);
}
.slider-pics ul.ctrl li.ctrl-rig a span {
	transform: translate(-75%, -50%) rotate(45deg);
}
.slider-pics ul.ctrl li.ctrl-lef a:not(.hidebtn):hover {
}
.slider-pics ul.ctrl li.ctrl-rig a:not(.hidebtn):hover {
}
}
@media all and (max-width: 991.98px) {
.slider-pics ul.ctrl {
	display:none;
}
}
