@charset "UTF-8";



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

html {

  font-size: 62.5%;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#Contents {

  width: auto;

  max-width: unset;

}



#footer {

  margin-top: 0;

}



footer {

  position: relative;

  z-index: 4;

}



.nav-top {

  display: none;

  z-index: 5;

}



:root {

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

  --color_regular: #727171;

  --color_01: #CCA89A;

  --color_02: #E8DAD1;

  --color_03: #F5EFEC;

  --color_04: #E6D8D0;

  --color_lower: #BDBDBD;

  --color_bg_01: #fff;

  --color_bg_02: #FAF7F6;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .15em;

  font-feature-settings: "palt";

}



.LP_page {

  background: var(--color_bg_01);

  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;

  color: inherit;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: 1rem;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transform: translateY(2rem);

  transition: opacity 1s, transform 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .15s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .3s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .45s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .6s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

  transform: unset;

}

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



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

.mv_area {

  padding-bottom: 10.1rem;

}



.main_ttl {

  background: url(../img/mv.jpg) center center / cover no-repeat;

}



.navigation_list {

  display: flex;

  justify-content: center;

  width: 100%;

  padding-left: 3.5rem;

  background: var(--color_04);

}



.navigation_list li a {

  position: relative;

  display: flex;

  align-items: center;

  gap: 2.2rem;

  width: 30.3rem;

  height:  8rem;

  padding-left: 4rem;

}





.navigation_list li:nth-of-type(1) a {

  padding-left: 0;

  width: 27.5rem;

}



.navigation_list li a::after {

  position: absolute;

  top: 50%;

  right: 0;

  transform: translateY(-50%) rotate(45deg);

  width: 1rem;

  height: 1rem;

  border-right: solid #fff;

  border-bottom: solid #fff;

  border-width: .1rem;

  margin: -.4rem 3rem 0 0;

  box-sizing: border-box;

  content: "";

}



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

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: .1rem;

  height: 4rem;

  background: #fff;

  content: "";

}



.navigation_list li .nav_img,

.navigation_list li .nav_img img {

  width: auto;

  height: 100%;

}



.navigation_list li .nav_ttl {

  font-size: 1.4rem;

  line-height: 1.4;

  letter-spacing: .1em;

  text-align: center;

  color: #fff;

}



.summary_area {

  position: relative;

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

  padding: calc(98 * (100vw / 1600)) 0 calc(81 * (100vw / 1600));

  background: url(../img/bg_001.jpg) center center / cover no-repeat;

  text-align: center;

}



.summary_area .sec_ttl {

  margin-bottom: calc(502 * (100vw / 1600));

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

  font-weight: 400;

  letter-spacing: .1em;

  color: var(--color_01);

}



.summary_area .itm_FacePowder {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

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

  height: calc(280 * (100vw / 1600));

  margin: calc(300 * (100vw / 1600)) 0 0 calc(-290 * (100vw / 1600));

}



.itm_FlawlessTouch {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

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

  height: calc(260 * (100vw / 1600));

  margin: calc(330 * (100vw / 1600)) 0 0 calc(4 * (100vw / 1600));

}



.itm_BaseLuminescence {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

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

  height: calc(390 * (100vw / 1600));

  margin: calc(200 * (100vw / 1600)) 0 0 calc(245 * (100vw / 1600));

}



.summary_area .itm_list {

  display: flex;

  justify-content: center;

  gap: calc(63 * (100vw / 1600));

  padding-left: calc(8 * (100vw / 1600));

}



.summary_area .itm_list li {

  text-align: center;

  color: var(--color_01);

}



.summary_area .itm_list li h4 {

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

  font-weight: 300;

}



.summary_area .itm_list li h4 .txt_L {

  display: block;

  margin-bottom: calc(11 * (100vw / 1600));

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

  line-height: 1.5;

  letter-spacing: .1em;

}



.mv_area .movie_wrap {

  width: 96rem;

  margin: 0 auto;

}



.mv_area .movie_inner {

  position: relative;

  overflow: hidden;

  padding: calc(9% / 0.16) 0 0 0;

}



.mv_area .movie_wrap iframe {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 100%;

  height: 100%;

}

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



/*each basemake product----------*/

.each_basemake {

  background: var(--color_bg_02);

}



