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


@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://bokula.jp/asovivafes2026/wp-content/uploads/sites/6/2026/02/bb.jpg') ;
 
background-position:  top 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;
}

ul {display:table: margin:20px auto;}
li {list-style: none;}


/* 最初は透明で、少し下に下げておく */
.fadeup {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 2s ease-out, transform 2s ease-out;
  view-visibility: hidden; /* 描画の最適化（任意） */
}

/* このクラスがついたらアニメーション開始 */
.fadeup.is-show {
  opacity: 1;
  transform: translateY(0);
}


.logo {width:30%; margin:0 auto; margin-bottom:20px;}
.more h3 {font-size:3vw;}


.menu-wrapper {display:none;}

.top img {width:60%; }

.topin {
  display:table;
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fffb2a;
margin:0 auto;
color:#000!important;
font-weight:bold;
font-size: 1.2vw;
}

.topin:before {
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
}

.top h1 {font-size:3.5vw;  color:#000;}
.top h2 {font-size:3vw;   color:#000;}
.top h3 {font-size:3vw;   color:#000;}
.top span {font-size:2vw;}


.sp {display: none;}



body {font-size: 1vw;}

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

table { width: auto!important;
        margin:0 auto;}


.title {
font-size:1.5vw;
text-align:left;

}

.title h2 {font-size: 4vw; color:#000;}

.title h2 {
  display: table;
  position: relative;
  padding: 1rem 2rem calc(1rem + 10px);
  background: #fffb2a;
  margin-bottom: 20px;
  
  /* 初期状態（本体） */
  opacity: 0;
  transform: translateY(20px);
  transition: all 2s ease-out;
}

/* --- 枠線のスタイル --- */
.title h2:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #000;
  z-index: -1;

  /* 初期状態（枠線はさらに透明で、もっと下に置いておく） */
  opacity: 0;
  transform: translate(15px, 15px); /* 右下にズラしておく */
  transition: all 2s cubic-bezier(0.22, 1, 0.36, 1); /* 枠線専用の動き */
}

/* --- スクロールで画面に入った時の動き（本体） --- */
.title h2.is-show {
  opacity: 1;
  transform: translateY(0);
}

/* --- スクロールで画面に入った時の動き（枠線） --- */
.title h2.is-show:before {
  opacity: 1;
  transform: translate(0, 0); /* 定位置（-7px, -7px）に戻る */
  transition-delay: 1s; /* 0.2秒遅らせて追いかけさせる */
}




.title span {font-size: 2vw; padding-left:10px;}


.subtitle {

  font-family: 'main';
  font-size: 3vw;
  line-height: 1;

color:#df421f;
margin-bottom: 15px;


}





.art {  display:flex;   gap:5px; margin-top:20px; flex-wrap: wrap; justify-content: center;}

.aitem {position: relative; width:35%;}
.artist  {color:#fffb2a!important; font-size: 3.5vw!important;
}
.new {position: absolute; top:0; left:0;}


.time {width:80%; margin:0 auto;}



.ticket {
  position: relative;
  padding: 1rem 2rem calc(1rem + 8px);
  background: #000;
  display:table;
  margin:0 auto;
  margin-top:20px;
  color:#fff!important;
}

.ticket:after {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #d64228;
pointer-events: none;

}


.ticket {
 width: 80%; margin:0 auto;
  text-align: center;  font-size: 18px; color:#000;}
.ticket h3 {font-size: 2.5vw;  color:#fffb2a;}

.ticket h4 {font-size: 2vw;   margin:10px; color:#fff!important;}
.ticket img {width: 300px; margin: 0 auto; 
margin-top: 20px; border:3px solid #000;
}

.ticket img {transition: transform 1s ease, box-shadow 1s ease; }
.ticket img:hover {transform: translateY(-10px); 
  }


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


.ticket ul {display:table; margin :0 auto; text-align: left; margin-top:20px;}

.ippan {display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2px;
margin: 0 auto;
margin-bottom:20px;
width: 60%;
}

.ippan img {width: 100%;}


.time {margin-top:20px; display:flex; flex-wrap: wrap;justify-content: center;}


.info {
  width: 80%; margin:0 auto;
  position: relative;
  padding: 1rem 2rem calc(1rem + 8px);
  background: #000;
  display:table;
  margin:0 auto;
  margin-top:20px;
  color:#fff;
}

.info:after {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  content: '';
  border: 4px solid #d03e27;
pointer-events: none;

}

.arch {display: flex; gap:10px; justify-content: flex-end;}

.link {border:1px solid #fffb2a; 
  display:block;
  background:#000; padding:10px 20px;  }

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


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

.more h3 {font-size:4vw;}
.top img {width:100%; margin-bottom:20px;}
.top h1 {font-size:6vw; margin:0; margin-bottom: 10px;}
.top h2 {font-size:5vw;margin:0;margin-bottom: 10px;}
.top h3 {font-size:5vw;margin:0;margin-bottom: 10px;}
.top span {font-size:4vw;}
.topin {width:100%; font-size: 3vw;}
.logo {width:40%;}
.title {
  font-size: 4vw;
 
}

.title h2 {font-size: 6vw;} 
.title span {font-size: 5vw;}  

.subtitle {
font-size: 6vw;

}

.art {width:100%; }
.aitem {width:48%;}

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

.time {width:100%; }

.ticket {font-size:3vw; width:100%;}
.ticket h3 {font-size: 7vw!important}
.ticket h4 {font-size: 6vw!important}
.ticket h2 {font-size: 6vw!important}
.ticket img {width: 60%; }
.titem img {width: 100%; }
.ticket span {font-size:4vw;}
.ticket li {font-size:3vw;}


.ippan  {width: 100%;}

table {font-size:3vw;}
th,td {display:block;}


.info {width:100%;}

	}