@charset "UTF-8";

/*all----------------------------*/
html {
  font-size: 62.5%;
}

#Wrap,
.wrapTop,
.wrapBottom {
  max-width: none;
  width: 100%;
}

footer {
  position: relative;
  z-index: 2;
}

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

.LP_page {
  background: #F5F5EA;
  color: #000;
  font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;
}

.LP_page picture,
.LP_page a {
  display: block;
}

.LP_page a {
  transition: opacity .3s;
}

.LP_page a:hover {
  opacity: .6;
}

.LP_page img {
  width: 100%;
  height: auto;
}

.sec_inner {
  width: 120rem;
  margin: 0 auto;
}

.LP_page .txt_en {
  font-family: 'Yeseva One', cursive;
}

.LP_page .sclr_anime {
  transform: translateY(30px);
  opacity: 0;
  transition: 1s;
}

.LP_page .sclr_anime.active {
  transform: translateY(0);
  opacity: 1;
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  position: relative;
  z-index: 1;
  padding-top: 8.5rem;
}

.mv_area::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 108rem;
  background: linear-gradient(45deg, #F0DCD1, #F9F9DF);
  content: "";
}

.mv_area::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 24rem;
  margin-top: 84rem;
  background: linear-gradient(transparent, #F5F5EA);
  content: "";
}

.main-ttl {
  margin-bottom: 3.5rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: bold;
  font-size: 2.5rem;
  letter-spacing: .2em;
  text-align: center;
  color: #E0991D;
}

.main-ttl .txt_en {
  display: block;
  margin-bottom: 1.6rem;
  font-weight: normal;
  font-size: 8rem;
  line-height: 1;
  letter-spacing: .04em;
}

.main-lead {
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}
/*-----------------------------mv*/

/*recommended brand--------------*/
.recommended-brand_area {
  position: relative;
  z-index: 1;
  padding-top: 4.5rem;
}

.primary-ttl {
  margin-bottom: 4rem;
  font-family: 'Noto Serif JP', serif;
  font-weight: normal;
  font-size: 2.8rem;
  line-height: 1.35;
  text-align: center;
}

.primary-ttl .speech-bubble {
  display: block;
  width: 16.6rem;
  margin: 0 auto 2rem;
}

.primary-ttl .txt_L {
  padding: 0 .5rem;
  font-size: 6rem;
  vertical-align: -.5rem;
}

.recommended-brand_area nav {
  padding-bottom: 2rem;
}

.menu_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  row-gap: 1.2rem;
}

.menu_list li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 39.2rem;
  height: 10.6rem;
  background: rgba(255, 255, 255, .5);
}

.menu_list li a::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: .2rem;
  height: 1.4rem;
  margin-right: 2.2rem;
  background: #c7c2bc;
  content: "";
}

.menu_list li a::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  border-right: solid .2rem #c7c2bc;
  border-bottom: solid .2rem #c7c2bc;
  width: .8rem;
  height: .8rem;
  margin: .2rem 1.8rem 0 0;
  content: "";
}

.menu_list li a .menu-number {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.7rem;
  height: 100%;
  font-size: 4rem;
  line-height: 1;
  color: #333;
}

.menu_list li a .menu-number::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 7.2rem;
  background: #E0E0E0;
  content: "";
}

.menu_list li a .menu-ttl {
  font-size: 1.45rem;
  line-height: 1.5;
}

.menu_list li a .menu-ttl .emphasis {
  font-weight: 600;
  font-size: 1.8rem;
  color: #E0991D;
}

.brand_list {
  margin-bottom: 11.7rem;
}

.brand_list > li {
  padding-top: 16rem;
}

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

.brand_list > li > .content_wrap {
  margin-bottom: 4.5rem;
}

.brand-img_wrap {
  position: relative;
}


.brand_list > li:nth-of-type(even) .brand-img_wrap {
  order: 2;
}

