@charset "UTF-8";

/*//////////////////////////////////////////////////

Title : Cosme Kitchen 0619 Summerkit CSS

//////////////////////////////////////////////////*/


/* ========================================================
                      * Layout style *
========================================================= */

html {
  font-size: 62.5%;
}

main {
  max-width: 100%;
}

#Header,
#Foot {
  display: none;
}

#Contents {
  margin-bottom: 0;
}

.lp_contents a {
  text-decoration: none;
}

.lp_contents p,
.lp_contents ul,
.lp_contents ol,
.lp_contents dl {
  margin: 0;
}

.topic-path {
  margin-right: 0;
  margin-left: 0;
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  margin: 0 auto;
  padding: 0;
  color: #3593D5;
  font-size: 1.4rem;
  font-family: 'Poppins', "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  background-color: #D6EFFF;
}

#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents a {
  transition: all 0.1s ease-in-out;

}

.lp_contents a:hover {
  opacity: 0.6;
}

.lp_contents img {
  max-width: 100%;
  /* width: auto; */
}

.lp_contents sup {
  font-size: 1rem;
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after,
.lp_contents a img {
  transition: opacity .3s ease-in-out,
  color .3s ease-in-out,
  background-color .3s ease-in-out,
  background-image .3s ease-in-out,
  border-color .3s ease-in-out,
  text-shadow .3s ease-in-out,
  text-weight .3s ease-in-out;
}

.lp_contents h1 {
  padding: 0;
}

/* ===================
  　Section Common
=================== */

.inner_sec {
  margin: 0 auto;
  width: 110rem;
  max-width: 100%;
}

/* ===================
      Title
=================== */
.nav_head {
  position: relative;
  margin-bottom: 3rem;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  color: #036EB8;
}

.nav_head:before {
  position: absolute;
  top: -3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2.45rem;
  background: url(../img/icn_star.svg) center center / cover no-repeat;
  content: "";
}

.sec_head {
  margin-bottom: 6rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  color: #036EB8;
}

.sec_head h4{
  font-size: 10rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}

.sec_head p {
  margin-top: 1.4rem !important;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  letter-spacing: 0.05em;
}

/* ===================
      Button Setting
=================== */
.lp_contents .btn {
  display: block;
  background: transparent;
  border: none;
  padding: 0;
  width: fit-content;
  max-width: 100%;
  opacity: 1;
}

.btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 12rem;
  padding: 1.2rem;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  border-radius: 10rem;
  background-color: #3593D5;
  text-transform: uppercase;
  color: #fff;
  transition: all 0.1s ease-in-out;
}

.lp_contents .btn a:hover {
  opacity: 1;
  background-color: #fff;
  color: #3593D5;
}

/* ===================
  　　　  MV
=================== */

.mv_sec {
  position: relative;
  padding: 6.07rem 0 9rem;
  z-index: 2;
}

.mv_pic img {
  width: 101.1rem;
  margin-left: 3rem;
}

.mv_sec:before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40rem;
  height: 40rem;
  margin-left: -58rem;
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite;
  clip-path: circle(0rem at center);
  z-index: -1;
  content: "";
}

.mv_sec:after {
  position: absolute;
  top: 14rem;
  right: 50%;
  margin-right: -59rem;
  width: 30rem;
  height: 31.5rem;
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite;
  clip-path: circle(0rem at center);
  z-index: -1;
  content: "";
}

/* sun animation  */
@keyframes move_sun1 {
  0% {
    clip-path: circle(0rem at center);
  }

  100% {
    clip-path: circle(30rem at center);
  }
}

@keyframes move_sun2 {
  0% {
    transform:rotate(0);
  }

  100% {
    transform:rotate(-360deg);
  }
}

.mv_pic {
  width: 100%;
  opacity: 0;
  transform: translateY(50px);
}
.mv_pic.popup {
  animation: opa2 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
}

.mv_lead {
  opacity: 0;
  position: absolute;
  right: 0;
  left: 0;
  bottom: 11rem;
  transform: translateY(50px);
  font-size: 1.8rem;
  line-height: 2;
  color: #3593D5;
  letter-spacing: 0.05em;
  text-align: center;
}
.mv_lead.popup {
  animation: opa2 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0.3s 1 forwards;
}

/* lead fade in animation  */
@keyframes opa2 {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

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

  100% {
    opacity: 1;
  }
}

/* ===================
      PG NAV
=================== */

.pg_nav_sec{
  padding: 13.5rem 0 4rem;
  background: #C7E8FF url(../img/icn_wave.svg) center center / cover no-repeat;

}

.pg_nav {
  margin-bottom: 8rem;
  opacity: 0;
}

.pg_nav.popup {
  animation: opa2 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
}

.brand_list {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.brand_list li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand_list a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17.5rem;
  height: 8rem;
  border-radius: .5rem;
  -moz-border-radius: .5rem;
  -webkit-border-radius: .5rem;
  background-color: #89BEE2;
}

.brand_list img {
  max-width: 14rem;
}

.brand_list li:nth-child(17) img {
  max-height: 5rem;
}

