@charset "UTF-8";

#pan{
  position:absolute;
  top:15px;
  left:50%;
  transform:translateX(-50%);
  display:block;
  width:1400px;
  max-width:calc(100% - 30px);
  text-align:left;
  line-height:1;
  z-index:5;
  padding:0;
  margin:0 auto;
}
#pan div.breadcrumbs{
  display:inline-block;
  width:auto;
  line-height:1;
  margin:0;
}
#pan div.breadcrumbs > span{color:#0068b7;}
#pan div.breadcrumbs a,
#pan div.breadcrumbs > span{
    display:inline-block;
    font-size:12px;
    letter-spacing: 0;
    line-height:1.1;
    font-weight:400;
    margin:0;
    color:#354A53;
    transition:0.3s ease;
}
#pan a,#pan a:hover{text-decoration:none;}
#pan a:hover{text-decoration:underline;}

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

#pan{
  top:5px;
  max-width:calc(100% - 10px);
}
#pan div.breadcrumbs a,
#pan div.breadcrumbs > span{font-size:10px;}

}


/* 共通 */
div.fv-area{
  position:relative;
  padding:40px 20px clamp(50px,5.859vw,60px);
  background:#F2FBFC;
}
div.fv-area h1{
  font-family:"Oswald";
  font-size:clamp(42px,5.273vw,54px);
  font-weight:900;
  line-height:1;
  text-align:center;
}
div.fv-area span.jp{
  display:block;
  color:#00A5E6;
  font-size:clamp(14px,1.5625vw,16px);
  font-weight:500;
  text-align:center;
}


/**********
 スカルプインクとは？
**********/
div.area.about{position:relative;}
div.area.about::before{
  position:absolute;
  content:"";
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:1400px;
  max-width:100%;
  height:550px;
  background:url(../img/about/bk.png) center right/600px no-repeat;
}

