/*====== 共通 =====*/

#wrapper{ position: relative; margin-top: -65px;} /* overflow: visible; */
section{ position: relative; overflow: hidden; }

#wrapper::before{
	display: block; content: ""; width: 1px; height: 100px; position: absolute; top: 165px; left: 0; right: 0; margin: auto;
	background-image: -moz-linear-gradient( 270deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -webkit-linear-gradient( 270deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -ms-linear-gradient( 270deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	animation: godown 1.5s forwards 2s 4;
}

@keyframes godown {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}
	100% {
		transform: scaleY(1);
		transform-origin: top;
	}
}

iframe{display: block; margin: 0 auto;}

.gradientbg{
	background-image: -moz-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -webkit-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -ms-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
}

section:first-of-type h2{margin: 0 auto 60px;}
section:first-of-type{margin-bottom: 60px; padding-top: 365px;}

/*====== ヘッダー =====*/

header a.logo{display: block; position: absolute; left: 45px; top: 0; width: 80px; height: 80px;}

/*====== キービジュアル =====*/

#keyvisual{
	width: 100%; padding-bottom: 65px; position: relative;
	background-color: transparent; z-index: 20;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#keyvisual #kvBox{width: 100%; height: 31.5vmax; position: relative; background-color: #000; overflow: hidden;}

#keyvisual #kvBox .bgTxt{
	position: absolute;
    top: -0.4vmax; left: 0; bottom: 0px; margin: auto;
    font-family: "din-2014", sans-serif !important;
    font-weight: 600;
    font-size: 23vmax;
    line-height: 0.75em;
    color: #fff; opacity: .2; -webkit-opacity: .2;
   	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
	
	background: -webkit-linear-gradient(0deg, #5d90b5, #654455);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Firefox */
@-moz-document url-prefix() {
	#keyvisual #kvBox .bgTxt{
		top: -7.4vmax !important; opacity: .5 !important; -webkit-opacity: .5 !important;
    }
}


#keyvisual #kvBox .img_daruma{
	position: absolute; opacity: 1; -webkit-opacity: 1;
    width: 24vmax; height: 24vmax;
    top: 0; bottom: 0; right: 10%; left: unset !important; margin: auto;
}

body.appear #keyvisual #kvBox .img_daruma .img_daruma_orange{
	opacity: .1; -webkit-opacity: .5;
	animation: flicker 1s forwards .6s 4;
}

body.appear #keyvisual #kvBox .img_daruma .img_daruma_yellow{
	opacity: .1; -webkit-opacity: .5;
	animation: flicker2 1.5s forwards .8s 3;
}

