@charset "UTF-8";

/*----------------------------------
Title : rental_red.css
For   : setting rental layout
----------------------------------*/

/* -------------------------------------------------------------------
slider-area
------------------------------------------------------------------- */

.rental-steps-slider-area {
	position: relative;
	width: 100%;
	margin-bottom: 50px;
}

@media (min-width: 992px) {
	.rental-steps-slider-area {
	  width: 80vw;
	}
}

.rental-steps-slider {
	height: 375px;
}

.steps-block {
	position: relative;
	width: 310px;
	height: 310px;
	margin-top: 24px;
	margin-bottom: 30px;
	margin-left: 5px;
	padding: 55px 47px 0;
	box-shadow: 0 3px 10px #aaa;
}

.steps-block .steps-number {
	position: absolute;
	top: -24px;
	left: 30px;
	display: block;
	width: 140px;
	height: 48px;
	color: #fff;
	text-align: center;
	line-height: 48px;
	background-color: #009483;
	border-radius: 24px;
}

.steps-block dt {
	margin-bottom: 20px;
	font-size: 1.25rem;
	text-align: center;
}

.steps-block dd.icon-steps {
	display: flex;
	width: 100%;
	height: 125px;
	justify-content: center;
	align: middle;
	vertical-align: middle;
}

.steps-block dd.icon-steps img {
	height: 80%;
}

.rental-steps-slider-area .slick-next1,
.rental-steps-slider-area .slick-next2 {
  position: absolute;
  top: 0;
  right: 0px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50px;
  transition: 0.1s;
  border: 2px solid #053594;
}

.rental-steps-slider-area .slick-next1:hover,
.rental-steps-slider-area .slick-next2:hover {
  opacity: 0.8;
}

.rental-steps-slider-area .slick-next1::after,
.rental-steps-slider-area .slick-next2::after {
  position: absolute;
  top: calc(50% - 5px);
  right: 0;
  content: "";
  display: block;
  width: 50px;
  height: 10px;
  margin: auto;
  background-image: url("../../common_red/img/arrow_link_blue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.rental-steps-slider-area .slick-next1:hover::after,
.rental-steps-slider-area .slick-next2:hover::after {
  transition: 0.3s cubic-bezier(0, 0.585, 0.385, 1);
  transform: translateX(0.625vw);
}

.rental-steps-slider-area .slick-prev1,
.rental-steps-slider-area .slick-prev2 {
  position: absolute;
  top: 0;
  left: -20px;
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 50px;
  transition: 0.1s;
  border: 2px solid #053594;
}

.rental-steps-slider-area .slick-prev1::after,
.rental-steps-slider-area .slick-prev2::after {
  position: absolute;
  top: calc(50% - 5px);
  content: "";
  display: block;
  width: 50px;
  height: 10px;
  margin: auto;
  background-image: url("../../common_red/img/arrow_link_reverse_blue.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

.rental-steps-slider-area .slick-prev1:hover::after,
.rental-steps-slider-area .slick-prev2:hover::after {
  transition: 0.3s cubic-bezier(0, 0.585, 0.385, 1);
  transform: translateX(-0.625vw);
}

.rental-steps-slider-area .slick-next1[aria-disabled="false"],
.rental-steps-slider-area .slick-prev1[aria-disabled="false"],
.rental-steps-slider-area .slick-next2[aria-disabled="false"],
.rental-steps-slider-area .slick-prev2[aria-disabled="false"] {
	opacity: 1;
}

.rental-steps-slider-area .slick-next1[aria-disabled="true"],
.rental-steps-slider-area .slick-prev1[aria-disabled="true"],
.rental-steps-slider-area .slick-next2[aria-disabled="true"],
.rental-steps-slider-area .slick-prev2[aria-disabled="true"] {
	opacity: 0;
}