@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;
}

:root {
  --font_regular: "Lato", "Sawarabi Gothic", sans-serif;
  --font_eng: "Playfair Display", serif;
  --font_serif: "Sawarabi Mincho", serif;
  --color_regular: #564138;
  --color_01: #EB6D8E;
  --color_02: #E3BEC7;
  --color_tab: #FABCCC;
  --color_award: #AB8A58;
  --color_new: #952342;
  --color_trial_01_01: #DBD0AE;
  --color_trial_01_02: #F8F3E2;
  --color_trial_02_01: #F5C4D5;
  --color_trial_02_02: #FCF5F7;
  --color_campaign: #A06929;
  --color_bg_01: #FAF8F7;
  --color_bg_02: #FDEDF1;
  --color_bg_03: #F0AEBD;
  --color_bg_04: #E68BA1;
  --color_bg_05: #FCEAEF;
  --color_bg_06: #F5EFEC;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: .05em;
}

.LP_page {
  width: 100%;
  font-family: var(--font_regular);
  color: var(--color_regular);
  overflow-x: clip;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active {
  opacity: 1;
}

.LP_page_inner {
  position: relative;
  z-index: 1;
  background: var(--color_bg_01);
  min-height: 100vh;
}

.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));
  letter-spacing: -.05em;
}

.activePoint {
  opacity: 0;
  translate: 0 calc(20 * (60rem / 390));
  transition: opacity 1s, translate 1s;
}

.activePoint.active {
  opacity: 1;
  translate: unset;
}

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

/*heading------------------------*/
.heading_area {
  padding-bottom: calc(50 * (60rem / 390));
}

.main_lead_wrap {
  margin-top: calc(40 * (60rem / 390));
  text-align: center;
}

.main_lead_wrap .main_lead:nth-of-type(n+2) {
  margin-top: 2.5rem;
}

.main_lead {
  font-size: calc(15 * (60rem / 390));
  line-height: 1.75;
}

.main_lead .txt_highlight {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-thickness: calc(8 * (60rem / 390));
  text-underline-offset: calc(-5 * (60rem / 390));
  text-decoration-color: rgba(235, 109, 142, .15);
}

.main_lead .anchor_link {
  display: inline;
  color: var(--color_01);
}

.anchor_link {
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(2 * (60rem / 390));
}

.heading_area .notes_list {
  margin-top: calc(40 * (60rem / 390));
  padding: 0 calc(15 * (60rem / 390));
}

.heading_area .notes_list li:nth-of-type(n+2) {
  margin-top: calc(8 * (60rem / 390));
}

.heading_area .notes_list li {
  text-indent: -1.9em;
  padding-left: 1.9em;
  font-size: calc(10 * (60rem / 390));
  line-height: 1.5;
  letter-spacing: 0;
  opacity: .8;
}
/*------------------------heading*/


/*campaign-----------------------*/
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%;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: rgba(86, 65, 56, .5);
  content: "";
}

.modal_outside input {
  display: none;
}

.modal_overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modal_wrap {
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
  max-height: 100%;
  padding: calc(40 * (60rem / 390)) 0;
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.modal_wrap::-webkit-scrollbar {
  display:none;
}

.modal_inner {
  position: relative;
}

.campaing_wrap {
  position: relative;
  z-index: 1;
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
}

.campaing_wrap::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(15 * (60rem / 390)));
  border-radius: calc(10 * (60rem / 390));
  border: solid calc(1.5 * (60rem / 390)) var(--color_01);
  box-sizing: border-box;
  background: #fff;
  content: "";
}

