@charset "utf-8";

@import url('https://use.typekit.net/pgb4alp.css');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500;600;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

/***********************
        COMMON
*************************/

/* *{
    border: 2px solid red;
} */

body {
font-family: 'Zen Kaku Gothic New', "游ゴシック体", YuGothic, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", "ヒラギノ角ゴ ProN W6", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;

}

body_inner{
        min-width: 740px;
}

.flex{
    display: flex;
}

.CB{
    clear: both;
}
*:focus {
    outline: none;
  }
a {
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
    text-decoration: none !important;
    word-wrap:break-word;
}

p a:link {
  color: #C1AD68;
  
  
}
p a:visited {
  color: #C1AD68;
  
}

p{
  font-size: 0.95em;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 1px;
}


/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
.pc1280 { display: block !important; }
.sp1280 { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

.mb-50 {
    margin-bottom: 1.5%;
}
.w90{
    width:90%;
    padding: 2% 5%;
}
.line-through{
  text-decoration-line: line-through;
  text-decoration-style:solid;
}

.Ttl_decoration{
  margin-top: 2%;
  margin-bottom: 3%;
  text-align: center;
  font-size: 3.8em;
  color: #fff;
  letter-spacing: 0px;
  font-weight: bold;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-style: italic;
}

.Ttls_decoration{
  margin-top: 2%;
  margin-bottom: 2%;
  text-align: center;
  font-size: 1.8em;
  color: #032F5E;
  letter-spacing: 0px;
  font-weight: bold;
  font-family: 'Sofia Sans Condensed', sans-serif;
  font-style: italic;
}

/****************
        top-header
**************************/

.header_inner {
    display: flex;
    justify-content:space-between;
}
.header_inner.flex{
}
.header_inner .h-logo {
    /* margin: 0% 2% 1% 1%; */
}
.header_inner a {
}
.header_inner img {
}
.header_inner .h-nav {
/* width: 80%; */
z-index: 10;
}

#nav-drawer {
	display: block;
	z-index:100;
	position: -webkit-sticky; /* safari対応 */
	position: sticky;
	top: 0em;　/* 上端から0em;のところで固定 */
	position: relative;
	height: 3em;
	background-color: none;
	}

/*チェックボックス等は非表示に*/
.nav-unshown {
	display:none;
	}

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 56px;
	height: 46px;
	vertical-align: middle;
	}

/*ハンバーガーアイコン*/
#nav-open span {
	z-index:100;
	position: -webkit-sticky; /* safari対応 */
	position: sticky;
	top: 0em;　/* 上端から0em;のところで固定 */
    right:2em;
	position: absolute;
	display: block;
    margin: 10% 0% 0% 0%;
	width: 3em;
	padding-top: 4em;
	background-image: url("../images/icon_MENU.svg");
	background-size:2.4em;
	background-position:top center;
	background-repeat: no-repeat
	}

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0px;/*全体に広がるように*/
    left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out;
	}

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: -0px;
	left: -105%;
	z-index: 9999;/*最前面に*/
	width: 70%;/*右側に隙間を作る（閉じるカバーを表示）*/
	height: 100%;
	background: #121C39;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5;/*透過具合*/
	}

#nav-input:checked ~ #nav-content {
	left: 0;
	box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

/*★ドロアーメニューはここまで↑*/
/*追記*/
.menu{
    display: flex;
    justify-content: flex-end;
}

.f_box{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    margin: 6% 0 0 0;
}
/* .f_item:first-child{
    margin-right: auto;
    margin: 0 auto 0 1%;
} */

/*ここまで追記*/


li.nav_menu_icon {
	display: block;
	margin:0; 
	width: 4em;
	padding-top: 100%;
	background-image: url("../images/icon_MENU.svg");
	background-size:4em;
	background-position:top center;
	background-repeat: no-repeat
	}

li.nav_text {
    /* font-family: 'Josefin Sans', sans-serif; */
    font-size: 1.6em;
    margin: 1% 2% 0% 1%;
    line-height: 3.2;
    letter-spacing: 2px;
    text-align: center;
    display: table-cell;
    vertical-align:middle;
    font-weight: 700;
    color: ;
    
	}
li.nav_text a {
    text-decoration: none;
    color: #C1AD68;
    letter-spacing: 4px;
    vertical-align:middle;
	}

/*hover effect*/
/*#nav-content ul li a:hover{
    letter-spacing: 5px;
}*/

#nav-content ul li a {
  display: inline-block;
}
#nav-content ul li a:hover {
  -webkit-animation: zoom .3s;
  animation: zoom .3s;
}
@-webkit-keyframes zoom {
  50% {
    -webkit-transform: scale(1.05);
  }
}
@keyframes zoom {
  50% {
    transform: scale(1.05);
  }
}
/*追記*/
.menu {
	width: 100%;
    display: flex;
    align-items: center;
	}

