@charset "UTF-8";

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

Eye Shadow Finder| 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%
  }

}

.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: 46.8rem;

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

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

  --color-lp_txt_font: #1f1f1f;
  --color-lp_ttl_font: #d1829a;
  --color-lp_item01: #fcecf6;
  --color-lp_item02: #faf5f3;
  --color-lp_white: #fff;
  --font_mix: "Lato", "ryo-gothic-plusn", sans-serif;
}

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

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

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

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

.lp_contents {
  width: 100%;
  /* max-width: var(--pcMainContentWidth); */
  height: 100%;
  font-family: var(--font_mix);
  font-weight: 300;
  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: 300;
}

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

.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;
  }

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

  .fixed_left_inner .logo {
    position: relative;
  }

  .fixed_left_inner .logo a {
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--color-lp_ttl_font);
  }

  .fixed_left_inner .logo a span {
    font-size: 1.8rem;
    margin-top: 1.5rem;
    display: block;
  }


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


/* 固定背景 */
.bgSetting {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100lvh;
}

.bgSetting .for_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.bgSetting .for_bg:nth-of-type(1) {
  background: #fdf4fa;
}

.bgSetting .for_bg:nth-of-type(2) {
  background: var(--color-lp_item02);
}

.bgSetting .for_bg.selected {
  opacity: 1;
}


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

.nav_toggle_btn {
  display: none;
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

.fixed_right .menu_list_wrap {}

.fixed_right .menu_list {}

.fixed_right .menu_list_icon {
  content: "";
  display: block;
  width: 4.8rem;
  height: 3.6rem;
  margin: 0 auto 1.1rem;
}

.fixed_right .menu_list.item01 {}

.fixed_right .menu_list.item02 {
  margin-top: 4rem;
}

.fixed_right .menu_list.rank {
  position: relative;
  margin-top: 4rem;
}

.fixed_right .menu_list.rank a {
  padding: 0 5rem 1.3rem 0;
}

.fixed_right .menu_list_ttl,
.fixed_right .menu_list_ttl a {
  font-size: 2rem;
  font-weight: 400;
  color: var(--color-lp_ttl_font);
}

.fixed_right .menu_list_wrap ul {
  margin-top: .6rem;
}

.fixed_right .menu_list_wrap li {}

.fixed_right .menu_list_wrap li a {
  text-align: left;
  font-size: 1.3rem;
  position: relative;
  padding: 1.5rem .9rem;
}

.fixed_right .menu_list_wrap li a::after,
.fixed_right .menu_list_wrap .rank a::after {
  content: "";
  mask: url(../img/icon_arrow.svg) no-repeat center / 100%;
  background: #666666;
  width: 1.1rem;
  height: .6rem;
  position: absolute;
  top: 1.8rem;
  right: .6rem;
  transform: rotate(-90deg);
}

.fixed_right .menu_list_wrap .rank a::after {
  background: var(--color-lp_ttl_font);
  top: .6rem;
}


.fixed_right .menu_list_wrap li a::before,
.fixed_right .menu_list_wrap .rank a::before {
  content: "";
  display: block;
  height: 1px;
  width: 19.3rem;
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;
  background: linear-gradient(to right,
      var(--color-lp_ttl_font) calc(4 * (var(--rate))),
      transparent calc(4 * (var(--rate))));
  background-size: calc(8 * (var(--rate))) auto;
  background-repeat: repeat-x;
  background-position: calc(4 * var(--rate)) 0;
}

@media (max-width: 780px) {

  .lp_contents .fixed_area .fixed_right {
    position: relative;
  }

  .nav_toggle_btn {
    display: block;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    left: calc(-60 * (var(--rate)));
    cursor: pointer;
    transition: transform .5s;
  }

  .nav_toggle_btn.hidden {
    transform: translate(100%, -50%);
  }

  .nav_toggle_btn .nav_toggle_inner {
    width: calc(60 * (var(--rate)));
    height: calc(180 * (var(--rate)));
    background: var(--color-lp_white);
    border: solid 1px var(--color-lp_ttl_font);
    border-radius: calc(20 * (var(--rate))) 0 0 calc(20 * (var(--rate)));
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .nav_toggle_btn p {
    font-size: calc(24 * (var(--rate)));
    font-weight: 400;
    color: var(--color-lp_ttl_font);
    writing-mode: sideways-lr;
    padding-top: calc(34 * (var(--rate)));
    position: relative;
  }

  .nav_toggle_btn .triangle {
    width: 0;
    height: 0;
    border-left: calc(10 * (var(--rate))) solid transparent;
    /* 底辺の半分 */
    border-right: calc(10 * (var(--rate))) solid transparent;
    /* 底辺の半分 */
    border-bottom: calc(17.32 * (var(--rate))) solid var(--color-lp_ttl_font);
    /* 高さ = √(20² - 10²) ≈ 17.32 */
    position: absolute;
    top: calc(35 * (var(--rate)));
    left: 50%;
    transform: translate(-50%, -50%) rotate(-90deg);
  }


  .nav_wrap.is-open .nav_toggle_btn .triangle {
    transform: translate(-50%, -50%) rotate(90deg);
    top: calc(48 * (var(--rate)));
  }

  /* SP時ナビゲーション設定 */
  .lp_contents .fixed_area .fixed_right .nav_wrap {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    width: calc(460 * (var(--rate)));
    /* translate: 0 100%; */
    /* opacity: 0; */
    transition: all .5s;
    z-index: 100;
    background: var(--color-lp_white);
    border: solid 1px var(--color-lp_ttl_font);
    border-right: none;
    border-radius: calc(40 * (var(--rate))) 0 0 calc(40 * (var(--rate)));
    padding-bottom: calc(78 * (var(--rate)));
  }

  .lp_contents .fixed_area .fixed_right .nav_wrap {
    transform: translateY(-50%) translateX(100%);
    transition: all 0.6s ease !important;
  }

  .lp_contents .fixed_area .fixed_right .nav_wrap.is-open {
    visibility: visible;
    transform: translateY(-50%) translateX(0);
    z-index: 99999;
  }

  .nav_wrap:has(.nav_toggle_btn.hidden) {
    transform: translateY(-50%) translateX(100%) !important;
  }

  .lp_contents::before {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-lp_ttl_font);
    content: "";
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
  }

  .lp_contents:has(.nav_wrap.is-open)::before {
    opacity: .3;
    pointer-events: all
  }

  .fixed_right .menu_list_icon {
    width: calc(80 * (var(--rate)));
    height: calc(60 * (var(--rate)));
    margin: 0 auto calc(16 * (var(--rate)));
  }

  .fixed_right .menu_list_ttl {
    font-size: calc(34 * (var(--rate)));
  }

  .fixed_right .menu_list_wrap li a {
    font-size: calc(24 * (var(--rate)));
    padding: calc(24 * (var(--rate))) calc(77 * (var(--rate))) calc(28 * (var(--rate)));
  }

  .fixed_right .menu_list_wrap li a::after,
  .fixed_right .menu_list_wrap .rank a::after {
    width: calc(22 * (var(--rate)));
    height: calc(12 * (var(--rate)));
    top: calc(30 * (var(--rate)));
    right: calc(75 * (var(--rate)));
  }

  .fixed_right .menu_list_wrap .rank a::after {
    top: calc(12 * (var(--rate)));
    right: calc(75 * (var(--rate)));
  }

  .fixed_right .menu_list.item01 {
    margin-top: calc(80 * (var(--rate)));
  }

  .fixed_right .menu_list.item02 {
    margin-top: calc(82 * (var(--rate)));
  }

  .fixed_right .menu_list_wrap ul {
    margin-top: calc(18 * (var(--rate)));
  }

  .fixed_right .menu_list.rank {
    margin-top: calc(77 * (var(--rate)));
  }

  .fixed_right .menu_list.rank a {
    padding: 0 calc(130 * (var(--rate))) calc(26 * (var(--rate))) 0;
  }

  .fixed_right .menu_list_wrap li a::before,
  .fixed_right .menu_list_wrap .rank a::before {
    width: calc(340 * (var(--rate)));
  }



}

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

.lp_contents .movie_wrap {
  width: calc(520 * (var(--rate)));
  height: calc(780 * (var(--rate)));
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

.lp_contents .movie_wrap iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  height: 140%;
  pointer-events: none;
  border: none;
}

.lp_contents .modal_toggle {
  width: calc(80 * (var(--rate)));
  height: calc(80 * (var(--rate)));
  background: url(../img/btn_modal.svg) no-repeat center / 100%;
  position: absolute;
  cursor: pointer;
  z-index: 10;
}

.btn_check {
  width: calc(240 * (var(--rate)));
  height: calc(66 * (var(--rate)));
  border-radius: calc(33 * (var(--rate)));
  background: var(--color-lp_item01);
  border: solid 1px var(--color-lp_ttl_font);
  margin: 0 auto;
}

.sec_item02 .btn_check {
  background: var(--color-lp_white);
}

.btn_check a {
  font-size: calc(30 * (var(--rate)));
  color: var(--color-lp_ttl_font);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: calc(23 * (var(--rate)));
}

.move_line {
  position: relative;
  overflow: hidden;
  display: flex;
  width: calc(70 * (var(--rate)));
  height: calc(14 * (var(--rate)));
  margin-top: calc(2 * (var(--rate)));
  margin-left: calc(12 * (var(--rate)));
}

.move_line::before,
.move_line::after {
  content: "";
  position: absolute;
  background: var(--color-lp_ttl_font);
  height: 1px;
}

.move_line::after {
  width: calc(14 * (var(--rate)));
  transform: rotate(-136deg);
  right: calc(0 * (var(--rate)));
  bottom: calc(5 * (var(--rate)));
}

.move_line::before {
  width: calc(75 * (var(--rate)));
  animation: extend 2s ease-in-out infinite;
  bottom: 0;
}

@keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }

  1% {
    transform: translateX(0);
    opacity: 0;
  }

  2% {
    width: 0vw;
    opacity: 1;
  }

  28% {
    transform: translateX(0);
  }

  32% {
    width: calc(70 * (var(--rate)));
  }

  90% {
    transform: translateX(calc(70 * (var(--rate))));
    width: calc(70 * (var(--rate)));
    opacity: 1;
  }

  91% {
    opacity: 0;
  }

  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

