@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: 4.7vw;padding-bottom: 8px;}
.commonTtl .main span{
}
.commonTtl .main span + span{
}
.commonTtl .sub{font-size: 13px;}

.btn{flex-direction: column;}
.btn a{
    white-space: normal;
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    line-height: 1.5;
    padding: 15px 17px;
}

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

/*-------------------------------------Menu*/
.menuArea{position:relative;width:100%;display: none;}
.menuArea.fixed{position:fixed;top:0;left:0;width:100%;z-index:9999;display: block;}
.menuArea.header_fixed:before,
.menuArea.header_fixed:after{
    content: none;
}
.menuArea .Inner{display:none;width: 100%;box-sizing:border-box;-webkit-overflow-scrolling:touch;background-color: rgba(0,0,0,0.8);box-sizing: border-box;padding: 10px 10px 0px 60px;}
.menuArea .humb{display:flex;position:absolute;right:10px;top:10px;width:45px;height:45px;box-sizing:border-box;justify-content:center;align-items:center;border-radius:3px;background-color:#fff;box-shadow:0 0 5px rgba(0,0,0,0.2);z-index:10001;padding-top: 7px;}
.menuArea .humb span{border-top:1px solid #000;display:block;padding-top:5px;letter-spacing:.5px;position:relative;font-weight:700;font-size: 10px;color: #000;}
.menuArea .humb span:before,.menuArea .humb span:after{content:"";border-top:1px solid #000;display:block;width:100%;height:1px}
.menuArea .humb span:before{margin-bottom:3px}
.menuArea .humb span:after{content:"";position:absolute;left:0;top:-6px}
.menuArea.open{position:fixed;top:0;left:0;width:100%;z-index:10000}
.menuArea.open .humb{position:fixed;right:auto;left: 4px;top: 4px;background:transparent;box-shadow:none}
.menuArea.open .humb span{display:none}
.menuArea.open .humb:before,.menuArea.open .humb:after{content:"";display:block;position:absolute;width:2px;height:30px;background:#fff;top:50%;left:50%}
.menuArea.open .humb:before{transform:translate(-50%,-50%) rotate(45deg)}
.menuArea.open .humb:after{transform:translate(-50%,-50%) rotate(-45deg)}

.menuArea.open .Close:before,
.menuArea.open .Close:after{content:"";width: 2px;height: 47px;background: #fff;top: 20px;display: block;left: 20px;position: absolute;}
.menuArea.open .Close:before{transform: translate(-50%,-50%) rotate(45deg);}
.menuArea.open .Close:after{transform: translate(-50%,-50%) rotate(-45deg);}

.menuArea ul{
    display: block;
    width: 100%;
}
.menuArea li{
    white-space: inherit;
    width: 100%;
    display: block;
    text-align: left;
    margin-bottom: 7px;
}
.menuArea li + li{}
.menuArea li a{
    display: block;
    border: 1px solid rgb(255 255 255 / 40%);
    padding: 7px 20px 7px 10px;
    line-height: 1.4;
    border-radius: 2px;
    position: relative;
}
.menuArea li a:hover{}
.menuArea li:before{
    content: none;
}
.menuArea li:last-of-type:after{}
.menuArea li a:after{position: absolute;right: 6px;top:50%;margin-top:-0.5em;content:"\f107";font-family:FontAwesome;line-height: 1;font-weight: normal;}

/*-------------------------------------------------MV*/
#MV{
    background-image: url(../images/MV_smp.jpg);
    height: auto;
    padding-bottom: 40px;
    background-size: cover;
}
#MV nav{display: block;padding: 15px 0 5px 0;}
#MV nav .logo{
    align-items: center;
    margin-bottom: 15px;
    width: auto;
}
#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: 3.7vw;padding-bottom: 8px;}
#MV h1 .main{font-size: 21px;display: flex;flex-wrap: wrap;justify-content: center;width: 86%;padding-bottom: 13px;}
#MV h1 .en{font-size: 3.5vw;}
#MV .mainTxt{font-size: 13px;width: 86%;margin: 0 auto;text-align: left;line-height: 1.9;}
#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{}

#MV .notice{
    width: 80%;
    margin-top: 25px;
}
#MV .notice dl{
    text-align: left;
}
#MV .notice dt{
    font-size: 3.8vw;
    line-height: 1.8;
}
#MV .notice dd{
    line-height: 1.6;
    font-size: 3.2vw;
}
#MV .notice ul{}
#MV .notice ul.btn{
    display: block;
}
#MV .notice ul.btn a{padding: 10px 17px;}
#MV .notice ul.btn a:after{}
#MV .notice ul.btn a:hover{}
#MV .notice ul.btn li{}
#MV .notice ul.btn li + li{
    margin-left: 0;
    margin-top: 10px;
}

