@charset "UTF-8";

/* ▼ 先方スタイル相殺 */
.prod-detail .mod-head01 {
  z-index: 3;
  height: initial;
  padding-block: 2rem;
}
.prod-detail .mod-head01-inner {
  position: initial;
  transform: initial;
}
/* ▲ 先方スタイル相殺 */

.sp {
  display: none;
}

#icon-series section {
  position: relative;
  height: 100lvh;
}
#icon-series .inner {
  top: 0;
  left: 0;
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
}
#icon-series picture {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}
#icon-series picture img {
  width: 100%;
  max-height: 100lvh;
}

#mv {
  bottom: 0;
  left: 0;
}
#mv .inner {
  background: url(/product/contents/icon-series/img/mv-bg.webp) no-repeat center / cover;
}

#features {
  position: relative;
  z-index: 3;
  background: initial;
  font-family: var(--font-mplus);
}
#features .bg {
  position: relative;
  height: 100lvh;
}

#features .bg .inner {
  background: url(/product/contents/icon-series/img/feature-bg.webp) no-repeat top center / cover;
}
#features section {
  background-color: transparent;
}
#features .catch {
  display: grid;
  place-content: center;
  padding-block: 1.3rem;
  background-color: #000;
  text-align: center;
  color: #fff;
  font-size: 3rem;
  font-size: min(2vw, 3rem);
  font-weight: 500;
  line-height: 1.2;
}
#features .link {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 2880 / 1440;
  max-height: 100lvh;
}
#features .link a {
  position: absolute;
  bottom: 10%;
  left: 7.6%;
  width: 12vw;
  transition: filter 0.2s ease;
}
#features .link a:hover {
  filter: brightness(1.2);
}
#features .link a img {
  width: 100%;
  height: auto;
}

/* SP */
@media (max-width: 800px) {
  .sp {
    display: block;
  }
  /* #icon-series picture img {
    width: auto;
    height: 100%;
  } */
  #mv .inner {
    background: url(/product/contents/icon-series/img/mv-bg-sp.webp) no-repeat center / cover;
  }
  #features .bg .inner {
    background: url(/product/contents/icon-series/img/feature-bg-sp.webp) no-repeat top center / cover;
  }
  #features .catch {
    padding-block: 2.5vw;
    font-size: 4.688vw;
  }
  #features .link {
    aspect-ratio: 800 / 1150;
  }
  #features .link a {
    bottom: 8.2%;
    left: 11.6%;
    width: 26.8vw;
  }
}
