@charset "UTF-8";

:root {
  --rate: 46.8rem / 780;
  --color_bg:#fef1f7;
  --color_pink01: #e488a1;
  --color_pink02: #f1c3d0;
  --color_black:#1f1f1f;
  --color_gray:#4c4c4c;
  --color_white: #ffffff;
}

/*--------------------------------
            CSS Animation
--------------------------------*/

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

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

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

  100% {
    opacity: 1;
  }
}

.ef2 {
  opacity: 0;
}
.ef2.active {
  -webkit-animation: fade 1.8s ease forwards;
          animation: fade 1.8s ease forwards;
}
@-webkit-keyframes fade {
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade {
  1% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.ef3,
.ef3 li {
  translate: 0 5svh;
  transition: translate 1.5s ease, opacity 1.8s ease;
  opacity: 0;
}

.ef3.active,
.ef3.active li {
  opacity: 1;
  translate: 0 0;
}

.ef3.active li:nth-child(1) { transition-delay: 0s !important; }
.ef3.active li:nth-child(2) { transition-delay: 0.3s !important; }
.ef3.active li:nth-child(3) { transition-delay: 0.6s !important; }
.ef3.active li:nth-child(4) { transition-delay: 1.2s !important; }
.ef3.active li:nth-child(5) { transition-delay: 1.5s !important; }

/*--------------------------------
                共 通
 --------------------------------*/

main,#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
  max-width: 100%;
}

#FooterWrap,
.archive_area{
  position: relative;
  z-index: 0;
  background-color: var(--color_white);
  z-index: 999;
}

#footer {
  margin-top: 0;
}

#header_txt_slider,
#header_img_slider {
  position: relative;
  z-index: 100;
}
#lp_contents *{
  box-sizing: border-box;
}
#lp_contents{
  font-family: 'Lato', 'ryo-gothic-plusn', sans-serif;
  font-feature-settings: "palt";
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.05em;
  line-height: 2;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
}
.lp_inner {
  padding-bottom:calc(200 * (var(--rate)));
  background-color: var(--color_bg);
}
#lp_contents .sp_only { 
  display: none;
}
#lp_contents img {
  width: 100%;
  display: block;
  height: auto;
  image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden;
}
#lp_contents a { 
  display: block;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.5s;
  color: inherit;
}
#lp_contents a:hover {
  opacity: .8
}
#lp_contents ul li,
#lp_contents ol li {
  list-style: none;
}
#lp_contents section {
  position: relative;
}
#lp_contents .link_none {
  pointer-events: none;
  display: inline-block;
  display: -webkit-inline-box;
}

/*------------ Text ------------*/
#lp_contents h1,
#lp_contents h2,
#lp_contents h3,
#lp_contents h4 {
  padding: 0;
  float: none;
  font-weight: normal; 
}

#lp_contents p {
  display: block;
  margin: 0;
  font-family: 'Lato', 'ryo-gothic-plusn', sans-serif;
  font-feature-settings: "palt";
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.1em;
  line-height: 2;
  color: var(--color_black);
}
#lp_contents sup{
  font-size: 70%;
  margin-top: -0.6rem;
}
#lp_contents .note{
  display: inline-block;
  font-size: calc(20 * (var(--rate)));
  line-height: 2;
}
#lp_contents .bold{
  font-weight: bold;
}

#lp_contents a {
  color: var(--color_pink01);
  text-decoration: underline;
}

#lp_contents a {
  -webkit-tap-highlight-color: transparent;
  /* iOS Safari用 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  /* Android Chrome用 */
}

#lp_contents .inline_link {
  display: inline;
  color: var(--color_pink01);
}

/*============================
MV
============================*/
#lp_contents .sec_mv {
  position: relative;
  background-color: var(--color_bg);
}

#lp_contents .lead_area {
  padding-top: calc(105 * (var(--rate)));
}

#lp_contents .lead {
  margin-top: calc(37 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
}

#lp_contents .lead_area .lead:first-of-type {
  margin-top: 0;
}

#lp_contents .lead .inline_link {
  font-weight: 700;
}

#lp_contents .navlist {
  margin-top: calc(110 * (var(--rate)));
}

#lp_contents .navlist ul {
  position: relative;
  display: flex;
}

#lp_contents .navlist ul {
  position: relative;
}

#lp_contents .navlist ul:before,
#lp_contents .navlist ul:after {
  width: 100%;
  height: calc(2 * (var(--rate)));
  left: 50%;
  transform: translateX(-50%);
  background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
  content: "";
  display: block;
  position: absolute;
  background-image: linear-gradient(to right, var(--color_pink01) 50%, transparent 50%);
  background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
}

