@charset "UTF-8";



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

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#Contents {

  width: auto;

  max-width: unset;

}



:root {

  --font_regular: pragmatica, "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  --font_eng: "utile-display", sans-serif;

  --color_01: #C14E54;

  --color_bg_00: #fff;

  --color_bg_01: #FDF6F9;

  --color_bg_02: #FCFAED;

  --color_bg_03: #F4F9F4;

  --color_bg_04: #FEF7F5;

  --color_ribbon_01: #E3F2F8;

  --color_ribbon_02: #F0EDF7;

  --color_ribbon_03: #FDEBD9;

  --color_ribbon_04: #E5F1E0;

  --color_regular: #727171;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .15em;

  font-feature-settings: "palt";

}



.LP_page {

  position: relative;

  background: var(--color_bg_00);

  font-family: var(--font_regular);

  color: var(--color_01);

  overflow-x: clip;

  opacity: 0;

  transition: opacity .3s;

}



.LP_page.active {

  opacity: 1;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

  color: inherit;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}

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



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

body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



.LP_page.modalOpen {

  overflow-y: scroll;

  height: 100%;

}



header.hide,

#share.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: 1000;

  top: 0;

  left: 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: var(--color_bg_01);

  opacity: .6;

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  margin: 0 auto;

  max-height: 100%;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_inner {

  position: relative;

}



.modal_close {

  position: absolute;

  top: 0;

  right: 0;

  z-index: 2;

  width: calc(40 * (100vw / 2560));

  height: calc(40 * (100vw / 2560));

  margin: calc(30 * (100vw / 2560)) calc(30 * (100vw / 2560)) 0 0;

  border: none;

  background: transparent;

  cursor: pointer;

}



.modal_close::before,

.modal_close::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  background: #fff;

  rotate: 45deg;

  content: "";

}



.modal_close::before {

  width: calc(56 * (100vw / 2560));

  height: calc(2 * (100vw / 2560));

}



.modal_close::after {

  width: calc(2 * (100vw / 2560));

  height: calc(56 * (100vw / 2560));

}



.movie_wrap {

  width: calc(9 *(100vh* .94 / 16));

  height: calc(100vh * .94);

}



.movie_inner {

  position: relative;

  padding: calc(16% / 0.09)0 0 0;

}



.movie_wrap iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.btn_soundSwitch {

  position: absolute;

  bottom: 0;

  left: 0;

  width: calc(50 * (100vw / 2560));

  margin: 0 0 calc(30 * (100vw / 2560)) calc(28 * (100vw / 2560));

  cursor: pointer;

}



.btn_soundSwitch span {

  display: none;

}



.btn_soundSwitch span.selected {

  display: block;

}



.for_parallax {

  position: sticky;

  top: 0;

}



.main_visual_wrap {

  position: relative;

  margin-bottom: 9.1rem;

}



.main_visual_wrap .firstAccess {

  opacity: 0;

  transform: translateY(1rem);

  transition: opacity 1s, transform 1s;

  transition-delay: .3s;

}



.main_visual_wrap .activePoint.active {

  opacity: 1;

  transform: unset;

}



.logo_to {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(262 * (100vw / 1600));

  margin-top: calc(60 * (100vw / 1600));

}



.main_ttl {

  position: absolute;

  bottom: 0;

  left: 0;

  margin: 0 0 calc(58 * (100vw / 1600)) calc(60 * (100vw / 1600));

}



.main_ttl span {

  display: block;

  filter: drop-shadow(0 0 10px rgba(255, 255, 255, .4));

}



.ttl_001 {

  width: calc(354 * (100vw / 1600));

  margin: 0 auto calc(35 * (100vw / 1600));

}



.ttl_002 {

  width: calc(560 * (100vw / 1600));

}



.txt_release {

  margin-top: calc(42 * (100vw / 1600));

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

  font-weight: 400;

  text-align: center;

}



.main_lead {

  font-size: 1.6rem;

  text-align: center;

}



.main_lead span {

  display: block;

  line-height: 2.2;

  letter-spacing: .2em;

}



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

  margin-top: 3rem;

}



.logo_collecion {

  width: 28rem;

  margin: 3.6rem auto 0 !important;

}

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



/*navigation---------------------*/

.navigation_area {

  padding: 10rem 0;

}



.sec_inner {

  position: relative;

  width: 120rem;

  margin: 0 auto;

}



.navigation_area .sec_inner {

  padding: 6rem 0;

}



.navigation_area  .sec_img_wrap {

  position: relative;

  width: 49.8rem;

  margin: 8rem auto 6rem;

}



.sec_img_wrap svg {

  position: absolute;

  top: 0;

  right: 0;

}



.sec_img_wrap svg.txt_001 {

  width: 21.2rem;

  margin: 5.5rem 4rem 0 0;

}



.sec_img_wrap svg path {

  fill: var(--color_01);

}



.typewriting .each_txt {

  opacity: 0;

  transition: opacity .1s;

}