.campaing_wrap h2 {
  margin-bottom: calc(20 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(30 * (60rem / 390));
  font-weight: 500;
  letter-spacing: .03em;
  text-align: center;
  color: var(--color_01);
}

.campaing_wrap h2 .txt_S {
  display: grid;
  place-items: center;
  width: fit-content;
  height: calc(30 * (60rem / 390));
  margin: 0 auto calc(15 * (60rem / 390));
  padding: 0 calc(20 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  border: solid var(--color_01) calc(1.5 * (60rem / 390));
  background: #fff;
  font-family: var(--font_regular);
  font-size: calc(14 * (60rem / 390));
}

.campaing_wrap .campaing_period {
  font-family: "Lato", sans-serif;
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  text-align: center;
}

.campaing_wrap .campaing_period .txt_L {
  margin: 0 calc(2 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
}

.campaing_wrap .each_campaign:nth-of-type(n+2) {
  margin-top: calc(20 * (60rem / 390));
}

.campaing_wrap .campaign_num {
  margin-bottom: calc(10 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(12 * (60rem / 390));
  letter-spacing: .03em;
  text-align: center;
  color: var(--color_01);
}

.campaing_wrap .campaign_num .txt_L {
  font-size: calc(40 * (60rem / 390));
  vertical-align: -.02em;
}

.campaing_wrap .each_campaign .campaign_ttl {
  font-size: calc(20 * (60rem / 390));
  line-height: 1.5;
  text-align: center;
  color: var(--color_campaign);
}

.campaing_wrap .each_campaign:nth-of-type(1) .campaign_ttl {
  width: calc(250 * (60rem / 390));
  margin: 0 auto;
}

.campaign_novelty {
  display: flex;
  justify-content: center;
  gap: calc(7 * (60rem / 390));
  margin-top: calc(10 * (60rem / 390));
}

.novelty_wrap {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(140 * (60rem / 390));
  height: calc(70 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  line-height: 1.3;
  text-align: center;
}

 .novelty_wrap::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: solid calc(1.5 * (60rem / 390));
  border-radius: 50%;
  content: "";
 }

.novelty_wrap.novelty_soap::before {
  border-color: var(--color_trial_02_01);
  background: var(--color_trial_02_02);
}

.novelty_wrap.novelty_clayPaste::before {
  border-color: var(--color_trial_01_01);
  background: var(--color_trial_01_02);
} 

.novelty_wrap .novelty_img {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  height: calc(74 * (60rem / 390));
}

.novelty_wrap.novelty_soap .novelty_img {
  left: 0;
  margin-left: calc(-22 * (60rem / 390));
  rotate: -8deg;
}

.novelty_wrap.novelty_clayPaste .novelty_img {
  right: 0;
  margin-right: calc(-22 * (60rem / 390));
  rotate: 8deg;
}

.novelty_wrap .novelty_img img {
  width: auto;
  height: 100%;
}

.campaing_wrap dd {
  position: relative;
  z-index: 1;
  margin-top: calc(15 * (60rem / 390));
  padding: calc(25 * (60rem / 390)) calc(15 * (60rem / 390));
  text-align: center;
}

.campaing_wrap .each_campaign:nth-last-of-type(1) dd {
  padding-bottom: calc(35 * (60rem / 390));
  border-radius: 0 0 calc(10 * (60rem / 390)) calc(10 * (60rem / 390));
}

.campaing_wrap dd::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_01);
  opacity: .05;
  content: "";
}

.campaing_wrap .campaign_txt {
  font-size: calc(13 * (60rem / 390));
  line-height: 1.5;
}

.campaing_wrap .campaign_txt .txt_highlight {
  color: var(--color_01);
}

.campaing_wrap .campaign_notes {
  margin-top: calc(15 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.campaing_wrap .campaign_txt_wrap .campaign_txt:nth-of-type(n+2) {
  margin-top: calc(12 * (60rem / 390));
}

.campaing_wrap .item_list_wrap {
  margin-top: calc(25 * (60rem / 390));
}

.campaing_wrap .item_list_wrap h5 {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: 0 auto calc(12 * (60rem / 390));
  padding: calc(3 * (60rem / 390)) calc(15 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_02);
  font-size: calc(11 * (60rem / 390));
  font-weight: 400;
  color: #fff;
}

.campaing_wrap .item_list_wrap h5::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(330 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  background: var(--color_02);
  content: "";
}

.campaing_wrap .item_list {
  width: fit-content;
  margin: 0 auto;
}

.campaing_wrap .item_list li:nth-of-type(n+2) {
  margin-top: calc(10 * (60rem / 390));
}

.campaing_wrap .item_list a {
  position: relative;
  width: fit-content;
  padding-left: calc(13 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(2 * (60rem / 390));
}

.campaing_wrap .item_list a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(8 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  margin-top: calc(3 * (60rem / 390));
  background: var(--color_regular);
  rotate: 45deg;
  content: "";
}

.btn_allItems {
  width: fit-content;
  margin: calc(30 * (60rem / 390)) auto 0;
}

.btn_allItems a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(330 * (60rem / 390));
  height: calc(72 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  border: solid #fff calc(1.5 * (60rem / 390));
  background: var(--color_01);
  font-size: calc(13 * (60rem / 390));
  text-align: center;
  color: #fff;
  transition: background-color .5s, color .5s, border-color .5s;
}

.btn_allItems a:hover {
  background: #fff;
  color: var(--color_01);
  border-color: var(--color_01);
}

.btn_allItems a::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(8 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  margin-right: calc(15 * (60rem / 390));
  border-top: solid #fff calc(1.5 * (60rem / 390));
  border-right: solid #fff calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: border-color .5s;
}

.btn_allItems a:hover::before {
  border-color: var(--color_01);
}

.btn_allItems a .txt_L {
  display: block;
  margin-bottom: calc(6 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(27 * (60rem / 390));
}

.btn_modalClose {
  position: relative;
  width: fit-content;
  margin: calc(40 * (60rem / 390)) auto 0;
  padding-right: calc(13 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 700;
  color: #fff;
  cursor: pointer;
}

.btn_modalClose::before,
.btn_modalClose::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: calc(8 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  background: #fff;
  content: "";
}

.btn_modalClose::before {
  rotate: 45deg;
}

.btn_modalClose::after {
  rotate: -45deg;
}

.campaing_area .btn_fixed {
  position: fixed;
  z-index: 5;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(120 * (60rem / 390));
  height: calc(40 * (60rem / 390));
  margin-bottom: calc(40 * (60rem / 390));
  padding-left: calc(5 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390)) 0 0 calc(100 * (60rem / 390));
  background: var(--color_01);
  font-family: var(--font_eng);
  font-weight: 700;
  font-size: calc(15 * (60rem / 390));
  color: #fff;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .1));
  cursor: pointer;
  translate: 100% 0;
  transition: translate .5s;
}

.campaing_area .btn_fixed.active {
  translate: unset;
}


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

/*tab----------------------------*/
.mainContent_area {
  display: flex;
}

.tab_list_wrap {
  position: sticky;
  width: calc(30 * (60rem / 390));
  height: fit-content;
  padding: calc(20 * (60rem / 390)) 0;
  order: 2;
}

.tab_list li {
  position: relative;
}

.tab_list li:nth-of-type(n+2) {
  margin-top: calc(-10 * (60rem / 390));
}

.tab_list li:nth-of-type(1) {
  z-index: 3;
}

.tab_list li:nth-of-type(2) {
  z-index: 2;
}

.tab_list li:nth-of-type(3) {
  z-index: 1;
}

.tab_list li.selected {
  z-index: 4;
}

.tab_list li::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(20 * (60rem / 390));
  background: url(../img/260303/shape_border-radius.svg) bottom center / auto 100% no-repeat;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(3 * (60rem / 390)) rgba(0, 0, 0, .1));
  content: "";
}

.tab_list a {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  padding: calc(15 * (60rem / 390)) 0 calc(25 * (60rem / 390));
  color: #fff;
}

.tab_list li.selected a::before,
.tab_list li.selected a::after {
  background: var(--color_01);
}

.tab_list a::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(19 * (60rem / 390)));
  border-radius: 0 calc(8 * (60rem / 390)) 0 0;
  background: var(--color_tab);
  content: "";
  transition: background-color .3s;
}

.tab_list a::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(20 * (60rem / 390));
  mask-image: url(../img/260303/shape_border-radius.svg);
  mask-position: bottom center;
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../img/260303/shape_border-radius.svg);
  -webkit-mask-position: bottom center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  background: var(--color_tab);
  content: "";
  transition: background-color .3s;
}

