@charset "UTF-8";

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

body {
  -webkit-tap-highlight-color: transparent;
}

#Wrap {
  width: auto;
}

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

.nav-top {
  display: none;
  z-index: 5;
}

:root {
  --color_regular: #222222;
  --color_01: #CC565D;
  --color_02: #EEC6C9;
  --color_03: #ECE3E3;
  --color_04: #F8F8F8;
  --color_05: #F6F7F1;
  --color_cat01_01: #B71E37;
  --color_cat02_01: #507EAF;
  --color_cat03_01: #A07CA4;
  --color_night: #686A7B;
  --color_day: #D38168;
}

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

.LP_page {
  padding-bottom: 12rem;
  background: var(--color_05);
  color: var(--color_regular);
  font-family: "Zen Kaku Gothic New", sans-serif;
  overflow-x: clip;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active {
  opacity: 1;
}

.LP_page.modalOpen {
  overflow-y: scroll;
  height: 100%;
}

.LP_page .txt_eng {
  font-family: "Marcellus", serif;
}

.LP_page picture {
  display: block;
  font-size: 0;
}

.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: 1rem;
}

.cp-bnr {
  background: var(--color_01);
}

.cp-bnr picture {
  width: 100rem;
  margin: 0 auto;
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  padding: 5rem 0 9rem;
}

.main_ttl {
  margin-bottom: 1.5rem;
  font-family: "Noto Serif JP", serif;
  font-size: 2.6rem;
  font-weight: 400;
  line-height: 2;
  text-align: center;
}

.main_ttl .logo_martina {
  display: block;
  width: 21.5rem;
  margin: 0 auto 4rem;
}

.mv {
  width: 68.6rem;
  margin: 0 auto 3rem;
}

.main_lead_wrap dt {
  margin-bottom: 2.5rem;
  font-size: 1.6rem;
  text-align: center;
}

.main_lead_wrap dt .txt_L {
  position: relative;
  display: block;
  width: fit-content;
  margin: 1.5rem auto 0;
  padding: .8rem 2.2rem;
  font-size: 2rem;
  font-weight: 700;
}

.main_lead_wrap dt .txt_L::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-top: solid var(--color_regular);
  border-left: solid var(--color_regular);
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.main_lead_wrap dt .txt_L::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-bottom: solid var(--color_regular);
  border-right: solid var(--color_regular);
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.main_lead_wrap dt .txt_eng {
  display: block;
  margin-top: .5rem;
  font-size: 1.4rem;
  color: var(--color_01);
  opacity: .8;
}

.main_lead_wrap dd {
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
}
/*-----------------------------mv*/

/*campaign-----------------------*/
.campaign_area {
  width: 70rem;
  margin: 0 auto 7rem;
  padding: 4rem 0 6rem;
  background: var(--color_03);
}

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

.campaign_area a:hover {
  opacity: .7 !important;
}

.cp_ttl_wrap {
  width: fit-content;
  margin: 0 auto 2rem;
}

.cp_ttl {
  margin-bottom: 1.2rem;
  font-weight: 400;
  text-align: center;
}

.cp_ttl .txt_S {
  display: block;
  border: solid rgba(34, 34, 34, .5);
  border-width: .1rem;
  border-radius: .3rem;
  width: fit-content;
  margin: 0 auto 1rem;
  padding: .5rem 4.5rem;
  background: #fff;
  font-size: 2rem;
  letter-spacing: .15em;
}

.cp_ttl .txt_eng {
  font-size: 3.4rem;
  letter-spacing: .1em;
}

.cp_period {
  border-top: solid rgba(34, 34, 34, .5);
  border-bottom: solid rgba(34, 34, 34, .5);
  border-width: .1rem;
  padding: .8rem 0;
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}

.cp_period .txt_S {
  font-size: 1.3rem;
}

.cp_list > li {
  position: relative;
  border-radius: 1rem;
  width: 50rem;
  margin: 0 auto;
  padding: 2.5rem 0;
  background: #fff;
  overflow: clip;
}

.cp_list > li::before {
  position: absolute;
  top: 0;
  left: 0;
  border-top: solid 7rem var(--color_02);
  border-right: solid 7rem transparent;
  content: "";
}

.cp_num {
  position: absolute;
  top: 0;
  left: 0;
  margin: .5rem 0 0 1rem;
  font-size: 3rem;
  letter-spacing: 0;
}

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

.cp_detail {
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
}

.cp_detail a,
.cp_notes a {
  display: inline;
  text-decoration: underline;
}

.cp_detail .txt_L {
  display: block;
  margin-top: .4rem;
  font-size: 2rem;
  line-height: 1.5;
  font-weight: 700;
  color: var(--color_01);
}

.cp_detail .txt_L sup {
  color: var(--color_regular);
}

.questionnaire_link {
  width: fit-content;
  margin: 1.2rem auto 0;
  border-radius: .3rem;
  padding: .4rem 1.2rem;
  background: rgba(34, 34, 34, .8);
  font-size: 1.2rem;
  text-align: center;
  color: #fff;
}

.questionnaire_link span {
  position: relative;
  padding-right: 1rem;
}

.questionnaire_link span::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-left: solid .5rem #fff;
  border-top: solid .4rem transparent;
  border-bottom: solid .4rem transparent;
  content: "";
}

.cp_notes {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  text-align: center;
}

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

/*anchor link--------------------*/
.anchor-link_wrap {
  border-top: solid var(--color_regular);
  border-bottom: solid var(--color_regular);
  border-width: .1rem;
  margin-bottom: 5rem;
}

.anchor-link_wrap ul {
  position: relative;
  display: flex;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.anchor-link_wrap ul::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: .1rem;
  height: calc(100% - 2.4rem);
  background: var(--color_regular);
  opacity: .7;
  content: "";
}

.anchor-link_wrap ul::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: .1rem;
  height: calc(100% - 2.4rem);
  background: var(--color_regular);
  opacity: .7;
  content: "";
}

.anchor-link_wrap ul li {
  position: relative;
}

.anchor-link_wrap ul li:nth-of-type(n+2)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: .1rem;
  height: calc(100% - 2.4rem);
  background: var(--color_regular);
  opacity: .7;
  content: "";
}

.anchor-link_wrap ul li a {
  width: 25rem;
  padding: 1.6rem 0 1.2rem;
  text-align: center;
}

.anchor-link_wrap ul li a .txt_B {
  position: relative;
  display: block;
  padding-bottom: 1.8rem;
  font-size: 1.8rem;
  font-weight: 500;
}

.anchor-link_wrap ul li a .txt_B::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-top: solid .6rem var(--color_regular);
  border-left: solid .5rem transparent;
  border-right: solid .5rem transparent;
  content: "";
  transition: margin .3s;
}

.anchor-link_wrap ul li a:hover .txt_B::before {
  margin-bottom: -.5rem;
}

.anchor-link_wrap ul li a .txt_S {
  display: block;
  margin-bottom: 1rem;
  font-size: 1.2rem;
}
/*--------------------anchor link*/

/*about--------------------------*/
.each_sec {
  padding: 7rem 0;
}

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

.sec_ttl {
  margin-bottom: 4rem;
  font-weight: 500;
  font-size: 3rem;
  text-align: center;
}

.sec_ttl .txt_S {
  display: block;
  margin-bottom: 1rem;
  font-weight: 400;
  font-size: 1.6rem;
}

.sec_ttl .txt_eng {
  display: block;
  margin-top: 1.5rem;
  font-size: 1.4rem;
  color: var(--color_01);
  opacity: .8;
}

.about_wrap {
  display: flex;
  align-items: center;
  gap: 6rem;
  margin-bottom: 6rem;
}

.about_wrap .about_img {
  width: 47rem;
  order: 2;
}