dt .accordion_btn_toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(40 * (var(--rate)));
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
}

dt .accordion_btn_toggle::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-lp_ttl_font);
  content: "";
  backface-visibility: hidden;
  transform: translateY(-50%);
}

dt.is-open .accordion_btn_toggle::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-lp_ttl_font);
  content: "";
  backface-visibility: hidden;
  transform: translateY(-50%);
}

dt .accordion_btn_toggle::after {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 100%;
  background: var(--color-lp_ttl_font);
  content: "";
  transition: .3s;
  transform: translateX(-50%);
}

dt.is-open .accordion_btn_toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}


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

.sec_intro {}

.sec_intro .inner {}

.sec_intro .mv_area {
  background: var(--color-lp_item01);
  padding-bottom: calc(40 * (var(--rate)));
}

.sec_intro .mv_area_img_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(4 * (var(--rate)));
}

.sec_intro .mv_area_img_wrap figure {
  width: calc(257 * (var(--rate)));
}

.sec_intro .mv_ttl {
  font-size: calc(46 * (var(--rate)));
  font-weight: 600;
  color: var(--color-lp_ttl_font);
  margin-top: calc(40 * (var(--rate)));
}

.sec_intro .mv_ttl.js-fadeup {
  transition-delay: .7s;
}

.sec_intro .mv_ttl span {
  font-size: calc(34 * (var(--rate)));
  display: block;
  margin-top: calc(25 * (var(--rate)));
}

