@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", "Noto Sans JP", sans-serif;
  --font_eng: "Abril Fatface", serif;
  --color_regular: #003830;
  --color_01: #197C45;
  --color_02: #CC0011;
  --color_special_bg: #00473E;
  --color_special_01: #F5B9B0;
  --color_daily_bg: #F8C6BD;
  --color_daily_01: #D0DBD9;
  --color_bg: #FDFBF7;
}

.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);
  min-height: 100vh;
  padding-bottom: calc(70 * (60rem / 390));
}

.LP_page input {
  display: none;
}

.LP_page a {
  display: block;
}

.LP_page a:hover {
  opacity: 1 !important;
}

.LP_page img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

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

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


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

/*heading------------------------*/
.main_ttl {
  margin-bottom: calc(45 * (60rem / 390));
}

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

.main_lead_wrap h3 {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(300 * (60rem / 390));
  height: calc(90 * (60rem / 390));
  margin: 0 auto calc(30 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
  font-weight: 600;
  line-height: 1.5;
  color: #fff;
}

.main_lead_wrap h3::before,
.main_lead_wrap h3::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100 * (60rem / 390));
  content: "";
}

.main_lead_wrap h3::before {
  background: url(../img/shape_speech_bg.svg) bottom center / 100% auto no-repeat;
}

.main_lead_wrap h3::after {
  margin: calc(-3 * (60rem / 390)) 0 0 calc(-3 * (60rem / 390));
  background: url(../img/shape_speech_frame.svg) bottom center / 100% auto no-repeat;
  mix-blend-mode: multiply;
}

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

.main_lead .txt_B {
  font-weight: 700;
}

.main_lead .txt_highlight {
  margin-right: calc(2 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 700;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-color: var(--color_daily_01);
  text-decoration-thickness: calc(12 * (60rem / 390));
  text-underline-offset: calc(-8 * (60rem / 390));
  vertical-align: .05em;
}

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

/*contents1----------------------*/
.each_content {
  padding-bottom: calc(80 * (60rem / 390));
}

.each_content .content_num {
  position: relative;
  margin-bottom: calc(15 * (60rem / 390));
  padding-left: calc(15 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
  font-weight: 700;
  font-style: italic;
  letter-spacing: .015em;
  color: var(--color_01);
}

.each_content .content_num .txt_L {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(60 * (60rem / 390));
  font-weight: 500;
}

.each_content .content_num::before {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(270 * (60rem / 390));
  height: calc(1.5 * (60rem / 390));
  margin-bottom: calc(9 * (60rem / 390));
  background: var(--color_01);
  content: "";
}

.each_content .content_ttl {
  margin-bottom: calc(40 * (60rem / 390));
}

.each_content .content_ttl span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: fit-content;
  height: calc(34 * (60rem / 390));
  padding: 0 calc(15 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 700;
  color: #fff;
}

.each_content .content_ttl span::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_01);
  content: "";
  transform-origin: center left;
  transition: scale .8s;
  scale: 0 1;
}

.each_content.active .content_ttl span::before {
  scale: 1 1;
}

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

.product_detail {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(370 * (60rem / 390));
  height: calc(194 * (60rem / 390));
  margin: calc(20 * (60rem / 390)) auto 0;
  font-weight: 700;
}

.product_detail::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_cloud.png) top center / 100% auto no-repeat;
  filter: drop-shadow(0 0 calc(6 * (60rem / 390)) rgba(0, 0, 0, .2));
  content: "";
}

.each_product > .notes {
  margin-top: calc(8 * (60rem / 390));
  padding-left: calc(15 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  color: var(--color_02);
}

#Product3 .product_detail > div,
#Product4 .product_detail > div,
#Product6 .product_detail > div {
  padding-right: calc(30 * (60rem / 390));
}

#Product8 .product_detail > div {
  padding-left: calc(20 * (60rem / 390));
}