.about_wrap .txt_wrap {
  flex: 1;
}

.about_wrap .txt_wrap dt {
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.5;
}

.about_wrap .txt_wrap dd {
  font-size: 1.4rem;
  line-height: 2;
}

.detail-link_btn {
  width: fit-content;
  margin: 1.5rem 0 0 auto;
}

.detail-link_btn a {
  border: solid rgba(34, 34, 34, .6);
  border-width: .1rem;
  border-radius: .3rem;
  padding: .8rem 1.5rem;
  background: var(--color_05);
  font-size: 1.3rem;
  transition: background-color .3s;
}

.detail-link_btn a:hover {
  background: var(--color_04);
}

.detail-link_btn a span {
  position: relative;
  padding-right: 1.5rem;
}

.detail-link_btn a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: .8rem;
  height: .1rem;
  background: var(--color_regular);
  content: "";
}

.detail-link_btn a span::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(90deg);
  width: .8rem;
  height: .1rem;
  background: var(--color_regular);
  content: "";
}

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

header.hide,
.anchor-link_wrap.fixed.hide {
  opacity: 0;
  pointer-events: none;
}

.modal_outside.hide {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  overflow-y: auto;
}

.modal_outside {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(34, 34, 34, .4);
  transition: opacity .3s, visibility .3s;
  visibility: visible;
  overflow-y: scroll;
}

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

.modal_inner {
  position: relative;
  margin: 0 auto;
  max-height: calc(100% - 6rem);
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

.modal_inner .btn_close {
  position: fixed;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  margin-top: 2rem;
  cursor: pointer;
  transform: rotate(45deg);
}

#BiodynamicAgriculture .modal_inner .btn_close {
  margin-left: 96rem;
}

.modal_inner .btn_close::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: .1rem;
  background: var(--color_regular);
  content: "";
}

.modal_inner .btn_close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: .1rem;
  height: 100%;
  background: var(--color_regular);
  content: "";
}


#BiodynamicAgriculture .modal_content {
  display: flex;
  align-items: center;
  gap: 5rem;
  width: 100rem;
  padding: 7rem 5rem;
  background: var(--color_05);
}

#BiodynamicAgriculture .modal_content .biodynamic-agriculture_img {
  width: 38rem;
}

#BiodynamicAgriculture .modal_content .txt_wrap {
  flex: 1;
}

#BiodynamicAgriculture .modal_content .txt_wrap p {
  font-size: 1.4rem;
  line-height: 2;
}

#BiodynamicAgriculture .modal_content .txt_wrap p .txt_emphasis {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color_01);
}

#BiodynamicAgriculture .modal_content .txt_wrap p:nth-of-type(n+2) {
  margin-top: 3rem;
} 

.message_wrap {
  display: flex;
  align-items: center;
  gap: 4rem;
  border: solid rgba(34, 34, 34, .2);
  border-width: .1rem;
  border-radius: 2rem;
  width: 80rem;
  margin: 0 auto;
  padding: 5rem;
}

.message_wrap .message_img {
  width: 24rem;
  border-radius: 50%;
  overflow: clip;
}

.message_wrap .txt_wrap {
  flex: 1;
}

.message_wrap .txt_wrap dt {
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.5;
}

.message_wrap .txt_wrap dd {
  font-size: 1.3rem;
  line-height: 2;
}

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

/*line up------------------------*/
.sec_lead {
  margin-bottom: 2.5rem;
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
}

.check_list_wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: solid var(--color_regular);
  border-width: .1rem;
  border-radius: .5rem;
  margin-bottom: 2rem;
  padding: 4rem .5rem;
  background: var(--color_04);
}

.check_list {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 0 3rem;
}

.check_list:nth-of-type(n+2) {
  border-left: dotted rgba(34, 34, 34, .2);
  border-width: .1rem;
}

.check_list li {
  display: flex;
  gap: 1rem;
}

.check_list li:nth-of-type(n+2) {
  margin-top: 1.5rem;
}

.check_list li .check-mark {
  width: 2.2rem;
  margin-top: .3rem;
}

.check_list li p {
  flex: 1;
  font-size: 1.6rem;
  line-height: 1.5;
}

.recommended_list {
  display: flex;
  justify-content: center;
  gap: 8rem;
  margin-bottom: 6rem;
}

.each_recommended {
  width: 27rem;
}

.recommended_lead {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  height: 7rem;
  margin-bottom: 1.5rem;
  font-size: 1.4rem;
  font-weight: 500;
}

.recommended_lead::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-top: solid 7rem;
  border-left: solid 10rem transparent;
  border-right: solid 10rem transparent;
  opacity: .1;
  content: "";
}

.rose-series .recommended_lead::before {
  border-top-color: var(--color_cat01_01);
}

.sheabutter-series .recommended_lead::before {
  border-top-color: var(--color_cat02_01);
}

.ginseng-series .recommended_lead::before {
  border-top-color: var(--color_cat03_01);
}

.recommended_lead > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding-bottom: 1.5rem;
}

.recommended_lead .check-mark {
  width: 2.2rem;
}

.each_recommended .series_name {
  position: relative;
  width: fit-content;
  margin: 0 auto 2rem;
  padding: 1rem 2rem;
  font-size: 2rem;
  font-weight: 700;
}

.rose-series .series_name {
  color: var(--color_cat01_01);
}

.sheabutter-series .series_name {
  color: var(--color_cat02_01);
}

.ginseng-series .series_name {
  color: var(--color_cat03_01);
}

.each_recommended .series_name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 2rem;
  height: 2rem;
  border-top: solid;
  border-left: solid;
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.each_recommended .series_name::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 2rem;
  height: 2rem;
  border-bottom: solid;
  border-right: solid;
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.rose-series .series_name::before,
.rose-series .series_name::after {
  border-color: var(--color_cat01_01);
}

.sheabutter-series .series_name::before,
.sheabutter-series .series_name::after {
  border-color: var(--color_cat02_01);
}

.ginseng-series .series_name::before,
.ginseng-series .series_name::after {
  border-color: var(--color_cat03_01);
}

.each_recommended .series_img {
  width: 22rem;
  margin: 0 auto 2rem;
}

.each_recommended .series_img a img {
  transition: opacity .3s;
}

.each_recommended .series_img a:hover img {
  opacity: .7;
}

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

.series_btn a {
  display: grid;
  place-items: center;
  width: 26rem;
  height: 3.8rem;
  border-radius: .3rem;
  border: solid;
  border-width: .1rem;
  background: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  transition: background-color .3s, color .3s;
}

.rose-series .series_btn a {
  border-color: rgba(204, 86, 93, .8);
  color: var(--color_cat01_01);
}

.sheabutter-series .series_btn a {
  border-color: rgba(80, 126, 175, .8);
  color: var(--color_cat02_01);
}

.ginseng-series .series_btn a {
  border-color: rgba(160, 124, 164, .8);
  color: var(--color_cat03_01);
}

.series_btn a:hover {
  color: #fff !important;
}

.rose-series .series_btn a:hover {
  background: var(--color_cat01_01);
}

.sheabutter-series .series_btn a:hover {
  background: var(--color_cat02_01);
}

.ginseng-series .series_btn a:hover {
  background: var(--color_cat03_01);
}

.series_btn a span {
  position: relative;
  padding-right: 1.4rem;
}

.series_btn a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-left: solid .6rem;
  border-top: solid .5rem transparent;
  border-bottom: solid .5rem transparent;
  content: "";
  transition: border-color .3s;
}

.rose-series .series_btn a span::before {
  border-left-color: var(--color_cat01_01);
}

.sheabutter-series .series_btn a span::before {
  border-left-color: var(--color_cat02_01);
}

