@charset "UTF-8";
/* 1440カンプ →  1200*/
:root {
  --scale: 0.0833333333vw;
  --max: 1;
}
@media screen and (max-width: 767px) {
  :root {
    --scale: 0.1633986928vw;
    --scale02: 0.2659574468vw; /* 376用 */
    --max: 10;
  }
}

/*------------------------------
tsurukona
------------------------------*/
@media (max-width: 767px) {
  .tsurukona {
    margin-top: 0;
  }
}

/*------------------------------
fv
------------------------------*/
@media (max-width: 767px) {
  .fv {
    overflow-x: clip;
  }
}

@media (min-width: 768px) {
  .fv__inner {
    width: clamp(0px, calc(640 * var(--scale)), calc(640px * var(--max)));
    max-width: unset;
  }
}

.fv__body {
  position: relative;
  padding: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max))) 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
  filter: drop-shadow(0px 0px 4px rgba(120, 122, 125, 0.6));
}
.fv__body::before {
  content: "";
  position: absolute;
  width: 97%;
  height: 100%;
  transform: translate(-50%, 0%);
  left: 50%;
  bottom: 0;
  -webkit-mask-image: url(../img/tsurukona/fv-bg.png), linear-gradient(to bottom, #000 0% calc(100% - clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max)))), transparent calc(100% - clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max)))) 100%);
          mask-image: url(../img/tsurukona/fv-bg.png), linear-gradient(to bottom, #000 0% calc(100% - clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max)))), transparent calc(100% - clamp(0px, calc(140 * var(--scale)), calc(140px * var(--max)))) 100%);
  -webkit-mask-size: 100%, 100% 100%;
          mask-size: 100%, 100% 100%;
  -webkit-mask-position: bottom center, top center;
          mask-position: bottom center, top center;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
  background: #6abdc5;
  opacity: 0.85;
}
.fv__body > * {
  position: relative;
  z-index: 5;
}
@media (max-width: 767px) {
  .fv__body {
    padding-top: 17vw;
    padding-bottom: 24vw;
  }
  .fv__body::before {
    width: 100%;
    -webkit-mask-image: url(../img/tsurukona/fv-bg_sp.png), linear-gradient(to bottom, #000 0% calc(100% - clamp(0px, calc(180 * var(--scale)), calc(180px * var(--max)))), transparent calc(100% - clamp(0px, calc(180 * var(--scale)), calc(180px * var(--max)))) 100%);
            mask-image: url(../img/tsurukona/fv-bg_sp.png), linear-gradient(to bottom, #000 0% calc(100% - clamp(0px, calc(180 * var(--scale)), calc(180px * var(--max)))), transparent calc(100% - clamp(0px, calc(180 * var(--scale)), calc(180px * var(--max)))) 100%);
  }
}

.fv__text {
  font-size: clamp(0px, calc(62 * var(--scale)), calc(62px * var(--max)));
  font-weight: 500;
  color: #ffff00;
  transform: translateX(3%);
  z-index: 30;
  position: relative;
  text-align: right;
  line-height: 1.4;
  text-shadow: 0px 0px 3px rgba(120, 122, 125, 0.6);
  -webkit-text-stroke: clamp(0px, calc(0.5 * var(--scale)), calc(0.5px * var(--max))) #ffff00;
}
@media (max-width: 767px) {
  .fv__text {
    letter-spacing: 0.05em;
    transform: translateX(5%);
  }
}

.fv__text02 {
  position: absolute;
  background: url(../img/tsurukona/fv_text.png) no-repeat center center/100%;
  aspect-ratio: 506/206;
  transform: translate(146%, 137%);
  width: 40%;
  left: 0;
  top: 0;
  z-index: 20;
  mix-blend-mode: multiply;
}
@media (max-width: 767px) {
  .fv__text02 {
    transform: translate(146%, 236%);
  }
}

.fv__img01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 72%;
  aspect-ratio: 917/1019;
  z-index: 10;
  transform: translate(-18%, 5.4%);
}
@media (max-width: 767px) {
  .fv__img01 {
    width: 104.2%;
    transform: translate(-15.1%, 12.4%);
    max-width: unset;
  }
}

.fv__img02 {
  position: absolute;
  mix-blend-mode: multiply;
  aspect-ratio: 1140/1266;
  top: 0;
  left: 0;
  width: 73%;
  transform: translate(-12%, 7%);
}
@media (max-width: 767px) {
  .fv__img02 {
    width: 103%;
    transform: translate(-7%, 15.4%);
    max-width: unset;
  }
}

.fv__img03 {
  transform: translateX(53%);
  width: clamp(0px, calc(450 * var(--scale)), calc(450px * var(--max)));
  margin-top: calc(clamp(0px, calc(72 * var(--scale)), calc(72px * var(--max))) * -1);
  z-index: 10;
  position: relative;
}
@media (max-width: 767px) {
  .fv__img03 {
    margin-top: 14%;
  }
}

.fv__catch {
  font-size: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  font-weight: 500;
  line-height: 1.3043478261;
  letter-spacing: normal;
  text-align: center;
  color: #787a7d;
  background: #ffff00;
  margin-top: calc(clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))) * -1);
  padding: 0.3em 0;
  position: relative;
  z-index: 20;
}
.fv__catch strong {
  font-size: clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .fv__catch {
    margin-top: -12.6%;
    font-size: clamp(0px, calc(15 * var(--scale02)), calc(15px * var(--max)));
    padding: 0.4em 0;
  }
  .fv__catch strong {
    font-size: clamp(0px, calc(18 * var(--scale02)), calc(18px * var(--max)));
  }
}

