@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#FooterWrap {

  position: relative;

  background: #fff;

}



:root {

  --font_regular: "Zen Maru Gothic", sans-serif;

  --font_eng: alkaline, sans-serif;

  --color_01_01: #cae5eb;

  --color_01_02: #e4f2f5;

  --color_01_03: #9fd0db;

  --color_01_04: #f0f8fb;

  --color_03_01: #eaeaf5;

  --color_03_02: #dbdaed;

  --color_03_03: #b9b6d5;

  --color_04_01: #f4e8f1;

  --color_04_02: #f1dcea;

  --color_04_03: #dba4c8;

  --color_05_01: #e1f1f7;

  --color_05_02: #d3e8f2;

  --color_05_03: #96c8e0;

  --color_06_01: #f6ebde;

  --color_06_02: #f1e0d0;

  --color_06_03: #dfb894;

  --color_07_01: #dff0eb;

  --color_07_02: #cde6e2;

  --color_07_03: #99ccc4;

  --color_08_01: #f7dfe1;

  --color_regular: #89675d;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  font-weight: 700;

  line-height: 1;

  letter-spacing: 0;

  font-feature-settings: "palt";

}



.LP_page {

  width: 100%;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page input {

  display: none;

}



.LP_page_inner {

  background: #fff;

}



.LP_page.loaded {

  opacity: 1;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page .activePoint.fadein01 {

  opacity: 0;

  translate: 0 calc(80 * (48rem / 750));

  transition: opacity .8s, translate .8s;

}



.LP_page .activePoint.fadein01.active {

  opacity: 1;

  translate: unset;

}



.LP_page .activePoint.fadein02 {

  mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);

  mask-size: 100% max(300%, 100vh);

  mask-position: center 100%;

  mask-repeat: none;

  -webkit-mask-image: linear-gradient(0deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);

  -webkit-mask-size: 100% max(300%, 100vh);

  -webkit-mask-position: center 100%;

  -webkit-mask-repeat: none;

  transform: translateZ(0);

  transition: mask-position 1.4s linear, -webkit-mask-position 1.4s linear;

}





.LP_page .activePoint.fadein02.active {

  mask-position: center 0;

  -webkit-mask-position: center 0;

}

/*----------------------------all*/



/*heading------------------------*/

.heading_area {

  position: relative;

  z-index: 1;

  padding: calc(100 * (48rem / 750)) 0 calc(268 * (48rem / 750));

  background: var(--color_01_01)

}



.heading_area::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc((1350 - 147) * (48rem / 750)));

  margin-bottom: calc(-147 * (48rem / 750));

  background: var(--color_01_02);

  content: "";

}



.heading_area .logo_pokemon {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(124 * (48rem / 750));

  margin: calc(20 * (48rem / 750)) 0 0 calc(20 * (48rem / 750));

}



.mv_outside {

  margin-bottom: calc(100 * (48rem / 750));

  transition-delay: .5s !important;

}



.heading_area .logo_pokepeace {

  width: calc(438 * (48rem / 750));

  margin: 0 auto calc(65 * (48rem / 750));

}



.mv_wrap {

  display: grid;

  grid-template-columns: repeat(3, calc(240 * (48rem / 750)));

  justify-content: center;

  gap: calc(40 * (48rem / 750)) calc(30 * (48rem / 750));

}



.mv_wrap .each_character:nth-of-type(1) {

  animation: floating-y 2s ease-in-out infinite alternate;

}



.mv_wrap .each_character:nth-of-type(2) {

  animation: floating-y 2.1s ease-in-out infinite alternate-reverse;

}



.mv_wrap .each_character:nth-of-type(3) {

  animation: floating-y 1.8s ease-in-out infinite alternate;

}



.mv_wrap .each_character:nth-of-type(4) {

  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;

}



.mv_wrap .each_character:nth-of-type(6) {

  animation: floating-y 2s ease-in-out infinite alternate-reverse;

}



.mv_wrap .each_character:nth-of-type(7) {

  animation: floating-y 1.9s ease-in-out infinite alternate;

}



.mv_wrap .each_character:nth-of-type(9) {

  animation: floating-y 2.1s ease-in-out infinite alternate;

}



@keyframes floating-y {

  0% {

    transform: translateY(calc(-8 * (48rem / 750)));

  }



  100% {

    transform: translateY(calc(8 * (48rem / 750)));

  }

}



.illust_monsterBall,

.logo_mitea {

  display: grid;

  place-items: center;

}



.illust_monsterBall > div {

  width: calc(234 * (48rem / 750));

}



.logo_mitea > div {

  width: calc(208 * (48rem / 750));

}



.main_lead_outside {

  position: relative;

  margin-bottom: calc(64 * (48rem / 750));

  padding-top: calc(160 * (48rem / 750));

}



.main_lead_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(1200 * (48rem / 750));

  height: calc(1200 * (48rem / 750));

  border-radius: 50%;

  background: var(--color_01_02);

  content: "";

}



.LP_page .main_lead_wrap.activePoint.fadein02 {

  transition: mask-position 1.5s ease-in-out, -webkit-mask-position 1.5s ease-in-out;

}



.main_ttl {

  margin-bottom: calc(48 * (48rem / 750));

  font-size: calc(40 * (48rem / 750));

  text-align: center;

}



.main_lead {

  position: relative;

  margin-bottom: calc(90 * (48rem / 750));

}



.main_lead::before {

  position: absolute;

  top: 0;

  right: 0;

  width: calc(120 * (48rem / 750));

  height: calc(140 * (48rem / 750));

  margin: calc(2 * (48rem / 750)) calc(20 * (48rem / 750)) 0 0;

  background: url(../img/kira1.gif) center center / cover no-repeat;

  content: "";

}



.main_lead::after {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(100 * (48rem / 750));

  height: calc(120 * (48rem / 750));

  margin: calc(40 * (48rem / 750)) 0 0 calc(30 * (48rem / 750));

  background: url(../img/kira2.gif) center center / cover no-repeat;

  content: "";

}



.main_lead p {

  font-size: calc(24 * (48rem / 750));

  line-height: 2;

  text-align: center;

}



.main_lead p:nth-of-type(n+2) {

  margin-top: calc(36 * (48rem / 750));

}



.product_all {

  position: relative;

}



.product_all::before {

  position: absolute;

  bottom: 100%;

  right: 0;

  width: calc(80 * (48rem / 750));

  height: calc(96 * (48rem / 750));

  margin: 0 calc(100 * (48rem / 750)) calc(5 * (48rem / 750)) 0;

  background: url(../img/kira3.gif) center center / cover no-repeat;

  content: "";

}



.schedule_wrap {

  width: calc(580 * (48rem / 750));

  margin: 0 auto;

}



.schedule_wrap dt {

  margin-bottom: calc(-25 * (48rem / 750));

  font-family: var(--font_eng);

  font-size: calc(60 * (48rem / 750));

  text-align: center;

  color: var(--color_01_03);

}



.schedule_wrap dd {

  padding: calc(45 * (48rem / 750)) 0;

  border-radius: calc(36 * (48rem / 750));

  background: #fff;

  font-size: calc(30 * (48rem / 750));

  line-height: 1.87;

  letter-spacing: .05em;

  text-align: center;

}

/*------------------------heading*/



/*product------------------------*/

.area_ttl {

  position: relative;

  z-index: 2;

  display: grid;

  place-items: center;

  height: calc(272 * (48rem / 750));

  padding-top: calc(5 * (48rem / 750));

}



#SpecialKit .area_ttl {

  padding-top: calc(15 * (48rem / 750));

}



.area_ttl::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(460 * (48rem / 750));

  content: "";

}



