@charset "utf-8";

/* 375_mobile */

.wrap {
  width: 100%;
  height: 100%;
}

header {
  width: 100%;
  height: 67px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}

.header_center {
  width: 87%;
  height: 100%;
  margin: 0 auto;
  position: relative;
}

.header_center h1 {
  width: 118px;
  height: 45px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.header_center h1 a {
  width: 100%;
  height: 100%;
  display: block;
  background: url(../image/arrow/logo.png) no-repeat center/contain;
  text-indent: -9999rem;
}

.mbtn_open {
  width: 30px;
  height: 22px;
  background: url(../image/arrow/menu.png) no-repeat center/contain;
  cursor: pointer;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  text-indent: -9999rem;
  border: none;
}

nav {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #D4CCC2;
  z-index: 99;
  display: none;
}

.close {
  width: 30px;
  height: 30px;
  background: url(../image/arrow/close.png) no-repeat center/cover;
  cursor: pointer;
  position: absolute;
  top: 19px;
  right: 6.6%;
  text-indent: -9999rem;
  border: none;
}

.nav_l {
  width: 63.73%;
  height: 445px;
  position: absolute;
  top: 145px;
  left: 6.6%;
}

.nav_l li {
  font-size: 4rem;
  margin-top: 82px;
}

.nav_l li:first-child {
  margin: 0 auto;
}

.nav_l li a {
  color: #333;
}

/* header end */

.visual {
  width: 100%;
  height: 600px;
  margin-top: 67px;
  position: relative;
}

.visual_wrapper {
  height: 600px;
}

.visual01 {
  width: 100%;
  height: 100%;
  background: url(../image/main/visual1.jpg) no-repeat 20% /cover;
}

.visual02 {
  width: 100%;
  height: 100%;
  background: url(../image/main/visual2.jpg) no-repeat center/cover;
}

.visual03 {
  width: 100%;
  height: 100%;
  background: url(../image/main/visual3.jpg) no-repeat center/cover;
}

.visual_text {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
}

.vd {
  width: 300px;
  height: 75px;
  margin-bottom: 10px;
  margin-left: 6.6%;
  font-size: 8rem;
  cursor: default;
}

.vd_t{
  stroke-dasharray: 442px;
  stroke-width: 0.1px;
  fill: transparent;
  animation: vd_t 1.5s linear;
  animation-fill-mode: forwards;
  border: 1px solid red;
}

.vd_t:nth-child(1){
  animation-delay: 0s;
}
.vd_t:nth-child(2){
  animation-delay: 1s;
}
.vd_t:nth-child(3){
  animation-delay: 2s;
}
.vd_t:nth-child(4){
  animation-delay: 3s;
}
.vd_t:nth-child(5){
  animation-delay: 4s;
}
.vd_t:nth-child(6){
  animation-delay: 5s;
}

 @keyframes vd_t {
  0%{
    stroke:#fff;
    stroke-width: 0.1px;
    stroke-dashoffset: 442px;
  }
  50%{
    fill: transparent;
  }
  99%{
    stroke: #fff;
    stroke-width: 0.1px;
  }
  100%{
    fill: #fff;
    stroke-dashoffset: 0;
  }
} 


.swiper-pagination-current::before {
  content: "0"
}

.swiper-pagination-total::before {
  content: "0"
}

.visual_pagin.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
  width: auto;
  left: auto;
  position: absolute;
  right: 6.6%;
  bottom: 15px;
  color: #C7BBAB;
  cursor: default;
}

.visual_pagin span:nth-child(1) {
  color: #FCF9F2;
}

.vbtn_l::after {
  display: none;
}

.vbtn_r::after {
  display: none;
}

/* visual end */

main {
  overflow: hidden;
}

.soulful {
  width: 100%;
  background: #FCF9F2;
  position: relative;
}

.soulful_center {
  width: 86.93%;
  position: relative;
  margin: 0 auto;
  padding: 197px 0 120px;
}

.soulful_img {
  width: 100%;
  height: 300px;
  background: url(../image/main/soulful.jpg) no-repeat 70% /cover;
}

.soulful_text {
  color: #333;
}

.soulful_text>h2 {
  font-size: 4rem;
  font-weight: 700;
  text-decoration: #333 underline 1px;
  position: absolute;
  top: 120px;
  left: 0;
}

.soulful_text p {
  width: 314px;
  font-size: 2rem;
  line-height: 30px;
  margin-top: 22px;
}

.soulful_text a {
  font-size: 1.6rem;
  margin-top: 35px;
  display: flex;
  justify-content: flex-end;
}

