@charset "UTF-8";

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

どうぶつの森 meets Mitea

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

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

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

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

@media (min-width: 751px) {
  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: 48rem;

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

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

  --color-lp_txt_font: #18ad5e;
  --color-lp_base: #827157;
  --color-lp_products_01: #4bb1cd;
  --color-lp_products_02: #eb7373;
  --color-lp_products_03: #ae90c4;
  --color-lp_products_04: #dcc051;
  --color-lp_products_05: #4dba99;
  --color-lp_products_06: #e7ad20;
  --color-lp_products_07: #f0929a;
  --color-lp_products_08: #69c5b8;
  --color-lp_products_09: #4bb1cd;
  --color-lp_products_10: #dc6b65;

  --color-lp_products_11: #18ad5e;
  --color-lp_products_12: #aabd26;
  --color-lp_products_13: #69c5b8;
  --color-lp_products_14: #dc6b65;

  --color-lp_white: #fff;
  --font_01: "fot-seurat-pron", sans-serif;
  --font_02: "ads-showwa70", sans-serif;
  --font_03: "sicgothicduex-re", sans-serif;
}

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

#Wrap {
  width: 100%;
}

#Contents {
  max-width: unset;
}

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

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

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

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

.lp_contents img {
  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;
}

.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: 751px) {

  .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;
    position: relative;
  }

  .fixed_left_inner .logo {
    width: 20rem;
    height: 20rem;
    position: relative;
  }

  .fixed_left_inner .logo a {
    position: relative;
    color: transparent;
  }

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

@media (max-width: 750px) {
  .lp_contents .fixed_area .fixed_nav {
    display: none;
  }
}


/* 固定背景 */
.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-image: url(../img/bg_pc_mv_area.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(2) {
  background-image: url(../img/bg_pc_intro_area.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(3),
.bgSetting .for_bg:nth-of-type(11) {
  background-image: url(../img/bg_pc_products_01.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(4) {
  background-image: url(../img/bg_pc_products_02.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(5) {
  background-image: url(../img/bg_pc_products_03.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(6) {
  background-image: url(../img/bg_pc_products_04.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(7) {
  background-image: url(../img/bg_pc_products_05.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(8) {
  background-image: url(../img/bg_pc_products_06.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(9) {
  background-image: url(../img/bg_pc_products_07.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(10),
.bgSetting .for_bg:nth-of-type(15) {
  background-image: url(../img/bg_pc_products_08.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(12),
.bgSetting .for_bg:nth-of-type(16) {
  background-image: url(../img/bg_pc_products_10.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(13) {
  background-image: url(../img/bg_pc_products_11.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(14) {
  background-image: url(../img/bg_pc_products_12.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

.bgSetting .for_bg:nth-of-type(17) {
  background-image: url(../img/bg_pc_sec_end.jpg);
  background-repeat: repeat;
  background-size: 34rem 51rem;
}

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

/* 背景と一緒にロゴの色も変える */
.fixed_left_inner .logo .for_logo {
  opacity: 0;
  transition: opacity 1s;
  position: absolute;
  top: 0;
  left: 0;
}

.fixed_left_inner .logo .for_logo.selected {
  opacity: 1;
}


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

.fixed_right .ankerlink_wrap {}

.fixed_right .ankerlink_wrap ul {
  display: flex;
  flex-direction: column;
  color: var(--color-lp_white);
}

.fixed_right .ankerlink_wrap ul li {
  position: relative;
}

.fixed_right .ankerlink_wrap ul li:not(:last-of-type)::before {
  content: "";
  position: absolute;
  height: 1px;
  z-index: 1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;
  width: 32.2rem;
  background: linear-gradient(to right,
      currentColor 2px,
      transparent 2px);
  background-size: 4px auto;
  background-repeat: repeat-x;
  background-position: 2px 0;
  transition: color 1s;
}

.fixed_right .ankerlink_wrap ul li p {
  font-size: 1.5rem;
  width: fit-content;
  margin: 0 auto;
  position: relative;
}

.fixed_right .ankerlink_wrap ul li a {
  padding: 1.8rem 0 1.8rem 1rem;
}

.fixed_right .ankerlink_wrap ul li a.is-active p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -3rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  mask: url(../img/ankerlink_active.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/ankerlink_active.svg) no-repeat center / 100%;
  background-color: currentColor;
}

.fixed_right .copy_right {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  color: var(--color-lp_white);
  font-size: 1.2rem;
  transition: color 1s;
}

.lp_contents.introArea .fixed_right .copy_right,
.lp_contents.introArea .fixed_right .ankerlink_wrap ul {
  color: #18ad5e;
}

.lp_contents.products01 .fixed_right .copy_right,
.lp_contents.products01 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_01);
}

.lp_contents.products02 .fixed_right .copy_right,
.lp_contents.products02 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_02);
}

.lp_contents.products03 .fixed_right .copy_right,
.lp_contents.products03 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_03);
}

.lp_contents.products04 .fixed_right .copy_right,
.lp_contents.products04 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_04);
}

.lp_contents.products05 .fixed_right .copy_right,
.lp_contents.products05 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_05);
}

.lp_contents.products06 .fixed_right .copy_right,
.lp_contents.products06 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_06);
}

.lp_contents.products07 .fixed_right .copy_right,
.lp_contents.products07 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_07);
}

.lp_contents.products08 .fixed_right .copy_right,
.lp_contents.products08 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_08);
}

.lp_contents.products09 .fixed_right .copy_right,
.lp_contents.products09 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_09);
}

.lp_contents.products10 .fixed_right .copy_right,
.lp_contents.products10 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_10);
}

.lp_contents.products11 .fixed_right .copy_right,
.lp_contents.products11 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_11);
}

.lp_contents.products12 .fixed_right .copy_right,
.lp_contents.products12 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_12);
}

.lp_contents.products13 .fixed_right .copy_right,
.lp_contents.products13 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_13);
}

.lp_contents.products14 .fixed_right .copy_right,
.lp_contents.products14 .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_products_14);
}

.lp_contents.secEnd .fixed_right .copy_right,
.lp_contents.secEnd .fixed_right .ankerlink_wrap ul {
  color: var(--color-lp_white);
}


@media (max-width: 750px) {

  /* SP時ナビゲーション設定 */
  .lp_contents .fixed_area .fixed_right {
    display: none;
  }

}

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

.lp_contents .sp_only {
  display: none;
}

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

.lp_contents sup {
  font-size: .6em;
  position: relative;
  top: calc(3 * (var(--rate)));
}


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

.sec_intro * {
  color: var(--color-lp_txt_font);
}

.sec_intro {
  position: relative;
  z-index: 1;
}

.sec_intro .mv_area {
  padding-top: calc(375 * (var(--rate)));
  padding-bottom: calc(595 * (var(--rate)));
  background: url("../img/bg_main_mv_area.jpg") no-repeat center top /100%;
  position: relative;
  /* z-index: 0; */
}

.sec_intro .intro_area {
  padding-bottom: calc(195 * (var(--rate)));
  background: url("../img/bg_main_intro_area.png") repeat-y center top /101%;
  position: relative;
  z-index: 0;
}

.sec_intro .intro_area::before {
  content: "";
  width: calc(750 * (var(--rate)));
  height: calc(116 * (var(--rate)));
  background: url("../img/bg_main_intro_area_head.png") no-repeat center top /100%;
  position: absolute;
  top: calc(-114 * (var(--rate)));
  left: 0;
}