.product_img {
  position: absolute;
  top: 0;
  right: 0;
  rotate: 8deg;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .16));
}

#Product1 .product_img {
  width: calc(70 * (60rem / 390));
  margin: calc(-40 * (60rem / 390)) calc(15 * (60rem / 390)) 0 0;
}

#Product2 .product_img {
  width: calc(70 * (60rem / 390));
  margin: calc(-30 * (60rem / 390)) calc(10 * (60rem / 390)) 0 0;
}

#Product3 .product_img {
  width: calc(46 * (60rem / 390));
  margin: calc(-60 * (60rem / 390)) calc(35 * (60rem / 390)) 0 0;
}

#Product4 .product_img {
  width: calc(40 * (60rem / 390));
  margin: calc(-40 * (60rem / 390)) calc(35 * (60rem / 390)) 0 0;
}

#Product5 .product_img {
  width: calc(54 * (60rem / 390));
  margin: calc(-60 * (60rem / 390)) calc(25 * (60rem / 390)) 0 0;
}

#Product6 .product_img {
  width: calc(50 * (60rem / 390));
  margin: calc(-5 * (60rem / 390)) calc(20 * (60rem / 390)) 0 0;
}

#Product7 .product_img {
  width: calc(40 * (60rem / 390));
  margin: calc(-40 * (60rem / 390)) calc(30 * (60rem / 390)) 0 0;
}

#Product8 .product_img {
  width: calc(42 * (60rem / 390));
  margin: calc(-10 * (60rem / 390)) calc(35 * (60rem / 390)) 0 0;
}

.product_name {
  margin-bottom: calc(10 * (60rem / 390));
  font-size: calc(18 * (60rem / 390));
  line-height: 1.5;
  color: var(--color_02);
}

.product_name .product_brand {
  display: block;
  margin-bottom: calc(4 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
}

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

.product_price {
  font-size: calc(16 * (60rem / 390));
  color: var(--color_02);
}

.product_price .txt_S {
  margin-left: calc(5 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  font-weight: 500;
  vertical-align: .1em;
}

.product_link {
  width: fit-content;
}

.product_link a {
  display: grid;
  place-items: center;
  width: calc(70 * (60rem / 390));
  height: calc(26 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  border: solid calc(1.5 * (60rem / 390)) var(--color_02);
  background: var(--color_02);
  font-size: calc(16 * (60rem / 390));
  font-weight: 500;
  letter-spacing: .1em;
  color: #fff;
  transition: background-color .5s, color .5s;
}

.product_link a:hover {
  background: #fff;
  color: var(--color_02);
}

.product_detail .notes {
  margin-top: calc(12 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  white-space: nowrap;
}

.product_detail .notes a {
  display: inline;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.product_detail .notes .txt_S {
  margin-left: calc(2 * (60rem / 390));
  font-size: calc(8 * (60rem / 390));
}

.btn_allItems_wrap {
  position: relative;
  margin-top: calc(60 * (60rem / 390));
  padding-top: calc(125 * (60rem / 390));
}

.btn_allItems_wrap::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(110 * (60rem / 390));
  background: url(../img/illust_all.png) center left / auto 100% repeat-x;
  content: "";
  animation: loop 25s linear infinite;
}

@keyframes loop {
  0% {
      background-position: 0 0;
  }
  100% {
      background-position: calc(-650 * (60rem / 390)) 0;
  }
}

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

.btn_allItems a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(280 * (60rem / 390));
  height: calc(60 * (60rem / 390));
  border: solid calc(2 * (60rem / 390)) #fff;
  border-radius: calc(100 * (60rem / 390));
  background: var(--color_02);
  font-size: calc(17 * (60rem / 390));
  font-weight: 500;
  color: #fff;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .3));
}

.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 calc(2 * (60rem / 390)) #fff;
  border-right: solid calc(2 * (60rem / 390)) #fff;
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: margin .5s;
}

.btn_allItems a:hover::before {
  margin-right: calc(8 * (60rem / 390));
}
/*----------------------contents1*/

/*contents2----------------------*/
.campaign_wrap {
  position: relative;
}

.campaign_wrap.campaign_over::before {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .7);
  font-size: calc(20 * (60rem / 390));
  text-align: center;
  color: #fff;
  content: "キャンペーンは終了しました";
}

.btn_skincareAll {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: fit-content;
  margin-top: calc(245 * (60rem / 390));
}

#Contents2 .btn_skincareAll {
  top: auto;
  bottom: 0;
  margin: 0 0 calc(65 * (60rem / 390));
}