.fv__cta {
  padding: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max))) clamp(0px, calc(78 * var(--scale)), calc(78px * var(--max)));
  color: #fff;
}
@media (max-width: 767px) {
  .fv__cta {
    padding: 0 6%;
    margin-top: 2%;
  }
}

.fv__name {
  font-size: clamp(0px, calc(57 * var(--scale)), calc(57px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
}
.fv__name ruby {
  display: block;
  font-size: clamp(0px, calc(22 * var(--scale)), calc(22px * var(--max)));
  letter-spacing: 0.5em;
}
@media (max-width: 767px) {
  .fv__name {
    line-height: 0.85;
  }
}

.fv__info {
  font-size: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  font-weight: 400;
  line-height: 1.1428571429;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 0.4em;
}
@media (max-width: 767px) {
  .fv__info {
    margin-top: 0.8em;
  }
}

.fv__shop {
  margin: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max))) auto 0;
  width: 97%;
}
@media (max-width: 767px) {
  .fv__shop {
    margin-top: 1%;
    width: 100%;
  }
}

.fv__shop-label {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.5714285714;
  letter-spacing: 0.1em;
  text-align: center;
}
@media (max-width: 767px) {
  .fv__shop-label {
    font-size: clamp(0px, calc(10 * var(--scale02)), calc(10px * var(--max)));
  }
}

.fv__shop-list {
  display: flex;
  gap: 0 clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
  margin-top: 1%;
}
.fv__shop-list li {
  box-shadow: 1px 1px 2px #6abdc5;
}
.fv__shop-list li a {
  display: inline-block;
  width: 100%;
  height: 100%;
}
@media (max-width: 767px) {
  .fv__shop-list {
    margin-top: 0;
  }
}

