@charset "UTF-8";

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

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

#Wrap {
  width: auto;
}

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

:root {
  --color_main: #242E36;
  --color_01: #343861;
  --color_02: #F9FAFF;
  --color_03: #887295;
  --color_04: #BEB3C5;
  --color_05: #D58562;
  --color_bg: #fff;
}

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

.LP_page {
  background: var(--color_bg);
  color: var(--color_main);
  font-family: adobe-garamond-pro, "EB Garamond", "Noto Serif JP", serif;
  overflow-x: clip;
  padding: 0 0 10rem;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active {
  opacity: 1;
}

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

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

.LP_page a {
  display: block;
}

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

.activePoint {
  opacity: 0;
  filter: blur(5px);
  transition: opacity 1s, filter 1s;
}

.activePoint.active {
  opacity: 1;
  filter: blur(0);
}

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

/*mv-----------------------------*/
.mv_area {
  padding-bottom: 8rem;
}

.mv_wrap {
  position: relative;
  z-index: 1;
  display: flex;
  margin-bottom: 8rem;
}

.mv_wrap::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_mv.jpg) center center / cover no-repeat;
  content: "";
}

.mv_area .mv {
  width: 50%;
}

.main_ttl_wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 56, 97, .5);
}

.main_ttl {
  font-weight: 400;
  font-size: 1.8rem;
  color: #fff;
}

.LP_page .txt_underLine {
  position: relative;
  padding-bottom: .2rem;
}

.LP_page .txt_underLine::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: .1rem;
  background: var(--color_main);
  content: "";
}

.main_ttl .txt_underLine {
  display: block;
  width: fit-content;
  margin: 0 auto 1rem;
  font-size: 1.6rem;
}

.main_ttl .txt_underLine::before {
  background: #fff;
}

.main_ttl .txt_emphasis .txt_eng {
  font-size: 2rem;
}

.main_ttl .txt_L {
  display: block;
  margin-top: 1.5rem;
  font-size: 3.6rem;
}

.main_ttl .txt_L .txt_eng {
  font-size: 4.6rem;
}

.main_lead {
  font-size: 1.4rem;
  line-height: 2;
  text-align: center;
}

.main_lead .txt_underLine {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  font-weight: 600;
  font-size: 2.4rem;
}

.main_lead .txt_underLine::before {
  width: calc(100% - 1.6rem);
}
/*-----------------------------mv*/

/*anchor link--------------------*/
.anchor-link_area {
  padding-bottom: 8rem;
}

.anchor-link_area ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.anchor-link_area ul li a {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44rem;
  height: 15rem;
  font-size: 2rem;
  color: #fff;
}

.anchor-link_area ul li a::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.anchor-link_area ul li:nth-of-type(1) a::before {
  background: url(../img/bg_011.jpg) center center / cover no-repeat;
}

.anchor-link_area ul li:nth-of-type(2) a::before {
  background: url(../img/bg_012.jpg) center center / cover no-repeat;
}

.anchor-link_area ul li a::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_01);
  content: "";
  opacity: .4;
}
/*--------------------anchor link*/

/*concept------------------------*/
.main_sec_ttl_wrap {
  position: relative;
  z-index: 1;
  margin-bottom: 8rem;
  padding: 8rem 0;
}

.concept_area .main_sec_ttl_wrap {
  margin-bottom: 19rem;
}

.main_sec_ttl_wrap::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url(../img/bg_021.jpg) center center / cover no-repeat;
  content: "";
}

.main_sec_ttl_wrap::after {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color_01);
  content: "";
  opacity: .4;
}

.main_sec_ttl {
  margin-bottom: 3rem;
  font-weight: 400;
  font-size: 2.2rem;
  text-align: center;
  color: #fff;
}

.sec_lead {
  font-size: 1.4rem;
  line-height: 2;
  text-align: center;
  color: #fff;
}

/*about--------------------------*/
.about_area {
  background: var(--color_02);
}

.about_area .sec_inner {
  position: relative;
  width: 110rem;
  margin: 0 auto;
  padding: 8rem 0;
}

.about_area .sec_ttl {
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -2rem;
  font-size: 3.2rem;
  text-align: left;
  color: var(--color_04);
}

.about_img {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 57rem;
  margin-bottom: 8rem;
}

.about_wrap {
  max-width: 51rem;
}

