@charset "utf-8";
  


/*
=========================================
  Top page
=========================================
*/


#photo {
  width: 100%;
  z-index:-10;
  position:relative;
  overflow: hidden;
}
#photo img{
    width:100%;
    max-width: 1920px;
    position:absolute;
    left:0;
    right:0;
    top:0;
    margin: auto;
}

#photo_sp{
	display:none;
}


.top_message{
	text-align:center;
	padding: 2rem 0 6rem;
	font-size:170%;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	letter-spacing:0.6rem;
	font-weight:400;
}

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

.intro{
	margin-top:50px;
}

#photo{
	display:none;
}
#photo_sp {
	display:block;
	width: 100%;
	z-index:-10;
	position:relative;
	overflow: hidden;
	margin-bottom:2rem;
}
#photo_sp img{
    right: 0;
	width: 100%;
	position:absolute;
}
.top_message{
	padding: 0 0 2rem;
	font-size: 120%;
	letter-spacing: 0.1rem;
}
}




/*---------------------------------------
  concept
---------------------------------------*/
.concept{
  background:
  linear-gradient(180deg, #f9fafa 0%, #f9fafa 60%, #f9ecdb 50%, #f9ecdb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding:6rem 0;
  overflow:hidden;
  clear:both;
}

.concept .waku{
	position:relative;
}
.concept img{
	width:80%;

}
.concept p{
    background:#fff;
    padding:3rem;
    top:5rem;
    right:0;
    position:absolute;
    font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

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

.concept{
  background:
  linear-gradient(180deg, #f9fafa 0%, #f9fafa 30%, #f9ecdb 30%, #f9ecdb 100%);

}
	
.concept{
  padding: 2rem 0;
}
.concept img{
	width:100%;
}
.concept p{
    padding:2rem;
    margin:0;
    top:0;
    position:relative;
}
}







/*---------------------------------------
  about
---------------------------------------*/
.about{
  padding: 7rem 0;
}
.about a.button{
	margin: 17rem auto 5rem auto;
}
@media screen and (max-width: 1100px) {
.about a.button{
	margin: 7rem auto 3rem auto;
}
}
@media screen and (max-width: 900px) {
.about{
  padding: 3rem 0;
}
.about a.button{
	margin: 2rem auto;
	max-width: 300px;
}
}



/*---------------------------------------
  hair
---------------------------------------*/

.hair h3{
	color:#b86542;
	letter-spacing:0.7em;
	padding-bottom:10px;
	line-height:1;
}
.hair .bg_img{
    padding-bottom:2rem;
    position:relative;
}
.hair .img{
	position:absolute;
	right:0;
	width:65%;
}

.hair .bg_img strong{
	color:#999;
	font-size:160%;
	font-weight:normal;
	display:block;
	padding:5rem 0 1rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,  sans-serif;
}
.hair .bg_img p{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

@media screen and (max-width: 900px) {
.hair h3{
	letter-spacing: 0.3em;
	font-size: 180%;
	font-weight: 100;
}
.hair .inner{
	margin:0 0 0 5%;
	width:95%;
}
.hair .img{
	position:relative;
	right:0;
	top: -1.8rem;
	z-index:-1;
	width:100%;
}
.hair .bg_img strong{
	padding: 0 0 0.5rem;
	font-size:140%;
}
.hair .bg_img div{
    padding-right:5%;
    width:95%;
    margin-top: -12rem;
}
} 
@media screen and (max-width: 650px) {
.hair .bg_img div{
    margin-top:-8rem;
}
} 
@media screen and (max-width: 450px) {
.hair .bg_img div{
    margin-top:-6rem;
}
} 

/*---------------------------------------
  esthetic
---------------------------------------*/
.esthetic{
  padding: 7rem 0 0rem;
  background:#f9fafa;
}
.esthetic h3{
	color:#A8A4CB;
	letter-spacing:0.7em;
	padding-bottom:10px;
	line-height:1;
	text-align:right;
}
.esthetic .bg_img{
    overflow:hidden;
    padding-bottom:2rem;
	position:relative;
}
.esthetic .img{
	position:absolute;
	left:0;
	width:65%;
}

.esthetic .bg_img strong{
	color:#999;
	font-size:160%;
	font-weight:normal;
	display:block;
	padding:5rem 0 1rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,  sans-serif;
}
.esthetic .bg_img p{
	width:30%;
	margin-left:70%;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

@media screen and (max-width: 900px) {
.esthetic{
  padding: 3rem 0 0rem;
  background:#f9fafa;
}
.esthetic h3{
	margin:0 0 10px 10px;
	letter-spacing:0.3em;
	font-size:180%;
	font-weight:100;
	text-align:left;
}
.esthetic .img{
	position:relative;
	right:0;
	width:200%;
}
.esthetic .bg_img strong{
	padding: 1rem 0 0.5rem;
}
.esthetic .bg_img p{
	width:100%;
	margin-left:0;
}
.esthetic .inner{
	width:93%;
	margin:0 5% 0 2%;
}
.esthetic .bg_img div{
	width:97%;
	margin-left:3%;
}
} 



/*---------------------------------------
  products
---------------------------------------*/
.products{
  padding-top: 7rem;
}
.products h3{
	color:#6CA2AB;
	letter-spacing:0.7em;
	padding-bottom:10px;
	line-height:1;
	font-weight:400;
}
.products .bg_img{
    overflow:hidden;
	position:relative;
}
.products .img{
	position:absolute;
	right:0;
	width:65%;
}
.products .bg_img strong{
	color:#999;
	font-size:160%;
	font-weight:normal;
	display:block;
	padding:5rem 0 1rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,  sans-serif;
}
.products .bg_img p{
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

@media screen and (max-width: 900px) {
.products{
  padding-top: 3rem;
}
.products h3{
	margin-top:0;
	letter-spacing:0.3em;
	font-size:180%;
	font-weight: 100;
}
.products .img{
	position:relative;
	right:0;
	width:100%;
	margin-top:-1.5rem;
	z-index:-1;
}
.products .inner{
	width:94%;
	margin:0 1% 0 5%;
}
.products .bg_img strong{
	padding:0 0 0.5rem;
}
.products .bg_img div{
	margin-top:-8rem;
	width:95%;
}
} 
@media screen and (max-width: 600px) {
.products .bg_img div{
	margin-top:-5rem;
}
}
@media screen and (max-width: 450px) {
.products .bg_img div{
	margin-top:-4rem;
}
}

/*---------------------------------------
  news
---------------------------------------*/
#news{
	padding-bottom:8rem;
}
#news .inner a{
	width:47%;
	margin-right:3%;
	float:left;
	overflow:hidden;
	padding-bottom:70px;
}
#news .inner a img{
	float:left;
	width:180px;
    height:180px;
    object-fit: cover;
}
#news .inner a dl{
	margin-left:200px;
	padding-top:50px;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,  sans-serif;
}
#news .inner a dd{
	padding:10px 0;
}
#news span{
	color:#fff;
	padding:2px 40px;
	font-size:80%;
	margin-left:30px;
}
#news .news{
	background:#7899c2;
}
#news .notice{
	background:#cc824e;
}