/*------------------------------
cta
------------------------------*/
.cta--detail {
  margin-bottom: clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
}
@media (max-width: 767px) {
  .cta--detail {
    margin-bottom: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max)));
  }
}
.cta--detail .cta__body {
  margin-right: 1.6%;
}
@media (max-width: 767px) {
  .cta--detail .cta__body {
    width: 70%;
    margin-right: 0;
  }
}
.cta--detail .cta__lead {
  font-size: clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max)));
  letter-spacing: normal;
}
.cta--detail .cta__name {
  font-size: clamp(0px, calc(41 * var(--scale)), calc(41px * var(--max)));
}
.cta--detail .cta__shop {
  padding: 0 4%;
}
@media (max-width: 767px) {
  .cta--detail .cta__shop {
    padding: 0;
  }
}
.cta--detail .cta__free {
  padding: 0 4%;
}
@media (max-width: 767px) {
  .cta--detail .cta__free {
    padding: 0 2%;
  }
}
.cta--detail .cta__product {
  position: absolute;
  top: 0;
  left: 22.9%;
  width: 60%;
  transform: translate(-50%, -2%);
}
@media (max-width: 767px) {
  .cta--detail .cta__product {
    left: 22%;
    width: 63%;
  }
}
@media (max-width: 767px) {
  .cta {
    overflow-x: clip;
  }
}

.cta__inner {
  width: clamp(0px, calc(615 * var(--scale)), calc(615px * var(--max)));
}

.cta__content {
  background: linear-gradient(to bottom, transparent 0 clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max))), #ffff00 clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max))) calc(100% - clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)))), transparent calc(100% - clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)))) 100%);
  position: relative;
  padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0 clamp(0px, calc(52 * var(--scale)), calc(52px * var(--max)));
}
.cta__content::before {
  content: "";
  position: absolute;
  background: #ffff00;
  -webkit-mask: url(../img/tsurukona/cta-bg03.png) center/113% no-repeat;
          mask: url(../img/tsurukona/cta-bg03.png) center/113% no-repeat;
  aspect-ratio: 1402/44;
  width: 100%;
  transform: translate(-50%, 0%);
  left: 50%;
  top: 1px;
}
.cta__content::after {
  content: "";
  position: absolute;
  background: #ffff00;
  -webkit-mask: url(../img/tsurukona/cta-bg03.png) center/113% no-repeat;
          mask: url(../img/tsurukona/cta-bg03.png) center/113% no-repeat;
  aspect-ratio: 1402/44;
  width: 100%;
  transform: translate(-50%, 0%) scale(1, -1);
  left: 50%;
  bottom: 1px;
}

.cta__product {
  position: absolute;
  top: 43%;
  left: 21.9%;
  width: 54%;
  transform: translate(-50%, -50%);
}

.cta__body {
  width: 68%;
  margin-left: auto;
  position: relative;
}
@media (max-width: 767px) {
  .cta__body {
    width: 74%;
    padding-right: 1%;
  }
}

.cta__lead {
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  font-weight: 400;
  line-height: 2.3529411765;
  text-align: center;
  letter-spacing: 0.1em;
}

.cta__name {
  font-size: clamp(0px, calc(46 * var(--scale)), calc(46px * var(--max)));
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  color: #787a7d;
}
.cta__name ruby {
  display: block;
  font-size: clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max)));
  letter-spacing: 0.5em;
}

.cta__info {
  font-size: clamp(0px, calc(17 * var(--scale)), calc(17px * var(--max)));
  font-weight: 400;
  line-height: 1.1428571429;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 0.3em;
}

.cta__shop {
  margin-top: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max)));
}

.cta__shop-label {
  font-size: clamp(0px, calc(14 * var(--scale)), calc(14px * var(--max)));
  font-weight: 400;
  line-height: 1.5714285714;
  letter-spacing: 0.1em;
  text-align: center;
}

.cta__shop-list {
  display: flex;
  gap: 0 clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  margin-top: clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max)));
  width: 98.5%;
}
.cta__shop-list li {
  border-radius: clamp(0px, calc(3.4 * var(--scale)), calc(3.4px * var(--max)));
  box-shadow: 1px 1px 2px rgba(114, 113, 113, 0.8);
  padding: 0.5% 0;
  background: #fff;
}
.cta__shop-list li a {
  display: block;
  width: 100%;
  height: 100%;
}