.soulful_text span {
  width: 55px;
  height: auto;
  background: url(../image/arrow/viewmore.png) no-repeat center/contain;
  margin-left: 5px;
}

/* soulful end */

.slogun {
  width: 100%;
  height: 170px;
  position: relative;
}

.slogun_img {
  width: 100%;
  height: 100%;
  background: url(../image/main/slogun.jpg) no-repeat center/cover;
}

.slogun_img>h2 {
  width: 96.5%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: none;
}

.sg_t {
  stroke: #fff;
  font-size: 3rem;
  stroke-width: 0.1rem;
  animation: sg_t alternate 2s linear infinite;
  stroke-dasharray: 102px;
}

@keyframes sg_t {
  0% {
    stroke-dashoffset: 104px;
  }

  100% {
    stroke-dashoffset: 0px;
  }

}

/* slogun end */

.craftmanship {
  width: 100%;
  padding: 120px 0;
  background-color: #FCF9F2;
  position: relative;
}

.craftmanship_center {
  width: 86.93%;
  margin: 0 auto;
}

.craft_text {
  color: #333;
  text-align: right;
  float: right;
}

.craft_text h2 {
  font-size: 4rem;
  font-weight: 700;
  text-decoration: #333 underline 1px;
}

.craft_text p {
  width: 293px;
  margin-top: 25px;
  font-size: 2rem;
  line-height: 36px;
  display: inline-block;
}

.craft_text a {
  font-size: 1.6rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 36px 0 25px;
}

.craft_text span {
  width: 55px;
  height: 6px;
  background: url(../image/arrow/viewmore.png) no-repeat center/contain;
  margin-left: 5px;
}

.craft_img {
  width: 100%;
  height: 360px;
  background: url(../image/main/craftmanship.jpg) no-repeat center/cover;
  clear: both;
}

.c_back {
  width: 0;
  height: 0;
  background: #EBE2D5;
  position: absolute;
  bottom: 0;
  z-index: -1;
}

/* craftmanship end */

.labs {
  width: 100%;
  padding: 120px 0;
  background-color: #FCF9F2;
  position: relative;
}

.l_back {
  width: 100%;
  height: 571px;
  position: absolute;
  top: 0;
  left: 0;
  background: #EBE2D5;
}

.labs_center {
  width: 86.93%;
  margin: 0 auto;
  position: relative;
}

.labs_text {
  color: #333;
}

.labs_text h2 {
  font-size: 4rem;
  font-weight: 700;
  text-decoration: #333 underline 1px;
}

.labs_text p {
  width: 325px;
  margin-top: 25px;
  font-size: 2rem;
  line-height: 36px;
}

.labs_text a {
  width: 189px;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  margin: 36px 0 25px;
}

.labs_text span {
  width: 55px;
  height: 6px;
  background: url(../image/arrow/viewmore.png) no-repeat center/contain;
  margin-left: 5.5px;
}

.labs_img {
  width: 100%;
  height: 360px;
  background: url(../image/main/labs.jpg) no-repeat center/cover;
}

/* labs end */

.collections {
  width: 100%;
  height: auto;
  padding: 0 0 120px;
  background: #FCF9F2;
}

.collections_center {
  width: 100%;
  text-align: center;
}

.collections_center h2 {
  text-decoration: #333 underline 1px;
  font-size: 4rem;
  font-weight: 700;
}

.col_slider {
  margin-top: 36px;
}

.THÉ_MATCHA_26 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/THÉMATCHA-26.jpg) no-repeat center/cover;
}

.SANTAL_33 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/SANTAL-33.jpg) no-repeat center/cover;
}

.ANOTHER_13 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/ANOTHER-13.jpg) no-repeat center/cover;
}

.THÉ_NOIR29 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/THÉ-NOIR-29.jpg) no-repeat center/cover;
}

.ROSE_31 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/ROSE-31.jpg) no-repeat center/cover;
}

.BERGAMOTE_22 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/BERGAMOTE-22.jpg) no-repeat center/cover;
}

.BAIE_19 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/BAIE-19.jpg)no-repeat center/cover;
}

.LYS_41 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/LYS-41.jpg)no-repeat center/cover;
}

.TONKA_25 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Tonka-25.jpg) no-repeat center/cover;
}

.NEROLI_36 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Neroli-36.jpg) no-repeat center/cover;
}

.YLANG_49 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Ylang-49.jpg) no-repeat center/cover;
}

.FLEUR_DORANGER27 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Fleur-doranger-27.jpg) no-repeat center/cover;
}