.ginseng-series .series_btn a span::before {
  border-left-color: var(--color_cat03_01);
}

.series_btn a:hover span::before {
  border-left-color: #fff !important;
}

.series_detail_area {
  display: flex;
  justify-content: center;
  gap: 8rem;
}

.each_series {
  width: 27rem;
}

.series_ttl_wrap {
  margin-bottom: 3rem;
}

.series_ttl_wrap .series_img {
  width: 10rem;
  margin-right: 1.5rem;
  float: left;
}

.series_ttl_wrap .series_ttl {
  display: flex;
  align-items: center;
  height: 10rem;
  font-size: 1.8rem;
  font-weight: 500;
}

.series_caption {
  position: relative;
  margin-top: 1.5rem;
  padding-left: 1.8rem;
  font-size: 1.4rem;
  line-height: 1.75;
}

.series_caption::before {
  position: absolute;
  top: 0;
  left: 0;
  width: .3rem;
  height: 100%;
  opacity: .5;
  content: "";
}

#RoseSeries .series_caption::before {
  background: var(--color_cat01_01);
}

#SheabutterSeries .series_caption::before {
  background: var(--color_cat02_01);
}

#GinsengSeries .series_caption::before {
  background: var(--color_cat03_01);
}

.ingredient_detail {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.8rem;
  margin-bottom: 3rem;
  padding-top: 3.5rem;
}

.ingredient_detail dt {
  position: absolute;
  top: 0;
  left: 0;
  border-bottom: dotted rgba(34, 34, 34, .2);
  border-width: .1rem;
  width: 100%;
  padding-bottom: .8rem;
  font-size: 1.6rem;
  font-weight: 500;
}

.ingredient_detail dt .txt_eng {
  margin-left: 1rem;
  font-size: 1.1rem;
  vertical-align: .15rem;
}

.ingredient_img {
  width: 10rem;
  border-radius: 50%;
  overflow: clip;
}

.ingredient_detail .txt_wrap {
  flex: 1;
}

.ingredient_name {
  position: relative;
  width: fit-content;
  margin-bottom: .5rem;
  padding: 1rem 1.8rem;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color_01);
}

.ingredient_name::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-top: solid var(--color_01);
  border-left: solid var(--color_01);
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.ingredient_name::after {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.6rem;
  height: 1.6rem;
  border-bottom: solid var(--color_01);
  border-right: solid var(--color_01);
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.ingredient_caption {
  font-size: 1.2rem;
  line-height: 1.5;
}

.buyer-comment {
  display: flex;
  border-radius: .3rem;
  margin-bottom: 3rem;
  padding: .3rem .3rem .3rem 0;
}

#RoseSeries .buyer-comment {
  background: rgba(204, 86, 93, .3);
}

#SheabutterSeries .buyer-comment {
  background: rgba(80, 126, 175, .3);
}

#GinsengSeries .buyer-comment {
  background: rgba(160, 124, 164, .3);
}

.buyer-comment dt {
  padding: 0 .6rem 0 .8rem;
  font-size: 1.1rem;
  writing-mode: vertical-lr;
  text-align: center;
  transform: rotate(180deg);
}

.buyer-comment dd {
  padding: 1.5rem;
  background: var(--color_04);
  font-size: 1.3rem;
  line-height: 1.75;
}

#RoseSeries .series_btn a {
  border-color: rgba(204, 86, 93, .8);
  color: var(--color_cat01_01);
}

#SheabutterSeries .series_btn a {
  border-color: rgba(80, 126, 175, .8);
  color: var(--color_cat02_01);
}

#GinsengSeries .series_btn a {
  border-color: rgba(160, 124, 164, .8);
  color: var(--color_cat03_01);
}

#RoseSeries .series_btn a:hover {
  background: var(--color_cat01_01);
}

#SheabutterSeries .series_btn a:hover {
  background: var(--color_cat02_01);
}

#GinsengSeries .series_btn a:hover {
  background: var(--color_cat03_01);
}

#RoseSeries .series_btn a span::before {
  border-left-color: var(--color_cat01_01);
}

#SheabutterSeries .series_btn a span::before {
  border-left-color: var(--color_cat02_01);
}

#GinsengSeries .series_btn a span::before {
  border-left-color: var(--color_cat03_01);
}
/*------------------------line up*/

/*how to use---------------------*/
.tab_list {
  display: flex;
  width: fit-content;
  height: 5rem;
  border-radius: 2.5rem;
  margin: 0 auto 3rem;
  background: var(--color_04);
  box-shadow: inset 0 3px 6px rgba(34, 34, 34, .2);
}

.tab_list li a {
  display: grid;
  place-items: center;
  width: 22.5rem;
  height: 100%;
  border-radius: 2.5rem;
}

.tab_list li a.selected {
  color: #fff;
  pointer-events: none;
}

.tab_night a.selected {
  background: var(--color_night);
}

.tab_daytime a.selected {
  background: var(--color_day);
}

.tab_list li a .txt_eng {
  font-size: 2.2rem;
}

.tab_list li a.selected .txt_eng {
  position: relative;
  padding-left: 3rem;
}

.tab_list li a.selected .txt_eng::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 2.4rem;
  height: 2.4rem;
  content: "";
}

.tab_night a.selected .txt_eng::before {
  background: url(../img/icon_night.svg) center center / cover no-repeat;
}

.tab_daytime a.selected .txt_eng::before {
  background: url(../img/icon_day.svg) center center / cover no-repeat;
}

.tab_list li a .txt_S {
  font-size: 1.6rem;
}

.tab_list li a.selected .txt_S {
  display: none;
}

.each_time {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity .6s;
}

.each_time.selected {
  opacity: 1;
  height: auto;
  overflow: visible;
}

.each_procedure {
  display: flex;
}

.each_procedure > dt {
  position: relative;
  display: grid;
  place-items: center;
  width: 6rem;
  font-size: 1.6rem;
  letter-spacing: .3em;
  color: #fff;
  writing-mode: vertical-lr;
  background: var(--color_night);
}

.nigth_procedure .each_procedure > dt {
  background: var(--color_night);
}

.daytime_procedure .each_procedure > dt {
  background: var(--color_day);
}

.each_procedure > dt::before {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  border-top: solid 2.2rem black;
  border-left: solid 3rem transparent;
  border-right: solid 3rem transparent;
  margin-top: -.2rem;
  filter: drop-shadow(0 .2rem 0 var(--color_05));
  content: "";
}

.nigth_procedure .each_procedure > dt::before {
  border-top-color: var(--color_night);
}

.daytime_procedure .each_procedure > dt::before {
  border-top-color: var(--color_day);
}

.each_procedure:nth-last-of-type(1) > dt::before {
  display: none;
}

.each_procedure:nth-last-of-type(1) > dt::after {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  margin-top: -4rem;
  border: solid var(--color_05);
  border-width: .2rem;
  border-radius: 50%;
  font-family: "Marcellus", serif;
  font-size: 1.6rem;
  letter-spacing: .05em;
  writing-mode: horizontal-tb;
  color: var(--color_05);
  content: "Finish";
}

.nigth_procedure .each_procedure > dt::after {
  background: var(--color_night);
}

.daytime_procedure .each_procedure > dt::after {
  background: var(--color_day);
}

.each_procedure > dd {
  position: relative;
  flex: 1;
  padding: 4rem 5rem 4rem 4.9rem;
  border-right: solid var(--color_regular);
  border-width: .1rem;
}

.each_procedure:nth-of-type(1) > dd {
  border-radius: 0 2rem 0 0;
  border-top: solid var(--color_regular);
  border-width: .1rem;
}

.each_procedure:nth-last-of-type(1) > dd {
  border-radius: 0 0 2rem 0;
  border-bottom: solid var(--color_regular);
  border-width: .1rem;
}