#lp_contents .navlist ul:before {
  top: 0;
}

#lp_contents .navlist ul:after {
  bottom: 0;
}

#lp_contents .navlist ul li {
  position: relative;
  width: calc(100%/3);
}

#lp_contents .navlist ul li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(50 * (var(--rate))) 0;
  text-decoration: none;
}


#lp_contents .navlist ul li:before {
  width: calc(2 * (var(--rate)));
  height: 100%;
  top: 0;
  right: 0;
  background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
  content: "";
  display: block;
  position: absolute;
  background-image: linear-gradient(to bottom, var(--color_pink01) 50%, transparent 50%);
  background-size: calc(2 * var(--rate)) calc(8 * var(--rate));
  background-repeat: repeat-y;
}

#lp_contents .navlist ul li:last-of-type {
  height: 0;
}

#lp_contents .navlist ul li img {
  width: calc(140 * (var(--rate)));
}

#lp_contents .navlist ul li .nav_name {
  margin-top: calc(20 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
  line-height: calc(41.6/26);
}

#lp_contents .navlist ul li .nav_arrow {
  display: block;
  margin-top: calc(15 * (var(--rate)));
  width: calc(40 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  background: url(../img/nav_arrow.svg) no-repeat;
  background-size: 100%;
}


/*============================
Design
============================*/
#lp_contents .sec01 {
  padding-top: calc(70 * (var(--rate)));
  background-color: var(--color_bg);
}

#lp_contents .sec_inner {
  padding-top: calc(80 * (var(--rate)));
  padding-bottom: calc(180 * (var(--rate)));
  border-radius: calc(120 * (var(--rate))) calc(120 * (var(--rate))) 0 0;
}

#lp_contents .sec02 .sec_inner {
  background-color: var(--color_white);
}

#lp_contents .sec03 {
  background-color: var(--color_white);
}

#lp_contents .sec03 .sec_inner {
  background-color: var(--color_bg);
  padding-bottom:0;
}

#lp_contents .sec_title {
  width: calc(290 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .makeup_img_outside {
  margin-top: calc(40 * (var(--rate)));
  text-align: center;
}

#lp_contents .item_detail {
  margin-top: calc(172 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
  line-height: calc(57.2/26);
}

#lp_contents .item_detail a {
  font-weight: 700;
}

#lp_contents .makeup_img_wrap {
  width: calc(780 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .makeup_img {
  width: calc(780 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .movie_wrap {
  width: calc(780 * (var(--rate)));
  height: calc(1170 * (var(--rate)));
  overflow: hidden;
  position: relative;
}

#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 .movie_wrap .movie_sound {
  position: absolute;
  bottom: calc(18 * (var(--rate)));
  right: calc(21 * (var(--rate)));
  width: calc(38 * (var(--rate)));
  height: calc(38 * (var(--rate)));
  z-index: 10;
  cursor: pointer;
}

#lp_contents .movie_wrap .movie_sound .btn_sound {
  display: none;
}

#lp_contents .movie_wrap .movie_sound .btn_sound.is-active {
  display: block;
}

#lp_contents .makeup_img_wrap .slick-dots {
  bottom: calc(-80 * (var(--rate)));
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
}

#lp_contents .makeup_img_wrap .slick-dots li {
  width: fit-content;
  height: fit-content;
  margin: 0 calc(10 * (var(--rate)));
}

#lp_contents .makeup_img_wrap .slick-dots li button {
  width: calc(60 * (var(--rate)));
  height: calc(22 * (var(--rate)));
  padding: 0;
}

#lp_contents .makeup_img_wrap .slick-dots li button:before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: calc(4 * (var(--rate)));
  opacity: 1 !important;
  background: var(--color_pink02);
  content: "";
  transition: background-color .3s;
}

#lp_contents .makeup_img_wrap .slick-dots li.slick-active button:before {
  background: var(--color_pink01);
}

#lp_contents .makeup_img_wrap .slick-arrow {
  z-index: 2;
  top: auto;
  bottom: calc(-80 * (var(--rate)));
  left: auto;
  transform: rotate(45deg);
  width: calc(25 * (var(--rate)));
  height: calc(25 * (var(--rate)));
}

#lp_contents .makeup_img_wrap .slick-prev,
#lp_contents .makeup_img_wrap .slick-next {
  border-left: solid var(--color_gray);
  border-bottom: solid var(--color_gray);
  border-width: calc(2 * (var(--rate)));
}

#lp_contents .makeup_img_wrap .slick-prev {
  left: calc(196 * (var(--rate)));
}

