@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  line-height: 1.3;
  letter-spacing: 0.2px;
  font-size: 3.7333333333vw;
  transition: all 1.6s ease 0s;
  background-color: #fff;
  font-family: "sweet-sans-pro", sans-serif;
  font-weight: 600;
  font-style: normal;
}
@media screen and (min-width: 1031px) {
  body {
    font-size: 1.1111111111vw;
  }
}

img {
  display: block;
  width: 100%;
}

a:hover {
  opacity: 0.6;
  transition: 0.6s;
}

@media screen and (min-width: 1031px) {
  .spNone {
    display: block;
  }
}
@media screen and (max-width: 1030px) {
  .spNone {
    display: none !important;
  }
}

@media screen and (min-width: 1031px) {
  .pcNone {
    display: none !important;
  }
}
@media screen and (max-width: 1030px) {
  .pcNone {
    display: block;
  }
}

/* .load
===================================================== */
.load {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  height: 100vh;
  z-index: 9999;
}

.fv {
  height: 165vw;
  opacity: 0;
  transition: opacity 1s;
  position: relative;
  margin-bottom: 30%;
  color: #fff;
}
.fv.on {
  opacity: 1;
}
.fv h1 {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 6.4vw !important;
  white-space: nowrap;
  letter-spacing: 0.6vw;
}
.fv h1 span {
  font-size: 7.2vw !important;
}
.fv .fv_logo {
  position: absolute;
  width: 30.1333333333vw;
  top: 93%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.four_img {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
}
.four_img div {
  width: 50%;
}

.blur {
  overflow: hidden;
}

.fade-diag {
  opacity: 0;
  transform: translate(0, 0);
  transition: none;
  width: fit-content;
  margin: 0 auto;
}

/* 初期位置（アニメ開始前） */
.fade-lt {
  transform: translate(-80px, -80px);
} /* 左上 → 右下 */
.fade-rt {
  transform: translate(80px, -80px);
} /* 右上 → 左下 */
.fade-lb {
  transform: translate(-80px, 80px);
} /* 左下 → 右上 */
.fade-rb {
  transform: translate(80px, 80px);
} /* 右下 → 左上 */
.fade-blur {
  opacity: 0;
  filter: blur(20px);
  transform: scale(1.05);
  transition: none;
  max-width: 100%;
  height: auto;
}

.flip-wrapper {
  perspective: 800px;
  width: 90vw;
  height: 121vw;
  display: inline-block;
}
@media screen and (min-width: 1031px) {
  .flip-wrapper {
    width: 100%;
    height: 573px;
  }
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform; /* GPUレンダリングでガタつき防止 */
}

.flip-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 余白なく収める */
  backface-visibility: hidden; /* 裏面非表示 */
}

/* 裏面の画像を反転 */
.flip-inner .back {
  transform: rotateY(180deg);
}

@media screen and (max-width: 1030px) {
  .pc_right {
    width: 90%;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1031px) {
  .pc_flex {
    display: flex;
    opacity: 0;
    transition: opacity 1s;
  }
  .pc_flex.on {
    opacity: 1;
  }
  .pc_flex h1 {
    position: absolute;
    color: #fff;
    right: 4.5vw;
    bottom: 13vw;
    font-size: 2vw;
    letter-spacing: 0.1vw;
  }
  .pc_flex h1 span {
    font-size: 2.2vw;
  }
  .pc_flex .pc_left {
    width: 50%;
    height: 100vh;
    position: fixed;
    background-image: url("../images/fv_pc.webp");
    background-size: cover; /* 画像を全体にフィット */
    background-position: center; /* 中央寄せ */
    background-repeat: no-repeat;
    perspective: 1000px;
  }
  .pc_flex .pc_left .sidebar {
    position: absolute;
    z-index: 10;
    bottom: 2vw;
    right: 4.5vw;
    width: 13vw;
    font-size: 1.0416666667vw;
    text-align: right;
    color: #fff;
    line-height: 0.9;
  }
  .pc_flex .pc_left .fv_logo {
    width: 10vw;
    margin: 3vw 0 0 3vw;
  }
  .pc_flex .pc_right {
    width: 50%;
    margin-left: 50%;
  }
  .pc_flex .pc_right_inner {
    max-width: 425px;
    margin-inline: auto;
  }
  .product-list li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 1vw;
  }
  /* 黒丸インジケーター */
  .product-list li .indicator {
    position: absolute;
    right: -2vw;
    top: 50%;
    width: 0.6vw;
    height: 0.6vw;
    background: #fff;
    border-radius: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: all 0.3s ease;
  }
  /* 表示中は丸を見せる */
  .product-list li.active .indicator {
    opacity: 1;
  }
}
.credit {
  margin: 10px 0 27% 0px;
}
.credit .kin {
  font-family: "dnp-shuei-gothic-kin-std", sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 2.9333333333vw;
}
@media screen and (min-width: 1031px) {
  .credit .kin {
    font-size: 0.9722222222vw;
  }
}
.credit .line {
  text-decoration: underline;
  font-size: 3.2vw;
}
@media screen and (min-width: 1031px) {
  .credit .line {
    font-size: 0.9027777778vw;
  }
}

footer {
  margin: 40% auto 5%;
  text-align: center;
}
footer .all_btn {
  text-align: center;
  font-size: 4vw;
  margin: 0 auto 25%;
  display: block;
  border: 1px solid;
  padding: 3% 0;
  width: 75%;
}
@media screen and (min-width: 1031px) {
  footer .all_btn {
    font-size: 1.25vw;
  }
}
footer div {
  width: 30%;
  margin: 0 auto 5%;
}
footer .copy {
  font-size: 10px;
}

.swiper-slide a:hover {
  opacity: 1 !important;
}/*# sourceMappingURL=style.css.map */