@charset "utf-8";

/**
 * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
 * http://cssreset.com
 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/**
 * Structure
 */
html {
	height: 100%;
	overflow-y: scroll;
	font-size: 62.5%;
}
body {
	color: #000;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 14px;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
	/*background:#F5EFE5;*/
}
* {
	box-sizing: border-box;
}
#wrapper {
	overflow: hidden;
}

/* Alignment */
.left {
	float: left;
}
.right {
	float: right;
}
.align-left {
	float: left;
	margin-right: 1.625em;
}
.align-right {
	float: right;
	margin-left: 1.625em;
}
.txt-right {
	text-align: right;
}
.align-center {
	clear: both;
	margin: 0 auto;
}
.align-center.fix {
	width: 100%;
}
.align-center.fix img{
	max-width: 100%;
	height: auto;
}

/**
 * Typography
 */
strong {
	font-weight: bold;
}
.center {
	text-align: center;
}
.arrow {
	padding-bottom: 74px;
	background: url(../img/arrow.png) no-repeat center bottom;
}
.ffsan {
	font-weight: normal;
	font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.fs16px {
	font-size: 16px;
}
.fs24px {
	font-size: 24px;
}


/* Links */
a {
	outline: none;
	text-decoration: none;
	-webkit-tap-highlight-color: rgba(152,152,152,0.3);
}
a:link,
a:visited {
	color: #2a2d3e;
}
a:hover {
	text-decoration: none;
}
a:active,
a:focus {
	background-color: transparent;
}
a,
a img {
	-webkit-transition: 0.2s ease-in-out;  
	-moz-transition: 0.2s ease-in-out;  
	transition: 0.2s ease-in-out;  
}
a:hover img {
	opacity: 0.7;  
	filter: alpha(opacity=70);  
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}


/* =Header
----------------------------------------------- */
#header .inner {
	position: relative;
	padding: 0;
	background: #fff;
	width: 1024px;
	margin: 0 auto;
}
#header .inner .home_menu {
	display:inline-block;
}
#header .inner .home_menu ul {
	margin:0;
	
}
#header .inner .home_menu ul li {
	margin:0 34px;
	display:inline-block;
}
#header .inner .home_menu ul li:first-child {
	margin:0 34px 0 17px;
	display:inline-block;
}

#header .inner .home_menu ul li a {
	padding:0 17px 34px;
	display: block;
	overflow: hidden;
	background-repeat: no-repeat;
	background-position: 0 50%;
	text-indent: 300%;
	white-space: nowrap;
}
#header .inner .home_menu ul li a:hover {
	margin:0;
	padding:0 17px 34px;
	opacity: 0.7;
	filter: alpha(opacity=70);  
	border-top: solid 3px #C8BB9B;
}
#header .inner .home_menu ul li.top a {
	width: 49px;
	background: url(../images/nav01.png) no-repeat center 21px ;
	border-top: solid 3px #C8BB9B;
}
#header .inner .home_menu ul li.concept a {
	width: 93px;
	background: url(../images/nav02.png) no-repeat center 21px ;
}
#header .inner .home_menu ul li.salon_menu a {
	width: 67px;
	background: url(../images/nav03.png) no-repeat center 21px ;
}
#header .inner .home_menu ul li.shop a {
	width: 59px;
	background: url(../images/nav04.png) no-repeat center 21px ;
}
*#header .inner .blog a{
	position:absolute;
	top:26px;
	right:180px;
	background:url(../images/nav05.png) no-repeat 0 50%;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 70px;
}
#header .inner .fb a{
	position:absolute;
	top:26px;
	right:10px;
	background:url(../images/nav06.png) no-repeat 0 50%;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 118px;
}

#header .inner .inst a{
	position:absolute;
	top:26px;
	right:130px;
	background:url(../images/nav07.png) no-repeat 0 50%;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 180px;
}

.main-visual {
	overflow: hidden;
	height: 0;
}
#bg-img {
	position: relative;
	height: 676px;
	text-align: center;
}
#bg-img .fix-image {
	position: relative;
	max-width:1200px;
	max-height: 676px;
	margin:0 auto;
	text-align: center;
}
#bg-img #logo {
	position: absolute;
	top: 60px;
	right:100px;
	z-index: 1;
	width:508px; height:82px;
	background:url(../images/site_name.png) no-repeat;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;

}

