/* 雪レポBASE トップヒーロー・フェードスライダー */
.hero.hero-slider{
  min-height:500px;
  overflow:hidden;
  background:#06275b;
  isolation:isolate;
}
.hero-slider .hero-slides,
.hero-slider .hero-slide{
  position:absolute;
  inset:0;
}
.hero-slider .hero-slide{
  opacity:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transform:scale(1.015);
  transition:opacity 1.15s ease,transform var(--hero-motion-duration,8s) ease;
  will-change:opacity,transform;
}
.hero-slider .hero-slide.is-active{
  opacity:1;
  transform:scale(1.045);
}

.hero-slider .hero-slide.hero-animation-fade{transform:none}
.hero-slider .hero-slide.hero-animation-fade.is-active{transform:none}
.hero-slider .hero-slide.hero-animation-none{transform:none;transition:opacity .2s linear}
.hero-slider .hero-slide.hero-animation-none.is-active{transform:none}
.hero-slider .hero-slide.hero-animation-zoom{transform:scale(1.01)}
.hero-slider .hero-slide.hero-animation-zoom.is-active{transform:scale(1.06)}
.hero-slider .hero-slide.hero-animation-pan-left{transform:scale(1.07) translateX(1.2%)}
.hero-slider .hero-slide.hero-animation-pan-left.is-active{transform:scale(1.07) translateX(-1.2%)}
.hero-slider .hero-slide.hero-animation-pan-right{transform:scale(1.07) translateX(-1.2%)}
.hero-slider .hero-slide.hero-animation-pan-right.is-active{transform:scale(1.07) translateX(1.2%)}
.hero-slide-snow{background-image:url("/assets/hero/hero-snow-desktop.jpg")}
.hero-slide-map{background-image:url("/assets/hero/hero-map-desktop.jpg")}
.hero-slide-report{background-image:url("/assets/hero/hero-report-desktop.jpg")}
.hero-slider .hero-overlay{
  z-index:1;
  background:linear-gradient(90deg,rgba(1,28,70,.88) 0%,rgba(2,44,104,.65) 42%,rgba(2,52,119,.22) 68%,rgba(2,32,76,.08) 100%);
  transition:background .7s ease;
}
.hero-slider[data-tone="blue"] .hero-overlay{
  background:linear-gradient(90deg,rgba(1,27,72,.92),rgba(0,73,154,.64) 45%,rgba(0,90,180,.20) 72%,rgba(0,45,110,.08));
}
.hero-slider[data-tone="dark"] .hero-overlay{
  background:linear-gradient(90deg,rgba(1,22,57,.94),rgba(3,43,94,.70) 48%,rgba(3,48,101,.22) 75%,rgba(1,21,52,.12));
}
.hero-slider .hero-content{
  z-index:3;
  padding-top:42px;
  padding-bottom:36px;
}
.hero-slider .hero-copy{
  max-width:720px;
  min-height:174px;
  transition:opacity .25s ease,transform .25s ease;
}
.hero-slider .hero-copy.is-changing{opacity:0;transform:translateY(8px)}
.hero-slider .hero-kicker{
  margin:0 0 9px;
  color:#cfe8ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.16em;
  text-shadow:0 2px 10px rgba(0,24,60,.55);
}
.hero-slider .hero-copy h1{
  max-width:760px;
  font-size:clamp(37px,4.2vw,54px);
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hero-slider .hero-copy>p:not(.hero-kicker){
  max-width:650px;
  min-height:2.9em;
  font-size:18px;
  line-height:1.62;
}
.hero-cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  margin-top:12px;
  padding:9px 15px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:999px;
  background:rgba(3,37,84,.30);
  color:#fff;
  font-size:13px;
  font-weight:800;
  backdrop-filter:blur(7px);
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.hero-cta:hover,.hero-cta:focus-visible{
  background:rgba(0,88,211,.82);
  border-color:#fff;
  transform:translateY(-1px);
}
.hero-slider .search-panel{
  position:relative;
  z-index:4;
  margin-top:18px;
}
.hero-controls{
  position:absolute;
  right:max(24px,calc((100vw - 1180px)/2));
  bottom:24px;
  z-index:5;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(3,27,67,.45);
  box-shadow:0 8px 24px rgba(0,18,52,.18);
  backdrop-filter:blur(9px);
}
.hero-controls button{
  display:grid;
  place-items:center;
  border:0;
  color:#fff;
  cursor:pointer;
}
.hero-arrow,.hero-pause{
  width:32px;
  height:32px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  font-size:22px;
  line-height:1;
}
.hero-pause{font-size:12px;font-weight:900;letter-spacing:-.14em;padding-right:4px}
.hero-controls button:hover,.hero-controls button:focus-visible{background:rgba(255,255,255,.26);outline:2px solid rgba(255,255,255,.9);outline-offset:2px}
.hero-dots{display:flex;align-items:center;gap:6px;padding:0 3px}
.hero-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  transition:width .25s ease,background .25s ease;
}
.hero-dot[aria-current="true"]{width:25px;border-radius:999px;background:#fff}
.hero-slider:focus-within .hero-controls,.hero-slider:hover .hero-controls{background:rgba(3,27,67,.62)}

@media(max-width:900px){
  .hero.hero-slider{min-height:625px}
  .hero-slider .hero-content{padding-top:28px;padding-bottom:88px}
  .hero-slider .hero-copy{min-height:165px;max-width:92%}
  .hero-slider .hero-copy h1{font-size:clamp(29px,7vw,40px)}
  .hero-slider .hero-copy>p:not(.hero-kicker){font-size:15px;min-height:3.2em}
  .hero-slider .search-panel{margin-top:14px}
  .hero-controls{right:18px;bottom:18px}
}
@media(max-width:700px){
  .hero-slide-snow{background-image:url("/assets/hero/hero-snow-mobile.jpg");background-position:58% center}
  .hero-slide-map{background-image:url("/assets/hero/hero-map-mobile.jpg");background-position:center}
  .hero-slide-report{background-image:url("/assets/hero/hero-report-mobile.jpg");background-position:center}
  .hero-slider .hero-overlay,
  .hero-slider[data-tone="blue"] .hero-overlay,
  .hero-slider[data-tone="dark"] .hero-overlay{
    background:linear-gradient(180deg,rgba(1,27,68,.86) 0%,rgba(1,36,87,.62) 45%,rgba(1,31,74,.28) 72%,rgba(1,24,58,.48) 100%);
  }
  .hero-cta{margin-top:8px;padding:8px 13px}
  .hero-controls{padding:5px;gap:5px}
  .hero-arrow,.hero-pause{width:30px;height:30px}
}
@media(max-width:560px){
  .hero.hero-slider{min-height:660px}
  .hero-slider .hero-content{padding-top:24px;padding-bottom:82px}
  .hero-slider .hero-copy{min-height:170px;max-width:100%}
  .hero-slider .hero-copy h1{font-size:29px;line-height:1.2;margin-bottom:11px}
  .hero-slider .hero-kicker{font-size:10px}
  .hero-slider .hero-copy>p:not(.hero-kicker){font-size:14px;line-height:1.55}
  .hero-slider .search-panel{margin-top:10px}
  .hero-controls{left:50%;right:auto;bottom:14px;transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .hero-slider .hero-slide,.hero-slider .hero-copy,.hero-dot{transition:none!important;transform:none!important}
}