@charset "UTF-8";



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

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



footer {

  position: relative;

  z-index: 2;

}



@font-face {

  font-family: "こぶりなゴシック";

  src: url("../font/こぶりなゴシックSTDN W3.otf") format("opentype");

  font-weight: 400;

}



:root {

  --font_regular: "こぶりなゴシック", sans-serif;

  --font_serif: "Shippori Mincho", serif;

  --font_eng: "futura-pt", sans-serif;

  --color_regular: #322B29;

  --color_01: #B9303B;

  --color_bg_01: #F1EEEC;

  --color_bg_02: #fff;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  font-feature-settings: "palt";

}



.LP_page {

  background: #fff;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: 1rem;

}



.fade.activePoint,

.fade.activeDelay {

  opacity: 0;

  transition: opacity 1s;

}



.fade.activeDelay.delay1 {

  transition-delay: .15s;

}



.fade.activeDelay.delay2 {

  transition-delay: .3s;

}



.fade.activeDelay.delay3 {

  transition-delay: .45s;

}



.fade.activeDelay.delay4 {

  transition-delay: .6s;

}



.fade.activePoint.active,

.fade.activePoint.active > .activeDelay {

  opacity: 1;

}

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



/*mv-----------------------------*/

#Wrap {

  padding: 0;

}



header {

  opacity: 0;

  pointer-events: none;

  transition: opacity .3s;

}



header.active {

  opacity: 1;

  pointer-events: auto;

}



.mv_area {

  height: 100lvh;

  background: var(--color_bg_01);

}



.mv_area .area_inner {

  position: relative;

  display: grid;

  place-items: center;

  height: 100%;

}



.for_parallax {

  position: sticky !important;

  top: 0;

}



.mv_area .main_ttl {

  display: block;

  width: 34.2rem;

  opacity: 0;

}



.mv_area .main_ttl.active {

  animation: poyoyon 1s .2s ease-in-out forwards

}



@keyframes poyoyon {

  0%  {

    transform: scale(1, 1);

    translate: 0 0;

    opacity: 0;

  }



  15% {

    transform: scale(.7, .8);

    translate: 0 3%;

    opacity: 0;

  }

  

  30% {

    transform: scale(1.4, .9);

    translate: 0 6%;

    opacity: 1;

  }

  

  50% {

    transform: scale(.9, 1.2);

    translate: 0 -4%;

  }



  70% {

    transform: scale(1.1, .8);

    translate: 0 1%;

  }

  100% {

    transform: scale(1, 1);

    translate: 0 0;

    opacity: 1;

  }

}





.mv_area p {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  margin-bottom: 20%;

  padding-bottom: 5rem;

  font-family: var(--font_eng);

  font-size: 4.3rem;

  font-weight: 500;

  letter-spacing: .2em;

  color: var(--color_01);

}



.mv_area p span {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  animation: arrow 2s infinite;

}





@keyframes arrow {

  0% {

    transform: translateY(0);

  }

  

  50% {

    transform: translateY(2rem);

  }



  100% {

    transform: translateY(0);

  }

}



.mv_area p span::before,

.mv_area p span::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: .4rem;

  height: 3rem;

  border-radius: 10rem;

  background: var(--color_01);

  content: "";

  transform-origin: center bottom;

}



.mv_area p span::before {

  rotate: -45deg;

  margin-left: .14rem;

}



.mv_area p span::after {

  rotate: 45deg;

  margin-left: -.14rem;

}



.decoration {

  position: absolute;

  width: 11rem;

  height: 11rem;

}



.decoration_snoopy::before,

.decoration_heart::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

}



.decoration_snoopy::before {

  background: url(../img/deco_004.png) center center / cover no-repeat;

}



.decoration_heart::before {

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

}



.decoration:nth-of-type(odd).decoration_snoopy:before {

  /*animation: deco1 16s infinite;*/

}



.decoration::before {

  opacity: 0;

  transition: opacity 1s;

}



.LP_page.active .decoration::before {

  opacity: 1;

}



.LP_page.active .decoration:nth-of-type(1).decoration_snoopy:before {

  transition-delay: 1s;

}



.LP_page.active .decoration:nth-of-type(3).decoration_snoopy:before {

  transition-delay: 2.2s;

}



.LP_page.active .decoration:nth-of-type(5).decoration_snoopy:before {

  transition-delay: 1.8s;

}



