@charset "utf-8";
/* ===========================================
 * pc
 * ======================================== */

 /* common */
/* ======================================== */
:root{
    --color-bg:#FCFAF4;
    --color-gold:#A8955D;
    --font-mont:"Montserrat", sans-serif;
    --font-kaiseiO:"Kaisei Opti", serif;
}

#primary-content .montserrat{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.2px;
}

#primary-content .biz-udp{
  font-family: "BIZ UDPMincho", serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: -0.1px;
}

#primary-content #collection{
  position: relative;
  z-index: 3
}

#primary-content #collection #kv{
    display: flex;
    position: relative;
    width: 100%;
    justify-content: center;  
}

#primary-content #collection #kv figure{
    position: relative;
    display: flex;
    justify-content: center;
}

#primary-content #collection #kv .inner{
    width: 1240px;
    min-height: 350px;
    position: absolute;
    margin-top: 142px;
    display:flex;
    align-items: center;
    z-index: 5
}

#primary-content #collection .cap-set{
  position: fixed;
  display: flex;
  align-items: center;
  width: 1240px;
  justify-content: space-between;
  transition: 0.8s;
  opacity: 1
}

@media(max-width:1239px){
  #primary-content #collection .cap-set{
    width: 100vw;
    padding: 0 20px;
    left: 0
  }
}

#primary-content #collection .cap-set.hidden{
  opacity: 0;
  filter: blur(20px);
}

#primary-content #collection .cap-set h1{
    width: 286px;
    margin-top: -35px;
    margin-left: 22px;
}

@media(max-width:1239px){
  #primary-content #collection .cap-set h1{
      width: 22vw;
      margin-top: -3.5vw;
      margin-left: 1vw;
  }
}

#primary-content #collection .cap-set h1 img{
  width: 100%;
}

#primary-content #collection .cap-set div{
  font-size: 14px;
  line-height: 36px;
  color: #fff;
  font-weight: 400;
  letter-spacing: 0.56px;
  width: 304px;
  margin-right: -18px;
    margin-top: -4px;
}

@media(max-width:1239px){
  #primary-content #collection .cap-set div{
    font-size: 1vw;
    line-height: 3vw;
    width: 22vw;
    margin-right: 0;
      margin-top: -0.4vw;
  }
}

#primary-content #collection .cap-set div p+p{
  margin-top: 36px
}

#primary-content #collection{
    margin: 0px auto 0;
    position: relative;
}

#primary-content #collection ul{
  display: flex;
  flex-direction: column;
}

#primary-content #collection ul li{
  display: flex;
  justify-content: center;
  align-items: center;
  /*overflow: hidden;*/
  position: relative;
}

#primary-content #collection ul li.one:before{
  display: block;
  content: "";
  position: absolute;
  width:70vw;
  left: -50vw;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(131deg, rgb(255 197 207) 10%, rgb(255 194 205) 90%);
}

#primary-content #collection ul li.one:after{
  display: block;
  content: "";
  position: absolute;
  width:70vw;
  right: -50vw;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(198deg, rgb(254 177 189) 10%, rgb(253 176 188) 90%);
}

#primary-content #collection ul li.two:before{
  display: block;
  content: "";
  position: absolute;
  width:70vw;
  left: -50vw;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(196deg, rgb(255 197 207) 10%, rgb(255 195 206) 90%);
}

#primary-content #collection ul li.two:after{
  display: block;
  content: "";
  position: absolute;
  width:70vw;
  right: -50vw;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(198deg, rgb(254 177 189) 10%, rgb(253 176 188) 90%);
}

#primary-content #collection ul li.three:before{
  display: block;
  content: "";
  position: absolute;
  width:70vw;
  left: -50vw;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(181deg, rgb(176 211 220) 10%, rgb(175 209 220) 90%);
}

#primary-content #collection ul li.three:after{
  display: block;
  content: "";
  position: absolute;
  width:70vw;
  right: -50vw;
  height: 100%;
  z-index: 2;
  background-image: linear-gradient(185deg, rgb(152 194 207) 10%, rgb(150 193 206) 90%);
}

#primary-content #collection ul li img{
  height: 630px;
  width: 1440px;
  position: relative;
  z-index: 3
}

#primary-content #main-box{
  background-color: #fff;
  min-height: 100vh;
  position: relative;
  z-index: 9
}

#primary-content #main-box .corner{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 504px;
  height: 250px;
  margin: 150px auto 100px;
  text-align: center;
}

