@font-face {
  font-family: "Jost";
  src: url("../font/Jost-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
}

:root {
  --font-Sans: "Source Han Sans", "源ノ角ゴシック", "Noto Sans CJK JP", "Noto Sans JP",
    "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  --font-Serif: "Source Han Serif", "源ノ明朝", "Noto Serif CJK JP", "Noto Serif JP",
    "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  --font-jost: "Jost", sans-serif;
  --color-beige: #cdb690;
  --btn-black: #231815;
  --color-blue: #81c4b1;
  --s-val: 10px;
}

.pc-style {
  display: block;
}

.sp-style {
  display: none;
}

@media screen and (max-width: 640px) {
  .main .chantry_container {
    max-width: 100%;
    --s-val: 1.4vw;
  }

  .pc-style {
    display: none;
  }

  .sp-style {
    display: block;
  }
}

.font-beige {
  color: #9b8465;
}

/*accordion*/

.accordion_btn {
  font-size: calc(var(--s-val) * 1.8);
  text-align: center;
  background-color: rgba(205, 182, 144, 0.5);
  padding: 3% 0;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.accordion_inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion_inner.open {
  max-height: 10000px;
}

.accordion-height {
  padding: 4rem 0;
  display: flex;
  flex-wrap: wrap;
  width: 90%;
  justify-content: center;
  margin: 0 auto;
  gap: calc(var(--s-val) * 2);
  flex-direction: column;
}

.accordion_icon {
  display: inline-block;
  width: calc(var(--s-val) * 2.4);
  height: calc(var(--s-val) * 2.4);
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.accordion_icon::before,
.accordion_icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 0.2);
  background: #231815;
  border-radius: 1px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.accordion_icon::before {
  /* 横棒（常に表示） */
  transform: translate(-50%, -50%) rotate(0deg);
}
.accordion_icon::after {
  /* 縦棒（プラス時のみ） */
  transform: translate(-50%, -50%) rotate(90deg);
}
.accordion_btn.open .accordion_icon::after {
  /* マイナス時は縦棒を横棒に重ねて消す */
  transform: translate(-50%, -50%) rotate(0deg) scaleX(0);
}
.accordion_btn.open .accordion_icon::before {
  /* 横棒はそのまま */
  transform: translate(-50%, -50%) rotate(0deg);
}

.list_content {
  background-color: rgba(205, 182, 144, 0.25);
  width: calc(50% - calc(var(--s-val) * 0.5));
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  font-size: calc(var(--s-val) * 2);
  padding: 0.5rem;
}

.accordion_inner .fontsize-11 {
  font-size: calc(var(--s-val) * 0.9);
  text-align: left;
  display: block;
  font-weight: normal;
}

span.content-box {
  margin-bottom: 0.5rem;
  display: block;
}

.fontsize-11 {
  font-size: calc(var(--s-val) * 0.9);
  display: block;
}

.fontsize-15 {
  font-size: calc(var(--s-val) * 1.5);
}

.fontsize-16 {
  font-size: calc(var(--s-val) * 1.6);
}

.fontsize-18 {
  font-size: calc(var(--s-val) * 1.6);
}

.fontsize-22 {
  font-size: calc(var(--s-val) * 1.6);
}

.fontsize-24 {
  font-size: calc(var(--s-val) * 1.4);
}

.fontsize-26 {
  font-size: calc(var(--s-val) * 2);
}

.fontsize-28 {
  font-size: calc(var(--s-val) * 2);
}

.fontsize-30 {
  font-size: calc(var(--s-val) * 2);
}

.fontsize-31 {
  font-size: calc(var(--s-val) * 2);
}

.fontsize-35 {
  font-size: calc(var(--s-val) * 3.5);
}

.fontsize-36 {
  font-size: calc(var(--s-val) * 2.4);
}

.fontsize-40 {
  font-size: calc(var(--s-val) * 3);
  font-weight: bold;
}

.fontsize-44 {
  font-size: calc(var(--s-val) * 3);
}

.fontsize-46 {
  font-size: calc(var(--s-val) * 3);
  line-height: 1;
  font-weight: bold;
}

.fontsize-58 {
  font-size: calc(var(--s-val) * 2.8);
}

.fontsize-63 {
  font-size: calc(var(--s-val) * 3.3);
}

.fontsize-72 {
  font-size: calc(var(--s-val) * 5.2);
}

.fontsize-94 {
  font-size: calc(var(--s-val) * 7.4);
}

.bg-container {
  background-color: #f8f5ee;
}

.chantry_container {
  font-family: var(--font-Sans);
  max-width: 525px;
  margin: 0 auto;
  color: #333333;
  background-color: #fff;
}

/*===top-link===*/

.top_link {
  display: flex;
  gap: calc(var(--s-val) * 0.5);
  flex-wrap: wrap;
  margin-bottom: 10rem;
}

.top_link a {
  background-color: rgba(205, 182, 144, 0.5);
  width: calc(50% - calc(var(--s-val) * 0.25));
  text-align: center;
  padding: 5% 0;
  font-size: calc(var(--s-val) * 1.8);
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.top_link a span {
  background-image: url(../images/link-arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 1.5);
  display: block;
  margin: 0 auto;
}

/*item-area*/

.item_area {
  margin: 0 auto 3rem;
  width: 90%;
}

.item_title {
  text-align: center;
  font-size: calc(var(--s-val) * 1.8);
  margin: 0 auto 5rem;
  font-weight: bold;
}

.item_photo-box {
  width: 50%;
}

.item_photo {
  width: 80%;
  margin: 0 auto;
  padding-left: 1rem;
}

.item_box {
  display: flex;
  margin: 0 auto 3rem;
  width: 90%;
}

.item_photo-title {
  text-align: center;
  font-size: calc(var(--s-val) * 1.8);
  width: 65%;
  margin: 0 auto;
  padding: 0.6rem 0;
  font-weight: bold;
}

.item_photo-box:first-child .item_photo-title {
  background-color: #faf0f5;
}

.item_photo-box:last-child .item_photo-title {
  background-color: #faf5dc;
}

.item_capacity {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 3.5rem;
  letter-spacing: 1px;
  gap: calc(var(--s-val) * 1);
}

.item_capacity span {
  font-size: 0.6em;
  vertical-align: top;
}

.item_capacity p:nth-child(1) {
  font-size: calc(var(--s-val) * 1.2);
  border: 1px solid;
  padding: 0.5% 2%;
}

.item_capacity p:nth-child(2) {
  font-size: calc(var(--s-val) * 1.6);
  margin: 0 0rem 0 1rem;
}

.item_capacity p:nth-child(3) {
  font-size: calc(var(--s-val) * 1);
}

.item_price {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 1rem;
}

dl.item_price-title {
  width: 50%;
  text-align: center;
}

.item_price-title dt {
  font-size: calc(var(--s-val) * 1.6);
  text-align: center;
  line-height: 1;
  letter-spacing: -1px;
}

.item_price-title dd:nth-child(2) {
  font-size: calc(var(--s-val) * 2.4);
  font-weight: bold;
}

.item_price-title .font-price {
  font-size: calc(var(--s-val) * 4);
  font-weight: bold;
}

.item_price-title .font-small {
  font-size: calc(var(--s-val) * 1.4);
}

.item_price-benefits:last-child {
  display: inline-flex;
  gap: calc(var(--s-val) * 0.5);
}

.item_price-benefits span {
  font-size: calc(var(--s-val) * 1.6);
  color: var(--color-blue);
  border: 1px solid;
  padding: calc(var(--s-val) * 0.2) calc(var(--s-val) * 2);
  font-weight: bold;
}

.item_annotation p {
  font-size: calc(var(--s-val) * 1);
  text-align: right;
  width: 100%;
}

/*btn-area*/

.btn_area {
  width: 90%;
  margin: 0 auto 6rem;
}

.btn_title {
  text-align: center;
  font-weight: bold;
  font-size: calc(var(--s-val) * 2);
  padding: 2rem 0 2.5rem;
}

.btn_area .link-btn {
  background-color: var(--btn-black);
  text-align: center;
  font-size: calc(var(--s-val) * 2.2);
  color: #fff !important;
  width: 100%;
  display: block;
  padding: 1.5rem 0;
  border-radius: 5px;
  margin-bottom: 2rem;
  align-items: center;
  display: flex;
  justify-content: center;
  position: relative;
}

.btn_area .link-btn span {
  top: 50%;
  background-image: url(../images/btn-arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 2);
  height: calc(var(--s-val) * 2);
  position: absolute;
  right: 20%;
  transform: translateY(-50%);
}

.btn_text {
  font-size: calc(var(--s-val) * 0.8);
  text-align: right;
  display: flex;
  justify-content: flex-end;
  line-height: 1.5;
}

.benefits_area {
  width: 90%;
  margin: 0 auto 10rem;
  border: 1px solid rgba(205, 182, 144, 0.5);
}

.benefits_area.benefits_area02 {
  margin-bottom: 5rem;
}

.benefits_area .list_content {
  min-height: calc(var(--s-val) * 12);
  font-weight: bold;
}

.benefits_area .accordion_btn {
  padding: 2rem 5rem 2rem 0;
}

.benefits_area .accordion-height {
  flex-direction: row;
  width: 95%;
  padding: 3rem 0 4rem;
  gap: calc(var(--s-val) * 0.5) calc(var(--s-val) * 0.5);
}

.accordion-height .benefits_content:first-child p {
  line-height: 2;
}

.accordion-height .benefits_content:nth-child(5) p {
  line-height: 1.2;
}

.accordion-height .benefits_content:nth-child(6) p {
  line-height: 1.5;
}

.benefits_content span.content-box {
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.benefits_area .accordion_icon {
  right: 10%;
  padding: 3rem 0;
}

/*===kinds_area===*/

.kinds_area {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--s-val) * 0.5);
}

.kinds_area a {
  background-color: rgba(205, 182, 144, 0.5);
  width: calc(50% - calc(var(--s-val) * 0.25));
  text-align: center;
  font-size: calc(var(--s-val) * 1.8);
  color: #333333;
  min-height: calc(var(--s-val) * 10);
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  background-repeat: no-repeat;
  background-position: right 10% bottom 0;
}

.kinds_area a:nth-child(1) {
  background-image: url(../images/care.webp);
  background-size: 18%;
  padding: 3% 8% 3% 0;
}

.kinds_area a:nth-child(1) .arrow-style {
  font-size: calc(var(--s-val) * 1.6);
}

.kinds_area a:nth-child(2) {
  background-image: url(../images/refill-set.webp);
  background-size: 37%;
  padding: 3% 20% 3% 0;
  background-position: bottom 0 right 15%;
}

.kinds_area a:nth-child(3) {
  background-image: url(../images/bottle.webp);
  background-size: 19%;
  padding: 3% 8% 3% 0;
}

.kinds_area a:nth-child(4) {
  background-image: url(../images/refill.webp);
  background-size: 22%;
  padding: 3% 20% 3% 0;
  background-position: right 23% bottom 0;
}

.kinds_area a .arrow-style {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--s-val) * 1);
}