.tab_list a p {
  font-size: calc(12 * (60rem / 390));
  letter-spacing: .1em;
  writing-mode: vertical-rl;
  text-orientation: upright; 
}

@media screen and  (min-width: 769px) {
  .tab_list a p {
    font-size: 1.5rem;
  }
}


.browser_chrome .tab_list a p {
  letter-spacing: -.2em;
}

.tab_list a p span {
  display: inline-block;
}

.tab_list li:nth-of-type(1) span {
  rotate: 90deg;
}

.tab_list li:nth-of-type(2) span {
  rotate: -90deg;
  text-orientation: mixed;
  margin: calc(5 * (60rem / 390)) 0;
}

.mainContent_area .content_wrap {
  flex: 1;
}
/*----------------------------tab*/

/*QA-----------------------------*/
.each_content {
  height: fit-content;
  padding: calc(50 * (60rem / 390)) 0 calc(70 * (60rem / 390));
}

.each_content:nth-of-type(1) {
  border-radius: 0 calc(20 * (60rem / 390)) 0 0;
}

.each_content:nth-last-of-type(1) {
  border-radius: 0 0 calc(20 * (60rem / 390)) 0;
}

#Content1 {
  background: var(--color_bg_02);
}

.content_ttl_wrap {
  position: relative;
  width: calc(330 * (60rem / 390));
  margin: 0 auto calc(30 * (60rem / 390));
  border: solid var(--color_01) calc(1.5 * (60rem / 390));
  border-left: none;
}

.content_ttl_wrap::before,
.content_ttl_wrap::after {
  position: absolute;
  left: 0;
  width: calc(1.5 * (60rem / 390));
  height: calc(8 * (60rem / 390));
  box-sizing: border-box;
  background: var(--color_01);
  content: "";
}

.content_ttl_wrap::before {
  top: 0;
}

.content_ttl_wrap::after {
  bottom: 0;
}

.content_ttl_wrap .content_ttl {
  padding: calc(10 * (60rem / 390)) calc(5 * (60rem / 390)) calc(10 * (60rem / 390)) calc(10 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--color_01);
}

.content_ttl_wrap .content_ttl::before,
.content_ttl_wrap .content_ttl::after {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: calc(10 * (60rem / 390));
  height: calc(10 * (60rem / 390));
  border-top: solid var(--color_01) calc(1.5 * (60rem / 390));
  border-right: solid var(--color_01) calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}

.content_ttl_wrap .content_ttl::before {
  left: 0;
  margin-left: calc(-3 * (60rem / 390));
}

