@charset "utf-8";

.base-wp{padding-bottom: 10%;}

/* TOP */

.mainv{
	background:url(../img/top/header_pc.jpg) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}
.mainv-crumb{
	background:url(../img/top/header1_crumb.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	animation-name: fade-inanime;
	animation-duration: 2s;
}




.mainv-chara{
	background:url(../img/top/header-chara-pc.png) center -20px no-repeat;
	-moz-background-size:auto auto;
	background-size:auto auto; 
	animation-name: fade-inanime;
	animation-duration: 2s;
}






.mainv-catch{
	/* width: 18%; */
	width: 20%;
	opacity: 0;
	animation-name: fade-inanime;
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	margin-bottom: 10%;
}


.mainv-logo{margin-left: auto; align-self:flex-end; width: 40%; }


@media only screen and (min-width: 701px) and (max-width: 1500px) {
.mainv-chara{
	background:url(../img/top/header-chara-pc.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	animation-name: fade-inanime;
	animation-duration: 2s;
	
}

.mainv-logo{margin-left: auto; align-self:flex-end; width: 40%; padding-bottom: 3%;}
}










@media screen and (max-width: 700px) {
.mainv{
	background:url(../img/top/header_pc.jpg) top center no-repeat;
	-moz-background-size:auto 100%;
	background-size:auto 100%;
}

.mainv-chara{
	background:url(../img/top/header-chara-sp.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	animation-name: fade-inanime;
	animation-duration: 2s;
	padding-top:140%;
	
}

.mainv-catch{
	margin-bottom: 0;
}

}




/* NEWS
----------------------------------------------------------------------------------------------------- */

.news-bg{
	background:url(../img/top/news_bg.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	padding:5% 0;
	margin-top: -10%;
}



.news-cont-box{ width: 95%; max-width: 1500px; margin: 0 auto; padding-top: 150px;}

.news-cont{ width: calc(31% - 4px); border: solid 2px #8f8fc6; background:#fff; color: #5f5c77; margin: 1%; position: relative; padding-bottom: 20px;}
.news-thumbnail{width: 95%; padding: 2.5% 0; margin: 0 auto;}
.news-thumbnail img{width: 100%;}
.news-thumbnail:hover{filter: contrast(120%);}

.news-txt{width: 95%; padding: 2.5% 0; margin: 0 auto; line-height:1.61; letter-spacing: 0.1em;}
.news-day{color: #e43261; font-size: 20px; text-align:right; position: absolute; bottom:0; right: 2%;}

.news-new-icon{
	width: 20%;
	position: absolute; 
	top:-10px;
	left:-10px;
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}


.news-cont-box a{ color: #ef4b85; text-decoration: underline;}
.news-cont-box a:visited { color: #ef4b85; }
.news-cont-box a:hover { color: #ef4b85; text-decoration: none; }
.news-cont-box a:active { color: #ef4b85; }


.more-btn{width: 50%; max-width: 193px; margin: 0 auto; padding-top: 20px; padding-left:6px;}
.more-btn:hover{filter: contrast(140%);}



@media screen and (max-width: 700px) {

.news-bg{
	background:url(../img/top/news_bg-sp.png) top right no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	padding:5% 0;
	margin-top: -16%;
}

.news-day{color: #e43261; font-size: 3vw; text-align:right; position: absolute; bottom:0; right: 2%;}

.news-cont-box{padding-top: 20%;}
.news-cont{ width: calc(95% - 4px); margin: 1%; padding:2%; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;}
.news-thumbnail{width: 50%; padding:0; padding-right: 2%;}
.news-txt{width: 95%; padding:0; margin: 0 auto;}
.news-new-icon{ width: 15%;}
}

















/* banner */

.rot-banner-box{
	background:url(../img/top/banner-bg.jpg);
	padding:20px 0;
}

@media screen and (max-width: 700px) {
.rot-banner-box{
	padding:20px 2%;
}
}

.sp-button {
	width: 10px;
	height: 10px;
	border: 2px solid #fff;
	border-radius: 0;
	transform: rotate(45deg);
	
}

.sp-selected-button {
	border: 2px solid #fdf076;
	background-color: #fdf076;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
	.sp-button {
		width: 14px;
		height: 14px;
	}
}

@media only screen and (min-width: 568px) and (max-width: 768px) {
	.sp-button {
		width: 16px;
		height: 16px;
	}
}

@media only screen and (min-width: 320px) and (max-width: 568px) {
	.sp-button {
		width: 18px;
		height: 18px;
		margin: 4px 10px;
	}
}


/* movie */

.movie-box{ position: relative;}
.movie_thumbnail{width: 95%; max-width: 800px; margin: 0 auto; padding: 13% 0 20% 0;}
.movie_crumb_title{top:8%; left:5%; position: absolute; width: 70%;}
.movie_crumb_left{bottom:0;  position: absolute;  width: 40%;}
.movie_crumb_right{top:0; right:0; position: absolute; width: 30%;}

@media screen and (max-width: 700px) {
.movie-box{ margin-top:5%; overflow: hidden;}
.movie_crumb_title{top:0%; left:0; position: absolute; width: 110%;}
}



/* introduction
-------------------------------------------------------------------------------------- */
.introduction-box{
	margin-top:-10%;
	background:url(../img/top/introduction-bg.jpg) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 

}
.introduction-crumb{
	background:url(../img/top/introduction-crumb.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	padding-bottom: 30%;
}
.introduction-cont{width: 90%; max-width: 1500px; padding-top: 10%; margin: 0 auto;}
.introduction-txt{width: 60%;}
.introduction-img{width: 35%; margin-left:auto; padding-top:20%; padding-right: 5%;}

.introduction-txt1{padding-bottom: 90px;}
.introduction-txt2{padding-bottom: 50px;}
.btn-introduction{width: 55%;}

.btn-introduction a:hover{filter: contrast(140%);}



@media screen and (max-width: 700px) {
.introduction-box{
	margin-top:-10%;
	background:url(../img/top/introduction-bg-sp.jpg) top right no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
}

.introduction-crumb{
	background:url(../img/top/introduction-crumb-sp.png) top right no-repeat;
	-moz-background-size: auto 100%;
	background-size: auto 100%; 
	padding-bottom: 0;
}

.introduction-txt1{padding-bottom: 10%;}
.introduction-txt2{padding-bottom: 50px;}

.introduction-txt{width: 100%; padding-top: 40%;}
.introduction-img{width: 100%; margin-left:auto; padding-top:10%; padding-right: 0; padding-bottom: 10%;}


}



















/* chara
------------------------------------------------------------------------ */

.chara-box{
	background:url(../img/top/chara-bg.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	position: relative;
	top:-30%;
}

.chara-crumb{}


.chara-list-box{
	top:30%; 
	position: absolute;
}


@media all and (-ms-high-contrast: none){  /* IE10 */
.chara-list-box{ width: 95%; max-width: 1500px;  left:0; right:0; margin: auto;}
}

.chara-list{
	margin: 0 auto;
	justify-content: center;
}

.chara-list li{width: 19%; padding:0.5%;}
.chara-list li a:hover{filter: contrast(140%);}



@media screen and (max-width: 700px) {
.chara-box{
	background:url(../img/top/chara-bg-sp.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto; 
	position: relative;
	top:0%;
}

.chara-list-box{
	top:20%; 
	position: absolute;

}

.chara-list li{width: 32.3%; padding:0.5%;}

}





















/* staff
------------------------------------------------------- */





.staff-box{ position: relative;}
.staff-img{ width: 95%; max-width: 900px; margin: 0 auto;}
.staff-txt{position: absolute; top: 28%; right: 0; bottom: 0; left: 0; margin: auto;}
.staff-txt1, .staff-txt2{ width: 38%; max-width: 761px; margin: 0 auto; left:0; padding-bottom: 20px;}
.staff-crumb{ top: -20%; position: absolute;}


.big-banner{ width: 90%; max-width: 900px; margin:15% auto 0 auto;}
.big-banner:hover{filter: contrast(140%);}



@media screen and (max-width: 700px) {
.staff-img{ width: 100%; max-width: 800px; margin: 0 auto;}
.staff-crumb{ top: 0%; position: absolute;}
.staff-txt1, .staff-txt2{ width: 80%; max-width: 761px; margin: 0 auto; left:0; padding-bottom: 20px;}

.staff-txt{position: absolute; top: 20%; right: 0; bottom: 0; left: 0; margin: auto;}

.big-banner{ width: 90%; max-width: 900px; margin:15% auto 10% auto;}


}



/* products
------------------------------------------------------- */
.products-box{
	background:url(../img/top/products_bg.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	padding-top: 10%;
	margin-top: 10%;
}
.products-lineup{width: 95%; max-width: 1500px; margin: 0 auto; padding: 10% 0 10% 0;}
.products-lineup li{width: 24%; padding:0.5%;}
.products-lineup li a:hover{filter: contrast(140%);}


@media screen and (max-width: 700px) {
.products-lineup li{width: 49%; padding:0.5%;}
.products-box{
	background:url(../img/top/products_bg-sp.png) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	padding-top: 10%;
	margin-top: 10%;
}

}



/* tw
------------------------------------------------------- */
.tw-box{
	background:url(../img/top/tw-bg.jpg) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	padding-top: 10%;
	margin-top: 10%;
}

.btn-tw a{margin-left:auto; margin-right:10%;}
.btn-tw a:hover{filter: contrast(140%);}

.tw-list{width: 80%; max-width: 600px; margin: 0 auto;padding: 10% 0 20% 0;}





@media only screen and (min-width: 701px) and (max-width: 1024px) {
.tw-list{width: 80%; max-width: 600px; margin: 0 auto;padding: 3% 0 25% 0;}
}



@media screen and (max-width: 700px) {
.tw-box{
	background:url(../img/top/tw-bg-sp.jpg) top center no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	padding-top: 10%;
}
.tw-list{width: 80%; max-width: 600px; margin: 0 auto;padding: 5% 0 20% 0;}
.btn-tw a{width: 25%; margin-left:auto; margin-right:10%; padding-top:5%;}

}





/* anime */

@keyframes fade-inanime {
    0% {opacity: 0;}
    100% {opacity: 1;}
}



.top-left-box{position: absolute; height: 950px;}



.bgn-banner{width: 100%; max-width: 500px; margin: 0 auto;
    animation-name: bgnb;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
	opacity: 1;
	margin-bottom: 10%;
	position: relative;
	left:20px;
	top:100%;
}


@media screen and (max-width: 1086px) {
.bgn-banner{width: 90%; max-width: 500px; margin: 0 auto;
    animation-name: bgnb;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1.5s;
	opacity: 1;
	position: relative;
	left:20px;
	top:90%;
}

}




@media screen and (max-width: 700px) {
.top-left-box{position: relative; height: auto;}

.bgn-banner{left:auto; top:auto;}

}



@keyframes bgnb{
    0% {
        transform: translate(0,0px);
         0% {opacity: 0.5;}
    }

    100% {
        transform: translate(0,-15px);
        100% {opacity: 1;}
    }
}