.cta__free {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) clamp(0px, calc(3 * var(--scale)), calc(3px * var(--max)));
  margin-top: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
}
.cta__free li {
  width: calc(33.3% - clamp(0px, calc(3 * var(--scale)), calc(3px * var(--max))) * 2 / 3);
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  font-weight: 500;
  line-height: 1.5833333333;
  background: #fff;
  border: 1px solid #b3b3b4;
  border-radius: clamp(0px, calc(9.5 * var(--scale)), calc(9.5px * var(--max)));
  padding: 0.4em 0;
  text-align: center;
  letter-spacing: 0.075em;
}
.cta__free li:last-child {
  letter-spacing: -0.1em;
}

.cta__ingredients {
  color: #787a7d;
  font-size: clamp(0px, calc(15 * var(--scale)), calc(15px * var(--max)));
  text-align: center;
  margin-top: 1em;
  letter-spacing: 0.1em;
}

.cta__component {
  font-size: clamp(0px, calc(12 * var(--scale)), calc(12px * var(--max)));
  letter-spacing: -0.03em;
  padding: 1em;
  background: #fff;
  border-radius: clamp(0px, calc(6 * var(--scale)), calc(6px * var(--max)));
  width: 98%;
  margin: 1em auto 0;
}

/*------------------------------
finish
------------------------------*/
.finish {
  margin-top: calc(clamp(0px, calc(53 * var(--scale)), calc(53px * var(--max))) * -1);
}
@media (max-width: 767px) {
  .finish {
    overflow-x: clip;
    margin-top: -2%;
  }
}

.finish__en {
  transform: translateX(-12%);
  margin-top: calc(clamp(0px, calc(10 * var(--scale)), calc(10px * var(--max))) * -1);
}
@media (max-width: 767px) {
  .finish__en {
    margin-top: 0;
    transform: translateX(-69px) rotate(-6deg);
  }
}

.finish__header {
  display: flex;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .finish__header {
    margin-top: -2%;
  }
}

.finish__catch {
  width: 53.5%;
  transform: translate(-2%, -13%);
  z-index: 10;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .finish__catch {
    width: 59.5%;
    transform: unset;
    z-index: 10;
    flex-shrink: 0;
  }
}

.finish__list {
  display: flex;
  flex-wrap: wrap;
  width: 51%;
  position: relative;
  flex-shrink: 0;
  margin-top: 7%;
  gap: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max))) 0;
}
.finish__list::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-47%, -44%);
  background: url(../img/tsurukona/finish-header-bg.png) no-repeat center center/contain;
  width: clamp(0px, calc(363 * var(--scale)), calc(363px * var(--max)));
  aspect-ratio: 735/639;
}
@media (max-width: 767px) {
  .finish__list {
    flex-direction: column;
    margin-top: 4%;
    gap: clamp(0px, calc(12 * var(--scale02)), calc(12px * var(--max)));
  }
  .finish__list::before {
    aspect-ratio: 979/690;
    background: url(../img/tsurukona/finish-header-bg_sp.svg) no-repeat center center/100%;
    transform: translate(-38%, -56%);
    width: 165%;
  }
}

.finish__item {
  width: 50%;
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  font-weight: 400;
  letter-spacing: 0.1em;
  color: #595757;
  position: relative;
  padding-left: 2em;
}
.finish__item::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(../img/tsurukona/img-kirakira.png) no-repeat center center/contain;
  width: 1.35em;
  aspect-ratio: 56/62;
}
@media (max-width: 767px) {
  .finish__item {
    font-size: clamp(0px, calc(15 * var(--scale02)), calc(15px * var(--max)));
    width: 100%;
    padding-left: 3em;
  }
}

.finish__item:nth-child(1)::before {
  transform: translate(-10%, -50%);
}
@media (max-width: 767px) {
  .finish__item:nth-child(1)::before {
    transform: translate(50%, -50%);
  }
}

