:root {
  --page-max-width: 1440px;
  --feature-content-max-width: 1400px;
}

/*
 * Keep the LP content within 1440px on wide displays.
 * Headers intentionally remain full viewport width.
 */
main#top,
footer {
  width: 100%;
  max-width: var(--page-max-width);
  margin-left: auto;
  margin-right: auto;
}

/* Header bars span the full viewport. */
.site-header,
.app-header {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/*
 * Feature mock uses the whole viewport so the side navigation stays attached
 * to the left edge. Only the main screen content is capped and centered.
 */
.app-shell {
  width: 100%;
  max-width: none;
  margin: 0;
}

.app-shell .screen-area {
  width: 100%;
  min-width: 0;
}

.app-shell .screen {
  width: 100%;
  max-width: var(--feature-content-max-width);
  margin-left: auto;
  margin-right: auto;
}

/*
 * The map is for discovering shops, not for revealing the actual member-only
 * benefit. Keep only a generic indication that a member benefit exists.
 */
.shop-results .benefit-tag {
  font-size: 0;
}

.shop-results .benefit-tag::after {
  content: "会員特典あり";
  font-size: 9px;
}

.shop-detail .detail-benefit span {
  font-size: 0;
}

.shop-detail .detail-benefit span::after {
  content: "MEMBERS ONLY";
  font-size: 10px;
}

.shop-detail .detail-benefit strong {
  font-size: 0;
}

.shop-detail .detail-benefit strong::after {
  content: "会員限定特典があります";
  font-size: 15px;
}

.shop-detail .detail-benefit p {
  font-size: 0;
}

.shop-detail .detail-benefit p::after {
  content: "特典の内容は専用画面から確認できます。";
  font-size: 11px;
}

/*
 * Desktop balance for the three-column feature row.
 * The membership area needs enough width for two pricing cards, while the
 * discovery headline should not break at arbitrary Japanese characters.
 */
@media (min-width: 1121px) {
  .feature-grid {
    grid-template-columns: 1.08fr 1.38fr 1.04fr;
  }

  .map-panel h3 {
    font-size: clamp(30px, 2.15vw, 35px);
    line-height: 1.48;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .plans-panel,
  .secret-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .plans-panel .plan-cards {
    gap: 16px;
  }

  .plans-panel .plan-card {
    min-width: 0;
    padding-left: clamp(20px, 1.8vw, 26px);
    padding-right: clamp(20px, 1.8vw, 26px);
  }

  .plans-panel .price {
    white-space: nowrap;
    font-size: clamp(44px, 3vw, 54px);
  }

  .plans-panel .annual {
    line-height: 1.6;
  }

  .plans-panel .plan-label,
  .plans-panel .annual,
  .plans-panel li {
    word-break: keep-all;
  }

  .secret-panel > p {
    max-width: 34em;
  }
}