.LP_page.active .decoration:nth-of-type(7).decoration_snoopy:before {

  transition-delay: 1.4s;

}



.LP_page.active .decoration:nth-of-type(9).decoration_snoopy:before {

  transition-delay: 2s;

}



.LP_page.active .decoration:nth-of-type(11).decoration_snoopy:before {

  transition-delay: 1.6s;

}



.LP_page.active .decoration:nth-of-type(13).decoration_snoopy:before {

  transition-delay: 1.2s;

}



.decoration:nth-of-type(even).decoration_snoopy::before {

  /*animation: deco4 16s infinite;*/

  display: none;

}



.decoration:nth-of-type(odd).decoration_heart::before {

  /*animation: deco2 16s infinite;*/

  display: none;

}



.decoration:nth-of-type(even).decoration_heart::before {

  /*animation: deco3 16s infinite;*/

}



.LP_page.active .decoration:nth-of-type(16).decoration_heart::before {

  transition-delay: 1.9s;

}



.LP_page.active .decoration:nth-of-type(18).decoration_heart::before {

  transition-delay: 1.7s;

}



.LP_page.active .decoration:nth-of-type(20).decoration_heart::before {

  transition-delay: 1.3s;

}



.LP_page.active .decoration:nth-of-type(22).decoration_heart::before {

  transition-delay: 2.1s;

}



.LP_page.active .decoration:nth-of-type(24).decoration_heart::before {

  transition-delay: 1.5s;

}



.LP_page.active .decoration:nth-of-type(26).decoration_heart::before {

  transition-delay: 1.1s;

}



.LP_page.active .decoration:nth-of-type(28).decoration_heart::before {

  transition-delay: 2.3s;

}



.decoration {

  animation: floatY 8s infinite, floatX 12s infinite reverse;

}



.decoration:nth-of-type(3n) {

  animation: floatY 6s infinite reverse, floatX 16s infinite;

}



@keyframes deco1 {

  0% {

    scale: 1;

  }



  25% {

    scale: 1;

  }



  28% {

    scale: 0;

  }



  78% {

    scale: 0;

  }



  80% {

    scale: 1;

  }



  100% {

    scale: 1;

  }

}



@keyframes deco2 {

  0% {

    scale: 0;

  }



  28% {

    scale: 0;

  }



  30% {

    scale: 1;

  }



  75% {

    scale: 1;

  }



  80% {

    scale: 0;

  }



  100% {

    scale: 0;

  }

}



@keyframes deco3 {

  0% {

    scale: 1;

  }



  45% {

    scale: 1;

  }



  48% {

    scale: 0;

  }



  98% {

    scale: 0;

  }



  100% {

    scale: 1;

  }

}



@keyframes deco4 {

  0% {

    scale: 0;

  }



  48% {

    scale: 0;

  }



  50% {

    scale: 1;

  }



  95% {

    scale: 1;

  }



  100% {

    scale: 0;

  }

}



.decoration_001 {

  top: 8%;

  left: 5%;

}



.decoration_001::before {

  rotate: 45deg;

}



.decoration_001.decoration_snoopy {

  transform: scale(.8);

}



.decoration_001.decoration_heart {

  transform: scale(.6);

}



.decoration_002 {

  top: 3%;

  left: 60%;

}



.decoration_002::before {

  rotate: -30deg;

}



.decoration_002.decoration_snoopy {

  transform: scale(.7);

}



.decoration_003 {

  top: 25%;

  left: 64%;

}



.decoration_003.decoration_heart {

  transform: scale(.8);

}



.decoration_004 {

  top: 18%;

  left: 28%;

}



.decoration_004::before {

  rotate: 90deg;

}



.decoration_004.decoration_snoopy {

  transform: scale(.9);

}



.decoration_004.decoration_heart {

  transform: scale(.7);

}



.decoration_005 {

  top: 30%;

  left: -5%;

}



.decoration_005::before {

  rotate: 160deg;

}



.decoration_005.decoration_snoopy {

  transform: scale(.6);

}



.decoration_006 {

  top: 54%;

  left: 3%;

}



.decoration_006::before {

  right: 160deg;

}



.decoration_006.decoration_snoopy {

  transform: scale(.8);

}



.decoration_006.decoration_heart {

  transform: scale(.6);

}



