@charset "utf-8";
/* CSS Document */

body{background:#f6f4f4!important;}

.en{
	font-family: graphie, sans-serif;
	font-weight: 500;
}
.en.bold{
	font-family: graphie, sans-serif;
	font-weight: 700;
}

.bold{font-weight:700;}

#maincover {
  position: relative;
  width: 100%;
  height: 100vh; /* ここを固定にする */
  background: url("../images/live/maincover.jpg") no-repeat top center;
  background-size: cover;
  overflow: hidden;
max-height: 840px;
	color: #fff;
	text-shadow:
		0 0 3px #050442,
		0 0 8px #050442,
		0 0 18px rgba(5,4,66,0.90),
		0 0 32px rgba(5,4,66,0.7);	
}

#maincover .cover_Container{
  position: absolute;
  inset: 0;
  padding: 30px 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#maincover .cover_Container{
  position: absolute;
  inset: 0;
}

#maincover .cover_Container .wrap-inner{
  height: 100%;
  padding: 20px 2%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 100vh;
}

#maincover,#maincover .cover_Container{max-height: 800px;}

#maincover .catchcopy {font-size: 2rem; letter-spacing: 0.2em; display: flex; justify-content: center;}

#maincover .wrap-title {
  flex: 1; /* ここが「余りを全部使う」指定 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
	max-width: 600px;
}

#maincover .wrap-title h1{margin-bottom: 30px;}
#maincover .wrap-title h1 img{max-width: 100%;}

#maincover .days{max-width:; display:inline-flex; flex-direction: column; justify-content: center; margin:0 auto;}
#maincover .day{display: flex; justify-content: flex-start; align-items: flex-end; font-size: 1.375rem; line-height: 110%;
 letter-spacing: 0.06em;}
#maincover .day p{margin: 0; padding: 0; margin-right: 5px;}
#maincover .days .daysr{margin-right:0!important;}
#maincover .days .en{font-size: 1.4em;}
#maincover .days .font_l{font-size: 2em;  line-height: 100%;}
#maincover .days .week{background:#d52271; justify-content: center; align-items: center;
 width: 36px; height: 36px; border-radius: 99px; display: inline-flex; line-height: 100%; text-shadow: none; font-size: 18px; margin:0 10px 0 5px;}

#maincover .stage{padding-top: 20px; font-size: 1.1875rem; letter-spacing: 0.06em;}

.catchCopy{text-align: center;}

.wrap-button{width: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center;}
.wrap-button p{padding-bottom: 10px; font-size: 1.1875rem;}
.wrap-button .button{
  width: 100%;
  max-width: 660px;
}
.wrap-button .button a{background:linear-gradient(to right, #FF8C0C, #ff4896); color: #fff;
 border-radius: 99px; height: 60px; display:flex; justify-content: center; align-items: center; padding:0 20px; font-weight: bold;
 text-shadow: none; }

.button-shadow{
box-shadow:0 2px 8px rgba(0, 0, 0, 0.05), 0 12px 24px rgba(0, 0, 0, 0.08);
}
.button-shadow_s{
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12),
            0 12px 24px rgba(0, 0, 0, 0.20);
}

.social{display: flex; justify-content: flex-end; align-items: center; position: absolute; top:10px; right: 10px; z-index: 10;}
.social li:not(:last-child){margin-right: 10px;}
.social li a{display: flex; justify-content: center; align-items: center; background:#ff4896; width: 38px; height: 38px; border-radius: 99px;}
.social li a img{max-width: 18px;}

.button.scroll{position: absolute; right: 10px; bottom: 10px; z-index: 10;}
.button.scroll a{display: flex; justify-content: center; align-items: center; background: rgba(0,0,0,0.8);
 border-radius: 99px; padding: 10px 8px 20px 8px; text-shadow: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
	font-size: 14px; letter-spacing: 0.04em;
}
.button.scroll a span{background: url("../images/live/icon_down.png") no-repeat top 10px center; background-size: 16px; padding-top: 38px;}

/* アニメーションの指定（既存の縦書き指定に追加でOK） */
.button.scroll a{
  animation: scrollBounce 2s infinite ease-out;
}

/* 2秒サイクルで「最初の0.5秒だけぴょこぴょこ → 残りは止まる」アニメーション */
@keyframes scrollBounce {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-6px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
  40% {
    transform: translateY(0);
  }
  /* ここから次のサイクルまでしばらく静止 */
  100% {
    transform: translateY(0);
  }
}

#main{padding: 40px 0;}
#glnav{margin-bottom: 60px; position: sticky; top:10px;}
#glnav ul{background: #fff; border-radius: 99px; padding: 0 30px; display: flex; justify-content: flex-start; align-items: center;
  height: 60px;}
