.ticket-page {
  padding: 150px 0 100px;
}
.ticket-page .section-wrap {
  width: min(1180px, calc(100% - 10vw));
  margin-right: auto;
  margin-left: auto;
}
.ticket-page-header {
  text-align: center;
  padding-bottom: 32px;
  border-bottom: 2px solid var(--ink);
}
.ticket-page-header h1,
.ticket-page-heading h2,
.ticket-page-project h2 {
  margin: 10px 0 0;
  font:
    clamp(48px, 8vw, 104px) / 0.9 "Anton",
    sans-serif;
  letter-spacing: 1px;
}
.ticket-page-header > p:last-child {
  max-width: 540px;
  margin: 22px auto 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.9;
}
.ticket-presale-banner {
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  gap: 14px 24px;
  align-items: center;
  margin-top: 42px;
  padding: 19px 28px;
  color: #fff;
  background: #f31268;
  border: 2px solid #e50055;
  box-shadow: 7px 7px 0 var(--yellow);
}
.ticket-presale-banner > span,
.ticket-presale-banner > small {
  font:
    700 12px / 1 "DM Mono",
    monospace;
  letter-spacing: 1px;
}
.ticket-presale-banner > strong {
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1;
}
.ticket-presale-banner > i {
  justify-self: end;
  font-size: 28px;
  font-style: normal;
}
.ticket-page-section {
  margin-top: 92px;
}
.ticket-page-heading {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.ticket-page-section .section-kicker,
.ticket-page-section .ticket-page-heading h2 {
  text-align: left;
}
.ticket-page-heading h2 {
  font-size: clamp(34px, 5vw, 62px);
}
.ticket-sale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.ticket-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 26px;
}
.ticket-sale-period {
  text-align: center;
  padding: 25px 28px;
  color: #fff;
  border-radius: 8px;
}
.ticket-sale-period p,
.ticket-sale-period strong,
.ticket-sale-period span {
  display: block;
}
.ticket-sale-period p {
  margin: 0;
  font-weight: 900;
}
.ticket-sale-period strong {
  margin-top: 12px;
  font:
    clamp(25px, 3.2vw, 42px) / 1 "Anton",
    sans-serif;
  letter-spacing: 1px;
}
.ticket-sale-period span {
  margin-top: 13px;
  font-size: 13px;
  font-weight: 700;
}
.ticket-sale-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 20px;
}
.ticket-sale-links a {
  padding: 12px 8px 14px;
  color: #f31268;
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 4px 4px 0 rgba(18, 48, 74, 0.28);
  letter-spacing: 1px;
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.ticket-sale-links a:hover {
  color: #fff;
  background: transparent;
  transform: translate(2px, 2px);
}
.ticket-sale-links small {
  display: block;
  margin-bottom: 7px;
  font:
    900 12px / 1 "Noto Sans JP",
    sans-serif;
  letter-spacing: 0;
}
.ticket-sale-links strong {
  display: block;
  font:
    24px / 1 "Anton",
    sans-serif;
}
.ticket-sale-links em {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0;
}
.ticket-sale-period-advance {
  background: #f31268;
}
.ticket-sale-period-general {
  background: #1486dd;
}
.ticket-type-list {
  display: grid;
  gap: 16px;
  margin-top: 26px;
}
@media (min-width: 801px) {
  .ticket-type-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.ticket-type {
  text-align: center;
  padding: 26px 28px 28px;
  border: 1px solid var(--line);
  border-left: 8px solid var(--ticket-accent);
  border-radius: 8px;
  background: var(--ticket-surface);
  color: var(--ticket-text);
}
.ticket-type-platinum {
  --ticket-accent: #fff;
  --ticket-surface: #f31268;
  --ticket-text: #fff;
}
.ticket-type-gold {
  --ticket-accent: #fff;
  --ticket-surface: #e9b820;
  --ticket-text: #fff;
}
.ticket-type-merchandise {
  --ticket-accent: #fff;
  --ticket-surface: #485963;
  --ticket-text: #fff;
}
.ticket-type h3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 0;
  font-size: clamp(20px, 2.5vw, 28px);
  line-height: 1.35;
}
.ticket-type h3 strong {
  font:
    clamp(28px, 4vw, 45px) / 1 "Anton",
    sans-serif;
}
.ticket-type h3 strong span {
  margin-left: 5px;
  font:
    700 12px / 1 "Noto Sans JP",
    sans-serif;
}
.ticket-type > p {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid currentColor;
  font-weight: 900;
}
.ticket-type ul {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  font-size: 14px;
  line-height: 1.65;
}
.ticket-type li {
  position: relative;
  padding: 10px 14px 10px 40px;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.ticket-type li::before {
  position: absolute;
  top: 50%;
  left: 13px;
  display: grid;
  width: 17px;
  height: 17px;
  content: "\2713";
  color: var(--ticket-surface);
  background: #fff;
  border-radius: 50%;
  font:
    700 12px / 1 "DM Mono",
    monospace;
  transform: translateY(-50%);
  place-items: center;
}
.ticket-type .ticket-merchandise-note {
  margin: 14px 0 0;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.6;
}
.ticket-date-purchase-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 26px;
}
.ticket-date-purchase {
  display: flex;
  flex-direction: column;
  padding: 28px;
  color: #fff;
  border: 2px solid transparent;
}
.ticket-date-purchase-25 {
  background: #d69c00;
  border-color: #ad7e00;
}
.ticket-date-purchase-project {
  background: #f31268;
  border-color: #e50055;
}
.ticket-date-purchase-label,
.ticket-date-purchase h3,
.ticket-date-purchase > p:not(.ticket-date-purchase-label) {
  margin: 0;
}
.ticket-date-purchase-label {
  font:
    28px / 1 "Anton",
    sans-serif;
  letter-spacing: 1px;
}
.ticket-date-purchase h3 {
  margin-top: 13px;
  font-size: 21px;
}
.ticket-date-purchase > p:not(.ticket-date-purchase-label) {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}
.ticket-date-purchase-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px 14px;
  align-items: center;
  margin-top: auto;
  padding: 14px 16px;
  color: var(--ink);
  background: #fff;
  border: 3px solid #fff;
  box-shadow: 4px 4px 0 rgba(18, 48, 74, 0.32);
  transition:
    color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}
