:root{
  --mainColor:#FFBE27;
  --subColor:#27140b;
  --accentColor:#05CFA6;
  --bgColor:#F57A1D;
  --enfont: "helvetica-neue-lt-pro", sans-serif;

  --pcheaderHight:80px;

  --innerWidth:calc(1200px + 40px);
  --sideWidth:calc((100vw - var(--innerWidth)) / 2 );
}

body{
  background:var(--bgColor);
}

/*//////////////////////////////
   common style
////////////////////////////////*/
/*/// loading /////*/

#loading {
 background: var(--subColor);
  position: fixed;
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  transition: ease 1s all;
  }

  #loading.is-hidden {
  opacity:0;
  }
  #loading span {
    text-align: center;
    color:var(--mainColor);
    letter-spacing: .1em;
    font-size:clamp(20px,calc(30 / 1200 * 100vw),30px);
    font-weight: 500;
    transition:3s ease all;
    position: absolute;
    top: 50% ;
    left: 0;
    width: 100%;
    z-index: 1000;
    translate:0 -50%;
    animation: breathe 4s ease-in-out infinite;
  }

@keyframes breathe {
  0% {
    opacity: 0.4;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05); 
  }
  100% {
    opacity: 0.4;
    transform: scale(0.95);
  }
}
  /* ローディング画面の下端にプログレスバーを表示 */
  #loading #bar {
  position: absolute;
  display:block;
  height: 6px;
  width: 0%;
  bottom: 0;
  left: 0;
  background-color:var(--mainColor);
  transition: ease .3s;
  z-index: 500;
  }
  #loading #bar.is-hidden {
  opacity: 0;
  }

#wrapper {
  width:100%;
  overflow-x: hidden;
}

.header_padding {
  padding-top:var(--pcheaderHight);
}
.inner{
  max-width: var(--innerWidth);
  margin:auto;
  padding:0 20px;
  position: relative;
  z-index: 50;
}
.mini{
  font-size: .9rem;
}
.flex{
  display: flex;
}
.large{
  font-size:clamp(15px,1.7vw,18px);
  line-height: 1.6;
}
.content{
  margin:clamp(80px,15vw,170px) auto;
  position: relative;
}
.disnone{
  display: none;
}
[class*="modal-"],
.close_btn{
  display: inline-block;
  cursor: pointer;
}
.bg_image{
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
ul.list li{
  list-style-type: disc;
}
/*--------- btn ---------*/
.btn{
  display: block;
  border-radius:50px;
  background:var(--accentColor);
  color:white;
  text-align: center;
  font-size: clamp(15px,1.8vw,18px);
  font-family: "LINE Seed JP", sans-serif;
  font-weight: 600;
  padding: .5em 1.2em;
  width: fit-content;
  box-shadow:0 0 20px 5px rgba(255,255,255,.5);
  overflow: hidden;
  position: relative;
}
.btn span{
  position: relative;
  z-index: 5;
}
.btn:hover{
  color:white;
  background:var(--mainColor);
}
.btn:after{
  content:"";
    background: linear-gradient(100deg,var(--accentColor) 0%, #ffa136 100%);
    display: block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity:0;
    transition:.2s all ease;
}
.btn:hover:after{
  opacity:1;
}
.btn.large_size{
  width:min(90%,480px);
  margin:2em auto;
}
.btn.mini_size{
  font-size:clamp(15px,1.6vw,17px);
  padding:.3em 1em;
}

.btnarea{
  margin:2em 0 ;
}

.inlineblock{
  display: inline-block;

}
.btn.inlineblock{
  margin:20px;
}
/*//////////////////////////////
   header
////////////////////////////////*/

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

header {
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: auto;
  z-index: 999;
  translate:0 0%;
  transition: 1s translate ease;
}
header.fixed{
  position: fixed;
  translate:0 0%;
}

#header{
  width:100%;
  height: var(--pcheaderHight);
  background: var(--mainColor);
}
#header .header {
  width:min(1200px,100%);
  height: 100%;
  margin:auto;
  padding:10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
#header .logo,
#header .logo h1,
#header .logo a{
  height: 100%;
  display: block;
}

#header .logo img{
  height: 100%;
  width: auto;
  vertical-align:unset;
}

