body {
background: #000;
color: #dedede;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 400;
font-style: normal;
width: 100%;
height:100%;
font-size: 1.1vw;
line-height:2em;
margin: 0px;
letter-spacing: 0.05vw;
}


#wrap{
width: 100%;
position: relative;
line-height: 0;
}

.sp{ display: none;}
.fontS{ font-size: 80%;}
.txtSpace{ letter-spacing: -0.3vw; font-weight: 500;}
.efblock{ width: 100%;}

@keyframes  fadeanm {
0% {opacity: 0;}
100% {opacity: 1;}
}

@keyframes  scaleanm {
0% { transform: scale(1.25,1.25); opacity: 0;}
100% { transform: scale(1,1); opacity: 1;}
}

@keyframes  slideanm {
0% { transform: translateX(20px); opacity: 0;}
100% { transform: translateY(0); opacity: 1;}
}

@keyframes  slideanm2 {
0% { transform: translateY(30px); opacity: 0;}
100% { transform: translateX(0); opacity: 1;}
}

.linkLabel{
text-indent: -99999px;
}


/*---------------------------------------------

top comment

----------------------------------------------*/

#topcomAll{
background: #000;
width: 100%; height: 100%;
position: fixed;
top: 0; left: 0;
z-index: 100;
}

#topcomBG01{
background: url("../images/topcomment/bg01_pc.png") no-repeat left top;
background-size: contain;
width: 50%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: scaleanm 4s cubic-bezier(0,.64,.41,1) 0.2s forwards;
opacity: 0;
}

#topcomBG02{
background: url("../images/topcomment/bg02_pc.png") no-repeat right bottom;
background-size: contain;
width: 50%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 2;
animation: scaleanm 4s cubic-bezier(0,.64,.41,1) 0.2s forwards;
opacity: 0;
}

#topcomClose{
background: url("../images/topcomment/btn_close.png") no-repeat;
background-size: contain;
width: 70px; height: 70px;
position: fixed;
top: 0; right: 0;
z-index: 5;
}

#topcomClose:hover{
cursor: pointer;
opacity: 0.7;
transition: all 0.5s ease;
}

#topcomTXT{
width: 100%;
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
z-index: 3;
font-family: "Noto Serif JP", serif;
font-weight: 600;
font-style: normal;
font-size: 1.3vw;
line-height: 2.0em;
text-align: center;
color: #fff;
animation: fadeanm 2s ease 1.8s forwards;
opacity: 0;
}

.topcomNM{
font-size: 140%;
color: #fffa00;
}



/*---------------------------------------------

main

----------------------------------------------*/

.mainPCall{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

.mainSPall{ display: none;}

.mainOFF{ display: none;}

#main{
width: 100%;
position: relative;
overflow: hidden;
}

#main:before{
content:"";
display: block;
padding-top: 53.33%;
}


#logo_PC01{
background: url("../images/top3/logo.png") no-repeat center;
background-size: contain;
width: 28.1%; height: 26.56%;
position: absolute;
top: 47.3%; left: 66%;
z-index: 5;
animation: fadeanm 2s ease 1.8s forwards;
opacity: 0;
}

#roadshow_PC01{
background: url("../images/top3/roadshow.png") no-repeat right bottom;
background-size: contain;
width: 10.83%; height: 6.75%;
position: absolute;
top: 86.3%; left: 74.5%;
z-index: 5;
animation: fadeanm 2s ease 2.1s forwards;
opacity: 0;
}

@keyframes  topSPanm01 {
0% { transform: scale(1.3) rotateZ(-15deg); opacity: 1;}
100% { transform: scale(1) rotateZ(0deg);; opacity: 1;}
}

#mainImg_PC01{
background: url("../images/top3/main_img_pc.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: topSPanm01 3.5s cubic-bezier(0,.67,.47,.99) 0.1s forwards;
}

@keyframes  topSPanm02 {
0% { transform: scale(2) rotateZ(30deg); opacity: 1;}
100% { transform: scale(1) rotateZ(0deg); opacity: 1;}
}