#SpecialKit .area_ttl::before {

  background: url(../img/frame_001.svg) bottom center / 100% auto no-repeat;

}



#ProductDetails .area_ttl::before {

  background: url(../img/frame_002.svg) bottom center / 100% auto no-repeat;

}



#SpecialCampaign .area_ttl::before {

  background: url(../img/frame_003.svg) bottom center / 100% auto no-repeat;

}



.area_ttl span {

  position: relative;

  padding-bottom: calc(53 * (48rem / 750));

  font-family: var(--font_eng);

  font-size: calc(60 * (48rem / 750));

  text-align: center;

}



#SpecialKit .area_ttl span {

  padding-bottom: calc(55 * (48rem / 750));

  font-size: calc(68 * (48rem / 750));

}



.area_ttl span::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(45 * (48rem / 750));

  height: calc(20 * (48rem / 750));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

  animation: arrow 2s infinite;

}



@keyframes arrow {

  0% {

    opacity: 0;

    transform: translateY(calc(-20 * (48rem / 750)));

  }



  40% {

    opacity: 1;



  }

  80% {

    opacity: 0;

    transform: translateY(calc(20 * (48rem / 750)));

  }



  100% {

    opacity: 0;

  }

}



.each_product {

  position: relative;

  z-index: 1;

}



#CleansingOil {

  background: var(--color_03_02);

}



#FaceWash {

  background: var(--color_04_02);

}



#SerumLotion {

  z-index: 2;

  background: var(--color_05_02);

}



#RepairMilk {

  background: var(--color_06_02);

}



#Lip {

  background: var(--color_07_02);

}



.each_product::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(1200 * (48rem / 750));

  height: calc(1200 * (48rem / 750));

  content: "";

}



#SpecialKit .each_product::before {

  width: 100%;

  height: calc(1614 * (48rem / 750));

  margin-top: calc(-125 * (48rem / 750));

  background: url(../img/bg_green_001.svg) center center / cover no-repeat;

}



#AromaMist::before {

  width: 100%;

  height: calc(1192 * (48rem / 750));

  margin-top: calc(-150 * (48rem / 750));

  background: url(../img/bg_purple.svg) center center / cover no-repeat;

}



#CleansingOil::before {

  background: url(../img/bg_pink.svg) center center / cover no-repeat;

}



#FaceWash::before {

  width: calc(1500 * (48rem / 750));

  height: calc(1500 * (48rem / 750));

  background: url(../img/bg_blue_001.svg) center center / cover no-repeat;

}



#SerumLotion::before {

  background: url(../img/bg_orange.svg) center center / cover no-repeat;

}



#RepairMilk::before {

  background: url(../img/bg_green_002.svg) center center / cover no-repeat;

}



#Lip::before {

  background: url(../img/bg_red.svg) center center / cover no-repeat;

}



.each_product::after {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc((800 + 148) * (48rem / 750)));

  content: "";

}



#SpecialKit .each_product::after {

  height: calc(100% - calc((1200 + 148 - 122) * (48rem / 750)));

  margin-bottom: calc(-122 * (48rem / 750));

  background: var(--color_07_02);

}



#AromaMist::after {

  background: var(--color_03_02);

}



#CleansingOil::after {

  background: var(--color_04_02);

}



#FaceWash::after {

  background: var(--color_05_02);

}



#SerumLotion::after {

  background: var(--color_06_02);

}



#RepairMilk::after {

  background: var(--color_07_02);

}



#Lip::after {

  height: calc(100% - calc((840 + 148 - 140) * (48rem / 750)));

  margin-bottom: calc(-140 * (48rem / 750));

  background: var(--color_08_01);

}



.each_product .sec_inner {

  padding: calc(200 * (48rem / 750)) 0 calc(250 * (48rem / 750));

}



#SpecialKit .sec_inner {

  padding: calc(335 * (48rem / 750)) 0 calc(395 * (48rem / 750));

}



#AromaMist .sec_inner {

  padding-top: calc(170 * (48rem / 750));

}



#Lip .sec_inner {

  padding: calc(155 * (48rem / 750)) 0 calc(225 * (48rem / 750));

}



.each_product .sec_inner::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(150 * (48rem / 750));

  margin-top: calc(800 * (48rem / 750));

  mask-image: url(../img/shape_wave.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-amask-image: url(../img/shape_wave.svg);

  -webkit-amask-position: center center;

  -webkit-amask-size: cover;

  -webkit-amask-repeat: no-repeat;

  content: "";

}



#SpecialKit .sec_inner::before {

  margin-top: calc(1200 * (48rem / 750));

  background: var(--color_07_02);

}



#AromaMist .sec_inner::before {

  background: var(--color_03_02);

}



#CleansingOil .sec_inner::before {

  background: var(--color_04_02);

}



#FaceWash .sec_inner::before {

  background: var(--color_05_02);

}



#SerumLotion .sec_inner::before {

  background: var(--color_06_02);

}



#RepairMilk .sec_inner::before {

  background: var(--color_07_02);

}



#Lip .sec_inner::before {

  margin-top: calc(840 * (48rem / 750));

  background: var(--color_08_01);

}



#SpecialKit .sec_inner::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(182 * (48rem / 750));

  height: calc(182 * (48rem / 750));

  margin: calc(35 * (48rem / 750)) 0 0 calc(-35 * (48rem / 750));

  background: url(../img/star1.gif) center center / cover no-repeat;

  content: "";

}



#AromaMist .sec_inner::after {

  position: absolute;

  bottom: 0;

  right: 0;

  width: calc(66 * (48rem / 750));

  height: calc(66 * (48rem / 750));

  margin: 0 calc(240 * (48rem / 750)) calc(50 * (48rem / 750)) 0;

  background: url(../img/illust_201.svg) top center / 100% auto no-repeat;

  content: "";

  animation: floating-y 2s ease-in-out infinite alternate;

}



#CleansingOil .sec_inner::after {

  position: absolute;

  bottom: 100%;

  left: 0;

  width: calc(240 * (48rem / 750));

  height: calc(288 * (48rem / 750));

  margin: 0 0 calc(-85 * (48rem / 750)) calc(143 * (48rem / 750));

  background: url(../img/character_202.svg) center center / cover no-repeat;

  content: "";

  animation: rotate 3s ease infinite;

}



@keyframes rotate {

  0%, 100% {

    transform: none;

  }



  40% {

    rotate: -8deg;

  }

}



#FaceWash .sec_inner::after {

  position: absolute;

  bottom: 100%;

  right: 0;

  width: calc(240 * (48rem / 750));

  height: calc(288 * (48rem / 750));

  margin: 0 calc(118 * (48rem / 750)) calc(-90 * (48rem / 750)) 0;

  background: url(../img/character_302.svg) center center / cover no-repeat;

  content: "";

  animation: bound 2s ease infinite;

}



#SerumLotion .sec_inner::after {

  position: absolute;

  bottom: 100%;

  left: 0;

  width: calc(240 * (48rem / 750));

  height: calc(288 * (48rem / 750));

  margin: 0 0 calc(-95 * (48rem / 750)) calc(53 * (48rem / 750));

  background: url(../img/character_402.svg) center center / cover no-repeat;

  content: "";

  animation: bound 2s ease infinite;

}



#Lip .sec_inner::after {

  position: absolute;

  bottom: 100%;

  left: 0;

  width: calc(348 * (48rem / 750));

  height: calc(290 * (48rem / 750));

  margin: 0 0 calc(-87 * (48rem / 750)) calc(100 * (48rem / 750));

  background: url(../img/character_701.svg) center center / cover no-repeat;

  content: "";

  animation: rotate 3s ease infinite;

}