#navigation { display:none;}

/* =Footer
----------------------------------------------- */
#footer {
	clear: both;
}
#footer .inner {
	width: 1200px;
	margin: 0 auto;
	padding: 0 0 20px;
}

#footer iframe {
	width: 1200px;
	margin: 0 auto;
}
#footer small {
	display: block;
	color: #858594;
	font-family: Verdana;
	font-size: 12px;
	text-align: center;
}
/* =Others
----------------------------------------------- */
#scrolltop {
	display: block;
	overflow: hidden;
	width: 60px;
	height: 60px;
	background: url(../images/pagetop.png) no-repeat 0 0;
	text-indent: 100%;
	white-space: nowrap;
	position: fixed;bottom: 100px;right: 10px;
	cursor:pointer;
}
/* =Contents
----------------------------------------------- */
#contents {
	position: relative;
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 40px;
}

/* concept */
#contents .inner#concept {
	padding-top:20px;
	width: 1200px;
	margin-top: 40px;
	background:url(../images/img_audrey.gif) no-repeat right 70px;
	height:497px;
}
#concept .audrey_txt{
	width:50%;
	margin:0 auto;
	padding:40px 0;
	text-align:center;
}
#concept h2,
#menu h2{
	margin:0 auto;
	padding-bottom:40px;
	width: 228px;
	text-align:center;
	background: url(../images/underline.gif) no-repeat center bottom;
}
#concept .ann-holly_name{
	background:#F6F4EE;
	width:48%;
	margin:0 auto;
	padding:20px 30px;
	font-size:13px;
}
#concept .yurai{
	color:#EA4472;
	font-size:14px;
}
.salon_image {
	text-align:center;
}

/* menu */
#contents .inner#menu {
	width: 1200px;
	margin: 20px 0 50px;
	padding-top:20px;
	overflow:hidden;
}
#menu .menu_block{width:47%; display:inline-block;margin:30px 10px; vertical-align:top;}
table	{margin:10px 10px 20px;width: 100%;}
#menu .menu_list{color:#3F210E; font-size:16px; text-align:left; font-weight:bold; margin:0 20px;}
#menu .menu_list span{border-bottom:dotted 2px #3F210E; padding:0 5px 2px;}
th, td	{ padding: 10px;}
th	{width:70%; text-align: left; }

/* shop */
#contents .inner#shop {
	width: 1000px;
	margin: 50px auto 20px;
	padding-top:20px;
	overflow:hidden;
}
#shop h2 {
	margin:0 auto 30px;
	padding-bottom:40px;
	width: 228px;
	text-align:center;
	background: url(../images/underline.gif) no-repeat center bottom;
}

#shop .column_left{margin:0;display:inline-block; vertical-align:top; width:45%}
#shop .column_right{margin:0;display:inline-block; vertical-align:top; width:50%;}
#shop .column_right table .box{
	background:#F6F4EE;
	margin:10px 0 0;
	padding:10px 15px;
	font-size:13px;
}
#shop .column_right table th	{width:6em; text-align: left; }
#shop .column_right table th, td	{ padding:5px 10px;}
#shop .shop_title{margin:0 20px;}
#shop .column_right .stylist{
	background:url(../images/bg_profile.png) no-repeat right top;
	margin: 100px 0 0 20px;
	padding:30px 30px 0 0;
	font-size:14px;
	width:65%;
}
#shop .column_right .stylist .bold{
	font-weight:bold;
	font-size:15px;
}
.moyu{
	margin: 3em auto;
	padding: 0 1rem;
	max-width: 800px;
	text-align: center;
	line-height: 2em;
}
.moyu span {
    font-size:12px;
	line-height: 1.4;
}
/* =iphone
----------------------------------------------- */
/*----- header-navi -----*/
#sp_header,.salon_image_sp {display: none;}