.about_wrap > dt {
  margin-bottom: 3rem;
  font-size: 1.8rem;
}

.about_txt {
  margin-bottom: 4rem;
  font-size: 1.2rem;
  line-height: 2;
}

.auth_wrap {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 5rem;
}

.auth_img {
  width: 10rem;
  mix-blend-mode: multiply;
}

.auth_txt {
  flex: 1;
  font-size: 1.2rem;
  line-height: 2;
}

.modal_btn {
  width: fit-content;
}

.modal_btn a {
  display: grid;
  place-items: center;
  grid-template-columns: 16rem;
  grid-template-rows: 2.4rem;
  border: solid #5C7588;
  border-width: .1rem;
  border-radius: .2rem;
}

.modal_btn a span {
  position: relative;
  padding-right: 2rem;
  font-size: 1.1rem;
}

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

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

/*about Hanbang------------------*/
body.no_scroll {
  height: 100vh;
  overflow: hidden;
}

header.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: 11;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgba(52, 56, 97, .5);
  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;
  width: 80rem;
  max-height: 80%;
  margin: 0 auto;
  background: #fff;
  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: 1.7rem 0 0 76.5rem;
  transform: rotate(45deg);
  cursor: pointer;
}

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

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

.modal_content {
  padding: 4rem;
  text-align: center;
}

.modal_content .sec_ttl {
  margin-bottom: 2rem;
  font-size: 1.8rem;
}

.modal_content p {
  font-size: 1.3rem;
  line-height: 2;
}
/*------------------about Hanbang*/

/*message------------------------*/
.message_area {
  padding: 8rem 0;
}

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

.sec_ttl .txt_eng {
  display: block;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  color: var(--color_04);
}

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

.director_wrap {
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 70rem;
  margin: 0 auto 3rem;
}

.director_img {
  border-radius: 50%;
  width: 20rem;
  overflow: hidden;
}

.director_message {
  flex: 1;
  font-size: 1.1rem;
  line-height: 2;
  text-align: justify;
}

.director_name {
  display: block;
  margin-top: 2rem;
  line-height: 1;
  text-align: right;
}

.Profile_wrap {
  width: 80rem;
  margin: 0 auto;
  padding: 3rem 5rem;
  background: var(--color_02);
}

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

.Profile_wrap dd .accordion_wrap::before {
  display: none;
}

.Profile_wrap dd .accordion_inner {
  font-size: 1rem;
  line-height: 2;
  letter-spacing: .075em;
  text-align: justify;
}

.Profile_wrap .accordion_outside .accordion_btn {
  display: none;
}

/*------------------------message*/
/*------------------------concept*/

/*products-----------------------*/
.products_area .main_sec_ttl_wrap::before {
  background: url(../img/bg_031.jpg) center center / cover no-repeat;
}

.products_area .sec_lead {
  font-size: 1.8rem;
}

.products_area .sec_lead .txt_underLine {
  display: block;
  width: fit-content;
  margin: 2rem auto 0;
  font-weight: 600;
  font-size: 2.4rem;
}

.products_area .sec_lead .txt_underLine::before {
  width: calc(100% - 1.6rem);
  background: #fff;
}

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

.products_list li {
  display: flex;
  flex-direction: column;
  width: 28rem;
}

.products_cat {
  position: relative;
  margin-bottom: 1rem;
  padding-top: 3rem;
  font-size: 1.2rem;
  text-align: center;
  color: var(--color_05);
}

.products_cat .txt_eng {
  display: block;
  margin-bottom: .5rem;
  font-size: 2rem;
}

.products_cat::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2.4rem;
  height: 2.4rem;
  content: "";
}

.products_lotion .products_cat::before {
  background: url(../img/icon_011.svg) center center / cover no-repeat;
}

.products_serum .products_cat::before {
  background: url(../img/icon_012.svg) center center / cover no-repeat;
}

.products_cream .products_cat::before {
  background: url(../img/icon_013.svg) center center / cover no-repeat;
}

.products_img {
  margin-bottom: 1.5rem;
}

.products_list li .adjust_height {
  flex-grow: 1;
}

.products_name {
  min-height: 4.5rem;
  margin-bottom: 1.5rem;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: .075em;
}

.products_list .accordion_outside {
  margin-bottom: 2rem;
}

.accordion_wrap {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s;
}

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

.accordion_wrap::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4rem;
  background: linear-gradient(transparent, #fff);
  content: "";
}