.product_ttl {

  position: absolute;

  bottom: 0;

  font-family: var(--font_eng);

  font-size: calc(150 * (48rem / 750));

  font-weight: 600;

  writing-mode: vertical-lr;

}



#SpecialKit .product_ttl {

  right: 0;

  margin: 0 calc(-18 * (48rem / 750)) calc(180 * (48rem / 750)) 0;

  color: var(--color_07_01);

}



#AromaMist .product_ttl {

  bottom: auto;

  top: 0;

  left: 0;

  margin: calc(950 * (48rem / 750)) 0 0 calc(-12 * (48rem / 750));

  color: var(--color_03_01);

}



#CleansingOil .product_ttl {

  right: 0;

  margin: 0 calc(-18 * (48rem / 750)) calc(220 * (48rem / 750)) 0;

  color: var(--color_04_01);

}



#FaceWash .product_ttl {

  left: 0;

  margin: 0 0 calc(270 * (48rem / 750)) calc(-12 * (48rem / 750));

  color: var(--color_05_01);

}



#SerumLotion .product_ttl {

  right: 0;

  margin: 0 calc(-18 * (48rem / 750)) calc(192 * (48rem / 750)) 0;

  color: var(--color_06_01);

}



#RepairMilk .product_ttl {

  left: 0;

  margin: 0 0 calc(260 * (48rem / 750)) calc(-12 * (48rem / 750));

  color: var(--color_07_01);

}



.character_img {

  position: absolute;

  z-index: 2;

  top: 0;

  width: calc(220 * (48rem / 750));

  animation: floating-y 2s ease-in-out infinite alternate;

}



#SpecialKit .character_img {

  right: 0;

  margin: calc(120 * (48rem / 750)) calc(90 * (48rem / 750)) 0 0;

}



#AromaMist .character_img {

  right: 0;

  margin: calc(290 * (48rem / 750)) calc(20 * (48rem / 750)) 0 0;

}



#CleansingOil .character_img {

  left: 0;

  width: calc(248 * (48rem / 750));

  margin: calc(618 * (48rem / 750)) 0 0 calc(12 * (48rem / 750));

}



#FaceWash .character_img {

  right: 0;

  margin: calc(510 * (48rem / 750)) calc(20 * (48rem / 750)) 0 0;

}



#SerumLotion .character_img {

  left: 0;

  margin: calc(620 * (48rem / 750)) 0 0 calc(20 * (48rem / 750));

}



#RepairMilk .character_img {

  right: 0;

  margin: calc(500 * (48rem / 750)) calc(20 * (48rem / 750)) 0 0;

}



.product_img_wrap {

  position: relative;

  margin: 0 auto calc(45 * (48rem / 750));

}



#AromaMist .product_img_wrap {

  width: calc(162 * (48rem / 750));

}



#CleansingOil .product_img_wrap {

  width: calc(299 * (48rem / 750));

}



#FaceWash .product_img_wrap {

  width: calc(290 * (48rem / 750));

}



#SerumLotion .product_img_wrap {

  width: calc(196 * (48rem / 750));

}



#RepairMilk .product_img_wrap {

  width: calc(208 * (48rem / 750));

}



#Lip .product_img_wrap {

  width: calc(600 * (48rem / 750));

  margin-bottom: calc(62 * (48rem / 750));

}



.product_img_wrap::before,

.product_img_wrap::after {

  position: absolute;

  width: calc(120 * (48rem / 750));

  height: calc(144 * (48rem / 750));

  content: "";

}



#AromaMist .product_img_wrap::before {

  top: 0;

  right: 100%;

  margin: calc(180 * (48rem / 750)) calc(55 * (48rem / 750)) 0 0;

  background: url(../img/kira5.gif) center center / cover no-repeat;

}



#AromaMist .product_img_wrap::after {

  bottom: 0;

  left: 100%;

  margin: 0 0 calc(190 * (48rem / 750)) calc(75 * (48rem / 750));

  background: url(../img/kira4.gif) center center / cover no-repeat;

}



#CleansingOil .product_img_wrap::before {

  top: 0;

  right: 100%;

  margin: calc(75 * (48rem / 750)) 0 0 0;

  background: url(../img/kira1.gif) center center / cover no-repeat;

}



#CleansingOil .product_img_wrap::after {

  bottom: 0;

  left: 100%;

  width: calc(100 * (48rem / 750));

  height: calc(120 * (48rem / 750));

  margin: 0 0 calc(280 * (48rem / 750)) calc(20 * (48rem / 750));

  background: url(../img/kira2.gif) center center / cover no-repeat;

}



#FaceWash .product_img_wrap::before {

  top: 0;

  left: 100%;

  width: 0;

  height: calc(90 * (48rem / 750));

  margin: calc(113 * (48rem / 750)) 0 0 calc(40 * (48rem / 750));

  background: url(../img/illust_401.svg) center left / cover no-repeat;

  transition: width 1s;

  transform-origin: center left;

}



#FaceWash .product_img_wrap.active::before {

 width: calc(140 * (48rem / 750));

}



#FaceWash .product_img_wrap::after {

  bottom: 0;

  left: 0;

  width: 0;

  height: calc(60 * (48rem / 750));

  margin: 0 0 calc(305 * (48rem / 750)) calc(-165 * (48rem / 750));

  background: url(../img/illust_402.svg) center left / cover no-repeat;

  transition: width 1s;

  transform-origin: center left;

}



#FaceWash .product_img_wrap.active::after {

 width: calc(120 * (48rem / 750));

}



#SerumLotion .product_img_wrap::before {

  top: 0;

  right: 100%;

  width: calc(111 * (48rem / 750));

  height: calc(245 * (48rem / 750));

  margin: calc(90 * (48rem / 750)) calc(70 * (48rem / 750)) 0 0;

  background: url(../img/illust_501.svg) center center / cover no-repeat;

  pointer-events: none;

}



#SerumLotion .product_img_wrap.active::before {

  animation: balloon 4s linear forwards;

}



@keyframes balloon {

  0% {

    translate: 0 0;

    opacity: 1;

  }



  60% {

    opacity: 1;

  }



  100% {

    translate: 0 calc(-2000 * (48rem / 750));

    opacity: 0;

  }

}



#SerumLotion .product_img_wrap::after {

  z-index: -1;

  bottom: 0;

  left: 100%;

  width: calc(111 * (48rem / 750));

  height: calc(245 * (48rem / 750));

  margin: 0 0 calc(40 * (48rem / 750)) calc(70 * (48rem / 750));

  background: url(../img/illust_502.svg) center center / cover no-repeat;

  pointer-events: none;

}



#SerumLotion .product_img_wrap.active::after {

  animation: balloon 4s linear forwards;

}



#RepairMilk .product_img_wrap::before {

  bottom: 0;

  right: 100%;

  width: calc(85 * (48rem / 750));

  height: calc(85 * (48rem / 750));

  margin: 0 calc(108 * (48rem / 750)) calc(215 * (48rem / 750)) 0;

  background: url(../img/star2.gif) center center / cover no-repeat;

}



#RepairMilk .product_img_wrap::after {

  top: 0;

  left: 100%;

  width: calc(186 * (48rem / 750));

  height: calc(186 * (48rem / 750));

  margin: calc(25 * (48rem / 750)) 0 0 calc(40 * (48rem / 750));

  background: url(../img/star1.gif) center center / cover no-repeat;

}



#Lip .product_img_wrap::before {

  top: 0;

  left: 100%;

  width: 0;

  height: calc(90 * (48rem / 750));

  margin: calc(45 * (48rem / 750)) 0 0 calc(-140 * (48rem / 750));

  background: url(../img/illust_701.svg) center left / cover no-repeat;

  transition: width 1s;

  transform-origin: center left;

}