.kinds_area a .arrow-style::after {
  display: block;
  content: "";
  background-image: url(../images/link-arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 2);
  height: calc(var(--s-val) * 2);
}

/*merchandise_area*/

.merchandise_title {
  text-align: center;
  color: #fff;
  background-image: url(../images/bottle-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom 0 left 50%;
  padding: 6rem 0px 80%;
  font-family: var(--font-Serif);
  line-height: 1.7;
  font-size: calc(var(--s-val) * 2);
}

.merchandise_area .margin-bottom.last {
  margin-bottom: 5.5rem;
}

span.margin-bottom {
  display: block;
  margin-bottom: 3.4rem;
}

.merchandise_title .fontsize-36 {
  display: inline-block;
  position: relative;
  line-height: 1;
  margin-bottom: 2rem;
}

.merchandise_title .fontsize-36 span {
  font-size: 0.4em;
  vertical-align: top;
  display: inline;
  margin-right: 0%;
  position: absolute;
  right: 0px;
}

/*===beauty_top===*/

.beauty_area {
  background-image: url(../images/beauty-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
}

.beauty_top {
  display: flex;
  font-family: var(--font-Serif);
  text-align: center;
  margin-bottom: 7rem;
}

.beauty_photo,
.beauty_title {
  width: 50%;
}

.beauty_photo {
  margin-top: -12%;
}

.beauty_title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: -4rem;
}

.beauty_title p:first-child {
  font-size: calc(var(--s-val) * 1.8);
  margin-bottom: 2rem;
}

.beauty_title p:nth-child(2) {
  font-size: calc(var(--s-val) * 2.2);
  line-height: 1.6;
}

.beauty_title .fontsize-44 {
  display: block;
}

.beauty_top .fontsize-11 {
  text-align: right;
  margin-bottom: 10%;
  width: 90%;
}

.beauty_features-title {
  text-align: center;
  font-size: calc(var(--s-val) * 3);
  font-family: var(--font-Serif);
  color: rgba(130, 107, 103, 0.3);
}

.beauty_features-title p {
  position: relative;
  display: inline;
  color: #333333;
}

.beauty_features-title p::before,
.beauty_features-title p::after {
  position: absolute;
  top: 0;
  color: rgba(130, 107, 103, 0.3);
}

.beauty_features-title p::before {
  content: "“";
  left: -2rem;
}

.beauty_features-title p::after {
  content: "”";
  right: -2rem;
}

.beauty_features-photo {
  width: 80%;
  margin: 0 auto 4rem;
}

.beauty_detail {
  margin-bottom: 8rem;
}

.beauty_detail .accordion_icon {
  right: 5%;
}

.beauty_detail .accordion_btn {
  width: 80%;
  margin: 0 auto;
}

.beauty_detail .accordion_inner {
  width: 80%;
  margin: 0 auto;
}

.beauty_detail-text .accordion-height {
  background-image: url(../images/beauty_detail-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff;
  text-align: center;
  font-size: calc(var(--s-val) * 1.8);
  padding: 4rem 0;
  width: 100%;
  line-height: 1.6;
  display: block;
}

.beauty_detail-text .accordion-height p:first-child {
  margin-bottom: 2rem;
}

.beauty_detail-text span {
  display: block;
  margin-bottom: 1.5rem;
}

.beauty_detail .accordion-height p:last-child {
  font-size: calc(var(--s-val) * 1);
  text-align: right;
  width: 90%;
}

.beauty_bottom .beauty_title {
  font-size: calc(var(--s-val) * 3.4);
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
  position: relative;
}

.beauty_bottom .beauty_title p:first-child {
  position: absolute;
  background-color: rgba(203, 230, 220, 0.6);
  padding: 6rem 8%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-Serif);
  line-height: 2;
}

.beauty_bottom .beauty_photo {
  margin-top: 0;
}

.beauty_bottom {
  padding-bottom: 12rem;
}

/*cause*/

.cause_area {
  background-color: rgba(205, 182, 144, 0.15);
  padding: 9rem 0;
}

.cause_title {
  font-size: calc(var(--s-val) * 2.2);
  font-family: var(--font-Serif);
  text-align: center;
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  width: 80%;
  margin: 0 auto 4rem;
  padding: 2rem 0;
  line-height: 1.8;
}

.cause_profile {
  display: flex;
  align-items: center;
  background-color: #fff;
  width: 90%;
  margin: 0 auto 4rem;
  justify-content: space-between;
  padding: 2rem 3rem;
}

.cause_detail-title.accordion_btn {
  padding: 4% 0;
}

.cause_text p:first-child {
  font-size: calc(var(--s-val) * 1.5);
  margin-bottom: 1rem;
}

.cause_text p:last-child {
  font-size: calc(var(--s-val) * 2.5);
  border-bottom: 2px solid #826b67;
}

.cause_text p:last-child span {
  font-size: calc(var(--s-val) * 2.2);
  color: #826b67;
  font-family: var(--font-jost);
  font-weight: 400;
  display: block;
}

.cause_photo {
  width: 28%;
}

.cause_detail {
  width: 90%;
  margin: 0 auto;
}

.cause_area .accordion_icon {
  right: 6rem;
}

.cause_detail-inner.accordion_inner.open {
  background-color: #fff;
}

.cause_detail-text {
  font-size: calc(var(--s-val) * 1.4);
  line-height: 1.8;
  margin-bottom: 3rem;
}

.cause_detail .accordion-height {
  padding: 2rem 0 4rem;
}

.cause_detail-bottom {
  text-align: center;
  font-size: calc(var(--s-val) * 2);
  font-family: var(--font-Serif);
  color: #9b8465;
}

.cause_detail-photo {
  margin-bottom: 1rem;
}

/*===worries_area===*/

.worries_area {
  padding: 6rem 0 4rem;
}

.worries_title {
  text-align: center;
  font-size: calc(var(--s-val) * 3);
  font-family: var(--font-Serif);
  margin-bottom: 4rem;
}

.worries_list-content {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  gap: calc(var(--s-val) * 2);
}

.worries_list {
  width: 50%;
  border: 1px solid var(--color-blue);
  padding: 1rem 0 3rem 2rem;
  border-radius: 10px;
  font-weight: 300;
}

.worries_list dt {
  font-size: calc(var(--s-val) * 2.8);
  font-family: var(--font-jost);
  color: var(--color-blue);
  margin-bottom: 1rem;
  font-weight: 400;
}

.worries_list dd {
  font-size: calc(var(--s-val) * 1.6);
  position: relative;
  margin-left: 2rem;
  line-height: 1.9;
  font-weight: 600;
}

.worries_list dd::before {
  content: "";
  background-image: url(../images/check.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 1.5);
  left: -2rem;
  top: 50%;
  transform: translateY(-50%);
}

/*===solution_area===*/

.solution_area {
  background-image: url(../images/solution-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom -4rem left 0;
  padding: 5rem 0 7rem;
}

.solution_title {
  font-size: calc(var(--s-val) * 5);
  text-align: center;
  font-family: var(--font-Serif);
  margin-bottom: 2rem;
}

.solution_content-title {
  font-size: calc(var(--s-val) * 2.6);
  font-family: var(--font-Serif);
  text-align: center;
  margin-bottom: 2rem;
}

.solution_content-title span {
  padding-right: 1.8rem;
  position: relative;
}

.solution_content-title span::before,
.solution_content-title span::after {
  position: absolute;
  top: 0;
  font-size: 4rem;
}

.solution_content-title span::before {
  content: "“";
  left: -2rem;
}

.solution_content-title span::after {
  content: "”";
  right: 0rem;
}

.solution_list {
  display: flex;
  justify-content: center;
  gap: calc(var(--s-val) * 1);
  font-size: calc(var(--s-val) * 2.8);
  font-family: var(--font-Serif);
  margin-bottom: 6rem;
}

.solution_list li {
  background-color: #fff;
  width: 25%;
  text-align: center;
  padding: 0.5rem 0;
}

.solution_image {
  display: flex;
  width: 90%;
  margin: 0 auto 3rem;
  gap: 10px;
  justify-content: center;
}

.solution-media {
  width: calc(var(--s-val) * 22) !important;
  height: calc(var(--s-val) * 45);
  object-fit: cover;
  display: block;
  margin: 0 auto 5rem;
}

.solution_image dd {
  text-align: center;
  font-size: calc(var(--s-val) * 1.6);
}

.solution_after dt {
  position: relative;
}

.solution_after span {
  position: absolute;
  bottom: -3rem;
  right: 0;
  font-size: calc(var(--s-val) * 1.2);
}

.solution_bottom-text {
  text-align: center;
}

.solution_bottom-text p:nth-child(1),
.solution_bottom-text p:nth-child(2) {
  font-family: var(--font-Serif);
}

.solution_bottom-text p:nth-child(1) {
  font-size: calc(var(--s-val) * 3);
}

.solution_bottom-text p:nth-child(2) {
  font-size: calc(var(--s-val) * 5);
  display: inline;
  position: relative;
  line-height: 1.8;
}

.solution_bottom-text p:nth-child(2)::before,
.solution_bottom-text p:nth-child(2)::after {
  color: rgba(130, 107, 103, 0.3);
  position: absolute;
}

.solution_bottom-text p:nth-child(2)::before {
  content: "“";
  left: -2rem;
}

.solution_bottom-text p:nth-child(2)::after {
  content: "”";
}

.solution_bottom-text p:nth-child(3) {
  font-size: calc(var(--s-val) * 2);
}

/*===care===*/

.care_area {
  margin-bottom: 10rem;
}

.care_bg {
  background-image: url(../images/care-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  padding-bottom: 10rem;
}

.care_detail-container .accordion-height {
  gap: calc(var(--s-val) * 3);
  padding: 4rem 0 2rem;
}

.care_item-container {
  padding: 5rem 0;
}

.care_item-content {
  display: flex;
  align-items: center;
}

.care_item-content.care_volume {
  margin-bottom: 1rem;
}

.care_item-content.care_moist {
  align-items: flex-end;
}

.care_item-photo {
  width: 45%;
  position: relative;
  z-index: 0;
}

.care_item-text {
  width: 55%;
  text-align: center;
  position: relative;
  z-index: 1;
}

.care_item-text dt {
  font-size: calc(var(--s-val) * 5);
  font-family: var(--font-jost);
  color: #9b8465;
  margin-bottom: 2rem;
  font-weight: 400;
}

.care_item-content.care_moist {
  align-items: flex-end;
}

.care_item-content.care_volume {
  margin-bottom: 2rem;
}

.care_item-text dd:nth-child(2) {
  margin-bottom: 2rem;
  font-size: calc(var(--s-val) * 1.6);
}

.care_item-text dd:nth-child(3) {
  font-size: calc(var(--s-val) * 2);
  font-family: var(--font-Serif);
}

.care_item-photo::before {
  content: "";
  position: absolute;
  width: 100%;
  width: 90%;
  height: 70%;
  bottom: -3rem;
  z-index: -1;
}

.care_volume-photo::before {
  background-color: #faf0f5;
  right: 6rem;
}

.care_moist-photo::before {
  background-color: #faf5dc;
  left: 6rem;
}

.care_detail-title {
  text-align: center;
  font-size: calc(var(--s-val) * 2);
  background-color: rgba(255, 255, 255, 0.7);
  width: 90%;
  margin: 0 auto 5rem;
  padding: 3rem 2rem;
  line-height: 2;
}

.care_detail-title span {
  font-size: calc(var(--s-val) * 2.2);
  font-weight: bold;
}

.care_detail-color {
  color: #81c4b1;
  border-bottom: 2px solid;
  font-weight: bold;
}

.care_detail-content {
  background-color: #fff;
  width: 90%;
  margin: 0 auto 5rem;
}

.care_detail-content .accordion_icon {
  right: 8%;
}

.care_detail-inner p {
  font-size: calc(var(--s-val) * 2);
  text-align: center;
  font-weight: bold;
  border: 1px solid;
  padding: 0.8rem 2rem;
  margin-bottom: 1rem;
  margin: 0 auto;
}

.care_diagnosis-title {
  font-size: calc(var(--s-val) * 2.8);
  text-align: center;
  font-weight: bold;
  margin-bottom: 6rem;
}

.care_diagnosis-btn-box {
  position: relative;
  width: 80%;
  margin: 0 auto;
}

.care_diagnosis-btn {
  display: block;
  background-color: #cbe6dc;
  padding: 3% 0rem 3% 21%;
  margin: 0 auto;
  font-size: calc(var(--s-val) * 1.8);
  border-radius: 10px;
  box-shadow: 4px 3px 11px 2px rgb(0 0 0 / 10%);
  text-align: center;
  color: #333333;
  position: relative;
}

.care_diagnosis-btn span {
  content: "";
  background-image: url(../images/btn-arrow-black.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 1.5);
  display: inline-block;
  margin-left: 1rem;
}

.care_diagnosis-text {
  position: absolute;
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
  background-color: #fff;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-blue);
  font-weight: bold;
  width: 28%;
  font-size: calc(var(--s-val) * 1.4);
  border: 1px solid;
  box-shadow: 4px 3px 11px 2px rgb(0 0 0 / 10%);
  z-index: 1;
  text-align: center;
}

/*first_btn*/

.first_btn {
  text-align: center;
  width: 90%;
  margin: 0 auto;
}

.first_btn a {
  color: #333333;
  font-size: calc(var(--s-val) * 2);
  background-color: #cbe6dc;
  display: flex;
  flex-direction: column;
  padding: 2rem 0;
  position: relative;
}

.first_btn a::before,
.first_btn a::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-position: top 50% left 50%;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
}

.first_btn a::before {
  background-image: url(../images/link-arrow.webp);
  width: calc(var(--s-val) * 2);
  height: calc(var(--s-val) * 2);
  right: 8%;
}

.first_btn a::after {
  background-image: url(../images/beginner-icon.webp);
  width: calc(var(--s-val) * 3);
  height: calc(var(--s-val) * 3);
  left: 6%;
}

.first_btn a span {
  font-size: calc(var(--s-val) * 1.2);
}

/*===ranking===*/

.ranking_area {
  padding: 10rem 0 10rem;
  background-image: url(../images/ranking-bg.webp);
  background-size: cover;
}

.ranking_title {
  text-align: center;
  font-size: calc(var(--s-val) * 3);
  font-family: var(--font-Serif);
  margin-bottom: 4rem;
}

.ranking_main-photo {
  width: 80%;
  margin: 0 auto 8rem;
}

.ranking_title span {
  font-size: calc(var(--s-val) * 2.6);
}

.ranking_detail p {
  font-size: calc(var(--s-val) * 2.2);
  text-align: center;
  font-family: var(--font-Serif);
  margin-bottom: 2rem;
}

.ranking_medal {
  width: 80%;
  margin: 0 auto;
}

/*===point01===*/
.point01_area {
  padding: 10rem 0 5rem;
}

.point01_top-photo {
  margin-bottom: 2rem;
}

.point01_title p {
  font-size: calc(var(--s-val) * 3);
  font-family: var(--font-Serif);
  text-align: center;
  margin-top: calc(var(--s-val) * 1);
}

.point01_title p .text_deco {
  position: relative;
}

.point01_title p .text_deco::before {
  content: "“";
  left: -2rem;
}

.point01_title p .text_deco::after {
  content: "”";
}

.point01_title p .text_annotation {
  font-size: calc(var(--s-val) * 1.2);
  position: absolute;
  border: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-Sans);
}

.point_inner-title {
  text-align: center;
  font-family: var(--font-Serif);
  font-size: calc(var(--s-val) * 2.6);
  color: #9b8465;
  margin-bottom: 3rem;
}

.point_inner-title span {
  font-size: calc(var(--s-val) * 3.5);
}

.asterisk {
  font-size: 0.4em;
  vertical-align: super;
}

.point01_title {
  line-height: 1.4;
  width: 90%;
  margin: 0 auto 10rem;
}

.text_deco {
  position: relative;
  margin-bottom: 2rem;
}

.text_deco::before {
  content: "";
  left: -1rem;
}

.text_deco::after {
  content: "";
  right: -1rem;
}

.point01_inner-photo {
  width: 80%;
  margin: 0 auto 2rem;
  padding-right: 3rem;
}

.point01_inner-detail {
  width: 70%;
  margin: 0 auto 4rem;
  font-size: calc(var(--s-val) * 1.4);
  line-height: 1.5;
}

.point01_inner-effect {
  text-align: center;
  font-size: calc(var(--s-val) * 3);
  font-family: var(--font-Serif);
  margin-bottom: 9rem;
}

.point01_inner-effect p span {
  background-color: rgba(203, 230, 220, 0.75);
  padding: 0 5px;
}

.point01_inner {
  margin: 0 auto 1rem;
}

.point01_inner-maintitle {
  text-align: center;
  font-size: calc(var(--s-val) * 2);
  font-family: var(--font-Serif);
  background-color: rgba(205, 182, 144, 0.25);
  padding: 2rem 0;
  width: 90%;
  margin: 0 auto 4rem;
}

.point01_inner-maintitle span {
  font-size: calc(var(--s-val) * 2.8);
  display: block;
}

.point01_inner-title dt {
  text-align: center;
  font-size: calc(var(--s-val) * 4);
  color: #81c4b1;
  font-family: var(--font-Serif);
  margin-bottom: 1rem;
}

.point01_inner-title dd {
  text-align: center;
  font-size: calc(var(--s-val) * 1.8);
  font-family: var(--font-Serif);
}

.point01_inner-title .asterisk {
  position: relative;
  top: -1rem;
  font-size: 0.3em;
}

dl.point01_inner-title {
  width: 80%;
  margin: 0 auto 3rem;
}

.point01_inner-list {
  display: flex;
  justify-content: center;
  width: 80%;
  margin: 0 auto 1rem;
  gap: calc(var(--s-val) * 3);
  text-align: center;
  position: relative;
}

.point01_inner-list::before {
  content: "";
  position: absolute;
  background-image: url(../images/cross.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--s-val) * 7);
  height: calc(var(--s-val) * 7);
}