.decoration_007 {

  top: 70%;

  left: 92%;

}



.decoration_007::before {

  rotate: -90deg;

}



.decoration_007.decoration_heart {

  transform: scale(.8);

}



.decoration_008 {

  top: 43%;

  left: 85%;

}



.decoration_008.decoration_snoopy {

  transform: scale(.6);

}



.decoration_009 {

  top: 70%;

  left: 24%;

}



.decoration_009::before {

  rotate: 230deg;

}



.decoration_009.decoration_snoopy {

  transform: scale(.9);

}



.decoration_009.decoration_heart {

  transform: scale(.5);

}



.decoration_010 {

  top: 64%;

  left: 60%;

}



.decoration_010::before {

  rotate: 45deg;

}



.decoration_010.decoration_snoopy {

  transform: scale(.7);

}



.decoration_010.decoration_heart {

  transform: scale(.9);

}



.decoration_011 {

  top: 10%;

  left: 90%;

  rotate: -120deg;

}



.decoration_011.decoration_heart {

  transform: scale(.7);

}



.decoration_012 {

  top: 86%;

  left: 75%;

}



.decoration_012::before {

  rotate: 180deg;

}



.decoration_012.decoration_snoopy {

  transform: scale(.6);

}



.decoration_012.decoration_heart {

  transform: scale(.8);

}



.decoration_013 {

  top: 90%;

  left: 20%;

}



.decoration_013::before {

  rotate: -60deg;

}



.decoration_013.decoration_snoopy {

  transform: scale(.9);

}



.decoration_014 {

  top: 78%;

  left: -7%;

}



.decoration_014.decoration_snoopy {

  transform: scale(.7);

}



.decoration_014.decoration_heart {

  transform: scale(.6);

}



/*-----------------------------mv*/



/*nav----------------------------*/

.navigation_bottom {

  bottom: 0;

  position: fixed;

  z-index: 60;

  width: 100%;

  background: var(--color_01);

  translate: 0 100%;

  transition: translate .3s;

}



.navigation_bottom.active {

  translate: 0 0;

}



.navigation_list {

  display: grid;

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

}



.navigation_list li {

  position: relative;

}



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

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: .2rem;

  height: calc(100% - 4rem);

  background: #fff;

  content: "";

}



.navigation_list li a {

  display: grid;

  place-items: center;

  height: 11rem;

  font-family: var(--font_eng);

  font-size: 3.6rem;

  font-weight: 400;

  letter-spacing: .12em;

  color: #fff;

}

/*----------------------------nav*/



/*main lead----------------------*/

.mainLead_area {

  padding: 12rem 0 7rem;

  background: var(--color_bg_02);

  text-align: center;

}



.mainLead_area::before,

.mainLead_area::after,

.mainLead_area h2::before,

.mainLead_area h2::after,

.mainLead_area h3::before,

.main_lead::before,

.main_lead::after {

  position: absolute;

  width: 9rem;

  height: 9rem;

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

  content: "";

  animation: floatY 10s infinite, floatX 15s infinite;

}



.mainLead_area::before {

  top: 0;

  left: 0;

  margin: 3rem 0 0 9rem;

  rotate: -50deg;

  scale: .9;

}



.mainLead_area::after {

  bottom: 0;

  right: 0;

  margin: 0 12rem -4rem 0;

  rotate: 45deg;

}



.mainLead_area h2 {

  position: relative;

  margin-bottom: 8rem;

  font-family: var(--font_serif);

  font-size: 4rem;

  font-weight: 500;

  line-height: 2.2;

  letter-spacing: .1em;

}



.mainLead_area h2::before {

  top: 0;

  right: 0;

  margin: 2rem -4rem 0 0;

  scale: .8;

}



.mainLead_area h2::after {

  bottom: 0;

  left: 0;

  margin: 0 0 -6rem -3rem;

  rotate: -70deg;

}



.mainLead_area h2 .each_logo {

  display: inline-block;

  margin: 0 1.2rem;

}



.mainLead_area h2 .logo_CK {

  width: 27.4rem;

}



.mainLead_area h2 .logo_CK img {

  padding-bottom: .6rem;

}



.mainLead_area h2 .logo_PEANUTS {

  width: 16.8rem;

}



.mainLead_area h3 {

  position: relative;

  margin-bottom: 8rem;

  font-size: 3rem;

  font-weight: 500;

  letter-spacing: .14em;

}



