@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');

/* mv bg */
.clinic_booster_mv{
    background: url(/dcms_media/image/clinic_booster_mv_pc.jpg) no-repeat center;
    background-size: cover;
    overflow-x: hidden;
}
@media print, screen and (max-width: 767.8px) {
  .clinic_booster_mv{
    height: 700px;
    background: url(/dcms_media/image/clinic_booster_mv_sp.jpg) no-repeat center;
    background-size: cover;

    overflow-x: hidden;
  }
}

/* mv_content */
.mv_content{
  display: grid;
  grid-template-columns: 490px 702px;
  grid-auto-rows: auto;
}
@media print, screen and (max-width: 767.8px) {
  .mv_content{
    grid-template-rows: repeat(6, auto);
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    overflow: visible;
  }
}

/* main copy */
.top_main-visual_copy{
  font-family: "Noto Serif JP", serif;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: bold;
  letter-spacing: 0.05em;
  margin-bottom: 20px;

  grid-column: 1;
  grid-row: 1;
}
.text-prod-name{
  display: block;
  font-size: 3.75rem;
  line-height: 1;
  margin-top: 10px;
  letter-spacing: 0.1em;
}

/* main desc */
.top_main-visual .top_main-visual_desc{
  font-size: 1rem;
  line-height: 1.5 !important;
  font-weight: 400;

  grid-column: 1;
  grid-row: 2;
}
@media print, screen and (max-width: 767.8px) {
  .top_main-visual_copy{
    font-size: 0.9375rem;
    font-size:clamp(15px,calc(15px + (20 - 15) * ((100vw - 375px) / (767.8 - 375))), 20px);
    letter-spacing: normal;

    grid-row: 1; 
    grid-column: 1;
  }
  .text-prod-name{
    font-size: 3.125rem;
    font-size:clamp(50px,calc(50px + (72 - 50) * ((100vw - 375px) / (767.8 - 375))), 72px);
    margin-top: 10px;
  }
  .top_main-visual .top_main-visual_desc{
    font-size: 0.875rem;
    font-size:clamp(14px,calc(14px + (16 - 14) * ((100vw - 375px) / (767.8 - 375))), 16px);
    line-height: 1.7;
    
    grid-row: 2; 
    grid-column: 1;
  }
}

/* mv buttons */
.dlb_btn_link-text{
  grid-column: 1;
  grid-row: 3;
}
.top_main-visual_buttons{
  max-width: 490px;
  margin: 0;
  margin-top: 20px; 
}
.top_main-visual_link .btn a{
  font-size: 1rem;
}

@media (min-width: 767.8px) {
  .top_main-visual_link .btn{
    max-width: 235px;
    width: 100%;
    margin-top: 0 !important;
  }
  .top_main-visual_link .col:nth-child(1){
    max-width: 100%;
    padding-left: 0 !important;
    padding-right: 20px !important;
  }
  .top_main-visual_link .col:nth-child(2){
    max-width: 100%;
  }
}

@media (max-width: 991.8px){
  .top_main-visual_buttons{
    max-width: 490px;
  }
  .top_main-visual_link .col:nth-child(1){
    padding-right: 1rem !important;
  }
  .top_main-visual_link .col:nth-child(2){
    padding-left: 0 !important;
  }
}

@media print, screen and (max-width: 767.8px) {
  .dlb_btn_link-text{
    grid-row: 3; 
    grid-column: 1;
    z-index: 10;
  }
  .top_main-visual_link .col{
    max-width: 50%;
  }
  .top_main-visual_link .col:nth-child(2){
    padding-left: 1rem !important;
    padding-top: 10px;
  }
  .top_main-visual_buttons{
    padding: 0;
    margin-left: 0;
    max-width: 490px;
    margin-top:clamp(30px,calc(30px + (80 - 30) * ((100vw - 480px) / (767.8 - 480))),80px);
  }
  .top_main-visual_buttons .btn{
    width: 235px;
  }
}
@media print, screen and (max-width: 480px) {
  .top_main-visual_buttons{
    padding: 0;
    margin-left: 0;
    max-width: 235px;
    margin-top: 20px;
  }
  .top_main-visual_link .col{max-width: 100%;}
  .top_main-visual_buttons .col:nth-child(2){
    padding-top: 10px;
    padding-left: 1rem !important;
  }
  .top_main-visual_buttons .btn{
    width: 235px;
    margin-top: 0 !important;
  }
}

/* mv result */
.top_main-visual_result{
  margin-top: 40px;

  grid-column: 1;
  grid-row: 4;
}
.fs-xs{
  font-size: 0.75rem;
  line-height: 1.166;
  font-weight: 500;
}
@media print, screen and (max-width: 480px) {
  .fs-xs{
    letter-spacing: -0.052em;
  }
}

