
/* 20260226 追加 */

.fv__image {
    display: block;
    aspect-ratio: unset; /* aspect-ratioを解除 */
    width: 100%; /* 親要素の幅に合わせる */
    margin-inline: initial;
    padding-right: initial;
}
.fv__image::before {
    display: none;
}
@media screen and (min-width: 768px) {
    .fv__image::after {
        display: none;
    }
}
.fv__image img {
    object-fit: contain;
    height: auto;
}
/* PC用画像 */
.pc-img {
  display: block; /* PC時に表示 */
  width: 100%; /* 画面いっぱいに広げる */
  height: auto; /* アスペクト比を保つ */
object-fit: fill;
}

/* スマホ用画像は初期状態では非表示 */
.sp-img {
  display: none;
  width: 100%; /* 画面いっぱいに広げる */
  height: auto; /* アスペクト比を保つ */
  object-fit: fill;
}

/* スマホサイズ（max-width: 768px）で、PC画像を非表示にし、スマホ画像を表示 */
@media screen and (max-width: 768px) {
  .pc-img {
    display: none; /* スマホ時にPC画像を非表示 */
  }

  .sp-img {
    display: block; /* スマホ時にスマホ画像を表示 */
  }

}

.fv__container {
  position: relative;
  z-index: 1;
  margin-left:0px;
  padding: 0px;
}
@media screen and (min-width: 1500px) {
.topNews {
 padding:40rem 0 10rem 0; 
}
}

/* スマホ用背景画像 */
@media screen and (max-width: 768px) {
  .fv {
    min-height: 305px; /* SP画像の高さに合わせる */
  }
  
  .fv::before {
    background-image: url('/test-safetynet.co.jp/images/fv_sp.jpg');
  }
}
/* ファーストビュー */
.fv {
  position: inherit;
  margin-top: 160px;
  min-height: 555px; 
  width: 100%;
  padding-bottom: 0px;
}

.fv__container {
  position: relative;
  width: 100%;
}

/* テキストコンテンツ */
.fv__content {
  width: 100%;
  height: 100%;
  z-index: 2;
  display: grid;
  padding: 0 10px;
  gap: 3.1rem;
  pointer-events: none;
  padding-top: 3rem;
}

.fv__en {
  position: relative;  
  margin-top: -9.5rem;
  color: #E3F3FC;
  font-weight: 500;
  font-size: 12.8vw;
  line-height: 100%;
  font-family: "Heebo", sans-serif;
  text-transform: uppercase;
}
.fv__left {
  position: absolute;
  z-index: 1;
  width: 4.3rem;
  top: -28px;
  left: 0px;
}
.fv__right {
  position: absolute;
  width: 4.7rem;
  margin-left: auto;
  right: 0px;
  bottom: -95px;
}
.fv__pack {
    margin-top: -5rem;
    margin-left: 1rem;
    z-index: 2;
    position: relative;
}

.fv__jp {
  color: #4D4D4D;
  font-weight: 700;
  font-size: 8vw;
  line-height: 150%;
}

.fv__jp span {
  color: #027FD5;
}

.fv__text {
  position: relative;
  margin-top: 1rem;
  padding-left: 4rem;
  color: #4D4D4D;
  font-size: 3.7333333333vw;
  line-height: 150%;
  letter-spacing: 0.05em;
}

.fv__text::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 3.4rem;
  height: 1.5rem;
  background: url(https://www.safetynet.co.jp/2025/assets/img/line_left.webp) no-repeat center center/contain;
  content: "";
}

/* 背景画像エリア */
.fv__image {
  position: absolute;
  width: 100%;
  z-index: 1;
}

/* 共通の画像スタイル */
.fv__main-img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC用画像 */
.pc-img {
  display: block;
}

/* スマホ用画像 */
.sp-img {
  display: none;
}

/* スマホ表示（768px以下） */
@media screen and (max-width: 768px) {
  .pc-img {
    display: none;
  }
  
  .sp-img {
    display: block;
  }
}

/* PC表示 */
@media screen and (min-width: 1200px) {
  .fv {
    margin-bottom: 70px;
  }
}
@media screen and (min-width: 768px) {
  .fv {
    margin-top: 30px;
  }
  
  .fv__container {
    display: grid;
    grid-template-columns: 1fr;
  }
  
  .fv__content {
    grid-template-columns: 50% auto;
    margin-left: 40px;
    padding: 3rem 0;
    gap: 6%;
    align-items: start;
  }
  
  .fv__en {
        margin-top: 3.2rem;
        font-size: 5.4166666667vw;
        position: relative;
        top: 183px;
  }
  
  .fv__pack {
        position: absolute;
        top: 349px;
        left: 72px;
    }
  
  
  .fv__jp {
    font-size: 3.6111111111vw;
  }
  
  .fv__text {
    padding-left: 6.8rem;
    font-size: 1.25vw;
  }
  
  .fv__text::before {
    width: 6rem;
    height: 2.4rem;
  }
  
  .fv__left {
    width: 5.6rem;
    top: -85px;
  }
  
  .fv__right {
    width: 5.6rem;
    right: 20px;
    bottom: -130px;
  }
}
@media screen and (min-width: 1000px) {
  .fv__pack {
        top: 369px;
        left: 80px;
  }
}
@media screen and (min-width: 1500px) {
  .fv__pack {
        top: 407px;
        left: 104px;
  }
    .fv {
        margin-top: -34px;
    }
}
@media screen and (min-width: 2000px) {
  .fv__pack {
    top: 495px;
    left: 95px;
  }
}

.fv__image::before {
  display: none;
}
.fv__image::after {
  display: none;
}

