@charset "utf-8";

body {
	background: url(../images/main-bg.jpg) repeat-y center top;
}

#container {
	width: 100%;
	min-width: 1000px;
	height: 500px;
}


/* =====================================================================
*    HEADER
* =================================================================== */

#header {
	width: 700px;
	margin: auto;
	z-index: 1000;
}
h1#site-title {
	width: 380px;
	float: left;
	padding-top: 20px;
	position: relative;
	z-index: 1100;
}

#headerInfo {
	width: 260px;
	float: right;
	padding-top: 10px;
}
h2#site-description {
	font-size: 77%;
	text-align: right;
	line-height: 1.4;
	margin-bottom: 15px;
}
#headerInfo #info {
	margin-bottom: 12px;
	letter-spacing: -.4em;
}
#headerInfo #info .tel,
#headerInfo #info .social {
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: middle;
}
#headerInfo #info .tel {
	width: 180px;
	margin-right: 20px;
}
#headerInfo #info .social {
	width: 60px;
	text-align: right;
}

/* =====================================================================
*    GLOBAL NAVI
* =================================================================== */

#gnavi {
	height: 145px;
	padding-top: 12px;
	background: url(../images/header-info-line.png) no-repeat left top;
	letter-spacing: -.4em;
	overflow: hidden;
}
#gnavi li {
	width: 120px;
	height: 35px;
	margin-top: 13px;
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: top;
	overflow: hidden;
}
#gnavi li.navi01,
#gnavi li.navi02,
#gnavi li.navi03 { margin-right: 20px; }


#gnavi li a {
	line-height: 1.5;
	display: block;
	padding-top: 35px;
}

#gnavi li.navi01 a { background: url(../images/navi/navi01.png) no-repeat left top; }
#gnavi li.navi02 a { background: url(../images/navi/navi02.png) no-repeat left top; }
#gnavi li.navi03 a { background: url(../images/navi/navi03.png) no-repeat left top; }
#gnavi li.navi04 a { background: url(../images/navi/navi04.png) no-repeat left top; }
#gnavi li.navi05 a { background: url(../images/navi/navi05.png) no-repeat left top; }
#gnavi li.navi06 a { background: url(../images/navi/navi06.png) no-repeat left top; }

#gnavi li a.selected,
#gnavi li a:hover,
#gnavi li a:focus { background-position: 0 -35px; }


/* =====================================================================
*    SIDEBAR
* =================================================================== */

#sidebar {
	width: 180px;
	position: fixed;
	left: 0;
	top: 50%;
	z-index: 100;
	margin-top: -185px;
	color: #F5EAD5;
}

#sidr {
	
}

#sidebar h3 {
	line-height: 1.5;
	padding: 25px 15px;
	background-color: #6B4E0F;
	-moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    -khtml-border-radius-topright: 6px; 
    border-top-right-radius: 6px;
    behavior: url(border-radius.htc);
}
#sidebar ul {
	padding: 0px 15px 0px;
	background-color: #6B4E0F;
	-moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -khtml-border-radius-bottomright: 6px; 
    border-bottom-right-radius: 6px;
    behavior: url(border-radius.htc);
}
#sidebar ul li {
	background: url(../images/sidebar-line.png) no-repeat left top;
}
#btn-resevation a {
	display: block;
	color: #fff;
	font-size: 92%;
	text-decoration: none;
	text-align: center;
	margin-top: 10px;
	padding: 5px 15px;
	background-color: #DC2A1E;
	-moz-border-radius-topright: 6px;
    -webkit-border-top-right-radius: 6px;
    -khtml-border-radius-topright: 6px; 
    border-top-right-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -khtml-border-radius-bottomright: 6px; 
    border-bottom-right-radius: 6px;
    behavior: url(border-radius.htc);
}
#btn-resevation a:hover,
#btn-resevation a:focus {
	background-color: #6B4E0F;
}

	
/* =====================================================================
*    MAIN VISUAL
* =================================================================== */