.btn_skincareAll a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(280 * (60rem / 390));
  height: calc(60 * (60rem / 390));
  border: solid calc(2 * (60rem / 390)) #fff;
  border-radius: calc(100 * (60rem / 390));
  background: var(--color_02);
  font-size: calc(17 * (60rem / 390));
  font-weight: 500;
  color: #fff;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .3));
}

.btn_skincareAll 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 calc(2 * (60rem / 390)) #fff;
  border-right: solid calc(2 * (60rem / 390)) #fff;
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: margin .5s;
}

.btn_skincareAll a:hover::before {
  margin-right: calc(8 * (60rem / 390));
}

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

.review_area h3 {
  margin-bottom: calc(30 * (60rem / 390));
  border-bottom: solid calc(2 * (60rem / 390)) var(--color_01);
}

.review_area h3 span {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: calc(8 * (60rem / 390)) calc(15 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390)) calc(10 * (60rem / 390)) 0 0;
  background: var(--color_01);
  font-size: calc(16 * (60rem / 390));
  font-weight: 600;
  color: #fff;
}

.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_regular) calc(1.5 * (60rem / 390));
  border-radius: calc(3 * (60rem / 390));
}

.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;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(1 * (60rem / 390));
  text-decoration-thickness: calc(1 * (60rem / 390));
}

.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_regular) calc(1.5 * (60rem / 390));
  border-right: solid var(--color_regular) calc(1.5 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}
/*----------------------contents2*/

/*contents3----------------------*/
.content_lead {
  margin-bottom: calc(40 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 500;
  line-height: 2;
  text-align: center;
}

.content_lead .txt_B {
  font-weight: 700;
}

.content_lead .txt_highlight {
  margin-right: calc(2 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 700;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-decoration-color: var(--color_daily_01);
  text-decoration-thickness: calc(12 * (60rem / 390));
  text-underline-offset: calc(-8 * (60rem / 390));
  vertical-align: .05em;
} 
.release_information_wrap {
  margin-bottom: calc(40 * (60rem / 390));
  padding: 0 calc(15 * (60rem / 390));
}

.release_information dt {
  position: relative;
  z-index: 1;
  margin-bottom: calc(-3 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 700;
  text-align: center;
}

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

.release_information dd {
  display: grid;
  place-items: center;
  height: calc(52 * (60rem / 390));
  border-radius: calc(5 * (60rem / 390));
  background: #fff;
  font-weight: 500;
  filter: drop-shadow(0 0 calc(6 * (60rem / 390)) rgba(0, 0, 0, .1));
}

.release_information dd.day {
  font-size: calc(18 * (60rem / 390));
}

.release_information dd.store {
  font-size: calc(14 * (60rem / 390));
}

.release_information_wrap .notes {
  margin-top: calc(30 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  line-height: 1.5;
  text-align: center;
}

.each_kit {
  position: relative;
  z-index: 1;
  padding-bottom: calc(80 * (60rem / 390));
}

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

.each_kit:nth-last-of-type(1) {
  padding-bottom: calc(45 * (60rem / 390));
}

.each_kit::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: calc(28 * (60rem / 390));
  content: "";
}

#SpecialCare.each_kit::before {
  background: var(--color_special_bg);
}

#DailyCare.each_kit::before {
  background: var(--color_daily_bg);
}

.kit_ttl {
  display: grid;
  place-items: center;
  width: calc(290 * (60rem / 390));
  height: calc(55 * (60rem / 390));
  margin-bottom: calc(15 * (60rem / 390));
  border: solid var(--color_bg) calc(2 * (60rem / 390)) ;
  font-size: calc(22 * (60rem / 390));
  font-weight: 700;
}

.each_kit:nth-of-type(odd) .kit_ttl {
  border-radius: 0 calc(100 * (60rem / 390)) calc(100 * (60rem / 390)) 0;
  border-left: none;
}

.each_kit:nth-of-type(even) .kit_ttl {
  border-radius: calc(100 * (60rem / 390)) 0 0 calc(100 * (60rem / 390));
  border-right: none;
  margin-right: 0;
  margin-left: auto;
}

#SpecialCare.each_kit .kit_ttl {
  background: var(--color_special_bg);
  color: var(--color_bg);
}

