/* Homepage hero: slide 1 restores approved HDD-DATA.jp design; slides 2/3 follow it exactly. */
.magazine-top.hero-carousel {
  display:block;
  min-height:302px;
  margin:34px 0 76px;
  overflow:visible;
  position:relative;
  background:transparent;
  border-radius:8px;
  isolation:isolate;
}
.magazine-top.hero-carousel::before,
.magazine-top.hero-carousel::after {content:none;}
.magazine-top.hero-carousel .hero-slide {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:302px;
  overflow:hidden;
  border-radius:8px;
  background:#eaf5fc;
  position:relative;
  isolation:isolate;
}
.magazine-top.hero-carousel .hero-slide[hidden] {display:none!important;}
.magazine-top.hero-carousel .hero-slide:not([hidden]) {animation:homeSlideFade .55s ease both;}
@keyframes homeSlideFade {from{opacity:.35}to{opacity:1}}
.magazine-top.hero-carousel .hero-slide::before {
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:66%;
  background-size:cover;
  background-position:center right;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 19%);
  mask-image:linear-gradient(to right, transparent 0%, black 19%);
  z-index:-2;
}
.magazine-top.hero-carousel .hero-slide--main::before {
  background-image:url('../img/hdd-data-home-external-drive-hero.webp');
}
.magazine-top.hero-carousel .hero-slide--trouble::before {
  background-image:url('../img/card-system-v3/ssd-not-recognized-hero.webp');
}
.magazine-top.hero-carousel .hero-slide--compare::before {
  background-image:url('../img/card-system-v3/hdd-data-extraction-guide-hero.webp');
}
.magazine-top.hero-carousel .hero-slide::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(239,248,253,.95) 0%, rgba(236,247,253,.81) 35%, transparent 62%);
  z-index:-1;
  pointer-events:none;
}
.magazine-top.hero-carousel .intro-copy {
  position:relative;
  z-index:1;
  width:54%;
  max-width:unset;
  padding:35px 48px;
}
.magazine-top.hero-carousel .intro-copy p {
  color:#086bb2;
  font-size:12px;
  font-weight:650;
  letter-spacing:.015em;
  margin:0 0 9px;
}
.magazine-top.hero-carousel .intro-copy h1,
.magazine-top.hero-carousel .intro-copy h2 {
  color:#0d223c;
  font-size:clamp(26px,2.6vw,30px);
  font-weight:700;
  line-height:1.5;
  letter-spacing:-.02em;
  margin:0 0 13px;
}
.magazine-top.hero-carousel .intro-copy span {
  color:#40556a;
  display:block;
  max-width:435px;
  font-size:14px;
  line-height:1.8;
}
.magazine-top.hero-carousel .hero-carousel-controls {
  position:absolute;
  inset:auto 0 -46px 0;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
  border:0;
  background:none;
}
.magazine-top.hero-carousel .hero-carousel-dot {
  appearance:none;
  display:flex;
  justify-content:center;
  align-items:center;
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.magazine-top.hero-carousel .hero-carousel-dot::before {
  content:"";
  display:block;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#cad5da;
  transition:background .18s ease,transform .18s ease;
}
.magazine-top.hero-carousel .hero-carousel-dot.is-active::before {background:#1476ac;transform:scale(1.05);}
.magazine-top.hero-carousel .hero-carousel-dot:focus-visible {outline:2px solid #1476ac;outline-offset:0;}
@media (max-width:880px) {
  .magazine-top.hero-carousel .hero-slide {min-height:270px;}
  .magazine-top.hero-carousel {min-height:270px;}
  .magazine-top.hero-carousel .intro-copy {width:63%;padding:29px 27px;}
  .magazine-top.hero-carousel .intro-copy h1,
  .magazine-top.hero-carousel .intro-copy h2 {font-size:26px;}
  .magazine-top.hero-carousel .hero-slide::before {width:71%;}
}
@media (max-width:620px) {
  .magazine-top.hero-carousel {min-height:270px;margin:18px 0 58px;}
  .magazine-top.hero-carousel .hero-slide {min-height:270px;}
  .magazine-top.hero-carousel .intro-copy {width:100%;max-width:100%;padding:25px 22px;}
  .magazine-top.hero-carousel .intro-copy h1,
  .magazine-top.hero-carousel .intro-copy h2 {font-size:22px;line-height:1.5;}
  .magazine-top.hero-carousel .intro-copy p {font-size:11px;}
  .magazine-top.hero-carousel .intro-copy span {font-size:12px;max-width:315px;}
  .magazine-top.hero-carousel .hero-slide::before {width:100%;opacity:.29;background-position:center right;}
  .magazine-top.hero-carousel .hero-slide::after {background:linear-gradient(to right,rgba(240,249,254,.95),rgba(240,249,254,.57));}
  .magazine-top.hero-carousel .hero-carousel-controls {bottom:-39px;}
}
@media (max-width:370px) {
  .magazine-top.hero-carousel .intro-copy {padding:20px 17px;}
  .magazine-top.hero-carousel .intro-copy h1,
  .magazine-top.hero-carousel .intro-copy h2 {font-size:21px;}
}
@media(prefers-reduced-motion:reduce) {
  .magazine-top.hero-carousel * {animation:none!important;transition:none!important;}
}

/* Quiet editorial titles: no underline in any link state; keyboard focus remains visible. */
.magazine-top.hero-carousel .intro-copy .hero-title-link {
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-decoration:none;
  cursor:pointer;
}
.magazine-top.hero-carousel .intro-copy .hero-title-link:hover,
.magazine-top.hero-carousel .intro-copy .hero-title-link:focus,
.magazine-top.hero-carousel .intro-copy .hero-title-link:active,
.magazine-top.hero-carousel .intro-copy .hero-title-link:visited {
  color:inherit;
  text-decoration:none;
}
.magazine-top.hero-carousel .intro-copy .hero-title-link:hover {opacity:.85;}
.magazine-top.hero-carousel .intro-copy .hero-title-link:focus-visible {
  outline:2px solid #1476ac;
  outline-offset:5px;
  border-radius:2px;
}