/*
  世民研 LIVE LP
  - 8px を単位にそろえる
  - クリーム = 情報（文字も伏せ字も）／グレー = 項目名／赤 = LIVE の1箇所だけ
  - 表現は「網点写真」と「伏せ字」の2つだけ。未確定の値は、確定後と同じ枠に入れて伏せ字でつぶす
*/
:root {
  --bg: #0b0b0f;
  --cream: #ece4d0;
  --muted: #8f8c98;
  --accent: #e8322b;
  --hair: rgba(236, 228, 208, 0.2);
  --font-display: "Dela Gothic One", sans-serif;
  --font-en: "Bebas Neue", sans-serif;
  --font-body: "Zen Kaku Gothic New", sans-serif;
  --u: 8px;
  --gutter: 20px;
  --label: 64px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img {
  display: block;
  max-width: 100%;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--cream);
  color: var(--bg);
}

:focus-visible {
  outline: 1px solid var(--cream);
  outline-offset: 4px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: calc(var(--u) * 3) var(--gutter) calc(var(--u) * 4);
  overflow: hidden;
  isolation: isolate;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  filter: brightness(0.6);
}

.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(11, 11, 15, 0.8) 0%, rgba(11, 11, 15, 0.1) 28%, rgba(11, 11, 15, 0.1) 50%, rgba(11, 11, 15, 0.92) 74%, var(--bg) 100%);
}

.hero__fest {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  padding-bottom: var(--u);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-en);
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0.16em;
}

.hero__fest span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.hero__logo {
  width: 78%;
  height: auto;
  margin: calc(var(--u) * 3) 0 0 -2%;
  filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.7));
}

.hero__foot {
  margin-top: auto;
}

.hero__title {
  margin: 0 0 var(--u);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.hero__title span {
  margin-left: 0.3em;
  font-family: var(--font-en);
  font-size: 1.15em;
  letter-spacing: 0.24em;
  color: var(--accent);
}

/* 唯一の確定情報を画面幅いっぱいに置く */
.hero__date {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin: 0;
  font-family: var(--font-en);
  line-height: 0.8;
}

.hero__num {
  margin-left: -0.03em;
  font-size: min(44vw, 240px);
  letter-spacing: -0.01em;
}

.hero__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--u);
  padding-bottom: 0.1em;
}

.hero__count {
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--cream);
}

.hero__count:empty {
  display: none;
}

.hero__week {
  font-size: min(10vw, 48px);
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* 写真はスクロールに合わせてゆっくり沈む */
@supports (animation-timeline: scroll()) {
  .hero__bg img {
    animation: drift linear both;
    /* ヒーローは overflow: hidden で自身がスクロール領域扱いになるので、ページ全体を基準にする */
    animation-timeline: scroll(root);
    animation-range: 0 100svh;
  }

  @keyframes drift {
    to {
      transform: translateY(12%);
    }
  }
}

/* 下に続きがあることだけを示す。ヒーロー下端の余白に収める */
.hero__next {
  position: absolute;
  left: 50%;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 24px;
  margin-left: -16px;
  color: var(--muted);
}

.hero__next svg {
  width: 10px;
  height: 14px;
}

/* ---------- 情報の表 ---------- */
main {
  padding: 0 var(--gutter);
}

.spec {
  margin: 0;
  border-top: 1px solid var(--hair);
}

.spec__row {
  display: grid;
  grid-template-columns: var(--label) 1fr;
  column-gap: calc(var(--u) * 2);
  padding: calc(var(--u) * 3) 0;
  border-bottom: 1px solid var(--hair);
}

/* 1行目を値の行（32px）の中央にそろえ、折り返した2行目は詰める */
.spec dt {
  padding-top: 7px;
  font-family: var(--font-en);
  font-size: 0.95rem;
  line-height: 1.2;
  letter-spacing: 0.16em;
  color: var(--muted);
}

.spec dd {
  margin: 0;
}

/* ---------- 伏せ字 ----------
   中に入る文字と同じ大きさ・同じ色・同じ文字数ぶんの棒。長さは --len（em）で、高さは字面に合わせる */
.x {
  display: inline-flex;
  align-items: center;
  width: calc(var(--len) * 1em);
  height: 0.8em;
  vertical-align: -0.06em;
  background: currentColor;
}

/* 画面の下端から入ってくる間（行の高さぶんのスクロール）に左から引く。
   対応していないブラウザでは最初から表示されたまま */
@supports (animation-timeline: view()) {
  .x {
    animation: ink linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 100%;
  }

  @keyframes ink {
    from {
      clip-path: inset(0 100% 0 0);
    }
  }
}

/* Bebas Neue は大文字だけなので、棒も字高に合わせて低くする */
.place__room .x,
.times .x,
.tt__time .x {
  height: 0.7em;
  vertical-align: 0.02em;
}

/* ---------- PLACE ---------- */
.place__name,
.place__room {
  margin: 0;
}

.place__name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: calc(var(--u) * 4);
}