.sec_intro .ttl_main {
  width: calc(340 * (var(--rate)));
  margin: 0 auto;
}

.sec_intro .character_wrap {}

.sec_intro .character {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sec_intro .character:nth-of-type(1) {
  width: calc(260 * (var(--rate)));
  top: calc(71 * (var(--rate)));
  margin-left: calc(-11 * (var(--rate)));
}

.sec_intro .character:nth-of-type(2) {
  width: calc(140 * (var(--rate)));
  top: calc(248 * (var(--rate)));
  margin-left: calc(257 * (var(--rate)));
}

.sec_intro .character:nth-of-type(3) {
  width: calc(140 * (var(--rate)));
  top: calc(462 * (var(--rate)));
  margin-left: calc(263 * (var(--rate)));
}

.sec_intro .character:nth-of-type(4) {
  width: calc(210 * (var(--rate)));
  top: calc(701 * (var(--rate)));
  margin-left: calc(228 * (var(--rate)));
}

.sec_intro .character:nth-of-type(5) {
  width: calc(160 * (var(--rate)));
  top: calc(927 * (var(--rate)));
}

.sec_intro .character:nth-of-type(6) {
  width: calc(260 * (var(--rate)));
  top: calc(694 * (var(--rate)));
  margin-left: calc(-219 * (var(--rate)));
}

.sec_intro .character:nth-of-type(7) {
  width: calc(160 * (var(--rate)));
  top: calc(462 * (var(--rate)));
  margin-left: calc(-263 * (var(--rate)));
}

.sec_intro .character:nth-of-type(8) {
  width: calc(140 * (var(--rate)));
  top: calc(242 * (var(--rate)));
  margin-left: calc(-254 * (var(--rate)));
}

.sec_intro .character::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.sec_intro .character:nth-of-type(1)::before {
  background: url(../img/mv_icon_02.png) no-repeat center / 100%;
  width: calc(66 * (var(--rate)));
  height: calc(68 * (var(--rate)));
  top: calc(930 * (var(--rate)));
  margin-left: calc(255 * (var(--rate)));
}

.sec_intro .character:nth-of-type(3)::before {
  background: url(../img/mv_icon_03.png) no-repeat center / 100%;
  width: calc(55 * (var(--rate)));
  height: calc(73 * (var(--rate)));
  top: calc(-354 * (var(--rate)));
  margin-left: calc(-511 * (var(--rate)));
}

.sec_intro .character:nth-of-type(7)::before {
  background: url(../img/mv_icon_04.png) no-repeat center / 100%;
  width: calc(52 * (var(--rate)));
  height: calc(59 * (var(--rate)));
  top: calc(326 * (var(--rate)));
  margin-left: calc(264 * (var(--rate)));
}

.sec_intro .character:nth-of-type(4)::before {
  background: url(../img/mv_icon_05.png) no-repeat center / 100%;
  width: calc(54 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  top: calc(300 * (var(--rate)));
  margin-left: calc(-477 * (var(--rate)));
}

.sec_intro .character:nth-of-type(8)::before {
  background: url(../img/mv_icon_01.png) no-repeat center / 100%;
  width: calc(70 * (var(--rate)));
  height: calc(64 * (var(--rate)));
  top: calc(-131 * (var(--rate)));
  margin-left: calc(495 * (var(--rate)));
}

.sec_intro .main_lead_outside {
  padding-top: calc(45 * (var(--rate)));
}

.sec_intro .main_lead_wrap {}

.sec_intro .lead_ttl {
  font-size: calc(48 * (var(--rate)));
  line-height: 1;
  font-family: "ads-showwa70", sans-serif;
  letter-spacing: 0;
}

.sec_intro .lead_txt {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(57.2/26);
  margin-top: calc(50 * (var(--rate)));
}

.sec_intro .lead_txt::after {
  content: "";
  width: calc(670 * (var(--rate)));
  height: calc(350 * (var(--rate)));
  background: url(../img/intro_products_all.png) no-repeat center / 100%;
  display: block;
  margin: calc(45 * (var(--rate))) auto 0;

  transform: scale(0.5);
  opacity: 0;
}

.sec_intro .lead_txt.is-show::after {
  /* animation: fadeScaleIn 1s ease-in forwards; */
  animation: fadeScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;

}

.sec_intro .date {
  font-size: calc(28 * (var(--rate)));
  width: fit-content;
  margin: calc(52 * (var(--rate))) auto 0
}

.sec_intro .date::after {
  content: "";
  display: block;
  height: 1px;
  width: calc(310 * (var(--rate)));
  z-index: 1;
  position: absolute;
  z-index: -1;
  bottom: calc(-13 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  transform-origin: center center;

  background: linear-gradient(to right,
      currentColor calc(5 * (var(--rate))),
      transparent calc(5 * (var(--rate))));
  background-size: calc(10 * (var(--rate))) auto;
  background-repeat: repeat-x;
  background-position: calc(5 * var(--rate)) 0;
}


/* ========================================================
                  * sec_products  共通*
========================================================= */

.sec_products {}

.sec_products.skincare {}

.sec_products.odekake {}

.sec_products .inner {
  /* position: relative; */
  padding-top: calc(99 * (var(--rate)));
  padding-bottom: calc(109 * (var(--rate)));
  z-index: 1;
}

.sec_products .inner::before {
  content: "";
  width: calc(750 * (var(--rate)));
  height: calc(140 * (var(--rate)));
  position: absolute;
  left: 0;
  top: calc(-140 * (var(--rate)));

  transform: translate(0, 100%);
  backface-visibility: hidden;

  z-index: -2;
}

.sec_products .inner.is-show::before {
  animation: treesGrow 1s cubic-bezier(0.26, 0.09999, 0.14, 1) forwards;
}

.sec_products.skincare .inner::before {
  background: url(../img/silhouette_01.svg) no-repeat center / 100%;
}

.sec_products.odekake .inner::before {
  background: url(../img/silhouette_02.svg) no-repeat center / 100%;
}


.sec_products.odekake .inner {
  padding-top: calc(83 * (var(--rate)));
  padding-bottom: calc(150 * (var(--rate)));
}

.sec_products .ttl {
  width: calc(510 * (var(--rate)));
  margin: 0 auto;
  padding-bottom: calc(71 * (var(--rate)));
}

.sec_products .products_wrap {
  position: relative;
}

.sec_products .products_01 {
  color: var(--color-lp_products_01);
}

.sec_products .products_02 {
  color: var(--color-lp_products_02);
}

.sec_products .products_03 {
  color: var(--color-lp_products_03);
}

.sec_products .products_04 {
  color: var(--color-lp_products_04);
}

.sec_products .products_05 {
  color: var(--color-lp_products_05);
}

.sec_products .products_06 {
  color: var(--color-lp_products_06);
}

.sec_products .products_07 {
  color: var(--color-lp_products_07);
}

.sec_products .products_08 {
  color: var(--color-lp_products_08);
}

.sec_products .products_09 {
  color: var(--color-lp_products_09);
}

.sec_products .products_10 {
  color: var(--color-lp_products_10);
}

.sec_products .products_11 {
  color: var(--color-lp_products_11);
}

.sec_products .products_12 {
  color: var(--color-lp_products_12);
}

.sec_products .products_13 {
  color: var(--color-lp_products_13);
}

.sec_products .products_14 {
  color: var(--color-lp_products_14);
}

.sec_products .products_inner {
  padding-top: calc(60 * (var(--rate)));
  padding-bottom: calc(60 * (var(--rate)));
}

.sec_products .products_02 .products_inner {
  padding-top: calc(68 * (var(--rate)));
}

.sec_products .products_03 .products_inner {
  padding-top: calc(68 * (var(--rate)));
}

.sec_products .products_04 .products_inner {
  padding-top: calc(68 * (var(--rate)));
}

.sec_products .products_05 .products_inner {
  padding-top: calc(68 * (var(--rate)));
}

.sec_products .products_06 .products_inner {
  padding-top: calc(145 * (var(--rate)));
  padding-bottom: calc(200 * (var(--rate)));
}

.sec_products .products_07 .products_inner {
  padding-top: calc(211 * (var(--rate)));
  padding-bottom: calc(200 * (var(--rate)));
}

.sec_products .products_08 .products_inner {
  padding-top: calc(180 * (var(--rate)));
  padding-bottom: calc(150 * (var(--rate)));
}

.sec_products .products_09 .products_inner {
  padding-top: calc(156 * (var(--rate)));
  padding-bottom: calc(240 * (var(--rate)));
}

.sec_products .products_10 .products_inner {
  padding-top: calc(252 * (var(--rate)));
  padding-bottom: calc(120 * (var(--rate)));
}

.sec_products .products_11 .products_inner {
  padding-top: calc(37 * (var(--rate)));
  padding-bottom: calc(80 * (var(--rate)));
}

.sec_products .products_12 .products_inner {
  padding-top: calc(128 * (var(--rate)));
  padding-bottom: calc(90 * (var(--rate)));
}

.sec_products .products_13 .products_inner {
  padding-top: calc(137 * (var(--rate)));
  padding-bottom: calc(75 * (var(--rate)));
}

.sec_products .products_14 .products_inner {
  padding-top: calc(135 * (var(--rate)));
  padding-bottom: calc(75 * (var(--rate)));
}

.sec_products .products_lead {
  width: calc(230 * (var(--rate)));
  position: absolute;
}

.sec_products .products_01 .products_lead {
  top: calc(-20 * (var(--rate)));
  right: calc(34 * (var(--rate)));
}

.sec_products .products_02 .products_lead {
  top: calc(507 * (var(--rate)));
  right: calc(35 * (var(--rate)));
}

.sec_products .products_03 .products_lead {
  width: calc(240 * (var(--rate)));
  top: calc(467 * (var(--rate)));
  left: calc(181 * (var(--rate)));
}

.sec_products .products_04 .products_lead {
  width: calc(260 * (var(--rate)));
  top: calc(244 * (var(--rate)));
  left: calc(50 * (var(--rate)));
}

.sec_products .products_05 .products_lead {
  width: calc(250 * (var(--rate)));
  top: calc(395 * (var(--rate)));
  left: calc(54 * (var(--rate)));
}

.sec_products .products_06 .products_lead {
  width: calc(250 * (var(--rate)));
  top: calc(405 * (var(--rate)));
  right: calc(55 * (var(--rate)));
}

.sec_products .products_07 .products_lead {
  width: calc(220 * (var(--rate)));
  top: calc(191 * (var(--rate)));
  left: calc(120 * (var(--rate)));
}

.sec_products .products_08 .products_lead {
  width: calc(230 * (var(--rate)));
  top: calc(140 * (var(--rate)));
  left: calc(145 * (var(--rate)));
}

.sec_products .products_09 .products_lead {
  width: calc(220 * (var(--rate)));
  top: calc(606 * (var(--rate)));
  left: calc(70 * (var(--rate)));
}

.sec_products .products_10 .products_lead {
  width: calc(220 * (var(--rate)));
  top: calc(72 * (var(--rate)));
  left: calc(99 * (var(--rate)));
}

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

.sec_products .products_02 .products_img {
  margin-left: calc(195 * (var(--rate)));
}

.sec_products .products_03 .products_img {
  width: calc(370 * (var(--rate)));
  margin-left: calc(306 * (var(--rate)));
}

.sec_products .products_04 .products_img {
  width: calc(280 * (var(--rate)));
  margin-right: calc(180 * (var(--rate)));
}

.sec_products .products_05 .products_img {
  width: calc(320 * (var(--rate)));
  margin-right: calc(214 * (var(--rate)));
}

.sec_products .products_06 .products_img {
  width: calc(360 * (var(--rate)));
  margin-left: calc(90 * (var(--rate)));
}

.sec_products .products_07 .products_img {
  width: calc(360 * (var(--rate)));
  margin-right: calc(80 * (var(--rate)));
}

.sec_products .products_08 .products_img {
  width: calc(230 * (var(--rate)));
  margin-right: calc(145 * (var(--rate)));
}

.sec_products .products_09 .products_img {
  width: calc(560 * (var(--rate)));
  margin-right: calc(94 * (var(--rate)));
}

.sec_products .products_11 .products_img {
  width: calc(400 * (var(--rate)));
  margin-left: calc(100 * (var(--rate)));
  position: relative;
}

.sec_products .products_11 .products_img img {
  transform-origin: top center;
  animation: rotate 6s ease-in-out infinite;
  transform: rotate(1.8deg);
}

.sec_products .products_12 .products_img {
  width: calc(380 * (var(--rate)));
  margin-right: calc(90 * (var(--rate)));
}

.sec_products .products_13 .products_img {
  width: calc(520 * (var(--rate)));
}

.sec_products .products_14 .products_img {
  width: calc(450 * (var(--rate)));
}

.sec_products .contents_wrap {
  position: relative;
}

.sec_products .slide_wrap {
  width: calc(750 * (var(--rate)));
  margin: 0 auto;
}

.sec_products .slide_wrap li {
  position: relative;
}

.sec_products .slide_img {
  width: calc(500 * (var(--rate)));
  margin: 0 auto;
}

.sec_products .products_10 .slide_img {
  width: calc(400 * (var(--rate)));
  margin: 0 auto;
}


.sec_products .slide_wrap .slick-arrow {
  content: "";
  position: absolute;
  width: calc(20 * (var(--rate)));
  height: calc(80 * (var(--rate)));
  background: url(../img/slide_arrow.svg) no-repeat center / 100%;
  z-index: 1;
  transform-origin: center;
}

.sec_products .products_01 .slide_wrap .slick-arrow {
  top: calc(252 * (var(--rate)));
}

.sec_products .products_10 .slide_wrap .slick-arrow {
  top: calc(280 * (var(--rate)));
}

.sec_products .slide_wrap .slick-arrow:before {
  display: none;
  font-size: 0;
}

.sec_products .slide_wrap .slick-prev {
  transform: scale(-1, 1);
}

.sec_products .products_01 .slide_wrap .slick-prev {
  top: calc(211 * (var(--rate)));
  left: calc(64 * (var(--rate)));
}

.sec_products .products_10 .slide_wrap .slick-prev {
  top: calc(240 * (var(--rate)));
  left: calc(115 * (var(--rate)));
}

.sec_products .slide_wrap .slick-next {}

.sec_products .products_01 .slide_wrap .slick-next {
  right: calc(64 * (var(--rate)));
}

.sec_products .products_10 .slide_wrap .slick-next {
  right: calc(115 * (var(--rate)));
}

.sec_products .slide_wrap .products_color_name {
  font-size: calc(30 * (var(--rate)));
  color: var(--color-lp_base);
  margin-top: calc(204 * (var(--rate)));
}


.sec_products .slide_wrap .products_color_name {
  position: relative;
  width: fit-content;
  margin: calc(204 * (var(--rate))) auto 0;
  padding-bottom: calc(59 * (var(--rate)));
}

.sec_products .slide_wrap .dashed {
  display: block;
  height: 1px;
  width: 100%;
  z-index: 1;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  transform-origin: center center;
  width: 100%;

  background: linear-gradient(to right,
      #827157 calc(5 * (var(--rate))),
      transparent calc(5 * (var(--rate))));
  background-size: calc(10 * (var(--rate))) auto;
  background-repeat: repeat-x;
  background-position: calc(5 * var(--rate)) 0;
}



.sec_products .slide_tab {
  position: absolute;
  top: calc(666 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
}

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

.sec_products .slide_tab li {
  position: relative;
  width: calc(60 * (var(--rate)));
  height: calc(60 * (var(--rate)));
  cursor: pointer;
}

.sec_products .slide_tab li::after {
  content: "";
  width: calc(36 * (var(--rate)));
  height: calc(36 * (var(--rate)));
  background: url(../img/leaf.svg) no-repeat center / 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .6s;
}

.sec_products .slide_tab li.active::after {
  opacity: 1;
}

.sec_products .slide_tab li .limited {
  color: var(--color-lp_base);
  font-size: calc(20 * (var(--rate)));
  line-height: calc(26/20);
  position: absolute;
  top: calc(-60 * (var(--rate)));
  left: calc(10 * (var(--rate)));
}

.sec_products .products_tag {
  width: calc(200 * (var(--rate)));
  margin: calc(37 * (var(--rate))) auto 0;
}

.sec_products .products_name {
  font-size: calc(40 * (var(--rate)));
  line-height: calc(64/40);
  margin-top: calc(18 * (var(--rate)));
}

.sec_products .products_02 .products_name {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_03 .products_name {
  margin-top: calc(27 * (var(--rate)));
}

.sec_products .products_04 .products_name {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_05 .products_name {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_06 .products_name {
  margin-top: calc(29 * (var(--rate)));
}

.sec_products .products_07 .products_name {
  margin-top: calc(28 * (var(--rate)));
}

.sec_products .products_08 .products_name {
  margin-top: calc(28 * (var(--rate)));
}

.sec_products .products_09 .products_name {
  margin-top: calc(28 * (var(--rate)));
}

.sec_products .products_10 .products_name {
  margin-top: calc(23 * (var(--rate)));
}

.sec_products .products_11 .products_name {
  margin-top: calc(28 * (var(--rate)));
}

.sec_products .products_12 .products_name {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_13 .products_name {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_14 .products_name {
  margin-top: calc(30 * (var(--rate)));
}

.sec_products .products_fragrance {
  font-size: calc(22 * (var(--rate)));
  margin-top: calc(18 * (var(--rate)));
}

.sec_products .products_09 .products_fragrance {
  margin-top: calc(23 * (var(--rate)));
}

.sec_products .products_12 .products_fragrance {
  margin-top: calc(23 * (var(--rate)));
}

.sec_products .products_quasi_drugs {
  font-size: calc(26 * (var(--rate)));
  margin-top: calc(23 * (var(--rate)));
  position: relative;
}

.sec_products .products_quasi_drugs::after {
  content: "";
  position: absolute;
  top: calc(33 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  width: calc(150 * (var(--rate)));
  height: 1px;
  background: var(--color-lp_products_04);
}

.sec_products .products_name_sub {
  font-size: calc(22 * (var(--rate)));
  margin-top: calc(36 * (var(--rate)));
}

.sec_products .products_price {
  font-size: calc(32 * (var(--rate)));
  margin-top: calc(17 * (var(--rate)));
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

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

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

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

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

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

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

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

.sec_products .products_price .volume {
  font-size: calc(24 * (var(--rate)));
  display: block;
  margin-right: calc(15 * (var(--rate)));
}

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

.sec_products .btn_buy_wrap {
  width: calc(204 * (var(--rate)));
  height: calc(72 * (var(--rate)));
  margin: calc(40 * (var(--rate))) auto 0;
  position: relative;
}

.sec_products .btn_buy_wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(204 * (var(--rate)));
  height: calc(72 * (var(--rate)));
  mask: url(../img/btn_buy_bg_frame.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/btn_buy_bg_frame.svg) no-repeat center / 100%;
}

.sec_products .products_01 .btn_buy_wrap::before,
.sec_products .products_09 .btn_buy_wrap::before {
  background-color: #98d2e3;
}

.sec_products .products_02 .btn_buy_wrap::before {
  background-color: #f2a6a6;
}

.sec_products .products_03 .btn_buy_wrap::before {
  background-color: #c1aad2;
}

.sec_products .products_04 .btn_buy_wrap::before {
  background-color: #ebd57c;
}

.sec_products .products_05 .btn_buy_wrap::before {
  background-color: #77cab1;
}

.sec_products .products_06 .btn_buy_wrap::before {
  background-color: #f1ce79;
}

.sec_products .products_07 .btn_buy_wrap::before {
  background-color: #f2a2a9;
}

.sec_products .products_08 .btn_buy_wrap::before,
.sec_products .products_13 .btn_buy_wrap::before {
  background-color: #93d5cc;
}

.sec_products .products_10 .btn_buy_wrap::before,
.sec_products .products_14 .btn_buy_wrap::before {
  background-color: #e38a85;
}

.sec_products .products_11 .btn_buy_wrap::before {
  background-color: #6ad09a;
}

.sec_products .products_12 .btn_buy_wrap::before {
  background-color: #e0e996;
}

.sec_products .btn_buy {
  width: calc(194 * (var(--rate)));
  height: calc(61 * (var(--rate)));
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;

  mask: url(../img/btn_buy_bg.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/btn_buy_bg.svg) no-repeat center / 100%;
}

.sec_products .btn_buy::before,
.sec_products .btn_buy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(194 * (var(--rate)));
  height: calc(61 * (var(--rate)));
  z-index: -1;
}

.sec_products .btn_buy::before {
  mask: url(../img/btn_buy_bg.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/btn_buy_bg.svg) no-repeat center / 100%;
}

.sec_products .products_01 .btn_buy::before,
.sec_products .products_09 .btn_buy::before {
  background-color: #4bb1cd;
}

.sec_products .products_02 .btn_buy::before {
  background-color: #e96666;
}

.sec_products .products_03 .btn_buy::before {
  background-color: #9d79b8;
}

.sec_products .products_04 .btn_buy::before {
  background-color: #caa929;
}

.sec_products .products_05 .btn_buy::before {
  background-color: #399378;
}

.sec_products .products_06 .btn_buy::before {
  background-color: #dea317;
}

.sec_products .products_07 .btn_buy::before {
  background-color: #e9616d;
}

.sec_products .products_08 .btn_buy::before,
.sec_products .products_13 .btn_buy::before {
  background-color: #44aea0;
}

.sec_products .products_10 .btn_buy::before,
.sec_products .products_14 .btn_buy::before {
  background-color: #d13d35;
}

.sec_products .products_11 .btn_buy::before {
  background-color: #0e6838;
}

.sec_products .products_12 .btn_buy::before {
  background-color: #aabd26;
}

.sec_products .btn_buy::after {
  position: absolute;
  z-index: -1;
  top: calc(0 * (var(--rate)));
  left: calc(-71 * (var(--rate)));
  width: calc(400 * (var(--rate)));
  height: calc(400 * (var(--rate)));
  rotate: 44deg;
  content: "";
}

.sec_products .btn_buy::after {
  background: linear-gradient(to right,
      #81c8dc 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_01 .btn_buy::after,
.sec_products .products_09 .btn_buy::after {
  background: linear-gradient(to right,
      #81c8dc 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_02 .btn_buy::after {
  background: linear-gradient(to right,
      #f19d9d 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_03 .btn_buy::after {
  background: linear-gradient(to right,
      #b69bca 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_04 .btn_buy::after {
  background: linear-gradient(to right,
      #dcc051 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_05 .btn_buy::after {
  background: linear-gradient(to right,
      #4dba99 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_06 .btn_buy::after {
  background: linear-gradient(to right,
      #e7ad20 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_07 .btn_buy::after {
  background: linear-gradient(to right,
      #ee848d 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_08 .btn_buy::after,
.sec_products .products_13 .btn_buy::after {
  background: linear-gradient(to right,
      #69c5b8 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_10 .btn_buy::after,
.sec_products .products_14 .btn_buy::after {
  background: linear-gradient(to right,
      #e69793 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_11 .btn_buy::after {
  background: linear-gradient(to right,
      #18ad5e 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .products_12 .btn_buy::after {
  background: linear-gradient(to right,
      #cddc55 0 calc(32 * (var(--rate))),
      transparent calc(32 * (var(--rate))) calc(64 * (var(--rate))));
  background-size: calc(64 * (var(--rate))) 100%;
  background-repeat: repeat-x;
}

.sec_products .btn_buy a {
  font-size: calc(32 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-lp_white);
}

.sec_products .btn_buy a::before {
  content: "";
  background: url(../img/btn_buy_bg_arrow.svg) no-repeat center / 100%;
  width: calc(20 * (var(--rate)));
  height: calc(23 * (var(--rate)));
  position: absolute;
  top: calc(17 * (var(--rate)));
  right: calc(16 * (var(--rate)));
}

.sec_products .products_package {
  font-size: calc(20 * (var(--rate)));
  line-height: calc(44/20);
  margin-top: calc(27 * (var(--rate)));
}

.sec_products .products_txt {
  font-size: calc(26 * (var(--rate)));
  line-height: calc(57.2/26);
  margin-top: calc(36 * (var(--rate)));
}

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

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

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

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

.sec_products .products_06 .products_txt {
  margin-top: calc(46 * (var(--rate)));
  position: relative;
}

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

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

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

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

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

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

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

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

.sec_products .products_appeal {
  margin-top: calc(52 * (var(--rate)));
}

.sec_products .products_appeal.column_size_220 {
  width: calc(488 * (var(--rate)));
  margin: calc(52 * (var(--rate))) auto 0;
}

.sec_products .products_12 .products_appeal {
  margin-top: calc(54 * (var(--rate)));
}

.sec_products .products_appeal ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: calc(45 * (var(--rate))) calc(33 * (var(--rate)));
}

.sec_products .products_appeal li {
  width: calc(294 * (var(--rate)));
  height: calc(56 * (var(--rate)));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.sec_products .products_01 .products_appeal li,
.sec_products .products_01 .products_appeal li::before,
.sec_products .products_01 .products_appeal li p::before {
  background-color: var(--color-lp_products_01);
}

.sec_products .products_02 .products_appeal li,
.sec_products .products_02 .products_appeal li::before,
.sec_products .products_02 .products_appeal li p::before {
  background-color: var(--color-lp_products_02);
}

.sec_products .products_03 .products_appeal li,
.sec_products .products_03 .products_appeal li::before,
.sec_products .products_03 .products_appeal li p::before {
  background-color: var(--color-lp_products_03);
}

.sec_products .products_04 .products_appeal li,
.sec_products .products_04 .products_appeal li::before,
.sec_products .products_04 .products_appeal li p::before {
  background-color: var(--color-lp_products_04);
}

.sec_products .products_05 .products_appeal li,
.sec_products .products_05 .products_appeal li::before,
.sec_products .products_05 .products_appeal li p::before {
  background-color: var(--color-lp_products_05);
}

.sec_products .products_06 .products_appeal li,
.sec_products .products_06 .products_appeal li::before,
.sec_products .products_06 .products_appeal li p::before {
  background-color: var(--color-lp_products_06);
}

.sec_products .products_07 .products_appeal li,
.sec_products .products_07 .products_appeal li::before,
.sec_products .products_07 .products_appeal li p::before {
  background-color: var(--color-lp_products_07);
}

.sec_products .products_08 .products_appeal li,
.sec_products .products_08 .products_appeal li::before,
.sec_products .products_08 .products_appeal li p::before {
  background-color: var(--color-lp_products_08);
}

.sec_products .products_09 .products_appeal li,
.sec_products .products_09 .products_appeal li::before,
.sec_products .products_09 .products_appeal li p::before {
  background-color: var(--color-lp_products_09);
}

.sec_products .products_10 .products_appeal li,
.sec_products .products_10 .products_appeal li::before,
.sec_products .products_10 .products_appeal li p::before {
  background-color: var(--color-lp_products_10);
}

.sec_products .products_11 .products_appeal li,
.sec_products .products_11 .products_appeal li::before,
.sec_products .products_11 .products_appeal li p::before {
  background-color: var(--color-lp_products_11);
}

.sec_products .products_12 .products_appeal li,
.sec_products .products_12 .products_appeal li::before,
.sec_products .products_12 .products_appeal li p::before {
  background-color: var(--color-lp_products_12);
}

.sec_products .products_13 .products_appeal li,
.sec_products .products_13 .products_appeal li::before,
.sec_products .products_13 .products_appeal li p::before {
  background-color: var(--color-lp_products_13);
}

.sec_products .products_14 .products_appeal li,
.sec_products .products_14 .products_appeal li::before,
.sec_products .products_14 .products_appeal li p::before {
  background-color: var(--color-lp_products_14);
}

.sec_products .products_appeal.column_size_300 li {
  width: calc(300 * (var(--rate)));
  background: url(../img/products_appeal_bg_300.svg) no-repeat center / 100%;
}

.sec_products .products_12 .products_appeal.column_size_300 li:nth-of-type(1) {
  width: calc(280 * (var(--rate)));
  background: url(../img/products_appeal_bg_280.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_280 li {
  width: calc(280 * (var(--rate)));
  background: url(../img/products_appeal_bg_280.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_260 li {
  width: calc(260 * (var(--rate)));
  background: url(../img/products_appeal_bg_260.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_240 li {
  width: calc(240 * (var(--rate)));
  background: url(../img/products_appeal_bg_240.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_220 li {
  width: calc(220 * (var(--rate)));
  background: url(../img/products_appeal_bg_220.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_200 li {
  width: calc(200 * (var(--rate)));
  background: url(../img/products_appeal_bg_200.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_180 li {
  width: calc(180 * (var(--rate)));
  background: url(../img/products_appeal_bg_180.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_160 li {
  width: calc(160 * (var(--rate)));
  background: url(../img/products_appeal_bg_160.svg) no-repeat center / 100%;
}

.sec_products .products_appeal li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(70 * (var(--rate)));
}

.sec_products .products_appeal.column_size_300 li::before {
  width: calc(314 * (var(--rate)));
  mask: url(../img/products_appeal_bg_300_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_300_line.svg) no-repeat center / 100%;
}

.sec_products .products_12 .products_appeal.column_size_300 li:nth-of-type(1)::before {
  width: calc(294 * (var(--rate)));
  mask: url(../img/products_appeal_bg_294_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_294_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_280 li::before {
  width: calc(294 * (var(--rate)));
  mask: url(../img/products_appeal_bg_280_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_280_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_260 li::before {
  width: calc(274 * (var(--rate)));
  mask: url(../img/products_appeal_bg_260_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_260_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_240 li::before {
  width: calc(254 * (var(--rate)));
  mask: url(../img/products_appeal_bg_240_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_240_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_220 li::before {
  width: calc(234 * (var(--rate)));
  mask: url(../img/products_appeal_bg_220_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_220_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_200 li::before {
  width: calc(214 * (var(--rate)));
  mask: url(../img/products_appeal_bg_200_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_200_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_180 li::before {
  width: calc(194 * (var(--rate)));
  mask: url(../img/products_appeal_bg_180_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_180_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal.column_size_160 li::before {
  width: calc(174 * (var(--rate)));
  mask: url(../img/products_appeal_bg_160_line.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_bg_160_line.svg) no-repeat center / 100%;
}

.sec_products .products_appeal li p {
  font-size: calc(22 * (var(--rate)));
  padding-left: calc(30 * (var(--rate)));
  position: relative;
}

.sec_products .products_appeal li p sup {
  top: calc(2 * (var(--rate)));
}

.sec_products .products_appeal li p::before {
  content: "";
  width: calc(20 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  position: absolute;
  top: 0;
  left: 0;
  mask: url(../img/products_appeal_check.svg) no-repeat center / 100%;
  -webkit-mask: url(../img/products_appeal_check.svg) no-repeat center / 100%;
}


/* ========================================================
                * sec_products  キャラクター*
========================================================= */

.sec_products .character {
  position: absolute;
  z-index: 99;
  pointer-events: none;
}

.sec_products .products_01 .character:nth-of-type(1) {
  width: calc(160 * (var(--rate)));
  top: calc(470 * (var(--rate)));
  left: calc(36 * (var(--rate)));
}

.sec_products .products_01 .character:nth-of-type(2) {
  width: calc(175 * (var(--rate)));
  top: calc(747 * (var(--rate)));
  right: calc(24 * (var(--rate)));
}

.sec_products .products_02 .character:nth-of-type(1) {
  width: calc(160 * (var(--rate)));
  top: calc(394 * (var(--rate)));
  left: calc(60 * (var(--rate)));
}

.sec_products .products_02 .character:nth-of-type(2) {
  width: calc(120 * (var(--rate)));
  height: calc(220 * (var(--rate)));
  top: calc(-69 * (var(--rate)));
  right: calc(90 * (var(--rate)));
}

.sec_products .products_03 .character:nth-of-type(1) {
  width: calc(220 * (var(--rate)));
  top: calc(195 * (var(--rate)));
  left: calc(50 * (var(--rate)));
}

.sec_products .products_04 .character:nth-of-type(1) {
  width: calc(176 * (var(--rate)));
  top: calc(504 * (var(--rate)));
  right: calc(30 * (var(--rate)));
}

.sec_products .products_05 .character:nth-of-type(1) {
  width: calc(175 * (var(--rate)));
  top: calc(302 * (var(--rate)));
  right: calc(21 * (var(--rate)));
}

.sec_products .products_06 .character:nth-of-type(1) {
  width: calc(150 * (var(--rate)));
  top: calc(45 * (var(--rate)));
  right: calc(87 * (var(--rate)));
}

.sec_products .products_06 .character:nth-of-type(2) {
  width: calc(176 * (var(--rate)));
  top: calc(1423 * (var(--rate)));
  right: calc(90 * (var(--rate)));
}

.sec_products .products_06 .character:nth-of-type(3) {
  width: calc(190 * (var(--rate)));
  top: calc(897 * (var(--rate)));
  left: calc(33 * (var(--rate)));
}

.sec_products .products_07 .character:nth-of-type(1) {
  width: calc(150 * (var(--rate)));
  top: calc(422 * (var(--rate)));
  left: calc(96 * (var(--rate)));
}

.sec_products .products_08 .character:nth-of-type(1) {
  width: calc(190 * (var(--rate)));
  top: calc(402 * (var(--rate)));
  left: calc(136 * (var(--rate)));
}

.sec_products .products_08 .character:nth-of-type(2) {
  width: calc(320 * (var(--rate)));
  top: calc(-130 * (var(--rate)));
  right: calc(56 * (var(--rate)));
}

.sec_products .products_09 .character:nth-of-type(1) {
  width: calc(185 * (var(--rate)));
  top: calc(-73 * (var(--rate)));
  right: calc(97 * (var(--rate)));
}

.sec_products .products_09 .character:nth-of-type(2) {
  width: calc(170 * (var(--rate)));
  top: calc(988 * (var(--rate)));
  left: calc(27 * (var(--rate)));
}

.sec_products .products_10 .character:nth-of-type(1) {
  width: calc(180 * (var(--rate)));
  top: calc(-169 * (var(--rate)));
  right: calc(100 * (var(--rate)));
}

.sec_products .products_10 .color_01 .character {
  width: calc(140 * (var(--rate)));
  top: calc(407 * (var(--rate)));
  right: calc(50 * (var(--rate)));
}

.sec_products .products_10 .color_02 .character {
  width: calc(156 * (var(--rate)));
  top: calc(344 * (var(--rate)));
  right: calc(25 * (var(--rate)));
}

.sec_products .products_10 .color_03 .character {
  width: calc(156 * (var(--rate)));
  top: calc(380 * (var(--rate)));
  right: calc(33 * (var(--rate)));
}

.sec_products .products_10 .color_04 .character {
  width: calc(180 * (var(--rate)));
  top: calc(342 * (var(--rate)));
  right: calc(22* (var(--rate)));
}

.sec_products .products_10 .color_05 .character {
  width: calc(204 * (var(--rate)));
  top: calc(440 * (var(--rate)));
  right: calc(25* (var(--rate)));
}

.sec_products .products_10 .color_06 .character {
  width: calc(156 * (var(--rate)));
  top: calc(367 * (var(--rate)));
  right: calc(29 * (var(--rate)));
}

.sec_products .products_11 .character:nth-of-type(1) {
  width: calc(300 * (var(--rate)));
  top: calc(96 * (var(--rate)));
  right: calc(46 * (var(--rate)));
}

.sec_products .products_12 .character:nth-of-type(1) {
  width: calc(230 * (var(--rate)));
  top: calc(54 * (var(--rate)));
  left: calc(55 * (var(--rate)));
}

.sec_products .products_12 .character:nth-of-type(2) {
  width: calc(170 * (var(--rate)));
  top: calc(723 * (var(--rate)));
  right: calc(24 * (var(--rate)));
}

.sec_products .products_13 .character:nth-of-type(1) {
  width: calc(176 * (var(--rate)));
  top: calc(17 * (var(--rate)));
  right: calc(43 * (var(--rate)));
}

.sec_products .products_13 .character:nth-of-type(2) {
  width: calc(176 * (var(--rate)));
  top: calc(666 * (var(--rate)));
  left: calc(32 * (var(--rate)));
}

.sec_products .products_14 .character:nth-of-type(1) {
  width: calc(180 * (var(--rate)));
  top: calc(36 * (var(--rate)));
  right: calc(41 * (var(--rate)));
}

.sec_products .products_14 .character:nth-of-type(2) {
  width: calc(140 * (var(--rate)));
  top: calc(799 * (var(--rate)));
  left: calc(70 * (var(--rate)));
}


/* ========================================================
                       * sec_end*
========================================================= */

.sec_end * {
  color: var(--color-lp_white);
}

.sec_end {}

.sec_end .inner {
  position: relative;
  padding-top: calc(120 * (var(--rate)));
  padding-bottom: calc(100 * (var(--rate)));
}

.sec_end .inner::before {
  content: "";
  width: calc(750 * (var(--rate)));
  height: calc(140 * (var(--rate)));
  position: absolute;
  left: 0;
  top: calc(-140 * (var(--rate)));
  background: url(../img/silhouette_03.svg) no-repeat center / 100%;

  transform: translate(0, 100%);
  backface-visibility: hidden;
}

.sec_end .inner.is-show::before {
  animation: treesGrow 1s cubic-bezier(0.26, 0.09999, 0.14, 1) forwards;
}

.sec_end .btn_all_wrap {}

.sec_end .btn_all {
  width: calc(564 * (var(--rate)));
  height: calc(196 * (var(--rate)));
  margin: 0 auto;
  margin-top: calc(-10 * (var(--rate)));
}

.sec_end .btn_all a {
  background: url(../img/btn_all_bg.svg) no-repeat center / 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sec_end .btn_all a p {
  width: calc(429 * (var(--rate)));
  height: calc(49 * (var(--rate)));
  margin: 0 auto;
}

.sec_end .site_link {
  margin-top: calc(120 * (var(--rate)));
}

.sec_end .site_link::before {
  content: "";
  width: calc(690 * (var(--rate)));
  height: calc(450 * (var(--rate)));
  margin: 0 auto calc(60 * (var(--rate)));
  background: url(../img/sec_end_character.png) no-repeat center / 100%;
  display: block;

  transform: scale(0.5);
  opacity: 0;
}

.sec_end .site_link.is-show::before {
  animation: fadeScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
}

.sec_end .site_link a {
  font-size: calc(24 * (var(--rate)));
  position: relative;
  width: fit-content;
}

.sec_end .site_link a::after {
  content: "";
  background: var(--color-lp_white);
  width: 100%;
  height: 1px;
  display: block;
  margin-top: calc(7 * (var(--rate)));
}

.sec_end .note {
  width: calc(620 * (var(--rate)));
  font-size: calc(18 * (var(--rate)));
  line-height: calc(36/18);
  text-align: justify;
  margin: calc(180 * (var(--rate))) auto 0;
}

.sec_end .company_copyright {
  margin-top: calc(107 * (var(--rate)));
}

.sec_end .company_img {
  width: calc(200 * (var(--rate)));
  margin: 0 auto;
}

.sec_end .company_copyright p {
  font-size: calc(24 * (var(--rate)));
  margin-top: calc(10 * (var(--rate)));
}


/* ========================================================
                    * 背景*
========================================================= */

/* セクションは高さ固定しない */
.fixed_bg_area {
  position: relative;
  /* min-height: 100px; */
  z-index: 2;
}

.sec_bg_wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 背景だけ画面サイズ */
.sec_bg {
  position: sticky;
  height: 100vh;
  /* top: 0; */

  top: var(--header-height);
  z-index: -1;
  background-attachment: fixed;
}

.sec_products .sec_bg .bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.sec_products .sec_bg .bg.selected {
  opacity: 1;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(1) {
  background: url(../img/bg_main_products_01.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(2) {
  background: url(../img/bg_main_products_02.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(3) {
  background: url(../img/bg_main_products_03.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(4) {
  background: url(../img/bg_main_products_04.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(5) {
  background: url(../img/bg_main_products_05.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(6) {
  background: url(../img/bg_main_products_06.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(7) {
  background: url(../img/bg_main_products_07.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(8) {
  background: url(../img/bg_main_products_08.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(9) {
  background: url(../img/bg_main_products_09.jpg) repeat-y center top / 100%;
}

.sec_products.skincare .sec_bg .bg:nth-of-type(10) {
  background: url(../img/bg_main_products_10.jpg) repeat-y center top / var(--pcMainContentWidth) auto fixed;
}

.sec_products.odekake .sec_bg .bg:nth-of-type(1) {
  background: url(../img/bg_main_products_11.jpg) repeat-y center top / 100%;
}

.sec_products.odekake .sec_bg .bg:nth-of-type(2) {
  background: url(../img/bg_main_products_12.jpg) repeat-y center top / 100%;
}

.sec_products.odekake .sec_bg .bg:nth-of-type(3) {
  background: url(../img/bg_main_products_13.jpg) repeat-y center top / 100%;
}

.sec_products.odekake .sec_bg .bg:nth-of-type(4) {
  background: url(../img/bg_main_products_14.jpg) repeat-y center top / var(--pcMainContentWidth) auto fixed;
}

.sec_end .sec_bg {
  background: url(../img/bg_main_sec_end.png) repeat-y center top /100%;
  position: relative;
  height: 100%;
  top: 0;
}


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

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

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

.lp_contents .js-fadecharacter {
  opacity: 0;
}

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

.lp_contents .js-fadecharacter:nth-of-type(1) {
  transition: opacity 0.25s ease-in 0.2s;
}

.lp_contents .js-fadecharacter:nth-of-type(2) {
  transition: opacity 0.25s ease-in 0.25s;
}

.lp_contents .js-fadecharacter:nth-of-type(3) {
  transition: opacity 0.25s ease-in 0.5s;
}

.lp_contents .js-fadecharacter:nth-of-type(4) {
  transition: opacity 0.25s ease-in 0.35s;
}

.lp_contents .js-fadecharacter:nth-of-type(5) {
  transition: opacity 0.25s ease-in 0.3s;
}

.lp_contents .js-fadecharacter:nth-of-type(6) {
  transition: opacity 0.25s ease-in 0.45s;
}

.lp_contents .js-fadecharacter:nth-of-type(7) {
  transition: opacity 0.25s ease-in 0.7s;
}

.lp_contents .js-fadecharacter:nth-of-type(8) {
  transition: opacity 0.25s ease-in 0.4s;
}

.lp_contents .js-fadeblur {
  opacity: 0;
  filter: blur(5px);
}

.lp_contents .js-fadeblur.is-show {
  animation: fadeBlurIn 1.5s ease forwards;
}

@keyframes fadeBlurIn {
  from {
    opacity: 0;
    filter: blur(5px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

.lp_contents .js-fadescale {
  transform: scale(0.5);
  opacity: 0;
}

.lp_contents .js-fadescale.is-show {
  animation: fadeScaleIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) .2s forwards;

}

@keyframes fadeScaleIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lp_contents .js-treesGrow {
  transform: translate(0, 100%);
  backface-visibility: hidden;
}

.lp_contents .js-treesGrow.is-show {
  animation: treesGrow 1s cubic-bezier(0.26, 0.09999, 0.14, 1) forwards;
}

@keyframes treesGrow {
  from {
    transform: translate(0, 100%);
  }

  to {
    transform: translate(0, 0%);
  }
}

.lp_contents .js-rotate {
  opacity: 0;
  filter: blur(calc(5 * var(--rate)));
  transition: opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), translate 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), scale 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), rotate 1.1s cubic-bezier(0.22, 0.61, 0.36, 1), filter 1.1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.lp_contents .js-rotate.rotate_right {
  rotate: -15deg;
}

.lp_contents .js-rotate.rotate_left {
  rotate: 15deg;
}

.lp_contents .js-rotate.is-show {
  opacity: 1;
  filter: blur(0);
  rotate: 0deg;
  animation: rotate 6s ease-in-out infinite;
}

.lp_contents .js-opa {
  opacity: 0;
  filter: blur(5px);
  transition: opacity .5s, filter .8s;
  transition-delay: .3s;
}

.lp_contents .js-opa.is-show {
  opacity: 1;
  filter: unset;
}

.lp_contents .character.js-animation {
  opacity: 0;
  translate: 0 calc(80 * (var(--rate)));
  transition: opacity .8s, translate .8s;
}

.lp_contents .character.js-animation.is-show {
  opacity: 1;
  translate: unset;
  animation: rotating 4s ease-in-out infinite;
}

@keyframes jumpafter {
  0% {
    transform: translateY(max(5%, calc(10 * var(--rate))));
  }

  50% {
    transform: translateY(min(-5%, calc(-10 * var(--rate))));
  }

  100% {
    transform: translateY(max(5%, calc(10 * var(--rate))));
  }
}

@keyframes rotate {
  0% {
    transform: rotate(1.8deg);
  }

  25% {
    transform: rotate(-2.1deg);
  }

  50% {
    transform: rotate(2deg);
  }

  75% {
    transform: rotate(-2.1deg);
  }

  100% {
    ttransform: rotate(1.8deg);
  }
}


@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(8deg);
  }

  100% {
    transform: rotate(0deg);
  }
}



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

.lp_contents .modal_toggle {
  /* cursor: pointer; */
  transform: translateX(100%);
  transition: all 0.6s ease !important;
}

.lp_contents .modal_toggle.is-active {
  transform: translateX(0);
}

.lp_contents .modal_toggle.fixed {
  position: fixed;
  bottom: calc(138 * (var(--rate)));
  right: 0;
  z-index: 100;
}

.lp_contents .modal_toggle.fixed.none {
  opacity: 0;
}

.lp_contents .modal_toggle {
  position: fixed;
  width: calc(320 * (var(--rate)));
  height: calc(146 * (var(--rate)));
  background: url(../img/modal_btn.png) no-repeat center / 100%;
  z-index: 5;
  right: calc(-70 * (var(--rate)));
  bottom: calc(33 * (var(--rate)));
}

html.no_scroll {
  overflow: hidden;
}

.lp_contents .modal_button {
  position: relative;
  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: #138b4b;
  opacity: .5;
  content: "";
}

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

.lp_contents .modal_wrap {
  width: calc(690 * ((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(75 * ((var(--rate)))) 0 calc(21 * ((var(--rate))));
  overflow: visible;
  position: relative;
  transition: opacity .5s;
}

.lp_contents .modal_content ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.lp_contents .modal_content ul li {
  position: relative;
}

/* 縦線（右側） */
.lp_contents .modal_content ul li:not(:nth-child(3n))::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(to bottom,
      #b3b3b3 2px,
      transparent 2px);
  background-size: auto 4px;
  background-repeat: repeat-y;
}

/* 横線（下側） */
.lp_contents .modal_content ul li:not(:nth-last-child(-n + 3))::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right,
      #b3b3b3 2px,
      transparent 2px);
  background-size: 4px auto;
  background-repeat: repeat-x;
  background-position: 2px 0;
}

.lp_contents .modal_content ul li a {
  padding: calc(20 * ((var(--rate)))) 0 calc(26 * ((var(--rate))));
  display: flex;
  flex-direction: column;
}

.lp_contents .modal_content ul li p {
  font-size: calc(18 * ((var(--rate))));
  line-height: calc(27/18);
  min-height: calc(54 * ((var(--rate))));
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp_contents .modal_content ul li:nth-of-type(1) p {
  color: var(--color-lp_products_01);
}

.lp_contents .modal_content ul li:nth-of-type(2) p {
  color: var(--color-lp_products_02);
}

.lp_contents .modal_content ul li:nth-of-type(3) p {
  color: var(--color-lp_products_03);
}

.lp_contents .modal_content ul li:nth-of-type(4) p {
  color: var(--color-lp_products_04);
}

.lp_contents .modal_content ul li:nth-of-type(5) p {
  color: var(--color-lp_products_05);
}

.lp_contents .modal_content ul li:nth-of-type(6) p {
  color: var(--color-lp_products_06);
}

.lp_contents .modal_content ul li:nth-of-type(7) p {
  color: var(--color-lp_products_07);
}

.lp_contents .modal_content ul li:nth-of-type(8) p {
  color: var(--color-lp_products_08);
}

.lp_contents .modal_content ul li:nth-of-type(9) p {
  color: var(--color-lp_products_09);
}

.lp_contents .modal_content ul li:nth-of-type(10) p {
  color: var(--color-lp_products_10);
}

.lp_contents .modal_content ul li:nth-of-type(11) p {
  color: var(--color-lp_products_11);
}

.lp_contents .modal_content ul li:nth-of-type(12) p {
  color: var(--color-lp_products_12);
}

.lp_contents .modal_content ul li:nth-of-type(13) p {
  color: var(--color-lp_products_13);
}

.lp_contents .modal_content ul li:nth-of-type(14) p {
  color: var(--color-lp_products_14);
}

.lp_contents .modal_content ul li:nth-of-type(15) p {
  display: none;
}

.lp_contents .modal_content ul li a::before {
  content: "";
  display: block;
  width: calc(230 * ((var(--rate))));
  height: calc(110 * ((var(--rate))));
  margin-bottom: calc(16 * ((var(--rate))));
}

.lp_contents .modal_content ul li:nth-of-type(1) a::before {
  background: url(../img/modal_ankerlink_01.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(2) a::before {
  background: url(../img/modal_ankerlink_02.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(3) a::before {
  background: url(../img/modal_ankerlink_03.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(4) a::before {
  background: url(../img/modal_ankerlink_04.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(5) a::before {
  background: url(../img/modal_ankerlink_05.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(6) a::before {
  background: url(../img/modal_ankerlink_06.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(7) a::before {
  background: url(../img/modal_ankerlink_07.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(8) a::before {
  background: url(../img/modal_ankerlink_08.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(9) a::before {
  background: url(../img/modal_ankerlink_09.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(10) a::before {
  background: url(../img/modal_ankerlink_10.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(11) a::before {
  background: url(../img/modal_ankerlink_11.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(12) a::before {
  background: url(../img/modal_ankerlink_12.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(13) a::before {
  background: url(../img/modal_ankerlink_13.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(14) a::before {
  background: url(../img/modal_ankerlink_14.png) no-repeat center / 100%;
}

.lp_contents .modal_content ul li:nth-of-type(15) a::before {
  background: url(../img/modal_ankerlink_15.png) no-repeat center / 100%;
  width: calc(230 * ((var(--rate))));
  height: calc(136 * ((var(--rate))));
  margin-top: calc(24 * ((var(--rate))));
  margin-bottom: calc(0 * ((var(--rate))));
}