.accordion_outside.active .accordion_wrap::before {
  display: none;
}

.accordion_inner {
  height: 12rem;
  overflow: hidden;
}

.accordion_inner.release {
  height: auto !important;
}

.products_summary {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .075em;
}

.products_caption  {
  font-size: 1.1rem;
  line-height: 1.75;
  letter-spacing: .075em;
  text-align: justify;
}

.accordion_btn {
  position: relative;
  width: fit-content;
  margin: 1rem auto 0;
  padding-right: 1.5rem;
  font-size: 1rem;
  cursor: pointer;
}

.accordion_btn::before {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(45deg);
  border-right: solid var(--color_main);
  border-bottom: solid var(--color_main);
  border-width: .1rem;
  width: .6rem;
  height: .6rem;
  content: "";
}

.accordion_outside.active .accordion_btn::before {
  top: auto;
  bottom: 0;
  transform: rotate(-135deg);
}

.accordion_btn .to_open {
  display: block;
}

.accordion_btn .to_close {
  display: none;
}

.accordion_outside.active .to_open {
  display: none;
}

.accordion_outside.active .to_close {
  display: block;
}

.fragrance_wrap {
  position: relative;
  border-radius: .5rem;
  display: flex;
  align-items: center;
  min-height: 9rem;
  padding: 2rem;
  background: var(--color_02);
  margin-bottom: 2rem;
}

.fragrance_wrap dt {
  position: absolute;
  top: 0;
  left: 0;
  margin: -.8rem 0 0 .8rem;
  font-size: 1.4rem;
  color: var(--color_03);
}

.fragrance_wrap dd {
  font-size: 1.1rem;
  line-height: 1.5;
  text-align: justify;
}

.fragrance_wrap dd .txt_purple {
  color: var(--color_03);
}

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

.products_link a {
  display: grid;
  place-items: center;
  border-radius: .2rem;
  grid-template-columns: 14rem;
  grid-auto-rows: 3.5rem;
  background: var(--color_main);
  font-size: 1.6rem;
  color: #fff;
}

/*method-------------------------*/
.method_area {
  padding: 8rem 0;
  background: var(--color_02);
}

.method_area .sec_ttl {
  margin-bottom: 2rem;
}

.method_area .sec_lead_wrap {
  margin-bottom: 4rem;
}

.method_area .sec_lead_wrap dt {
  width: fit-content;
  margin: 0 auto 2rem;
  font-size: 1.5rem;
  text-align: center;
}

.method_area .sec_lead_wrap dt .txt_underLine {
  padding-bottom: 0;
}

.method_area .sec_lead_wrap dt .txt_underLine:nth-last-of-type(1):before {
  width: calc(100% - 1rem);
}

.method_area .sec_lead_wrap dt .txt_purple {
  font-weight: 500;
  color: var(--color_03);
}

.method_area .sec_lead_wrap dt .txt_L {
  font-size: 2.8rem;
}

.method_area .sec_lead_wrap dd {
  font-size: 1.3rem;
  line-height: 2;
  text-align: center;
}

.method_wrap {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.each_care_wrap {
  display: flex;
  align-items: center;
  width: 110rem;
  margin: 0 auto;
}

.each_care_wrap > dt {
  position: relative;
  width: 15rem;
  padding-top: 5.5rem;
  font-size: 2rem;
  text-align: center;
}

.each_care_wrap > dt::before {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 5rem;
  height: 5rem;
  content: "";
}

.morning-care > dt::before {
  background: url(../img/icon_021.svg) center center / cover no-repeat;
}

.night-care > dt::before {
  background: url(../img/icon_022.svg) center center / cover no-repeat;
}

.each_care_wrap > dt .txt_L {
  position: relative;
  display: block;
  width: fit-content;
  margin: .8rem auto 0;
  font-size: 4rem;
}

.each_care_wrap > dt .txt_L .txt_S {
  position: absolute;
  bottom: 0;
  left: 100%;
  margin: 0 0 .3rem .2rem;
  font-size: 1.8rem;
}

.each_care_wrap ul {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.each_care_wrap ul li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  text-align: center;
}

.use_itm {
  width: 12.6rem;
  height: 12.6rem;
  background: #fff;
  box-shadow: 0 0 6px rgba(136, 114, 149, .1);
}

.use_itm::after,
.use_breathing::after {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-left: solid .6rem var(--color_03);
  border-top: solid .5rem transparent;
  border-bottom: solid .5rem transparent;
  margin-right: .5rem;
  content: "";
}

.morning-care ul li:nth-last-of-type(1) {
  margin-left: 1.4rem;
}

.morning-care ul li:nth-last-of-type(1)::after {
  right: 100%;
  margin: 0 .3rem 0 0;
  border-left-color: #fff;
}

.morning-care ul li:nth-last-of-type(2)::after,
.night-care ul li:nth-last-of-type(1)::after {
  display: none;
}

.morning-care ul li:nth-last-of-type(1)::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1.6rem;
  background: var(--color_03);
  content: "";
}