.brand-number {
  position: absolute;
  top: 0;
  left: 0;
  margin: -4rem 0 0 2.2rem;
  font-size: 6.8rem;
  line-height: 1;
  letter-spacing: .04em;
  color: #7DBEC1;
  filter: drop-shadow(0 3px 10px #fff)
}

.brand-number::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 13.5rem;
  margin: .2rem -1rem 0 0;
  transform: rotate(45deg);
  background: #8BBCC0;
  content: "";

}

.brand-img {
  width: 56rem;
}

.brand-name {
  width: 23.1rem;
  margin-bottom: 4.6rem;
}

#trilogy .brand-name {
  width: 13.2rem;
}

.brand-caption {
  width: 57rem;
  font-size: 1.5rem;
  line-height: 2;
}

.brand-caption .notes {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #9D9D9D;
}

.care-step_wrap dt {
  margin-bottom: 2rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.5rem;
  text-align: center;
}

.step_list {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
  margin-bottom: 4rem;
}

.step_list input {
  display: none;
}

.step_list label {
  position: relative;
  display: block;
  border-radius: 1.5rem;
  width: 28.8rem;
  height: 100%;
  padding: 2rem 0 7.2rem;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

.itm-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 10rem;
  width: 3.3rem;
  height: 3.3rem;
  margin: 1rem 0 0 1rem;
  background: #ccc;
  transition: .1s;
}

.step_list input:checked + label .itm-checkbox {
  background: #E0991D;
}

.itm-checkbox::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.15rem;
  background: url(../img/icon_001.svg) center center / cover no-repeat;
  content: "";
}

.step_list .itm-cat {
  margin-bottom: .8rem;
  font-size: 1.5rem;
  text-align: center;
}

.step_list .itm-cat .txt_en {
  display: block;
  margin-bottom: .2rem;
}

.step_list .itm-img {
  margin-bottom: 1.2rem;
}

.step_list .txt_wrap {
  padding: 0 1.5rem;
}

.step_list .itm-name {
  margin-bottom: .5rem;
  font-weight: normal;
  font-size: 1.4rem;
  line-height: 1.5;
}

.step_list .itm-price {
  font-size: 2rem;
}

.step_list .itm-price .tax {
  font-size: 1.2rem;
}

.step_list .itm-link a {
  font-size: 1.3rem;
  letter-spacing: 0;
  color: #7DBEC1;
  text-decoration: underline;
}

.step_list .itm-caption {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 2;
}

.step_list .itm-caption .notes {
  display: block;
  font-size: 1rem;
  color: #9D9D9D;
}

.step_list .btn_selct {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rem;
  width: 23rem;
  height: 4rem;
  margin-bottom: 2rem;
  background: #333;
  font-weight: 400;
  font-size: 1.4rem;
  color: #fff;
  transition: .3s;
}

.step_list input:checked + label .btn_selct {
  border: solid 1px rgba(0, 0, 0, .8);
  background: #fff;
  color: #000;
}

.step_list .btn_selct span {
  position: relative;
  padding-left: 2rem;
}

.step_list .btn_selct span::before {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 1.2rem;
  height: 1px;
  background: #fff;
  content: "";
}

.step_list .btn_selct span::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  left: 0;
  width: 1.2rem;
  height: 1px;
  background: #fff;
  content: "";
}

.step_list input:checked + label .btn_selct span::before {
  background: #000;
  transform: translateY(-50%) rotate(45deg);
}

.step_list input:checked + label .btn_selct span::after {
  background: #000;
  transform: translateY(-50%) rotate(135deg);
}

.step_list .btn_selct .checkout {
  display: none;
}

.step_list input:checked + label .btn_selct .checkout {
  display: block;
}

.step_list input:checked + label .btn_selct .checkin {
  display: none;
}

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

.btn_cartin a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36rem;
  height: 6rem;
  background: #333;
  font-weight: 600;
  font-size: 1.6rem;
  letter-spacing: .04em;
  color: #fff;
}

