@charset "UTF-8";

/*CP訴求*/
.container.px-\[25px\] {
    padding-bottom: 0.5rem;
}

/*追従*/
.floating {
  position: fixed;
  bottom: 1%;
  max-width: 750px;
  width: 100%;
  z-index: 9999;
  opacity: 1;
  visibility: visible; /* 初期状態で表示 */
  transition: opacity 4s ease-in-out, visibility 0s 4s; /* opacityとvisibilityの遷移を同時に設定 */
}

.floating.hidden {
  opacity: 0;
  visibility: hidden; /* hiddenクラスが適用されると非表示になる */
}
a.floating_btn {
    width: 45%;
    display: block;
    margin-left: auto;
    max-width: 250px;
    margin-right: 0.5rem;
}
#image {
  opacity: 0;
  transition: opacity 0.1s ease-in-out; /* スムーズな表示切り替え */
}
#image.visible {
  opacity: 1;
}

/*ボタンアニメーション*/
.updown {
    animation-name:updown1;   /* アニメーション名の指定 */
    animation-delay:0s;   /* アニメーションの開始時間指定 */
    animation-duration: 3s;   /* アニメーション動作時間の指定 */
    animation-timing-function: ease-in-out;  /* アニメーションの動き指定（徐々に早く）*/
    animation-iteration-count: infinite; 
}
@keyframes updown1 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
    
/* 250520追記 */
.kv {
  width: 100%;
  max-width: 1200px; 
  margin: 0 auto;  
}
.relative {
    position: relative;
}    
.fv-img {
  width: 100%;        
  max-width: 2000px;  
  display: block;
  margin: 0 auto;
}
#fv_cta_box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
} 
/*FVCTA_sp*/
.fv_mv_btn {
position: absolute;
    bottom: 3%;
    width: 40%;
    right: 0%;
    max-width: 288px;
    padding: 3%;
}
@media screen and (min-width: 768px) {
/*FVCTA_pc*/
.fv_mv_btn {
position: absolute;
    bottom: 3%;
    width: 25%;
    right: 28%;
    max-width: 220px;
    padding: 3%;
}

@media screen and (max-width: 760px) {
    #margin-top {
        margin-top:60px; 
    }
    }
@media screen and (min-width: 761px) {
    #margin-top {
        margin-top: 80px;
    }
}
/* ==============reservation=================== */
/* 250610追記 反映エラーの為html直書き*/
  .reservation {
  background-image: url(assets/images/reservation-bk.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding: 6.5rem 0;
  background-position: center;
  text-align: center;
  margin-top: 60px;
}
.reservationBtn a {
  white-space: nowrap;
}
@media (max-width: 1179px) {
  .reservation {
    padding: 5rem 0;
  }
}
.reservation h3 {
  font-size: 1.6rem;
  color: #FFFFFF;
  font-weight: bold;
}
@media (max-width: 1179px) {
  .reservation h3 {
    font-size: 1.2rem;
  }
}
.reservationBtn {
  background: #FFFFFF;
  cursor: pointer;
  opacity: 1;
  border-width: 1px;
  border-color: #CF602B;
  width: 20%;
  margin: 2rem auto 0rem auto;
  border-radius: 999px;
  padding: 20px 44px;
  font-size: min(20vw, 18px);
  font-weight: bold;
  color: #CF602B;
  max-width: 300px;
}
@media (max-width: 1179px) {
  .reservationBtn {
    width: 90%;
  }
}
.reservationText {
  color: #CF602B;
  font-size: 1.1rem;
  font-weight: bold;
}
@media (max-width: 1179px) {
  .reservationText {
    font-size: 1rem;
    width: 95%;
  }
}
  .service-lead .reservation {
font-family: "font-family: 'Noto Sans JP', Arial, sans-serif;"        
    }
    }