.point01_inner-list-title p:first-child {
  font-size: calc(var(--s-val) * 2.6);
  font-family: var(--font-Serif);
  color: #9b8465;
  margin-bottom: 1rem;
}

.point01_inner-list-title p:last-child {
  font-size: calc(var(--s-val) * 1.6);
  margin-bottom: 1rem;
}

.point01_inner-list-left {
  text-align: center;
}

.point01_inner-list-photo {
  width: 58%;
  margin: 0 auto 2rem;
  font-family: var(--font-Serif);
}

.point01_inner-list-detail {
  font-size: calc(var(--s-val) * 1.6);
}

.point01_inner-annotation {
  text-align: right;
  font-size: calc(var(--s-val) * 1.2);
  line-height: 2;
  width: 90%;
}

dl.point01_inner-results {
  margin-bottom: 7rem;
  font-family: var(--font-Serif);
}

.point01_inner-maintitle.point01_inner-maintitle02 {
  margin-bottom: 9rem;
}

.point01_inner-results dt {
  color: var(--color-blue);
  font-size: calc(var(--s-val) * 4);
  text-align: center;
}

.point01_inner-results .fontsize-94,
.point01_inner-results .fontsize-72 {
  font-family: var(--font-jost);
}

.point01_inner-results .asterisk {
  position: relative;
  top: -2rem;
}

.point01_inner-results dd {
  font-size: calc(var(--s-val) * 3);
  text-align: center;
}

.point01_inner-results dd:last-child {
  font-size: calc(var(--s-val) * 1.2);
  text-align: right;
  margin-right: 17%;
  font-family: var(--font-Sans);
}

.point01_inner-content {
  position: relative;
}