.mainLead_area h3::before {

  bottom: 0;

  right: 0;

  margin: 0 4rem -18rem 0;

  rotate: 120deg;

}



.mainLead_area h3 .txt_red {

  display: block;

  margin-bottom: 4rem;

  font-family: var(--font_serif);

  font-size: 5rem;

  color: var(--color_01);

  letter-spacing: -.02em;

}



.main_lead {

  position: relative;

  font-size: 2.4rem;

  line-height: 2.2;

  letter-spacing: .05em;

}



.main_lead::before {

  top: 0;

  left: 0;

  margin: 20rem 0 0 3.5rem;

  rotate: -40deg;

  scale: .9;

}



.main_lead::after {

  top: 0;

  right: 0;

  margin: 40rem 0 0 0;

  scale: .8;

}



/*----------------------main lead*/



/*special kit--------------------*/

.kit_area {

  position: relative;

  padding-top: 9.2rem;

}



.kit_area .sec_inner {

  padding: 14rem 0 12rem;

  background: var(--color_bg_01);

}



.sec_subheading {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 50%;

  translate: -50% 0;

  display: grid;

  place-items: center;

  width: 18.4rem;

  height: 18.4rem;

  padding-top: 3rem;

  font-size: 3rem;

  letter-spacing: .12em;

  text-align: center;

  color: #fff;

}



.sec_subheading .txt_eng {

  display: block;

  margin-top: .6rem;

  font-family: var(--font_eng);

  font-size: 2rem;

  font-weight: 500;

}



.sec_subheading::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: var(--color_01);

  content: "";

  scale: 0;

  transition: scale .3s;

}



.sec_subheading.active::before {

  scale: 1;

}



.sec_subheading span {

  opacity: 0;

  transition: opacity .3s;

}



.sec_subheading.active span {

  opacity: 1;

}



.sec_subheading::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: 3.6rem;

  height: 3.6rem;

  margin-top: 2.5rem;

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

  mask-size: cover;

  mask-repeat: no-repeat;

  mask-position: center center;

  background: #fff;

  content: "";

  animation: floatY 3s infinite;

  transition: opacity .3s;

  opacity: 0;

}



@keyframes floatY {

  0% {

    transform: translateY(-.4rem);

  }



  50% {

    transform: translateY(.4rem);

  }



  100% {

    transform: translateY(-.4rem);

  }

}



@keyframes floatX {

  0% {

    translate: -.4rem 0;

  }



  50% {

    translate: .4rem 0;

  }



  100% {

    translate: -.4rem 0;

  }

}



.sec_subheading.active::after {

  opacity: 1;

}



.kit_release {

  margin-bottom: 3rem;

  font-family: var(--font_eng);

  font-size: 4rem;

  font-weight: 500;

  text-align: center;

  letter-spacing: .1em;

}



.kit_release .txt_S {

  font-family: var(--font_regular);

  font-size: 2.8rem;

}



.kit_area .sec_ttl {

  margin-bottom: 4rem;

  font-family: var(--font_eng);

  font-size: 11.7rem;

  font-weight: 100;

  letter-spacing: .09em;

  text-align: center;

  color: var(--color_01);

}



.sec_ttl .for_spanAddition .each_txt {

  display: inline-block;

  translate: 0 2rem;

  opacity: 0;

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

}



.sec_ttl .for_spanAddition .each_txt.active {

  translate: 0 0;

  opacity: 1;

}



.kit_area .sec_lead {

  margin-bottom: 8rem;

  font-size: 3rem;

  line-height: 1.75;

  letter-spacing: .1em;

  text-align: center;

}



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

  margin-top: 14rem;

}



.kit_area .itm_name {

  text-align: right;

  letter-spacing: .2em;

}



.kit_area .itm_name .txt_eng {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 2rem;

  margin-bottom: 1rem;

  font-size: 7.2rem;

}



.kit_area .logo_PEANUTS {

  display: inline-block;

  width: 13rem;

  margin-top: .6rem;

}



.kit_area .logo_PEANUTS img {

  display: block;

  margin: auto;

}



.kit_area .itm_img {

  position: relative;

  z-index: 1;

  margin-bottom: 1.6rem;

}



.kit_area .itm_img::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(100% - 8rem);

  height: .2rem;

  margin-bottom: 4rem;

  background: var(--color_regular);

  content: "";

}



