@charset "UTF-8";
/* CSS Document */


/* common
------------------------------------------------------*/
.zankure_bg {
  background-color: #0081cc;
}

.zankure__car_list {
  background-color: #0081cc;
}

.zankure__car_list a,
.zankure__car_list img {
  display: block;
}

.zankure__link01 .zankure__car_list img {
  width: 100px;
  display: block;
}

a,
.accordion-header,
.close-btn,
#page-top img {
  transition: .5s;
}

a:hover,
.accordion-header:hover,
.close-btn:hover,
#page-top img:hover {
  opacity: 0.7;
}


/* zancrebariho top anchor buttons
------------------------------------------------------*/
.zancr_top03,
.zancr_top04 {
  position: relative;
}

#lpwrap .zancr_top03_btn,
#lpwrap .zancr_top04_btn {
  position: absolute;
  display: block;
  z-index: 2;
  overflow: hidden;
}

#lpwrap .zancr_top03_btn01 {
  top: 15.2%;
  left: 1.8%;
  width: 52.25%;
}

#lpwrap .zancr_top03_btn02 {
  top: 15.2%;
  right: -0.8%;
  width: 52.25%;
}

#lpwrap .zancr_top04_btn01 {
  top: 24.1%;
  left: 3.8%;
  width: 50.2%;
}

#lpwrap .zancr_top04_btn02 {
  top: 24.1%;
  right: 0.8%;
  width: 50.2%;
}


/* zancrebariho accordion
------------------------------------------------------*/
.zancr_acc01 {
  overflow: visible;
}

.zancr_acc01_head {
  position: relative;
}

#lpwrap .zancr_acc .accordion-header:hover {
  opacity: 1;
}

#lpwrap .zancr_acc01 .accordion-header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 2;
}

#lpwrap .zancr_acc01 .accordion-content a {
  display: block;
  width: 67%;
  margin: 0 auto;
}


/* modal button position
------------------------------------------------------*/
#lpwrap .zank-wrap {
  position: relative;
}

#lpwrap .zank-wrap .zank_modal_btn_large {
  position: absolute;
  left: 7.5%;
  top: 0;
  width: 84%;
  z-index: 2;
}


/* modal close button
------------------------------------------------------*/
.modal--modal4-1 .close-modal,
.modal--modal4-2 .close-modal,
.modal--modal4-3 .close-modal {
  background: url("../images/btn/04_zankure_slider_cls_btn.png") no-repeat 0 0 / contain;
  bottom: 3%;
  left: 15.5%;
  width: 68.7%;
  aspect-ratio: 460 / 115;
}

/* 支払い例 modal4-2-1 */
#modal-overlay .modal.modal--modal4-2-1 .close-modal {
  background: url("../images/gimick/btn_toguru.png") no-repeat center / contain;
}

/* 大きめモーダル */
#modal-overlay .modal.modal--modal-zank-large .close-modal,
#lpwrap #modal-overlay .modal.modal--modal4-2-2 .close-modal {
  background: url("../images/btn/popup_cloth02.png") no-repeat center center / contain;
}

/* このLPのスライダーmodal4-2だけ閉じるボタン位置を上書き */
#lpwrap.page_zancrebariho #modal-overlay .modal.modal--modal4-2 .close-modal {
  bottom: 4%;
  left: 12%;
  width: 76%;
}


/* zankure bottom slider overlay
------------------------------------------------------*/
.zank_slider_overlay {
  position: relative;
  overflow: visible !important;
}

#lpwrap .zank_slider_on_img {
  position: absolute;
  bottom: 0.5%;
  left: 0;
  width: 100%;
  z-index: 2;
  margin: 0;
  overflow: visible !important;
}

#lpwrap .wrap_swiper.wrap_swiper4.zank_slider_on_img {
  background: transparent;
}

#lpwrap .zank_slider_on_img .swiper-container,
#lpwrap .zank_slider_on_img .swiper4 {
  overflow: visible !important;
}

#lpwrap .zank_slider_on_img .swiper4 {
  background-image: none;
  background-color: transparent;
  padding-bottom: 0;
}

#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination {
  position: absolute;
  top: -28%;
  left: 0;
  right: 0;
  bottom: auto;
  z-index: 999;
  overflow: visible !important;
  text-align: center;
}

#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination img,
#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination img.swiper-pagination-bullet {
  width: 28%;
  max-width: 28%;
  height: auto;
  margin: 0 1%;
  display: inline-block;
  opacity: 1;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: none !important;
  border-radius: 0 !important;
}

#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination img:focus,
#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination img:active {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination-bullet,
#lpwrap .zank_slider_on_img .swiper4 .swiper-pagination-bullet-active {
  background: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* スライドNEXT */
.swiper4 .swiper-button-next {
    background-image: url("../images/gimick/04_zankure_slider_right.png");
}
/* スライドPREV */
.swiper4 .swiper-button-prev {
    background-image: url("../images/gimick/04_zankure_slider_left.png");
}


/* キラッと光るアニメーション
------------------------------------------------------*/
.kira {
  position: relative;
  display: block;
  overflow: hidden;
}

.kira::after {
  position: absolute;
  top: -200%;
  left: -150%;
  content: "";
  height: 500%;
  width: 70px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  transform: rotate(50deg);
  animation: 2s shine infinite linear;
  pointer-events: none;
}

@keyframes shine {
  0% {
    left: -100%;
  }

  20% {
    left: 150%;
  }

  100% {
    left: 150%;
  }
}

/* btn anchorリンク4点 */
.kira2606.zancr_top03_btn01::after {
  -webkit-mask-image: url("../images/btn/04_btn_none-e.png");
  mask-image: url("../images/btn/04_btn_none-e.png");
}

.kira2606.zancr_top03_btn02::after {
  -webkit-mask-image: url("../images/btn/04_btn_super-one.png");
  mask-image: url("../images/btn/04_btn_super-one.png");
}

.kira2606.zancr_top04_btn01::after {
  -webkit-mask-image: url("../images/btn/04_btn_civic.png");
  mask-image: url("../images/btn/04_btn_civic.png");
}

.kira2606.zancr_top04_btn02::after {
  -webkit-mask-image: url("../images/btn/04_btn_prerude.png");
  mask-image: url("../images/btn/04_btn_prerude.png");
}



 

.wrap_swiper4_zank .swiper4 .swiper-button-next,
.wrap_swiper4_zank .swiper4 .swiper-button-prev {
  top: 47%;
}