@charset "utf-8";

/*-------------------------------------------------Reset*/
html{font-size: 62.5%;width: 100%;overflow-x: auto;min-width: auto;}
body{-webkit-text-size-adjust: 100%;font-size: 1.3rem;}

.commonTtl{margin-bottom: 20px;position: relative;}
.commonTtl .main{font-size: 5.3vw;padding-bottom: 8px;}
.commonTtl .main span{
}
.commonTtl .main span + span{
}
.commonTtl .sub{
}

/*-------------------------------------page*/
#page-top{
    width: 50px;
    height: 50px;
}
#page-top p{}
#page-top:hover{}

/*-------------------------------------Menu*/
.Menu{flex-wrap: wrap;padding: 6px 0;}
.Menu li{
    width: 50%;
    box-sizing: border-box;
    font-size: 12px;
    padding: 0;
}
.Menu li:first-child{
    width: 60%;
}
.Menu li:nth-of-type(2){
    width: 40%;
}
.Menu li:nth-of-type(even){
    text-align: right;
}
.Menu li + li{}
.Menu li a{}
.Menu li a:after{content:"\f107";font-family:FontAwesome;display: inline-block;padding-left: 3px;}
.Menu li a:hover{}
.header_change{
    /* background-color: initial; */
}
.header_change.show{
    padding: 0;
}

.header_change .Menu{
    background-color: rgb(49 49 49 / 90%);
    width: 100%;
    border: none;
    box-sizing: border-box;
    display: block;
    padding-left: 80px;
    display: none;
}
.header_change .Menu .close:before{content:"×";font-size: 60px;position: absolute;left: 10px;top: 6px;line-height: 1;}
.header_change .Menu li{
    width: 100% !important;
    text-align: left;
    font-size: 14px;
}
.header_change .Menu li + li{
    border-top: 1px solid rgb(255 255 255 / 30%);
}

.header_change .Menu li a{
    display: block;
    padding: 12px;
    color: #fff;
}
.BtmMenuArea .humb{
    display: block;
    position: absolute;
    background-color: rgb(255 255 255 / 70%);
    font-family: 'Barlow Condensed', sans-serif;
    right: 10px;
    top: 10px;
    padding: 0 10px;
    font-size: 10px;
    text-align: center;
    width: 45px;
    height: 45px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    padding-top: 6px;
    color: #000;
    box-shadow: 0 0 4px rgb(0 0 0 / 30%);
    font-weight: bold;
}
.BtmMenuArea .humb span{border-top: 1px solid #000;display: block;padding-top: 5px;letter-spacing: 1px;/* padding-left: 2px; */position: relative;margin-top: 5px;}
.BtmMenuArea .humb span:before,
.BtmMenuArea .humb span:after{content:"";border-top: 1px solid #000;display: block;width: 100%;height: 1px;/* padding-left: 2px; */}
.BtmMenuArea .humb span:before{
    margin-bottom: 2px;
}
.BtmMenuArea .humb span:after{content:"";position: absolute;left: 0;top: -6px;}

.BtmMenuArea .humb.open{
    right: auto;
    left: 15px;
    top: 15px;
    padding: 0;
    display: block;
    background-color: initial;
    z-index: 9;
    box-shadow: none;
}
.BtmMenuArea .humb.open span{
    display: none;
}
.BtmMenuArea .humb.open:before,
.BtmMenuArea .humb.open:after{content:"";width: 2px;height: 47px;background: #fff;top: 20px;display: block;left: 20px;position: absolute;}
.BtmMenuArea .humb.open:before{transform: translate(-50%,-50%) rotate(45deg);}
.BtmMenuArea .humb.open:after{transform: translate(-50%,-50%) rotate(-45deg);}

/*-------------------------------------------------MV*/
#MV{
    background-image: url(../images/MV_smp.jpg);
    height: auto;
    padding-bottom: 20px;
}
#MV nav{display: block;padding: 15px 0 5px 0;}
#MV nav .logo{
    align-items: center;
    margin-bottom: 15px;
}
#MV nav .logo img{
    width: 50%;
    margin: 0 auto;
    display: block;
}
#MV nav .btn{
}
#MV nav .btn a{
    text-align: center;
}
#MV nav .btn a:hover{}