.each_basemake .for_bg {

  height: 50rem;

  transition: background-position .8s ease-in-out;



}



#BaseLuminescence .for_bg {

  background: url(../img/bg_101.jpg) center center / 100% auto no-repeat;

}



#FlawlessTouch .for_bg {

  background: url(../img/bg_201.jpg) center center / 100% auto no-repeat;

}



#BaseLuminescence .sec_inner {

  padding: 9.2rem 0 10.5rem;

}



#FlawlessTouch .sec_inner {

  padding: 10.5rem 0 10rem;

}



#FacePowder .sec_inner {

  padding: 9.2rem 0 10.4rem;

}



/*----------each basemake product*/



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

.intro_area {

  width: 114rem;

  margin: 0 auto;

}



.intro_area .for_unit {

  display: flex;

  align-items: center;

}



#BaseLuminescence .intro_area .for_unit {

  gap: 14.6rem;

}



#FlawlessTouch .intro_area .for_unit {

  gap: 16.7rem;

}



#FacePowder .intro_area .for_unit {

  gap: 16.8rem;

}



.each_basemake:nth-of-type(even) .intro_area .for_unit {

  justify-content: flex-end;

  padding-right: 1rem;

}



.intro_area .sec_ttl {

  position: relative;

  z-index: 1;

  width: 52rem;

}



.intro_area .sec_ttl::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  margin: -2rem 0 0 -2rem;

  background: var(--color_04);

  content: "";

}



.each_basemake:nth-of-type(even) .intro_area .sec_ttl::before {

  margin: -2rem 0 0 2rem;

}



.intro_area .sec_ttl.activePoint {

  opacity: 1 !important;

  transform: unset !important;

}



.fade_toRight {

  opacity: 0;

  animation: blur 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;

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

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

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

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

  -webkit-mask-position: 100% center;

  mask-position: 100% center;

  -webkit-mask-repeat: none;

  mask-repeat: none;

  transform: translateZ(0);

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

  transition: mask-position 1.4s linear;

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

}



@keyframes blur {

  0% {

    opacity: 0;

    filter: blur(4px);

  }



  100% {

    opacity: 1;

    filter: blur(0);

  }

}



.activePoint.active .fade_toRight {

  -webkit-mask-position: 0 center;

  mask-position: 0 center

}



#BaseLuminescence .intro_area .sec_ttl {

  margin-top: 2.6rem;

}



#FlawlessTouch .intro_area .sec_ttl {

  margin-top: .8rem;

}



#FacePowder .intro_area .sec_ttl  {

  margin-top: 2.2rem;

}



.each_basemake:nth-of-type(even) .intro_area .sec_ttl {

  order: 2;

}



.intro_area .detail_wrap {

  text-align: center;

}



.intro_area .itm_cath {

  margin-bottom: 3rem;

  font-size: 1.6rem;

  line-height: 2;

  color: var(--color_01);

}



.intro_area .itm_img_wrap {

  position: relative;

  width: 22rem;

  margin: 0 auto 2.2rem;

}



.intro_area .itm_feature {

  position: absolute;

  top: 0;

  left: 100%;

  display: grid;

  place-items: center;

  width: 8.2rem;

  height: 8.2rem;

  border-radius: 50%;

  padding-top: .2rem;

  background: #fff;

  font-size: 1.2rem;

  line-height: 1.5;

}



.intro_area .itm_name {

  margin-bottom: 1.2rem;

  font-size: 1.4rem;

  font-weight: 400;

}



.intro_area .itm_price {

  margin-bottom: 2rem;

  font-size: 1.4rem;

}



.intro_area .itm_price .txt_S {

  font-size: 1.2rem;

}



.intro_area .itm_link {

  width: fit-content;

  margin: 0 auto 3.5rem;

}



.intro_area .itm_link a {

  display: grid;

  place-items: center;

  width: 12rem;

  height: 3.2rem;

  background: var(--color_01);

  font-size: 1.6rem;

  letter-spacing: .1em;

  color: #fff;

}



.intro_area .itm_caption {

  font-size: 1.2rem;

  line-height: 2;

}



.intro_area .itm_caption .notes {

  display: block;

  margin-top: 1.5rem;

  font-size: 1rem;

}