.finish__item:nth-child(2)::before {
  transform: translate(18%, -57%);
}
@media (max-width: 767px) {
  .finish__item:nth-child(2)::before {
    transform: translate(80%, -43%);
  }
}

.finish__item:nth-child(3)::before {
  width: 1.1em;
  transform: translate(31%, -50%);
}
@media (max-width: 767px) {
  .finish__item:nth-child(3)::before {
    transform: translate(70%, -50%);
  }
}

.finish__item:nth-child(4)::before {
  width: 1.1em;
  transform: translate(53%, -46%);
}
@media (max-width: 767px) {
  .finish__item:nth-child(4)::before {
    transform: translate(90%, -50%);
  }
}

.finish__image {
  position: relative;
  width: 84%;
  margin: 0 auto;
  display: block;
  margin-top: calc(clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) * -1);
  z-index: 2;
}
@media (max-width: 767px) {
  .finish__image {
    width: 91%;
    margin-top: 1%;
  }
}

.finish__text {
  margin-top: calc(clamp(0px, calc(78 * var(--scale)), calc(78px * var(--max))) * -1);
  color: #fff;
  position: relative;
  margin-top: 6%;
}
.finish__text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-53.5%, -61%);
  background: url(../img/tsurukona/finish-text-bg.webp) no-repeat center center/contain;
  width: 104%;
  aspect-ratio: 1271/655;
}
.finish__text img {
  position: relative;
  width: 46%;
  margin-left: 11%;
}
@media (max-width: 767px) {
  .finish__text {
    margin-top: 11%;
  }
  .finish__text::before {
    background: url(../img/tsurukona/finish-text-bg_sp.webp) no-repeat center center/contain;
    aspect-ratio: 971/466;
    transform: translate(-60.5%, -59%);
    width: 128%;
  }
  .finish__text img {
    width: 50%;
    margin-left: 6%;
  }
}

/*------------------------------
care
------------------------------*/
@media (max-width: 767px) {
  .care {
    overflow: hidden;
  }
}

@media (min-width: 768px) {
  .care__inner {
    width: clamp(0px, calc(773 * var(--scale)), calc(773px * var(--max)));
    max-width: 773px;
  }
}

.care__content {
  position: relative;
  padding: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) 0 clamp(0px, calc(80 * var(--scale)), calc(80px * var(--max)));
}
.care__content::before {
  content: "";
  position: absolute;
  background: url(../img/tsurukona/care-bg.png) no-repeat center top 52%/100%;
  aspect-ratio: 1548/1120;
  transform: translate(-48%, -50%);
  width: 100%;
  left: 50%;
  top: 50%;
}
.care__content > * {
  position: relative;
  z-index: 10;
}
@media (max-width: 767px) {
  .care__content {
    padding-top: 49%;
  }
  .care__content::before {
    background: url(../img/tsurukona/care-bg_sp.png) no-repeat center top 52%/100%;
    aspect-ratio: 1044/914;
    transform: translate(-53%, -55%);
    width: 149%;
    left: 50%;
    top: 50%;
  }
}

.care__title {
  transform: translateX(-1%);
  width: 58%;
  margin: 0 auto 0;
  display: block;
}
@media (max-width: 767px) {
  .care__title {
    position: absolute;
    top: 0;
    left: 69%;
    transform: translate(-52%, 63%) rotate(21deg);
    width: 89%;
  }
}

.care__list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(0px, calc(42 * var(--scale)), calc(42px * var(--max))) 0;
}
@media (max-width: 767px) {
  .care__list {
    flex-direction: column;
    gap: clamp(0px, calc(5 * var(--scale)), calc(5px * var(--max))) 0;
    padding-left: 6%;
  }
}

.care__item {
  width: 50%;
  display: flex;
  align-items: center;
  position: relative;
}
@media (max-width: 767px) {
  .care__item {
    width: 100%;
  }
}