@media only screen and (max-width: 1160px) {
#header .inner,
#footer .inner,
#footer iframe,
#contents,
#contents .inner#concept,
#contents .inner#menu{ width:100%;
}
#contents .inner#shop{ width:95%;
}
#bg-img {
	height: auto;
}
#bg-img .fix-image {
	max-width:100%;
	max-height: auto;
}
}

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

@media only screen and (max-width: 1024px) {
/* =Contents
----------------------------------------------- */
/* concept */
#contents .inner#concept {
	background-size:25%;
	padding:20px 0 40px;
	height:auto;
}
}

@media only screen and (max-width: 960px) {
/* =Contents
----------------------------------------------- */
/* concept */
#contents .inner#concept {
	background-size:25%;
	padding:20px 0 60px;
}
#concept .audrey_txt{
	width:65%;
	margin:0 20px 0 80px;
	text-align:left;
}
#concept .audrey_txt br{
	display:none;
}
#concept .ann-holly_name{
	background:#F6F4EE;
	width:65%;
	margin:0 20px 0 80px;
}
#shop .column_right .stylist{
	width:70%;
}

}
@media only screen and (max-width: 950px) {
/* concept */
#contents .inner#concept {padding:20px 0 35px;}
}

@media only screen and (max-width: 940px) {
/* concept */
#contents .inner#concept {padding:20px 0 25px;}
}

@media only screen and (max-width: 900px) {
/* concept */
#contents .inner#concept {padding:20px 0 15px;}
#concept .audrey_txt{
	width:70%;
	margin:0 20px 0 50px;
	text-align:left;
}
#concept .audrey_txt br{
	display:none;
}
#concept .ann-holly_name{
	background:#F6F4EE;
	width:68%;
	margin:0 20px 0 50px;
}
#shop .column_right .stylist{
	width:80%;
}
/* shop */
#shop .column_right table .box{
	padding:5px;
}
}
@media only screen and (max-width: 880px) {
#shop .column_left{margin:0;display:inline-block; vertical-align:top; width:37%}
#shop .column_right{margin:0;display:inline-block; vertical-align:top; width:55%;}
}

@media only screen and (max-width: 840px) {
/* concept */
#contents .inner#concept {
	background-position:right 140px;
	background-size:25%;
    padding:20px 0 25px;}
}

@media only screen and (max-width: 768px) {
#header .inner,
#bg-img #logo,.main-visual {
 display:none;}

#sp_header{display:block; margin-top:5px;}
.salon_image_sp{display:block; margin-top:65px;}
.header-navi{
	position:relative;}

.header-navi .button-toggle {
	position: absolute;
	right:10px;
	width: 40px;
	height: 40px;
	margin: 5px 0 10px;
	color: #F384A9;
	font-size: 35px;
	line-height:40px;
	text-align: center;
	box-shadow: 0 0 0 2px #F384A9;
	cursor:pointer;
}
.header-navi .title {
	height: 5px;
	line-height: 50px;
	width: 100%;
	text-align: left;
}
.header-navi .title h1 {
	margin: 0 0 0 10px;
}
.header-navi .menu {
	position: absolute;
	top:70px;
	width: 100%;
	background:#F384A9;
	color: #999;
	overflow: hidden;
	z-index:1;
}
.header-navi .menu ul {
	padding: 0;
	margin: 0;
	list-style: none;
}
.header-navi .menu li {
	position: relative;
}
.header-navi .menu a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 15px 20px 5px 80px;
	border-bottom: 1px solid #fff;
	font-size: 20px;
	background:url(../images/sp_icon.png) no-repeat 20px center;
}

.header-navi .menu a:hover {
	background: #F384A9;
	background:url(../images/sp_icon.png) no-repeat 20px center;
} 
 



/* concept */
#contents .inner#concept {
	background-position:right 30px;
	background-size:22%;
    padding:20px 0 25px;}
#concept .ann-holly_name{
	background:#F6F4EE;
	width:100%;
	margin:0 auto;
	padding:20px 30px;
	font-size:13px;
}

/* menu */
#menu .menu_block{width:90%; display:block;margin:30px auto;}

/* shop */
#shop table	{ margin: 10px 10px 10px  15px; }
#shop th,
#shop td{
		width: 100%;
        display: block;
		border-top: none;
    }
