@charset "UTF-8";

/*default*/
.main-section-wrapper {
  margin: 0 auto;
}

.global-wrapper {
  height: auto;
}

ul, ol, dd {
  margin: 0;
  padding: 0;
  list-style: none;
}

.copyrights {
  margin-top: 1em;
}



/*default-end*/
/*ここから入力*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.global-wrapper {
  min-width: fit-content;
}



/* title */

.body-title-box {
  /* min-width: 1170px; */
  margin: 0;
  position:relative;
}


.body-title-box h1 {
  text-align: center;
  margin:0;
}

/* common */

.contents-box{
 margin:0 auto;
 width:88%;
 max-width: 1200px;
}

.animation-path{
  fill:none;
  stroke:#fff;
  stroke-width: 36;
}
  #clipMask {
  width: 360px;
  height: 68px;
}

.none{
  display: none;
}

/* lead-text */

.lead-box p{
  text-align: center;
  font-size:16px;
  color:#7f7f7f;
  font-family:'Noto Sans JP';
}



/* button */

.button-box{
  display: flex;
  justify-content: space-around;
  padding:0 160px 70px ;
  align-items: flex-end;
}

.button-box a{
  display: block;
  z-index:2;
  position:relative;
}


/* contents */

.pickup-container{
  margin:180px auto 160px auto;
  max-width:1200px;
}

#shop-keyuca{
  background-color:#e8f5f3;
}


#shop-hands{
  background-color:#f6fafb;
}


.item-box{
  margin:0 auto;
  width:88%;
  max-width: 1200px;
  clear:both;
}

span{
  display:inline-block;
}

#keyuca,#hands{
  text-align: center;
}

/* pickup */

.pickup{
  align-items:center;
}

.right{
  justify-content: flex-end;
}

.left{
  justify-content: flex-start;
  clear:both;
}


.pickup-text-box{
  box-sizing: border-box;
  padding:28px 40px;
  position:relative;
}


.left-item-container{
  background-color: #fff;
  position:relative;
  width:68%;
  border-radius:56% 44% 62% 38% / 45% 47% 53% 55%;
  margin: 0 0 200px 160px;
  width:45%;
}

.right-item-container{
  background-color: #fff;
  position:relative;
  width:68%;
  border-radius:34% 66% 45% 55% / 56% 52% 48% 44%  ;
  float: right;
  margin: 0 100px 200px 0;
  width: 45%;
}

.pickup .name{
  line-height:1.6;
  font-size: 18px;
  font-weight:600;
  color:#55b3b3;
}

.pickup .price {
  font-size:16px;
  margin-top:-14px;
  color:#828282;
  font-weight:600;
}

.pickup .text{
  font-size: 14px;
  line-height: 1.7;
  color:#828282;
}


.item-container{
  display: flex;
  align-items: stretch;
  justify-content: space-evenly;
  max-width:1100px;
  margin:0 auto;
  flex-wrap: wrap;
}

.item-container .item img{ 
  border-radius:16px;
}

.item-container li {
  width: 30%;
  padding-top:64px;
  margin-bottom:16px;
}

.item-text-box{
  box-sizing: border-box;
  padding:8px;
  position:relative;
  margin-top:16px;
}


.item{
  color:#7f7f7f;
}


.item .name{
  line-height:1.6;
  font-size: 18px;
  font-weight:600;
  color:#55b3b3;
}

.item .price {
  font-size:16px;
  margin-top:-14px;
  color:#828282;  
  font-weight:600;
}

.item .text{
  font-size: 14px;
  line-height: 1.7;
  color:#828282;
}

/* floor */

.floor-box{
  background-color: #FFF;
  border-radius: 20px;
  text-align: center;
  padding:100px 0;
}

.floor-box img{
  margin: 0 auto;
}

/* footer */

.footer-note{
  margin:0 auto;
  width:80%;
  padding-bottom:200px;
}

.footer-wrapper{
  margin-top: -90px;
}


