@charset "UTF-8";

:root {
  --rate: 46.8rem / 780;
  --font-lp_eng: "lato", sans-serif;
  --font-lp_jpn: "ryo-gothic-plusn", sans-serif;
  --font-lp_jpn_serif: "source-han-serif-japanese", serif;
  --color-purple:#7563AC;
  --color-gray01:#666666;
  --color-gray02:#828282;
  --color-white: #ffffff;
    --color_black:#1f1f1f;
}

/*--------------------------------
            CSS Animation
--------------------------------*/
#lp_contents .anim {
  opacity: 0;
}
#lp_contents .anim_enable {
  -webkit-animation: opa 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0.2s 1 forwards;
          animation: opa 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0.2s 1 forwards;
}
@-webkit-keyframes opa {
  2% {
    opacity: 0;
    filter: blur(0.8rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes opa {
  2% {
    opacity: 0;
    filter: blur(0.8rem);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

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

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(26 * (var(--rate)));
  letter-spacing: 0.125em;
  line-height: 2.2;
  text-align: center;
  display: flex;
  justify-content: center;
  position: relative;
}

#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: all 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;
  z-index: 10;
}
#lp_contents .lp_inner{
  position: relative;
  z-index: 3;
  width: 46.8rem;
  order: 2;
  overflow: hidden;
}

#lp_contents .sec {
  position: relative;

}

#lp_contents .link_none {
  pointer-events: none;
  display: inline-block;
  display: -webkit-inline-box;
}

/*------------ BG ------------*/
#lp_contents .bg01 {
  background: url(../img/bg_base01.jpg?251111) no-repeat;
  background-size: 100%;
}

#lp_contents .bg02 {
  background: url(../img/bg_base02.jpg) no-repeat;
  background-size: 100%;
}

/* BG top setting */
.lp_contents .sec_lineup, 
.lp_contents .sec01 .kit_name,
.lp_contents .sec01 .kit_item_wrap01,
.lp_contents .sec01 .kit_item_wrap02,
.lp_contents .sec02,
.lp_contents .sec02 .kit_item_wrap04,
.lp_contents .sec03 {
  position: relative;
  z-index: 10;
}

.lp_contents .sec_lineup:after,
.lp_contents .sec01 .kit_name:after, 
.lp_contents .sec01 .kit_item_wrap01:after,
.lp_contents .sec01 .kit_item_wrap02:after,
.lp_contents .sec02:after,
.lp_contents .sec02 .kit_item_wrap04:after,
.lp_contents .sec03:after {
  position: absolute;
  left: 0;
  right: 0;
  width: calc(780 * (var(--rate)));
  content: "";
  z-index: -5;
}

.lp_contents .sec_lineup:after {
  bottom: calc(-965 * (var(--rate)));
  height: calc(1120 * (var(--rate)));
  background: url(../img/bg_top01.png) no-repeat;
  background-size: 100%;
}

.lp_contents .sec01 .kit_name:after {
  bottom: calc(-855 * (var(--rate)));
  height: calc(1300 * (var(--rate)));
  background: url(../img/bg_top02.png) no-repeat;
  background-size: 100%;
}

.lp_contents .sec01 .kit_item_wrap01:after {
  bottom: calc(-155 * (var(--rate)));
  height: calc(1300 * (var(--rate)));
  background: url(../img/bg_top03.png) no-repeat;
  background-size: 100%;
}

.lp_contents .sec01 .kit_item_wrap02:after {
  bottom: calc(-145 * (var(--rate)));
  height: calc(1300 * (var(--rate)));
  background: url(../img/bg_top04.png) no-repeat;
  background-size: 100%;
}

.lp_contents .sec02:after {
  top: calc(25 * (var(--rate)));
  height: calc(1780 * (var(--rate)));
  background: url(../img/bg_top05.png) no-repeat;
  background-size: 100%;
}

.lp_contents .sec02 .kit_item_wrap04:after {
  bottom: calc(-350 * (var(--rate)));
  height: calc(500 * (var(--rate)));
  background: url(../img/bg_top06.png) no-repeat;
  background-size: 100%;
}

.lp_contents .sec03:after {
  top: calc(0 * (var(--rate)));
  height: calc(500 * (var(--rate)));
  background: url(../img/bg_top07.png) no-repeat;
  background-size: 100%;
}

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