.each_procedure:nth-of-type(n+2) > dd::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 10rem);
  height: .1rem;
  border-top: dashed var(--color_regular);
  border-width: .1rem;
  opacity: .6;
  content: "";
}

.step_list {
  display: flex;
  gap: 6rem;
}

.step_list > li {
  position: relative;
  width: 24rem;
}

.step_list > li:nth-of-type(n+2)::before {
  position: absolute;
  top: 0;
  right: 100%;
  border-left: solid 1.8rem;
  border-top: solid 2.5rem transparent;
  border-bottom: solid 2.5rem transparent;
  margin: 8.8rem 2rem 0 0;
  opacity: .6;
  content: "";
}

.nigth_procedure .step_list > li:nth-of-type(n+2)::before {
  border-left-color: var(--color_night);
}

.daytime_procedure .step_list > li:nth-of-type(n+2)::before {
  border-left-color: var(--color_day);
}

.step_img_list {
  height: 24rem;
  opacity: 0;
  transition: opacity .3s;
}

.step_img_list.active {
  height: auto;
  opacity: 1;
}

.step_img_wrap {
  position: relative;
}

.step_img_wrap .itm_name {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 1.5rem;
  text-align: center;
  white-space: nowrap;
}

.step_img_wrap .itm_name .txt_eng {
  display: block;
  margin-bottom: .5rem;
  font-size: 1.1rem;
}

.step_img_wrap .itm_name .txt_L {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color_01);
}

.step_detail {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1.75;
}

.step_detail .txt_eng {
  display: block;
  margin-bottom: .8rem;
  font-size: 1.8rem;
}

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

.step_detail .txt_emphasis {
  font-weight: 500;
  color: var(--color_01);
  line-height: 1.75;
}

.step_point {
  display: flex;
  border: solid var(--color_02);
  border-width: .2rem;
  border-radius: .3rem;
  margin-top: 1rem;
  background: var(--color_02);
}

.step_point dt {
  padding: 0 .2rem;
  background: var(--color_02);
  font-size: 1.1rem;
  writing-mode: vertical-lr;
  text-align: center;
  transform: rotate(180deg);
}

.step_point dd {
  flex: 1;
  padding: .8rem;
  background: var(--color_04);
  font-size: 1.3rem;
  line-height: 1.75;
}
/*---------------------how to use*/

/*staff report-------------------*/
#StaffReport .sec_ttl {
  margin-bottom: 5rem;
}

.report_list > li {
  position: relative;
  border: solid rgba(34, 34, 34, .8);
  border-width: .1rem;
  border-radius: 2rem;
  padding: 6rem;
}

.report_list > li:nth-of-type(n+2) {
  margin-top: 7rem;
}

.report_list > li::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin: 0 2rem 0 0;
  font-family: "Marcellus", serif;
  font-size: 2rem;
  letter-spacing: .1em;
  writing-mode: vertical-lr;
  color: var(--color_02);
}

.report_list > li:nth-of-type(even)::before {
  right: auto;
  left: 0;
  margin: 0 0 0 2rem;
  transform: translateY(-50%) rotate(180deg);
}

.report_list > li:nth-of-type(1)::before {
  content: "Rose series";
}

.report_list > li:nth-of-type(2)::before {
  content: "Eye care cream";
}

.report_list > li:nth-of-type(3)::before {
  content: "Nail balm";
}

.report_num {
  position: absolute;
  top: 0;
  left: 0;
  margin: -4.8rem 0 0 5rem;
  padding: 0 1.5rem;
  background: var(--color_05);
  font-size: 4rem;
  color: var(--color_02);
}

.report_list > li:nth-of-type(even) .report_num {
  left: auto;
  right: 0;
  margin: -4.8rem 5rem 0 0;
}

.report_num .txt_L {
  font-size: 6rem;
}

.intro_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5rem;
  margin-bottom: 4rem;
}

.staff_profile > div {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 23rem;
}

.staff_img {
  width: 10rem;
  border-radius: 50%;
  overflow: clip;
}

.staff_name {
  flex: 1;
  font-size: 1.3rem;
  line-height: 1.5;
}

.staff_skin-type {
  margin-top: 1rem;
  border: solid var(--color_02);
  border-width: .2rem;
  border-radius: .3rem;
  text-align: center;
}

.staff_skin-type dt {
  padding: .3rem 0;
  background: var(--color_02);
  font-size: 1.1rem;
}

.staff_skin-type dd {
  padding: 1rem 0;
  background: #fff;
  font-size: 1.4rem;
}

.report-itm_wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  border-radius: .5rem;
  width: 42.5rem;
  padding: 2rem;
  background: #fff;
}

.report-itm_wrap .itm_img {
  width: 16rem;
}

.report-itm_wrap .itm_img a img {
  transition: opacity .3s;
}

.report-itm_wrap .itm_img a:hover img {
  opacity: .7;
}

.report-itm_wrap .itm_copy {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 8rem;
  height: 8rem;
  margin: -1.5rem -1.5rem 0 0;
  border-radius: 50%;
  background: var(--color_02);
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  transform: rotate(18deg);
}

.report-itm_wrap .txt_wrap {
  flex: 1;
}

.report-itm_wrap .itm_name {
  font-size: 1.2rem;
}

.report-itm_wrap .itm_name .txt_L {
  display: block;
  margin-top: .6rem;
  font-size: 2rem;
  font-weight: 500;
  color: var(--color_01);
}

.report-itm_wrap .itm_caption {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.75;
}

.report-img_list {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.report-img_list .each_img {
  width: 24rem;
}

.staff_comment {
  width: 55rem;
  margin: 3rem auto 0;
  font-size: 1.3rem;
  line-height: 1.75;
}

.report-sumup_btn {
  width: fit-content;
  margin: 5rem auto 0;
}

.report-sumup_btn a {
  display: grid;
  place-items: center;
  width: 32rem;
  height: 5rem;
  border-radius: .3rem;
  border: solid rgba(34, 34, 34, .8);
  border-width: .1rem;
  background: var(--color_04);
  transition: background-color .3s, border-color .3s;
}

.report-sumup_btn a:hover {
  background: var(--color_02);
  border-color: transparent;
}

.report-sumup_btn a span {
  position: relative;
  padding-right: 1.6rem;
  font-weight: 700;
  font-size: 1.6rem;
}

.report-sumup_btn a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-left: solid .6rem var(--color_regular);
  border-top: solid .5rem transparent;
  border-bottom: solid .5rem transparent;
  content: "";
}
/*-------------------staff report*/
.all-sumup_btn {
  width: fit-content;
  margin: 3rem auto 0;
}

.all-sumup_btn a {
  display: grid;
  place-items: center;
  width: 40rem;
  height: 7rem;
  border-radius: .5rem;
  border: solid var(--color_01);
  border-width: .1rem;
  background: var(--color_01);
  color: #fff;
  transition: background-color .3s, color .3s;
}

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

.all-sumup_btn a span {
  position: relative;
  padding-right: 1.8rem;
  font-weight: 700;
  font-size: 2rem;
}

.all-sumup_btn a span::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-left: solid .8rem #fff;
  border-top: solid .7rem transparent;
  border-bottom: solid .7rem transparent;
  content: "";
  transition: border-color .3s;
}

.all-sumup_btn a:hover span::before {
  border-left-color: var(--color_01);
}

/*Campaign modal-----------------*/

#Campaign .modal_inner .btn_close {
  margin-left: 66rem;
}

#Campaign .campaign_area {
  margin-bottom: 0;
}
/*-----------------Campaign modal*/