.point01_inner-content::before {
  content: "";
  position: absolute;
  background-image: url(../images/point02-support-closs.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 6);
  height: calc(var(--s-val) * 6);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.point01_inner-item {
  display: flex;
}

.point01_inner-item-photo,
.point01_inner-item-title {
  width: 50%;
}

.point01_inner-item-title {
  display: flex;
  align-items: center;
  position: relative;
}

.point01_inner-item-title dt {
  position: absolute;
  font-size: calc(var(--s-val) * 3);
  color: var(--color-blue);
  font-family: var(--font-jost);
  white-space: nowrap;
  line-height: 0.8;
  opacity: 0.4;
  font-weight: 400;
}

.point01_inner-item-title dt span {
  font-size: calc(var(--s-val) * 5);
}

.point01_inner-item-title dd {
  font-size: calc(var(--s-val) * 2);
  font-family: var(--font-Serif);
  color: #9b8465;
}

.point01_inner-treatment-title dd {
  text-align: right;
}

.point01_inner-item-title dd span {
  font-size: calc(var(--s-val) * 2);
  color: #333333;
  display: block;
  margin-top: 5%;
}

.point01_inner-shampoo-title dt {
  top: -1rem;
  left: -2rem;
}

.point01_inner-shampoo-title dd {
  padding-left: 2rem;
  margin-bottom: 8rem;
  line-height: 1.5;
}

.point01_inner-treatment-title dt {
  bottom: 0;
  top: auto;
  left: 5rem;
}

.point01_inner-item-photo.point01_inner-treatment-photo {
  margin-top: -10rem;
}

.point01_inner-treatment-title dd {
  margin: 0 0 0 auto;
  padding-right: 2rem;
  margin-bottom: 2rem;
  line-height: 1.5;
}

.point01_inner.point01_inner03 {
  margin-bottom: 6rem;
}

.point_inner-step .point01_inner-title {
  color: #333333;
  font-size: calc(var(--s-val) * 3);
  text-align: center;
  font-family: var(--font-Serif);
  margin-bottom: 4rem;
}

.point01_list .accordion-height {
  flex-wrap: nowrap;
  display: flex;
  font-family: var(--font-Serif);
  flex-direction: row;
}

.point_inner-step {
  width: 90%;
  margin: 0 auto;
}

.point01_step-left-text,
.point01_step-right-text {
  text-align: center;
  margin-bottom: 3rem;
  font-size: calc(var(--s-val) * 2);
  line-height: 1.5;
}

.point01_step-annotation {
  text-align: right;
  font-size: calc(var(--s-val) * 1.2);
  margin-right: 3.3rem;
  font-family: var(--font-Sans);
}

.point01_accordion {
  margin-bottom: 4rem;
  line-height: 1.8;
  border: 2px solid rgba(205, 182, 144, 0.5);
}

.border-line {
  background: linear-gradient(transparent 50%, #faf5dc 100%);
}

.point01_effect {
  text-align: center;
  font-size: calc(var(--s-val) * 2.2);
}

.point01_effect .point01_effect-font {
  font-size: calc(var(--s-val) * 3.6);
  color: #9b8465;
  font-family: var(--font-Serif);
}

/*===point02===*/

.point02_top-photo {
  margin-bottom: 4rem;
}

.point02_title {
  font-size: calc(var(--s-val) * 3);
  text-align: center;
  font-family: var(--font-Serif);
  width: 90%;
  margin: 0 auto 4rem;
}

.point02_design-01 {
  width: 90%;
}

.point02_design-01 span,
.point02_design-02 span {
  font-family: var(--font-Serif);
}

.point02_design-01 .fontsize-34,
.point02_design-02 .fontsize-34 {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-Serif);
}

.point02_design {
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto 5rem;
}

.point02_design-title {
  width: 80%;
  margin: 0 auto 2rem;
}

.point02_design-detail {
  font-size: calc(var(--s-val) * 3.7);
}

.point02_design-effect {
  font-size: calc(var(--s-val) * 5);
}

.point02_design-photo-box {
  display: flex;
  gap: calc(var(--s-val) * 2);
  margin-bottom: 6rem;
}

.point02_design-photo,
.point02_design-component {
  width: 50%;
}

.point02_design-component {
  display: flex;
  align-items: center;
  text-align: center;
  font-size: calc(var(--s-val) * 1.6);
  line-height: 2;
  position: relative;
}

.point02_design-component dd {
  font-size: calc(var(--s-val) * 1);
  position: absolute;
  bottom: 0;
  right: 2rem;
}

.point02_design-Blister {
  width: 90%;
  margin: 0 auto 4rem;
}

.point02_accordion-text {
  font-size: calc(var(--s-val) * 1.6);
}

.point02_accordion-text span {
  margin-bottom: 2.5rem;
  display: block;
}

.point02_commitment {
  border: 2px solid rgba(205, 182, 144, 0.5);
  width: 90%;
  margin: 0 auto 10rem;
}

.point02_commitment .accordion-height {
  padding: 2rem 0;
  line-height: 1.8;
}

.point02_commitment .point02_list {
  background-image: url(../images/Blister.webp);
  background-repeat: no-repeat;
  background-size: 28%;
  background-position: right 2rem top 17rem;
}

.point02_care-title {
  font-size: calc(var(--s-val) * 2.5);
  text-align: center;
  color: var(--color-blue);
  font-family: var(--font-Serif);
  width: 100%;
  margin: 0 auto 5rem;
}

.point02_care-title span {
  font-size: calc(var(--s-val) * 3.3);
}

.point02_care-content {
  display: flex;
  align-items: center;
}

.point02_care-content-photo,
.point02_care-content-text {
  width: 50%;
}

.point02_care-content-photo video {
  width: 100%;
  height: auto;
  display: block;
}

.point02_care-content-text {
  font-size: calc(var(--s-val) * 1.8);
  padding: 0 3rem;
}

.point02_care-content01 {
  margin-bottom: 2rem;
}

.point02_care {
  width: 100%;
  background-image: url(../images/flower02.webp);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right 0 top 0;
  padding: 4rem 0;
  margin: 0 0 8rem auto;
}

.point02_care-box {
  width: 60%;
  text-align: center;
  padding: 0 3rem;
}

.point02_care-box p:first-child {
  font-size: calc(var(--s-val) * 1.6);
  margin-bottom: 2rem;
}

.point02_care-box p:last-child {
  font-size: calc(var(--s-val) * 1.8);
  color: var(--color-blue);
  font-weight: bold;
  white-space: nowrap;
}

/*point03*/

.point03_title {
  text-align: center;
  font-size: calc(var(--s-val) * 3);
  font-family: var(--font-Serif);
  margin-bottom: 1rem;
}

.point03_top-photo {
  margin-bottom: 2rem;
}

.point03_title-detail {
  text-align: center;
  font-size: calc(var(--s-val) * 2);
  margin-bottom: 7rem;
}

.point03_design-title {
  text-align: center;
  font-size: calc(var(--s-val) * 3);
  color: var(--color-blue);
  font-family: var(--font-Serif);
  margin-bottom: 3rem;
}

.point03_design-detail {
  text-align: center;
  font-size: calc(var(--s-val) * 2.2);
  font-family: var(--font-Serif);
  line-height: 1.8;
}

.point03_design-detail span {
  font-size: calc(var(--s-val) * 2.6);
  color: #9b8465;
}

.point03_design {
  margin-bottom: 5rem;
}

.point03_design-photo {
  width: 70%;
  margin: 0 auto 10rem;
}

.point03_effect-title {
  font-size: calc(var(--s-val) * 3.2);
  text-align: center;
  font-family: var(--font-Serif);
  color: #81c4b1;
}

.point03_design-component-wrapper {
  width: 100%;
  position: relative;
  margin-bottom: 5rem;
}

.point03_design-wrapper {
  margin-bottom: 6rem;
}

.point03_design-text {
  font-size: calc(var(--s-val) * 2.8);
}

.point03_design-component {
  width: 60%;
  margin: 0 0 0 auto;
  padding: 4rem 0;
}

.point03_design-component::before {
  content: "";
  width: 45%;
  height: 100%;
  position: absolute;
  background-image: url(../images/bubbles.webp);
  background-repeat: no-repeat;
  background-size: contain;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-position-y: bottom;
}

.point03_design-component dt {
  font-size: calc(var(--s-val) * 3.6);
  text-align: center;
  font-family: var(--font-Serif);
  margin: 0 auto 1rem;
  width: 85%;
}

.point03_design-component dt .kerning {
  font-size: calc(var(--s-val) * 3.6);
  color: #333333;
}

.point03_design-component dt span {
  font-size: calc(var(--s-val) * 2);
  color: #9b8465;
}

.point03_design-component dd {
  font-size: calc(var(--s-val) * 1.6);
  width: 85%;
  margin: 0 auto;
}

.point03_design-text {
  font-size: calc(var(--s-val) * 2.5);
  font-family: var(--font-Serif);
  text-align: center;
}

.point03_design-text span {
  display: block;
  color: #9b8465;
  font-size: calc(var(--s-val) * 3);
}

.point03_design-photo-box {
  display: flex;
  width: 80%;
  margin: 0 auto 10rem;
  gap: calc(var(--s-val) * 3);
}

.point03_design-content01,
.point03_design-content02 {
  position: relative;
  font-size: calc(var(--s-val) * 2.5);
}

.point03_design-content01 p,
.point03_design-content02 p {
  position: absolute;
  aspect-ratio: 1 / 1;
  width: calc(var(--s-val) * 15);
  height: calc(var(--s-val) * 15);
  background-color: rgba(203, 230, 220, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-Serif);
}

.point03_design-content02 {
  padding-top: 12rem;
}

.point03_design-content01 p {
  bottom: 0;
  left: -3rem;
}

.point03_design-content02 p {
  top: 0;
  right: -3rem;
}

.point03_detail-title {
  text-align: center;
  font-family: var(--font-Serif);
  font-size: calc(var(--s-val) * 3);
  color: var(--color-blue);
  margin-bottom: 4rem;
}

.point03_detail-photo {
  width: 80%;
  margin: 0 auto 1rem;
}

.point03_detail-box {
  margin-bottom: 10rem;
}

.point03_detail-annotation {
  text-align: right;
  font-size: calc(var(--s-val) * 1.2);
  width: 94%;
}

.point03_detail-content-wrapper {
  background-color: rgba(205, 182, 144, 0.15);
  padding: 5rem 0 7rem;
  margin-bottom: 8rem;
}

.point03_detail-content-title {
  text-align: center;
  font-size: calc(var(--s-val) * 2);
  padding: 0 0 2rem;
}

.point03_detail-content-title .font-style {
  font-size: calc(var(--s-val) * 2.5);
  font-weight: bold;
}

.point03_detail-sab-title {
  font-size: calc(var(--s-val) * 1.6);
  text-align: center;
  background-color: rgba(205, 182, 144, 0.5);
  width: 90%;
  margin: 0 auto 1rem;
  padding: 2.5rem 0;
}

.point03_detail-sab-title span {
  font-size: calc(var(--s-val) * 2.5);
  display: block;
}

.point03_detail-content-annotation {
  font-size: calc(var(--s-val) * 1);
  text-align: center;
  margin-bottom: 2rem;
}

.point03_detail-content-inner-title {
  background-color: #fff;
  color: #9b8465;
  margin: 0 auto 4rem;
  text-align: center;

  font-size: calc(var(--s-val) * 1.8);
}

.point03_detail-content-inner {
  background-color: #fff;
  width: 90%;
  margin: 0 auto;
  padding: 3rem 0 4rem;
}

.point03_detail-content-inner-title p {
  border-bottom: 2px solid rgba(205, 182, 144, 0.5);
  display: inline;
}

.point03_list-container {
  width: 95%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--s-val) * 0.5) calc(var(--s-val) * 0.5);
  justify-content: center;
}

.point03_list-container .fontsize-11 {
  display: block;
  text-align: left;
  font-weight: normal;
}

.point03_list-container .list_content {
  height: calc(var(--s-val) * 14);
  font-weight: bold;
}

.point03_item-wrapper {
  width: 90%;
  margin: 0 auto 5rem;
}