.PATCHOULI_24 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Patchouli-24.jpg) no-repeat center/cover;
}

.LABDANUM_18 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Ladanum-18.jpg) no-repeat center/cover;
}

.JASMIN_17 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Jasmin-17.jpg) no-repeat center/cover;
}

.VETIVER_46 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Vetiver-46.jpg) no-repeat center/cover;
}

.AMBRETTE_9 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/Ambrette-9.jpg) no-repeat center/cover;
}

.IRIS_39 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/IRIS39.jpg) no-repeat center/cover;
}

.OUD_27 {
  width: 100%;
  height: 360px;
  background: url(../image/main/collections/OUD27.jpg) no-repeat center/cover;
}

.c_slide>a {
  display: block;
  width: 100%;
  height: auto;
}

.c_slide>a>h3 {
  width: 280px;
  position: absolute;
  top: 164px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 3rem;
  color: #fff;
}

.c_slide>a>p {
  width: 78.6%;
  height: auto;
  font-size: 1.8rem;
  margin: 20px auto;
  line-height: 30px;
  font-weight: 400;
}

.col_btn {
  text-indent: -9999rem;
  border: none;
}

.col_lbtn {
  width: 24px;
  height: 14px;
  background: url(../image/arrow/left.png) no-repeat center/contain;
}

.col_rbtn {
  width: 24px;
  height: 14px;
  background: url(../image/arrow/right.png) no-repeat center/contain;
}

button.col_btn.col_lbtn.swiper-button-prev {
  top: 188px;
  left: 6.4%;
  width: 14px;
  height: 24px;
}

button.col_btn.col_rbtn.swiper-button-next {
  top: 188px;
  right: 6.4%;
  width: 14px;
  height: 24px;
}

/* collections end */

.shop {
  width: 100%;
  background: #EBE2D5;
  position: relative;
  padding: 120px 0;
}

.shop_center {
  width: 100%;
  height: auto;
  position: relative;
}

.shop_uptext {
  margin-left: 6.6%;
}

.shop_uptext h2 {
  font-size: 4rem;
  font-weight: 700;
  text-decoration: #333 underline 1px;
}

.shop_uptext a {
  width: 138px;
  display: flex;
  align-items: baseline;
  font-size: 1.8rem;
  margin-top: 20px;
}

.shop_uptext a span {
  width: 20px;
  height: 10px;
  background: url(../image/arrow/shop_arrow.png) no-repeat center/contain;
  margin-left: 5px;
}

.shop_scrollslider {
  margin-top: 20px;
}

.s_img {
  width: 100%;
  height: 460px;
}

.s1 {
  width: 100%;
  background: url(../image/main/shop/fragrance.jpg) no-repeat center/cover;
}

.s2 {
  width: 100%;
  background: url(../image/main/shop/candle.jpg) no-repeat center/cover;
}

.s3 {
  width: 100%;
  background: url(../image/main/shop/skin-care.jpg) no-repeat center/cover;
}

.s4 {
  width: 100%;
  background: url(../image/main/shop/shower.jpg) no-repeat center/cover;
}

.s5 {
  width: 100%;
  background: url(../image/main/shop/grooming.jpg) no-repeat center/cover;
}

.s6 {
  width: 100%;
  background: url(../image/main/shop/life-style.jpg) no-repeat center/cover;
}

.s7 {
  width: 100%;
  background: url(../image/main/shop/Travel-set.jpg) no-repeat center/cover;
}

.s_black {
  /*   width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); */
  display: none;
}

.s_slide>a{
  width: 100%;
  height: 460px;
  display: inline-block;
}

.s_slide>a>p {
  font-size: 2.2rem;
  margin-top: 27px;
  margin-left: 6.6%;
}

.shop_scrollslider.swiper.swiper-initialized.swiper-horizontal.swiper-backface-hidden {
  padding-bottom: 10px;
}

.s_btn {
  text-indent: -9999rem;
  border: none;
}

.s_lbtn {
  background: url(../image/arrow/left.png) no-repeat center/contain;
}

.s_rbtn {
  background: url(../image/arrow/right.png) no-repeat center/contain;
}

button.s_btn.s_lbtn.swiper-button-prev {
  top: 236px;
  left: 6.4%;
  width: 14px;
  height: 24px;
}

button.s_btn.s_rbtn.swiper-button-next {
  top: 236px;
  right: 6.4%;
  width: 14px;
  height: 24px;
}

/* shop end */

.ingradients {
  width: 100%;
  background: #FCF9F2;
}

