/* The main Niseko landing pages share the blue design of the Niseko Monthly reference. */
.niseko-main {
  --header: 132px;
  --cyan: #087b96;
  --forest: #075481;
}
.niseko-main .site-header { box-shadow: 0 2px 4px #142b4320; }
.niseko-main .main-nav { min-height: 78px; }
.niseko-main .desktop-nav a { color: inherit; }
.niseko-main .header-line { border-radius: 0; }
.promo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 45px;
  gap: .4em;
  padding: 7px 10px;
  background: var(--blue);
  color: white;
  text-align: center;
  font-weight: 800;
}
.niseko-main .hero {
  width: 100%;
  min-height: clamp(440px, 35.5vw, 590px);
  margin: 0;
  padding: 13px 12px 14px;
  justify-content: space-between;
  background: var(--hero-blue);
}
.niseko-main .hero-photos { gap: 0; }
.niseko-main .hero-photos > div { width: 38%; }
.niseko-main .hero-photos > div::after { content: ""; }
.niseko-main .hero-right img { transform: translateX(28px) scale(1.07); }
.niseko-main .hero::before { content: ""; }
.niseko-main .hero-center {
  width: min(100%, 700px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: white;
}
.niseko-main .hero h1 {
  color: white;
  font-size: clamp(3.15rem, 5.25vw, 5.45rem);
  transform: skew(-5deg);
  text-shadow: 0 2px 1px #105095;
}
.niseko-main .hero h1 span { color: inherit; }
.niseko-main .hero-fare > span { color: white; text-shadow: 2px 3px #105095; }
.niseko-main .hero-fare strong {
  color: var(--yellow);
  font-size: clamp(5.35rem, 8.4vw, 9.2rem);
  transform: skew(-7deg);
  text-shadow: 4px 5px 0 #073d7c;
}
.niseko-main .hero-fine { margin: 2px 0 9px; }
.niseko-main .hero-bottom { width: min(890px, 83%); align-items: stretch; margin: 0 0 4px; }
.niseko-main .hero-offer, .hero-points {
  background: white;
  border: 4px solid #8bc6eb;
  border-radius: 20px 20px 11px 11px;
  box-shadow: 0 4px 0 #075c9c76;
}
.niseko-main .hero-offer span { background: #fa890a; }
.hero-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 8px 0 5px;
  border-bottom: 8px solid #1874bc;
  text-align: center;
}
.hero-points a { display: grid; align-content: center; min-height: 44px; padding: 3px 2px; }
.hero-points a + a { border-left: 1px solid #c6dfeb; }
.hero-points b { color: #0b67a7; font-size: clamp(.8rem, 1.45vw, 1.25rem); font-weight: 950; }
.hero-points span { font-size: clamp(.72rem, 1.05vw, .92rem); line-height: 1.35; }
.hero-points a:hover, .hero-offer:hover { background: #eff8ff; }
.hero-action { padding: 14px 12px 0; text-align: center; }
.hero-action .big-line { min-height: 70px; }
.price-tab {
  position: fixed;
  z-index: 4;
  right: 0;
  top: 38%;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 4px;
  padding: 9px 6px 5px;
  border: 2px solid var(--cyan);
  border-radius: 18px 0 0 18px;
  background: white;
  color: var(--forest);
  box-shadow: 0 2px 7px #2c5c6c35;
  font-size: .85rem;
}
.price-tab > span, .price-tab b { writing-mode: vertical-rl; padding: 3px; }
.price-tab span { grid-column: 2; grid-row: 1; background: var(--cyan); color: white; border-radius: 4px; }
.price-tab b { grid-column: 1; grid-row: 1; }
.price-tab i { grid-column: 1 / -1; text-align: center; line-height: .8; font-size: 1.55rem; font-style: normal; }

.niseko-main .section { padding-block: clamp(32px, 5vw, 65px); }
.niseko-main .section-head { margin-bottom: clamp(20px, 3.5vw, 36px); }
.niseko-main .section-head h2 { border-block: 3px solid #2193ac; background: white; color: var(--forest); }
.niseko-main .section-head h2::before, .niseko-main .section-head h2::after {
  content: "";
  inset: 4px auto -7px -21px;
  width: 25px;
  height: auto;
  margin: 0;
  background: #2193ac;
  clip-path: polygon(0 0,100% 0,100% 3px,15% 3px,56% 50%,15% calc(100% - 3px),100% calc(100% - 3px),100% 100%,0 100%,41% 50%);
}
.niseko-main .section-head h2::after { inset-inline: auto -21px; }
.niseko-main .points, .niseko-main .scene-section, .niseko-main .coverage-section { background: var(--ice); }
.niseko-main .quick-links a, .niseko-main .car-card .quote-link { background: #f4faff; border-color: #bad7e9; }
.niseko-main .quick-links a:hover, .niseko-main .car-card .quote-link:hover, .intro-grid a:hover, .plan-links a:hover { background: #e5f3fb; }
.reference-features .feature:last-child .photo img { object-position: center 54%; }
.niseko-main .plan-links { margin-bottom: 24px; }
.niseko-main .car-card { border-color: #b9d5e6; box-shadow: 0 3px 12px #17497312; }
.niseko-main .car-head h3 { color: var(--forest); }
.niseko-main .coverage-grid article:not(.snow-cover) { border-top-color: var(--blue); }
.niseko-main .rate-table td[data-days="3"] { color: var(--forest); background: #e8f5fc; }
.niseko-main .footer { background: #056495; }

@media (prefers-reduced-motion: no-preference) {
  .hero-action .big-line::after { animation: button-sheen 2.25s ease-out 2; }
  .hero-action .big-line:is(:hover,:focus-visible)::after { animation: button-sheen-interaction .7s ease-out; }
}
@media (max-width: 1100px) {
  .price-tab { display: none; }
}
@media (max-width: 880px) {
  .niseko-main { --header: 64px; }
  .niseko-main .main-nav { min-height: 64px; }
  .promo { min-height: 37px; font-size: .8125rem; }
}
@media (max-width: 600px) {
  .niseko-main .hero { min-height: 402px; padding: 12px 7px 9px; }
  .niseko-main .hero-photos > div { width: 36%; }
  .niseko-main .hero-right img { transform: none; }
  .niseko-main .hero h1 { font-size: clamp(2.85rem, 12.6vw, 4.7rem); }
  .niseko-main .hero-fare strong { font-size: 5.45rem; }
  .niseko-main .hero-bottom { width: min(94%, 400px); }
  .niseko-main .hero-offer, .hero-points { border-width: 3px; border-radius: 9px; }
  .hero-points { padding: 2px 0; }
  .hero-points b { font-size: .75rem; }
  .hero-action .big-line { min-height: 58px; }
  .niseko-main .plan-links { gap: 8px; }
  .niseko-main .plan-links a { align-items: flex-start; flex-direction: column; padding: 7px 8px; }
}

.rental-entry-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .8rem; margin: .75rem auto 0; }
.rental-entry-links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .35rem; color: var(--forest); font-size: var(--type-detail); font-weight: 750; text-decoration: underline; text-underline-offset: .2em; }