@charset "UTF-8";
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.15);
  }
}
/* ------------------------------------------------
SmartPhone
------------------------------------------------ */
/******* common ********/
.sec:not(:last-child){
  margin: 0 auto calc(80 *(100vw / 390));
}

/******* Main Visual ********/
.main-sec{
  margin: 0 auto calc(50 *(100vw / 390));
}

.main-sec .swiper-slide-active .slide-img,
.main-sec .swiper-slide-duplicate-active .slide-img,
.main-sec .swiper-slide-prev .slide-img{
  animation: zoomUp 10s linear 0s 1 normal both;  
}

/******* NEW ARRIVALS ********/
.sec.arrival-sec{ 
  margin: 0 auto calc(80 *(100vw / 390) + 4rem);
}
.arrival-sec ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.arrival-sec ul li{
  width: calc(190 *(100vw / 390));
}
.arrival-sec ul li:nth-child(n+3){
  margin-top: calc(10 *(100vw / 390));
}
.arrival-sec ul li:nth-child(even){
  transform: translateY(4rem);
}

/******* DESIGN ********/
.design-sec{
  padding: 0 calc(20 *(100vw / 390));
}
.design-sec ul li{
  position: relative;
  overflow: hidden;
}
.design-sec ul li:nth-child(n+2){
  margin-top: calc(20 *(100vw / 390));
}
.design-sec ul li .design-ttl{
  position: absolute;
  left: 0;
  bottom: 0;
  height: calc(48 *(100vw / 390));
  font-size: calc(24 *(100vw / 390));
  font-weight: 300;
  letter-spacing: 0.04em;
  color: #533C2B;
  background: rgb(242 238 230 / 70%);
  padding: calc(14 *(100vw / 390))  calc(12 *(100vw / 390));
  box-sizing: border-box;
}
.design-sec ul li .design-ttl span{
  font-size: calc(11 *(100vw / 390));
  font-weight: 400;
  letter-spacing: 0.2em;
  color: #333;
  display: inline-block;
  margin-left: calc(10 *(100vw / 390));
}
.design-sec ul li button{
  position: absolute;
  right: 0;
  bottom: 0;
  height: calc(48 *(100vw / 390));
  background: #fff;
  border: calc(1 *(100vw / 390)) solid #F2EEE6;
  padding: 0  calc(20 *(100vw / 390));
  box-sizing: border-box;
}
.design-sec ul li button p{
  font-size: calc(12 *(100vw / 390));
  letter-spacing: 0.04em;
  color: #333;
}


/* ------------------------------------------------
Tablet
------------------------------------------------ */
@media screen and (min-width:768px) and ( max-width:1024px) {
  html {
    font-size: calc(10 *(100vw /1400));
  }
}


/* ------------------------------------------------
PC
------------------------------------------------ */
@media screen and (min-width:768px) {
  /******* common ********/
  .sec:not(:last-child){
    margin: 0 auto 10rem;
  }
  #nav ul li.reserve-li{display: block;}

  /******* Main Visual ********/
  .main-sec{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 0 auto 10rem;
  }
  .main-sec .main-left .swiper-container{
    width: calc(720 *(100vw / 1366));
    margin: initial;
  }
  .main-sec .main-right .swiper-container{
    width: calc(360 *(100vw / 1366));
    margin: initial;
  }
  .main-sec .main-right{
    position: relative;
  }
  .main-sec .main-right > img{
    position: absolute;
    top: calc(-80 *(100vw / 1366));
    left: calc(-166 *(100vw / 1366));
    z-index: 2;
    width: calc(206 *(100vw / 1366));
  }

  /******* NEW ARRIVALS ********/
  .sec.arrival-sec{ 
    margin: 0 auto 14rem;
  }
  .arrival-sec ul {
    width: 102rem;
    margin: auto;
  }
  .arrival-sec ul li{
    width: 24rem;
  }
  .arrival-sec ul li:nth-child(n+3){
    margin-top: 0;
  }
  .arrival-sec ul li:nth-child(even){
    transform: translateY(4rem);
  }

  /******* DESIGN ********/
  .design-sec{
    padding: 0;
  }
  .design-sec ul{
    display: flex;
    justify-content: space-between;
    width: 102rem;
    margin: auto;
  }
  .design-sec ul li{
    width: 50rem;
  }
  .design-sec ul li:nth-child(n+2){
    margin-top: 0;
  }
  .design-sec ul li .design-ttl{
    height: 6rem;
    font-size: 3rem;
    padding: 1.8rem  1.6rem;
  }
  .design-sec ul li .design-ttl span{
    font-size: 1.2rem;
    margin-left: 1rem;
  }
  .design-sec ul li button{
    height: 6rem;
    border: 0.1rem solid #F2EEE6;
    padding: 0  2rem;
  }
  .design-sec ul li button p{
    font-size: 1.2rem;
  }

  /******* INSTA ********/
  .sec.insta-sec{
    margin: 0 auto 7rem;
  }
  .insta-sec .insta-img-blk{
    width: 80rem;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }
  .insta-sec .insta-img-blk > a{
    width: 40rem;
  }
  .insta-sec .insta-img-blk .pc_only{
    width: 40rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .insta-sec .insta-img-blk .pc_only > a{
    width: 20rem;
  }

}