@charset "UTF-8";



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

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#FooterWrap {

  position: relative;

  background: #fff;

  z-index: 1;

}



:root {

  --font_regular: "objektiv-mk1", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;

  --font_jpn: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", "メイリオ", "Meiryo", sans-serif;

  --font_display: "Abril Fatface", serif;

  --color_regular: #595959;

  --color_01: #9EB9D8;

  --color_02: #F6FAFD;

  --color_03: #EDF4FC;

  --color_04: #C8DAEF;

  --color_05: #6192CB;

  --color_accent: #C4A768;

  --color_foundation_pb: #EED6BE;

  --color_foundation_no1: #E4C6A0;

  --color_foundation_no2: #DFB78A;

  --color_foundation_no3: #DDB085;

  --color_colorCorrector_01: #F3EAEB;

  --color_colorCorrector_02: #F4EDD1;

  --color_colorCorrector_03: #E1E8D4;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .1em;

}



.LP_page {

  width: 100%;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page input {

  display: none;

}



.LP_page_inner {

  background: #fff;

}



.LP_page.active {

  opacity: 1;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page sup {

  font-size: calc(8 * (60rem / 390));

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  filter: blur(3px);

  transition: opacity 1s, filter 1.2s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .8s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: 1.6s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: 2.4s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: 3.2s;

}



.LP_page .activeDelay.delay5 {

  transition-delay: 4s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

  filter: unset;

}

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



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

.heading_area {

  margin-bottom: calc(50 * (60rem / 390));

}



.main_lead_wrap {

  margin-top: calc(40 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



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

  margin-top: calc(15 * (60rem / 390));

}



.main_lead {

  font-size: calc(14 * (60rem / 390));

  line-height: 2;

  text-align: center;

}



.concern_list_wrap {

  position: relative;

  z-index: 1;

  margin-top: calc(25 * (60rem / 390));

  padding-bottom: calc(45 * (60rem / 390));

}



.concern_list_wrap::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(53 * (60rem / 390)));

  margin-top: calc(8 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390)) calc(10 * (60rem / 390)) 0 0;

  background: var(--color_02);

  content: "";

}



.concern_list_wrap::after {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  margin-bottom: calc(.5 * (60rem / 390));

  border-top: solid calc(45 * (60rem / 390)) var(--color_02);

  border-left: solid calc(180 * (60rem / 390)) transparent;

  border-right: solid calc(180 * (60rem / 390)) transparent;

  content: "";

}