#mainvisual {
	width: 900px;
	height: 510px;
	margin: auto;
	position: relative;
	overflow: hidden;
	top: -10px;
}
.nivoSlider {
	position:relative;
	background: url(../images/loading.gif) no-repeat 50% 50%;
}
.nivo-controlNav {
    position: absolute;
    left: 0;
    bottom: -41px;
    z-index: 10;
    width: 100%;
    height: 30px;
	text-align: center;
	padding: 5px 0;
    opacity: 0.5;
    -webkit-transition: all 200ms ease-in-out;
    -moz-transition: all 200ms ease-in-out;
    -o-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out;
}
#mainvisual:hover .nivo-controlNav {
    bottom: 0;
    opacity: 1;
}
#mainvisual .nivo-controlNav a {
	display:inline-block;
	width: 18px;
	height: 20px;
	background: url(../images/haircut/pagenation.png) 0 0 no-repeat transparent;
	text-indent:-9999px;
	border:0;
	margin: 7px 6px 0;
}
#mainvisual .nivo-controlNav a:hover,
#mainvisual .nivo-controlNav a.active {
	background-position:0 -20px;
}



/* =====================================================================
*    CONTENT
* =================================================================== */

.column {
	width: 780px;
	margin: auto;
	margin-bottom: 100px;
}
.columnBox {
	width: 700px;
	padding: 50px 40px 0 40px;
}

h3.column-title {
	line-height: 1.5;
	margin-bottom: 50px;
}
h4.column-subtitle {
	line-height: 1.5;
	margin-bottom: 40px;
}
.column p.leed {
	letter-spacing: 0.1em;
	line-height: 2.5;
	margin-bottom: 40px;
}


/* =====================================================================
*    ABOUT US
* =================================================================== */

/* =WELCOME
----------------------------------------------- */

#welcome { background: url(../images/aboutus/welcome-illust.png) no-repeat 100% 20%; }
#welcome #hairstyle {
	width: 725px;
	margin-right: -25px;
	overflow: hidden;
}
#welcome #hairstyle li {
	width: 120px;
	float: left;
	margin-right: 25px;
}


/* =NEWS
----------------------------------------------- */

#news dl {
	overflow: hidden;
	zoom: 1;
	letter-spacing: 0.1em;
	padding-top: 15px;
	background: url(../images/line.png) no-repeat left top;
}
#news dl dt,
#news dl dd {
	line-height: 1.6;
	margin-bottom: 15px;
	padding-bottom: 15px;
}
#news dl dt {
	width: 100px;
	font-size: 92%;
	letter-spacing: 0.1em;
	float: left;
	clear: both;
}
#news dl dd {
	font-size: 92%;
	padding-left: 120px;
	background: url(../images/line.png) no-repeat left bottom;
}


/* =STAFF
----------------------------------------------- */

#staff { background: url(../images/aboutus/staff-illust.png) no-repeat 100% 5%; }
.staffBox {
	margin-bottom: 30px;
}
.staffInfo {
	width: 470px;
	float: right;
}
.staffInfo .role {
	font-size: 92%;
	line-height: 1.4;
	letter-spacing: 0.1em;
	margin-bottom: 10px;
}
.staffInfo .name {
	font-size: 114%;
	line-height: 1.4;
	font-weight: bold;
	letter-spacing: 0.3em;
	margin-bottom: 20px;
}
.staffInfo .name span {
	display: block;
	font-size: 75%;
	padding-top: 7px;
	letter-spacing: 0.2em;
}
.staffInfo .comment {
	font-size: 92%;
	line-height: 1.6;
}
#staff .recruit {
	padding: 15px;
	background-color: #fff;
}
#staff .recruit p {
	font-size: 92%;
	line-height: 1.5;
}


/* =SALON
----------------------------------------------- */

#salon { background: url(../images/aboutus/salon-illust.png) no-repeat 0 5%; }

#salon h3.column-title,
#salon h4.column-subtitle,
#salon p.leed {
	width: 520px;
	padding-left: 180px;
}
#salon .shop-photo {
	width: 720px;
	margin-right: -20px;
	letter-spacing: -.4em;
}
#salon .shop-photo img {
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: top;
	margin: 0 20px 20px 0;
}