#MV h1{padding-top: 20px;margin-bottom: 15px;}
#MV h1 .sub{font-size: 4vw;}
#MV h1 .main{font-size: 5vw;}
#MV h1 .en{font-size: 4vw;}
#MV .mainTxt{font-size: 3.1vw;width: 90%;margin: 0 auto;}
#MV .mainTxt span{display: inline;}
#MV .mainTxt span + span{}

#MV .News{
    width: 90%;
    /* background-color: rgb(255 255 255 / 25%); */
    margin-top: 30px;
    padding: 10px;
    display: block;
}
#MV .News h2{
    font-size: 12px;
}
#MV .News .Entry{
    width: 100%;
    padding-bottom: initial;
}
#MV .News .Entry + .Entry{
    margin-top: 15px;
}
#MV .News .Entry .photo{}
#MV .News .Entry .photo img{}
#MV .News .Entry .photo .caption{}
#MV .News .Entry dl{}
#MV .News .Entry dt{}
#MV .News .Entry dd{}
#MV .News .Entry dd .txt{}
#MV .News .Entry dd .btn{
    margin-top: 5px;
}
#MV .News .Entry dd .btn a{
    padding: 5px;
    margin: 0;
}
#MV .News .Entry dd .btn a:hover{}
#MV .News .Entry dd. btn a:after{}

/*---------------------------------About*/
#About{flex-direction: column;}
#About:before,
#About:after{display: none;}
#About .Inner{
    padding: 25px 0;
    background-color: inherit;
    width: 90%;
    margin: 0 auto;
}
#About h2{
    padding-bottom: 5px;
}

#About .Entry{
    width: 100%;
}
#About .Entry + .Entry{
    margin-top: 50px;
}

#About .Entry + .Entry:before{
    margin: 40px 0;
}
#About .Entry .Title{
    display: block;
    margin-bottom: 20px;
}
#About .Entry .Main{}
#About .Entry .Main h2{
    width: 100%;
    /* display: flex; */
    /* align-items: baseline; */
}
#About .Entry .main{
    font-size: 16px;
}
#About .Entry .FontTtl{
    padding-right: 10px;
}
#About .Entry .sub{
    font-size: 10px;
}
#About .Entry .Data{/* display: flex; */justify-content: space-around;width: 100%;padding-bottom: 0;}
#About .Entry .Data dl{}
#About .Entry .Data dt{
    font-size: 10px;
}
#About .Entry .Data dd{
    font-size: 10px;
}
#About .Entry .btn{
    width: 100%;
}
#About .Entry .btn a{}
#About .Entry .btn a:hover{}
#About .Entry .btn a:after{}
#About .Entry .txt{
    width: 100%;
    padding-bottom: 15px;
    font-size: 3.1vw;
}
#About .Entry .Photo{width: 100%;}
#About .Entry .Photo img{
    width: 100%;
}
#About .Entry .Recom{}
#About .Entry .Recom h2{}

#About .Entry .Recom .FontTtl{
    font-size: 13px;
}
#About .Entry .Recom .Item{
    display: block;
}
#About .Entry .Recom .RecomEntry{
    display: block;
    width: 100%;
    padding: 0;
    padding-left: 16px;
}
#About .Entry .Recom .RecomEntry + .RecomEntry{
    padding-bottom: 20px;
}
#About .Entry .Recom .RecomEntry .photo{
    width: 90%;
    line-height: 2;
    padding-top: 15px;
}
#About .Entry .Recom .RecomEntry .photo .caption{}
#About .Entry .Recom .RecomEntry img{}
#About .Entry .Recom .RecomEntry dl{
    padding: 0;
}
#About .Entry .Recom .RecomEntry dt{
    width: 86%;
}
#About .Entry .Recom .RecomEntry dt span{}
#About .Entry .Recom .RecomEntry dd{
    display: block;
}
#About .Entry .Recom .RecomEntry .txt{
    width: 90%;
    font-size: 3.1vw;
    padding-bottom: 0px;
}
#About .Entry .Recom .RecomEntry .btn{
    width: 90%;
}
#About .Entry .Recom .RecomEntry .btn a{}
#About .Entry .Recom .RecomEntry .btn a:hover{}
#About .Entry .Recom .RecomEntry .btn a:after{}
#About .Entry .big.btn{width: 100%;}
#About .Entry .big.btn a{}
#About .Entry .big.btn a:hover{}
#About .Entry .big.btn a:after{}

#About .Entry .comment{
    text-align: left;
}

#About .comingsoon{
    }
#About .comingsoon .box{
    width: 100%;
    padding: 10px;
    font-size: 13px;
    }