.point03_item-title {
  text-align: center;
  font-weight: bold;
  font-size: calc(var(--s-val) * 1.5);
  margin-bottom: 3rem;
}

.point03_item-title span.item-name {
  font-size: 1.4em;
}

.point03_item-list {
  display: flex;
  justify-content: center;
  gap: calc(var(--s-val) * 1);
  margin-bottom: 3rem;
  font-weight: bold;
}

.point03_item-list .fontsize-36 {
  line-height: 1;
}

.point03_item-list li {
  background-color: #cbe6dc;
  font-size: calc(var(--s-val) * 1.5);
  display: flex;
  align-items: flex-end;
  padding: 5px 3rem;
  line-height: 1.2;
}

.point03_item-list li:last-child {
  align-items: center;
}

.point03_item-detail {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 3rem;
  gap: calc(var(--s-val) * 3);
  align-items: flex-end;
}

.point03_item-text {
  width: 50%;
  text-align: center;
}

.point03_item-photo {
  width: 55%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 3rem;
}

.point03_item-photo img {
  width: 70%;
}

.point03_item-price {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 4rem;
}

.point03_item-price img {
  width: 80%;
  display: flex;
}

.point03_item-price span {
  font-size: calc(var(--s-val) * 3.1);
}

.point03_item-wrapper a {
  font-size: calc(var(--s-val) * 2.6);
  background-color: #000;
  color: #fff;
  display: block;
  width: 90%;
  text-align: center;
  margin: 0 auto;
  padding: 1rem 0;
  border-radius: 10px;
}

.point03_item-wrapper .link-btn {
  margin-bottom: 10rem;
}

.btn_area.btn_area03 {
  width: 100%;
}

/*review*/

.review_area {
  background-color: rgba(205, 182, 144, 0.15);
  padding-bottom: 5rem;
  margin-bottom: 6rem;
}

.review_top-photo {
  margin-bottom: 2rem;
}

.review_top-annotation {
  font-size: calc(var(--s-val) * 1.2);
  width: 90%;
  margin: 0 auto 4rem;
  line-height: 2;
}

.review_list {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-val) * 4);
}

.review_list dt {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 7rem 1.5rem 2rem;
  text-align: left;
  font-size: calc(var(--s-val) * 1.8);
}

.review_list dt span {
  width: 30%;
  display: flex;
  align-items: center;
}

.review_area .accordion_icon {
  width: auto;
  right: 2rem;
}

.review_list dd {
  background-color: #fff;
}

.review_list dd p {
  padding: 2rem 3rem;
  font-size: calc(var(--s-val) * 1.4);
  line-height: 1.8;
}

.review_list .accordion_icon::before,
.review_list .accordion_icon::after {
  left: auto;
  right: 0;
  top: 50%;
}

/*===howtouse-area===*/

.howtouse-area {
  margin-bottom: 5rem;
}

.howtousee-title {
  font-size: calc(var(--s-val) * 3);
  text-align: center;
  font-family: var(--font-Serif);
  margin-bottom: 4rem;
}

.howtouse_content {
  display: flex;
  margin-bottom: 4rem;
  align-items: center;
  align-items: flex-start;
}

.howtouse_content.howtouse_content02 {
  margin-bottom: 1rem;
}

.howtouse_content.howtouse_content04 {
  margin-bottom: 5rem;
}

.howtouse_content-photo {
  width: 45%;
}

.howtouse_content-text {
  width: 55%;
  padding: 0 2rem;
  letter-spacing: -1px;
}

.howtouse_content-text dt:nth-child(2) {
  font-size: calc(var(--s-val) * 1.8);
  font-weight: bold;
  margin-bottom: 2rem;
}

.howtouse_content-text dt span {
  border-bottom: 2px solid;
}

.howtouse_content-text dt:first-child {
  font-size: calc(var(--s-val) * 4);
  font-family: var(--font-jost);
  line-height: 1;
  margin-bottom: 1rem;
  color: #cbe6dc;
  font-weight: 400;
}

.howtouse_point-banner {
  width: 76%;
  margin: 0 auto;
}

.howtouse_content-text dd {
  font-size: calc(var(--s-val) * 1.4);
}

.howtouse_text {
  text-align: center;
  font-size: calc(var(--s-val) * 1.4);
}

/*===step===*/

.step_area {
  margin-bottom: 10rem;
}

.step_main {
  background-image: url(../images/step-bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom 0 left 50%;
  padding: 6rem 2rem 11rem;
  margin-bottom: 7rem;
}

.step_main-title {
  font-family: var(--font-Serif);
  line-height: 1;
  text-align: center;
}

.step_main-title p {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin-bottom: 6rem;
}

.step_main-title .border-style {
  border-top: 2px solid;
  border-bottom: 2px solid;
  font-size: calc(var(--s-val) * 2);
  padding: 1.5rem 0;
}

.step_main-title span {
  font-size: calc(var(--s-val) * 3);
}

.step_main-title .font-no {
  font-size: calc(var(--s-val) * 5.5);
  line-height: 0;
}

.step_main dl {
  width: 53%;
  margin: 0 0 0 auto;
  color: #fff;
}

.step_main dt {
  text-align: center;
  font-size: calc(var(--s-val) * 2.5);
  font-family: var(--font-Serif);
  margin-bottom: 2rem;
}

.step_main dd {
  font-size: calc(var(--s-val) * 1.2);
  line-height: 1.8;
}

.step_list-photo {
  width: 85%;
  margin: 0 auto 5rem;
}

.step_item-wrapper {
  display: flex;
  width: 90%;
  margin: 0 auto -8rem;
  justify-content: center;
}

.step_item-left {
  width: 50%;
}

.step_item-right {
  width: 45%;
  margin-top: 1rem;
}

.step_item-name {
  font-size: calc(var(--s-val) * 2.5);
  font-family: var(--font-Serif);
  margin-bottom: 3rem;
}

.step_item-name span {
  letter-spacing: -4px;
}

.step_item-contents {
  font-size: calc(var(--s-val) * 1.4);
}

.step_item-contents li {
  line-height: 1.8;
}

.step_item-contents li:last-child {
  font-size: calc(var(--s-val) * 1.6);
}

.step-price-box {
  display: flex;
  align-items: center;
  gap: calc(var(--s-val) * 2);
  width: 90%;
  margin: 0 auto 6rem;
  justify-content: center;
}

.step_item-price {
  font-size: calc(var(--s-val) * 1.6);
  font-weight: 600;
}

.step_item-free {
  font-size: calc(var(--s-val) * 1.4);
  color: #81c4b1;
  border: 1px solid;
  padding: 0 3rem;
  font-weight: 600;
  margin-top: 10px;
}

.step_area a {
  font-size: calc(var(--s-val) * 2.6);
  text-align: center;
  background-color: #000;
  color: #fff;
  display: block;
  width: 90%;
  margin: 0 auto;
  padding: 1rem 0;
}

/*===service===*/

div#FIRST {
  padding-top: 10rem;
}

.service_area {
  position: relative;
  background-color: rgba(205, 182, 144, 0.25);
  padding: 12rem 0 8rem;
}

.service_area .accordion_icon {
  right: 4rem;
}

.service_conditions {
  position: absolute;
  top: -8rem;
  left: 50%;
  transform: translateX(-50%);
  background-color: #cbe6dc;
  text-align: center;
  font-size: calc(var(--s-val) * 1.8);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 28%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 auto;
}

.service_conditions span {
  font-size: calc(var(--s-val) * 2.2);
  display: block;
  margin-bottom: 0.5rem;
}

.service_conditions img {
  width: 30% !important;
}

.service_title {
  text-align: center;
  font-family: var(--font-Serif);
  line-height: 1.8;
  margin-bottom: 3rem;
}

.service_title p {
  font-size: calc(var(--s-val) * 1.8);
}

.service_title span {
  font-size: calc(var(--s-val) * 4);
  display: block;
}

.service_content-text {
  width: 90%;
  margin: 0 auto 6rem;
  text-align: center;
}

.service_content {
  background-color: #fff;
  padding: 3rem 0;
  font-weight: bold;
}

.service_content p:first-child {
  font-size: calc(var(--s-val) * 1.8);
  line-height: 1.8;
}

