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

* {
	 margin:0;
	 padding:0;
	 font-family: 'Vollkorn', serif;
	 color:#505050;
}

a {
	text-decoration:none;
	color:black;
}

/*----------------------------------------------------
  hover
----------------------------------------------------*/
.hover {
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
	-ms-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
 
.hover:hover {
    opacity: 0.6;    
    filter: alpha(opacity=60);
}

/*----------------------------------------------------
  selection ドラック時の背景
----------------------------------------------------*/

::selection {
	color:#FFF;
	background:#000;
}
 
::-moz-selection {
	color:#FFF;
	background:#000;
}

/*----------------------------------------------------
  top_logo
----------------------------------------------------*/
h1.top_logo img {
	width:300px;
	display:block;
	margin:10px auto;
}

/*----------------------------------------------------
  page_body
----------------------------------------------------*/
.page_body {
	max-width:980px;
	margin:0 auto;
}

/*----------------------------------------------------
  top_img
----------------------------------------------------*/
.top_img {
	max-width:980px;
	margin:0 auto;
}

.top_img img {
	width:100%;
}

/*----------------------------------------------------
  top_img_bg
----------------------------------------------------*/
.top_img_bg {
	background-size: cover;
	background-position:center center;
	height: 200px;
}

.item_bg {
	background-image: url(../img/item.jpg);
}

.menu_bg {
	background-image: url(../img/menu.jpg);
}

.salon_bg {
	background-image: url(../img/salon.jpg);
}

.concept_bg {
	background-image: url(../img/concept.jpg);
}

.top_img_text p {
	width: 100%;
	text-align: center;
	color: #FFF;
	line-height: 200px;
	font-size: xx-large;
}


/*----------------------------------------------------
  concept
----------------------------------------------------*/
#concept, .concept {
	text-align:center;
	margin-top:50px;
}

h2 {
	font-size: initial;
	font-weight:normal;
}

#concept h2 {
	margin:10px;
}

#concept p, .concept p {
	margin:10px;
}

/*----------------------------------------------------
  text_line
----------------------------------------------------*/
.text_line {
	max-width:500px;
	display: flex;
	align-items: center;
	font-size:xx-large;
	margin:10px;
	margin:0 auto;
	margin-bottom:25px;
}
.text_line:before, .text_line:after {
	content: "";
	flex-grow: 1;
	height: 1px; /* 線の太さを変えたいときはここを変える */
	background: #000; /* 線の色を変えたいときはここを変える */
	margin:0 .4em; /* 文字と線の余白用 なくても良い */
}

/*----------------------------------------------------
  stylist
----------------------------------------------------*/
.stylist {
	margin-top:50px;
	text-align:center;
}

.stylist p {
	margin:10px;
}

.stylist p.m20 {
	margin-top:30px;
}

.stylist p.s_list_img {
	max-width:500px;
	display:block;
	margin:10px auto;
}

.s_list_img img {
	width:100%;
}

.h_stylist {
	font-size:22px;
}

.h_stylist span {
	font-size:14px;
}

/*----------------------------------------------------
  menu
----------------------------------------------------*/
#menu {
	margin-top:50px;
	overflow:hidden;
}

.menu_img {
}

.mb_in {
	width:100%;
	max-width:980px;
	margin:0 auto;
	margin-top:50px;
	overflow:hidden;
}

.mb_in p {
	width:33.3%;
	float:left;
}

.mb_in p img {
	width:100%;
	vertical-align: bottom; 
}

.menu_box {
	width:46%;
	float:left;
	padding: 0 2%;
}

.title {
	border-bottom:solid 1px #505050;
}

.title dt {
	font-size:30px;
}

.title dt span {
	font-size:initial;
}

.menu_in {
	overflow:hidden;
	margin-top:30px;
}

.menu_list {
	padding:15px 0;
	clear:both;
}

.menu_list2 {
	padding:0;
	font-size:12px;
}

.menu_list3 {
	padding-top:50px;
	font-size:12px;
	float:right;
}

.menu_list dt {
	float:left;
	text-align: left;
}

.menu_list dd {
	float:right;
}


.mb_text {
	text-align:center;
	padding-top:35px;
	padding-bottom:50px;
	clear:both;
}

.mb_text h4 {
	font-size:xx-large;
}

.mb_text p {
	margin:10px;
}

.tax_l {
	text-align:right;
	padding-top:20px;
	font-size:12px;
}

/*----------------------------------------------------
  salon
----------------------------------------------------*/
#salon {
	margin-top:35px;
	text-align:center;
	clear:both;
}

.salon_text p {
	margin:10px;
}

.salon_text a {
	text-decoration: underline;
}

/*----------------------------------------------------
  google_map
----------------------------------------------------*/
.google_map{
    width:100%;
	height:350px;
	margin-top:35px;
	filter: grayscale(20%);
}
.google_map iframe{
    width:100%;
    height:350px;
}

/*----------------------------------------------------
  item
----------------------------------------------------*/
.item {
	margin-top:50px;
	text-align:center;
}

.item_in_s {
	width:46%;
	margin:2%;
	float:left;
}

.item_in_s img {
	width:100%;
}

.item_in_s a {
	text-decoration:underline;
}

/*----------------------------------------------------
  footer
----------------------------------------------------*/

.footer {
	background: #000;
}

.c_right {
	padding:10px;
	text-align:center;
	color:#FFF;
}

.c_right strong {
	color:#FFF;
}

.c_right strong {
	font-weight:normal;
}

/*----------------------------------------------------
  smartphone
----------------------------------------------------*/
@media screen and (max-width:480px){
	h1.top_logo img {
	display:none;
	}
	
	.menu_box {
	width:96%;
	float:none;
	padding: 0 2%;
	}
	
	.top_img_bg {
	background-size: cover;
	background-position:center;
	height:150px;
	}
	
	.top_img_text p {
	line-height: 150px;
	}

	.page_s {
	width:90%;
	margin:0 5%;
	}
	
	.concept {
	margin-top:50px;
	}
	
	.mb_in p {
	width:50%;
	}
	.item {
	margin-top:50px;
	}

	.item_in_s {
	width:96%;
	margin:2%;
	float:none;
	}

}

/*----------------------------------------------------
  tablet
----------------------------------------------------*/
@media screen and (min-width:481px) and ( max-width:768px) {

}
/*----------------------------------------------------
  below 769px~
----------------------------------------------------*/
@media screen and (min-width:769px) {
	

}