@charset "UTF-8";

/*//////////////////////////////////////////////////

SNIDEL BEAUTY ONLINE STORE　SERVICE | スナイデル ビューティ

//////////////////////////////////////////////////*/

/* ========================================================
                      * Layout style *
========================================================= */

/* calc(xx * yyrem / zz);
xx：SPデザインの各値
yy：PCデザインのメインコンテンツの横幅
zz：SPデザインの横幅 */

html {
  font-size: calc(10 * (100vw/520));
}

@media (min-width: 781px) {
  html {
    font-size: calc(10 * (100vw/1400));
  }
}

@media (min-width: 1400px) {
  html {
    font-size: 62.5%
  }

}

.archive_area {
  position: relative;
  z-index: 5;
}

@media (max-width: 780px) {
  .archive_area {
    overflow-x: hidden;
  }
}

@media (max-width: 780px) {
  #FooterWrap {
    overflow-x: hidden;
  }
}

#footer {
  margin-top: 0 !important;
}

/* ========================================================
                      * root *
========================================================= */
:root {
  --rate: calc(var(--pcMainContentWidth) / var(--spWidth));

  /* PCデザインのメインコンテンツの横幅 */
  --pcMainContentWidth: 52rem;

  /* PCデザインの横幅 */
  --pcWidth: 1400;

  /* SPデザインの横幅 */
  --spWidth: 780;

  --color-lp_txt_font: #1f1f1f;
  --color-lp_accent: #af8f6a;
  --color-lp_bg: #fcf8f3;
  --color-lp_bg_pc: #f4e9e9;
  --color-lp_white: #fff;
  --font_mix: "Lato", "ryo-gothic-plusn", sans-serif;
}

@media (min-width: 781px) {
  :root {}
}

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

/* ========================================================
                      * lp_contents *
========================================================= */

.lp_contents * {
  box-sizing: border-box;
  font-feature-settings: "palt";
  line-height: 1;
  letter-spacing: .1em;
  text-align: center;
}

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_mix);
  font-weight: 400;
  overflow-x: clip;
  color: var(--color-lp_txt_font);
}

@media (min-width: 781px) {
  .lp_contents {
    position: relative;
    width: 100%;
    max-width: 100vw;
    height: 100%;
  }
}

.lp_contents .pc_only {
  display: none;
}

