/*

Theme Name: 5th
Theme I: http://www.undsgn.com
Template: uncode
Version: 1.0.0
Text Domain: uncode


Description: Child theme for Uncode theme
Author: Undsgn™
Author UR
*/


body {font-size:1.5vw!important;}


body.modal-open {
 
  overflow: hidden;
}



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



.box {margin-top:80px;}



h1,h2,h3,h4,h5,h6 {margin: 0; font-weight:bold;}

.stitle h1 {font-size:7vw; margin-bottom:10px; color:#70D6FF;}

h2 { display:inline-block; font-size:6vw!important; margin-bottom:20px; 
}

h2 span {font-size:5vw;}

h3 {font-size:2vw!important;margin-bottom:20px;}
h3 span {font-size:2vw;}

h4 {font-size:1.5vw!important;}

h5 {font-size:1.7vw!important;}

h6 { display:inline-block; font-size:4vw!important; margin-bottom:20px; 
}

h6 span {font-size:3vw;}


.no {margin:0;}
.white {color:#fff!important;}


/* 最初は要素を透明にして、少し下に配置しておく */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

/* JavaScriptによって .is-visible クラスが追加されたら、要素を不透明にして元の位置に戻す */
.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.min {font-family: "Noto Serif JP", serif;}

.link img{
 transition-duration: 0.5s;
  
}
.link img:hover {
  transform: translateY(-10px);
  transition-duration: 0.5s;
}


.link {display: flex; justify-content: center; gap: 2px; 
  margin-top: 10px;  flex-wrap: wrap;}
.link a { width:200px;}


.up-hover-button {
  
  transition: transform 0.3s ease-in-out;
}

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


ul {margin:10px auto; text-align: left;  }
li {list-style: none; text-indent: -1em; ;}


.tour {background: #000; padding-top:20px;}

.tlogo {width:60%; margin:0 auto;}

table {width:100%;  border-collapse: separate; /* 境界線を分離させる（重要）*/
  border-spacing: 1px;    /* 隙間のサイズを指定 */ }



.sche table,td,th {border:none!important;}

.sche thead {
    background-color:#293681!important; 
    text-align: center;
  }



.sche td {background:#0F2854!important;font-size:1.2vw!important; position: relative;}

.sche th {background:#1C4D8D!important; 
  font-size:1.5vw!important}



.sche td:last-child
 {font-size: 1vw!important;
}
 


.sche td:nth-child(2) {
  font-size: 1.6vw!important}

td.ss {
  background-color: #ebaf19!important; }
.sche h2 {font-size:2vw!important; margin:5px; color:#fff;}

.int {display:none;}

.art {display:flex; justify-content: center; flex-wrap: wrap; gap:5px; 
 
padding:0 5px;
  margin-bottom:30px;

}
.aitem {position: relative; width:24.5%; }

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

.sche span {font-size:1.5vw;}


.ticket ul {display:table; margin:0 auto; margin-top:10px;}
.ticket img {width:300px; margin:10px 0;}

.ippan img {width:100px;}

      


.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


.release {display:flex; gap:30px; justify-content: center; }
.jake {width:42%;}
.kyoku {font-size:1.2vw;}
.kyoku { text-align: left;}
.kyoku li {
font-size:2vw;
font-weight:bold;
v
}


.single { font-size:1.2vw; font-weight:bold;  font-family: "Noto Serif JP", serif; 
  display: flex; gap:20px; justify-content: center; align-items: center;}
.single h2 {display:block; font-size:4vw!important;  font-family: "Noto Serif JP", serif;}
.single .btn {margin-top:20px;}
.sjake {width:20%;}

.tokuten {font-size:1.2vw;}
.tokuten ul {display:table; margin:20px auto;}
.tokuten img {margin-top:10px;}
.souki {display: flex; justify-content: center;  margin:0 auto; gap:20px; margin-bottom:20px;}
.sitem {width: 20%;}

.houjin {display: flex; justify-content: center; gap:10px; margin:20px auto;}



.houjin h5 {padding:10px; color:#fff; }
.tower {background: #f1ca20;}
.hmv {background: #dc1570;}
.h {width:66%; margin:0 auto; }
.ldk {background: #e72919;}



.hitem {
  display: flex;        /* 各hitem自体をFlexコンテナにする */
  flex-direction: column; /* hitem内のコンテンツを縦方向に並べる */
  justify-content: flex-start; /* コンテンツを上から詰める（デフォルト） */
background: #000;
padding: 10px;
  
  flex: 1; /* 各hitemが利用可能なスペースを均等に埋めるようにする */
 
  max-width: 30%; /* 1行に3つ並べる場合の例（必要に応じて調整） */
}

.hitem ul {
  /* ulとaタグの間の余白を調整したい場合 */
  margin-bottom: 20px; /* 例えば、ULの下に余白を追加 */

}


.hitem  li {

font-weight:bold;
font-family: "Noto Serif JP", serif;
}



.hitem .online {
  margin-top: auto;
  text-align: center;
  display: table;
  padding: 10px 15px;
  background-color: #1C4D8D; /* 通常時の背景色 */
  color: white;             /* 通常時の文字色 */
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s ease, color 0.3s ease; /* アニメーションの設定 */
  /* transition: プロパティ名 変化にかかる時間 変化の仕方; */
  font-weight: bold;
}

.hitem .online:hover {
  background-color: #4988C4; /* ホバー時の背景色 */
  color: #fff!important;
}

.online a:visited {
  color: #fff!important; }


#openDialogBtn1 {float:right; padding:10px; font-size:1.2vw;
background: #4988C4;
} 
#openDialogBtn5 {float:right; padding:10px; font-size:1.2vw;
background: #4988C4;
}

#openDialogBtn6,#openDialogBtn7 {padding:10px 20px;
color:#fff;
background: #e72919;
margin-top:20px;
font-weight:bold;
}



/* dialog要素のデフォルトの背景（backdrop）をカスタマイズ */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.7);
}

/* dialogコンテンツのスタイル（以前の .modal-content とほぼ同じ） */
dialog {
  border: none; /* デフォルトの境界線を消す */
  padding: 0; /* デフォルトのパディングを消す */
  background-color: transparent; /* 背景を透明にして中のコンテンツの背景を使う */
  max-width: 1000px; /* 最大幅 */
  width: 80%; /* 幅 */
  box-shadow: none; /* デフォルトのシャドウを消す */


}

.dialog-content {
  text-align: left;
  background-color: #fefefe;
  padding: 10px;
  border: 1px solid #888;
  border-radius: 8px;
  position: relative;
  font-size:1.2vw;


  overflow-y: auto; /* ここでスクロールさせる */
  
  /* スクロール連鎖防止 */
  overscroll-behavior: contain; 
  
  /* iOS対策：スクロールを滑らかにする */
  -webkit-overflow-scrolling: touch;
}

/* 閉じるボタン（以前の .close-button と同じ） */
.close-button {
  color: #aaa;
 
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: black;
  text-decoration: none;
}



i {margin-left:1em;}
.fa-youtube {color:#e71f17!important;}


.event {font-size:1.2vw;}
.mini {display: flex; justify-content: center; 

  margin-top:30px; gap:10px; flex-wrap: wrap; margin-bottom:30px;}
.minibox {width:32%;  border:1px solid #1C4D8D;   background: #000;} 
.minibox h3 {
background:#1C4D8D; font-size:1.5vw!important; margin-bottom:20px; padding:10px 5px; ;}
.minibox span {font-size:1vw;}
.minibox h4 {font-size:1.2vw!important; margin-top:20px; margin-bottom:10px; 

 padding:5px; }

.bb h4 {background:#1C4D8D; margin-bottom: 0; }
.bb h4:hover {background:#4988C4;  cursor: pointer; /* ←ここを追加 */}

.corabo {clear:both; display:flex; flex-wrap:wrap; margin:0 auto; gap:20px;  justify-content: center;}
.corabo img {width: 48%;}

.sold {font-size:1vw; color:#ff0000; border:3px solid #ff0000; padding:1px 5px; 

  position: absolute;
top:5px;
right:5px;

}

.info {font-size: 1.2vw;}
@media screen and (max-width:599px) {
.info {font-size: 3vw;}
.sold {display:block; font-size:3vw;}
.corabo img {width: 100%;}

.sapce50 {margin-top:30px;}

.release {display:block; }
.jake {width:75%; margin:0 auto;}
.kyoku {font-size:3vw;}
.kyoku {display:table ; margin:0 auto; text-align: left;}
.kyoku li {
font-size:3.5vw;

}

.tokuten {font-size:3vw;}
.tokuten ul {display:table; margin:20px auto;}
.tokuten li {font-size:3vw;}

.souki {gap:10px;}
.houjin {display:block;}
.hitem {
  display: block;        /* 各hitem自体をFlexコンテナにする */
  flex-direction: column; /* hitem内のコンテンツを縦方向に並べる */
  justify-content: flex-start; /* コンテンツを上から詰める（デフォルト） */

padding: 0px;
padding-bottom:10px;
  border: 1px solid #ddd;
  flex: 1; /* 各hitemが利用可能なスペースを均等に埋めるようにする */
 
  max-width: 100%; /* 1行に3つ並べる場合の例（必要に応じて調整） */
  margin-bottom:20px;
}

.sitem {width: 40%;}
.t {width:50%; margin:0 auto; float:right; margin-bottom: 10px;}
.h {width:40%; margin:0 auto;  float:right; margin-bottom: 10px;}

.hitem .online {clear: both;  margin: 0 auto; }

#openDialogBtn {float:right; padding:10px; font-size:3vw;}
#openDialogBtn5 {float:right; padding:10px; font-size:3vw;}



body {font-size: 4vw!important;}
.stitle h1 {font-size:12vw; }
h2 {font-size:9vw!important; }
h2 span {font-size:6vw!important; }
h3 {font-size:5vw!important; margin-bottom:10px;}
h3 span {font-size:5vw!important; }
h4 {font-size:4vw!important;}

h5 {font-size:4.5vw!important;}
h6 { display:inline-block; font-size:6vw!important; margin-bottom:20px; 
}

h6 span {font-size:6vw;}

.dialog-content {font-size: 3vw;}
.dialog-content li {font-size: 3vw;}


.tlogo {width:80%;}


.sche  thead {
  display:none;
}


.sche table th, table td {
width: 100%; 
display: block; 

}

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


.bbt {font-size:4vw;}

.sche td {font-size:4vw!important; font-weight: bold!important}
.sche th {font-size:5vw!important; font-weight: bold!important; }



.sche td:nth-child(2) {
  font-size: 5vw!important}

.sche td:last-child
 {font-size: 3vw!important;
}


.sche span {font-size:5vw;}




.int {display:block; font-size:2.5vw;}

.can {color:#fff; background: red; font-size:3vw; display:table; padding:5px; }

.aitem {width:49%; font-size:3.5vw;}




.ritem {width:100%;}


.link a { width:45%;}






.ticket img {width:60%;}
.ippan img {width:80px;}


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




.box {margin-top:30px;}

.event {font-size:3vw;}
.mini {display: flex; justify-content: center; margin-top:30px; gap:10px; flex-wrap: wrap; margin-bottom:30px;}
.minibox {width:100%;  border:1px solid #fad235; } 
.minibox h3 {
background:#fad235; font-size:4vw!important; margin-bottom:20px; padding:10px 5px; ;}
.minibox span {font-size:3vw!important;}
.minibox h4 {font-size:3.5vw!important; margin-top:20px; margin-bottom:10px; 

 padding:5px; }

 .event li {font-size:3vw;}


 .single { font-size:3vw; }
.single h2 {display:block; font-size:6vw!important; }
.single .btn {margin-top:20px;}
.sjake {width:45%;}

}