.sec_intro .intro_area {
  padding-top: calc(107 * (var(--rate)));
}

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

.sec_intro .iconic_item_wrap {
  width: calc(740 * (var(--rate)));
  background: url(../img/iconic_item_wrap_frame.svg) no-repeat center top / 100%;
  margin: 0 auto;
  padding-top: calc(78 * (var(--rate)));
  padding-bottom: calc(94 * (var(--rate)));
}

.sec_intro .iconic_ttl {
  font-size: calc(42 * (var(--rate)));
  color: var(--color-lp_ttl_font);
  margin-bottom: calc(60 * (var(--rate)));
}

.sec_intro .iconic_img {
  width: calc(640 * (var(--rate)));
  margin: 0 auto;
  position: relative;
}

.sec_intro .iconic_img .modal_toggle {
  right: calc(0 * (var(--rate)));
  bottom: calc(0 * (var(--rate)));
  margin-right: calc(-15 * (var(--rate)));
  margin-bottom: calc(-33 * (var(--rate)));
}

.sec_intro .iconic_name {
  font-size: calc(36 * (var(--rate)));
  line-height: calc(57.6/36);
  margin-top: calc(60 * (var(--rate)));
}

.sec_intro .iconic_name span {
  font-size: calc(34 * (var(--rate)));
}

.sec_intro .iconic_price {
  font-size: calc(30 * (var(--rate)));
  margin-top: calc(30 * (var(--rate)));
}

.sec_intro .btn_check.iconic {
  margin-top: calc(43 * (var(--rate)));
}

.sec_intro .anker_link_wrap {
  background: #fdf4fa;
  margin-top: calc(116 * (var(--rate)));
}

.sec_intro .anker_link_wrap ul {
  display: flex;
  position: relative;
}

.sec_intro .anker_link_wrap ul::before {
  content: "";
  display: block;
  height: 1px;
  width: calc(194 * (var(--rate)));
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  transform-origin: center center;
  background: linear-gradient(to right,
      var(--color-lp_ttl_font) calc(4 * (var(--rate))),
      transparent calc(4 * (var(--rate))));
  background-size: calc(8 * (var(--rate))) auto;
  background-repeat: repeat-x;
  background-position: calc(4 * var(--rate)) 0;
}


.sec_intro .anker_link_wrap li {
  width: calc(100%/2);
}

.sec_intro .anker_link_wrap a {
  color: var(--color-lp_ttl_font);
  font-size: calc(34 * (var(--rate)));
  position: relative;
  padding-bottom: calc(40 * (var(--rate)));
}

.sec_intro .anker_link_wrap li:nth-of-type(2) a {
  transition-delay: 0.3s;
}

.sec_intro .anker_link_wrap a::after {
  content: "";
  display: block;
  margin: 0 auto;
}

.sec_intro .anker_link_wrap a figure {
  width: calc(140 * (var(--rate)));
  height: calc(105 * (var(--rate)));
  margin: 0 auto;
  margin-top: calc(36 * (var(--rate)));
  margin-bottom: calc(22 * (var(--rate)));
  position: relative;
}

.sec_intro .anker_link_wrap a figure img {
  width: calc(140 * (var(--rate)));
  height: calc(105 * (var(--rate)));
  position: absolute;
  inset: 0;
}

.sec_intro .anker_link_wrap a figure img:nth-of-type(1) {
  z-index: 2;
}

.sec_intro .anker_link_wrap a figure img:nth-of-type(2) {
  width: calc(140 * (var(--rate)));
  height: calc(105 * (var(--rate)));
  z-index: 1;
}

.sec_intro .anker_link_wrap a figure img:nth-of-type(1):hover {
  opacity: 0;
}

.sec_intro .anker_link_wrap a::after {
  width: calc(24 * (var(--rate)));
  height: calc(12 * (var(--rate)));
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
  margin-top: calc(20 * (var(--rate)));
}


/* ========================================================
                      * sec_item  *
========================================================= */

.sec_item {
  padding-top: calc(160 * (var(--rate)));
}

.sec_item.sec_item02 {
  background: var(--color-lp_item02);
  padding-top: calc(140 * (var(--rate)));
}

.sec_item .anker_link_wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* left: 50%; */
  transform: translateY(-100%);
  z-index: 20;
  padding: calc(30 * (var(--rate))) 0;
  transition: transform .5s ease;
  /* opacity: 0; */
  /* visibility: hidden; */
}

.sec_item .anker_link_wrap.is-active {
  transform: translateY(0);
  /* opacity: 1; */
  /* visibility: visible; */
}

.sec_item .anker_link_wrap ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(20 * (var(--rate)));
}

.sec_item .anker_link_wrap li {
  background: var(--color-lp_item01);
  border-radius: calc(20 * (var(--rate)));
  border: 1px solid var(--color-lp_ttl_font);
  box-shadow: calc(5 * (var(--rate))) calc(5 * (var(--rate))) calc(5 * (var(--rate))) rgba(0, 0, 0, 0.2);
}

.sec_item .anker_link_wrap a {
  font-size: calc(30 * (var(--rate)));
  font-weight: 600;
  color: var(--color-lp_ttl_font);
  padding: calc(26 * (var(--rate))) 0 calc(24 * (var(--rate)));
  white-space: nowrap;
}

.sec_item .anker_link_wrap li:nth-of-type(1) a {
  padding-inline: calc(19 * (var(--rate))) calc(15 * (var(--rate)));
}

.sec_item .anker_link_wrap li:nth-of-type(2) a {
  padding-inline: calc(14 * (var(--rate))) calc(10 * (var(--rate)));
}

.sec_item .anker_link_wrap li:nth-of-type(3) a {
  padding-inline: calc(10 * (var(--rate))) calc(10 * (var(--rate)));
}