.btn_cartin a span {
  position: relative;
  padding-left: 3rem;
}

.btn_cartin a span::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2rem;
  height: 1.7rem;
  background: url(../img/icon_002.svg) center center / cover no-repeat;
  content: "";
}
/*--------------recommended brand*/

/*featured-item_area-------------*/
.featured-item_area {
  position: relative;
  z-index: 1;
  padding: 10rem 0 12rem;
}

.featured-item_area::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 71.7rem;
  background: linear-gradient(45deg, #F0DCD1, #F9F9DF);
  content: "";
}

.featured-item_area::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 24rem;
  margin-top: 48rem;
  background: linear-gradient(transparent, #F5F5EA);
  content: "";
}

.featured-item_area .primary-ttl {
  margin-bottom: 3rem;
}

.featured-item_area .primary-ttl .speech-bubble {
  width: 26rem;
}

.sec-lead {
  margin-bottom: 4.5rem;
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}

.featured-item_area .menu_list li a .menu-ttl {
  width: 26.5rem;
  line-height: 1.4;
}

.featured-item_list > li {
  padding-top: 9.5rem;
}

.secondary-ttl {
  margin-bottom: 3.8rem;
  font-weight: 600;
  font-size: 2.2rem;
  line-height: 1.5;
  text-align: center;
}

.secondary-ttl .txt_S {
  display: block;
  margin-bottom: .5rem;
  font-weight: 300;
  font-size: 1.6rem;
}

.secondary-ttl .txt_en {
  font-size: 2rem;
}

.secondary-ttl .txt_L {
  font-size: 2.5rem;
  color: #E0991D;
}

.featured-item_list li .content_wrap {
  display: flex;
  justify-content: space-between;
}

.featured-item_list > li > .content_wrap:nth-of-type(1) {
  align-items: center;
  margin-bottom: 5rem;
}

.featured-item_list .itm-img_wrap {
  position: relative;
}

.featured-item_list .itm-number {
  position: absolute;
  top: 0;
  left: 0;
  margin: -4rem 0 0 2.2rem;
  font-size: 6.8rem;
  line-height: 1;
  letter-spacing: .04em;
  color: #7DBEC1;
  filter: drop-shadow(0 3px 10px #fff)
}

.featured-item_list .itm-number::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 13.5rem;
  margin: .2rem -1rem 0 0;
  transform: rotate(45deg);
  background: #8BBCC0;
  content: "";

}

.featured-item_list .itm-img {
  width: 56rem;
}

.itm-dtl_wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;
  border-radius: 2rem;
  width: 57rem;
  height: 18.6rem;
  margin-bottom: 3rem;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
}

#F-organics_BoosterMist .itm-dtl_wrap {
  gap: 2rem;
}

.itm-dtl_wrap .itm-img {
  width: 10rem;
}

#toone_JellyMask .itm-dtl_wrap .itm-img {
  width: 17.4rem;
}

.itm-dtl_wrap .content_wrap {
  padding-bottom: 1.5rem;
}

.itm-dtl_wrap .itm-name {
  margin-bottom: .5rem;
  font-weight: normal;
  font-size: 1.4rem;
}

.itm-dtl_wrap .itm-price {
  font-size: 2rem;
}

.itm-dtl_wrap .itm-price .tax {
  font-size: 1.2rem;
}

.itm-dtl_wrap .itm-link {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 2rem 5.4rem 0;
}

.itm-dtl_wrap .itm-link a {
  font-size: 1.3rem;
  letter-spacing: 0;
  color: #7DBEC1;
  text-decoration: underline;
}

.featured-item_list .itm-catch {
  margin-bottom: 1.6rem;
  font-family: 'Noto Serif JP', serif;
  font-size: 2.2rem;
  line-height: 2;
}

.featured-item_list .itm-catch .notes {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #9D9D9D;
}

.featured-item_list .itm-caption {
  width: 57rem;
  font-size: 1.5rem;
  line-height: 2;
}