#lp_contents .makeup_img_wrap .slick-next {
  right: calc(196 * (var(--rate)));
  transform: rotate(-135deg);
}

#lp_contents .sec03 .makeup_img_wrap .slick-prev {
  left: calc(236 * (var(--rate)));
}

#lp_contents .sec03 .makeup_img_wrap .slick-next {
  right: calc(236 * (var(--rate)));
}

#lp_contents .makeup_img_wrap .slick-arrow::before {
  display: none;
}

/* --- 基本設定 --- */
#lp_contents .accordion {
  width: calc(700 * (var(--rate)));
  border: solid var(--color_pink01) calc(2 * (var(--rate)));
}

#lp_contents .accordion_outer {
  display: none; /* 初期は非表示 */
  overflow: hidden;
  position: relative;
  padding: calc(60 * (var(--rate))) 0 calc(60 * (var(--rate)));
  background-color: var(--color_bg);
}

#lp_contents .sec02 .accordion_outer {
  background-color: var(--color_white);
}

#lp_contents .accordion_useitem .accordion_outer {
  display: block;
}

#lp_contents .accordion_outer:before {
  width: 100%;
  height: calc(2 * (var(--rate)));
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
  content: "";
  display: block;
  position: absolute;
  background-image: linear-gradient(to right, var(--color_pink01) 50%, transparent 50%);
  background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
}

#lp_contents .accordion_howtouse .accordion_outer {
  padding: calc(40 * (var(--rate))) 0 calc(100 * (var(--rate)));
}

#lp_contents .accordion_useitem {
  margin: calc(90 * (var(--rate))) auto 0;
}

#lp_contents .accordion_howtouse {
  margin: calc(50 * (var(--rate))) auto 0;
}

#lp_contents .accordion_trigger {
  position: relative;
  padding: calc(23 * (var(--rate))) 0;
  font-size: calc(42 * (var(--rate)));
  background-color: rgb(255 255 255 / 70%);
  color: var(--color_pink01);
  letter-spacing: 0.1em;
  cursor: pointer;
}

#lp_contents .sec02 .accordion_trigger {
  background-color: rgb(254 240 246 / 70%);
}

#lp_contents .accordion_howtouse .accordion_trigger {
  font-size: calc(46 * (var(--rate)));
  text-transform: uppercase;
}

#lp_contents .accordion_trigger:after,
#lp_contents .accordion_trigger:before {
  position: absolute;
  top: 50%;
  right: calc(30 * (var(--rate)));
  display: block;
  width: calc(40 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-color: var(--color_pink01);
  transition: transform .3s;
  content: "";
}

#lp_contents .accordion_trigger:before {
  transform: rotate(90deg);
}

#lp_contents .accordion.open .accordion_trigger:before {
  transform: rotate(0deg);
}

#lp_contents .use_item_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(20 * (var(--rate))) calc(25 * (var(--rate)));
}

#lp_contents .sec03 .use_item_list {
  width: calc(500 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .use_item_list li {
  width: calc(200 * (var(--rate)));
}

#lp_contents .use_item_list li:nth-of-type(4),
#lp_contents .use_item_list li:nth-of-type(5) {
  width: calc(240 * (var(--rate)));
}

#lp_contents .use_item_list li img {
  width: calc(200 * (var(--rate)));
}

#lp_contents .use_item_list li:nth-of-type(4) img,
#lp_contents .use_item_list li:nth-of-type(5) img {
  width: calc(240 * (var(--rate)));
}

#lp_contents .use_item_list li a {
  text-decoration: none;
}

#lp_contents .use_item_list li .useitem_name {
  margin-top: calc(25 * (var(--rate)));
  font-size: calc(22 * (var(--rate)));
  line-height: calc(35.2/22);
}

#lp_contents .accordion_inner_title {
  font-size: calc(40 * (var(--rate)));
  margin-top: calc(50 * (var(--rate)));
}

#lp_contents .accordion_inner .accordion_inner_title:first-of-type {
  margin-top: calc(0 * (var(--rate)));
}

#lp_contents .accordion_img_blk {
  display: flex;
  justify-content: center;
  gap: calc(60 * (var(--rate)));
  margin-top: calc(30 * (var(--rate)));
}

#lp_contents .accordion_img_blk a {
  width: fit-content;
}

#lp_contents .howtouse_detail_img {
  width: calc(360 * (var(--rate)));
}

#lp_contents .howtouse_item_img {
  width: calc(200 * (var(--rate)));
  margin-top: calc(70 * (var(--rate)));
}

#lp_contents .howtouse_list {
  width: calc(620 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
  display: flex;
  flex-direction: column;
  gap: calc(30 * (var(--rate)));
}