#Lip .product_img_wrap.active::before {

  width: calc(150 * (48rem / 750));

}



#Lip .product_img_wrap::after {

  bottom: 0;

  left: 0;

  width: 0;

  height: calc(90 * (48rem / 750));

  margin: 0 0 calc(30 * (48rem / 750)) calc(-50 * (48rem / 750));

  background: url(../img/illust_401.svg) center left / cover no-repeat;

  transition: width 1s;

  transform-origin: center left;

}



#Lip .product_img_wrap.active::after {

  width: calc(140 * (48rem / 750));

}



.product_img {

  position: relative;

  z-index: 1;

}



.product_img_wrap > p {

  position: absolute;

}



#SpecialKit .product_img_wrap > p {

  bottom: 100%;

  left: 0;

  display: grid;

  place-items: center;

  width: calc(180 * (48rem / 750));

  height: calc(180 * (48rem / 750));

  margin: 0 0 calc(-25 * (48rem / 750)) calc(30 * (48rem / 750));

  font-size: calc(38 * (48rem / 750));

  line-height: 1.25;

  letter-spacing: .15em;

  background: url(../img/bg_circle.svg) center center / cover no-repeat;

}



#AromaMist .product_img_wrap > p {

  top: 0;

  right: 100%;

  width: calc(160 * (48rem / 750));

  margin: calc(-50 * (48rem / 750)) calc(55 * (48rem / 750)) 0 0;

}



.fragrance_img {

  position: absolute;

  bottom: 0;

  right: 100%;

  width: calc(260 * (48rem / 750));

  margin: 0 calc(20 * (48rem / 750)) calc(180 * (48rem / 750)) 0;

}



.fragrance_img p {

  margin-bottom: calc(-50 * (48rem / 750));

}



.fragrance_img figure {

  width: calc(200 * (48rem / 750));

  margin: 0 auto;

}



.product_texture {

  position: absolute;

  top: 0;

}



#CleansingOil .product_texture {

  left: 100%;

  width: calc(400 * (48rem / 750));

  margin: calc(-80 * (48rem / 750)) 0 0 calc(-170 * (48rem / 750));

}



#FaceWash .product_texture {

  right: 100%;

  width: calc(334 * (48rem / 750));

  margin: calc(-125 * (48rem / 750)) calc(-165 * (48rem / 750)) 0 0;

}



#SerumLotion .product_texture {

  left: 100%;

  width: calc(432 * (48rem / 750));

  margin: calc(-105 * (48rem / 750)) 0 0 calc(-105 * (48rem / 750));

}



#RepairMilk .product_texture {

  right: 100%;

  width: calc(320 * (48rem / 750));

  margin: calc(-140 * (48rem / 750)) calc(-105 * (48rem / 750)) 0 0;

}



.each_product .txt_wrap {

  position: relative;

  z-index: 1;

}



#FaceWash .txt_wrap::before {

  position: absolute;

  top: 100%;

  left: 50%;

  width: calc(120 * (48rem / 750));

  height: calc(144 * (48rem / 750));

  margin: calc(25 * (48rem / 750)) 0 0 calc(-80 * (48rem / 750));

  background: url(../img/kira1.gif) center center / cover no-repeat;

  content: "";

}



#SerumLotion .txt_wrap::before {

  position: absolute;

  z-index: -1;

  top: 100%;

  left: 0;

  width: calc(111 * (48rem / 750));

  height: calc(245 * (48rem / 750));

  margin: calc(60 * (48rem / 750)) 0 0 calc(43 * (48rem / 750));

  background: url(../img/illust_501.svg) center center / cover no-repeat;

  content: "";

}



#SerumLotion .txt_wrap.active::before {

  animation: balloon 4s linear forwards;

}



#SerumLotion .txt_wrap::after {

  position: absolute;

  top: 100%;

  right: 0;

  width: calc(348 * (48rem / 750));

  height: calc(290 * (48rem / 750));

  margin: calc(60 * (48rem / 750)) calc(70 * (48rem / 750)) 0 0;

  background: url(../img/character_601.svg) center center / cover no-repeat;

  content: "";

  animation: bound 2s ease infinite;

}



.product_name {

  position: relative;

  margin-bottom: calc(26 * (48rem / 750));

  font-size: calc(42 * (48rem / 750));

  line-height: 1.75;

  text-align: center;

}



.product_name .txt_S {

   display: block;

}



#SpecialKit .txt_wrap > .product_name::before {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(90 * (48rem / 750));

  height: calc(90 * (48rem / 750));

  margin: calc(10 * (48rem / 750)) 0 0 calc(55 * (48rem / 750));

  background: url(../img/star2.gif) center center / cover no-repeat;

  content: "";

}



#AromaMist .product_name {

  margin-bottom: calc(43 * (48rem / 750));

}



#AromaMist .product_name .txt_S {

  margin-top: calc(25 * (48rem / 750));

  font-size: calc(32 * (48rem / 750));

}



#SerumLotion .product_name  {

  margin-bottom: calc(45 * (48rem / 750));

}



#SerumLotion .product_name .txt_S {

  margin-top: calc(12 * (48rem / 750));

  font-size: calc(23 * (48rem / 750));

}



.product_price_wrap {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  gap: calc(20 * (48rem / 750));

  margin-bottom: calc(48 * (48rem / 750));

}



#FaceWash .product_price_wrap,

#SerumLotion .product_price_wrap {

  margin-bottom: calc(58 * (48rem / 750));

}



#RepairMilk .product_price_wrap {

  margin-bottom: calc(45 * (48rem / 750));

}



#Lip .product_price_wrap {

  margin-bottom: calc(35 * (48rem / 750));

}



.product_price {

  font-size: calc(42 * (48rem / 750));

}



.product_price .txt_S {

  margin-right: calc(10 * (48rem / 750));

  font-size: calc(32 * (48rem / 750));

}



.product_link {

  display: grid !important;

  place-items: center;

  width: calc(100 * (48rem / 750));

  height: calc(40 * (48rem / 750));

  padding-bottom: calc(3 * (48rem / 750));

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_regular);

  font-size: calc(26 * (48rem / 750));

  letter-spacing: .1em;

  color: #fff;

}



.product_caption {

  font-size: calc(26 * (48rem / 750));

  line-height: 2;

  text-align: center;

}



.product_caption sup {

  font-size: calc(16 * (48rem / 750));

}



.product_feature_list {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: calc(20 * (48rem / 750)) calc(15 * (48rem / 750));

  margin-top: calc(48 * (48rem / 750));

  padding: 0 calc(10 * (48rem / 750));

}



.product_feature_list li {

  position: relative;

  border-radius: calc(100 * (48rem / 750));

  overflow: clip;

}



.product_feature_list li::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

  scale: 0 1;

}



#SpecialKit .product_feature_list li::before {

  background: var(--color_07_03);

}



#AromaMist .product_feature_list li::before {

  background: var(--color_03_03);

}



#CleansingOil .product_feature_list li::before {

  background: var(--color_04_03);

}



#FaceWash .product_feature_list li::before {

  background: var(--color_05_03);

}



#SerumLotion .product_feature_list li::before {

  background: var(--color_06_03);

}



#RepairMilk .product_feature_list li::before {

  background: var(--color_07_03);

}



#Lip .product_feature_list li::before {

  background: var(--color_08_01);

}



.product_feature_list.active li::before {

  animation: curtain .8s forwards;

}



@keyframes curtain {

  0% {

    scale: 0 1;

    transform-origin: center left;

  }



  48% {

    scale: 1 1;

    transform-origin: center left;

  }



  52% {

    scale: 1 1;

    transform-origin: center right;

  }



  100% {

    scale: 0 1;

    transform-origin: center right;

  }

}