#lp_contents p {
  display: block;
  margin: 0;
  font-size: calc(26 * (var(--rate)));
  letter-spacing: 0.125em;
  line-height: 2.2;
  text-align: center;
  color: var(--color-purple);
}
#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;
}

/*------------ MV ------------*/
#lp_contents .sec_mv {
  padding-bottom: calc(120 * (var(--rate)));
}


#lp_contents .title {
  width: 100%;
  margin: calc(50 * (var(--rate))) auto 0;
}

#lp_contents .sec_mv .lead {
  position: relative;
  margin: calc(-225 * (var(--rate))) auto 0;
  text-align: center;
}

#lp_contents .release_list {
  display: flex;
  justify-content: center;
  gap: calc(20 * (var(--rate)));
  margin: calc(70 * (var(--rate))) auto 0;
  padding-top: calc(20 * (var(--rate)));
  width: calc(410 * (var(--rate)));
  height: calc(410 * (var(--rate)));
  background: url(../img/decor01.svg) no-repeat;
  background-size: 100%;
  flex-direction: column;
}

#lp_contents .release_date {
  color: var(--color-gray01);
  line-height: 2;
}

#lp_contents .release_date span {
  display: inline-block;
  font-size: calc(26 * (var(--rate)));
  color: var(--color-purple);
  line-height: 2;
}

/*------------ Line up ------------*/
#lp_contents .sec_lineup {
  position: relative;
  padding-bottom: calc(180 * (var(--rate)));
}

#lp_contents .sec_lineup:before {
  position: absolute;
  bottom: calc(2 * (var(--rate)));
  transform: translateX(-50%);
  left: 50%;
  display: block;
  width: 100%;
  height: calc(32 * (var(--rate)));
  background: url(../img/decor_border01.svg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .sec_title_eng {
  position: relative;
  width: calc(310 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .sec_title_eng:before,
#lp_contents .sec_title_eng:after {
  position: absolute;
  top: 50%;
  margin-top: calc(-2 * (var(--rate)));
  transform: translateY(-50%);
  display: block;
  width: calc(215 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-color: var(--color-purple);
  content: "";
}

#lp_contents .sec_title_eng:before {
  right: calc(-235 * (var(--rate)));
}

#lp_contents .sec_title_eng:after {
  left: calc(-235 * (var(--rate)));
}

#lp_contents .sec_title {
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(22 * (var(--rate)));
  color: var(--color-gray01);
}

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

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

#lp_contents .nav_item {
  position: relative;
  width: calc(340 * (var(--rate)));
}

#lp_contents .nav_item:before {
  position: absolute;
  bottom: calc(-28 * (var(--rate)));
  transform: translateX(-50%);
  left: 50%;
  display: block;
  width: calc(50 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  background: url(../img/arrow.svg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .nav_name {
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(22 * (var(--rate)));
  color: var(--color-gray01);
}

/*------------ Sec Common ------------*/
#lp_contents .sec_lead {
  position: relative;
  z-index: 5;
  font-family: var(--font-lp_jpn_serif);
  font-size: calc(36 * (var(--rate)));
  line-height: 2.1;
  font-weight: 500;
  letter-spacing: 0.075em;
}
#lp_contents .visual_blk {
  position: relative;
  z-index: -1;
}

#lp_contents .item_name {
  position: absolute;
}

#lp_contents .item_name01{
  width: calc(210 * (var(--rate)));
  top: calc(629 * (var(--rate)));
  left: calc(-2 * (var(--rate)));
}

#lp_contents .item_name02{
  width: calc(340 * (var(--rate)));
  bottom: calc(306 * (var(--rate)));
  right: calc(18 * (var(--rate)));
}

#lp_contents .item_name03{
  width: calc(340 * (var(--rate)));
  top: calc(385 * (var(--rate)));
  left: calc(28 * (var(--rate)));
}

#lp_contents .item_name04{
  width: calc(400 * (var(--rate)));
  bottom: calc(290 * (var(--rate)));
  right: calc(28 * (var(--rate)));
}

#lp_contents .modal_btn {
  position: relative;
}

#lp_contents .modal_btn img {
  position: absolute;
}

#lp_contents .item_name01 .modal_btn img {
  width: calc(216 * (var(--rate)));
  height: calc(126 * (var(--rate)));
  bottom: calc(-98 * (var(--rate)));
}