#DailyCare.each_kit .kit_ttl {
  background: var(--color_daily_bg);
}

.each_kit_inner {
  position: relative;
  z-index: 1;
  width: calc(360 * (60rem / 390));
  margin: 0 auto;
  padding-top: calc(30 * (60rem / 390));
  background: #fff;
}

.each_kit_inner::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_001.jpg) top center / 100% auto repeat-y;
  opacity: .6;
  content: "";
}

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

.kit_price {
  width: fit-content;
  margin: 0 auto;
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
}

.kit_price .txt_L {
  font-size: calc(16 * (60rem / 390));
  font-weight: 600;
}

.kit_price .txt_SS {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  vertical-align: .1em;
}

.kit_price .txt_LL {
  display: block;
  margin-top: calc(5 * (60rem / 390));
  font-size: calc(38 * (60rem / 390));
  font-weight: 700;
  color: var(--color_02);
}

.kit_price .txt_LL .txt_S {
  margin-left: calc(4 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  vertical-align: .2em;
}

.kit_discount {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(80 * (60rem / 390));
  height: calc(80 * (60rem / 390));
  margin: calc(-40 * (60rem / 390)) calc(-25 * (60rem / 390)) 0 0;
  border-radius: 50%;
  rotate: 8deg;
}

#SpecialCare .kit_discount {
  background: var(--color_special_01);
}

#DailyCare .kit_discount {
  background: var(--color_regular);
  color: #fff;
}

.kit_discount p {
  padding-bottom: calc(5 * (60rem / 390));
  font-size: calc(24 * (60rem / 390));
  font-weight: 700;
  line-height: .8;
  letter-spacing: 0;
  text-align: center;
}

.kit_discount p .txt_SS {
  font-size: calc(12 * (60rem / 390));
  vertical-align: .3em;
}

.kit_discount p .txt_S {
  font-size: calc(20 * (60rem / 390));
}

.kit_discount p .txt_L {
  margin-right: calc(2 * (60rem / 390));
  font-size: calc(32 * (60rem / 390));
  letter-spacing: -.02em;
}

.kit_price_wrap .notes {
  margin-top: calc(15 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
  text-align: center;
}

.kit_detail > p {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: calc(27 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  font-weight: 500;
  overflow: hidden;
}

.kit_detail > p::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(340 * (60rem / 390));
  height: calc(300 * (60rem / 390));
  rotate: 30deg;
  content: "";
}

#SpecialCare .kit_detail > p::before {
  background: linear-gradient(to right, var(--color_special_01) calc(6 * (60rem / 390)), transparent calc(6 * (60rem / 390)));
  background-size: calc(10 * (60rem / 390)) auto;
  background-repeat: repeat-x;
  opacity: .3;
}

#DailyCare .kit_detail > p::before {
  background: linear-gradient(to right, var(--color_daily_01) calc(6 * (60rem / 390)), transparent calc(6 * (60rem / 390)));
  background-size: calc(10 * (60rem / 390)) auto;
  background-repeat: repeat-x;
  opacity: .5;
}