/*---------------------------------------------About*/
#About{flex-direction: column;background-color: var(--MainColor);}
#About:before,
#About:after{}
#About:before{ background-image: url(../images/about_02_smp.jpg)}
#About:after{background-image: url(../images/about_01_smp.jpg);width: 100%;height: 200px;display: block;}
#About .Inner{
    padding: 30px 0;
    width: 86%;
    margin: 0 auto;
    background-color: inherit;
}
#About  h2{
    margin-bottom: 20px;
}
#About  .txt{}
#About  .txt + .txt{}

#About .Title{
    margin-bottom: 25px;
}
#About .Title dt{}

#About .Title dt strong{
    font-size: 25px;
}

#About .Title dd{}

#About .PriceBox{
    margin-bottom: 25px;
}
#About .PriceBox:before{}
#About .PriceBox:after{}
#About .PriceBox dl{}
#About .PriceBox dt{}
#About .PriceBox dt strong{}
#About .PriceBox dd{}
#About .PriceBox .btn{
    margin-bottom: 13px;
}
#About .PriceBox .btn li{}
#About .PriceBox .btn li a{
    white-space: normal;
    padding: 10px 20px;
}
#About .PriceBox .btn li a:hover{}




/*---------------------------------------------Conductor*/
#Conductor{}

#Conductor .Inner{
    padding: 30px 0;
    width: 86%;
    margin: 0 auto;
}
#Conductor  h2{}
#Conductor  .txt{}
#Conductor  .txt + .txt{}
#Conductor  .txt span{}



/*--------------------------------------------PriceBox*/
.PriceBox{
    padding: 9px 20px;
}
.PriceBox:before, .PriceBox:after {
    width: 7%;
}
.PriceBox:before {}
.PriceBox:after {}
.PriceBox + .PriceBox{}
.PriceBox h4{
    margin-bottom: 2px;
}
.PriceBox h4 .main{
    font-size: 15px;
    flex-wrap: wrap;
    row-gap: 5px;
}
.PriceBox h4 .sub{
    display: block;
    font-size: 13px;
}
.PriceBox h4 .sub span{
    display: block;
}
.PriceBox h4 .sub span + span:before{
    content: none;
}
.PriceBox dl{
    display: block;
    text-align: center;
}
.PriceBox dt{
    margin: 0;
    font-size: 15px;
}
.PriceBox dt strong{
    font-size: 28px;
    letter-spacing: 0;
    display: inline-block;
    padding-right: 2px;
}
.PriceBox dd{}
.PriceBox .atte{}
.PriceBox .atte li{}
.PriceBox .atte li + li{}
.PriceBox .atte li:before{}
.PriceBox .atte + .btn{}
.PriceBox .btn{}
.PriceBox .btn li{}
.PriceBox .btn li a{}
.PriceBox .btn li a:hover{}

/*--------------------------------------------TourWrap*/
.TourWrap{
    padding: 30px 0;
}
.TourWrap h2{}
.TourWrap .commonTtl{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 20px;
}
.TourWrap h2 .main{}
.TourWrap .Inner{
    width: 86%;
}

.TourWrap .Inner .MainTxt{
    font-size: 13px;
    margin-bottom: 24px;
}



.TourWrap .Inner .OtherLink{}
.TourWrap .Inner .OtherLink dt{}
.TourWrap .Inner .OtherLink dd{}
.TourWrap .Inner .OtherLink dd a{}
.TourWrap .Inner .OtherLink dd a:hover{}




/*----------------------------------------------Qualita*/
#Qualita{
    padding: 30px 0;
}
#Qualita h2{}
#Qualita .Inner{
    width: 86%;
    display: block;
}
#Qualita .Inner .main{
    padding: 0;
}
#Qualita .Inner .main .infoTxt{}
#Qualita .Inner .main .infoTxt dt{}
#Qualita .Inner .main .infoTxt dt span{
    font-size: 14px;
}
#Qualita .Inner .main .infoTxt dd{}
#Qualita .Inner .main .btn{
    display: block;
    margin-top: 20px;
}
#Qualita .Inner .main .btn a{}
#Qualita .Inner .main .btn a:hover{}
#Qualita .Inner .photo{
    width: 100%;
    margin-top: 30px;
}
#Qualita .Inner .photo img{}




