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


#wrap{
width: 100%; height: 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.1,1.1); opacity: 0;}
100% { transform: scale(1,1); opacity: 1;}
}

.linkLabel{
padding-top: 0;
margin-top: 0;
text-indent: -99999px;
}


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

main

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

#content{
width: 100%;
position: relative;
overflow-x: hidden;
}

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

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

.mainall{
background-color: #000;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
}

#logo{
background: url("../images/logo.png") no-repeat center;
background-size: contain;
width: 48%; height: 25%;
position: absolute;
top: 3%; left: 26%;
z-index: 5;
animation: fadeanm 2s ease 2.5s forwards;
opacity: 0;
}

#roadshow{
background: url("../images/roadshow.png") no-repeat right bottom;
background-size: contain;
width: 10%; height: 12.3%;
position: absolute;
bottom: 2.5%; right: 1.3%;
z-index: 5;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

#roadshow2{
background: url("../images/roadshow2.png") no-repeat right bottom;
background-size: contain;
width: 16%; height: 12%;
position: absolute;
bottom: 2.5%; right: 1.3%;
z-index: 5;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

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

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

#catch01{
background: url("../images/catch01.png") no-repeat center;
background-size: contain;
width: 2%; height: 26.5%;
position: absolute;
top: 40%; left: 49%;
z-index: 3;
animation: fadeanm 2s ease 4s forwards;
opacity: 0;
}

#catch02{
background: url("../images/catch02.png") no-repeat center;
background-size: contain;
width: 2%; height: 18.75%;
position: absolute;
top: 50%; left: 29.53%;
z-index: 3;
animation: fadeanm 2s ease 4s forwards;
opacity: 0;
}

#introCatch{
width: 100%;
padding: 1em 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-size: 1.8vw;
line-height: 1.8em;
font-weight: 800;
color: #512000;
text-align: center;
letter-spacing: 0;
border-bottom: 2px dotted #512000;
}

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

filmarks

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

#filmarksPC{
background: #fff url("../images/bnr/bnr_filmarks.png") no-repeat center;
background-size: contain;
width: 16%; height: 10%;
position: absolute;
bottom: 16%; right: 1.3%;
z-index: 5;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

#filmarksSP{ display: none;}

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

bnr L

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

#bnrLpc{
width: 20%;
position: absolute;
bottom: 10%; left: 10px;
z-index: 10;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

#bnrLpc2{
width: 20%;
position: absolute;
bottom: 10px; left: 10px;
z-index: 10;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

.bnrL{
width: 100%;
margin-top: 7px;
}

.bnrL img{
border: 2px solid #fff;
box-sizing: border-box;
}

#bnrLsp{
display: none;
}

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

sns

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

#iX{
background: url("../images/i_x.png") no-repeat center;
background-size: auto 80%;
width: 50px; height: 50px;
position: absolute;
top: 15px; left: 15px;
z-index: 10;
transition: all 0.3s ease;
text-indent: -99999px;
overflow: hidden;
}

#iFB{
background: url("../images/i_fb.png") no-repeat center;
background-size: auto 80%;
width: 50px; height: 50px;
position: absolute;
top: 15px; left: 65px;
z-index: 10;
transition: all 0.3s ease;
text-indent: -99999px;
overflow: hidden;
}

#iInstagram{
background: url("../images/i_instagram.png") no-repeat center;
background-size: auto 80%;
width: 50px; height: 50px;
position: absolute;
top: 15px; left: 115px;
z-index: 10;
transition: all 0.3s ease;
text-indent: -99999px;
overflow: hidden;
}

#iTiktok{
background: url("../images/i_tiktok.png") no-repeat center;
background-size: auto 80%;
width: 50px; height: 50px;
position: absolute;
top: 15px; left: 165px;
z-index: 10;
transition: all 0.3s ease;
text-indent: -99999px;
overflow: hidden;
}

#iX a,#iFB a,#iInstagram a,#iTiktok a{
width: 100%; height: 100%;
display: block;
}

#iX:hover,#iFB:hover,#iInstagram:hover,#iTiktok:hover{
opacity: 0.7;
cursor: pointer;
}

#iX_sp,#iFB_sp,#iInstagram_sp,#iTiktok_sp{ display: none;}



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

mvck

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

#mvtkPC{
width: 20%;
line-height: 0;
position: absolute;
bottom: 10px; left: 10px;
z-index: 5;
animation: fadeanm 1s ease 1.5s forwards;
opacity: 0;
}

.mvtk_online{
background: #e61e0f;
width: 50%; height: 100%;
float: left;
text-align: center;
}

.mvtk_card{
background: #96d503;
width: 50%; height: 100%;
float: left;
text-align: center;
}

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


#mvtkSP{ display: none;}

#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;
}

#mvckBG{
background: #fff;
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: #fff;
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;
}

#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 {
text-align: center;
font-size: 16px;
margin: 2px;
}

#topmovarea .movie .tab_area li a{
background: #2D180D;
display: block;
line-height: 55px;
text-decoration: none;
color: #fff;
float: left;
padding: 0 30px;
min-width: 200px;
}

#topmovarea .movie .tab_area li a.active{
background: #ec5300;
color: #fff;
}

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

cast

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


.contentM{
width: 100%;
font-family: "field-gothic", sans-serif;
font-weight: 900;
font-style: normal;
font-size: 2vw;
padding: 0 0 1vw;
text-align: center;
color: #512000;
}