.intro_area .feature_list {

  display: flex;

  flex-wrap: wrap;

  gap: 2rem;

  width: 61.8rem;

  margin: 10rem auto 0;

}



.intro_area .feature_list li {

  display: grid;

  place-items: center;

  width: 9.6rem;

  height: 9.6rem;

  border: solid var(--color_02);

  border-width: .1rem;

  border-radius: 50%;

  padding-top: .3rem;

  background: #fcfafa;

  font-size: 1.2rem;

  line-height: 1.5;

  text-align: center;

}



.intro_area .feature_list li:nth-of-type(6) {

  margin-left: 5.8rem;

}

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



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

.point_area {

  width: 90rem;

  margin: 0 auto;

}



#BaseLuminescence .point_area {

  margin-top: 10.8rem;

}



#FlawlessTouch .point_area {

  margin-top: 11.5rem;

}



.each_point {

  position: relative;

  background: #fcfafa;

  text-align: center;

}



.each_point::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: .1rem;

  background: var(--color_02);

  content: "";

  transform: scaleX(0);

  transform-origin: center left;

  transition: transform .6s linear;

}



.each_point.activePoint.active::before,

.each_point.activePoint.active::after,

.each_point.activePoint.active > div::before,

.each_point.activePoint.active > div::after {

 transform: unset;

}



.each_point.activePoint.active > div > div::before {

  transform: scaleX(0);

}



.each_point::after {

  position: absolute;

  top: 0;

  right: 0;

  width: .1rem;

  height: 100%;

  background: var(--color_02);

  content: "";

  transform: scaleY(0);

  transform-origin: top center;

  transition-delay: .6s !important;

  transition: transform .4s linear;

}



.each_point > div > div {

  padding: 4.8rem 5rem 4rem;

}



#FlawlessTouch .each_point:nth-of-type(1) > div > div {

  padding: 4.8rem 5rem 4.4rem;

}



.each_point > div::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: .1rem;

  background: var(--color_02);

  content: "";

  transform: scaleX(0);

  transform-origin: center right;

  transition-delay: 1s !important;

  transition: transform .6s linear;

}



.each_point > div::after {

  position: absolute;

  top: 0;

  left: 0;

  width: .1rem;

  height: 100%;

  background: var(--color_02);

  content: "";

  transform: scaleY(0);

  transform-origin: bottom center;

  transition-delay: 1.6s !important;

  transition: transform .4s linear;

}



.each_point > div > div::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 50%;

  height: .1rem;

  background: #fcfafa;

  content: "";

  transform-origin: center right;

  transition-delay: 2s !important;

  transition: transform .4s linear;

}



.each_point > div > div::after {

  position: absolute;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 12rem;

  height: .1rem;

  background: #fcfafa;

  content: "";

}



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

  margin-top: 8.9rem;

}



.each_point h4 {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 50%;

  transform: translateX(-50%);

  margin-top: -1rem;

  font-size: 2rem;

  font-weight: 300;

  letter-spacing: .1em;

  color: var(--color_01);

  white-space: nowrap;

}



.each_point h5 {

  margin-bottom: 2.4rem;

  font-size: 1.5rem;

  font-weight: 400;

}



#FlawlessTouch .each_point:nth-of-type(1) h5 {

  margin-bottom: 3rem;

}



.point_lead {

  font-size: 1.3rem;

  line-height: 2;

}



.each_point .notes {

  margin-top: 2.4rem;

  font-size: 1rem;

}



#BaseLuminescence .each_point:nth-of-type(2) .notes {

  margin-top: 3rem;

}



.ingredient_list {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 3.2rem;

}



.ingredient_list li {

  display: grid;

  place-items: center;

  width: 13.6rem;

  height: 2.6rem;

  border-radius: .4rem;

  padding-top: .2rem;

  background: var(--color_03);

  font-size: 1rem;

}



.ingredient_list li:nth-of-type(6) {

  margin-left: 7.4rem;

}



.point_img {

  width: 23.5rem;

  margin: 0 auto;

}



.point_list {

  position: absolute;

  bottom: 0;

  left: 0;

  display: grid;

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

  gap: 0 28.7rem;

  margin: 0 0 3.6rem 5.8rem;

  pointer-events: none

}



