/* * {
  margin: 0;
  padding: 0;
  box-sizing: content-box;
}

body {
  background-color: #000000;
  color: #ffffff;
  min-height: 100vh;
  line-height: 1.2;
}

img {
  width: 100%;
  height: auto;
}

/* Reset and Base Styles */
.main-kv-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 80px 1rem 40px;
}

/* Mobile Layout */
.mobile-layout {
  display: block;
}

.desktop-layout {
  display: none;
}

/* Mobile Pre-sale Section */
.presale-section {
  text-align: center;
  margin-bottom: 3.175rem;
}

.presale-text {
  font-size: 2.222rem;
  font-weight: 400;
  margin-bottom: 0.794rem;
  letter-spacing: 0.025em;
}

.presale-date {
  font-size: 7.143rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  line-height: 1;
}

.day-label {
  font-size: 1.587rem;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.presale-price {
  font-size: 3.175rem;
  font-weight: 400;
  margin-top: 0.794rem;
  margin-bottom: 0.794rem;
  letter-spacing: 0.1em;
}

.presale-description {
  font-size: 1.905rem;
  font-weight: 400;
  letter-spacing: 0.025em;
}

/* Mobile Logo Section */
.logo-section {
  width: 36%;
  margin-bottom: 3.175rem;
}

.ampersand {
  font-size: 12.699rem;
  font-weight: 700;
  margin-bottom: 1.587rem;
  line-height: 1;
  letter-spacing: -0.05em;
}

.sake-text, .fukuoka-text {
  font-size: 3.571rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

/* Mobile Event Section */
.event-section {
  align-self: flex-start;
  margin-bottom: 1.191rem;
}

.event-year {
  font-size: 3.571rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.date-line {
  font-size: 3.571rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.date-separator {
  margin: 0 1rem;
  font-size: 2.381rem;
}

.event-times {
  display: flex;
  gap: 0 7.143rem;
  font-size: 1.786rem;
  font-weight: 600;
}

/* Mobile Venue Section */
.venue-section {
  align-self: flex-start;
  width: 100%;
}

.venue-name {
  font-size: 2.381rem;
  font-weight: 500;
  margin-bottom: 0.794rem;
  letter-spacing: 0.025em;
}

.venue-pricing {
  font-size: 1.873rem;
  font-weight: 500;
  letter-spacing: 0.025em;
}

/* Desktop Layout */
@media (min-width: 768px) {
  .mobile-layout {
    display: none;
  }

  .desktop-layout {
    display: block;
  }

  .main-kv-container {
    padding: 0 2rem;
    max-width: 1320px;
    margin: 0 auto;
  }

  .main-logo-section {
    max-width: 890px;
    text-align: center;
    margin-bottom: 9.524rem;
  }

  .main-logo {
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .main-event-info {
    margin-bottom: 1.587rem;
  }

  .main-dates {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3.175rem;
  }

  .date-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.794rem;
  }

  .date-info {
    font-size: 4.365rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.1;
  }

  .date-info .day-label {
    font-size: 2.778rem;
    font-weight: 600;
    margin-left: 0.794rem;
    letter-spacing: 0;
  }

  .time-info {
    font-size: 2.381rem;
    font-weight: 600;
    letter-spacing: 0.01em;
  }

  .date-separator {
    font-size: 3.571rem;
    font-weight: 700;
    margin-top: 0.794rem;
  }

  .main-venue {
    font-size: 2.381rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.2;
  }

  .desktop-presale {
    text-align: center;
    font-size: 2.143rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 1.2;
  }

  .desktop-presale-date {
    font-size: 3.968rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: 1;
  }

  .desktop-presale .day-label {
    font-size: 2.381rem;
    font-weight: 300;
    letter-spacing: 0;
  }

  .desktop-presale-price {
    font-size: 3.968rem;
    font-weight: 300;
    letter-spacing: 0.01em;
    line-height: 1;
  }
}

/* Responsive adjustments for smaller mobile screens */
@media (max-width: 480px) {
  .presale-date {
    font-size: 3.968rem;
  }

  .ampersand {
    font-size: 9.524rem;
  }

  .sake-text, .fukuoka-text {
    font-size: 3.175rem;
  }

  .event-year, .date-line {
    font-size: 3.175rem;
  }

  .date-separator {
    font-size: 3.175rem;
    font-weight: 300;
    margin: 0 0.794rem;
  }
}

/* Responsive adjustments for larger desktop screens */
@media (min-width: 1200px) {
  .main-logo {}

  .date-info {
    font-size: 6.746rem;
  }

  .date-info .day-label {
    font-size: 3.175rem;
  }

  .time-info {
    font-size: 2.460rem;
  }

  .date-separator {
    font-size: 4.365rem;
  }

  .main-venue {
    font-size: 3.175rem;
  }

  .desktop-presale {
    font-size: 2.143rem;
    gap: 3.175rem;
  }

  .desktop-presale-date {
    font-size: 4.762rem;
  }

  .desktop-presale .day-label {
    font-size: 2.778rem;
  }

  .desktop-presale-price {
    font-size: 4.762rem;
  }
}

/* Extra large screens */
@media (min-width: 1600px) {
  .main-kv-container {
    padding: 0 2rem;
  }

  .main-logo-section {
    margin-bottom: 12.698rem;
  }

  .main-logo {
    margin-bottom: 2.381rem;
  }

  .main-event-info {
    margin-bottom: 3.968rem;
  }

  .main-dates {
    gap: 4.762rem;
    margin-bottom: 3.968rem;
  }

  .date-info {
    font-size: 5.952rem;
  }

  .date-info .day-label {
    font-size: 3.571rem;
  }

  .time-info {
    font-size: 3.175rem;
  }

  .date-separator {
    font-size: 5.159rem;
  }

  .main-venue {
    font-size: 3.175rem;
  }

  .desktop-presale {
    font-size: 2.143rem;
  }

  .desktop-presale-date {
    font-size: 4.762rem;
  }

  .desktop-presale .day-label {
    font-size: 3.175rem;
  }

  .desktop-presale-price {
    font-size: 5.952rem;
  }
}

/* utility classes */
.font-noto-sans-jp {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
}

.font-inter {
  font-family: 'Inter', system-ui, sans-serif;
}

.self-center {
  align-self: center;
}

.margin-left-5 {
  margin-left: 7.937rem;
}

.font-size-2-25 {
  font-size: 3.571rem !important;
}

.letter-spacing-0-05 {
  letter-spacing: 0.05em !important;
}

.letter-spacing-0-1 {
  letter-spacing: 0.1em !important;
}

.font-size-1-45 {
  font-size: 2.302rem !important;
}

.vertical-center {
  vertical-align: middle;
}

@media (min-width: 768px) {
  .margin-left-1 {
    margin-left: 0.794rem;
  }

  .margin-right-1 {
    margin-right: 0.794rem;
  }
}

@media (min-width: 1200px) {
  .margin-left-1 {
    margin-left: 1.587rem;
  }

  .margin-right-1 {
    margin-right: 1.587rem;
  }
}

.desktop-presale-br {
  display: none;
}

@media (min-width: 768px) and (max-width: 900px) {
  .desktop-presale-br {
    display: inline-block;
  }
}