@charset "UTF-8";

div.fv-area{
  position:relative;
  min-height:680px;
  max-height:680px;
  background:url(../img/front/main.png) center/cover fixed no-repeat;
}
@supports (background: url(../img/front/webp/main.webp)) {
  div.fv-area {
    background: url(../img/front/webp/main.webp) center/cover fixed no-repeat;
  }
}

div.fv-area div.contents{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:1440px;
  height:100%;
  padding:0 20px;
  margin:0 auto;
}
div.fv-area div.txt-area,
div.fv-area div.video-area{width:50%;}

/* テキスト */
div.fv-area h1.eg{
  font-family:"Oswald";
  color:#00A5E6;
  font-size:clamp(24px,2.5vw,30px);
  line-height:1.5;
}
div.fv-area p{
  color:#fff;
  font-size:clamp(14px,1.66vw,20px);
  font-weight:600;
}
div.fv-area p.title{
  font-size:clamp(32px,4.5vw,54px);
  line-height:1.3;
}
div.fv-area p.title + p{padding-top:20px;}

/* 動画 */
div.fv-area div.video-area{padding-top:40px;}
div.fv-area div.video-area div.inner{
  position:relative;
  width:375px;
  height:auto;
  margin:0 auto;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  border-radius:20px;
  overflow:hidden;
}
div.fv-area div.video-area video{
  display:inline-block;
  vertical-align:bottom;
}
/* 背景 */
div.fv-area img.image{
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  object-fit:cover;
}

@media screen and (max-width:1024px){

div.fv-area{
  min-height:initial;
  max-height:calc(100vh - 60px);
  height:94vw;
}
div.fv-area div.txt-area{width:calc(100% - min(48.8vw,375px));}

div.fv-area h1.eg{font-size:clamp(20px,3.906vw,30px);}
div.fv-area p{font-size:clamp(12px,2.083vw,16px);}
div.fv-area p.title{font-size:clamp(32px,6.25vw,48px);}

div.fv-area div.video-area{
  width:min(48.8vw,375px);
  padding-top:0;
}

}

@media screen and (max-width:480px){

div.fv-area{
  height:auto;
  overflow:hidden;
  background:none;
}  
div.fv-area div.contents{
  flex-direction:column;
  justify-content:flex-end;
  height:auto;
  padding:0;
}

div.fv-area div.txt-area{
  position:absolute;
  left:20px;
  bottom:60px;
  width:100%;
}
div.fv-area h1.eg{font-size:clamp(20px,6.25vw,30px);}
div.fv-area p{font-size:clamp(16px,4.166vw,20px);}
div.fv-area p.title{font-size:clamp(36px,11.25vw,54px);}
div.fv-area p.title + p{padding-top:10px;}

div.fv-area div.video-area{
  width:100%;
  z-index:-1;
}
div.fv-area div.video-area::before{
  position:absolute;
  top:0;
  left:0;
  content:"";
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:1;
}
div.fv-area div.video-area div.inner{
  width:100%;
  box-shadow:none;
  border-radius:0;
}

}


/* スカルプインクとは？ slide */
div.reason div.box{
  border-radius:10px;
  overflow:hidden;
}

div.point-wrap{
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
}
div.point-wrap div{width:calc((100% - 80px)/3);}
div.point-wrap p{font-size:14px;}
div.point-wrap p.heading{
  position:relative;
  font-size:20px;
  font-weight:600;
  padding-left:60px;
}
div.point-wrap p.heading + p{padding-top:20px;}

div.point-wrap p.heading::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  left:0;
  width:40px;
  height:40px;
  background:url(../img/icon/icon-i01.svg) center/contain no-repeat;
}
div.point-wrap div:nth-child(1) p.heading::before{background:url(../img/icon/icon-i01.svg) center/contain no-repeat;}
div.point-wrap div:nth-child(2) p.heading::before{background:url(../img/icon/icon-i02.svg) center/contain no-repeat;}
div.point-wrap div:nth-child(3) p.heading::before{background:url(../img/icon/icon-i03.svg) center/contain no-repeat;}