.ingradients_d {
  width: 100%;
  padding-top: 120px;
}

.ingradients_d h2 {
  font-size: 4rem;
  font-weight: 700;
  text-decoration: #333 underline 1px;
  text-align: right;
  margin-right: 6.6%;
}

.ingradients_slider {
  width: 100%;
  height: 460px;
  margin-top: 48px;
}

.ing_sliderbar.swiper-scrollbar.swiper-scrollbar-horizontal {
  width: 64%;
  height: 4px;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
}

.is1 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/PETITGRAIN.jpg) no-repeat center/cover;
}

.is2 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/JUNIPER.jpg) no-repeat center/cover;
}

.is3 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/YLANG-YLANG.jpg) no-repeat center/cover;
}

.is4 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/TUBEROSE.jpg) no-repeat center/cover;
}

.is5 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/SANDALWOOD.jpg) no-repeat center/cover;
}

.is6 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/TONKA-BEAN.jpg) no-repeat center/cover;
}

.is7 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/CEDARWOOD.jpg) no-repeat center/cover;
}

.is8 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/VANILLA-PLANIFOLIA.jpg) no-repeat center/cover;
}

.is9 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/BERGAMOTE.jpg) no-repeat center/cover;
}

.is10 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/NEROLI.jpg) no-repeat center/cover;
}

.is11 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/ROSE-CENTIFOLIA.jpg) no-repeat center/cover;
}

.is12 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/GAIACWOOD.jpg) no-repeat center/cover;
}

.is13 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/BLACKTEALEAVES.jpg) no-repeat center/cover;
}

.is14 a {
  display: block;
  width: 100%;
  height: 100%;
  background: url(../image/main/ingradients/TOBACCO.jpg) no-repeat center/cover;
}