#lp_contents .howtouse_list li {
  display: flex;
}

#lp_contents .howtouse_list li span {
  display: inline-block;
  margin-top: calc(5 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
}

#lp_contents .howtouse_list li .howtouse_li_text {
  margin-top: calc(-2 * (var(--rate)));
  margin-left: calc(16 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
  line-height: calc(52 / 26);
  letter-spacing: 0.1em;
  text-align: justify;
}

#lp_contents .howtouse_text {
  width: calc(620 * (var(--rate)));
  margin: calc(18 * (var(--rate))) auto 0;
  font-size: calc(26 * (var(--rate)));
  line-height: calc(52 / 26);
  letter-spacing: 0.1em;
  text-align: justify;
}

#lp_contents .accordion_inner_btn {
  margin-top: calc(25 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline var(--color_black) calc(2 * (var(--rate)));
  text-underline-offset: calc(10 * (var(--rate)));
  display: block;
  line-height: 2;
  cursor: pointer;
}

.accordion_howtouse .accordion_content {
  overflow: hidden;
  max-height: calc(780 * var(--rate));
  transition: max-height 0.5s ease-in-out;
}

@-moz-document url-prefix() {
  .accordion_howtouse .accordion_content {
    max-height: calc(785 * var(--rate));
  }
}

.sec02 .accordion_howtouse .accordion_content {
  max-height: calc(831 * var(--rate));
}


.sec01 .accordion_howtouse .accordion_content.open {
  max-height: calc(2275 * var(--rate))!important;
  transition: max-height 0.5s ease-in-out;
  margin-bottom: calc(60 * var(--rate));
}
.sec02 .accordion_howtouse .accordion_content.open {
  max-height: calc(2027 * var(--rate))!important;
  transition: max-height 0.5s ease-in-out;
  margin-bottom: calc(70 * var(--rate));
}
.sec03 .accordion_howtouse .accordion_content.open {
  max-height: calc(2210 * var(--rate))!important;
  transition: max-height 0.5s ease-in-out;
  margin-bottom: calc(66 * var(--rate));
}



/*============================
Btn
============================*/
#lp_contents .btn_all {
  margin-top: calc(100 * var(--rate));
}

#lp_contents .btn_all_link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

#lp_contents .btn_all_img {
  width: calc(220 * (var(--rate)));
}

#lp_contents .btn_all_txt {
  position: relative;
  text-transform: uppercase;
  width: calc(300 * (var(--rate)));
  margin-left: calc(-6 * (var(--rate)));
  font-size: calc(40 * (var(--rate)));
}

#lp_contents .btn_all_txt:before {
  position: absolute;
  bottom: calc(3 * (var(--rate)));
  right: 0;
  width: calc(2 * (var(--rate)));
  height: calc(25 * (var(--rate)));
  margin-bottom: calc(1 * (var(--rate)));
  border-radius: calc(10 * (var(--rate)));
  background-color: var(--color_pink01);
  transform-origin: bottom center;
  rotate: 315deg;
  content: "";
}

#lp_contents .btn_all_txt:after {
  position: absolute;
  bottom: calc(3 * (var(--rate)));
  left: 0;
  width: 100%;
  height: calc(2 * (var(--rate)));
  border-radius: calc(10 * (var(--rate)));
  background-color: var(--color_pink01);
  animation: arrow 3s infinite;
  transform-origin: center right;
  content: "";
}

@keyframes arrow {
  0% {
    scale: 1 1;
    transform-origin: center right;
  }
  49% {
    scale: 0 1;
    transform-origin: center right;
  }
  51% {
    scale: 0 1;
    transform-origin: center left;
  }
  100% {
    scale: 1 1;
    transform-origin: center left;
  }

}

#lp_contents .btn_check_all_link {
  width: calc(600 * (var(--rate)));
  margin: calc(200 * (var(--rate))) auto 0;
  padding: calc(50 * (var(--rate))) 0 calc(55 * (var(--rate)));
  font-size: calc(44 * (var(--rate)));
  letter-spacing: 0.1em;
  color: var(--color_black);
  text-decoration: none;
  text-transform: uppercase;
  border-radius: calc(70 * (var(--rate)));
  background: url(../img/btn.png) no-repeat;
  background-color: rgb(255 255 255 / 70%);
  background-size: 100%;
}

