#opening {
    position: fixed;
    z-index: 9999;
    background: #fff; /* 背景暗転 */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    display: flex;
    justify-content: center;
    align-items: center;
}

#opening img {
    width: 600px;
    opacity: 0;
    animation: logoFade 2s ease forwards;
}

@keyframes logoFade {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/*card用*/

.musical-card{
  max-width:600px;
  margin:40px auto;
  padding:28px;
  background:#fff;
  border-radius:20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* タイトル */
.musical-title{
  font-size:20px;
  margin-bottom:20px;
}

/* 画像 */
.musical-images{
  display:flex;
  gap:20px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.musical-images img{
  width:45%;
  border-radius:12px;
  object-fit:cover;
}

/* 公演情報 */
.musical-info{
  margin-bottom:18px;
}

.musical-info p{
  margin:4px 0;
  font-size:14px;
  font-weight:500;
}

.date{
  color:#444;
}

.price{
  color:#d08a3a;
  font-weight:bold;
  font-size:16px;
}

/* 説明 */
.musical-desc{
  font-size:14px;
  color:#555;
  margin-bottom:24px;
  line-height:1.7;
}

/* ボタン */
.musical-btn{
  display:inline-block;
  padding:14px 28px;
  background:linear-gradient(135deg,#d08a3a,#f3c27a);
  color:#fff;
  border-radius:10px;
  text-decoration:none;
  font-size:15px;
  font-weight:bold;
  transition:.2s;
}

/*  販売中 */
.open{
  background:linear-gradient(135deg,#d08a3a,#f3c27a);
}

/*  残りわずか */
.few{
  background:linear-gradient(135deg,#e67e22,#f8c471);
}

/* SOLD OUT */
.soldout{
  background:linear-gradient(135deg,#888,#bbb);
  pointer-events:none;
  cursor:default;
  opacity:.9;
}

/* 販売終了 */
.closed{
  background:linear-gradient(135deg,#222,#555);
  pointer-events:none;
  cursor:default;
}

.musical-btn:hover{
  opacity:.85;
}

#showtime {
  display: inline-block;
  background: linear-gradient(45deg, #FA8BFF 16%, #2BD2FF 57%, #2BFF88 90%);
  background: -webkit-linear-gradient(45deg, #FA8BFF 16%, #2BD2FF 57%, #2BFF88 90%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientEffect 2.5s infinite alternate;
}
 
@keyframes gradientEffect {
  from {background-position: left}
  to {background-position: right}
}