.concern_list_wrap dt {

  margin-bottom: calc(20 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  font-weight: 700;

  text-align: center;

  color: var(--color_01);

}



.concern_list {

  width: fit-content;

  margin: 0 auto;

  padding-bottom: calc(8 * (60rem / 390));

}



.concern_list li {

  position: relative;

  padding-left: calc(18 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

}



.concern_list li::before {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(12 * (60rem / 390));

  height: calc(12 * (60rem / 390));

  margin-top: calc(1 * (60rem / 390));

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

  content: "";

}



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

  margin-top: calc(12 * (60rem / 390));

}



.main_lead_wrap .txt_highlight {

  font-size: calc(18 * (60rem / 390));

  font-weight: 500;

  text-align: center;

  color: var(--color_accent);

}



.main_lead_wrap .txt_highlight .txt_L {

  position: relative;

  display: block;

  width: fit-content;

  margin: calc(10 * (60rem / 390)) auto;

  font-size: calc(25 * (60rem / 390));

  font-weight: 700;

  line-height: 1.3;

}



.main_lead_wrap .txt_highlight .txt_L::before,

.main_lead_wrap .txt_highlight .txt_L::after {

  position: absolute;

  width: calc(20 * (60rem / 390));

  height: calc(20 * (60rem / 390));

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

  content: "";

}



.main_lead_wrap .txt_highlight .txt_L::before {

  top: 0;

  right: 100%;

  margin-right: calc(15 * (60rem / 390));

}



.main_lead_wrap .txt_highlight .txt_L::after {

  bottom: 0;

  left: 100%;

  scale: -1;

  margin-left: calc(15 * (60rem / 390));

}



.topics_list_wrap {

  margin-top: calc(40 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



.topics_list_wrap dt {

  margin-bottom: calc(8 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  font-weight: 700;

  letter-spacing: .2em;

  text-align: center;

  color: var(--color_01);

}



.topics_list {

  display: grid;

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

  gap: calc(10 * (60rem / 390));

}



.topics_list li a {

  display: grid;

  place-items: center;

  height: calc(94 * (60rem / 390));

  padding: 0 calc(8 * (60rem / 390));

  border: solid var(--color_01) calc(1 * (60rem / 390));

  border-radius: calc(5 * (60rem / 390));

  background: var(--color_01);

  text-align: center;

  color: #fff;

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

}



.topics_list li a:hover {

  background: #fff;

  color: var(--color_01);

}



.topics_list li a p {

  position: relative;

  padding-bottom: calc(10 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  line-height: 1.3;

  letter-spacing: .05em;

}



.topics_list li a p::before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(6 * (60rem / 390));

  height: calc(6 * (60rem / 390));

  border-right: solid #fff calc(1 * (60rem / 390));

  border-bottom: solid #fff calc(1 * (60rem / 390));

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

  transition: border-color .5s;

}



.topics_list li a:hover p::before {

  border-color: var(--color_01);

}



.topics_list li a p .txt_L {

  position: relative;

  display: block;

  margin-top: calc(8 * (60rem / 390));

  padding-bottom: calc(6 * (60rem / 390));

  font-size: calc(18 * (60rem / 390));

  font-weight: 700;

  letter-spacing: .05em;

}



.topics_list li a p .txt_L::before,

.topics_list li a p .txt_L::after {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(1 * (60rem / 390));

  background: linear-gradient(to right, transparent, #fff, transparent);

  content: "";

  transition: opacity .5s;

}



.topics_list li a p .txt_L::before {

  background: linear-gradient(to right, transparent, var(--color_01), transparent);

}



.topics_list li a p .txt_L::after {

  background: linear-gradient(to right, transparent, #fff, transparent);

}



.topics_list li a:hover p .txt_L::after {

  opacity: 0;

}

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



/*Foundation---------------------*/

.each_area {

  padding-top: calc(30 * (60rem / 390));

}



#Foundation {

  margin-bottom: calc(70 * (60rem / 390));

}



.area_ttl {

  position: relative;

  margin-bottom: calc(25 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390)) calc(8 * (60rem / 390));

  font-size: calc(28 * (60rem / 390));

  font-weight: 700;

  text-align: center;

  color: var(--color_01);

}



.area_ttl::before {

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: calc(1 * (60rem / 390));

  background: linear-gradient(to right, transparent, var(--color_01), transparent);

  content: "";

}



.area_ttl .txt_S {

  display: block;

  margin-bottom: calc(8 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  font-weight: 400;

}



.area_lead {

  font-size: calc(15 * (60rem / 390));

  line-height: 1.75;

  text-align: center;

}



.area_lead .notes {

  display: block;

  margin-top: calc(15 * (60rem / 390));

  font-size: calc(10 * (60rem / 390));

  line-height: 1.3;

}



.product_summary_wrap {

  position: relative;

  margin-top: calc(10 * (60rem / 390));

}



.product_summary_wrap::before,

.product_summary_wrap::after {

  position: absolute;

  left: 0;

  width: 100%;

  height: calc(70 * (60rem / 390));

  background: linear-gradient(#fff, transparent);

  content: "";

}



.product_summary_wrap::before {

  top: 0;

  margin-top: calc(-1 * (60rem / 390));

}



.product_summary_wrap::after {

  bottom: 0;

  margin-bottom: calc(-1 * (60rem / 390));

  scale: 1 -1;

}



.product_summary_wrap .txt_wrap {

  position: absolute;

  z-index: 1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  margin-left: calc(90 * (60rem / 390));

  text-align: center;

  white-space: nowrap;

}



.product_catch {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  font-weight: 600;

  line-height: 1.5;

  color: var(--color_01);

}



.product_catch .txt_L {

  font-family: var(--font_jpn);

  font-size: calc(24 * (60rem / 390));

}



.product_name {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: .05em;

}



.product_price {

  font-size: calc(13 * (60rem / 390));

  font-weight: 500;

  letter-spacing: .05em;

}



.product_price .txt_S {

  margin-left: calc(5 * (60rem / 390));

  font-family: var(--font_jpn);

  font-size: calc(10 * (60rem / 390));

  letter-spacing: .05em;

}



.product_feature_list {

  margin-top: calc(15 * (60rem / 390));

}



.product_feature_list li {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: calc(84 * (60rem / 390));

  height: calc(84 * (60rem / 390));

  color: var(--color_accent);

}



.product_feature_list li:nth-of-type(1) {

  margin-left: calc(60 * (60rem / 390));

}



.product_feature_list li:nth-of-type(2) {

  margin: calc(-20 * (60rem / 390)) 0 0 calc(-5 * (60rem / 390));

}



.product_feature_list li:nth-of-type(3) {

  margin: calc(-60 * (60rem / 390)) 0 0 calc(85 * (60rem / 390));

}



.product_feature_list li::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

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

  content: "";

  pointer-events: none;

}



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

  rotate: -80deg;

}



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

  rotate: 190deg;

}



.product_feature_list li p {

  font-size: calc(13 * (60rem / 390));

  font-weight: 700;

  line-height: 1.3;

}



.each_content {

  margin-top: calc(50 * (60rem / 390));

}



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

  margin-top: calc(60 * (60rem / 390));

}



.each_content .content_ttl {

  position: relative;

  z-index: 1;

  width: fit-content;

  margin: 0 auto calc(20 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  font-weight: 700;

  line-height: 1.5;

  text-align: center;

  color: var(--color_01);

}



.each_content .content_ttl::before {

  position: absolute;

  z-index: -1;

  top: 0;

  right: 100%;

  width: calc(80 * (60rem / 390));

  height: calc(80 * (60rem / 390));

  margin: calc(-24 * (60rem / 390)) calc(-40 * (60rem / 390)) 0 0;

  background: radial-gradient(var(--color_04), transparent 60%);

  content: "";

  opacity: .8;

}



.content_lead_wrap .content_lead {

  font-size: calc(14 * (60rem / 390));

  line-height: 1.75;

  text-align: center;

}



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

  margin-top: calc(25 * (60rem / 390));

}



.colorVariation_area {

  margin-top: calc(50 * (60rem / 390));

}



.tab_list {

  display: grid;

  gap: calc(4 * (60rem / 390));

  grid-template-columns: 1fr 1fr;

  padding: 0 calc(15 * (60rem / 390));

}



.tab_list li label {

  position: relative;

  display: grid;

  place-items: center;

  height: calc(72 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390)) calc(10 * (60rem / 390)) 0 0;

  background: var(--color_04);

  color: #fff;

  text-align: center;

  cursor: pointer;

  transition: background-color .3s;

}



.tab_list li.selected label {

  background: var(--color_01);

  height: calc(75 * (60rem / 390));

}



.tab_list li label .case_num {

  position: absolute;

  top: 0;

  left: 0;

  margin: calc(-45 * (60rem / 390)) 0 0 calc(-3 * (60rem / 390));

  font-family: var(--font_display);

  font-size: calc(30 * (60rem / 390));

  color: var(--color_01);

  mix-blend-mode: multiply;

}



.tab_list li label .case_num span {

  display: block;

  width: calc(45 * (60rem / 390));

  margin-bottom: calc(-2 * (60rem / 390));

}



.tab_list li label .case_ttl {

  font-size: calc(15 * (60rem / 390));

  font-weight: 700;

  line-height: 1.3;

}



.tab_list li label .case_ttl .txt_S {

  display: block;

  margin-bottom: calc(2 * (60rem / 390));

  font-size: calc(12 * (60rem / 390));

  font-weight: 400;

  line-height: 1.4;

  letter-spacing: .05em;

}



.switching_area {

  border-top: solid var(--color_01) calc(2 * (60rem / 390));

}



.each_case {

  opacity: 0;

  overflow: hidden;

  height: 0;

  transition: opacity .3s;

}



.each_case.selected {

  opacity: 1;

  overflow: visible;

  height: auto;

}



.each_case:nth-of-type(1).selected {

  padding-top: calc(25 * (60rem / 390));

}



.each_case:nth-of-type(2).selected {

  padding: calc(30 * (60rem / 390)) 0;

  background: var(--color_02);

}



.question_list {

  margin-bottom: calc(30 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



.question_list .each_question.hidden {

  display: none;

}



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

  margin-top: calc(20 * (60rem / 390));

}



.question_list dt {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  letter-spacing: .05em;

}



.question_list dt span {

  margin-right: calc(6 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  font-weight: 700;

  color: var(--color_01);

}



.answer_list {

  display: grid;

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

  gap: calc(4 * (60rem / 390));

}



.answer_list li label {

  display: grid;

  place-items: center;

  height: calc(40 * (60rem / 390));

  background: var(--color_02);

  font-size: calc(15 * (60rem / 390));

  letter-spacing: .05em;

  cursor: pointer;

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

}



.answer_list li input:checked + label {

  background: var(--color_01);

  font-weight: 700;

  color: #fff;

}



.result_wrap {

  margin-bottom: calc(15 * (60rem / 390));

  text-align: center;

}



.result_wrap p {

  font-size: calc(15 * (60rem / 390));

  line-height: 1.5;

  letter-spacing: .05em;

  transition: opacity .3s;

}



.result_wrap p span {

  font-weight: 700;

  color: var(--color_01);

}



.result_wrap p.hidden,

.result_wrap dl.hidden,

.result_wrap dd.hidden {

  opacity: 0;

  overflow: hidden;

  height: 0;

}



.result_wrap dd {

  transition: opacity .3s;

}



.result_wrap dt {

  margin-bottom: calc(12 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  font-weight: 500;

  color: var(--color_accent);

}



.result_wrap dd {

  font-size: calc(20 * (60rem / 390));

  font-weight: 500;

  transition: opacity .3s;

}



.foundation_list_wrap .thumbnail_list {

   position: relative;

  z-index: 1;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  gap: calc(15 * (60rem / 390));

  min-height: calc(70 * (60rem / 390));

  margin-bottom: calc(-6 * (60rem / 390));

}



.foundation_list_wrap .thumbnail_list li label {

  position: relative;

  display: grid;

  place-items: center;

  width: calc(50 * (60rem / 390));

  height: calc(50 * (60rem / 390));

  border-radius: 50%;

  font-size: calc(17 * (60rem / 390));

  font-weight: 500;

  letter-spacing: 0;

  color: #fff;

  box-shadow: 0 calc(5 * (60rem / 390)) calc(5 * (60rem / 390)) rgba(0, 0, 0, .1);

  transition: width .3s, height .3s, font-size .3s;

  cursor: pointer;

}



.foundation_list_wrap .thumbnail_list li.selected label {

  width: calc(70 * (60rem / 390));

  height: calc(70 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

}



.foundation_list_wrap .thumbnail_list li label::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(100% + calc(6 * (60rem / 390)));

  height: calc(100% + calc(6 * (60rem / 390)));

  border-radius: 50%;

  border: solid var(--color_01) calc(2 * (60rem / 390));

  box-sizing: border-box;

  content: "";

  pointer-events: none;

  opacity: 0;

  transition: opacity .5s;

}



.foundation_list_wrap .thumbnail_list li.recommended label::before {

  opacity: 1;

}



.foundation_list_wrap .thumbnail_list li:nth-of-type(1) label {

  background: var(--color_foundation_pb);

}



.foundation_list_wrap .thumbnail_list li:nth-of-type(2) label {

  background: var(--color_foundation_no1);

}



.foundation_list_wrap .thumbnail_list li:nth-of-type(3) label {

  background: var(--color_foundation_no2);

}



.foundation_list_wrap .thumbnail_list li:nth-of-type(4) label {

  background: var(--color_foundation_no3);

}



.product_list .slick-track {

  display: flex;

}



.product_list .slick-slide {

  height: auto;

}



.product_list {

  overflow: hidden;

}



.each_foundation {

  position: relative;

  width: calc(390 * (60rem / 390));

  padding: calc(35 * (60rem / 390)) calc(15 * (60rem / 390));

  background: #FAF7F4;

}



.each_foundation::before {

  position: absolute;

  top: 0;

  left: 0;

  margin: calc(60 * (60rem / 390)) 0 0 calc(10 * (60rem / 390));

  font-family: var(--font_display);

  font-size: calc(38 * (60rem / 390));

  letter-spacing: .03em;

  writing-mode: vertical-lr;

  color: var(--color_01);

  content: "Recommended color";

  opacity: 0;

  transition: opacity .5s;

}



.each_foundation.recommended::before {

  opacity: .3;

}



.foundation_name {

  margin-bottom: calc(20 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  font-weight: 500;

  text-align: center;

}



.foundation_name .variation_name {

  display: block;

  margin-top: calc(8 * (60rem / 390));

  font-size: calc(18 * (60rem / 390));

  font-weight: 700;

}



.foundation_img_wrap {

  position: relative;

  width: calc(260 * (60rem / 390));

  margin: 0 auto calc(20 * (60rem / 390));

}



.foundation_img,

.variation_feature {

  border-radius: calc(20 * (60rem / 390));

  overflow: clip;

}



.variation_feature {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  pointer-events: none;

}



.variation_feature p {

  display: grid;

  place-items: center;

  width: calc(140 * (60rem / 390));

  height: calc(140 * (60rem / 390));

  margin: calc(-45 * (60rem / 390)) 0 0 calc(-45 * (60rem / 390));

  padding: calc(35 * (60rem / 390)) 0 0 calc(35 * (60rem / 390));

  border-radius: 50%;

  font-size: calc(15 * (60rem / 390));

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: .05em;

  text-align: center;

  color: #fff;

}



.foundation_pb .variation_feature p {

  background: linear-gradient(135deg, #FAECDF 20%, var(--color_foundation_pb));

  font-size: calc(13 * (60rem / 390));

}



.foundation_no1 .variation_feature p {

  background: linear-gradient(135deg, #FFECD3 20%, var(--color_foundation_no1));

}



.foundation_no2 .variation_feature p {

  background: linear-gradient(135deg, #F0DAC1 20%, var(--color_foundation_no2));

}



.foundation_no3 .variation_feature p {

  background: linear-gradient(135deg, #F7E2CE 20%, var(--color_foundation_no3));

}



.each_foundation .foundation_texture {

  position: absolute;

  bottom: 0;

  right: 0;

  width: calc(130 * (60rem / 390));

  margin: 0 calc(-65 * (60rem / 390)) calc(-40 * (60rem / 390)) 0;

  pointer-events: none;

}



.foundation_cath {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(17 * (60rem / 390));

  font-weight: 500;

  line-height: 1.75;

  letter-spacing: .05em;

  text-align: center;

}



.product_price_wrap {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: calc(20 * (60rem / 390));

}



.product_price {

  font-size: calc(13 * (60rem / 390));

  font-weight: 500;

  letter-spacing: .05em;

}



.product_price .txt_S {

  margin-left: calc(5 * (60rem / 390));

  font-family: var(--font_jpn);

  font-size: calc(10 * (60rem / 390));

  letter-spacing: .05em;

}



.product_link {

  display: grid !important;

  place-items: center;

  width: calc(90 * (60rem / 390));

  height: calc(26 * (60rem / 390));

  border: solid var(--color_01) calc(1 * (60rem / 390));

  background: var(--color_01);

  font-size: calc(14 * (60rem / 390));

  font-weight: 500;

  color: #fff;

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

}



.product_link:hover {

  background: #fff;

  color: var(--color_01);

}



.each_foundation .product_link {

  width: calc(100 * (60rem / 390));

  height: calc(30 * (60rem / 390));

}



.scene_list {

  margin-top: calc(15 * (60rem / 390));

  padding: calc(20 * (60rem / 390));

  background: #fff;

}



.scene_list li {

  position: relative;

  padding-left: calc(18 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  line-height: 1.3;

  letter-spacing: .125em;

  font-feature-settings: "palt";

}



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

  margin-top: calc(10 * (60rem / 390));

}



.scene_list li .txt_highlight {

  font-weight: 700;

  line-height: 1.3;

  letter-spacing: .125em;

  color: var(--color_05);

}



.scene_list li::before {

  position: absolute;

  top: 0;

  left: 0;

  width: calc(12 * (60rem / 390));

  height: calc(12 * (60rem / 390));

  margin-top: calc(2 * (60rem / 390));

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

  content: "";

}



.foundationMap_list {

  position: relative;

  width: calc(376 * (60rem / 390));

  height: calc(450 * (60rem / 390));

  margin: 0 auto;

  border-radius: calc(20 * (60rem / 390));

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

}



.foundationMap_list li {

  position: absolute;

  width: fit-content;

}



.foundationMap_list li.foundation_pb {

  top: 0;

  left: 0;

  margin: calc(80 * (60rem / 390)) 0 0 calc(250 * (60rem / 390));

}



.foundationMap_list li.foundation_no1 {

  top: 0;

  left: 50%;

  translate: -50% 0;

  margin-top: calc(80 * (60rem / 390));

}



.foundationMap_list li.foundation_no2 {

  top: 50%;

  left: 50%;

  translate: -50% -50%;

}



.foundationMap_list li.foundation_no3 {

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  margin-bottom: calc(80 * (60rem / 390));

}



.foundationMap_list li .txt_wrap {

  position: absolute;

  bottom: 100%;

  right: 100%;

  text-align: right;

  white-space: nowrap;

  margin-bottom: calc(-15 * (60rem / 390));

}



.foundationMap_list li.foundation_pb .txt_wrap {

  bottom: auto;

  right: auto;

  top: 100%;

  left: 50%;

  translate: -50% 0;

  margin: calc(5 * (60rem / 390)) 0 0 0;

  text-align: center;

}



.foundationMap_list li .color_name {

  margin-bottom: calc(4 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  font-weight: 700;

  letter-spacing: .05em;

}



.foundationMap_list li.foundation_pb .color_name {

  color: #E6C4A1;

}



.foundationMap_list li.foundation_no1 .color_name {

  color: var(--color_foundation_no1);

}



.foundationMap_list li.foundation_no2 .color_name {

  color: var(--color_foundation_no2);

}



.foundationMap_list li.foundation_no3 .color_name {

  color: var(--color_foundation_no3);

}



.foundationMap_list li .color_caption {

  font-size: calc(12 * (60rem / 390));

  line-height: 1.3;

  letter-spacing: .05em;

}



.color_num_wrap {

  position: relative;

  width: calc(60 * (60rem / 390));

  height: calc(60 * (60rem / 390));

}



.color_num_wrap .color_num {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  font-size: calc(18 * (60rem / 390));

  font-weight: 500;

  letter-spacing: 0;

  color: #fff;

  cursor: pointer;

}



.color_num_wrap .color_num::before {

  position: absolute;

  z-index: -1;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  box-shadow: 0 calc(5 * (60rem / 390)) calc(5 * (60rem / 390)) rgba(0, 0, 0, .1);

  content: "";

  animation: circle 4s infinite;

}



@keyframes circle {

  0% {

    scale: 1;

  }

  50% {

      scale: .9;

  }

  100% {

      scale: 1;

  }

}



.foundationMap_list li.foundation_pb .color_num_wrap .color_num::before {

  background: linear-gradient(135deg, var(--color_foundation_pb), #FAECDF);

}



.foundationMap_list li.foundation_no1 .color_num_wrap .color_num::before {

  background: linear-gradient(135deg, var(--color_foundation_no1), #FFECD3);

}



.foundationMap_list li.foundation_no2 .color_num_wrap .color_num::before {

  background: linear-gradient(135deg, var(--color_foundation_no2), #F0DAC1);

}



.foundationMap_list li.foundation_no3 .color_num_wrap .color_num::before {

  background: linear-gradient(135deg, var(--color_foundation_no3), #F7E2CE);

}



.color_num_wrap .foundation_texture {

  position: absolute;

  z-index: 1;

  bottom: 0;

  right: 0;

  width: calc(30 * (60rem / 390));

  margin: 0 calc(-8 * (60rem / 390)) calc(-5 * (60rem / 390)) 0;

  pointer-events: none;

}



body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



#HeaderWrap.hidden {

  opacity: 0;

  pointer-events: none;

}



.modal_outside.hidden {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 50%;

  translate: -50% 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_outside::-webkit-scrollbar {

  display:none;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(246, 250, 253, .8);

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  display: block;

  width: calc(360 * (60rem / 390));

  margin: 0 auto;

  max-height: 100%;

  padding: calc(30 * (60rem / 390)) 0;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_foundationList .modal_wrap {

  width: calc(390 * (60rem / 390));

  padding: calc(50 * (60rem / 390)) 0;

}



.modal_inner {

  position: relative;

}



.btn_modalClose {

  position: fixed;

  z-index: 2;

  width: calc(30 * (60rem / 390));

  height: calc(30 * (60rem / 390));

  margin: calc(10 * (60rem / 390)) 0 0 calc(320 * (60rem / 390));

  rotate: 45deg;

  border: none;

  background: none;

  cursor: pointer;

  transition: rotate .3s;

}



.modal_foundationList .btn_modalClose {

  margin: calc(-35 * (60rem / 390)) 0 0 calc(340 * (60rem / 390));

}



.btn_modalClose:hover {

  rotate: 135deg;

}



.btn_modalClose::before,

.btn_modalClose::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(1 * (60rem / 390));

  height: 100%;

  background: var(--color_regular);

  content: "";

}



.btn_modalClose::before {

  rotate: 90deg;

}



.modal_content {

  background: #fff;

}



.modal_foundationList .modal_content {

  background: none;

}



.basemake_list_wrap .thumbnail_list {

  display: flex;

  justify-content: center;

  gap: calc(4 * (60rem / 390));

  margin-bottom: calc(15 * (60rem / 390));

}



.basemake_list_wrap .thumbnail_list li label {

  position: relative;

  z-index:  1;

  display: block;

  width: calc(122 * (60rem / 390));

  padding-bottom: calc(8 * (60rem / 390));

  text-align: center;

  cursor: pointer;

}



.basemake_list_wrap .thumbnail_list li label::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(53 * (60rem / 390));

  border-radius: calc(5 * (60rem / 390));

  background: var(--color_03);

  content: "";

  transition: background-color .5s;

}



.basemake_list_wrap .thumbnail_list li.selected label::before {

  background: var(--color_01);

}



.basemake_list_wrap .thumbnail_list li figure {

  width: calc(60 * (60rem / 390));

  margin: 0 auto calc(4 * (60rem / 390));

}



.basemake_list_wrap .thumbnail_list li p {

  font-size: calc(14 * (60rem / 390));

  letter-spacing: .05em;

  transition: color .5s;

}



.basemake_list_wrap .thumbnail_list li.selected p {

  font-weight: 700;

  color: #fff;

}



.each_basemake {

  width: calc(280 * (60rem / 390));

  margin-right: calc(15 * (60rem / 390));

  padding: calc(25 * (60rem / 390)) calc(10 * (60rem / 390));

  border-radius: calc(5 * (60rem / 390));

  border: solid var(--color_01) calc(1 * (60rem / 390));

}



.basemake_cath {

  margin-bottom: calc(8 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

  line-height: 1.75;

  text-align: center;

}



.basemake_img {

  width: calc(230 * (60rem / 390));

  margin: 0 auto calc(8 * (60rem / 390));

}



.basemake_name {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  line-height: 1.5;

  font-weight: 400;

  text-align: center;

}



.basemake_name .txt_S {

  font-size: calc(13 * (60rem / 390));

}



.btn_allItems {

  display: grid !important;

  place-items: center;

  width: calc(280 * (60rem / 390));

  height: calc(46 * (60rem / 390));

  margin: 0 auto;

  border: solid var(--color_01) calc(1 * (60rem / 390));

  background: var(--color_01);

  font-size: calc(14 * (60rem / 390));

  font-weight: 700;

  color: #fff;

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

}



.btn_allItems:hover {

  background: #fff;

  color: var(--color_01);

}



#Foundation .btn_allItems {

  margin-top: calc(35 * (60rem / 390));

  font-size: calc(18 * (60rem / 390));

  font-weight: 500;

}



/*---------------------Foundation*/



/*StaffReview---------------------*/

#StaffReview {

  margin-bottom: calc(60 * (60rem / 390));

}



.staff_profil {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: calc(20 * (60rem / 390));

  margin-bottom: calc(20 * (60rem / 390));

  text-align: center;

}



.staff_img_wrap {

  width: calc(120 * (60rem / 390));

}



.staff_img_wrap p {

  margin-bottom: calc(-20 * (60rem / 390));

}



.staff_img_wrap figure {

  border-radius: 50%;

  overflow: hidden;

}



.staff_name {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(17 * (60rem / 390));

  font-weight: 500;

}



.staff_name .txt_S {

  display: block;

  margin-bottom: calc(5 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

}



.staff_name .txt_M {

  font-size: calc(14 * (60rem / 390));

}



.staff_skinType {

  width: calc(150 * (60rem / 390));

  border: solid var(--color_01) calc(1 * (60rem / 390));

  border-radius: calc(5 * (60rem / 390));

  background: #fff;

  overflow: clip;

}



.staff_skinType dt {

  padding: calc(3 * (60rem / 390)) 0;

  background: var(--color_01);

  font-size: calc(12 * (60rem / 390));

  color: #fff;

}



.staff_skinType dd {

  padding: calc(8 * (60rem / 390)) 0;

  font-size: calc(15 * (60rem / 390));

}



.item_list_wrap {

  margin-bottom: calc(40 * (60rem / 390));

}



.item_list_wrap dt {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  font-weight: 500;

  text-align: center;

  color: var(--color_05);

}



.item_list_wrap dd .item_list {

  padding: 0 calc(45 * (60rem / 390));;

}



.item_list_wrap dd .item_list li:nth-of-type(n+2) {

  margin-top: calc(5 * (60rem / 390));

}



.item_list_wrap dd .item_list li a {

  position: relative;

  display: flex;

  align-items: center;

  height: calc(76 * (60rem / 390));

}



.item_list_wrap dd .item_list li:nth-of-type(odd) a {

  padding-left: calc(75 * (60rem / 390));

  background: linear-gradient(to right, var(--color_03) 65%, transparent);



}



.item_list_wrap dd .item_list li:nth-of-type(even) a {

  padding-right: calc(75 * (60rem / 390));

  background: linear-gradient(to left, var(--color_03) 65%, transparent);

}



.item_list_wrap dd .item_list li a figure {

  position: absolute;

  bottom: 0;

  width: calc(24 * (60rem / 390));

  margin-bottom: calc(8 * (60rem / 390));

}



.item_list_wrap dd .item_list li:nth-of-type(odd) a figure {

  left: 0;

  margin-left: calc(20 * (60rem / 390));

  rotate: -6deg;

}



.item_list_wrap dd .item_list li:nth-of-type(even) a figure {

  right: 0;

  margin-right: calc(20 * (60rem / 390));

  rotate: 6deg;

}



.item_list_wrap dd .item_list li a figure::before {

  position: absolute;

  bottom: 0;

  width: calc(50 * (60rem / 390));

  height: calc(50 * (60rem / 390));

  margin-bottom: calc(20 * (60rem / 390));

  content: "";

}



.item_list_wrap dd .item_list li:nth-of-type(odd) a figure::before {

  right: 100%;

  scale: -1 1;

}



.item_list_wrap dd .item_list li:nth-of-type(even) a figure::before {

  left: 100%;

}



.item_list_wrap dd .item_list li:nth-of-type(1) a figure::before {

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

}



.item_list_wrap dd .item_list li:nth-of-type(2) a figure::before {

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

}



.item_list_wrap dd .item_list li a h3 {

  width: 100%;

  font-size: calc(13 * (60rem / 390));

  font-weight: 400;

  line-height: 1.5;

}



.item_list_wrap dd .item_list li:nth-of-type(even) a h3 {

  text-align: right;

}



.makeup_img_wrap {

  margin-bottom: calc(30 * (60rem / 390));

}



.makeup_img_wrap .each_img {

  position: relative;

}



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

  margin-top: calc(25 * (60rem / 390));

}



.makeup_img_wrap .each_img:nth-of-type(n+2)::before {

  position: absolute;

  z-index: 1;

  bottom: 100%;

  left: 50%;

  translate: -50% 0;

  width: calc(20 * (60rem / 390));

  height: calc(38 * (60rem / 390));

  margin-bottom: calc(-6 * (60rem / 390));

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

  content: "";

}



.makeup_img_wrap .each_img figure {

  width: calc(264 * (60rem / 390));

  margin: 0 auto;

}



.makeup_img_wrap .each_img p {

  position: absolute;

  top: 0;

  display: flex;

  align-items: center;

  width: fit-content;

  height: calc(36 * (60rem / 390));

  margin-top: calc(25 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

  background: rgba(158, 185, 216, .6);

  font-size: calc(18 * (60rem / 390));

  font-weight: 700;

  color: #fff;

}



.makeup_img_wrap .each_img:nth-of-type(odd) p {

  left: 0;

}



.makeup_img_wrap .each_img:nth-of-type(even) p {

  right: 0;

}



#StaffReview .review_txt {

  padding: 0 calc(15 * (60rem / 390));

}



#StaffReview .review_txt div:nth-of-type(n+2) {

  margin-top: calc(35 * (60rem / 390));

}



#StaffReview .review_txt dt {

  margin-bottom: calc(12 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  letter-spacing: .05em;

}



#StaffReview .review_txt dt span {

  margin-right: calc(4 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  font-weight: 700;

  color: var(--color_01);

}



#StaffReview .review_txt dd {

  font-size: calc(13 * (60rem / 390));

  line-height: 1.75;

  text-align: justify;

}



#StaffReview .review_txt dd .txt_highlight {

  font-size: calc(15 * (60rem / 390));

  font-weight: 700;

  line-height: 1.75;

  color: var(--color_05);

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .5s;

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_inner {

  position: relative;

  overflow: hidden;

}



#StaffReview .review_txt {

  min-height: calc(150 * (60rem / 390));

}



.accordion_inner::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(50 * (60rem / 390));

  background: linear-gradient(transparent, #fff);

  content: "";

  transition: opacity .5s;

  overflow: hidden;

}



.open .accordion_inner::before {

  opacity: 0;

}



.accordion_btn {

  width: fit-content;

  margin: calc(12 * (60rem / 390)) auto 0;

  cursor: pointer;

}



.accordion_btn span {

  display: block;

  font-size: calc(13 * (60rem / 390));

  font-weight: 500;

  letter-spacing: .05em;

}



.accordion_btn .to_open,

.open .accordion_btn .to_close  {

  opacity: 1;

  overflow: visible;

  width: auto;

  height: auto;

  transition: opacity .5s;

}



.open .accordion_btn .to_open,

.accordion_btn .to_close  {

  opacity: 0;

  overflow: hidden;

  width: 0;

  height: 0;

}

/*---------------------StaffReview*/



/*Color Corrector-----------------*/

#ColorCorrector {

  margin-bottom: calc(60 * (60rem / 390));

}



.colorCorrector_list_wrap {

  position: relative;

  margin-top: calc(35 * (60rem / 390));

}



.colorCorrector_list_wrap .thumbnail_list {

  display: flex;

  justify-content: center;

  gap: calc(5 * (60rem / 390));

}



.colorCorrector_list_wrap .thumbnail_list_wrap {

  margin-bottom: calc(20 * (60rem / 390));

}



.colorCorrector_list_wrap .thumbnail_list_wrap h3 {

  margin-bottom: calc(18 * (60rem / 390));

  font-size: calc(22 * (60rem / 390));

  font-weight: 400;

  text-align: center;

}



.colorCorrector_list_wrap .thumbnail_list_wrap h3 .txt_eng {

  display: block;

  margin-bottom: calc(12 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  font-weight: 500;

  color: var(--color_05);

}



.colorCorrector_list_wrap .thumbnail_list li label {

  display: grid;

  place-items: center;

  width: calc(120 * (60rem / 390));

  height: calc(60 * (60rem / 390));

  border-radius: calc(3 * (60rem / 390));

  border: solid calc(1 * (60rem / 390));

  background: #fff;

  transition: background-color .5s;

  cursor: pointer;

}



.colorCorrector_list_wrap .thumbnail_list li:nth-of-type(1) label {

  border-color: var(--color_colorCorrector_01);

}



.colorCorrector_list_wrap .thumbnail_list li:nth-of-type(2) label {

  border-color: var(--color_colorCorrector_02);

}



.colorCorrector_list_wrap .thumbnail_list li:nth-of-type(3) label {

  border-color: var(--color_colorCorrector_03);

}



.colorCorrector_list_wrap .thumbnail_list li.selected:nth-of-type(1) label {

  background: var(--color_colorCorrector_01);

}



.colorCorrector_list_wrap .thumbnail_list li.selected:nth-of-type(2) label {

  background: var(--color_colorCorrector_02);

}



.colorCorrector_list_wrap .thumbnail_list li.selected:nth-of-type(3) label {

  background: var(--color_colorCorrector_03);

}



.colorCorrector_list_wrap .thumbnail_list li label p {

  font-size: calc(14 * (60rem / 390));

  line-height: 1.5;

  letter-spacing: .05em;

  text-align: center;

}



.each_colorCorrector {

  position: relative;

  z-index: 1;

  width: calc(280 * (60rem / 390));

  margin-right: calc(15 * (60rem / 390));

  padding: calc(20 * (60rem / 390)) 0;

}



.each_colorCorrector::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  content: "";

  opacity: .4;

}



.colorCorrector_01::before {

  background: linear-gradient(transparent, var(--color_colorCorrector_01));

}



.colorCorrector_02::before {

  background: linear-gradient(transparent, var(--color_colorCorrector_02));

}



.colorCorrector_03::before {

  background: linear-gradient(transparent, var(--color_colorCorrector_03));

}



.colorCorrector_cath {

  margin-bottom: calc(8 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

  line-height: 1.75;

  text-align: center;

}



.colorCorrector_img {

  width: calc(230 * (60rem / 390));

  margin: 0 auto calc(8 * (60rem / 390));

}



.colorCorrector_name {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  line-height: 1.5;

  font-weight: 400;

  text-align: center;

}



.colorCorrector_list_wrap .btn_tips {

  position: absolute;

  z-index: 1;

  bottom: 0;

  right: 0;

  display: grid;

  place-items: center;

  width: calc(70 * (60rem / 390));

  height: calc(70 * (60rem / 390));

  margin: 0 calc(20 * (60rem / 390)) calc(75 * (60rem / 390)) 0;

  text-align: center;

  color: var(--color_accent);

  cursor: pointer;

}



.colorCorrector_list_wrap .btn_tips span {

  position: relative;

  padding-bottom: calc(25 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  font-weight: 500;

  letter-spacing: .05em;

}



.colorCorrector_list_wrap .btn_tips span::before,

.colorCorrector_list_wrap .btn_tips span::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(1 * (60rem / 390));

  height: calc(20 * (60rem / 390));

  background: var(--color_accent);

  content: "";

}



.colorCorrector_list_wrap .btn_tips span::after {

  rotate: 90deg;

}



.colorCorrector_list_wrap .btn_tips::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #fff;

  content: "";

  box-shadow: 0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .15);

  animation: circle 4s infinite;

}



.modal_colorCorrectorTips .modal_content {

  padding: calc(35 * (60rem / 390)) calc(15 * (60rem / 390));

  box-shadow: 0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .15);

}



.modal_colorCorrectorTips .modal_content h3 {

  margin-bottom: calc(12 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

  line-height: 1.5;

  font-weight: 700;

  text-align: center;

}



.howto_list li {

  display: flex;

  align-items: center;

  gap: calc(10 * (60rem / 390));

  padding: calc(15 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

}



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

  margin-top: calc(5 * (60rem / 390));

}



.howto_list li:nth-of-type(1) {

  background: var(--color_colorCorrector_01);

}



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

  background: var(--color_colorCorrector_02);

}



.howto_list li:nth-of-type(3) {

  background: var(--color_colorCorrector_03);

}



.howto_list li figure {

  width: calc(130 * (60rem / 390));

}



.howto_list li p {

  flex: 1;

  font-size: calc(13 * (60rem / 390));

  line-height: 1.5;

  letter-spacing: .05em;

}



.howto_list li p .notes {

  display: block;

  margin-top: calc(8 * (60rem / 390));

  font-size: calc(10 * (60rem / 390));

  line-height: 1.3;

}



.colorCorrector_notes {

  margin-top: calc(15 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

  font-size: calc(10 * (60rem / 390));

  line-height: 1.5;

  text-align: right;

}



#ColorCorrector .review_wrap {

  margin-top: calc(45 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



#ColorCorrector .review_wrap h3 {

  position: relative;

  width: fit-content;

  margin: 0 auto calc(30 * (60rem / 390));

  font-size: calc(22 * (60rem / 390));

  color: var(--color_01);

  text-decoration: underline;

  text-decoration-skip-ink: none;

  text-decoration-thickness: calc(1 * (60rem / 390));

  text-underline-offset: calc(5 * (60rem / 390));

}



#ColorCorrector .review_wrap h3::before,

#ColorCorrector .review_wrap h3::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(10 * (60rem / 390));

  margin-bottom: calc(-5 * (60rem / 390));

  content: "";

}



#ColorCorrector .review_wrap h3::before {

  height: calc(4 * (60rem / 390));

  background: #fff;

}



#ColorCorrector .review_wrap h3::after {

  height: calc(1 * (60rem / 390));

  margin-bottom: calc(-3 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  background: var(--color_01);

  rotate: -60deg;

  transform-origin: center right;

}



#ColorCorrector .review_wrap .makeup_img {

  margin-bottom: calc(20 * (60rem / 390));

}



.reviewitem_list {

  margin-bottom: calc(22 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



.reviewitem_list li {

  display: flex;

  align-items: center;

}



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

  margin-top: calc(5 * (60rem / 390));

}



.reviewitem_list li .colorSample_img {

  width: calc(20 * (60rem / 390));

  margin-right: calc(8 * (60rem / 390));

}



.reviewitem_list li .color_name {

  font-size: calc(16 * (60rem / 390));

  font-weight: 700;

  color: var(--color_01);

}



.reviewitem_list li .makepoint {

  position: relative;

  flex: 1;

  margin-left: calc(10 * (60rem / 390));

  font-family: var(--font_jpn);

  font-size: calc(14 * (60rem / 390));

  font-weight: 500;

  text-align: right;

}



.reviewitem_list li .makepoint::before {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

  left: 0;

  width: 100%;

  height: calc(1 * (60rem / 390));

  background: linear-gradient(to right, var(--color_regular) calc(2 * (60rem / 390)), transparent calc(2 * (60rem / 390))) center left / calc(4 * (60rem / 390)) auto repeat-x;

  content: "";

  opacity: .5;

}



.reviewitem_list li .makepoint span {

  position: relative;

  padding-left: calc(10 * (60rem / 390));

  background: #fff;

}



#ColorCorrector .review_wrap .review_txt {

  min-height: calc(120 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  line-height: 1.75;

  text-align: justify;

}

/*-----------------Color Corrector*/



/*pick up items-----------------*/

#PickupItems {

  margin-bottom: calc(50 * (60rem / 390));

}



.eyeshadow_list_wrap {

  margin-top: calc(35 * (60rem / 390));

}

.eyeshadow_list_wrap .thumbnail_list {

  display: flex;

  justify-content: center;

  gap: calc(15 * (60rem / 390));

  margin-bottom: calc(25 * (60rem / 390));

}



.eyeshadow_list_wrap .thumbnail_list li {

  position: relative;

}



.eyeshadow_list_wrap .thumbnail_list li::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(100% + calc(6 * (60rem / 390)));

  height: calc(100% + calc(6 * (60rem / 390)));

  box-sizing: border-box;

  border-radius: 50%;

  border: solid var(--color_01) calc(2 * (60rem / 390));

  content: "";

  opacity: 0;

  transition: opacity .5s;

  pointer-events: none;

}



.eyeshadow_list_wrap .thumbnail_list li.selected::before {

  opacity: 1;

}



.eyeshadow_list_wrap .thumbnail_list li label {

  display: block;

  width: calc(40 * (60rem / 390));

  cursor: pointer;

}



.each_eyeshadow {

  width: calc(230 * (60rem / 390));

  margin-right: calc(20 * (60rem / 390));

}



.eyeshadow_list .eyeshadow_img {

  margin-bottom: calc(10 * (60rem / 390));

}



.eyeshadow_list .eyeshadow_name {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  font-weight: 400;

  line-height: 1.5;

  text-align: center;

}



#PickupItems .review_wrap {

  margin-top: calc(60 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



#PickupItems .review_wrap h3 {

  position: relative;

  width: fit-content;

  margin: 0 auto calc(20 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  text-align: center;

  color: var(--color_01);

}



#PickupItems .review_wrap h3::before {

  position: absolute;

  top: 0;

  left: 100%;

  width: calc(68 * (60rem / 390));

  height: calc(68 * (60rem / 390));

  margin-top: calc(8 * (60rem / 390));

  rotate: 8deg;

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

  content: "";

}



#PickupItems .review_wrap h3 .txt_S {

  position: relative;

  display: block;

  width: fit-content;

  margin: 0 auto calc(18 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  font-weight: 500;

  color: var(--color_regular);

  text-decoration: underline;

  text-decoration-skip-ink: none;

  text-decoration-thickness: calc(1 * (60rem / 390));

  text-underline-offset: calc(5 * (60rem / 390));

}



#PickupItems .review_wrap h3 .txt_S::before,

#PickupItems .review_wrap h3 .txt_S::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(10 * (60rem / 390));

  margin-bottom: calc(-5 * (60rem / 390));

  content: "";

}



#PickupItems .review_wrap h3 .txt_S::before {

  height: calc(4 * (60rem / 390));

  background: #fff;

}



#PickupItems .review_wrap h3 .txt_S::after {

  height: calc(1 * (60rem / 390));

  margin-bottom: calc(-4 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  background: var(--color_regular);

  rotate: -60deg;

  transform-origin: center right;

}



#PickupItems .review_wrap .makeup_img {

  width: calc(180 * (60rem / 390));

  margin-right: calc(15 * (60rem / 390));

  float: left;

}