#primary-content #main-box .corner img{
  position: absolute;
  width: 50px
}


#primary-content #main-box .corner img.lt{
  left: 0;
  top: 0;
}

#primary-content #main-box .corner img.rb{
  right: 0;
  bottom: 0;
  transform: rotate(180deg);
}

#primary-content #main-box .corner p{
      letter-spacing: 0;
    line-height: 40px;
}

#primary-content #main-box .f-cap{
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  flex-direction: column;
  margin-bottom: 52px
}

#primary-content #main-box .f-cap img{
  width: 45px
}

#primary-content #main-box .f-cap h3{
    font-size: 17px;
    letter-spacing: -0.3px;
    font-weight: 500
}

#primary-content #main-box .main-set{
  display: flex;
  justify-content: center;
  margin-bottom: 74px
}

#primary-content #main-box .main-set dt,
#primary-content #main-box .main-set dd{
  width: 390px;
}

#primary-content #main-box .main-set dt .cap{
      line-height: 1;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 0px;
}

#primary-content #main-box .main-set dt img{
  width: 100%
}

#primary-content #main-box .main-set dd{
  display: flex;
  padding-left: 50px;

}

#primary-content #main-box .main-set dd ul{
    gap: 40px;
    display: flex;
    flex-direction: column;
}

#primary-content #main-box .main-set dd li{
  display: flex;
  align-items: flex-start;
  font-size: 12px;
      line-height: 18px;
    letter-spacing: 0;
}

#primary-content #main-box .main-set dd li img{
  width: 30px;
  margin-right: 10px
}

#primary-content #main-box .thumbnail-set{
  display: flex;
  justify-content: center;
  gap: 25px;
  width: 800px;
  height: 250px;
  margin: 0 auto
}

#primary-content #main-box .thumbnail-set img{
  width: 250px;
}

#primary-content #main-box .txt-box{
  font-size: 14px;
  width: 826px;
    margin: 44px auto 0;
    line-height: 30px;
    letter-spacing: 0;
}

#primary-content #main-box .set+.set{
  padding-top: 102px;
    border-top: 1px solid #818181;
    margin-top: 114px;
}

#primary-content #main-box .two-column{
  display: flex;
  justify-content: center;
  gap: 50px;
}

#primary-content #main-box .two-column>li{
  width: 390px;
}

#primary-content #main-box .two-column dl{
  flex-direction: column;
}

#primary-content #main-box .two-column .main-set{
  margin-bottom: 34px
}

#primary-content #main-box .two-column .main-set dd{
  padding-left: 0;
  margin-top: 42px
}

#primary-content #main-box .two-column .txt-box{
  width: 100%;
  margin-top: unset;
}

@media(max-width:768px){
    #primary-content #kv .inner{
      display: none;
    }

    #primary-content #collection .cap-set{
      display: none !important;
    }

    #primary-content #collection ul li img{
      width: 100%;
      height: auto;
    }

    #primary-content #main-box .sp-box{
      padding-left: 15px;
      text-align: left;
      font-size: 14px;
      line-height: 34px;
      letter-spacing: 0.56px;
      margin-top: 50px
    }

    #primary-content #main-box .sp-box p+p{
      margin-top: 30px
    }

    #primary-content #main-box .corner{
      width: 100%;
      height: auto;
      padding: 35px 0;
      font-size: 14px;
      line-height: 32px;
    }

    #primary-content #main-box .set{
      padding: 0 10px
    }

    #primary-content #main-box .main-set dt,
    #primary-content #main-box .main-set dd,
    #primary-content #main-box .two-column>li{
      width: 100%
    }

    #primary-content #main-box .main-set dd{
      padding-left: unset;
      margin-top: 30px
    }

    #primary-content #main-box .main-set{
      flex-direction: column;
      margin-bottom: 100px
    }

    #primary-content #main-box .txt-box{
      padding: 0 5px;
      width: 100%
    }

    #primary-content #main-box .set+.set{
      padding-top: 100px;
      margin-top: 100px
    }

    #primary-content #main-box .thumbnail-set{
      justify-content: flex-start;
    }

    #primary-content #main-box .two-column{
      flex-direction: column;
    }

    #primary-content #main-box .two-column{
      gap:90px;
    }

    .thumbnail-slider{
      overflow: visible;
    }

    .thumbnail-slider .swiper-slide{
      width: 75%;
    }

    .thumbnail-slider img{
      width:100%;
      display:block;
    }


 }