.decoration_ribbon {

  position: absolute;

  top: 0;

  width: 100vw;

  height: 6rem;

  overflow: clip;

}



.decoration_ribbon.first {

  left: 0;

  scale: -1 -1;

}



.navigation_area .decoration_ribbon.second {

  top: auto;

  bottom: 0;

}



.decoration_ribbon.second {

  right: 0;

}



.decoration_ribbon > div {

  position: relative;

  width: 100%;

  height: 100%;

  translate: 0 0;

  transform-origin: center right;

  opacity: 0;

  transition: opacity .3s;

}



.decoration_ribbon.second > div {

  transform-origin: center left;

}



.navigation_area .decoration_ribbon > div {

  background: var(--color_ribbon_01);

}



.decoration_ribbon > div.active {

  opacity: 1;

}



.decoration_ribbon::before,

.decoration_ribbon > div::before {

  position: absolute;

  z-index: 1;

  top: 0;

  right: 0;

  border-right: solid 1.8rem;

  border-top: solid transparent 3rem;

  border-bottom: solid transparent 3rem;

  content: "";

}



.navigation_area .decoration_ribbon::before,

.navigation_area .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_00);

}



.navigation_list {

  display: flex;

  justify-content: center;

  gap: 5rem;

  margin-bottom: 7.6rem;

}



.navigation_list li a {

  position: relative;

  width: 16rem;

  padding-bottom: 5rem;

}



.navigation_list.active li figure {

  animation: shake 6s infinite;

}



.navigation_list li:nth-of-type(2) figure {

  animation-delay: 1.5s;

}



.navigation_list li:nth-of-type(3) figure {

  animation-delay: 3s;

}



.navigation_list li:nth-of-type(4) figure {

  animation-delay: 4.5s;

}



@keyframes shake {

  0% {

    rotate: 0deg;

  }



  3% {

    rotate: -6deg;

  }



  6% {

    rotate: 6deg;

  }



  9% {

    rotate: -6deg;

  }



  12% {

    rotate: 0deg;

  }



  100% {

    rotate: 0deg;

  }

}



.navigation_list li a h3 {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  font-family: var(--font_eng);

  font-size: 1.8rem;

  font-weight: 500;

  line-height: 1.25;

  text-align: center;

  white-space: nowrap;

}



/*---------------------navigation*/



/*each collection-------------*/

.each_collection {

  padding: 9.6rem 0 10rem;

}



#HolidaySweetsBox {

  background: var(--color_bg_01);

}



#PetalFloatLipsCheeks {

  background: var(--color_bg_02);

}



#PetalFloatBlush {

  background: var(--color_bg_03);

}



#ColorBlossomGlowBalm {

  background: var(--color_bg_04);

}



.sec_ttl {

  margin-bottom: 6rem;

  font-family: var(--font_eng);

  font-size: 4.8rem;

  font-weight: 500;

  text-align: center;

  white-space: nowrap;

}



.sec_ttl .txt_ttl {

  display: block;

  width: 28.5rem;

  margin: 0 auto;

}



.each_collection .collection_num {

  display: block;

  margin-top: -1.1rem;

  font-size: 2.6rem;

  font-weight: 600;

}



.each_collection .sec_img {

  width: 65rem;

  margin: 0 auto 8.8rem;

}



.appearanceOfImg {

  position: relative;

}



.appearanceOfImg::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

  scale: 0 1;

  transform-origin: center left;

}



#HolidaySweetsBox .appearanceOfImg::before {

  background: var(--color_ribbon_01);

}



#PetalFloatLipsCheeks .appearanceOfImg::before {

  background: var(--color_ribbon_02);

}



#PetalFloatBlush .appearanceOfImg::before {

  background: var(--color_ribbon_03);

}



#ColorBlossomGlowBalm .appearanceOfImg::before {

  background: var(--color_ribbon_04);

}



.allLineup_area .appearanceOfImg::before {

  background: var(--color_ribbon_02);

}



@keyframes scale {

  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;

  }

}



.appearanceOfImg.active::before {

  animation: scale 1.5s forwards;

}



.appearanceOfImg img {

  opacity: 0;

  transition: opacity .5s;

  transition-delay: 1.2s;

}



.appearanceOfImg.active img {

  opacity: 1;

}



.collection_summary {

  margin-bottom: 9.5rem;

  text-align: center;

}



.collection_summary figure {

  position: relative;

  z-index: 1;

  width: 22rem;

  margin: 0 auto 2.2rem;

}



.collection_summary figure img {

  animation: shake2 2.5s infinite;

}



@keyframes shake2 {

  0% {

    rotate: 0deg;

  }



  8% {

    rotate: -6deg;

  }



  16% {

    rotate: 6deg;

  }



  24% {

    rotate: -6deg;

  }



  32% {

    rotate: 0deg;

  }



  100% {

    rotate: 0deg;

  }

}