.use_itm a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2rem;
  width: 100%;
  height: 100%;
}

.use_hands {
  flex-direction: column;
  gap: .2rem;
  width: 8rem;
  height: 8rem;
  margin-right: 1.4rem;
  background: #E3E6F9;
}

.use_hands::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1.6rem;
  background: var(--color_03);
  content: "";
}

.use_hands::after {
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border-left: solid .6rem #fff;
  border-top: solid .5rem transparent;
  border-bottom: solid .5rem transparent;
  margin-left: .5rem;
  content: "";
}

.use_breathing {
  flex-direction: column;
  gap: .2rem;
  width: 8rem;
  height: 8rem;
  background: #E1F1FF;
} 

.use_itm .care_name {
  margin-bottom: .2rem;
  font-size: 1.6rem;
}

.use_hands .care_name,
.use_breathing .care_name {
  font-size: 1.4rem;
}

.use_hands .care_name .txt_S {
  font-size: 1.2rem;
}

.care_img {
  width: 4rem;
}

.care_sec {
  font-size: 1.8rem;
}

.care_sec .txt_S {
  font-size: 1.2rem;
}

.side-note {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 0;
  border-radius: 0 0 1rem 1rem;
  width: 100%;
  padding: 7.5rem 1rem 1rem;
  background: #ECEFFF;
}

.side-note dt {
  margin-bottom: .5rem;
  font-size: 1.2rem;
  text-align: center;
  color: var(--color_03);
}

.side-note dt .txt_L {
  font-size: 1.6rem;
}

.side-note dd {
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: .05em;
  text-align: justify;
}

/*-------------------------method*/

/*review-------------------------*/
.review_area {
  padding-top: 10rem;
}

.review_area .main_sec_ttl {
  color: var(--color_main);
}

.review_list {
  display: flex;
  justify-content: center;
  gap: 2.5rem;
}

.review_list li {
  border-radius: .5rem;
  width: 35rem;
  padding: 2rem;
  background: var(--color_02);
}

.review_list li dt {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.review_list li dt .staff_img {
  border-radius: 50%;
  width: 7rem;
  overflow: hidden;
}

.review_list li dt .staff_name {
  flex: 1;
  font-size: 1.5rem;
}

.review_list li dd {
  font-size: 1.2rem;
  line-height: 2;
  letter-spacing: .075em;
  text-align: justify;
}

/*-------------------------review*/
.btn_sumup {
  width: fit-content;
  margin: 8rem auto 0;
}

.btn_sumup a {
  display: grid;
  place-items: center;
  border-radius: .2rem;
  grid-template-columns: 42rem;
  grid-template-rows: 8rem;
  background: var(--color_main);
  font-size: 2.2rem;
  color: #fff;
}

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

#share {
  z-index: 5 !important;
}

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

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

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

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

.mv_wrap::before {
  display: none;
}

.mv_area .mv {
  position: relative;
  width: 100%;
}

.mv_area .mv::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(160 * (100vw / 430));
  background: linear-gradient(transparent, #242E36);
  opacity: .8;
  content: "";
}

.main_ttl_wrap {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: block;
  margin-bottom: calc(30 * (100vw / 430));
  background: none;
}

.main_ttl {
  font-size: calc(14 * (100vw / 430));
  white-space: nowrap;
}

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

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

