@charset "utf-8";

html,
body {
  margin: 0;
  padding: 0;
  height: 100%; /* 背景が画面全体を覆うようにする */
  background-color: aliceblue;
}

main {
  margin: 0;
  background-color: aliceblue;
}

/* PC版（幅1200px以上） */
@media (min-width: 1200px) {
  .background {
    margin: 0;
    width: 100%;
    height: 100vh;
    background-image: url(../img/comedy.jpg);
    background-repeat: no-repeat;
    background-size: contain; /* PCでは背景を全体にフィット */
    background-position: center; /* 中央に配置 */
  }
}

/* タブレット版（幅751px以上1200px未満） */
@media (min-width: 751px) and (max-width: 1199px) {
  .background {
    margin: 0;
    width: 100%;
    height: 45vh; /* タブレットでは少し高さを調整 */
    background-image: url(../img/comedy.jpg);
    background-repeat: no-repeat;
    background-size: contain; /* アスペクト比を維持して要素内に収める */
    background-position: center; /* 上部に配置 */
  }
}

/* スマホ版（幅750px以下） */
@media (max-width: 750px) {
  .background {
    margin: 0;
    width: 100%;
    height: 80vh; /* スマホでは高さをさらに調整 */
    background-image: url(../img/comedy-short.jpg);
    background-repeat: no-repeat;
    background-size: contain; /* アスペクト比を維持して要素内に収める */
    background-position: top; /* 上部に配置 */
  }
}
.content {
  margin: 0 10%;
  font-family: "Yu Gothic", "SimHei";
  font-size: 1rem;
  line-height: 2;
  text-align: left;
  color: black;
}

.explanation {
  text-align: center;
  margin: 5% 0;
  font-size: 1.25rem;
}

.explanation span {
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

.highlight {
  background: linear-gradient(transparent 60%, #ffff66 60%);
}

.time {
  margin: 7.5% auto 5%;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  width: 90%;
  max-width: 720px;
  text-align: center;
}

.time-title {
  font-size: 1.75rem;
  background: #ffff66;
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.time > p {
  padding: 15px 20px;
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
}

.location {
  margin: 5% auto;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  width: 90%;
  max-width: 720px;
  text-align: center;
}

.location-title {
  font-size: 1.75rem;
  background: #ffff66;
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.location > p {
  padding: 15px 20px;
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
}

/* 画像をレスポンシブ対応させるスタイル */
.img-box {
  width: 100%;
  max-width: 720px; /* 必要に応じて最大幅を設定 */
  height: auto; /* 高さを自動調整 */
  background-repeat: no-repeat;
  background-size: cover; /* 画像を全体にフィットさせる */
  margin: 0 auto; /* 中央揃え */
}

.img-box img {
  width: 100%;
  height: auto;
  display: block; /* 不要な余白を防ぐ */
}

.pay {
  margin: 5% auto;
  background: #f1f1f1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
  width: 90%;
  max-width: 720px;
  text-align: center;
}

.pay-title {
  font-size: 1.75rem;
  background: #ffff66;
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.pay > p {
  padding: 15px 20px;
  font-size: 1.5rem;
  margin: 0;
  text-align: center;
}

.ticket {
  margin: 5% auto;
  background: aliceblue;
  width: 90%;
  max-width: 720px;
}

.ticket-title {
  font-size: 1.75rem;
  background: #f7de02;
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.ticket > p {
  padding: 30px 10px;
  font-size: 1.2rem;
  /* margin-bottom: 20px; */
  border: ridge 6px gainsboro;
}

.ticket .ended {
  position: relative;
  background: rgba(120, 120, 120, 0.25); /* 薄暗く */
  filter: grayscale(60%);
  pointer-events: none; /* 操作不可に */
}

.ticket .ended-message {
  color: #d32f2f;
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
  margin-bottom: 1em;
}

b {
  font-weight: bold;
}

.form {
  margin: 5% auto;
  background: aliceblue;
  width: 90%;
  max-width: 720px;
}

.form-title {
  font-size: 1.75rem;
  background: rgb(247, 183, 64);
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.p1 {
  padding: 30px 10px;
  font-size: 1.25rem;
  margin: 0;
}

.button {
  display: flex;
  /* width: 200px; */
  margin: 0 auto;
  padding: 0.8rem 3rem;
  font-size: 1.25rem;
  background-color: #e3364a;
  box-shadow: 0 5px 0 #ca1c30;
  border-radius: 60px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}

a {
  text-align: center;
}

.p2 {
  padding: 30px 20px 0;
  font-size: 1rem;
  margin: 0;
  text-align: center;
}

.caution-first {
  margin: 5% auto;
  background: aliceblue;
  width: 90%;
  max-width: 720px;
}

.caution-first-title {
  font-size: 1.75rem;
  background: #f78d02;
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

.list-item {
  font-size: 1.25rem;
}

.caution-second {
  margin: 5% auto 10%;
  background: aliceblue;
  width: 90%;
  max-width: 720px;
}

.caution-second-title {
  font-size: 1.75rem;
  background: #f78d02;
  padding: 4px;
  text-align: center;
  color: black;
  font-weight: bold;
  letter-spacing: 0.1rem;
}

/* ヘッダーの高さを固定 */
.header-desktop,
.header-mobile {
  position: fixed;
  top: 0; /* 初期位置を画面上部に固定 */
  left: 0;
  width: 100%;
  z-index: 1000;
  height: 80px; /* ヘッダーの高さを固定 */
  transition: transform 0.3s ease; /* スクロール時のアニメーション */
  transform: translateY(-100%); /* 初期状態で画面外に隠す */
  cursor: pointer; /* クリック可能であることを示す */
}

.header-desktop.show,
.header-mobile.show {
  transform: translateY(0); /* スクロール時に表示 */
}

.apology {
  border: 2px solid #ccc;
  padding: 2.5rem;
  margin: 20px auto;
  border-radius: 10px;
  background-color: #f9f9f9;
  width: 80%;
  text-align: left;
}

.apology > h3 {
  text-align: center;
}