@charset "UTF-8";

/* =====================================================================
   来栖匠の魔界血婚大戦争 — 特設ページ専用スタイル（P042）
   公式サイトの css/style.css は継承しない（意図的に独立させている）。
   ===================================================================== */

:root {
  color-scheme: dark;

  --ink:       #000000;   /* チラシ背景の真っ黒 */
  --storm:     #0d1016;   /* 雷雲の暗部 */
  --blood:     #c80000;   /* 血の赤。黒地で3.46:1 = 大きい要素だけ */
  --blood-lit: #ff2a2a;   /* 小さい文字用の赤。黒地5.62:1 / 嵐地5.09:1 */
  --paper:     #ffffff;   /* 本文。21:1 */
  --ash:       #c7cbd4;   /* 補助テキスト。黒地12.92:1 / 嵐地11.72:1 */

  /* 明るい紙の面（チケット節）用 */
  --sheet:      #f7f5f0;
  --sheet-ink:  #14161a;
  --sheet-red:  #c81e30;  /* 紙地で5.9:1。公式サイトの明地用アクセントと同値 */
  --sheet-mute: #55595f;

  --display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --num: "Anton", "Arial Narrow", sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN",
          "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", sans-serif;

  /* 文字の下限。読み手の年齢の幅が広いので小さくしない */
  --fs-body: 1rem;        /* 16px */
  --fs-sm:   0.875rem;    /* 14px */
  --fs-xs:   0.8125rem;   /* 13px */

  --measure: 680px;
  --pad-x: clamp(20px, 6vw, 40px);
  --sec-py: clamp(64px, 13vw, 120px);
  --sec-py-soon: clamp(40px, 8vw, 64px);
  --sticky-h: 68px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--fs-body);
  line-height: 1.9;
  -webkit-text-size-adjust: 100%;
  padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom, 0px));
}

img {
  max-width: 100%;
}

a {
  color: var(--blood-lit);
}

:focus-visible {
  outline: 2px solid var(--blood-lit);
  outline-offset: 3px;
}

main:focus {
  outline: none;
}

/* 目には見えないが、読み上げソフトには読まれる文字 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blood);
  color: var(--paper);
  padding: 12px 20px;
  z-index: 100;
}

.skip:focus {
  left: 0;
}

/* 数字はチラシの調子に寄せた斜めの太いコンデンス体 */
.num {
  display: inline-block;
  font-family: var(--num);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.01em;
  transform: skewX(-8deg);
}

/* ---------------------------------------------------------------
   ヒーロー
   ビジュアルは絵として見せ、同じ内容を下に文字でも置く。
   幅と高さを指定しているのは、画像が届いた瞬間に下の文字が
   落ちるのを防ぐため（PCとスマホで縦横比が違うので両方に指定）。
   --------------------------------------------------------------- */
.hero {
  background: var(--ink);
}

.hero__art {
  display: block;
}

.hero__art img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1054 / 1492;
}

.hero__text {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(28px, 7vw, 48px) var(--pad-x) clamp(28px, 7vw, 48px);
  text-align: center;
}

.hero__troupe {
  margin: 0 0 20px;
  font-size: var(--fs-xs);
  letter-spacing: 0.2em;
  color: var(--ash);
}

.hero__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 6.4vw, 2.6rem);
  line-height: 1.7;
  letter-spacing: 0.06em;
}

.hero__title rt {
  font-family: var(--body);
  font-size: 0.32em;
  font-weight: 400;
  letter-spacing: 0.18em;
  color: var(--ash);
}

.hero__copy {
  margin: 24px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.25rem, 5.6vw, 1.9rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
  color: var(--blood-lit);
}

.hero__copy span {
  display: inline-block;
}

/* ---------------------------------------------------------------
   公演概要バー（赤帯）
   --------------------------------------------------------------- */
.bar {
  background: var(--blood);
  color: var(--paper);
}

.bar__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 20px var(--pad-x);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bar__date {
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1.2;
}