.featured-item_list .itm-caption .notes {
  display: block;
  margin-top: 1rem;
  font-size: 1.1rem;
  line-height: 1;
  color: #9D9D9D;
}

.each_strong-point {
  position: relative;
  border-top: dotted 1px #9D9D9D;
  padding-top: 3rem;
}

.each_strong-point dt {
  position: absolute;
  top: 0;
  left: 0;
  width: fit-content;
  margin-top: -1.7rem;
  padding-right: 2rem;
  background: #F5F5EA;
  font-size: 2rem;
  color: #E0991D;
}

.point_wrap {
  width: 56rem;
}

.point_wrap dd {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.point-img {
  width: 18rem;
}

.point-caption {
  font-size: 1.5rem;
  line-height: 2;
  flex: 1;
}

.staff-comment_wrap {
  width: 57rem;
}

.staff-comment_wrap dd {
  display: flex;
  gap: 2rem;
}

.staff-img_wrap {
  width: 11rem;
}

.staff-img {
  margin-bottom: 1rem;
  filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, .16));
}

.staff-profile {
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: center;
}

.staff-comment {
  width: 43.9rem;
  margin-top: -.5rem;
  font-size: 1.3rem;
  line-height: 2;
}

.about-potency_wrap {
  width: 57rem;
  margin-top: 4.5rem;
  padding-top: 2.5rem;
}

.about-potency_wrap dt {
  font-weight: 600;
}

.about-potency_wrap dd {
  font-size: 1.5rem;
  line-height: 2;
}

/*-------------featured-item_area*/

/*Following Navigation-----------*/
.btn_following-nav {
  position: fixed;
  bottom: 0;
  right: 0;
  z-index: 1;
  margin-bottom: 4rem;
  transform: translateX(100%);
  transition: .3s;
}

.btn_following-nav.active {
  transform: translateX(0);
}

.btn_following-nav a {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10rem 0 0 10rem;
  width: 12.4rem;
  height: 4.4rem;
  background: #E0991D;
  font-size: 2rem;
  letter-spacing: .1;
  color: #fff;
}

.nav_outside {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: rgba(245, 245, 234, .8);
  transition: opacity .3s;
}

.nav_outside.hide {
  opacity: 0;
  pointer-events: none;
}

body.no_scroll {
  height: 100vh;
  overflow: hidden;
}

header.hide {
  display: none !important;
}

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

.nav_outside nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5rem;
  background: linear-gradient(45deg, #F0DCD1, #F9F9DF);
}

.nav_outside nav .btn_close {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.8rem;
  height: 2.8rem;
  margin: 1.6rem 1.6rem 0 0;
  cursor: pointer;
}

.nav_outside nav .btn_close::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 100%;
  height: 1px;
  background: #707070;
  content: "";
}

.nav_outside nav .btn_close::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 1px;
  height: 100%;
  background: #707070;
  content: "";
}

.nav_inner .each-content:nth-of-type(n+2) {
  margin-top: 4rem;
}

.nav_inner .primary-ttl {
  margin-bottom: 1.5rem;
  font-size: 1.9rem;
  line-height: 1.75;
  text-align: left;
}

.nav_inner .menu_list {
  display: block;
}

.nav_inner .menu_list li:nth-of-type(n+2) {
  margin-top: 1rem;
}

.nav_inner .menu_list li a {
  width: 45.4rem;
  height: 7.7rem;
}

.nav_inner .menu_list li a::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1.4rem;
  height: .2rem;
  margin-right: 1.7rem;
  background: #c7c2bc;
  content: "";
}

.nav_inner .menu_list li a::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  border: none;
  border-top: solid .2rem #c7c2bc;
  border-right: solid .2rem #c7c2bc;
  width: .8rem;
  height: .8rem;
  margin: 0 1.8rem 0 0;
  content: "";
}

.nav_inner .menu_list li a .menu-number {
  width: 5.3rem;
  font-size: 3.6rem;
}

