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


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

.sp{ display: block;}
.pc{ display: none;}
.fontS{ font-size: 80%; letter-spacing: 0.1em;}
.efblock{ width: 100%;}

.no-wrap { display: inline-block;}
.no-space{ letter-spacing: -2px;}



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

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

@keyframes  lineUnderanm {
0% { transform: translateX(100%); opacity: 1;}
100% { transform: translateX(0) ; opacity: 1;}
}

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

[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
	width: 180%;
	text-align: center;
    top: -1.8em;
    left: -40%;
    right: 0;
    margin: 0 auto;
    font-size: 0.6em;
	letter-spacing: 0;
}

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

loading

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

#loader {
background: url("../images/top2/taxi.png") no-repeat center;
background-size: contain;
width: 120px;
height: 120px;
position: fixed;
top: 50%;
left: 50%;
margin-top: -60px;
margin-left: -60px;
z-index: 200;
opacity: 1;
}

#loader-bg {
width: 100%;
height: 100%;
background: #e9cbbd;
position: fixed;
top: 0px;
left: 0px;
z-index: 150;
}


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

main

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

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

.mainFrameL{
background: #c89098;
width: 1.3%; height: 100%;
position: fixed;
top: 0; left: 0;
z-index: 2;
pointer-events: none;
}

.mainFrameR{
background: #c89098;
width: 1.3%; height: 100%;
position: fixed;
top: 0; right: 0;
z-index: 2;
pointer-events: none;
}


#main{
width: 100%;
position: relative;
overflow: hidden;
margin-top: 50px;
}

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

#mainAll{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
overflow: hidden;
}


#mainImgFrame{
background: #b58287;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 2;
}

#mainImgAll{
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
overflow: hidden;
}

#mainImg{
background: url("../images/top3/main_img_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) 0.1s forwards;
opacity: 0;
}


#logo{
background: url("../images/top3/logo_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 13.5%;
position: absolute;
top: 49.5%; left: 0;
z-index: 5;
animation: fadeanm 1s ease 1.5s forwards;
opacity: 0;
}

#roadshow{
background: url("../images/top3/roadshow_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: fadeanm 2s ease 4s forwards;
opacity: 0;
}

#mainCatch{
background: url("../images/top3/catch_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 5;
animation: fadeanm 1s ease 2s forwards;
opacity: 0;
}

#mainName{
display: none;
}

#mainbilling{
background: url("../images/top3/billing_sp.png") no-repeat center;
background-size: contain;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 6;
animation: fadeanm 1s ease 1.8s forwards;
opacity: 0;
}

#mainShochiku{
background: url("../images/top3/shochiku130.png") no-repeat center;
background-size: contain;
width: 5.8%; height: 4.8%;
position: absolute;
bottom: 1%; right: 3%;
z-index: 5;
animation: fadeanm 1s ease 2.6s forwards;
opacity: 0;
}


@keyframes  taxianm {
0% { transform: translateX(100%); opacity: 0;}
100% { transform: translateX(0) ; opacity: 1;}
}

#mainCarAll{
width: 11.33%; height: 5.1%;
position: absolute;
top: 93%; left: 15%;
z-index: 10;
animation: taxianm 3s linear 3s forwards;
opacity: 0;
}

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

.buruburu {
animation: hurueru .5s  infinite;
}

@keyframes hurueru {
0% {transform: translate(0px, 0px);}
25% {transform: translate(0px, 1px);}
50% {transform: translate(0px, 0px);}
80% {transform: translate(0px, 1px);}
100% {transform: translate(0px, 0px);}
}

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

sns

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

#snsIcon{
width: 90px; height: 40px;
position: fixed;
top: 5px; right: 0;
z-index: 60;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#iX{ background: #fff url("../images/i_x.png") no-repeat center;}
#iInstagram{ background: #fff url("../images/i_instagram.png") no-repeat center;}
#iTiktok{ background: #fff url("../images/i_tiktok.png") no-repeat center;}
#iX,#iInstagram,#iTiktok{
background-size: 98% auto;
width: 40px; height: 40px;
text-indent: -99999px;
overflow: hidden;
margin: 0;
}

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


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

bnr L

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

#bnrL{
display: none;
}

#bnrLsp{
background: #fffff3;
width: 100%;
margin: 0 0 0;
padding: 3vw 0 1vw;
line-height: 0;
}

.bnrLsp{
width: 86%;
margin: 0.7em auto;
}



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

report

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

#repoAll{
width: 100%; height: 100%;
position: fixed;
top: 0; left: 0;
z-index: 22;
display: none;
}

#repoMain{
width: 100%; height: 100%;
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%,-50%);
z-index: 5;
box-shadow: 0 15px 15px rgba(0, 0, 0, 0.2);
border: 6px double #f3d7dc;
box-sizing: border-box;
}

#repoBG{
background: #fff;
width: 100%; height: 100%;
position: absolute;
top: 0; left: 0;
z-index: 1;
opacity: 0.95;
}