#About .comingsoon .box p{font-size: 3.1vw;}
#About .comingsoon .box p + p{}
#About .comingsoon .box p.btn{}
#About .comingsoon .box p.btn a{padding: 10px;}
#About .comingsoon .box p.btn a:hover{}
#About .comingsoon .box p.btn a:after{}


#About .OrdermadeTicket{
    margin: 20px 0;
}

#About .OrdermadeTicket .price{}
#About .OrdermadeTicket .price .btn{}
#About .OrdermadeTicket .price .btn a{}
#About .OrdermadeTicket .price .btn a:after{}
#About .OrdermadeTicket .price .btn a:hover{}
#About .OrdermadeTicket .price .txt{}
#About .OrdermadeTicket .price dl{}
#About .OrdermadeTicket .price dt{}
#About .OrdermadeTicket .price dd{}
#About .OrdermadeTicket .price dd ul{}
#About .OrdermadeTicket .price dd li{}
#About .OrdermadeTicket .price dd li + li{}
#About .OrdermadeTicket .price dd li strong{}
#About .OrdermadeTicket .price dl + dl{}

#About .OrdermadeTicket .price .ticket{}
#About .OrdermadeTicket .price .ticket p{
    font-size: 3vw;
}
#About .OrdermadeTicket .price .ticket p + p{
    margin-top: 5px;
}
#About .OrdermadeTicket .price .ticket strong{
    font-size: 3.8vw;
}
#About .OrdermadeTicket .price .ticket span{
    font-size: 3.5vw;
}
#About .OrdermadeTicket .price .ticket .info{}

#About .OrdermadeTicket{
    width: 100%;
    min-width: 100%;
    max-width: 100%;
}
#About .OrdermadeTicket .Entry{}
#About .OrdermadeTicket .Entry h3{
    font-size: 3.5vw;
    padding: 0;
    width: 86%;
    text-align: center;
    top: -15px;
}

#About .OrdermadeTicket .Entry + .Entry{}
#About .OrdermadeTicket .Entry .box{}
#About .OrdermadeTicket .Entry .box .Title{
    font-size: 3.5vw;
}

#About .OrdermadeTicket .Entry .box + .box:before {}

#About .OrdermadeTicket .CommonTxt{
    font-size: 3.1vw;
    width: 90%;
    margin: 0 auto;
    padding-top: 30px;
    text-align: left;
}
#About .OrdermadeTicket .btn{display: block;width: 100%;margin: 0 auto;padding-top: 15px;}
#About .OrdermadeTicket .btn a{
    margin-bottom: 10px;
    text-align: center;
    padding: 10px;
}
#About .OrdermadeTicket .btn a:hover{}


/*---------------------------------Tour*/
#Tour{
    padding-top: 20px;
}
#Tour h2{
    margin-bottom: 5px;
}
#Tour .Area{
    padding-bottom: 20px;
}
#Tour .Area .Inner{}
#Tour .Area ul{width: 100%;justify-content: center;}
#Tour.Area ul:after{}
#Tour .Area li{
}
#Tour.Area li:before{}
#Tour .Area li a{}
#Tour .Area li a:before{}
#Tour .Area li a:hover:before{}
#Tour .Area li a p{}
#Tour .Area li a:hover p{}

/*---------------------------------Ordermade*/
#Ordermade{
    margin: 20px 0;
}
#Ordermade .CommonTxt{
    font-size: 3.1vw;
    width: 90%;
    margin: 0 auto;
}
#Ordermade .btn{display: block;width: 70%;margin: 0 auto;padding-top: 15px;}
#Ordermade .btn a{
    margin-bottom: 10px;
    text-align: center;
}
#Ordermade .btn a:hover{}

#Ordermade .ex{
    width: 90%;
    margin-top: 20px;
    font-size: 3.1vw;
}
#Ordermade .ex .exttl{}
#Ordermade .ex .name{
    display: block;
}
#Ordermade .ex .name li{}
#Ordermade .ex .name li + li{
    padding-left: 0px;
    padding-top: 0;
}
#Ordermade .ex .name li:before{
    text-align: left;
    padding-left: 10px;
}