.place__room {
  font-family: var(--font-en);
  font-size: 1.5rem;
  line-height: calc(var(--u) * 4);
  letter-spacing: 0.04em;
}

/* ---------- OPEN / START ---------- */
.times {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  font-family: var(--font-en);
  font-size: 1.5rem;
  line-height: calc(var(--u) * 4);
  letter-spacing: 0.04em;
}

.times__sep {
  color: var(--muted);
}

/* ---------- TIME TABLE ---------- */
.tt {
  margin: calc(var(--u) * -0.5) 0 0;
  padding: 0;
  list-style: none;
}

.tt li {
  display: grid;
  grid-template-columns: calc(var(--u) * 7) 1fr;
  align-items: center;
  min-height: calc(var(--u) * 5);
  border-bottom: 1px solid var(--hair);
}

.tt li:last-child {
  border-bottom: 0;
}

/* 表の中では棒を行の中央にそろえる */
.tt .x {
  display: block;
}

.tt__time {
  font-family: var(--font-en);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.tt__name {
  font-weight: 700;
  line-height: 1.4;
}

/* ---------- SNS ---------- */
/* 行の高さ（48px）の中央を、項目名の1行目にそろえる */
.spec .links {
  display: grid;
  margin-top: calc(var(--u) * -1);
}

.links a {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.5);
  min-height: calc(var(--u) * 6);
  margin: 0 calc(var(--u) * -1);
  padding: 0 var(--u);
  font-weight: 700;
  font-size: 1.05rem;
  transition: background-color 0.2s;
}

.links svg {
  flex: none;
  width: 18px;
  height: 18px;
}

/* 矢印は文字だと iOS で絵文字になるので、SVG をマスクにして文字色で塗る */
.links a::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: auto;
  background: var(--muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M1.5 10.5l9-9M3.5 1.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23000' stroke-width='1.25'%3E%3Cpath d='M1.5 10.5l9-9M3.5 1.5h7v7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s, background-color 0.2s;
}

.links a:hover,
.links a:active {
  background: rgba(236, 228, 208, 0.05);
}

.links a:hover::after,
.links a:active::after {
  background: var(--cream);
  transform: translate(2px, -2px);
}

.updated {
  margin: calc(var(--u) * 2) 0 0;
  font-family: var(--font-en);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-align: right;
  color: var(--muted);
}

/* ---------- FOOTER ---------- */
.footer {
  padding: calc(var(--u) * 8) var(--gutter) calc(var(--u) * 5);
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.footer img {
  width: 112px;
  height: auto;
  margin: 0 auto calc(var(--u) * 2);
  opacity: 0.85;
}

.footer p {
  margin: 0;
}

/* ---------- PC ---------- */
@media (min-width: 768px) {
  .hero,
  main {
    padding-left: max(var(--gutter), calc((100vw - 640px) / 2));
    padding-right: max(var(--gutter), calc((100vw - 640px) / 2));
  }

  .hero__bg img {
    object-position: center 55%;
  }

  .hero__num {
    font-size: 240px;
  }
}

/* ---------- 装飾 ---------- */

/* grain：ページ全体にごく薄い静止ノイズ */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
}

/* cross：表の罫線の左端と、項目名の列と値の列の境目に十字を置く */
.spec__row {
  position: relative;
}

.spec__row::before {
  --c: linear-gradient(var(--muted), var(--muted));
  content: "";
  position: absolute;
  top: -5px;
  left: -4px;
  right: 0;
  height: 9px;
  background:
    var(--c) 0 4px / 9px 1px no-repeat,
    var(--c) 4px 0 / 1px 9px no-repeat,
    var(--c) calc(var(--label) + var(--u) - 4px + 4px) 4px / 9px 1px no-repeat,
    var(--c) calc(var(--label) + var(--u) + 4px) 0 / 1px 9px no-repeat;
}

/* mark：伏せ字と同じ形の小さな四角を、記号として使う */
.hero__fest::before,
.updated::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.6em;
  vertical-align: 0.12em;
  background: currentColor;
}

.hero__fest {
  justify-content: flex-start;
}

.hero__fest span {
  margin-left: auto;
}

/* corner：ヒーローの四隅にファインダーのような角の印 */
.hero::after {
  --c: linear-gradient(rgba(236, 228, 208, 0.6), rgba(236, 228, 208, 0.6));
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  background:
    var(--c) 0 0 / 14px 1px no-repeat,
    var(--c) 0 0 / 1px 14px no-repeat,
    var(--c) 100% 0 / 14px 1px no-repeat,
    var(--c) 100% 0 / 1px 14px no-repeat,
    var(--c) 0 100% / 14px 1px no-repeat,
    var(--c) 0 100% / 1px 14px no-repeat,
    var(--c) 100% 100% / 14px 1px no-repeat,
    var(--c) 100% 100% / 1px 14px no-repeat;
}

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

  .hero__bg img {
    animation: none;
  }

  .x {
    animation: none;
  }
}