/* =====================================================================
*    HAIR CUT
* =================================================================== */

body#haircut #mainvisual {
	width: 900px;
	height: 300px;
	margin: auto;
}

/* =CONCEPT
----------------------------------------------- */

#concept { background: url(../images/haircut/concept-illust.png) no-repeat 90% 25%; }

#recruit .bg-photo {
	width: 200px;
	height: 245px;
	position: absolute;
	right: 40px;
	top: 120px;
	z-index: -100;
}


/* =MENU
----------------------------------------------- */

#menu { background: url(../images/haircut/menu-illust.png) no-repeat 100% 2%; }

#menu h4.column-subtitle {
	height: 38px;
	font-size: 136%;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	letter-spacing: 0.3em;
	line-height: 1.4;
	text-align: center;
	margin: 0;
	padding: 47px 0 35px;
	background: url(../images/haircut/menu-bg-header.png) no-repeat center top;
}

#menu .haircut,
#menu .color,
#menu .hairreset,
#menu .permanent,
#menu .straight,
#menu .treatment,
#menu .headspa { margin-bottom: 20px; }

#menu h5 {
	font-size: 114%;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	letter-spacing: 0.16em;
	line-height: 1.5;
	text-align: center;
	margin-bottom: 25px;
}

.menu-box {
	width: 720px;
	margin-right: -20px;
	overflow: hidden;
	letter-spacing: -.4em;
}
.menu-box li {
	width: 340px;
	margin-right: 20px;
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: top;
}

.menu-box-inner {
	padding: 0 35px 110px;
	background: url(../images/haircut/menu-bg-body.png) no-repeat center bottom;
}

.menu-concept {
	padding-bottom: 48px;
	margin-bottom: 40px;
	background: url(../images/haircut/menu-line.gif) no-repeat center bottom;
}
#menu .menu-concept p {
	font-size: 92%;
	letter-spacing: 0.02em;
	line-height: 2.0;
}

#menu table {
	width: 100%;
	background: url(../images/line.png) no-repeat left top;
}
#menu table th,
#menu table td {
	line-height: 1.4;
	padding-top: 10px;
}
#menu table th.menu {
	font-size: 92%;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#menu table td.price {
	font-size: 92%;
	text-align: right;
}
#menu table td.detail {
	font-size: 80%;
	padding: 7px 0 10px 0;
	background: url(../images/line.png) no-repeat left bottom;
}
#menu table .line {
	padding: 10px 0;
	background: url(../images/line.png) no-repeat left bottom;
}
#menu p.notice {
	font-size: 85%;
	line-height: 1.5;
	margin-top: 15px;
}



/* =STYLE
----------------------------------------------- */

#style { background: url(../images/haircut/style-illust.png) no-repeat 0 2%; }
#style h3.column-title,
#style p.leed {
	width: 520px;
	padding-left: 250px;
}

#style h4.column-subtitle {
	width: 300px;
	font-size: 122%;
	font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", serif;
	letter-spacing: 0.2em;
	line-height: 1.4;
	margin-bottom: 20px;
}
#style .style-list {
	width: 390px;
	font-size: 92%;
	letter-spacing: 0.1em;
	text-align: right;
}

#style h4,
#style .style-list {
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: middle;
}

#style .short,
#style .medium,
#style .long,
#style .mens { margin-bottom: 30px; }

#style ul {
	width: 720px;
	height: 145px;
	overflow: hidden;
	margin-right: -20px;
	overflow: hidden;
	letter-spacing: -.4em;
}
#style ul li {
	width: 90px;
	margin-right: 20px;
	padding: 5px;
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: top;
	background-color: #fff;
}
#style ul li:hover,
#style ul li:focus { background-color: #6B4E0F; }