.content_ttl_wrap .content_ttl::after {
  right: 100%;
}

.each_question {
  position: relative;
  z-index: 1;
}

.each_question:nth-of-type(n+2) {
  margin-top: calc(40 * (60rem / 390));
}

.each_question::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(40 * (60rem / 390)));
  background: linear-gradient(#fff, transparent);
  opacity: .5;
  content: "";
}

.question_wrap dt {
  margin-bottom: calc(10 * (60rem / 390));
  padding: 0 calc(15 * (60rem / 390));
}

.question_num {
  margin-bottom: calc(12 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(30 * (60rem / 390));
  letter-spacing: 0;
  color: var(--color_02);
}

.question_num .txt_L {
  font-size: calc(50 * (60rem / 390));
  letter-spacing: 0;
}

.question_txt {
  font-size: calc(22 * (60rem / 390));
  line-height: 1.5;
}

.question_txt .txt_S {
  font-size: calc(14 * (60rem / 390));
  vertical-align: .2em;
}

.each_question dd.txt_wrap {
  padding: 0 calc(15 * (60rem / 390));
}

.answer_txt {
  margin-top: calc(15 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  line-height: 1.5;
}

.answer_txt .anchor_link {
  display: inline;
  color: var(--color_01);
}

.each_question dd.txt_wrap .notes {
  text-indent: -1.9em;
  padding-left: 1.9em;
  margin-top: calc(15 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  line-height: 1.5;
  opacity: .8;
}

.each_question dd.txt_wrap .txt_comment {
  position: relative;
  margin-top: calc(18 * (60rem / 390));
  padding: calc(8 * (60rem / 390)) calc(20 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  background: var(--color_01);
  font-size: calc(14 * (60rem / 390));
  line-height: 1.3;
  text-align: center;
  color: #fff;
}

.each_question dd.txt_wrap .txt_comment::before {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  width: calc(30 * (60rem / 390));
  height: calc(30 * (60rem / 390));
  margin: 0 0 calc(-8 * (60rem / 390)) calc(20 * (60rem / 390));
  background: url(../img/260303/shape_speech_001.svg) center center / cover no-repeat;
  content: "";
}

.about_delicateAreaCare {
  margin: calc(25 * (60rem / 390)) 0 calc(35 * (60rem / 390));
  padding: calc(15 * (60rem / 390)) calc(20 * (60rem / 390));
  border-radius: calc(30 * (60rem / 390));
  border: dashed var(--color_01) calc(1 * (60rem / 390));
}

.about_delicateAreaCare h3 {
  font-size: calc(18 * (60rem / 390));
  line-height: 1.3;
  font-weight: 400;
  text-align: center;
  color: var(--color_01);
}

.about_delicateAreaCare_txt {
  font-size: calc(13 * (60rem / 390));
  line-height: 1.75;
  text-align: justify;
}

.accordion_outside input {
  display: none;
}

.accordion_wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .5s;
}

.opened .accordion_wrap {
  grid-template-rows: 1fr;
}

.accordion_inner {
  overflow: hidden;
  transition: padding .5s;
}

.opened .accordion_inner {
  padding-top: calc(15 * (60rem / 390));
}

.accordion_btn {
  position: relative;
  width: fit-content;
  margin: calc(10 * (60rem / 390)) auto 0;
  padding-right: calc(12 * (60rem / 390));
  font-weight: 700;
  font-size: calc(12 * (60rem / 390));
  color: var(--color_01);
  cursor: pointer;
}

.accordion_btn::before,
.accordion_btn::after {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(8 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  background: var(--color_01);
  content: "";
  transition: rotate .5s;
}

.accordion_btn::after {
  rotate: 90deg;
}

.opened .accordion_btn::after {
  rotate: 0deg;
}

.accordion_btn .opened,
.opened .accordion_btn .closed {
  display: block;
}

.opened .accordion_btn .opened,
.accordion_btn .closed {
  display: none;
}
/*-----------------------------QA*/


/*product------------------------*/
#Content2 {
  padding-bottom: 0;
  background: #fff;
}

.careStep_list {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: calc(-15 * (60rem / 390)) 0 calc(25 * (60rem / 390));
  padding: calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) 0;
}

.careStep_list li {
  position: relative;
}

.careStep_list li:nth-of-type(1) {
  z-index: 1;
}

.careStep_list li:nth-of-type(3) {
  margin-left: calc(2 * (60rem / 390));
}

.careStep_list li a {
  position: relative;
  display: grid;
  place-items: center;
  height: calc(40 * (60rem / 390));
  padding-bottom: calc(6 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  text-align: center;
  color: #fff;
  box-shadow: 0 calc(3 * (60rem / 390)) calc(3 * (60rem / 390)) rgba(0, 0, 0, .2);
}

.careStep_list li:nth-of-type(1) a {
  background: var(--color_bg_03);
}

.careStep_list li:nth-of-type(1) a::before {
  position: absolute;
  top: 0;
  left: 100%;
  border-left: solid calc(10 * (60rem / 390)) var(--color_bg_03);
  border-top: solid calc(20 * (60rem / 390)) transparent;
  border-bottom: solid calc(20 * (60rem / 390)) transparent;
  content: "";
}

.careStep_list li:nth-of-type(2) a {
  background: var(--color_bg_04);
}

.careStep_list li:nth-of-type(3) a {
  padding-bottom: 0;
  background: var(--color_bg_05);
  color: var(--color_01);
}

.careStep_list li a .txt_eng {
  display: block;
  margin-bottom: calc(4 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(12 * (60rem / 390));
}

.careStep_list li a .txt_eng .txt_L {
  font-size: calc(18 * (60rem / 390));
}

.txt_more {
  position: absolute;
  display: grid;
  place-items: center;
  padding-bottom: calc(2 * (60rem / 390));
  border-radius: 50%;
  border: solid var(--color_01)calc(1.5 * (60rem / 390));
  background: #fff;
  line-height: .8;
  letter-spacing: 0;
  text-align: center;
  color: var(--color_01);
}

.careStep_list li a .txt_more {
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: calc(32 * (60rem / 390));
  height: calc(32 * (60rem / 390));
  margin-left: calc(-16 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.each_care {
  position: relative;
  padding: 0 0 calc(60 * (60rem / 390)) calc(25 * (60rem / 390));
}

.each_care::before {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(25 * (60rem / 390));
  height: 100%;
  content: "";
}

#Step1::after {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  margin-top: calc(-1 * (60rem / 390));
  border-top: solid var(--color_bg_03) calc(12 * (60rem / 390));
  border-left: solid transparent calc(12.5 * (60rem / 390));
  border-right: solid transparent calc(12.5 * (60rem / 390));
  content: "";
}

#Anytime .txt_more {
  top: 0;
  left: 0;
  width: calc(50 * (60rem / 390));
  height: calc(50 * (60rem / 390));
  margin-top: calc(-25 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  border-width: calc(2 * (60rem / 390));
}

.care_ttl_wrap {
  margin-bottom: calc(30 * (60rem / 390));
  padding: calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) 0;
  color: #fff;
}

#Step1::before,
#Step1 .care_ttl_wrap {
  background: var(--color_bg_03);
}

#Step2::before,
#Step2 .care_ttl_wrap {
  background: var(--color_bg_04);
}

#Anytime::before,
#Anytime .care_ttl_wrap {
  background: var(--color_bg_05);
}

#Anytime .care_ttl_wrap {
  color: var(--color_01);
}