.service_content p:nth-child(2) {
  font-size: calc(var(--s-val) * 2);
  background: linear-gradient(transparent 70%, #fcecb9 50%);
  display: inline-block;
  margin-bottom: 3rem;
}

.service_content p:nth-child(2) span {
  font-size: calc(var(--s-val) * 4);
  color: #9b8465;
}

.service_content p:last-child {
  font-size: calc(var(--s-val) * 1.4);
}

.service_content-period {
  background-color: #cbe6dc;
}

.service_content-period {
  font-size: calc(var(--s-val) * 1.8);
  font-weight: bold;
  padding: 2rem 0;
}

.service_detail {
  width: 90%;
  margin: 0 auto;
  background-color: #fff;
}

.service_detail-title {
  font-size: calc(var(--s-val) * 2);
  font-weight: bold;
  background-color: #cdb690;
}

.service_detail-content {
  margin: 0 auto;
}

.service_detail-content .accordion-height {
  width: 90%;
  padding: 4rem 0 6rem;
}

.service_detail-content dt {
  text-align: center;
  font-size: calc(var(--s-val) * 1.6);
  color: #9b8465;
  border: 2px solid;
  padding: 1rem 0;
  margin-bottom: 2rem;
}

.service_detail-content dd {
  margin-bottom: 1rem;
}

.service_detail-content dd span {
  font-size: calc(var(--s-val) * 1.4);
  display: block;
}

.service_detail-content dd span.text-indent {
  font-size: calc(var(--s-val) * 1.6);
  display: block;
  text-indent: -1em;
  padding-left: 1em;
}

.service_detail-content .fontsize-11 {
  line-height: 2;
}

.service_area .contact_btn {
  background: #cdb690;
  color: #fff !important;
  font-size: calc(var(--s-val) * 1.6);
  text-align: center;
  padding: 1.5rem 0;
  border-radius: 5px;
  position: relative;
  margin-bottom: 2rem;
}

.service_area .contact_btn::before {
  content: "";
  background-image: url(../images/btn-arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 1.5);
  position: absolute;
  right: 5rem;
  top: 50%;
  transform: translateY(-50%);
}

.contact_box {
  background-color: rgba(205, 182, 144, 0.25);
  text-align: center;
  padding: 2rem 0;
  width: 90%;
  margin: 0 auto;
}

.contact_box-title {
  font-size: calc(var(--s-val) * 2);
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.contact_box-tel {
  font-size: calc(var(--s-val) * 2.5);
  margin-bottom: 0.5rem;
}

.contact_box-tel p {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.contact_box-tel p::before {
  content: "";
  background-image: url(../images/tel-icon.webp);
  background-repeat: no-repeat;
  background-size: contain;
  width: calc(var(--s-val) * 4);
  height: calc(var(--s-val) * 3.5);
  display: inline-block;
}

.contact_box-time {
  font-size: calc(var(--s-val) * 1.2);
}

/*===QA===*/

.qa_area {
  margin-bottom: 10rem;
  padding: 8rem 0 10rem;
  background-color: rgba(205, 182, 144, 0.1);
}

.qa_title {
  font-size: calc(var(--s-val) * 4);
  text-align: center;
  font-family: var(--font-jost);
  margin-bottom: 4rem;
}

.qa_area .reading {
  font-size: calc(var(--s-val) * 2);
  font-family: var(--font-Sans);
  display: block;
  line-height: 1;
}

.qa_list-container {
  display: flex;
  flex-direction: column;
  gap: calc(var(--s-val) * 2);
}

.qa_area dl {
  width: 90%;
  margin: 0 auto;
}

.qa_area dt {
  padding: 1.5rem 4rem 1.5rem 2rem;
  display: flex;
  font-size: calc(var(--s-val) * 1.5);
  min-height: calc(var(--s-val) * 9);
  align-items: center;
}

.qa_area dt,
.qa_area dd {
  text-align: left;
}

.qa_area dd {
  background-color: #fff;
  font-size: calc(var(--s-val) * 1.8);
}

.qa_area span {
  padding-right: 1rem;
  font-size: calc(var(--s-val) * 2.5);
  font-family: var(--font-jost);
  line-height: 1;
  right: 2rem;
}

.qa_area .accordion-height {
  flex-wrap: nowrap;
  flex-direction: row;
  text-indent: 0em;
  gap: 0;
  padding: 2rem 2rem;
  width: 100%;
  font-size: calc(var(--s-val) * 1.4);
}

.qa_area span.answer {
  color: #cdb690;
}

/*詰め替え*/

.item_area.refill-container .item_photo {
  width: 100%;
  padding: 0;
}

.btn_area.btn_area05 {
  margin-bottom: 3rem;
}

.btn_area.btn_area06 {
  margin-bottom: 10rem;
}

.btn_area06 .link-btn span {
  right: 20%;
}

/* --- 切り替え表示用 --- */

.single_area {
  margin-bottom: 11rem;
}

.single_title {
  text-align: center;
  font-size: calc(var(--s-val) * 2.5);
  margin-bottom: 4rem;
  font-weight: bold;
}

.single_content {
  display: none;
}
.single_content.active {
  display: block;
}

.single_toggle-btn {
  display: flex;
  text-align: center;
  width: 90%;
  margin: 0 auto;
  gap: calc(var(--s-val) * 1);
}

.single_content {
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px solid rgba(205, 182, 144, 0.6);
  border-left: 1px solid rgba(205, 182, 144, 0.6);
  border-right: 1px solid rgba(205, 182, 144, 0.6);
  padding: 4rem 2rem;
}

.single_shampoo,
.single_treatment {
  width: 90%;
  margin: 0 auto 3rem;
}

.single_content .fontsize-44 {
  line-height: 1;
}

.single_toggle-btn p {
  cursor: pointer;
  display: inline-block;
  padding: 2rem 1.5rem;
  border-radius: 10px 10px 0 0;
  background: rgba(205, 182, 144, 0.25);
  color: #333;
  font-weight: 400;
  transition: background 0.2s, color 0.2s;
  font-weight: bold;
  width: 100%;
  position: relative;
  font-size: calc(var(--s-val) * 1.6);
}

.single_toggle-btn .bottle-btn::before,
.single_toggle-btn .refill-btn::before {
  content: "";
  background-repeat: no-repeat;
  background-position: bottom;
  position: absolute;
  right: 0;
  bottom: 0;
  width: calc(var(--s-val) * 10);
  height: calc(var(--s-val) * 10);
}

.single_toggle-btn .bottle-btn::before {
  background-image: url(../images/bottle-last.webp);
  background-size: 40%;
}

.single_toggle-btn .refill-btn::before {
  background-image: url(../images/refill.webp);
  background-size: 60%;
}

.single_toggle-btn .bottle-btn {
  padding: 2rem 4.5rem 2rem 1.5rem;
}

.single_toggle-btn .refill-btn {
  padding: 2rem 8rem 2rem 1.5rem;
}

.single_toggle-btn p.active {
  background: rgba(205, 182, 144, 0.6);
}

.single_shampoo-text,
.single_treatment-text {
  text-align: center;
  font-size: calc(var(--s-val) * 2);
  font-weight: bold;
  margin-bottom: 2rem;
}

.single_shampoo-btn,
.single_treatment-btn {
  display: flex;
  justify-content: center;
  text-align: center;
  gap: calc(var(--s-val) * 1);
}

.single_shampoo {
  margin-bottom: 3rem;
}

.single_treatment {
  margin-bottom: 4rem;
}

.single_shampoo-btn a,
.single_treatment-btn a {
  color: #333333;
  width: 100%;
  padding: 1.5rem 0;
  font-weight: bold;
  border-radius: 5px;
  font-size: calc(var(--s-val) * 1.8);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s-val) * 2);
}

.single_shampoo-btn a span,
.single_treatment-btn a span {
  background-repeat: no-repeat;
  background-image: url(../images/btn-arrow-black.webp);
  background-size: contain;
  width: calc(var(--s-val) * 2);
  height: calc(var(--s-val) * 2);
  display: flex;
  align-items: center;
}

.single_shampoo-btn a:first-child,
.single_treatment-btn a:first-child {
  background-color: #faf0f5;
}

.single_shampoo-btn a:last-child,
.single_treatment-btn a:last-child {
  background-color: #faf5dc;
}

.single_price-wrapper {
  margin-bottom: 2rem;
}

.single_price-box {
  display: flex;
  align-items: center;
  width: 90%;
  margin: 0 auto;
  font-weight: bold;
  margin-bottom: 1rem;
  align-items: flex-end;
}

.single_price,
.single_price-option {
  width: 50%;
  text-align: center;
}

.single_price p:first-child {
  font-size: calc(var(--s-val) * 1.6);
}

.single_price p:nth-child(2) {
  font-size: calc(var(--s-val) * 2.2);
}

.single_price-option {
  display: flex;
  align-items: stretch;
  color: #81c4b1;
  gap: calc(var(--s-val) * 1);
}

.single_price-option li,
.single_price-option p {
  width: 100%;
  border: 1px solid #81c4b1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--s-val) * 1.6);
  height: calc(var(--s-val) * 3.5);
  line-height: 1;
}

.single_price-option .fontsize-22 {
  margin-top: 1px;
}

.single_price-annotation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--s-val) * 1);
  font-size: calc(var(--s-val) * 1.2);
}

.single_price-annotation p:first-child {
  border: 1px solid;
  padding: 0 1rem;
  font-size: calc(var(--s-val) * 1);
}

.single_price-annotation .asterisk {
  font-size: 0.6em;
}

.single_price-annotation p:last-child {
  font-size: calc(var(--s-val) * 1);
}

.line_up {
  background-image: url(../images/line-up.webp);
  background-repeat: no-repeat;
  background-size: cover;
  color: #fff !important;
  font-family: var(--font-Serif);
  text-align: center;
  padding: 5rem 0;
}

.line_up a {
  color: #fff !important;
  font-family: var(--font-jost);
  font-size: calc(var(--s-val) * 2.5);
  font-weight: 300;
  position: relative;
}