.sec_item .anker_link_wrap a span {
  font-size: calc(24 * (var(--rate)));
  font-weight: 400;
  display: block;
  margin-top: calc(13 * (var(--rate)));
}

.sec_item .inner {}

.sec_item .item_ttl {
  font-size: calc(72 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
}

.sec_item .item_price {
  font-size: calc(32 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
  margin-top: calc(42 * (var(--rate)));
}

.sec_item .item_lead {
  font-size: calc(28 * (var(--rate)));
  line-height: calc(56/28);
  margin-top: calc(46 * (var(--rate)));
}

.sec_item .item_all .slide_wrap {
  width: calc(440 * (var(--rate)));
  margin: calc(71 * (var(--rate))) auto 0;
}

.sec_item .slide_wrap ul {}

.sec_item .item_all .slide_wrap li {}

.sec_item .slide_wrap li .item_name {
  font-size: calc(30 * (var(--rate)));
  margin-top: calc(62 * (var(--rate)));
}

.sec_item .slide_wrap li .btn_check {
  margin-top: calc(52 * (var(--rate)));
}

.sec_item .color_variation_txt {
  font-size: calc(32 * (var(--rate)));
  margin-top: calc(92 * (var(--rate)));
  padding-right: calc(40 * (var(--rate)));
  position: relative;
}

.sec_item .color_variation_txt::before {
  content: "";
  width: calc(444 * (var(--rate)));
  height: 1px;
  background: currentColor;
  position: absolute;
  bottom: calc(-30 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  transition: transform 2s ease;
}

.sec_item .color_variation_txt.js-moveline.is-show::before {
  transform: translateX(-50%) scaleX(1);
}

.sec_item .color_variation_txt::after {
  content: "";
  mask: url(../img/icon_arrow.svg) no-repeat center / 100%;
  background: #666666;
  width: calc(26 * (var(--rate)));
  height: calc(14 * (var(--rate)));
  position: absolute;
  top: calc(10 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  margin-left: calc(170 * (var(--rate)));
}

.sec_item .accordion_wrap {}

.sec_item .accordion_wrap.features_wrap {
  margin-top: calc(170 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap {
  margin-top: calc(18 * (var(--rate)));
}

.sec_item02 .accordion_wrap.variation_wrap {
  margin-top: calc(21 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dl {}

.sec_item .accordion_wrap .accordion_head {
  background: #fdf4fa;
  padding: calc(49 * (var(--rate))) 0 calc(53 * (var(--rate)));
  position: relative;
  cursor: pointer;
}

.sec_item.sec_item02 .accordion_wrap dt {
  background: var(--color-lp_white);
}

.sec_item .accordion_wrap dt .accordion_ttl {
  font-size: calc(56 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
}

.sec_item .accordion_wrap dt .accordion_ttl_sub {
  font-size: calc(36 * (var(--rate)));
  color: var(--color-lp_ttl_font);
  margin-top: calc(30 * (var(--rate)));
}

.sec_item .accordion_wrap dt .accordion_btn_toggle {}

/* .sec_item .accordion_wrap dd {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
} */


.sec_item .accordion_wrap dd {
  height: 0;
  overflow: hidden;
  transition: height 0.5s ease;
}

.sec_item .accordion_wrap.features_wrap dd {
  padding-inline: calc(69 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dd ol {
  counter-reset: item;
  padding-top: calc(88 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dd ol li {
  counter-increment: item;
  position: relative;
  margin-bottom: calc(100 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dd ol li:last-of-type {
  margin-bottom: calc(131 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dd ol li::before {
  content: counter(item);
  position: absolute;
  top: calc(40 * (var(--rate)));
  left: calc(14 * (var(--rate)));
  font-size: calc(62 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
}

.sec_item .accordion_wrap.features_wrap dd ol li::after {
  content: "";
  position: absolute;
  top: calc(113 * (var(--rate)));
  left: calc(0 * (var(--rate)));
  width: calc(62 * (var(--rate)));
  /* ← 下線の長さ自由 */
  height: 2px;
  background: var(--color-lp_ttl_font);
}

.sec_item .accordion_wrap.features_wrap dd li .features_lead {
  font-size: calc(42 * (var(--rate)));
  color: var(--color-lp_ttl_font);
  line-height: calc(63/42);
  text-align: justify;
  padding-left: calc(94 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dd li figure {
  width: calc(520 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

.sec_item .accordion_wrap.features_wrap dd li .movie_wrap {
  margin-top: calc(59 * (var(--rate)));
}

.sec_item .accordion_wrap.features_wrap dd li .features_txt {
  font-size: calc(30 * (var(--rate)));
  line-height: calc(54/30);
  text-align: justify;
  margin-top: calc(61 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap dd {
  /* padding-inline: calc(25 * (var(--rate))); */
}

.sec_item .accordion_wrap.variation_wrap .color_variation_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(94 * (var(--rate))) calc(30 * (var(--rate)));
  margin-top: calc(100 * (var(--rate)));
  margin-bottom: calc(129 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap .variation_item {
  width: calc(350 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap .variation_item:nth-of-type(even) {
  transition-delay: 0.3s;
}

.sec_item .accordion_wrap.variation_wrap .variation_slide {
  position: relative;
  width: calc(350 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap dd>ul li * {
  text-align: justify;
}

.accordion_wrap.variation_wrap .variation_slide .slick-slide {
  width: calc(350 * (var(--rate)));
  border-radius: calc(40 * (var(--rate)));
  overflow: hidden;
  margin-left: calc(10 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap .modal_toggle {
  width: calc(70 * (var(--rate)));
  height: calc(70 * (var(--rate)));
  top: calc(317 * (var(--rate)));
  right: calc(-10 * (var(--rate)));
}

.accordion_wrap.variation_wrap .slide_wrap ul ul {}

.accordion_wrap.variation_wrap .slide_wrap ul li {}

.accordion_wrap.variation_wrap .slide_wrap ul .modal_toggle {
  width: calc(70 * (var(--rate)));
  height: calc(70 * (var(--rate)));
  top: calc(313 * (var(--rate)));
  right: calc(-10 * (var(--rate)));
}

.accordion_wrap.variation_wrap .slide_wrap ul .swiper-pagination {}

.sec_item .accordion_wrap.variation_wrap dd .variation_txt_wrap {
  padding-left: calc(10 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap dd .variation_tag {
  font-size: calc(22 * (var(--rate)));
  border-radius: calc(20 * (var(--rate)));
  width: fit-content;
  margin-top: calc(120 * (var(--rate)));
  margin-top: calc(120 * (var(--rate)));
  padding: calc(9 * (var(--rate))) calc(27 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap dd .variation_tag.cool {
  background: #fae3f1;
}

.sec_item .accordion_wrap.variation_wrap dd .variation_tag.warm {
  background: #f3dcd2;
  padding: calc(9 * (var(--rate))) calc(22 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap dd .variation_name {
  font-size: calc(30 * (var(--rate)));
  margin-top: calc(22 * (var(--rate)));
}

.sec_item .accordion_wrap.variation_wrap dd .variation_txt {
  font-size: calc(24 * (var(--rate)));
  line-height: calc(40.8/24);
  margin-top: calc(28 * (var(--rate)));
}

.sec_item .choice_colors_wrap {
  background: #fdf4fa;
  padding: calc(80 * (var(--rate))) 0;
}

.sec_item.sec_item02 .choice_colors_wrap {
  background: var(--color-lp_white);
  padding: calc(84 * (var(--rate))) 0;
}

.sec_item .choice_colors_wrap .choice_colors_ttl {
  font-size: calc(50 * (var(--rate)));
  color: var(--color-lp_ttl_font);
  font-weight: 500;
}

.sec_item .choice_colors_wrap .choice_colors_ttl_sub {
  font-size: calc(30 * (var(--rate)));
  margin-top: calc(40 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area {
  margin-top: calc(80 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area .choice_compare {
  display: flex;
  justify-content: center;
  gap: calc(30 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area .choice_single_wrap.choice_2nd {
  transition-delay: 0.3s;
}

.sec_item .choice_colors_wrap .choice_area .choice_single {
  position: relative;
  width: calc(340 * (var(--rate)));
  height: calc(340 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area .choice_single ul {}

.sec_item .choice_colors_wrap .choice_area .choice_single li {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}

.sec_item .choice_colors_wrap .choice_area .choice_single li.active {
  opacity: 1;
  pointer-events: auto;
}

.sec_item .choice_colors_wrap .choice_area .choice_single .choice_single_item {
  width: calc(340 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area .choice_list li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: calc(10 * (var(--rate)));
  padding: calc(18 * (var(--rate))) 0;
  background: var(--color-lp_white);
  cursor: pointer;
}

.sec_item .choice_colors_wrap .choice_area .choice_list li:not(:last-of-type) {
  border-bottom: solid 1px #bdbdbd;
}

.sec_item .choice_colors_wrap .choice_area .choice_name {
  font-size: calc(30 * (var(--rate)));
  margin-top: calc(40 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area ul li dl {}

.sec_item .choice_colors_wrap .choice_area ul li dt {
  position: relative;
  cursor: pointer;
  border: solid var(--color-lp_ttl_font) 1px;
  margin-top: calc(37 * (var(--rate)));
  background: var(--color-lp_white);
  transition: background-color .5s ease;
}

.sec_item .choice_colors_wrap .choice_area ul li dt.is-open {
  background: var(--color-lp_ttl_font);
}


.sec_item .choice_colors_wrap .choice_area ul li dt .accordion_btn_toggle {
  width: calc(30 * (var(--rate)));
  height: calc(30 * (var(--rate)));
  right: calc(14 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area ul li dt .choice_ttl {
  font-size: calc(30 * (var(--rate)));
  padding: calc(23 * (var(--rate))) 0;
  transition: color .5s ease;
}

.sec_item .choice_colors_wrap .choice_area ul li dt.is-open .choice_ttl {
  color: var(--color-lp_white);
}

.sec_item .choice_colors_wrap .choice_area ul li dt.is-open .accordion_btn_toggle::before,
.sec_item .choice_colors_wrap .choice_area ul li dt.is-open .accordion_btn_toggle::after {
  background: var(--color-lp_white);
}

.sec_item .choice_colors_wrap .choice_area ul li dd.is-open {
  /* transition: all .5s;
  height: 0;
  overflow: hidden; */
  /* max-height: 1000px; */
}

.sec_item .choice_colors_wrap .choice_area ul li dd ul {}

.sec_item .choice_colors_wrap .choice_area .choice_list {
  border: solid 1px #bdbdbd;
}

.sec_item .choice_colors_wrap .choice_area .choice_list figure {
  width: calc(80 * (var(--rate)));
  margin-left: calc(20 * (var(--rate)));
}

.sec_item .choice_colors_wrap .choice_area .choice_list .choice_color_name {
  font-size: calc(24 * (var(--rate)));
  text-align: justify;
  line-height: calc(36/30);
}

.sec_item .choice_colors_wrap .choice_area .choice_list .choice_color_name span {
  font-size: calc(30 * (var(--rate)));
}


.sec_item .color_map_wrap {
  width: calc(750 * (var(--rate)));
  height: calc(1174 * (var(--rate)));
  border: 1px solid var(--color-lp_ttl_font);
  margin: calc(136 * (var(--rate))) auto 0;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
  cursor: grab;
}

.sec_item02 .color_map_wrap {
  height: calc(1054 * (var(--rate)));
}

.sec_item .color_map_inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 0.1s ease-out;
}

.sec_item .color_map_inner::before {
  content: "";
  background: url(../img/color_map_bg01.png) no-repeat center / 100%;
  width: calc(719 * (var(--rate)));
  height: calc(960 * (var(--rate)));
  position: absolute;
  inset: 0;
  top: calc(150 * (var(--rate)));
  left: calc(17 * (var(--rate)));
}

.sec_item02 .color_map_inner::before {
  background: url(../img/color_map_bg02.png) no-repeat center / 100%;
  height: calc(840 * (var(--rate)));
}

.sec_item .color_map_inner.is-grabbing {
  cursor: grabbing;
}

.sec_item .color_map_wrap .color_map_ttl {
  font-size: calc(56 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
  padding-top: calc(58 * (var(--rate)));
}

.sec_item .color_map_wrap .color_map_item {}

.sec_item .color_map_wrap .color_map_item ul {}

.sec_item .color_map_wrap .color_map_item li {
  position: absolute;
  width: calc(96 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(1) {
  top: calc(691 * (var(--rate)));
  right: calc(196 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(2) {
  top: calc(271 * (var(--rate)));
  left: calc(145 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(3) {
  top: calc(891 * (var(--rate)));
  left: calc(145 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(4) {
  top: calc(219 * (var(--rate)));
  right: calc(255 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(5) {
  top: calc(449 * (var(--rate)));
  left: calc(245 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(6) {
  top: calc(829 * (var(--rate)));
  right: calc(135 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(7) {
  top: calc(640 * (var(--rate)));
  right: calc(296 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(8) {
  top: calc(289 * (var(--rate)));
  right: calc(106 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(9) {
  top: calc(419 * (var(--rate)));
  right: calc(105 * (var(--rate)));
}

.sec_item01 .color_map_wrap .color_map_item li:nth-of-type(10) {
  top: calc(690 * (var(--rate)));
  left: calc(245 * (var(--rate)));
}

.sec_item02 .color_map_wrap .color_map_item li:nth-of-type(1) {
  top: calc(764 * (var(--rate)));
  left: calc(235 * (var(--rate)));
}

.sec_item02 .color_map_wrap .color_map_item li:nth-of-type(2) {
  top: calc(564 * (var(--rate)));
  left: calc(260 * (var(--rate)));
}

.sec_item02 .color_map_wrap .color_map_item li:nth-of-type(3) {
  top: calc(564 * (var(--rate)));
  right: calc(260 * (var(--rate)));
}

.sec_item02 .color_map_wrap .color_map_item li:nth-of-type(4) {
  top: calc(389 * (var(--rate)));
  left: calc(325 * (var(--rate)));
}

.sec_item02 .color_map_wrap .color_map_item li:nth-of-type(5) {
  top: calc(260 * (var(--rate)));
  left: calc(175 * (var(--rate)));
}

.sec_item .color_map_wrap .color_map_item figure {}

.sec_item .color_map_wrap .color_map_item .num {
  font-size: calc(22 * (var(--rate)));
  margin-top: calc(15 * (var(--rate)));
}

.sec_item .color_map_wrap .btn_zoom {
  width: calc(150 * (var(--rate)));
  height: calc(150 * (var(--rate)));
  background: url(../img/btn_zoomout.svg);
  background-repeat: no-repeat;
  background-size: calc(50 * (var(--rate))) calc(50 * (var(--rate)));
  background-position: center;
  position: absolute;
  bottom: calc(-22 * (var(--rate)));
  right: calc(-26 * (var(--rate)));
  z-index: 2;
  cursor: pointer;
}

.sec_item .color_map_wrap .btn_zoom.change {
  background: url(../img/btn_zoomin.svg);
  background-repeat: no-repeat;
  background-size: calc(50 * (var(--rate))) calc(50 * (var(--rate)));
  background-position: center;
}

.sec_item .btn_all {
  width: calc(520 * (var(--rate)));
  height: calc(110 * (var(--rate)));
  border-radius: calc(55 * (var(--rate)));
  background: var(--color-lp_item01);
  border: solid 1px var(--color-lp_ttl_font);
  margin: calc(120 * (var(--rate))) auto 0;
}

.sec_item.sec_item02 .btn_all {
  background: var(--color-lp_white);
}

.sec_item .btn_all a {
  font-size: calc(42 * (var(--rate)));
  color: var(--color-lp_ttl_font);
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec_item .btn_all .move_line {
  width: calc(160 * (var(--rate)));
  height: calc(15 * (var(--rate)));
  margin-top: calc(13 * (var(--rate)));
}

.sec_item .btn_all .move_line::before {
  width: calc(153 * (var(--rate)));
  animation: extend02 2s ease-in-out infinite;
}

.sec_item .btn_all .move_line::after {
  width: calc(30 * (var(--rate)));
  right: calc(-9 * (var(--rate)));
}

@keyframes extend02 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }

  1% {
    transform: translateX(0);
    opacity: 0;
  }

  2% {
    width: 0vw;
    opacity: 1;
  }

  28% {
    transform: translateX(0);
  }

  32% {
    width: calc(160 * (var(--rate)));
  }

  90% {
    transform: translateX(calc(160 * (var(--rate))));
    width: calc(160 * (var(--rate)));
    opacity: 1;
  }

  91% {
    opacity: 0;
  }

  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

.sec_user_voice {
  padding-top: calc(202 * (var(--rate)));
  padding-bottom: calc(200 * (var(--rate)));
}

.sec_user_voice02 {
  background: var(--color-lp_item02);
}

.sec_user_voice .user_voice_wrap {}

.sec_user_voice .user_voice_wrap .user_voice_ttl {
  font-size: calc(62 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
  margin-bottom: calc(40 * (var(--rate)));
}

.sec_user_voice .product-slide-section__title {
  font-size: calc(36 * (var(--rate)));
  font-weight: 400;
}

.sec_user_voice .ecbn-selection-description.vsm-selection-description {
  /* margin: 0; */
  font-size: calc(28 * (var(--rate)));
}

.sec_user_voice01 .ecbn-selection-description.vsm-selection-description span {
  display: none;
}

.sec_user_voice .ecbn-selection-description.vsm-selection-description span {
  /* display: none; */
}

.sec_user_voice .ecbn-selection-to-nextpage.vsm-selection-to-nextpage {
  display: none;
}

/* ========================================================
                      * sec_item  *
========================================================= */

.sec_rank {
  padding-top: calc(140 * (var(--rate)));
  padding-bottom: calc(240 * (var(--rate)));
  overflow: clip;
}

.sec_rank .rank_ttl {
  font-size: calc(62 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_ttl_font);
}

.sec_rank .slide_wrap {
  margin-top: calc(83 * (var(--rate)));
  margin-left: calc(30 * (var(--rate)));
}

.sec_rank .slide_wrap ul {
  transition-timing-function: linear;
}

.sec_rank .slide_wrap li {
  width: calc(400 * (var(--rate)));
  border: solid 1px var(--color-lp_ttl_font);
  position: relative;
  padding-bottom: calc(60 * (var(--rate)));
  margin-right: calc(30 * (var(--rate)));
}

.sec_rank .slide_wrap .rank_num {
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  margin-left: calc(18 * (var(--rate)));
  border-radius: 0 0 calc(33 * (var(--rate))) calc(33 * (var(--rate)));
  padding: calc(20 * (var(--rate))) calc(20 * (var(--rate)));
}

.sec_rank .slide_wrap .rank_num span {
  font-size: calc(34 * (var(--rate)));
  font-weight: 400;
  color: var(--color-lp_white);
}

.sec_rank .slide_wrap .rank01 .rank_num,
.sec_rank .slide_wrap .item_rank1 .rank_num {
  background: #b29d18;
}

.sec_rank .slide_wrap .rank02 .rank_num,
.sec_rank .slide_wrap .item_rank2 .rank_num {
  background: #979797;
}

.sec_rank .slide_wrap .rank03 .rank_num,
.sec_rank .slide_wrap .item_rank3 .rank_num {
  background: #aa674e;
}

.sec_rank .slide_wrap .rank04 .rank_num,
.sec_rank .slide_wrap .item_rank4 .rank_num,
.sec_rank .slide_wrap .item_rank5 .rank_num {
  background: #c8c8c8;
}

.sec_rank .slide_wrap figure {
  width: calc(357 * (var(--rate)));
  margin: calc(20 * (var(--rate))) auto 0;
}

.sec_rank .slide_wrap .rank_item_name {
  margin-top: calc(20 * (var(--rate)));
  padding-inline: calc(40 * (var(--rate)));
}

.sec_rank .slide_wrap .rank_item_name a {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(41.6/26);
  letter-spacing: 0.125em;
}

.sec_rank .slide_wrap .rank_item_price {
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.125em;
  margin-top: calc(33 * (var(--rate)));
}

.sec_rank .slide_wrap .btn_check {
  width: calc(200 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  border-radius: calc(30 * (var(--rate)));
  margin-top: calc(43 * (var(--rate)));
}

.sec_rank .slide_wrap .btn_check a {
  font-size: calc(26 * (var(--rate)));
  justify-content: center;
  padding-left: calc(0 * (var(--rate)));
}


/* ========================================================
            * スライダー　パーツ  矢印 *
========================================================= */

/* 共通 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  all: unset;
  position: absolute;
  top: calc(126 * (var(--rate)));
  width: calc(32 * (var(--rate)));
  height: calc(82 * (var(--rate)));
  cursor: pointer;
  z-index: 10;
  background: url(../img/slide_arrow.svg) no-repeat center / 100%;
}

/* デフォルト文字削除 */
.lp_contents .slick-prev,
.lp_contents .slick-next {
  font-size: 0;
  line-height: 0;
}

/* デフォのアイコン消す */
.lp_contents .slick-prev::before,
.lp_contents .slick-next::before {
  content: none;
}

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

/* 左（反転） */
.lp_contents .slick-prev {
  top: calc(163 * (var(--rate)));
  left: calc(-90 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1);
}


/* バリエーションエリアのスライドパーツ */
.lp_contents .variation_slide .slick-prev,
.lp_contents .variation_slide .slick-next {
  all: unset;
  position: absolute;
  top: calc(415 * (var(--rate)));
  width: calc(30 * (var(--rate)));
  height: calc(15 * (var(--rate)));
  cursor: pointer;
  z-index: 10;
  background: url(../img/icon_arrow.svg) no-repeat center / 100%;
}

/* デフォルト文字削除 */
.lp_contents .variation_slide .slick-prev,
.lp_contents .variation_slide .slick-next {
  font-size: 0;
  line-height: 0;
}

/* デフォのアイコン消す */
.lp_contents .variation_slide .slick-prev::before,
.lp_contents .variation_slide .slick-next::before {
  content: none;
}

/* 右 */
.lp_contents .variation_slide .slick-next {
  top: calc(407 * (var(--rate)));
  right: calc(80 * (var(--rate)));
  transform: rotate(-90deg);
}

/* 左（反転） */
.lp_contents .variation_slide .slick-prev {
  left: calc(80 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1) rotate(-90deg);
}

/* ========================================================
            * スライダー　パーツ  dots *
========================================================= */

/* 全体 */
.lp_contents .slick-dots {
  all: unset;
  display: flex;
  justify-content: center;
  gap: calc(15 * (var(--rate)));
  margin-top: calc(63 * (var(--rate)));
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* li */
.lp_contents .slick-dots li {
  all: unset;
}

/* 横棒 */
.lp_contents .slick-dots li button {
  all: unset;
  display: block;
  width: calc(50 * (var(--rate)));
  /* 長さ調整 */
  height: 2px;
  /* 太さ調整 */
  background: #e3b4c2;
  cursor: pointer;
  font-size: 0;
  /* 数字消す */
}

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

/* アクティブ */
.lp_contents .slick-dots li.slick-active button {
  background: var(--color-lp_ttl_font);
}

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

.sec_intro .mv_area_img_wrap .js-fademv {
  opacity: 0;
}

.sec_intro .mv_area_img_wrap .js-fademv.is-show {
  opacity: 1;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(1) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.20s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(2) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.50s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(3) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.35s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(4) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.65s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(5) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.25s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(6) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.70s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(7) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.40s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(8) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.60s;
}

.sec_intro .mv_area_img_wrap .js-fademv:nth-of-type(9) {
  transition: opacity 0.35s cubic-bezier(0.55, 0.05, 0.675, 0.19) 0.30s;
}


.js-fadeup {
  opacity: 0;
  transform: translateY(30px);
  transition: 1s;
}

.js-fadeup.is-show {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 780px) {

  .fixed_right.js-fadeup {
    opacity: 1;
    transform: unset;
  }
}

/* ========================================================
                      * 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: var(--color-lp_ttl_font);
  opacity: .3;
  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 .zoom_area {
  width: calc(580 * ((var(--rate))));
  height: calc(580 * ((var(--rate))));
  margin: 0 auto;
  border: 1px solid var(--color-lp_ttl_font);
  overflow: hidden;
  position: relative;
  touch-action: none;
  cursor: grab;
}

.lp_contents .modal_content .zoom_area img {
  transition: transform 0.1s ease-out;
}

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

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

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

.lp_contents .contents_wrap .slide_tab {
  margin: calc(48 * (var(--rate))) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: calc(20 * (var(--rate)));
  padding-bottom: calc(72 * (var(--rate)));
  width: calc(580 * ((var(--rate))));
}

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

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

.lp_contents .contents_wrap .slide_tab li::before {
  content: "";
  width: calc(70 * (var(--rate)));
  height: 2px;
  background: var(--color-lp_ttl_font);
  position: absolute;
  bottom: calc(-20 * (var(--rate)));
  /* left: 50%; */
  /* transform: translateX(-50%); */
  rotate: y 90deg;
  transition: rotate .3s ease-in-out;
}

.lp_contents .contents_wrap .slide_tab li.active::before {
  rotate: y 0deg;
}

.lp_contents .modal_content .modal_item_name {
  font-size: calc(30 * (var(--rate)));
  font-weight: 400;
  line-height: calc(48/30);
  text-align: justify;
  white-space: nowrap;
}

.lp_contents .modal_content .modal_txt_wrap {
  padding-inline: calc(109 * (var(--rate)));
}

.lp_contents .modal_content .modal_item_lead {
  font-size: calc(30 * (var(--rate)));
  line-height: calc(54/30);
  color: var(--color-lp_ttl_font);
  text-align: justify;
  padding: calc(36 * (var(--rate))) 0 calc(47 * (var(--rate)));
  position: relative;
}

.lp_contents .modal_content .modal_item_lead::before,
.lp_contents .modal_content .modal_item_lead::after {
  content: "";
  display: block;
  height: 1px;
  width: calc(580 * (var(--rate)));
  z-index: 1;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;
  background: linear-gradient(to right,
      var(--color-lp_ttl_font) calc(4 * (var(--rate))),
      transparent calc(4 * (var(--rate))));
  background-size: calc(8 * (var(--rate))) auto;
  background-repeat: repeat-x;
  background-position: calc(4 * var(--rate)) 0;
}

.lp_contents .modal_content .modal_item_lead::before {
  top: 0;
}

.lp_contents .modal_content .modal_item_lead::after {
  bottom: 0;
}

.lp_contents .modal_content .modal_txt_wrap figure {
  width: calc(128 * (var(--rate)));
  margin: calc(46 * (var(--rate))) auto 0;
}

.lp_contents .modal_content .modal_item_txt {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(52/26);
  text-align: justify;
  margin-top: calc(26 * (var(--rate)));
}

.lp_contents .modal_content .btn_check {
  width: calc(300 * (var(--rate)));
  height: calc(76 * (var(--rate)));
  border-radius: calc(38 * (var(--rate)));
  margin-top: calc(70 * (var(--rate)));
  margin-bottom: calc(10 * (var(--rate)));
}

.lp_contents .modal_content .btn_check a {
  font-size: calc(36 * (var(--rate)));
  padding-left: calc(30 * (var(--rate)));
}

.lp_contents .modal_content .move_line {
  width: calc(90 * (var(--rate)));
  height: calc(19 * (var(--rate)));
}

.lp_contents .modal_content .move_line::after {
  width: calc(17 * (var(--rate)));
  right: calc(-3 * (var(--rate)));
  bottom: calc(5 * (var(--rate)));
}

.lp_contents .modal_content .move_line::before {
  width: calc(92 * (var(--rate)));
  animation: extend03 2s ease-in-out infinite;
}

@keyframes extend03 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }

  1% {
    transform: translateX(0);
    opacity: 0;
  }

  2% {
    width: 0vw;
    opacity: 1;
  }

  28% {
    transform: translateX(0);
  }

  32% {
    width: calc(92 * (var(--rate)));
  }

  90% {
    transform: translateX(calc(92 * (var(--rate))));
    width: calc(92 * (var(--rate)));
    opacity: 1;
  }

  91% {
    opacity: 0;
  }

  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

.lp_contents .modal_slide_wrap .slick-prev,
.lp_contents .modal_slide_wrap .slick-next {
  top: calc(260 * (var(--rate)));
  width: calc(22 * (var(--rate)));
  height: calc(60 * (var(--rate)));
}

/* 右 */
.lp_contents .modal_slide_wrap .slick-next {
  right: calc(30 * (var(--rate)));
}

/* 左（反転） */
.lp_contents .modal_slide_wrap .slick-prev {
  top: calc(290 * (var(--rate)));
  left: calc(30 * (var(--rate)));
  transform: translateY(-50%) scaleX(-1);
}