.accordion_outside {
  position: relative;
}

.accordion_outside::before {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(70 * (60rem / 390));
  content: "";
  transition: height .5s;
}

#SpecialCare .accordion_outside::before {
  background: linear-gradient(transparent, var(--color_special_bg));
}

#DailyCare .accordion_outside::before {
  background: linear-gradient(transparent, var(--color_daily_bg));
}

.open.accordion_outside::before {
  height: 0;
}

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

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

.accordion_inner {
  overflow: hidden;
  min-height: calc(520 * (60rem / 390));
}

.accordion_btn {
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  width: fit-content;
  margin-top: calc(10 * (60rem / 390));
  padding-right: calc(15 * (60rem / 390));
  cursor: pointer;
}

#SpecialCare .accordion_btn {
  color: #fff;
}

.accordion_btn::before,
.accordion_btn::after {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(10 * (60rem / 390));
  height: calc(1.5 * (60rem / 390));
  content: "";
}

.accordion_btn::after {
  rotate: 90deg;
  transition: rotate .5s;
}

#SpecialCare .accordion_btn::before,
#SpecialCare .accordion_btn::after {
  background: #fff;
}

#DailyCare .accordion_btn::before,
#DailyCare .accordion_btn::after {
  background: var(--color_regular);
}

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

.accordion_btn span {
  font-size: calc(12 * (60rem / 390));
  text-decoration: underline;
  text-decoration-skip-ink: none;
  text-underline-offset: calc(2 * (60rem / 390));
}

.accordion_btn .to_open,
.open .accordion_btn .to_close {
  display: block;
}

.open .accordion_btn .to_open,
.accordion_btn .to_close {
  display: none;
}

.each_item {
  position: relative;
  padding-top: calc(40 * (60rem / 390));
}

.each_item:nth-of-type(n+2) {
  border-top: solid calc(1.5 * (60rem / 390));
}

#SpecialCare.each_item {
  border-color: var(--color_special_bg);
}

#DailyCare.each_item {
  border-color: var(--color_daily_bg);
}

.item_num {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(17 * (60rem / 390)) 0 0 calc(7 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(14 * (60rem / 390));
  letter-spacing: .02em;
  text-align: center;
}

.item_num .txt_L {
  display: block;
  margin-top: calc(-3 * (60rem / 390));
  font-size: calc(38 * (60rem / 390));
  letter-spacing: .02em;
}

.item_catch {
  width: calc(330 * (60rem / 390));
  min-height: calc(64 * (60rem / 390));
  margin: 0 auto calc(20 * (60rem / 390));
  padding: calc(10 * (60rem / 390)) 0;
  font-size: calc(15 * (60rem / 390));
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
}

#SpecialCare .item_catch {
  background: var(--color_special_01);
}

#DailyCare .item_catch {
  background: var(--color_daily_01);
}

.each_item > div:not(.item_caption_list_wrap, .clossSell_wrap) {
  display: flex;
  align-items: center;
  gap: calc(5 * (60rem / 390));
  width: calc(330 * (60rem / 390));
  margin: 0 auto calc(20 * (60rem / 390));
}

.each_item .item_img {
  width: calc(140 * (60rem / 390));
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .16));
}

.each_item .txt_wrap {
  flex: 1;
}