.care_ttl {
  margin-bottom: calc(10 * (60rem / 390));
  padding-bottom: calc(10 * (60rem / 390));
  border-bottom: solid calc(1.5 * (60rem / 390)) #fff;
  font-size: calc(34 * (60rem / 390));
  font-weight: 400;
}

#Anytime .care_ttl {
  border-color: var(--color_01);
}

.care_ttl .txt_eng {
  margin-right: calc(8 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(24 * (60rem / 390));
}

#Anytime .care_ttl .txt_eng {
  font-size: calc(22 * (60rem / 390));
}

.care_ttl .txt_eng .txt_L {
  font-size: calc(40 * (60rem / 390));
  vertical-align: -.02em;
}

.care_lead {
  font-size: calc(15 * (60rem / 390));
  line-height: 1.5;
  text-align: right;
}

.each_care .product_catch {
  font-family: var(--font_serif);
  font-size: calc(18 * (60rem / 390));
  line-height: 1.5;
  text-align: center;
  color: var(--color_01);
}

.product_img_wrap {
  position: relative;
  margin-bottom: calc(30 * (60rem / 390));
  padding-top: calc(25 * (60rem / 390));
}

.product_img_wrap .icon_bestcosme,
.product_img_wrap .icon_new {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: calc(70 * (60rem / 390));
  margin: calc(20 * (60rem / 390)) 0 0 calc(15 * (60rem / 390));
}

.product_img_wrap .icon_new {
  display: grid;
  place-items: center;
  height: calc(70 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(20 * (60rem / 390));
  font-weight: 700;
  color: #fff;
}

.product_img_wrap .icon_new::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  right: 0;
  width: calc(30 * (60rem / 390));
  height: calc(30 * (60rem / 390));
  margin: 0 0 calc(12 * (60rem / 390)) 0;
  border-radius: calc(5 * (60rem / 390));
  background: var(--color_new);
  rotate: -20deg;
  content: "";
}

.product_img_wrap .icon_new::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--color_new);
  box-shadow: 0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .2);
  content: "";
}

.each_care .product_img {
  width: fit-content;
  height: calc(204 * (60rem / 390));
  margin: 0 auto;
}

.each_care .product_img a {
  height: 100%;
}

.each_care .product_img img {
  width: auto;
  height: 100%;
}