@media screen and (max-width:768px){

div.point-wrap{
  position:relative;
  left:-20px;
  right:-20px;
  width:calc(100% + 40px);
  max-width:calc(100% + 40px);
  background:#F2FBFC;
  padding:60px 20px;
  flex-direction:column;
}
div.point-wrap div{width:100%;}
div.point-wrap div + div{margin-top:20px;}

}


/*  THE SCALP INKの特徴 */
div.feature div.box div.img{
  border-radius:10px;
  overflow:hidden;
}
div.feature div.box p{font-size:14px;}
div.feature div.box p.heading{
  position:relative;
  font-size:20px;
  font-weight:600;
  padding-left:60px;
  margin-top:20px;
}
div.feature div.box p.heading + p{padding-top:20px;}
div.feature div.box span.label{
  position:absolute;
  content:"";
  top:50%;
  transform:translateY(-50%);
  left:0;
  display:flex;
  justify-content:center;
  align-items:center;
  width:40px;
  height:40px;
  font-family:"Oswald";
  color:#fff;
  background:#354A53;
  border-radius:6px;
}


/* FLOW ご利用の流れ */
div.flow div.swiper-wrapper{
  display:flex;
  justify-content:space-between;
}
div.flow div.box{
  width:calc((100% - 80px)/5);
  padding:5px 5px 40px;
  background:#fff;
  border-radius:20px;
}
div.flow div.box img{border-radius:16px;}
div.flow div.box span.label{
  display:block;
  color:#00A5E6;
  font-weight:600;
  text-align:center;
  padding-top:20px;
}
div.flow div.box p{
  font-size:clamp(14px,1.42vw,20px);
  line-height:1.3;
  letter-spacing:0.5pt;
  text-align:center;
}
div.flow div.box + div::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:50%;
  transform:translateY(-50%);
  left:-12px;
  border:8px solid transparent;
  border-left:8px solid #fff;
}

@media screen and (max-width:768px){

div.flow div.box p{font-size:20px;}

}


/* news */
div.area.column{
  position:relative;
  padding:0;
}
div.area.column::before,
div.area.column::after{
  position:absolute;
  content:"";
  top:0;
  left:0;
  display:inline-block;
  width:min(31.25vw,600px);
  height:100%;
  background:#354A53;
  z-index:-1;
}
div.area.column::after{
  left:auto;
  right:0;
  width:calc(100% - min(31.25vw,600px));
  background:#F2FBFC;
}

div.area.column div.contents{
  width:1920px;
  padding:0;
}
div.news-wrap{display:flex;}
div.news-wrap div{padding:clamp(40px,4.166vw,80px);}

div.news-wrap div.heading{
  display:flex;
  flex-direction:column;
  width:clamp(400px,31.25vw,600px);
  background:#354A53;
}
div.news-wrap div.heading a{margin:auto auto 0;}
div.news-wrap div.list{
  width:calc(100% - clamp(400px,31.25vw,600px));
  min-height:500px;
  background:#F2FBFC;
}
div.news-wrap div.list li + li{padding-top:40px;}
div.news-wrap div.list li a{
  display:flex;
  color:#354A53;
}
div.news-wrap div.list li a:hover p{text-decoration:underline;}
div.news-wrap div.list li a span{
  display:inline-block;
  width:150px;
  font-weight:600;
}
div.news-wrap div.list li a p{width:calc(100% - 200px);}

@media screen and (max-width:1024px){

div.news-wrap{
  position:relative;
  flex-direction:column;
  padding-bottom:120px;
  background:#354A53;
}
div.news-wrap div.heading{width:auto;}
div.news-wrap div.heading a.btn{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:30px;
}
div.news-wrap div.list{
  width:auto;
  min-height:300px;
}

}

@media screen and (max-width:768px){

div.news-wrap{padding-bottom:110px;}  
div.news-wrap div{padding:20px}
div.news-wrap div.heading{padding-top:60px;}
div.news-wrap div.list li + li{padding-top:20px;}
div.news-wrap div.list li a{flex-direction:column;}
div.news-wrap div.list li a span,
div.news-wrap div.list li a p{width:auto;}

}