.ticket-date-purchase-link small {
  grid-column: 1;
  font-size: 12px;
  font-weight: 900;
}
.ticket-date-purchase-link strong {
  grid-column: 1;
  font-size: 15px;
}
.ticket-date-purchase-link em {
  grid-column: 1;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0;
}
.ticket-date-purchase-link span {
  grid-column: 2;
  grid-row: 1 / -1;
  font-size: 20px;
}
.ticket-date-purchase-link:hover {
  color: #f31268;
  background: #fff8bc;
  transform: translate(2px, 2px);
}
.ticket-page-notes ul {
  width: min(920px, 100%);
  margin: 14px auto 0;
  padding-left: 1.4em;
  text-align: left;
  font-size: 14px;
  line-height: 1.9;
}
.ticket-info-grid article {
  text-align: center;
  padding: 26px 28px;
  border-top: 5px solid var(--blue);
  background: #fff;
}
.ticket-info-grid article:nth-child(2) {
  border-color: var(--ink);
}
.ticket-info-grid .ticket-info-merchandise {
  grid-column: 1 / -1;
  border-color: var(--pink);
}
.ticket-info-grid h3,
.ticket-page-notes h2 {
  margin: 0;
  font-size: 20px;
}
.ticket-info-grid p {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.9;
}
.ticket-info-grid .ticket-info-note {
  margin-top: 16px;
  padding: 10px 12px;
  color: #b72d52;
  background: #fff0f4;
  border-left: 4px solid var(--pink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.8;
  text-align: left;
}
.ticket-page-project {
  text-align: center;
  margin-top: 92px;
  padding: 46px clamp(24px, 6vw, 72px);
  color: var(--ink);
  background-color: #dff5ff;
  background-image:
    linear-gradient(135deg, rgba(20, 134, 221, 0.13) 1px, transparent 1px),
    linear-gradient(45deg, rgba(243, 18, 104, 0.1) 1px, transparent 1px);
  background-size:
    24px 24px,
    40px 40px;
  border-top: 7px solid #1486dd;
  border-bottom: 7px solid var(--pink);
}
.ticket-page-project h2 {
  color: #1486dd;
  text-shadow: 3px 3px 0 #fff;
}
.ticket-page-project > p:not(.section-kicker) {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 2;
}
.ticket-project-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
  text-align: left;
}
.ticket-project-summary article {
  padding: 22px;
  color: var(--ink);
  background: #fff;
  border: 2px solid #80c8ef;
  box-shadow: 4px 4px 0 rgba(20, 134, 221, 0.2);
}
.ticket-project-summary h3 {
  margin: 0;
  font-size: 18px;
}
.ticket-project-summary p,
.ticket-project-summary dl {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.8;
}
.ticket-project-summary dl {
  display: grid;
  gap: 8px;
}
.ticket-project-summary dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.ticket-project-summary dt,
.ticket-project-summary dd {
  margin: 0;
}
.ticket-project-summary dd {
  font-weight: 900;
}
.ticket-project-note {
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.7;
}
.ticket-project-note {
  max-width: 640px;
  margin-right: auto;
  margin-left: auto;
}
.ticket-project-purchase {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(18, 48, 74, 0.22);
}
.ticket-project-purchase > p {
  margin: 0;
  color: #f31268;
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 900;
}
.ticket-project-purchase .ticket-sale-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ticket-page-project .ticket-sale-links a {
  color: #fff;
  background: #f31268;
  border-color: #e50055;
}
.ticket-page-project .ticket-sale-links a:hover {
  color: #f31268;
  background: #fff;
}
.ticket-project-benefits {
  margin-top: 42px;
  padding: 24px clamp(18px, 4vw, 36px) 28px;
  color: var(--ink);
  background: #fff;
  border: 3px solid #f31268;
  box-shadow: 7px 7px 0 #f31268;
}
.ticket-project-benefits-kicker {
  margin: 0;
  color: #f31268;
  font:
    700 12px / 1 "DM Mono",
    monospace;
  letter-spacing: 1px;
}
.ticket-project-benefits h3 {
  margin: 12px 0 0;
  color: #1486dd;
  font-size: clamp(24px, 4vw, 34px);
  line-height: 1.25;
  font-weight: 900;
}
.ticket-project-benefits-copy {
  max-width: 570px;
  margin: 14px auto 0;
  font-size: 14px;
  line-height: 1.8;
}
.ticket-project-benefits-copy strong {
  color: #f31268;
  font-size: 1.25em;
}
.ticket-project-benefits .button {
  margin-top: 14px;
}
.ticket-page-notes {
  text-align: center;
  margin-top: 72px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
@media (max-width: 600px) {
  .ticket-page {
    padding-top: 124px;
  }
  .ticket-presale-banner {
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    padding: 18px;
  }
  .ticket-presale-banner > strong {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ticket-presale-banner > small {
    grid-column: 1;
    grid-row: 3;
  }
  .ticket-presale-banner > i {
    grid-column: 2;
    grid-row: 2 / 4;
  }
  .ticket-page-section {
    margin-top: 56px;
  }
  .ticket-sale-grid,
  .ticket-info-grid,
  .ticket-project-summary,
  .ticket-date-purchase-grid {
    grid-template-columns: 1fr;
  }
  .ticket-sale-links {
    grid-template-columns: 1fr;
  }
  .ticket-type ul {
    grid-template-columns: 1fr;
  }
  .ticket-sale-period,
  .ticket-type,
  .ticket-info-grid article,
  .ticket-date-purchase {
    padding: 22px 18px;
  }
  .ticket-page-project {
    margin-top: 56px;
    padding: 32px 24px;
  }
  .ticket-page-notes {
    margin-top: 56px;
  }
}