#mainCast_PC01{
background: url("../images/top3/main_cast_pc.png") no-repeat center top;
background-size: contain;
width: 90%; height: 65%;
position: absolute;
top: 5.5%; left: 5%;
z-index: 2;
animation: topSPanm02 3.5s cubic-bezier(0,.67,.47,.99) 0.4s forwards;
}

#catch01_PC01{
background: url("../images/top3/catch01_pc.png") no-repeat center;
background-size: contain;
width: 3.1%; height: 37.87%;
position: absolute;
top: 37.18%; left: 19.83%;
z-index: 4;
animation: slideanm2 2s ease 2.4s forwards;
opacity: 0;
}

#catch02_PC01{
background: url("../images/top2/catch02.png") no-repeat center;
background-size: contain;
width: 46%; height: 5%;
position: absolute;
top: 94.4%; right: 1.5%;
z-index: 4;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

#logo_en_PC01{
background: url("../images/top3/logo_e_pc.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
}


/*  main 02  */

#logo_PC02{
background: url("../images/top2/logo_pc.png") no-repeat center;
background-size: contain;
width: 28.1%; height: 26.56%;
position: absolute;
top: 21%; left: 67.6%;
z-index: 5;
animation: fadeanm 2s ease 1.8s forwards;
opacity: 0;
}

#roadshow_PC02{
background: url("../images/top3/roadshow.png") no-repeat right bottom;
background-size: contain;
width: 10.83%; height: 6.75%;
position: absolute;
top: 53.87%; left: 76.4%;
z-index: 5;
animation: fadeanm 2s ease 2.1s forwards;
opacity: 0;
}

#mainImg_PC02{
background: url("../images/top2/main.jpg") no-repeat center;
background-size: cover;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
animation: scaleanm 4s cubic-bezier(0,.64,.41,1) 0.2s forwards;
opacity: 0;
}

#mainCast01_PC02{
background: url("../images/top2/cast01.png") no-repeat center;
background-size: cover;
width: 32.4%; height: 41.31%;
position: absolute;
top: 0; left: 0;
z-index: 2;
animation: fadeanm 6s cubic-bezier(0,.64,.41,1) 1s forwards;
opacity: 0;
}

#mainCast02_PC02{
background: url("../images/top2/cast02.png") no-repeat center;
background-size: cover;
width: 29.26%; height: 33.62%;
position: absolute;
bottom: 0; right: 0;
z-index: 2;
animation: fadeanm 6s cubic-bezier(0,.64,.41,1) 1.4s forwards;
opacity: 0;
}

#catch01_PC02{
background: url("../images/top3/catch01_pc.png") no-repeat center;
background-size: contain;
width: 3.1%; height: 37.87%;
position: absolute;
top: 48%; left: 7.5%;
z-index: 4;
animation: slideanm 2s ease 2.4s forwards;
opacity: 0;
}

#catch02_PC02{
background: url("../images/top2/catch02.png") no-repeat center;
background-size: contain;
width: 46%; height: 5%;
position: absolute;
top: 93.5%; left: 2.13%;
z-index: 4;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

#logo_en_PC02{
background: url("../images/top2/logo_e.png") no-repeat center bottom;
background-size: contain;
width: 69.1%; height: 8.25%;
position: absolute;
top: 53.56%; left: 0;
z-index: 3;
}


/*---------------------------------------------

main anm

----------------------------------------------*/

.mainImgAll .bgImg {
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
opacity: 0;
animation: bgAnime 20s infinite;
}

.mainImgAll .src1 {
width: 100%; height: 100%;
}

.mainImgAll .src2 {
width: 100%; height: 100%;
animation-delay: 10s;
}

@keyframes bgAnime {
0% { opacity: 0;}
10% { opacity: 1;}
60% { opacity: 1;}
70% { opacity: 0;}
100% { opacity: 0;}
}



/*---------------------------------------------

mvtk

----------------------------------------------*/