.product_feature_list li p {

  display: grid;

  place-items: center;

  width: calc(240 * (48rem / 750));

  height: calc(50 * (48rem / 750));

  padding-bottom: calc(2 * (48rem / 750));

  background: #fff;

  font-size: calc(24 * (48rem / 750));

  opacity: 0;

  transition: opacity .5s;

  transition-delay: .6s;

}



.product_feature_list.active li p {

  opacity: 1;

}



.product_feature_list li p sup {

  font-size: calc(14 * (48rem / 750));

}



#SpecialKit .product_feature_list li p {

  color: var(--color_07_03);

}



#AromaMist .product_feature_list li p {

  width: calc(270 * (48rem / 750));

  color: var(--color_03_03);

}



#CleansingOil .product_feature_list li p {

  color: var(--color_04_03);

}



#FaceWash .product_feature_list li p {

  color: var(--color_05_03);

}



#SerumLotion .product_feature_list li p {

  width: calc(160 * (48rem / 750));

  color: var(--color_06_03);

}



#RepairMilk .product_feature_list li p {

  color: var(--color_07_03);

}



#SpecialKit .product_feature_list li:nth-of-type(3) p span {

  font-size: calc(22 * (48rem / 750));

  letter-spacing: -.03em;

}



#CleansingOil .product_feature_list li:nth-of-type(1) p span {

  font-size: calc(23 * (48rem / 750));

  letter-spacing: -.06em;

}



#RepairMilk .product_feature_list li:nth-of-type(1) p span,

#RepairMilk .product_feature_list li:nth-of-type(4) p span {

  font-size: calc(22 * (48rem / 750));

}



.setContent_wrap {

  position: relative;

  margin-top: calc(100 * (48rem / 750));

}



.setContent_wrap::before {

  position: absolute;

  z-index: 1;

  bottom: 0;

  right: 0;

  width: calc(240 * (48rem / 750));

  height: calc(288 * (48rem / 750));

  margin: 0 calc(95 * (48rem / 750)) calc(-45 * (48rem / 750)) 0;

  background: url(../img/character_103.svg) center center / cover no-repeat;

  content: "";

  animation: bound 2s ease infinite;

}



@keyframes bound {

  0%, 100%, 50%, 70%, 90% {

    transform: none;

  }



  60%, 80% {

    transform: translateY(calc(-12 * (48rem / 750)));

  }

}



#SpecialKit .setContent_wrap .character_img {

  left: 0;

  margin: calc(-60 * (48rem / 750)) 0 0 calc(48 * (48rem / 750));

}



.setContent_wrap .product_img {

  width: calc(480 * (48rem / 750));

  margin: 0 calc(-15 * (48rem / 750)) calc(-212 * (48rem / 750)) auto;

  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;

}



.setContent_wrap .setContents_list_wrap {

  position: relative;

  display: grid;

  place-items: center;

  width: calc(510 * (48rem / 750));

  height: calc(510 * (48rem / 750));

  margin-left: calc(-45 * (48rem / 750));

  padding-bottom: calc(16 * (48rem / 750));

  background: url(../img/bg_setContents.svg) center center / cover no-repeat;

  text-align: center;

}



.setContent_wrap .setContents_list_wrap::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: calc(310 * (48rem / 750));

  height: calc(200 * (48rem / 750));

  margin: 0 0 calc(-100 * (48rem / 750)) calc(35 * (48rem / 750));

  background: url(../img/illust_101.svg) center center / cover no-repeat;

  content: "";

}



.setContent_wrap .setContents_list_wrap li:nth-of-type(n+2) {

  margin-top: calc(18 * (48rem / 750));

}



.setContent_wrap .setContents_list_wrap .product_name {

  margin-bottom: calc(9 * (48rem / 750));

  font-size: calc(24 * (48rem / 750));

  line-height: 1.5;

}



.setContent_wrap .setContents_list_wrap .product_size {

  font-size: calc(20 * (48rem / 750));

  font-weight: 500;

}



#AromaMist .accordion_outside {

  position: relative;

  width: calc(600 * (48rem / 750));

  margin: calc(60 * (48rem / 750)) auto 0;

  padding: 0 calc(60 * (48rem / 750));

  border-radius: calc(40 * (48rem / 750));

  background: var(--color_03_01);

  text-align: center;

}



#AromaMist .open.accordion_outside {

  padding-bottom: calc(80 * (48rem / 750));

}



#AromaMist .accordion_outside::before {

  position: absolute;

  z-index: 1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(532 * (48rem / 750)));

  background: linear-gradient(transparent, var(--color_03_02) calc(200 * (48rem / 750)), var(--color_03_02));

  content: "";

  pointer-events: none;

  transition: opacity 2s;

}



#AromaMist .open.accordion_outside::before {

  opacity: 0;

}



#AromaMist .accordion_outside::after {

  position: absolute;

  top: 100%;

  left: 0;

  width: calc(66 * (48rem / 750));

  height: calc(66 * (48rem / 750));

  margin: calc(40 * (48rem / 750)) 0 0 0;

  rotate: 10deg;

  background: url(../img/illust_201.svg) top center / 100% auto no-repeat;

  content: "";

  animation: floating-y 1.8s ease-in-out infinite alternate-reverse;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows 1s;

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_inner {

  position: relative;

  overflow: hidden;

}



#AromaMist .accordion_inner {

  min-height: calc(728 * (48rem / 750));

}



.product_detail_wrap section {

  position: relative;

  padding: calc(48 * (48rem / 750)) 0 calc(88 * (48rem / 750));

}



.product_detail_wrap section:nth-of-type(n+2)::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(2 * (48rem / 750));

  background: url(../img/dottedline.svg) center center / calc(10 * (48rem / 750)) auto repeat-x;

  content: "";

}



.product_detail_wrap section:nth-last-of-type(1) {

  padding-bottom: calc(36 * (48rem / 750));

}



.product_detail_wrap h4 {

  margin-bottom: calc(16 * (48rem / 750));

  font-size: calc(26 * (48rem / 750));

  line-height: 2;

}



.product_detail_wrap figure {

  width: calc(220 * (48rem / 750));

  margin: 0 auto calc(28 * (48rem / 750));

}



.product_detail_wrap .img_wrap {

  display: flex;

  justify-content: center;

  gap: calc(40 * (48rem / 750));

  margin-bottom: calc(38 * (48rem / 750));

}



.product_detail_wrap .img_wrap figure {

  width: calc(200 * (48rem / 750));

  margin: 0;

}



.product_detail_wrap .img_wrap p {

  margin-top: calc(15 * (48rem / 750));

  font-size: calc(20 * (48rem / 750));

  line-height: 1.5;

  text-align: center;

}



.product_detail_wrap p {

  font-size: calc(24 * (48rem / 750));

  line-height: 2;

}



.product_detail_wrap p:nth-of-type(n+2) {

  margin-top: calc(36 * (48rem / 750));

}



.accordion_btn {

  position: relative;

  z-index: 1;

  width: fit-content;

  margin: 0 auto;

  cursor: pointer;

}



#AromaMist .accordion_btn {

  margin: calc(12 * (48rem / 750)) auto 0;

}



.accordion_btn span {

  position: relative;

}



#AromaMist .accordion_btn .to_open {

  padding-bottom: calc(30 * (48rem / 750));

  font-size: calc(32 * (48rem / 750));

}



.accordion_btn .to_close {

  padding-bottom: calc(12 * (48rem / 750));

  font-size: calc(32 * (48rem / 750));

}