.collection_summary figure::before {

  position: absolute;

  z-index: -1;

  top: 0;

  right: 0;

  width: 13rem;

  height: 13rem;

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

  content: "";

  animation: rotate 15s linear infinite;

}



@keyframes rotate {

  0% {

    rotate: 0;

  }



  100% {

    rotate: 360deg;

  }

}



#HolidaySweetsBox .collection_summary figure::before {

  margin: -1.5rem -5.5rem 0 0;

}



#PetalFloatLipsCheeks .collection_summary figure::before,

#PetalFloatBlush .collection_summary figure::before {

  margin: -1rem -5.5rem 0 0;

}



#ColorBlossomGlowBalm .collection_summary figure::before {

  margin: 0 -5.5rem 0 0;

}



.collection_summary .collection_name {

  margin-bottom: 1.2rem;

  font-family: var(--font_eng);

  font-size: 2.8rem;

  font-weight: 500;

}



.bottomToTop .each_txt {

  display: inline-block;

  translate: 0 1rem;

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

}



.bottomToTop .each_txt.active {

  translate: 0 0;

  opacity: 1;

}



.for_spanAddition span {

  line-height: 1.25;

}



.collection_summary .collection_name .txt_S {

  display: block;

  margin-top: 2.4rem;

  font-family: var(--font_regular);

  font-size: 1.4rem;

  font-weight: 400;

  color: var(--color_regular);

}



.collection_summary .collection_price {

  margin-bottom: 3rem;

  font-size: 1.4rem;

  color: var(--color_regular);

}



.collection_summary .collection_price .txt_S {

  font-size: 1.2rem;

}



.collection_summary .collection_link {

  width: fit-content;

  margin: 0 auto 3.4rem;

}



.collection_summary .collection_link a {

  display: grid;

  place-items: center;

  width: 12.8rem;

  height: 3.2rem;

  border-radius: 10rem;

  background: var(--color_01);

  font-family: var(--font_eng);

  font-size: 1.6rem;

  font-weight: 500;

  color: #fff;

}



.collection_summary .collection_link a span {

  padding-top: .2rem;

}



.iOS .collection_summary .collection_link a span {

  padding: 0 0 .3rem;

}



.collection_summary .collection_caption {

  font-size: 1.2rem;

  line-height: 2;

  color: var(--color_regular);

}



.collection_detail .each_itm {

  position: relative;

}



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

  margin-top: 12rem;

}



#HolidaySweetsBox .decoration_ribbon > div {

  background: var(--color_ribbon_01);

}



#HolidaySweetsBox .decoration_ribbon::before,

#HolidaySweetsBox .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_01);

}



#PetalFloatLipsCheeks .decoration_ribbon > div {

  background: var(--color_ribbon_02);

}



#PetalFloatLipsCheeks .decoration_ribbon::before,

#PetalFloatLipsCheeks .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_02);

}



#PetalFloatBlush .decoration_ribbon > div {

  background: var(--color_ribbon_03);

}



#PetalFloatBlush .decoration_ribbon::before,

#PetalFloatBlush .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_03);

}



#ColorBlossomGlowBalm .decoration_ribbon > div {

  background: var(--color_ribbon_04);

}



#ColorBlossomGlowBalm .decoration_ribbon::before,

#ColorBlossomGlowBalm .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_04);

}



.collection_detail .each_itm > h4 {

  position: relative;

  display: flex;

  align-items: center;

  height: 6rem;

  margin-bottom: 8rem;

  padding-top: .5rem;

  font-family: var(--font_eng);

  font-size: 2.4rem;

  font-weight: 500;

  white-space: nowrap;

}



.iOS .collection_detail .each_itm > h4 {

  padding: 0 0 .6rem;

}



.collection_detail .each_itm:nth-of-type(odd) > h4 {

  margin-left: 8rem;

}



.collection_detail .each_itm:nth-of-type(even) > h4 {

  justify-content: flex-end;

  margin-right: 8rem;

}



.collectionItm_outside {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 14rem;

}



#HolidaySweetsBox .collectionItm_outside {

  align-items: flex-start;

}



#PetalFloatBlush .collectionItm_outside {

  display: block;

}



.collectionItm_outside .makeup_img {

  width: 43.2rem;

  height: fit-content;

}



.collectionItm_outside .makeup_img_wrap {

  display: flex;

  justify-content: center;

  gap: 14rem;

}



.collectionItm_outside .makeup_img_wrap .makeup_img:nth-of-type(2) {

  width: 38.4rem;

  margin-top: 14rem;

}



.each_itm:nth-of-type(even) .collectionItm_outside .makeup_img {

  order: 2;

}



.collectionItm_wrap {

  width: fit-content;

}



#HolidaySweetsBox .collectionItm_wrap {

  margin-top: 14rem;

}



#PetalFloatBlush .collectionItm_wrap {

  margin: 8rem auto 0;

}



.collectionItm_wrap .itm_img {

  position: relative;

  z-index: 1;

  margin: 0 auto;

}