/*---------------------------------Qualita*/
#Qualita{
    padding: 20px 20px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
}
#Qualita h2{}
#Qualita .Inner{
    width: 100%;
    display: block;
}
#Qualita .Inner .main{
    padding: 0;
}
#Qualita .Inner .main .infoTxt{}
#Qualita .Inner .main .infoTxt dt{}
#Qualita .Inner .main .infoTxt dt span{
    font-size: 4vw;
    display: inline;
}
#Qualita .Inner .main .infoTxt dd{}
#Qualita .Inner .main .btn{
    margin-top: 20px;
    margin-bottom: 10px;
}
#Qualita .Inner .main .btn a{}
#Qualita .Inner .main .btn a:hover{}
#Qualita .Inner .photo{
    width: 100%;
}
#Qualita .Inner .photo img{}

/*---------------------------------Contact*/
#Contact{
    background-image: url(../images/about_02.jpg);
    padding: 20px 0;
    position: relative;
    background-size: cover;
    background-color: #0d0d0d;
}
#Contact:before{content:"";background-color: rgb(0 0 0 / 60%);left: 0;top: 0;position: absolute;width: 100%;height: 100%;}
#Contact .official{}
#Contact .official a{}
#Contact .official a:hover{}
#Contact .Inner{
    width: 90%;
    padding-bottom: 0;
}
#Contact .Inner .caution{
    padding-top: 30px;
    position: relative;
}
#Contact .Inner .tel{
    color: #fff;
    text-decoration: none;
    font-size: 9vw;
}
#Contact .Inner .tel dt{
    font-size: 4vw;
    margin-bottom: 0;
}
#Contact .Inner .tel dd{}
#Contact .Inner .tel dd strong{}
#Contact .Inner .tel dd span{
    padding: 0;
    font-size: 14px;
}
#Contact .Inner .tel .atte{}
#Contact .Inner .tel .txt{}
#Contact .Inner .btn{
    display: block;
    margin-top: 30px;
}
#Contact .Inner .btn li{}
#Contact .Inner .btn li + li{
    margin-left: 0;
    margin-top: 20px;
}
#Contact .Inner .btn a{
    padding: 10px;
    font-size: 16px;
}
#Contact .Inner .btn a:hover{}

/*---------------------------------Contact*/
#Bn{
    padding: 30px 30px;
}
#Bn .Inner{
    width: 100%;
    display: block;
}
#Bn .Entry{
    width: 100%;
    padding: 10px;
}
#Bn .Entry + .Entry{
    margin-top: 20px;
}
#Bn .Entry dl{}
#Bn .Entry dt{}
#Bn .Entry dd{}
#Bn .Entry dt a{}
#Bn .Entry .photo{
}
#Bn .Entry .photo img{}
#Bn .Entry:hover{}
#Bn .Entry:hover .photo{}
#Bn .Entry:hover dt a{}

/*---------------------------------Comment*/
#Comment{}
#Comment.gray{
    padding-top: 15px;
    padding-bottom: 30px;
}
#Comment .box{
    width: 90%;
    padding: 10px;
    font-size: 13px;
}
#Comment .box p{
    font-size: 3.1vw;
}
#Comment .box p + p{}
#Comment .box p.btn{}
#Comment .box p.btn a{
    padding: 10px;
}
#Comment .box p.btn a:hover{}
#Comment .box p.btn a:after{}

/*----------------------------------FairBn*/
#FairBn{
    padding-bottom: 30px;
}
#FairBn .box{
    width: 90%;
    display: block;
}

#FairBn .box h2{text-align: center;font-size: 15px;padding-bottom: 10px;display: flex;align-items: center;justify-content: center;white-space: nowrap;width: 100%;}
#FairBn .box h2:before,
#FairBn .box h2:after{content:"";height: 1px;display: block;width: 100%;height: 1px;background-color: #a1a1a1;}
#FairBn .box h2:before{
    margin-right: 10px;
}
#FairBn .box h2:after{
    margin-left: 10px;
}
#FairBn .box a{
    display: block;
    margin-bottom: 10px;
    line-height: 0;
    box-shadow: 0 0 3px rgb(0 0 0 / 40%);
}

/*--------------------------Attention*/
.Attention{
	padding-bottom: 14px;
	margin-bottom: 30px;
}
.Attention .Ttl{
	font-size: 4.5vw;
}
.Attention .Ttl:before,.Attention .Ttl:after{}
.Attention .Ttl:before{
	margin-right: 4px;
}
.Attention .Ttl:after{
	margin-left: 4px;
}
.Attention dl{
	display: block;
}
.Attention dt{
    width: 100%;
}
.Attention dd{
	padding-left: 0;
	font-size: 3.5vw;
}
.Attention dl + dl{}