@charset "UTF-8";

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

  2026 Valentine Collection | SNIDEL BEAUTY（スナイデルビューティ）公式サイト

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

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

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

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

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

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

}

footer {
  position: relative;
  z-index: 10;
  margin-top: 0 !important;
}


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

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

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

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

  --color-lp_font: #1f1f1f;
  --color-lp_white: #fff;
  --color-lp_ttl: #9AB9D8;
  --color-lp_accent: #723238;
  --color-lp_bg: #FCF2F4;
  --color-lp_bg_sub: #C4D6E8;
  --font_ja: "Lato", "ryo-gothic-plusn", sans-serif;
  /* --font_en: "inglesa-caps-variable", sans-serif; */
  --font_en: "instrument-serif", sans-serif;

}

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

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

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

.archive_area::before {
  /* content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/bg_pc_top.png) no-repeat center / cover;
  width: 100%;
  height: calc(10 * (100vw / 1400));
  z-index: 1; */
}


@media (max-width: 780px) {
  .archive_area::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/line_sp.svg) no-repeat center / 100%;
    width: calc(780 * (var(--rate)));
    height: calc(25 * (var(--rate)));
    z-index: 1;
  }
}

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

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

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

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_ja);
  font-weight: 300;
  overflow-x: clip;
  color: var(--color-lp_font);
  background: var(--color-lp_bg);
}

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

.lp_contents_inner {
  padding-bottom: calc(180 * (var(--rate)));
}

.lp_contents .pc_Only {
  display: none;
}

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

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

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

.lp_contents a,
.lp_contents button,
.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 .grid_area {
    display: grid;
    grid-template-columns: 1fr 46.8rem 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .lp_contents .grid_area .fixed_nav {
    position: -webkit-sticky;
    position: sticky;
    display: grid;
    place-items: center;
    pointer-events: all;
    height: 100vh;
  }

  .lp_contents .grid_area .fixed_left {
    top: 0;
    grid-column: 1;
    -webkit-clip-path: border-box;
    clip-path: border-box;
    align-items: center;
  }

  .lp_contents .grid_area .fixed_right {
    top: 0;
    grid-column: 3;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }

  .fixed_left_inner .logo {
    width: 14.8rem;
    text-align: center;
  }

  .lp_contents_inner {
    width: var(--pcMainContentWidth);
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
    background: var(--color-lp_bg);
    /* padding-top: calc(30 * (var(--rate))); */
    padding-top: 3rem;
  }
}

/* 上下固定ライン */
.decoration_Setting {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.decoration_Setting .for_line {
  position: sticky;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 2;
}

.decoration_Setting .for_line_top {
  top: 0;
  background: url(../img/bg_pc_top.png) repeat-x center / contain;
}

.decoration_Setting .for_line_bottom {
  top: calc(100% - 1rem);
  background: url(../img/bg_pc_bottom.png) repeat-x center / contain;
}

@media (max-width: 1400px) {

  .decoration_Setting .for_line {
    height: calc(10 * (100vw / 1400));
  }

  .decoration_Setting .for_line_top {
    background: url(../img/bg_pc_top.png) no-repeat center / cover;
  }

  .decoration_Setting .for_line_bottom {
    background: url(../img/bg_pc_bottom.png) no-repeat center / cover;
  }

}

@media (max-width: 780px) {
  .decoration_Setting {
    display: none;
  }
}

/* 固定背景 */
.bg_Setting {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

.bg_Setting .for_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-lp_bg) url(../img/bg_main_pc.png) center center / cover no-repeat;
}

@media (max-width: 780px) {
  .bg_Setting {
    display: none;
  }
}


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

.fixed_right .menu_list {}

.fixed_right .menu_list .ttl {
  width: 25.2rem;
  margin-bottom: 2rem;
}

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

.fixed_right .menu_list li:not(:last-of-type) {
  margin-left: .4rem;
}

.fixed_right .menu_list li:last-of-type {
  margin-top: 3rem;
  position: relative;
}

.fixed_right .menu_list li:last-of-type::before,
.fixed_right .menu_list li:last-of-type::after {
  content: "";
  position: absolute;
  left: 0;
  left: 50%;
  height: 1px;
  width: 103%;
  background-image: repeating-linear-gradient(to right,
      var(--color-lp_accent) 0,
      var(--color-lp_accent) 2px,
      /* 線分 4px */
      transparent 2px,
      transparent 4px
      /* 間隔 4px */
    );
  transform: translateX(-50%);
}

.fixed_right .menu_list li:last-of-type::before {
  top: 0;
}

.fixed_right .menu_list li:last-of-type::after {
  bottom: 0;
}

.fixed_right .menu_list li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}

.fixed_right .menu_list li:not(:last-of-type) a {}

.fixed_right .menu_list li:last-of-type a {
  justify-content: center;
  padding: 1.6rem 0;
}

.fixed_right .menu_list li .menu_list_img {
  width: 8rem;
}

.fixed_right .menu_list li:last-of-type .menu_list_img {
  width: 1.6rem;
  position: absolute;
  top: -1.3rem;
  right: 1.1rem;
}