#HolidaySweetsBox .collectionItm_wrap .itm_img {

  width: 27.4rem;

}



#PetalFloatLipsCheeks .collectionItm_wrap .itm_img {

  width: 19rem;

}



#PetalFloatBlush .collectionItm_wrap .itm_img {

  width: 18.2rem;

}



#ColorBlossomGlowBalm .collectionItm_wrap .itm_img {

  width: 16rem;

}



.collectionItm_wrap .itm_list_wrap {

  position: relative;

  width: 40rem;

  margin-top: -3rem;

}



.listFrame {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: visible;

  pointer-events: none;

}



.listFrame path {

  stroke-dasharray: 4200;

  stroke-dashoffset: 4200;

  stroke-width: .1rem;

  fill: none;

  stroke: var(--color_01);

}



@keyframes line-stroke {

  0% {

    stroke-dashoffset: 4200;

  }

  100% {

    stroke-dashoffset: 0;

  }

}



.collectionItm_wrap.lineStroke.active .listFrame path {

  animation: line-stroke 4s .2s linear forwards;

}



.collectionItm_wrap .itm_list {

  padding: 5.8rem 0 4.2rem;

  text-align: center;

}



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

  margin-top: 3.3rem;

}



.collectionItm_wrap .itm_list .itm_name {

  margin-bottom: 1.8rem;

  font-family: var(--font_eng);

  font-size: 1.6rem;

  font-weight: 600;

}



.collectionItm_wrap .itm_list .itm_name .txt_S {

  display: block;

  margin-bottom: .6rem;

  font-family: var(--font_regular);

  font-size: 1.2rem;

}



.collectionItm_wrap .itm_list .itm_caption {

  font-size: 1.2rem;

  line-height: 2;

  color: var(--color_regular);

}

/*-------------each collection*/



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

.allLineup_area {

  padding: 8rem 0 2rem;

  background: var(--color_bg_02);

}



.allLineup_area .sec_inner {

  padding-top: 12.8rem;

}



.allLineup_area .decoration_ribbon::before,

.allLineup_area .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_02)

}



.allLineup_area .decoration_ribbon > div {

  background: var(--color_ribbon_02);

}



.allLineup_area .sec_ttl {

  margin-bottom: 4rem;

}



.allLineup_area .for_spanAddition span {

  line-height: 1.2;

}



.allLineup_area .sec_ttl .txt_ttl {

  width: 23.4rem;

  margin-bottom: 2.2rem;

}



.each_recipe {

  position: relative;

  padding-bottom: 8rem;

}



.recipe_second {

  padding-top: 14rem;

}



.makeup_img_list {

  display: flex;

  justify-content: center;

  gap: 3rem;

  width: 100vw;

  margin: 0 calc(50% - 50vw) 8rem;

}



.makeup_img_list figure {

  width: 39.6rem;

}



.allLineup_area .itm_list_wrap {

  position: relative;

  width: 100rem;

  margin: 0 auto;

  padding: 6rem 0;

}



.allLineup_area .itm_list_wrap.lineStroke.active .listFrame path {

  animation: line-stroke 3s linear forwards;

}



.allLineup_area .itm_list {

  display: flex;

  justify-content: center;

  gap: 2rem;

}



.allLineup_area .itm_list li {

  width: 14rem;

  text-align: center;

}



.itm_checkBox {

  position: relative;

  width: 1.4rem;

  height: 1.4rem;

  margin: 1.7rem auto 0;

}



.itm_checkBox::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: solid var(--color_01);

  border-width: .1rem;

  box-sizing: border-box;

  content: "";

}



.itm_checkBox svg {

  position: relative;

  width: 2rem;

  height: 2rem;

  margin: -.8rem 0 0 .2rem;

}



.itm_checkBox svg image {

  width: 100%;

}



.itm_checkBox path {

  stroke: #fff;

  fill: none;

  stroke-linecap:round;

  stroke-linejoin:round;

  stroke-miterlimit: 10;

  stroke-dasharray: 1500;

  stroke-dashoffset: 1500;

  stroke-width: 11;

}



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

  .itm_checkBox path{

    stroke-width: 18;

  }

}



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

  .itm_checkBox path{

    stroke-width: 22;

  }

}



li.checked .itm_checkBox path {

  animation: check 15s forwards;

}

 

@keyframes check {

	0% {

    stroke-dashoffset: 1500;

  }



	100% {

    stroke-dashoffset: 0;

  }

}





.allLineup_area .itm_list li .itm_name {

  margin-top: .6rem;

  font-family: var(--font_eng);

  font-size: 1.3rem;

  font-weight: 600;

  line-height: 1.5;

}



.allLineup_area .btn_sumup {

  width: fit-content;

  margin: 4.9rem auto 0;

}



.allLineup_area .btn_sumup a {

  display: grid;

  place-items: center;

  width: 23rem;

  height: 4rem;

  border-radius: 10rem;

  background: var(--color_01);

  font-family: var(--font_eng);

  font-size: 2rem;

  font-weight: 500;

  color: #fff;

}



