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


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

a:hover {opacity:1;} 

.pc{ display: none;}
.fontS{ font-size: 80%;}
.txtSpace{ letter-spacing: -3px; font-weight: 500;}
.efblock{ width: 100%;}

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


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

.ruby1 {
 display: inline;
}
.ruby1 ruby {
 display: table-cell;
}
.ruby1 rt {
 margin: -1.5em auto 0;
 display: block;
 font-size: 0.5em;
 letter-spacing: -1px;
 transform: scale(0.9,0.9);
 font-family: iroha-26tubaki-stdn,sans-serif;
font-weight: 400;
font-style: normal;
}



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

main

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

#content{
width: 100%;
position: relative;
overflow-x: hidden;
padding: 0;
line-height: 0;
margin: 50px 0 0;
}

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

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

.mainall{
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: 88%; height: 17%;
position: absolute;
top: 3%; left: 6%;
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: 25.6%; height: 10.8%;
position: absolute;
bottom: 2%; right: 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: 30%; height: 10.8%;
position: absolute;
bottom: 2%; right: 3%;
z-index: 5;
animation: fadeanm 2s ease 2.8s forwards;
opacity: 0;
}

#mainImg01{
background: url("../images/img_main01_sp.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_sp.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: 4%; height: 31.45%;
position: absolute;
top: 35.8%; left: 48%;
z-index: 3;
animation: fadeanm 2s ease 4s forwards;
opacity: 0;
}

#catch02{
background: url("../images/catch02.png") no-repeat center;
background-size: contain;
width: 4%; height: 23.27%;
position: absolute;
top: 35.36%; left: 9.33%;
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: 4.5vw;
line-height: 1.6em;
font-weight: 800;
color: #512000;
text-align: center;
letter-spacing: 0;
border-bottom: 2px dotted #512000;
}

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

filmarks

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

#filmarksSP{
background: #fff url("../images/bnr/bnr_filmarks.png") no-repeat center;
background-size: contain;
width: 100%; height: 80px;
border-bottom: 2px dotted #512000;
}

#filmarksPC{ display: none;}


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

bnr L

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

#bnrLsp{
width: 100%;
padding: 10px 0;
border-bottom: 2px dotted #512000;
}

.bnrL{
width: 90%;
margin: 7px auto;
}

#bnrLpc,#bnrLpc2{
display: none;
}
/*---------------------------------------------

sns

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

#iX,#iFB,#iInstagram,#iTiktok{ display: none;}

#iX_sp{
background: url("../images/i_x_bk.png") no-repeat center;
background-size: auto 70%;
width: 45px; height: 45px;
position: fixed;
top: 2.5px; left: 7px;
z-index: 30;
text-indent: -99999px;
overflow: hidden;
}

#iFB_sp{
background: url("../images/i_fb_bk.png") no-repeat center;
background-size: auto 80%;
width: 45px; height: 45px;
position: fixed;
top: 2.5px; left: 47px;
z-index: 30;
text-indent: -99999px;
overflow: hidden;
}

#iInstagram_sp{
background: url("../images/i_instagram_bk.png") no-repeat center;
background-size: auto 80%;
width: 45px; height: 45px;
position: fixed;
top: 2.5px; left: 87px;
z-index: 30;
text-indent: -99999px;
overflow: hidden;
}

#iTiktok_sp{
background: url("../images/i_tiktok_bk.png") no-repeat center;
background-size: auto 80%;
width: 45px; height: 45px;
position: fixed;
top: 2.5px; left: 127px;
z-index: 30;
text-indent: -99999px;
overflow: hidden;
}

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


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

mvck

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

#mvtkPC{
display: none;
}

#mvtkSP{
width: 100%;
line-height: 0;
display: flex;
justify-content: flex-start;
}

.mvtk_online{
width: 50%;
}

.mvtk_card{
width: 50%; 
}

#mvckonlineAll{
width: 100%; height: 100vh;
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: 340px;
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: 50px; height: 50px;
position: absolute;
top: 0; right: 0;
z-index: 2;
cursor: pointer;
}

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

movie

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

#topmovarea{
width:100%;
margin:0 auto;
padding: 6vw 0;
line-height: 0;
/*border-bottom: 2px dotted #512000;*/
}

#topmovarea .movie {
width: 85%;
margin: 1vw 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: 2px auto;
justify-content: center;
}

#topmovarea .movie .tab_area li {
text-align: center;
margin: 0.3vw;
letter-spacing: 0;
}

#topmovarea .movie .tab_area li a{
display: block;
line-height: 3.6em;
text-decoration: none;
background: #2D180D;
color: #fff;
float: left;
font-size: 12px;
padding: 0;
width: 155px;
}

#topmovarea .movie .tab_area li.line2 a{
display: block;
text-decoration: none;
background: #2D180D;
color: #fff;
float: left;
font-size: 12px;
line-height: 1.2em;
padding: 0.6em 0;
width: 155px;
}

#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: 6vw;
padding: 6vw 0;
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: 86%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.castBoxGoro{
width: 100%;
margin: 2vw auto 6vw;
}

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

.castImgGoro{
width: 100%;
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: 100%;padding: 3vw 0 0}
.castTxtAll2{ width: 100%; padding: 3vw 0 0}

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

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

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

.castTxt{
width: 100%;
font-size: 3vw;
line-height: 1.6em;
}


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

music

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

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

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

.musicBox{
width: 100%;
margin: 4vw auto 1vw;
}

.musicImg{
width: 70%;
margin: 0 auto 0.5vw;
pointer-events: none;
}

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

.musicNM{
width: 100%;
font-size: 5vw;
line-height: 1.5em;
padding: 2vw 0;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
font-weight: 800;
color: #512000;
text-align: center;
}

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

.musicMM{
width: 100%;
font-family: "field-gothic", sans-serif;
font-weight: 900;
font-style: normal;
margin: 0.5vw 0 1vw;
font-size: 4vw;
line-height: 3em;
color: #512000;
position: relative;
border: 1px solid #939393;
text-indent: 1em;
}

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

.musicTxt{
width: 100%;
}

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

.musicTxtM{
width: 100%;
font-size: 3vw;
line-height: 1.6em;
padding: 0.8vw 0 2.5vw;
}




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

bnr S

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

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

#bnrSall img{
width: 165px;
margin: 3px;
}

#hellomovie{
width: 100%;
padding: 0 0 40px;
text-align: center;
}

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

footer

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

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

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

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

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

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

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

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

#privacy a{ color: #fff;}

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

#btnpagetop{
background: #fff;
width: 50px; height: 50px;
line-height: 50px;
text-align: center;
position: fixed;
bottom: 10px; right: 10px;
z-index: 20;
font-size: 19px;
filter:drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.4));
border-radius: 5px;
}

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