.ing_text {
  width: 282px;
  height: auto;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ing_text h3 {
  font-size: 3rem;
  font-weight: 700;
  color: #fff;
}

.ing_text p {
  font-size: 2.2rem;
  font-weight: 400;
  margin-top: 10px;
  line-height: 30px;
  color: #fff;
}

.ing_sliderbar {
  text-indent: -9999rem;
}

/* ingradients end */

footer {
  width: 100%;
}

.f_logo {
  width: 100%;
  height: 213px;
  background: #C7BBAB;
  position: relative;
}

.f_logo a {
  width: 178px;
  height: 68px;
  display: block;
  background: url(../image/arrow/f_logo.png) no-repeat center/contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-indent: -9999rem;
}

/* f_logo end */

.footer_bg {
  width: 100%;
  background: #252120;
  position: relative;
}

.footer_center {
  width: 86.93%;
  margin: 0 auto;
  padding: 120px 0;
}

.f_l {
  float: left;
}

.f_menu {
  font-size: 1.5rem;
}

.f_menu>li {
  display: block;
  width: 100%;
  height: 100%;
  margin-top: 29px;
}

.f_menu>li:nth-of-type(1) {
  margin-top: 0;
}

.f_menu>li>a {
  color: #fff;
}

.f_sub {
  display: none;
}

/* .f_sub a {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 15px;
  color: #fff;
} */

.f_r {
  width: 238px;
  float: right;
  margin-top: 105px;
}

.sns {
  text-indent: -9999rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.insta {
  width: 30px;
  height: 30px;
  background: url(../image/arrow/instagram.png) no-repeat center/cover;
}

.bcorp {
  width: 40px;
  height: 58px;
  background: url(../image/arrow/bcorporation.png) no-repeat center/cover;
  margin-left: 21px;
}

.copy {
  float: right;
}

.copy p {
  color: #fff;
  font-size: 1.5rem;
}

.paper {
  width: 100%;
  height: 100%;
  background: url(../image/arrow/paper_back.jpeg) no-repeat right center/cover;
  opacity: 30%;
  position: absolute;
  top: 0;
  left: 0;
}

/* footer end */


@media screen and (min-width:768px) {
  /* 768_mobile */

  header {
    height: 100px;
  }

  .header_center {
    width: 84.1%;
  }

  .header_center h1 {
    width: 188px;
    height: 69px;
  }

  .mbtn_open {
    width: 44px;
    height: 38px;
  }

  .close {
    width: 44px;
    height: 44px;
    position: absolute;
    top: 30px;
    right: 7.94%;
  }

  .nav_l {
    width: 46.74%;
    height: 728px;
    position: absolute;
    top: 175px;
    left: 7.94%;
  }

  .nav_l li {
    font-size: 6rem;
    margin-top: 100px;
  }

  /* header end */

  .visual {
    height: 840px;
    margin-top: 100px;
  }

  .visual_wrapper {
    height: 840px;
  }

  .visual_pagin.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
    position: absolute;
    right: 7.94%;
    bottom: 35px;
    font-size: 2rem;
  }

  .vd {
    width: 518px;
    height: 188px;
    margin-left: 7.94%;
    margin-bottom: 0;
    font-size: 14rem;
  }

  /* visual end */

  .soulful_center {
    width: 84.11%;
    padding: 322px 0 180px;
  }

  .soulful_img {
    height: 600px;
  }

  .soulful_text h2 {
    font-size: 8rem;
    position: absolute;
    top: 180px;
    left: 0;
  }

  .soulful_text p {
    width: auto;
    font-size: 2.4rem;
    line-height: 36px;
    margin-top: 34px;
  }

  .soulful_text a {
    font-size: 2rem;
    margin-top: 59px;
  }

  .soulful_text span {
    width: 68px;
    margin-left: 10px;
  }

  /* soulful end */

  .slogun {
    height: 300px;
  }

  .slogun_img>h2 {
    width: 80%;
  }

  /* slogun end */

  .craftmanship {
    width: 100%;
    padding: 180px 0 91px;
    z-index: 1;
  }

  .craftmanship_center {
    width: auto;
    margin-right: 7.94%;
  }

  .craft_text {
    float: none;
  }

  .craft_text h2 {
    font-size: 8rem;
  }

  .craft_text p {
    width: 478px;
    margin-top: 850px;
    font-size: 2.4rem;
  }

  .craft_text a {
    font-size: 2rem;
    margin: 38px 0 0;
  }

  .craft_text span {
    width: 68px;
    margin-left: 10px;
  }

  .craft_img {
    width: 65.62%;
    height: 760px;
    background: url(../image/main/craftmanship.jpg) no-repeat 65%/cover;
    position: absolute;
    top: 318px;
    right: 7.94%;
  }

  .c_back {
    width: 100%;
    height: 596px;
  }

  .c_back>.paper {
    background-position: top;
  }

  /* craftmanship end */

  .l_back>.paper {
    background-position: right;
  }

  .labs {
    padding: 0 0 180px;
  }

  .l_back {
    height: 617px;
  }

  .labs_center {
    width: 73.11%;
    margin-left: 7.94%;
  }

  .labs_text h2 {
    font-size: 8rem;
  }

  .labs_text p {
    width: 388px;
    padding-top: 832px;
    font-size: 2.4rem;
  }

  .labs_text a {
    width: 216px;
    font-size: 2rem;
    margin: 38px 0 0;
    float: right;
  }

  .labs_text span {
    width: 68px;
    margin-left: 10px;
  }

  .labs_img {
    width: 89.75%;
    height: 760px;
    position: absolute;
    top: 136px;
  }

  /* labs end */

  .collections {
    padding: 0 0 180px;
  }

  .collections_center h2 {
    font-size: 8rem;
  }

  .col_slider {
    margin-top: 52px;
  }

  .THÉ_MATCHA_26 {
    height: 580px;
  }

  .SANTAL_33 {
    height: 580px;
  }

  .ANOTHER_13 {
    height: 580px;
  }

  .THÉ_NOIR29 {
    height: 580px;
  }

  .ROSE_31 {
    height: 580px;
  }

  .BERGAMOTE_22 {
    height: 580px;
  }

  .BAIE_19 {
    height: 580px;
  }

  .LYS_41 {
    height: 580px;
  }

  .TONKA_25 {
    height: 580px;
  }

  .NEROLI_36 {
    height: 580px;
  }

  .YLANG_49 {
    height: 580px;
  }

  .FLEUR_DORANGER27 {
    height: 580px;
  }

  .PATCHOULI_24 {
    height: 580px;
  }

  .LABDANUM_18 {
    height: 580px;
  }

  .JASMIN_17 {
    height: 580px;
  }

  .VETIVER_46 {
    height: 580px;
  }

  .AMBRETTE_9 {
    height: 580px;
  }

  .IRIS_39 {
    height: 580px;
  }

  .OUD_27 {
    height: 580px;
  }

  .c_slide>a>h3 {
    width: 425px;
    position: absolute;
    top: 252px;
    left: 50%;
    font-size: 6rem;
    z-index: 10;
  }

  .c_slide>a>p {
    width: 89%;
    font-size: 2.8rem;
    margin: 34px auto;
    line-height: 40px;
  }

  button.col_btn.col_lbtn.swiper-button-prev {
    top: 286px;
    left: 7.94%;
    width: 17.5px;
    height: 29.1px;
  }

  button.col_btn.col_rbtn.swiper-button-next {
    top: 286px;
    right: 7.94%;
    width: 17.5px;
    height: 29.1px;
  }

  /* collections end */

  .shop {
    position: relative;
    padding: 180px 0;
  }

  .shop_center {
    width: 84.11%;
    margin-left: 7.94%;
  }

  .shop_uptext {
    margin-left: 0;
  }

  .shop_uptext h2 {
    font-size: 8rem;
  }

  .shop_uptext a {
    width: 166px;
    font-size: 2.6rem;
    margin-top: 34px;
  }

  .shop_uptext a span {
    margin-left: 13px;
  }

  .s_img {
    height: 467px;
  }

  .s_slide>a{
    height: 467px;
  }

  .s_slide>a>p {
    font-size: 3.4rem;
    margin-top: 23px;
    margin-left: 0;
  }

  .s_lbtn {
    background: none;
  }

  .s_rbtn {
    background: none;
  }

  /* shop end */

  .ingradients {
    width: 100%;
    background: #FCF9F2;
  }

  .ingradients_d {
    padding-top: 180px;
  }

  .ingradients_d h2 {
    font-size: 8rem;
    margin-right: 7.94%;
  }

  .ingradients_slider {
    height: 720px;
    margin-top: 58px;
  }

  .ing_sliderbar.swiper-scrollbar.swiper-scrollbar-horizontal {
    height: 7px;
    bottom: 72px;
  }

  .ing_text {
    width: 550px;
  }

  .ing_text h3 {
    font-size: 6rem;
  }

  .ing_text p {
    font-size: 3rem;
    margin-top: 24px;
  }

  /* ingradients end */

  .f_logo {
    height: 386px;
  }

  .f_logo a {
    width: 226px;
    height: 86px;
  }

  /* f_logo end */

  .footer_center {
    width: 84.11%;
    padding: 100px 0;
  }

  .f_menu {
    font-size: 2rem;
  }

  .f_menu>li {
    margin-top: 22px;
  }

  .f_r {
    width: 384px;
    margin-top: 113px;
  }

  .insta {
    width: 40px;
    height: 40px;
  }

  .bcorp {
    width: 50px;
    height: 73px;
    margin-left: 39px;
  }

  .copy p {
    font-size: 2.4rem;
  }
}

@media screen and (min-width:1024px) {
  /* 1024_tablet */

  header {
    height: 100px;
  }

  .header_center {
    width: 88.8%;
  }

  .header_center h1 {
    width: 220px;
    height: 90px;
  }

  .mbtn_open {
    width: 48px;
    height: 42px;
  }

  .close {
    width: 46px;
    height: 46px;
    position: absolute;
    top: 31px;
    right: 5.56%;
  }

  .nav_l {
    width: 46.6%;
    height: 628px;
    position: absolute;
    top: 120px;
    left: 5.56%;
  }

  .nav_l li {
    font-size: 8rem;
    margin-top: 90px;
  }

  .nav_l li>a {
    color: #fff;
  }

  .nav_l li:hover a {
    color: #333;
  }

  /* header end */

  .visual {
    margin-top: 100px;
  }

  .visual_pagin.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
    position: absolute;
    right: 5.56%;
    bottom: 100px;
    font-size: 5rem;
  }

  .vd {
    margin-left: 5.56%;
    margin-bottom: 63px;
  }


  /* visual end */

  .soulful>.paper {
    display: none;
  }

  .soulful_center {
    width: 94.43%;
    margin: 0;
    padding: 250px 0;
  }

  .soulful_img {
    width: 58.8%;
    height: 714px;
    float: left;
  }

  .soulful_text {
    width: 342px;
    float: left;
    margin-top: 61px;
    margin-left: 3.61%;
  }

  .soulful_text h2 {
    position: static;
    z-index: 1;
  }

  .soulful_text p {
    margin-top: 14px;
  }

  .soulful_text a {
    margin-top: 74px;
  }

  /* soulful end */

  .slogun {
    height: 428px;
  }

  .slogun_img>h2 {
    width: 100%;
  }

  /* slogun end */

  .craftmanship {
    padding: 250px 0 0;
  }

  .craftmanship_center {
    width: 60.93%;
    margin-right: 10.64%;
  }

  .craft_text p {
    margin-top: 14px;
  }

  .craft_text a {
    margin: 55.5px 0 0;
  }

  .craft_img {
    width: 100%;
    background: url(../image/main/craftmanship.jpg) no-repeat 65%/cover;
    position: static;
    margin-top: 97.5px;
    float: right;
  }

  .c_back {
    height: 180px;
  }

  /* craftmanship end */

  .labs {
    padding: 250px 0;
  }

  .l_back {
    height: 100%;
  }

  .labs_center {
    width: 60.93%;
    margin-left: 10.64%;
  }

  .labs_text p {
    width: 390px;
    margin-top: 14px;
    padding-top: 0;
  }

  .labs_text a {
    align-items: center;
    margin-top: 55px;
    float: none;
  }

  .labs_img {
    width: 100%;
    height: 900px;
    position: static;
    margin-top: 99px;
  }

  /* labs end */

  .collections {
    padding: 250px 0;
  }

  .col_slider {
    width: 88.8%;
    height: 782px;
    margin-top: 89px;
  }

  .THÉ_MATCHA_26 {
    height: 782px;
  }

  .SANTAL_33 {
    height: 782px;
  }

  .ANOTHER_13 {
    height: 782px;
  }

  .THÉ_NOIR29 {
    height: 782px;
  }

  .ROSE_31 {
    height: 782px;
  }

  .BERGAMOTE_22 {
    height: 782px;
  }

  .BAIE_19 {
    height: 782px;
  }

  .LYS_41 {
    height: 782px;
  }

  .TONKA_25 {
    height: 782px;
  }

  .NEROLI_36 {
    height: 782px;
  }

  .YLANG_49 {
    height: 782px;
  }

  .FLEUR_DORANGER27 {
    height: 782px;
  }

  .PATCHOULI_24 {
    height: 782px;
  }

  .LABDANUM_18 {
    height: 782px;
  }

  .JASMIN_17 {
    height: 782px;
  }

  .VETIVER_46 {
    height: 782px;
  }

  .AMBRETTE_9 {
    height: 782px;
  }

  .IRIS_39 {
    height: 782px;
  }

  .OUD_27 {
    height: 782px;
  }

  .col_black {
    width: 100%;
    height: 782px;
    background: rgba(37, 33, 32, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
  }

  .c_slide:hover .col_black {
    display: block;
  }

  .c_slide:hover a p {
    display: block;
  }

  .c_slide>a>h3 {
    width: 600px;
    position: absolute;
    top: 305px;
    left: 50%;
    transform: translateX(-50%);
  }

  .c_slide>a>p {
    width: 694px;
    margin: 25px 0;
    color: #fff;
    position: absolute;
    top: 356px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: none;
  }

  .col_lbtn {
    width: 30px;
    height: 17px;
    background: url(../image/arrow/up.png) no-repeat center/cover;
  }

  .col_rbtn {
    width: 30px;
    height: 17px;
    background: url(../image/arrow/down.png) no-repeat center/cover;
  }

  button.col_btn.col_lbtn.swiper-button-prev {
    top: 63px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 17px;
  }

  button.col_btn.col_rbtn.swiper-button-next {
    top: 737px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 17px;
  }

  /* collections end */

  .shop {
    padding: 250px 0;
  }

  .shop_center {
    width: auto;
    margin-left: 6.44%;
  }

  .shop_uptext a {
    margin-top: 30px;
  }

  .s_img {
    height: 498px;
  }

  .s_img:hover .s_black {
    display: block;
  }

  .s_black {
    width: 100%;
    height: 100%;
    background: rgba(37, 33, 32, 0.8);
    display: none;
  }

  .s_black span {
    color: #fff;
    text-decoration: #fff underline 1px;
    font-size: 4rem;
    position: absolute;
    top: 227px;
    left: 50%;
    transform: translateX(-50%);
  }

  .s_slide {
    width: 80%;
  }

  .s_slide>a{
    height: 498px;
  }

  .s_slide>a>p {
    font-size: 3.5rem;
    margin-top: 46px;
    margin-left: 0;
  }

  /* shop end */

  .ingradients_d {
    padding-top: 250px;
  }

  .ingradients_d h2 {
    margin-right: 5.56%;
  }

  .ingradients_slider {
    height: 750px;
    margin-top: 89px;
  }

  .ing_sliderbar.swiper-scrollbar.swiper-scrollbar-horizontal {
    display: none;
  }

  .i_black {
    width: 100%;
    height: 100%;
    background: rgba(37, 33, 32, 0.8);
    display: none;
  }

  .i_slide:hover .i_black {
    display: block;
  }

  .i_slide:hover .ing_text>h3 {
    display: block;
    font-size: 5rem;
  }

  .ing_text {
    width: auto;
  }

  .ing_text h3 {
    display: none;
  }

  .ing_text p {
    display: none;
  }

  .swiper-scrollbar-drag {
    background: #fff;
}

  /* ingradients end */

  .f_logo {
    height: 448px;
  }

  .f_logo a {
    width: 261px;
    height: 100px;
  }

  /* f_logo end */

  .footer_center {
    width: 88.8%;
    padding: 120px 0;
  }

  .f_menu {
    display: flex;
    justify-content: space-around;
  }

  .f_menu>li {
    width: auto;
    margin-top: 0;
    margin-left: 36px;
  }

  .f_menu>li:first-child {
    margin-left: 0;
  }

  .f_sub {
    display: block;
  }

  .f_sub a {
    display: block;
    width: 100%;
    height: auto;
    margin-top: 17px;
    color: #fff;
    font-size: 1.6rem;
  }

  .f_r {
    margin-top: 98px;
  }

  /* footer end */
}


@media screen and (min-width:1750px) {
  /* 1920_pc */

  header {
    z-index: 200;
  }

  .header_center {
    width: 1690px;
  }

  .mbtn_open {
    width: 62px;
    height: 40px;
  }

  nav {
    background: #FCF9F2;
  }

  .close {
    width: 53px;
    height: 53px;
    position: absolute;
    top: 26px;
    right: 5.98%;
  }

  .nav_l {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #D4CCC2;
  }

  .nav_l>ul {
    margin-top: 160px;
    margin-left: 11.97%;
  }

  .nav_l li {
    margin-top: 96px;
  }

  /* header end */

  .visual_text {
    width: 1690px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 auto;
  }

  .vd {
    margin-left: 7.44%;
    margin-bottom: 53px;
  }

  .visual_pagin.swiper-pagination.swiper-pagination-fraction.swiper-pagination-horizontal {
    position: absolute;
    right: 0;
    bottom: 85px;
  }

  /* visual end */

  .soulful_center {
    width: auto;
    padding: 281px 0;
  }

  .soulful_img {
    width: 56.77%;
  }

  .soulful_text {
    width: 26.9%;
    margin-left: 2.8%;
  }

  /* soulful end */

  .slogun_img>h2 {
    width: 55%;
  }

  /* slogun end */

  .craftmanship {
    padding: 281px 0 0;
  }

  .craftmanship_center {
    width: 1690px;
    margin: 0 auto;
    display: flex;
  }

  .craft_text {
    margin-top: 114px;
    margin-right: 5.26%;
    margin-left: 12.48%;
  }

  .craft_text a {
    margin: 74px 0 0;
  }

  .craft_img {
    width: 40.23%;
    height: 1004px;
    margin-top: 0;
    margin-right: 6.96%;
    float: none;
  }

  .c_back {
    height: 177px;
  }

  /* craftmanship end */

  .labs {
    padding: 0 0 374px;
    background: #EBE2D5;
  }

  .labs_center {
    width: 1690px;
    margin: 0 auto;
  }

  .labs_text {
    float: right;
    margin-top: 261px;
    margin-right: 429px;
  }

  .labs_text a {
    margin-top: 74px;
  }

  .labs_img {
    width: 40.47%;
    height: 1004px;
    position: relative;
    float: left;
    margin-top: -454px;
    margin-left: 6.36%;
    z-index: 100;
  }

  /* labs end */

  .collections {
    padding: 281px 0;
  }

  .collections_center {
    width: 1404px;
    margin: 0 auto;
  }

  .col_slider {
    width: 100%;
    margin-top: 32px;
  }

  .c_slide>a>h3 {
    width: auto;
  }

  /* collections end */

  .shop {
    padding: 281px 0;
  }

  .shop_center {
    margin-left: 5.98%;
  }

  /* shop end */

  .ingradients_d {
    padding-top: 281px;
  }

  .ingradients_d h2 {
    margin-right: 5.98%;
  }

  .i_slide:hover .ing_text>h3 {
    font-size: 6.4rem;
  }

  .ingradients_slider {
    height: 864px;
    margin-top: 32px;
  }

  /* ingradients end */

  .f_logo a {
    width: 248px;
  }

  /* f_logo end */

  .footer_center {
    width: 1690px;
    padding: 136px 0;
  }

  .f_menu>li {
    margin-left: 207px;
  }

  .f_r {
    margin-top: 70px;
  }

  /* footer_end */
}