@charset "UTF-8";
/* CSS Document */

a.link{
background-size: cover;
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
opacity: 1;
}
a.link:hover{ opacity: 1; }
a.link span{
text-indent: 100%;
white-space: nowrap;
border: solid 1px #231F20;
background-color: rgba(255,255,255,0.8);
background-repeat: no-repeat;
background-position: center center;
position: absolute;
left: 50%;
top:50%;
overflow: hidden;
display: block;
box-sizing: border-box;
}

#container #sec1{
}
#sec1{
width: calc(100% - 80px);
height: auto;
padding: 116px 0 0 0;
margin: 0 auto;
position: relative;
box-sizing: border-box;
}
#sec1.short{
height: 50vh;
background-position: center center;
}
#sec1 .lead{
	position: absolute;
	left: 50%;
	top:50%;
	z-index: 1;
}
#sec1 h2{
width: 150px;
margin: 0 auto;
}
#sec1 h2 span{
background-image: url(../../common/images/logo_home.png);
background-repeat: no-repeat;
background-size: contain;
height: 125px;
}
#sec1 h3{
width: 439px;
margin: 0 auto 45px auto;
}
#sec1 h3 span{
	background-image: url(../images/lead.png);
	height: 125px;
}
#sec1 h3 span br{ display: none; }
#sec1 .visual{
	width: 100%;
	height: auto;
}
#sec1 .visual .swiper-slide a,
#sec1 .visual .swiper-slide span{
	width: 100%;
	height: calc((100vw - 80px)/2);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	display: block;
}
#sec1 .visual .swiper-slide.v2 a{
	background-image: url(../images/slidevisual02_ov.jpg);
}
#sec1 .visual .swiper-slide.v3 a{
	background-image: url(../images/slidevisual03_ov.gif);
}
#sec1 .visual .swiper-slide.v4 a{
	background-image: url(../images/slidevisual04_ov.jpg);
}
#sec1 .visual .swiper-slide a img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
	transition: opacity 0.2s ease-in;
}
#sec1 .visual .swiper-slide a:hover img{ opacity: 0; }
#sec1 .visual .swiper-pagination{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	left: 0px;
	bottom: 20px;
}
#sec1 .visual .swiper-pagination .swiper-pagination-bullet{
	background-color: #FFF;
	opacity: 1;
}
#sec1 .visual .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background-color: #000; }

#sec2{
width: calc(100% - 80px);
margin: 0 auto;
box-sizing: border-box;
}
#sec2 a{
height: 600px;
background-image: url(../images/visual2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec2 a:hover{ opacity: 1; }
#sec2 a span{
width: 360px;
height: 45px;
margin: -22px 0 0 -180px;
background-image: url(../images/text_item.png);
background-color: rgba(255,255,255,0.8);
}
#sec2 a:hover span{
background-image: url(../images/text_item2.png);
background-color: rgba(0,0,0,1);
}
#sec3,#sec4{
width: calc(100% - 80px);
margin: 0 auto;
box-sizing: border-box;
}
#sec3 div,#sec4 div{
width: 50%;
height: calc(50vw - 20px);
float: left;
}
#sec3 div.woman a{
width: 100%;
height: 100%;
background-image: url(../images/visual3_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec3 div.woman a span{
width: 360px;
height: 45px;
margin: -22px 0 0 -180px;
background-image: url(../images/text_salonw.png);
background-color: rgba(255,255,255,0.8);
}
#sec3 div.woman a:hover span{
background-image: url(../images/text_salonw2.png);
background-color: rgba(0,0,0,1);
}
#sec3 div.man a{
width: 100%;
height: 100%;
background-image: url(../images/visual3_2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec3 div.man a span{
width: 360px;
height: 45px;
margin: -22px 0 0 -180px;
background-image: url(../images/text_salonm.png);
background-color: rgba(255,255,255,0.8);
}
#sec3 div.man a:hover span{
background-image: url(../images/text_salonm2.png);
background-color: rgba(0,0,0,1);
}
#sec4 div.about a{
width: 100%;
height: 100%;
background-image: url(../images/visual4_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec4 div.about a span{
width: 420px;
height: 45px;
margin: -22px 0 0 -210px;
background-image: url(../images/text_about.png);
background-color: rgba(255,255,255,0.8);
}
#sec4 div.about a:hover span{
background-image: url(../images/text_about2.png);
background-color: rgba(0,0,0,1);
}
#sec4 div.history a{
width: 100%;
height: 100%;
background-image: url(../images/visual4_2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec4 div.history a span{
width: 360px;
height: 45px;
margin: -22px 0 0 -180px;
background-image: url(../images/text_history.png);
background-color: rgba(255,255,255,0.8);
}
#sec4 div.history a:hover span{
background-image: url(../images/text_history2.png);
background-color: rgba(0,0,0,1);
}
#sec5{
	width: 840px;
	padding: 60px 0 0 0;
	margin: 0 auto;
}
#sec5 h3{
font-weight: bold;
margin-bottom: 30px;
}
#sec5 h5{ margin-bottom: 30px; }