.nav_list {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav_list a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36.5rem;
  height: 8rem;
  padding: 2.8rem 2rem 3rem;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background-color: #89BEE2;
}

.nav_list li:first-of-type a {
  border-radius:  .5rem 0 0 .5rem;
}
.nav_list li:last-of-type a {
  border-radius:  0 .5rem .5rem 0;
}

.nav_list a:after {
  position: absolute;
  top: 1rem;
  right: 0;
  display:inline-block;
  width: 1px;
  height: 6rem;
  background-color: #78AED3;
  content:"";
}

.nav_list li:last-of-type a:after {
  width: 0;
  height: 0;
}

.nav_list a:hover{
  opacity: 1;
  color: #FFFBD6;
}

.nav_list a {
  flex-direction: column;
  padding: 1.9rem 2rem 1.7rem;
}

.nav_list span {
  display: block;
  margin-top: 1rem;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* fixed nav */
.nav_fixed {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: 110rem;
  bottom: 2rem;
  z-index: 2;
  opacity: 0;
  transition: opacity .6s ease-in-out;
}

.nav_fixed ul {
  background-color: #78AED3;
  border-radius: .5rem;
}


.nav_fixed .nav_list a {
  width: 22rem;
}
.nav_fixed.fixed {
  opacity: 1;
}

.nav_fixed.absolute {
  opacity: 0;
}
/* ===================
  　　ITEM LAYOUT
=================== */

.lp_contents .item_wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 5rem;
  column-gap: 10rem;
  margin-bottom: 4.5rem;

}
.lp_contents .item_box {
  position: relative;
  text-align: left;
}

.lp_contents .item_box:nth-child(even):before {
  position: absolute;
  left: -5rem;
  top: 0;
  width: 4px;
  height: 90%;
  background: url(../img/icn_dotted.svg) center center / cover no-repeat;
  content: "";
}

.lp_contents .item_box:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 500px;
  height: 4px;
  background: url(../img/icn_dotted_hor.svg) center center / cover no-repeat;
  content: "";
}

.lp_contents .item_catch {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 2.5rem;
  width: 50rem;
  height: 8.5rem;
  padding: 1.5rem 0 2rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.03em;
  background-color: rgb(255,255,255,0.2);
  border: #89BEE2 1px solid;
  border-radius: 1rem;
  text-align: center;
  z-index: -1;
}

.lp_contents .item_catch:before {
  content: "";
  position: absolute;
  bottom: -1.55rem;
  left: 50%;
  margin-left: -1.5rem;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 16px solid #D6EFFF;
  z-index: 2;
}

.lp_contents .item_catch:after {
  content: "";
  position: absolute;
  bottom: -1.7rem;
  left: 50%;
  margin-left: -1.6rem;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 16px solid #89BEE2;
  z-index: 1;
}


.lp_contents .item_pic {
  opacity: 0;
  transform: scale(0.6);
  position: relative;
  width: 50rem;
  margin-bottom: 2.5rem;
  border-radius: 5rem 0 5rem;
  overflow: hidden;
}

.lp_contents .item_pic a {
  display: flex;
}

.lp_contents .item_pic.popup {
  animation: move_thumb1 1s cubic-bezier(0.72, 0.16, 0.2, 0.82) 0s 1 forwards;
}

.lp_contents .item_img{
  width: 50rem;
  transform: scale(1.4);
  border-radius: 5rem 0 5rem;
}

.lp_contents .item_img.popup{
  animation: move_thumb2 1s cubic-bezier(0.72, 0.16, 0.2, 0.82) 0s 1 forwards;
}

/* pop up animation  */
@keyframes fadein {
  0% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-60px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes move_thumb1 {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes move_thumb2 {
  0% {
    transform: scale(1.4);
  }

  100% {
    transform: scale(1);
  }
}

.lp_contents .item_info_group {
  width: 50rem;
}

.lp_contents .item_name {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.68;
  letter-spacing: 0.05em;
}

.lp_contents .item_name span {
  padding-right: 1rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
}

.lp_contents .item_detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 23.4rem; */
  margin-bottom: 1.5rem;

}
.lp_contents .item_price {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: 0.05em;
}

.lp_contents .item_price span {
  padding-left: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.93;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp_contents .item_cont {
  margin-bottom: 5rem;
  font-size: 1.4rem;
  font-weight: 300;
  line-height: 1.714;
  letter-spacing: 0.05em;
}

.lp_contents .item_info_group sup {
  display: inline-block;
  margin-bottom: 2.9rem;

}

/* item wrap small */
.lp_contents .item_wrap_sml {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10rem;
  row-gap: 5rem;

}

.lp_contents .item_box_sml {
  position: relative;
}

.lp_contents .item_box_inner.popup {
  animation: fadein 1s cubic-bezier(0.72, 0.16, 0.5, 0.91) 0s 1 forwards;
}


.lp_contents .item_box_sml:before {
  position: absolute;
  right: -5rem;
  top: 0;
  width: 4px;
  height: 40.3rem;
  background: url(../img/icn_dotted.svg) center center / cover no-repeat;
  content: "";
}


.lp_contents .item_box_sml:nth-child(3n):before {
  background: none;
}

.lp_contents .item_box_sml:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 305px;
  height: 4px;
  background: url(../img/icn_dotted_hor.svg) center center / cover no-repeat;
  content: "";
}

.lp_contents .item_box_sml:nth-child(7):after,
.lp_contents .item_box_sml:nth-child(8):after,
.lp_contents .item_box_sml:nth-child(9):after  {
  background: none;
}


.lp_contents .item_pic_sml {
  opacity: 0;
  transform: scale(0.6);
  margin-bottom: 2.5rem;
  overflow: hidden;
  background: #fff;
  border-radius: 5rem 0 5rem;
}

.lp_contents .item_pic_sml a {
  display: flex;
}

.lp_contents .item_pic_sml.popup {
  animation: move_thumb1 1s cubic-bezier(0.72, 0.16, 0.2, 0.82) 0s 1 forwards;
}

.lp_contents .item_pic_sml .item_sml_img {
  width: 30rem;
  transform: scale(1.4);
}

.lp_contents .item_pic_sml .item_sml_img.popup {
  animation: move_thumb2 1s cubic-bezier(0.72, 0.16, 0.2, 0.82) 0s 1 forwards;
}

.lp_contents .item_pic_web {
  position: relative;
}

.lp_contents .item_pic_web .web_icn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 6rem;
  height: 2.3rem;
  border-radius: 0.2rem;
}

