body {
  width: 100%;
  background-color: #fff;
  background-image: url(../images/body_bg.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-position: bottom;
  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体",
    "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}

.wrapper {
  max-width: 750px;
  margin: 0 auto;
  text-align: center;
}

img {
  width: 100%;
}

/* 初期状態：透明・下にずらして非表示 */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

/* 表示状態 */
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}



.cva .button {
  -webkit-animation: anime1 0.6s ease 0s infinite alternate;
          animation: anime1 0.6s ease 0s infinite alternate;
  -webkit-transform-origin: center;
          transform-origin: center;
}


.cva .button img {
  max-width: 95%;
}

.button_nayami {
 margin : 30px 30px 30px;
}

.button_nayami {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.face-btn-wrap {
  position: relative;
}



.button_face {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px; /* ← PCは大きめに */
}

.button_face img {
  width: 80%;
  height: auto;
}

.button_cta {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 800px; /* ← PCは大きめに */
}

.button_cta img {
  width: 80%;
  height: auto;
}





@media screen and (max-width: 768px) {
  .button_face {
    max-width: 600px;
  }
}

.fixed_cta {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 9999;
}

.fixed_cta a {
  width: 50%;
}

.fixed_cta img {
  width: 100%;
  height: auto;
  display: block;
}
@media screen and (min-width: 769px) {
  .fixed_cta {
    display: none;
  }
}


.map_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin: 0 auto;
  margin-bottom: 20px;
}

.map_wrap iframe {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* ← これが重要 */
  width: 80%;
  height: 100%;
  border: 0;
}

.fv {
  position: relative;
  width: 100%;
  overflow: hidden;
  
}

/* 背景画像 */
.fv-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* 上半分に動画を重ねる */
.fv-video {
  position: absolute;
  top: 32%;
  left: 0;
  width: 100%;
  height: 36%;
  overflow: hidden;
  z-index: 1;
}



.fv-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fv-video video {
  min-width: 100%;
  min-height: 100%;
}


.fv-video video {
  -webkit-mask-image: linear-gradient(
    to bottom,
    black 80%,
    transparent 110%
  );
}







.element {
  -webkit-animation: tikatika 1s step-end infinite;
          animation: tikatika 1s step-end infinite;
}

@-webkit-keyframes tikatika {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes tikatika {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}




/* 固定CTA */
.cta-fixed {
  position: fixed;       /* 画面に固定 */
  bottom: 20px;          /* 下からの距離 */
  left: 50%;             /* 横中央に配置 */
  transform: translateX(-50%); /* 中央揃え調整 */
  z-index: 999;   
  width: 220px;       /* 他の要素より前面に表示 */
}

.cta-fixed a img {
  width: 100%;
  display: block;
}


.fotter {
  padding: 3% 6%;
}

.copy {
  background-color: #fff;
  color: #000;
  font-size: 13px;
  padding: 2%;
  text-align: center;
}

.inc {
  font-size: 10px;
  padding-bottom: 100px;
}

.nav ul {
  display: block;   /* flexを解除 */
  margin-top: 50px;
  margin-bottom: 30px;
}

.nav li {
  margin-bottom: 10px;
}
@-webkit-keyframes anime1 {
  from {
    -webkit-transform: scale(0.95, 0.95);
            transform: scale(0.95, 0.95);
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes anime1 {
  from {
    -webkit-transform: scale(0.95, 0.95);
            transform: scale(0.95, 0.95);
  }
  to {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
/*# sourceMappingURL=style.css.map */