.skincare_title { text-align: center; padding: 20px 0 20px; font-size: 17px; background: #fff;}
.skincare_title hr { border: none; border-bottom: 2px solid #000; width: 70px; margin: 10px auto 0;}

#kv { height: 100vh;}
.skincare_kv { height: 100vh; position: fixed; top:0; z-index: -1; width: 100%; text-align: center;background:url(/template/default/img/abouts/skincare/kv_sp.jpg) no-repeat top center; background-size: cover;}
.skincare_solution { position: relative; width: 100%; background: #eff4fe; padding: 70px 10%; }

.skincare_txt1 { padding: 0px 25px 50px; background: #fff;}
.skincare_txt1 p { margin: 20px auto; line-height: 30px;}

.skincare_txt1_img { margin: 30px -25px 50px 0;}
.skincare_txt1_nayami { margin: 70px 0 0;  text-align: center;}
.skincare_txt1_nayami p { font-size: 15px; margin: 40px auto;}

.skincare_txt2 { background: #f6f7fb; padding: 100px 10px 50px; }
.skincare_txt2_in { background: #fff; padding: 50px 20px 20px; }
.skincare_txt2 p { margin: 30px 0; line-height: 30px; }
.skincare_txt2 h3 { margin: 40px 0 30px; font-weight: normal; font-size: 18px; }

.skincare_txt2_image_1 { position: relative; margin: -100px auto 0 -30px;}
.skincare_txt2_image_2 { position: relative; margin: 0 -30px 0 auto;}
.skincare_txt2_image_3 { position: relative; margin: 0 auto 0 -30px;}

.skincare_con { text-align: center; padding: 50px 10px 0; background: #fff;}
.skincare_con p { margin: 20px auto;}
.skincare_con1 { font-size: 13px;}
.skincare_con2 { font-size: 18px;}
.skincare_con_link { margin: 0 10px 30px; text-align: center;}
.skincare_con_link a { padding-top: 15px; padding-bottom: 15px;}

@media only screen and (min-width: 768px) {
  .skincare_txt1 { width: 640px; margin: 0 auto; padding: 0px 0 60px; text-align: center;}
  .skincare_txt1_img { margin: 50px auto 50px; width: 500px;}

  .skincare_txt1 p { font-size: 15px;}
  .skincare_txt1_nayami p { font-size: 18px;}
  .skincare_txt2_in { width: 720px; margin: 0 auto; padding: 50px 100px;}
  .skincare_txt2 p { font-size: 15px; line-height: 32px;}
  .skincare_txt2 h3 { font-size: 20px; }


  .skincare_txt2_image_1 { margin: -100px auto 0 -130px;}
  .skincare_txt2_image_2 { margin: 0 -130px 0 auto;}
  .skincare_txt2_image_3 { margin: 0 auto 0 -130px;}

  .skincare_con1 { font-size: 17px;}
  .skincare_con2 { font-size: 25px;}

}



.breadcrumb { background: #fff; margin: 0;}
.footer_sticky { display: none !important;}




:root { --scale: 0.1; --space: 8vmin; }

@media (prefers-reduced-motion) { 
    :root { --scale: 0; }
}


.section { transform-origin: center top; transform: scaleY(calc(1 - var(--scale))); }
.section > * { transform-origin: center top; transform: scaleY(calc(1 / (1 - var(--scale)))); }
.section-title { font-family: var(--font-heading); font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: bold; line-height: 1.125; }


.content { position: relative; margin: 7vh auto 0; padding: var(--space); /*max-width: 55ch; width: calc(100% - var(--space)); background: hsla(5, 15%, 5%, 0.9);*/ padding: 180px 10%; background: #eff4fe; }
.content > * + * { margin-top: 2rem; }
.content p {color: #6d7fa0; font-size: 18px; line-height: 60px; text-align: center; }

.image-container { position: sticky; top: 0; width: 100vw; height: 75vh; z-index: -2; }
.image-container img { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.image-container::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; 
    /*
  background: linear-gradient(
    to bottom,
    hsla(5, 15%, 5%, 0) 0%,
    hsla(5, 15%, 5%, 0.013) 8.1%,
    hsla(5, 15%, 5%, 0.049) 15.5%,
    hsla(5, 15%, 5%, 0.104) 22.5%,
    hsla(5, 15%, 5%, 0.175) 29%,
    hsla(5, 15%, 5%, 0.259) 35.3%,
    hsla(5, 15%, 5%, 0.352) 41.2%,
    hsla(5, 15%, 5%, 0.45) 47.1%,
    hsla(5, 15%, 5%, 0.55) 52.9%,
    hsla(5, 15%, 5%, 0.648) 58.8%,
    hsla(5, 15%, 5%, 0.741) 64.7%,
    hsla(5, 15%, 5%, 0.825) 71%,
    hsla(5, 15%, 5%, 0.896) 77.5%,
    hsla(5, 15%, 5%, 0.951) 84.5%,
    hsla(5, 15%, 5%, 0.987) 91.9%,
    hsl(5, 15%, 5%) 100%
  ); */
}

@keyframes fadein { 
    to { opacity: 1; transform: translateY(0); }
}

@media only screen and (min-width: 768px) {
  .content { max-width: 100%; padding: 105px 0px; text-align: center; }
  .content p {font-size: 20px; line-height: 80px; }
  .content img { width: 300px; }
  .image-container { position: sticky; top: 0; width: 100vw; height: auto; text-align: center; background: #dee1e0;}
  .image-container img { position: relative;; width: 800px; height: auto; margin: 0 auto;  }

}