.lp_contents .item_pic_web .web_icn img {
  width: 6rem;
  height: 2.3rem;
}

.lp_contents .item_0711_start {
  position: absolute;
  top: 2.1rem;
  left: 3rem;
  width: 13.5rem;
  height: 2.3rem;
  border-radius: 0.2rem;
}

.lp_contents .item_0711_start img {
  width: 13.5rem;
  height: 2.3rem;
}

.lp_contents .item_name_sml span{
  padding-right: 1rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.05em;
}


.lp_contents .item_name_sml {
  margin-bottom: 1rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.6875;
  letter-spacing: 0.05em;
}

.lp_contents .item_detail_sml {
  display: flex;
  align-items: center;
  gap: 2.9rem;
  padding-bottom: 5rem;
}


.lp_contents .item_price_sml span{
  padding-left: 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.93;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.lp_contents .item_price_sml {
  font-size: 2.4rem;
  font-weight: 500;
  line-height: 1.125;
  letter-spacing: 0.05em;
}


/* ===================
  　　 MODAL
=================== */
#modal1,
#modal2,
#modal3,
#modal4 {
  display: none;
}

/* modal click btn */
.lp_contents .item_modal {
  position: absolute;
  top: 0;
  right: 0;
  width: 10rem;
  height: 5rem;
  animation: flashing 3s infinite;
}

/* modal flashing animation  */
@keyframes flashing {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	
	100% {
		opacity: 1;
  }
}

.lp_contents .item_modal a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;

}

.lp_contents .item_modal img{
  width: 6.2rem;
  height: 3rem;
  margin: 0 0 -1rem 1rem;
  border-radius: 0;
}

/* modal inner setting */

.modal_pic {
  margin-bottom: 3rem;
  text-align: center;
}

.modal_pic img {
  width: 50rem;
}

.modal_cont {
  width: 50rem;
  margin: 0 auto;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.625;
  letter-spacing: 0.05em;
  color: #56B2DB;

}
/* modaal css setting */

.modaal-content-container {
  padding: 5rem;
}

.modaal-fullscreen .modaal-inner-wrapper {
  display: flex;
  align-items: center;
}

.modaal-fullscreen .modaal-container {
  max-height: 62rem;
  overflow: unset;
}

.modaal-container {
  position: relative;
  width: 62rem;;
  border-radius: 1rem;
  box-shadow: none;
}

.modaal-fullscreen .modaal-close {
  position: absolute;
  background: none;
  right: 2rem;
  top: 2rem;
}

.modaal-close {
  width: 2rem;
  height: 2rem;
  border-radius: 0;
}

.modaal-close:after,.modaal-close:before {
  top: 0;
  left: .9rem;
  width: 2px;
  height: 20px;
  border-radius: 0;
  background: #56B2DB;
}

.modaal-close:focus:after,.modaal-close:focus:before,.modaal-close:hover:after,.modaal-close:hover:before {
  background: #56B2DB;
}

/* ===================
  　　 SKIN CARE
=================== */
.skin_care_sec {
  position: relative;
  padding: 14rem 0 10rem;
  z-index: 2;
}

.skin_care_sec .inner_sec {
  opacity: 0;
}

.skin_care_sec.popup .inner_sec {
  animation: opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  animation-delay: 0.4s;
}

.skin_care_sec:before {
  position: absolute;
  left: 50%;
  margin-left: -60rem;
  top: -6.5rem;
  width: 32rem;
  height: 32rem;
  z-index: -1;
  content: "";
}

.skin_care_sec.popup:before {
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite, opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  clip-path: circle(0rem at center);
}