.fixed_right .menu_list li .menu_list_txt {
  font-size: 1.6rem;
  font-family: var(--font_en);
  letter-spacing: .025em;
  color: var(--color-lp_accent);
  position: relative;
}

.fixed_right .menu_list li:not(:last-of-type) a .menu_list_txt::before {
  content: "";
  width: 1.4rem;
  height: .7rem;
  background: url(../img/ankerlink_arrow.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  right: -2.7rem;
  transform: translateY(-50%);
}

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

@media (max-width: 780px) {

  /* SP時ナビゲーション設定 */
  .lp_contents .fixed_right {
    position: fixed;
    bottom: 0;
    display: block;
    width: calc(750 * (var(--rate)));
    /* translate: 0 100%; */
    /* opacity: 0; */
    transition: all .5s;
    z-index: 100;
    width: 100%;
    background: var(--color-lp_white);
  }

  .lp_contents .fixed_right.js-scrollStatus {
    transform: translateY(100%);
    transition: all 0.6s 0.2s ease !important;
  }

  .lp_contents .fixed_right.js-scrollStatus.scrolled-up {
    visibility: visible;
    transform: translateY(0);
    z-index: 9;
  }

  .fixed_right .menu_list {}

  .fixed_right .menu_list .ttl {
    display: none;
  }

  .fixed_right .menu_list ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
  }

  .fixed_right .menu_list li {
    height: calc(100 * (var(--rate)));
    margin: 0;
    position: relative;
  }

  .fixed_right .menu_list li:nth-of-type(1),
  .fixed_right .menu_list li:nth-of-type(2) {
    width: calc(100% / 2);
    margin: 0;
  }

  .fixed_right .menu_list li:nth-of-type(1)::before,
  .fixed_right .menu_list li:nth-of-type(2)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    bottom: 0;
    background-image: repeating-linear-gradient(to right,
        var(--color-lp_accent) 0,
        var(--color-lp_accent) 2px,
        /* 線分 4px */
        transparent 2px,
        transparent 4px
        /* 間隔 4px */
      );
  }

  .fixed_right .menu_list li:nth-of-type(1)::after,
  .fixed_right .menu_list li:nth-of-type(3)::after,
  .fixed_right .menu_list li:nth-of-type(4)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background-image: repeating-linear-gradient(to bottom,
        var(--color-lp_accent) 0,
        var(--color-lp_accent) 2px,
        /* 線分 */
        transparent 2px,
        transparent 4px
        /* 間隔 */
      );
  }

  .fixed_right .menu_list li:nth-of-type(3),
  .fixed_right .menu_list li:nth-of-type(4),
  .fixed_right .menu_list li:nth-of-type(5) {
    width: calc(100% / 3);
    margin: 0;
  }

  .fixed_right .menu_list li:last-of-type::before,
  .fixed_right .menu_list li:last-of-type::after,
  .fixed_right .menu_list li:not(:last-of-type) a .menu_list_txt::before {
    display: none;
  }

  .fixed_right .menu_list li a {
    justify-content: center;
    gap: calc(15 * (var(--rate)));
  }

  .fixed_right .menu_list li:not(:last-of-type) a {}

  .fixed_right .menu_list li .menu_list_img {
    width: calc(60 * (var(--rate)));
  }

  .fixed_right .menu_list li:last-of-type .menu_list_img {
    display: none;
  }

  .fixed_right .menu_list li .menu_list_txt {
    font-size: calc(28 * (var(--rate)));
  }

}

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

.lp_contents .sp_only {
  display: none;
}

.lp_contents .pc_only {
  display: block;
}


@media (max-width: 780px) {
  .lp_contents .sp_only {
    display: block;
  }

  .lp_contents .pc_only {
    display: none;
  }
}

.lp_contents .slick-dots {
  position: static;
  line-height: 0;
  display: flex !important;
  justify-content: center;
  gap: calc(30 * (var(--rate)));
}

.lp_contents .accordion {
  transition: height 0.5s;
  overflow: hidden;
}

.lp_contents .btn_accordion {
  cursor: pointer;
  position: relative;
  font-size: calc(34 * (var(--rate)));
  letter-spacing: .1em;
  padding-bottom: calc(56 * (var(--rate)));
}

.lp_contents .btn_accordion.is-open {
  margin-top: calc(70 * (var(--rate)));
  margin-bottom: calc(74 * (var(--rate)));
}