.each_care .product_name {
  margin-bottom: calc(10 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
}

.each_care .product_price_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: calc(15 * (60rem / 390));
}

.each_care .product_price {
  font-size: calc(14 * (60rem / 390));
}

.each_care .product_price .txt_S {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
}

.each_care .product_link {
  display: grid;
  place-items: center;
  width: calc(76 * (60rem / 390));
  height: calc(24 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  border: solid var(--color_01) calc(1.5 * (60rem / 390));
  background: var(--color_01);
  font-family: var(--font_eng);
  font-size: calc(16 * (60rem / 390));
  color: #fff;
  transition: background-color .5s, color .5s;
}

.each_care .product_link span {
  position: relative;
  padding-right: calc(24 * (60rem / 390));
  letter-spacing: .03em;
}

.each_care .product_link:hover {
  background: #fff;
  color: var(--color_01);
}

.each_care .product_link span::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(20 * (60rem / 390));
  height: calc(20 * (60rem / 390));
  mask-image: url(../img/260303/icon_cart.svg);
  mask-position: bottom center;
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../img/260303/icon_cart.svg);
  -webkit-mask-position: bottom center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  background: #fff;
  content: "";
  transition: background-color .5s;
}

.each_care .product_link:hover span::before {
  background: var(--color_01);
}

.feature_list {
  width: fit-content;
  margin: calc(20 * (60rem / 390)) auto 0;
}

.feature_list li {
  position: relative;
  padding-left: calc(18 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  line-height: 1.3;
}

.feature_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/260303/icon_check.svg) center center / 100% auto no-repeat;
  content: "";
}

.feature_list li:nth-of-type(n+2) {
  margin-top: calc(7 * (60rem / 390));
}

.awardHistory {
  position: relative;
  z-index: 1;
  width: calc(305 * (60rem / 390));
  margin: calc(25 * (60rem / 390)) auto 0;
  padding: calc(20 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
  line-height: 1.5;
  color: var(--color_award);
}

.awardHistory::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_award);
  opacity: .2;
  content: "";
}

.awardHistory .txt_L {
  display: block;
  margin-bottom: calc(5 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  line-height: 1.5;
}

.awardHistory .txt_L .txt_S {
  margin-right: calc(4 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
}

.awardHistory .txt_B {
  font-size: calc(20 * (60rem / 390));
  font-weight: 700;
  font-style: italic;
}

.each_care .notes {
  width: calc(305 * (60rem / 390));
  margin: calc(15 * (60rem / 390)) auto 0;
  font-size: calc(10 * (60rem / 390));
  line-height: 1.5;
  text-indent: -1.9em;
  padding-left: 1.9em;
  opacity: .8;
}

.each_care .review_area {
  margin-top: calc(40 * (60rem / 390));
}

.each_care .review_area h5 {
  position: relative;
  margin-bottom: calc(15 * (60rem / 390));
  padding-left: calc(20 * (60rem / 390));
  font-family: var(--font_eng);
  color: var(--color_02);
}

.each_care .review_area h5::before {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 100%;
  height: calc(1.5 * (60rem / 390));
  background: var(--color_02);
  content: "";
}

.each_care .review_area h5 span {
  position: relative;
  z-index: 1;
  font-size: calc(14 * (60rem / 390));
  font-weight: 500;
  letter-spacing: .03em;
}

.each_care .review_area h5 span::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(100% - calc(3 * (60rem / 390)));
  height: 100%;
  background: #fff;
  content: "";
}

.review_list {
  display: flex;
  gap: calc(20 * (60rem / 390));
  width: calc(335 * (60rem / 390));
  padding: 0 calc(20 * (60rem / 390)) calc(3 * (60rem / 390));
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.review_list::-webkit-scrollbar {
  display: none;
}

.review_list.length1 {
  display: block;
}

.review_list li > div {
  width: calc(280 * (60rem / 390));
}

.review_list.length1 li > div {
  width: auto;
}

.review_list .staff_wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * (60rem / 390));
  margin-bottom: calc(8 * (60rem / 390));
}

.review_list .staff_img {
  width: calc(60 * (60rem / 390));
}

.review_list .staff_name {
  font-size: calc(13 * (60rem / 390));
  line-height: 1.5;
}