/*anchor link fixed--------------*/
.anchor-link_wrap.fixed {
  position: fixed;
  z-index: 3;
  bottom: 0;
  border: none;
  width: 100%;
  margin-bottom: 0;
  background: var(--color_05);
  box-shadow: 0 -5px 10px rgba(34, 34, 34, .2);
  transform: translateY(100%);
  transition: transform .3s;
}

.anchor-link_wrap.fixed.active {
  transform: translateY(0);
}

.anchor-link_wrap.fixed ul::before {
  height: calc(100% - 2rem);
  opacity: .5;
}

.anchor-link_wrap.fixed ul::after {
  height: calc(100% - 2rem);
  opacity: .5;
}

.anchor-link_wrap.fixed ul li:nth-of-type(n+2)::before {
  height: calc(100% - 2rem);
  opacity: .5;
}

.anchor-link_wrap.fixed ul li.cp_nav::after {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 100%;
  width: .2rem;
  height: 100%;
  background: var(--color_03);
  content: "";
}

.anchor-link_wrap.fixed ul li a {
  display: grid;
  place-items: center;
  width: 24rem;
  height: 8rem;
  padding: 0;
}

.anchor-link_wrap.fixed ul li.cp_nav a {
  background: var(--color_03);
}

.anchor-link_wrap.fixed ul li a .txt_B {
  padding-bottom: 0;
  font-size: 1.6rem;
}

.anchor-link_wrap.fixed ul li.cp_nav a .txt_eng {
  font-size: 1.8rem;
  letter-spacing: .1em;
}

.anchor-link_wrap.fixed ul li a .txt_B::before {
  display: none;
}

.anchor-link_wrap.fixed ul li a .txt_S {
  font-size: 1.1rem;
}

.anchor-link_wrap.fixed ul li.cp_nav a .txt_S {
  font-weight: 700;
  color: var(--color_01);
}

.anchor-link_wrap.fixed ul li.cp_nav a .txt_S .txt_eng {
  display: inline-block;
  width: 6.6rem;
  margin-left: .5rem;
  vertical-align: .2rem;
}
/*--------------anchor link fixed*/


/*Smart phone---------------------------------------------*/
@media screen and  (max-width:768px) {
/*all----------------------------*/
.LP_page .only_pc {
  display: none;
}

#share {
  z-index: 5 !important;
  transition: margin .3s;
}

#share.move {
  margin-bottom: calc(50 * (100vw / 430)) !important;
}

.share-txt {
  margin: 0 !important;
  padding-bottom: calc(20 * (100vw / 430));
  background: var(--color_05);
}

/*----------------------------all*/
.LP_page {
  padding-bottom: calc(100 * (100vw / 430));
}

.LP_page sup {
  font-size: calc(10 * (100vw / 430));
}

.cp-bnr picture {
  width: auto;
}
/*----------------------------all*/

/*mv-----------------------------*/
.mv_area {
  padding: calc(30 * (100vw / 430)) 0 calc(50 * (100vw / 430));
}

.main_ttl {
  margin-bottom: calc(10 * (100vw / 430));
  font-size: calc(20 * (100vw / 430));
}

.main_ttl .logo_martina {
  width: calc(160 * (100vw / 430));
  margin: 0 auto calc(20 * (100vw / 430));
}

.mv {
  width: auto;
  margin: 0 auto calc(30 * (100vw / 430));
}

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