.point_list li {

  position: relative;

  font-size: 1.1rem;

  line-height: 1.75;

  text-align: left;

}



.point_list li:nth-of-type(1)::before {

  position: absolute;

  top: 0;

  left: 100%;

  width: 2rem;

  height: .1rem;

  margin: 2.8rem 0 0 .7rem;

  background: var(--color_regular);

  scale: 0;

  transform-origin: center right;

  transition: scale .4s linear;

  transition-delay: .4s;

  content: "";

}



.point_list li:nth-of-type(1)::after {

  position: absolute;

  top: 0;

  left: 100%;

  width: 9.7rem;

  height: .1rem;

  margin: 9.1rem 0 0 .3rem;

  background: var(--color_regular);

  rotate: 41deg;

  scale: 0;

  transform-origin: center right;

  transition: scale .4s linear;

  content: "";

}



.point_list li:nth-of-type(2)::before {

  position: absolute;

  top: 0;

  right: 100%;

  width: 2.2rem;

  height: .1rem;

  margin: 2.8rem 1rem 0 0;

  background: var(--color_regular);

  scale: 0;

  transform-origin: center left;

  transition: scale .4s linear;

  transition-delay: .4s;

  content: "";

}



.point_list li:nth-of-type(2)::after {

  position: absolute;

  top: 0;

  right: 100%;

  width: 9.5rem;

  height: .1rem;

  margin: 7.3rem 2.1rem 0 0;

  background: var(--color_regular);

  rotate: -28deg;

  scale: 0;

  transform-origin: center left;

  transition: scale .4s linear;

  content: "";

}



.point_list li:nth-of-type(3)::before {

  position: absolute;

  top: 0;

  left: 100%;

  width: 7.6rem;

  height: .1rem;

  margin: 2.8rem 0 0 -2.5rem;

  background: var(--color_regular);

  scale: 0;

  transform-origin: center right;

  transition: scale .4s linear;

  transition-delay: .4s;

  content: "";

}



.point_list li:nth-of-type(3)::after {

  position: absolute;

  top: 0;

  left: 100%;

  width: 7.2rem;

  height: .1rem;

  margin: -.7rem 0 0 4.2rem;

  background: var(--color_regular);

  rotate: -29deg;

  scale: 0;

  transform-origin: center right;

  transition: scale .4s linear;

  content: "";

}



.point_list li:nth-of-type(4)::before {

  position: absolute;

  top: 0;

  right: 100%;

  width: 1.8rem;

  height: .1rem;

  margin: 2.8rem 1rem 0 0;

  background: var(--color_regular);

  scale: 0;

  transform-origin: center left;

  transition: scale .4s linear;

  transition-delay: .4s;

  content: "";

}



.point_list li:nth-of-type(4)::after {

  position: absolute;

  top: 0;

  right: 100%;

  width: 8.5rem;

  height: .1rem;

  margin: -1.6rem 1.6rem 0 0;

  background: var(--color_regular);

  rotate: 31deg;

  scale: 0;

  transform-origin: center left;

  transition: scale .4s linear;

  content: "";

}



.each_point.active .point_list li::before,

.each_point.active .point_list li::after {

  scale: 1;

}



.point_list li:nth-of-type(n+3) {

  margin-top: 9.6rem;

}



.point_list li .txt_B {

  font-weight: 700;

}



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



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

.series_area {

  margin-top: 11.7rem;

}



.series_area h4 {

  margin-bottom: 5rem;

  font-size: 1.3rem;

  font-weight: 400;

  text-align: center;

}



.series_area h4 .txt_L {

  display: block;

  margin-bottom: 1.6rem;

  font-size: 3.6rem;

  letter-spacing: .1em;

  color: var(--color_01);

}



.series_img {

  width: 46rem;

  margin: 0 auto 8rem;

}



.series_img.activePoint {

  opacity: 1 !important;

  transform: unset !important;

}



.series_table_wrap {

  width: fit-content;

  margin: 0 auto;

}



.series_table {

  border-collapse: collapse;

  border-top: solid var(--color_02);

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

  border-width: .1rem;

}



.series_table thead th {

  background: #fcfafa;

}



.series_table thead th .th_inner {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 2.4rem;

  border-left: solid var(--color_02);

  border-width: .1rem;

  padding: 1rem 0;

  text-align: center;

}



