@charset "UTF-8";
* {margin: 0; padding: 0;}
html{font-size: 62.5%;}
body{font-size: 1.8rem;font-style: normal;min-width: 980px;}

p{line-height:1.8;font-family: ten-mincho-text, serif;font-weight: 400;font-style: normal;}
h3{}
h4{}
.inner{width:1080px;}
#Wrap{background:url(../img/bg.png) repeat-x #000b1c fixed;}

/**/
h2.ttl{background:url(../img/ttlbg.png) ;-webkit-background-size: cover;background-size:cover;text-align:center;margin-bottom: 1em;}
h2.ttl:before,h2.ttl:after{content:"";
display:block;
height:5px;
width:100%;
background: rgb(202,154,12);
background: linear-gradient(0deg, rgba(202,154,12,1) 0%, rgba(242,224,138,1) 15%, rgba(202,154,12,1) 37%, rgba(242,224,138,1) 88%, rgba(255,251,208,1) 100%);}
h2.ttl img{height: 67px;}
.mrk_grd{background: #00b2ff;}
.embt:before{width: 80px;height: 80px;position:absolute;left:0;top:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;}
.embt:after{width: 80px;height: 80px;position:absolute;right:0;top:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;transform:rotate(90deg);}
.embb:before{width: 80px;height:80px;position:absolute;left:0;bottom:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;transform:rotate(-90deg);}
.embb:after{width: 80px;height: 80px;position:absolute;right:0;bottom:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;transform:rotate(180deg);}
/**/


section{padding-bottom: 3em;position:relative;}

section#main_visual{padding-bottom: 3em;}
section#main_visual img{width: 100%;;}
section#main_visual >h1{background:url(../img/ttlbg.png) ;width: 100%;text-align:center;-webkit-background-size: auto 100%;background-size: auto 100%;margin-bottom: -2em;}
section#main_visual >h1 img{width: 980px;margin: -0.4% 0;}
section#main_visual >div{width: 100%;height: 2150px;background: url(../img/main_visual.png) center top no-repeat;-webkit-background-size: 1491px auto;background-size: 1600px auto;margin-bottom: -1020px;}
section#main_visual >div{display:table;z-index: 1;position: relative;}
section#main_visual >div>div.inner{position:relative;}
section#main_visual >div>div.inner h2{width: 208px;position:absolute;right:0;top:60px}
section#main_visual >div>div.inner h1{width: 790px;position:absolute;left:0;top:50px}
section#main_visual >div>div.inner h3{width: 390px;position:absolute;right:0;top:1080px;filter: drop-shadow(0 0 3px rgba(0,0,0,1));}
section#main_visual >div>div.inner figure {width:500px;position:absolute;left:0;top:850px;background: #000;}
section#main_visual >div>div.inner figure a .frame{ filter: drop-shadow(0 0 3px rgba(0,0,0,1));position:absolute;width:500px;background: url(../img/frame.png) no-repeat rgba(0,0,0,0.3);-webkit-background-size: 100% auto;background-size: 100% auto;}
section#main_visual >div>div.inner figure:before{z-index:1;content:"";background: url(../img/play.png);background-size: 100% 100%;width: 80px;height: 80px;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
section#main_visual >div>div.inner figure a:hover .frame{opacity:1;z-index: 1;}
section#main_visual.info_anime >div>div.inner h1{width: 790px;position:absolute;left:0;top:150px}
section#main_visual.info_anime >div>div.inner figure{width: 500px;position: absolute;left: 0;top: 985px;}
section#main_visual.info_anime >div>div.inner figure:before{content:"";background: none;}

section#link_button{position:relative;z-index: 1}
section#link_button div >div{width: 100%;justify-content:space-between;display: -webkit-box;display: flex;}
section#link_button div >div a {font-size:1.6rem;width:32.33%;color:#fff;font-weight:bold; width: ;text-align:center; border-radius:10px; padding: 0.5em; background:#320020;border: 10px solid; border-image-source: url(../img/grad.png);border-image-slice: 10;border-image-repeat: round;}
section#link_button div >div a:hover{background: #200014;text-decoration:none;}

section#movie {position: relative;z-index: 1;}
section#movie .inner h2+div{width: 70%;margin: 0 auto;}
section#movie .inner figure {position: relative; width:100%;text-align:center;/*background: #000;*/}
section#movie .inner figure a .frame{ filter: drop-shadow(0 0 3px rgba(0,0,0,1));position:absolute;width:100%;background: url(../img/frame.png) no-repeat rgba(0,0,0,0.3);-webkit-background-size: 100% auto;background-size: 100% auto;}
section#movie .inner figure:before{z-index:1;content:"";background: url(../img/play.png);background-size: 100% 100%;width: 80px;height: 80px;position:absolute;top:0;bottom:0;right:0;left:0;margin:auto;}
section#movie .inner figure a:hover .frame{opacity:1;z-index: 1;}
section#movie .inner figure img{width: 99%;}


section#comments {position:relative;z-index: 1}
section#comments article{background: #22223c; filter: drop-shadow(0 0 3px rgba(0,0,0,1));color:#fff;padding: 3em 8em;position:relative;margin-bottom: 1em;}
section#comments article p{margin-bottom: 1em;}
section#comments article h4{font-size:2rem;display:flex;align-items:center;justify-content: flex-end;}
section#comments article h4 span:first-child{line-height: 1.2;border:1px solid #fff;font-size:1.5rem;padding: 0.25em 0.5em;margin-right: 1em;}
section#comments article h4 span:last-child{}

section#release{z-index:1;}
section#release article{display:flex;justify-content:space-between;align-items:center;background: #22223c; filter: drop-shadow(0 0 3px rgba(0,0,0,1));color:#fff;padding: 3em 6em;position:relative;margin-bottom: 1em;}
section#release article figure{width: 30%;}
section#release article figure img{width: 100%;}
section#release article div{width: 65%;}
section#release article div h5{font-size:1.8rem;background:#ffb200;display:inline-block;margin-bottom: 1em;padding: 0.25em 0.75em;}
section#release article div h3{font-size:2.6rem;margin-bottom: 0.5em;font-family: ten-mincho-text, serif;color:#ffb200;}
/* section#release article:nth-child(2) div h5{background:#ff3d9e;display:inline-block;margin-bottom: 1em;padding: 0.25em 0.75em;}
section#release article:nth-child(2) div h3{color:#ff3d9e;} */
section#release article:last-child div h5{background:#00b2ff;display:inline-block;margin-bottom: 1em;padding: 0.25em 0.75em;}
section#release article:last-child div h3{color:#00b2ff;}
section#release article div p{margin-bottom: 1em;}
section#release article div >div a{}
section#release article div >div {width: 100%;justify-content:space-between;display: -webkit-box;display: flex;}
section#release article div >div a {font-size:1.6rem;width:48.5%;color:#fff;font-weight:bold; width: ;text-align:center; border-radius:5px; padding: 0.5em; background:#320020;border: 10px solid; border-image-source: url(../img/grad.png);border-image-slice: 10;border-image-repeat: round;}
section#release article div >div a:hover{background: #200014;text-decoration:none;}

section#story article{background: #22223c; filter: drop-shadow(0 0 3px rgba(0,0,0,1));color:#fff;padding: 3em 8em;position:relative;margin-bottom: 1em;}
section#story article p{text-align:center;font-size:1.8rem;}

section#character div.list{display:flex;justify-content:space-between;}
section#character div.list article{width: 32.5%;background: #22223c; filter: drop-shadow(0 0 3px rgba(0,0,0,1));color:#fff;padding: 1em;position:relative;margin-bottom: 1em;} 
section#character div.list article:first-child,
section#character div.list article:nth-child(2){width: 49%;}
section#character div.list:last-child:after{content:"";width: 32.5%;}
section#character div.list div.in{position:relative;}
section#character div.list div.in div{position:absolute;bottom:1em;margin:0 1em;background: rgba(255,255,255,0.8);color:#000;padding: 1em;}
section#character div.list div.in div h3{font-size:2rem;font-family: ten-mincho-text, serif;font-weight: bold;font-style: normal;margin-bottom: 0.5em;}
section#character div.list div.in div p{font-size:1.4rem;font-family: ten-mincho-text, serif;font-weight: 400;font-style: normal;line-height:1.5;}

section#keywords div.list{display:flex;justify-content:space-between;}
section#keywords div.list article{width: 32.5%;background: #22223c; filter: drop-shadow(0 0 3px rgba(0,0,0,1));color:#fff;padding: 3em;position:relative;margin-bottom: 1em;} 
section#keywords div.list article h3{font-size:2.8rem;font-family: ten-mincho-text, serif;font-weight: bold;font-style: normal;margin-bottom: 0.5em;text-align:center;border-bottom: 1px solid #fff;border-top: 1px solid #fff;margin-bottom: 0.5em;}
section#keywords div.list .embt:before,
section#keywords div.list .embt:after,
section#keywords div.list .embb:before,
section#keywords div.list .embb:after{width: 50px;height: 50px;z-index: 1}

section#character div.list .embt:before,
section#character div.list .embt:after,
section#character div.list .embb:before,
section#character div.list .embb:after{width: 50px;height: 50px;z-index: 1}

section#series ul{display:flex;flex-wrap:wrap;justify-content:left;}

section#series ul li{width: 19.2%;margin-right: 1%;margin-bottom: 1em;background: #22223c;color: #fff;filter: drop-shadow(0 0 3px rgba(0,0,0,1));}
section#series ul li a{color:#fff;position:relative;padding: 1em;display:block;}
section#series ul li a:hover{background: #000;text-decoration:none;}
section#series ul li a:hover img{opacity: 1;}
section#series ul li a span{position:absolute;left:0;top:0;display:inline-block;font-size:1.1rem;font-weight:bold;}
section#series ul li figure{height: 5em;height: 19.5em;overflow: hidden;margin-bottom: 1em;}
section#series ul li:nth-child(5n){margin-right: 0;}
section#series ul li img{width: 100%;}
section#series ul li h4{font-size:1.4rem;}
section#series ul li p{font-size:1.3rem;}

@media screen and (max-width: 768px) {
html{font-size: 52.5%;}
body{min-width: auto;}
.inner{width:100%;}
#head_area{display:none;}
.wrapTop{background: url(../img/main_visual.png) center top no-repeat; background-size: 170vw auto; margin-bottom:auto;background-position:center 2vw;}
.embt:before{width: 15vw;height: 15vw;position:absolute;left:0;top:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;}
.embt:after{width: 15vw;height: 15vw;position:absolute;right:0;top:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;transform:rotate(90deg);}
.embb:before{width: 15vw;height:15vw;position:absolute;left:0;bottom:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;transform:rotate(-90deg);}
.embb:after{width: 15vw;height: 15vw;position:absolute;right:0;bottom:0;content:"";filter: drop-shadow(0 0 3px rgba(0,0,0,1));background: url("../img/ornament.png") no-repeat;background-size: 100% auto;transform:rotate(180deg);}



h2.ttl img{width: 80%;height: auto;}
section#main_visual >h1{margin-bottom: auto;}
section#main_visual >h1 img{width: 100%;}
section#main_visual article{margin: 0 2.5%;}
section#main_visual >div{background: none;    background-size: 160vw auto; margin-bottom:auto;background-position:center calc(100vw / -20);    height: 160vw;}
section#main_visual.info_anime >div{height: 140vw;}
section#main_visual >div>div.inner h2{width: 20vw;position:absolute;right:3vw;top:0}
section#main_visual.info_anime >div>div.inner h2{right: 0;}
section#main_visual.info_anime >div>div.inner h1{width:75vw;position:absolute;left:0;top:20vw}
section#main_visual >div>div.inner h3{width: 40vw;position:absolute;right:3vw;top:100vw;filter: drop-shadow(0 0 3px rgba(0,0,0,1));}
section#main_visual >div>div.inner figure {width:95vw;left:0;right:0;top:110vw;margin: 0 auto;bottom:0;background: #000;position:relative}
section#main_visual >div>div.inner figure a .frame{width: 95vw;}
section#main_visual >div>div.inner figure:before{width: 12vw;height: 12vw;}
section#main_visual.info_anime >div>div.inner figure{width:95vw;top: 110vw;}

section#link_button{padding-bottom: 1em;}
section#link_button div >div{padding: 0 2.5%;justify-content: center;flex-wrap: wrap;}
section#link_button div >div a{padding: 0.25vw;text-align:center;width: 48%;margin:0 1.5% 0.5em 0;}

section#movie h2.ttl + div{width:100%; padding: 0 2.5%;}

section#comments h2.ttl + div{padding: 0 2.5%;}
section#comments article{padding: 3em;}

section#release h2.ttl + div{padding: 0 2.5%;}
section#release article{flex-wrap:wrap;padding: 3em 2em;}
section#release article figure{width: 100%;margin-bottom: 2em;}
section#release article figure img{width: 70%;margin: 0 auto; display:block;}
section#release article div{width: 100%;}
section#release article div h5{font-size:2vw;}
section#release article div h3{font-size:4.5vw;}
section#release article div a span{display:none;}

section#story h2.ttl + div{padding: 0 2.5%;}
section#story article{padding: 3em 3em;}

section#character h2.ttl + div{padding: 0 2.5%;}
section#character div.list article{width: 49%;}
section#character div.list div.in div{position:relative;color: #fff;background: none;padding: 0.5em 0 2em 0;margin: 0;bottom:inherit;}
section#character div.list article:first-child,
section#character div.list article:nth-child(2){width: 100%;}
section#character div.list .embt:before,
section#character div.list .embt:after,
section#character div.list .embb:before,
section#character div.list .embb:after{width: 10vw;height: 10vw;z-index: 1}

section#keywords h2.ttl + div{padding: 0 2.5%;}
section#keywords div.list article{width: 100%;} 


section#series h2.ttl + ul{padding: 0 2.5%;}
section#series ul{justify-content:space-between;}
section#series ul li{width: 49.5%;margin-right: 0;margin-bottom: 0.5em;}
section#series ul li figure{height: auto;width: 17vw;float: left;margin-right: 1em;}
section#series ul li a span{position:relative;margin-top: 0;}
section#series ul li a span{font-size:1.6vw;padding: 0em 1em;}
section#series ul li a{padding: 0.5em;}
}