.allLineup_area .btn_sumup a span {

  padding-top: .2rem;

}



.iOS .allLineup_area .btn_sumup a span {

  padding: 0 0 .3rem;

}

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



/*schedule--------------------*/

.schedule_area {

  padding: 8rem 0 9.2rem;

}



.schedule_area .sec_inner {

  padding-top: 12.2rem;

}



.schedule_area .decoration_ribbon::before,

.schedule_area .decoration_ribbon > div::before {

  border-right-color: var(--color_bg_03)

}



.schedule_area .decoration_ribbon > div {

  background: var(--color_ribbon_03);

}



.schedule_area .sec_ttl {

  margin-bottom: 4rem;

}



.each_schedule {

  text-align: center;

}



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

  margin-top: 4.2rem;

}



.each_schedule h5 {

  margin-bottom: 2.3rem;

  font-size: 1.6rem;

  font-weight: 700;

  color: var(--color_regular);

}



.each_schedule h5 .txt_L {

  font-size: 1.8rem;

}



.each_schedule h6 {

  font-family: var(--font_eng);

  font-size: 1.8rem;

  font-weight: 500;

}



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

  margin-top: 1.8rem;

}



.each_schedule p {

  margin-top: .6rem;

  font-size: 1.5rem;

  line-height: 2;

  color: var(--color_regular);

}



.each_schedule p .txt_S {

  font-size: 1.3rem;

}

/*--------------------schedule*/



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

.ending_area {

  padding-bottom: 50rem;

  background: var(--color_bg_03);

}



.ending_area::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 40rem;

  background-image: url(../img/img_enging.jpg);

  background-repeat: repeat-x;

  background-size: auto 100%;

  content: "";

  animation: loop 40s linear infinite;

}



@keyframes loop {

  0% {

    background-position: 0 0;

  }



  100% {

    background-position: -150rem 0;

  }

}



.ending_area .btn_sumup {

  width: fit-content;

  margin: 0 auto;

}



.ending_area .btn_sumup a {

  display: grid;

  place-items: center;

  width: 46rem;

  height: 7.2rem;

  border-radius: 10rem;

  background: var(--color_01);

  font-family: var(--font_eng);

  font-size: 2.5rem;

  font-weight: 500;

  text-align: center;

  color: #fff;

}



.ending_area .btn_sumup a > span {

  padding-top: .5rem;

}



.iOS .ending_area .btn_sumup a > span {

  padding: 0;

}



.ending_area .btn_sumup a .txt_S {

  display: block;

  margin-bottom: .5rem;

  font-size: 1.6rem;

}

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



/*fixed navigation------------*/

.fixed_navigation {

  position: fixed;

  z-index: 3;

  bottom: 0;

  width: 100%;

  background: #fff;

  opacity: 0;

  transition: opacity 1s;

  pointer-events: none;

}



.fixed_navigation.active {

  opacity: 1;

  pointer-events: auto;

}



.fixed_navigation ul {

  display: flex;

  justify-content: center;

}



.fixed_navigation ul li {

  position: relative;

}



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

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: .1rem;

  height: 4rem;

  background: var(--color_01);

  content: "";

}



.fixed_navigation ul li a {

  position: relative;

  display: flex;

  align-items: center;

  gap: 2rem;

  padding: 0 7.1rem 0 4rem;

}



.fixed_navigation ul li a::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: .9rem;

  height: .9rem;

  border-right: solid var(--color_01);

  border-bottom: solid var(--color_01);

  border-width: .1rem;

  margin: -.2rem 3.2rem 0 0;

  rotate: 45deg;

  box-sizing: border-box;

  content: "";

}



.fixed_navigation ul li:nth-of-type(1) figure {

  width: 7.6rem;

}



.fixed_navigation ul li:nth-of-type(2) figure {

  width: 6rem;

}



.fixed_navigation ul li:nth-of-type(3) figure {

  width: 6rem;

}



.fixed_navigation ul li:nth-of-type(4) figure {

  width: 7.4rem;

}



.fixed_navigation ul li h4 {

  font-family: var(--font_eng);

  font-size: 1.4rem;

  font-weight: 500;

  line-height: 1.25;

  letter-spacing: .1em;

  text-align: center;

  white-space: nowrap;

}



/*------------fixed navigation*/



/*Smart phone---------------------------------------------*/

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



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

.LP_page .only_pc {

  display: none;

}



#share {

  z-index: 5 !important;

  transition: translate .6s;

}



#share.move {

  translate: 0 calc(-80 * (100vw / 750));

}



.share-txt {

  display: none !important;

}



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



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

.modal_close {

  width: calc(60 * (100vw / 750));

  height: calc(60 * (100vw / 750));

  margin: calc(30 * (100vw / 750)) calc(30 * (100vw / 750)) 0 0;

}



