@charset "UTF-8";
/* common
================================================== */
/*
 * media query
**/
/**
 * フォントサイズの可変
 *
 * @param {number} $fontsize 基準となるフォントサイズ
 * @param {number} $basewidth 基準となる幅
 * @param {number} $maxwidth フォントサイズの拡大をとめる幅（未指定時は上限なし）
 * @param {number} $minwidth フォントサイズの縮小をとめる幅（未指定時は下限なし）
 */
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}

@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

body {
  overscroll-behavior-y: none;
  overscroll-behavior: none;
}
body * {
  box-sizing: border-box;
}
body a {
  text-decoration: none;
  color: inherit;
}

:root {
  --greentext: #256A54;
  --browntext: #3F3F3F;
}

.rohto2020 {
  position: relative;
  font-family: "Noto Serif JP", sans-serif !important;
}

.keyvisual {
  width: 100%;
}
.keyvisual .keyvisual__heading {
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
}
.keyvisual .keyvisual__image {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.navigation {
  width: 100%;
  background: linear-gradient(180deg, #ABB988 0%, #499C7A 50.96%, #1F7964 100%);
}
.navigation {
  height: 18.6666666667vw;
}
@media screen and (min-width: 768px) {
  .navigation {
    height: 7.6134699854vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation {
    height: 104px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation {
    height: 58.4699267936px;
  }
}
.navigation .navigation__list {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex: 1;
}
.navigation .navigation__item {
  display: flex;
  justify-content: center;
  position: relative;
  flex: 1;
  width: 50%;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__item {
    flex: unset;
    width: auto;
  }
}
.navigation .navigation__item:nth-child(2)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: #fff;
  opacity: 0.8;
}
.navigation .navigation__item:nth-child(2)::before {
  width: 0.1333333333vw;
}
.navigation .navigation__item:nth-child(2)::before {
  height: 10.6666666667vw;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__item:nth-child(2)::before {
    width: 0.0732064422vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__item:nth-child(2)::before {
    width: 1px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__item:nth-child(2)::before {
    width: 0.5622108346px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__item:nth-child(2)::before {
    height: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__item:nth-child(2)::before {
    height: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__item:nth-child(2)::before {
    height: 33.7326500732px;
  }
}
.navigation .navigation__link {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.navigation .navigation__link {
  padding-top: 4.8vw;
}
.navigation .navigation__link {
  padding-bottom: 4.8vw;
}
.navigation .navigation__link {
  padding-left: 0;
  padding-right: 0;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link {
    padding-left: 10.2489019034vw;
  }
  .navigation .navigation__link {
    padding-top: 0;
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__link {
    padding-left: 140px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__link {
    padding-left: 78.7095168375px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link {
    padding-right: 10.2489019034vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__link {
    padding-right: 140px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__link {
    padding-right: 78.7095168375px;
  }
}
.navigation .navigation__link:has(.navigation__image01):active {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/navigation__image01--active.sp.png);
}
.navigation .navigation__link:has(.navigation__image01):active {
  background-size: 21.3333333333vw;
}
.navigation .navigation__link:has(.navigation__image01):active .navigation__image01 {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link:has(.navigation__image01) {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/navigation__image01--hover.png);
  }
  .navigation .navigation__link:has(.navigation__image01) {
    background-size: 6.5153733529vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__link:has(.navigation__image01) {
    background-size: 89px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__link:has(.navigation__image01) {
    background-size: 50.0367642753px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link:has(.navigation__image01):hover .navigation__image01 {
    opacity: 0;
  }
  .navigation .navigation__link:has(.navigation__image01):active {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/navigation__image01--active.png);
  }
  .navigation .navigation__link:has(.navigation__image01):active {
    background-size: 6.5153733529vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__link:has(.navigation__image01):active {
    background-size: 89px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__link:has(.navigation__image01):active {
    background-size: 50.0367642753px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link:has(.navigation__image01):active .navigation__image01 {
    opacity: 0;
  }
}
.navigation .navigation__link:has(.navigation__image02):active {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/navigation__image02--active.sp.png);
}
.navigation .navigation__link:has(.navigation__image02):active {
  background-size: 21.3333333333vw;
}
.navigation .navigation__link:has(.navigation__image02):active .navigation__image02 {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link:has(.navigation__image02) {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/navigation__image02--hover.png);
  }
  .navigation .navigation__link:has(.navigation__image02) {
    background-size: 10.980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__link:has(.navigation__image02) {
    background-size: 150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__link:has(.navigation__image02) {
    background-size: 84.331625183px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link:has(.navigation__image02):hover .navigation__image02 {
    opacity: 0;
  }
  .navigation .navigation__link:has(.navigation__image02):active {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/navigation__image02--active.png);
  }
  .navigation .navigation__link:has(.navigation__image02):active {
    background-size: 10.980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__link:has(.navigation__image02):active {
    background-size: 150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__link:has(.navigation__image02):active {
    background-size: 84.331625183px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__link:has(.navigation__image02):active .navigation__image02 {
    opacity: 0;
  }
}
.navigation .navigation__image01 {
  display: block;
  transition: opacity 0.2s ease;
}
.navigation .navigation__image01 {
  width: 21.3333333333vw;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__image01 {
    width: 6.5153733529vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__image01 {
    width: 89px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__image01 {
    width: 50.0367642753px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__image01 {
    padding-top: 1.6837481698vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__image01 {
    padding-top: 23px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__image01 {
    padding-top: 12.9308491947px;
  }
}
@media screen and (min-width: 768px) {
  .navigation .navigation__image01 {
    padding-bottom: 1.6837481698vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__image01 {
    padding-bottom: 23px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__image01 {
    padding-bottom: 12.9308491947px;
  }
}
.navigation .navigation__image02 {
  display: block;
  transition: opacity 0.2s ease;
}
.navigation .navigation__image02 {
  width: 21.3333333333vw;
}
@media screen and (min-width: 768px) {
  .navigation .navigation__image02 {
    width: 10.980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .navigation .navigation__image02 {
    width: 150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .navigation .navigation__image02 {
    width: 84.331625183px;
  }
}

.trouble {
  background: linear-gradient(180deg, #2A836A 12.61%, #55A88C 37.84%, #B2E7C7 86.47%, #E5F4BC 100%);
  overflow-x: hidden;
  position: relative;
  margin-top: -1px;
  clip-path: polygon(0% 0%, 100% 0, 100% 90%, 50% 100%, 0 90%);
}
.trouble {
  padding-top: 21.0666666667vw;
}
.trouble {
  padding-bottom: 20vw;
}
@media screen and (min-width: 768px) {
  .trouble {
    clip-path: polygon(0% 0%, 100% 0, 100% 87%, 50% 100%, 0 87%);
  }
  .trouble {
    padding-top: 10.980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble {
    padding-top: 150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble {
    padding-top: 84.331625183px;
  }
}
@media screen and (min-width: 768px) {
  .trouble {
    padding-bottom: 10.980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble {
    padding-bottom: 150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble {
    padding-bottom: 84.331625183px;
  }
}
.trouble .trouble__decoration {
  position: absolute;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
.trouble .trouble__decoration {
  top: 10vw;
}
.trouble .trouble__decoration {
  left: -57.3333333333vw;
}
.trouble .trouble__decoration {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/trouble__decoration.sp.svg);
}
.trouble .trouble__decoration {
  width: 213.3333333333vw;
}
.trouble .trouble__decoration {
  height: 12.1333333333vw;
}
@media screen and (min-width: 768px) {
  .trouble .trouble__decoration {
    top: 5.8565153734vw;
  }
  .trouble .trouble__decoration {
    left: 50%;
    transform: translateX(-50%);
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/trouble__decoration.svg);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__decoration {
    top: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__decoration {
    top: 44.9768667643px;
  }
}
@media screen and (min-width: 768px) {
  .trouble .trouble__decoration {
    width: 117.1303074671vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__decoration {
    width: 1600px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__decoration {
    width: 899.5373352855px;
  }
}
@media screen and (min-width: 768px) {
  .trouble .trouble__decoration {
    height: 6.6617862372vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__decoration {
    height: 91px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__decoration {
    height: 51.1611859444px;
  }
}
.trouble .trouble__heading {
  font-weight: 500;
  color: #FFFFFF;
  text-align: center;
  text-shadow: 0px 0px 21px rgba(53, 139, 114, 0.00529412);
}
.trouble .trouble__heading {
  font-size: 8vw;
}
.trouble .trouble__heading {
  line-height: 9.0666666667vw;
}
@media screen and (min-width: 768px) {
  .trouble .trouble__heading {
    font-size: 3.074670571vw;
  }
  .trouble .trouble__heading {
    line-height: unset;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__heading {
    font-size: 42px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__heading {
    font-size: 23.6128550512px;
  }
}
.trouble .trouble__heading--sub {
  font-weight: 500;
  text-align: center;
  color: #FFF;
  text-shadow: 0px 0px 21px rgba(53, 139, 114, 0.00529412);
}
.trouble .trouble__heading--sub {
  font-size: 4.2666666667vw;
}
.trouble .trouble__heading--sub {
  padding-top: 6.6666666667vw;
}
@media screen and (min-width: 768px) {
  .trouble .trouble__heading--sub {
    font-size: 2.0497803807vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__heading--sub {
    font-size: 28px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__heading--sub {
    font-size: 15.7419033675px;
  }
}
@media screen and (min-width: 768px) {
  .trouble .trouble__heading--sub {
    padding-top: 0.2196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__heading--sub {
    padding-top: 3px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__heading--sub {
    padding-top: 1.6866325037px;
  }
}
.trouble .trouble__image--picture {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .trouble .trouble__image--picture {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__image--picture {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__image--picture {
    padding-top: 11.2442166911px;
  }
}
.trouble .trouble__image {
  width: 93.3333333333vw;
}
.trouble .trouble__image {
  padding-top: 6vw;
}
@media screen and (min-width: 768px) {
  .trouble .trouble__image {
    width: 37.9941434846vw;
  }
  .trouble .trouble__image {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .trouble .trouble__image {
    width: 519px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .trouble .trouble__image {
    width: 291.7874231332px;
  }
}

.solution {
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #DCEFDB 0%, #F9FBE9 13.33%, #DDFEDE 35.09%, #CEF3E2 88.42%);
  overflow-x: hidden;
}
.solution {
  margin-top: -26.6666666667vw;
}
.solution {
  padding-top: 13.3333333333vw;
}
@media screen and (min-width: 768px) {
  .solution {
    margin-top: -10.980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution {
    margin-top: -150px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution {
    margin-top: -84.331625183px;
  }
}
@media screen and (min-width: 768px) {
  .solution {
    padding-top: 14.6412884334vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution {
    padding-top: 200px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution {
    padding-top: 112.4421669107px;
  }
}
.solution .solution__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  position: relative;
  z-index: 10;
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/solution__inner--background.sp.png);
}
.solution .solution__inner {
  width: 92vw;
}
.solution .solution__inner {
  height: 296.6666666667vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__inner {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/solution__inner--background.png);
  }
  .solution .solution__inner {
    margin-top: -9.5168374817vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__inner {
    margin-top: -130px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__inner {
    margin-top: -73.0874084919px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__inner {
    width: 73.2064421669vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__inner {
    width: 1000px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__inner {
    width: 562.2108345534px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__inner {
    height: 143.1918008785vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__inner {
    height: 1956px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__inner {
    height: 1099.6843923865px;
  }
}
.solution .solution__heading--image {
  width: 67.2vw;
}
.solution .solution__heading--image {
  padding-top: 21.3333333333vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__heading--image {
    width: 29.5754026354vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__heading--image {
    width: 404px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__heading--image {
    width: 227.1331771596px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__heading--image {
    padding-top: 9.5168374817vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__heading--image {
    padding-top: 130px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__heading--image {
    padding-top: 73.0874084919px;
  }
}
.solution .solution__cause--image {
  width: 80vw;
}
.solution .solution__cause--image {
  padding-top: 8vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__cause--image {
    box-sizing: content-box;
  }
  .solution .solution__cause--image {
    width: 37.9941434846vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__cause--image {
    width: 519px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__cause--image {
    width: 291.7874231332px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__cause--image {
    height: 20.2781844802vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__cause--image {
    height: 277px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__cause--image {
    height: 155.7324011713px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__cause--image {
    padding-top: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__cause--image {
    padding-top: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__cause--image {
    padding-top: 33.7326500732px;
  }
}
.solution .solution__cause--text {
  font-weight: 500;
  color: var(--greentext);
  text-align: center;
}
.solution .solution__cause--text {
  font-size: 3.7333333333vw;
}
.solution .solution__cause--text {
  line-height: 5.3333333333vw;
}
.solution .solution__cause--text {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__cause--text {
    font-size: 1.756954612vw;
  }
  .solution .solution__cause--text {
    line-height: unset;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__cause--text {
    font-size: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__cause--text {
    font-size: 13.4930600293px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__cause--text {
    padding-top: 2.7086383602vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__cause--text {
    padding-top: 37px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__cause--text {
    padding-top: 20.8018008785px;
  }
}
.solution .solution__hairmilk--heading--image {
  width: 80vw;
}
.solution .solution__hairmilk--heading--image {
  padding-top: 10.6666666667vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--heading--image {
    width: 47.5841874085vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--heading--image {
    width: 650px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--heading--image {
    width: 365.4370424597px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--heading--image {
    padding-top: 7.3206442167vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--heading--image {
    padding-top: 100px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--heading--image {
    padding-top: 56.2210834553px;
  }
}
.solution .solution__hairmilk--heading--sub {
  text-align: center;
  letter-spacing: -0.1em;
  color: var(--browntext);
}
.solution .solution__hairmilk--heading--sub {
  font-size: 6.4vw;
}
.solution .solution__hairmilk--heading--sub {
  line-height: 8.2666666667vw;
}
.solution .solution__hairmilk--heading--sub {
  padding-top: 6vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--heading--sub {
    font-size: 2.9282576867vw;
  }
  .solution .solution__hairmilk--heading--sub {
    letter-spacing: -0.13em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--heading--sub {
    font-size: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--heading--sub {
    font-size: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--heading--sub {
    line-height: 3.953147877vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--heading--sub {
    line-height: 54px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--heading--sub {
    line-height: 30.3593850659px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--heading--sub {
    padding-top: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--heading--sub {
    padding-top: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--heading--sub {
    padding-top: 33.7326500732px;
  }
}
.solution .solution__hairmilk--image {
  width: 22.9333333333vw;
}
.solution .solution__hairmilk--image {
  padding-top: 6.6666666667vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--image {
    width: 9.4436310395vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--image {
    width: 129px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--image {
    width: 72.5251976574px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--image {
    padding-top: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--image {
    padding-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--image {
    padding-top: 22.4884333821px;
  }
}
.solution .solution__hairmilk--text {
  font-weight: 500;
  color: var(--browntext);
  text-align: center;
}
.solution .solution__hairmilk--text {
  font-size: 3.7333333333vw;
}
.solution .solution__hairmilk--text {
  line-height: 5.6vw;
}
.solution .solution__hairmilk--text {
  padding-top: 4.6666666667vw;
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--text {
    font-size: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--text {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--text {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--text {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--text {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--text {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .solution .solution__hairmilk--text {
    padding-top: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .solution__hairmilk--text {
    padding-top: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .solution__hairmilk--text {
    padding-top: 17.9907467057px;
  }
}
.solution .common__button--wrapper {
  padding-top: 4.2666666667vw;
}
@media screen and (min-width: 768px) {
  .solution .common__button--wrapper {
    padding-top: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .solution .common__button--wrapper {
    padding-top: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .solution .common__button--wrapper {
    padding-top: 17.9907467057px;
  }
}

.points {
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #CEF4E2 0%, #71CBC5 32.21%, #26C094 61.54%, #34896D 100%);
}
.points {
  padding-top: 13.3333333333vw;
}
.points {
  padding-bottom: 14.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points {
    padding-top: 8.4187408492vw;
  }
  .points {
    padding-bottom: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points {
    padding-top: 115px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points {
    padding-top: 64.6542459736px;
  }
}
.points .points__inner {
  background-repeat: no-repeat;
  background-position: top center;
  box-shadow: 0px 0px 9.6px 0.4px rgba(53, 139, 114, 0.16);
  background-color: #FFFFFF;
  outline-style: solid;
  outline-color: rgb(97, 175, 143);
}
.points .points__inner {
  border-radius: 5.3333333333vw;
}
.points .points__inner {
  outline-width: 0.2666666667vw;
}
.points .points__inner {
  outline-offset: -1.3333333333vw;
}
.points .points__inner {
  width: 94.6666666667vw;
}
.points .points__inner {
  padding-top: 16.6666666667vw;
}
.points .points__inner {
  padding-bottom: 16vw;
}
@media screen and (min-width: 768px) {
  .points .points__inner {
    border-radius: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__inner {
    border-radius: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__inner {
    border-radius: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__inner {
    outline-width: 0.1464128843vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__inner {
    outline-width: 2px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__inner {
    outline-width: 1.1244216691px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__inner {
    outline-offset: -0.7320644217vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__inner {
    outline-offset: -10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__inner {
    outline-offset: -5.6221083455px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__inner {
    width: 74.6705710102vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__inner {
    width: 1020px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__inner {
    width: 573.4550512445px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__inner {
    padding-top: 9.0043923865vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__inner {
    padding-top: 123px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__inner {
    padding-top: 69.1519326501px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__inner {
    padding-bottom: 8.78477306vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__inner {
    padding-bottom: 120px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__inner {
    padding-bottom: 67.4653001464px;
  }
}
.points .points__heading--image {
  margin: 0 auto;
}
.points .points__heading--image {
  width: 28.8vw;
}
@media screen and (min-width: 768px) {
  .points .points__heading--image {
    width: 12.9575402635vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__heading--image {
    width: 177px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__heading--image {
    width: 99.511317716px;
  }
}
.points .points__list {
  padding-left: 1.6vw;
}
.points .points__list {
  padding-right: 1.6vw;
}
@media screen and (min-width: 768px) {
  .points .points__list {
    padding-left: 12.9575402635vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__list {
    padding-left: 177px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__list {
    padding-left: 99.511317716px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__list {
    padding-right: 12.9575402635vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__list {
    padding-right: 177px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__list {
    padding-right: 99.511317716px;
  }
}
.points .points__item:nth-child(1) {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item:nth-child(1) {
    padding-top: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item:nth-child(1) {
    padding-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item:nth-child(1) {
    padding-top: 22.4884333821px;
  }
}
.points .points__item:nth-child(2) {
  padding-top: 12vw;
}
@media screen and (min-width: 768px) {
  .points .points__item:nth-child(2) {
    padding-top: 7.1010248902vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item:nth-child(2) {
    padding-top: 97px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item:nth-child(2) {
    padding-top: 54.5344509517px;
  }
}
.points .points__item:nth-child(3) {
  padding-top: 10.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item:nth-child(3) {
    padding-top: 5.8565153734vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item:nth-child(3) {
    padding-top: 80px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item:nth-child(3) {
    padding-top: 44.9768667643px;
  }
}
.points .points__item:nth-child(4) {
  padding-top: 14.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item:nth-child(4) {
    padding-top: 8.0527086384vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item:nth-child(4) {
    padding-top: 110px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item:nth-child(4) {
    padding-top: 61.8431918009px;
  }
}
.points .points__item--number {
  display: flex;
  justify-content: center;
}
.points .points__item--number--image {
  width: 20vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--number--image {
    width: 9.5168374817vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--number--image {
    width: 130px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--number--image {
    width: 73.0874084919px;
  }
}
.points .points__item--heading--image {
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .points .points__item--heading--image {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--heading--image {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--heading--image {
    padding-top: 11.2442166911px;
  }
}
.points .points__item--heading--image01 {
  width: 86.4vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--heading--image01 {
    width: 36.6032210835vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--heading--image01 {
    width: 500px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--heading--image01 {
    width: 281.1054172767px;
  }
}
.points .points__item--heading--image02 {
  width: 62.1333333333vw;
}
.points .points__item--heading--image02 {
  padding-top: 1.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--heading--image02 {
    width: 23.4260614934vw;
  }
  .points .points__item--heading--image02 {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--heading--image02 {
    width: 320px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--heading--image02 {
    width: 179.9074670571px;
  }
}
.points .points__item--heading--image03 {
  width: 60.2666666667vw;
}
.points .points__item--heading--image03 {
  padding-top: 1.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--heading--image03 {
    width: 40.2635431918vw;
  }
  .points .points__item--heading--image03 {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--heading--image03 {
    width: 550px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--heading--image03 {
    width: 309.2159590044px;
  }
}
.points .points__item--heading--image04 {
  width: 82.9333333333vw;
}
.points .points__item--heading--image04 {
  padding-top: 1.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--heading--image04 {
    width: 35.1390922401vw;
  }
  .points .points__item--heading--image04 {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--heading--image04 {
    width: 480px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--heading--image04 {
    width: 269.8612005857px;
  }
}
.points .points__item--text {
  font-weight: 500;
  color: var(--browntext);
  text-align: center;
}
.points .points__item--text {
  font-size: 3.7333333333vw;
}
.points .points__item--text {
  line-height: 6.4vw;
}
.points .points__item--text {
  padding-top: 4vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--text {
    font-size: 1.4641288433vw;
  }
  .points .points__item--text {
    letter-spacing: -0.05em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--text {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--text {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--text {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--text {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--text {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--text {
    padding-top: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--text {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--text {
    padding-top: 16.8663250366px;
  }
}
.points .points__item--text--sub {
  font-family: "Noto Sans JP";
  color: var(--browntext);
  font-weight: 400;
  text-align: center;
}
.points .points__item--text--sub {
  font-size: 2.6666666667vw;
}
.points .points__item--text--sub {
  line-height: 3.2vw;
}
.points .points__item--text--sub {
  padding-top: 4vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--text--sub {
    font-size: 1.1713030747vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--text--sub {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--text--sub {
    font-size: 8.9953733529px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--text--sub {
    line-height: 1.3909224012vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--text--sub {
    line-height: 19px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--text--sub {
    line-height: 10.6820058565px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--text--sub {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--text--sub {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--text--sub {
    padding-top: 11.2442166911px;
  }
}
.points .points__item--annotation--list {
  width: -moz-fit-content;
  width: fit-content;
  margin-left: auto;
}
.points .points__item--annotation--list {
  padding-top: 1.8666666667vw;
}
.points .points__item--annotation--list {
  padding-right: 5.0666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--annotation--list {
    padding-top: 1.0980966325vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--annotation--list {
    padding-top: 15px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--annotation--list {
    padding-top: 8.4331625183px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--annotation--list {
    padding-right: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--annotation--list {
    padding-right: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--annotation--list {
    padding-right: 11.2442166911px;
  }
}
.points .points__item--annotation--item {
  font-family: "Noto Sans JP";
  font-weight: 400;
  color: var(--browntext);
  text-align: right;
}
.points .points__item--annotation--item {
  font-size: 2.6666666667vw;
}
.points .points__item--annotation--item {
  line-height: 3.2vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--annotation--item {
    font-size: 1.1713030747vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--annotation--item {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--annotation--item {
    font-size: 8.9953733529px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--annotation--item {
    line-height: 1.3909224012vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--annotation--item {
    line-height: 19px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--annotation--item {
    line-height: 10.6820058565px;
  }
}
.points .points__item--cmc {
  padding-top: 8vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc {
    padding-top: 3.6603221083vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc {
    padding-top: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc {
    padding-top: 28.1105417277px;
  }
}
.points .points__item--cmc--text {
  font-weight: 500;
  text-align: center;
  color: var(--browntext);
}
.points .points__item--cmc--text {
  font-size: 3.7333333333vw;
}
.points .points__item--cmc--text {
  line-height: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc--text {
    font-size: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc--text {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc--text {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc--text {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc--text {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc--text {
    line-height: 16.304114202px;
  }
}
.points .points__item--cmc--bold {
  font-weight: 500;
  text-align: center;
}
.points .points__item--cmc--bold {
  font-size: 5.3333333333vw;
}
.points .points__item--cmc--bold {
  line-height: 7.4666666667vw;
}
.points .points__item--cmc--bold {
  padding-left: 0.8vw;
}
.points .points__item--cmc--bold {
  padding-right: 0.8vw;
}
.points .points__item--cmc--bold {
  color: #256A54;
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/gold-marker.sp.png);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc--bold {
    font-size: 2.196193265vw;
  }
  .points .points__item--cmc--bold {
    color: #008365;
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/gold-marker.png);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc--bold {
    font-size: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc--bold {
    font-size: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc--bold {
    line-height: 3.1478770132vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc--bold {
    line-height: 43px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc--bold {
    line-height: 24.1750658858px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc--bold {
    padding-left: 0.439238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc--bold {
    padding-left: 6px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc--bold {
    padding-left: 3.3732650073px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--cmc--bold {
    padding-right: 0.439238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--cmc--bold {
    padding-right: 6px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--cmc--bold {
    padding-right: 3.3732650073px;
  }
}
.points .points__item--explanation {
  background-color: #EDFAF5;
}
.points .points__item--explanation {
  border-radius: 2.6666666667vw;
}
.points .points__item--explanation {
  margin-top: 4vw;
}
.points .points__item--explanation {
  padding-top: 8vw;
}
.points .points__item--explanation {
  padding-bottom: 8vw;
}
.points .points__item--explanation {
  margin-left: 4.6666666667vw;
}
.points .points__item--explanation {
  margin-right: 4.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation {
    border-radius: 1.4641288433vw;
  }
  .points .points__item--explanation {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation {
    border-radius: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation {
    border-radius: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation {
    margin-top: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation {
    margin-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation {
    margin-top: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation {
    padding-top: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation {
    padding-top: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation {
    padding-bottom: 2.635431918vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation {
    padding-bottom: 36px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation {
    padding-bottom: 20.2395900439px;
  }
}
.points .points__item--explanation--term {
  font-weight: 500;
  color: var(--greentext);
  text-align: center;
}
.points .points__item--explanation--term {
  font-size: 5.3333333333vw;
}
.points .points__item--explanation--term {
  line-height: 7.6vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation--term {
    font-size: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation--term {
    font-size: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation--term {
    font-size: 17.9907467057px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation--term {
    line-height: 3.3674963397vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation--term {
    line-height: 46px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation--term {
    line-height: 25.8616983895px;
  }
}
.points .points__item--explanation--description {
  font-weight: 500;
  color: var(--greentext);
  text-align: center;
}
.points .points__item--explanation--description {
  font-size: 3.7333333333vw;
}
.points .points__item--explanation--description {
  line-height: 5.3333333333vw;
}
.points .points__item--explanation--description {
  padding-top: 1.0666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation--description {
    font-size: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation--description {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation--description {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation--description {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation--description {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation--description {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--explanation--description {
    padding-top: 0.5856515373vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--explanation--description {
    padding-top: 8px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--explanation--description {
    padding-top: 4.4976866764px;
  }
}
.points .points__item--example {
  display: flex;
}
.points .points__item--example {
  gap: 2.6666666667vw;
}
.points .points__item--example {
  padding-top: 8vw;
}
.points .points__item--example {
  margin-left: 4.6666666667vw;
}
.points .points__item--example {
  margin-right: 4.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--example {
    gap: 1.4641288433vw;
  }
  .points .points__item--example {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--example {
    gap: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--example {
    gap: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--example {
    padding-top: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--example {
    padding-top: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--example {
    padding-top: 33.7326500732px;
  }
}
.points .points__item--example--text {
  font-family: "NotoSansJP";
  text-align: right;
  line-height: 1.2;
  color: rgb(63, 63, 63);
}
.points .points__item--example--text {
  font-size: 2.4vw;
}
.points .points__item--example--text {
  padding-top: 1.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--example--text {
    font-size: 0.9516837482vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--example--text {
    font-size: 13px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--example--text {
    font-size: 7.3087408492px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--example--text {
    padding-top: 0.7320644217vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--example--text {
    padding-top: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--example--text {
    padding-top: 5.6221083455px;
  }
}
.points .points__item--list {
  display: flex;
  flex-direction: column;
}
.points .points__item--list {
  gap: 1.0666666667vw;
}
.points .points__item--list {
  padding-top: 5.3333333333vw;
}
.points .points__item--list {
  padding-left: 4.1333333333vw;
}
.points .points__item--list {
  padding-right: 4.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--list {
    gap: 0.439238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--list {
    gap: 6px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--list {
    gap: 3.3732650073px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--list {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--list {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--list {
    padding-top: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--list {
    padding-left: 3.6603221083vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--list {
    padding-left: 50px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--list {
    padding-left: 28.1105417277px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--list {
    padding-right: 6.2225475842vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--list {
    padding-right: 85px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--list {
    padding-right: 47.787920937px;
  }
}
.points .points__item--item {
  position: relative;
  font-weight: 500;
  color: #256A54;
}
.points .points__item--item {
  font-size: 3.7333333333vw;
}
.points .points__item--item {
  line-height: 5.3333333333vw;
}
.points .points__item--item {
  padding-left: 6.6666666667vw;
}
.points .points__item--item {
  letter-spacing: -0.13em;
}
.points .points__item--item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/points__item--item--liststyle.sp.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.points .points__item--item::before {
  width: 5.2vw;
}
.points .points__item--item::before {
  height: 4.5333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--item {
    font-size: 1.4641288433vw;
  }
  .points .points__item--item {
    text-align: left;
    letter-spacing: -0.14em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--item {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--item {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--item {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--item {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--item {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--item {
    padding-left: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--item {
    padding-left: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--item {
    padding-left: 17.9907467057px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--item::before {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/points__item--item--liststyle.png);
  }
  .points .points__item--item::before {
    width: 1.756954612vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--item::before {
    width: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--item::before {
    width: 13.4930600293px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--item::before {
    height: 1.6105417277vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--item::before {
    height: 22px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--item::before {
    height: 12.3686383602px;
  }
}
.points .points__item--caption {
  font-weight: 500;
  color: var(--browntext);
  text-align: right;
}
.points .points__item--caption {
  font-size: 2.9333333333vw;
}
.points .points__item--caption {
  line-height: 4.2666666667vw;
}
.points .points__item--caption {
  padding-top: 1.3333333333vw;
}
.points .points__item--caption {
  padding-right: 5.3333333333vw;
}
.points .points__item--caption {
  letter-spacing: -0.1em;
}
@media screen and (min-width: 768px) {
  .points .points__item--caption {
    font-size: 1.1713030747vw;
  }
  .points .points__item--caption {
    letter-spacing: unset;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--caption {
    font-size: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--caption {
    font-size: 8.9953733529px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--caption {
    line-height: 1.6837481698vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--caption {
    line-height: 23px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--caption {
    line-height: 12.9308491947px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--caption {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--caption {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--caption {
    padding-top: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--caption {
    padding-right: 7.3206442167vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--caption {
    padding-right: 100px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--caption {
    padding-right: 56.2210834553px;
  }
}
.points .points__item--image01 {
  margin: 0 auto;
}
.points .points__item--image01 {
  width: 80vw;
}
.points .points__item--image01 {
  padding-top: 8vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--image01 {
    width: 43.411420205vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image01 {
    width: 593px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image01 {
    width: 333.3910248902px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--image01 {
    padding-top: 3.074670571vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image01 {
    padding-top: 42px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image01 {
    padding-top: 23.6128550512px;
  }
}
.points .points__item--image02 {
  margin: 0 auto;
}
.points .points__item--image02 {
  width: 84.1333333333vw;
}
.points .points__item--image02 {
  padding-top: 2.6666666667vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--image02 {
    width: 45.3879941435vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image02 {
    width: 620px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image02 {
    width: 348.5707174231px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--image02 {
    padding-top: 0.7320644217vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image02 {
    padding-top: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image02 {
    padding-top: 5.6221083455px;
  }
}
.points .points__item--image03 {
  margin: 0 auto;
}
.points .points__item--image03 {
  width: 83.2vw;
}
.points .points__item--image03 {
  padding-top: 3.3333333333vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--image03 {
    width: 42.2401171303vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image03 {
    width: 577px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image03 {
    width: 324.3956515373px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--image03 {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image03 {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image03 {
    padding-top: 11.2442166911px;
  }
}
.points .points__item--image04 {
  margin: 0 auto;
}
.points .points__item--image04 {
  width: 63.3333333333vw;
}
.points .points__item--image04 {
  padding-top: 4vw;
}
@media screen and (min-width: 768px) {
  .points .points__item--image04 {
    width: 26.2811127379vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image04 {
    width: 359px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image04 {
    width: 201.8336896047px;
  }
}
@media screen and (min-width: 768px) {
  .points .points__item--image04 {
    padding-top: 2.635431918vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .points .points__item--image04 {
    padding-top: 36px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .points .points__item--image04 {
    padding-top: 20.2395900439px;
  }
}

.howto {
  display: flex;
  justify-content: center;
  background: linear-gradient(180deg, #34896D 0%, #D8DC9F 50%, #FFF 100%);
}
@media screen and (min-width: 768px) {
  .howto {
    padding-top: 8.4187408492vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto {
    padding-top: 115px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto {
    padding-top: 64.6542459736px;
  }
}
.howto .howto__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
  background-position: top center;
  box-shadow: 0px 0px 9.6px 0.4px rgba(53, 139, 114, 0.16);
  background-color: #FFFFFF;
  outline-style: solid;
  outline-color: rgb(97, 175, 143);
}
.howto .howto__inner {
  width: 94.6666666667vw;
}
.howto .howto__inner {
  border-radius: 5.3333333333vw;
}
.howto .howto__inner {
  outline-width: 0.2666666667vw;
}
.howto .howto__inner {
  outline-offset: -1.3333333333vw;
}
.howto .howto__inner {
  padding-top: 20vw;
}
.howto .howto__inner {
  padding-bottom: 4vw;
}
.howto .howto__inner {
  padding-left: 7.3333333333vw;
}
.howto .howto__inner {
  padding-right: 7.3333333333vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    width: 74.6705710102vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    width: 1020px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    width: 573.4550512445px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    border-radius: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    border-radius: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    border-radius: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    outline-width: 0.1464128843vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    outline-width: 2px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    outline-width: 1.1244216691px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    outline-offset: -0.7320644217vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    outline-offset: -10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    outline-offset: -5.6221083455px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    padding-top: 8.78477306vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    padding-top: 120px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    padding-top: 67.4653001464px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    padding-left: 15.7393850659vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    padding-left: 215px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    padding-left: 120.875329429px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    padding-right: 15.7393850659vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    padding-right: 215px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    padding-right: 120.875329429px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__inner {
    padding-bottom: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__inner {
    padding-bottom: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__inner {
    padding-bottom: 33.7326500732px;
  }
}
.howto .howto__heading {
  position: relative;
  font-weight: 500;
  color: var(--greentext);
}
.howto .howto__heading {
  font-size: 9.0666666667vw;
}
.howto .howto__heading {
  line-height: 9.0666666667vw;
}
.howto .howto__heading::before {
  position: absolute;
  content: "";
}
.howto .howto__heading::before {
  top: -4vw;
}
.howto .howto__heading::before {
  left: 50%;
  transform: translateX(-50%);
}
.howto .howto__heading::before {
  width: 8.4vw;
}
.howto .howto__heading::before {
  height: 1.7333333333vw;
}
.howto .howto__heading::before {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/heading__decoration--image.sp.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .howto .howto__heading {
    font-size: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__heading {
    font-size: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__heading {
    font-size: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__heading {
    line-height: 5.0512445095vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__heading {
    line-height: 69px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__heading {
    line-height: 38.7925475842px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__heading::before {
    top: -1.4641288433vw;
  }
  .howto .howto__heading::before {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/heading__decoration--image.svg);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__heading::before {
    top: -20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__heading::before {
    top: -11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__heading::before {
    width: 4.6120058565vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__heading::before {
    width: 63px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__heading::before {
    width: 35.4192825769px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__heading::before {
    height: 0.9516837482vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__heading::before {
    height: 13px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__heading::before {
    height: 7.3087408492px;
  }
}
.howto .howto__list {
  display: flex;
}
.howto .howto__list {
  padding-top: 10.6666666667vw;
}
.howto .howto__list {
  gap: 4vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__list {
    padding-top: 6.588579795vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__list {
    padding-top: 90px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__list {
    padding-top: 50.5989751098px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__list {
    gap: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__list {
    gap: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__list {
    gap: 16.8663250366px;
  }
}
.howto .howto__item {
  max-width: 39.7333333333vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__item {
    max-width: none;
  }
}
.howto .howto__item--image01 {
  width: 39.3333333333vw;
}
.howto .howto__item--image01 {
  height: 34.4vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__item--image01 {
    width: 21.5959004392vw;
  }
  .howto .howto__item--image01 {
    height: auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__item--image01 {
    width: 295px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__item--image01 {
    width: 165.8521961933px;
  }
}
.howto .howto__item--image02 {
  width: 35.0666666667vw;
}
.howto .howto__item--image02 {
  height: 34.4vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__item--image02 {
    width: 19.2532942899vw;
  }
  .howto .howto__item--image02 {
    height: auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__item--image02 {
    width: 263px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__item--image02 {
    width: 147.8614494876px;
  }
}
.howto .howto__item--text {
  font-weight: 500;
  color: var(--browntext);
  text-align: center;
}
.howto .howto__item--text {
  font-size: 3.2vw;
}
.howto .howto__item--text {
  line-height: 4.9333333333vw;
}
.howto .howto__item--text {
  padding-top: 2.6666666667vw;
}
.howto .howto__item--text {
  letter-spacing: -0.05em;
}
@media screen and (min-width: 768px) {
  .howto .howto__item--text {
    font-size: 1.4641288433vw;
  }
  .howto .howto__item--text {
    letter-spacing: unset;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__item--text {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__item--text {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__item--text {
    line-height: 2.4890190337vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__item--text {
    line-height: 34px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__item--text {
    line-height: 19.1151683748px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__item--text {
    padding-top: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__item--text {
    padding-top: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__item--text {
    padding-top: 11.2442166911px;
  }
}
.howto .howto__point {
  background: #EDFAF5;
  width: 100%;
}
.howto .howto__point {
  border-radius: 2.6666666667vw;
}
.howto .howto__point {
  margin-top: 8vw;
}
.howto .howto__point {
  padding-top: 5.3333333333vw;
}
.howto .howto__point {
  padding-bottom: 8vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__point {
    border-radius: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point {
    border-radius: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point {
    border-radius: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point {
    margin-top: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point {
    margin-top: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point {
    margin-top: 33.7326500732px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point {
    padding-top: 2.7818448023vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point {
    padding-top: 38px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point {
    padding-top: 21.364011713px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point {
    padding-bottom: 3.2210834553vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point {
    padding-bottom: 44px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point {
    padding-bottom: 24.7372767204px;
  }
}
.howto .howto__point--heading {
  position: relative;
  color: var(--greentext);
  font-weight: 500;
  display: inline-block;
}
.howto .howto__point--heading {
  font-size: 5.3333333333vw;
}
.howto .howto__point--heading {
  line-height: 7.6vw;
}
.howto .howto__point--heading {
  padding-top: 0.9333333333vw;
}
.howto .howto__point--heading {
  padding-left: 20.6666666667vw;
}
.howto .howto__point--heading::before {
  content: "";
  position: absolute;
  top: 54%;
  transform: translateY(-50%);
}
.howto .howto__point--heading::before {
  left: 14.6666666667vw;
}
.howto .howto__point--heading::before {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/howto__point--lightbulb--image.sp.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.howto .howto__point--heading::before {
  width: 5.0666666667vw;
}
.howto .howto__point--heading::before {
  height: 6.1333333333vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading {
    font-size: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading {
    font-size: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading {
    font-size: 17.9907467057px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading {
    line-height: 3.3674963397vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading {
    line-height: 46px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading {
    line-height: 25.8616983895px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading {
    padding-top: 0vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading {
    padding-top: 0px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading {
    padding-top: 0px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading {
    padding-left: 14.3484626647vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading {
    padding-left: 196px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading {
    padding-left: 110.1933235725px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading::before {
    left: 11.7130307467vw;
  }
  .howto .howto__point--heading::before {
    top: 50%;
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/howto__point--lightbulb--image.png);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading::before {
    left: 160px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading::before {
    left: 89.9537335286px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading::before {
    width: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading::before {
    width: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading::before {
    width: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--heading::before {
    height: 2.7818448023vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--heading::before {
    height: 38px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--heading::before {
    height: 21.364011713px;
  }
}
.howto .howto__point--text {
  font-weight: 500;
  color: var(--browntext);
  text-align: center;
}
.howto .howto__point--text {
  font-size: 3.4666666667vw;
}
.howto .howto__point--text {
  line-height: 4.9333333333vw;
}
.howto .howto__point--text {
  padding-top: 4.6666666667vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__point--text {
    font-size: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--text {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--text {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--text {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--text {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--text {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--text {
    padding-top: 0.5124450952vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--text {
    padding-top: 7px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--text {
    padding-top: 3.9354758419px;
  }
}
.howto .howto__point--tips {
  font-weight: 500;
  color: var(--greentext);
  position: relative;
  display: inline-block;
}
.howto .howto__point--tips {
  font-size: 3.4666666667vw;
}
.howto .howto__point--tips {
  line-height: 4.9333333333vw;
}
.howto .howto__point--tips {
  padding-top: 4vw;
}
.howto .howto__point--tips {
  padding-left: 25.7333333333vw;
}
.howto .howto__point--tips::before {
  content: "";
  position: absolute;
  top: 62%;
  transform: translateY(-50%);
}
.howto .howto__point--tips::before {
  left: 12vw;
}
.howto .howto__point--tips::before {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/howto__point--sun--image.sp.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.howto .howto__point--tips::before {
  width: 11.7333333333vw;
}
.howto .howto__point--tips::before {
  height: 11.7333333333vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips {
    font-size: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips {
    padding-top: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips {
    padding-top: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips {
    padding-left: 15.9590043924vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips {
    padding-left: 218px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips {
    padding-left: 122.5619619327px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips::before {
    left: 10.6149341142vw;
  }
  .howto .howto__point--tips::before {
    top: 68%;
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/howto__point--sun--image.png);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips::before {
    left: 145px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips::before {
    left: 81.5205710102px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips::before {
    width: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips::before {
    width: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips::before {
    width: 33.7326500732px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__point--tips::before {
    height: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__point--tips::before {
    height: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__point--tips::before {
    height: 33.7326500732px;
  }
}
.howto .howto__plus {
  display: flex;
}
.howto .howto__plus {
  gap: 5.3333333333vw;
}
.howto .howto__plus {
  padding-top: 8vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__plus {
    gap: 2.4890190337vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus {
    gap: 34px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus {
    gap: 19.1151683748px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__plus {
    padding-top: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus {
    padding-top: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus {
    padding-top: 33.7326500732px;
  }
}
.howto .howto__plus--wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  order: 2;
}
.howto .howto__plus--wrapper {
  width: 52.2666666667vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__plus--wrapper {
    padding-top: 0.7320644217vw;
  }
  .howto .howto__plus--wrapper {
    width: auto;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus--wrapper {
    padding-top: 10px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus--wrapper {
    padding-top: 5.6221083455px;
  }
}
.howto .howto__plus--heading {
  width: 14.4vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__plus--heading {
    width: 6.7349926794vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus--heading {
    width: 92px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus--heading {
    width: 51.7233967789px;
  }
}
.howto .howto__plus--text {
  font-weight: 500;
  color: var(--browntext);
}
.howto .howto__plus--text {
  font-size: 3.4666666667vw;
}
.howto .howto__plus--text {
  line-height: 5.7333333333vw;
}
.howto .howto__plus--text {
  padding-top: 3.7333333333vw;
}
.howto .howto__plus--text {
  letter-spacing: -0.01em;
}
@media screen and (min-width: 768px) {
  .howto .howto__plus--text {
    font-size: 1.4641288433vw;
  }
  .howto .howto__plus--text {
    letter-spacing: unset;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus--text {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus--text {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__plus--text {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus--text {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus--text {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .howto .howto__plus--text {
    padding-top: 2.4890190337vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus--text {
    padding-top: 34px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus--text {
    padding-top: 19.1151683748px;
  }
}
.howto .howto__plus--picture {
  display: flex;
  order: 1;
}
.howto .howto__plus--image {
  width: 17.6vw;
}
@media screen and (min-width: 768px) {
  .howto .howto__plus--image {
    width: 7.6134699854vw;
  }
  .howto .howto__plus--image {
    flex-shrink: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .howto__plus--image {
    width: 104px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .howto__plus--image {
    width: 58.4699267936px;
  }
}
.howto .common__button--wrapper {
  padding-top: 4vw;
}
@media screen and (min-width: 768px) {
  .howto .common__button--wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .howto .common__button--wrapper {
    padding-top: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .common__button--wrapper {
    padding-top: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .common__button--wrapper {
    padding-top: 16.8663250366px;
  }
}
.howto .common__button {
  width: 52.2666666667vw;
}
@media screen and (min-width: 768px) {
  .howto .common__button {
    width: 24.8901903367vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .howto .common__button {
    width: 340px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .howto .common__button {
    width: 191.1516837482px;
  }
}

.background__wrapper {
  background: linear-gradient(180deg, #FFF 0%, #FFF 50%, #D8DC9F 75%, #84AE84 100%);
}

.information {
  display: flex;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .information {
    padding-top: 10.2489019034vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information {
    padding-top: 140px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information {
    padding-top: 78.7095168375px;
  }
}
.information .information__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.information .information__inner {
  padding-top: 16vw;
}
.information .information__inner {
  padding-left: 5.3333333333vw;
}
.information .information__inner {
  padding-right: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .information .information__inner {
    padding-top: 0;
    padding-left: 0;
    padding-right: 0;
  }
}
.information .information__heading {
  position: relative;
  font-weight: 500;
  color: var(--greentext);
}
.information .information__heading {
  font-size: 9.0666666667vw;
}
.information .information__heading {
  line-height: 9.0666666667vw;
}
.information .information__heading::before {
  position: absolute;
  content: "";
}
.information .information__heading::before {
  top: -4vw;
}
.information .information__heading::before {
  left: 50%;
  transform: translateX(-50%);
}
.information .information__heading::before {
  width: 8.4vw;
}
.information .information__heading::before {
  height: 1.7333333333vw;
}
.information .information__heading::before {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/heading__decoration--image.sp.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .information .information__heading {
    font-size: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__heading {
    font-size: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__heading {
    font-size: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__heading {
    line-height: 5.0512445095vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__heading {
    line-height: 69px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__heading {
    line-height: 38.7925475842px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__heading::before {
    top: -1.4641288433vw;
  }
  .information .information__heading::before {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/heading__decoration--image.svg);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__heading::before {
    top: -20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__heading::before {
    top: -11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__heading::before {
    width: 4.6120058565vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__heading::before {
    width: 63px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__heading::before {
    width: 35.4192825769px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__heading::before {
    height: 0.9516837482vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__heading::before {
    height: 13px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__heading::before {
    height: 7.3087408492px;
  }
}
.information .information__banner {
  position: relative;
}
.information .information__banner--image {
  width: 89.3333333333vw;
}
.information .information__banner--image {
  padding-top: 8vw;
}
@media screen and (min-width: 768px) {
  .information .information__banner--image {
    width: 46.1200585652vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__banner--image {
    width: 630px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__banner--image {
    width: 354.1928257687px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__banner--image {
    padding-top: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__banner--image {
    padding-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__banner--image {
    padding-top: 22.4884333821px;
  }
}
.information .information__banner-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  color: rgb(37, 106, 84);
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
}
.information .information__banner-text {
  top: 11.6vw;
}
.information .information__banner-text {
  font-size: 4.4vw;
}
@media screen and (min-width: 768px) {
  .information .information__banner-text {
    top: 4.4655929722vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__banner-text {
    top: 61px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__banner-text {
    top: 34.2948609078px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__banner-text {
    font-size: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__banner-text {
    font-size: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__banner-text {
    font-size: 16.8663250366px;
  }
}
.information .information__image {
  width: 16.6666666667vw;
}
.information .information__image {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .information .information__image {
    width: 8.8579795022vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__image {
    width: 121px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__image {
    width: 68.027510981px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__image {
    padding-top: 4.39238653vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__image {
    padding-top: 60px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__image {
    padding-top: 33.7326500732px;
  }
}
.information .information__text {
  font-weight: 500;
  color: var(--browntext);
  text-align: center;
  position: absolute;
}
.information .information__text {
  bottom: 25.3333333333vw;
}
.information .information__text {
  left: 50%;
  transform: translateX(-50%);
}
.information .information__text {
  font-size: 4.8vw;
}
.information .information__text {
  line-height: 6.9333333333vw;
}
.information .information__text {
  letter-spacing: -0.2em;
}
@media screen and (min-width: 768px) {
  .information .information__text {
    position: static;
    left: auto;
    transform: none;
  }
  .information .information__text {
    font-size: 2.635431918vw;
  }
  .information .information__text {
    letter-spacing: -0.1em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__text {
    font-size: 36px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__text {
    font-size: 20.2395900439px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__text {
    line-height: 3.3674963397vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__text {
    line-height: 46px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__text {
    line-height: 25.8616983895px;
  }
}
.information .information__text--sub {
  font-weight: 500;
  color: var(--browntext);
  text-align: center;
}
.information .information__text--sub {
  font-size: 3.2vw;
}
.information .information__text--sub {
  line-height: 4.5333333333vw;
}
.information .information__text--sub {
  padding-top: 10.6666666667vw;
}
@media screen and (min-width: 768px) {
  .information .information__text--sub {
    font-size: 1.4641288433vw;
  }
  .information .information__text--sub {
    letter-spacing: -0.1em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__text--sub {
    font-size: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__text--sub {
    font-size: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__text--sub {
    line-height: 2.1229868228vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__text--sub {
    line-height: 29px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__text--sub {
    line-height: 16.304114202px;
  }
}
@media screen and (min-width: 768px) {
  .information .information__text--sub {
    padding-top: 1.1713030747vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .information__text--sub {
    padding-top: 16px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .information__text--sub {
    padding-top: 8.9953733529px;
  }
}
.information .common__button--wrapper {
  flex-direction: column-reverse;
}
.information .common__button--wrapper {
  gap: 5.3333333333vw;
}
.information .common__button--wrapper {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .information .common__button--wrapper {
    flex-direction: row;
  }
  .information .common__button--wrapper {
    padding-top: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .common__button--wrapper {
    padding-top: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .common__button--wrapper {
    padding-top: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .information .common__button--wrapper {
    gap: 3.074670571vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .information .common__button--wrapper {
    gap: 42px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .information .common__button--wrapper {
    gap: 23.6128550512px;
  }
}

.questions {
  display: flex;
  justify-content: center;
}
.questions {
  padding-top: 22.6666666667vw;
}
.questions {
  padding-bottom: 16vw;
}
@media screen and (min-width: 768px) {
  .questions {
    padding-top: 12.4450951684vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions {
    padding-top: 170px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions {
    padding-top: 95.5758418741px;
  }
}
@media screen and (min-width: 768px) {
  .questions {
    padding-bottom: 6.588579795vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions {
    padding-bottom: 90px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions {
    padding-bottom: 50.5989751098px;
  }
}
.questions .questions__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.questions .questions__inner {
  padding-left: 2.6666666667vw;
}
.questions .questions__inner {
  padding-right: 2.6666666667vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__inner {
    padding-left: 0;
    padding-right: 0;
  }
}
.questions .questions__heading {
  position: relative;
  font-weight: 500;
  color: var(--greentext);
}
.questions .questions__heading {
  font-size: 9.0666666667vw;
}
.questions .questions__heading {
  line-height: 9.0666666667vw;
}
.questions .questions__heading::before {
  position: absolute;
  content: "";
}
.questions .questions__heading::before {
  top: -4vw;
}
.questions .questions__heading::before {
  left: 50%;
  transform: translateX(-50%);
}
.questions .questions__heading::before {
  width: 8.4vw;
}
.questions .questions__heading::before {
  height: 1.7333333333vw;
}
.questions .questions__heading::before {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/heading__decoration--image.sp.svg);
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (min-width: 768px) {
  .questions .questions__heading {
    font-size: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__heading {
    font-size: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__heading {
    font-size: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__heading {
    line-height: 5.0512445095vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__heading {
    line-height: 69px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__heading {
    line-height: 38.7925475842px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__heading::before {
    top: -1.4641288433vw;
  }
  .questions .questions__heading::before {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/heading__decoration--image.svg);
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__heading::before {
    top: -20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__heading::before {
    top: -11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__heading::before {
    width: 4.6120058565vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__heading::before {
    width: 63px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__heading::before {
    width: 35.4192825769px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__heading::before {
    height: 0.9516837482vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__heading::before {
    height: 13px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__heading::before {
    height: 7.3087408492px;
  }
}
.questions .questions__list {
  display: flex;
  flex-direction: column;
}
.questions .questions__list {
  gap: 2.6666666667vw;
}
.questions .questions__list {
  padding-top: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__list {
    gap: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__list {
    gap: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__list {
    gap: 11.2442166911px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__list {
    padding-top: 4.0263543192vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__list {
    padding-top: 55px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__list {
    padding-top: 30.9215959004px;
  }
}
.questions .questions__item {
  background: #FFFFFF;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: padding-bottom 0.3s ease;
  width: 100%;
  box-shadow: 0px 4px 4px rgba(18, 86, 66, 0.25);
}
.questions .questions__item {
  border-radius: 2.6666666667vw;
}
.questions .questions__item:nth-child(2) .questions__item--answer {
  padding-right: 0.6666666667vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__item:nth-child(2) .questions__item--answer {
    padding-right: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item:nth-child(2) .questions__item--answer {
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item:nth-child(2) .questions__item--answer {
    padding-right: 22.4884333821px;
  }
}
.questions .questions__item.is-open {
  padding-bottom: 4.8vw;
}
.questions .questions__item.is-open .questions__item--answer {
  grid-template-rows: 1fr;
}
@media screen and (min-width: 768px) {
  .questions .questions__item.is-open {
    padding-bottom: 2.635431918vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item.is-open {
    padding-bottom: 36px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item.is-open {
    padding-bottom: 20.2395900439px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item.is-open .questions__item--answer {
    padding-left: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item.is-open .questions__item--answer {
    padding-left: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item.is-open .questions__item--answer {
    padding-left: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item.is-open .questions__item--answer {
    padding-right: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item.is-open .questions__item--answer {
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item.is-open .questions__item--answer {
    padding-right: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item {
    max-width: 74.6705710102vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item {
    max-width: 1020px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item {
    max-width: 573.4550512445px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item {
    border-radius: 1.4641288433vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item {
    border-radius: 20px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item {
    border-radius: 11.2442166911px;
  }
}
.questions .questions__item--question {
  position: relative;
  font-weight: 500;
  color: var(--greentext);
  cursor: pointer;
  display: flex;
  align-items: center;
}
.questions .questions__item--question {
  font-size: 3.7333333333vw;
}
.questions .questions__item--question {
  line-height: 5.3333333333vw;
}
.questions .questions__item--question {
  padding-top: 4.8vw;
}
.questions .questions__item--question {
  padding-bottom: 2.4vw;
}
.questions .questions__item--question {
  padding-left: 5.3333333333vw;
}
.questions .questions__item--question {
  padding-right: 5.3333333333vw;
}
.questions .questions__item--question::before {
  content: "";
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/questions__q--image.sp.png);
  background-color: #E4F5EE;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  border-radius: 50%;
}
.questions .questions__item--question::before {
  width: 7.7333333333vw;
}
.questions .questions__item--question::before {
  height: 7.7333333333vw;
}
.questions .questions__item--question::before {
  margin-right: 2.6666666667vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question {
    font-size: 1.756954612vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question {
    font-size: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question {
    font-size: 13.4930600293px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question {
    line-height: 2.4890190337vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question {
    line-height: 34px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question {
    line-height: 19.1151683748px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question {
    padding-top: 2.635431918vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question {
    padding-top: 36px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question {
    padding-top: 20.2395900439px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question {
    padding-bottom: 1.317715959vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question {
    padding-bottom: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question {
    padding-bottom: 10.119795022px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question {
    padding-left: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question {
    padding-left: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question {
    padding-left: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question {
    padding-right: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question {
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question {
    padding-right: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question::before {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/questions__q--image.png);
  }
  .questions .questions__item--question::before {
    width: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question::before {
    width: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question::before {
    width: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question::before {
    height: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question::before {
    height: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question::before {
    height: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--question::before {
    margin-right: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--question::before {
    margin-right: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--question::before {
    margin-right: 16.8663250366px;
  }
}
.questions .questions__item--plus {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
}
.questions .questions__item--plus {
  right: 5.3333333333vw;
}
.questions .questions__item--plus {
  width: 4.2666666667vw;
}
.questions .questions__item--plus {
  height: 4.2666666667vw;
}
.questions .questions__item--plus::before, .questions .questions__item--plus::after {
  content: "";
  position: absolute;
  background-color: #125642;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.questions .questions__item--plus::before {
  width: 100%;
  height: 2px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.questions .questions__item--plus::after {
  width: 2px;
  height: 100%;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}
@media screen and (min-width: 768px) {
  .questions .questions__item--plus {
    right: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--plus {
    right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--plus {
    right: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--plus {
    width: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--plus {
    width: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--plus {
    width: 17.9907467057px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--plus {
    height: 2.3426061493vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--plus {
    height: 32px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--plus {
    height: 17.9907467057px;
  }
}
.questions .questions__item.is-open .questions__item--plus::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}
.questions .questions__item--answer {
  position: relative;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease-out, padding 0.3s ease;
  overflow: hidden;
}
.questions .questions__item--answer {
  padding-left: 5.3333333333vw;
}
.questions .questions__item--answer {
  padding-right: 5.3333333333vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__item--answer {
    padding-left: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--answer {
    padding-left: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--answer {
    padding-left: 22.4884333821px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--answer {
    padding-right: 2.9282576867vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--answer {
    padding-right: 40px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--answer {
    padding-right: 22.4884333821px;
  }
}
.questions .questions__item--wrapper {
  min-height: 0;
  display: flex;
  align-items: flex-start;
}
.questions .questions__item--wrapper {
  padding-top: 2.4vw;
}
.questions .questions__item--wrapper::before {
  content: "";
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/questions__a--image.sp.png);
  background-color: #E4F5EE;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.questions .questions__item--wrapper::before {
  width: 7.7333333333vw;
}
.questions .questions__item--wrapper::before {
  height: 7.7333333333vw;
}
.questions .questions__item--wrapper::before {
  border-radius: 50%;
}
.questions .questions__item--wrapper::before {
  margin-right: 2.6666666667vw;
}
.questions .questions__item--wrapper::before {
  flex-shrink: 0;
}
@media screen and (min-width: 768px) {
  .questions .questions__item--wrapper {
    padding-top: 1.317715959vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--wrapper {
    padding-top: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--wrapper {
    padding-top: 10.119795022px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--wrapper::before {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/questions__a--image.png);
    background-color: #358B72;
  }
  .questions .questions__item--wrapper::before {
    width: 3.513909224vw;
  }
  .questions .questions__item--wrapper::before {
    flex-shrink: unset;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--wrapper::before {
    width: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--wrapper::before {
    width: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--wrapper::before {
    height: 3.513909224vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--wrapper::before {
    height: 48px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--wrapper::before {
    height: 26.9861200586px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--wrapper::before {
    margin-right: 2.196193265vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--wrapper::before {
    margin-right: 30px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--wrapper::before {
    margin-right: 16.8663250366px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .questions .questions__item--content {
    gap: 3.8067349927vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--content {
    gap: 52px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--content {
    gap: 29.2349633968px;
  }
}
.questions .questions__item--answer--text {
  display: block;
  font-weight: 400;
  color: #171717;
}
.questions .questions__item--answer--text {
  font-size: 3.7333333333vw;
}
.questions .questions__item--answer--text {
  line-height: 5.3333333333vw;
}
.questions .questions__item--answer--text {
  padding-top: 0.8vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__item--answer--text {
    font-size: 1.756954612vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--answer--text {
    font-size: 24px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--answer--text {
    font-size: 13.4930600293px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--answer--text {
    line-height: 2.4890190337vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--answer--text {
    line-height: 34px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--answer--text {
    line-height: 19.1151683748px;
  }
}
@media screen and (min-width: 768px) {
  .questions .questions__item--answer--text {
    padding-top: 0.1464128843vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__item--answer--text {
    padding-top: 2px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__item--answer--text {
    padding-top: 1.1244216691px;
  }
}
.questions .questions__small {
  font-weight: 500;
  color: #171717;
}
.questions .questions__small {
  font-size: 2.5333333333vw;
}
.questions .questions__small {
  line-height: 4vw;
}
@media screen and (min-width: 768px) {
  .questions .questions__small {
    font-size: 1.317715959vw;
  }
  .questions .questions__small {
    line-height: 1.5;
    text-align: left;
    letter-spacing: -0.08em;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .questions__small {
    font-size: 18px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .questions__small {
    font-size: 10.119795022px;
  }
}
.questions .common__button--wrapper {
  justify-content: flex-start;
}
.questions .common__button--wrapper {
  padding-top: 3.2vw;
}
.questions .common__button--wrapper {
  padding-left: 2.6666666667vw;
}
@media screen and (min-width: 768px) {
  .questions .common__button--wrapper {
    justify-content: unset;
  }
  .questions .common__button--wrapper {
    padding-left: 17.5695461201vw;
  }
  .questions .common__button--wrapper {
    padding-top: 0;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .questions .common__button--wrapper {
    padding-left: 240px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .questions .common__button--wrapper {
    padding-left: 134.9306002928px;
  }
}

.common__button--wrapper {
  display: flex;
  justify-content: center;
}

.common__button {
  width: 58.6666666667vw;
}
@media screen and (min-width: 768px) {
  .common__button {
    width: 24.8901903367vw;
  }
}
@media screen and (min-width: 768px) and (min-width: 1366px) {
  .common__button {
    width: 340px;
  }
}
@media screen and (min-width: 768px) and (max-width: 767.98px) {
  .common__button {
    width: 191.1516837482px;
  }
}

.common__button--link {
  display: block;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.common__button--link:active {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--active.sp.png);
  background-blend-mode: normal;
}
.common__button--link:active .common__button--image {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .common__button--link {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--hover.png);
  }
  .common__button--link:hover .common__button--image {
    opacity: 0;
  }
  .common__button--link:active {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--active.png);
    background-blend-mode: normal;
  }
  .common__button--link:active .common__button--image {
    opacity: 1;
  }
}

.common__button--link[data-button=cart] {
  display: block;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.common__button--link[data-button=cart]:active {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--cart--active.sp.png);
  background-blend-mode: normal;
}
.common__button--link[data-button=cart]:active .common__button--image {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .common__button--link[data-button=cart] {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--cart--hover.png);
  }
  .common__button--link[data-button=cart]:hover .common__button--image {
    opacity: 0;
  }
  .common__button--link[data-button=cart]:active {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--cart--active.png);
    background-blend-mode: normal;
  }
  .common__button--link[data-button=cart]:active .common__button--image {
    opacity: 1;
  }
}

.common__button--link[data-button=shop] {
  display: block;
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.common__button--link[data-button=shop]:active {
  background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--shop--active.sp.png);
  background-blend-mode: normal;
}
.common__button--link[data-button=shop]:active .common__button--image {
  opacity: 0;
}
@media screen and (min-width: 768px) {
  .common__button--link[data-button=shop] {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--shop--hover.png);
  }
  .common__button--link[data-button=shop]:hover .common__button--image {
    opacity: 0;
  }
  .common__button--link[data-button=shop]:active {
    background-image: url(/-/Media/com/gyutto/promo/hairmilk/20260623/common__button--image--shop--active.png);
    background-blend-mode: normal;
  }
  .common__button--link[data-button=shop]:active .common__button--image {
    opacity: 1;
  }
}

.common__button--image {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.2s ease;
}