#repoTxtAll{
width: 90%; height: 86%;
position: absolute;
top: 10%; left: 5%;
z-index: 2;
overflow-y: auto;
display: none;
}

#repoClose{
background: url("../images/btn_close.png") no-repeat center;
background-size: contain;
width: 50px; height: 50px;
position: absolute;
top: 5px; right: 5px;
z-index: 5;
cursor: pointer;
opacity: 0.5;
}

#repoTitle{
width: 97%;
font-size: 4vw;
font-weight: 700;
line-height: 1.4em;
margin: 0 0 1em;
padding: 0.5em 0;
border-top: 6px double #6a6a6a;
border-bottom: 6px double #6a6a6a;
text-align: center;
}

.repoImg{
width: 97%;
margin: 0 0 1.2em;
pointer-events: none;
text-align: center;
}

.repoImg img{ width: 100%;}

.repoTxt{
width: 97%;
font-size: 3.2vw;
line-height: 2.2em;
margin: 0 0 2em;
}



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

movie

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

#trailerAll{
background: #fffff3;
width:100%;
margin:0 auto;
line-height: 0;
position: relative;
padding: 2vw 0;
}


#topmovarea{
width:100%;
margin:0 auto;
padding: 5vw 0;
line-height: 0;
position: relative;
border-top: 2px dotted #b98f96;
border-bottom: 2px dotted #b98f96;
}

#movieM{
width: 30%;
position: absolute;
top: 3%; left: 3%;
z-index: 10;
}

#topmovarea .movie {
width: 86%;
margin: 1vw auto;
}

#topmovarea .movie .inner {
background-color: #000;
position: relative;
padding-bottom: 56.25%;
height: 0;
margin: 0 auto;
border: 3px double #b98f96;
box-sizing: border-box;
overflow: hidden;
}

#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 {
background: #c89098;
width: 49%;
line-height: 40px;
text-align: center;
font-size: 12px;
margin: 0.5%;
border-radius: 0.1em;
}

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

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



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

introduction

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

#introAll{
background: #fefdf4;
width:100%;
margin:0 auto;
padding: 2vw 0 0;
}

#introCatch{
background: url("../images/top/intro_m_sp.png") no-repeat center;
background-size: contain;
width: 90%;
position: relative;
margin: 0 auto 2em;
}

#introCatch:before{
content:"";
display: block;
padding-top: 30%;
}

.introTxt{
width: 86%;
line-height: 2.2em;
margin: 0 auto;
text-align: center;
}

#introImg{
background: url("../images/top/img_cast.jpg") no-repeat center;
background-size: contain;
width: 80%;
position: relative;
margin: 3em auto;
}

#introImg:before{
content:"";
display: block;
padding-top: 72.33%;
}

#mainCar2{
background: url("../images/top/car2_img.png") no-repeat center;
background-size: contain;
width: 120px; height: 120px;
margin: 2em auto 0;
}


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

bnr S

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

#bnrSall{
width: 100%;
text-align: center;
}


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

footer

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

footer{
width: 100%;
padding: 2em 0 5em;
text-align: center;
}

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

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


#shareM{
width: 100%;
line-height: 2.5em;
margin: 2em auto 0;
font-size: 12px;
letter-spacing: 0.2em;
color: #b95f6c;
font-weight: 700;
}

#sharearea{
width: 100%; height: 40px;
margin: 0 auto 20px;
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
}

#shareX{ background: #fff url("../images/i_x.png") no-repeat center;}
#shareLINE{ background: #fff url("../images/i_line.png") no-repeat center;}
#shareFB{ background: #fff url("../images/i_fb.png") no-repeat center;}
#shareX,#shareLINE,#shareFB{
background-size: 30px auto;
width: 40px; height: 40px;
transition: all 0.3s ease;
text-indent: -99999px;
overflow: hidden;
border-radius: 20px;
margin: 0 3px;
}

#shareX a,#shareLINE a,#shareFB a{
width: 100%; height: 100%;
display: block;
}


#copyright{
background-size: contain;
width: 100%;
margin: 0 auto 20px;
font-size: 10px;
line-height: 1.6em;
text-align: center;
}

#privacy{
background-size: contain;
width: 100%; height: 10px;
margin: 0 auto;
font-size: 10px;
line-height: 10px;
text-align: center;
color: #b95f6c;
}

#privacy a{ text-decoration: underline; color: #b95f6c;}

#btnpagetop{
background: #fff;
width: 50px; height: 50px;
position: fixed;
bottom: 5px; right: 1.3%;
z-index: 10;
line-height: 50px;
font-size: 16px;
text-align: center;
border: 2px solid #f8dfd4;
filter: drop-shadow(2px 2px 3px rgb(0, 0, 0, 0.1));
}

#btnpagetop a{
width: 100%; height: 100%;
display: block;
color: #f28798;
}