#lp_contents .item_name02 .modal_btn img {
  width: calc(340 * (var(--rate)));
  height: calc(136 * (var(--rate)));
  bottom: calc(-49 * (var(--rate)));
}

#lp_contents .item_name03 .modal_btn img {
  width: calc(340 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  bottom: calc(-95 * (var(--rate)));
}

#lp_contents .item_name04 .modal_btn img {
  width: calc(400 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  bottom: calc(-45 * (var(--rate)));
}

#lp_contents .modal_btn:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: calc(40 * (var(--rate)));
  height: calc(40 * (var(--rate)));
  background: #fff;
  content: "";
  animation: dots-anime 2s ease-in-out infinite;
}

@keyframes dots-anime {
  0%{
    transform: translate(-50%, -50%) scale(0%);
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(100%);
    opacity: 0;
  }
}

#lp_contents .item_name01 .modal_btn:before {
  top: calc(-47 * (var(--rate)));
  left: calc(173 * (var(--rate)));
}
#lp_contents .item_name02 .modal_btn:before {
  top: calc(-110 * (var(--rate)));
  left: calc(116 * (var(--rate)));
}
#lp_contents .item_name03 .modal_btn:before {
  left: calc(202 * (var(--rate)));
  top: calc(6 * (var(--rate)));
}
#lp_contents .item_name04 .modal_btn:before {
  left: calc(37 * (var(--rate)));
  top: calc(-55 * (var(--rate)));
}

#lp_contents .kit_list {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: calc(-35 * (var(--rate)));
  z-index: 15;
}

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

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

#lp_contents .kit_num {
  margin-top: calc(5 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  color: var(--color-gray01);
}

#lp_contents .kit_name {
  margin-top: calc(35 * (var(--rate)));
  font-size: calc(40 * (var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .kit_credit {
  display: flex;
  margin-top: calc(7 * (var(--rate)));
  gap: calc(20 * (var(--rate)));
  justify-content: center;
  align-items: center;
  }

#lp_contents .kit_limit {
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .kit_credit span{
  display: inline-block;
  width: calc(2 * (var(--rate)));
  height: calc(50 * (var(--rate)));
  background-color: var(--color-purple);
}

#lp_contents .kit_price {
  font-size: calc(30 * (var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .btn_check {
  position: relative;
  z-index: 15;
  margin: calc(30 * (var(--rate))) auto 0;
  width: calc(425 * (var(--rate)));
  height: calc(87 * (var(--rate)));
}

#lp_contents .btn_check a {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/btn.png) no-repeat;
  background-size: 100%;
}

#lp_contents .button_arrow {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: calc(35 * (var(--rate)));
  margin-top: calc(2 * (var(--rate)));
  transform: translateY(-50%);
  width: calc(116 * (var(--rate)));
  height: calc(20 * (var(--rate)));
  overflow: hidden;
}

#lp_contents .button_arrow:after {
  position: absolute;
  z-index: 1;
  display: block;
  width: calc(14 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  transform: rotate(35deg);
  border-radius: 50px;
  background-color: var(--color-purple);
  content: "";
  right: calc(-2 * (var(--rate)));
  top: calc(14 * (var(--rate)));
}

#lp_contents .button_arrow:before {
  position: absolute;
  bottom: 0;
  z-index: 1;
  display: block;
  width: calc(116 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  border-radius: 50px;
  background-color: var(--color-purple);
  animation: extend 2s ease-in-out infinite;
  content: "";
}

@keyframes extend {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: 0vw;
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(116 * (var(--rate)));
  }
  90% {
    transform: translateX(calc(116 * (var(--rate))));
    width: calc(116 * (var(--rate)));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}

#lp_contents .kit_item_blk {
  position: relative;
  width: calc(680 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

#lp_contents .kit_item_blk:before {
  position: absolute;
  left: 50%;
  bottom: calc(-30 * (var(--rate)));
  transform: translateX(-50%);
  width: calc(680 * (var(--rate)));
  height: calc(26 * (var(--rate)));
  margin: 0 auto;
  background: url(../img/dash02.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .kit_item_blk:after {
  bottom: 0;
}

#lp_contents .kit_item_title {
  display: block;
  width: calc(680 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .kit_item_list {
  width: calc(510 * (var(--rate)));
  margin: calc(10 * (var(--rate))) auto;
  letter-spacing: 0.125em;
}

#lp_contents .kit_item_list li {
  font-size: calc(22 * (var(--rate)));
  line-height: 2;
  color: var(--color-gray01);
  letter-spacing: 0.125em;
}

#lp_contents .about_kit {
  position: relative;
  margin-top: calc(310 * (var(--rate)));
}

#lp_contents .about_kit:before,
#lp_contents .about_kit:after {
  position: absolute;
  left: 0;
  right: 0;
  display: block;
  width: 100%;
  height: calc(200 * (var(--rate)));
  content: "";
  z-index: 10;
}

#lp_contents .about_kit:before {
  top: calc(-200 * (var(--rate)));
  background: url(../img/decor02.svg?251104) no-repeat;
  background-size: 100%;
}

#lp_contents .about_kit:after {
  bottom: calc(-200 * (var(--rate)));
  background: url(../img/decor03.svg?251104) no-repeat;
  background-size: 100%;
}

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