.kit_detail {

  display: flex;

  align-items: center;

  gap: 2rem;

  width: fit-content;

  margin: 0 auto 4rem;

  padding: 0 3rem;

}



.kit_detail dt {

  display: grid;

  place-items: center;

  width: 13.6rem;

  height: 13.6rem;

  border-radius: 50%;

  border: solid var(--color_regular);

  border-width: .2rem;

  font-size: 2.7rem;

  line-height: 1.3;

  text-align: center;

}



.kit_detail dd {

  flex: 1;

}



.kit_detail li {

  position: relative;

  padding-left: 2.4rem;

  font-size: 2rem;

  line-height: 1.5;

}



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

  margin-top: .6rem;

}



.kit_detail li::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 1.6rem;

  height: 1.6rem;

  margin-top: .6rem;

  border-radius: 50%;

  background: var(--color_01);

  content: "";

}

/*--------------------special kit*/



/*Cosme Kichen Products----------*/

#CosmeKitchenProducts {

  z-index: 50;

}



#CosmeKitchenProducts::before {

  background: var(--color_bg_01);

  opacity: 1;

}



#CosmeKitchenProducts .modal_wrap {

  padding: 10rem 0 18rem;

}



#CosmeKitchenProducts .modal_close {

  margin: -8rem 3rem 0 0;

}



.CosmeKitchenProducts_area h3 {

  margin-bottom: 3rem;

  font-family: var(--font_eng);

  font-size: 5rem;

  font-weight: 500;

  line-height: 1.3;

  letter-spacing: .1em;

  text-align: center;

}



.CosmeKitchenProducts_area .sec_lead {

  margin-bottom: 2rem;

}



.CosmeKitchenProducts_area .sec_lead span {

  display: block;

  font-size: 2rem;

  line-height: 2;

  letter-spacing: .05em;

  text-align: center;

}



.CosmeKitchenProducts_area .sec_lead span:nth-of-type(n+2) {

  margin-top: 3rem;

}



.CosmeKitchenProducts_area figure {

  margin-bottom: 3rem;

  filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, .2));

}



.feature_list_wrap {

  padding: 0 4rem;

}



.feature_list_wrap dt {

  position: relative;

  margin-bottom: 4rem;

  font-family: var(--font_eng);

  font-size: 4.3rem;

  letter-spacing: .1em;

  text-align: center;

  color: var(--color_01);

}



.feature_list_wrap dt::before,

.feature_list_wrap dt::after {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

  width: 21rem;

  height: .3rem;

  background: var(--color_01);

  content: "";

}



.feature_list_wrap dt::before {

  left: 0;

}



.feature_list_wrap dt::after {

  right: 0;

}



.feature_list_wrap dd {

  width: fit-content;

  margin: 0 auto;

  padding: 0 3rem;

}



.feature_list_wrap li span {

  position: absolute;

  top: 0;

  left: 0;

  display: grid;

  place-items: center;

  width: 3.5rem;

  height: 3.5rem;

  border-radius: 50%;

  background: var(--color_01);

  font-family: var(--font_eng);

  font-size: 1.8rem;

  font-weight: 500;

  color: #fff;

}



.feature_list_wrap li span::before {

  position: absolute;

  right: 0;

  bottom: 0;

  width: 5.6rem;

  height: 5.6rem;

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

  content: "";

}



.feature_list_wrap li {

  position: relative;

  padding-left: 5rem;

  font-size: 2.4rem;

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: .02em;

  color: var(--color_01);

}



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

  margin-top: 3rem;

}

/*----------Cosme Kichen Products*/



/*lineup-------------------------*/

.lineup_area {

  padding: 12rem 0;

  background: var(--color_bg_02);

}



.lineup_area .sec_ttl {

  margin-bottom: 2rem;

  font-family: var(--font_eng);

  font-size: 6.3rem;

  font-weight: 500;

  letter-spacing: .1em;

  text-align: center;

  color: var(--color_01);

}



.each_product {

  position: relative;

  padding: 8rem 0;

}



.each_product::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(100% - 10rem);

  height: .1rem;

  background: var(--color_regular);

  content: "";

}



.itm_feature {

  position: absolute;

  top: 0;

  right: 0;

  width: fit-content;

  margin: 6.5rem 4rem 0 0;

}



