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

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

#wrapper::before{
	display: block; content: ""; width: 1px; height: 100px; position: absolute; top: 170px; 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 30px;}
section:first-of-type{margin-bottom: 20px; padding-top: 320px;}

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

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


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

#keyvisual{
	width: 100%; padding-bottom: 120px; 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: 500px; position: relative; background-color: #000; overflow: hidden;}

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

#keyvisual #kvBox .img_daruma{
	position: absolute; opacity: 1; -webkit-opacity: 1;
    width: calc(100vw * .90); height: calc(100vw * .90);
    top: 80px; right: 0; left: 0 !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;
	right: 0;
	bottom: 55px;
	width: 95%;
	height: 80px;
	z-index: 10;
	margin: auto;
	animation: goright 1.5s forwards 3s;
}

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

#keyvisual #pageTitle #titleBox{
	display: block;
    position: absolute;
    align-items: center;
    left: 0;
    right: 0;
    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: 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: 24px; margin-bottom: 10px;}
#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: 15px; bottom: 20px; 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: 100%;}

#sec_studio .infoBox{
	display: block; overflow: hidden; position: relative; width: 95%; margin: 0 auto;
	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: 2.4vmax;}
#sec_studio .infoBox span:nth-of-type(2){font-family: 'BIZ UDGothic', sans-serif !important; font-size: 3vmax; margin: 10px 0 20px;}
#sec_studio .infoBox p{font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.5vmax; line-height: 2.6vmax;}

#sec_studio .studioImg{width: 95%; margin: 30px auto 40px;}
#sec_studio .studioImg img{width: 100%;}

#sec_access{padding-bottom: 60px;}

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

img.bg_contact01{right: 0; top: 0; width: 100%;}
img.bg_contact02{left: 0; bottom: 0; width: 100%;}

#sec_contact .contactBox{
	width: 95%; 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 2vmax; font-size: 2vmax;}

#sec_contact .contactBox .telBox, #sec_contact .contactBox .mailBox{width:100%;}

#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: 3.5vmax; font-family: "din-2014", sans-serif !important;} 
#sec_contact .contactBox .telBox a i, #sec_contact .contactBox .mailBox a:not(.linebtn) i{font-size: 3.6vmax; margin-right: 5px;} 
#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: 1.5vmax; margin: 1.5vmax 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{margin-top: 35px;}
#sec_contact .contactBox .mailBox a.linebtn{display: flex; width: 32vmax; 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: 1.5vmax;}
#sec_contact .contactBox .mailBox a.linebtn div span:nth-of-type(2){font-size: 2.2vmax;}


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


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

img.bg_price01{right: 0; top: 0; height: 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{
	width: 100%;
    margin: 0 auto;
    padding: 5%;
}

#sec_priceDetails .priceBox p{
	display: block; width: 100%; font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.5vmax; line-height: 2.6vmax; margin-bottom: 25px;
	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.8vmax;}
#sec_priceDetails .priceBox h4 span:nth-of-type(2){display: inline-block; font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.7vmax; margin-left: 10px;}



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

#sec_hair span.title{
	display: block; margin: 0 auto 25px; width: 95%; text-align: center;
	font-family: 'BIZ UDGothic', sans-serif !important; font-size: 2.1vmax; line-height: 2.9vmax; letter-spacing: .1em;
	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; width: 95%;
	font-family: 'BIZ UDGothic', sans-serif !important; font-size: 1.5vmax; line-height: 2.6vmax;
	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; width: 95%; 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{
	width: 100%; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content; margin-bottom: 40px;
}

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

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


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

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

.artist{width: 100%; height: fit-content; height: -ms-fit-content; height: -moz-fit-content; height: -webkit-fit-content; height: -o-fit-content; overflow: hidden;}

.artist .imgBox{float: right; width: 95%;}
.artist .artistProfile{float: left; width: 100%; padding: 5%;}
.artist .artistProfile h2{margin: 0 0 2.5vmax 0 !important;}
.artist .artistProfile p{
	display: block; font-family: 'BIZ UDGothic', sans-serif !important; 
	font-size: 1.5vmax; line-height: 2.6vmax; color: rgba(255,255,255,.6); margin-bottom: 2.4vmax;
}

.gallery{
	display: block; width: calc(90% - 2px); height: calc((225 * (90vw - 2px)) / 650);
    margin: 5% auto; padding: calc(((100vw - 2px) * 25) / 650); padding-right: 0 !important;
    border: 1px rgba(255,255,255,.4) solid; 
	background-image: -moz-linear-gradient( -180deg, rgba(93,144,181,.4) 0%, rgba(78,66,116,.4) 100%);
	background-image: -webkit-linear-gradient( -180deg, rgba(93,144,181,.4) 0%, rgba(78,66,116,.4) 100%);
	background-image: -ms-linear-gradient( -180deg, rgba(93,144,181,.4) 0%, rgba(78,66,116,.4) 100%);
}
.gallery .galleryimg{
	width: 45%; height: calc(((225 * (90vw - 2px)) / 650) - ((((100vw - 2px) * 25) / 650) * 2));
	position: relative; float: left;
}
.gallery .gallerytext{
	width: 55%;
    padding-left: 5%;
    float: left;
    position: relative;
}
.gallery .gallerytext i.fab{
	display: block;
    font-size: 8vw;
    font-weight: 400;
    margin: 0 auto;
    padding: 1.2vw;
    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-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 .gallerytext div:nth-of-type(1), .gallery .gallerytext div:nth-of-type(2){
	display: flex; margin: 1.8vw auto 0; align-items: center;
	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 .gallerytext div:nth-of-type(2) {
    margin: 1vw auto 0 !important;
}
.gallery .gallerytext div:nth-of-type(1) span{
	display: inline-block;
    font-family: "din-2014", sans-serif !important;
    font-weight: 600;
    font-size: 5vw;
    margin-right: 2.5vw;
    text-transform: uppercase;
    letter-spacing: .1em;
}
.gallery .gallerytext div:nth-of-type(1) i{
	display: inline-block; font-size: 3vw;
	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 .gallerytext div:nth-of-type(2) span{
	font-family: 'BIZ UDGothic', sans-serif !important;
	margin-top: 1vw;
    font-size: 3.8vw;
    font-weight: 400;
	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_artist03{padding-bottom: 40px;}





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


#map{margin: 0 auto; width:95%; height:400px; 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;}