#PickupItems .review_wrap .review_txt {

  padding-top: calc(13 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  line-height: 1.75;

  text-align: justify;

}



#PickupItems .accordion_inner {

  min-height: calc(230 * (60rem / 390));

}



/*-----------------pick up items*/



/*ReviewList--------------------*/

.review_area {

  margin-bottom: calc(60 * (60rem / 390));

}



.review_area h2 {

  margin-bottom: calc(20 * (60rem / 390));

  font-size: calc(28 * (60rem / 390));

  font-weight: 700;

  text-align: center;

  color: var(--color_01);

}



.review_list.swiper-wrapper {

  transition-timing-function: linear;

}



.review_list .each_review {

  position: relative;

  width: calc(230 * (60rem / 390)) !important;

  height: auto;

  margin-right: calc(15 * (60rem / 390));

}



.review_list .each_review > a {

  height: 100%;

  padding: calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) calc(40 * (60rem / 390));

  border: solid var(--color_01) calc(1 * (60rem / 390));

  border-radius: calc(5 * (60rem / 390));

  background: #fff;

}



.review_list .each_review figure {

  margin-bottom: calc(10 * (60rem / 390));

}



.review_list .each_review figure img {

  height: calc(200 * (60rem / 390));

  object-fit: cover;

}



.review_list .each_review .staff_detail_wrap {

  display: flex;

  align-items: center;

  gap: calc(10 * (60rem / 390));

  margin-bottom: calc(10 * (60rem / 390));

}