.review_list .staff_name .txt_S {
  display: block;
  margin-top: calc(4 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
}

.review_list .staff_link {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-bottom: calc(3 * (60rem / 390));
  padding-right: calc(10 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(2 * (60rem / 390));
}

.review_list .staff_link::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(5 * (60rem / 390));
  height: calc(5 * (60rem / 390));
  margin-right: calc(3 * (60rem / 390));
  border-top: solid var(--color_regular) calc(1.5 * (60rem / 390));
  border-right: solid var(--color_regular) calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}

.review_list .review_wrap {
  padding: calc(20 * (60rem / 390)) calc(15 * (60rem / 390)) calc(25 * (60rem / 390));
  border-radius: calc(5 * (60rem / 390));
  border: solid var(--color_02) calc(1.5 * (60rem / 390));
  background: #fff;
  box-shadow: calc(2 * (60rem / 390)) calc(2 * (60rem / 390)) 0 var(--color_02);
}

.review_list .review_img {
  width: calc(120 * (60rem / 390));
  margin: 0 calc(10 * (60rem / 390)) calc(3 * (60rem / 390)) 0;
  float: left;
}

.review_list .review_txt {
  padding-top: calc(16 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  line-height: 1.75;  
}

.scroll-container.review_list .review_txt {
  -webkit-user-select: none;
  -moz-user-select: none; 
  user-select: none; 
}

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

/*set items----------------------*/
#Content3 {
  background: var(--color_bg_06);
}

.novelty_detail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: calc(3 * (60rem / 390)) calc(5 * (60rem / 390));
}

.set_3pair {
  margin-top: calc(50 * (60rem / 390));
}

.set_3pair .novelty_detail {
  margin-bottom: calc(20 * (60rem / 390));
}

.novelty_detail .txt_unity {
  font-size: calc(15 * (60rem / 390));
  line-height: 1.3;
}

.txt_unity.txt_highlight {
  position: relative;
  display: block;
  width: fit-content;
  padding: 0 calc(8 * (60rem / 390)) 0 calc(12 * (60rem / 390));
}

.set_2pair .txt_unity.txt_highlight {
  margin: 0 calc(112 * (60rem / 390)) 0 calc(100 * (60rem / 390));
}

.set_3pair .txt_unity.txt_highlight {
  margin: 0 calc(120 * (60rem / 390)) calc(-5 * (60rem / 390)) calc(50 * (60rem / 390));
  rotate: 12deg;
}

.txt_unity.txt_highlight::before,
.txt_unity.txt_highlight::after {
  position: absolute;
  bottom: 0;
  width: calc(1.5 * (60rem / 390));
  height: calc(12 * (60rem / 390));
  margin-bottom: calc(3 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.txt_unity.txt_highlight::before {
  left: 0;
  rotate: -30deg;
}

.txt_unity.txt_highlight::after {
  right: 0;
  rotate: 30deg;
}

.set_2pair .txt_unity:nth-of-type(2) {
  text-align: right;
}

.set_2pair .txt_unity:nth-last-of-type(1) {
  margin-left: calc(20 * (60rem / 390));
}

.set_3pair .txt_unity:nth-last-of-type(1) {
  margin-top: calc(10 * (60rem / 390));
}

.each_set {
  position: relative;
  z-index: 1;
  width: calc(320 * (60rem / 390));
  margin: 0 auto;
  padding-bottom: calc(30 * (60rem / 390));
  border-radius: calc(20 * (60rem / 390));
}

.set_3pair .each_set {
  padding-top: calc(30 * (60rem / 390));
  background: #fff;
}

.each_set:nth-of-type(n+2) {
  margin-top: calc(30 * (60rem / 390));
}

.each_set::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(45 * (60rem / 390)));
  border-radius: calc(20 * (60rem / 390));
  background: #fff;
  content: "";
}

.set_3pair .each_set::before {
  display: none;
}

.set_num {
  margin-bottom: calc(30 * (60rem / 390));
  padding: 0 calc(20 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(20 * (60rem / 390));
  opacity: .6;
}

.each_set:nth-of-type(even) .set_num {
  text-align: right;
}

.set_num .txt_L {
  font-size: calc(50 * (60rem / 390));
}

.set_ttl {
  margin-bottom: calc(20 * (60rem / 390));
  font-family: var(--font_serif);
  font-size: calc(18 * (60rem / 390));
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--color_01);
}

.each_set .product_list {
  position: relative;
  display: flex;
  justify-content: center;
  gap: calc(20 * (60rem / 390));
}

.set_2pair .product_list::before,
.set_2pair .product_list::after {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(25 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  margin-top: calc(55 * (60rem / 390));
  background: var(--color_01);
  content: "";
}

.set_2pair .product_list::before {
  rotate: 45deg;
}

.set_2pair .product_list::after {
  rotate: -45deg;
}

.set_3pair .product_list {
  display: block;
  padding: 0 calc(25 * (60rem / 390));
}

.set_3pair .product_list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(10 * (60rem / 390));
}

.set_3pair .product_list li:nth-of-type(n+2) {
  margin-top: calc(-5 * (60rem / 390));
}

.set_3pair .product_list li:nth-of-type(n+2)::before,
.set_3pair .product_list li:nth-of-type(n+2)::after {
  position: absolute;
  bottom: 100%;
  left: 50%;
  translate: -50% 0;
  width: calc(25 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  margin-bottom: calc(-10 * (60rem / 390));
  background: var(--color_01);
  content: "";
}

.set_3pair .product_list li:nth-of-type(n+2)::before {
  rotate: 45deg;
}

.set_3pair .product_list li:nth-of-type(n+2)::after {
  rotate: -45deg;
}

.each_set .product_img {
  position: relative;
  z-index: 1;
  width: calc(130 * (60rem / 390));
}

.set_3pair .product_list li:nth-of-type(even) .product_img {
  order: 2;
}

.each_set .product_img::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(15px);
  content: "";
}