.care__item:nth-child(2n) {
  padding-left: 11%;
}
.care__item:nth-child(2n) .care__icon {
  transform: translate(0%, -40%);
}
@media (max-width: 767px) {
  .care__item:nth-child(2n) {
    padding-left: 0;
    transform: translateX(clamp(0px, calc(150 * var(--scale02)), calc(150px * var(--max))));
  }
  .care__item:nth-child(2n) .care__icon {
    transform: translate(-80%, -40%);
  }
}

.care__item:nth-child(2n-1) {
  padding-left: 17%;
}
.care__item:nth-child(2n-1) .care__icon {
  transform: translate(44%, -40%);
}
@media (max-width: 767px) {
  .care__item:nth-child(2n-1) .care__icon {
    transform: translate(0%, -40%);
  }
}

@media (max-width: 767px) {
  .care__item:nth-child(3) {
    margin-top: 8%;
  }
}

@media (max-width: 767px) {
  .care__item:nth-child(3) {
    margin-top: 8%;
  }
}

.care__item:nth-child(4) {
  position: relative;
}
.care__item:nth-child(4)::before {
  content: "";
  position: absolute;
  background: url(../img/tsurukona/care01.svg) no-repeat center center/100%;
  aspect-ratio: 1432/623;
  transform: translate(-4%, -90%);
  width: 28%;
  left: 50%;
  top: 0%;
}
@media (max-width: 767px) {
  .care__item:nth-child(4) {
    margin-top: 6%;
  }
  .care__item:nth-child(4)::before {
    transform: translate(-50%, -111%);
    width: 23%;
    left: 33%;
    top: 0%;
    background: url(../img/tsurukona/care01_sp.png) no-repeat center center/100%;
    aspect-ratio: 220/89;
  }
}

.care__icon {
  width: clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max)));
  position: absolute;
  top: 50%;
  left: 0%;
}
@media (max-width: 767px) {
  .care__icon {
    width: clamp(0px, calc(66 * var(--scale02)), calc(66px * var(--max)));
  }
}

.care__body {
  flex: 1;
}

.care__heading {
  display: inline-block;
  font-size: clamp(0px, calc(26 * var(--scale)), calc(26px * var(--max)));
  font-weight: 500;
  line-height: 1.2692307692;
  letter-spacing: 0.2em;
  color: #6abdc5;
  background: linear-gradient(transparent 60%, #ffff00 60%);
  padding-left: 1em;
  padding-right: 0.2em;
}

.care__text {
  font-size: clamp(0px, calc(16 * var(--scale)), calc(16px * var(--max)));
  font-weight: 500;
  line-height: 2;
  padding-left: 2em;
}
@media (max-width: 767px) {
  .care__text {
    font-size: clamp(0px, calc(10 * var(--scale02)), calc(10px * var(--max)));
    letter-spacing: 0.1em;
    line-height: 1.6;
    padding-left: 2.3em;
  }
}

.care__ingredient {
  font-size: clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max)));
  line-height: 2;
  padding-left: 6em;
  display: flex;
}
@media (max-width: 767px) {
  .care__ingredient {
    font-size: clamp(0px, calc(6.5 * var(--scale02)), calc(6.5px * var(--max)));
    padding-left: 5.5em;
  }
}

.care__catch {
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  font-weight: 500;
  line-height: 1.4;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  letter-spacing: 0.1em;
  margin-top: 1.6em;
}
@media (max-width: 767px) {
  .care__catch {
    margin-top: 2.3em;
  }
}

/*------------------------------

------------------------------*/
@media (max-width: 767px) {
  .natural {
    overflow-x: clip;
  }
}