.pagination {
	text-align: center;
	margin-top: 15px;
}
.pagination a {
	background: url(../images/haircut/pagenation.png) 0 0 no-repeat transparent;
	width: 18px;
	height: 20px;
	margin: 0 15px 0 0;
	display: inline-block;
}
.pagination a:hover,
.pagination a:focus { background-position: 0 -20px; }
.pagination a.selected {
	background-position: 0 -20px;
	cursor: default;
}
.pagination a span {
	display: none;
}


/* =VOICE
----------------------------------------------- */

#voice { background: url(../images/haircut/voice-illust.png) no-repeat 100% 8%; }
#voice-list {
	width: 720px;
	height: 170px;
	overflow: hidden;
	margin-right: -20px;
	overflow: hidden;
	letter-spacing: -.4em;
}

#voice-list li {
	width: 210px;
	margin-right: 20px;
	padding: 5px;
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: top;
	background-color: #fff;
}
#voice-list li:hover,
#voice-list li:focus { background-color: #6B4E0F; }


/* =====================================================================
*    SALON INFO
* =================================================================== */

/* =CONTACT
----------------------------------------------- */

#contact { background: url(../images/saloninfo/contact-illust.png) no-repeat 100% 10%; }
.contact-box {
	width: 380px;
	float: right;
}
.contact-box h4 {
	line-height: 1.4;
	margin-bottom: 15px;
}
.contact-box h5 {
	font-size: 92%;
	font-weight: bold;
	line-height: 1.4;
	letter-spacing: 0.1em;
	margin: 18px 0 10px;
}
.contact-box p {
	font-size: 92%;
	line-height: 1.8;
}


/* =ACCESS
----------------------------------------------- */

#access { position: relative; }

.bg-illust {
	width: 155px;
	height: 172px;
	position: absolute;
	left: 240px;
	top: 20px;
}

#access .map {
	margin-bottom: 15px;
	padding: 10px;
	background-color: #fff;
}
#access .map-box {
	letter-spacing: -.4em;
}
#access p {
	width: 50%;
	font-size: 92%;
	display: -moz-inline-box; /*for Firefox 2*/
    display: inline-block; /*for modern*/
    /display: inline; /*for ie5～7*/
    /zoom: 1; /*for ie5～7*/
	letter-spacing: normal;
	vertical-align: top;
}


/* =RECRUIT
----------------------------------------------- */

#recruit { position: relative; }
#recruit h4 {
	font-size: 114%;
	font-weight: bold;
	letter-spacing: 0.1em;
	margin-bottom: 20px;
}

#recruit .bg-photo {
	width: 200px;
	height: 260px;
	position: absolute;
	right: 40px;
	top: 120px;
	z-index: -100;
}



/* =====================================================================
*    FOOTER
* =================================================================== */

#footer {
	margin-top: 70px;
}
.pagetop {
	width: 76px;
	position: fixed;
	right: 30px;
	bottom: 50px;
}
.footer-info {
	width: 530px;
	margin: 30px auto 40px;
	padding-top: 30px;
	background: url(../images/line.png) no-repeat left top;
}
.footer-info .information {
	float: left;
	width: 230px;
}
.footer-info .information h5 {
	font-size: 92%;
	line-height: 1.5;
	margin-bottom: 5px;
}
.footer-info .information .address {
	font-size: 85%;
	line-height: 1.8;
}
.footer-info .map {
	float: left;
	width: 130px;
	margin-left: 30px;
}
.footer-info .map h6 {
	line-height: 1.0;
	margin-bottom: 10px;
}
.footer-info .map .hour {
	font-family: Garamond, serif;
	font-size: 92%;
	line-height: 1.4;
	letter-spacing: 0.1em;
}
.footer-info .map a {
	font-family: Garamond, serif;
	font-size: 92%;
	line-height: 1.4;
}
.footer-info .socialbtn {
	float: right;
	width: 100px;
	line-height: 1;
}

#copyright {
	color: #F5EAD5;
	font-family: Garamond, serif;
	font-size: 92%;
	line-height: 1.4;
	letter-spacing: 0.1em;
	text-align: center;
	padding: 5px 0;
	background-color: #6B4E0F;
}