#glnav ul li{padding: 0 10px; border-left: #D8D8D8 solid 1px; border-right: #D8D8D8 solid 1px;}
#glnav ul li a{　display: flex; justify-content: center; align-items: center;
 font-size: 16px; line-height: 100%; padding: 8px 5px;}
#glnav ul li a span{background: url("../images/live/icon_down.png") no-repeat left center; background-size: 16px; padding-left: 26px;}

.message{border-bottom: #D8D8D8 solid 1px;padding-bottom: 60px;}
.message dl{display: flex; justify-content: flex-start; align-items: center;}
.message dl dt{max-width: 360px;}
.message dl dd{padding-left: 30px; flex: 1;
	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);
}

#main{background: url("../images/live/background_head.jpg") no-repeat top center;
 background-size: 100% auto;}

#information{text-align: center; padding:60px 0;}

.title-box{background: url("../images/live/icon_w.png") no-repeat left center; background-size: 80px auto;
 min-height: 80px; display: inline-flex; flex-direction: column; justify-content:flex-end; align-items: flex-start;
 padding-left: 100px; margin-bottom: 40px;}
.title-box p{font-size: 1rem; margin-bottom: 10px; text-align: right;}
.title-box .main{font-size: 2.75rem; letter-spacing: 0.1em;}
.en_b.main::first-letter{
  color:#d52271; /* 好きな色に変えてね */
}

.table{max-width: 680px; margin: 0 auto; margin-bottom: 40px;}
.table dl{background: #fff; display: flex; justify-content: flex-start; border-radius: 20px; margin-bottom: 5px;}
.table dt,.table dd{padding: 20px 2% 15px 2%;}
.table dt{width: 160px; background:#fcbad7; border-radius: 20px 0 0 20px; font-weight: 700; display: flex; align-items: center;
 justify-content: center;}
.table dd{flex: 1; text-align: left;}
.table dd h5{font-size: 1rem; margin: 10px 0; border-left:#d52271 solid 4px; padding-left: 15px;}
.table dd p{margin-bottom: 5px;}
.table dd p .en{font-size: 1.375rem; color:#d52271;}
.table .button{margin-bottom: 15px;}
.table dd .caution{border-top: #D8D8D8 solid 1px; border-bottom: #D8D8D8 solid 1px; padding: 15px 0; font-size: 0.8125rem;
 margin: 20px 0 15px 0;}

.table dd a{display: inline-flex; font-size: 14px; line-height: 100%; justify-content: center; align-items: center;
 height: 30px; border-radius:99px; background: #ff4896; padding: 0 30px; color: #fff;}

/* ポップアップ全体の横幅制御（最大900px、画面が狭いときは縮む） */
#popup-gmap{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* ラッパー：比率とサイズを管理する箱（16:9） */
#popup-gmap .popup-gmap-inner{
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* 16:9 = 9/16 = 0.5625 → 56.25% */
}

/* iframe：ラッパーいっぱいにフィットさせる */
#popup-gmap .popup-gmap-inner iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#detail{background: url("../images/live/background_foot.jpg") no-repeat bottom center;
 background-size: 100% auto; }

#detail .wrap-button p{	text-shadow:
		0 0 3px #fff,
		0 0 8px #fff,
		0 0 18px rgba(255,255,255,0.9),
		0 0 32px rgba(255,255,255,0.7);}

#artist{background:url("../images/live/background.jpg") no-repeat top center fixed; background-size: cover;}
#artist{padding: 60px 0; color: #fff;
	text-shadow:
		0 0 3px #050442,
		0 0 8px #050442,
		0 0 18px rgba(5,4,66,0.90),
		0 0 32px rgba(5,4,66,0.7);	
}

/* dl を2カラムで並べる（dl 同士の gap を 30px） */
.wrap-artist .wrap-inner{
  display: flex;
  flex-wrap: wrap;
  gap: 40px; /* ← これが「dl と dl の間」のスペース */
}

/* 各 dl 内で dt / dd を横並び＆左右反転 */