.modal_close::before {

  width: calc(85 * (100vw / 750));

  height: calc(2 * (100vw / 750));

}



.modal_close::after {

  width: calc(2 * (100vw / 750));

  height: calc(85 * (100vw / 750));

}



.movie_wrap {

  width: calc(640 * (100vw / 750));

  height: auto;

}



.btn_soundSwitch {

  width: calc(70 * (100vw / 750));

  margin: 0 0 calc(20 * (100vw / 750)) calc(20 * (100vw / 750));

}



.main_visual_wrap {

  margin-bottom: calc(108 * (100vw / 750));

}



.main_visual_wrap .firstAccess {

  transform: translateY(calc(20 * (100vw / 750)));

}



.logo_to {

  width: calc(240 * (100vw / 750));

  margin-top: calc(60 * (100vw / 750));

}



.main_ttl {

  left: 50%;

  translate: -50% 0;

  margin: 0 0 calc(164 * (100vw / 750)) 0;

}



.ttl_001 {

  width: calc(342 * (100vw / 750));

  margin: 0 auto calc(34 * (100vw / 750));

}



.ttl_002 {

  width: calc(540 * (100vw / 750));

}



.txt_release {

  display: grid;

  place-items: center;

  width: auto;

  height: calc(104 * (100vw / 750));

  margin: 0;

  background: var(--color_bg_01);

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

}



.main_lead {

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

}



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

  margin-top: calc(50 * (100vw / 750));

}



.logo_collecion {

  width: calc(400 * (100vw / 750));

  margin: calc(60 * (100vw / 750)) auto 0 !important;

}

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



/*navigation---------------------*/

.navigation_area {

  padding: calc(120 * (100vw / 750)) 0 calc(100 * (100vw / 750));

}



.sec_inner {

  width: auto;

}



.navigation_area .sec_inner {

  padding: calc(80 * (100vw / 750)) 0;

}



.navigation_area  .sec_img_wrap {

  width: auto;

  margin: calc(100 * (100vw / 750)) 0 calc(90 * (100vw / 750));

}



.sec_img_wrap svg.txt_001 {

  width: calc(324 * (100vw / 750));

  margin: calc(80 * (100vw / 750)) calc(60 * (100vw / 750)) 0 0;

}



.decoration_ribbon {

  width: calc(100% - calc(150 * (100vw / 750)));

  height: calc(80 * (100vw / 750));

}



.decoration_ribbon.first {

  left: auto;

  right: 0;

}



.decoration_ribbon.second {

  right: auto;

  left: 0;

}



.decoration_ribbon::before,

.decoration_ribbon > div::before {

  border-right: solid calc(20 * (100vw / 750));

  border-top: solid transparent calc(40 * (100vw / 750));

  border-bottom: solid transparent calc(40 * (100vw / 750));

}



.navigation_list {

  flex-wrap: wrap;

  gap: calc(54 * (100vw / 750)) calc(60 * (100vw / 750));

  width: auto;

  margin-bottom: calc(95 * (100vw / 750));

}



.navigation_list li a {

  width: calc(260 * (100vw / 750));

  padding-bottom: calc(70 * (100vw / 750));

}



.navigation_list li a h3 {

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

}



/*---------------------navigation*/



/*each collection-------------*/

.each_collection {

  padding: calc(118 * (100vw / 750)) 0 calc(120 * (100vw / 750));

}



.sec_ttl {

  margin-bottom: calc(80 * (100vw / 750));

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

  line-height: 1.2;

}



.sec_ttl .txt_ttl {

  width: calc(414 * (100vw / 750));

}



.each_collection .collection_num {

  margin-top: calc(-18 * (100vw / 750));

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

}



.each_collection .sec_img {

  width: auto;

  margin: 0 auto calc(110 * (100vw / 750));

}



.collection_summary {

  margin-bottom: calc(110 * (100vw / 750));

}



.collection_summary figure {

  width: calc(360 * (100vw / 750));

  margin: 0 auto calc(42 * (100vw / 750));

}



.collection_summary figure::before {

  width: calc(196 * (100vw / 750));

  height: calc(196 * (100vw / 750));

}



#HolidaySweetsBox .collection_summary figure::before {

  margin:calc(-18 * (100vw / 750)) calc(-78 * (100vw / 750)) 0 0;

}



#PetalFloatLipsCheeks .collection_summary figure::before,

#PetalFloatBlush .collection_summary figure::before {

  margin:calc(-5 * (100vw / 750)) calc(-78 * (100vw / 750)) 0 0;

}



#ColorBlossomGlowBalm .collection_summary figure::before {

  margin:calc(10 * (100vw / 750)) calc(-78 * (100vw / 750)) 0 0;

}



.collection_summary .collection_name {

  margin-bottom: calc(33 * (100vw / 750));

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

}



.bottomToTop .each_txt {

  translate: 0 calc(20 * (100vw / 750));

}