.menu li.nav_text {
    font-family: 'Spectral', serif;
    font-size: 0.9em;
    margin: 1% 2% 0% 1%;
    line-height: 1.2;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
.menu-topmenu-container{
    width: 100%;

}

/***********************
         MAIN
*************************/

/*header*/
header {
    padding: .8% 1% .8% 2%;
}
header .header_inner {
    justify-content: space-between;
    width: 100%;
    /* align-items:center; */
}
header .h-logo {
    width: 10vw;
}
header .h-logo img{
    width: 8vw;
}
header .flex a {
    /*margin-right: 3%;*/
}
header nav ul a li{
    display: block;

}
header .pc-nav img {
}


/*end_menu_PC*/



/*main*/
.main {
    background-color: #013972;
    min-width: 760px;
    width: 100% !important;
    margin: 0% auto 0%;
   
}

.main .main-txt {
    padding: 5% 13vw 8%;

}
.main .m-ttl {
    margin: 0 0 3% 0;
    font-size: calc(13px + 0.7vw);
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 1.8px;
    color: #EAEAEA;
}

.main .m-txt {
    line-height: 1.8;
    letter-spacing: 1.1px;
    font-size: calc(12px + 0.33vw);
    color: #EAEAEA;
    font-weight: 500;


}
.main .SF_bnr:hover{
  opacity: 0.7;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;

}

/*WHATS NEW*/

.WhatsNewArea {
    background-color: #EAEAEA;
    min-width: 760px;
    width: 90%;
    margin: 0% auto 0%;
    padding: 3% 5%; 
}
.WhatsNewArea .WhatsNew_inner {

}

.WhatsNewArea .Ttl_outer {
    text-align: center;
    margin-bottom: 2%;
    
}

.WhatsNewArea .SmallTtl {
    width: 220px;
    margin: 2% auto 1%;
    padding-bottom: 0.5%;
    display: inline-block;
    text-align: center;
    font-weight: bold;
    font-family: ;
    font-size:  calc(1.2em + 0vw) !important;
    letter-spacing: 3px;
    text-align: center;
    
}

.WhatsNewArea .WN_contents{
  width: 70%;
  padding:0% 15%;
  margin-bottom: 1.5%;
   
}

.WhatsNewArea .WN_contents .WN_Box {
   margin-bottom: 1%;
    
}
.WhatsNewArea .WN_Box .WN_date {
    font-family: 'Poppins', sans-serif;
    font-size:  calc(0.8em + 0.1vw);
    letter-spacing: 1px;
    line-height: 1.4;
    color: #013972 !important;
}
.WhatsNewArea .WN_Box .WN_txt {
    margin: 0 0 0 5%;
    font-size:  calc(0.9em + 0.1vw);
    letter-spacing: 1px;
    line-height: 1.4;
    color: #013972;
}

.WhatsNewArea .WN_Box .WN_txt a, .WhatsNewArea .WN_Box .WN_txt a:link, .WhatsNewArea .WN_Box .WN_txt a:visited{
color: #013972;
}
.WhatsNewArea .WN_Box .WN_txt a:hover{
  border-bottom: 1px solid #013972;
  opacity: 0.5;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  
}
  
.WN_Box .Txt a:link, .WN_Box .Txt a:visited{
    color: #013972;
    
}

.MovieOneArea{
  background-color:#013972;
}
.Movie{
  margin: 0 auto;
  padding-bottom: 8%;
  width: 45vw;
}


.SF_bnr{
  margin: 0% auto 4%;
    width: 70%;
}


 
/*============================
#LineUp.LineUpArea
============================*/
.LineUpArea{
    min-width: 760px;
    width: 90%;
    margin: 0% ;
    padding: 7% 5% 10% 5%;
    background-image: url(../images/BK/BK.jpg); 
    background-size: cover;
}
.LineUpArea_bk{
    background-color: #002A54;
    color: #fff;
}

.LU_Ttl{
    text-align: center;
}
.LineUp_inner .Ttl{
    color: #CEBA78;
    font-size: 4.5em;
}
.LU_date{
    margin-bottom: 1%;
    font-weight: bold;
    font-size: 3.2em;
    letter-spacing: 2px;
    font-family: 'Sofia Sans Condensed', sans-serif;
    font-style: italic;
    color: #CEBA78;
}
.LU_date .day{
      font-size: 0.75em;
}

.LU_place{
    margin-bottom: 1%;
    font-weight: bold;
    font-size: 1.8em;
    letter-spacing: 2px;
    color: #CEBA78;
}
.LU_time{
    margin-bottom: 1%;
    font-weight: bold;
    font-size: 2.5em;
    letter-spacing: 2px;
    font-family: 'Sofia Sans Condensed', sans-serif;
    color: #CEBA78;
}
.LU_note{
  margin-bottom: 2%;
  font-weight: bold;
  font-size: 1em;
  letter-spacing: 2px;
  color: #CEBA78;
}
.LUcontents_inner {
    flex-direction: row;
    flex-wrap:wrap;
    justify-content :center;
}
.ArtistBox{
    width: 36%;
    margin: 0.5%;
}

.ArtistBox .Photo_box .Name { 
    margin: 2% 0 2%;
    color: #CEBA78;
    font-weight: bold;
    font-size: 1.2em;
    letter-spacing: 2px;

}


/*============================
#modal
============================*/



        /***********************
        Figure CSS Effect************************************/

        .ArtistBox figure {
            position: relative;
            overflow: hidden;
            /*width: 24.5vw;*/
            
  
          }
          .ArtistBox figcaption {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.6);
            -webkit-transition: .3s;
            transition: .3s;
            opacity: 0;
          }
          .ArtistBox figure img {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
          }
          .ArtistBox figure:hover img {
            -webkit-transform: scale(1.1);
            transform: scale(1.1);
          }
          .ArtistBox figcaption h3,
          .ArtistBox figcaption p {
            position: absolute;
            left: -100%;
            width: 260px;
            -webkit-transition: .3s;
            transition: .3s;
          }
          .ArtistBox figure h4 {
              position: absolute;
              width: 40px;
              bottom: 10px;
              right:10px;
              opacity: 1 !important;
              z-index: 5;
            }
            .ArtistBox figcaption h3 {
            top: 70px;
          }
          .ArtistBox figcaption p {
            font-size: 1.3em;
            letter-spacing: 3px;
            font-weight: bold;
            color: #C1AD68;
            top: 130px;
          }
          .ArtistBox figure:hover figcaption {
            opacity: 1;
          }
          .ArtistBox figure:hover figcaption h3,
          .ArtistBox figure:hover figcaption p {
            left: 50px;
          }
          .ArtistBox figure:hover figcaption h3 {
            -webkit-transition-delay: .2s;
            transition-delay: .2s;
          }
          .ArtistBox figure:hover figcaption p {
            -webkit-transition-delay: .3s;
            transition-delay: .3s;
          }
  
          /***********************
          Figure CSS EffectEND************************************/
  
          /***********************
          Modal CSS Effect************************************/

          /*common*/
          .modalTtl{
            margin: 2% 0 2%;
            color: #CEBA78;
            font-weight: bold;
            font-size: 1.2em;
            letter-spacing: 2px;
          }
          /*common-end*/

          .modaal-container {
              max-width: 90%;
              background-color: #01A7E5;
              color: #CEBA78;
          }
          .modaal-container {
            max-width: 90%;
            background-color: #002A54;
            color: #CEBA78;
        }
          .modaal-content-container {
              padding: 14px;
          }
          .Modal_inner {
              padding: 4% 5%; 
              display: flex;
              flex-direction: column;
          }
          .Modal_inner .ArtistInfo1{
            padding-bottom: 3%;
            border-bottom: 1px solid #8f8f8f;
            align-items: center;
            justify-content: center;
          }

          .Modal_inner .ArtistInfo1 .Img{
            padding-right: 1%;
            flex-basis: 35%;
          }

          .Modal_inner .ArtistInfo1 .TxtArea{
            padding: 1%;
            flex-basis: 62%;
            
          }
          .Modal_inner .ArtistInfo1 .TxtArea p{ 
            font-size: 0.95em;
            /* letter-spacing: 1.5px; */
            line-height: 1.6em;
            
          }

          .Modal_inner .ArtistInfo1 .TxtArea .Name{
            margin: 2% 0 2%;
            color: #CEBA78;
            font-weight: bold;
            font-size: 1.2em;
            letter-spacing: 2px;
            
          }

          .Modal_inner .ArtistInfo2{
            padding-top: 3%;
          }
          .Modal_inner .ArtistInfo2 .SNS{
            flex-basis: 48%;
            margin-right: 2%;
          }
          .Modal_inner .ArtistInfo2 .SNS .AName {
            margin-bottom: 0.5%;
            color: #CEBA78;
            font-weight: bold;
            font-size: 0.8em;
            letter-spacing: 1px;
            
          }
          .Modal_inner .ArtistInfo2 .SNS .member{
            color: #CEBA78;
            font-weight: bold;
            font-size: 0.8em;
            letter-spacing: 0;
            line-height: 1.5;
          }
          .Modal_inner .ArtistInfo2 .SNS .SNS_link{
            flex-wrap: wrap;
          }

          .Modal_inner .ArtistInfo2 .SNS .SNS_link a{
            color: #CEBA78;
            font-weight: bold;
            font-size: 0.8em;
            letter-spacing: 1px;
          }
          .Modal_inner .ArtistInfo2 .SNS .link {
            margin-right: 20px;
          }

          .Modal_inner .ArtistInfo2 .Disco{
            flex-basis: 50%;
          }
          .Modal_inner .ArtistInfo2 .DiscoArea .DiscBox{
            width: 48%;
            align-items: center;
            
          }
          .Modal_inner .ArtistInfo2 .DiscoArea .DiscBox .Img{
            flex-basis: 38%;       
          }
          .Modal_inner .ArtistInfo2 .DiscoArea .DiscBox .Txt{
            padding-left: 2%;
            font-size: 0.8em;
            letter-spacing: 1.5px;
            line-height: 1.4em;   
          }


          .Modal_inner img {
              width: 100%;
          }

          .Modal_inner .ModalTxt {
              margin: 4% 0 2% 2%;
              width: 50%;
          }
  
  
          .Modal_inner p {
          font-size: calc(12.5px + 0.25vw);
          line-height: 1.5;
          letter-spacing: .5px;
          
          }

          /***********************
          Modal CSS EffectEND************************************/