.nav_inner .menu_list li a .menu-number::before {
  height: 5.6rem;
}

.nav_inner .menu_list li a .menu-ttl {
  width: 32rem;
}
/*-----------Following Navigation*/
/*Smart phone---------------------------------------------*/
@media screen and  (max-width:767px) {
/*all----------------------------*/
.only_pc {
  display: none;
}

.sec_inner {
  width: calc(400 * (100vw / 430));
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  padding-top: calc(65 * (100vw / 430));
}

.mv_area::before {
  height: calc(950 * (100vw / 430));
}

.mv_area::after {
  display: none;
}

.main-ttl {
  margin-bottom: calc(24 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.main-ttl .txt_en {
  margin-bottom: calc(10 * (100vw / 430));
  font-size: calc(44 * (100vw / 430));
}

.main-lead {
  font-size: calc(16 * (100vw / 430));
}
/*-----------------------------mv*/

/*recommended brand--------------*/
.recommended-brand_area {
  padding-top: calc(40 * (100vw / 430));
}

.primary-ttl {
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(22 * (100vw / 430));
  line-height: 1.75;
}

.primary-ttl .speech-bubble {
  width: calc(160 * (100vw / 430));
  margin: 0 auto calc(7 * (100vw / 430));
}

.primary-ttl .txt_L {
  padding: 0 calc(3 * (100vw / 430)) 0 0;
  font-size: calc(52 * (100vw / 430));
  line-height: 1.18;
  vertical-align: calc(-2 * (100vw / 430));
}

.recommended-brand_area nav {
  padding-bottom: 0;
}

.menu_list {
  display: block;
}

.menu_list li:nth-of-type(n+2) {
  margin-top: calc(5 * (100vw / 430));
}

.menu_list li a {
  gap: calc(15 * (100vw / 430));
  width: calc(400 * (100vw / 430));
  height: calc(60 * (100vw / 430));
}

.menu_list li a::before {
  width: calc(2 * (100vw / 430));
  height: calc(11.5 * (100vw / 430));
  margin-right: calc(19 * (100vw / 430));
}

.menu_list li a::after {
  border-width: calc(2 * (100vw / 430));
  width: calc(6 * (100vw / 430));
  height: calc(6 * (100vw / 430));
  margin: calc(2 * (100vw / 430)) calc(16 * (100vw / 430)) 0 0;
}

.menu_list li a .menu-number {
  width: calc(43 * (100vw / 430));
  font-size: calc(28 * (100vw / 430));
}

.menu_list li a .menu-number::before {
  height: calc(41 * (100vw / 430));
}

.menu_list li a .menu-ttl {
  font-size: calc(13 * (100vw / 430));
}

.menu_list li a .menu-ttl .emphasis {
  font-size: calc(16 * (100vw / 430));
}

.brand_list {
  margin-bottom: calc(60 * (100vw / 430));
}

.brand_list > li {
  padding-top: calc(80 * (100vw / 430));
}

.brand_list li .content_wrap {
  display: block;
}

.brand_list > li > .content_wrap {
  margin-bottom: calc(28 * (100vw / 430));
}

.brand-number {
  margin: calc(-30 * (100vw / 430)) 0 0 calc(2 * (100vw / 430));
  font-size: calc(60 * (100vw / 430));
}

.brand-number::before {
  height: calc(113 * (100vw / 430));
  margin: calc(-2 * (100vw / 430)) calc(-10 * (100vw / 430)) 0 0;
}

.brand-img {
  width: 100vw;
  margin: 0 calc(50% - 50vw) calc(30 * (100vw / 430));
}

.brand-name {
  width: calc(180 * (100vw / 430));
  margin: 0 auto calc(30 * (100vw / 430));
}

#toone .brand-name {
  width: calc(160 * (100vw / 430));
}

#Antipodes .brand-name {
  width: calc(200 * (100vw / 430));
}

#trilogy .brand-name {
  width: calc(100 * (100vw / 430));
}