.lp_contents img,
.lp_contents figure {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.lp_contents a {
  width: 100%;
  height: 100%;
  display: inline-block;
}

.lp_contents h1,
.lp_contents h2,
.lp_contents h3,
.lp_contents h4,
.lp_contents h5 {
  font-weight: 400;
}

.lp_contents_inner {
  position: relative;
  z-index: 1;
  overflow: clip;
  background: var(--color-lp_bg);
}

.lp_contents a,
.lp_contents button,
.lp_contents .lp_contents .lp_contents .slick-dots li,
.lp_contents .btn_accordion {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

/* ========================================================
                      * PC *
========================================================= */
@media (min-width: 781px) {

  .lp_contents .fixed_area {
    position: relative;
    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;
    background: var(--color-lp_bg_pc);
  }

  .lp_contents .fixed_area .fixed_nav {
    display: grid;
    place-items: center;
    width: calc((100% - var(--pcMainContentWidth)) / 2);
    height: 100vh;
    /* padding-top: var(--header-height); */
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }
}


/* ========================================================
            * fixed_nav fixed_right   *
========================================================= */

.fixed_right .menu_list {
  margin-left: -1.3rem;
}

.fixed_right .menu_list ul {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.fixed_right .menu_list li {
  position: relative;
}

.fixed_right .menu_list li::after {
  content: "";
  width: 106%;
  height: 1px;
  background: var(--color-lp_accent);
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed_right .menu_list li a {
  font-size: 1.6rem;
  letter-spacing: .05em;
  padding: 1.6rem 0;
  color: var(--color-lp_accent);
  display: flex;
  align-items: center;
}

.fixed_right .menu_list li a::before {
  content: "";
  width: 1.3rem;
  height: .7rem;
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
  display: block;
  margin-inline: 1rem 2rem;
}

/* ========================================================
                      * 共通設定  *
========================================================= */

section .inner {
  padding-inline: calc(30 * (var(--rate)));
}

section .ttl {
  font-size: calc(44 * (var(--rate)));
  letter-spacing: .125em;
  margin-left: calc(6 * (var(--rate)));
}

section .ttl span {
  font-size: calc(24 * (var(--rate)));
  display: block;
  margin-top: calc(33 * (var(--rate)));
}

.common_cta_wrap {
  background: var(--color-lp_accent);
  width: calc(600 * (var(--rate)));
  margin: 0 auto;
  border-radius: calc(50 * (var(--rate)));
}

.common_cta_wrap a {
  color: var(--color-lp_white);
  font-size: calc(28 * (var(--rate)));
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(37 * (var(--rate))) 0;
  position: relative;
}

.common_cta_wrap a::after {
  content: "";
  background: url(../img/icon_common_cta.svg) no-repeat center / 100%;
  width: calc(34 * (var(--rate)));
  height: calc(34 * (var(--rate)));
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(50 * (var(--rate)));
}


/* ========================================================
                      * sec_mv  *
========================================================= */

.sec_mv {
  width: calc(780 * (var(--rate)));
  height: calc(910 * (var(--rate)));
  background: url(../img/mv.jpg) no-repeat center top / 100%;
  position: relative;
}

.sec_mv .ttl_main {
  width: calc(588 * (var(--rate)));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: calc(-30 * (var(--rate)));
}


/* ========================================================
                      * sec_intro  *
========================================================= */

.sec_intro {
  background: var(--color-lp_bg);
  padding-top: calc(66 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
}

.sec_intro .inner {}

.sec_intro .ttl {
  color: var(--color-lp_accent);
}

.sec_intro .ttl span {
  font-size: calc(28 * (var(--rate)));
  margin: 0 0 calc(28 * (var(--rate)));
}

.sec_intro .lead {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(56/28);
}

.sec_intro .intro_coupon {
  border: solid 1px var(--color-lp_accent);
  margin-top: calc(105 * (var(--rate)));
  padding-top: calc(80 * (var(--rate)));
  padding-bottom: calc(65 * (var(--rate)));
}

.sec_intro .intro_coupon_item {
  margin-top: calc(50 * (var(--rate)));
}

.sec_intro .intro_coupon_item.intro_coupon_item_shipping {
  margin-top: calc(36 * (var(--rate)));
}

.sec_intro .intro_coupon_text {
  color: var(--color-lp_accent);
  font-size: calc(28 * (var(--rate)));
  font-weight: 500;
  line-height: calc(56/28);
}

.sec_intro .intro_coupon_note {
  color: var(--color-lp_accent);
  font-size: calc(22 * (var(--rate)));
  font-weight: 400;
  display: block;
  margin-top: calc(22 * (var(--rate)));
}

.sec_intro .intro_coupon_code {
  display: flex;
  background: var(--color-lp_white);
  justify-content: space-between;
  align-items: center;
  width: calc(600 * (var(--rate)));
  /* height: calc(100 * (var(--rate))); */
  margin: calc(60 * (var(--rate))) auto 0;
  padding: calc(26 * (var(--rate))) 0;
}

.sec_intro .intro_coupon_code dl {
  display: flex;
  align-items: center;
  gap: calc(20 * (var(--rate)));
  margin-left: calc(40 * (var(--rate)));
}

.sec_intro .intro_coupon_code dt {
  color: var(--color-lp_accent);
  font-size: calc(22 * (var(--rate)));
}

.sec_intro .intro_coupon_code dd {
  color: var(--color-lp_accent);
  font-size: calc(40 * (var(--rate)));
  font-weight: 700;
}

.sec_intro .intro_coupon_copy {
  background: var(--color-lp_accent);
  border-radius: calc(30 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: calc(20 * (var(--rate)));
  padding: calc(17 * (var(--rate))) calc(38 * (var(--rate)));
  cursor: pointer;
}

.sec_intro .intro_coupon_copy span {
  font-size: calc(24 * (var(--rate)));
  color: var(--color-lp_white);
}

.sec_intro .common_cta_wrap.intro_cta_member_register {
  margin-top: calc(50 * (var(--rate)));
}

.sec_intro .intro_coupon_attention {
  color: var(--color-lp_accent);
  font-size: calc(22 * (var(--rate)));
  margin-top: calc(48 * (var(--rate)));
  line-height: calc(44/22);
}


/* ========================================================
                      * sec_new_item  *
========================================================= */

.sec_new_item {
  padding-top: calc(118 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
  background: var(--color-lp_white);
}

.sec_new_item .inner {}

.sec_new_item .ttl {}

.sec_new_item .ttl span {}

.sec_new_item .new_item_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40 * (var(--rate)));
  margin-top: calc(60 * (var(--rate)));
}

.sec_new_item .new_item_list li {}

.sec_new_item .new_item_list li figure {}

.sec_new_item .new_item_list li p {
  color: var(--color-lp_txt_font);
}

.sec_new_item .new_item_list li .new_item_name {
  font-size: calc(26 * (var(--rate)));
  letter-spacing: .125em;
  line-height: calc(45.5/26);
  margin-top: calc(20 * (var(--rate)));
}

.sec_new_item .new_item_list li .new_item_release {
  margin-top: calc(19 * (var(--rate)));
}

.sec_new_item .new_item_list li .new_item_schedule {
  margin-top: calc(19 * (var(--rate)));
}

.sec_new_item .new_item_list li .new_item_release,
.sec_new_item .new_item_list li .new_item_schedule {
  font-size: calc(22 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(22 * (var(--rate)));
}

.sec_new_item .new_item_list li .new_item_release::before,
.sec_new_item .new_item_list li .new_item_schedule::before {
  content: "";
  width: calc(24 * (var(--rate)));
  height: calc(24 * (var(--rate)));
  display: block;
  margin-left: calc(10 * (var(--rate)));
}

.sec_new_item .new_item_list li .new_item_release::before {
  background: url(../img/icon_bag.svg) no-repeat center / 100%;
}

.sec_new_item .new_item_list li .new_item_schedule::before {
  background: url(../img/icon_calendar.svg) no-repeat center / 100%;
}



/* ========================================================
                      * sec_gift  *
========================================================= */

.sec_gift {
  background: var(--color-lp_bg);
  padding-top: calc(117 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
}

.sec_gift .inner {}

.sec_gift .ttl {}

.sec_gift .ttl span {}

.sec_gift .gift_lead {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(52.8/24);
  margin-top: calc(45 * (var(--rate)));
}

.sec_gift .gift_item_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40 * (var(--rate)));
  margin-top: calc(44 * (var(--rate)));
}

.sec_gift .gift_item_list li {}

.sec_gift .gift_item_list li figure {}

.sec_gift .gift_item_list li .gift_item_text {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(42/24);
  margin-top: calc(21 * (var(--rate)));
  color: var(--color-lp_txt_font);
}

.sec_gift .common_cta_wrap.gift_cta_order_guide {
  margin-top: calc(70 * (var(--rate)));
}

.sec_gift .gift_campaign {
  border: solid 1px var(--color-lp_accent);
  margin-top: calc(80 * (var(--rate)));
  padding-top: calc(55 * (var(--rate)));
  padding-bottom: calc(70 * (var(--rate)));
}

.sec_gift .gift_campaign .gift_campaign_ttl {
  font-size: calc(40 * (var(--rate)));
  color: var(--color-lp_accent);
}

.sec_gift .gift_campaign .gift_campaign_ttl span {
  font-size: calc(32 * (var(--rate)));
  display: flex;
  justify-content: center;
  margin-bottom: calc(32 * (var(--rate)));
}

.sec_gift .gift_campaign .gift_campaign_ttl span::before {
  content: "";
  width: calc(29 * (var(--rate)));
  height: calc(28 * (var(--rate)));
  background: url(../img/icon_present.svg) no-repeat center / 100%;
  display: block;
  margin-right: calc(14 * (var(--rate)));
}

.sec_gift .gift_campaign .gift_campaign_lead {
  font-size: calc(28 * (var(--rate)));
  font-weight: 500;
  color: var(--color-lp_accent);
  display: flex;
  justify-content: center;
  margin-top: calc(40 * (var(--rate)));
}

.sec_gift .gift_campaign .gift_campaign_lead::after {
  content: "";
  width: calc(40 * (var(--rate)));
  height: calc(28 * (var(--rate)));
  background: url(../img/icon_delivery.svg) no-repeat center / 100%;
  display: block;
  margin-left: calc(12 * (var(--rate)));
}

.sec_gift .gift_campaign .gift_campaign_text {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(38.5/22);
  color: var(--color-lp_accent);
  margin-top: calc(33 * (var(--rate)));
}


/* ========================================================
                      * sec_service  *
========================================================= */

.sec_service {
  padding-top: calc(118 * (var(--rate)));
  padding-bottom: calc(118 * (var(--rate)));
  background: var(--color-lp_white);
}

.sec_service .inner {}

.sec_service .ttl {}

.sec_service .ttl span {}

.sec_service .service_list_wrap {
  margin-top: calc(59 * (var(--rate)));
}

.sec_service .service_list_wrap dl {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: calc(40 * (var(--rate)));
}

.sec_service .service_list_wrap dl:not(:first-of-type) {
  margin-top: calc(40 * (var(--rate)));
}

.sec_service .service_list_wrap dt {
  width: calc(220 * (var(--rate)));
  flex-shrink: 0;
}

.sec_service .service_list_wrap dd {}

.sec_service .service_list_wrap .service_item_ttl {
  font-size: calc(30 * (var(--rate)));
  font-weight: 500;
  line-height: calc(52.5/30);
  text-align: justify;
  margin-top: calc(-11 * (var(--rate)));
}

.sec_service .service_list_wrap .service_item_text {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(38.5/22);
  text-align: justify;
  margin-top: calc(12 * (var(--rate)));
}


/* ========================================================
                      * sec_best  *
========================================================= */

.sec_best {
  background: var(--color-lp_bg);
  padding-top: calc(120 * (var(--rate)));
  padding-bottom: calc(88 * (var(--rate)));
}

.sec_best .center_slider {
  margin-top: calc(58 * (var(--rate)));
}

.sec_best .slide_inner {
  width: calc(440 * (var(--rate)));
  transform: scale(.69);
  transition: transform .3s;
  text-align: center;
  margin-inline: calc(-24 * (var(--rate)));
}

.sec_best .slide_inner.slick-center {
  transform: scale(1);
}

.sec_best .slide_item_name {
  font-size: calc(28 * (var(--rate)));
  font-weight: 500;
  line-height: calc(42/28);
  margin-top: calc(36 * (var(--rate)));
  padding-left: calc(10 * (var(--rate)));
}

.sec_best .slide_item_name span {
  font-size: calc(24 * (var(--rate)));
  font-weight: 400;
  display: block;
  margin-bottom: calc(19 * (var(--rate)));
}

.sec_best .slide_item_txt {
  font-size: calc(24 * (var(--rate)));
  margin-top: calc(18 * (var(--rate)));
  line-height: calc(44/24);
  padding-left: calc(10 * (var(--rate)));
}

.sec_best .slide_item_review {
  display: flex;
  justify-content: center;
  margin-top: calc(22 * (var(--rate)));
}

.sec_best .slide_item_review img {
  width: calc(146 * (var(--rate)));
}

.sec_best .slide_item_review p {
  font-size: calc(22 * (var(--rate)));
  letter-spacing: .05em;
  padding-left: calc(22 * (var(--rate)));
}

.sec_best .slide_item_price {
  font-size: calc(32 * (var(--rate)));
  margin-top: calc(20 * (var(--rate)));
  padding-left: calc(10 * (var(--rate)));
}

.sec_best .tax {
  font-size: calc(22 * (var(--rate)));
}

.sec_best .slick-prev::before,
.sec_best .slick-next::before {
  content: "";
  position: absolute;
  width: calc(24 * (var(--rate)));
  height: calc(45 * (var(--rate)));
  top: 0;
}

.sec_best .slick-prev::before {
  background: url(../img/arrow_prev.svg) no-repeat center / 100%;
  left: 0;
}

.sec_best .slick-next::before {
  background: url(../img/arrow_next.svg) no-repeat center/ 100%;
  right: 0;
}

.sec_best .slick-prev,
.sec_best .slick-next {
  all: unset;
  display: inline-block;
  cursor: pointer;
  font-size: 0;

  position: absolute;
  width: calc(24 * (var(--rate)));
  height: calc(45 * (var(--rate)));
  top: 50%;
  transform: translate(0, -50%);
  z-index: 10;
  margin-top: calc(-8 * (var(--rate)));
}

.sec_best .slick-prev {
  left: calc(128 * (var(--rate)));
}

.sec_best .slick-next {
  right: calc(128 * (var(--rate)));
}

.sec_best .slick-dots {
  display: flex;
  justify-content: center;
  gap: calc(50 * (var(--rate)));
  margin-bottom: calc(25 * (var(--rate)));
}

.sec_best .slick-dots li {
  width: calc(16 * (var(--rate)));
  height: calc(16 * (var(--rate)));
  border-radius: 50%;
  background: #c7c7c7;
  margin: 0;
}

.sec_best .slick-dots li.slick-active {
  background: var(--color-lp_txt_font);
}

.sec_best .slick-dots li button {
  display: none;
}

.sec_best .slick-list {
  padding-bottom: 3rem !important;
}

.sec_best .slide_cart_btn {
  border: 1px solid var(--color-lp_txt_font);
  width: calc(320 * (var(--rate)));
  display: block;
  background: #fff;
  margin: calc(30 * (var(--rate))) auto 0 calc(66 * (var(--rate)));
}

.sec_best .slide_cart_btn a {
  font-size: calc(22 * (var(--rate)));
  padding: calc(19 * (var(--rate))) 0;
}


/* ========================================================
                      * sec_product  *
========================================================= */

.sec_product {
  padding-top: calc(119 * (var(--rate)));
  padding-bottom: calc(113 * (var(--rate)));
  background: var(--color-lp_white);
}

.sec_product .inner {}

.sec_product .ttl {}

.sec_product .ttl span {}

.sec_product .product_category_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: calc(40 * (var(--rate)));
  margin-top: calc(58 * (var(--rate)));
}

.sec_product .product_category_list li {
  background: var(--color-lp_bg);
  font-size: calc(22 * (var(--rate)));
}

.sec_product .product_category_list li a {
  padding-bottom: calc(30 * (var(--rate)));
}

.sec_product .product_category_list li:last-of-type a {
  padding-bottom: calc(0 * (var(--rate)));
}

.sec_product .product_category_list figure {}

.sec_product .product_category_list .product_category_name {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(33/22);
  margin-top: calc(14 * (var(--rate)));
}

.sec_product .product_category_list li:last-of-type .product_category_name {
  margin-top: calc(0 * (var(--rate)));
}


/* ========================================================
                      * アニメーション  *
========================================================= */

.lp_contents .js-fade {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.lp_contents .js-fade.is-show {
  opacity: 1;
}