div.area div.contents span.about-jp{
  display:block;
  font-size:20px;
  font-weight:600;
}
div.area div.contents h2.about-h2{
  font-family: 'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, sans-serif,'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size:48px;
  line-height:1.5;
  font-weight:600;
}
div.area div.contents h2.about-h2::first-letter{color:#00A5E6;}

div.foryou div.swiper-wrapper{justify-content:space-between;}
div.foryou div.box{
  position:relative;
  display:flex;
  flex-direction:column;
  width:calc((100% - 80px)/5);
  padding:20px 0 0;
  border-radius:10px;
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  overflow:hidden;
}
div.foryou div.box span.label{
  font-family:"Oswald";
  display:flex;
  justify-content:center;
  align-items:center;
  width:60px;
  height:20px;
  color:#fff;
  line-height:1;
  border-radius:0 10px 10px 0;
  background:#00A5E6;
}
div.foryou div.box p{
  font-size:20px;
  line-height:1.5;
  font-weight:600;
  padding:10px 20px 20px;
}
div.foryou div.box div.img{
  display:block;
  margin:auto auto 0;
}
div.foryou div.box div.img img{
  display:inline-block;
  vertical-align:bottom;
}


div.strength-wrap{margin:40px auto 0;}
div.strength-box{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
div.strength-box + div.strength-box{margin-top:40px;}

div.strength-box div.img{width:clamp(300px,36.428vw,510px);}
div.strength-box div.txt{width:calc(100% - clamp(320px,42.142vw,590px));}

div.strength-box h3{
  position:relative;
  display:flex;
  align-items:center;
  font-size:clamp(20px,2.142vw,30px);
  font-weight:600;
  line-height:1.5;
  padding-left:80px;
}
div.strength-box h3 + p{margin-top:20px;}

div.strength-box h3::before{
  position:absolute;
  content:"";
  top:50%;
  left:0;
  transform:translateY(-50%);
  width:62px;
  height:50.22px;
}
div.strength-box.num01 h3::before{
  width:47.76px;
  background:url(../img/about/num01.svg) top left/contain no-repeat;
}
div.strength-box.num02 h3::before{
  width:58.92px;
  background:url(../img/about/num02.svg) top left/contain no-repeat;
}
div.strength-box.num03 h3::before{
  width:58.74px;
  background:url(../img/about/num03.svg) top left/contain no-repeat;
}
div.strength-box.num04 h3::before{
  width:60.06px;
  background:url(../img/about/num04.svg) top left/contain no-repeat;
}
div.strength-box.num05 h3::before{
  width:58.32px;
  background:url(../img/about/num05.svg) top left/contain no-repeat;
}

@media screen and (min-width:1025px){

div.foryou div.box p{font-size:clamp(14px,1.428vw,20px);}  

}

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

div.area.about::before{display:none;}  
div.area div.contents span.about-jp{font-size:clamp(14px,2.083vw,16px);}
div.area div.contents h2.about-h2{
  font-size:clamp(28px,6.25vw,48px);
  text-align:left;
  padding-top:0.1em;
}

div.strength-wrap{width:480px;}
div.strength-box{
  flex-direction:column;
  align-items:flex-start;
}
div.strength-box div.img{width:510px}
div.strength-box div.txt{
  width:auto;
  margin-top:15px;
}
div.strength-box h3{
  min-height:60px;
  font-size:clamp(20px,2.142vw,30px);
  padding-left:70px;
}
div.strength-box h3 + p{margin-top:10px;}

}


/**********
 プランページ
**********/

/* レコメンドプラン */
div.menu-box{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:#fff;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  overflow:hidden;
  border-radius:20px;
  margin-top:clamp(20px,3.906vw,40px);
}
div.menu-box + div.menu-box{margin-top:40px;}
div.menu-box::after{
  position:absolute;
  content:"";
  display:inline-block;
  width:8px;
  height:calc(100% - 80px);
  top:50%;
  transform:translateY(-50%);
  right:0;
  background:#00A5E6;
  border-radius:4px;
}

div.menu-box div.img{
  position:relative;
  width:400px;
  transition:0.2s ease;
}
div.menu-box div.img::after{
  position:absolute;
  content:"";
  top:15px;
  right:15px;
  display:inline-block;
  width:30px;
  height:30px;
  background:url(../img/icon/loupe-i.svg) center/contain no-repeat;
}

div.menu-box div.img:hover{opacity:0.7;}
div.menu-box div.img img{
  display:inline-block;
  vertical-align:bottom;
  width:100%;
}

div.menu-box div.txt{
  width:calc(100% - 460px);
  padding-right:40px;
}

div.menu-box div.txt h3{
  display:inline-block;
  font-family:"Oswald";
  font-size:60px;
  font-weight:900;
  line-height:1;
}
div.menu-box div.txt span.jp{
  position:relative;
  left:-10px;
  display:inline-block;
  color:#354A53;
  font-size:24px;
  font-weight:600;
  text-align:left;
}

div.menu-box div.txt p{
  font-size:32px;
  font-weight:600;
  padding-top:10px;
}
div.menu-box div.txt span.price{
  font-family:"Oswald";
  color:#00A5E6;
  font-size:100px;
  font-weight:900;
  line-height:1;
  margin-right:0.1em;
}
div.menu-box div.txt span.tax{
  color:#666;
  font-size:20px;
}
div.menu-box div.txt a.btn{margin:20px 0 0;}

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

div.menu-box div.img{width:clamp(300px,39.06vw,400px);}
div.menu-box div.txt{width:calc(100% - clamp(320px,42.968vw,440px));}
div.menu-box div.txt h3{font-size:clamp(40px,5.85vw,60px);}  
div.menu-box div.txt span.jp{font-size:clamp(16px,2.343vw,24px);}
div.menu-box div.txt p{font-size:clamp(24px,3.125vw,32px);}
div.menu-box div.txt span.price{font-size:clamp(60px,9.765vw,100px);}
div.menu-box div.txt span.tax{font-size:clamp(14px,1.953vw,20px);}

}

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

div.menu-box{
  flex-direction:column-reverse;
  box-shadow:none;
  border-radius:0;
  padding-bottom:70px;
}
div.menu-box::after{display:none;}
div.menu-box + div.menu-box{margin-top:60px;}

div.menu-box div.img{
  width:100%;
  margin-top:20px;
  pointer-events:none;
}
div.menu-box div.img img{border-radius:20px;}
div.menu-box div.img::after{display:none;}

div.menu-box div.txt{
  width:100%;
  padding:10px 0 0 20px;
  border-left:5px solid #00A5E6;
}
div.menu-box div.txt span.jp{display:block;}