#lp_contents .decoration {
  width: calc(35 * (var(--rate)));
  margin: calc(60 * (var(--rate))) auto 0;
}

#lp_contents .kit_item_wrap {
  margin: calc(90 * (var(--rate))) auto 0;
  padding-bottom: calc(40 * (var(--rate)));
}

#lp_contents .item_list li {
  width: calc(220 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .item_list li img {
  width: calc(220 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .kit_item_name {
  margin-top: calc(40 * (var(--rate)));
  font-size: calc(40 * (var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .kit_item_describe {
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  color: var(--color-gray01);
}

#lp_contents .item_var_list {
  display: flex;
  justify-content: center;
  gap: calc(50 * (var(--rate)));
  margin-top:calc(70 * (var(--rate)))
}

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

#lp_contents .item_var_list li .item_var_name {
  margin-top: calc(25 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  color: var(--color-gray01);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

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

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

/* #lp_contents .accordion.active {
  margin-top: calc(50 * (var(--rate)));
} */

#lp_contents .accordion_group .accordion:first-of-type {
  margin-top: calc(0 * (var(--rate))) !important;
}

#lp_contents .accordion_button {
  display: flex;
  position: relative;
  gap: calc(48 * (var(--rate)));
  width: calc(480 * (var(--rate)));
  margin: 0 auto;
  padding-bottom: calc(10 * (var(--rate)));
  border-bottom: var(--color-purple) solid calc(2 * (var(--rate)));
  background: transparent;
  border-top: none;
  border-left: none;
  border-right: none;
  color: var(--color-purple);
  align-items: center;
}

#lp_contents .accordion.active .accordion_button {
  border-bottom: none;
}

#lp_contents .accordion_content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  opacity: 0;
}

#lp_contents .accordion_title {
  width: fit-content;
  margin: 0 auto;
  font-size: calc(32 * (var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .accordion_icon {
  position: absolute;
  display: block;
  top: 50%;
  transform: translateY(-50%);
  right: calc(30 * (var(--rate)));
  width: calc(21 * (var(--rate)));
  height: calc(21 * (var(--rate)));
  margin-top: calc(-1 * (var(--rate)));
}

#lp_contents .accordion_icon:after,
#lp_contents .accordion_icon:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: calc(20 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background-color: var(--color-purple);
  content: "";
  transition: transform 0.2s;
}

#lp_contents .accordion_icon:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

#lp_contents .accordion.active .accordion_icon:after {
  transform: translate(-50%, -50%) rotate(0deg);
}

#lp_contents .accordion_txt {
  margin: calc(15 * (var(--rate))) auto 0;
  width: calc(480 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  line-height: 2.2;
  color: var(--color-gray01);
  text-align: justify;
}

#lp_contents .note {
  margin: calc(20 * (var(--rate))) auto 0;
  width: calc(480 * (var(--rate)));
  font-size: calc(18 * (var(--rate)));
  line-height: 2;
  color: var(--color-gray01);
  text-align: justify;
}

/*------------ Sec01: Makeup Coffret ------------*/
#lp_contents .sec01 {
  padding: calc(160 * (var(--rate))) 0 calc(170 * (var(--rate)));
}

#lp_contents .sec01 .visual_blk {
  margin-top: calc(-80 * (var(--rate)));
}