.series_table thead th img {

  width: 7rem;

}



.series_table thead th span {

  padding-top: .5rem;

  font-size: 1.3rem;

  line-height: 1.5;

}



.series_table tbody th,

.series_table tbody td {

  border-top: solid var(--color_02);

  border-width: .1rem;

}



.series_table th {

  position: relative;

  width: 16rem;

  font-size: 1.3rem;

  font-weight: 400;

  background: var(--color_03);

  text-align: center;

}



.series_table tbody th::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: solid #fcfafa;

  border-width: .5rem;

  box-sizing: border-box;

  content: "";

}



.series_table tbody td {

  width: 32.3rem;

  background: #fcfafa;

  border-left: solid var(--color_02);

  border-width: .1rem;

  padding: 1.7rem 0;

  font-size: 1.2rem;

  line-height: 1.5;

  text-align: center;

}



.series_table tbody td .td_inner {

  width: fit-content;

  margin: 0 auto;

  padding-left: .1rem;

}



.series_table td .txt_S {

  font-size: 1rem;

}



.series_table td ul {

  text-align: left;

}



.series_table td ul li {

  line-height: 1.5;

}



.series_table .feature_list {

  margin-top: 1.4rem;

  font-size: 1.1rem;

}



.series_area .notes {

  margin-top: 3.1rem;

  font-size: 1rem;

  text-align: center;

}

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



/*product how to use-------------*/

.howto_area {

  margin-top: 11.8rem;

}



.howto_area h4 {

  margin-bottom: 5.5rem;

  font-size: 1.3rem;

  font-weight: 400;

  text-align: center;

}



#BaseLuminescence .howto_area h4 {

  margin-bottom: 5.3rem

}



#FlawlessTouch .howto_area h4 {

  margin-bottom: 4.8rem;

}



.howto_area h4 .txt_L {

  display: block;

  margin-bottom: 1.6rem;

  font-size: 3.6rem;

  letter-spacing: .1em;

  color: var(--color_01);

}



.howto_area .for_unit {

  display: flex;

  justify-content: center;

  gap: 8.5rem;

}



.howto_img {

  width: 55.4rem;

}



.howto_area .movie_wrap {

  position: relative;

  width: 30.6rem;

  height: fit-content;

  margin: 0 auto;

}



.howto_area .for_unit .movie_wrap {

  margin: .5rem .5rem 0 0;

}



.howto_area .movie_wrap::before {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: calc(100% + 1rem);

  height: calc(100% + 1rem);

  border: solid var(--color_02);

  border-width: .1rem;

  box-sizing: border-box;

  content: "";

  pointer-events: none;

}



.howto_area .movie_inner {

  position: relative;

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

}



.howto_area .movie_wrap iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}





/*-------------product how to use*/



/*recommend-----------------------*/

.each_sec .sec_inner {

  padding: 9.8rem 0 10rem;

}



.each_sec .sec_ttl {

  margin-bottom: 4.5rem;

  font-size: 3.6rem;

  font-weight: 400;

  letter-spacing: .1em;

  text-align: center;

  color: var(--color_01);

}



.recommend_area .for_unit {

  position: relative;

  width: 118rem;

  height: 52rem;

  margin: 0 auto;

  padding-top: 9.3rem;

}



.recommend_area .itm_cath {

  margin-bottom: 3.3rem;

  font-size: 1.6rem;

  line-height: 2;

}



.recommend_area .itm_img {

  position: absolute;

  top: 0;

  right: 0;

  width: 52rem;

  margin-right: 2rem;

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

}



.recommend_area .itm_img.activePoint {

  opacity: 1 !important;

  transform: unset !important;

}



.recommend_area .detail_wrap .for_unit {

  display: flex;

  align-items: center;

  gap: 4rem;

  width: auto;

  height: auto;

  margin-bottom: 5.3rem;

  padding-top: 0;

}



.recommend_area .itm_name {

  margin-bottom: 1.4rem;

  font-size: 1.4rem;

  font-weight: 400;

}



.recommend_area .itm_price {

  font-size: 1.4rem;

}



.recommend_area .itm_price .txt_S {

  font-size: 1.2rem;

}



.recommend_area .itm_link {

  width: fit-content;

}