.collection_summary .collection_name .txt_S {

  margin-top: calc(30 * (100vw / 750));

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

}



.collection_summary .collection_price {

  margin-bottom: calc(40 * (100vw / 750));

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

}



.collection_summary .collection_price .txt_S {

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

}



.collection_summary .collection_link {

  margin: 0 auto calc(90 * (100vw / 750));

}



.collection_summary .collection_link a {

  width: calc(256 * (100vw / 750));

  height: calc(64 * (100vw / 750));

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

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

}



.collection_summary .collection_link a span {

  padding-top: calc(10 * (100vw / 750));

}



.iOS .collection_summary .collection_link a span {

  padding: 0 0 calc(6 * (100vw / 750));

}



.collection_summary .collection_caption {

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

}



#HolidaySweetsBox .decoration_ribbon {

  width: calc(100% - calc(40 * (100vw / 750)));

}



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

  margin-top: calc(120 * (100vw / 750));

}



.collection_detail .each_itm > h4 {

  justify-content: center !important;

  width: calc(100% - calc(150 * (100vw / 750)));

  height: calc(80 * (100vw / 750));

  margin-bottom: calc(80 * (100vw / 750));

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

}



#HolidaySweetsBox .collection_detail .each_itm > h4 {

  width: calc(100% - calc(40 * (100vw / 750)));

}



.collection_detail .each_itm > h4 {

  padding-top: calc(10 * (100vw / 750));

}



.iOS .collection_detail .each_itm > h4 {

  padding: 0 0 calc(10 * (100vw / 750));

}



.collection_detail .each_itm:nth-of-type(odd) > h4 {

  margin-left: auto;

  padding-left: calc(20 * (100vw / 750));

}



.collection_detail .each_itm:nth-of-type(even) > h4 {

  margin-right: 0;

  padding-right: calc(20 * (100vw / 750));

}



.collectionItm_outside {

  display: block;

}



.collectionItm_outside .makeup_img {

  width: calc(624 * (100vw / 750));

}





.collection_detail .each_itm:nth-of-type(even) .collectionItm_outside .makeup_img {

  margin: 0 0 0 auto;

}



.collectionItm_outside .makeup_img_wrap {

  display: block;

}



.collectionItm_outside .makeup_img_wrap .makeup_img:nth-of-type(2) {

  width: calc(558 * (100vw / 750));

  margin: calc(80 * (100vw / 750)) 0 0 auto;

}





#HolidaySweetsBox .collectionItm_wrap {

  margin: calc(80 * (100vw / 750)) auto 0;

}



#PetalFloatBlush .collectionItm_wrap {

  margin: calc(80 * (100vw / 750)) auto 0;

}



.collectionItm_wrap {

  margin: calc(80 * (100vw / 750)) auto 0;

}



#HolidaySweetsBox .collectionItm_wrap .itm_img {

  width: calc(430 * (100vw / 750));

}



#PetalFloatLipsCheeks .collectionItm_wrap .itm_img {

  width: calc(298 * (100vw / 750));

}



#PetalFloatBlush .collectionItm_wrap .itm_img {

  width: calc(300 * (100vw / 750));

}



#ColorBlossomGlowBalm .collectionItm_wrap .itm_img {

  width: calc(240 * (100vw / 750));

}



.collectionItm_wrap .itm_list_wrap {

  width: calc(660 * (100vw / 750));

  margin-top: calc(-50 * (100vw / 750));

}



.listFrame path {

  stroke-width: calc(4 * (100vw / 750));

}



.collectionItm_wrap.lineStroke.active .listFrame path {

  animation: line-stroke 3s linear forwards;

}



.collectionItm_wrap .itm_list {

  padding: calc(88 * (100vw / 750)) 0 calc(66 * (100vw / 750));

}



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

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

}



.collectionItm_wrap .itm_list .itm_name {

  margin-bottom: calc(38 * (100vw / 750));

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

}



.collectionItm_wrap .itm_list .itm_name .txt_S {

  margin-bottom: calc(10 * (100vw / 750));

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

}



.collectionItm_wrap .itm_list .itm_caption {

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

}

/*-------------each collection*/



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

.allLineup_area {

  padding: calc(100 * (100vw / 750)) 0 calc(20 * (100vw / 750));

}



.allLineup_area .sec_inner {

  padding-top: calc(145 * (100vw / 750));

}



.allLineup_area .sec_ttl {

  margin-bottom: calc(68 * (100vw / 750));

}



.allLineup_area .sec_ttl .txt_ttl {

  width: calc(334 * (100vw / 750));

  margin-bottom: calc(33 * (100vw / 750));

}



.each_recipe {

  padding-bottom: calc(100 * (100vw / 750));

}



.recipe_second {

  padding-top: calc(180 * (100vw / 750));

}



.makeup_img_list {

  display: block;

  width: auto;

  height: calc(720 * (100vw / 750));

  margin: 0 0 calc(80 * (100vw / 750));

  overflow: hidden;

}