.natural__content {
  background: url(../img/tsurukona/natural-bg.webp) no-repeat center top calc(clamp(0px, calc(8.7 * var(--scale)), calc(8.7px * var(--max))) * -1)/cover;
  width: clamp(0px, calc(614 * var(--scale)), calc(614px * var(--max)));
  max-width: clamp(0px, calc(614 * var(--scale)), calc(614px * var(--max)));
  margin: 0 auto;
  padding: clamp(0px, calc(100 * var(--scale)), calc(100px * var(--max))) clamp(0px, calc(44 * var(--scale)), calc(44px * var(--max))) clamp(0px, calc(64 * var(--scale)), calc(64px * var(--max))) clamp(0px, calc(138 * var(--scale)), calc(138px * var(--max)));
  margin-top: calc(clamp(0px, calc(19 * var(--scale)), calc(19px * var(--max))) * -1);
}

.natural__body {
  color: #787a7d;
  padding: 7% clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max))) clamp(0px, calc(18 * var(--scale)), calc(18px * var(--max))) clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max)));
  position: relative;
  aspect-ratio: 861/1034;
  background: url(../img/tsurukona/natural-bg02.png) no-repeat center center/cover;
}

.natural__en {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-60%);
  width: 97%;
}

.natural__heading {
  font-size: clamp(0px, calc(41 * var(--scale)), calc(41px * var(--max)));
  font-weight: 500;
  font-family: "Zen Maru Gothic", sans-serif;
  white-space: nowrap;
  position: relative;
}
.natural__heading::before {
  content: "";
  position: absolute;
  background: url(../img/tsurukona/dec01.svg) no-repeat center center/100%;
  aspect-ratio: 1466/76;
  transform: translate(-52%, -31%);
  width: 100%;
  left: 50%;
  top: 100%;
}
.natural__heading span {
  position: relative;
  z-index: 10;
}

.natural__text {
  font-size: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  line-height: 1.65;
  margin-left: 7.6em;
  margin-top: 1.5em;
}
.natural__text p:nth-child(2) {
  margin: clamp(0px, calc(8 * var(--scale)), calc(8px * var(--max))) 0;
  line-height: 1.5;
}
.natural__text p:nth-child(2) span {
  font-weight: 500;
  display: inline-block;
}
.natural__text p:nth-child(3) {
  line-height: 1.5;
}

.natural__catch {
  margin-top: 0.6em;
  font-size: clamp(0px, calc(30 * var(--scale)), calc(30px * var(--max)));
  font-weight: 500;
  line-height: 1.2333333333;
  font-family: "Zen Maru Gothic", sans-serif;
  color: #2f7b89;
  margin-left: 5.3em;
}
.natural__catch span {
  display: block;
}
.natural__catch span:nth-child(2) {
  padding-left: 0.5em;
}
.natural__catch span:nth-child(3) {
  padding-left: 1em;
}

/*------------------------------

------------------------------*/
.texture {
  margin: clamp(0px, calc(40 * var(--scale)), calc(40px * var(--max))) auto 0;
}
@media (max-width: 767px) {
  .texture {
    overflow-x: clip;
    margin-top: 9%;
  }
}

.texture__wrap {
  background: rgba(106, 189, 197, 0.7);
  width: clamp(0px, calc(570 * var(--scale)), calc(570px * var(--max)));
  border-radius: clamp(0px, calc(21 * var(--scale)), calc(21px * var(--max)));
  position: relative;
  padding-top: clamp(0px, calc(273 * var(--scale)), calc(273px * var(--max)));
  padding-bottom: clamp(0px, calc(20 * var(--scale)), calc(20px * var(--max)));
  margin: 0 auto;
}
@media (max-width: 767px) {
  .texture__wrap {
    border-radius: clamp(0px, calc(21 * var(--scale02)), calc(21px * var(--max)));
    width: 94%;
  }
}

.texture__en {
  position: absolute;
  top: 0%;
  left: 79%;
  transform: translate(-50%, 30%);
  width: 38%;
}