/*------------ Sec 02: Care Kit ------------*/
#lp_contents .sec02 {
  padding-top: calc(260 * (var(--rate)));
  padding-bottom: calc(350 * (var(--rate)));
}

#lp_contents .sec02 .visual_blk {
  margin-top: calc(-107 * (var(--rate)));
}

#lp_contents .sec02 .kit_list {
  margin-top: calc(-27 * (var(--rate)));
}

#lp_contents .sec02 .btn_check {
  margin: calc(40 * (var(--rate))) auto 0;
}

/*------------ Note ------------*/
#lp_contents .sec03 {
  padding-top: calc(140 * (var(--rate)));
}


#lp_contents .sec03 .sec_title_eng {
  width: calc(226 * (var(--rate)));
}

#lp_contents .sec03 .sec_title_eng:before, #lp_contents .sec03 .sec_title_eng:after {
  width: calc(300 * (var(--rate)));
}

#lp_contents .sec03 .sec_title_eng:before {
  right: calc(-315 * (var(--rate)));
}

#lp_contents .sec03 .sec_title_eng:after {
  left: calc(-315 * (var(--rate)));
}

#lp_contents .sec03 .lead {
  margin-top: calc(40 * (var(--rate)));
  font-family: var(--font-lp_jpn_serif);
  font-size: calc(30 * (var(--rate)));
  letter-spacing: 0.075em;
  font-weight: 500;
  line-height: 2.1;
}

#lp_contents .note_wrap {
  position: relative;
  margin-top: calc(188 * (var(--rate)));
}

#lp_contents .note_wrap01:before {
  position: absolute;
  top: calc(-122 * (var(--rate)));
  left: 0;
  right: 0;
  width: 100%;
  height: calc(18 * (var(--rate)));
  background: url(../img/decor_border02.svg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .note_blk {
  position: relative;
  width: 100%;
  padding-top: calc(58 * (var(--rate)));
}

#lp_contents .note_wrap01 .note_blk {
  height: calc(620 * (var(--rate)));
  background: url(../img/bg_top08.png) no-repeat;
  background-size: 100%;
}

#lp_contents .note_wrap02 .note_blk {
  height: calc(650 * (var(--rate)));
  background: url(../img/bg_top09.png) no-repeat;
  background-size: 100%;
}

#lp_contents .note_blk_inner {
  position: relative;
}

#lp_contents .note_wrap01 .note_blk_inner:before {
  position: absolute;
  top: calc(-75 * (var(--rate)));
  right: calc(190 * (var(--rate)));
  width: calc(140 * (var(--rate)));
  height: calc(100 * (var(--rate)));
  background: url(../img/icon01.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .note_wrap02 .note_blk_inner:before {
  position: absolute;
  top: calc(-70 * (var(--rate)));
  right: calc(175 * (var(--rate)));
  width: calc(154 * (var(--rate)));
  height: calc(110 * (var(--rate)));
  background: url(../img/icon02.png) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .note_var_num {
  font-size: calc(30 * (var(--rate)));
  margin: 0 auto;
}

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

#lp_contents .note_describe {
  margin-top: calc(50 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  color: var(--color-gray01);
}

#lp_contents .note_item_list {
  display: flex;
  justify-content: center;
  margin-top: calc(100 * (var(--rate)));
}

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

#lp_contents .note_item_list .note_item_img {
  width: calc(340 * (var(--rate)));
  height: calc(272 * (var(--rate)));
  display: block;
}

#lp_contents .note_item_list li p {
  margin-top: calc(10 * (var(--rate)));
  font-size: calc(20 * (var(--rate)));
  color: var(--color-gray01);
}

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

#lp_contents .graph_describe {
  margin: calc(50 * (var(--rate))) auto 0;
  width: calc(580 * (var(--rate)));
  font-size: calc(22 * (var(--rate)));
  color: var(--color-gray01);
  text-align: justify;
  line-height: 2;
}

/*------------ Concept ------------*/
#lp_contents .sec04{
  padding: calc(320 * (var(--rate))) 0 calc(220 * (var(--rate)));
}

#lp_contents .sec04 .sec_title_eng {
  width: calc(320 * (var(--rate)));
  margin: 0 auto;
}

#lp_contents .sec04 .sec_title_eng:before,
#lp_contents .sec04 .sec_title_eng:after {
  width: 0;
}