.review_list .each_review .staff_detail_wrap .staff_img {

  width: calc(50 * (60rem / 390));

  height: calc(50 * (60rem / 390));

  border-radius: 50%;

  overflow: clip;

}



.review_list .each_review .staff_detail_wrap .staff_img img {

  height: 100%;

  object-fit: cover;

}



.review_list .each_review .staff_detail_wrap .txt_wrap {

  flex: 1;

}



.review_list .each_review .staff_detail_wrap .txt_wrap p {

  font-size: calc(14 * (60rem / 390));

  line-height: 1.5;

}



.review_list .each_review .staff_comment {

  font-size: calc(13 * (60rem / 390));

  line-height: 1.5;

  overflow: hidden;

  display: -webkit-box;

  text-overflow: ellipsis;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}



.review_list .each_review .link_detail {

  position: absolute;

  bottom: 0;

  right: 0;

  margin: 0 calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) 0;

  padding-right: calc(10 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  letter-spacing: .05em;

  color: var(--color_01);

}



.review_list .each_review .link_detail::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(6 * (60rem / 390));

  height: calc(6 * (60rem / 390));

  border-top: solid var(--color_01) calc(1 * (60rem / 390));

  border-right: solid var(--color_01) calc(1 * (60rem / 390));

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}

/*--------------------ReviewList*/



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