.itm_feature a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 16rem;

  height: 16rem;

  padding-top: 1rem;

  font-family: var(--font_eng);

  font-size: 2rem;

  font-weight: 700;

  line-height: 1.5;

  letter-spacing: .02em;

  text-align: center;

  color: #342B29;

}



.itm_feature a::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #F8D2CF;

  content: "";

  animation: circle 3s infinite;

}



@keyframes circle {

  0% {

    scale: 1;

  }



  50% {

    scale: 1.16;

  }



  100% {

    scale: 1;

  }

}



.itm_name {

  width: fit-content;

  margin: 0 auto 4rem;

  font-size: 3rem;

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: .1em;

  text-align: center;

}



.itm_name svg {

  display: block;

}



.itm_name .txt_001 {

  width: 13rem;

  margin: 0 auto -.5rem;

}



.itm_name .txt_002 {

  width: 15.6rem;

  margin: 0 auto -1rem;

}



.itm_name svg path {

  opacity: 0;

  fill: var(--color_01);

}



.itm_name .lineup_num {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 10rem;

  height: 10rem;

  margin: 0 auto 2rem;

  font-family: var(--font_eng);

  font-size: 3.4rem;

  letter-spacing: .05em;

  color: #fff;

  animation: floatY 3s infinite, floatX 8s infinite;

}



.itm_name .lineup_num::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  content: "";

}



.itm_name .txt_eng {

  display: block;

  margin-bottom: 3rem;

  font-family: var(--font_eng);

  font-size: 7.8rem;

  font-weight: 100;

  letter-spacing: .02em;

}



.each_product .itm_name .itm_brand {

  display: block;

  width: 50rem;

  margin: 0 auto 3rem;

}



.each_product .itm_img {

  margin-bottom: 4rem;

}



.each_product .itm_img_wrap {

  position: relative;

  margin-bottom: 4rem;

}



.each_product .itm_img_wrap .itm_img {

  margin-bottom: 0;

}



.each_product .itm_img_wrap .modal_open {

  position: absolute;

  width: 4rem;

  height: 4rem;

}



.each_product .itm_img_wrap.lineup01 .modal_open:nth-of-type(1) {

  bottom: 0;

  left: 0;

  margin: 0 0 10.5rem 19.5rem;

}



.each_product .itm_img_wrap.lineup01 .modal_open:nth-of-type(2) {

  top: 0;

  right: 0;

  margin: 5rem 22.5rem 0 0;

}



.each_product .itm_img_wrap.lineup01 .modal_open:nth-of-type(3) {

  top: 0;

  left: 0;

  margin: 16.5rem 0 0 12.5rem;

}



.each_product .itm_img_wrap.lineup01 .modal_open:nth-of-type(4) {

  bottom: 0;

  right: 0;

  margin: 0 18rem 20rem 0;

}



.each_product .itm_img_wrap.lineup01 .modal_open:nth-of-type(5) {

  top: 0;

  right: 0;

  margin: 23rem 20rem 0 0;

}



.each_product .itm_img_wrap.lineup01 .modal_open:nth-of-type(6) {

  top: 0;

  left: 0;

  margin: 34rem 0 0 13rem;

}



.each_product .itm_img_wrap.lineup02 .modal_open:nth-of-type(1) {

  top: 0;

  right: 0;

  margin: 8rem 27rem 0 0;

}



.each_product .itm_img_wrap.lineup02 .modal_open:nth-of-type(2) {

  top: 0;

  left: 0;

  margin: 31rem 0 0 12rem;

}



.each_product .itm_img_wrap.lineup08 .modal_open:nth-of-type(1) {

  top: 0;

  left: 0;

  margin: 12rem 0 0 40rem;

}



.each_product .itm_img_wrap.lineup08 .modal_open:nth-of-type(2) {

  top: 0;

  left: 0;

  margin: 19.5rem 0 0 12.5rem;

}



.each_product .itm_img_wrap.lineup08 .modal_open:nth-of-type(3) {

  top: 0;

  right: 0;

  margin: 29rem 8rem 0 0;

}



.each_product .itm_img_wrap.lineup08 .modal_open:nth-of-type(4) {

  top: 0;

  left: 0;

  margin: 35rem 0 0 34rem;

}