#lp_contents .sec04 .text {
  margin-top: calc(55 * (var(--rate)));
  font-size: calc(26 * (var(--rate)));
}

#lp_contents .sec04 .text:nth-of-type(1) {
  margin-top: calc(60 * (var(--rate)));
}

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

#lp_contents .btn_all {
  position: relative;
  margin: calc(180 * (var(--rate))) auto 0;
  width: 100%;
}

#lp_contents .btn_all:before,
#lp_contents .btn_all:after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: calc(132 * (var(--rate)));
  height: calc(18.7 * (var(--rate)));
  background: url(../img/decor_border03.svg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .btn_all:before {
  left: 0;
}

#lp_contents .btn_all:after {
  right: 0;
}

#lp_contents .btn_all a {
  display: flex;
  width: calc(516 * (var(--rate)));
  height: calc(126 * (var(--rate)));
  background: url(../img/all_btn.png) no-repeat;
  background-size: 100%;
  margin: 0 auto;
}

/*------------ Modal ------------*/
#lp_contents .detail_modal {
  display: none;
  visibility: visible;
  height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  width: 100%;
  z-index: 105;
}


#lp_contents .modal__bg{
  background: rgb(245, 245, 245,0.6);
  height: 100vh;
  position: absolute;
  width: 100%;
}

#lp_contents .modal__content{
  background: var(--color-white);
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: calc(720*(var(--rate)));
  /* max-height:75vh; */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  will-change: height; /* iPhone 對動畫重算 layout 有幫助 */
}

#lp_contents .modal__content::-webkit-scrollbar {
  display: none;
}

#lp_contents .js-modal-close{
  position: absolute;
  width: calc(60*(var(--rate)));
  height: calc(60*(var(--rate)));
  top: calc(20 * (var(--rate)));
  right: calc(20 * (var(--rate)));
  float: right;
  cursor: pointer;
  overflow: hidden;
  z-index: 999;
}

#lp_contents .js-modal-close:before,
#lp_contents .js-modal-close:after{
  content: '';
  display: block;
  width: calc(60*(var(--rate)));
  height: calc(2*(var(--rate)));
  background: var(--color-gray02);
  transform: rotate(45deg);
  position: absolute;
  top: 50%;
}

#lp_contents .js-modal-close:after{
  transform: rotate(-45deg);
}

#lp_contents .modal_inner{
  width: calc(720*(var(--rate)));
  margin: 0 auto;
  padding:calc(100*(var(--rate))) 0;
}

#lp_contents .tab_area {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(40*(var(--rate)));
  width: calc(720*(var(--rate)));
  height: calc(80*(var(--rate)));
  margin: 0 auto;
}

#lp_contents .tab {
  position: relative;
  width: calc(80*(var(--rate)));
  cursor: pointer;
}

#lp_contents .tab.active:before {
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  bottom: calc(-20*(var(--rate)));
  width:calc(100*(var(--rate)));
  height:calc(2*(var(--rate)));
  background-color: var(--color-purple);
  z-index: 2;
  content: "";
}

/* #lp_contents .panel {
  display: none;
  width: calc(720 * (var(--rate)));
  margin: calc(120*(var(--rate))) auto 0;
}

#lp_contents .panel.active {
  display: block;
  animation: appear .8s ease-in;
}

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

  100% {
    opacity: 1;
  }
} */

.panel_area {
  position: relative;
  /* min-height: calc(867 * (var(--rate))); */
}

.panel_area .panel {
  display: block; /* hide() を使わない */
  width: calc(720 * (var(--rate)));
  margin: calc(120*(var(--rate))) auto 0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: 0;
  transition: opacity 0.4s ease-in-out;
}

.panel_area .panel.active {
  opacity: 1;
  visibility: visible;
}

#lp_contents .panel figure {
  width:calc(570 *(var(--rate)));
  margin: 0 auto;
}

#lp_contents .panel06 figure,
#lp_contents .panel08 figure {
  width:calc(260 *(var(--rate)));
}


#lp_contents .panel .modal_item_name {
  margin-top: calc(45 * (var(--rate)));
  font-size: calc(36 *(var(--rate)));
  letter-spacing: 0.1em;
}

#lp_contents .panel .modal_item_var {
  font-size: calc(24 *(var(--rate)));
  letter-spacing: 0.1em;
  color: var(--color-gray01);
}