.texture__heading {
  position: absolute;
  top: clamp(0px, calc(360 * var(--scale)), calc(360px * var(--max)));
  left: 54%;
  transform: translate(-50%, -50%);
  width: 121%;
}

.texture__content {
  position: relative;
  margin-left: auto;
  margin-right: 1%;
  width: 67%;
}
.texture__content::before {
  content: "";
  position: absolute;
  background: url(../img/tsurukona/texture01.webp) no-repeat center center/100%;
  aspect-ratio: 1/1;
  transform: translate(-59.1%, -57%);
  width: 138%;
  left: 50%;
  top: 50%;
}
.texture__content > * {
  position: relative;
  z-index: 10;
}

.texture__text {
  color: #595757;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: -0.05em;
}
.texture__text > span {
  background: rgba(255, 255, 255, 0.6);
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  padding: 0 0.3em;
  font-feature-settings: "halt";
}
.texture__text > span:nth-child(3), .texture__text > span:nth-child(5) {
  margin-top: 1.9em;
}

.texture__bottom {
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-family: "Zen Maru Gothic", sans-serif;
  display: flex;
  align-items: center;
  margin: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max))) auto 0;
}
@media (max-width: 767px) {
  .texture__bottom {
    margin-top: clamp(0px, calc(36 * var(--scale02)), calc(36px * var(--max)));
  }
}

.texture__image {
  width: 39%;
  margin-left: 7%;
}

.texture__detail {
  line-height: 1.6;
  margin-left: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
  margin-top: clamp(0px, calc(23 * var(--scale)), calc(23px * var(--max)));
}

/*------------------------------
closing
------------------------------*/
.closing {
  padding: clamp(0px, calc(50 * var(--scale)), calc(50px * var(--max))) 0 clamp(0px, calc(70 * var(--scale)), calc(70px * var(--max)));
  position: relative;
}
.closing::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 3%);
  background: url(../img/tsurukona/closing-bg.png) no-repeat center center/contain;
  width: clamp(0px, calc(834 * var(--scale)), calc(834px * var(--max)));
  aspect-ratio: 1670/1607;
  z-index: -1;
}
@media (max-width: 767px) {
  .closing {
    overflow-x: clip;
    padding: 21% 0 14%;
  }
  .closing::before {
    background: url(../img/tsurukona/closing-bg_sp.png) no-repeat center center/contain;
    aspect-ratio: 1271/1119;
    width: 165%;
    transform: translate(-52%, 10%);
  }
}

@media (min-width: 768px) {
  .closing__inner {
    width: clamp(0px, calc(475 * var(--scale)), calc(475px * var(--max)));
    max-width: 475px;
  }
}

.closing__title {
  font-size: clamp(0px, calc(34 * var(--scale)), calc(34px * var(--max)));
  font-weight: 400;
  font-family: "Zen Maru Gothic", sans-serif;
  text-align: center;
  padding: 0.76em 0 1.06em;
  border-top: 1px solid #6abdc5;
  border-bottom: 1px solid #6abdc5;
}

.closing__text {
  margin-top: 1.6em;
  font-size: clamp(0px, calc(24 * var(--scale)), calc(24px * var(--max)));
  font-weight: 400;
  line-height: 1.6666666667;
  text-align: center;
}
.closing__text span {
  display: block;
}
.closing__text span:nth-child(n+2) {
  margin-top: 0.7em;
}

.closing__image {
  display: block;
  width: clamp(0px, calc(400 * var(--scale)), calc(400px * var(--max)));
  margin: 0 auto;
  margin-top: 9%;
}
@media (max-width: 767px) {
  .closing__image {
    width: 74%;
  }
}

.closing__catch {
  font-size: clamp(0px, calc(27 * var(--scale)), calc(27px * var(--max)));
  font-weight: 500;
  line-height: 1.4814814815;
  letter-spacing: 0.05em;
  text-align: center;
  color: #6abdc5;
  margin-top: 0.6em;
}
/*# sourceMappingURL=tsurukona.css.map */