@media screen and (max-width: 1200px) {
#news span{
	padding:2px 10px;
	margin-left:20px;
}
}

@media screen and (max-width: 900px) {
#news{
	padding-bottom:3rem;
}
#news .inner a{
	width:100%;
	margin-right:0;
	padding-bottom:2rem;
}
#news .inner a img{
	width:30%;
}
#news .inner a dl{
	margin-left:35%;
	padding-top:10px;
}
#news span{
	padding:2px 10%;
	text-align:center;
	width:100px;
	margin-left:15px;
}
#news a.button{
	max-width: 300px;
	margin:0 auto;
	width: 84%;
}
} 






/*---------------------------------------
  staff
---------------------------------------*/
.staff{
	padding:7rem 0;
	background:#f5f0e7;
}
.staff .inner div{
	width:30%;
	margin-right:3.333%;
	float:left;
	background:#fff;
}
.staff .inner img{
	width:100%;
}
.staff .inner .maki{
	margin-top:4rem;
}
.staff .inner .miyuki{
	margin-top:8rem;
}

.staff .inner div dl{
	padding:1rem 0.5rem 2rem 1rem;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,  sans-serif;
}
.staff .inner .miyuki dl{
	padding:1rem 1.5rem 0;
}
.staff .inner dd strong{
	font-size: 115%;
	padding-top:5px;
	font-weight:normal;
	display:block;
}

.staff .inner a{
	display:block;
	float:right;
	padding:10px;
}
.staff .inner a:hover{
	color:#DDDFD8;
}


@media screen and (max-width: 600px) {
.staff{
    padding:3rem 0 1rem 0;
}
.staff h2{
	padding-left:5%;
}
.staff .inner {
	width:95%;
	margin:0 5% 0 0;
}
.staff .inner div{
	width:45%;
	margin:0 0 2rem 5%;
}
.staff .inner .maki{
	margin-top:0;
}
.staff .inner .miyuki{
	margin-top:0;
	margin-left:30%;
}
}
@media screen and (max-width: 450px) {
.staff .inner div dl{
	min-height:100px;
}
}

/*---------------------------------------
  access
---------------------------------------*/
.access{
	padding:6rem 0 0;
}
.google-maps {
position: relative;
height: 470px;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}

@media screen and (max-width: 900px) {
.access{
	padding:3rem 0 0;
}
}


/*---------------------------------------
  pure_suction
---------------------------------------*/
.pure_suction{
	padding:5rem 0;
	position:relative;
}
.pure_suction .inner{
	background:url(../img/pure_suction_bg.jpg) no-repeat right bottom;
	max-width:900px;
}
.pure_suction h2{
	text-align:center;
	padding:5rem 0 6rem;
	font-size:170%;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
	letter-spacing:0.6rem;
	font-weight:400;
}
.pure_suction .left{
	margin-top:5rem;
	width:35%;
}
.pure_suction .right{
	position:absolute;
	left:52%;
	width:40%;
	max-width:350px;
}
.pure_suction p{
	padding:3rem 0 5rem;
	font-size:110%;
}
.pure_suction dl{
	width:75%;
	padding-bottom:5rem;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka,  sans-serif;
}
.pure_suction dt{
	line-height:1.3;
	padding-bottom:0.5rem;
}
.pure_suction dt strong{
	font-size:150%;
	color:#666;
	font-weight:normal;
	line-height:1.5;
}
.pure_suction dt span{
	font-size:110%;
	padding-left:15px;
}


@media screen and (max-width: 900px) {
.pure_suction{
	padding:5rem 0 2rem;
}
.pure_suction p{
	padding:6rem 0 4rem;
	font-size:100%;
}
.pure_suction h2{
	padding: 0 0 3rem;
	font-size:120%;
	letter-spacing: 0.2rem;
}
.pure_suction dl{
	width:100%;
}
.pure_suction .left{
	margin-top:2.5rem;
	width:45%;
}
.pure_suction .inner{
	background:url(../img/pure_suction_bg.jpg) no-repeat right bottom;
	background-size: 90%;
}
}