.bar__wd,
.bar__dash {
  font-family: var(--num);
  font-size: 0.55em;
  letter-spacing: 0.06em;
}

.bar__meta {
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------
   セクションの共通骨格
   見出しは招待状の組み方（中央揃え・細い二重罫）で、
   写真側の荒々しさと対にする。
   --------------------------------------------------------------- */
.sec {
  padding: var(--sec-py) 0;
}

/* まだ中身が入っていない節は、縦の空きを詰める */
.sec--soon {
  padding: var(--sec-py-soon) 0;
}

/* 嵐の面。チラシの空の赤みを薄く落とし、切れ目に稲妻を一本走らせる */
.sec--storm {
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(200, 0, 0, 0.14), transparent 70%),
    var(--storm);
}

.sec--storm::before {
  content: "";
  display: block;
  height: 2px;
  margin-bottom: var(--sec-py);
  background: var(--blood);
  clip-path: polygon(0 0, 12% 100%, 26% 0, 41% 100%, 55% 0, 70% 100%, 84% 0, 100% 100%, 100% 0, 0 0);
}

.sec--storm.sec--soon::before {
  margin-bottom: var(--sec-py-soon);
}

.sec__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--num);
  font-size: var(--fs-xs);
  letter-spacing: 0.3em;
  color: var(--blood-lit);
  text-align: center;
}

.sec__title {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 5.2vw, 1.7rem);
  letter-spacing: 0.14em;
  text-align: center;
}

.sec__title::after {
  content: "";
  display: block;
  width: 62px;
  height: 3px;
  margin: 20px auto 0;
  border-top: 1px solid var(--blood);
  border-bottom: 1px solid var(--blood);
}

.sec__lead {
  margin: 30px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  letter-spacing: 0.06em;
  color: var(--ash);
}

.soon {
  margin: 30px auto 0;
  max-width: 34em;
  text-align: center;
  color: var(--ash);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
}

.note {
  margin: 28px 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--blood-lit);
}

/* 開場時刻は全公演の全来場者に必要な事実。★（一部の回の補足）より
   目に入る必要があるので、白 21:1 で1px大きくする。
   赤はアフタートークの印として取っておく（色の役割は変えない）。 */
.note--open {
  color: var(--paper);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

/* 並び順に依存させない。note が何個続いても成立する */
.note + .note {
  margin-top: 10px;
}

/* ---------------------------------------------------------------
   あらすじ
   対決の構図をそのまま縦に組む。VSだけ大きく赤くして目を引き、
   本文は白のまま左揃えで読ませる。
   （--blood は黒地で3.46:1しかなく、本文に使うとAAに届かない）
   --------------------------------------------------------------- */
.story__catch {
  margin: 32px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
}

.story__vs {
  font-family: var(--num);
  font-size: clamp(1.9rem, 8vw, 2.8rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--blood);
}

.story__text {
  margin: 30px auto 0;
  max-width: var(--measure);
}

.story__text p {
  margin: 0 0 1.1em;
  line-height: 1.95;
}

.story__text p:last-child {
  margin-bottom: 0;
}

/* 決めゼリフ。赤い一本線で本文と段差をつける */
.story__quote {
  margin: 30px auto 0;
  max-width: var(--measure);
  padding: 4px 0 4px 18px;
  border-left: 3px solid var(--blood);
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  line-height: 1.9;
}

.story__quote p {
  margin: 0;
}

/* <br> は幅に関係なく必ずそこで折るため、320px級では
   意図した2行が4行に割れる。入るときだけそこで折る形にする。 */
.story__tagline span,
.standby span {
  display: inline-block;
}

.story__tagline {
  margin: 36px auto 0;
  max-width: var(--measure);
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1rem, 4.2vw, 1.2rem);
  line-height: 1.9;
  letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------
   上演スケジュール
   --------------------------------------------------------------- */
.days {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.day {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 24px 0;
}

.day:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.day__date {
  margin: 0 0 14px;
  line-height: 1.1;
}

.day__date .num {
  font-size: clamp(2.1rem, 9vw, 3rem);
}

.day__wd {
  font-family: var(--num);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: var(--ash);
  margin-left: 8px;
}

.day__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.day__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.stage {
  flex: none;
  width: 2em;
  height: 2em;
  border: 1px solid var(--blood-lit);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--num);
  font-size: var(--fs-sm);
  color: var(--blood-lit);
}

.time {
  font-family: var(--num);
  font-size: 1.35rem;
  letter-spacing: 0.04em;
}

.talk {
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--blood-lit);
}

