@charset "UTF-8";
/*==================================
Base
==================================*/
body {
  margin: 0;
  padding: 0;
}

main {
  width: 750px;
  margin: 0 auto;
}

/* 画像汎用クラス */
.img_box {
  width: 100%;
}
.img_box img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
}

/*==================================
FV (First View)
==================================*/
.fv {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}
.fv .fv_pts01 {
  position: absolute;
  top: 31.1185870479%;
  width: 53.6%;
  right: 2%;
  z-index: 5;
}
.fv .fv_pts02 {
  position: absolute;
  top: 30.2775441548%;
  width: 44.2666666667%;
  left: 0%;
  z-index: 6;
}

/*==================================
TOP　スライダー (Circle)
==================================*/
.circle-slider-container {
  position: absolute;
  top: 34.4827586207%;
  left: 31.3333333333%;
  width: 100%;
  height: auto;
  z-index: 2;
  /* スライダー本体 */
}
.circle-slider-container .circle-slider {
  position: relative;
  width: 69.0666666667%;
  height: 27.3338940286%;
  overflow: hidden;
  box-sizing: border-box;
  /* スライド画像 */
}
.circle-slider-container .circle-slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fade-animation 18s infinite;
  /* アニメーション遅延設定 */
}
.circle-slider-container .circle-slider .slide:nth-child(1) {
  animation-delay: 0s;
}
.circle-slider-container .circle-slider .slide:nth-child(2) {
  animation-delay: 3s;
}
.circle-slider-container .circle-slider .slide:nth-child(3) {
  animation-delay: 6s;
}
.circle-slider-container .circle-slider .slide:nth-child(4) {
  animation-delay: 9s;
}
.circle-slider-container .circle-slider .slide:nth-child(5) {
  animation-delay: 12s;
}
.circle-slider-container .circle-slider .slide:nth-child(6) {
  animation-delay: 15s;
}

@keyframes fade-animation {
  0% {
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  /* フェードイン完了 */
  20% {
    opacity: 1;
  }
  /* 表示維持 */
  25% {
    opacity: 0;
  }
  /* フェードアウト完了 */
  100% {
    opacity: 0;
  }
}
/*==================================
howtoスライダー
==================================*/
.custom-slider-container {
  position: absolute;
  top: 33.2167832168%;
  left: 5.6%;
  width: 94.2666666667%;
  z-index: 100;
  /* ページネーション */
}
.custom-slider-container .howtoSwiper {
  width: 100%;
}
.custom-slider-container .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
.custom-slider-container .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.custom-slider-container .swiper-pagination {
  position: relative;
  bottom: 0;
  margin-top: 35px;
  /* 通常ドット */
  /* アクティブドット */
}
.custom-slider-container .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: #707070;
  opacity: 1;
  margin: 0 12px !important;
}
.custom-slider-container .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #d45025;
}

/*==================================
無限ループスライダー
==================================*/
.loopswiper {
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 1.2908777969%;
}
.loopswiper .swiper-wrapper {
  transition-timing-function: linear !important;
}
.loopswiper .swiper-slide img {
  height: auto;
  width: 100%;
  /* 念のため追加 */
  object-fit: contain;
}

/*==================================
CTA
==================================*/
.cta {
  position: relative;
}
.cta .btn_box {
  position: absolute;
  display: flex;
  bottom: 11.7647058824%;
  left: 0;
  right: 0;
  justify-content: center;
}
.cta .btn_box a {
  display: inline-block;
  text-decoration: none;
}
.cta .btn_box a.cv_btn {
  width: 29.8666666667%;
}
.cta .btn_box a:hover {
  opacity: 0.8;
}

/*==================================
Placeholders (空のクラス)
==================================*/
.img16_slider,
.img21_slider {
  position: relative;
  width: 100%;
  height: auto;
}

/*==================================
Footer
==================================*/
footer {
  background-color: #f2f2e9;
}
footer .logo {
  text-align: center;
  padding: 60px 0 40px 0;
}
footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}
footer ul li {
  display: inline-block;
  padding: 0 10px;
  /* 最後の要素以外に区切り線をつける */
}
footer ul li:not(:last-child)::after {
  content: "|";
  margin-left: 10px;
}
footer ul li a {
  text-decoration: none;
  color: #2f2216;
}
footer ul li a:hover {
  text-decoration: underline;
}
footer .copyright {
  text-align: center;
  padding: 15px 0 25px 0;
  font-size: 12px;
  color: #2f2216;
  margin-block-end: 0;
}

/*==================================
SP (スマホ版 750px以下)
==================================*/
@media screen and (max-width: 750px) {
  main {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
  }
  /* FVエリアの調整 */
  .fv {
    width: 100%;
  }
  .fv img {
    width: 100%;
    height: auto;
  }
  /* CTAボタン調整 */
  .cta .btn_box a.cv_btn {
    width: 29.8666666667%;
  }
  .cta .btn_box a.cv_btn img {
    width: 100%;
    height: auto;
  }
  .custom-slider-container {
    /* ページネーション */
  }
  .custom-slider-container .swiper-pagination {
    position: relative;
    bottom: 0;
    margin-top: 4%;
    /* 通常ドット */
  }
  .custom-slider-container .swiper-pagination .swiper-pagination-bullet {
    width: 2.5%;
    margin: 0 2.5% !important;
  }
  /* Footer調整 */
  footer .logo {
    padding: 12% 0 8% 0;
  }
  footer ul li {
    display: block;
    padding: 5px 0;
  }
  footer ul li:not(:last-child)::after {
    content: "";
  }
}