#AromaMist .accordion_btn .to_open::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(30 * (48rem / 750));

  height: calc(15 * (48rem / 750));

  background: url(../img/arrow_001.svg) top center / 100% auto no-repeat;

  content: "";

}



.accordion_btn .to_close::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(2 * (48rem / 750));

  background: url(../img/dottedline.svg) center center / calc(10 * (48rem / 750)) auto repeat-x;

  content: "";

}



.accordion_btn .to_open,

.open .accordion_btn .to_close {

  display: block;

}



.accordion_btn .to_close,

.open .accordion_btn .to_open {

  display: none;

}



.color_list {

  display: flex;

  justify-content: center;

  align-items: flex-end;

  gap: calc(30 * (48rem / 750));

  margin-bottom: calc(43 * (48rem / 750));

}



.img_slider .slick-track {

  display: flex;

}



.img_slider .slick-arrow {

  position: absolute;

  z-index: 2;

  top: 50%;

  translate: 0 -50%;

  width: calc(90 * (48rem / 750));

  height: calc(90 * (48rem / 750));

  margin-top: calc(115 * (48rem / 750));

}



.img_slider .slick-arrow::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/arrow_002.svg) center center / cover no-repeat;

  content: "";

  opacity: 1 !important;

}



.img_slider .slick-arrow.slick-prev {

  left: auto;

  right: 100%;

  margin-right: calc(-30 * (48rem / 750));

}



.img_slider .slick-arrow.slick-prev::before {

  scale: -1 1;

}



.img_slider .slick-arrow.slick-next {

  left: 100%;

  margin-left: calc(-30 * (48rem / 750));

}



.color_list li label {

  display: block;

  width: calc(50 * (48rem / 750));

  cursor: pointer;

}



.color_list li label p {

  margin-bottom: calc(10 * (48rem / 750));

  font-size: calc(20 * (48rem / 750));

  letter-spacing: .05em;

  text-align: center;

}



.color_list li label div {

  position: relative;

}



.color_list li label div::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(58 * (48rem / 750));

  height: calc(58 * (48rem / 750));

  background: url(../img/icon_selected.svg) center center / cover no-repeat;

  content: "";

  opacity: 0;

  pointer-events: none;

  transition: opacity .6s;

}



.color_list li.selected label div::before {

  opacity: 1;

}



.variationName_list {

  margin-bottom: calc(45 * (48rem / 750));

}



.variationName_list li {

  position: relative;

  width: fit-content;

  margin: 0 auto;

  font-size: calc(26 * (48rem / 750));

  opacity: 0;

  height: 0;

  overflow: hidden;

  transition: opacity 1s;

}



.variationName_list li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(2 * (48rem / 750));

  background: url(../img/dottedline.svg) center center / calc(10 * (48rem / 750)) auto repeat-x;

  content: "";

}



.variationName_list li.selected {

  padding-bottom: calc(18 * (48rem / 750));

  opacity: 1;

  height: auto;

  overflow: visible;

}

/*------------------------product*/



/*Special Campaign---------------*/

#SpecialCampaign {

  position: relative;

  z-index: 1;

  margin-bottom: calc(-270 * (48rem / 750));

}



#SpecialCampaign::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(140 * (48rem / 750)));

  background: url(../img/bg_blue_002.svg) top center / 100% auto repeat-y;

  content: "";

}



#SpecialCampaign .accordion_outside::after {

  position: absolute;

  bottom: 0;

  right: 0;

  width: calc(218 * (48rem / 750));

  height: calc(218 * (48rem / 750));

  margin-bottom: calc(310 * (48rem / 750));

  background: url(../img/character_801.svg) center center / cover no-repeat;

  content: "";

}



#SpecialCampaign .sec_inner {

  padding: calc(80 * (48rem / 750)) 0 calc(420 * (48rem / 750));

}



#SpecialCampaign .accordion_outside {

  width: calc(650 * (48rem / 750));

  margin: 0 auto;

  padding: calc(60 * (48rem / 750)) 0 calc(80 * (48rem / 750));

  border-radius: calc(40 * (48rem / 750));

  background: var(--color_01_04);

}



#SpecialCampaign .accordion_inner {

  min-height: calc(990 * (48rem / 750));

}



#SpecialCampaign .accordion_inner::before {

  position: absolute;

  z-index: 1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(990 * (48rem / 750)));

  background: var(--color_01_04);

  content: "";

  transition: opacity 2s;

  pointer-events: none;

}



#SpecialCampaign .open .accordion_inner::before {

  opacity: 0;

}



.campaign_ttl {

  margin-bottom: calc(40 * (48rem / 750));

  font-size: calc(28 * (48rem / 750));

  text-align: center;

  color: var(--color_01_03);

}



.campaign_ttl .txt_S {

  font-size: calc(26 * (48rem / 750));

}



.campaign_ttl .txt_eng {

  display: block;

  margin-top: calc(30 * (48rem / 750));

  font-family: var(--font_eng);

  font-size: calc(70 * (48rem / 750));

}



.campaign_lead {

  margin-bottom: calc(48 * (48rem / 750));

  font-size: calc(26 * (48rem / 750));

  line-height: 2;

  text-align: center;

}



.campaign_img {

  margin-bottom: calc(40 * (48rem / 750));

}



.campaign_period {

  font-size: calc(28 * (48rem / 750));

  text-align: center;

}



.campaign_period span {

  display: block;

  width: fit-content;

  margin: 0 auto calc(15 * (48rem / 750));

  padding: calc(7 * (48rem / 750)) calc(12 * (48rem / 750));

  border-radius: calc(10 * (48rem / 750));

  border: solid var(--color_regular) calc(2 * (48rem / 750));

  background: #fff;

  font-size: calc(22 * (48rem / 750));

}



.prize_list {

  display: grid;

  grid-template-columns: repeat(2, calc(290 * (48rem / 750)));

  justify-content: center;

  gap: calc(60 * (48rem / 750)) calc(20 * (48rem / 750));

  margin-top: calc(107 * (48rem / 750));

  text-align: center;

}



.prize_list li {

  position: relative;

}



.prize_list li .prize_num {

  position: absolute;

  top: 0;

  left: 0;

  display: grid;

  place-items: center;

  width: calc(90 * (48rem / 750));

  height: calc(90 * (48rem / 750));

  padding-bottom: calc(5 * (48rem / 750));

  border-radius: 50%;

  background: var(--color_01_03);

  font-size: calc(30 * (48rem / 750));

  color: #fff;

}



.prize_list li .prize_name {

  font-size: calc(24 * (48rem / 750));

  line-height: 1.75;

}



.prize_list li .prize_winners {

  display: grid;

  place-items: center;

  width: calc(125 * (48rem / 750));

  height: calc(40 * (48rem / 750));

  margin: calc(15 * (48rem / 750)) auto 0;

  border-radius: calc(12 * (48rem / 750));

  background: var(--color_regular);

  font-size: calc(24 * (48rem / 750));

  color: #fff;

}



.prize_noets {

  margin-top: calc(55 * (48rem / 750));

  padding: 0 calc(40 * (48rem / 750));

  font-size: calc(20 * (48rem / 750));

  line-height: 1.5;

  letter-spacing: .05em;

}



.howto_wrap {

  margin-top: calc(95 * (48rem / 750));

  padding: 0 calc(30 * (48rem / 750));

}



.howto_ttl {

  position: relative;

  font-size: calc(32 * (48rem / 750));

  text-align: center;

}



.howto_ttl::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 100%;

  height: calc(2 * (48rem / 750));

  margin-top: calc(3 * (48rem / 750));

  background: url(../img/dottedline.svg) center center / calc(10 * (48rem / 750)) auto repeat-x;

  content: "";

}



