body {
background: #eebfbb;
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: 1vw;
line-height:2em;
margin: 0px;
}


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

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

.no-wrap { display: inline-block;}
.no-space{ letter-spacing: -0.1vw;}


@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:-60px;
padding-top:60px;
text-indent: -99999px;
}

[data-ruby] {
    position: relative;
}
[data-ruby]::before {
    content: attr(data-ruby);
    position: absolute;
	width: 200%;
	text-align: center;
    top: -1.8em;
    left: -50%;
    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%;
padding: 0;
margin: 0;
line-height: 0;
position: relative;
overflow-x: hidden;
}

.mainFrameL,.mainFrameR{
display: none;
}


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

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

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

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

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

#mainImg{
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: scaleanm 5s cubic-bezier(0,.64,.41,1) 0.1s forwards;
opacity: 0;
}

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

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

#mainName{
background: url("../images/top3/name_pc.png") no-repeat center;
background-size: contain;
width: 37.33%; height: 3.2%;
position: absolute;
top: 1.2%; left: 52.9%;
z-index: 5;
animation: fadeanm 1s ease 4s forwards;
opacity: 0;
}

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

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

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

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

#mainCarAll{
width: 7.2%; height: 8.7%;
position: absolute;
top: 64%; left: 6.66%;
z-index: 6;
animation: taxianm 6s ease 2s forwards;
opacity: 0;
}

#mainCar{
background: url("../images/top3/taxi.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: 120px; height: 50px;
position: fixed;
top: 5px; right: 5px;
z-index: 40;
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: 48px auto;
width: 50px; height: 50px;
transition: all 0.3s ease;
text-indent: -99999px;
overflow: hidden;
}

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

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

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

bnr L

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

#bnrL{
width: 22%;
position: absolute;
top: 76%; left: 12%;
z-index: 10;
animation: fadeanm 1s ease 2.6s forwards;
opacity: 0;
}

#bnrLsp{
display: none;
}

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

report

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

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

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

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

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

#repoTxtAll::-webkit-scrollbar{
width: 5px;
height: 5px;
}

#repoTxtAll::-webkit-scrollbar-track {
background: #e2e2e2;
}

#repoTxtAll::-webkit-scrollbar-thumb {
background: #e08b9a;
}


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

#repoTitle{
width: 97%;
font-size: 1.8vw;
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 2em;
text-align: center;
pointer-events: none;
}

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



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

movie

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

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

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

#topmovarea .movie {
width: 70%;
min-width: 640px;
margin: 0 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: #b98f96;
width: 24%;
line-height: 40px;
text-align: center;
font-size: 1.1vw;
margin: 0.4%;
font-weight: 700;
}

#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_pc.png") no-repeat center;
background-size: contain;
width: 78%;
position: relative;
margin: 0 auto 2em;
}

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

.introTxt{
width: 76%;
font-size: 1.2vw;
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: 50%;
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: 200px; height: 200px;
margin: 3em auto 0;
}

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

bnr S

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

#bnrSall{
width: 100%;
padding: 2vw 0 3.5vw;
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: 35%; min-width: 370px;
margin: 0 auto;
position: relative;
overflow: hidden;
}

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

#shareM{
width: 15%; line-height: 2.5em;
margin: 0 auto;
font-size: 16px;
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;
}

#shareX:hover,#shareLINE:hover,#shareFB:hover{
opacity: 0.7;
cursor: pointer;
}


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

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

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

#btnpagetop{
background: #fff;
width: 70px; height: 70px;
position: fixed;
bottom: 15px; right: 15px;
z-index: 20;
line-height: 70px;
font-size: 22px;
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;
}

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