@charset "UTF-8";

/* カード内の独立したイラストのみ、個別PNGとして表示する。 */
.art { overflow: visible; aspect-ratio: auto; }
.art img {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.stat-card, .problem-card, .safe-card { background: #fff; }
.problem-card .art { mask-image: none; -webkit-mask-image: none; }
.safe-card .art, .support-row .art, .unsupported li > .art { border-radius: 0; }
.stat-art img, .problem-card .art img, .safe-card .art img,
.support-row .art img, .unsupported .art img { mix-blend-mode: multiply; }
.problem-card .art img, .safe-card .art img {
  mask-image: linear-gradient(transparent, #000 6px calc(100% - 6px), transparent),
    linear-gradient(90deg, transparent, #000 6px calc(100% - 6px), transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(transparent, #000 6px calc(100% - 6px), transparent),
    linear-gradient(90deg, transparent, #000 6px calc(100% - 6px), transparent);
  -webkit-mask-composite: source-in;
}

/* 背景と一体の写真・図版は分割せず、セクションの背景レイヤーに置く。
   HTMLの見出し・ボタン・カードは .wrap の z-index:1 でこの上に重なる。 */
.hero { background: #061f36; }
.solution { background: #06264a; }
.hero::before, .solution::before {
  content: "";
  position: absolute;
  inset: auto;
  top: 0;
  left: 50%;
  width: min(100%, 1240px);
  height: auto;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  /* 写真の外縁だけを背景色に溶かし、画面幅による境目を作らない。 */
  mask-image: linear-gradient(to bottom, transparent, #000 14% 80%, transparent 100%),
    linear-gradient(90deg, transparent, #000 3% 97%, transparent);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14% 80%, transparent 100%),
    linear-gradient(90deg, transparent, #000 3% 97%, transparent);
  -webkit-mask-composite: source-in;
}
.hero::before {
  aspect-ratio: 1817 / 866;
  background-image: url("../images/backgrounds/hero-scene.png");
}
.hero::after { display: none; }
.hero-visual {
  display: flex;
  flex-direction: column;
  padding-top: clamp(350px, 31vw, 430px);
  gap: 0;
}
.hero-steps { width: 100%; }

.context, .problems {
  background-color: #f7fcff;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
}
.context { background-image: url("../images/backgrounds/inspection-scene.png"); }
.problems { background-image: url("../images/backgrounds/problems-scene.png"); }
.context::after, .problems::after { display: none; }

.solution::before {
  aspect-ratio: 1729 / 910;
  background-image: url("../images/backgrounds/cloud-scene.png");
}
/* 空間は背景中の構成図を見せるためのもの。分割した画像要素は置かない。 */
.network-space { height: clamp(235px, 20vw, 280px); }

@media (min-width: 901px) {
  .hero { padding: 34px 0 28px; }
}

@media (min-width: 901px) and (max-width: 1100px) {
  .hero-visual { padding-top: 350px; }
  .network-space { height: 240px; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .hero::before {
    top: auto;
    bottom: 60px;
    width: 175%;
    transform: translateX(-71%);
    mask-image: linear-gradient(to bottom, transparent, #000 14% 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14% 80%, transparent 100%);
  }
  .hero-visual { padding-top: 420px; max-width: 560px; }
  .solution::before { top: 70px; }
  .network-space { height: 240px; }
}

@media (max-width: 600px) {
  .hero::before {
    top: auto;
    bottom: 76px;
    width: 220%;
    transform: translateX(-75%);
    mask-image: linear-gradient(to bottom, transparent, #000 14% 80%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14% 80%, transparent 100%);
  }
  .hero-visual { padding-top: clamp(250px, 80vw, 370px); max-width: 420px; }
  .context, .problems { background-size: auto 450px; background-position: right top; }
  .context { background-image: linear-gradient(90deg, #ffffffed, #ffffffb3), url("../images/backgrounds/inspection-scene.png"); }
  .problems { background-image: linear-gradient(90deg, #ffffffed, #ffffffb3), url("../images/backgrounds/problems-scene.png"); }
  .solution .section-title { font-size: clamp(18px, 5.6vw, 23px); }
  .solution::before { top: 175px; width: 100%; }
  .network-space { height: 165px; }
}