.brand-caption {
  width: auto;
  font-size: calc(14 * (100vw / 430));
}

.brand-caption .notes {
  margin-top: calc(8 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}

.care-step_wrap dt {
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(22 * (100vw / 430));
}

.for-simplebar {
  width: 100vw;
  margin: 0 calc(50% - 50vw) calc(60 * (100vw / 430));
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.for-simplebar::-webkit-scrollbar {
  display: none;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  top: 0;
  left: 0;
  right: 0;
  height: calc(10 * (100vw / 430));
  cursor: pointer;
}

.simplebar-scrollbar::before {
  top: 50%;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%);
  height: 2px !important;
  background: #6E6E6E;
}

.simplebar-scrollbar.simplebar-visible::before {
  opacity: 1;
}

.simplebar-track {
  width: calc(320 * (100vw / 430));
  height: calc(10 * (100vw / 430)) !important;
  margin: 0 auto calc(-27 * (100vw / 430));
  pointer-events: auto;
}

.simplebar-track::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 2px;
  background: #DBDBDB;
  content: "";
}

.step_list {
  display: flex;
  justify-content: flex-start;
  gap: calc(15 * (100vw / 430));
  margin-bottom: 0;
  padding: calc(6 * (100vw / 430)) 0 calc(10 * (100vw / 430)) calc(15 * (100vw / 430));
}

.step_list li:nth-last-of-type(1) {
  position: relative;
}

.step_list li:nth-last-of-type(1)::before {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  width: calc(15 * (100vw / 430));
  height: 1px;
  content: "";
}

.step_list label {
  border-radius: calc(15 * (100vw / 430));
  width: calc(320 * (100vw / 430));
  padding: calc(16 * (100vw / 430)) 0 calc(70 * (100vw / 430));
}

.itm-checkbox {
  border-radius: calc(100 * (100vw / 430));
  width: calc(40 * (100vw / 430));
  height: calc(40 * (100vw / 430));
  margin: calc(10 * (100vw / 430)) 0 0 calc(10 * (100vw / 430));
}

.itm-checkbox::before {
  width: calc(16 * (100vw / 430));
  height: calc(11.5 * (100vw / 430));
}