/* animation */


/* .none{
  opacity: 0;
} */

.fadeUp {
  animation-name: fadeUpAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity: 0;
  animation-delay: 0.5s;
}
@keyframes fadeUpAnime{
from {
  opacity: 0;
  transform: translateY(100px);
}
to {
  opacity: 1;
  transform: translateY(0);
}
}


/* 売り切れが出たら追加 */

/* .soldout-img{
  opacity:0.5;
} */



@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }

  .breadcrumb,
  .footer-wrapper {
    min-width: 1170px;
  }

  /* title */

  .body-title-box h1 img {
    margin:auto;
    width:72%;
    max-width: 1000px;
   }


  /* lead */

  .lead-box p{
    padding: 24px 0 72px 0;
  }

   /* button */

   .button-box a{
    text-align: center;
   }
 
   .button-box a img{
     width:70%;
    }


    /* pickup */

  .pickup-container .right-item-container .pickup-img .item-img01 {
    position:absolute; 
    width:90%;
    left:-400px;
    top:-100px;
   }

   .pickup-container .right-item-container .pickup-img .item-img02 {
    position:absolute; 
    width:90%;
    left:-430px;
    top:-100px;
   }

   .pickup-container .left-item-container .pickup-img .item-img01{
    position:absolute; 
    width:90%;
    top:-110px;
    right:-410px;
   }

   .pickup-container .left-item-container .pickup-img .item-img02{
    position:absolute; 
    width:90%;
    top:-130px;
    right:-400px;
   }


   /* background */

   #shop-keyuca,#shop-hands{
    margin-top:-20px;
   }

   #shop-hands:before{
    display: block;
    content: "";
    width: 100%;
    height: 120px;
    background-image:url(../img/hands-bg-top.jpg) ;
    background-position: center;
  }
  
  #shop-hands:after{
    display: block;
    content: "";
    width: 100%;
    height: 60px;
    background-image:url(../img/hands-bg-bottom.jpg) ;
    background-position: center;
  }

  #shop-keyuca:before{
    display: block;
    content: "";
    width: 100%;
    height: 120px;
    background-image:url(../img/keyuca-bg-top.jpg) ;
    background-position: center;
  }
  
  #shop-keyuca:after{
    display: block;
    content: "";
    width: 100%;
    height: 110px;
    background-image:url(../img/keyuca-bg-bottom.jpg) ;
    background-position: center;
  }


   /* illust */

   .right-item-container .illust01{
    position:absolute;
    right: 36px;
    bottom: -140px;
  }

  .left-item-container .illust01{
    position:absolute;
    left: -80px;
    bottom: -120px;
  }

  .item-container li:nth-child(6){
    position:relative;
  }

  .item-container li:nth-child(6)  .illust02{
    position:absolute;
    bottom:-160px;
    right:20px;
  }

  #keyuca {
    position:relative;
    width:250px;
    margin:-80px auto 0 auto;
    padding-top:160px;
   }

   #keyuca .illust01{
    position:absolute;
    bottom:-100px;
    left:-70px;
   }

   #hands {
    position:relative;
    width:300px;
    margin:-60px auto 0 auto;
    padding-top:160px;
   }

   #hands .illust01{
    position:absolute;
    bottom:-100px;
    right:-70px;
   }


   /* animation */

   .svgall{
   width:43%;
   position:absolute;
   top:145px;
   left:0;
   right:0;
   margin:auto;
   max-width: 560px;
   }

}

@media screen and (min-width: 1300px) {

  .svgall{
    width:45%;
    position:absolute;
    top:160px;
    left:0;
    right:0;
    margin:auto;
    max-width: 620px;
    }

}

