@charset "UTF-8";
/* ========== Base ========== */
* {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Noto Sans JP', sans-serif;
  color: #333;
  background: #fff;
  line-height: 1.7;
}
/* ========== Header / Hero ========== */
.header {
  background: #111;
  color: #fff;
  text-align: center;
  padding: 10px 16px;
}
.hero-img {
  width: 100%;
  max-width: 900px;
  height: auto;
  display: block;
  margin: 0 auto 12px;
}
.header h1 {
  font-size: clamp(18px, 2.8vw, 28px);
  margin: 8px 0 0;
}
/* ------------------------------------------------------------
   セクション間の余白方針（上から順に出現）：
   1) チケット情報（.tickets）
   2) カレンダー（.calendar-section）
   3) 購入方法（.howto）
   4) 開催概要（.exinfo／.outline）
   以前より“少し詰めた”値で統一
------------------------------------------------------------- */
/* ========== Tickets / チケット情報 ========== */
.tickets {
  background: #0a0a0a;
  color: #fff;
  padding: 16px 20px 20px; /* 以前より控えめ */
}
.tickets__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.tickets__title {
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .06em;
  margin: 0 0 16px;
  position: relative;
  padding-left: 14px;
  text-align: left;
}
.tickets__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  background: #fff24b;
  border-radius: 2px;
}
/* meta */
.tickets__meta {
  display: flex;
  gap: 18px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tickets__dl {
  display: grid;
  grid-template-columns: 10em 1fr; /* ラベル幅拡張 */
  column-gap: 12px;
  row-gap: 6px;
  margin: 0;
}
.tickets__dl dt {
  font-weight: 700;
  white-space: nowrap;
  opacity: .9;
}
.tickets__dl dd {
  margin: 0;
}
/* 期間・販売開始の文字やや大きめ */
.tickets__dl dt, .tickets__dl dd {
  font-size: 18px;
  line-height: 1.8;
}
.tickets__status {
  text-align: right;
}
.badge {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 700;
}
.badge--soon {
  color: #bbb;
}
.badge--on {
  color: #111;
  background: #fff24b;
  border-color: #fff24b;
}
.badge--end {
  color: #fff;
  background: #555;
  border-color: #555;
}
.tickets__count {
  display: block;
  margin-top: 4px;
  opacity: .85;
}
/* cards */
.ticket-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; /* やや詰める */
}
.ticket {
  background: #111;
  border: 1px solid #CCCCCC; /* ← ご指定通り薄い灰色で統一 */
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .2);
}
.ticket__name {
  margin: 0 0 6px;
  font-size: 18px;
}
.ticket__note {
  margin: 0 0 10px;
  color: #cfcfcf;
}
.ticket__list {
  margin: 0 0 10px;
  padding-left: 1.2em;
}
.ticket__list li {
  margin: .08em 0;
}
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  transition: .15s;
  cursor: pointer;
}
.btn--primary {
  background: #fff24b;
  color: #111;
  font-weight: 700;
}
.btn--primary:hover {
  filter: brightness(0.95);
}
.btn.is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: not-allowed;
}
@media (max-width:640px) {
  .tickets__meta {
    align-items: flex-start;
  }
  .tickets__status {
    text-align: left;
  }
  .tickets__dl {
    grid-template-columns: 6em 1fr;
  }
}
/* ========== Calendar（カレンダー） ========== */
.calendar-section {
  max-width: 1100px;
  margin: 18px auto; /* 少し詰める */
  padding: 16px;
  text-align: center;
}
.calendar-section h2 {
  font-weight: 700;
  letter-spacing: .08em;
  margin: 0 0 4px;
}
/* 注意文：濃い赤＋太字 */
.calendar-section > p {
  margin: 0 0 14px;
  color: #b30000;
  font-weight: 700;
}
.calendar {
  display: grid;
  gap: 14px;
  align-items: start;
  grid-template-columns: 1fr; /* SP: 1列（1×4） */
}
@media (min-width:768px) {
  .calendar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  } /* PC: 2列（2×2） */
}
.month {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.month__head {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
  background: #faf7f9;
}
.month__title {
  font-weight: 700;
  letter-spacing: .06em;
}
.month table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.month th, .month td {
  width: 14.285%;
  text-align: center;
  padding: 10px 0;
}
.month thead th {
  font-size: 12px;
  color: #999;
  font-weight: 600;
}
.month td {
  position: relative;
}
/* 曜日色 */
.th-sun, .sun {
  color: #e24b5b;
}
.th-sat, .sat {
  color: #4a8ad4;
}
/* 前後月・無効 */
.outside {
  opacity: .35;
}
.disabled {
  color: #bbb;
}
.disabled a {
  pointer-events: none;
}
/* 日付リンク（ベース） */
a.daylink {
  display: inline-block;
  min-width: 38px;
  padding: 6px 10px;
  border-radius: 18px;
  text-decoration: none;
  transition: .15s;
  border: 1px solid currentColor;
}
/* 平日：グレー */
a.daylink--weekday {
  color: #777;
  border-color: #aaa;
}
a.daylink--weekday:hover {
  background: #aaa;
  color: #fff;
}
/* 土曜：青 */
a.daylink--sat {
  color: #4a8ad4;
}
a.daylink--sat:hover {
  background: #4a8ad4;
  color: #fff;
}
/* 日祝：赤 */
a.daylink--holiday {
  color: #e24b5b;
}
a.daylink--holiday:hover {
  background: #e24b5b;
  color: #fff;
}
/* 今日ハイライト */
.today a.daylink {
  border-color: #333;
  color: #333;
  font-weight: 700;
}
/* 過去日のテキスト表示 */
.past-day {
  color: #bbb;
}
@media (max-width:520px) {
  .month__title {
    font-size: 16px;
  }
  .month thead th {
    font-size: 11px;
  }
}
/* ========== How to Buy / 購入方法 ========== */
.howto {
  background: #0a0a0a;
  color: #fff;
  padding: 18px 16px 28px; /* 以前より少し詰める */
}
.howto__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.howto__title {
  font-weight: 800;
  font-size: clamp(22px, 3vw, 32px);
  letter-spacing: .06em;
  margin: 0 0 16px;
  position: relative;
  padding-left: 14px;
  text-align: left;
}
.howto__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  background: #fff24b;
  border-radius: 2px;
}
.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.step {
  background: #111;
  border: 1px solid #CCCCCC;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.step__num {
  display: inline-grid;
  place-content: center;
  flex: 0 0 34px;
  height: 34px;
  width: 34px;
  border-radius: 50%;
  background: #fff24b;
  color: #111;
  font-weight: 800;
}
.step__body h3 {
  margin: .1em 0 .3em;
  font-size: 16px;
}
.step__body p {
  margin: 0;
  color: #cfcfcf;
  font-size: 14px;
  line-height: 1.8;
}
.howto__note {
  margin: 12px 0 0;
  color: #cfcfcf;
  font-size: 13px;
  line-height: 1.8;
}
@media (max-width:640px) {
  .step {
    padding: 12px;
  }
  .step__body h3 {
    font-size: 15px;
  }
}
/* ========== Exhibition Info（開催概要詳細） ========== */
.exinfo {
  background: #0a0a0a;
  color: #fff;
  padding: 16px 16px 24px; /* 以前より少し詰める */
  font-family: 'Noto Sans JP', sans-serif;
}
.exinfo__inner {
  max-width: 1100px;
  margin: 0 auto;
}
.exinfo__title {
  font-weight: 800;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .06em;
  margin: 0 0 18px;
  text-align: left;
  position: relative;
  padding-left: 14px;
}
.exinfo__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: .1em;
  bottom: .1em;
  width: 6px;
  background: #fff24b;
  border-radius: 2px;
}
.exinfo__list {
  display: grid;
  grid-template-columns: 10em 1fr;
  column-gap: 18px;
  row-gap: 12px;
  margin: 0;
  padding: 0;
  line-height: 1.9;
}
.exinfo__list dt {
  grid-column: 1;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}