#shop th{
	background:#EFECE0;
    }
}
@media only screen and (max-width: 754px) {
/* concept */
#contents .inner#concept {
	background-position:right 40px;
}
#shop .column_right .stylist{
	width:100%;
}
@media only screen and (max-width: 725px) {
/* concept */
#contents .inner#concept {
	background-position:right 50px;
}
@media only screen and (max-width: 700px) {
/* concept */
#contents .inner#concept {
	background-position:right 60px;
}
#concept .audrey_txt{
	width:73%;
	margin:0 20px 0 25px;
	text-align:left;
}
@media only screen and (max-width: 640px) {
/* concept */
#contents .inner#concept {
	background-position:right 100px;
}
}
@media only screen and (max-width: 568px) {
#navigation #header-comu img {
	max-width: 90%;
	height: auto;
	vertical-align: middle;
}

/* concept */
#contents .inner#concept {
	background-position:right 150px;
}
#shop .column_left{margin:0;display:inline-block; vertical-align:top; width:35%}
#shop .column_right{margin:0;display:inline-block; vertical-align:top; width:60%;}
#shop .column_right .stylist{
	margin: 0 0 0 20px;
	width:100%;
}
}
@media only screen and (max-width:480px){
.header-navi .title h1 img {
	max-width: 90%;
	height: auto;
	vertical-align: middle;
}
.header-navi .button-toggle {
	position: absolute;
	right:10px;
	width: 35px;
	height: 35px;
	margin: 5px 0 10px;
	color: #F384A9;
	font-size: 33px;
	line-height:35px;
	text-align: center;
	box-shadow: 0 0 0 2px #F384A9;
	cursor:pointer;
}

/* concept */
#contents .inner#concept {
	padding-top:0;
	margin-top: 40px;
	background-position: center 300px;
	background-size:30%;
}
#concept .audrey_txt{
	width:90%;
	margin:0 auto;
	padding:40px 0 240px;
}
/* menu */
#menu .menu_block{width:98%; display:block;margin:30px auto;}
#menu .menu_list{margin:0 10px;}

#menu table	{ margin: 10px 10px; }
#menu th,
#menu td{
		width: 95%;
        display: block;
		border-top: none;
    }
#menu th{
	background:#EFECE0;
    }
#shop .column_left{margin:0 auto 10px;width:98%; text-align:center;}
#shop .column_left .right{float:none;}
#shop .column_right{margin:0 auto;width:98%;}
#shop .column_right .stylist{
	width:90%;
}
}
@media only screen and (max-width:435px){
.header-navi .title h1 img {
	max-width: 85%;
	height: auto;
	vertical-align: middle;
}
/* concept */
#contents .inner#concept {
	padding-top:0;
	margin-top: 40px;
	background-position: center 330px;
	background-size:30%;
}
#concept .audrey_txt{
	width:90%;
	margin:0 auto;
	padding:40px 0 230px;
}
}
@media only screen and (max-width: 414px) {
#navigation {
	position: relative;
	overflow:hidden;
	width: 100%;
	padding: 10px 0 10px 10px;
	z-index: 500;
	display:block;
}
#navigation #header-comu img {
	max-width: 75%;
	height: auto;
	vertical-align: middle;
}

/* concept */
#contents .inner#concept {
	padding-top:0;
	margin-top: 40px;
	background-position: center 330px;
	background-size:30%;
}
#concept .audrey_txt{
	width:90%;
	margin:0 auto;
	padding:40px 0 210px;
}
}
@media only screen and (max-width: 408px) {
/* concept */
#contents .inner#concept {
	padding-top:0;
	margin-top: 40px;
	background-position: center 330px;
	background-size:30%;
}
#concept .audrey_txt{
	width:90%;
	margin:0 auto;
	padding:40px 0 200px;
}
}

@media only screen and (max-width: 320px) {
.header-navi .title h1 img {
	max-width: 80%;
	height: auto;
	vertical-align: middle;
}
/* concept */
#contents .inner#concept {
	background-position: center 370px;
	background-size:38%;
}

}

@media screen and (max-height: 26.375em){
}