@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#Contents {

  max-width: unset;

}



#footer {

  margin-top: 0;

}



#FooterWrap {

  position: relative;

  z-index: 1;

}



:root {

  --font_regular: 'Lato', ryo-gothic-plusn, sans-serif;

  --font_eng: "richmond-display", sans-serif;

  --color_regular: #1f1f1f;

  --color_bg01: #fef4f1;

  --color_bg02: #fff;

  --color_grey: #757575;

  --color_orange: #e28162;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .1em;

  font-feature-settings: "palt";

}



.LP_page {

  width: 100%;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

}





.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

  transition: opacity .5s;

}



.LP_page a:hover {

  opacity: 1;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page_inner {

  background: #fff;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  filter: blur(3px);

  transition: opacity 1.3s, filter 1.5s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .2s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

  filter: unset

}



/*----------------------------all*/



/*navigation---------------------*/

.nav_list {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  padding: calc(100 * (46.8rem / 780)) calc(75 * (46.8rem / 780));

  gap: calc(10 * (46.8rem / 780));

}



.nav_list li a {

  position: relative;

  padding-bottom: calc(36 * (46.8rem / 780));

}



.nav_list li a::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(42 * (46.8rem / 780));

  height: calc(17 * (46.8rem / 780));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

}



.nav_list li a p {

  margin-top: calc(11 * (46.8rem / 780));

  font-size: calc(28 * (46.8rem / 780));

  text-align: center;

}

/*---------------------navigation*/



/*product------------------------*/

.product_area .each_category {

  padding: calc(100 * (46.8rem / 780)) calc(30 * (46.8rem / 780));

}



.product_area .each_category:nth-of-type(odd) {

  background: var(--color_bg01);

}



.product_area .each_category:nth-of-type(even) {

  background: var(--color_bg02);

}



.category_ttl {

  margin-bottom: calc(48 * (46.8rem / 780));

  font-family: var(--font_eng);

  font-size: calc(82 * (46.8rem / 780));

  font-weight: 300;

  font-style: italic;

  letter-spacing: .07em;

  text-align: center;

}



.product_list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: calc(40 * (46.8rem / 780));

  text-align: center;

}



.product_img_list {

  height: calc(340 * (46.8rem / 780));

  overflow: hidden;

}



.product_img_list.active {

  height: auto;

  overflow: visible;

}



.product_img_list,

.product_img_list .each_img {

  width: calc(340 * (46.8rem / 780));

}



.product_img_list .slick-arrow {

  top: 100%;

  transform: unset;

  width: calc(23 * (46.8rem / 780));

  height: calc(23 * (46.8rem / 780));

  margin-top: calc(48 * (46.8rem / 780));

}



.product_img_list .slick-prev {

  left: 0;

  rotate: -45deg;

  margin-left: calc(20 * (46.8rem / 780));

}



.product_img_list .slick-next {

  right: 0;

  rotate: 135deg;

  margin-right: calc(20 * (46.8rem / 780));

}



.product_img_list .slick-arrow::before,

.product_img_list .slick-arrow::after {

  position: absolute;

  top: 0;

  left: 0;

  border-radius: calc(100 * (46.8rem / 780));

  background: var(--color_grey);

  opacity: 1;

  content: "";

}



.product_img_list .slick-arrow::before {

  width: calc(2.5 * (46.8rem / 780));

  height: 100%;

}



.product_img_list .slick-arrow::after {

  width: 100%;

  height: calc(2.5 * (46.8rem / 780));

}



.under4 .product_img_list .slick-arrow {

  display: none !important;

}



.thumbnail_list {

  display: flex;

  gap: calc(15 * (46.8rem / 780));

  width: calc(237 * (46.8rem / 780));

  margin: 0 auto;

  overflow: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.under4 .thumbnail_list {

  justify-content: center;

}



.thumbnail_list::-webkit-scrollbar {

  display:none;

}



.thumbnail_list li {

  position: relative;

  padding: calc(36 * (46.8rem / 780)) 0 calc(12 * (46.8rem / 780));

}



.thumbnail_list li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(2.5 * (46.8rem / 780));

  background: var(--color_grey);

  content: "";

  opacity: 0;

  transition: opacity .3s;

}



.thumbnail_list li.selected::before {

  opacity: 1;

}



