@charset "utf-8";

@import "clear.css";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

h1,h2,h3,h4,h5,h6,nav {
    font-family: 'Noto Sans Japanese', serif;
    font-weight: 400;
}

#header_wrap {
	background: #fff;
	height: 80px;
	position: fixed;
	opacity: 0.8;
	width: 100%;
	z-index: 99;
}

header {
	margin: auto;
	position: relative;
	width: 900px;
}

header h1 {
	padding-top: 15px;
}

nav {
	position: absolute;
	top: 40%;
	right: 0;
}

nav li {
	float: left;
	font-size: 1.2em;
	margin-left: 1em;
}

nav li img {
	margin-right: 0.3em;
}

.container {
	padding: 80px 0;
}

#salon_info {
	background: #fafafa;
	padding: 45px 0;
}

h2 {
	font-size: 1.6em;
	margin-bottom: 30px;
	text-align: center;
}

h3 {
	background: url(../images/bg_3.png) no-repeat top left;
	font-size: 1.6em;
	padding: 10px 15px;
	margin-bottom: 15px;
}

#salon_info dl {
	background: url(../images/line_icon.png) no-repeat right bottom;
	margin: auto;
	width: 900px;
}

#salon_info dt {
	float: left;
	padding: 5px 0;
	width: 160px;
}

#salon_info dd {
	padding: 5px 0 5px 160px;
}

#link_area {
	padding: 30px 0 10px;
	text-align: center;
}

#link_area li {
	display: inline-block;
	margin: 0 1em;
}

#copy_area {
	border-top: solid #000 1px;
	padding: 10px 0;
	text-align: center;
}

#main_img {
	position: relative;
}

#main_img > img {
	width: 100%;
}

#main_img span {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -105px 0 0 -191px;
}

#menu {
	margin: 80px auto;
	width: 900px;
}

#menu li {
	float: left;
	margin-right: 60px;
	width: 240px;
}

#menu li:last-child {
	margin-right: 0;
}

#information {
	background: #ebf8fe;
	padding: 80px 0;
	margin-bottom: 80px;
}

#information h2 {
	margin: auto;
	padding: 35px 0 0 60px;
	text-align: left;
	width: 900px;
}

#information dl {
	font-size: 0.9em;
	height: 100px;
	margin: -60px auto 0;
	overflow: auto;
	padding-left: 240px;
	width: 660px;
}

#information dt,
#information dd {
	margin-bottom: 5px;
}

#information dt {
	float: left;
	width: 100px;
}

#information dd {
	padding-left: 100px;
}

#idx_banner_area {
	text-align: center;
}

#idx_banner_area li {
	margin-bottom: 30px;
}

#haircare_head_wrap {
	background:url(../images/bg_1.png);
	line-height: 0;
	text-align: center;
	padding-top: 30px;
}

#haircare_discription {
	margin: 80px 0;
	line-height: 2.2em;
	text-align: center;
}

.care_tbl {
	display: table;
	margin: auto;
	table-layout: fixed;
	width: 900px;
}

.care_tbl dt {
	line-height: 0;
	width: 320px;
}

.care_tbl dt,
.care_tbl dd {
	display: table-cell;
	vertical-align: middle;
}

.care_tbl dd {
	padding: 0 80px;
}

.care_a {
	background: #ebf8fe;
}

#hair_point {
	background: url(../images/bg_1.png);
	position: relative;
	text-align: center;
	margin: 80px 0;
	padding: 60px 0 30px;
}

#hair_point p {
	line-height: 0;
	position: absolute;
	bottom: 0;
	right: 0;
}

#hair_point h2 {
	line-height: 1.6em;
	margin-top: 20px;
}

#hair_point h2 span {
	color: #28a7e1;
}

#no_damage {
	text-align: center;
}

.sub_head {
	position: relative;
	margin-bottom: 80px;
}

.sub_head >img {
	width: 100%;
}

.sub_head div {
	background: url(../images/bg_2.png);
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.sub_head div span {
	position: absolute;
	margin: -22px 0 0 -145px;
	top: 50%;
	left: 50%;
}

.product_blc {
	margin: 80px auto;
	width: 900px;
}

.product_blc dt,
.product_blc dd {
	width: 450px;
}

.product_blc dd span {
	display: block;
	text-align: center;
}

.product_blc dd {
	padding-top: 30px;
}

.type_a dt {
	float: left;
}

.type_a dd {
	float: right;
}

.type_b dt {
	float: right;
}

.type_b dd {
	float: left;
}

.product_blc p {
	font-size: 0.8em;
	padding: 0 0 20px 15px;
}

.product_blc ul {
	margin: 20px 0 0 60px;
}

.product_blc li {
	float: left;
	margin-right: 60px;
	text-align: center;
	width: 220px;
}

.product_blc li p {
	border-top: dotted #dadada 1px;
	padding: 10px 0;
}

#salon_data {
	margin: 80px auto;
	width: 500px; 
}

#salon_data dt {
	float: left;
	padding: 10px 0;
	width: 160px;
}

#salon_data dd {
	border-bottom: solid #000 1px;
	padding: 10px 0 10px 160px;
}

#recruit {
	line-height: 2.2em;
	margin: 80px 0;
	text-align: center;
}

.price_tbl {
	margin: auto;
	width: 900px;
}

#price_1 li {
	float: left;
	margin: 0 60px 60px 0;
	width: 260px;
}

#price_1 li p {
	padding: 5px 0 5px 15px;
}

.price_tbl {
	margin-bottom: 80px;
}

.price_tbl h3 {
	margin-bottom: 0 !important;
}

#price_1 li:nth-child(3n) {
	margin-right: 0;
}

.price_tbl {
	font-size: 0.8em;
}

.price_tbl dt {
	float: left;
	padding: 5px 0;
}

.price_tbl dd {
	border-bottom: solid #000 1px;
	padding: 5px 0;
	text-align: right;
}

#price_2 li {
	float: left;
	margin-right: 100px;
	width: 400px;
}

#price_2 li:last-child {
	margin-right: 0;
}