#header .toggle_btn{
  display: none;
  /* display: flex; */
}

/*------toggle_btn-------*/

.toggle_btn {
  background:transparent;
  height: 100%;
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: absolute;
  right:0;
  top:0;
  z-index: 40;
}
.toggle_btn .humberger{
  background:white;
  width:45%;
  height: 2px;
  position: relative;
}
.toggle_btn .humberger:after,
.toggle_btn .humberger:before{
content:"";

height: 2px;
background: white;
transition:.3s all ease-out;

}
.toggle_btn .humberger:after{
position: absolute;
width:100%;
top:-10px;
right:0;
}
.toggle_btn .humberger:before{
position: absolute;
width:100%;
bottom:-10px;
right:0;
}
#header.mopen .toggle_btn .humberger{
background:transparent;
}
 #header.mopen .toggle_btn .humberger:after{
width:100%;
top:0px;
left:0;
transform:rotate(45deg);
background:white;
}
#header.mopen .toggle_btn .humberger:before{
width:100%;
bottom:0px;
left:0;
transform:rotate(-45deg);
background:white;
}

/*------- globalmenu -------*/
#globalmenu{
  flex:1 1 50%;
}
#globalmenu nav{
  display: flex;
  justify-content: flex-end;
  align-items:center;
}
#globalmenu ul {
  display: flex;
  justify-content: center;
  align-items:center;
  gap:5%;
  flex:1 0 50%;
}

#globalmenu ul li{
  display: flex;
  justify-content: center;
  align-items:center;
  font-size:20px ;
}
#globalmenu ul li a{
  color:var(--mainColor);
  font-weight: 700;
  font-family: var(--enfont);
  position: relative;
  text-shadow: 1px 1px rgba(0,0,0,.25);
}
#globalmenu ul.menu {
  flex: 0 1 min(580px,90%);
}

#globalmenu ul.menu li a span{
  position: relative;
  color:#FFFFFF;
  width: max-content;
  min-width: 0;
  display: block;
  transition:.2s ease all;
  z-index: 10;
}
#globalmenu ul.menu li a:before{
  content:attr(data-text);
  color:#F7FF00;
  mix-blend-mode: hard-light;
  position: absolute;
  top:0;
  left: 0%;
  transition:.2s ease all;
  width:max-content;
  min-width: 0;
}
#globalmenu ul.menu li a:after{
  content:attr(data-text);
  color:#AAF96D;
  mix-blend-mode: hard-light;
  position: absolute;
  top:0;
  left: 0%;
  transition:.2s ease all;
  width:max-content;
  min-width: 0;
}

#globalmenu ul.menu li a:hover span{
  color:#480041;
}
#globalmenu ul.menu li a:hover:before{
  top:-2px;
  left:-2px;
}
#globalmenu ul.menu li a:hover:after{
  top:2px;
  left:2px;
}
#globalmenu ul.btn_banner{
  flex: 0 1 auto;
}
#globalmenu ul.btn_banner a {
  color:white;
}




/*------- contents -------------*/

#contents{
  position: relative;
  background:var(--bgColor);
  padding-top:min(100px,8%);
}

/*------- keyvisual -------------*/