.lp_contents .btn_accordion::before {
  content: "";
  position: absolute;
  background: url(../img/icon_accordion.svg) no-repeat center;
  background-size: 100%;
  width: calc(60 * (var(--rate)));
  height: calc(24 * (var(--rate)));
  top: calc(66 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.lp_contents .btn_accordion.is-open::before {
  background: #666666;
  width: calc(90 * (var(--rate)));
  height: 1px;
  top: calc(43 * (var(--rate)));
}



/* アニメーション
==================================*/
.lp_contents .js-fadein {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 2s ease, filter 2s ease;
}

@media (max-width: 780px) {
  .lp_contents .fixed_nav.fixed_right.js-fadein {
    opacity: 1;
    filter: blur(0);
    z-index: 9;
  }
}

.lp_contents .js-fadein.is-show {
  opacity: 1;
  filter: blur(0);
}

.lp_contents .js-fadeup {
  translate: 0 5svh;
  transition: translate 1.5s ease, opacity 1.8s ease;
  opacity: 0;
}

.lp_contents .js-fadeup.is-show {
  opacity: 1;
  translate: 0 0;
}


@keyframes showTextFromBottom {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.js-animeup-text span span {
  display: inline-block;
  animation: showTextFromBottom 0.5s backwards;
  animation-play-state: paused;
}

.js-animeup.is-show .js-animeup-text span span {
  animation-play-state: running;
}

.js-mask {
  opacity: 0;
  -webkit-animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
  animation: opa 1.8s cubic-bezier(0.51, 0.21, 0.41, 1) 0.4s 1 forwards;
  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, 0.02) 43.3333333333%, rgba(0, 0, 0, 0.08) 45%, rgba(0, 0, 0, 0.18) 46.6666666667%, rgba(0, 0, 0, 0.32) 48.3333333333%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.68) 51.6666666667%, rgba(0, 0, 0, 0.82) 53.3333333333%, rgba(0, 0, 0, 0.92) 55%, rgba(0, 0, 0, 0.98) 56.6666666667%, #000 58.3333333333%, #000);
  -webkit-mask-size: 100% max(300%, 100vh);
  mask-size: 100% max(300%, 100vh);
  -webkit-mask-repeat: none;
  mask-repeat: none;
  -webkit-mask-position: center 100%;
  mask-position: center 100%;
  transform: translateZ(0);
  transition: -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.6s 0.4s linear;
  transition: mask-position 1.6s 0.4s linear, -webkit-mask-position 1.4s linear;
}

.js-mask.is-show {
  animation: opa1 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
  -webkit-mask-position: center 0;
  mask-position: center 0;
  animation-delay: .5s;
}


@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/* ========================================================
                      * fixed_frame_area  *
========================================================= */

.fixed_frame_area {
  display: flex;
  flex-direction: column;
  height: 100%;
  left: 0;
  margin: auto;
  width: var(--pcMainContentWidth);
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}

.fixed_frame_bottom,
.fixed_frame_top {
  display: flex;
  height: 100vh;
  left: 0;
  position: sticky;
  width: 100%
}

.fixed_frame_top {
  align-items: flex-start;
  top: 0
}

.fixed_frame_bottom {
  align-items: flex-end;
  bottom: 0;
  margin-top: auto
}

.fixed_frame_line {
  bottom: calc(30 * (var(--rate)));
  position: absolute
}

.fixed_frame_line,
.fixed_frame_line:before {
  left: 0;
  top: calc(30 * (var(--rate)));
  width: 100%;
}

.fixed_frame_line:before {
  content: "";
  display: block;
  height: calc(100dvh - (30 * var(--rate)));
  position: sticky;
}

.fixed_frame_block {
  width: 100%;
  height: 3rem;
  background: var(--color-lp_bg)
}

@media (max-width: 780px) {
  .fixed_frame_area {
    display: none
  }
}

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

.sec_mv {}

.sec_mv .ttl_main {
  width: calc(780 * (var(--rate)));
}

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

.sec_intro {
  padding-bottom: calc(205 * (var(--rate)));
}

.sec_intro .ttl {
  width: calc(280 * (var(--rate)));
  margin: calc(100 * (var(--rate))) auto 0;
}

.sec_intro .accordion {
  margin-top: calc(45 * (var(--rate)));
  height: calc(670 * (var(--rate)));
}

.sec_intro .txt_wrap {}

.sec_intro .txt_wrap .txt {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(57.2/26);
}

.sec_intro .txt_wrap .txt:not(:first-of-type) {
  margin-top: calc(44 * (var(--rate)));
}

.sec_intro .btn_accordion {
  margin-top: calc(85 * (var(--rate)));
  margin-bottom: calc(120 * (var(--rate)));
}

.sec_intro .release_info_wrap {
  padding: calc(50 * (var(--rate))) 0 calc(55 * (var(--rate)));
  width: calc(620 * (var(--rate)));
  margin: 0 auto;
  position: relative;
}

.sec_intro .release_info_wrap::before,
.sec_intro .release_info_wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(to right,
      var(--color-lp_accent) 0,
      var(--color-lp_accent) 2px,
      /* 線分 4px */
      transparent 2px,
      transparent 4px
      /* 間隔 4px */
    );
}

.sec_intro .release_info_wrap::before {
  top: 0;
}

.sec_intro .release_info_wrap::after {
  bottom: 0;
}

.sec_intro .icon_cherry {
  position: absolute;
  width: calc(36 * (var(--rate)));
  height: calc(45 * (var(--rate)));
  top: calc(-30 * (var(--rate)));
  right: calc(30 * (var(--rate)));
}


