/*
Theme Name: 2026
Description: Child theme for Uncode theme
Author: Undsgn™
Author URI: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode
*/

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


}




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

.main-logo {display: none;}


.menu-item a {
  margin-left:20px;
  margin-top:30px;
  display: inline-block!important; /* これが必要！ */
  font-style: oblique;
}

.menu-item a::first-letter {
  color: #ff4500!important;      /* 文字の色をオレンジレッドに */
  font-size: 1.5em;      /* 大きさを2倍に */
} 

.sp {display: none;}

h1,h2,h3,h4 {margin: 0!important; margin-bottom:10px!important;}









/* JavaScriptが実行される前の初期状態 */
.js-fade {
  opacity: 0;
  visibility: hidden;
}

/* クラスがついた時のアニメーション */
.fadeUp {
  visibility: visible;
  animation-name: fadeUpAnime;
  animation-duration: 1.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}






.blue {color:#d80a30;}

.ticket ul {display:table; margin:20px auto!important; text-align: left;}
li {list-style: none; text-indent: -1em; font-size:1.2vw!important;}

.logo {

width: 100%;
text-align: center; 
padding:60px 0px;




}

.logo img { width: 70%; margin-bottom:20px;}

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

.title {
color:#231815;
display: table; margin: 0 auto; 
margin-top: 80px;
font-style: oblique;
font-size: 2vw;
}

.title h1 {font-size: 5vw;}
.title h2 {font-size: 4vw; }
.title span {color:#d80a30;font-size: 7vw;}
.st {font-size: 3vw;}


.lineup {

  text-align: center;  padding: 20px 0;　position:relative;}
.new {position:absolute; top:0; left:0;}

.lineup h2 { font-size: 2vw!important; margin: 0; margin-bottom: 20px;  }
.lineup h3 {font-family: 'Luckiest Guy'; font-weight:300; font-size: 2.5vw!important; margin: 0; margin-top: 50px; margin-bottom: 10px;  }
.lineup span {font-size: 1.5vw; }
.line {display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1vw;
}

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

border-bottom:8px solid #d80a30;
position: relative;

}




.more  {font-size: 2vw; display: table; 
  margin: 0 auto; margin-top: 30px;
font-weight: bold;
}

.ticket {
padding:10px;

font-size: 1.8vw;  text-align: center; font-weight: bold; }
.ticket h2 { font-size: 2.5vw!important; margin: 0; margin-bottom: 20px;}
.ticket h3 { font-size: 2vw!important; margin: 0;}
.ticket h4 { font-size: 1.5vw!important; margin: 0; margin-top: 20px;}
.ticket span { font-size: 1.5vw!important; padding-left: 5px; }
.ticket img {width: 300px;margin: 30px 0;}

.ticket table {
font-size: 3vw;  
margin: 50px auto; 
width: auto;           /* 親要素いっぱいに広げない */
table-layout: auto;    /* セルの内容に合わせて幅を決める（デフォルト） */
border: none!important;
}
.ticket th {
padding:10px ;
font-size: 1.5vw; 
border-bottom: 1px solid #808080!important;
}

.ticket td {
padding:10px ;

border-bottom: 1px solid #808080!important
}

.pg {display: flex; gap:10px; justify-content: center; }


.inb  {border:1px solid #d80a30; display:table; margin:0 auto; font-size:2vw; padding:10px 20px; line-height: 1.2; font-weight:bold;}
a.inb  {color:#d80a30!important;}
a.inb:hover  {color:#fff!important;}
.inb:hover {background: #d80a30; }


.gaiyou {
font-size:1vw;
  padding: 20px 0;


   
}

.gaiyou a {text-decoration: underline;}

.gaiyou table { width: auto!important; margin: 0 auto;}
.gaiyou td,.gaiyou th {
    padding:10px 20px;
    border-bottom:1px solid #808080!important}



/* モーダル背景 */
.modal {
  display: none; 
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8); /* 背景を暗く */
}

/* モーダルの中身 */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 90%;
  max-width: 1000px;
  text-align: left;
  border-radius: 8px;
  position: relative;
  color: #333;
}

/* 閉じるボタン */
.close-btn {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 28px;
  cursor: pointer;
}

.trp-flag-image {margin-right: 30px!important;}


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


body::before {
    /* 画像を90度回転 */
    transform: rotate(90deg);
    
    /* 回転の中心を画面中央に設定 */
    transform-origin: center center;

    /* 回転すると幅と高さが入れ替わるため、サイズを再調整 */
    width: 100vh;  /* 縦幅を横幅として使う */
    height: 100vw; /* 横幅を縦幅として使う */
    
    /* 位置のズレを補正（中央に配置） */
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    
    background-size: cover;
  }


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



li {font-size:3.5vw!important;}

.title  {font-size: 4vw;}
.title h1 {font-size: 8vw;}
.title h2 {font-size: 7vw;}
.title span {color:#d80a30;font-size: 10vw;}
.st {font-size: 6vw;}


.logo img {width: 95%; }
.logo h2 { font-size: 8vw!important; }
.logo span { font-size: 4vw!important; margin: 0; padding-left: 5px; }
.logo h3 {  font-size: 7vw!important; margin: 5px!important;}


.litem {width: 49%; font-size: 4vw;

}


.lineup h2 { font-size: 5vw!important; }
.lineup h3 { font-size: 4.5vw!important; }
.lineup span {font-size: 4vw; }
.more  {font-size: 4vw;}





.ticket h2 { font-size: 6vw!important; margin: 5px;!important;}
.ticket h3 { font-size: 4vw!important; }
.ticket h4 { font-size: 4vw!important; }
.ticket span { font-size: 4vw!important; }

.ticket {font-size: 4vw;}




.ticket th {

font-size: 3vw; 
border-bottom: 1px solid #808080!important;
}

.ticket td {
font-size: 6vw; 

}

.pg a {width: 30%;}
.inb {font-size:4vw;}
.gaiyou {font-size:3vw;}
.gaiyou table {width: 90%!important;}
.gaiyou th {background:rgba(255, 255, 255, 0.2);}
.gaiyou td,.gaiyou th {
    display: block;
   
  }


}