#mvtkBtnAll_PC{
width: 15%; height: 60px;
line-height: 0;
position: absolute;
top: 0; right: 70px;
z-index: 5;
animation: fadeanm 2s ease 3.6s forwards;
opacity: 0;
}

#mvtkBtnAll_SP{ display: none;}

.mvtk_online{
background: #e61e0f url("../images/bnr/bnr_mvtk_online.png") no-repeat center;
background-size: contain;
width: 49%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
text-align: center;
}

.mvtk_card{
background: #96d503 url("../images/bnr/bnr_mvtk_card.png") no-repeat center;
background-size: contain;
width: 49%; height: 100%;
position: absolute;
top: 0; right: 0;
z-index: 1;
text-align: center;
}

.mvtk_online a,.mvtk_card a{
width: 100%; height: 100%;
display: block;
}

#mvckonlineAll{
width: 100%; height: 230px;
padding: 0;
position: fixed;
bottom: 0; left: 0;
z-index: 100;
display: none;
filter: drop-shadow(0 0 10px rgba(0,0,0,0.4));
}

#mvck{
width: 840px; height: 170px;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
z-index: 2;
display: none;
overflow: hidden;
line-height: 0;
margin: 0;
padding: 0;
}

#mvckBG{
background: linear-gradient(90deg, #e3e601 0%, #fad000 80%);
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
opacity: 0.9;
}

#mvckClose{
background: url("../images/nav/btn_menu02.png") no-repeat;
background-size: contain;
width: 60px; height: 60px;
position: absolute;
top: 0; right: 0;
z-index: 2;
cursor: pointer;
}

/*---------------------------------------------

movie

----------------------------------------------*/

#topmovarea{
background: #000  url("../images/top/bg_dot.png") left top;
background-size: 10px 10px;
width:100%;
margin:0 auto;
padding: 4vw 0;
line-height: 0;
/*border-bottom: 2px dotted #512000;*/
}

#topmovarea .movie {
width: 70%;
margin: 0 auto;
}

#topmovarea .movie .inner {
background-color: #000;
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 0 auto;
border: 1px solid #544f00;
}

#topmovarea .movie .inner iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
}

#topmovarea .movie .tab_area {
width: 100%;
display: flex;
flex-wrap: wrap;
margin: 5px auto;
justify-content: center;
}

#topmovarea .movie .tab_area li {
width: 32%; height: 55px;
text-align: center;
font-size: 18px;
margin: 2px;
font-style: normal;
position: relative;
}

#topmovarea .movie .tab_area li a{
width: 100%; height: 100%;
background: #9a8900;
display: block;
text-decoration: none;
color: #000;
float: left;
}

#topmovarea .movie .tab_area li a.active{
background: linear-gradient(90deg, #e3e601 0%, #fad000 80%);
color: #000;
}

.menubtnpos{
width: 100%;
vertical-align: middle;
position: absolute;
top: 50%; left: 0;
transform: translateY(-50%);
z-index: 1;
line-height: 1.2em;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
}

/*---------------------------------------------

contents

----------------------------------------------*/

#content{
background: url("../images/top/bg_logo.png") repeat-y top right;
background-size: 12.5% auto;
width: 100%;
position: relative;
overflow-x: hidden;
}

.contentBlock{
width: 100%;
padding: 3vw 0;
}


#m_intro{
background: url("../images/top/m_intro.png") no-repeat center;
background-size: contain;
width: 100%;
position: relative;
overflow: hidden;
margin: 2em auto;
}

#m_story{
background: url("../images/top/m_story.png") no-repeat center;
background-size: contain;
width: 100%;
position: relative;
overflow: hidden;
margin: 2em auto;
}

#m_comment{
background: url("../images/top/m_comment.png") no-repeat center;
background-size: contain;
width: 100%;
position: relative;
overflow: hidden;
margin: 2em auto;
}