@media screen and (max-width: 767px) {
  .global-wrapper {
    min-width: 100%;
  }

  .body-title-box {
    width: 100%;
    padding:0;
  }

  .body-title-box  h1{
    margin:0;
  }

  .body-title-box  h1 img{
    width:100%;
  }


  .contents-box{
   width:96%;
  }


  /* lead */

  .lead-wrapper{
    padding:0 48px 4vh 48px;
  }

  .lead-wrapper .lead-box {
    padding-bottom:36px;
  }

  .lead-box{
    display:flex;
    justify-content: center;
    align-items: flex-start;
  }

  /* button */

  .button-box img{
    width:70%;
  }

  .button-box a{
    text-align: center;
  }

  .button-box{
    padding:24px 0 ;
    justify-content: center;
  }

  hr{
    background-color:#55b3b3;
    border:none;
    height:1px;
   }


   .item-container{
    justify-content: space-between;
  }
  .item-container li {
    width: 49%;
  }

  .item{
    width:50%;
  }

/* pickup */

.pickup{
  display:block;
  align-items:center;
  position:relative;
}


.left-item-container,.right-item-container{
  width:90%;
  margin:0 auto;
}

.pickup-text-box .text{
  width:100%;
}

.pickup-container{
  margin:40px 0;
}

  .right-item-container{
    float: none;
  }

   .pickup-text-box{
    padding-top:48px;
  }
  
  .pickup-container  .pickup .sp-img01{
   margin-bottom: -86px;
   z-index: 1;
   position: relative;
  }
  
   .pickup-container  .pickup .sp-img02{
     margin-bottom: -82px;
     z-index: 1;
     position: relative;
   }
  
   .pickup-container  .pickup .sp-img03{
     margin-bottom: -80px;
     z-index: 1;
     position: relative;
   }
  
   .pickup-container  .pickup .sp-img04{
     margin-bottom: -78px;
     z-index: 1;
     position: relative;
   }

   /* background */

   #shop-hands:before{
    display: block;
    content: "";
    width: 100%;
    height: 60px;
    background-image:url(../img/hands-bg-top_sp.jpg) ;
    background-position: center;
  }
  
  #shop-hands:after{
    display: block;
    content: "";
    width: 100%;
    height: 42px;
    background-image:url(../img/hands-bg-bottom_sp.jpg) ;
    background-position: center;
  }

  #shop-keyuca:before{
    display: block;
    content: "";
    width: 100%;
    height: 50px;
    background-image:url(../img/keyuca-bg-top_sp.jpg) ;
    background-position: center;
  }
  
  #shop-keyuca:after{
    display: block;
    content: "";
    width: 100%;
    height: 42px;
    background-image:url(../img/keyuca-bg-bottom_sp.jpg) ;
    background-position: center;
  }

/* illust */

  #keyuca, #hands {
    position:relative;
    width:250px;
    margin:-80px auto 0 auto;
    padding-top:160px;
   }

   #keyuca .illust01{
    position:absolute;
    bottom:-70px;
    left:-60px;
    width:24%;
   }

   #hands .illust01{
    position:absolute;
    bottom:-70px;
    right:-80px;
    width:30%;
   }

   .item-container li:nth-child(6)  .illust02{
    position:absolute;
    bottom:-160px;
    width:30%;
    right:0;
  }

  .pickup .illust01{
    position:absolute;
    width:10%;
    right:40px;
    bottom:-30px;
  }
  
  .pickup .illust02{
    position:absolute;
    width:10%;
    left:40px;
    bottom:-80px;
  }


/* footer */

  .footer-note li{
    font-size: 14px;
  }

  .footer-note{
    margin:0 auto;
    width:90%;
    padding-bottom:160px;
  }


  /* animation */
  .svgall{
    width: 100%;
    position: absolute;
    top: 36%;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 650px;
    }

}

@media screen and (max-width: 600px) {
  .body-title-box {
    position: relative;
    background-color: inherit;
    background-size: 130%;
    /* padding-top:4vh; */
    padding:0;
  }
  .body-title-box h1 {
    margin-bottom: -4vh;
    margin:0;
  }

  .body-title-box h1 img{
    width:100%;
  }


   .lead-box p{
     font-size:14px;
   }


   .item .name{
     font-size:16px;
   }

   .item .text{
    font-size:14px;
  }


.item-container li {
  width: 49%;
 }


 .pickup{
  display:block;
  align-items:center;
}


#keyuca img, #hands img{
  width:60%;
}