.wrap-artist .wrap-inner dl:nth-child(1),
.wrap-artist .wrap-inner dl:nth-child(2){border-top: #72727E solid 1px; padding-top: 30px;}

.wrap-artist .wrap-inner dl{
  display: flex;
  flex-direction: row-reverse; /* 写真(dd) 左／テキスト(dt) 右 */
  align-items: flex-start;
  box-sizing: border-box;

  /* gap 分を引いた 2 カラム */
  flex: 0 0 calc((100% - 40px) / 2);
gap:15px;
	border-bottom: #72727E solid 1px;
	padding-bottom: 40px;
}

/* テキスト側：残り全部 */
.wrap-artist .wrap-inner dl dt{
  flex: 1 1 auto;
}

/* 写真側：幅160pxで固定（お兄ちゃん指定どおり） */
.wrap-artist .wrap-inner dl dd{
  flex: 0 0 160px;
}

/* 画像自体は枠いっぱいに */
.wrap-artist .wrap-inner dl .photo img{
  display: block;
  width: 100%;
  height: auto;
	border-radius: 10px;
}

.wrap-artist dd{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.wrap-artist dd .photo{margin-bottom: 20px;}
.wrap-artist dd .button{margin-bottom: 10px;}
.wrap-artist .button a{display: inline-flex; font-size: 12px; line-height: 100%; justify-content: center; align-items: center;
 height: 30px; border-radius:99px; background: #ff4896; padding: 0 10px; color: #fff; text-shadow: none!important; min-width: 120px;}
.wrap-artist .button a span{background: url("../images/live/icon_website.png") no-repeat left 10px center; background-size: 14px auto;
	 padding-left:34px; min-height: 18px; display: inline-flex; align-items: center;
 }
.wrap-artist .button.x a{background: #000;}
.wrap-artist .button.x a span{background-image: url("../images/icon_x.png");}

.wrap-artist h3{font-size: 1.25rem; margin-bottom: 15px;}
.wrap-artist p{font-size: 0.8125rem;}

#nowprinting{padding: 60px 0; font-size: 1.375rem;}

.wrap-bnr ul{ display: flex; justify-content: center; margin-bottom: 25px;}
.wrap-bnr ul li{margin-bottom: 15px;}
.wrap-bnr ul li a img{max-width: 400px; border-radius: 10px;}

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

#maincover {
  background: url("../images/live/maincover_sp.jpg") no-repeat center;
  background-size: cover;
  overflow: hidden;
}

#maincover .cover_Container{
  padding: 40px 2% 10px 2%;
}

#maincover .cover_Container .wrap-inner{
  height:100%;
  padding: 20px 2%;
  max-height:inherit;
}

#maincover,#maincover .cover_Container{max-height: 800px; align-items: center;}

#maincover .catchcopy {font-size: 1rem;}

#maincover .wrap-title {
	max-width:100%;  margin: 0 auto; justify-content: flex-start;
}

#maincover .wrap-title h1{margin-bottom: 5px;}

#maincover .day{font-size: 14px;}
#maincover .day p{margin: 0; padding: 0; margin-right: 5px;}
#maincover .days .en{font-size: 18px;}
#maincover .days .font_l{font-size:22px;  line-height: 100%;}
#maincover .days .daysr{margin-right:0!important;}
#maincover .days .daysr .en{font-size:40px;}	
#maincover .days .week{font-size: 14px; width: 24px; height: 24px; margin-left: 5px;}

#maincover .stage{padding-top: 10px; font-size:14px; letter-spacing: 0.06em;}

#maincover .wrap-button{padding-top: 20px;}	

.message dl{display: inherit; text-align: center;}
	.message dl dt{text-align: center; width: 100%; max-width: inherit;}
	.message dl dt a{display: inline-block;}
	.message dl dt img{max-width: 360px;}
	.message dl dd{padding: 0; padding-top: 40px;}

.wrap-artist .wrap-inner{
  display:inherit;
}
.wrap-artist .wrap-inner dl{
	display:inherit;
padding-bottom: 30px;
	margin-bottom: 30px;
}
.wrap-artist .wrap-inner dt{margin-bottom: 30px;}

}

@media screen and (max-width: 600px) {
	
#information{text-align: left;}	
.title-box{background-size:40px auto; align-items: flex-start; padding-left: 50px; background-position: bottom left;}
.title-box p{font-size: 12px; margin-bottom: 0;}
.title-box .main{font-size:34px; letter-spacing: 0.0625rem;}

.table dl{border-radius: 10px; font-size: 13px;}
.table dt,.table dd{padding: 10px 2% 5px 2%;}
.table dt{width: 80px; border-radius: 10px 0 0 10px;}
.table dl .button{margin-bottom: 10px;}

.social li:not(:last-child){margin-right: 5px;}
.social li a{width: 30px; height: 30px;}

.button.scroll{left:0; bottom: 0; padding-bottom: 10px; text-align: center;}
.button.scroll a{  writing-mode: horizontal-tb; height: inherit; padding: 0; padding: 0 10px; text-orientation: mixed; display: inline-flex;
	 margin:0 auto;}
.button.scroll a span{background-position: left center; padding: 0; padding-left:  20px;}	
	
.wrap-button p{font-size: 14px;}
.wrap-button .button a{font-size: 13px;}
	
#maincover .cover_Container{padding-bottom: 40px;}

#glnav{}
#glnav ul{height: 40px;}
#glnav ul li{}
#glnav ul li a{padding: 4px 15px;}
#glnav ul li a span{background: none; padding-left: 0;}	

.wrap-artist .wrap-inner dl .photo img{max-width: 200px;}	
.wrap-artist .wrap-inner dl:nth-child(2){border-top: none; padding-top: 0;}	

	
}