.recommend_area .itm_link a {

  display: grid;

  place-items: center;

  width: 12rem;

  height: 3.2rem;

  background: var(--color_01);

  font-size: 1.6rem;

  letter-spacing: .1em;

  color: #fff;

}



.recommend_area .itm_caption {

  font-size: 1.2rem;

  line-height: 2;

}



.recommend_area .itm_caption .notes {

  display: block;

  margin-top: 1.5rem;

  font-size: 1rem;

}

/*-----------------------recommend*/



/*campaign-----------------------*/

.campaign_area {

  background: var(--color_bg_02);

}



.campaign_area .itm_img_wrap {

  position: relative;

  width: 30rem;

  height: 30rem;

  border: solid var(--color_02);

  border-width: .1rem;

  margin: 0 auto 3.5rem;

  background: #FCFAFA;

}



.campaign_area .itm_img_wrap::before {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: calc(100% - 1.8rem);

  height: calc(100% - 1.8rem);

  border: solid var(--color_02);

  border-width: .1rem;

  box-sizing: border-box;

  content: "";

}



.campaign_area .itm_img_wrap .itm_img {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 44rem;

}



.campaign_lead {

  font-size: 1.4rem;

  line-height: 2;

  text-align: center;

}



.campaign_lead .notes {

  display: block;

  margin-top: 2.2rem;

  font-size: 1rem;

}

/*-----------------------campaign*/



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

.schedule_area {

  text-align: center

}



.schedule_area .sec_inner {

  padding-bottom: 9.3rem;

}



.schedule_area h4 {

  margin-bottom: 3rem;

  font-size: 1.8rem;

  font-weight: 600;

}



.schedule_area h4 .txt_S {

  margin-right: 1.6rem;

  font-size: 1.6rem;

}



.schedule_area h4 .txt_M {

  margin-left: .8rem;

  font-size: 1.6rem;

}



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

  margin-top: 4.5rem;

}



.schedule_area h5 {

  margin-bottom: .7rem;

  font-size: 1.6rem;

  font-weight: 400;

  letter-spacing: .1em;

  color: var(--color_01);

}



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

  margin-top: 2.4rem;

}



.schedule_area p {

  font-size: 1.5rem;

  line-height: 2;

}



.schedule_area p .txt_S {

  font-size: 1.3rem;

}

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



/*wrap up------------------------*/

.btn_wrapup {

  background: url(../img/img_701.jpg) center center / cover no-repeat;

}

/*------------------------wrap up*/



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

.navigation_area.fixed {

  position: fixed;

  z-index: 5;

  bottom: 0;

  width: 100%;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s;

}



.navigation_area.fixed.active {

  opacity: 1;

  pointer-events: auto;

}

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



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

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

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

.LP_page .only_pc {

  display: none;

}



#share {

  z-index: 5 !important;

  transition: transform .6s;

}



#share.move {

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

}



.share-txt {

  display: none !important;

}



.LP_page sup {

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

}



.LP_page .activePoint,

.LP_page .activeDelay {

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

}



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



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

.mv_area {

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

}



.main_ttl {

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

}



.navigation_list {

  padding-left: 0;

}



.navigation_list li a {

  display: block;

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

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

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

}



.navigation_list li:nth-of-type(1) a {

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

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

}



.navigation_list li a::after {

  top: auto;

  right: auto;

  bottom: 0;

  left: 50%;

  transform: translate(-50%, 0) rotate(45deg);

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

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

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

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

}



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

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

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

}



.navigation_list li .nav_img {

  width: fit-content;

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

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

}



.navigation_list li .nav_ttl {

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

}



.summary_area {

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

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

  background: url(../img/bg_001_sp.jpg) center center / cover no-repeat;

}



.summary_area .sec_ttl {

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

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

}



.summary_area .itm_FacePowder {

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

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

  margin: calc(310 * (100vw / 750)) 0 0 calc(-210 * (100vw / 750));

}



.itm_FlawlessTouch {

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

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

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

}



.itm_BaseLuminescence {

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

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

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

}



.summary_area .itm_list {

  display: block;

  padding-left: 0;

}



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

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

}



.summary_area .itm_list li h4 {

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

}



.summary_area .itm_list li h4 .txt_L {

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

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

  line-height: 0;

}