.line_up a::before {
  content: "";
  width: calc(var(--s-val) * 1.5);
  height: calc(var(--s-val) * 1.5);
  position: absolute;
  right: 0;
  background-image: url(../images/btn-arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  top: 50%;
  transform: translateY(-50%);
  right: -3rem;
}

.line_ul-text {
  font-size: calc(var(--s-val) * 2);
  margin-bottom: 3rem;
}

@media screen and (max-width: 640px) {
  .fontsize-11 {
    font-size: calc(var(--s-val) * 1.5);
  }

  .accordion_btn {
    font-size: calc(var(--s-val) * 2.5);
  }

  .fontsize-36 {
    font-size: calc(var(--s-val) * 2.6);
  }

  .fontsize-26 {
    font-size: calc(var(--s-val) * 2.5);
  }

  .fontsize-18 {
    font-size: calc(var(--s-val) * 2);
  }

  .fontsize-28 {
    font-size: calc(var(--s-val) * 2.5);
  }

  .fontsize-30 {
    font-size: calc(var(--s-val) * 2.5);
  }

  .fontsize-31 {
    font-size: calc(var(--s-val) * 2.8);
  }

  .fontsize-72 {
    font-size: calc(var(--s-val) * 6);
  }

  .fontsize-94 {
    font-size: calc(var(--s-val) * 8);
  }

  .list_content {
    font-size: calc(var(--s-val) * 2.5);
  }

  .item_area {
    width: 100%;
  }

  .btn_area {
    width: 90%;
  }

  .benefits_area {
    width: 90%;
  }

  .btn_area .link-btn {
    font-size: calc(var(--s-val) * 3);
    padding: 1.5rem 0;
  }

  .btn_title {
    font-size: calc(var(--s-val) * 2.8);
  }

  span.content-box {
    display: inline-flex;
    align-items: center;
  }

  .top_link a {
    font-size: calc(var(--s-val) * 2);
  }

  .item_price-title dt {
    font-size: calc(var(--s-val) * 2);
  }

  .item_price-title dd:nth-child(2) {
    font-size: calc(var(--s-val) * 3);
  }

  .item_capacity p:nth-child(3) {
    font-size: calc(var(--s-val) * 1.5);
  }

  .list_content .fontsize-11 {
    font-size: calc(var(--s-val) * 1.2);
  }

  .benefits_area .list_content {
    min-height: calc(var(--s-val) * 15);
  }

  .kinds_area a {
    font-size: calc(var(--s-val) * 1.8);
    min-height: calc(var(--s-val) * 13);
  }

  .top_link {
    margin-bottom: 5rem;
  }

  .item_price-wrapper {
    margin: 0 auto;
    width: 90%;
  }

  .item_title {
    font-size: calc(var(--s-val) * 2.5);
    width: 90%;
  }

  .item_box {
    width: 80%;
  }

  .item_price {
    width: 95%;
  }

  .item_photo-title {
    width: 80%;
    font-size: calc(var(--s-val) * 2.2);
  }

  .item_price-title .font-price {
    font-size: calc(var(--s-val) * 5.5);
  }

  .item_price-title .font-small {
    font-size: calc(var(--s-val) * 2);
  }

  .item_capacity p:nth-child(2) {
    font-size: calc(var(--s-val) * 1.8);
  }

  .item_photo {
    width: 100%;
  }

  .item_price-benefits span {
    font-size: calc(var(--s-val) * 2);
  }

  .merchandise_title {
    font-size: calc(var(--s-val) * 2.5);
  }

  .merchandise_title .fontsize-36 {
    font-size: calc(var(--s-val) * 3.8);
  }

  .beauty_title p:first-child {
    font-size: calc(var(--s-val) * 2.5);
  }

  .beauty_title p:nth-child(2) {
    font-size: calc(var(--s-val) * 2.6);
  }

  .beauty_title .fontsize-44 {
    font-size: calc(var(--s-val) * 3.5);
  }

  .beauty_detail-text .accordion-height {
    font-size: calc(var(--s-val) * 2.2);
  }

  .beauty_detail .accordion-height p:last-child {
    font-size: calc(var(--s-val) * 1.5);
  }

  .beauty_title p:first-child {
    font-size: calc(var(--s-val) * 3);
  }

  .first_btn a {
    font-size: calc(var(--s-val) * 2.5);
  }

  .first_btn a span {
    font-size: calc(var(--s-val) * 1.8);
  }

  .first_btn a::after {
    width: calc(var(--s-val) * 5);
    height: calc(var(--s-val) * 5);
  }

  .first_btn a::before {
  }

  .first_btn {
    width: 90%;
  }

  .cause_title {
    width: 80%;
    font-size: calc(var(--s-val) * 3);
  }

  .cause_photo {
    width: 40%;
  }

  .cause_text p:first-child {
    font-size: calc(var(--s-val) * 2);
  }

  .cause_profile {
    padding: 2rem 2rem;
  }

  .cause_text p:last-child {
    width: 90%;
    font-size: calc(var(--s-val) * 3.5);
  }

  .cause_text p:last-child span {
    font-size: calc(var(--s-val) * 2.5);
  }

  .cause_detail-text {
    font-size: calc(var(--s-val) * 2);
  }

  .cause_detail-bottom {
    font-size: calc(var(--s-val) * 3);
  }

  .cause_area {
    padding: 5rem 0;
  }

  .ranking_area {
    padding: 10rem 0 5rem;
  }

  .ranking_title span {
    font-size: calc(var(--s-val) * 3.5);
  }

  .ranking_title {
    font-size: calc(var(--s-val) * 3.5);
  }

  .btn_text {
    font-size: calc(var(--s-val) * 1.1);
    text-align: right;
  }

  .item_annotation p {
    font-size: calc(var(--s-val) * 1.4);
    width: 95%;
  }

  .btn_area.btn_area06 {
    margin-bottom: 6rem;
  }

  .benefits_area {
    margin: 0 auto 5rem;
  }

  .beauty_photo {
    margin-top: -8%;
  }

  .beauty_title {
    margin-bottom: -6rem;
  }

  .beauty_features-title p::before,
  .beauty_features-title p::after {
    top: -1rem;
  }

  .beauty_top .fontsize-11 {
    width: 90%;
  }

  .benefits_area .accordion-height {
    width: 90%;
  }

  .beauty_detail .accordion_btn {
    width: 90%;
  }

  .beauty_detail .accordion_inner {
    width: 90%;
  }

  .beauty_features-photo {
    width: 100%;
    margin: 0 auto 2rem;
  }

  .beauty_bottom .beauty_title p:first-child {
    padding: 6rem 4%;
  }

  .beauty_features-title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .merchandise_title .fontsize-36 span {
    right: 5px;
  }

  .point_inner-step {
    width: 90%;
  }

  .point_inner-step .point01_inner-title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point_inner-title {
    font-size: calc(var(--s-val) * 3);
  }

  .point_inner-title span {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point01_area {
    padding: 8rem 0 5rem;
  }

  .point01_title p {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point01_inner-annotation {
    font-size: calc(var(--s-val) * 1.5);
  }

  .point01_inner-photo {
    width: 90%;
  }

  .point01_title p .text_annotation {
    font-size: calc(var(--s-val) * 1.4);
  }

  .point01_inner-detail {
    width: 80%;
    font-size: calc(var(--s-val) * 2.2);
  }

  .point01_inner-effect {
    font-size: calc(var(--s-val) * 3.5);
  }

  dl.point01_inner-title {
    width: 90%;
  }

  .point01_inner-list {
    width: 90%;
  }

  .point01_inner-shampoo-title dd {
    margin-bottom: 15rem;
    margin-top: 20%;
    padding-left: 2rem;
    font-size: calc(var(--s-val) * 3);
  }

  .point01_inner-item-title dd span {
    font-size: calc(var(--s-val) * 3);
    margin-top: 1rem;
  }

  .point01_inner-maintitle {
    width: 90%;
    font-size: calc(var(--s-val) * 3);
  }

  .point01_inner-maintitle span {
    font-size: calc(var(--s-val) * 4);
  }

  .point01_inner-treatment-title dt {
    left: 2rem;
  }

  .point01_inner-title dt {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point01_inner-title dd {
    font-size: calc(var(--s-val) * 2.5);
  }

  .point01_inner-list-title p:first-child {
    font-size: calc(var(--s-val) * 3);
  }

  .point01_inner-list-title p:last-child {
    font-size: calc(var(--s-val) * 2);
  }

  .point01_inner-list-detail {
    font-size: calc(var(--s-val) * 2);
  }

  .point01_inner-results dt {
    font-size: calc(var(--s-val) * 5);
  }

  .point01_inner-results dd {
    font-size: calc(var(--s-val) * 3.5);
  }

  .point01_inner-results dd:last-child {
    font-size: calc(var(--s-val) * 1.6);
  }

  .point01_inner-item-title dt {
    font-size: calc(var(--s-val) * 5);
  }

  .point01_inner-item-title dt span {
    font-size: calc(var(--s-val) * 7);
  }

  .point01_step-left-text,
  .point01_step-right-text {
    font-size: calc(var(--s-val) * 3);
  }

  .point01_effect .point01_effect-font {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point01_inner-treatment-title dd {
    padding-right: 1rem;
    margin-bottom: 0;
    margin-top: -10%;
  }

  .point01_inner-item-title dd {
    font-size: calc(var(--s-val) * 3);
    line-height: 1.5;
  }

  .point02_design-Blister {
    width: 100%;
  }

  .point02_design {
    width: 85%;
  }

  .point02_design-01 {
    width: 100%;
  }

  .point02_care {
    background-position: right 0 top 50%;
    padding: 8rem 0 8rem;
    margin: 0 0 5rem auto;
    background-size: 50%;
  }

  .point02_design-01,
  .point02_design-02 {
    font-size: calc(var(--s-val) * 2.5);
  }

  .point02_design-01 .fontsize-30 {
    font-size: calc(var(--s-val) * 2.5);
  }

  .point02_design-01 .fontsize-34,
  .point02_design-02 .fontsize-34 {
    font-size: calc(var(--s-val) * 3);
  }

  .point02_design-component {
    font-size: calc(var(--s-val) * 2);
  }

  .point02_accordion-text {
    font-size: calc(var(--s-val) * 2.4);
  }

  .point02_commitment {
    margin: 0 auto 6rem;
    width: 90%;
  }

  .point02_commitment .point02_list {
    background-size: 22%;
    background-position: right 6rem top 18rem;
  }

  .point02_care-title span {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point02_care-title {
    font-size: calc(var(--s-val) * 3.5);
    letter-spacing: -2px;
  }

  .point02_care-content-text {
    font-size: calc(var(--s-val) * 2.2);
    line-height: 1.8;
    padding: 0 2rem;
  }

  .point02_care-box p:first-child {
    font-size: calc(var(--s-val) * 2);
  }

  .point02_care-box p:last-child {
    font-size: calc(var(--s-val) * 2.2);
  }

  .point02_title {
    width: 100%;
    font-size: calc(var(--s-val) * 4.5);
  }

  .point03_detail-content-wrapper {
    padding: 5rem 0 5rem;
    margin-bottom: 5rem;
  }

  .point03_title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point03_title-detail {
    font-size: calc(var(--s-val) * 2.5);
  }

  .point03_design-title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point03_design-detail {
    font-size: calc(var(--s-val) * 3);
  }

  .point03_design-detail span {
    font-size: calc(var(--s-val) * 3.5);
  }

  .point03_design-photo {
    width: 70%;
    margin: 0 auto 15rem;
  }

  .point03_effect-title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point03_design-component dt {
    margin: 0 auto 2rem;
  }

  .point03_design-component dt,
  .point03_design-component dt .kerning {
    font-size: calc(var(--s-val) * 4.6);
  }

  .point03_design-component dt span {
    font-size: calc(var(--s-val) * 3);
  }

  .point03_design-component dd {
    font-size: calc(var(--s-val) * 2.2);
  }

  .point03_item-wrapper {
    width: 90%;
  }

  .point03_design-title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point03_design-text {
    font-size: calc(var(--s-val) * 3);
  }

  .point03_design-content01 p,
  .point03_design-content02 p {
    width: calc(var(--s-val) * 20);
    height: calc(var(--s-val) * 20);
  }

  .point03_detail-title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .point03_detail-content-title {
    font-size: calc(var(--s-val) * 2.5);
  }

  .point03_detail-content-title .font-style {
    font-size: calc(var(--s-val) * 3);
  }

  .point03_design-content02 p {
    top: -5rem;
  }

  .point03_design-content01 p {
    bottom: -6rem;
  }

  .point03_detail-photo {
    width: 90%;
  }

  .point03_detail-content-annotation {
    font-size: calc(var(--s-val) * 1.5);
  }

  .point03_item-detail {
    width: 90%;
  }

  .point03_design-component::before {
    background-position: top 50% left 0;
  }

  .point03_design-content02 {
    padding-top: 8rem;
  }

  .point03_detail-box {
    margin-bottom: 5rem;
  }

  .point03_design-component-wrapper {
    margin-bottom: 5rem;
  }

  .point03_list-container {
    width: 90%;
  }

  .point03_detail-sab-title {
    width: 90%;
    font-size: calc(var(--s-val) * 2.2);
  }

  .point03_detail-sab-title span {
    font-size: calc(var(--s-val) * 3.5);
  }

  .point03_detail-content-inner {
    width: 90%;
  }

  .point03_detail-content-inner-title {
    font-size: calc(var(--s-val) * 2.8);
  }

  .point03_item-title {
    font-size: calc(var(--s-val) * 2.2);
  }

  .point03_item-list li {
    padding: 1rem 3rem;
    justify-content: center;
    font-size: calc(var(--s-val) * 2.5);
  }
  .point03_item-list .fontsize-24 {
    font-size: calc(var(--s-val) * 2.4);
  }

  .point03_item-list .fontsize-36 {
    font-size: calc(var(--s-val) * 3.6);
  }

  .review_list dd p {
    font-size: calc(var(--s-val) * 2);
  }

  .point03_design-photo-box {
    gap: calc(var(--s-val) * 3);
    margin: 0 auto 10rem;
  }

  .point03_item-list {
    justify-content: center;
    margin: 0 auto 3rem;
  }
  .point03_item-detail {
    gap: calc(var(--s-val) * 3);
  }

  .point03_item-price {
    margin-left: 1rem;
  }

  .point03_item-photo {
    margin-left: 0rem;
  }

  .howtouse_point-banner {
    width: 90%;
  }

  .howtousee-title {
    margin-bottom: 4rem;
    font-size: calc(var(--s-val) * 4.5);
  }

  .howtouse_content-text {
    padding: 0 2rem 0 2rem;
  }

  .howtouse_content-text dt:nth-child(2) {
    border: none;
    font-size: calc(var(--s-val) * 2.5);
  }

  .howtouse_content-text dt:first-child {
    font-size: calc(var(--s-val) * 6);
  }

  .howtouse_content-text dd {
    font-size: calc(var(--s-val) * 1.8);
  }

  .howtouse_text {
    text-align: center;
    font-size: calc(var(--s-val) * 1.6);
  }

  .step_main dl {
    width: 60%;
  }

  .step-price-box {
    margin: 0 auto 3rem;
    gap: calc(var(--s-val) * 1);
    justify-content: flex-start;
  }

  .step_item-price {
    font-size: calc(var(--s-val) * 2.8);
  }

  .step_item-price .fontsize-40 {
    font-size: calc(var(--s-val) * 4);
    font-weight: bold;
  }

  .step_item-free {
    font-size: calc(var(--s-val) * 2.2);
  }

  .step_main dt {
    font-size: calc(var(--s-val) * 3.5);
  }

  .step_main dd {
    font-size: calc(var(--s-val) * 1.8);
  }

  .step_item-name {
    font-size: calc(var(--s-val) * 3.5);
  }

  .step_item-contents {
    font-size: calc(var(--s-val) * 2);
  }

  .step_list-photo {
    width: 85%;
  }

  .step_main-title .border-style {
    font-size: calc(var(--s-val) * 2.8);
  }

  .step_main-title span {
    font-size: calc(var(--s-val) * 3.5);
  }

  .step_main-title .font-no {
    font-size: calc(var(--s-val) * 5);
  }

  .step_item-wrapper {
    margin: 0 auto -15%;
    width: 90%;
  }

  .step_main {
    background-position: bottom 0 left 31%;
    padding: 3rem 4rem 8rem;
    margin-bottom: 5rem;
  }

  .step_main-title p {
    margin-bottom: 3rem;
  }

  .review_list {
    width: 90%;
  }

  .review_area {
    margin-bottom: 6rem;
  }

  .review_top-annotation {
    font-size: calc(var(--s-val) * 1.6);
  }

  .review_list dt {
    padding: 1.5rem 10% 1.5rem 2rem;
    font-size: calc(var(--s-val) * 2.3);
  }

  .solution_image {
    width: 90%;
    gap: calc(var(--s-val) * 4);
  }

  .solution_image dd {
    font-size: calc(var(--s-val) * 2.2);
  }

  .solution_content-title span::before,
  .solution_content-title span::after {
    top: -1rem;
  }

  .solution_content-title span::after {
    content: "”";
    right: -0.5rem;
  }

  .solution_bottom-text p:nth-child(1) {
    font-size: calc(var(--s-val) * 4);
  }

  .solution_bottom-text p:nth-child(2) {
    font-size: calc(var(--s-val) * 6);
  }

  .solution_bottom-text p:nth-child(3) {
    font-size: calc(var(--s-val) * 2.5);
  }

  .solution_title {
    font-size: calc(var(--s-val) * 6);
  }

  .solution_content-title {
    font-size: calc(var(--s-val) * 3.5);
  }

  .solution_list {
    font-size: calc(var(--s-val) * 3);
  }

  .solution-media {
    margin: 0 auto 3rem;
    width: 100% !important;
  }

  .solution_befor,
  .solution_after {
    width: 49%;
  }

  .solution_after span {
    bottom: -2rem;
  }

  .care_area {
    padding-bottom: 7rem;
    margin-bottom: 5rem;
  }

  .care_diagnosis-btn {
    padding: 5% 0rem 5% 21%;
    font-size: calc(var(--s-val) * 2.5);
  }

  .care_detail-content {
    width: 90%;
  }

  .care_detail-title {
    width: 90%;
    font-size: calc(var(--s-val) * 2.5);
  }

  .care_detail-title span {
    font-size: calc(var(--s-val) * 2.8);
  }

  .care_detail-inner p {
    font-size: calc(var(--s-val) * 2.5);
  }

  .care_diagnosis-text {
    left: -3rem;
    width: 32%;
    font-size: calc(var(--s-val) * 2);
  }

  .care_item-text dt {
    font-size: calc(var(--s-val) * 6);
  }

  .care_item-text dd:nth-child(2) {
    font-size: calc(var(--s-val) * 2.2);
  }

  .care_item-text dd:nth-child(3) {
    font-size: calc(var(--s-val) * 3);
  }

  .care_item-container {
    padding: 10rem 0;
  }

  .service_area {
    padding: 12rem 0 5rem;
  }

  .service_title span {
    font-size: calc(var(--s-val) * 5);
  }

  .service_title p {
    font-size: calc(var(--s-val) * 2.4);
  }

  .service_conditions {
    top: -10rem;
    font-size: calc(var(--s-val) * 2.2);
    width: 28%;
  }

  .service_content-period {
    font-size: calc(var(--s-val) * 2.5);
  }

  .service_detail-content dt {
    font-size: calc(var(--s-val) * 2.5);
  }

  .service_detail-content dd span.text-indent {
    font-size: calc(var(--s-val) * 2.2);
  }

  .service_detail-content dd span {
    font-size: calc(var(--s-val) * 2);
  }

  .service_area .contact_btn {
    font-size: calc(var(--s-val) * 2.6);
  }

  .accordion_inner .fontsize-11 {
    font-size: calc(var(--s-val) * 1.2);
  }

  .service_content p:first-child {
    font-size: calc(var(--s-val) * 2.5);
  }

  .service_content p:nth-child(2) {
    font-size: calc(var(--s-val) * 3);
  }

  .service_content p:last-child {
    font-size: calc(var(--s-val) * 1.8);
  }

  .service_content p:nth-child(2) span {
    font-size: calc(var(--s-val) * 5);
  }

  .service_content-text {
    margin: 0 auto 2rem;
    width: 90%;
  }

  .service_detail {
    width: 90%;
  }

  .contact_box-title {
    font-size: calc(var(--s-val) * 3);
  }

  .contact_box-tel {
    font-size: calc(var(--s-val) * 3.5);
  }

  .contact_box-time {
    font-size: calc(var(--s-val) * 1.6);
  }

  .qa_area {
    margin-bottom: 5rem;
    padding: 4rem 0 5rem;
  }

  .qa_title {
    font-size: calc(var(--s-val) * 6);
  }

  .qa_area .reading {
    font-size: calc(var(--s-val) * 3);
  }

  .qa_area dt {
    font-size: calc(var(--s-val) * 2.2);
  }

  .qa_area .accordion-height {
    font-size: calc(var(--s-val) * 1.8);
  }

  .worries_list dd {
    margin-left: 3rem;
    font-size: calc(var(--s-val) * 2.2);
  }

  .worries_list dd::before {
    left: -3rem;
    width: calc(var(--s-val) * 2);
    height: calc(var(--s-val) * 2);
  }

  .worries_title {
    font-size: calc(var(--s-val) * 4.5);
  }

  .worries_list dt {
    font-size: calc(var(--s-val) * 3.5);
  }

  .worries_list-content {
    width: 90%;
  }

  .single_toggle-btn .refill-btn {
    padding: 1.5rem 7.5rem 1.5rem 1.5rem;
  }

  .single_shampoo-text,
  .single_treatment-text {
    font-size: calc(var(--s-val) * 2.5);
  }

  .single_shampoo-btn a,
  .single_treatment-btn a {
    font-size: calc(var(--s-val) * 2.5);
  }

  .single_price p:first-child {
    font-size: calc(var(--s-val) * 2.2);
  }

  .single_price p:nth-child(2) {
    font-size: calc(var(--s-val) * 2.5);
  }

  .single_content .fontsize-44 {
    font-size: calc(var(--s-val) * 4);
  }

  .single_price .fontsize-15 {
    font-size: calc(var(--s-val) * 2);
  }

  .single_price-option li,
  .single_price-option p {
    font-size: calc(var(--s-val) * 2);
    height: calc(var(--s-val) * 4);
  }

  .single_price .fontsize-22 {
    font-size: calc(var(--s-val) * 2);
  }

  .single_price .fontsize-30 {
    font-size: calc(var(--s-val) * 2.5);
  }

  .single_price .fontsize-16 {
    font-size: calc(var(--s-val) * 2);
  }

  .single_price-annotation {
    font-size: calc(var(--s-val) * 1.8);
  }

  .single_price-annotation p:first-child {
    font-size: calc(var(--s-val) * 2);
  }

  .single_price-annotation p:last-child {
    font-size: calc(var(--s-val) * 1.6);
  }

  .single_toggle-btn .bottle-btn::before,
  .single_toggle-btn .refill-btn::before {
    right: 1rem;
  }

  .single_toggle-btn .bottle-btn::before {
    background-size: 50%;
    right: 0;
  }

  .single_toggle-btn {
    width: 90%;
  }

  .single_content {
    width: 90%;
  }

  .single_toggle-btn .refill-btn::before {
    background-image: url(../images/refill.webp);
    background-size: 70%;
  }

  .single_toggle-btn .bottle-btn::before,
  .single_toggle-btn .refill-btn::before {
    height: calc(var(--s-val) * 12);
  }

  .single_toggle-btn p {
    align-items: center;
    justify-content: center;
    display: flex;
    font-size: calc(var(--s-val) * 2.5);
  }

  .single_price-option .fontsize-22 {
    margin-top: 5px;
  }

  .single_shampoo,
  .single_treatment {
    width: 100%;
  }

  .single_shampoo-btn a,
  .single_treatment-btn a {
    padding: 1.5rem 0;
  }

  .single_price-box {
    width: 100%;
  }

  .line_up {
    padding: 8rem 0;
  }

  .line_ul-text {
    font-size: calc(var(--s-val) * 3);
  }

  .line_up a {
    font-size: calc(var(--s-val) * 3.5);
  }
}

.ecbn-selection-title.vsm-selection-title {
  width: 240px;
  margin: 70px auto 30px;
}

.ecbn-selection-wrapper .ecbn-selection-title > span {
  display: block;
  width: 140px;
  margin: 0 auto;
}