/***********************
         MOVIE
*************************/

.MovieArea{
    background-color: #EAEAEA;
}
.MovieArea .Movie_inner {
    margin: 0 12%;
    padding: 4% 0 8%;
}

.MovieArea .Movie_inner .Ttl_decoration{
    margin: 0 12%;
    padding: 5% 0 10%;
}

.Moviebox_inner{
    margin-top: 0%;
    display: flex;
}
.MovieArea .Movie_inner .Moviebox_inner {
    margin-top: 0%;
    flex-wrap: wrap;
    justify-content: center;
}

.MovieArea .Ttl {
    margin: 0% 0 0%;
    font-weight: 100;
    color: #013972;
}
.MovieArea .Txt {
    width: 80%;
    margin: 3% auto 0;
    font-size: calc(12px + 0.2em);
    line-height: 1.6;
    letter-spacing: 2px;
    text-align: left;
}

.MovieArea .Movie_inner .Movie_box {
    margin: 0.15%;
    width: 33%;
}
.MovieArea .Movie_box a {
}
.MovieArea .Movie_box img {
    width: 100%;
}
.MovieArea .Movie_box a:hover {
    opacity: 0.5;
    transition : .5s;
}
  

/*============================
TicketArea 
============================*/
.TicketArea {
  /* padding-top:2%; */
  padding-bottom:2%;
    min-width: 760px;
    width: 90%;
    padding: 5% 5%;   
}