.howto_ttl span {

  position: relative;

  padding: 0 calc(30 * (48rem / 750));

  background: var(--color_01_04);

}



.howto_list {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: calc(15 * (48rem / 750));

  margin-top: calc(65 * (48rem / 750));

}



.howto_list li {

  padding: calc(15 * (48rem / 750)) 0 calc(22 * (48rem / 750));

  border-radius: calc(20 * (48rem / 750));

  border: solid var(--color_01_03) calc(2 * (48rem / 750));

  background: #fff;

}



.howto_list li .howto_num {

  margin-bottom: calc(8 * (48rem / 750));

  font-size: calc(36 * (48rem / 750));

  text-align: center;

  color: var(--color_01_03);

}



.howto_list li .howto_img {

  margin-bottom: calc(14 * (48rem / 750));

}



.howto_list li .howto_txt {

  padding: 0 calc(10 * (48rem / 750)) 0 calc(15 * (48rem / 750));

  font-size: calc(20 * (48rem / 750));

  line-height: 1.5;

  letter-spacing: .05em;

  color: #505050;

}



.howto_list li:nth-of-type(2) .howto_txt {

  text-align: justify;

}



.howto_list li:nth-of-type(2) .howto_txt span {

  letter-spacing: .15em;

}



.howto_wrap .btn_Apply {

  display: grid !important;

  place-items: center;

  width: calc(500 * (48rem / 750));

  height: calc(100 * (48rem / 750));

  margin: calc(60 * (48rem / 750)) auto 0;

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_regular);

  font-size: calc(30 * (48rem / 750));

  color: #fff;

}



.campaign_notes {

  margin-top: calc(75 * (48rem / 750));

  padding: 0 calc(40 * (48rem / 750));

  font-size: calc(20 * (48rem / 750));

  line-height: 1.5;

  letter-spacing: .05em;

}



#SpecialCampaign .accordion_btn {

  margin-top: calc(55 * (48rem / 750));

}



#SpecialCampaign .to_open {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: calc(500 * (48rem / 750));

  height: calc(100 * (48rem / 750));

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_regular);

  font-size: calc(30 * (48rem / 750));

  color: #fff;

}



#SpecialCampaign .to_open::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  right: 0;

  width: calc(580 * (48rem / 750));

  height: calc(150 * (48rem / 750));

  margin: 0 calc(-40 * (48rem / 750)) calc(-15 * (48rem / 750)) 0;

  background: url(../img/tap.gif) bottom right / 100% auto no-repeat;

  content: "";

}



#SpecialCampaign .open .to_open {

  display: none;

}

/*---------------Special Campaign*/



/*lastry-------------------------*/

.lastry_area {

  padding-bottom: calc(145 * (48rem / 750));

}



.aboutPokePeace_wrap {

  position: relative;

  z-index: 1;

  text-align: center;

}



.aboutPokePeace_wrap::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(1200 * (48rem / 750));

  height: calc(1200 * (48rem / 750));

  margin-top: calc(125 * (48rem / 750));

  border-radius: 50%;

  background: #fff;

  content: "";

}



.aboutPokePeace_wrap .about_img {

  width: calc(620 * (48rem / 750));

  margin: 0 auto calc(38 * (48rem / 750));

  scale: 0;

}



.aboutPokePeace_wrap .about_img.active {

  animation: popup .6s ease-in-out forwards;

}



@keyframes popup {

  0% {

    scale: 0;

  }



  70% {

    scale: 1.08;

  }



  100% {

    scale: 1;

  }

}



.aboutPokePeace_wrap .about_ttl {

  margin-bottom: calc(50 * (48rem / 750));

  font-size: calc(42 * (48rem / 750));

}



.aboutPokePeace_wrap .about_txt {

  font-size: calc(26 * (48rem / 750));

  line-height: 2;

}



.aboutPokePeace_wrap .link_PokePeaceOfficial {

  position: relative;

  width: fit-content;

  margin: calc(48 * (48rem / 750)) auto 0;

  padding: 0 0 calc(20 * (48rem / 750)) calc(30 * (48rem / 750));

  font-size: calc(26 * (48rem / 750));

}



.aboutPokePeace_wrap .link_PokePeaceOfficial::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(2 * (48rem / 750));

  background: url(../img/dottedline.svg) center center / calc(10 * (48rem / 750)) auto repeat-x;

  content: "";

}



.aboutPokePeace_wrap .link_PokePeaceOfficial::after {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(30 * (48rem / 750));

  height: calc(30 * (48rem / 750));

  margin-top: calc(-2 * (48rem / 750));

  background: url(../img/illust_monsterBall_002.svg) center center / cover no-repeat;

  content: "";

}



.aboutPokePeace_wrap .copyright {

  margin-top: calc(58 * (48rem / 750));

  font-size: calc(22 * (48rem / 750));

  font-weight: 500;

  text-align: center;

}



.link_allItem {

  display: grid !important;

  place-items: center;

  background: var(--color_01_03);

  font-family: var(--font_eng);

  font-weight: 600;

  color: #fff;

}



.lastry_area .link_allItem {

  width: calc(500 * (48rem / 750));

  height: calc(100 * (48rem / 750));

  margin: calc(102 * (48rem / 750)) auto 0;

  border-radius: calc(100 * (48rem / 750));

  font-size: calc(48 * (48rem / 750));

}



.lastry_area .notes {

  width: calc(660 * (48rem / 750));

  margin: calc(72 * (48rem / 750)) auto 0;

  font-family: dnp-shuei-gothic-kin-std, sans-serif;

  font-size: calc(16 * (48rem / 750));

  font-weight: 500;

  line-height: 2;

  letter-spacing: .05em;

}



/*-------------------------lastry*/



/*coupon--------------------------*/

.coupon_area {

  padding: calc(100 * (48rem / 750)) calc(50 * (48rem / 750)) calc(150 * (48rem / 750));

  background: var(--color_07_01);

}



.coupon_area .accordion_outside {

  padding: calc(56 * (48rem / 750)) 0 calc(80 * (48rem / 750));

  border-radius: calc(40 * (48rem / 750));

  background: #fff;

}



.coupon_area .accordion_inner {

  min-height: calc(235 * (48rem / 750));

}



.coupon_area .accordion_inner::before {

  position: absolute;

  z-index: 1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(235 * (48rem / 750)));

  background: #fff;

  content: "";

  transition: opacity 2s;

  pointer-events: none;

}



.coupon_area .open .accordion_inner::before {

  opacity: 0;

}



.coupon_area h2 {

  margin-bottom: calc(26 * (48rem / 750));

  font-size: calc(42 * (48rem / 750));

  letter-spacing: .05em;

  text-align: center;

  color: var(--color_07_03);

}



.coupon_area .area_lead {

  font-size: calc(26 * (48rem / 750));

  line-height: 2;

  text-align: center;

}



.coupon_area .area_lead .txt_L {

  position: relative;

  margin-right: calc(6 * (48rem / 750));

  font-size: calc(32 * (48rem / 750));

}



.coupon_area .area_lead .txt_L::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(2 * (48rem / 750));

  margin-bottom: calc(-5 * (48rem / 750));

  background: url(../img/dottedline.svg) center center / calc(10 * (48rem / 750)) auto repeat-x;

  content: "";

}



.coupon_area .area_lead .txt_LL {

  font-size: calc(38 * (48rem / 750));

}



.coupon_outside {

  display: grid;

  place-items: center;

  width: calc(500 * (48rem / 750));

  height: calc(100 * (48rem / 750));

  margin: calc(58 * (48rem / 750)) auto 0;

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_regular);

}



.coupon_wrap {

  display: flex;

  height: calc(50 * (48rem / 750));

}