#keyvisual{
  width: 100%;
  height: 100svh;
  position: relative;
}
#keyvisual .fix_copy{
  color:white;
  font-weight: 700;
  font-size:clamp(23px, calc(35 / 1200 * 100vw),35px);
  text-align: center;
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  z-index: 1;
  width: 100%;
  letter-spacing: 0.1em;
}
#keyvisual .main_image, #keyvisual .copy01 , #keyvisual .copy02{
  filter: "blur(10px)" ;
 opacity:0;
  scale:1.05
}
.keyvisual_image{
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-content:space-between;
  height: 100%;
  margin:auto;
}
.keyvisual_image .main_image{
  width: auto;
  height: 100%;
  aspect-ratio: 770/1089;
  z-index: 5;
  position: relative;
}
.keyvisual_image .main_image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.keyvisual_image .copy01{
  padding:min(20px,4%);
}
.keyvisual_image .copy02{
  padding:min(20px,4%);
  display: flex;
  align-items: flex-end;
}


 /*-----------------------------------*/
 .title{
  position: relative;
  margin-bottom:min(80px,11%);
  z-index: 50;
 }
 .title h3.en{
  display: block;
  font:clamp(25px,4vw,40px) var(--enfont);
  font-weight: 700;
  line-height: 1;
  position: relative;
  width:max-content;
  min-width: 0;
  margin:0 auto .8em;
 }
  .title h3.en span{
  text-align: center;
  color:white;
  text-shadow: 2px 3px 0 rgba(0,0,0,.36);
  width:max-content;
  min-width: 0;
  display: block;
  position: relative;
  z-index: 3;
  }
 .title h3.en:before{
  content:attr(data-text);
  color:#AAF96D;
  text-align: center;
  position: absolute;
  left:-2px;
  top:-2px;
  mix-blend-mode: multiply;
  z-index: 1;
    width:max-content;
  min-width: 0;
  opacity: 0.8;
 }
 .title h3.en:after{
  content:attr(data-text);
  color:#F7FF00;
  text-align: center;
  display: block;
  position: absolute;
  left:2px;
  top:2px;
  mix-blend-mode: multiply;
  z-index: 2;
  width:max-content;
  min-width: 0;
  white-space: nowrap;
  opacity: 0.8;
 }
 .title .ja{
  display: block;
  font-size:clamp(16px,1.6vw,20px);
  font-weight: 600;
  text-align: center;
  line-height: 1;
  color:var(--subColor);
 }

 /*------ shadow box -------*/
 .shadowbox{
  background:white;
  border-radius:min(1vw,10px);
  padding:clamp(35px,4.2vw,45px) clamp(25px,3vw,30px);
  position: relative;
 }
 dl.data{
  display: flex;
  margin:0 auto 1.5em ;
 }
dl.data dt{
  flex: 0 0 5em;
  font:clamp(14px,2vw,20px) var(--enfont);
  font-weight: 500;
}
dl.data dd{
  flex: 1 1 auto;
}
dl.data dd p{
  margin-bottom: 1em;
}
dl.data dd p:last-child{
  margin-bottom: 0;
}
dl.data dd .googlemap{
  margin: 1em auto;
  width: 100%;
  height: 0;
  padding-top: 50%;
  position: relative;
}
dl.data dd .googlemap iframe{
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  height: 100%;
}
dl.data dd ul{
  padding-left:1em;
}
dl.data dd ul li{
  line-height: 1.4;
  margin:.85em 0;
}
 .relative{
  position: relative;
  z-index: 2;
 }

/*------------ top contents ------------*/
#stage_info {
  position: relative;
  max-width: 1400px;
}
#stage_info .title h3,
#stage_info .title p{
  text-align: left;
  margin-left:0;
}
#stage_info .flex{
  gap:20px;
  justify-content: flex-start;
  z-index: 10;
}
#stage_info .copyarea{
  flex:0 1 45%;
}
#stage_info .copyarea .text{
  color:white;
  text-align: left;
  padding:min(20px,3%);
}
#stage_info .copyarea .text h4{
  font-weight: 700;
  font-size:clamp(22px, calc(30 / 1200 * 100vw), 30px);
  letter-spacing: 0.1em;
  margin-bottom: 2em;
  line-height: 2;
}
#stage_info .copyarea .text p{
  font-size:clamp(15px, calc(18 / 1200 * 100vw), 18px);
  letter-spacing: 0.1em;
  margin-bottom: 1.3em;
  line-height:2.2;
}
#stage_info .textarea{
  flex:1 1 50%;
}


#story {
  position:relative;
  padding-bottom: 4%;
  max-width: 1400px;
}

#story .bg_image_content{
  margin:auto;
  z-index: 10;

}
#story .introduct {
  text-align: center;
  margin:0 auto;
}
#story .introduct p{
  font-size:clamp(15px,1.6vw,17px);
  text-align: center;
  color:white;
  line-height: 2.2;
  margin-bottom: 2em;
}