#lp_contents .panel .modal_item_detail {
  width: calc(680*(var(--rate)));
  margin: calc(50*(var(--rate))) auto 0;
  font-size: calc(24 *(var(--rate)));
  color: var(--color-gray01);
}

#lp_contents .panel .btn_check {
  margin: calc(70 * (var(--rate))) auto 0;
  width: calc(365 * (var(--rate)));
  height: calc(75 * (var(--rate)));
}

#lp_contents .panel .btn_check a {
  background: url(../img/btn_modal.png) no-repeat;
  background-size: 100%;
}

#lp_contents .panel .btn_check .button_arrow {
  width: calc(96 * (var(--rate)));
  right: calc(25 * (var(--rate)));
  margin-top: calc(2 * (var(--rate)));
}

#lp_contents .panel .btn_check .button_arrow:before {
  width: calc(90 * (var(--rate)));
  animation: extend2 2s ease-in-out infinite;
}

@keyframes extend2 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: 0vw;
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(90 * (var(--rate)));
  }
  90% {
    transform: translateX(calc(90 * (var(--rate))));
    width: calc(90 * (var(--rate)));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}




/*------------ Nav Follow ------------*/
#lp_contents .follow_nav {
  display: block;
  position: fixed;
  transform: translateX(-50%) translateY(100%);
  visibility: hidden;
  bottom: 0;
  left:50%;
  width: 100%;
  z-index: -2;
  background-color: #FCF3F6;
}
#lp_contents .follow_nav.hidden {
  transition: all 0.6s 0.3s;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  z-index: 100;
}
#lp_contents .follow_nav.visible {
  transition: all 0.6s 0.3s;
  transform: translateX(-50%) translateY(100%);
  z-index: -2;
}

#lp_contents .follow_nav .navigation_list:before {
  width: 100%;
}

#lp_contents .follow_nav .nav_title_sp {
  display: flex;
  position: relative;
}

#lp_contents .follow_nav .nav_title_sp:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: calc(780 * (var(--rate)));
  height: calc(64 * (var(--rate)));
  background: url(../img/nav_bg_sp.jpg) no-repeat;
  background-size: 100%;
  content: "";
}

#lp_contents .follow_nav .nav_title_sp p {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: calc(64 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  color: var(--color-white);
  text-align: center;
}

#lp_contents .follow_nav .nav_title_sp p:first-of-type:before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(2 * (var(--rate)));
  height: calc(64 * (var(--rate)));
  background-color: var(--color-white);
  content: "";
}

#lp_contents .follow_nav .nav_group_sp {
  display: flex;
}

#lp_contents .follow_nav nav {
  position: relative;
  width: 50%;
}

#lp_contents .follow_nav .nav_group_sp nav:first-of-type:before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(2 * (var(--rate)));
  height: calc(128 * (var(--rate)));
  background-color: var(--color-purple);
  content: "";
}

#lp_contents .follow_nav nav ul li a {
  position: relative;
  display: flex;
  gap: calc(10 * (var(--rate)));
  justify-content: center;
  align-items: center;
}

#lp_contents .follow_nav nav ul li:first-of-type a:before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(390 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  background: repeating-linear-gradient(
    to right,
    #7563AC 0 calc(4 * (var(--rate))),
    transparent calc(4 * (var(--rate))) calc(8 * (var(--rate)))
  );
  content: "";
}

#lp_contents .follow_nav nav ul li .nav_name {
  margin-top: 0;
  width: calc(200 * (var(--rate)));
  font-size: calc(24 * (var(--rate)));
  letter-spacing: 0.1em;
  color: var(--color-purple);
}

#lp_contents .follow_nav nav:nth-of-type(2) ul li .nav_name {
  width: calc(265 * (var(--rate)));
}


#lp_contents .follow_nav nav ul li img {
  margin: calc(12 * (var(--rate))) 0;
  width: calc(85 * (var(--rate)));
  height: fit-content;
  height: -webkit-max-content;
}

#lp_contents .follow_nav nav:nth-of-type(2) ul li img {
  width: calc(56 * (var(--rate)));
}

/* Follow Buy Btn */