.mv_area .movie_wrap {

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

}



.mv_area .movie_inner {

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

}



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



/*each basemake product----------*/



.each_basemake .for_bg {

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

}



#BaseLuminescence .for_bg {

  background: url(../img/bg_101_sp.jpg) center center / 100% auto no-repeat;

}



#FlawlessTouch .for_bg {

  background: url(../img/bg_201_sp.jpg) center center / 100% auto no-repeat;

}



#BaseLuminescence .sec_inner {

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

}



#FlawlessTouch .sec_inner {

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

}



#FacePowder .sec_inner {

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

}



/*----------each basemake product*/



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

.intro_area {

  width: auto;

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

}



.intro_area .for_unit {

  display: block;

}



.each_basemake:nth-of-type(even) .intro_area .for_unit {

  padding-right: 0;

}



.intro_area .sec_ttl {

  position: relative;

  z-index: 1;

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

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

  margin-left: calc(45 * (100vw / 750)); 

}



.each_basemake:nth-of-type(even) .intro_area .sec_ttl {

  margin-left: calc(15 * (100vw / 750)); 

}



.intro_area .sec_ttl::before {

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

}



.each_basemake:nth-of-type(even) .intro_area .sec_ttl::before {

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

}



#BaseLuminescence .intro_area .sec_ttl {

  margin-top: 0;

}



#FlawlessTouch .intro_area .sec_ttl {

  margin-top: 0;

}



#FacePowder .intro_area .sec_ttl  {

  margin-top: 0;

}



.intro_area .itm_cath {

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

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

}



.intro_area .itm_img_wrap {

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

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

}



.intro_area .itm_feature {

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

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

  margin: calc(226 * (100vw / 750)) 0 0 calc(-92 * (100vw / 750));

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

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

}



.intro_area .itm_name {

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

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

}



.intro_area .itm_price {

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

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

}



.intro_area .itm_price .txt_S {

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

}



.intro_area .itm_link {

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

}



.intro_area .itm_link a {

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

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

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

}



.intro_area .itm_caption {

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

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

  text-align: justify;

}



.intro_area .itm_caption .notes {

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

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

}



.intro_area .feature_list {

  justify-content: center;

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

  width: auto;

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

}



.intro_area .feature_list li {

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

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

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

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

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

}



.intro_area .feature_list li:nth-of-type(6) {

  margin-left: 0;

}



.intro_area .feature_list li:nth-of-type(1) {

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

}



.intro_area .feature_list li:nth-of-type(3) {

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

}

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



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

.point_area {

  width: auto;

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

}



#BaseLuminescence .point_area {

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

}



#FlawlessTouch .point_area {

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

}



.each_point::before {

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

}



.each_point::after {

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

}



.each_point > div > div {

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

}



#FlawlessTouch .each_point:nth-of-type(1) > div > div {

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

}



.each_point > div::before {

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

}



.each_point > div::after {

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

}



.each_point > div > div::before {

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

}



.each_point > div > div::after {

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

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

}



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

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

}



.each_point h4 {

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

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

}



.each_point h5 {

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

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

  line-height: 1.75;

}



#FlawlessTouch .each_point:nth-of-type(1) h5 {

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

}



.point_lead {

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

}



.each_point .notes {

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

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

  line-height: 2;

}



#BaseLuminescence .each_point:nth-of-type(2) .notes {

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

}



.ingredient_list {

  justify-content: center;

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

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

}



.ingredient_list li {

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

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

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

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

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

}



.ingredient_list li:nth-of-type(6) {

  margin-left: 0;

}



.point_img {

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

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

}



.point_list {

  position: static;

  display: block;

  margin: 0 auto;

  pointer-events: auto;

}



.point_list li {

  position: relative;

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

  text-align: center;

}



.point_list li:nth-of-type(1)::before {

  display: none;

}



.point_list li:nth-of-type(1)::after {

  display: none;

}



.point_list li:nth-of-type(2)::before {

  display: none;

}



.point_list li:nth-of-type(2)::after {

  display: none;

}



.point_list li:nth-of-type(3)::before {

  display: none;

}



.point_list li:nth-of-type(3)::after {

  display: none;

}



.point_list li:nth-of-type(4)::before {

  display: none;

}