.item-text-box{
  padding:4px;

}

.button-box{
  display: block;
  text-align:center;
  padding:0;
}

.button-box img{
  width:50%;
  margin:24px 0;
}


 .pickup-text-box{
  padding-top:48px;
}


.pickup-container  .pickup .sp-img01{
 margin-bottom: -72px;
 z-index: 1;
 position: relative;
}

 .pickup-container  .pickup .sp-img02{
   margin-bottom: -70px;
   z-index: 1;
   position: relative;
 }

 .pickup-container  .pickup .sp-img03{
   margin-bottom: -64px;
   z-index: 1;
   position: relative;
 }

 .pickup-container  .pickup .sp-img04{
   margin-bottom: -64px;
   z-index: 1;
   position: relative;
 }

 #keyuca .illust01{
  position:absolute;
  bottom:-70px;
  left:-20px;
  width:24%;
 }

 .svgall{
  width: 95%;
  position: absolute;
  top: 37%;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 650px;
  }


}

@media screen and (max-width: 450px) {

  .body-title-box{
    margin:0;
    padding:0;
  }

  .body-title-box h1{
    width:100%;
    margin:0;
  }
  .body-title-box h1 img{
    width:100%;
    padding-right:0;
  }

  .lead-wrapper .lead-box{
    padding:3vh 0;
    width:90%;
  }

  .lead-wrapper{
    padding:0;
  }

  /* button */

  .button-box{
    padding:2vh 0;
  }
  
  .button-box a{
    text-align: center;
  }

  hr{
    width:90%;
    margin:2vh auto;
   }

   /* item */

  .item-container li{
    padding-top:4vh;
  }

  #keyuca{
    padding:2vh 0;
  }
  #keyuca img{
    width:70%;
  }

  #hands img{
    width:50%;
  }

  .item-box{
    margin:0 auto;
    width:92%;
    max-width: 1200px;
  }

  .left-item-container,.right-item-container{
    width:100%;
    margin:0 auto;
  }

  .pickup-container{
    width:92%;
    margin:0 auto;
    padding-bottom:60px;
  }
   .pickup-text-box{
     padding-top:48px;
   }


   .pickup-container  .pickup .sp-img01{
    margin-bottom: -60px;
    z-index: 1;
    position: relative;
   }

    .pickup-container  .pickup .sp-img02{
      margin-bottom: -60px;
      z-index: 1;
      position: relative;
    }

    .pickup-container  .pickup .sp-img03{
      margin-bottom: -64px;
      z-index: 1;
      position: relative;
    }

    .pickup-container  .pickup .sp-img04{
      margin-bottom: -64px;
      z-index: 1;
      position: relative;
    }

/* illust */

    #keyuca , #hands{
      position:relative;
      width:250px;
      margin:-80px auto 0 auto;
      padding-top:160px;
     }
  
     #keyuca .illust01{
      position:absolute;
      bottom:-60px;
      left:-30px;
      width:24%;
     }
  
     #hands .illust01{
      position:absolute;
      bottom:-72px;
      right:-30px;
      width:30%;
     }

     .pickup .illust01{
      position:absolute;
      width:20%;
      right:20px;
      bottom:-40px;
    }

    .pickup .illust02{
      position:absolute;
      width: 15%;
      left: 0px;
      bottom: -80px;
    }

    .item-container li:nth-child(6)  .illust02{
      position:absolute;
      bottom:-240px;
      width:40%;
      right:10px;
    }

    /* floor */

    .floor-box img{
      width:90%;
      margin: 0 auto;
    }

    .floor-box{
      padding:60px 0;
    }


}


@media screen and (min-width: 690px) and (max-width: 767px){

  .svgall{
    max-width:720px ;
    }

}