.TicketArea_bk{
    background-color: #013972;
    color: #EAEAEA;
}
.Ticket_inner{
    min-width: 760px;
    width: 70%;
    margin: 0  auto;

}
.Tcket_Ttl{
    margin: 2% 0 5%;
}

.Tcket_Ttl .Ttl_decoration{
  color: #EAEAEA;
}
.TicketContents{
  margin-bottom: 10%;
}
.TicketContents_inner{
}
.TicketBox{
  position: relative;
}
.TicketBox .SubHead{
    text-align: center;
    padding-top:1%;
    padding-bottom:1%;
    background-color: #EAEAEA;
    color: #013972;
    font-weight: bold;
    font-size: 1.3em;
    letter-spacing: 2px;
}

.TicketItem_box{
  margin: 4% auto;
  text-align: center;  
}
.TicketItem_box .Tc_Type{
  margin: 1% auto 0%;
  font-size: 1.3em;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1.4;
}
.TicketItem_box .term{
  margin: 0.5% auto 0%;
  font-size: 1em;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1.8;
}


.Peried_box {
  margin-top: 3%;
  margin-bottom: 3%;
    align-items: center;
    justify-content:center;
}

.TicketBox .term_end{
  text-align: center;
  margin: 0% auto 0%;
  font-size: 1em;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1;
}

.TicketBox .term_end .red{
  color: #9D1D2B;
  font-size: 1.2em;
}

.TicketNote, .TicketNote a{
  color: #B52626;
  color: #9D1D2B;
}
.TicketNote a, .TicketNote a:hover{
  color: #9D1D2B !important;

}