.main_ttl .txt_underLine {
  margin: 0 auto calc(10 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

.main_ttl .txt_emphasis .txt_eng {
  font-size: calc(18 * (100vw / 430));
}

.main_ttl .txt_L {
  margin-top: calc(10 * (100vw / 430));
  font-size: calc(27 * (100vw / 430));
}

.main_ttl .txt_L .txt_eng {
  font-size: calc(35 * (100vw / 430));
}

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

.main_lead .txt_underLine {
  margin: calc(15 * (100vw / 430)) auto 0;
  font-size: calc(22 * (100vw / 430));
}

.main_lead .txt_underLine::before {
  width: calc(100% - calc(13 * (100vw / 430)));
}
/*-----------------------------mv*/

/*anchor link--------------------*/
.anchor-link_area {
  padding-bottom: calc(60 * (100vw / 430));
}

.anchor-link_area ul {
  flex-direction: column;
  gap: calc(12 * (100vw / 430));
  padding: 0 calc(45 * (100vw / 430));
}

.anchor-link_area ul li a {
  width: 100%;
  height: calc(100 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.anchor-link_area ul li:nth-of-type(1) a::before {
  background: url(../img/bg_011_sp.jpg) center center / cover no-repeat;
}

.anchor-link_area ul li:nth-of-type(2) a::before {
  background: url(../img/bg_012_sp.jpg) center center / cover no-repeat;
}
/*--------------------anchor link*/

/*concept------------------------*/
.main_sec_ttl_wrap {
  margin-bottom: calc(60 * (100vw / 430));
  padding: calc(60 * (100vw / 430)) 0;
}

.concept_area .main_sec_ttl_wrap {
  margin-bottom: calc(287 * (100vw / 430));
}

.main_sec_ttl_wrap::before {
  background: url(../img/bg_021_sp.jpg) center center / cover no-repeat;
}

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

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

/*about--------------------------*/
.about_area .sec_inner {
  width: calc(400 * (100vw / 430));;
  padding: calc(60 * (100vw / 430)) 0 calc(40 * (100vw / 430));
}

.about_area .sec_ttl {
  position: relative;
  z-index: 1;
  margin: 0 0 calc(40 * (100vw / 430));
  font-size: calc(28 * (100vw / 430));
}

.about_img {
  position: absolute;
  bottom: 100%;
  right: 0;
  width: calc(330 * (100vw / 430));
  margin-bottom: calc(-103 * (100vw / 430));
}

.about_img::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(137 * (100vw / 430));
  background: linear-gradient(transparent, #242E36);
  opacity: .5;
  content: "";
}

.about_wrap {
  max-width: 100%;
}

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

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

.auth_wrap {
  gap: calc(20 * (100vw / 430));
  margin-bottom: calc(30 * (100vw / 430));
}

.auth_img {
  width: calc(94 * (100vw / 430));
}

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

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

.modal_btn a {
  grid-template-columns: calc(160 * (100vw / 430));
  grid-template-rows: calc(24 * (100vw / 430));
  border-width: calc(1 * (100vw / 430));
  border-radius: calc(2 * (100vw / 430));
}

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

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

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

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

.modal_inner {
  width: calc(380 * (100vw / 430));
}

.modal_inner .btn_close {
  width: calc(20 * (100vw / 430));
  height: calc(20 * (100vw / 430));
  margin: calc(12 * (100vw / 430)) 0 0 calc(350 * (100vw / 430));
}

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

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

.modal_content {
  padding: calc(40 * (100vw / 430)) calc(30 * (100vw / 430));
}

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

.modal_content p {
  font-size: calc(12 * (100vw / 430));
}
/*------------------about Hanbang*/

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

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

.sec_ttl .txt_eng {
  margin-bottom: calc(15 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

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

.director_wrap {
  display: block;
  width: calc(350 * (100vw / 430));
  margin: 0 auto calc(30 * (100vw / 430));
}

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

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

.director_name {
  margin-top: calc(5 * (100vw / 430));
}

.Profile_wrap {
  width: calc(400 * (100vw / 430));
  padding: calc(25 * (100vw / 430));
}

.Profile_wrap dt {
  margin-bottom: calc(15 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

.Profile_wrap dd .accordion_wrap::before {
  display: block;
  background: linear-gradient(transparent, #F9FAFF);
}

.Profile_wrap dd .accordion_inner {
  height: calc(60 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}

.Profile_wrap .accordion_outside .accordion_btn {
  display: block;
}

/*------------------------message*/
/*------------------------concept*/

/*products-----------------------*/
.products_area .main_sec_ttl_wrap::before {
  background: url(../img/bg_031_sp.jpg) center center / cover no-repeat;
}

.products_area .sec_lead {
  font-size: calc(16 * (100vw / 430));
}

.products_area .sec_lead .txt_underLine {
  margin: calc(15 * (100vw / 430)) auto 0;
  font-size: calc(22 * (100vw / 430));
}

.products_area .sec_lead .txt_underLine::before {
  width: calc(100% - calc(13 * (100vw / 430)));
}

.products_list {
  display: grid;
  grid-template-columns: repeat(3, calc(250 * (100vw / 430)));
  justify-content: flex-start;
  gap: calc(20 * (100vw / 430));
  margin-bottom: calc(60 * (100vw / 430));
  padding: 0 calc(15 * (100vw / 430));
  overflow-x: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

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

.products_list li {
  width: auto;
}

.products_cat {
  margin-bottom: calc(10 * (100vw / 430));
  padding-top: calc(34 * (100vw / 430));
  font-size: calc(11 * (100vw / 430));
}

.products_cat .txt_eng {
  margin-bottom: calc(5 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.products_cat::before {
  width: calc(28 * (100vw / 430));
  height: calc(28 * (100vw / 430));
}

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

.products_name {
  min-height: calc(40 * (100vw / 430));
  margin-bottom: calc(20 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

.products_list .accordion_outside {
  margin-bottom: calc(20 * (100vw / 430));
}

.accordion_wrap::before {
  height: calc(40 * (100vw / 430));
}

.accordion_inner {
  height: calc(113 * (100vw / 430));
}

.products_summary {
  margin-bottom: calc(12 * (100vw / 430));
  font-size: calc(11 * (100vw / 430));
}

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

.accordion_btn {
  margin: calc(10 * (100vw / 430)) auto 0;
  padding-right: calc(15 * (100vw / 430));
  font-size: calc(10 * (100vw / 430));
}

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

.fragrance_wrap {
  border-radius: calc(5 * (100vw / 430));
  min-height: calc(75 * (100vw / 430));
  padding: calc(15 * (100vw / 430));
  margin-bottom: calc(20 * (100vw / 430));
}

.fragrance_wrap dt {
  margin: calc(-8 * (100vw / 430)) 0 0 calc(5 * (100vw / 430));
  font-size: calc(13 * (100vw / 430));
}

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

.products_link a {
  border-radius: calc(2 * (100vw / 430));
  grid-template-columns: calc(120 * (100vw / 430));
  grid-auto-rows: calc(28 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

/*method-------------------------*/
.method_area {
  padding: calc(60 * (100vw / 430)) 0;
}

.method_area .sec_ttl {
  margin-bottom: calc(25 * (100vw / 430));
}

.method_area .sec_lead_wrap {
  margin-bottom: calc(30 * (100vw / 430));
}

.method_area .sec_lead_wrap dt {
  margin: 0 auto calc(20 * (100vw / 430));
  font-size: calc(14 * (100vw / 430));
}

.method_area .sec_lead_wrap dt .txt_underLine {
  width: fit-content;
  display: block;
  margin: 0 auto;
}

.method_area .sec_lead_wrap dt .txt_underLine:nth-of-type(n+2) {
  margin-top: calc(-5 * (100vw / 430));
}

.method_area .sec_lead_wrap dt .txt_underLine:nth-of-type(1):before {
  margin-bottom: calc(2 * (100vw / 430));
}

.method_area .sec_lead_wrap dt .txt_underLine:nth-last-of-type(1):before {
  width: calc(100% - calc(10 * (100vw / 430)));
}

.method_area .sec_lead_wrap dt .txt_L {
  font-size: calc(26 * (100vw / 430));
}

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

.method_wrap {
  flex-direction: row;
  justify-content: center;
  gap: calc(45 * (100vw / 430));
}

.each_care_wrap {
  display: flex;
  flex-direction: column;
  gap: calc(15 * (100vw / 430));
  align-items: center;
  width: auto;
  margin: 0;
}

.each_care_wrap > dt {
  width: fit-content;
  margin: 0 auto;
  padding-top: calc(44 * (100vw / 430));
  font-size: calc(18 * (100vw / 430));
}

.each_care_wrap > dt::before {
  width: calc(40 * (100vw / 430));
  height: calc(40 * (100vw / 430));
}

.each_care_wrap > dt .txt_L {
  margin: calc(5 * (100vw / 430)) auto 0;
  font-size: calc(36 * (100vw / 430));
}

.each_care_wrap > dt .txt_L .txt_S {
  margin: 0 0 calc(3 * (100vw / 430)) calc(2 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.each_care_wrap ul {
  flex-direction: column;
}

.use_itm {
  width: calc(126 * (100vw / 430));
  height: calc(126 * (100vw / 430));
}

.use_itm::after,
.use_breathing::after {
  top: auto;
  bottom: 0;
  right: auto;
  left: 50%;
  transform: translate(-50%, 0);
  border-top: solid calc(6 * (100vw / 430)) var(--color_03);
  border-left: solid calc(5 * (100vw / 430)) transparent;
  border-right: solid calc(5 * (100vw / 430)) transparent;
  border-bottom: none;
  margin: 0 0 calc(5 * (100vw / 430)) 0;
}

.morning-care ul li:nth-last-of-type(1) {
  margin: calc(15 * (100vw / 430)) 0 0 0;
}

.morning-care ul li:nth-last-of-type(1)::after {
  bottom: 100%;
  right: auto;
  left: 50%;
  margin: 0 0 calc(5 * (100vw / 430)) 0;
  border-left-color: transparent;
  border-top-color: #fff;
}

.morning-care ul li:nth-last-of-type(1)::before {
  top: auto;
  bottom: 50%;
  right: auto;
  left: 50%;
  transform: translate(-50%, 0);
  width: calc(15 * (100vw / 430));
  height: 100%;
  background: var(--color_03);
  content: "";
}

.use_itm a {
  gap: calc(2 * (100vw / 430));
}

.use_hands {
  width: calc(80 * (100vw / 430));
  height: calc(80 * (100vw / 430));
  margin: 0 0 calc(15 * (100vw / 430)) 0;
}

.use_hands::before {
  transform: translate(-50%, 0);
  width: calc(15 * (100vw / 430));
  height: 100%;
}

.use_hands::after {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  border-top: solid calc(6 * (100vw / 430)) #fff;
  border-left: solid calc(5 * (100vw / 430)) transparent;
  border-right: solid calc(5 * (100vw / 430)) transparent;
  border-bottom: none;
  margin: calc(6 * (100vw / 430)) 0 0 0;
}

.use_breathing {
  width: calc(80 * (100vw / 430));
  height: calc(80 * (100vw / 430));
}

.use_itm .care_name {
  margin-bottom: calc(2 * (100vw / 430));
  font-size: calc(16 * (100vw / 430));
}

.use_hands .care_name,
.use_breathing .care_name {
  font-size: calc(14 * (100vw / 430));
}

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

.care_img {
  width: calc(40 * (100vw / 430));
}

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

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

.side-note {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 0 calc(10 * (100vw / 430)) calc(10 * (100vw / 430)) 0;
  width: calc(100% * 1.5 + calc(45 * (100vw / 430)));
  height: 100%;
  padding: 0 calc(15 * (100vw / 430)) 0 calc(75 * (100vw / 430));
}


.side-note dt {
  margin-bottom: calc(5 * (100vw / 430));
  font-size: calc(12 * (100vw / 430));
  text-align: left;
}

.side-note dt .txt_L {
  font-size: calc(16 * (100vw / 430));
}

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

/*-------------------------method*/

/*review-------------------------*/
.review_area {
  padding-top: calc(80 * (100vw / 430));
}

.review_list {
  flex-direction: column;
  gap: calc(20 * (100vw / 430));
  padding: 0 calc(15 * (100vw / 430));
}

.review_list li {
  border-radius: calc(5 * (100vw / 430));
  width: auto;
  padding: calc(20 * (100vw / 430));
}

.review_list li dt {
  gap: calc(15 * (100vw / 430));
  margin-bottom: calc(15 * (100vw / 430));
}

.review_list li dt .staff_img {
  width: calc(60 * (100vw / 430));
}

.review_list li dt .staff_name {
  font-size: calc(16 * (100vw / 430));
}

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

/*-------------------------review*/
.btn_sumup {
  margin: calc(60 * (100vw / 430)) auto 0;
}

.btn_sumup a {
  border-radius: calc(2 * (100vw / 430));
  grid-template-columns: calc(340 * (100vw / 430));
  grid-template-rows: calc(60 * (100vw / 430));
  font-size: calc(20 * (100vw / 430));
}

}

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

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

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