.campaign_outside {

  margin-bottom: calc(70 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390));

}



.campaign_wrap {

  padding: calc(25 * (60rem / 390)) calc(10 * (60rem / 390)) calc(30 * (60rem / 390));

  border: solid var(--color_accent) calc(1 * (60rem / 390));

  border-radius: calc(5 * (60rem / 390));

  background: #fff;

  text-align: center;

}



.campaign_wrap h2 {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(24 * (60rem / 390));

  font-weight: 700;

  color: var(--color_accent);

}



.campaign_period {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  font-weight: 500;

}



.campaign_period .txt_S {

  font-size: calc(13 * (60rem / 390));

}



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

  margin-top: calc(25 * (60rem / 390));

}



.campaign_num {

  width: fit-content;

  margin: 0 auto;

  font-family: var(--font_display);

  font-size: calc(30 * (60rem / 390));

  color: var(--color_accent);

}



.campaign_num span {

  display: block;

  width: calc(58 * (60rem / 390));

  margin: 0 auto;

}



.campaign_ttl {

  position: relative;

  margin-bottom: calc(10 * (60rem / 390));

  padding-bottom: calc(8 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  font-weight: 700;

  color: var(--color_accent);

}



.campaign_ttl::before {

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%;

  height: calc(1 * (60rem / 390));

  background: linear-gradient(to right, transparent, var(--color_accent), transparent);

  content: "";

}



.campaign_detail {

  font-size: calc(14 * (60rem / 390));

  line-height: 1.6;

}



.campaign_detail .txt_B {

  font-size: calc(15 * (60rem / 390));

  font-weight: 700;

  line-height: 1.6;

}



.campaign_detail .notes {

  display: block;

  margin-top: calc(8 * (60rem / 390));

  font-size: calc(10 * (60rem / 390));

}



.campaign_detail_wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: calc(8 * (60rem / 390));

}