div.menu-box div.txt a.btn{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  margin:0 auto;
}

}


/**********
 お知らせ
**********/
ul.news-list{
  width:1000px;
  margin:0 auto;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;  
}
ul.news-list li + li{
  border-top:1px solid #e0e0e0;
}
ul.news-list li a{
  position:relative;
  display:flex;
  color:#354A53;
  padding:clamp(20px,5.208vw,40px) 40px clamp(20px,5.208vw,40px) clamp(10px,2.604vw,20px);
  transition:0.2s ease;
}
ul.news-list li a:hover{
  color:#00A5E6;
  background:#F2FBFC;
}
ul.news-list li a::after{
  position:absolute;
  content:"";
  top:50%;
  right:20px;
  transform:translateY(-50%) rotate(45deg);
  display:inline-block;
  width:6px;
  height:6px;
  border-top:2px solid #354A53;
  border-right:2px solid #354A53;
  transition:0.2s ease;
}
ul.news-list li a:hover::after{
  right:10px;
  border-top:2px solid #00A5E6;
  border-right:2px solid #00A5E6;
}
ul.news-list li a:hover p{text-decoration:underline;}
ul.news-list li a span{
  display:inline-block;
  width:150px;
  font-weight:600;
}
ul.news-list li a p{width:calc(100% - 200px);}

/* シングルページ */
div.post-wrap{
  width:1000px;
  margin:0 auto;
}
div.area div.contents div.post-wrap h2{
  font-family: 'Noto Sans JP', "Helvetica Neue", Helvetica, Arial, sans-serif,'游ゴシック体', 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  font-size:28px;
  text-align:left;
}
div.post-wrap span.data{
  display:block;
  font-size:14px;
  font-weight:600;
  padding-top:10px;
  margin-top:15px;
  border-top:1px solid #e0e0e0;
}
div.post-wrap span.data + *{margin-top:20px;}

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

ul.news-list li a{flex-direction:column;}  
ul.news-list li a span{
  display:block;
  width:auto;
}
ul.news-list li a p{
  width:auto;
  padding-top:0.5em;
}

}


/**********
 施術の流れ
**********/

div.flow-wrap{
  position:relative;
  margin:40px auto 0;
}
div.flow-wrap::before{
  position:absolute;
  content:"";
  display:inline-block;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:100%;
  background:#00A5E6;
}
div.flow-wrap div.box{
  position:relative;
  display:flex;
  flex-direction:column;
  width:100%;
}
div.flow-wrap div.box + div.box{margin-top:40px;}
div.flow-wrap div.box:nth-child(even){
  align-items:flex-end;
  margin:40px 0 0 auto;
}
div.flow-wrap div.box div.img{position:relative;}
div.flow-wrap div.box div.img img{
  display:inline-block;
  vertical-align:bottom;
  border-radius:10px;
}
div.flow-wrap div.box div.img,
div.flow-wrap div.box div.txt{width:clamp(300px,42.857vw,600px);}

/* ラベル */
div.flow-wrap div.box::after{
  position:absolute;
  content:"";
  top:clamp(60px,9.642vw,135px);
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  width:100px;
  height:30px;
  font-family:"Oswald";
  color:#fff;
  font-size:16px;
  font-weight:600;
  line-height:1;
  border-radius:15px;
  background:#00A5E6;
}
div.flow-wrap div.box.step01::after{content:"STEP01";}
div.flow-wrap div.box.step02::after{content:"STEP02";}
div.flow-wrap div.box.step03::after{content:"STEP03";}
div.flow-wrap div.box.step04::after{content:"STEP04";}
div.flow-wrap div.box.step05::after{content:"STEP05";}

div.flow-wrap div.box div.txt{margin-top:20px;}
div.flow-wrap div.box span.label{
  display:none;
  position:absolute;
  top:50%;
  right:0;
  transform:translateY(-50%);
  font-family:"Oswald";
  color:#00A5E6;
  font-size:16px;
  font-weight:600;
  line-height:1;
}
div.flow-wrap div.box h3{
  font-size:clamp(20px,3.125vw,24px);
  line-height:1.2;
  font-weight:600;
}
div.flow-wrap div.box p{margin-top:1em;}

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

div.flow-wrap{width:640px;}  
div.flow-wrap::before{
  left:0;
  transform:translateX(0);
}