/* ---------------------------------------------------------------
   チケット
   --------------------------------------------------------------- */
.prices {
  margin: 40px 0 0;
}

.price {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 22px 0;
  text-align: center;
}

.price:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.price__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-body);
  letter-spacing: 0.16em;
}

/* 「準備中」バッジ。2026-08-27時点でHTML側は未使用（料金が3種とも未定になり、
   1行だけ「準備中」と付けても区別にならないため外した）。
   料金確定後、特典の内容だけが未定なら「特典内容 準備中」として復活させる。 */
.price__badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  border: 1px solid currentColor;
  font-family: var(--body);
  font-size: var(--fs-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  vertical-align: middle;
}

.price__yen {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
}

.price__yen .num {
  font-size: 2rem;
  margin-right: 4px;
}

.price__note {
  margin: 6px 0 0;
  font-size: var(--fs-xs);
  color: var(--ash);
}

.standby {
  margin: 34px 0 0;
  /* --pad-x をそのまま使うと .sec__inner の余白と二重になり、
     320px級では文字が使える幅が 238px まで削れる */
  padding: 22px clamp(14px, 4vw, 28px);
  border: 1px solid var(--blood);
  text-align: center;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  color: var(--ash);
}

/* ---------------------------------------------------------------
   紙の面（チケット節だけ）
   黒い嵐のなかに、招待状を一枚だけ差す＝ブリーフの「抜き」。
   共通クラスは書き換えず、この節の中だけを後から上書きする。
   明地のコントラスト（実測）
     #14161a on #f7f5f0 …… 16.62:1
     #55595f on #f7f5f0 …… 6.47:1
     #c81e30 on #f7f5f0 …… 5.23:1
   --------------------------------------------------------------- */
.sec--paper {
  background: var(--sheet);
  color: var(--sheet-ink);
}

.sec--paper .eyebrow {
  color: var(--sheet-red);
}

.sec--paper .sec__title::after {
  border-top-color: var(--sheet-red);
  border-bottom-color: var(--sheet-red);
}

.sec--paper .price {
  border-top-color: rgba(20, 22, 26, 0.18);
}

.sec--paper .price:last-child {
  border-bottom-color: rgba(20, 22, 26, 0.18);
}

.sec--paper .price__note {
  color: var(--sheet-mute);
}

/* .sec__lead は黒地用の --ash（#C7CBD4）なので、紙に載せると 1.49:1 まで落ちる。
   紙の面に置く補助テキストは全て --sheet-mute（6.47:1）に寄せる。 */
.sec--paper .sec__lead {
  color: var(--sheet-mute);
}

.sec--paper .price__badge {
  color: var(--sheet-red);
}

.sec--paper .standby {
  border-color: var(--sheet-red);
  color: var(--sheet-mute);
}

/* 紙の面ではボタンの色も差し替える。
   これを書かないと黒地用の白文字がそのまま紙に載り、
   マウスを乗せて塗られるまで読めなくなる（実測 1.09:1）。
   本体の定義は下の「共有」節の .btn / .btn--x にある。
     塗り  #f7f5f0 on #c81e30 …… 5.23:1
     hover #f7f5f0 on #14161a …… 16.62:1
     枠線  #c81e30 on #f7f5f0 …… 5.23:1（非テキストUIの3:1も満たす） */
.sec--paper .btn {
  background: var(--sheet-red);
  color: var(--sheet);
}