.campaign_detail_wrap figure {

  width: calc(80 * (60rem / 390));

}



.campaign_detail_wrap .campaign_detail {

  text-align: left;

}



.btn_allItems_wrap {

  margin-top: calc(35 * (60rem / 390));

}



.btn_allItems_wrap > p {

  position: relative;

  width: fit-content;

  margin: 0 auto calc(8 * (60rem / 390));

  padding: 0 calc(12 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

}



.btn_allItems_wrap > p::before,

.btn_allItems_wrap > p::after {

  position: absolute;

  bottom: 0;

  width: calc(1 * (60rem / 390));

  height: calc(10 * (60rem / 390));

  margin-bottom: calc(1 * (60rem / 390));

  background: var(--color_regular);

  content: "";

}



.btn_allItems_wrap > p::before {

  left: 0;

  rotate: -30deg;

}



.btn_allItems_wrap > p::after {

  right: 0;

  rotate: 30deg;

}



.btn_allItems span {

  margin-right: calc(3 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  letter-spacing: 0;

}



.btn_campaign {

  position: fixed;

  z-index: 3;

  bottom: 0;

  right: 0;

  z-index: 1;

  display: grid;

  place-items: center;

  width: calc(84 * (60rem / 390));

  height: calc(84 * (60rem / 390));

  margin: 0 calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) 0;

  cursor: pointer;

  opacity: 0;

  transition: opacity .6s, translate .5s;

}



.btn_campaign.active {

  opacity: 1;

}



.btn_campaign.move {

  translate: 0 calc(-60 * (60rem / 390));

}



.btn_campaign::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: var(--color_accent);

  opacity: .8;

  box-shadow: 0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .15);

  content: "";

  transition: scale .8s;

}