.TicketBox .seat{
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 600;
}
.TicketBox .Txt-m{
  font-size: 20px;
  letter-spacing: 1px;
  font-weight: 600;
}
.TicketBox .soldout{
  position: absolute;
  top:60%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
.TicketBox .soldout img{
  width: 250px;
}

.Peried_box .badge{
    border: 1px solid #EAEAEA;
    padding: 3px 15px;
    font-size: 0.9em;
    font-weight: 500;
    
}
.Peried_box .Txt{
    margin-left: 2%;
    font-size: 1.3em;
    letter-spacing: 2px;
    font-weight: bold;
}
.Peried_box .Txt span{
  font-size: 80%;
}
.Price_box{
  text-align: center;
}
.Price_box .Price{
    font-size: 1.8em;
    letter-spacing: 1px;
    font-weight: bold;

}
.Price_box .Price2{
  font-size: 1.4em;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1.3;
}
.bal{
  font-size: 16px;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.tax{
    font-size: 12px;
    letter-spacing: 1px;
    font-weight: 500;
}

.Price_box .Ptxt{
    margin: 1% auto;
    font-size: 1em;
    letter-spacing: 1px;
    font-weight: bold;
    line-height: 1.8;
}


.ReserveArea{
  margin: 5% auto;
}
.ReserveArea_inner{

}
.Rbtn_box{

  border: 1px solid #EAEAEA;
  padding: 1.5% 15% 1.5% 15%;
  align-items: center;
  justify-content :space-between;

}
.Rtxt{
  font-size: 1.2em;
  letter-spacing: 1px;
  font-weight: bold;
}


.AreaMap .Modal_inner2 {
    padding: 4% 15% !important;
    width: 70%;
}
.AreaMap .zaseki{
  margin: 5% auto;
  text-align: center !important;  
}

.Mbtn{
  margin-top: 2%;
  margin-bottom: 4%;
  text-align: center;
}
.SubTxtArea{
  margin:5% auto ;
  text-align: center;

}
.SubTxtArea a{
text-decoration:underline !important;
}

.NoteArea{
  margin:5% auto ;
}

.NoteArea a{
  text-decoration:underline !important;
  }


/*============================
OnlineArea 
============================*/
.OnlineArea_bk{
  background-color: #222019;
  color: #fff;
}

.Online_inner{
  min-width: 760px;
  width: 70%;
  margin: 0  auto;

}

.Online_Ttl .Ttl_decoration{
  color: #CEBA78;
  margin-bottom: 1.5%;
}

.Online_Ttl .Ttl_disc{
  margin: 0% auto 5%;
  color: #CEBA78;
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;

}

.Online_inner .Peried_box .badge{
  border: 1px solid #fff;
  padding: 3px 15px;
  font-size: 0.9em;
  font-weight: 500;
  
}
.Online_inner .Peried_box {
  margin-top: 1%;
  margin-bottom: 1%;
  align-items: center;
  justify-content: center;
}
.Online_inner .Peried_box .Txt{
  margin-left: 2%;
  font-size: 1.3em;
  letter-spacing: 2px;
  font-weight: bold;
} 
.Online_inner .Price_box{
text-align: center;
}
.Online_inner .Price_box .Price{
  font-size: 1.8em;
  letter-spacing: 1px;
  font-weight: bold;

}
.Online_inner .noteArea{
width: 70%;
margin: 3% auto;
}

.Online_inner .Price_box .Price .ticketfont-jp{
  font-size: 0.9em;
  letter-spacing: 1px;
  font-weight: bold;

}

.Onlinebtn_box{
  padding: 1.5% 15% 1.5% 15%;
  text-align: center;

}
.Online_inner .TicketContents{
  margin-bottom: 5%;
}

/*============================
Premium Ticket Area 
============================*/
.PremiumTicketArea {
  padding-bottom:2%;
  min-width: 760px;
  width: 90%;
  padding: 3% 5%; 
  
}
.PremiumTicketArea_bk{
  background-color: #002A54;
  color: #CEBA78;
}
.PremiumTicketArea_inner{
  margin: 0 auto;
  width: 80%;
}
.PremiumTicketArea .PT_Ttl {
}
.PremiumTicketArea .Ttl.Ttl_decoration{
  color: #CEBA78;
}
.PremiumTicketArea .PTContents{
  margin: 5% 0 0;
}
.PremiumTicketArea .PTInfo_box{
  flex-basis: 50%;
  align-items: center;
}
.PremiumTicketArea .PT_TxtArea{
  flex-basis: 55%;
  padding: 0 2% 0 3%;

}
.PremiumTicketArea .PT_TxtArea .Ttl{
  font-size: 1.8em;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1.3;
}

.PremiumTicketArea .Txt{
  margin-top: 5%;
  font-size: 0.95em;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 1px;
}

.PremiumTicketArea .PT_TxtArea .Txt .Ms-Txt{
  font-size: 1.1em;
  font-weight: bold;
}

.PremiumTicketArea .PT_Img{
  flex-basis: 45%;
}
.PremiumTicketArea .PT_Img img{
  width: 100%;
}
.PremiumTicketArea .item ul{
  /* border: 1px solid #002A54; */
}
.PremiumTicketArea .item li{
  margin-top: 1%;
  margin-left: 2%;
  font-size: 1.2em;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 1px;

}
.PremiumTicketArea .item li .itemdisc{
  display: block;
  margin: 0.7% 2% 2% 4%;
  font-size: 0.8em;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 1.3 !important;

}
/*============================
#Goods.GoodsArea
============================*/
.GoodsArea{
    min-width: 760px;
    width: 90%;
    margin: 0% ;
    padding: 3% 5% 5% 5%; 
}

.GoodsArea_bk{
    background-image: url(../images/BK/BK.jpg); 
    background-size: cover;
  background-color: #01A7E5;
  border-top: 1px solid #4c4c7a;;
  color: #002A54;
  
}
.Goods_inner{
  
}
.Goods_Ttl{
}
.Goods_Ttl .Ttl_disc{
  text-align: center;
  color: #CEBA78;

}
.Goods_Ttl .Ttl_decoration{
  color:#CEBA78;
}
.GoodsContents{
}
.GoodsContents_inner{
  margin: 5% auto;
  flex-wrap: wrap;
  justify-content:center;
  width: 90%;
}
.Goods_box{
  width: 30%;
  margin: 0.5%;
  margin-bottom: 2%;
}
.GoodsContents .btnArea{
  width: 70%;
  margin: 0% 13%;
  padding: 3% 2% 5% 2%;
  letter-spacing: 1px;
}

.GoodsContents .NoteArea{
  letter-spacing: 1px;
  color: #CEBA78;
}
.btn-lineGold-soft.modal{
}
.Img{
}

/*============================
 Goods_Modal
============================*/

.Goods_modal{
  padding: 5% 10%;
  align-items:center;

}
.GImg{
  flex-basis: 50%;
}
.GImg img{
  margin: 0 1%;
  width: 100%;
  
}
.GTxt{
  flex-basis: 44%;
  margin: 2% 2% 2% 4%;

}
.ItemName{
  margin: 2% 0%;
    color:#002A54;
    color:#CEBA78;
    font-size: 1em;
    font-weight: bold;
      letter-spacing: 1.5px;
}
.ItemPrice{
  color:#002A54;
  color:#CEBA78;
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1.5px;
}
.ItemName2{
  margin: 2% 0%;
  color:#002A54;
  /* color:#CEBA78; */
    font-size: 1em;
    font-weight: bold;
      letter-spacing: 1.5px;
}
.ItemPrice2{
  color:#002A54;
  /* color:#CEBA78; */
    font-size: 1.2em;
    font-weight: bold;
    letter-spacing: 1.5px;
}
.ItemDisc{
    margin-top: 3%;
    color:#002A54;
    color:#CEBA78;
    font-size: 0.9em;
    font-weight: 500;
    line-height: 1.5;
}
.Goods_modal .ItemTax{

  font-size: 0.9em;
}


/*============================
   Access
============================*/
.AccessArea{
    min-width: 760px;
    width: 90%;
    margin: 0% ;
    padding: 3% 5% 5% 5%; 

}
.Access_bk{
    background-color: #EAEAEA;
    color: #013972;
    /* background-image: url(../images/BK/BK.jpg);  */
    background-size: cover;
}
.Access_inner{
}
.AccessArea .Ttl_decoration{
}
.Access_Ttl .Ttl_decoration{
}

.Access_inner .Ttl{
    color: #013972;
}

.Txt_place{
  font-weight: bold;
  font-size: 1.5em;
  margin:3% auto ;
  text-align: center;
  letter-spacing: 2px;
  color: #013972;
}
.ATxtArea .Txt_adress{
  text-align: center;
  color: #013972;
}
.ATxtArea  .sub_Txt{
  margin:3% auto ;
  text-align: center;
  color: #013972;
}
.MapArea{
  margin: 5% 10%;
}

/*============================
   Footer
============================*/
footer{
  min-width: 760px;
  width: 90%;
  margin: 0% ;
  padding: 5% 5% 1% 5%; 
}

.Footer_bk{
  background-color: #002A54;
  color: #EAEAEA;
}
.footer_inner .JFS_Logo{
  margin: 1% auto 4%;
  width: 220px;
}
.Fcontents_1{
}
.BackToTop{
  text-align: center;
}
.support{
  margin: 3% auto;
  text-align: center;
  font-size: 1em;
  letter-spacing: 2px;
}
.Fcontents2{
}
.copy{
  font-size: 0.8em;
  letter-spacing: 1px;
  text-align: center;
}




/***********************
        BTN CSS Effect************************************/

/*GOLD*/

.btn-square-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  width: 320px;
  height: auto;
  line-height: 50px;
  letter-spacing: 1px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#967B1E 0%, #967B1E 100%);
  background:linear-gradient(#967B1E 0%, #967B1E 100%);
  /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.btn-square-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#967B1E 0%, #895B1B 100%);/*グラデーションを明るく*/
}


/*OnlineGOLD*/

.btn-square-soft-online {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  width: 400px;
  height: auto;
  line-height: 50px;
  letter-spacing: 1px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#967B1E 0%, #967B1E 100%);
  background:linear-gradient(#967B1E 0%, #967B1E 100%);
  /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.btn-square-soft-online:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#967B1E 0%, #895B1B 100%);/*グラデーションを明るく*/
}

.btn-square-soft-online:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

.btn-square-soft-online:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #A08A61;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}
/*Gray*/
.btn-square-soft-gray:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

.btn-square-soft-gray:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #737373;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}


/*Gray*/
.btn-square-soft-gray:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

.btn-square-soft-gray:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #737373;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}

.btn-square-soft-gray {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #fff;
  width: 320px;
  height: auto;
  line-height: 50px;
  letter-spacing: 1px;
  border-radius: 5px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  background: linear-gradient(#737373 0%, #737373 100%);
  background:linear-gradient(#737373 0%, #737373 100%);
  /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.btn-square-soft-gray:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(#737373 0%, #737373 100%);/*グラデーションを明るく*/
}

/*Gold*/
.btn-square-soft:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

.btn-square-soft:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #A08A61;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}
/*line-Gold2*/

.btn-lineGold-soft2 {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #B89F5F;
  background-color: #fff;
  width: 320px;
  height: auto;
  line-height: 50px;
  letter-spacing: 2px;
  border: 1.5px solid #B89F5F;
  border-radius: 50px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.btn-lineGold-soft2:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  /*グラデーションを明るく*/
}
.btn-lineGold-soft2:before {
  content: '';
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -9px;
}

.btn-lineGold-soft2:after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #A08A61;
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}

/*line-Gold*/

.btn-lineGold-soft {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: #B89F5F;
  /* background-color: #fff; */
  width: 320px;
  height: auto;
  line-height: 50px;
  letter-spacing: 2px;
  border: 1.5px solid #B89F5F;
  border-radius: 50px;
  text-align: center;
  overflow: hidden;
  font-weight: bold;
  /*text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);*/
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

.btn-lineGold-soft:active {
  /*押したとき*/
  -webkit-transform: translateY(2px);
  transform: translateY(2px);/*沈むように*/
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
  /*グラデーションを明るく*/
}


/***********************
        BTN CSS Effect END  ************************************/



/***********************
       COMMON
*************************/
@media (max-width: 848px) {

  .main {
    min-width: auto;
    width: 100% !important;
    margin: 0% auto 0%;
   
}
.main .main-txt {
  padding: 5% 4% 8%;

}

.WhatsNewArea {
  /* background-color: #14263E; */
  min-width: auto;
  width: 96%;
  margin: 0% auto 0%;
  padding: 3% 2%; 
}
.Movie {
    width: 80%;
}
.LineUpArea{
  min-width: auto;
  width: 96%;
  margin: 0% ;
  padding: 3% 2% 5% 2%; 
}
.ArtistBox{
  width: 40%;
}
.Modal_inner .ArtistInfo1 {
  flex-direction: column;
}
.Modal_inner .ArtistInfo2 {
  flex-direction: column;
}
.Modal_inner .ArtistInfo2 .Disco{
  margin-top: 3%;
}
.TicketArea {
  padding-bottom:2%;
    min-width: auto;
    width: 96%;
    padding: 3% 2%;   
}
.Ticket_inner{
  min-width: auto;
  width: 90%;
  margin: 0  auto;

}
.Online_inner{
  min-width: auto;
  width: 90%;
  margin: 0  auto;

}
.Onlinebtn_box {
  padding: 1.5% 2% 1.5% 2%;
  text-align: center;
}
.btn-square-soft-online {
  width: 100%;
}
.Price_box .Price {
  font-size: 1.4em;
}
.Rbtn_box {
  padding: 1.5% 6% 1.5% 6%;
}
.PremiumTicketArea {
  padding-bottom:2%;
    min-width: auto;
    width: 96%;
    padding: 3% 2%;   
}
.PremiumTicketArea_inner {
  margin: 0 auto;
  width: 94%;
}
.PremiumTicketArea .PT_TxtArea {
  margin-top: 5%;
}

.PremiumTicketArea .PTInfo_box {
  flex-direction: column-reverse;
}
.GoodsArea{
  min-width: auto;
  width: 96%;
  margin: 0% ;
  padding: 3% 2% 5% 2%; 
}
.GoodsContents_inner {
  width: 94%;
}
.Goods_Ttl .Ttl_disc{
  margin: 0 4%;
  text-align: left;
  /* color: #fff; */
}
.Goods_modal {
  flex-direction: column;
}
.AccessArea{
  min-width: auto;
  width: 96%;
  margin: 0% ;
  padding: 3% 2% 5% 2%; 
}
footer{
  min-width: auto;
  width: 96%;
  margin: 0% ;
  padding: 8% 2% 1% 2%; 
}
}

@media screen and (max-width: 676px){
  .Ttl_decoration{
    font-size: 2em;
  }
  
  .Ttls_decoration{
    font-size: 1.4em; 
  }
  .WhatsNewArea .WN_contents {
    width: 80%;
    padding: 0% 10%;
    margin-bottom: 1.5%;
}
.TicketItem_box{
  margin: 4% auto;
  text-align: left;  
}
.TicketItem_box .Tc_Type{
  margin: 1% auto 0%;
  font-size: 16.5px;
  letter-spacing: 0.5px;
  font-weight: bold;
  line-height: 1.6;
}
.TicketItem_box .term{
  margin: 0.5% auto 2%;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: normal;
  line-height: 2;
}
.TicketBox .term_end{
  text-align: left;
  margin: 0% auto 0%;
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: bold;
  line-height: 1;
}

  .Rbtn_box {
    flex-direction: column;
    border: 1px solid #fff;
    padding: 2.5% 6% 2.5% 6%;
    align-items: center;
    justify-content: space-between;
  }
  

  .Rtxt {
    margin-bottom: 2%;
    font-size: 0.9em;
    letter-spacing: 1px;
    font-weight: bold;
  }
  .BackToTop img{
    width:30px;
  }
}

@media screen and (max-width: 480px){
        /* パソコンで見たときは"pc"のclassがついた画像が表示される */
        .pc { display: none !important; }
        .sp { display: block !important; }
        /* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

.Ttl_decoration {
    margin-top: 7%;
    margin-bottom: 6%;
  }
header .h-logo img {
    width: 25vw;
}
.header_inner .h-logo {
  margin: 1% 2% 1% 1%;
}
.WhatsNewArea .WN_contents{
  width: 90%;
  padding:0% 5%;
  margin-bottom: 1.5%;
   
}
.WhatsNewArea .WN_contents .WN_Box {
   flex-direction: column;
    
}
.SF_bnr {
  margin: 10% auto 5%;
  width: 90%;
}
.LineUp_inner .Ttl{
  font-size: 2.8em;
}

.LU_date{
  margin-bottom: 2%;
  font-size: 1.8em;
  letter-spacing: 0px;
}
.LU_place{
  margin-bottom: 2%;
  font-size: 1.2em;
  letter-spacing: 2px;
}
.LU_time{
  margin-bottom: 2%;
  margin: 0.5%;
  font-size: 1.6em;
  letter-spacing: 1px;
}

.LUcontents_inner {
  margin-top: 5%;
}
.ArtistBox{
  width: 96%;
  margin: 2%;
}

.ArtistBox .Photo_box .Name { 
  margin: 2% 0 2%;
  font-weight: bold;
  font-size: 1.2em;
  letter-spacing: 2px;

}

.PremiumTicketArea .PT_TxtArea .Ttl{
  font-size: 1.4em;
}
.Online_inner .Peried_box {
  align-items: flex-start;
}
/*****************
 Modal
 ****************/

 .modaal-inner-wrapper {
  padding: 20px 0px;
}
.Modal_inner {
  padding: 4% 2%;
}
.Modal_inner .ArtistInfo1 .TxtArea p {
  font-size: 12px;
}
.Modal_inner .ArtistInfo1 {
  padding-bottom: 7%;
}
.Modal_inner .ArtistInfo1 .TxtArea .Name {
  margin: 4% 0 4%;
  line-height: 1.5;
}

.modalTtl {
    margin: 4% 0 4%;
}
.Modal_inner .ArtistInfo2 {
  padding-top: 5%;
}
.Modal_inner .ArtistInfo2 .Disco {
  margin-top: 5%;
}
.Modal_inner .ArtistInfo2 .DiscoArea {
  flex-direction: column;

}
.Price_box .f85{
  font-size: 0.85em;
}
.Modal_inner .ArtistInfo2 .DiscoArea .DiscBox {
  width: 96%;
  margin-bottom: 3%;
}
.Modal_inner .ArtistInfo2 .DiscoArea .DiscBox .Img {
  flex-basis: 30%;
}
/*****************
 Modal end
 ****************/


 /*Movie*/

.MovieArea {
    background-color: #F5F5F5;
}
.MovieArea .Movie_inner {
    margin: 0 5%;
    padding: 10% 0 8%;
}
.MovieArea .TtlBox {
}

.Moviebox_inner{
    margin-top: 5%; 
      height: 250px;
      overflow-y: hidden;
    
}
.MovieArea .Movie_inner .Moviebox_inner {
    margin-top: 5%;
    height: 250px;
    overflow-y: hidden;
    flex-wrap: nowrap;
    justify-content:flex-start;
}
.MovieArea .Movie_inner .Movie_box {
    margin: 0.15%;
    width: unset;
}
.MovieArea .Movie_box img {
    width: 320px;
}

.MovieArea .Ttl {
    margin: 0% 0 9%;
    text-align: center;
}
.MovieArea .Txt {
    width: 80%;
    margin: 3% auto 0;
    font-size: calc(12px + 0.2em);
    line-height: 1.6;
    letter-spacing: 2px;
    text-align: left;
}

.Moviebox_inner_one {
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
}
.Moviebox_inner_one .Movie_box {
    margin: 16% auto 8%;
    width: 100%;
}

.Peried_box{
  flex-direction: column;
  line-height: 1.5;
  margin-top: 5%;
  margin-bottom: 5%;
  align-items: baseline;
}
.TicketContents {
  margin-bottom: 13%;
}

.TicketBox .SubHead {
  font-size: 1.1em;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}

.TicketBox .Txt-m{
  font-size: 16px;
  letter-spacing: 1px;
  font-weight: 600;
}

.Online_inner {
  margin: 8% auto;
}
.SF_bnr {
    margin: 10% auto 5%;
    width: 90%;
}

.Online_inner .noteArea{
  width: 100%;
  margin: 3% auto;
  }

.btn-square-soft {
  width: 280px;
}
.btn-square-soft-gray {
  width: 280px;
}
.Peried_box .Txt {
  margin-left: 0%;
  font-size: 16px;
  letter-spacing: 0px;
}
.Price_box {
  text-align: left;
}
.Price_box .Price {
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: 0px;
}
.Price_box .Price2{
  font-size: 1.2em;
}
.bal{
  font-size: 14px;
  letter-spacing: 0px;
  font-weight: 600;
}
.Price_box .Px-12{
  padding-top: 1.5%;
  font-size: 12px;
}
.Rbtn_box {
  padding: 3% 6% 3% 6%;
}
.SubTxtArea p{
  text-align: left;

}
.Online_inner .Peried_box .Txt {
  font-size: 18px;
  letter-spacing: 1px;
}

.Online_inner .noteArea .Txt{
  font-size: 14px;
}
.NoteArea {
  font-size: 12px;
  margin: 8% auto;
}

.Goods_box {
  width: 48%;
  margin: 1%;
  margin-bottom: 5%;
}
.GoodsContents .btnArea {
  width: 86%;
  margin: 0% 5%;
  padding: 3% 2% 3% 2%;
  /* color: #fff; */
  letter-spacing: 1px;
}
.GoodsContents_inner{
  justify-content: flex-start;
}
.AccessArea .ATxtArea {
  margin: 8% 3%;
}
.AccessArea .Txt_adress {
  margin: 2% auto;
  text-align: left;
}
.AccessArea .sub_Txt {
  margin: 3% auto;
  text-align: left;
  font-size: 14px;
}
.MapArea {
  margin: 5% 3%;
}
.support {
  margin: 6% auto 6%;
  text-align: center;
  font-size: 0.8em;
}
footer{
  padding: 8% 2% 8% 2%; 
}
.footer_inner .JFS_Logo{
  margin: 4% auto 6%;
  width: 160px;
}

}