@charset "UTF-8";
.animated__fadeIn {
  opacity: 0;
  translate: 0 0;
  -webkit-transition: opacity 1.2s ease, translate 1.2s ease;
  transition: opacity 1.2s ease, translate 1.2s ease;
}
.animated__fadeIn.js-show {
  opacity: 1;
  translate: 0 0;
}

.animated__opening {
  opacity: 0;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  transition: opacity 1.2s ease, -webkit-transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease;
  transition: opacity 1.2s ease, transform 1.2s ease, -webkit-transform 1.2s ease;
}
.animated__opening.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

body {
  line-height: 1.7;
  font-family: "Zen Old Mincho", "游明朝体", "Yu Mincho", "YuMincho", serif, "Arial", "Helvetica", sans-serif; /* 汎用サンセリフフォント */
  font-size: clamp(16px, 1.2vw, 23px);
  letter-spacing: 0.03em;
  line-height: 2.17;
  color: #2E2E2E;
  background: #F1EDE4;
  overflow-x: hidden;
}

main {
  overflow-x: hidden;
}

.sp-only {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.pc-only {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.inner {
  padding-left: 60px;
  padding-right: 60px;
}
@media screen and (max-width: 767px) {
  .inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.container {
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
}

.section-title {
  font-size: clamp(33px, 4.46vw, 66px);
  line-height: 1.4;
  letter-spacing: 0.24em;
}
.section-title.--center {
  text-align: center;
}
.section-title.--lineup {
  color: #B99E86;
}

a {
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
@media (any-hover: hover) {
  a:hover {
    cursor: pointer;
  }
}

button {
  cursor: pointer;
}

.button-arrow {
  position: absolute;
  top: 50%;
  translate: -50%;
  right: 0;
  width: 52px;
  height: 1px;
  background: #fff;
}
.button-arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.5px);
  right: 0;
  width: 9px;
  height: 1px;
  border-radius: 9999px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: calc(100% - 0.5px) 50%;
          transform-origin: calc(100% - 0.5px) 50%;
}

.button-arrow2 {
  position: relative;
  display: inline-block;
  width: 8.9px;
  height: 13.9px;
}
.button-arrow2::before, .button-arrow2::after {
  content: "";
  position: absolute;
  top: calc(50% - 2px);
  right: 0;
  width: 11px;
  height: 4px;
  border-radius: 9999px;
  background-color: #ffffff;
  -webkit-transform-origin: calc(100% - 2px) 50%;
          transform-origin: calc(100% - 2px) 50%;
}
.button-arrow2::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.button-arrow2::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.cta-button-type1 {
  display: inline-block;
  padding: 16px 87px 16px 55px;
  background: -webkit-gradient(linear, left top, left bottom, from(#CEAB74), to(#8D795F));
  background: linear-gradient(to bottom, #CEAB74, #8D795F);
  color: #fff;
  letter-spacing: 0.1em;
  border-radius: 999px;
  position: relative;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
@media screen and (max-width: 767px) {
  .cta-button-type1 {
    padding: 11px 87px 11px 28px;
    font-size: 12px;
  }
}
@media (any-hover: hover) {
  .cta-button-type1:hover {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

.cta-button-type2 {
  display: block;
  padding: 19px 83px 19px 38px;
  background: -webkit-gradient(linear, left top, left bottom, from(#CEAB74), to(#8D795F));
  background: linear-gradient(to bottom, #CEAB74, #8D795F);
  color: #fff;
  border-radius: 999px;
  position: relative;
  letter-spacing: 0.1em;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
@media screen and (max-width: 767px) {
  .cta-button-type2 {
    padding: 11px 87px 11px 28px;
    font-size: 12px;
  }
}
@media (any-hover: hover) {
  .cta-button-type2:hover {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
  }
}

.button-sp-cta {
  display: block;
  padding: 8px 15px;
  background: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 999px;
  color: #A6927A;
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", sans-serif;
  letter-spacing: 0.24em;
}
.button-sp-cta span {
  position: relative;
  padding-right: 25px;
}
.button-sp-cta span::before, .button-sp-cta span::after {
  content: "";
  position: absolute;
  top: calc(50% - 1.5px);
  right: 0;
  width: 11px;
  height: 3px;
  border-radius: 9999px;
  background-color: #A6927A;
  -webkit-transform-origin: calc(100% - 1.5px) 50%;
          transform-origin: calc(100% - 1.5px) 50%;
}
.button-sp-cta span::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.button-sp-cta span::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

img {
  width: 100%;
  height: auto;
  display: block;
}

.pc-cta {
  display: block;
  position: fixed;
  position: -webkit-fixed;
  bottom: 5%;
  right: 5%;
  width: min(11.61%, 223px);
  z-index: 999;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
@media screen and (max-width: 767px) {
  .pc-cta {
    display: none;
  }
}
.pc-cta:hover {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.sp-cta {
  position: fixed;
  position: -webkit-fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 16px;
  padding-bottom: 16px;
  background: -webkit-gradient(linear, left top, left bottom, from(#A6927A), to(#775832));
  background: linear-gradient(to bottom, #A6927A, #775832);
  z-index: 999;
}

.sp-cta__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
}

.sp-cta__left {
  width: 90px;
}

.sp-cta__right {
  width: 45.33%;
  min-width: 206px;
  position: relative;
}
.sp-cta__right::before {
  content: "";
  position: absolute;
  top: 0;
  left: -15px;
  width: 1px;
  height: 100%;
  background: #fff;
}

.fv {
  padding: 60px 60px 0 60px;
}
@media screen and (max-width: 767px) {
  .fv {
    padding: 20px 20px 0 20px;
  }
}

.fv__inner {
  position: relative;
}

.fv__image img {
  width: 100%;
  height: auto;
  border-radius: 29px;
}

.fv__logo {
  position: absolute;
  top: 17px;
  left: 22px;
  width: min(10.57%, 203px);
}
@media screen and (max-width: 767px) {
  .fv__logo {
    width: 90px;
    top: -22px;
    left: -22px;
  }
}

.fv__right {
  position: absolute;
  top: 36px;
  right: 46px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 30px;
  width: clamp(80px, 8.13%, 156px);
}
@media screen and (max-width: 767px) {
  .fv__right {
    gap: 20px;
    top: 16px;
    right: 16px;
  }
}

.fv__right-item {
  display: block;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
.fv__right-item.--instagram {
  max-width: 66px;
}
@media screen and (max-width: 767px) {
  .fv__right-item.--instagram {
    width: 25px;
  }
}
.fv__right-item.--cart {
  max-width: 58px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .fv__right-item.--cart {
    width: 20px;
  }
}
@media (any-hover: hover) {
  .fv__right-item:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

.fv__copy {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: 2;
  color: #fff;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .fv__copy {
    text-align: left;
    left: 4%;
    translate: 0 -50%;
  }
}

.fv__copy-main {
  font-size: clamp(40px, 5.68vw, 109px);
  letter-spacing: 0.24em;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .fv__copy-main {
    font-size: clamp(20px, 12vw, 45px);
    line-height: 1.4;
  }
}

.fv__copy-sub {
  font-family: "游ゴシック体", "Yu Gothic", "YuGothic", sans-serif;
  font-size: clamp(14px, 1.88vw, 36px);
  letter-spacing: 0.24em;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .fv__copy-sub {
    margin-top: 14px;
    font-size: 11px;
  }
}

.concept {
  margin-top: 143px;
}
@media screen and (max-width: 767px) {
  .concept {
    margin-top: 70px;
  }
}

.concept__contents {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 58px;
  position: relative;
}
@media screen and (max-width: 767px) {
  .concept__contents {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
}
.concept__contents::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -150px;
  width: 394px;
  height: 410px;
  background: url(../img/ashirai_type1.png) no-repeat center center/contain;
  z-index: -2;
}
@media screen and (max-width: 767px) {
  .concept__contents::before {
    top: -60px;
    left: -52px;
    width: 200px;
    height: 210px;
  }
}

.concept__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (max-width: 767px) {
  .concept__left {
    display: contents;
  }
}

@media screen and (max-width: 767px) {
  .consept__title {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}

.concept__h3 {
  font-size: clamp(24px, 1.77vw, 34px);
  margin-top: 31px;
  letter-spacing: 0.024em;
}
@media screen and (max-width: 767px) {
  .concept__h3 {
    font-size: 19px;
    margin-top: 13px;
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
}

.concept__text {
  margin-top: 28px;
}
@media screen and (max-width: 767px) {
  .concept__text {
    margin-top: 22px;
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
}

.concept__image {
  width: 46.08%;
}
@media screen and (max-width: 767px) {
  .concept__image {
    margin-top: 22px;
    width: 100%;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}
.concept__image img {
  border-radius: 15px;
}

.lineup {
  margin-top: 173px;
}
@media screen and (max-width: 767px) {
  .lineup {
    margin-top: 60px;
  }
}

.lineup__lead {
  margin-top: 31px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .lineup__lead {
    margin-top: 14px;
  }
}

.lineup__contents {
  margin-top: 103px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 172px;
}
@media screen and (max-width: 1000px) {
  .lineup__contents {
    margin-top: 30px;
    gap: 35px;
  }
}

.lineup__item {
  /* ECHEVERIA用のスタイル */
  /* AGAVE用のスタイル */
  /* ALOEVERA用のスタイル */
}
.lineup__item:nth-child(even) .lineup-item__block1 {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
@media screen and (max-width: 1000px) {
  .lineup__item:nth-child(even) .lineup-item__block1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.lineup__item[data-product=echeveria] .lineup-item__left-title, .lineup__item[data-product=agave] .lineup-item__left-title, .lineup__item[data-product=aloevera] .lineup-item__left-title {
  position: relative;
  padding-right: 30.97%;
  height: auto;
}
@media screen and (max-width: 1000px) {
  .lineup__item[data-product=echeveria] .lineup-item__left-title, .lineup__item[data-product=agave] .lineup-item__left-title, .lineup__item[data-product=aloevera] .lineup-item__left-title {
    padding-right: 110px;
  }
}
.lineup__item[data-product=echeveria] .lineup-item__left-title::after, .lineup__item[data-product=agave] .lineup-item__left-title::after, .lineup__item[data-product=aloevera] .lineup-item__left-title::after {
  content: "";
  position: absolute;
  top: 55%;
  right: 0;
  translate: 0 -50%;
  width: 30.97%;
  height: auto;
  aspect-ratio: 1;
}
.lineup__item[data-product=echeveria] .lineup-item__block2, .lineup__item[data-product=agave] .lineup-item__block2, .lineup__item[data-product=aloevera] .lineup-item__block2 {
  position: relative;
}
.lineup__item[data-product=echeveria] .lineup-item__block2::after, .lineup__item[data-product=agave] .lineup-item__block2::after, .lineup__item[data-product=aloevera] .lineup-item__block2::after {
  content: "";
  position: absolute;
}
.lineup__item[data-product=echeveria] .lineup-item__left-title::after {
  background: url(../../img/taniku-soap-logo__ECHEVERIA.png) no-repeat center center/contain;
}
@media screen and (max-width: 1000px) {
  .lineup__item[data-product=echeveria] .lineup-item__left-title::after {
    width: 102px;
    height: 104px;
  }
}
.lineup__item[data-product=echeveria] .lineup-item__block2::after {
  top: -93px;
  left: -6%;
  background: url(../../img/lineup-flower1.png) no-repeat center center/contain;
  width: 20.54%;
  height: auto;
  aspect-ratio: 1;
}
@media screen and (max-width: 767px) {
  .lineup__item[data-product=echeveria] .lineup-item__block2::after {
    top: -67px;
    left: -11%;
    width: min(40%, 150px);
  }
}
.lineup__item[data-product=echeveria] .lineup-item__h3 {
  letter-spacing: 0.12em;
  color: #8B677C;
}
.lineup__item[data-product=agave] .lineup-item__left-title::after {
  background: url(../../img/taniku-soap-logo__AGAVE.png) no-repeat center center/contain;
  width: 43.97%;
  height: auto;
  aspect-ratio: 1;
}
@media screen and (max-width: 1000px) {
  .lineup__item[data-product=agave] .lineup-item__left-title::after {
    width: 102px;
    height: 104px;
  }
}
.lineup__item[data-product=agave] .lineup-item__block2::after {
  top: -67px;
  right: -4%;
  background: url(../../img/lineup-flower2.png) no-repeat center center/contain;
  width: 14.59%;
  height: auto;
  aspect-ratio: 1;
}
@media screen and (max-width: 767px) {
  .lineup__item[data-product=agave] .lineup-item__block2::after {
    top: -31px;
    right: -10%;
    width: min(37.33%, 140px);
  }
}
.lineup__item[data-product=agave] .lineup-item__h3 {
  letter-spacing: 0.24em;
  color: #34651D;
}
.lineup__item[data-product=aloevera] .lineup-item__left-title::after {
  background: url(../../img/taniku-soap-logo__ALOEVERA.png) no-repeat center center/contain;
}
@media screen and (max-width: 1000px) {
  .lineup__item[data-product=aloevera] .lineup-item__left-title::after {
    width: 102px;
    height: 104px;
  }
}
.lineup__item[data-product=aloevera] .lineup-item__block2::after {
  top: -100px;
  left: -6%;
  background: url(../../img/lineup-flower3.png) no-repeat center center/contain;
  width: 15.41%;
  height: auto;
  aspect-ratio: 1;
}
@media screen and (max-width: 767px) {
  .lineup__item[data-product=aloevera] .lineup-item__block2::after {
    top: -37px;
    left: -9%;
    width: min(29.33%, 110px);
  }
}
.lineup__item[data-product=aloevera] .lineup-item__h3 {
  letter-spacing: 0.12em;
  color: #549138;
}
.lineup__item[data-product=aloevera] .lineup-item__block2-text {
  letter-spacing: 0;
}

.lineup-item__block1 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 45px;
}
@media screen and (max-width: 1000px) {
  .lineup-item__block1 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 22px;
  }
}

.lineup-item__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
@media screen and (max-width: 1000px) {
  .lineup-item__left {
    width: 100%;
  }
}

.lineup-item__left-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
@media screen and (max-width: 1000px) {
  .lineup-item__left-title {
    width: 100%;
  }
}

.lineup-item__h3 {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(26px, 3.44vw, 66px);
  line-height: 1.4;
}

.lineup-item__h3-ja {
  font-size: clamp(16px, 1.67vw, 32px);
}

.lineup-item__left-title-line {
  margin-top: 20px;
  width: 130%;
  height: 1px;
  background: #2E2E2E;
}
@media screen and (max-width: 1000px) {
  .lineup-item__left-title-line {
    margin-top: 12px;
    width: calc(100% + 66px);
  }
}

.lineup-item__left-text {
  margin-top: 36px;
}
@media screen and (max-width: 1000px) {
  .lineup-item__left-text {
    margin-top: 16px;
  }
}

.lineup-item__image {
  width: 45.27%;
  position: relative;
  padding-bottom: 18px;
}
@media screen and (max-width: 1000px) {
  .lineup-item__image {
    width: 100%;
  }
}
.lineup-item__image img {
  border-radius: 15px;
}

.lineup-item__image-button {
  position: absolute;
  bottom: 0;
  right: -18px;
}
@media screen and (max-width: 1000px) {
  .lineup-item__image-button {
    right: -10px;
  }
}
.lineup-item__image-button.--left {
  left: -18px;
}
@media screen and (max-width: 1000px) {
  .lineup-item__image-button.--left {
    left: -10px;
  }
}

.lineup-item__block2 {
  margin-top: 58px;
  width: 100%;
  height: auto;
  padding: 60px 50px;
  background: #fff;
  border-radius: 15px;
  text-align: center;
  -webkit-box-shadow: 0 8px 8px rgba(112, 112, 112, 0.1);
          box-shadow: 0 8px 8px rgba(112, 112, 112, 0.1);
}
@media screen and (max-width: 767px) {
  .lineup-item__block2 {
    margin-top: 21px;
    padding: 30px 22px 40px;
  }
}

.lineup-item__block2-title {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  font-size: 26px;
  letter-spacing: 0.03em;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
@media screen and (max-width: 767px) {
  .lineup-item__block2-title {
    font-size: 20px;
  }
}
.lineup-item__block2-title::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 10px;
  height: 1px;
  background: #2E2E2E;
}
.lineup-item__block2-title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 10px;
  height: 1px;
  background: #2E2E2E;
}

.lineup-item__block2-text {
  margin-top: 36px;
  letter-spacing: 0.03em;
  line-height: 2.1;
}
@media screen and (max-width: 767px) {
  .lineup-item__block2-text {
    margin-top: 22px;
  }
}

.shop {
  margin-top: 161px;
}
@media screen and (max-width: 767px) {
  .shop {
    margin-top: 60px;
  }
}

.shop__head {
  position: relative;
  padding-top: 16px;
}

.shop__head-text {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50%;
  width: 360px;
  height: 70px;
}
@media screen and (max-width: 767px) {
  .shop__head-text {
    width: 180px;
    height: 35px;
  }
}

.shop__contents {
  margin-top: 59px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -webkit-column-gap: 3.65%;
     -moz-column-gap: 3.65%;
          column-gap: 3.65%;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .shop__contents {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .shop__contents {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 20px;
    margin-top: 30px;
  }
}

.shop__item {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  gap: 0;
  padding: 29px 29px 37px 29px;
  background: #fff;
  border-radius: 15px;
  /* ECHEVERIA用のスタイル */
  /* AGAVE用のスタイル */
  /* ALOEVERA用のスタイル */
}
@media screen and (max-width: 767px) {
  .shop__item {
    padding: 15px 15px 19px 15px;
  }
}
.shop__item[data-product=echeveria] .product-title--en {
  letter-spacing: 0.12em;
  color: #8B677C;
}
.shop__item[data-product=echeveria] .product-title--en::before {
  background: #8B677C;
}
.shop__item[data-product=echeveria] .product-title--en::after {
  background: #8B677C;
}
.shop__item[data-product=agave] .product-title--en {
  letter-spacing: 0.24em;
  color: #34651D;
}
.shop__item[data-product=agave] .product-title--en::before {
  background: #34651D;
}
.shop__item[data-product=agave] .product-title--en::after {
  background: #34651D;
}
.shop__item[data-product=aloevera] .product-title--en {
  letter-spacing: 0.12em;
  color: #549138;
}
.shop__item[data-product=aloevera] .product-title--en::before {
  background: #549138;
}
.shop__item[data-product=aloevera] .product-title--en::after {
  background: #549138;
}

.shop__item-image img {
  border-radius: 15px;
}

.product-title {
  margin-top: 26px;
}
@media screen and (max-width: 767px) {
  .product-title {
    margin-top: 13px;
  }
}

.product-title--en {
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(20px, 2.43vw, 36px);
  letter-spacing: 0.1em;
  line-height: 1.4;
  position: relative;
  padding-left: 15px;
  padding-right: 15px;
}
.product-title--en::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 10px;
  height: 1px;
}
.product-title--en::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: 10px;
  height: 1px;
}

.product-title--ja {
  margin-top: 13px;
  font-size: 23px;
  font-size: clamp(12px, 1.55vw, 23px);
  line-height: 1.4;
}
@media screen and (max-width: 767px) {
  .product-title--ja {
    margin-top: 6px;
  }
}

.product-description {
  margin-top: 35px;
}
@media screen and (max-width: 767px) {
  .product-description {
    margin-top: 17px;
  }
}

.product-cta {
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  .product-cta {
    margin-top: 30px;
  }
}

.message {
  padding-top: 0;
  padding-bottom: 157px;
}
@media screen and (max-width: 767px) {
  .message {
    padding-bottom: 45px;
  }
}

.message__contents {
  position: relative;
  padding-top: 38%;
}
@media screen and (max-width: 767px) {
  .message__contents {
    padding-top: 65%;
  }
}

.message__bg {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50%;
  width: 60.88%;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .message__bg {
    width: 120%;
  }
}

.message__title {
  position: absolute;
  top: min(16vw, 289px);
  left: 50%;
  translate: -50%;
  width: 19.12%;
  max-width: 100%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .message__title {
    width: 45%;
    max-width: 300px;
    top: 18vw;
  }
}

.message__lead {
  position: absolute;
  top: min(23vw, 380px);
  left: 50%;
  translate: -50%;
  width: 69.46%;
  max-width: 100%;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .message__lead {
    width: 100%;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    top: 36vw;
  }
}

.message__text {
  text-align: center;
  line-height: 2.3;
}

.mission {
  background: url(../../img/message-bg.jpg) no-repeat center center/cover;
  padding: 155px 0;
}
@media screen and (max-width: 1000px) {
  .mission {
    background: url(../../img/message-bg-sp.jpg) no-repeat center center/cover;
    padding: 60px 0;
  }
}

.mission__title {
  color: #fff;
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(33px, 4.46vw, 66px);
  text-align: center;
  letter-spacing: 0.24em;
}

.mission__text {
  margin-top: 45px;
  color: #fff;
  font-size: clamp(20px, 2.16vw, 32px);
  font-weight: 500;
  text-align: center;
  letter-spacing: 0.1em;
}

.value {
  margin-top: 213px;
}
@media screen and (max-width: 767px) {
  .value {
    margin-top: 100px;
  }
}

.value__head {
  position: relative;
}
.value__head::before {
  content: "";
  position: absolute;
  top: -154px;
  left: -167px;
  background: url(../../img/ashirai_type2.png) no-repeat center center/contain;
  width: 531px;
  height: 459px;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  .value__head::before {
    top: -78px;
    left: -52px;
    width: 225px;
    height: 200px;
  }
}

.value__title {
  display: inline-block;
  font-size: clamp(33px, 4.46vw, 66px);
  line-height: 1.4;
  letter-spacing: 0.24em;
  position: relative;
  padding-right: 104px;
}
@media screen and (max-width: 767px) {
  .value__title {
    padding-right: 50px;
  }
}
.value__title::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  background: url(../../img/values-flower.png) no-repeat center center/contain;
  width: 86px;
  height: 103px;
}
@media screen and (max-width: 767px) {
  .value__title::after {
    width: 43px;
    height: 50px;
  }
}

.value__contents {
  margin-top: 60px;
}
@media screen and (max-width: 767px) {
  .value__contents {
    margin-top: 35px;
  }
}

.value__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 125px;
}
@media screen and (max-width: 767px) {
  .value__items {
    gap: 45px;
  }
}

.value-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 57px;
}
@media screen and (max-width: 767px) {
  .value-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    gap: 23px;
  }
}

.value-item__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.value-item__title {
  font-size: clamp(26px, 2.16vw, 32px);
  padding-bottom: 21px;
  border-bottom: 1px solid #2E2E2E;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .value-item__title {
    font-size: clamp(18px, 6.4vw, 24px);
    padding-bottom: 11px;
  }
}

.value-item__text {
  margin-top: 32px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .value-item__text {
    margin-top: 16px;
  }
}

.value-item__image {
  width: 30.14%;
}
@media screen and (max-width: 767px) {
  .value-item__image {
    width: 100%;
  }
}
.value-item__image img {
  border-radius: 15px;
}

.ecology {
  margin-top: 213px;
}
@media screen and (max-width: 767px) {
  .ecology {
    margin-top: 90px;
  }
}

.ecology__read {
  margin-top: 36px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .ecology__read {
    margin-top: 20px;
  }
}
.ecology__read p {
  font-size: clamp(20px, 2.91vw, 43px);
  text-align: center;
  letter-spacing: 0.24em;
  height: auto;
  position: relative;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .ecology__read p {
    text-align: left;
  }
}
.ecology__read p span {
  display: inline-block;
  background: url(../../img/ecology-flower.png) no-repeat center center/contain;
  width: 6.351%;
  height: auto;
  aspect-ratio: 1;
  vertical-align: middle;
}
@media screen and (max-width: 767px) {
  .ecology__read p span {
    width: 35px;
  }
}

.ecology__contents {
  margin-top: 75px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 38px;
}
@media screen and (max-width: 767px) {
  .ecology__contents {
    margin-top: 45px;
    gap: 22px;
  }
}

.ecology-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 36px;
  padding: 47px 47px 47px 74px;
  background: #fff;
  border-radius: 15px;
  -webkit-box-shadow: 0 8px 8px rgba(112, 112, 112, 0.1);
          box-shadow: 0 8px 8px rgba(112, 112, 112, 0.1);
}
@media screen and (max-width: 767px) {
  .ecology-item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    padding: 20px;
    gap: 28px;
  }
}

.ecology-item__left {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.ecology-item__title {
  font-size: clamp(26px, 2.16vw, 32px);
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  .ecology-item__title {
    font-size: 20px;
  }
}

.ecology-item__text {
  margin-top: 31px;
  letter-spacing: 0.1em;
  line-height: 1.7em;
}
@media screen and (max-width: 767px) {
  .ecology-item__text {
    margin-top: 12px;
  }
}

.ecology-item__image {
  width: 260px;
}
@media screen and (max-width: 767px) {
  .ecology-item__image {
    width: min(60%, 260px);
    margin-left: auto;
    margin-right: auto;
  }
}
.ecology-item__image img {
  display: block;
}

.bottom {
  margin-top: 120px;
  padding-bottom: 130px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bottom {
    margin-top: 50px;
    padding-bottom: 60px;
  }
}

.bottom__image {
  max-width: 156px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .bottom__image {
    width: 80px;
  }
}

.bottom__text {
  margin-top: 75px;
  font-size: 36px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .bottom__text {
    margin-top: 22px;
    font-size: 14px;
  }
}

.bottom__text2 {
  margin-top: 44px;
  width: 724px;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .bottom__text2 {
    margin-top: 25px;
  }
}

.footer {
  background: #707070;
  padding-top: 80px;
  padding-bottom: 13px;
  color: #fff;
}
@media screen and (max-width: 767px) {
  .footer {
    padding-top: 21px;
    margin-bottom: 74px;
  }
}

.footer__inner {
  max-width: 1729px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 117px;
  padding-right: 117px;
}
@media screen and (max-width: 767px) {
  .footer__inner {
    padding-left: 33px;
    padding-right: 33px;
  }
}

.footer__flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 50px;
}
@media screen and (max-width: 767px) {
  .footer__flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 25px;
    -webkit-box-align: normal;
        -ms-flex-align: normal;
            align-items: normal;
  }
}

.footer__logo {
  max-width: 616px;
}

.footer__right {
  max-width: 320px;
}
@media screen and (max-width: 767px) {
  .footer__right {
    max-width: 100%;
  }
}

.footer__cta-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 53px;
}
@media screen and (max-width: 767px) {
  .footer__cta-list {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: auto;
    gap: 12px;
  }
}

.footer__cta-item {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(14px, 1.04vw, 20px);
  letter-spacing: 0.24em;
}
.footer__cta-item.--Instagram {
  max-width: 128px;
}
.footer__cta-item.--cart {
  max-width: 146px;
}

.footer__cta-item-link {
  display: block;
  text-align: center;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
@media (any-hover: hover) {
  .footer__cta-item-link:hover {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}
.footer__cta-item-link.--Instagram img {
  width: 82px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .footer__cta-item-link.--Instagram img {
    width: 30px;
  }
}
.footer__cta-item-link.--cart img {
  width: 70px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 767px) {
  .footer__cta-item-link.--cart img {
    width: 25px;
  }
}
@media screen and (max-width: 767px) {
  .footer__cta-item-link p {
    font-size: 12px;
  }
}

.footer__copyright {
  margin-top: 49px;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.24em;
}
@media screen and (max-width: 767px) {
  .footer__copyright {
    margin-top: 22px;
    font-size: 13px;
  }
}