@font-face {
  font-family: 'main';
  src: url('../font/ToppanBunkyuMidashiGothicStdN-ExtraBold.woff2') format('woff2'),
    url('../font/ToppanBunkyuMidashiGothicStdN-ExtraBold.woff') format('woff');
}



body::before {
  background:url('https://junerockfes.com/wp-content/uploads/2024/07/bb-1.jpg') ;
 
background-position:  bottom left;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size:cover;
  display:inline-block;
  position: fixed;
  top: 0;
  left: 0;
  
  width: 100vw;
 height: 100vh;
 
  content: "";
  z-index: -1;
}







.comment2022 {background: rgba(0, 0, 0, 0.7); font-size: 1vw; text-align: center; padding: 20px 5px; line-height: 1.8;


}





.logo2022 {

width: 100%;
text-align: center; 
padding:60px 20px;
background: rgba(0, 0, 0, 0.5);
}

.logo2022 img {}

.logo2022 h2 { font-size: 4vw!important}
.logo2022 span { font-size: 2vw!important; padding-left: 5px;}
.logo2022 h3 {  font-size: 3vw!important}


/* ロゴ部分のアニメーション設定 */
.logo2022.scroll-animation {
  opacity: 0;
  transform: scale(0.95); /* 初期状態では少しだけ小さくしておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 画面内に入った時のスタイル */
.logo2022.scroll-animation.is-visible {
  opacity: 1;
  transform: scale(1); /* 元のサイズに戻す */
}



.title2022 { font-size: 5vw; font-family: 'main'; display: table; margin: 0 auto; margin-top: 80px;}

.ha {text-align: center; }
.ha h2 { font-size: 2vw!important; margin: 0; margin-bottom: 20px;  }


.lineup {text-align: center; background: rgba(0, 0, 0, 0.5); padding: 20px 0;}
.lineup h2 { font-size: 3vw!important; margin: 0; margin-bottom: 30px;  margin-top: 20px; }
.lineup h3 { font-size: 2vw!important; margin: 0; margin-top: 50px; margin-bottom: 10px;  }
.lineup span {font-size: 1.5vw; }
.line2022 {display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5vw;
}

.litem {width: 23%;
text-align: center;
font-size: 1.2vw;
font-weight: bold;
padding-bottom: 10px;

background: rgba(0, 0, 0, 0.5);
position: relative;


}

.litem2 {width: 30%;
text-align: center;
font-size: 1.2vw;
font-weight: bold;
padding-bottom: 10px;

background: rgba(0, 0, 0, 0.5);
position: relative;
}



/* アニメーションの初期状態と変化の基本設定 */
.litem2.scroll-animation {
  opacity: 0;
  transform: translateY(30px);
  /* アニメーション自体の時間を設定（ここでは0.6秒） */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 画面内に入ったときに適用されるスタイル（変更なし） */
.litem2.scroll-animation.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ▼▼▼ ここからがタイミングをずらす設定 ▼▼▼ */
/* :nth-child(n) を使ってn番目の要素に異なる遅延(transition-delay)を設定します */

.litem2.scroll-animation.is-visible:nth-child(1) {
  transition-delay: 0.1s; /* 1番目の要素は0.1秒後 */
}
.litem2.scroll-animation.is-visible:nth-child(2) {
  transition-delay: 0.2s; /* 2番目の要素は0.2秒後 */
}
.litem2.scroll-animation.is-visible:nth-child(3) {
  transition-delay: 0.3s; /* 3番目の要素は0.3秒後 */
}
.litem2.scroll-animation.is-visible:nth-child(4) {
  transition-delay: 0.4s;
}
.litem2.scroll-animation.is-visible:nth-child(5) {
  transition-delay: 0.5s;
}
.litem2.scroll-animation.is-visible:nth-child(6) {
  transition-delay: 0.6s;
}

.litem2.scroll-animation.is-visible:nth-child(7) {
  transition-delay: 0.7s;
}

.litem2.scroll-animation.is-visible:nth-child(8) {
  transition-delay: 0.8s;
}

.litem2.scroll-animation.is-visible:nth-child(9) {
  transition-delay: 0.9s;
}
/* 必要に応じて、この下に :nth-child(7), (8)... と追加してください */





.subt {font-size:1vw; line-height:1;}




.new {position: absolute; top: 0 left: 0; }

.more h4 {font-size: 2vw!important; display: table; margin: 0 auto; margin-top: 30px;}

.ticket2022 {font-size: 1.2vw; padding: 40px 0; text-align: center; font-weight: bold; background: rgba(0, 0, 0, 0.5);}
.ticket2022 h2 { font-size: 2.5vw!important; margin: 0; margin-top: 20px;
padding:0 20px;

}
.line {background: linear-gradient(transparent 80%, rgba(0, 191, 255, 0.5) 80%);}
.ticket2022 h3 { font-size: 2vw!important; margin: 0; margin-top: 20px; margin-bottom: 50px;}
.ticket2022 h4 { font-size: 2.5vw!important; margin: 0; margin-top: 20px;}
.ticket2022 h5 { font-size: 1.2vw!important; margin: 0; margin-top: 20px; line-height:0;}
.ticket2022 span { font-size: 1.5vw!important; padding-left: 5px; }

.ryoukin { margin:0 auto; margin-bottom:50px; display:table; }

/* ロゴ部分のアニメーション設定 */
.ticket2022.scroll-animation {
  opacity: 0;
  transform: scale(0.95); /* 初期状態では少しだけ小さくしておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 画面内に入った時のスタイル */
.ticket2022.scroll-animation.is-visible {
  opacity: 1;
  transform: scale(1); /* 元のサイズに戻す */
}


.ticket2022 img {
transition: transform 0.3s ease; /* 0.3秒かけてアニメーション */


width:300px;
}

.ticket2022 img:hover {
  transform: translateY(-10px); /* 上に10px移動 */
}


.ticket2022 table {font-size: 2vw; width: 60%!important; margin: 50px auto; margin-bottom: 0;table-layout:   fixed;}
.ticket2022 th {border: none; 
  white-space: nowrap; line-height: 1; border-bottom: 1px solid #fff!important; padding: 20px 0;}
.ticket2022 td {  padding: 0;
  white-space: nowrap; border-bottom: 1px solid #fff!important}

.chuu {font-weight: normal; margin-top: 10px; font-size: 1vw;}

.tgazou {background: rgba(0, 0, 0, 0.5); padding: 0 5px;}
.goods {text-align: center; font-size: 1vw;  padding: 20px 0;}
.goods h2 { font-size: 2vw!important; margin: 0; margin-bottom: 10px;}

.goods2023 { display:flex; width:70%; margin:0 auto; 
   align-items: center; padding:10px;}





.info2022 {
padding: 40px 0;
background: rgba(0, 0, 0, 0.5);


}

.infoin {display: table; margin: 0 auto; padding: 0 20px;}
.info2022 h2 { font-size: 2vw!important; margin: 0; display: table; margin: 0 auto; margin-bottom: 20px; }
.info2022 h3 { font-size: 1.2vw!important; margin: 0; margin-top: 10px; text-indent: -1em;}
.info2022 h4 { font-size: 1vw!important; margin: 0; margin-top: 10px;}


.gaiyou2022 {

  padding: 20px 0;
   background:rgba(0,0,0,0.5);
    
}

.gaiyou2022 a {color: #00bfff!important}

.gaiyou2022 table {width: 80%!important; margin: 0 auto;}
.gaiyou2022 td,.gaiyou2022 th {
    padding:10px;
    border-bottom:1px solid #666!important}


/* ロゴ部分のアニメーション設定 */
.gaiyou2022.scroll-animation {
  opacity: 0;
  transform: scale(0.95); /* 初期状態では少しだけ小さくしておく */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* 画面内に入った時のスタイル */
.gaiyou2022.scroll-animation.is-visible {
  opacity: 1;
  transform: scale(1); /* 元のサイズに戻す */
}



.link2022 {display: flex; justify-content: center; gap :20px;}
.linkitem {width: 80px;} 

.arche {display: flex;  justify-content: center; flex-wrap: wrap; gap :10px;} 
.aritem {width: 24%;} 


.map {display: flex; width:70%; margin:0 auto; gap:20px; background:#fff;padding:10px;}
.notice {display:table; margin:0 auto; padding:10px;}

.pc {}
.sp {display:none;}

ul {margin-bottom:80px!important;}
li {list-style: none; }


@media screen and (max-width: 599px) {


.pc {display:none;}
.sp {display:block;}

.notice h3 {font-size:4vw!important;}
.map {width:100%; display: block;}
.comment2022 { font-size: 3vw; }

.title2022 { font-size: 10vw; }

.logo2022 h2 { font-size: 6vw!important; margin:0px; margin-top:10px;}
.logo2022 span { font-size: 4vw!important; padding-left: 5px;}
.logo2022 h3 {  font-size: 4vw!important; margin:0px; margin-top:10px;}

.litem {width: 48%; font-size: 3vw;}
.litem2 {width: 48%; font-size: 3vw;}



.more h4 {font-size: 5vw!important;}

.ha h2 { font-size: 5vw!important;}

.lineup h2 { font-size: 5vw!important; margin-top:20px;}
.lineup h3 { font-size: 4.5vw!important; }
.lineup span {font-size: 4vw; }

.ticket2022 h2 { font-size: 6vw!important;}
.ticket2022 h3 { font-size: 5vw!important; }
.ticket2022 h4 { font-size: 6vw!important; }
.ticket2022 h5 { font-size: 4vw!important; }
.ticket2022 span { font-size: 4vw!important; }
.ticket2022 img {width: 60%;}
.ticket2022 {font-size: 4vw;}
.ticket2022 table {font-size: 5vw; width: 90%!important; table-layout: auto; margin-top: 30px ;}



.chuu  {font-size: 3vw;}

.goods {font-size: 3.5vw; }
.goods h2 { font-size: 5vw!important; }
.goods2023 {display:block; width:100%;}
.gitem2 {width:80%; margin:0 auto; margin-bottom:20px;}


.info2022 h2 { font-size: 5vw!important;}
.info2022 h3 { font-size: 4vw!important; }
.info2022 h4 { font-size: 4vw!important; }


.gaiyou2022 table {width: 90%!important;}
.gaiyou2022 th {background:rgba(255,255,255,0.2);}
.gaiyou2022 td,.gaiyou2022 th {
    display: block;
   
  }

.arche {justify-content: center; gap: 10px;}
.aritem {width: 30%;} 

.subt {font-size:2.5vw;}

}