#sec5 .line{ position: relative; }
#sec5 .line.first{ margin-bottom: 20px; }
#sec5 .line.second{ margin-bottom: 40px; }
#sec5 .line dl{
text-align: left;
width: 400px;
float: right;
}
#sec5 .line dl:first-child{ float: left; }
#sec5 .line dt{
font-size: 0.8em;
margin-bottom: 5px;
}
#sec5 .line dd{ width: 100%; }
#sec5 .check .line dd{
background-color: #F0F0F0;
padding: 5px;
}
#sec5 .check .line .error dd{
height: 35px;
background-color: #FFF;
border: solid 1px #CC0000;
box-sizing: border-box;
}
#sec5 .line dd input{
	width: 100%;
	background-color: #F0F0F0;
	padding: 5px;
	margin: 0px;
	border: none;
	box-sizing: border-box;
}
#sec5 .line dd textarea{
	width: 100%;
	background-color: #F0F0F0;
	padding: 5px;
	margin: 0px;
	border: none;
	box-sizing: border-box;
}
#sec5 .line.second dl{ width: 100%; }
#sec5 .btn{
	width: 260px;
	margin: 0 auto;
}
#sec5 .btn input{
color: #FFF;
width: 260px;
height: 35px;
background-color: #636363;
background-repeat: no-repeat;
background-position: center center;
border: none;
vertical-align: bottom;
}
#sec5 .btn input:hover{ background-color: #333; }
#sec5 .btn.confirm input{
background-image: url(../images/text_confirm.png);
}
#sec5 .btn.send input{
background-image: url(../images/text_send.png);
}
#sec5 .link{
	font-size: 0.8em;
	text-align: left;
	padding: 15px 0 0 0;
}
#sec5 .link a{ text-decoration: underline; }



/* for SP-----------------------------------------------------
------------------------------------------------------------ */
@media only screen and (max-width: 736px) {


a.link{
background-size: cover;
display: block;
position: relative;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
opacity: 1;
}
a.link:hover{ opacity: 1; }
a.link span{
text-indent: 100%;
white-space: nowrap;
border: solid 1px #231F20;
background-color: rgba(255,255,255,0.8);
background-repeat: no-repeat;
background-position: center center;
position: absolute;
left: 50%;
top:50%;
overflow: hidden;
display: block;
box-sizing: border-box;
}

#container{ padding: 71px 0 0 0; }
#container #sec1{
}
#sec1{
width: 100%;
height: auto;
padding: 0px;
margin: 0 auto;
}
#sec1 .visual .swiper-slide a,
#sec1 .visual .swiper-slide span{
	height: 80vw;
}
#sec1 .visual .swiper-slide.v1 span{ background-image: url(../images_sp/slide_visual_sp1.jpg); }
#sec1 .visual .swiper-slide.v2 a{ background-image: url(../images_sp/slide_visual_sp2.jpg); }
#sec1 .visual .swiper-slide.v3 a{ background-image: url(../images_sp/slide_visual_sp3.jpg); }
#sec1 .visual .swiper-slide.v4 a{ background-image: url(../images_sp/slide_visual_sp4.jpg); }
#sec1 .visual .swiper-slide img{ opacity: 0; }
#sec1 .visual .swiper-pagination{ bottom: 10px; }