/*---------------------------------Contact*/
#Contact{
    padding: 30px 0;
    background-image: url(../images/about_02.jpg);
    position: relative;
}
#Contact:before{content:"";background-color: rgb(0 0 0 / 70%);width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
#Contact .official{}
#Contact .official a{}
#Contact .official a:hover{}
#Contact .Inner{
    width: 86%;
    position: relative;
}
#Contact .Inner .caution{
}
#Contact .Inner .tel{
    color: #fff;
}
#Contact .Inner .tel dt{
    font-size: 15px;
}
#Contact .Inner .tel dd{}
#Contact .Inner .tel dd strong{
    font-size: 30px;
}
#Contact .Inner .tel dd span{
    padding: 0;
    margin-top: 20px;
}
#Contact .Inner .tel .atte{}
#Contact .Inner .tel .txt{}
#Contact .Inner .btn{}
#Contact .Inner .btn li{}
#Contact .Inner .btn li + li{}
#Contact .Inner .btn a{}
#Contact .Inner .btn a:hover{}
#Contact .Inner .Attention.Notice{}
#Contact .Inner .Attention.Notice dl{}
#Contact .Inner .Attention.Notice dt{}
#Contact .Inner .Attention.Notice dd{}
#Contact .Inner .Attention.Notice dd strong{}

/*---------------------------Bn-*/
#Bn{}
#Bn .Inner{
    width: 90%;
    flex-direction: column;
    row-gap: 20px;
}
#Bn .Entry{
    width: 100%;
}
#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{}


/*---------------------Preview*/
.OtherConcert{flex-direction: column-reverse;}
.OtherConcert#Other{
    flex-direction: column-reverse;
    background-color: #353535;
}
.OtherConcert:after{
    height: 170px;
    width: 100%;
}
.OtherConcert#Preview:after{background-image: url(../images/about_pre01_smp.jpg);}
.OtherConcert#Other:after{background-image: url(../images/about_pre02_smp.jpg);}
.OtherConcert .Inner{
    padding: 30px 0;
    width: 86%;
    margin: 0 auto;
}
.OtherConcert#Other .Inner{
    background-color: inherit;
}
.OtherConcert .Inner .Main{
    margin-bottom: 20px;
}
.OtherConcert .Inner .Main h2{}
.OtherConcert .Inner .Main .txt{
    font-size: 13px;
    text-align: left;
}
.OtherConcert .Inner .Main .txt + .txt{}
.OtherConcert .Inner .Ticket{
    flex-direction: column;
}
.OtherConcert#Other .Inner .Ticket{}
.OtherConcert .Inner .Ticket h3{
    font-size: 17px;
    margin-bottom: 0;
}
.OtherConcert .Inner .Ticket .atte{
    font-size: 13px;
}
.OtherConcert .Inner .Ticket .atte li{}
.OtherConcert .Inner .Ticket .atte li + li{}
.OtherConcert .Inner .Ticket .atte li:before{}
.OtherConcert .Inner .Ticket .btn{}
.OtherConcert .Inner .Ticket .PriceBox + .btn{}
.OtherConcert .Inner .Ticket .btn li{}
.OtherConcert .Inner .Ticket .btn li a{
    padding: 10px 23px;
}

.OtherConcert#Other .Inner .Ticket .btn li a{
    width: 100%;
    box-sizing: border-box;
}

.OtherConcert#Other .PriceBox:before {}
.OtherConcert#Other .PriceBox:after {}

/*----------------------------OtherCountry*/
#OtherCountry{
    background-image: url(../images/MV_berlin_smp.webp);
    padding: 30px 0;
}
#OtherCountry .Inner{
    width: 86%;
    margin: 0 auto;
}
#OtherCountry h2{
    font-size: 21px;
    margin-bottom: 20px;
}
#OtherCountry h2 .main{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    line-height: 1.5;
    padding-bottom: 4px;
}
#OtherCountry h2 .sub{
    font-size: 80%;
}

#OtherCountry .mainTxt{
    line-height: 1.9;
    font-size: 13px;
    text-align: left;
}
#OtherCountry .mainTxt + .mainTxt{}

#OtherCountry .Sche{
    width: 100%;
    margin: 20px auto 20px auto;
    padding: 20px;
    display: block;
}
#OtherCountry .Sche:before, #OtherCountry .Sche:after {}

#OtherCountry .Sche:before {}

#OtherCountry .Sche:after {}
#OtherCountry .Sche dl{
    display: block;
    width: 100%;
}
#OtherCountry .Sche dl + dl{
    margin-top: 15px;
}
#OtherCountry .Sche dl.long{}
#OtherCountry .Sche dt{
    width: 100%;
    padding: 1px 0;
}
#OtherCountry .Sche dd{
    padding-left: 0;
    margin-top: 4px;
}

#OtherCountry .TourWrap{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
}
#OtherCountry .TourWrap .MainTitle{
    font-size: 18px;
}
#OtherCountry .TourWrap .MainTxt{
    font-size: 12px;
}
#OtherCountry .btn a{}
#OtherCountry .btn a:hover{}