.point_list li:nth-of-type(4)::after {

  display: none;

}



.point_list li:nth-of-type(n+3) {

  margin-top: 0;

}



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

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

}



.point_list li .txt_B {

  display: block;

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

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

}



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



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

.series_area {

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

}



.series_area h4 {

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

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

}



.series_area h4 .txt_L {

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

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

  line-height: 1.25;

}



.series_img {

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

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

}



.series_table_wrap {

  width: auto;

  margin: 0;

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

  background: #fcfafa;

  overflow-x: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.series_table_wrap::-webkit-scrollbar {

  display: none;

}



.series_table {

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

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

}



.series_table thead th .th_inner {

  gap: calc(48 * (100vw / 750));

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

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

}



.series_table thead th img {

  width: calc(140 * (100vw / 750))

}



.series_table thead th span {

  padding-top: 0;

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

}



.series_table tbody th,

.series_table tbody td {

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

}



.series_table th {

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

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

  line-height: 1.5;

  white-space: nowrap;

}



.series_table tbody th {

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

}



.series_table tbody th::before {

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

  border-left: none;

}



.series_table tbody td {

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

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

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

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

}



.series_table tbody td .td_inner {

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

}



.series_table td .txt_S {

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

}



.series_table td ul li {

  line-height: 1.5;

}



.series_table .feature_list {

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

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

}



.series_area .notes {

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

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

}

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



/*product how to use-------------*/

.howto_area {

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

}



.howto_area h4 {

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

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

}



#BaseLuminescence .howto_area h4 {

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

}



#FlawlessTouch .howto_area h4 {

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

}



.howto_area h4 .txt_L {

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

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

}



.howto_area .for_unit {

  display: block;

}



.howto_img {

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

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

}



.howto_area .movie_wrap {

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

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

}



.howto_area .for_unit .movie_wrap {

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

}



.howto_area .movie_wrap::before {

  width: calc(100% + calc(20 * (100vw / 750)));

  height: calc(100% + calc(20 * (100vw / 750)));

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

}



/*-------------product how to use*/



/*recommend-----------------------*/

.each_sec .sec_inner {

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

}



.each_sec .sec_ttl {

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

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

}



.recommend_area .for_unit {

  width: auto;

  height: auto;

  margin: 0 auto;

  padding-top: 0;

  text-align: center;

}



.recommend_area .itm_cath {

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

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

}



.recommend_area .itm_img {

  position: static;

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

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

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

}



.recommend_area .detail_wrap .for_unit {

  display: block;

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

}



.recommend_area .itm_name {

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

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

}



.recommend_area .itm_price {

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

}



.recommend_area .itm_price .txt_S {

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

}



.recommend_area .itm_link {

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

}



.recommend_area .itm_link a {

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

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

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

}



.recommend_area .itm_caption {

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

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

  text-align: justify;

}



.recommend_area .itm_caption .notes {

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

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

}

/*-----------------------recommend*/



/*campaign-----------------------*/

.campaign_area .itm_img_wrap {

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

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

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

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

}



.campaign_area .itm_img_wrap::before {

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

  height: calc(100% - calc(26 * (100vw / 750)));

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

}



.campaign_area .itm_img_wrap .itm_img {

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

}



.campaign_lead {

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

}



.campaign_lead .notes {

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

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

}

/*-----------------------campaign*/



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

.schedule_area .sec_inner {

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

}



.schedule_area h4 {

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

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

}



.schedule_area h4 .txt_S {

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

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

}



.schedule_area h4 .txt_M {

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

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

}



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

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

}



.schedule_area h5 {

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

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

}



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

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

}



.schedule_area p {

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

}



.schedule_area p .txt_S {

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

}

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



/*wrap up------------------------*/

.btn_wrapup {

  background: url(../img/img_701_sp.jpg) center center / cover no-repeat;

}



.btn_wrapup a {

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

}

/*------------------------wrap up*/



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

.navigation_area.fixed {

  position: fixed;

  z-index: 5;

  bottom: 0;

  width: 100%;

  opacity: 0;

  pointer-events: none;

  transition: opacity 1s;

}



.navigation_area.fixed .navigation_list li a {

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

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

}



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

  height: calc(60 * (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));

  }

}

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