.top_main-visual_result-col2{
    list-style: none;
    padding: 0;
    margin: 0;

    display: flex;
    gap: 20px;
}
.top_main-visual_result-col2 figure{
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.top_main-visual_result-col2 img{
  width: 180px;
  height: auto;
}
@media print, screen and (max-width: 767.8px) {
  .top_main-visual_result{
    margin-top: 105px;
    grid-row: 4; 
    grid-column: 1;
  }
  .top_main-visual_result-col2 img{
    width: 145px;
    height: auto;
  }
}
@media print, screen and (max-width: 480px) {
  .top_main-visual_result{
    margin-top: 25px;
    
    grid-row: 4; 
    grid-column: 1;
  }
  .top_main-visual_result-col2 img{
    width: 145px;
    height: auto;
  }
}

/* mv image */
.top_main-visual_image{
  transform: translateX(-20px);
  grid-column: 2;
  grid-row: 1;
  position: relative;
}
.top_main-visual_image img{
  position: absolute;
  top: 0;
  top: 15px;
  right: 0;
  width: 702px;   
  height: auto;
  aspect-ratio: 702 / 468;
  display: block;
}

@media (min-width: 950px) and (max-width: 1060px) {
  .top_main-visual_image{
    grid-row: 1;
    justify-self: flex-end;
  }
  .top_main-visual_image img{
    width: clamp(650px, 100%, 702px);
    right:clamp(100px,calc(150px - (50 * (100vw - 950px) / (1060 - 950))),150px);
  }
}
@media (min-width: 768px) and (max-width: 949px) {
  .mv_content{
    grid-template-columns: 2fr 1fr;
  }
  .dlb_btn_link-text{z-index: 10;}
  .top_main-visual_image{
    grid-row: 2;
    z-index: 1;
  }
  .top_main-visual_image img{
    width: clamp(500px, 100%, 600px);
    transform:translateX(calc(30% + ((100vw - 768px) * -10 / 181)));
  }
}

@media print, screen and (max-width: 767.8px) {
  .top_main-visual_image{
    z-index: 1;
    
    grid-row: 3; 
    grid-column: 1;
  }
  .top_main-visual_image img{
    position: absolute;
    top: 0;
    right: auto;
    left:clamp(110px,calc(110px + (250 - 110) * ((100vw - 480px) / (767.8 - 480))),250px);
    width: clamp(430px, 90%, 600px);
    height: auto;
  }
}

@media print, screen and (max-width: 480px) {
  .top_main-visual_image{
    z-index: 1;
    grid-row: 3; 
    grid-column: 1;
    transform:translate(clamp(17px,calc(17px + (97 - 17) * ((100vw - 375px) / (480 - 375))),97px),47px);
  }
  .top_main-visual_image img{
    width: 389px;
    height: auto;
    aspect-ratio: 389 / 260;
    position: unset;
  }
}

.esthetic_coare_mv-text{
  max-width: 1172px;
  padding-top: 50px;
}

@media print, screen and (max-width: 991.8px){
  .container.esthetic_coare_mv-text{
    max-width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }
  .esthetic_coare_mv-text{padding-top: 40px;}
}

@media (min-width: 768px) {
  .esthetic_coare_mv-card{
    margin-top: -30px;
  }
}

/* ナビゲーションブッロク */
.fixed-head {
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);
  background: #ffffff;
  padding-top: 16px;
  padding-bottom: 16px;
  z-index: 1000;
  width: 100%;
  position:absolute;
}
.a_fixed .fixed-head {
  top:74px;
}

#tinymce .fixed-head {
  position:relative !important;
}

@media print, screen and (min-width: 992px) and (max-width: 1320px) {
  .a_fixed .fixed-head {
    top:135px;
  }
}
@media print, screen and (max-width: 991.8px) {
  .fixed-head .container {
    max-width: 100%;
  }
  .a_fixed .fixed-head {
    top:50px;
  }
}
@media print, screen and (max-width: 767.8px) {
  .fixed-head { 
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

.fixed-head ul {
  display: flex;
  flex-wrap: wrap;
  gap:10px 2%;
  padding-left: 0;
  margin-bottom: 0;
}
.fixed-head ul li {
  width: 23.5%;
  list-style-type: none;
  letter-spacing: -0.03em;
}
@media print, screen and (max-width: 767.8px) {
  .fixed-head ul {
    gap:5px 2%;
  }
  .fixed-head ul li {
    width: 49%;
    list-style-type: none;
  }
}

.fixed-head ul li a {
  color: #333333;
  padding-left:20px;
  background-image: url(/dcms_media/other/arr-anchor.svg);
  background-repeat: no-repeat;
  background-position: left center;
}
@media print, screen and (max-width: 959px) {
  .fixed-head ul li a {
    font-size: min(1.6vw, 15px);
  }
}
@media print, screen and (max-width: 767.8px) {
  .fixed-head ul li a {
    font-size: min(3vw, 15px);
  }
}

.fixed-head-wrap + section {
  margin-top: calc(5rem + 200px) !important;
}