.exinfo__list dd {
  grid-column: 2;
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.exinfo__list a {
  color: #fff24b;
  text-decoration: none;
}
.exinfo__list a:hover {
  text-decoration: underline;
}
@media (max-width:640px) {
  .exinfo__list {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }
  .exinfo__list dt {
    white-space: normal;
    opacity: .9;
  }
}
/* ========== Outline（紹介ブロック：必要時） ========== */
.outline {
  /* すでに定義済み（背景＋被写界深度）。.outline__inner のpaddingで間隔調整 */
}
.outline__inner { /* 以前より控えめに設定済み */
}
/* ========== Footer ========== */
.footer {
  font-size: 12px;
  color: #777;
  text-align: center;
  padding: 22px 8px;
  background: #fafafa;
}
.footer-logo {
  width: 160px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}
.footer--horizontal .footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.footer--horizontal .footer-logo {
  width: 140px;
  margin: 0;
}
.footer--horizontal p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
}
/* ===== Section spacing adjustments ===== */
/* チケット情報セクションの下に余白 */
.tickets {
  margin-bottom: 24px; /* 下に程よいスペースを追加 */
}

/* 開催概要セクションの下に余白 */
.exinfo {
  margin-bottom: 24px; /* ページ終端との距離を確保 */
}
/* ===== チケット情報：スマホ時の「期間」「販売開始」改行防止 ===== */
@media (max-width: 640px) {
  /* 左右カラム幅の調整 */
  .tickets__dl {
    grid-template-columns: 7em 1fr !important;  /* ← 少し広げる（6em→7em） */
    column-gap: 10px;
  }

  /* 数値を少し小さくして1行に収まるように */
  .tickets__dl dt,
  .tickets__dl dd {
    font-size: 16px !important;
    line-height: 1.6;
  }

  /* 「期間」ラベルが長い場合の折り返し防止 */
  .tickets__dl dt {
    white-space: nowrap;
  }

  /* 期間テキストが途切れないようにスペースも調整 */
  .tickets__dl dd {
    word-break: keep-all;
  }
}
/* === チケット情報：期間/販売開始（div ラップ構造対応） === */
.tickets__dl{
  display: grid;
  row-gap: 8px;                    /* 各行の間隔 */
  margin: 0;
  padding: 0;
}
.tickets__dl > div{
  display: grid;                   /* 各行（div）自体を 2 カラムに */
  grid-template-columns: 9em 1fr;  /* ← ラベル幅を広げる（SPでも効く） */
  column-gap: 10px;
  align-items: baseline;
}
.tickets__dl > div dt{
  font-weight: 700;
  white-space: nowrap;
}
.tickets__dl > div dd{
  margin: 0;
  white-space: nowrap;             /* ここで折り返しを抑止 */
  word-break: keep-all;
  font-size: 16px;                 /* 少しだけ控えめに */
  line-height: 1.6;
}

/* PC は少しタイトに戻す */
@media (min-width: 768px){
  .tickets__dl > div{
    grid-template-columns: 10em 1fr;  /* PC は 10em */
    column-gap: 12px;
  }
  .tickets__dl > div dd{
    font-size: 18px;
    line-height: 1.8;
  }
}
.tickets__dl{
  display:grid; grid-template-columns: 10em 1fr; column-gap:12px; row-gap:6px;
}
@media (max-width:640px){
  .tickets__dl{ grid-template-columns: 7.5em 1fr; column-gap:10px; }
}
.tickets__dl dt, .tickets__dl dd{ margin:0; line-height:1.6; }
.tickets__dl dt{ white-space:nowrap; }
.tickets__dl dd{ white-space:nowrap; word-break:keep-all; overflow:hidden; text-overflow:ellipsis; }
html {
  scroll-behavior: smooth;
}