.sec--paper .btn:hover,
.sec--paper .btn:focus-visible {
  background: var(--sheet-ink);
  color: var(--sheet);
}

.sec--paper .btn--x {
  background: transparent;
  border-color: var(--sheet-red);
  color: var(--sheet-ink);
}

.sec--paper .btn--x:hover,
.sec--paper .btn--x:focus-visible {
  background: var(--sheet-red);
  color: var(--sheet);
}

/* ---------------------------------------------------------------
   出演
   スタッフ欄と同じ「小さい赤のラベル＋白い名前」の型を踏襲する。
   名前は中央へ流し込むだけにして、人数が増減しても崩れないようにする。
   --------------------------------------------------------------- */
.cast__group {
  margin: 36px 0 0;
}

.cast__label {
  margin: 0;
  text-align: center;
  font-family: var(--body);
  font-weight: 400;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--blood-lit);
}

/* 狭い画面では2列に揃える。
   中央寄せのまま折り返すと、名前の長さがまちまちなので
   「1人だけ取り残される行」ができて座りが悪くなる。 */
.cast__names {
  margin: 14px auto 0;
  /* 600px級で1列264pxまで広がると、名前2つの間が約148px空いて
     「劇団員3名」というまとまりが視覚的に解ける */
  max-width: 24rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  justify-items: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  letter-spacing: 0.1em;
}

/* 人数が奇数のとき、最後のひとりは行いっぱいを使って中央に置く
   （760px以上では flex に切り替わるため、この指定は自動的に無効になる） */
.cast__names li:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

/* 最も狭い端末では素直に1列へ。日本語は任意の位置で折り返すので、
   2列のまま詰めると氏名が途中でぶった切られる（8文字で発生） */
@media (max-width: 340px) {
  .cast__names {
    grid-template-columns: minmax(0, 1fr);
    letter-spacing: 0.06em;
  }
}

.cast__names li {
  margin: 0;
}

/* ---------------------------------------------------------------
   スタッフ
   --------------------------------------------------------------- */
.staff {
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 14px 20px;
  font-size: var(--fs-body);
}

.staff dt {
  color: var(--blood-lit);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  padding-top: 4px;
}

.staff dd {
  margin: 0;
}

/* ---------------------------------------------------------------
   会場
   --------------------------------------------------------------- */
.venue {
  margin: 36px 0 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
}

.venue__addr {
  margin: 10px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ash);
}

.map {
  margin: 28px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.map iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border: 0;
}

.map__link {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------
   ひろめる
   --------------------------------------------------------------- */
.share__lead {
  margin: 30px 0 0;
  text-align: center;
  font-size: var(--fs-body);
  color: var(--ash);
}

/* 送られる内容の見本。
   実際にメッセージとして届く形に近い見た目にして、
   押す前に中身が分かるようにする。 */
.share__preview {
  margin: 26px auto 0;
  max-width: 30rem;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.45);
  text-align: left;
}

.share__preview-cap {
  margin: 0 0 12px;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: var(--blood-lit);
}

.share__preview-body {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 3.8vw, 1.05rem);
  line-height: 1.9;
  color: var(--paper);
}

.share__preview-url {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  line-height: 1.7;
  color: var(--ash);
  /* 長いURLで横に伸びないよう、どこでも折り返す */
  overflow-wrap: anywhere;
}

/* Xだけに付くハッシュタグの断り書き。
   見本と実際が食い違わないよう、どこに何が足されるかを明示する。 */
.share__preview-tags {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.2);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--ash);
}

.share__preview-tags b {
  color: var(--blood-lit);
  font-weight: 400;
}

.share__note {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--ash);
  min-height: 1.5em;
}