.each_product .itm_img_wrap.lineup08 .modal_open:nth-of-type(5) {

  top: 0;

  left: 0;

  margin: 41rem 0 0 20rem;

}



.each_product .itm_img_wrap.lineup08 .modal_open:nth-of-type(6) {

  top: 0;

  left: 0;

  margin: 59rem 0 0 32rem;

}



.each_product .itm_img_wrap.lineup11 .modal_open:nth-of-type(1) {

  top: 0;

  left: 0;

  margin: 15rem 0 0 30rem;

}



.each_product .itm_img_wrap.lineup11 .modal_open:nth-of-type(2) {

  top: 0;

  left: 0;

  margin: 44rem 0 0 28rem;

}



.each_product .itm_img_wrap .modal_open::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #fff;

  content: "";

  animation: dot_scale 2s infinite;

}



@keyframes dot_scale {

  0% {

    scale: 0;

    opacity: 1;

  }



  80% {

    opacity: 1;

  }



  100% {

    scale: 1;

    opacity: 0;

  }

}



body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



.LP_page.modalOpen {

  overflow-y: scroll;

  height: 100%;

}



header.hide,

#share.hide,

.navigation_bottom.hide {

  opacity: 0;

  pointer-events: none;

  transition: opacity 0s !important;

}



.modal_outside.hide {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 100;

  top: 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #F3D6D3;

  opacity: .8;

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  width: 100%;

  margin: 0 auto;

  max-height: 100%;

  padding: 6rem 0;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_inner {

  position: relative;

}



.modal_close_wrap {

  position: fixed;

  left: 50%;

  translate: -50% 0;

  z-index: 2;

  width: 100%;

}



.modal_close {

  position: absolute;

  top: 0;

  right: 0;

  width: 6rem;

  height: 6rem;

  margin: 2rem 10rem 0 0;

  border: none;

  background: transparent;

  cursor: pointer;

}



.modal_close::before,

.modal_close::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  background: var(--color_01);

  rotate: 45deg;

  content: "";

}



.modal_close::before {

  width: 5rem;

  height: .4rem;

}



.modal_close::after {

  width: .4rem;

  height: 5rem;

}



.variation_list .slick-track {

  display: flex;

}



.each_variation {

  width: 59rem;

  height: auto !important;

  margin: 0 1.5rem;

  padding: 4rem 0;

  border: solid var(--color_01);

  border-width: .4rem;

  background: #fff;

}



.variation_img {

  margin-bottom: 4rem;

}



.each_variation .txt_wrap {

  padding: 0 4rem;

}



.variation_name {

  margin-bottom: 3rem;

  font-size: 3rem;

  line-height: 1.5;

}



.variation_caption {

  margin-bottom: 3rem;

  font-size: 2.5rem;

  line-height: 1.75;

}



.each_variation .txt_wrap > div {

  display: flex;

  align-items: center;

}



.each_variation .itm_price {

  flex: 1;

  text-align: left;

}



.variation_link {

  width: fit-content;

}



.variation_link a {

  display: grid;

  place-items: center;

  width: 24rem;

  height: 7.4rem;

  border-radius: 10rem;

  border: solid var(--color_regular);

  border-width: .2rem;

  background: var(--color_regular);

  font-family: var(--font_eng);

  font-size: 3rem;

  letter-spacing: .4em;

  color: #fff;

  transition: vackground-color .3s, color .3s;

}



.variation_link a:hover {

  background: #fff;

  color: var(--color_regular);

}



.each_product .itm_caption {

  margin-bottom: 3rem;

  font-size: 2.8rem;

  line-height: 1.75;

  letter-spacing: .1em;

  text-align: center;

}



.each_product .itm_caption .txt_S {

  display: block;

  margin-top: 1rem;

  font-size: 2.2rem;

}



.itm_price {

  font-family: var(--font_eng);

  font-size: 5rem;

  font-weight: 500;

  letter-spacing: .02em;

  text-align: center;

}



.itm_price .txt_S {

  margin-left: .5rem;

  font-family: var(--font_regular);

  font-size: 2rem;

}



.itm_link {

  width: fit-content;

  margin: 4rem auto 0;

}



.itm_link a {

  display: grid;

  place-items: center;

  width: 51rem;

  height: 9rem;

  border-radius: 10rem;

  border: solid var(--color_regular);

  border-width: .2rem;

  background: var(--color_regular);

  font-family: var(--font_eng);

  font-size: 3.8rem;

  letter-spacing: .6em;

  color: #fff;

  transition: background-color .3s, color .3s;

}