.thumbnail_list li.popular::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(36 * (46.8rem / 780));

  height: calc(24 * (46.8rem / 780));

  background: url(../img/icon_crown.svg) center center / cover no-repeat;

  content: "";

}



.thumbnail_list li input {

  display: none;

}



.thumbnail_list li label {

  display: block;

  width: calc(48 * (46.8rem / 780));

  cursor: pointer;

}



.product_name {

  margin-top: calc(20 * (46.8rem / 780));

  font-size: calc(34 * (46.8rem / 780));

  font-weight: 400;

  line-height: 1.6;

  letter-spacing: .125em;

  color: var(--color_orange);

}



.variationName_list {

  margin-top: calc(13 * (46.8rem / 780));

}



.variationName_list li {

  width: fit-content;

  margin: 0 auto;

  font-size: calc(20 * (46.8rem / 780));

  opacity: 0;

  height: 0;

  overflow: hidden;

  transition: opacity .5s;

  color: var(--color_grey);

}



.variationName_list li.selected {

  opacity: 1;

  height: auto;

  overflow: visible;

}



.product_price {

  margin-top: calc(36 * (46.8rem / 780));

  font-size: calc(26 * (46.8rem / 780));

}



.product_link {

  width: fit-content;

  margin: calc(28 * (46.8rem / 780)) auto 0;

}



.product_link a {

  display: grid;

  place-items: center;

  width: calc(220 * (46.8rem / 780));

  height: calc(50 * (46.8rem / 780));

  background: var(--color_orange);

  font-size: calc(24 * (46.8rem / 780));

  color: #fff;

}

/*------------------------product*/





/*shareボタン、shareテキスト---------------------------*/

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

#share {

  z-index: 10 !important;

  transition: translate .5s;

}



#share.move {

 translate: 0 calc(-76 * (46.8rem / 780));

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}



/*fixed nav----------------------*/

.fixedNav_list {

  position: fixed;

  z-index: 1;

  bottom: 0;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  width: 100%;

  background: var(--color_orange);

  translate: 0 100%;

  transition: translate .5s;

}



.fixedNav_list.active {

  translate: 0 0;

}



.fixedNav_list li {

  position: relative;

}



.fixedNav_list li:nth-of-type(n+2)::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: calc(2.5 * (46.8rem / 780));

  height: calc(46 * (46.8rem / 780));

  background: #fff;

  content: "";

}



.fixedNav_list li a {

  display: grid;

  place-items: center;

  height: calc(76 * (46.8rem / 780));

  font-size: calc(32 * (46.8rem / 780));

  color: #fff;

}

/*----------------------fixed nav*/



}

/*---------------------------shareボタン、shareテキスト*/





/*PC------------------------------------------------------*/

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

  .only_sp {

    display: none;

  }



  .LP_page {

    position: relative;

    z-index: 1;

  }



  .LP_page::before {

    position: fixed;

    z-index: -1;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: linear-gradient(225deg, #fef9f8, #feeae4, #fef9f8, #feeae4);

    content: "";

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    margin: 0 auto;

    overflow: clip;

  }



  .LP_page_inner {

    width: 46.8rem;

  }



  .fixed_area {

    position: fixed;

    top: 0;

    left: 50%;

    translate: -50% 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    height: 100%;

    margin: 0 auto;

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

    width: calc((100% - 46.8rem) / 2);

    height: 100%;

  }



  .main_ttl_pc {

    width: 34.2rem;

  }

    /*navigation---------------------*/

    .fixed_area .fixed_right nav {

      width: 35rem;

    }



    .fixed_area .fixed_right nav .nav_list {

      padding: 0;

      gap: 1rem;

    }



    .fixed_area .fixed_right nav .nav_list li a {

      padding-bottom: 1.7rem;

    }



    .fixed_area .fixed_right nav .nav_list li a::before {

      width: 1.65rem;

      height: .7rem;

      background: url(../img/arrow_002.svg) center center / cover no-repeat;

    }



    .fixed_area .fixed_right nav .nav_list li a p {

      margin-top: 0;

      font-size: 1.6rem;

    }

    /*---------------------navigation*/



    .thumbnail_list li::before {

      height: .2rem;

    }

}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

@media screen and (max-width: 1400px) and (min-width: 769px) {

  html {

    font-size: calc(10 * (100vw / 1400));

  }

}



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

  html {

    font-size: calc(10 * (100vw / 468));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/