.each_item .item_name {
  margin-bottom: calc(10 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
  font-weight: 600;
  line-height: 1.5;
}

.each_item .item_name .item_brand {
  display: block;
  margin-bottom: calc(3 * (60rem / 390));
  font-family: var(--font_eng);
  font-size: calc(13 * (60rem / 390));
}

.each_item .item_price_wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.each_item .item_price {
  font-size: calc(13 * (60rem / 390));
}

.each_item .item_price .txt_S {
  margin-left: calc(3 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  vertical-align: .1em;
}

.each_item .item_link {
  position: relative;
  width: fit-content;
  padding-right: calc(10 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 700;
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.each_item .item_link::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(6 * (60rem / 390));
  height: calc(6 * (60rem / 390));
  border-top: solid calc(2 * (60rem / 390)) var(--color_regular);
  border-right: solid calc(2 * (60rem / 390)) var(--color_regular);
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
}

.clossSell_wrap {
  width: calc(285 * (60rem / 390));
  margin: 0 auto calc(20 * (60rem / 390));
}

.clossSell_wrap > p {
  position: relative;
  width: fit-content;
  margin: 0 auto calc(8 * (60rem / 390));
  padding: 0 calc(10 * (60rem / 390));
  font-size: calc(17 * (60rem / 390));
  font-weight: 600;
}

.clossSell_wrap > p::before,
.clossSell_wrap > p::after {
  position: absolute;
  bottom: 0;
  width: calc(1.5 * (60rem / 390));
  height: calc(17 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.clossSell_wrap > p::before {
  left: 0;
  rotate: -30deg;
}

.clossSell_wrap > p::after {
  right: 0;
  rotate: 30deg;
}

.clossSell_wrap > div {
  display: flex;
  align-items: center;
  padding: calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) calc(10 * (60rem / 390));
  background: #FBF4F2;
}

.clossSell_wrap figure {
  width: calc(80 * (60rem / 390));
}

.clossSell_wrap .txt_wrap {
  flex: 1;
}

.clossSell_wrap .item_caption {
  margin-top: calc(10 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  line-height: 1.6;
}

.item_caption_list_wrap {
  position: relative;
  z-index: 1;
  padding: calc(15 * (60rem / 390)) calc(15 * (60rem / 390)) calc(20 * (60rem / 390));
}

.item_caption_list_wrap::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: .2;
  content: "";
}

#SpecialCare .item_caption_list_wrap::before {
  background: var(--color_special_01);
  opacity: .2;
}

#DailyCare .item_caption_list_wrap::before {
  background: var(--color_daily_01);
  opacity: .3;
}


.item_caption_list li {
  position: relative;
  padding-left: calc(15 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  line-height: 1.6;
  text-align: justify;
}

.item_caption_list li sup {
  font-size: calc(8 * (60rem / 390));
}

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

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

.item_caption_list_wrap .notes {
  margin-top: calc(6 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  text-align: right;
}
/*----------------------contents3*/

/*fixed nav-----------------------*/
.fixed_nav {
  position: fixed;
  z-index: 3;
  bottom: 0;
  left: 0;
  width: 100%;
  translate: 0 100%;
  transition: translate .5s;
}

.fixed_nav.active {
  translate: unset;
}

.fixed_nav .nav_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: var(--color_01);
}

.fixed_nav .nav_list li:nth-of-type(n+2) {
  border-left: dashed calc(2 * (60rem / 390)) #fff;
  box-sizing: border-box;
}

.fixed_nav .nav_list a {
  display: grid;
  place-items: center;
  height: calc(60 * (60rem / 390));
  font-size: calc(14 * (60rem / 390));
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: #fff;
}
/*-----------------------fixed nav*/

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

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

  .ttl_pc {
    width: 30rem;
  }

  .pc_nav .nav_list li:nth-of-type(n+2) {
    margin-top: 5rem;
  }

  .pc_nav .content_num {
    position: relative;
    margin-bottom: .5rem;
    font-size: 1.4rem;
    font-style: italic;
    color: var(--color_01);
  }

  .pc_nav .content_num .txt_L {
    margin-left: .3rem;
    font-size: 3rem;
    font-weight: 500;
  }

  .content_ttl span {
    display: inline-block;
    width: fit-content;
    padding: .7rem 1.5rem;
    background: var(--color_01);
    font-size: 2.4rem;
    font-weight: 600;
    color: #fff;
  }

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