@charset "UTF-8";
body,
html {
  height: 100%;
  overflow: hidden;
}

.px-1 {
  padding: 0 0.5em 0 0.5em;
}

.slider {
  text-align: center;
  margin-inline: auto;
  overflow: hidden; /* 画像がはみ出ないようにする */
  width: 100vw;
}

.slick-img img {
  width: 100%;
  height: 100vh; /* ビューポートの高さに合わせる */
  -o-object-fit: cover;
     object-fit: cover; /* 画像がコンテナを覆うように調整しつつ、アスペクト比を保持 */
  -o-object-position: center;
     object-position: center; /* 画像が中央に配置されるように調整 */
}
.slick-img p {
  position: absolute;
  top: 38%;
  left: 3%;
  color: #ffffff;
  font-size: 60px;
  font-weight: bold;
}
.slick-img .sp-text {
  position: absolute;
  top: 17%;
  left: 3%;
  color: #ffffff;
  font-size: 35px;
  font-weight: bold;
}

.btn-sp {
  display: none;
}

.btn-pc {
  display: block;
}

.close {
  z-index: 100;
  display: flex;
  position: absolute;
  top: 1%;
  right: -1%; /* 要素の左端を親の中央に配置 */
  transform: translateX(-50%); /* 要素を自身の幅の半分だけ左に移動 */
}
.close img {
  width: 30px; /* 画像の幅を親要素の50%に設定 */
  height: auto; /* 高さは自動調整してアスペクト比を保持 */
}
.close a:hover {
  opacity: 0.8;
}

.btn-1 {
  display: flex;
  position: absolute;
  bottom: 10%;
  left: 50%; /* 要素の左端を親の中央に配置 */
  transform: translateX(-50%); /* 要素を自身の幅の半分だけ左に移動 */
}
.btn-1 img {
  width: 200px; /* 画像の幅を親要素の50%に設定 */
  height: auto; /* 高さは自動調整してアスペクト比を保持 */
}
.btn-1 a:hover {
  opacity: 0.8;
}

.btn-2 {
  display: flex;
  margin: auto;
  position: absolute;
  top: 6%;
  right: 3%;
}
.btn-2 img {
  width: 40px; /* 画像の幅を親要素の50%に設定 */
  height: auto; /* 高さは自動調整してアスペクト比を保持 */
}
.btn-2 a:hover {
  opacity: 0.8;
}

.pc-img {
  display: block;
}

.sp-img {
  display: none;
}

@media screen and (max-width: 750px) {
  .pc-img {
    display: none !important;
  }
  .sp-img {
    display: block !important;
  }
  .btn-pc {
    display: none !important;
  }
  .btn-sp {
    display: block !important;
  }
}
.slide-dots {
  position: relative;
  margin: -1% 0 0 0; /*ドットの位置*/
  padding: 0;
  text-align: center;
}
.slide-dots li {
  display: inline-block;
  margin: 0 15px;
}
.slide-dots li button {
  position: relative;
  text-indent: -9999px;
  opacity: 0.7;
}
.slide-dots li button:before {
  content: "⚫︎";
  color: #fff;
  font-size: 20px;
  text-indent: 0px;
  position: absolute;
  top: auto;
  left: 0;
  bottom: 30px;
}
.slide-dots li.slick-active button:before {
  color: #000000;
}

button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15); /* 拡大率 */
  }
}
.add-animation img {
  animation: zoomUp 10s linear 0s normal both;
}/*# sourceMappingURL=base0228.css.map */