#m_cast{
background: url("../images/top3/m_cast.png") no-repeat center;
background-size: contain;
width: 100%;
position: relative;
overflow: hidden;
margin: 2em auto;
}

#m_intro:before,#m_story:before,#m_comment:before,#m_cast:before{
content:"";
display: block;
padding-top: 3.8%;
}

#introM{
width: 100%;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
text-align: center;
transform: scaleX(93%);
font-size: 2vw;
line-height: 1.2em;
background: linear-gradient(90deg, #e3e601 0%, #fad000 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.03em;
}

#introTxt{
width: 100%;
text-align: center;
line-height: 1.8em;
font-size: 0.9vw;
margin: 1.5vw auto 0;
}

#storyTxt{
width: 100%;
text-align: center;
line-height: 2em;
font-size: 1vw;
margin: 1.5vw auto 0;
}


.commentNM{
width: 100%;
font-family: "Noto Serif JP", serif;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
text-align: center;
transform: scaleX(93%);
font-size: 2vw;
line-height: 1.2em;
background: linear-gradient(90deg, #e3e601 0%, #fad000 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.1em;
letter-spacing: 0.05em;
}

.commentImg{
width: 100%;
text-align: center;
margin: 1vw auto;
pointer-events: none;
}

.commentTxt{
width: 100%;
text-align: center;
line-height: 1.8em;
font-size: 0.9vw;
margin: 0.5vw auto 3vw;
}

/*---------------------------------------------

cast characters

----------------------------------------------*/

#chartAll{
background: #fff;
width: 100%;
position: relative;
overflow: hidden;
}

#chartAll:before{
content:"";
display: block;
padding-top: 53.33%;
}

#chartImg{
background: url("../images/chart/chart_pc.jpg") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#chartTxt{ display: none;}

/*---------------------------------------------

bnr S

----------------------------------------------*/

#bnrSall{
width: 100%;
padding: 1.5em 0;
text-align: center;
line-height: 0;
}

#bnrSall img{ width: 20%; margin: 5px 1%; min-width: 240px;}


/*---------------------------------------------

footer

----------------------------------------------*/

.bsline{
background: url("../images/top/bg_dot.png") repeat-x top left;
background-size: 9.5px 9.5px;
width: 100%; height: 9.5px;
}

#billing{
background: url("../images/top3/billing.png") no-repeat left;
background-size: contain;
width: 60%; max-width: 1000px;
position: relative;
margin: 3em auto;
}

#billing:before{
content:"";
display: block;
padding-top: 42.5%;
}

footer{
background: url("../images/top/bg_dot.png") top left;
background-size: 9.5px 9.5px;
width: 100%;
padding: 45px 0 180px;
font-size: 14px; 
letter-spacing: 1px;
line-height: 1.5em;
text-align: center;
}

#sharearea{
background: url("../images/sns/sharemark.png") no-repeat left;
background-size: contain;
width: 400px;
margin: 0 auto 40px;
text-align: right;
line-height: 1em;
font-size: 18px;
font-family: "century-gothic", sans-serif;
font-weight: 700;
font-style: normal;
}

#sharearea a{
color: #ece811;
text-decoration: none;
margin: 0 20px;
}

#privacy{
width: 400px; height: 10px;
margin: 0 auto 35px;
font-size: 10px;
line-height: 10px;
text-align: center;
letter-spacing: 1px;
color: #ece811;
}

#privacy a{ color: #ece811;}

#copyright{
width: 400px; height: 10px;
margin: 0 auto;
font-size: 10px;
line-height: 10px;
text-align: center;
letter-spacing: 1px;
color: #ece811;
}


#btnpagetop{
background: #ece811;
width: 60px; height: 60px;
line-height: 60px;
text-align: center;
position: fixed;
bottom: 0; right: 0;
z-index: 20;
font-size: 21px;
transition: all .3s;
}

#btnpagetop a{
width: 100%;
height: 100%;
display: block;
text-decoration: none;
color: #000;
}

#btnpagetop:hover{
opacity: 0.7;
cursor: pointer;
}