.sec_intro .release_info_wrap dl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(30 * (var(--rate)));
}

.sec_intro .release_info_wrap dl:not(:first-of-type) {
  margin-top: calc(34 * (var(--rate)));
}

.sec_intro .release_info_wrap dt,
.sec_intro .release_info_wrap dd {
  font-size: calc(28 * (var(--rate)));
}

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

.sec_intro .release_info_wrap dd {
  color: #474443;
}

.sec_intro .ankerlink_wrap {
  margin-top: calc(118 * (var(--rate)));
}

.sec_intro .ankerlink_wrap ul {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: calc(30 * (var(--rate)));
}

.sec_intro .ankerlink_wrap li {}

.sec_intro .ankerlink_wrap li:nth-of-type(1) {
  width: calc(130 * (var(--rate)));
}

.sec_intro .ankerlink_wrap li:nth-of-type(2) {
  width: calc(170 * (var(--rate)));
  transition-delay: 0.3s;
}

.sec_intro .ankerlink_wrap li:nth-of-type(3) {
  width: calc(140 * (var(--rate)));
  transition-delay: 0.6s;
}

.sec_intro .ankerlink_wrap li:nth-of-type(4) {
  width: calc(120 * (var(--rate)));
  transition-delay: 0.9s;
}

.sec_intro .ankerlink_wrap li a {
  position: relative;
}

.sec_intro .ankerlink_wrap li a::after {
  content: "";
  position: absolute;
  width: calc(26 * var(--rate));
  height: calc(12 * var(--rate));
  background: url(../img/ankerlink_arrow.svg) no-repeat center / 100%;
  left: 50%;
  translate: -50% 0;
  margin-top: calc(13 * var(--rate));
}

.sec_intro .ankerlink_wrap li .ankerlink_img {}

.sec_intro .ankerlink_wrap li .ankerlink_txt {
  font-size: calc(30 * (var(--rate)));
  font-family: var(--font_en);
  color: var(--color-lp_accent);
  line-height: calc(42/30);
  letter-spacing: .025em;
  margin-top: calc(16 * (var(--rate)));
}

/* ========================================================
                      * sec_products  *
========================================================= */

.sec_products {
  background: var(--color-lp_bg_sub);
  position: relative;
}

.sec_products::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/line_sp.svg) no-repeat center / 100%;
  width: calc(780 * (var(--rate)));
  height: calc(25 * (var(--rate)));
  z-index: 1;
}

.sec_products .products {
  padding-bottom: calc(220 * (var(--rate)));
}

.sec_products .products02 {
  padding-bottom: calc(217 * (var(--rate)));
}

.sec_products .products03 {
  padding-bottom: calc(217 * (var(--rate)));
}

.sec_products .products:not(.products01) {}

.sec_products .products_visual {}

.sec_products .frame {
  width: calc(720 * (var(--rate)));
  border-radius: calc(80 * (var(--rate)));
  margin: 0 auto;
  background: var(--color-lp_white);
  position: relative;
}

.sec_products .frame::before {
  content: "";
  position: absolute;
  inset: calc(10 * (var(--rate)));
  /* ← 内側10px */
  border: 1px solid var(--color-lp_ttl);
  /* 線幅 */
  border-radius: calc(80 * var(--rate) - calc(10 * (var(--rate))));
  pointer-events: none;
}

.sec_products .frame_inner {
  padding: calc(120 * (var(--rate))) 0 calc(143 * (var(--rate)));
}

.sec_products .products04 .frame_inner {
  padding: calc(120 * (var(--rate))) 0 calc(132 * (var(--rate)));
}

.sec_products .ttl,
.sec_products .ttl a {
  font-size: calc(88 * (var(--rate)));
  font-family: var(--font_en);
  font-family: var(--font_en);
  line-height: calc(105/88);
  letter-spacing: .025em;
  color: var(--color-lp_ttl);
}

.lp_contents .slide_wrap {
  width: calc(580 * (var(--rate)));
  margin: calc(72 * (var(--rate))) auto 0;
  position: relative;
}

.lp_contents .slide_wrap li {
  width: calc(580 * (var(--rate)));
}

.lp_contents .contents_wrap .slide_tab {
  margin-top: calc(66 * (var(--rate)));
}

.lp_contents .contents_wrap .slide_tab ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(34 * (var(--rate)));
}

.lp_contents .contents_wrap .slide_tab li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: calc(72 * (var(--rate)));
  position: relative;
}

.lp_contents .contents_wrap .slide_tab {
  /* width: calc(50 * (var(--rate))); */
  /* height: calc(50 * (var(--rate))); */
  position: relative;
}