#sec2{ width: 100%; }
#sec2 a{
height: 300px;
background-size: cover;
}
#sec2 a:hover{ opacity: 1; }
#sec2 a span{
width: 220px;
height: 26px;
margin: -13px 0 0 -110px;
background-image: url(../images/text_item.png);
background-size: 154px 9px;
}
#sec2 a:hover span{
background-image: url(../images/text_item.png);
background-color: rgba(255,255,255,0.8);
}
#sec3,#sec4{ width: 100%; }
#sec3 div,#sec4 div{
width: 100%;
height: 300px;
float: none;
}
#sec3 div.woman a{
width: 100%;
height: 100%;
background-image: url(../images/visual3_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec3 div.woman a span{
width: 220px;
height: 26px;
margin: -13px 0 0 -110px;
background-size: 175px 9px;
}
#sec3 div.woman a:hover span{
background-image: url(../images/text_salonw.png);
background-color: rgba(255,255,255,0.8);
}
#sec3 div.man a{
width: 100%;
height: 100%;
background-image: url(../images/visual3_2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec3 div.man a span{
width: 220px;
height: 26px;
margin: -13px 0 0 -110px;
background-size: 148px 9px;
}
#sec3 div.man a:hover span{
background-image: url(../images/text_salonm.png);
background-color: rgba(255,255,255,0.8);
}
#sec4 div.about a{
width: 100%;
height: 100%;
background-image: url(../images/visual4_1.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec4 div.about a span{
width: 240px;
height: 26px;
margin: -13px 0 0 -120px;
background-size: 212px 9px;
}
#sec4 div.about a:hover span{
background-image: url(../images/text_about.png);
background-color: rgba(255,255,255,0.8);
}
#sec4 div.history a{
width: 100%;
height: 100%;
background-image: url(../images/visual4_2.jpg);
background-repeat: no-repeat;
background-position: center;
}
#sec4 div.history a span{
width: 220px;
height: 26px;
margin: -13px 0 0 -110px;
background-image: url(../images/text_history.png);
background-size: 158px 9px;
}
#sec4 div.history a:hover span{
background-image: url(../images/text_history.png);
background-color: rgba(255,255,255,0.8);
}
#sec5{
	width: 100%;
	padding: 30px 15px 0 15px;
	box-sizing: border-box;
}
#sec5 h3{
font-size: 1.4rem;
font-weight: bold;
margin-bottom: 25px;
}
#sec5 h5{ margin-bottom: 30px; }

#sec5 .line{ position: relative; }
#sec5 .line.first{ margin-bottom: 10px; }
#sec5 .line.second{ margin-bottom: 25px; }
#sec5 .line dl{
text-align: left;
width: 100%;
float: none;
}
#sec5 .line dl:first-child{
margin-bottom: 10px;
float: none;
}
#sec5 .line dt{
font-size: 1rem;
margin-bottom: 5px;
}
#sec5 .line dd{ width: 100%; }
#sec5 .check .line dd{
background-color: #F0F0F0;
padding: 5px;
}
#sec5 .check .line .error dd{
height: 35px;
background-color: #FFF;
border: solid 1px #CC0000;
box-sizing: border-box;
}
#sec5 .line dd input,#sec5 .line dd textarea{ border-radius: 0px; }
#sec5 .line.second dl{
width: 100%;
margin: 0px;
}
#sec5 .btn{ width: 130px; }
#sec5 .btn input{
color: #FFF;
width: 130px;
height: 30px;
border-radius: 0px;
}
#sec5 .btn input:hover{ background-color: #333; }
#sec5 .btn.confirm input{
background-size: 19px 9px;
}
#sec5 .btn.send input{
background-size: 19px 9px;
}
#sec5 .link{
	font-size: 0.8em;
	text-align: left;
	padding: 15px 0 0 0;
}
#sec5 .link a{ text-decoration: underline; }



}

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

}