@keyframes flicker {
	0% {
		filter:drop-shadow(0 0 6px rgba(231, 31, 25, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	5% {
		filter:drop-shadow(0 0 10px rgba(231, 31, 25, 1));
		opacity: .3; -webkit-opacity: .3;
	}
	8% {
		filter:drop-shadow(0 0 0px rgba(231, 31, 25, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	12% {
		filter:drop-shadow(0 0 20px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	20% {
		filter:drop-shadow(0 0 0px rgba(231, 31, 25, 1));
		opacity: .8; -webkit-opacity: .8;
	}
	22% {
		filter:drop-shadow(0 0 20px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	45% {
		filter:drop-shadow(0 0 50px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	50% {
		filter:drop-shadow(0 0 0px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	60% {
		filter:drop-shadow(0 0 80px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	100% {
		filter:drop-shadow(0 0 60px rgba(231, 31, 25, 1));
		opacity: 1; -webkit-opacity: 1;
	}
}

@keyframes flicker2 {
	0% {
		filter:drop-shadow(0 0 4px rgba(252, 200, 0, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	7% {
		filter:drop-shadow(0 0 8px rgba(252, 200, 0, 1));
		opacity: .2; -webkit-opacity: .2;
	}
	10% {
		filter:drop-shadow(0 0 0px rgba(252, 200, 0, 1));
		opacity: .5; -webkit-opacity: .5;
	}
	14% {
		filter:drop-shadow(0 0 12px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	22% {
		filter:drop-shadow(0 0 0px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	24% {
		filter:drop-shadow(0 0 20px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	48% {
		filter:drop-shadow(0 0 30px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	52% {
		filter:drop-shadow(0 0 0px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	65% {
		filter:drop-shadow(0 0 40px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
	100% {
		filter:drop-shadow(0 0 60px rgba(252, 200, 0, 1));
		opacity: 1; -webkit-opacity: 1;
	}
}

#keyvisual #pageTitle{
	background-image: -moz-linear-gradient( 180deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -webkit-linear-gradient( 180deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: -ms-linear-gradient( 180deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	position: absolute; left: 0px; bottom: 0; width: 800px; height: 120px; z-index: 10;
	animation: goright 1.5s forwards 3s;
}

@keyframes goright {
	0% {
		transform: scaleX(0);
		transform-origin: left;
	}
	100% {
		transform: scaleX(1);
		transform-origin: left;
	}
}

#keyvisual #pageTitle #titleBox{
	display: flex; position: absolute; align-items: center; left: 180px; top: 0; bottom: 0; margin: auto; 
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#keyvisual #pageTitle #titleBox span{
	display: inline-block; color: #fff; letter-spacing: .1em;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#keyvisual #pageTitle #titleBox span:nth-of-type(1){font-family: "din-2014", sans-serif !important; font-weight: 600; font-size: 40px; margin-right: 20px;}
#keyvisual #pageTitle #titleBox span:nth-of-type(2){font-family: 'BIZ UDGothic', sans-serif !important; font-size: 14px;}

#keyvisual #breadcrumbs{
	display: flex; position: absolute; align-items: center; right: 200px; bottom: 0; text-align: right;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#keyvisual #breadcrumbs a, #keyvisual #breadcrumbs span{font-family: "din-2014", sans-serif !important; font-weight: 400; font-size: 12px;}
#keyvisual #breadcrumbs span{color: #cccccc !important;}


/*====== スタジオ =====*/

img.bgStudio{left: 0; top: 0; width: 50%;}

#sec_studio .infoBox{
	display: block; float: left; overflow: hidden; position: relative; width: 50%; padding: 5.4% 5.4% 0 12.5%; 
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_studio .infoBox span, #sec_studio .infoBox p{display: block; }
#sec_studio .infoBox span{letter-spacing: .1em;}
#sec_studio .infoBox span:nth-of-type(1){font-family: "din-2014", sans-serif !important; font-weight: 600; font-size: 1.85vmax;}
#sec_studio .infoBox span:nth-of-type(2){font-family: 'BIZ UDGothic', sans-serif !important; font-size: 2.5vmax; margin: 20px 0 60px;}
#sec_studio .infoBox p{font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1vmax; line-height: 2vmax;}

#sec_studio .studioImg{float: right; width: 50%;}
#sec_studio .studioImg img{width: 100%;}

#sec_access{padding-bottom: 150px;}

/*====== お問い合わせ =====*/

img.bg_contact01{right: 0; top: 0; width: 50%;}
img.bg_contact02{left: 0; bottom: -620px; width: 200%;}

#sec_contact .contactBox{
	width: 75%; padding: 2.5vmax 2.2vmax 1.58vmax; border: 1px rgba(255,255,255,.8) solid; margin: 0 auto; overflow: hidden;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_contact .contactBox h5, #sec_contact .contactBox a, #sec_contact .contactBox span, #sec_contact .contactBox .mailBox a.linebtn div{
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_contact .contactBox h5{display: block; font-family: 'BIZ UDGothic', sans-serif !important; margin: 0 auto 1.85vmax; font-size: 1.4vmax;}

#sec_contact .contactBox .telBox, #sec_contact .contactBox .mailBox{float: left; width:50%;}

#sec_contact .contactBox .telBox a, #sec_contact .contactBox .mailBox a{display: flex; align-items: center; margin: 0 auto 10px;}
#sec_contact .contactBox .telBox a span, #sec_contact .contactBox .mailBox a:not(.linebtn) span{font-size: 2.9vmax; font-family: "din-2014", sans-serif !important;} 
#sec_contact .contactBox .telBox a i, #sec_contact .contactBox .mailBox a:not(.linebtn) i{font-size: 2.95vmax; margin-right: 10px;} 
#sec_contact .contactBox .mailBox a:not(.linebtn) span{font-size: 1.65vmax !important;}

#sec_contact .contactBox .telBox span.hours, #sec_contact .contactBox .telBox span.offdays{font-size: 1vmax; margin: 1vmax auto 0}
#sec_contact .contactBox .telBox span.hours{display: block; font-family: 'BIZ UDGothic', sans-serif !important;}
#sec_contact .contactBox .telBox span.offdays{display: block; font-family: 'BIZ UDGothic', sans-serif !important;}

#sec_contact .contactBox .mailBox a.linebtn{display: flex; width: 24.5vmax; height: 75px; background-color: #06C755; padding: 15px; align-items: center;}
#sec_contact .contactBox .mailBox a.linebtn img{display: inline-block; width: 47px; height: 47px;}
#sec_contact .contactBox .mailBox a.linebtn div{display: inline-block; margin-left: 1vmax;}
#sec_contact .contactBox .mailBox a.linebtn div span{display:block; font-family: "din-2014", sans-serif !important; font-weight: 600;}
#sec_contact .contactBox .mailBox a.linebtn div span:nth-of-type(1){font-size: 1vmax;}
#sec_contact .contactBox .mailBox a.linebtn div span:nth-of-type(2){font-size: 1.65vmax;}


/** お問い合わせのアクセス **/
#contact_access{margin-top: 100px; padding-bottom: 150px;}
.accessInfo{display: block; width: 75%; font-size: 1vmax; line-height: 2vmax; font-family: 'BIZ UDGothic', sans-serif !important; margin: 30px auto 0;}



/*====== 料金目安 =====*/

#sec_price{margin-bottom: 0 !important;}

img.bg_price01{right: 0; bottom: 0; width: 70%;}

.priceGradient{
	background-image: url("/_common_202212/img/page/price_bg02.png"), -moz-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: url("/_common_202212/img/page/price_bg02.png"),-webkit-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-image: url("/_common_202212/img/page/price_bg02.png"),-ms-linear-gradient( 0deg, rgb(83,128,157) 0%, rgb(91,111,153) 32%, rgb(99,94,149) 48%, rgb(112,86,125) 70%, rgb(125,77,101) 100%);
	background-position: left bottom, left top;
	background-repeat: no-repeat, no-repeat;
	background-size: cover, 100%;
}

#sec_priceDetails .priceBox{padding: 95px 0 100px; width: 75vmax; margin: 0 auto;}

#sec_priceDetails .priceBox p{
	display: block; width: 100%; font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1vmax; line-height: 2vmax; margin-bottom: 85px;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_priceDetails .priceBox h4{display: block; margin-bottom: 30px;} #sec_priceDetails .priceBox h4 span{letter-spacing: .1em;}
#sec_priceDetails .priceBox h4 span:nth-of-type(1){display: inline-block; font-family: "din-2014", sans-serif !important; font-weight: 600; font-size: 2.25vmax;}
#sec_priceDetails .priceBox h4 span:nth-of-type(2){display: inline-block; font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.15vmax; margin-left: 20px;}


/*====== ヘアタトゥ =====*/

#sec_hair span.title{
	display: block; margin: 0 auto 25px; 
	font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.5vmax; line-height: 2vmax; letter-spacing: .1em;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_hair p{
	display: block; margin: 0 auto 60px; text-align: center;
	font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1vmax; line-height: 2vmax;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_hair .hairBox{
	display: block; margin: 0 auto 100px; width: 75vmax; overflow: hidden;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_hair .hairBox .beforeAfter{
	/*float: left;*/ width: 50%; margin: 0 auto; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}

#sec_hair .hairBox .beforeAfter img{width: 100%;}

#sec_contact{padding-bottom: 100px;}
#sec_contact img.imgbox{
	height: 100%;
    width: auto;
    right: 0;
    bottom: 0;}


/*====== アーティスト =====*/

section.sec_artist{margin-top: 115px;}

.artist{
	width: 100%; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content; overflow: hidden;
	display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.artist .imgBox{float: left; width: calc(100% * .58);}
.artist .artistProfile{float: left; width: calc(100% * .42); padding: 2% 10% 0 4%;}
.artist .artistProfile h2{margin: 0 0 3.8vmax 0 !important;}
.artist .artistProfile p{
	display: block; font-family: 'BIZ UDGothic', sans-serif !important; 
	font-size: 1vmax; line-height: 2vmax; color: rgba(255,255,255,.6); margin-bottom: 1.85vmax;
}

.gallery{width: 100%; margin: 55px 0 0; overflow: hidden;}

.gallery .artistGallery{height: calc(((100vw * .66) * 160) / 531); width: 100%; margin-bottom: 35px; overflow: hidden;}

.gallery .artistGallery .galleryProfile {width: 21.5%; float: left; margin-left: 12.5%; position: relative;}

.gallery .artistGallery .galleryProfile i.bg-instagram {
    display: block;
    position: absolute;
    top: 2vw;
	left: 4vw;
    padding-top: 1.4vw;
    font-size: 20vw;
    z-index: -10;
    color: rgb(90,87,220);
	background-image: -moz-linear-gradient( 0, rgba(93,144,181,.2) 0%, rgba(101,68,85,.2) 100%);
	background-image: -webkit-linear-gradient( 0, rgba(93,144,181,.2) 0%, rgba(101,68,85,.2) 100%);
	background-image: -ms-linear-gradient( 0, rgba(93,144,181,.2) 0%, rgba(101,68,85,.2) 100%);
	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
	width: 20vw;
    height: 20vw;
}
.gallery .artistGallery .galleryProfile h4{
	display: block;
    margin: 2.2vmax 0 3.2vmax 0;
    font-family: "din-2014", sans-serif !important;
    font-weight: 600;
    font-size: 3.8vmax;
    letter-spacing: .1em;
}
.gallery .artistGallery .galleryProfile h4 span{display: block;}
.gallery .artistGallery .galleryProfile h4 span:nth-of-type(1){font-family: "din-2014", sans-serif !important; font-weight: 600; font-size: 1.4vmax; margin-top:.85vmax;}
.gallery .artistGallery .galleryProfile h4 span:nth-of-type(2){font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.15vmax; margin-top: 1.65vmax;}

.gallery .artistGallery .galleryProfile a.nav{
	display: inline-flex; height: 42.5px; align-items: center; margin-right: 50px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
}
.gallery .artistGallery .galleryProfile a.nav i.fab{
	color: rgb(90,87,220); font-size: 24px; height: 24px; width: 24px; padding-top: 4px; margin-right: 10px;
	background-image: -moz-linear-gradient( -57deg, rgb(90,87,220) 0%, rgb(227,42,118) 100%);
	background-image: -webkit-linear-gradient( -57deg, rgb(90,87,220) 0%, rgb(227,42,118) 100%);
	background-image: -ms-linear-gradient( -57deg, rgb(90,87,220) 0%, rgb(227,42,118) 100%);
	-webkit-background-clip: text;
 	-webkit-text-fill-color: transparent;
}
.gallery .artistGallery .galleryProfile a.nav span{display: block; font-family: "din-2014", sans-serif !important; font-weight: 400; font-size: 18px; margin-right: 20px;}
.gallery .artistGallery .galleryProfile a.nav path{display: block; width: 42.50px; height: 42.50px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; position: relative;}
.gallery .artistGallery .galleryProfile a.nav path i{
	display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 14px;
	width: fit-content; width: -ms-fit-content; width: -moz-fit-content; width: -webkit-fit-content; width: -o-fit-content;
	height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content;
}



.gallery .artistGallery .galleryBox{
	float: right;
    width: 60%;
    height: calc(((100vw * .60) * 160) / 531);
} /* slider instagram */
.gallery .artistGallery .galleryBox a.slider-img {
	display: block; position: relative;
	height: calc(((100vw * .66) * 160) / 531); width: calc(((100vw * .66) * 160) / 531) !important; margin: 0 5px;
}


#sec_artist03{padding-bottom: 100px;}

/*padding-bottom: 150px; padding-bottom: 60px;*/







#map{margin: 0 auto; width:75%; height:420px; border:0;}

#map .mapName, #map .mapAddress, #map .mapURL{
	display: block; float: left; clear: both; color: #333; font-size: 14px; line-height: 1.2em;
}
#map .mapName{font-size: 16px !important; color: rgba(209,59,62,1.00); font-weight: 600; margin-bottom: 10px;}

#map .mapURL{text-decoration: underline; margin-top: 20px;}
#map .mapURL:hover{color: #666; cursor: pointer;}