/*--------------------------------
            Layout  PC
--------------------------------*/
@media screen and (min-width: 768px){

  #lp_contents .grid_area{
    display: grid;
    grid-template-columns: 1fr 46.8rem 1fr;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

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

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

  #lp_contents .left_area a {
    width: 38rem;
    margin: 0 auto;
  }

  #lp_contents .lp_inner {
    grid-column: 2;
    width: 46.8rem;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    overflow: clip;
  }

  #lp_contents .right_area{
    top: 0;
    grid-column: 3;
    -webkit-clip-path: border-box;
    clip-path: border-box;
  }
  
  #lp_contents .navlist_pc ul {
    position: relative;
    width: 39rem;
    margin: 0 auto;
    display: flex;
  }
  
  #lp_contents .navlist_pc ul:before,
  #lp_contents .navlist_pc ul:after {
    width: 100%;
    height: 0.1rem;
    left: 50%;
    transform: translateX(-50%);
    background-size: 0.4rem 0.1rem;
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to right, var(--color_pink01) 50%, transparent 50%);
    background-size: 0.4rem 0.1rem;
  }
  
  #lp_contents .navlist_pc ul:before {
    top: 0;
  }
  
  #lp_contents .navlist_pc ul:after {
    bottom: 0;
  }
  
  #lp_contents .navlist_pc ul li {
    position: relative;
    width: calc(100%/3);
  }
  
  #lp_contents .navlist_pc ul li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 0;
    text-decoration: none;
  }
  
  #lp_contents .navlist_pc ul li:before {
    width: 0.1rem;
    height: 100%;
    top: 0;
    right: 0;
    background-size: 0.4rem 0.1rem;
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, var(--color_pink01) 50%, transparent 50%);
    background-size: 0.1rem 0.4rem;
    background-repeat: repeat-y;
  }
  
  #lp_contents .navlist_pc ul li:last-of-type {
    height: 0;
  }
  
  #lp_contents .navlist_pc ul li img {
    width: 7rem;
  }
  
  #lp_contents .navlist_pc ul li .nav_name {
    margin-top: 1rem;
    font-size: 1.3rem;
    line-height: calc(20.8/13);
  }
  
  #lp_contents .navlist_pc ul li .nav_arrow {
    display: block;
    margin-top: 1.5rem;
    width: 2rem;
    height: 1rem;
    background: url(../img/nav_arrow.svg) no-repeat;
    background-size: 100%;
  }



}


/*--------------------------------
            Responsive
 --------------------------------*/

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



/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

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

  .page-share-btn{
    height: 0;
  }

  #share{
    z-index: 100 !important;
    bottom: calc(200 * (100vw / 780)) !important;
  }


  #lp_contents .sp_only{display: block;}
  #lp_contents .pc_only{display: none;}
  #lp_contents a:hover{opacity: 1}


  #lp_contents .sp_nav {
    display: flex;
    position: fixed;
    transform: translateX(-50%) translateY(100%);
    visibility: hidden;
    bottom: 0;
    left:50%;
    width: 100%;
    z-index: -2;
    background-color: var(--color_white);
  }
  #lp_contents .sp_nav.hidden {
    transition: all 0.6s 0.3s;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    z-index: 100;
  }
  #lp_contents .sp_nav.visible {
    transition: all 0.6s 0.2s ease;
    transform: translateX(-50%) translateY(100%);
    z-index: -2;
  }

  #lp_contents .sp_nav ul {
    display: flex;
    width: 100%;
    height: calc(180 * (var(--rate)));
  }

  #lp_contents .sp_nav ul li {
    position: relative;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #lp_contents .sp_nav ul li:before {
    width: calc(2 * (var(--rate)));
    height: 100%;
    top: 0;
    right: 0;
    background-size: calc(8 * var(--rate)) calc(2 * var(--rate));
    content: "";
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, var(--color_pink01) 50%, transparent 50%);
    background-size: calc(2 * var(--rate)) calc(8 * var(--rate));
    background-repeat: repeat-y;
  }

  #lp_contents .sp_nav ul li:last-of-type:before {
    width: 0;
  }

  #lp_contents .sp_nav a {
    text-decoration: none;
  }

  #lp_contents .sp_nav .nav_img {
    width: calc(84 * (var(--rate)));
    margin: calc(20 * (var(--rate))) auto;
  }

  #lp_contents .sp_nav .nav_name {
    font-size: calc(24 * (var(--rate)));
    text-decoration: none;
    color: var(--color_black);
    line-height: calc(31.2/24);

  }

}

/*--------------------------------
        PC 背景切り替え
--------------------------------*/
.lp_contents {
  background-color: #fef1f7;
  transition: background-color 1.0s ease-in-out;
}

.lp_contents.bg_sec01 { background-color: #fef1f7; }
.lp_contents.bg_sec02 { background-color: #ffffff; }
.lp_contents.bg_sec03 { background-color: #fef1f7; }