.coupon_code {

  display: grid;

  place-items: center;

  width: calc(250 * (48rem / 750));

  background: #fff;

  font-size: calc(28 * (48rem / 750));

}



.for_copy {

  display: grid;

  place-items: center;

  grid-template-columns: 1fr 0fr;

  width: calc(110 * (48rem / 750));

  border: none;

  background: #c4b3ae;

  font-family: var(--font_regular);

  font-size: calc(24 * (48rem / 750));

  color: #fff;

  cursor: pointer;

}



.for_copy.copied {

  grid-template-columns: 0fr 1fr;

  pointer-events: none;

}



.for_copy span {

  transition: opacity .3s;

}



.for_copy.copied .copy_after,

.for_copy .copy_after {

  opacity: 1;

  overflow: visible;

  height: auto;

}



.for_copy .copy_after,

.for_copy.copied .copy_before {

  opacity: 0;

  overflow: hidden;

  height: 0;

}



.coupon_detail_wrap {

  margin-top: calc(80 * (48rem / 750));

}



.coupon_detail_wrap dt {

  display: grid;

  place-items: center;

  width: calc(280 * (48rem / 750));

  height: calc(55 * (48rem / 750));

  margin: 0 auto;

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_07_03);

  font-size: calc(26 * (48rem / 750));

  color: #fff;

}



.coupon_detail_wrap dt:nth-of-type(n+2) {

  margin-top: calc(80 * (48rem / 750));

}



.coupon_detail_wrap .store_list {

  display: grid;

  grid-template-columns: repeat(2, calc(250 * (48rem / 750)));

  justify-content: center;

  gap: calc(20 * (48rem / 750));

  margin-top: calc(40 * (48rem / 750));

}



.coupon_detail_wrap .store_list li {

  border: solid #c8c8c8 calc(1 * (48rem / 750));

}



.coupon_detail_wrap .howto_txt {

  width: fit-content;

  margin: calc(28 * (48rem / 750)) auto 0;

  font-size: calc(22 * (48rem / 750));

  line-height: 2;

}



.coupon_detail_wrap .howto_img {

  width: calc(520 * (48rem / 750));

  margin: calc(28 * (48rem / 750)) auto 0;

  border: solid #c8c8c8 calc(1 * (48rem / 750));

}



.coupon_detail_wrap .notes_list {

  width: calc(540 * (48rem / 750));

  margin: calc(28 * (48rem / 750)) auto 0;

}



.coupon_detail_wrap .notes_list li {

  font-size: calc(22 * (48rem / 750));

  line-height: 2;

  text-indent: -.8em;

  padding-left: .8em;

}



.coupon_detail_wrap .notes_list li .txt_S {

  font-size: calc(18 * (48rem / 750));

}



.coupon_area .accordion_btn {

  margin-top: calc(48 * (48rem / 750));

}



.coupon_area .to_open {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: calc(500 * (48rem / 750));

  height: calc(100 * (48rem / 750));

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_regular);

  font-size: calc(30 * (48rem / 750));

  color: #fff;

}



.coupon_area .to_open::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  right: 0;

  width: calc(580 * (48rem / 750));

  height: calc(150 * (48rem / 750));

  margin: 0 calc(-40 * (48rem / 750)) calc(-15 * (48rem / 750)) 0;

  background: url(../img/tap.gif) bottom right / 100% auto no-repeat;

  content: "";

}



.coupon_area .open .to_open {

  display: none;

}



.link_MiteaOfficial {

  display: grid !important;

  place-items: center;

  width: calc(500 * (48rem / 750));

  height: calc(100 * (48rem / 750));

  margin: calc(100 * (48rem / 750)) auto 0;

  border-radius: calc(100 * (48rem / 750));

  background: var(--color_07_03);

  font-family: var(--font_eng);

  font-size: calc(48 * (48rem / 750));

  font-weight: 600;

  color: #fff;

}

/*--------------------------coupon*/



.fixed_bnr {

  position: fixed;

  z-index: 3;

  bottom: 0;

  right: 0;

  width: calc(400 * (48rem / 750));

  margin: 0 calc(15 * (48rem / 750)) calc(15 * (48rem / 750)) 0;

  border-radius: calc(15 * (48rem / 750));

  overflow: clip;

  box-shadow: 0 0 calc(10 * (48rem / 750)) rgba(0, 0, 0, .2);

  opacity: 0;

  pointer-events: none;

  transition: opacity .6s;

}



.fixed_bnr.active {

  opacity: 1;

  pointer-events: auto;

}





/*shareボタン、shareテキスト---------------------------*/

@media screen and  (max-width:768px) {

#share {

  right: auto !important;

  left: 5% !important;

  z-index: 10 !important;

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}



}

/*---------------------------shareボタン、shareテキスト*/





/*PC------------------------------------------------------*/

@media screen and  (min-width:769px) {

  .only_sp {

    display: none !important;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    width: 48rem;

    min-height: 100vh;

    margin: -100vh auto 0;

    overflow: clip;

  }



  .fixed_area {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    width: 100%;

    height: 100vh;

    margin: 0 auto;

    background: var(--color_01_01);

  }



  .fixed_area::before {

    position: absolute;

    z-index: -1;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: url(../img/bg_pc.svg) bottom center / 26rem 26rem repeat;

    content: "";

  }



  .fixed_area::after {

    position: absolute;

    z-index: 1;

    bottom: 0;

    right: 0;

    width: 13rem;

    height: 13rem;

    margin-bottom: 4rem;

    background: url(../img/character_801.svg) center center / cover no-repeat;

    content: "";

  }



  .fixed_area .copyright {

    position: absolute;

    z-index: 1;

    bottom: 0;

    right: 0;

    margin: 0 1.2rem 1.2rem 0;

    font-size: 1.1rem;

    font-weight: 500;

  }

  

  .fixed_left,

  .fixed_right {

    position: relative;

    z-index: 1;

    display: grid;

    place-items: center;

    width: calc((100% - 48rem) / 2);

    height: 100%;

    transition: padding .6s;

  }



  .fixed_left::before,

  .fixed_right::before {

    position: absolute;

    z-index: -1;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 50%;

    background: var(--color_01_01);

    content: "";

  }



  .fixed_left.move,

  .fixed_right.move {

    transition: height .6s;

    transition-delay: .3s;

  }



  .fixed_left .logo_pokemon {

    position: absolute;

    top: 0;

    left: 0;

    width: 11rem;

    margin: 1.6rem 0 0 2.3rem;

  }



  .fixed_left .logo_pokepeace {

    width: 26.1rem;

  }



  .pc_nav {

    width: fit-content;

    margin: 0 auto;

    font-size: 1.6rem;

  }



  .pc_nav li {

    position: relative;

  }



  .pc_nav li::before {

    position: absolute;

    top: 0;

    right: 100%;

    width: 2.1rem;

    height: 2.1rem;

    margin: -.1rem .9rem 0 0;

    background: url(../img/illust_monsterBall_002.svg) center center / cover no-repeat;

    content: "";

    opacity: 0;

    transition: opacity .3s;

    pointer-events: none;

  }



  .pc_nav li.selected::before {

    opacity: 1;

  }



  .pc_nav li:nth-of-type(n+2) {

    margin-top: 1.6rem;

  }



  .fixed_right .link_allItem {

    width: 27.5rem;

    height: 5.5rem;

    margin: 6rem auto 0;

    border-radius: 10rem;

    font-size: 2.64rem;

  }













}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

@media screen and (max-width: 1400px) and (min-width: 769px) {

  html {

    font-size: calc(10 * (100vw / 1400));

  }

}



@media screen and (max-width: 768px) {

  html {

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

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/