.makeup_img_list.active {

  height: auto;

  overflow: visible;

}



.makeup_img_list figure {

  width: calc(540 * (100vw / 750));

  margin: 0 calc(20 * (100vw / 750));

}



.makeup_img_list .appearanceOfImg.relativeRemove {

  position: static;

}



.allLineup_area .itm_list_wrap {

  width: calc(660 * (100vw / 750));

  padding: calc(80 * (100vw / 750)) calc(45 * (100vw / 750));

}



.allLineup_area .itm_list_wrap.lineStroke.active .listFrame path {

  animation: line-stroke 3s linear forwards;

}



.allLineup_area .itm_list {

  flex-wrap: wrap;

  gap: calc(60 * (100vw / 750)) calc(20 * (100vw / 750));

}



.allLineup_area .itm_list li {

  width: calc(224 * (100vw / 750));

}



.itm_checkBox {

  width: calc(24 * (100vw / 750));

  height: calc(24 * (100vw / 750));

  margin: calc(33 * (100vw / 750)) auto 0;

}



.itm_checkBox::before {

  border-width: calc(2 * (100vw / 750));

}



.itm_checkBox svg {

  position: relative;

  width: calc(34 * (100vw / 750));

  height: calc(34 * (100vw / 750));

  margin: calc(-16 * (100vw / 750)) 0 0 calc(4 * (100vw / 750));

}



.itm_checkBox path {

  stroke-dasharray: 2000;

  stroke-dashoffset: 2000;

  stroke-width: 14;

}

 

@keyframes check {

	0% {

    stroke-dashoffset: 2000;

  }



	100% {

    stroke-dashoffset: 0;

  }

}





.allLineup_area .itm_list li .itm_name {

  margin-top: calc(10 * (100vw / 750));

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

}



.allLineup_area .btn_sumup {

  margin: calc(60 * (100vw / 750)) auto 0;

}



.allLineup_area .btn_sumup a {

  width: calc(368 * (100vw / 750));

  height: calc(64 * (100vw / 750));

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

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

}



.allLineup_area .btn_sumup a span {

  padding-top: calc(6 * (100vw / 750));

}



.iOS .allLineup_area .btn_sumup a span {

  padding: 0 0 calc(5 * (100vw / 750));

}

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



/*schedule--------------------*/

.schedule_area {

  padding: calc(100 * (100vw / 750)) 0 calc(110 * (100vw / 750));

}



.schedule_area .sec_inner {

  padding-top: calc(136 * (100vw / 750));

}



.schedule_area .sec_ttl {

  margin-bottom: calc(66 * (100vw / 750));

}



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

  margin-top: calc(64 * (100vw / 750));

}



.each_schedule h5 {

  margin-bottom: calc(40 * (100vw / 750));

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

}



.each_schedule h5 .txt_L {

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

}



.each_schedule h5 .txt_M {

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

}



.each_schedule h6 {

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

}



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

  margin-top: calc(36 * (100vw / 750));

}



.each_schedule p {

  margin-top: calc(10 * (100vw / 750));

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

}



.iOS .ending_area .btn_sumup a > span {

  padding: 0 0 calc(2 * (100vw / 750));

}



.each_schedule p .txt_S {

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

}

/*--------------------schedule*/



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

.ending_area {

  padding-bottom: calc(620 * (100vw / 750));

}



.ending_area::before {

  height: calc(500 * (100vw / 750));

}



@keyframes loop {

  0% {

    background-position: 0 0;

  }



  100% {

    background-position: calc(-1875 * (100vw / 750)) 0;

  }

}



.ending_area .btn_sumup a {

  width: calc(660 * (100vw / 750));

  height: calc(144 * (100vw / 750));

  border-radius: calc(200 * (100vw / 750));

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

}



.ending_area .btn_sumup a > span {

  padding-top: calc(10 * (100vw / 750));

}



.ending_area .btn_sumup a .txt_S {

  margin-bottom: calc(10 * (100vw / 750));

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

}

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



/*fixed navigation------------*/

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

  width: calc(2 * (100vw / 750));

  height: calc(60 * (100vw / 750));

}



.fixed_navigation ul li a {

  display: block;

  height: calc(107 * (100vw / 750));

  padding: calc(14 * (100vw / 750)) calc(22 * (100vw / 750)) 0;

}



.fixed_navigation ul li a::before {

  top: auto;

  bottom: 0;

  right: auto;

  left: 50%;

  translate: -50% 0;

  width: calc(15 * (100vw / 750));

  height: calc(15 * (100vw / 750));

  border-width: calc(2 * (100vw / 750));

  margin: 0 0 calc(22 * (100vw / 750));

}



.fixed_navigation ul li h4 {

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

}



/*------------fixed navigation*/





}



/*---------------------------------------------Smart phone*/



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

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

  .only_sp {

    display: none;

  }



  #header_bottom .inner {

    width: 100%;

  }

}

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



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

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

  html {

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

  }

}

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