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

　top

**********************************************************************************************/
/*---------------------------------------------
common
---------------------------------------------*/
.wrap-top {
  background: #ffe880; }

.main-top {
  padding: 0; }
  @media (max-width: 750px) {
    .main-top {
      padding: 0 0 10vw; } }

.top_sec {
  max-width: 1280px;
  margin: auto;
  position: relative; }

.top_sec .inner {
  max-width: 1210px;
  z-index: 10; 
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.top_sec_titArea {
  margin: 0 0 30px; }
  @media (max-width: 750px) {
    .top_sec_titArea {
      margin: 0 0 5vw; } }

.top_sec_tit_icon {
  margin: 0 auto 10px;
  width: 52px; }
  @media (max-width: 750px) {
    .top_sec_tit_icon {
      width: 10vw;
      margin: 0 auto 3vw; } }

.top_sec_tit {
  font-size: 4.8rem;
  text-align: center;
  font-family: 'shirokuma'; }
  @media (max-width: 750px) {
    .top_sec_tit {
      font-size: 9vw;
      line-height: 1.2; } }

.top_sec_txt {
  text-align: center;
  margin: 0 0 30px;
  line-height: 2; }
  @media (max-width: 750px) {
    .top_sec_txt {
      margin: 0 0 8vw; } }

.top_ilust {
  position: absolute;
  z-index: -1; }

/*---------------------------------------------
header
---------------------------------------------*/
.top_kv {
  width: 100%; }
  .top_kv img {
    width: 100%; }

.top_header {
  background: url("../img/top/head_bg.jpg") no-repeat;
  background-size: 100% 50%;
  background-color: #fff;
  padding: 20px 0; }
  @media (max-width: 750px) {
    .top_header {
      background: url("../img/top/head_bg_sp.png") repeat-y;
      background-size: 100%;
      padding: 6vw 0; } }
  .top_header .head_inner {
    max-width: 1120px;
    margin: auto; }
    @media (max-width: 750px) {
      .top_header .head_inner {
        max-width: 90vw; } }
  .top_header .headNav_list {
    display: flex;
    justify-content: space-between;
    font-size: 2.4rem;
    font-weight: 700; }
    @media (max-width: 750px) {
      .top_header .headNav_list {
        font-size: 4vw;
        display: block;
        width: 70vw;
        margin: auto; } }
    @media (max-width: 750px) {
      .top_header .headNav_list li:not(:last-child) {
        margin: 0 0 3vw; } }
    .top_header .headNav_list a {
      background: url("../img/common/h_btn_bg.png") no-repeat;
      background-size: 100% 100%;
      width: 320px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: .4s; }
      @media (max-width: 750px) {
        .top_header .headNav_list a {
          width: 100%;
          height: 20vw; } }
      @media (min-width: 751px) {
        .top_header .headNav_list a:hover {
          background: url("../img/common/h_btn_bg_hover.png") no-repeat;
          background-size: 100% 100%;
          opacity: 1;
          color: #fff; } }

/*---------------------------------------------
order
---------------------------------------------*/
.top_sec-order {
  background: #fff;
  padding: 40px 0 270px;
  position: relative; }
  @media (max-width: 750px) {
    .top_sec-order {
      padding: 8vw 0 20vw; } }
  .top_sec-order .top_ilust01 {
    top: 40px;
    left: -220px;
    width: 410px; }
    @media (max-width: 750px) {
      .top_sec-order .top_ilust01 {
        width: 41vw;
        top: 12vw;
        left: -20vw; } }
  .top_sec-order .top_ilust02 {
    top: -50px;
    right: -320px;
    width: 676px; }
    @media (max-width: 750px) {
      .top_sec-order .top_ilust02 {
        width: 68vw;
        top: auto;
        bottom: 8vw;
        right: -10vw; } }

.order_btnList {
  display: flex;
  justify-content: center; }
  @media (max-width: 750px) {
    .order_btnList {
      display: block; } }
  .order_btnList li {
    width: 440px; }
    @media (max-width: 750px) {
      .order_btnList li {
        width: 70vw;
        margin: auto; } }
    .order_btnList li:not(:last-child) {
      margin: 0 35px 0 0; }
      @media (max-width: 750px) {
        .order_btnList li:not(:last-child) {
          margin: 0 auto 5vw; } }
  .order_btnList a {
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 320px;
    text-align: center;
    font-size: 2.4rem;
    color: #fff;
    border: 4px solid;
    transition: .4s; }
    @media (max-width: 750px) {
      .order_btnList a {
        border-radius: 10px;
        height: 50vw;
        font-size: 4vw; } }
    .order_btnList a.-order {
      background: #ffb1a1;
      border-color: #ffb1a1; }
      .order_btnList a.-order .order_btnList_img {
        background: url("../img/top/order_img01.png") no-repeat;
        background-size: contain; }
    .order_btnList a.-rental {
      background: #61cade;
      border-color: #61cade; }
      .order_btnList a.-rental .order_btnList_img {
        background: url("../img/top/order_img02.png") no-repeat;
        background-size: contain; }
    @media (min-width: 751px) {
      .order_btnList a:hover {
        opacity: 1;
        border-color: #ffd100;
        background: #fff;
        color: #333; }
        .order_btnList a:hover .order_btnList_img {
          background: none; }
          .order_btnList a:hover .order_btnList_img img {
            opacity: 1; } }

.order_btnList_img {
  width: 180px;
  margin: 0 0 10px;
  transition: .4s; }
  @media (max-width: 750px) {
    .order_btnList_img {
      width: 25vw;
      margin: 0 0 2vw; } }
  .order_btnList_img img {
    opacity: 0;
    transition: .4s; }

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 300px;
  z-index: 1; }
  @media (max-width: 750px) {
    .wave {
      height: 18vw; } }

/*---------------------------------------------
taste
---------------------------------------------*/
.top_sec-taste {
  background: url("../img/top/sec_bg01.png") no-repeat;
  background-size: contain;
  padding: 130px 0 120px;
  z-index: 5; }
  @media (max-width: 750px) {
    .top_sec-taste {
      padding: 10vw 0;
      background-size: auto 100%;
      background-position: center center; } }

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

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

.controls {
  text-align: center;
}

.controls li:hover {
  background-color: #ffe880;
}

.controls li {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 15px;
  cursor: pointer;
  transition: background 0.3s;
  background-color: lightgray;
  border-radius: 5px;
}

.controls .prev, .controls_design .prev {
  margin-right: 10px;
}

.controls .next, .controls_design .next {
  margin-left: 10px;
}

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

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

  .tasteList_img {
    margin: 0 0 10px; 
  }

  .tasteList_img > img{
    max-width: 170px !important;
  }
  
}

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

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

  .tasteList li {
    width: 150px; 
    font-size: 1.5rem;
  }

  .tasteList_img {
    margin: 0 0 10px; 
  }

  .tasteList_img > img{
    max-width: 150px !important;
  }

  .top_sec .inner {
    max-width: 650px; 
  } 
  
}
  
@media screen and (min-width: 550px) and (max-width: 619px) {
  .tasteList {
    max-width: 463px;
  }

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

  .tasteList li {
    width: 200px; 
    font-size: 1.5rem;
  }

  .tasteList_img {
    margin: 0 0 10px; 
  }

  .tasteList_img > img{
    max-width: 200px !important;
  }

  .top_sec .inner {
    max-width: 450px; 
  } 

  .controls .prev > img, .controls .next > img {
    width: 150px !important;
  }

}

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

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

  .tasteList li {
    width: 200px; 
    font-size: 1.5rem;
  }

  .tasteList_img {
    margin: 0 0 10px; 
  }

  .tasteList_img > img{
    max-width: 200px !important;
  }

  .top_sec .inner {
    max-width: 300px; 
  } 

}

/*---------------------------------------------
design
---------------------------------------------*/
.top_sec-design {
  background: url("../img/top/sec_bg02.png") no-repeat;
  background-size: contain;
  padding: 190px 0 170px;
  z-index: 3;
  margin: -120px auto 0; 
}

.top_sec-design .top_sec_tit_icon {
  width: 92px; 
}

.top_sec-design .top_ilust01 {
  top: -370px;
  left: -340px;
  width: 558px; 
}

.top_sec-design .top_ilust02 {
  top: -230px;
  right: -540px;
  width: 740px; 
}

@media (max-width: 750px) {
  .top_sec-design {
    padding: 20vw 0 15vw;
    background-size: auto 100%;
    background-position: center center;
    margin: -12vw auto 0; 
  } 

  .top_sec-design .top_sec_tit_icon {
    width: 13vw;
  } 

  .top_sec-design .top_ilust01 {
    width: 56vw;
    top: -40vw;
    left: -30vw; 
  }

  .top_sec-design .top_ilust02 {
    width: 74vw;
    right: -50vw;
    top: auto;
    bottom: 50vw; 
  }
}

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

.controls_design {
  text-align: center;
}

.controls_design li:hover {
  background-color: #ffe880;
}

.controls_design li {
  display: flex;
  align-items: center;
  height: 70px;
  padding: 0 15px;
  cursor: pointer;
  transition: background 0.3s;
  background-color: lightgray;
  border-radius: 5px;
}

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

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

  .designList li {
    width: 175px;
  }

  .designList_img {
    margin: 0 0 10px; 
  }

  .designList_img > img {
    max-width: 170px !important;
  }

}

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

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

  .designList li {
    width: 150px;
    font-size: 1.5rem;
  }

  .designList_img {
    margin: 0 0 10px; 
  }

  .designList_img > img {
    max-width: 150px !important;
  }

}

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

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

  .designList li {
    width: 200px;
    font-size: 1.5rem;
  }

  .designList_img {
    margin: 0 0 10px; 
  }

  .designList_img > img {
    max-width: 197px !important;
  }

  .controls_design .prev > img, .controls_design .next > img {
    width: 450px !important;
  }

}

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

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

  .designList li {
    width: 200px;
    font-size: 1.5rem;
  }

  .designList_img {
    margin: 0 0 10px; 
  }

  .designList_img > img {
    max-width: 200px !important;
  }

}