#cast{
  position: relative;
}
.cast_area{
  margin-bottom: min(120px,20%);
}
.cast {
  display: flex;
  gap:2%;
  margin-bottom: 20px;
}
.cast .name{
  flex:0 1 145px;
  text-align: center;
  position: relative;
  font-size:clamp(25px,calc(30 / 1200 * 100vw),30px);
  font-weight: 700;
  letter-spacing: 0.05em;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
   line-height: 1;
}
.cast .name span{
  position: relative;
  z-index: 5;
}
.cast .name:after{
  content:"";
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius:50%;
  background:#FF9F6E;
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
}
.cast .name .mini{
  font-size:clamp(16px,calc(15 / 1200 * 100vw),15px);
  letter-spacing: normal;
}
.cast p{
  flex:1 1 min(1000px,100%);
  font-size:clamp(14px,calc(15 / 1200 * 100vw),15px);
}
.cast_list {
  display: flex;
  gap:4%;
  position: relative;
  z-index: 10;
}

.cast_list .element {
 box-shadow: 0 3px 6px rgba(104,0,0,0.2);
 flex: 0 1 16%;
}
.element .thumb{
  position: relative;
}

.element .thumb img{
  width:100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
  display: block;
}
.element .thumb p.cast_name{
  font-size:clamp(15px,calc(19 / 1200 * 100vw),19px);
  background: rgba(104,0,0,0.85) ;
  color:white;
  text-align: center;
  letter-spacing: 0.05em;
   font-weight: 700;
  line-height: 1;
  width: 100%;
  padding:.5em;
  position: absolute;
  bottom:0;
  left:0;
}

.band_area{
  margin-bottom: min(80px,12%);
}
.band_area h4,
.schedule_area h4{
  text-align: center;
  font-family: var(--enfont);
  font-size:clamp(20px,calc(25 / 1200 * 100vw),25px);
  margin-bottom: min(30px,6%);
}
.band_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:4%;
  position: relative;
  z-index: 10;
}
.band_list .thumb{
  margin-bottom: 15px;
}
.band_list .band_name{
  color:white;
  font-size:clamp(15px,calc(19 / 1200 * 100vw),19px);
  letter-spacing: 0.05em;
  font-weight: 700;
  text-align: center;
}
.band_list .part{
  text-align: center;
  font-family: var(--enfont);
}
.band_list .element {
 flex: 0 1 16%;
}
.schedule_list{
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(160px,1fr));
  gap:30px;

}
/*.schedule_list{
  display: flex;
  flex-wrap: wrap;
  gap:3%;
}
 .schedule_list dl{
  flex: 1 1 17%;
  margin-block:30px;
} */
.schedule_list dl dt{
  font-size:15px;
  color:white;
  line-height:1.4;
  text-align: left;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom:1px solid white;
}
.schedule_list dl dd{
  font-size:clamp(13px,calc(14 / 1200 * 100vw),14px);
}
#ticket{
  position: relative;
  max-width: 1000px;
}
.ticket_area{
  margin:0 auto;
}
.ticket_area .flex{
  gap:4%;
  justify-content: center;
  align-items: flex-start;
}
.ticket_area .textarea{
  flex:0 1 500px;
}
.ticket_area .imagearea{
  width: min(270px,100%);
  flex: 0 1 270px;

  padding: 1em;
}
.ticket_area .imagearea p{
  margin-bottom: .3em;
}
.ticket_area .imagearea img{
  border:1px solid #ccc;
}
.ticket_area dl.data dt{
 flex-basis:7em;
}
.ticket_area .price{
  display: flex;
  gap:10px;
}

#goods{
  position: relative;
  max-width: 1200px;
  min-height: 700px;
}

.goods_area{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:clamp(8px,2.5vw,25px);
  margin:min(40px,10%) 0;
}
.goods_area .item{
  flex: 0 1 calc(50% - clamp(10px,2vw,20px));
  padding:clamp(10px,2vw,20px);
  background:var(--mainColor);
  border:1px solid #ffffff;
  color:var(--subColor);
  font-size:clamp(12px,1.3vw,13px);
}

.goods_area .item p{
  text-align: center;
  line-height: 1.7;
  font-size:clamp(12px,1.3vw,13px);
}
.goods_area .item .thumbs{
   width:100%;
   aspect-ratio: 230/163;
   background:gray;
}

