@font-face {
  font-family: "FT Aktual";
  src: url("../fonts/FTAktual-Regular.woff2") format("woff2"),
    url("../fonts/FTAktual-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "FT Aktual";
  src: url("../fonts/FTAktual-Semibold.woff2") format("woff2"),
    url("../fonts/FTAktual-Semibold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  /* 指定Pantoneの画面用近似値。 */
  --pantone-1797-c: #cb333b;
  --pantone-3517-c: #ba0020;
  --poster-red: var(--pantone-1797-c);
  --poster-dark-red: var(--pantone-3517-c);
  --poster-inset: 0%;
  --cover-spacing: 40px;
}

@media (max-width: 960px) {
  :root {
    --cover-spacing: 20px;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100svh;
  background: var(--poster-dark-red);
  color: #fff;
  font-family: "FT Aktual", Arial, sans-serif;
  font-weight: 400;
}

#notice {
  flex: none;
}

/* Noticeの実際の高さを通常フローで確保し、残りの一画面へカバーを収める。 */
.cover {
  flex: 1;
  min-height: 0;
}

.cover__link {
  display: grid;
  place-items: center;
  height: 100%;
  padding: var(--cover-spacing);
  container-type: size;
  color: inherit;
  text-decoration: none;
}

.cover__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

/* 縦長はNoticeと同じ左右余白を使い、上下の位置は配置領域の高さに合わせる。 */
.poster {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: inline-size;
  font-kerning: normal;
  font-synthesis: none;
}

.poster__content {
  /* 縦長版のロゴはポスター幅に合わせて拡縮する。 */
  --poster-detail-scale: clamp(100cqw, calc(75cqw + 145px), 113.66cqw);
  /* 幅600px時の寸法を下限にし、住所と日付の間が16pxになるまでは縮小しない。 */
  --poster-footer-height: min(max(17cqw, 95.2px), calc((100cqw - 16px) / 4.1403));
  --poster-footer-bottom: 2.135084%;

  position: absolute;
  inset: 0;
}

.poster :where(h1, p) {
  margin: 0;
}

.poster img {
  display: block;
  height: auto;
}

.poster__logo {
  position: absolute;
  z-index: 1;
  top: 1.9%;
  left: var(--poster-inset);
  width: min(max(calc(var(--poster-detail-scale) * 0.2), 112px), calc((48.1cqh - 50cqw - 16px) * 141 / 115));
}

/* SVGの描画範囲をポスター幅に合わせ、左右の余白を同じにする。 */
.poster__artwork {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}

.poster__artwork img {
  width: 100%;
}

.poster__artwork .poster__artwork-square,
.poster__artwork .poster__artwork-landscape {
  display: none;
}

/* Ibashoの下端から住所の上端までの空間に、Ibashoと同じ書体・サイズで配置する。 */
.poster__coming {
  position: absolute;
  top: calc(50% + 15.56cqw);
  right: var(--poster-inset);
  bottom: calc(var(--poster-footer-bottom) + var(--poster-footer-height));
  left: var(--poster-inset);
  display: flex;
  align-items: center;
  font-size: 6cqw;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* 3拠点の住所をPDFの字間・行間のまま表示する。 */
.poster__venue {
  position: absolute;
  bottom: var(--poster-footer-bottom);
  left: var(--poster-inset);
}

.poster__period {
  position: absolute;
  bottom: var(--poster-footer-bottom);
  right: 0;
}

.poster .poster__venue,
.poster .poster__period {
  width: auto;
  height: var(--poster-footer-height);
}

/* SPでは初期版のロゴの縮小規則を使う。 */
@media (max-width: 640px) {
  .poster__content {
    --poster-detail-scale: min(70.7317cqh, calc((100cqw - 148.88px) / 0.48328912));
  }
}

/* Noticeを除いた領域で判定し、縦長ではロゴと三角形の間隔を確保する。 */
@container (aspect-ratio > 2 / 3) {
  .poster__content {
    --poster-footer-bottom: 0px;
    --poster-coming-size: 4.7cqw;
    --poster-footer-height: min(max(17cqw, 95.2px), calc((100cqw - 16px) / 4.1403), calc(75cqh - 40.2511cqw - var(--poster-coming-size) - 16px));
  }

  .poster__artwork .poster__artwork-portrait {
    display: none;
  }

  .poster__artwork .poster__artwork-square {
    display: block;
  }

  .poster__content::before {
    content: "";
    position: absolute;
    inset: 0 0 auto auto;
    width: min(100cqw, 100cqh);
    aspect-ratio: 1;
    background: var(--poster-red);
    clip-path: polygon(0 0, 100% 0, 100% 100%);
  }

  .poster__logo {
    top: 0;
    left: 0;
    width: min(max(21cqw, 117.6px), calc((25cqh - 16px) * 141 / 115));
  }

  .poster__artwork {
    top: 25%;
    left: 0;
    width: 100%;
    transform: none;
  }

  .poster__coming {
    /* SVG内のIbashoの下端から、下部情報の上端までを中央揃えする。 */
    top: calc(25% + 40.2511cqw);
    left: 0;
    right: auto;
    font-size: var(--poster-coming-size);
  }

  .poster__venue {
    bottom: 0;
    left: 0;
  }

  .poster__period {
    bottom: 0;
    right: 0;
  }
}

/* 1:1版がNoticeの幅に収まらなくなる位置で3:2版へ切り替える。 */
@container (aspect-ratio > 11 / 10) {
  .poster {
    /* 高さから求めた上限で拡大を止め、左右に均等な余白を残す。 */
    /* Ibasho・告知文・下部情報の高さに加え、告知文の上下に各32pxを確保する。 */
    width: min(100%, 177.7778cqh, calc((100cqh - 64px) / 0.520527));
  }

  .poster__artwork .poster__artwork-square {
    display: none;
  }

  .poster__artwork .poster__artwork-landscape {
    display: block;
  }

  .poster__content {
    --poster-coming-size: 3.3cqw;
    /* 横方向の二つの間隔と、告知文の上下32pxを使い切ってから縮小する。 */
    --poster-footer-height: min(max(calc(15cqw * 115 / 141), 68.5106px), calc((100cqw - 32px) / 5.3664), calc(100cqh - 36.5186cqw - var(--poster-coming-size) - 64px));
  }

  .poster__content::before {
    /* タイトルの曲線の張り出しを除き、Iの上端に三角形を揃える。 */
    top: 0.41072cqw;
    left: auto;
    width: calc(100cqh - 0.41072cqw);
  }

  .poster .poster__logo {
    top: auto;
    bottom: 0;
    width: auto;
    height: var(--poster-footer-height);
  }

  .poster__artwork {
    top: 0;
  }

  .poster__coming {
    top: 36.5186cqw;
    font-size: var(--poster-coming-size);
  }

  .poster__venue {
    bottom: 0;
    left: calc(var(--poster-footer-height) * 141 / 115 + min(4cqw, (100cqw - var(--poster-footer-height) * 5.3664) / 2));
  }

  .poster .poster__period {
    width: auto;
    height: var(--poster-footer-height);
  }

  /* 告知文を日付の上へ移し、Ibashoと下部情報の間に32pxを確保する。 */
  .cover__link--wide .poster {
    width: min(100%, calc((100cqh - 32px) / 0.487527));
  }

  .cover__link--wide .poster__content {
    --poster-footer-height: min(max(calc(15cqw * 115 / 141), 68.5106px), calc((100cqw - 32px) / 5.3664), calc(100cqh - 36.5186cqw - 32px));
  }

  .cover__link--wide .poster__coming {
    top: auto;
    right: auto;
    /* 日付の行間に合わせ、告知文の行ボックス内の下余白を差し引く。 */
    bottom: calc(var(--poster-footer-height) * (1 + 1.911 / 53.3351) - 0.123em);
    /* 日付SVGの縦横比から左端を揃える。 */
    left: calc(100% - var(--poster-footer-height) * 151.6254 / 53.3351);
    height: 3.3cqw;
  }
}