#castAll{
width: 100%;
position: relative;
overflow: hidden;
padding: 4vw 0 5vw;
margin: 0 auto;
border-top: 2px dotted #512000;
}

#castArea{
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.castBoxGoro{
width: 100%;
margin: 3vw auto 1vw;
display: flex;
align-items: center;
}

.castBox{
width: 30%;
margin: 3vw 0 0;
}

.castImgGoro{
width: 50%;
margin: 0 5% 0 0;
pointer-events: none;
}

.castImg{
width: 100%;
margin: 0 5% 0 0;
pointer-events: none;
}

.castImg01{ background: url("../images/cast/cast01.jpg") no-repeat center;}
.castImg02{ background: url("../images/cast/cast02.jpg") no-repeat center;}
.castImg03{ background: url("../images/cast/cast03.jpg") no-repeat center;}
.castImg04{ background: url("../images/cast/cast04.jpg") no-repeat center;}
.castImg05{ background: url("../images/cast/cast05.jpg") no-repeat center;}
.castImg06{ background: url("../images/cast/cast06.jpg") no-repeat center;}
.castImg07{ background: url("../images/cast/cast07.jpg") no-repeat center;}
.castImg01,.castImg02,.castImg03,.castImg04,.castImg05,.castImg06,.castImg07{
background-size: cover;
width: 100%;
position: relative;
}

.castImg01:before,.castImg02:before,.castImg03:before,.castImg04:before,.castImg05:before,.castImg06:before,.castImg07:before{
content:"";
display: block;
padding-top: 65%;
}

.castTxtAll{ width: 76%;}
.castTxtAll2{ width: 100%; padding: 1vw 0 0}

.castNMgoro,.castNM{
width: 100%;
font-size: 1.6vw;
line-height: 1em;
padding: 0 0 1vw;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 800;
color: #512000;
}

.castNMe{ font-size: 40%; letter-spacing:0.3vw; color: #d38724;}

.castTxt{
width: 100%;
font-size: 1vw;
line-height: 1.8em;
letter-spacing: 0.02vw;
}


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

music

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

#musicAll{
width: 100%;
position: relative;
overflow: hidden;
padding: 4vw 0;
margin: 0 auto;
border-top: 2px dotted #512000;
}

#musicArea{
width: 65%;
margin: 0 auto;
}

.musicBox{
width: 100%;
margin: 4vw auto 1vw;
display: flex;
align-items: center;
justify-content: space-between
}

.musicImg{
width: 40%;
margin: 0 5% 0 0;
pointer-events: none;
}

.musicTxtAll{ width: 55%;}

.musicTxtBox{
width: 100%;
margin: 1.6vw 0 0;
}

.musicNM{
width: 100%;
font-size: 1.6vw;
line-height: 1.6em;
padding: 3vw 0 0.5vw;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 800;
color: #512000;
text-indent: -0.5em;
}

.musicNMe{
width: 100%;
font-size: 0.7vw;
line-height: 1.8em;
letter-spacing:0.3vw;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 800;
color: #d38724;
}

.musicMM{
width: 100%;
font-family: "field-gothic", sans-serif;
font-weight: 900;
font-style: normal;
margin: 0.5vw 0;
font-size: 1.2vw;
line-height: 2.5em;
text-indent: 1em;
color: #512000;
border: 1px solid #939393;
position: relative;
cursor: pointer;
transition: all 0.3s ease;
}

.musicMM:hover{ opacity: 0.7;}

.musicTri{
width: 12px;
position: absolute;
top: 50%; right: 3em;
transform: translateY(-50%);
z-index: 1;
pointer-events: none;
color: #923b00;
font-size: 12px;
}

.musicTxt{
width: 100%;
}

.musicTxt2{
width: 100%;
display: none;
}

.musicTxtM{
width: 100%;
font-size: 1vw;
line-height: 1.8em;
}



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

bnr S

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

#bnrSall{
width: 100%;
padding: 2vw 0;
text-align: center;
border-top: 2px dotted #2D180D;
}

#bnrSall img{ margin: 5px;}

#hellomovie{
width: 100%;
padding: 0 0 2vw;
text-align: center;
}


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

footer

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

#billing{
background: url("../images/billing.png") no-repeat center;
background-size: contain;
width: 70%; max-width: 1000px;
margin: 0 auto 40px;
}

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

#billing h5{
text-indent:-999999px;
position: absolute;
}

footer{
background: url("../images/bg_footer.jpg") no-repeat center;
background-size: cover;
width: 100%;
padding: 45px 0 180px;
font-size: 14px; 
letter-spacing: 1px;
line-height: 1.5em;
text-align: center;
color: #fff;
}

#sharearea{
width: 100%;
margin: 0 auto 40px;
text-align: center;
line-height: 1em;
font-size: 20px;
font-family: "field-gothic", sans-serif;
font-weight: 900;
font-style: normal;
}

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

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

#privacy a{ color: #fff;}

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


#btnpagetop{
background: #fff;
width: 60px; height: 60px;
line-height: 60px;
text-align: center;
position: fixed;
bottom: 15px; right: 15px;
z-index: 20;
font-size: 21px;
transition: all .3s;
filter:drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.4));
border-radius: 5px;
}

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

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