.each_set .product_list li.soap .product_img::before {
  background: #FFEFF3;
}

.each_set .product_list li.cream .product_img::before {
  background: #FFF2EF;
}

.each_set .product_list li.mist .product_img::before {
  background: #FFF0FA;
}

.each_set .product_img a {
  display: grid;
  place-items: center;
}

.each_set .product_img img {
  width: auto;
  height: calc(110 * (60rem / 390));
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .1));
}

.each_set .txt_wrap {
  margin-top: calc(15 * (60rem / 390));
}

.set_3pair .txt_wrap {
  flex: 1;
}

.set_3pair .product_list li:nth-of-type(1) .txt_wrap {
  margin-top: calc(-40 * (60rem / 390));
}

.set_3pair .product_list li:nth-of-type(3) .txt_wrap {
  margin-top: calc(40 * (60rem / 390));
}

.each_set .product_name {
  font-size: calc(12 * (60rem / 390));
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
}

.set_3pair .product_list li:nth-of-type(odd) .product_name {
  text-align: left;
}

.set_3pair .product_list li:nth-of-type(even) .product_name {
  text-align: right;
}

.each_set .product_link {
  position: relative;
  width: fit-content;
  margin: calc(5 * (60rem / 390)) auto 0;
  padding-right: calc(10 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(2 * (60rem / 390));
}

.set_3pair .product_list li:nth-of-type(odd) .product_link {
  margin-left: 0;
  margin-right: auto;
}

.set_3pair .product_list li:nth-of-type(even) .product_link {
  margin-right: 0;
  margin-left: auto;
}

.each_set .product_link::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(5 * (60rem / 390));
  height: calc(5 * (60rem / 390));
  margin-right: calc(3 * (60rem / 390));
  border-top: solid var(--color_regular) calc(1.5 * (60rem / 390));
  border-right: solid var(--color_regular) calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}

.each_set .product_purchase {
  width: fit-content;
  margin: calc(20 * (60rem / 390)) auto 0;
}

.each_set .product_purchase a {
  display: grid;
  place-items: center;
  width: calc(220 * (60rem / 390));
  height: calc(40 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  border: solid var(--color_01) calc(1.5 * (60rem / 390));
  background: var(--color_01);
  font-size: calc(16 * (60rem / 390));
  color: #fff;
  transition: background-color .5s, color .5s;
}

.each_set .product_purchase a:hover {
  background: #fff;
  color: var(--color_01);
}

.each_set .product_purchase a span {
  position: relative;
  padding-right: calc(27 * (60rem / 390));
}

.each_set .product_purchase a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(24 * (60rem / 390));
  height: calc(24 * (60rem / 390));
  mask-image: url(../img/260303/icon_cart.svg);
  mask-position: bottom center;
  mask-size: auto 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(../img/260303/icon_cart.svg);
  -webkit-mask-position: bottom center;
  -webkit-mask-size: auto 100%;
  -webkit-mask-repeat: no-repeat;
  background: #fff;
  content: "";
  transition: background-color .5s;
}

.each_set .product_purchase a:hover span::before {
  background: var(--color_01);
}

#Content3 .review_area {
  margin-top: calc(50 * (60rem / 390));
}

#Content3 .review_area h5 {
  display: grid;
  place-items: center;
  width: calc(210 * (60rem / 390));
  height: calc(110 * (60rem / 390));
  margin: 0 auto calc(15 * (60rem / 390));
  background: url(../img/260303/shape_speech_002.svg) center center / 100% auto no-repeat;
  font-size: calc(18 * (60rem / 390));
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  color: var(--color_01);
}

#Content3 .review_list {
  width: calc(360 * (60rem / 390));
}
/*----------------------set items*/

/*footer-------------------------*/
.footer_area {
  padding: calc(60 * (60rem / 390)) 0 calc(70 * (60rem / 390));
}

.footer_area .btn_allItems a {
  border-color: var(--color_01);
}

.footer_area .btn_modalClose {
  display: none;
}
/*-------------------------footer*/



/*shareボタン、shareテキスト---------------------------*/
@media screen and  (max-width:768px) {
#share {
  z-index: 10 !important;
}

.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: var(--color_bg_01);
  }
  
  .fixed_left,
  .fixed_right {
    display: grid;
    place-items: center;
    width: calc((100% - 60rem) / 2);
    height: 100%;
  }

  .ttl_pc {
    width: 44rem;
  }

  .cp_pc {
    width: 26rem;
    cursor: pointer;
  }

  

}
/*------------------------------------------------------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));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/