.skin_care_sec:after {
  position: absolute;
  right: 50%;
  margin-right: -55rem;
  top: 10rem;
  width: 25rem;
  height: 26.2rem;
  z-index: -1;
  content: "";
}

.skin_care_sec.popup:after {
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite, opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  clip-path: circle(0rem at center);
}


.lp_contents .skin_care_sec .item_box:first-child
.item_cont {
  margin-bottom: 1rem;
}

.lp_contents .skin_care_sec .item_box:first-child
.item_catch {
  display: inline-block;
}

.skin_care_sec .item_box_sml:nth-child(7) .item_name_sml span {
  letter-spacing: 0.2em;
}

/* ===================
  　　MAKE UP
=================== */

.makeup_sec {
  position: relative;
  padding-bottom: 9rem;
  z-index: 2;
}

.makeup_sec .inner_sec {
  opacity: 0;
}

.makeup_sec.popup .inner_sec {
  animation: opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
}

.makeup_sec:before {
  position: absolute;
  right: 50%;
  margin-right: -54.1rem;
  top: -21.5rem;
  width: 32rem;
  height: 32rem;
  z-index: -1;
  content: "";
}

.makeup_sec.popup:before {
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite, opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  clip-path: circle(0rem at center);
}

.makeup_sec:after {
  position: absolute;
  left: 50%;
  margin-left: -55.1rem;
  top: -5.5rem;
  width: 25rem;
  height: 26.2rem;
  z-index: -1;
  content: "";
}

.makeup_sec.popup:after {
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite, opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  clip-path: circle(0rem at center);
}


.makeup_sec .item_box {
  width: 104rem;
  padding-bottom: 0;
  margin: 0 auto 10.2rem;
  display: grid;
  align-items: center;
  justify-content: start;
}

.makeup_sec .popup_area {
  display: grid;
  align-items: center;
  justify-content: start;
}

.makeup_sec .popup_area.popup {
  display: grid;
  align-items: center;
  justify-content: start;
}


.lp_contents .makeup_sec .item_box:nth-child(even):before {
  width: 0;
  height: 0;
}

.lp_contents .makeup_sec .item_box:after {
  bottom: -5rem;
  left: -2.8rem;
}

.lp_contents .makeup_sec .item_catch {
  height: auto;
  position: static;
  text-align: left;
  padding: 2rem 2.5rem 2rem;
  margin: 4.5rem 0 2.5rem 4rem;
  grid-column: 2/2;
  grid-row: 1/2;
}

.lp_contents .makeup_sec .item_catch:before {
  border: none;
}

.lp_contents .makeup_sec .item_catch:after {
  border: none;
}

.lp_contents .makeup_sec .item_pic {
  position: relative;
  margin-bottom: 0;
  grid-column: 1/2;
  grid-row: 1/3;
  border-radius: 5rem 0 5rem;
}

.lp_contents .makeup_sec .item_info_group {
  position: relative;
  margin: 0 0 4rem 4rem;
  grid-column: 2/2;
  grid-row: 2/2;
}

.lp_contents .makeup_sec .item_name {
  margin-bottom: 1rem;
}

.lp_contents .makeup_sec .item_pic:before {
  position: absolute;
  left: 0;
  bottom: -5.2rem;
  width: 500px;
  height: 4px;
  background: url(../img/icn_dotted_hor.svg) center center / cover no-repeat;
  content: "";
}

.lp_contents .makeup_sec .item_info_group:before {
  bottom: -9.2rem;
  right: -3.5rem;
  left: auto;
}

.lp_contents .makeup_sec .item_detail {
  width: 50rem;
}

.lp_contents .makeup_sec .item_wrap_sml {
  position: relative;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10rem;
}

.lp_contents .makeup_sec .item_wrap_sml::before {
  position: absolute;
  right:0;
  top: -5.5rem;
  width: 500px;
  height: 4px;
  background: url(../img/icn_dotted_hor.svg) center center / cover no-repeat;
  content: "";
}

.lp_contents .makeup_sec .item_box_sml {
  position: relative;
  width: 30rem;
}

.lp_contents .makeup_sec .item_box_sml:before {
  height: 100%;
}

.makeup_sec .item_wrap_sml .item_box_sml:last-child:before {
  background: none;
}

.lp_contents .makeup_sec .item_box_sml:after {
  width: 0px;
  height: 0px;
}

/* ===================
  　　HAIR BODY
=================== */

.hair_body_sec {
  position: relative;
  padding-bottom: 7.3rem;
  z-index: 2;
}

.hair_body_sec .inner_sec {
  opacity: 0;
}

.hair_body_sec .inner_sec {
  animation: opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  animation-delay: 0.4s;
}


.hair_body_sec .item_box:nth-child(2)::before,
.hair_body_sec .item_box:nth-child(5):before {
  position: absolute;
  left: -5rem;
  top: 0;
  width: 4px;
  height: 92%;
  background: url(../img/icn_dotted.svg) center center / cover no-repeat;
  content: "";
}

.hair_body_sec:before {
  position: absolute;
  left: 50%;
  margin-left: -66rem;
  top: -23rem;
  width: 32rem;
  height: 32rem;
  z-index: -1;
  content: "";
}