.lp_contents .contents_wrap .slide_tab li.active::before {
  content: "";
  width: calc(50 * (var(--rate)));
  height: 2px;
  background: var(--color-lp_ttl);
  position: absolute;
  bottom: calc(-25 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

.sec_products .modal_toggle {
  width: calc(100 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  background: url(../img/icon_modalopen.svg);
  background-repeat: no-repeat;
  background-size: calc(60 * (var(--rate))) calc(60 * (var(--rate)));
  background-position: center right;
  position: absolute;
  top: calc(627 * (var(--rate)));
  right: calc(36 * (var(--rate)));
  z-index: 2;
  cursor: pointer;
}

.sec_products .products_color_name {
  font-size: calc(36 * (var(--rate)));
  letter-spacing: .1em;
  color: var(--color-lp_ttl);
  margin-top: calc(105 * (var(--rate)));
}

.sec_products .products02 .products_color_name,
.sec_products .products03 .products_color_name {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(38.4/24);
  letter-spacing: .1em;
  color: var(--color-lp_ttl);
  margin-top: calc(22 * (var(--rate)));
}

.sec_products .products_txt {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(61.6/28);
  margin-top: calc(47 * (var(--rate)));
}

.sec_products .products02 .products_txt {
  margin-top: calc(60 * (var(--rate)));
}

.sec_products .products03 .products_txt {
  margin-top: calc(60 * (var(--rate)));
}

.sec_products .products04 .products_txt {
  margin-top: calc(65 * (var(--rate)));
}

.sec_products .products_price {
  font-size: calc(28 * (var(--rate)));
  margin-top: calc(83 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(60 * (var(--rate)));
}

.sec_products .products03 .products_price {
  margin-top: calc(80 * (var(--rate)));
}

.sec_products .products04 .products_price {
  margin-top: calc(80 * (var(--rate)));
}

.sec_products .products_price span {
  display: block;
  font-size: calc(28 * (var(--rate)));
}

.sec_products .products_price span:nth-of-type(1) {
  position: relative;
}

.sec_products .products_price span:nth-of-type(1)::before {
  content: "";
  background: #666666;
  width: 1px;
  height: calc(50 * (var(--rate)));
  position: absolute;
  top: 50%;
  right: calc(-30 * (var(--rate)));
  transform: translateY(-50%);
}

.sec_products .products_price span:nth-of-type(2) {
  letter-spacing: .1em;
}

.lp_contents .btn_buy {
  background: var(--color-lp_ttl);
  width: calc(480 * (var(--rate)));
  height: calc(106 * (var(--rate)));
  margin: 0 auto;
  margin-top: calc(58 * (var(--rate)));
}

.sec_products .products04 .btn_buy {
  margin-bottom: calc(100 * (var(--rate)));
}

.lp_contents .btn_buy a {
  font-size: calc(46 * (var(--rate)));
  font-family: var(--font_en);
  letter-spacing: .025em;
  color: var(--color-lp_white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: calc(93 * (var(--rate)));
  position: relative;
}

.lp_contents .btn_buy a::before {
  content: "";
  width: calc(24 * (var(--rate)));
  height: calc(30 * (var(--rate)));
  background: url(../img/btn_buy_arrow.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  right: calc(32 * (var(--rate)));
  transform: translateY(-50%);
}

.sec_products .products_img {
  width: calc(580 * (var(--rate)));
  margin: 0 auto;
  margin-top: calc(73 * (var(--rate)));
}

.sec_products .products_detail_wrap {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: calc(72 * (var(--rate)));
}

.sec_products .products04 .products_detail_wrap {
  flex-direction: column;
  align-items: center;
  padding-top: calc(100 * (var(--rate)));
  position: relative;
  width: calc(620 * (var(--rate)));
  margin: 0 auto;
}

.sec_products .products04 .products_detail_wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background-image: repeating-linear-gradient(to right,
      var(--color-lp_ttl) 0,
      var(--color-lp_ttl) 2px,
      /* 線分 4px */
      transparent 2px,
      transparent 4px
      /* 間隔 4px */
    );
  top: 0;
}

.sec_products .products04 .products_detail_inner:nth-of-type(1) {}

.sec_products .products04 .products_detail_inner:nth-of-type(2) {
  margin-top: calc(70 * (var(--rate)));
  transition-delay: 0.3s;
}

.sec_products .products04 .products_detail_inner:nth-of-type(3) {
  margin-top: calc(50 * (var(--rate)));
  transition-delay: 0.6s;
}

.sec_products .products04 .products_detail_inner:nth-of-type(4) {
  margin-top: calc(70 * (var(--rate)));
  transition-delay: 0.9s;
}

.sec_products .products_img_mini {
  width: calc(150 * (var(--rate)));
}

.sec_products .products03 .products_img_mini {
  width: calc(140 * (var(--rate)));
}

.sec_products .products04 .products_img_mini {
  width: calc(400 * (var(--rate)));
}

.sec_products .products_img_mini.color {
  width: calc(210 * (var(--rate)));
}

.sec_products .products_img_mini:nth-of-type(1) {
  margin-right: calc(30 * (var(--rate)));
}

.sec_products .products_img_mini:nth-of-type(2) {
  margin-right: calc(10 * (var(--rate)));
  transition-delay: 0.3s;
}

.sec_products .products_img_mini:nth-of-type(3) {
  transition-delay: 0.6s;
}

.sec_products .products04 .products_img_mini {
  margin: 0 auto;
}

.sec_products .products_detail_type {
  font-size: calc(34 * (var(--rate)));
  margin-top: calc(44 * (var(--rate)));
}

.sec_products .products_detail_txt {
  font-size: calc(22 * (var(--rate)));
  line-height: calc(44/22);
  margin-top: calc(18 * (var(--rate)));
}


/* ========================================================
                      * sec_look  *
========================================================= */

.sec_look {
  position: relative;
}

.sec_look::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(../img/line_sp.svg) no-repeat center / 100%;
  width: calc(780 * (var(--rate)));
  height: calc(25 * (var(--rate)));
  z-index: 1;
}

.sec_look .look {
  padding-top: calc(203 * (var(--rate)));
}

.sec_look .look02 {
  padding-top: calc(263 * (var(--rate)));
}

.sec_look .look_inner {
  width: calc(710 * (var(--rate)));
  margin: 0 auto;
}

.sec_look .ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sec_look .ttl span {
  /* display: block; */
  font-size: calc(160 * (var(--rate)));
  font-family: var(--font_en);
  color: var(--color-lp_accent);
}

.sec_look .ttl span:nth-of-type(1) {
  letter-spacing: .025em;
}

.sec_look .ttl span:nth-of-type(2) {
  letter-spacing: .05em;

}

.sec_look .slide_wrap {
  width: calc(690 * (var(--rate)));
  height: calc(1035 * (var(--rate)));
  margin: 0 auto;
  position: relative;
  margin-top: calc(7 * (var(--rate)));
}

.sec_look .slide_wrap::before {
  content: "";
  width: calc(710 * (var(--rate)));
  height: calc(1055 * (var(--rate)));
  background: var(--color-lp_accent);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.sec_look .slide_wrap li {
  width: calc(690 * (var(--rate)));
}

.sec_look .makup_order_wrap {
  margin-top: calc(175 * (var(--rate)));
}

.sec_look .look02 .makup_order_wrap {
  margin-top: calc(172 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_item {}

.sec_look .makup_order_wrap .makup_order_item ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  position: relative;
}

.sec_look .look02 .makup_order_wrap .makup_order_item ul li:last-child {
  grid-column: 1 / -1;
}


.sec_look .makup_order_wrap .makup_order_item ul::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  top: 0;
  background-image: repeating-linear-gradient(to right,
      var(--color-lp_accent) 0,
      var(--color-lp_accent) 2px,
      /* 線分 4px */
      transparent 2px,
      transparent 4px
      /* 間隔 4px */
    );
}

.sec_look .makup_order_wrap .makup_order_item li {
  position: relative;
}

.sec_look .makup_order_wrap .makup_order_item li a {
  display: flex;
  align-items: center;
  gap: calc(10 * (var(--rate)));
  padding: calc(31 * (var(--rate))) 0;
}

.sec_look .makup_order_wrap .makup_order_item li:nth-child(even) a {
  justify-content: flex-start;
  padding-left: calc(30 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_item li:nth-child(odd) a {
  justify-content: flex-end;
  padding-right: calc(30 * (var(--rate)));
}

.sec_look .look02 .makup_order_wrap .makup_order_item li:last-of-type a {
  justify-content: center;
  padding: calc(27 * (var(--rate))) 0 calc(32 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_item li::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  bottom: 0;
  background-image: repeating-linear-gradient(to right,
      var(--color-lp_accent) 0,
      var(--color-lp_accent) 2px,
      /* 線分 4px */
      transparent 2px,
      transparent 4px
      /* 間隔 4px */
    );
}

.sec_look .makup_order_wrap .makup_order_item li:nth-child(even)::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom,
      var(--color-lp_accent) 0,
      var(--color-lp_accent) 2px,
      /* 線分 */
      transparent 2px,
      transparent 4px
      /* 間隔 */
    );
}

.sec_look .makup_order_wrap .makup_order_item .makup_order_item_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(310 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_item li:nth-of-type(1) .makup_order_item_inner {}

.sec_look .makup_order_wrap .makup_order_item li:nth-of-type(2) .makup_order_item_inner {
  transition-delay: 0.3s;
}

.sec_look .makup_order_wrap .makup_order_item li:nth-of-type(3) .makup_order_item_inner {
  transition-delay: 0.6s;
}

.sec_look .makup_order_wrap .makup_order_item li:nth-of-type(4) .makup_order_item_inner {
  transition-delay: 0.9s;
}

.sec_look .makup_order_wrap .makup_order_item li:nth-of-type(5) .makup_order_item_inner {
  transition-delay: 1.2s;
}

.sec_look .makup_order_wrap .makup_order_item li:nth-of-type(6) .makup_order_item_inner {
  transition-delay: 1.5s;
}

.sec_look .look02 .makup_order_wrap .makup_order_item ul li:last-child .makup_order_item_inner {
  width: calc(430 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img {
  width: calc(130 * (var(--rate)));
  position: relative;
}

.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1000ms linear;
}

/* レイヤーが表示されたとき */
.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer {
  /* display: block; */
}

.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer.layer1,
.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer.layer2,
.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer.layer3,
.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer.layer5,
.sec_look .makup_order_wrap .makup_order_item .makup_order_item_img .item_pallet_img_layer.layer6 {
  /* display: none; */
  opacity: 0;
  /* 初期状態で非表示 */
}

.sec_look .makup_order_wrap .makup_order_item .makup_order_name {
  width: calc(170 * (var(--rate)));
  font-size: calc(22 * (var(--rate)));
  line-height: calc(39.6/22);
}

.sec_look .look02 .makup_order_wrap .makup_order_item ul li:last-child .makup_order_name {
  width: calc(290 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_list {
  margin-top: calc(74 * (var(--rate)));
}

.sec_look .makup_order_wrap .makup_order_list ol {
  width: calc(600 * (var(--rate)));
  margin: 0 auto;
}

.sec_look .makup_order_wrap .makup_order_list li {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(57.2/26);
  text-align: justify;
  /* counter-increment: num; */
  /* position: relative; */
  transition: opacity .3s cubic-bezier(0.51, 0.21, 0.41, 1),
    color .3s cubic-bezier(0.51, 0.21, 0.41, 1),
    background-color .3s cubic-bezier(0.51, 0.21, 0.41, 1),
    background-image .3s cubic-bezier(0.51, 0.21, 0.41, 1),
    border-color .3s cubic-bezier(0.51, 0.21, 0.41, 1),
    text-shadow .3s cubic-bezier(0.51, 0.21, 0.41, 1),
    text-weight .3s cubic-bezier(0.51, 0.21, 0.41, 1);
}

.sec_look .makup_order_wrap .makup_order_list li.active {
  color: var(--color-lp_accent);
}

.sec_look .makup_order_wrap .accordion {
  height: calc(385 * (var(--rate)));
}

.sec_look .btn_accordion {
  z-index: 0;
}

.sec_look .btn_accordion.is-open {
  margin-bottom: 0;
  padding-bottom: calc(15 * (var(--rate)));
}

.sec_look .look02 .btn_accordion.is-open {
  margin-top: calc(78 * (var(--rate)));
  padding-bottom: calc(7 * (var(--rate)));
}

.sec_look .btn_accordion::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(0 * (var(--rate)));
  transform: translateX(-50%);
  width: calc(780 * (var(--rate)));
  height: calc(469 * (var(--rate)));
  background: linear-gradient(-180deg, rgba(252, 242, 244, 0) 0%, rgba(252, 242, 244, 100%) 90%);
  display: block;
  z-index: -1;
}

.sec_look .btn_accordion.is-open::after {
  display: none;
}

.lp_contents .btn_all {
  margin-top: calc(222 * (var(--rate)));
}

.lp_contents .btn_all_inner {
  width: calc(570 * (var(--rate)));
  height: calc(230 * (var(--rate)));
  margin: 0 auto;
}

.lp_contents .btn_all a {
  font-size: calc(56 * (var(--rate)));
  font-family: var(--font_en);
  letter-spacing: .025em;
  color: var(--color-lp_accent);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.lp_contents .btn_all a::before {
  content: "";
  width: calc(570 * (var(--rate)));
  height: calc(230 * (var(--rate)));
  background: url(../img/btn_all_bg.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ========================================================
                      * slick  *
========================================================= */

.lp_contents .slick-dots {
  position: static;
  line-height: 0;
  display: flex !important;
  justify-content: center;
  gap: calc(40 * (var(--rate)));
}

.lp_contents .slick-dots li {
  margin: calc(55 * (var(--rate))) 0 0;
  width: calc(28 * (var(--rate)));
  height: calc(35 * (var(--rate)));
  background: url(../img/icon_cherry_opa.svg) no-repeat center / 100%;
  cursor: pointer;
}

.lp_contents .slick-dots li:first-child:last-child {
  display: none;
}

.lp_contents .slick-dots li.slick-active {
  background: url(../img/icon_cherry.svg) no-repeat center / 100%
}

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

.lp_contents .slick-dotted.slick-slider {
  margin: 0;
}


/* ========================================================
                      * modal  *
========================================================= */

.lp_contents .modal_toggle {
  cursor: pointer;
  transition: opacity .3s ease-in-out;
}

.lp_contents .modal_toggle:hover {
  opacity: 0.8;
}

html.no_scroll {
  overflow: hidden;
}

.lp_contents .modal_button {
  position: relative;
  cursor: pointer;
  z-index: 10;
}

.lp_contents .modal_button.btn_modalClose {
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
  background: url(../img/btn_close.svg);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border: none;
  float: right;
  /* position: sticky; */
  position: absolute;
  top: calc(32 * (var(--rate)));
  right: calc(30 * (var(--rate)));
  z-index: 9999;
}

.lp_contents .modal_outside.hide {
  opacity: 0;
  scale: 0.95;
  pointer-events: none;
  overflow-y: auto;
}

.lp_contents .modal_outside {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  opacity: 1;
  scale: 1;
  /* transition: opacity .5s; */
  transition: opacity .3s, scale .3s;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.lp_contents .modal_outside::-webkit-scrollbar {
  display: none;
}

.lp_contents .modal_outside::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: .5;
  content: "";
}

.lp_contents .modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.lp_contents .modal_wrap {
  width: calc(740 * ((var(--rate))));
  margin: 0 auto;
  max-height: calc(100dvh - (30 * var(--rate)));
  /* overflow-y: scroll; */
  -ms-overflow-style: none;
  scrollbar-width: none;
  will-change: transform;
  overflow: hidden;
  overflow-y: auto;
}

.lp_contents .modal_inner {
  position: relative;
  background: var(--color-lp_white);
}

.lp_contents .modal_outside.hide .modal_content {
  opacity: 0;
}

.lp_contents .modal_content {
  opacity: 1;
  padding: calc(120 * ((var(--rate)))) 0;
  overflow: visible;
  position: relative;
  transition: opacity .3s .5s;
}

.lp_contents .modal_content .slide_wrap {
  width: calc(740 * ((var(--rate))));
  margin-top: 0;
}

.lp_contents .modal_content .slide_wrap ul {}

.lp_contents .modal_content .slide_wrap li {
  width: calc(740 * ((var(--rate))));
}

.lp_contents .modal_content .slide_tab {
  margin-top: 0;
  position: absolute;
  top: calc(830 * ((var(--rate))));
  left: 50%;
  transform: translateX(-50%);
}

.lp_contents .modal_content .slide_tab ul {}

.lp_contents .modal_content .slide_tab li {
  width: calc(72 * ((var(--rate))));
}

.lp_contents .modal_content .modal_zoom_img {
  width: calc(640 * ((var(--rate))));
  height: calc(640 * ((var(--rate))));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--color-lp_ttl);
  position: relative;
  touch-action: none;
  cursor: grab;
}

.lp_contents .modal_content .modal_zoom_img.is-grabbing {
  cursor: grabbing;
}

.lp_contents .modal_content .btn_zoom {
  width: calc(60 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  background: url(../img/icon_zoom01.svg);
  background-repeat: no-repeat;
  background-size: calc(60 * (var(--rate))) calc(60 * (var(--rate)));
  background-position: center;
  position: absolute;
  bottom: calc(20 * (var(--rate)));
  right: calc(18 * (var(--rate)));
  z-index: 2;
  cursor: pointer;
}

.lp_contents .modal_content .btn_zoom.change {
  background: url(../img/icon_zoom02.svg);
  background-repeat: no-repeat;
  background-size: calc(60 * (var(--rate))) calc(60 * (var(--rate)));
  background-position: center;
}


.lp_contents .modal_content .pallet_img {
  width: calc(128 * ((var(--rate))));
  margin: calc(244 * ((var(--rate)))) auto 0;
}

.lp_contents .modal_content .txt_wrap {
  width: calc(580 * ((var(--rate))));
  margin: calc(44 * ((var(--rate)))) auto 0;
}

.lp_contents .modal_content .back .txt_wrap {
  margin: calc(231 * ((var(--rate)))) auto 0;
}

.lp_contents .modal_content .txt {
  font-size: calc(26 * ((var(--rate))));
  line-height: calc(57.2/26);
  text-align: justify;
}

.lp_contents .modal_content .txt:not(:first-of-type) {
  margin-top: calc(31 * ((var(--rate))));
}

.lp_contents .modal_content .btn_buy {
  width: calc(450 * (var(--rate)));
  height: calc(98 * (var(--rate)));
  margin-top: calc(70 * (var(--rate)));
}

.lp_contents .modal_content .btn_buy a {
  padding-right: calc(128 * (var(--rate)));
  font-size: calc(40 * (var(--rate)));
}

/* 矢印全体 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  position: absolute;
  top: calc(520 * (var(--rate)));
  width: calc(20 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  color: transparent;
  background: transparent;
  border: none;
  z-index: 2;
  cursor: pointer;
}

/* 左右位置 */
.lp_contents .slick-prev {
  left: calc(143 * (var(--rate)));
}

.lp_contents .slick-next {
  right: calc(143 * (var(--rate)));
}

/* デフォルト文字を完全に消す */
.lp_contents .slick-prev::before,
.lp_contents .slick-next::before {
  content: "";
  position: absolute;
  width: calc(20 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 矢印アイコン風の形 */
.lp_contents .slick-prev::before {
  background: url(../img/icon_slide_arrow.svg) no-repeat center / 100%;
  transform: translate(-50%, -50%) rotate(180deg);
}

.lp_contents .slick-next::before {
  background: url(../img/icon_slide_arrow.svg) no-repeat center / 100%;
}

.lp_contents .modal_content .slick-prev,
.lp_contents .modal_content .slick-next {
  top: calc(741 * (var(--rate)));
}

.lp_contents .modal_content .slick-prev {
  left: calc(220 * (var(--rate)));
}

.lp_contents .modal_content .slick-next {
  right: calc(220 * (var(--rate)));
}