.main_lead_wrap dt .txt_L {
  margin: calc(10 * (100vw / 430)) auto 0;
  padding: calc(8 * (100vw / 430)) calc(20 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.main_lead_wrap dt .txt_L::before {
  width: calc(16 * (100vw / 430));
  height: calc(16 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.main_lead_wrap dt .txt_L::after {
  width: calc(16 * (100vw / 430));
  height: calc(16 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.main_lead_wrap dt .txt_eng {
  margin-top: calc(5 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

.main_lead_wrap dd {
  font-size: calc(13 * (100vw / 430));
}
/*-----------------------------mv*/

/*campaign-----------------------*/
.campaign_area {
  width: calc(400 * (100vw / 430));
  margin: 0 auto calc(50 * (100vw / 430));
  padding: calc(30 * (100vw / 430)) calc(20 * (100vw / 430)) calc(40 * (100vw / 430));
}

.cp_ttl_wrap {
  margin: 0 auto calc(20 * (100vw / 430));
}

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

.cp_ttl .txt_S {
  border-width: calc(1 * (100vw / 430));
  border-radius: calc(3 * (100vw / 430));
  margin: 0 auto calc(10 * (100vw / 430));
  padding: calc(4 * (100vw / 430)) calc(35 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.cp_ttl .txt_eng {
  font-size: calc(30 * (100vw / 430));
}

.cp_period {
  border-width: calc(1 * (100vw / 430));
  padding: calc(8 * (100vw / 430)) 0;
  font-size: calc(15 * (100vw / 430));
}

.cp_period .txt_S {
  font-size: calc(12 * (100vw / 430));
}

.cp_list > li {
  border-radius: calc(10 * (100vw / 430));
  width: auto;
  padding: calc(20 * (100vw / 430)) 0;
}

.cp_list > li::before {
  border-top: solid calc(50 * (100vw / 430)) var(--color_02);
  border-right: solid calc(50 * (100vw / 430)) transparent;
}

.cp_num {
  margin: calc(5 * (100vw / 430)) 0 0 calc(6 * (100vw / 430));
  font-size: calc(24 * (100vw / 430));
}

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

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

.cp_detail .txt_L {
  margin-top: calc(4 * (100vw / 430));
  font-size: calc(20 * (100vw / 430));
}

.questionnaire_link {
  margin: calc(12 * (100vw / 430)) auto 0;
  border-radius: calc(3 * (100vw / 430));
  padding: calc(4 * (100vw / 430)) calc(12 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

.questionnaire_link span {
  padding-right: calc(10 * (100vw / 430));
}

.questionnaire_link span::before {
  border-left: solid calc(5 * (100vw / 430)) #fff;
  border-top: solid calc(4 * (100vw / 430)) transparent;
  border-bottom: solid calc(4 * (100vw / 430)) transparent;
}

.cp_notes {
  margin-top: calc(15 * (100vw / 430));
  font-size: calc(11 * (100vw / 430));
}

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

/*anchor link--------------------*/
.anchor-link_wrap {
  border-width: calc(1 * (100vw / 430));
  margin-bottom: calc(30 * (100vw / 430));
}

.anchor-link_wrap ul {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: auto;
}

.anchor-link_wrap ul::before {
  display: none;
}

.anchor-link_wrap ul::after {
  display: none;
}

.anchor-link_wrap ul li:nth-of-type(n+2)::before {
  display: none;
}

.anchor-link_wrap ul li:nth-of-type(even)::before {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  display: block;
  width: calc(1 * (100vw / 430));
  height: calc(100% - calc(16 * (100vw / 430)));
  background: var(--color_regular);
  opacity: .7;
  content: "";
}

.anchor-link_wrap ul li:nth-of-type(n+3)::after {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  width: calc(100% - calc(16 * (100vw / 430)));
  height: calc(1 * (100vw / 430));
  background: var(--color_regular);
  opacity: .7;
  content: "";
}

.anchor-link_wrap ul li a {
  width: auto;
  padding: calc(16 * (100vw / 430)) 0 calc(12 * (100vw / 430));
}

.anchor-link_wrap ul li a .txt_B {
  padding-bottom: calc(15 * (100vw / 430));
  font-size: calc(15 * (100vw / 430));
}

.anchor-link_wrap ul li a .txt_B::before {
  border-top: solid calc(6 * (100vw / 430)) var(--color_regular);
  border-left: solid calc(5 * (100vw / 430)) transparent;
  border-right: solid calc(5 * (100vw / 430)) transparent;
}

.anchor-link_wrap ul li a:hover .txt_B::before {
  margin-bottom: calc(-5 * (100vw / 430));
}

.anchor-link_wrap ul li a .txt_S {
  margin-bottom: calc(10 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}
/*--------------------anchor link*/

/*about--------------------------*/
.each_sec {
  padding: calc(50 * (100vw / 430)) 0;
}

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

.sec_ttl {
  margin-bottom: calc(30 * (100vw / 430));
  font-size: calc(22 * (100vw / 430));
}

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

.sec_ttl .txt_eng {
  margin-top: calc(10 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

#AboutMartina .sec_inner {
  padding: 0 calc(10 * (100vw / 430));
}

.about_wrap {
  display: block;
  margin-bottom: calc(50 * (100vw / 430));
}

.about_wrap .about_img {
  width: calc(300 * (100vw / 430));
  margin: 0 auto calc(20 * (100vw / 430));
}

.about_wrap .txt_wrap dt {
  margin-bottom: calc(12 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.about_wrap .txt_wrap dd {
  font-size: calc(13 * (100vw / 430));
}

.detail-link_btn {
  margin: calc(8 * (100vw / 430)) 0 0 auto;
}

.detail-link_btn a {
  border-width: calc(1 * (100vw / 430));
  border-radius: calc(3 * (100vw / 430));
  padding: calc(8 * (100vw / 430)) calc(15 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

.detail-link_btn a span {
  padding-right: calc(15 * (100vw / 430));
}

.detail-link_btn a span::before {
  width: calc(8 * (100vw / 430));
  height: calc(1 * (100vw / 430));
}

.detail-link_btn a span::after {
  width: calc(8 * (100vw / 430));
  height: calc(1 * (100vw / 430));
}

.modal_inner {
  max-height: calc(100% - calc(50 * (100vw / 430)));
}

.modal_inner .btn_close {
  width: calc(15 * (100vw / 430));
  height: calc(15 * (100vw / 430));
  margin-top: calc(10 * (100vw / 430));
}

#BiodynamicAgriculture .modal_inner .btn_close {
  margin-left: calc(375 * (100vw / 430));
}

.modal_inner .btn_close::before {
  height: calc(1 * (100vw / 430));
}

.modal_inner .btn_close::after {
  width: calc(1 * (100vw / 430));
}


#BiodynamicAgriculture .modal_content {
  display: block;
  width: calc(400 * (100vw / 430));
  padding: calc(50 * (100vw / 430)) calc(30 * (100vw / 430));
}

#BiodynamicAgriculture .modal_content .biodynamic-agriculture_img {
  width: auto;
  margin-bottom: calc(20 * (100vw / 430));
}

#BiodynamicAgriculture .modal_content .txt_wrap p {
  font-size: calc(13 * (100vw / 430));
}

#BiodynamicAgriculture .modal_content .txt_wrap p .txt_emphasis {
  font-size: calc(15 * (100vw / 430));
}

#BiodynamicAgriculture .modal_content .txt_wrap p:nth-of-type(n+2) {
  margin-top: calc(25 * (100vw / 430));
} 

.message_wrap {
  display: block;
  border-width: calc(1 * (100vw / 430));
  border-radius: calc(20 * (100vw / 430));
  width: calc(350 * (100vw / 430));
  padding: calc(30 * (100vw / 430)) calc(25 * (100vw / 430)) calc(40 * (100vw / 430));
}

.message_wrap .message_img {
  width: calc(160 * (100vw / 430));
  margin: 0 auto calc(20 * (100vw / 430));
}

.message_wrap .txt_wrap dt {
  margin-bottom: calc(12 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
  text-align: center;
}

.message_wrap .txt_wrap dd {
  font-size: calc(12 * (100vw / 430));
}

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

/*line up------------------------*/
#LineUp .sec_inner {
  width: auto;
}

.sec_lead {
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.diagnostic-chart_area {
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  margin-bottom: calc(10 * (100vw / 430));
}

.diagnostic-chart_area::-webkit-scrollbar {
  display:none;
}

.diagnostic-chart_inner {
  display: flex;
  width: fit-content;
  padding: 0 calc(15 * (100vw / 430));
}

.check_list_wrap {
  display: block;
  border-width: calc(1 * (100vw / 430));
  border-radius: calc(5 * (100vw / 430));
  width: calc(280 * (100vw / 430));
  margin: 0 calc(10 * (100vw / 430)) 0 0;
  padding: 0 calc(15 * (100vw / 430));
}

.check_list {
  display: block;
  padding: calc(25 * (100vw / 430)) 0;
}

.check_list:nth-of-type(n+2) {
  border-left: none;
  border-top: dotted rgba(34, 34, 34, .2);
  border-width: calc(1 * (100vw / 430));
}

.check_list li {
  gap: calc(8 * (100vw / 430));
}

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

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

.check_list li .check-mark {
  width: calc(18 * (100vw / 430));
  margin-top: calc(2 * (100vw / 430));
}

.check_list li p {
  font-size: calc(14 * (100vw / 430));
}

.recommended_list {
  flex-direction: column;
  justify-content: flex-end;
  gap: calc(26 * (100vw / 430));
  margin: 0 calc(25 * (100vw / 430)) calc(10 * (100vw / 430)) 0;
}

.each_recommended {
  display: flex;
  width: auto;
  gap: calc(25 * (100vw / 430));
}

.recommended_lead {
  width: calc(54 * (100vw / 430));
  height: auto;
  margin-bottom: 0;
  font-size: calc(12 * (100vw / 430));
}

.recommended_lead::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-left: solid calc(54 * (100vw / 430));
  border-top: solid calc(70 * (100vw / 430)) transparent !important;
  border-bottom: solid calc(70 * (100vw / 430)) transparent;
  border-right: none;
  opacity: .1;
  content: "";
}

.rose-series .recommended_lead::before {
  border-left-color: var(--color_cat01_01);
}

.sheabutter-series .recommended_lead::before {
  border-left-color: var(--color_cat02_01);
}

.ginseng-series .recommended_lead::before {
  border-left-color: var(--color_cat03_01);
}

.recommended_lead > span {
  gap: calc(3 * (100vw / 430));
  padding: 0 calc(10 * (100vw / 430)) 0 0;
  writing-mode: vertical-lr;
}

.recommended_lead .check-mark {
  position: relative;
  width: calc(18 * (100vw / 430));
  height: calc(18 * (100vw / 430));
}

.recommended_lead .check-mark img {
  position: absolute;
  top: 0;
  left: 0;
}

.each_recommended > div > div {
  display: flex;
  align-items: center;
  gap: calc(10 * (100vw / 430));
  margin-bottom: calc(10 * (100vw / 430));
}

.each_recommended .txt_wrap {
  order: 2;
  flex: 1;
}

.each_recommended .series_name {
  margin: 0 0 calc(12 * (100vw / 430));
  padding: calc(6 * (100vw / 430)) calc(25 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
  line-height: 1.4;
  white-space: nowrap;
}

.each_recommended .series_name::before {
  width: calc(20 * (100vw / 430));
  height: calc(20 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.each_recommended .series_name::after {
  width: calc(20 * (100vw / 430));
  height: calc(20 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.each_recommended .series_anchor-link {
  position: relative;
  border-bottom: solid calc(1 * (100vw / 430));
  padding: 0 calc(10 * (100vw / 430)) calc(2 * (100vw / 430)) 0;
  font-size: calc(10 * (100vw / 430));
  font-weight: 500;
  white-space: nowrap;
}

.each_recommended .series_anchor-link::before {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-top: solid calc(5 * (100vw / 430));
  border-left: solid calc(4 * (100vw / 430)) transparent;
  border-right: solid calc(4 * (100vw / 430)) transparent;
  content: "";
}

.rose-series .series_anchor-link {
  color: var(--color_cat01_01);
  border-color: rgba(204, 86, 93, .8);
}

.sheabutter-series .series_anchor-link {
  color: var(--color_cat02_01);
  border-color: rgba(80, 126, 175, .8);
}

.ginseng-series .series_anchor-link {
  color: var(--color_cat03_01);
  border-color: rgba(160, 124, 164, .8);
}

.rose-series .series_anchor-link::before {
  border-top-color: var(--color_cat01_01);
}

.sheabutter-series .series_anchor-link::before {
  border-top-color: var(--color_cat02_01);
}

.ginseng-series .series_anchor-link::before {
  border-top-color: var(--color_cat03_01);
}

.each_recommended .series_img {
  width: calc(120 * (100vw / 430));
  margin: 0;
}

.series_btn a {
  width: calc(232 * (100vw / 430));
  height: calc(30 * (100vw / 430));
  border-radius: calc(3 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

.series_btn a span {
  padding-right: calc(10 * (100vw / 430));
}

.series_btn a span::before {
  border-left: solid calc(5 * (100vw / 430));
  border-top: solid calc(4 * (100vw / 430)) transparent;
  border-bottom: solid calc(4 * (100vw / 430)) transparent;
}

.series_detail_area {
  display: block;
}

.each_series {
  width: calc(380 * (100vw / 430));
  margin: 0 auto;
  padding-top: calc(40 * (100vw / 430));
}

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

.series_ttl_wrap {
  display: flex;
  align-items: center;
  gap: calc(20 * (100vw / 430));
  margin-bottom: calc(20 * (100vw / 430));
}

.series_ttl_wrap .series_img {
  width: calc(140 * (100vw / 430));
  margin-right: 0;
  float: none;
}

.series_ttl_wrap .txt_wrap {
  flex: 1;
}

.series_ttl_wrap .series_ttl {
  display: block;
  height: auto;
  font-size: calc(16 * (100vw / 430));
}

#RoseSeries .series_ttl_wrap .series_ttl {
  color: var(--color_cat01_01);
}

#SheabutterSeries .series_ttl_wrap .series_ttl {
  color: var(--color_cat02_01);
}

#GinsengSeries .series_ttl_wrap .series_ttl {
  color: var(--color_cat03_01);
}

.series_caption {
  margin-top: calc(8 * (100vw / 430));
  padding-left: 0;
  font-size: calc(13 * (100vw / 430));
}

.series_caption::before {
 display: none;
}

.ingredient_detail {
  justify-content: center;
  gap: calc(25 * (100vw / 430));
  margin-bottom: calc(25 * (100vw / 430));
  padding-top: 0;
}

.ingredient_detail dt {
  position: static;
  border-bottom: none;
  width: 100%;
  margin-bottom: calc(8 * (100vw / 430));
  padding-bottom: 0;
  font-size: calc(15 * (100vw / 430));
}

.ingredient_detail dt .txt_eng {
  margin-left: calc(10 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
  vertical-align: calc(1.5 * (100vw / 430));
}

.ingredient_img {
  width: calc(90 * (100vw / 430));
}

.ingredient_detail .txt_wrap {
  flex: none;
}

.ingredient_name {
  margin-bottom: calc(5 * (100vw / 430));
  padding: calc(6 * (100vw / 430)) calc(20 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.ingredient_name::before {
  width: calc(14 * (100vw / 430));
  height: calc(14 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.ingredient_name::after {
  width: calc(14 * (100vw / 430));
  height: calc(14 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.ingredient_caption {
  font-size: calc(11 * (100vw / 430));
}

.buyer-comment {
  border-radius: calc(3 * (100vw / 430));
  margin-bottom: calc(20 * (100vw / 430));
  padding: calc(3 * (100vw / 430)) calc(3 * (100vw / 430)) calc(3 * (100vw / 430)) 0;
}

.buyer-comment dt {
  padding: 0 calc(5 * (100vw / 430)) 0 calc(6 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}

.buyer-comment dd {
  padding: calc(15 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}
/*------------------------line up*/

/*how to use---------------------*/
.tab_list {
  height: calc(36 * (100vw / 430));
  border-radius: calc(20 * (100vw / 430));
  margin: 0 auto calc(25 * (100vw / 430));
}

.tab_list li a {
  width: calc(160 * (100vw / 430));
  border-radius: calc(20 * (100vw / 430));
}

.tab_list li a .txt_eng {
  font-size: calc(16 * (100vw / 430));
}

.tab_list li a.selected .txt_eng {
  padding-left: calc(26 * (100vw / 430));
}

.tab_list li a.selected .txt_eng::before {
  width: calc(20 * (100vw / 430));
  height: calc(20 * (100vw / 430));
}

.tab_list li a .txt_S {
  font-size: calc(13 * (100vw / 430));
}

.each_procedure > dt {
  width: calc(30 * (100vw / 430));
  font-size: calc(15 * (100vw / 430));
}

.each_procedure > dt::before {
  border-top: solid calc(10 * (100vw / 430)) black;
  border-left: solid calc(15 * (100vw / 430)) transparent;
  border-right: solid calc(15 * (100vw / 430)) transparent;
  margin-top: calc(-2 * (100vw / 430));
  filter: drop-shadow(0 calc(2 * (100vw / 430)) 0 var(--color_05));
}

.each_procedure:nth-last-of-type(1) > dt::after {
  width: calc(56 * (100vw / 430));
  height: calc(56 * (100vw / 430));
  margin-top: calc(-28 * (100vw / 430));
  border-width: calc(2 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

.each_procedure > dd {
  padding: calc(30 * (100vw / 430)) calc(10 * (100vw / 430)) calc(30 * (100vw / 430)) calc(8 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.each_procedure:nth-of-type(1) > dd {
  border-radius: 0 calc(20 * (100vw / 430)) 0 0;
  border-width: calc(1 * (100vw / 430));
}

.each_procedure:nth-last-of-type(1) > dd {
  border-radius: 0 0 calc(20 * (100vw / 430)) 0;
  border-width: calc(1 * (100vw / 430));
}

.each_procedure:nth-of-type(n+2) > dd::before {
  width: calc(100% - calc(18 * (100vw / 430)));
  height: calc(1 * (100vw / 430));
  margin-left: calc(-2 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.step_list {
  display: block;
}

.step_list > li {
  width: auto;
}

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

.step_list > li:nth-of-type(n+2)::before {
  position: absolute;
  top: auto;
  bottom: 100%;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  border-top: solid calc(12 * (100vw / 430));
  border-left: solid calc(20 * (100vw / 430)) transparent !important;
  border-right: solid calc(20 * (100vw / 430)) transparent;
  border-bottom: none;
  margin: 0 0 calc(20 * (100vw / 430)) 0;
}

.nigth_procedure .step_list > li:nth-of-type(n+2)::before {
  border-top-color: var(--color_night);
}

.daytime_procedure .step_list > li:nth-of-type(n+2)::before {
  border-top-color: var(--color_day);
}

.step_list > li >div {
  display: flex;
  align-items: center;
  gap: calc(10 * (100vw / 430));
}

.step_img_list {
  height: calc(170 * (100vw / 430));
}

.step_img_wrap .itm_name {
  margin-top: calc(8 * (100vw / 430));
}

.step_img_wrap .itm_name .txt_eng {
  margin-bottom: calc(4 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}

.step_img_wrap .itm_name .txt_L {
  font-size: calc(12 * (100vw / 430));
}

.step_img,
.step_img_list,
.step_img_wrap {
  width: calc(170 * (100vw / 430));
}

.step_detail {
  flex: 1;
  margin-top: 0;
  font-size: calc(12 * (100vw / 430));
}

.step_detail .txt_eng {
  margin-bottom: calc(8 * (100vw / 430));
  font-size:  calc(16 * (100vw / 430));
}

.step_point {
  border-width: calc(2 * (100vw / 430));
  border-radius: calc(3 * (100vw / 430));
  margin-top: calc(8 * (100vw / 430));
}

.step_point dt {
  padding: 0 calc(2 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}

.step_point dd {
  padding: calc(8 * (100vw / 430)) 0;
  font-size: calc(11 * (100vw / 430));
  letter-spacing: .02em;
  text-align: center;
}
/*---------------------how to use*/

/*staff report-------------------*/
#StaffReport .sec_ttl {
  margin-bottom: calc(50 * (100vw / 430));
}

.report_list > li {
  border-width: calc(1 * (100vw / 430));
  border-radius: calc(20 * (100vw / 430));
  padding: calc(35 * (100vw / 430)) 0;
}

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

.report_list > li::before {
  display: none;
}

.report_num {
  margin: calc(-36 * (100vw / 430)) 0 0 calc(20 * (100vw / 430));
  padding: 0 calc(15 * (100vw / 430));
  font-size: calc(30 * (100vw / 430));
}

.report_list > li:nth-of-type(even) .report_num {
  margin: calc(-36 * (100vw / 430)) calc(20 * (100vw / 430)) 0 0;
}

.report_num .txt_L {
  font-size: calc(45 * (100vw / 430));
}

.intro_wrap {
  display: block;
  margin-bottom: calc(30 * (100vw / 430));
}

.staff_profile {
  width: calc(215 * (100vw / 430));
  margin: 0 auto calc(30 * (100vw / 430))
}

.staff_profile > div {
  gap: calc(15 * (100vw / 430));
  width: auto;
}

.staff_img {
  width: calc(90 * (100vw / 430));
}

.staff_name {
  font-size: calc(12 * (100vw / 430));
}

.staff_skin-type {
  margin-top: calc(12 * (100vw / 430));
  border-width: calc(2 * (100vw / 430));
  border-radius: calc(3 * (100vw / 430));
}

.staff_skin-type dt {
  padding: calc(3 * (100vw / 430)) 0;
  font-size: calc(10 * (100vw / 430));
}

.staff_skin-type dd {
  padding: calc(8 * (100vw / 430)) 0;
  font-size: calc(13 * (100vw / 430));
}

.report-itm_wrap {
  gap: calc(10 * (100vw / 430));
  border-radius: calc(5 * (100vw / 430));
  width: calc(370 * (100vw / 430));
  margin: 0 auto;
  padding: calc(15 * (100vw / 430));
}

.report-itm_wrap .itm_img {
  width: calc(140 * (100vw / 430));
}

.report-itm_wrap .itm_copy {
  width: calc(70 * (100vw / 430));
  height: calc(70 * (100vw / 430));
  margin: calc(-25 * (100vw / 430)) calc(-5 * (100vw / 430)) 0 0;
  font-size: calc(12 * (100vw / 430));
}

.report-itm_wrap .itm_name {
  font-size: calc(11 * (100vw / 430));
}

.report-itm_wrap .itm_name .txt_L {
  margin-top: calc(6 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.report-itm_wrap .itm_caption {
  margin-top: calc(8 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
}

.report-img_list {
  display: block;
  height: calc(240 * (100vw / 430));
  opacity: 0;
  transition: opacity .3s;
}

.report-img_list.active {
  height: auto;
  opacity: 1;
}

.report-img_list .each_img {
  width: calc(240 * (100vw / 430));
  margin: 0 calc(5 * (100vw / 430));
}

.report-img_list .slick-dots {
  position: relative;
}

.report-img_list.slick-dotted.slick-slider {
  margin-bottom: 0;
  font-size: 0;
}

.report-img_list .slick-dots {
  bottom: 0;
  margin-top: calc(10 * (100vw / 430));
}

.report-img_list .slick-dots li {
  width: calc(6 * (100vw / 430));
  height: calc(6 * (100vw / 430));
  margin: 0;
  border: solid calc(1 * (100vw / 430)) var(--color_regular);
  border-radius: 50%;
}

.report-img_list .slick-dots li.slick-active {
  width: calc(8 * (100vw / 430));
  height: calc(8 * (100vw / 430));
  background: var(--color_regular);
}

.report-img_list .slick-dots li:nth-of-type(n+2) {
  margin-left: calc(8 * (100vw / 430));
}

.report-img_list .slick-dots li button {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  background: transparent;
}

.report-img_list .slick-dots li button:before {
  display: none;
}

.staff_comment {
  margin: calc(20 * (100vw / 430)) auto 0;
  width: calc(320 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

.report-sumup_btn {
  margin: calc(30 * (100vw / 430)) auto 0;
}

.report-sumup_btn a {
  width: calc(300 * (100vw / 430));
  height: calc(45 * (100vw / 430));
  border-radius: calc(3 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.report-sumup_btn a span {
  padding-right: calc(15 * (100vw / 430));
  font-size: calc(15 * (100vw / 430));
}

.report-sumup_btn a span::before {
  border-left: solid calc(6 * (100vw / 430)) var(--color_regular);
  border-top: solid calc(5 * (100vw / 430)) transparent;
  border-bottom: solid calc(5 * (100vw / 430)) transparent;
}
/*-------------------staff report*/
.all-sumup_btn {
  margin: calc(30 * (100vw / 430)) auto 0;
}

.all-sumup_btn a {
  width: calc(380 * (100vw / 430));
  height: calc(60 * (100vw / 430));
  border-radius: calc(5 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
}

.all-sumup_btn a span {
  padding-right: calc(18 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.all-sumup_btn a span::before {
  border-left: solid calc(8 * (100vw / 430)) #fff;
  border-top: solid calc(7 * (100vw / 430)) transparent;
  border-bottom: solid calc(7 * (100vw / 430)) transparent;
}

/*Campaign modal-----------------*/

#Campaign .modal_inner .btn_close {
  margin-left: calc(375 * (100vw / 430));
}
/*-----------------Campaign modal*/

/*anchor link fixed--------------*/
.anchor-link_wrap.fixed ul {
  display: flex;
  justify-content: flex-start;
  width: 100vw;
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.anchor-link_wrap.fixed ul::-webkit-scrollbar {
  display: none;
}

.anchor-link_wrap.fixed ul li:nth-of-type(n+2)::before {
  display: block;
  width: calc(1 * (100vw / 430));
  height: calc(100% - calc(16 * (100vw / 430)));
}

.anchor-link_wrap.fixed ul li:nth-of-type(n+3)::after {
  display: none;
}

.anchor-link_wrap.fixed ul li.cp_nav::after {
  width: calc(2 * (100vw / 430));
}

.anchor-link_wrap.fixed ul li a {
  width: fit-content;
  height: calc(66 * (100vw / 430));
  padding: 0 calc(15 * (100vw / 430));
  white-space: nowrap;
}

.anchor-link_wrap.fixed ul li a .txt_B {
  font-size: calc(14 * (100vw / 430));
}

.anchor-link_wrap.fixed ul li.cp_nav a .txt_eng {
  font-size: calc(16 * (100vw / 430));
}

.anchor-link_wrap.fixed ul li a .txt_S {
  font-size: calc(10 * (100vw / 430));
}

.anchor-link_wrap.fixed ul li.cp_nav a .txt_S .txt_eng {
  width: calc(62 * (100vw / 430));
  margin-left: calc(3 * (100vw / 430));
  vertical-align: calc(1.5 * (100vw / 430));
}
/*--------------anchor link fixed*/


}

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

/*PC------------------------------------------------------*/
@media screen and  (min-width:769px) {
  .only_sp {
    display: none !important;
  }

  #header_bottom .inner {
    width: 100%;
  }

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

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