.btn_campaign:hover::before {

  scale: 1.1;

}



.btn_campaign::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(25 * (60rem / 390));

  height: calc(25 * (60rem / 390));

  margin-top: calc(5 * (60rem / 390));

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

  content: "";

  mix-blend-mode: multiply;

}



.btn_campaign p {

  position: relative;

  padding-top: calc(8 * (60rem / 390));

  font-size: calc(12 * (60rem / 390));

  font-weight: 700;

  letter-spacing: 0;

  text-align: center;

  color: #fff;

}



.btn_campaign p .txt_S {

  display: block;

  margin-bottom: calc(3 * (60rem / 390));

  font-size: calc(10 * (60rem / 390));

}



.btn_campaign p::before,

.btn_campaign p::after {

  position: absolute;

  top: 100%;

  left: 50%;

  translate: -50% 0;

  width: calc(1 * (60rem / 390));

  height: calc(14 * (60rem / 390));

  margin-top: calc(5 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  background: #fff;

  content: "";

  animation: rotate1 10s infinite;

}



.btn_campaign p::after {

  rotate: 90deg;

  animation: rotate2 10s infinite;

}



@keyframes rotate1 {

  0% {

    rotate: 0deg;

  }



  10% {

    rotate: 180deg;

  }



  55% {

    rotate: 180deg;

  }



  65% {

    rotate: 360deg;

  }



  100% {

    rotate: 360deg;

  }

}



@keyframes rotate2 {

  0% {

    rotate: 90deg;

  }



  10% {

    rotate: 270deg;

  }



  55% {

    rotate: 270deg;

  }



  65% {

    rotate: 450deg;

  }



  100% {

    rotate: 450deg;

  }

}

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



/*about-------------------------*/

.about_area {

  text-align: center;

}



.about_area h2 {

  margin-bottom: calc(20 * (60rem / 390));

  font-size: calc(28 * (60rem / 390));

  font-weight: 500;

  letter-spacing: .05em;

  color: var(--color_01);

}



.about_area h2 .txt_S {

  display: block;

  margin-bottom: calc(3 * (60rem / 390));

  font-size: calc(17 * (60rem / 390));

}



.about_area .txt_wrap {

  padding: calc(50 * (60rem / 390)) 0 calc(60 * (60rem / 390));

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

}



.about_area .txt_wrap h3 {

  margin-bottom: calc(30 * (60rem / 390));

  font-size: calc(20 * (60rem / 390));

  font-weight: 500;

}



.about_area .txt_wrap p {

  font-size: calc(13 * (60rem / 390));

  line-height: 2;

}



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

  margin-top: calc(30 * (60rem / 390));

}



