@charset "UTF-8";
/* placeholder color */
/**********************************************************************************************

　rental

**********************************************************************************************/
/*---------------------------------------------
taste
---------------------------------------------*/
.wrap-rental {
  background: #fff; }

.rental_sec-main {
  position: relative;
  background: url("../img/rental/rental_bg.png") no-repeat center center;
  background-size: cover;
  padding: 70px 0 300px; }
  @media (max-width: 750px) {
    .rental_sec-main {
      padding: 10vw 0 40vw; } }
  .rental_sec-main .inner {
    max-width: 1200px; }
    @media (max-width: 750px) {
      .rental_sec-main .inner {
        max-width: 90vw; } }
  .rental_sec-main .wave {
    bottom: -300px;
    width: 100vw;
    min-width: 1280px;
    left: 50%;
    transform: translateX(-50%); }
    @media (max-width: 750px) {
      .rental_sec-main .wave {
        bottom: -41vw;
        min-width: 1px; } }
  .rental_sec-main .sec_titArea {
    margin: 0 0 100px; }
    @media (max-width: 750px) {
      .rental_sec-main .sec_titArea {
        margin: 0 0 8vw; } }

.rental_balloon_txtArea {
  width: 1015px;
  height: 500px;
  background: url("../img/rental/rental_balloon.png") no-repeat;
  background-size: contain;
  padding: 110px 100px; }
  @media (max-width: 750px) {
    .rental_balloon_txtArea {
      width: 100%;
      height: auto;
      padding: 12vw 10vw;
      background-size: 100% 100%; } }

.rental_tit {
  font-family: "shirokuma";
  font-size: 3.8rem;
  line-height: 1.2;
  margin: 0 0 20px; }
  @media (max-width: 750px) {
    .rental_tit {
      font-size: 6vw;
      margin: 0 0 3vw; } }

@media (max-width: 750px) {
  .rental_txt {
    font-size: 3vw; } }
.rental_txt b {
  font-weight: 400;
  color: #ea5f28; }

.rental_balloon_img {
  width: 576px;
  position: absolute;
  right: -40px;
  bottom: -130px; }
  @media (max-width: 750px) {
    .rental_balloon_img {
      width: 60vw;
      bottom: -35vw;
      right: -20vw; } }

/*---------------------------------------------
content
---------------------------------------------*/
.rental_sec-content {
  position: relative;
  padding: 0 0 300px; }
  @media (max-width: 750px) {
    .rental_sec-content {
      padding: 5vw 0 30vw; } }

.content_tit {
  border-radius: 15px;
  background: #ffdf4c;
  padding: 10px;
  text-align: center;
  margin: 0 0 20px; }
  @media (max-width: 750px) {
    .content_tit {
      padding: 2.6vw;
      margin: 0 0 2vw; } }

.contentArea {
  margin: 0 0 70px; }
  @media (max-width: 750px) {
    .contentArea {
      margin: 0 0 8vw; } }

.contentList {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  line-height: 1.2;
  text-align: center; }
  .contentList li {
    margin: 0 0 20px;
    background: #ffcec4;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    width: 154px; }
    @media (max-width: 750px) {
      .contentList li {
        width: 32%;
        height: 12vw;
        margin: 0 0 2vw; } }

/*---------------------------------------------
merit
---------------------------------------------*/
.rental_sec-merit {
  background: #9cdeeb;
  padding: 0 0 300px;
  position: relative; }
  @media (max-width: 750px) {
    .rental_sec-merit {
      padding: 10vw 0 30vw; } }
  .rental_sec-merit .inner {
    max-width: 1120px; }
    @media (max-width: 750px) {
      .rental_sec-merit .inner {
        max-width: 90vw; } }
  .rental_sec-merit .sec_titArea {
    margin: 0 0 100px; }
    @media (max-width: 750px) {
      .rental_sec-merit .sec_titArea {
        margin: 0 0 8vw; } }

.meritList {
  display: flex;
  justify-content: space-between; }
  @media (max-width: 750px) {
    .meritList {
      display: block;
      width: 80vw;
      margin: auto; } }
  .meritList li {
    width: 350px; }
    @media (max-width: 750px) {
      .meritList li {
        width: 100%; }
        .meritList li:not(:last-child) {
          margin: 0 0 8vw; } }
  .meritList b {
    font-weight: 400;
    color: #ea5f28; }

.meritList_img {
  margin: 0 0 20px; }
  @media (max-width: 750px) {
    .meritList_img {
      margin: 0 0 3vw; } }

.meritList_tit {
  font-size: 2.4rem;
  line-height: 1.5;
  margin: 0 0 20px;
  text-align: center; }
  @media (max-width: 750px) {
    .meritList_tit {
      font-size: 4.2vw;
      margin: 0 0 2vw; } }

.meritList_txt {
  width: 270px;
  margin: auto; }
  @media (max-width: 750px) {
    .meritList_txt {
      width: 90%; } }

.merit_slideArea {
  margin: 140px 0 0; }
  @media (max-width: 750px) {
    .merit_slideArea {
      margin: 14vw 0 0; } }
  .merit_slideArea .sec_titArea {
    margin: 0; }

.merit_slide_wrap {
  position: relative;
  padding: 60px 0 20px;
  margin: 0 0 100px; }
  @media (max-width: 750px) {
    .merit_slide_wrap {
      padding: 12vw 0 3vw;
      margin: 0 0 8vw; } }

.merit_slide {
  display: flex;
  justify-content: center; }
  .merit_slide li {
    box-shadow: 0 7px 7px rgba(35, 32, 45, 0.3);
    margin: 0 20px;
    width: 338px; }
    @media (max-width: 750px) {
      .merit_slide li {
        width: 46%;
        margin: 0 2%; } }

.merit_slide_txt {
  width: 250px;
  position: absolute;
  right: 0;
  top: 0; }
  @media (max-width: 750px) {
    .merit_slide_txt {
      width: 30vw; } }

/*---------------------------------------------
plan
---------------------------------------------*/
.rental_sec-plan {
  background: #fff;
  padding: 0 0 300px;
  position: relative; }
  @media (max-width: 750px) {
    .rental_sec-plan {
      padding: 5vw 0 30vw; } }
  .rental_sec-plan .sec_titArea {
    margin: 0 0 80px; }
    @media (max-width: 750px) {
      .rental_sec-plan .sec_titArea {
        margin: 0 0 8vw; } }

.planList > li {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 285px;
  display: flex;
  align-items: center;
  padding: 10px 90px 0 50px; }
  @media (max-width: 750px) {
    .planList > li {
      padding: 5vw;
      display: block;
      height: auto;
      padding: 5vw 5vw 12vw; } }
  .planList > li:not(:last-child) {
    margin: 0 0 100px; }
    @media (max-width: 750px) {
      .planList > li:not(:last-child) {
        margin: 0 0 10vw; } }
  .planList > li:nth-child(1) {
    background-image: url("../img/rental/plan_bg01.png"); }
    @media (max-width: 750px) {
      .planList > li:nth-child(1) {
        background-image: url("../img/rental/plan_bg01_sp.png"); } }
    .planList > li:nth-child(1) .planList_balloon {
      background: url("../img/rental/baloon01.png") no-repeat;
      background-size: 100% 100%; }
  .planList > li:nth-child(2) {
    background-image: url("../img/rental/plan_bg02.png"); }
    @media (max-width: 750px) {
      .planList > li:nth-child(2) {
        background-image: url("../img/rental/plan_bg02_sp.png"); } }
  .planList > li:nth-child(3) {
    background-image: url("../img/rental/plan_bg03.png"); }
    @media (max-width: 750px) {
      .planList > li:nth-child(3) {
        background-image: url("../img/rental/plan_bg03_sp.png"); } }
  .planList > li:nth-child(4) {
    background-image: url("../img/rental/plan_bg04.png"); }
    @media (max-width: 750px) {
      .planList > li:nth-child(4) {
        background-image: url("../img/rental/plan_bg04_sp.png"); } }

.planList_balloon {
  font-size: 3rem;
  width: 192px;
  height: 112px;
  background: url("../img/rental/baloon02.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -30px;
  left: -40px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.2;
  text-align: center; }
  @media (max-width: 750px) {
    .planList_balloon {
      font-size: 4vw;
      width: 28vw;
      height: 18vw;
      top: -3vw;
      left: -3vw; } }

.planList_img {
  width: 260px;
  flex-shrink: 0;
  margin: 0 60px 0 0; }
  @media (max-width: 750px) {
    .planList_img {
      width: 40vw;
      margin: auto; } }

.planList_tit {
  font-size: 4.8rem;
  line-height: 1.3; }
  @media (max-width: 750px) {
    .planList_tit {
      text-align: center;
      font-size: 8vw; } }

.planList_costList {
  display: flex;
  align-items: center; }
  .planList_costList li {
    display: flex;
    align-items: center; }
    .planList_costList li:not(:last-child) {
      margin: 0 40px 0 0; }
      @media (max-width: 750px) {
        .planList_costList li:not(:last-child) {
          margin: 0 5vw 0 0; } }

.planList_costList_tit {
  background: #23202d;
  color: #fff;
  width: 5em;
  border-radius: 7px;
  text-align: center;
  padding: 0;
  line-height: 1.4;
  margin: 0 10px 0 0; }
  @media (max-width: 750px) {
    .planList_costList_tit {
      margin: 0 2vw 0 0; } }

.planList_costList_cost {
  color: #ea5f28; }
  .planList_costList_cost span {
    font-size: 2.4rem;
    vertical-align: baseline; }
    @media (max-width: 750px) {
      .planList_costList_cost span {
        font-size: 4vw; } }

/*---------------------------------------------
deadline
---------------------------------------------*/
.rental_sec-deadline {
  background: #9cdeeb;
  padding: 0 0 350px;
  position: relative; }
  @media (max-width: 750px) {
    .rental_sec-deadline {
      padding: 10vw 0 30vw; } }

@media (max-width: 750px) {
  .deadline_table_wrap {
    overflow: auto; } }

.deadline_table {
  table-layout: fixed;
  width: 100%;
  text-align: center; }
  @media (max-width: 750px) {
    .deadline_table {
      table-layout: auto; } }
  .deadline_table th, .deadline_table td {
    border: solid 4px #75d1e2;
    padding: 15px;
    vertical-align: middle; }
    @media (max-width: 750px) {
      .deadline_table th, .deadline_table td {
        white-space: nowrap;
        padding: 2.6vw; } }
  .deadline_table th {
    background: #d8f2f7; }
    .deadline_table th:nth-child(1) {
      width: 37%; }
  .deadline_table td {
    background: #fff; }

/*---------------------------------------------
contact
---------------------------------------------*/
@media (max-width: 750px) {
  .rental_sec-contact {
    padding: 5vw 0 10vw; } }

/*---------------------------------------------
Slider
---------------------------------------------*/
.rentalListMain {
  position: relative;
  padding: 60px 0 20px;
  margin: 0 0 100px; 
  display: flex;
  align-items: center;
  justify-content: center;
}

.rentalListDiv {
  display: flex; 
  flex-direction: row; 
  align-items: center;
  margin-bottom: 50px;
}

.rentalList {
  display: flex;
  align-items: center;
  text-align: center;
  overflow-x: hidden;
}

.controls_rental {
  text-align: center;
}

.controls_rental li:hover {
  background-color: #fff;
}

.controls_rental li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 70px;
  padding-right: 5px;
  cursor: pointer;
  transition: background 0.3s;
  background-color: lightgray;
  border-radius: 50%;
}

.controls_rental .prev {
  margin-right: 10px;
}

.controls_rental .next {
  margin-left: 10px;
}

@media screen and (min-width: 751px) {
  .rentalList {
    max-width: 772px;
  }

  .rentalList li:not(:last-child){
    margin-right: 30px;
  }

  .rentalList li {
    width: 175px;
  }

  .rentalList_img {
    margin: 0 0 10px; 
    max-width: 170px !important;
  }

}

@media screen and (min-width: 620px)  and (max-width: 750px) {
  .rentalList {
    max-width: 492px;
  }

  .rentalList li:not(:last-child){
    margin-right: 20px;
  }

  .rentalList li {
    width: 150px;
  }

  .rentalList_img {
    margin: 0 0 10px; 
    max-width: 150px !important;
  }
}

@media screen and (min-width: 620px) and (max-width: 660px) {
  .controls_rental li {
    height: 55px !important;
    width: 55px !important;
  }

  .controls_rental li > img {
    height: 30px !important;
  }
}

@media screen and (min-width: 550px) and (max-width: 619px) {
  .rentalList {
    max-width: 411px;
  }

  .rentalList li:not(:last-child){
    margin-right: 15px;
  }

  .rentalList li {
    width: 200px;
  }

  .rentalList_img {
    margin: 0 0 10px; 
    max-width: 197px !important;
  }
}

@media screen and (min-width: 550px) and (max-width: 580px) {
  .controls_rental li {
    height: 55px !important;
    width: 55px !important;
  }

  .controls_rental li > img {
    height: 30px !important;
  }
}

@media screen and (max-width: 549px) {
  .rentalList {
    max-width: 202px;
  }

  .rentalList li:not(:last-child){
    margin-right: 20px;
  }

  .rentalList li {
    width: 200px;
  }

  .rentalList_img {
    margin: 0 0 10px; 
    max-width: 200px !important;
  }
}