/*---------------------------------------------
design
---------------------------------------------*/
.top_sec-rental {
  background: url("../img/top/sec_bg03.png") no-repeat;
  background-size: contain;
  padding: 230px 0 140px;
  margin: -140px auto 0; }
  @media (max-width: 750px) {
    .top_sec-rental {
      padding: 38vw 0 13vw;
      background-size: auto 100%;
      background-position: center center;
      margin: -27vw auto 0; } }
  .top_sec-rental .top_sec_tit_icon {
    width: 70px; }
    @media (max-width: 750px) {
      .top_sec-rental .top_sec_tit_icon {
        width: 12vw; } }
  .top_sec-rental .top_ilust01 {
    top: -340px;
    left: -230px;
    width: 690px; }
    @media (max-width: 750px) {
      .top_sec-rental .top_ilust01 {
        width: 69vw;
        top: -20vw;
        left: -50vw; } }
  .top_sec-rental .top_ilust02 {
    top: -10px;
    right: -420px;
    width: 534px; }
    @media (max-width: 750px) {
      .top_sec-rental .top_ilust02 {
        width: 53vw;
        top: auto;
        right: -40vw;
        bottom: -5vw; } }

.rental_flex {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 60px; }
  @media (max-width: 750px) {
    .rental_flex {
      display: block;
      margin: 0 0 8vw; } }

.rental_flex_img {
  width: 440px;
  margin: 0 30px 0 0;
  flex-shrink: 0; }
  @media (max-width: 750px) {
    .rental_flex_img {
      width: 60vw;
      margin: 0 auto 5vw; } }

.rental_flex_txt {
  line-height: 2;
  width: 440px; }
  @media (max-width: 750px) {
    .rental_flex_txt {
      width: 100%; } }

/* Slider controls css */

.tns-nav {
  text-align: center;
  margin: 10px 0;
}

.tns-nav > .tns-nav-active {
  background: #999 !important;
}

.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0 5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}