.goods_area .item .thumbs img{
  width:100%;
  height: 100%;
 object-fit: contain;
}
.goods_area .item .name{
  text-align:center;
  font-size:clamp(14px,1.6vw,16px);
  line-height: 1.4;
  margin: 10px auto;
  color:var(--subColor);
  font-weight: 600;
}
.goods_area .item .price{
  position: relative;
  text-align:center;
  font:clamp(18px,2.3vw,23px) var(--enfont);
  font-weight: 600;
  color:var(--subColor);
  margin:14px auto 0;
  letter-spacing: 0.05em;
}
.goods_area .item .price:before{
  content:"￥";
}
.goods_area .item.helf{
  flex: 1 1  calc(50% - clamp(10px,2vw,20px));
  gap:clamp(10px,2vw,20px);
  align-items: center;
}
.goods_area .item.helf.flex .row{
  /* flex: 0 0 min(238px,42%); */
    flex: 0 0 min(538px,50%);
}
.goods_area .item.helf.flex .row:last-child{
  flex: 1 1 auto;
}

.goods_area .item.long{
  flex: 1 1 100%;
  gap:clamp(10px,2vw,20px);
  flex-wrap: wrap;
}
.goods_area .item.long .row{
  flex: 1 1  calc(33% - clamp(10px,2vw,20px));
}
.goods_area .item.long .row.long{
  flex: 1 1 100%;
}
.goods_area .item.long dl{
  padding:10px 0;
}
.goods_area .item.long dl dt{
  color:#87BFB6;
}
.goods_area .item.long p{
  text-align: left;
}
.goods_area .item.helf.flex .row p:first-child{
  padding-right:5px;
}

.coming_soon{
  display: flex;
  justify-content: center;
  align-items: center;
  height:300px;
}
.coming_soon p{
  border:1px solid var(--mainColor);
  padding:1em 2em;
  font-size:1.3em;
  width:min(400px,80%);
  text-align: center;
  background:white;
  color:var(--mainColor);
}


#credit .credit_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 60px;
}


#credit .credit_area ul{
  margin:0 auto;
  color:white;

}
#credit .credit_area ul li{
  font-size:clamp(11px,calc(13 / 1200 * 100vw),13px);
  line-height: 1.4;
  text-align: left;
  margin:1em auto;
}

#credit .credit_area ul.center{
  display:block;
  margin:0 auto min(60px,8%);
  width: 100%;
}
#credit .credit_area ul.center li{
  text-align: center;
}

.sonoko_chara{
  width:min(300px,45%);
  margin:0 auto min(10%,60px);
}

/*////////// footer /////////////*/


#footer{
 position: relative;
 padding:80px 0 0 0;
}

#footer p{
  text-align: center;
}

#footer .copyrignt{
  padding:30px 30px min(60px,8%);
  max-width:var(--innerWidth);
  margin:auto;
}
#footer .copyrignt p{
  font-size:clamp(9px,1.3vw,13px);
  text-align: center;
  color:white;
  letter-spacing: .1em;
}
.gototop {
  position: fixed;
  width:80px;
  height: 80px;
  bottom:0;
  right:30px;
  z-index: 100;
  cursor: pointer;
}
.gototop .upbar{
  display: block;
  background:var(--accentColor);
  width:6px;
  height:100%;
  position: relative;
  margin:auto;
}
.gototop .upbar:after{
  content:"";
  width:100%;
  height: 75%;
  background:var(--subColor);
  position: absolute;
  top:0;
  left:0;
  transition:1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.gototop:hover .upbar:after{
  background:var(--subColor);
  height: 30%;
}
.gototop .txt{
  display: none;
  color: var(--mainColor);
  transform: rotate(90deg);
  position: absolute;
  top: 0;
  left: -1em;
  text-align: left;
  width: 100%;
  height: 100%;
  font:15px var(--enfont);
  letter-spacing: .1em;
}

/*------------- privacy -------------*/

#privacy h3{
  font-size:clamp(15px,2vw,20px);
  margin: 50px 0 15px;
}
#privacy p{
  font-size:clamp(13px,1.4vw,14px);
}

/*------------- attention -------------*/
#attention h3{
  font-size:clamp(15px,2vw,20px);
  margin: 50px 0 15px;
  color:#004074;
}
#attention h3:first-child{
  margin-top:0;
}
#attention p{
  font-size:clamp(12px,1.4vw,14px);
  line-height: 1.6;
  margin:1em auto;
}