.about_area .txt_wrap .notes {

  font-size: calc(10 * (60rem / 390));

}



.about_area .btn_allItems {

  margin-top: calc(45 * (60rem / 390));

}

/*-------------------------about*/



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

.fixed_nav {

  position: fixed;

  z-index: 3;

  bottom: 0;

  translate: 0 100%;

  transition: translate .5s;

}



.fixed_nav.active {

  translate: 0 0;

  box-shadow: 0 calc(-3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .1);

}



.fixed_nav .nav_list {

  display: grid;

  grid-template-columns: calc(133 * (60rem / 390)) calc(80 * (60rem / 390)) calc(93 * (60rem / 390)) calc(84 * (60rem / 390));

}



.fixed_nav .nav_list li a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  height: calc(60 * (60rem / 390));

  background: #fff;

  font-size: calc(13 * (60rem / 390));

  line-height: 1.3;

  letter-spacing: .05em;

  text-align: center;

  transition: color .5s;

}



.fixed_nav .nav_list li a::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(transparent, var(--color_03));

  content: "";

  opacity: 0;

  transition: opacity .5s;

  box-shadow: 0 0 calc(8 * (60rem / 390)) rgba(0, 0, 0, .1);

}



.fixed_nav .nav_list li.selected {

  position: relative;

  z-index: 2;

}



.fixed_nav .nav_list li.selected a {

  color: var(--color_05);

}



.fixed_nav .nav_list li.selected a::before {

  opacity: 1;

}

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





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

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

#share {

  z-index: 10 !important;

  transition: translate .5s;

  right: auto !important;

  left: 5%;

}



#share.move {

  translate: 0 calc(-60 * (60rem / 390));

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}



}

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





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

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

  .only_sp {

    display: none !important;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    width: 60rem;

    min-height: 100vh;

    margin: -100vh auto 0;

    overflow: clip;

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

  }



  .fixed_area {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    height: 100vh;

    margin: 0 auto;

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

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

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

    height: 100%;

  }



  .ttl_pc {

    width: 29rem;

  }



.fixed_area .btn_campaign {

  position: relative;

  width: 10.8rem;

  height: 10.8rem;

  margin: 2.5rem auto 0;

  opacity: 1;

}



.fixed_area .btn_campaign::before {

  box-shadow: 0 .3rem .6rem rgba(0, 0, 0, .15);

}



.fixed_area .btn_campaign::after {

  width: 2.8rem;

  height: 2.8rem;

  margin-top: .6rem;

}



.fixed_area .btn_campaign p {

  padding-top: 1rem;

  font-size: 1.5rem;

}



.fixed_area .btn_campaign p .txt_S {

  margin-bottom: .5rem;

  font-size: 1.3rem;

}



.fixed_area .btn_campaign p::before,

.fixed_area .btn_campaign p::after {

  width: .1rem;

  height: 1.8rem;

  margin-top: .6rem;

  border-radius: 10rem;

}



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

  margin-top: 4rem;

}



.pc_nav .nav_list li {

  position: relative;

  z-index: 1;

  font-size: 2.2rem;

  font-weight: 700;

  color: var(--color_01);

  transition: color .5s;

}



.pc_nav .nav_list li::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 12rem;

  height: 12rem;

  margin-left: -6rem;

  background: radial-gradient(var(--color_04), transparent 60%);

  opacity: 0;

  content: "";

  transition: opacity .8s;

}



.pc_nav .nav_list li.selected::before {

  opacity: .8;

}



.pc_nav .nav_list li.selected {

  color: var(--color_05);

}



.pc_nav .nav_list li .txt_S {

  display: block;

  margin-bottom: .8rem;

  font-size: 1.3rem;

  font-weight: 400;

  letter-spacing: .05em;

}



.pc_nav .nav_list li a {

  width: fit-content;

}





}

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





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

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

  html {

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

  }

}



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

  html {

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

  }

}

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