.itm_link a:hover {

  background: transparent;

  color: var(--color_regular);

}



.accordion_outside {

  margin-top: 5rem;

}



.accordion_btn {

  position: relative;

  width: fit-content;

  margin: 0 auto 2rem;

  padding-right: 2.6rem;

  font-family: var(--font_eng);

  font-size: 2.8rem;

  font-weight: 500;

  letter-spacing: .2em;

  cursor: pointer;

}



.accordion_btn::before,

.accordion_btn::after {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: 1.4rem;

  height: .3rem;

  background: var(--color_regular);

  content: "";

  transition: rotate .3s;

}



.accordion_btn::after {

  rotate: 90deg;

  transition: rotate .3s;

}



.open .accordion_btn::before {

  rotate: 180deg;

}



.open .accordion_btn::after {

  rotate: 180deg;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .5s;

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_inner {

  overflow: hidden;

}



.each_product .itm_detail {

  padding: 0 5rem;

  font-size: 2.1rem;

  line-height: 1.5;

  letter-spacing: .05em;

}



.each_product .itm_detail sup {

  font-size: 1.6rem;

}



.each_product .itm_detail .notes {

  display: block;

  font-size: 2rem;

  text-align: right;

  opacity: .8;

}

/*-------------------------lineup*/



/*ending-------------------------*/

.btn_allItems {

  width: fit-content;

  margin: 8rem auto 0;

}



.btn_allItems a {

  display: grid;

  place-items: center;

  width: 51rem;

  height: 9rem;

  border-radius: 10rem;

  border: solid var(--color_01);

  border-width: .2rem;

  background: var(--color_01);

  font-family: var(--font_eng);

  font-size: 3.4rem;

  letter-spacing: .4em;

  color: #fff;

  transition: background-color .3s, color .3s;

}



.btn_allItems a:hover {

  background: #fff;

  color: var(--color_01);

}



.logo_ending {

  display: block;

  width: 18.8rem;

  margin: 15rem auto 0;

}

/*-------------------------ending*/



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

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

  #share {

    z-index: 5 !important;

    transition: translate .3s;

  }

  

  #share.move {

    translate: 0 -12rem;

  }

  

  .share-txt {

    position: relative;

    margin: 0 !important;

    padding-bottom: 4rem;

    background: var(--color_bg_02);

  }

  }

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

  

  

  /*SP------------------------------------------------------*/

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

    .only_pc {

      display: none;

    }

  }

  /*------------------------------------------------------SP*/



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

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

  .LP_page {

    background: #FBFAF9;

  }

  

  .LP_page_inner {

    position: relative;

    z-index: 1;

    margin: 0 auto;

    overflow: clip;

  }



  .LP_page_inner,

  .navigation_bottom,

  .modal_outside,

  .modal_close_wrap {

    width: 75rem;

  }



  .fixed_area {

    position: fixed;

    left: 50%;

    translate: -50% 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    max-width: 160rem;

    height: 100%;

    margin: 0 auto;

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

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

    max-width: calc((160rem - 75rem) / 2);

    height: 100%;

  }



  .only_pc .main_ttl {

    width: 24rem;

  }

  

  .navigation_right {

    width: fit-content;

  }

  

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

    margin-top: 5rem;

  }

  

  .navigation_right ul li a {

    font-family: var(--font_eng);

    font-size: 4rem;

    font-weight: 500;

    letter-spacing: .1em;

    text-align: center;

    color: var(--color_01);

  }

  

  #FooterWrap {

    position: relative;

    z-index: 10;

  }



  .mv_area p {

    margin-bottom: 15%;

  }

  }

  

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



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

  #header_bottom .inner {

    width: 100%;

  }

  header {

    width: 100%;

    white-space: nowrap;

    overflow: clip;

  }

}



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



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

  html {

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

  }

}



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

  html {

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

  }



  

  #CosmeKitchenProducts .modal_close_wrap {

    width: 100%;

  }



  .modal_close_wrap {

    width: 75rem;

  }



  .each_product .itm_img_wrap,

  .each_product .itm_img {

    width: 75rem;

    margin: 0 auto;

  }

}



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

  html {

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

  }

}

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