.btn {
  display: block;
  width: fit-content;
  margin: 18px auto 0;
  padding: 15px 40px;
  background: var(--blood);
  color: var(--paper);
  border: 0;
  font-family: inherit;
  font-size: var(--fs-body);
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover,
.btn:focus-visible {
  background: var(--blood-lit);
  color: var(--ink);
}

.btn--x {
  background: transparent;
  border: 1px solid var(--blood);
  color: var(--paper);
}

.btn--x:hover,
.btn--x:focus-visible {
  background: var(--blood);
  color: var(--paper);
}

/* ---------------------------------------------------------------
   フッター
   --------------------------------------------------------------- */
.foot {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: var(--sec-py) 0 60px;
  text-align: center;
}

.foot__logo {
  display: block;
  margin: 0 auto;
  height: auto;
}

.foot__desc {
  margin: 20px auto 0;
  max-width: 30em;
  font-size: var(--fs-sm);
  color: var(--ash);
  text-align: left;
}

.foot__link {
  display: inline-block;
  margin: 24px 0 0;
  font-size: var(--fs-body);
  letter-spacing: 0.08em;
}

.foot__copy {
  margin: 36px 0 0;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: var(--ash);
}

/* ---------------------------------------------------------------
   下に貼り付くチケット導線
   予約先が決まるまでは、チケット欄へ運ぶ役割にしておく。
   （押しても何も起きないボタンは置かない）
   --------------------------------------------------------------- */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--ink);
  border-top: 1px solid var(--blood);
  padding: 10px var(--pad-x) calc(10px + env(safe-area-inset-bottom, 0px));
}

.sticky__btn {
  display: block;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 13px 20px;
  background: var(--blood);
  color: var(--paper);
  text-align: center;
  text-decoration: none;
  font-size: var(--fs-body);
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.sticky__btn:hover,
.sticky__btn:focus-visible {
  background: var(--blood-lit);
  color: var(--ink);
}

/* ---------------------------------------------------------------
   スクロールで静かに立ち上がる
   .js-reveal は main.js が付ける。CSSに書かないのは、
   JSが動かなかったときに中身が永久に消えるのを避けるため。
   --------------------------------------------------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .js-reveal,
  .js-reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   画面が広いとき
   --------------------------------------------------------------- */
@media (min-width: 760px) {
  body {
    padding-bottom: 0;
  }

  .hero__art img {
    aspect-ratio: 16 / 9;
  }

  .bar__inner {
    flex-direction: row;
    justify-content: center;
    align-items: baseline;
    gap: 24px;
  }

  .day {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 24px;
    align-items: start;
  }

  /* 幅があるときは横一列に流したほうが、劇団員／客演のまとまりが見えやすい */
  .cast__names {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 28px;
    /* 狭い画面用の 24rem を解除しないと、客演4名が入りきらず2行に折れる */
    max-width: none;
  }

  .day__date {
    margin: 0;
  }

  .sticky {
    display: none;
  }
}

/* ---------------------------------------------------------------
   印刷（日程と地図を紙に出す人がいる）
   既定では背景色が印刷されないため、指定しないと白紙に白文字になる
   --------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
    padding-bottom: 0;
  }

  .hero,
  .sec,
  .sec--storm,
  .sec--paper,
  .bar {
    background: #fff !important;
    color: #000 !important;
  }

  .sec--storm::before {
    display: none;
  }

  .bar,
  .bar__meta,
  .foot__desc,
  .venue__addr,
  .price__note,
  .soon,
  .standby,
  .day__wd,
  .sec__lead {
    color: #333 !important;
  }

  .eyebrow,
  .note,
  .talk,
  .staff dt,
  .cast__label,
  .story__vs,
  .stage,
  a {
    color: #a00000 !important;
  }

  /* .note--open も .note に該当するため、上で赤に上書きされてしまう。
     画面と同じく「開場＝目立つ／★＝赤」の序列を紙でも保つ。 */
  .note--open {
    color: #333 !important;
  }

  .sec__title::after {
    border-color: #a00000 !important;
  }

  .js-reveal,
  .js-reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
  }

  .sticky,
  .skip,
  .map,
  .btn,
  #share {
    display: none;
  }

  .hero__art img {
    max-width: 80mm;
    margin: 0 auto;
  }

  .day,
  .price {
    break-inside: avoid;
  }
}