.step_list .itm-cat {
  margin-bottom: calc(25 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.step_list .itm-cat .txt_en {
  margin-bottom: calc(2 * (100vw / 430));
}

.step_list .itm-img {
  width: calc(240 * (100vw / 430));
  margin: 0 auto calc(30 * (100vw / 430));
}

.step_list .txt_wrap {
  padding: 0 calc(15 * (100vw / 430));
}

.step_list .itm-name {
  margin-bottom: calc(2 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.step_list li .content_wrap {
  display: flex;
  justify-content: space-between;
}

.step_list .itm-price {
  font-size: calc(19 * (100vw / 430));
}

.step_list .itm-price .tax {
  font-size: calc(12 * (100vw / 430));
}

.step_list .itm-link a {
  font-size: calc(14 * (100vw / 430));
}

.step_list .itm-caption {
  margin-top: calc(8 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

.step_list .itm-caption .notes {
  font-size: calc(10 * (100vw / 430));
}

.step_list .btn_selct {
  border-radius: calc(100 * (100vw / 430));
  width: calc(230 * (100vw / 430));
  height: calc(40 * (100vw / 430));
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

.step_list .btn_selct span {
  padding-left: calc(20 * (100vw / 430));
}

.step_list .btn_selct span::before {
  width: calc(12 * (100vw / 430));
}

.step_list .btn_selct span::after {
  width: calc(12 * (100vw / 430));
}

.btn_cartin a {
  width: calc(330 * (100vw / 430));
  height: calc(56 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.btn_cartin a span {
  padding-left: calc(35 * (100vw / 430));
}

.btn_cartin a span::before {
  width: calc(25 * (100vw / 430));
  height: calc(21 * (100vw / 430));
}
/*--------------recommended brand*/

/*featured-item_area-------------*/
.featured-item_area {
  padding: calc(60 * (100vw / 430)) 0 calc(40 * (100vw / 430));
}

.featured-item_area::before {
  height: calc(580 * (100vw / 430));
}

.featured-item_area::after {
  display: none;
}

.featured-item_area .primary-ttl {
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(25 * (100vw / 430));
}

.featured-item_area .primary-ttl .speech-bubble {
  width: calc(240 * (100vw / 430));
}

.sec-lead {
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.featured-item_area .menu_list li a .menu-ttl {
  width: calc(308 * (100vw / 430));
}

.featured-item_list > li {
  position: relative;
  padding-top: calc(60 * (100vw / 430));
  margin-bottom: calc(15 * (100vw / 430));
}

.secondary-ttl {
  position: absolute;
  top: 0;
  left: 0;
  margin: calc(512 * (100vw / 430)) 0 0;
  font-size: calc(18 * (100vw / 430));
  text-align: left;
}

.secondary-ttl .txt_S {
  margin-bottom: calc(5 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.secondary-ttl .txt_en {
  font-size: calc(18 * (100vw / 430));
}

.secondary-ttl .txt_L {
  font-size: calc(22 * (100vw / 430));
}

.featured-item_list li .content_wrap {
  display: block;
}

.featured-item_list > li > .content_wrap:nth-of-type(1) {
  margin-bottom: calc(56 * (100vw / 430));
}

.featured-item_list > li#Me-Today_lotion > .content_wrap:nth-of-type(1) {
  margin-bottom: calc(25 * (100vw / 430));
}

.featured-item_list .itm-img_wrap {
  position: relative;
  margin-bottom: calc(140 * (100vw / 430));;
}

.featured-item_list .itm-number {
  margin: calc(-30 * (100vw / 430)) 0 0 calc(2 * (100vw / 430));
  font-size: calc(60 * (100vw / 430));
}

.featured-item_list .itm-number::before {
  height: calc(113 * (100vw / 430));
  margin: calc(-2 * (100vw / 430)) calc(-10 * (100vw / 430)) 0 0;
}

.featured-item_list .itm-img {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

.itm-dtl_wrap {
  display: block;
  border-radius: calc(15 * (100vw / 430));
  width: auto;
  height: auto;
  margin-bottom: calc(22 * (100vw / 430));
  padding: calc(20 * (100vw / 430)) calc(20 * (100vw / 430)) calc(10 * (100vw / 430));
}

.itm-dtl_wrap .itm-img {
  width: calc(126 * (100vw / 430));
  margin: 0 auto calc(12 * (100vw / 430));
}

#toone_JellyMask .itm-dtl_wrap .itm-img {
  width: calc(275 * (100vw / 430));
  margin-bottom: calc(22 * (100vw / 430));
  padding-left: calc(53 * (100vw / 430));
}

#F-organics_BoosterMist .itm-dtl_wrap .itm-img {
  width: calc(114 * (100vw / 430));
}

.itm-dtl_wrap .content_wrap {
  padding-bottom: 0;
}

.itm-dtl_wrap .itm-name {
  margin-bottom: calc(2 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.itm-dtl_wrap .itm-price {
  font-size: calc(19 * (100vw / 430));
}

.itm-dtl_wrap .itm-price .tax {
  font-size: calc(12 * (100vw / 430));
}

.itm-dtl_wrap .itm-link {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 calc(20 * (100vw / 430)) calc(18 * (100vw / 430)) 0;
}

.itm-dtl_wrap .itm-link a {
  font-size: calc(14 * (100vw / 430));
}

.featured-item_list .itm-catch {
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(19 * (100vw / 430));
}

.featured-item_list .itm-catch .notes {
  margin-top: calc(8 * (100vw / 430));
  font-size: calc(11 * (100vw / 430));
}

.featured-item_list .itm-caption {
  width: auto;
  font-size: calc(14 * (100vw / 430));
  line-height: 1.9;
}

.featured-item_list .itm-caption .notes {
  margin-top: calc(8 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
  line-height: 1.5;
}

.each_strong-point {
  padding-top: calc(20 * (100vw / 430));
}

.each_strong-point dt {
  margin-top: calc(-12 * (100vw / 430));
  padding-right: calc(20 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.point_wrap {
  width: auto;
  margin-bottom: calc(40 * (100vw / 430));
}

.point_wrap dd {
  gap: calc(20 * (100vw / 430));
}

.point-img {
  width: calc(150 * (100vw / 430));
}

.point-caption {
  font-size: calc(15 * (100vw / 430));
}

.staff-comment_wrap {
  width: auto;
}

.staff-comment_wrap dd {
  display: block;
}

.staff-img_wrap {
  display: flex;
  align-items: center;
  gap: calc(15 * (100vw / 430));
  width: auto;
  margin-bottom: calc(20 * (100vw / 430));
}

.staff-img {
  width: calc(80 * (100vw / 430));
  margin-bottom: 0;
}

.staff-profile {
  font-size: calc(13 * (100vw / 430));
  text-align: left;
}

.staff-comment {
  width: auto;
  margin-top: 0;
  font-size: calc(12 * (100vw / 430));
}

.about-potency_wrap {
  width: auto;
  margin-top: calc(50 * (100vw / 430));
  padding-top: calc(20 * (100vw / 430));
}

.about-potency_wrap dd {
  font-size: calc(15 * (100vw / 430));
}

/*-------------featured-item_area*/

/*Following Navigation-----------*/
.btn_following-nav {
  bottom: auto;
  top: 0;
  margin: calc(85 * (100vw / 430)) 0 0;
}

.btn_following-nav a {
  border-radius: calc(100 * (100vw / 430)) 0 0 calc(100 * (100vw / 430));
  width: calc(90 * (100vw / 430));
  height: calc(40 * (100vw / 430));
  font-size: calc(15 * (100vw / 430));
}

.nav_outside nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: calc(15 * (100vw / 430));
}

.nav_outside nav .btn_close {
  width: calc(26 * (100vw / 430));
  height: calc(26 * (100vw / 430));
  margin: calc(16 * (100vw / 430)) calc(16 * (100vw / 430)) 0 0;
}

.nav_inner {
  width: 100%;
}

.nav_inner .each-content:nth-of-type(n+2) {
  margin-top: calc(40 * (100vw / 430));
}

.nav_inner .primary-ttl {
  margin-bottom: calc(15 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.nav_inner .menu_list li:nth-of-type(n+2) {
  margin-top: calc(5 * (100vw / 430));
}

.nav_inner .menu_list li a {
  width: auto;
  height: calc(60 * (100vw / 430));
}

.nav_inner .menu_list li a::before {
  width: calc(11.5 * (100vw / 430));
  height: calc(2 * (100vw / 430));
  margin-right: calc(16 * (100vw / 430));
}

.nav_inner .menu_list li a::after {
  border-width: calc(2 * (100vw / 430));
  width: calc(6 * (100vw / 430));
  height: calc(6 * (100vw / 430));
  margin: 0 calc(16 * (100vw / 430)) 0 0;
}

.nav_inner .menu_list li a .menu-number {
  width: calc(43 * (100vw / 430));
  font-size: calc(28 * (100vw / 430));
}

.nav_inner .menu_list li a .menu-number::before {
  height: calc(41 * (100vw / 430));
}

.nav_inner .menu_list li a .menu-ttl {
  width: calc(300 * (100vw / 430));
}
/*-----------Following Navigation*/
}

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

/*pcのみ--------------------------------------------------*/
@media screen and  (min-width:768px) {
.only_sp {
  display: none;
}
}
/*--------------------------------------------------pcのみ*/

/*レスポンシブ＆タブレット対応-------------------------------*/
@media screen and (max-width: 1600px){
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/