#lp_contents .follow_btn {
  position: fixed;
  z-index: 100;
  bottom:calc(30 * (var(--rate)));
  right: calc(30 * (var(--rate)));
  width: calc(264 * (var(--rate)));
  opacity: 0;
  transition: all 0.8s ease;
}


#lp_contents .follow_btn.active {
  opacity: 1;
}

#lp_contents .follow_btn.move_up {
  bottom: calc(220 * (var(--rate)));
}

#lp_contents .btn_buy {
  width: calc(264 * (var(--rate)));
  height: calc(70 * (var(--rate)));
}

#lp_contents .btn_buy a {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/btn_buy.png) no-repeat;
  background-size: 100%;
}

#lp_contents .btn_buy .button_arrow {
  right: calc(35 * (var(--rate)));
  margin-top: calc(2 * (var(--rate)));
  width: calc(50 * (var(--rate)));
  height: calc(8 * (var(--rate)));
}

#lp_contents .btn_buy .button_arrow:after {
  width: calc(10 * (var(--rate)));
  height: calc(2 * (var(--rate)));
  right: calc(-2 * (var(--rate)));
  top: calc(4 * (var(--rate)));
}

#lp_contents .btn_buy .button_arrow:before {
  width: calc(50 * (var(--rate)));
  animation: extend3 2s ease-in-out infinite;
  content: "";
}

@keyframes extend3 {
  0% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
  1% {
    transform: translateX(0);
    opacity: 0;
  }
  2% {
    width: 0vw;
    opacity: 1;
  }
  28% {
    transform: translateX(0);
  }
  32% {
    width: calc(50 * (var(--rate)));
  }
  90% {
    transform: translateX(calc(50 * (var(--rate))));
    width: calc(50 * (var(--rate)));
    opacity: 1;
  }
  91% {
    opacity: 0;
  }
  100% {
    width: 0;
    transform: translateX(0);
    opacity: 0;
  }
}


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

  #lp_contents .pc_bg {
  }

  #lp_contents .pc_bg::before {
    position: fixed;
    content: "";
    width: 100%;
    height: 100%;
    background: url(../img/bg_pc.jpg?251111) no-repeat;
    background-size: cover;
    background-position: top center;
    content: "";
    top: 0;
    left: 0;
    z-index: 1;
  }

  #lp_contents .full_area{
    position: fixed;
    top: 0;
    bottom: 0;
    margin: auto;
    width: calc(calc(100% - 46.8rem) / 2);

    padding: 3rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #lp_contents .left_area{
    left: 0;
    order: 1;
  }

  #lp_contents .left_area .logo {
    width: 27.5rem;

  }

  #lp_contents .right_area {
    right: 0;
    order: 3;
  }

  #lp_contents .right_area .nav_pc_group {
    display: flex;
    flex-direction: column;
    gap: 6rem;
  }

  #lp_contents .right_area nav ul {
    display: flex;
    margin-top: -1rem;
    gap: 2rem;
  }

  #lp_contents .right_area .nav_title_pc {
    font-size: 1.8rem;
  }

  #lp_contents .right_area nav figure {
    margin: 3rem auto 0;
    width: 15.3rem;
  }

  #lp_contents .right_area nav .nav_name {
    margin-top: 0.4rem;
    font-size: 1rem;
  }

  #lp_contents .right_area .nav_item {
    width: 15.3rem;
  }

  #lp_contents .right_area .nav_item:before {
    bottom: -1.6rem;
    width: 2.5rem;
    height: 1rem;
  }

  #lp_contents .follow_btn {
    bottom: 2rem;
    right: 50%;
    transform: translateX(50%);
    margin-right: -13rem;
  }

}


/*--------------------------------
            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 / 750)) !important;
  }

  /* #FooterWrap {
    margin-top: -7rem;
  } */

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


}

/*--------------------------------
            Animation
--------------------------------*/
#lp_contents .ef1,
#lp_contents .ef2 li {
  opacity: 0;
}

#lp_contents .ef1{
  filter: blur(5px);
  transition: 2s;
}

#lp_contents .ef1.active {
  opacity: 1;
  filter: blur(0);
}

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

#lp_contents .ef2 li:nth-of-type(2) {
  transition-delay: 0.3s;
}

#lp_contents .ef2 li:nth-of-type(3) {
  transition-delay: 0.6s;
}

#lp_contents .ef2.active li {
  opacity: 1;
  translate: 0 0;

}