.hair_body_sec.popup:before {
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite, opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  clip-path: circle(0rem at center);
}

.hair_body_sec:after {
  position: absolute;
  right: 50%;
  margin-right: -64rem;
  top: -2.7rem;
  width: 25rem;
  height: 26.2rem;
  z-index: -1;
  content: "";
}

.hair_body_sec.popup:after {
  background: url(../img/icn_sun.svg) center center / cover no-repeat;
  animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite, opa3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 1 forwards;
  clip-path: circle(0rem at center);
}

/*=======================================
               Responsive
========================================*/


/* only PC */

@media screen and (min-width: 769px) {
  .sp_only {
    display: none;
  }
}


/*=======================================
                    PC
========================================*/

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

  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }

  .lp_contents {
    overflow: hidden;
  }
}

/* only tablet */

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


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

}

/*=======================================
                    SP
========================================*/


/* only SP */

@media only screen and (max-width: 768px) {
  .pc_only {
    display: none;
  }

  .lp_contents {
    overflow: hidden;
  }


  /* ===================
    　Animation
  =================== */
  /* pop up animation  */
  @keyframes fadein {
    0% {
      transform: translateY(0);
    }

    30% {
      transform: translateY(-30px);
    }

    100% {
      transform: translateY(0);
    }
  }

  /* ===================
    　Section Common
  =================== */

  .inner_sec {
    width: calc(350 * (100vw / 390));
  }

  /* ===================
        Title
  =================== */
  .nav_head {
    margin-bottom: calc(25 * (100vw / 390));
    font-size: calc(22 * (100vw / 390));
  }

  .nav_head:before {
    top: calc(-27.05 * (100vw / 390));
    width: calc(14 * (100vw / 390));
    height: calc(16.85 * (100vw / 390));
  }

  .sec_head {
    margin-bottom: calc(29 * (100vw / 390));
  }

  .sec_head h4{
    font-size: calc(45 * (100vw / 390));
  }

  .sec_head p {
    margin-top: calc(10 * (100vw / 390)) !important;
    font-size: calc(15 * (100vw / 390));
  }

  /* ===================
        Button Setting
  =================== */
  .lp_contents .btn {
    margin-left: calc(18 * (100vw / 390));
  }

  .btn a {
    width: calc(120 * (100vw / 390));
    padding: calc(12 * (100vw / 390));
    font-size: calc(12 * (100vw / 390));
    border-radius: calc(100 * (100vw / 390));
  }

  /* ===================
    　　　  MV
  =================== */

  .mv_sec {
    padding: calc(40.7 * (100vw / 390)) 0 calc(53 * (100vw / 390));
  }

  .mv_sec .inner_sec {
    position: relative;
    max-height: calc(530 * (100vw / 390));
    z-index: 0;
  }

  .mv_sec .inner_sec:before {
    position: absolute;
    bottom: calc(60 * (100vw / 390));
    left: 50%;
    margin-left: calc(-224 * (100vw / 390));
    width: calc(140 * (100vw / 390));
    height: calc(140 * (100vw / 390));
    background: url(../img/icn_sun.svg) center center / cover no-repeat;
    content: "";
    animation: move_sun1 1s linear .4s 1 forwards, move_sun2 80s linear 0s infinite;
    clip-path: circle(0rem at center);
    z-index: 1;
  }

  .mv_pic img {
    margin-left: 0;
  }

  .mv_sec:before {
    top: calc(-10 * (100vw / 390));
    width: calc(212 * (100vw / 390));
    height: calc(212 * (100vw / 390));
    margin-left: calc(-260 * (100vw / 390));
  }

  .mv_sec:after {
    top: calc(310 * (100vw / 390));
    width: calc(120 * (100vw / 390));
    height: calc(126.5 * (100vw / 390));
    z-index: 1;
    margin-right: calc(-225 * (100vw / 390));
  }

  .mv_lead {
    position: relative;
    left: auto;
    bottom: calc(68 * (100vw / 390));
    font-size: calc(14 * (100vw / 390));
    width: calc(352 * (100vw / 390));
    letter-spacing: 0.02em;
  }

  /* ===================
        PG NAV
  =================== */

  .pg_nav_sec .inner_sec {
    width: 100vw;
  }

  .pg_nav_sec{
    padding: calc(77 * (100vw / 390)) 0 calc(73 * (100vw / 390));
    background: #C7E8FF url(../img/icn_wave_sp.svg) center center / cover no-repeat;
  }

  .pg_nav {
    margin-bottom: calc(63 * (100vw / 390));
  }

  .pg_nav_sec .pg_nav:last-child {
    margin-bottom: 0;
  }

  .brand_scroll_area {
    overflow-x: scroll;
    overscroll-behavior: none;
  }

  .brand_list {
    width: calc(670 * (100vw / 390));
    padding: 0 calc(20 * (100vw / 390)) calc(15 * (100vw / 390));
    overflow-x: scroll;
    column-gap: calc(6 * (100vw / 390));
    row-gap: calc(7 * (100vw / 390));
  }

  .brand_list li {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .brand_list a {
    width: calc(100 * (100vw / 390));
    height: calc(46 * (100vw / 390));
    border-radius: calc(5 * (100vw / 390));
    -moz-border-radius: calc(5 * (100vw / 390));
    -webkit-border-radius: calc(5 * (100vw / 390));
  }


  .brand_list img {
    width: 75%;
  }

  .brand_list li:nth-child(17) img {
    width: 20%;
  }

  .nav_list a {
    width: calc(117 * (100vw / 390));
    height:  calc(70 * (100vw / 390));
    padding: calc(13 * (100vw / 390)) calc(10 * (100vw / 390)) calc(14 * (100vw / 390));
    font-size: calc(15 * (100vw / 390));
    line-height: 1.46;
    text-align: center;
  }

  .nav_price .nav_list li:nth-child(2) a {
    letter-spacing: 0.2em;
  }


  .nav_list li:first-of-type a {
    border-radius:  calc(5 * (100vw / 390)) 0 0 calc(5 * (100vw / 390));
  }
  .nav_list li:last-of-type a {
    border-radius:  0 calc(5 * (100vw / 390)) calc(5 * (100vw / 390)) 0;
    letter-spacing: 0.02em;
  }

  .nav_list a:after {
    top: calc(10 * (100vw / 390));
    height: calc(50 * (100vw / 390));
  }


  .nav_list a {
    padding: calc(17 * (100vw / 390)) calc(10 * (100vw / 390)) calc(18 * (100vw / 390));
  }

  .nav_list span {
    margin-top: calc(3 * (100vw / 390));
    font-size: calc(11 * (100vw / 390));
  }

  /* fixed nav */
  .nav_fixed {
    width: calc(370 * (100vw / 390));
    overflow-x: scroll;
    overflow-y: hidden;
    bottom: calc(10 * (100vw / 390));
    border-radius: calc(5 * (100vw / 390));
  }
  .nav_fixed ul{
    padding-right: calc(10 * (100vw / 390));
    
  }

  .nav_fixed .nav_list {
    justify-content: flex-start;
  }


  .nav_fixed .nav_list a {
    width: calc(105 * (100vw / 390));
    font-size: calc(14 * (100vw / 390));
    letter-spacing: 0.04em;

  }


  /* ===================
    　　ITEM LAYOUT
  =================== */

  .lp_contents .item_wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: calc(35 * (100vw / 390));
    column-gap: 0;
    margin-bottom: 0;
  }

  .lp_contents .item_box:nth-child(even):before {
    background: none;
  }


  .lp_contents .item_box:after {
    width: calc(352 * (100vw / 390));
  }


  .lp_contents .item_box:last-child:after {
    background: none;
  }

  .lp_contents .item_catch {
    margin-bottom: calc(23 * (100vw / 390));
    width: calc(350 * (100vw / 390));
    height: auto;
    padding: calc(10 * (100vw / 390)) calc(5 * (100vw / 390));
    font-size: calc(14 * (100vw / 390));
    line-height: 1.714;
  }


  .lp_contents .item_pic {
    width: calc(350 * (100vw / 390));
    height: calc(238 * (100vw / 390));
    margin-bottom: calc(21 * (100vw / 390));
  }

  .lp_contents .item_pic.popup {
    border-radius: calc(40 * (100vw / 390)) 0 calc(40 * (100vw / 390));
  }

  .lp_contents .item_pic img{
    width: calc(350 * (100vw / 390));
    border-radius: calc(40 * (100vw / 390)) 0 calc(40 * (100vw / 390));
  }

  .lp_contents .item_info_group {
    width: calc(350 * (100vw / 390));
  }

  .lp_contents .item_name {
    margin-bottom: calc(10 * (100vw / 390));
    font-size: calc(14 * (100vw / 390));
    line-height: 1.57;
  }

  .lp_contents .item_name span {
    padding-right: calc(10 * (100vw / 390));
    font-size: calc(18 * (100vw / 390));
    line-height: 1.2;
  }

  .lp_contents .item_detail {
    margin-bottom: calc(16 * (100vw / 390));

  }
  .lp_contents .item_price {
    font-size: calc(20 * (100vw / 390));
    line-height: 1.35;
  }

  .lp_contents .item_price span {
    padding-left: calc(10 * (100vw / 390));
    font-size: calc(10 * (100vw / 390));
    line-height: 2.7;
  }

  .lp_contents .item_cont {
    margin-bottom: calc(40 * (100vw / 390));
    font-size: calc(13 * (100vw / 390));
    line-height: 1.76;
  }


  .lp_contents .item_info_group sup {
    margin-bottom: calc(40 * (100vw / 390));

  }

  /* item wrap small */
  .lp_contents .item_wrap_sml {
    column-gap: calc(34 * (100vw / 390));
    row-gap: calc(60 * (100vw / 390));
  }

  .lp_contents .item_box_sml:before {
    right: calc(-18.5 * (100vw / 390));
    top: 0;
    height: 93%;
    background: url(../img/icn_dotted.svg) center center / cover no-repeat;
  }

  .lp_contents .item_box_sml:nth-child(3n):before {
    background: url(../img/icn_dotted.svg) center center / cover no-repeat;
  }

  .lp_contents .item_box_sml:nth-child(even):before {
    background: none;
  }


  .lp_contents .item_box_sml:after,
  .lp_contents .item_box_sml:nth-child(7):after,
  .lp_contents .item_box_sml:nth-child(8):after {
    width: calc(162 * (100vw / 390));
    top: calc(-30 * (100vw / 390));
    height: 4px;
    background: url(../img/icn_dotted_hor.svg) center center / cover no-repeat;
  }


  .lp_contents .item_pic_sml {
    margin-bottom: calc(10 * (100vw / 390));
  }

  .lp_contents .item_pic_sml.popup {
    border-radius: calc(30 * (100vw / 390)) 0 calc(30 * (100vw / 390));
  }
  .lp_contents .item_sml_img {
    width: calc(158 * (100vw / 390)) !important;
    border-radius: calc(30 * (100vw / 390)) 0 calc(30 * (100vw / 390));
  }


  .lp_contents .item_pic_web .web_icn {
    top: calc(4 * (100vw / 390));
    right: calc(4 * (100vw / 390));
    width: calc(54 * (100vw / 390));
    height: calc(20 * (100vw / 390));
  }

  .lp_contents .item_pic_web .web_icn img {
    width: calc(54 * (100vw / 390));
    height: calc(20 * (100vw / 390));
  }

  .lp_contents .item_pic .item_0711_start {
    top: calc(15 * (100vw / 390));
    left: calc(12 * (100vw / 390));
    width: calc(135 * (100vw / 390));
    height: calc(20 * (100vw / 390));
    border-radius: 0.2rem;
  }

  .lp_contents .item_pic .item_0711_start img {
    width: calc(135 * (100vw / 390));
    height: calc(20 * (100vw / 390));
  }


  .lp_contents .item_name_sml span{
    display: block;
    margin-bottom: calc(5 * (100vw / 390));
    padding-right: 0;
    font-size: calc(16 * (100vw / 390));
    line-height: 1.375;
  }

  .lp_contents .item_name_sml {
    width: calc(158 * (100vw / 390));
    margin-bottom: calc(6 * (100vw / 390));
    font-size: calc(13 * (100vw / 390));
    line-height: 1.54
  }

  .lp_contents .item_detail_sml {
    display: inline-block;
    padding-bottom: 0;
  }

  .lp_contents .item_price_sml span{
    padding-left: calc(10 * (100vw / 390));
    font-size: calc(10 * (100vw / 390));
    line-height: 2.7;
  }

  .lp_contents .item_price_sml {
    margin-bottom: calc(15 * (100vw / 390));
    font-size: calc(18 * (100vw / 390));
    line-height: 1.5;
  }

  /* ===================
    　　 MODAL
  =================== */
  /* modal click btn  */
  .lp_contents .item_modal a {
    justify-content: flex-end;
  }

  .lp_contents .item_modal {
    width: calc(100 * (100vw / 390));
    height: calc(50 * (100vw / 390));
  }

  .lp_contents .item_modal img{
    width: calc(71 * (100vw / 390));
    height: calc(25 * (100vw / 390));
    margin: 0 calc(5 * (100vw / 390)) calc(5 * (100vw / 390)) 0;
    border-radius: 0;
  }

  /* modal inner setting */

  .modal_pic {
    margin-bottom: calc(20 * (100vw / 390));
  }

  .modal_pic img {
    width: calc(290 * (100vw / 390));
  }

  .modal_cont {
    width: calc(290 * (100vw / 390));
    font-size: calc(13 * (100vw / 390));
    line-height: 1.69;

  }
  /* modaal css setting */

  .modaal-content-container {
    padding: calc(50 * (100vw / 390)) calc(20 * (100vw / 390))  calc(50 * (100vw / 390));
  }

  .modaal-fullscreen .modaal-container {
    height: fit-content;
  }

  .modaal-container {
    width: calc(330 * (100vw / 390));
    border-radius: calc(10 * (100vw / 390));
  }

  .modaal-fullscreen .modaal-close {
    right: calc(14.6 * (100vw / 390));
    top: calc(15 * (100vw / 390));
  }

  .modaal-close {
    width: calc(20 * (100vw / 390));
    height: calc(20 * (100vw / 390));
  }

  .modaal-close:after,.modaal-close:before {
    top: calc(9 * (100vw / 390));
    left: calc(-3 * (100vw / 390));
    width: calc(26.52 * (100vw / 390));
    height: calc(1.77 * (100vw / 390));
    border-radius: 0;
  }

  /* ===================
    　　 SKIN CARE
  =================== */
  .skin_care_sec {
    padding: calc(50 * (100vw / 390)) 0  calc(69 * (100vw / 390));
  }

  .skin_care_sec:before {
    margin-left: calc(-240 * (100vw / 390));
    top: calc(-30 * (100vw / 390));
    width: calc(180 * (100vw / 390));
    height: calc(180 * (100vw / 390));
  }

  .skin_care_sec:after {
    margin-right: calc(-230 * (100vw / 390));
    top: calc(57 * (100vw / 390));
    width: calc(125 * (100vw / 390));
    height: calc(126.5 * (100vw / 390));
  }

  .lp_contents .skin_care_sec .item_box:first-child
  .item_cont {
    margin-bottom: calc(10 * (100vw / 390));
  }

  .lp_contents .skin_care_sec .item_box_sml:last-child:before {
    background: none;
  } 

  /* ===================
    　　MAKE UP
  =================== */

  .makeup_sec {
    padding-bottom: calc(72 * (100vw / 390));
    z-index: 1;
  }

  .makeup_sec:before {
    margin-right: calc(102 * (100vw / 390));
    top: calc(0 * (100vw / 390));
    width: calc(120 * (100vw / 390));
    height: calc(120 * (100vw / 390));
  }

  .makeup_sec:after {
    margin-left: calc(85 * (100vw / 390));
    top: calc(-145 * (100vw / 390));
    width: calc(180 * (100vw / 390));
    height: calc(189.23 * (100vw / 390));
    z-index: -1;
  }

  .makeup_sec .item_box {
    display: block;
    width: calc(350 * (100vw / 390));
    margin: 0 auto calc(60 * (100vw / 390));
  }

  .lp_contents .makeup_sec .item_box:after {
    background: none;
  }

  .lp_contents .makeup_sec .item_box .item_box_inner.popup {
    animation: none;
  }

  .makeup_sec .popup_area {
    display: block;
  }

  .makeup_sec .popup_area.popup {
    display: block;
  }


  .lp_contents .makeup_sec .item_txt {
    display: block;
    position: relative;
  }

  .lp_contents .makeup_sec .item_catch {
    position: relative;
    padding: calc(12 * (100vw / 390)) calc(12 * (100vw / 390)) calc(11 * (100vw / 390));
    margin: 0 0 calc(25 * (100vw / 390)) 0;
  }

  .lp_contents .makeup_sec .item_catch:before {
    content: "";
    position: absolute;
    bottom: -1.55rem;
    left: 50%;
    margin-left: -1.5rem;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 16px solid #D6EFFF;
    z-index: 2;
  }

  .lp_contents .makeup_sec .item_catch:after {
    content: "";
    position: absolute;
    bottom: -1.7rem;
    left: 50%;
    margin-left: -1.6rem;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-top: 16px solid #89BEE2;
    z-index: 1;
  }

  .lp_contents .makeup_sec .item_pic {
    position: relative;
    margin-bottom: calc(15 * (100vw / 390));
  }

  .lp_contents .makeup_sec .item_pic.popup {
    animation: fadein 1s cubic-bezier(0.72, 0.16, 0.5, 0.91) 0s 1 forwards;
    opacity: 1;
  }

  .lp_contents .makeup_sec .item_info_group {
    margin-left: 0;
  }

  .lp_contents .makeup_sec .item_info_group.popup {
    animation: fadein 1s cubic-bezier(0.72, 0.16, 0.5, 0.91) 0s 1 forwards;
  }

  .lp_contents .makeup_sec .item_info_group:before,
  .lp_contents .makeup_sec .item_pic:before {
    background: none;
  }

  .lp_contents .makeup_sec .item_name {
    margin-bottom: 1rem;
  }

  .lp_contents .makeup_sec .item_detail {
    width: calc(350 * (100vw / 390));
  }

  /* item_wrap_sml */

  .lp_contents .makeup_sec .item_wrap_sml {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: calc(34 * (100vw / 390));
  }

  .lp_contents .makeup_sec .item_wrap_sml::before {
    background: none;
  }

  .lp_contents .makeup_sec .item_box_sml {
    width: calc(158 * (100vw / 390));
  }

  .lp_contents .makeup_sec .item_box_sml:before {
    height: 100%;
  }

  .lp_contents .makeup_sec .item_box_sml:after {
    width: calc(163 * (100vw / 390));
    height: 4px;
  }

  /* ===================
    　　HAIR BODY
  =================== */

  .hair_body_sec {
    padding-bottom: calc(81 * (100vw / 390));
    z-index: 1;
  }

  .hair_body_sec .item_box:nth-child(2)::before,
  .hair_body_sec .item_box:nth-child(5):before {
    position: absolute;
    left: -5rem;
    top: 0;
    width: 4px;
    height: 92%;
    background: url(../img/icn_dotted.svg) center center / cover no-repeat;
    content: "";
  }

  .hair_body_sec:before {
    margin-left: calc(-226 * (100vw / 390));
    top: calc(-5 * (100vw / 390));
    width: calc(120 * (100vw / 390));
    height: calc(126.15 * (100vw / 390));
    z-index: -1;
  }

  .hair_body_sec:after {
    margin-right: calc(-237 * (100vw / 390));
    top: calc(-83 * (100vw / 390));
    width: calc(160 * (100vw / 390));
    height: calc(160 * (100vw / 390));
    z-index: -1;
  }







}