div.flow-wrap div.box{padding:60px 0 0 clamp(30px,5.208vw,40px);}
div.flow-wrap div.box::after{
  top:0;
  left:0;
  transform:translateX(0);
  border-radius:0 15px 15px 0;
}
div.flow-wrap div.box:nth-child(even){align-items:flex-start;}

div.flow-wrap div.box div.img,
div.flow-wrap div.box div.txt{width:auto;}

}


/******
 お問い合わせ
******/
div.form-wrap{margin:40px auto 0;}

div.form-wrap p.heading{font-weight:600;}
div.form-wrap p.heading + div{margin-top:10px;}
div.form-wrap div + p.heading{margin-top:20px;}
div.form-wrap span.required{
  position:relative;
  top:-1px;
  color:#fff;
  font-size:12px;
  font-weight:500;
  background:#E60000;
  border-radius:2px;
  margin-left:0.5em;
  padding:0 .5em;
}
div.form-wrap span.required.any{background:#00A5E6;}
div.form-wrap p.txt{
  padding-top:30px;
  font-size:14px;
  text-align:center;
}

div.form-wrap textarea,
div.form-wrap input[type="text"],
div.form-wrap input[type="email"],
div.form-wrap input[type="tel"] {
	font-size: 16px;
	display: inline-block;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	padding:15px;
	width: 100%;
	vertical-align: middle;
	border: none;
	color: #354A53;
	background: #F7F7F7;
	border:1px solid #e0e0e0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	border-radius: 4px;
}
div.form-wrap textarea{height:250px;}

div.form-wrap input[type="submit"]{
  position: relative;
  display: flex;
  justify-content:center;
  align-items:center;
  width:450px;
  max-width:100%;
  height:65px;
  color:#fff;
  font-size:20px;
  font-weight:600;
  line-height:1;
  text-align: center;
  text-decoration: none;
  margin:40px auto 0;
  padding:0;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  border-radius: 6px;
  background: #E60000;
  transition: 0.2s ease;
  transform:translateY(0);
  border:none;
  cursor:pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
div.form-wrap input[type="submit"]:hover{
  transform:translateY(-5px);
  opacity:0.7;
}

/* チェックボックス */
div.form-wrap div.acceptance-box{
  display:flex;
  justify-content:center;
  padding:20px 10px;
  margin: 20px auto 0;
  border: 1px solid #e0e0e0;
  border-radius: 2px;  
}
div.form-wrap input[type="hidden"] + span{
	position: relative;
	padding:0;
	margin: 0;
}
div.form-wrap input[type="checkbox"]{
    display: none;
    margin: 0;
}
div.form-wrap input[type="checkbox"] + span{
  position:relative;
  display:inline-block;
  font-size:14px;
  letter-spacing:0.25pt;
  padding-left:35px;
}
div.form-wrap input[type="checkbox"] + span::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
	width: 24px;
	height: 24px;
	margin-top: -12px;
  border-radius:4px;
	background: #FFF;
}
div.form-wrap input[type="checkbox"] + span::before {border: 1px solid #ccc;}
div.form-wrap input[type="checkbox"]:checked + span::after {
	content: "";
	position: absolute;
	top: 50%;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: block;
}
div.form-wrap input[type="checkbox"]:checked + span::after {
	left: 5px;
	width: 14px;
	height: 8px;
	margin-top: -5px;
	border-left: 3px solid #00A5E6;
	border-bottom: 3px solid #00A5E6;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

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

div.form-wrap textarea{height:150px;}  
div.form-wrap input[type="submit"]{
  width:clamp(330px,54.6875vw,420px);
  height:50px;
  font-size:clamp(16px,2.604vw,20px);
  margin-top:clamp(20px,5.208vw,40px);
}  

}

/* 完了ページ */
div.form-txt p{text-align:center;}

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

/* 完了ページ */
div.form-txt p{text-align:left;}

}


/******
 アーティスト　スタッフ一覧　個別
******/

div.artist div.swiper-wrapper{
  justify-content:flex-start;
  flex-wrap:wrap;
}
div.artist a.box{
  position:relative;
  display:block;
  width:calc((100% - clamp(40px,5.714vw,80px))/3);
  margin-right:clamp(20px,2.857vw,40px);
  transition:0.2s ease;
  box-shadow:0 0 10px rgba(0,0,0,0.1);
  transition:0.2s ease;
}
div.artist a.box:nth-child(3n){margin-right:0;}
div.artist a.box:nth-child(n + 4){margin-top:clamp(20px,2.857vw,40px);}
div.artist a.box:hover{transform:scale(1.05);}
div.artist a.box::before{
  position:absolute;
  content:"";
  bottom:0;
  left:0;
  display:inline-block;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0);
  transition:0.2s ease;
}
div.artist a.box:hover::before{
  background:rgba(0,0,0,0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
div.artist a.box::after{
  position:absolute;
  content:"";
  right:20px;
  bottom:20px;
  display:inline-block;
  width:30px;
  height:30px;
  background:url(../img/icon/arrow-i.svg) center/contain no-repeat;
  transition:0.2s ease;
}
div.artist a.box:hover::after{right:15px;}

div.artist a.box div.txt{
  opacity:0;
  position:absolute;
  bottom:20px;
  left:20px;
  width:calc(100% - 120px);
  color:#fff;
  transition:0.2s ease;
}
div.artist a.box:hover div.txt{opacity:1;}

div.artist a.box span.degree{
  display:block;
  font-size:12px;
  font-weight:500;
}
div.artist a.box h3{
  font-size:20px;
  font-weight:600;
  line-height:1.5;
}
div.artist a.box p{
  font-size:12px;
  padding-top:0.5em;
}

/* シングル */
div.profile-wrap{
  display:flex;
  justify-content:space-between;
  margin:40px auto 0;
}
div.profile-wrap div.img{width:clamp(300px,31.428vw,440px);}
div.profile-wrap div.txt{width:calc(100% - clamp(320px,34.285vw,480px));}

div.profile-wrap span.number{
  display:flex;
  justify-content:center;
  align-items:center;
  width:130px;
  height:30px;
  color:#fff;
  font-size:clamp(12px,1.822vw,14px);
  font-weight:500;
  line-height:1;
  background:#354A53;
  border-radius:0 15px 15px 0;
}

div.profile-wrap span.degree{
  display:block;
  color:#00A5E6;
  font-size:clamp(14px,2.604vw,20px);
  font-weight:600;
  margin-top:0.5em;
}
div.profile-wrap h3{
  display:flex;
  align-items:center;
  font-size:clamp(24px,5.208vw,40px);
  font-weight:600;
  line-height:1.5;
}
div.profile-wrap span.name-en{
  position:relative;
  top:2px;
  display:block;
  font-family:"Oswald";
  font-size:clamp(16px,2.604vw,20px);
  line-height:1;
  padding-left:1em;
}
div.profile-wrap h3 + p{padding-top:1.5em;}
div.profile-wrap p{line-height:2;}
div.profile-wrap ul.dot li{
  position:relative;
  padding-left:1em;
}
div.profile-wrap ul.dot li::before{
  position:absolute;
  content:"・";
  left:0;
}
div.profile-wrap ul.dot + *{margin-top:0.5em;}

div.profile-wrap div.message{
  padding:20px 0;
  margin-top:1.5em;
  border-top:1px solid #e0e0e0;
  border-bottom:1px solid #e0e0e0;
}
div.profile-wrap p.top-line{
  margin-top:10px;
  padding-top:10px;
  border-top:1px dashed #e0e0e0;
}

div.profile-wrap div.history{
  margin:20px auto 0;
  padding:20px;
  background:#F2FBFC;
}


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

div.artist div.swiper-wrapper{flex-wrap:nowrap;}  
div.artist a.box{
  width:auto;
  margin-right:0;
  box-shadow:none;
}
div.artist a.box:nth-child(n + 4){margin-top:0;}

div.artist a.box::before,
div.artist a.box::after{display:none;}

div.artist a.box div.txt{
  opacity:1;
  position:relative;
  bottom:auto;
  left:auto;
  width:auto;
  color:#354A53;
  padding-top:10px;
}
div.artist a.box:hover div.img{opacity:0.7;}

/* シングル */
div.profile-wrap{
  flex-direction:column;
  width:440px;
}
div.profile-wrap div.img{width:440px;}
div.profile-wrap div.txt{
  width:100%;
  margin-top:20px;
}
div.profile-wrap ul.dot li{font-size:14px;}

}