// LESS: mixin

@color: #000000;//背景のカラー
@clumn_color: #0c0d0f;//第二階層の背景カラー

@txt: #666666;//テキストのカラー
@li_txt: #ffffff;//一番明るいテキストのカラー
@sub_txt: #464646;//サブテキストのカラー
@lv2_txt: #cdc6c3;//第二階層テキストのカラー

@a_txt: #666666;
@a_hover: #999999;
@point:#845d05;//アクセントカラー(基本)
@point02:#ae850f;//アクセントカラー(明るい)
@txt_boder:#6e6e6e;//テキストボーダーカラー
@boder:#282828;//ボックスボーダーカラー(フッタなど目立たないように)

@main_box:980px;//大枠メインボックスの最大幅
@main_margin_left:142px;//大枠メインボックスの左の幅
@main_column_box:690px;//メインのコンテンツ幅

@sub_column_box:270px;//サブのコンテンツ幅
@clumn_box:960px; //第二階層の横幅 

@list_box:880px;//左にリストのあるコンテンツの横幅
@list_main_box:640px;//左にリストのあるメインボックス
@list_sub_box:217px;//左にリストのあるサブボックス

@font_ss:64%;
@font_s:78%;
@font_m:80%;
@font_l:96%;
@font_ll:120%;


/*.myBorder(@myWidth:2px) {
    border-top: @myWidth solid red;
    border-bottom: (@myWidth * 2) solid red;
}

h1 {
    color: @color;
    .myBorder;
}

h2{
    color: @color;
    .myBorder(10px);
}



@borderColor: red;

#header {
    font-size: 32px;
    
    .logo {
        font-weight:bold;
        &:hover { font-weight: normal; }
    }

    .menu {
        @borderColor: #ccc;
    }
    
}
*/

/* ==============================
リセット関係
 ============================== */
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, font, 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 {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
	color:@txt;
	font-family:"A-OTF 新ゴ Pr5 L","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
ol img, ul img{
	vertical-align:bottom;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
img{
	vertical-align:bottom;
}
/* remember to define focus styles! */
:focus {
    outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

a{ color:@a_txt; text-decoration:underline;}
a:visited{color:@a_txt;}
a:hover{color:@a_hover;}



.paragra{
	font-size:@font_m;
	color:@lv2_txt;
	line-height:1.7em;
}
.h3{
	font-size:@font_l;
	font-weight:bold;
	margin-bottom:14px;
	margin-left:12px;
	color:#ffffff;
}
/*リストのあるボックス*/
.list-box{
	overflow: hidden; 
	position: relative;
	width:@list_box;
	margin-left:44px;
	margin-top:22px;
}
.main-box{
	width:@list_main_box;
	float:left;
}
.sub-box{
	width:@list_sub_box;
	float:right;
	ul.list li{
		margin-bottom:4px;
	}
}
/*フロート系*/
.float-box{
	overflow: hidden; 
	position: relative;
}
/*ライン系*/
.border{
	border-bottom:1px solid @txt_boder;
	padding-bottom:22px;
	margin-bottom:22px;
}
.line-box{/*ラインで囲まれた枠*/
	border:1px solid @txt_boder;
	padding:12px;
}

/* ==============================
レイアウト関係
 ============================== */
body{	background-color:@color;}

#wrap{
	#header-box{
		background:url(/images/common/bg.jpg) no-repeat left top;
		border-bottom:1px solid @point;
		text-align:left;
		position:relative;
		height:103px;
		
		#header{			
			width:@main_box;
			height:162px;
			position:absolute;
				left: @main_margin_left;
			.float-box();
    		p#logo{
				float:left;
				text-align:left;
				width:270px;
				margin:0;				
			}
			p{
				font-size:@font_s;
				float:right;
				width:710px;
				text-align:right;
				margin-bottom:8px;
			}
			h1{
				font-size:@font_ss;
				float:right;
				width:710px;
				text-align:right;
				margin-bottom:8px;
			}
			ul#sub{
				.float-box();
				float:right;
				width:710px;
				li{
					float:right;
					margin-left:5px;
					margin-bottom:13px;
				}
			}
			ul#gnavi{
				.float-box();
				position:absolute;
				left: 300px;
				top: 51px;
				width:710px;
				height:112px;
				li.menu_on ul{
					display:block;
					height:200px;
					width:112px;
				}
				li.menu ul{
					display:none;
					height:200px;
					width:112px;
				}
				li{
					float:left;
					margin-left:50px;
					margin-bottom:0;
					ul{
						left: 344px;
						position: absolute;
						top: 53px;
						z-index:2;
						li a{
							background-color: #3e3e3e;
							border: 1px solid @boder;
							color: #cccccc;
							display: block;
							height: 20px;
							padding: 4px;
							width: 112px;
							font-size:@font_s;
							text-align:center;
							text-decoration:none;
						}
					}
				}
			}
		}
	}
}

ul#sub_navi{
	.float-box();
	width:@main_box;
	margin-left:@main_margin_left;
	margin-bottom:10px;
	li{
		float:left;
	}
}

/*
body #wrap{
	overflow: hidden; 
	position: relative;
}

body #head{float:left;}
body #main{float:left;}
body #foot{float:right;}
*/
#wrap{
	#Content{
		width:@main_box;
		margin-left:@main_margin_left;
		#mainimg{
			margin-top:1px;
			margin-bottom:20px;
		}
		#area{
			.float-box();
			padding-bottom:20px;
			#main-column{
				width:@main_column_box;
				float:left;
				#navi-box{
					.float-box();
					li{
						float:left;
					}
					li.n1{
						margin-right:16px;
						margin-bottom:24px;
					}
					li.n2{
						margin-right:16px;
						margin-bottom:24px;
					}
					li.n3{
						margin-right:0;
						margin-bottom:24px;
					}
					li.n4{
						margin-right:16px;
						margin-bottom:0;
					}
					li.n5{
						margin-right:16px;
						margin-bottom:0;
					}
					li.n6{
						margin-right:0;
						margin-bottom:0;
					}
				}
			}
			#sub-column{
				width:@sub_column_box;
				float:right;
				#news-box{
					background:url(/images/index/bg_btm01.gif) no-repeat bottom;
					border-left:1px solid #656565;
					border-right:1px solid #656565;
					background-color:#140f03;
					padding-bottom:28px;
					margin-bottom:18px;
					font-size:@font_m;
					h3.title{
						background:url(/images/index/bg_top01.gif) no-repeat top;
						height:40px;
						padding-left:89px;
						padding-top:24px;
					}
					dl{
						margin:0 20px;
						overflow: auto;
						height:130px;
						dt{
							color:@point;
						}
						dd{
							line-height:1.4em;
							margin-bottom:16px;
						}
					}
					
				}
				#banner-box li{
					margin-bottom:8px;
				}
			}
		}
	}
}

#wrap{
	#footer-box{
		border-top:1px solid @boder;
		#footer{
			.float-box();
			width:@main_box;
			margin-left:@main_margin_left;
			padding-top:28px;
			padding-bottom:28px;
			#logo{
				float:left;
				margin:10px 20px 18px 0;	
			}
    		#lead{
				float:left;
				font-size:@font_s;
				color:@sub_txt;
				line-height:1.65em;
				margin:10px 60px 0 0;
			}
			#lead_indent{
			text-indent: -5em;
			margin: 0 0 0 5em;
			}
			
			@media screen and (-webkit-min-device-pixel-ratio:0) {
			#lead_indent{
			text-indent: -4.8em;
			margin: 0 0 0 4.8em;
			}
			}
			
			#navi{
				.float-box();
				width:100%;
				float:right;
				li{
					float:right;
					margin-left:20px;
				}			
			}
		}
	}
	#copylight-box{
		border-top:1px solid @point;
		#copylight{
			width:@main_box;
			margin-left:@main_margin_left;
			font-size:@font_ss;
			color:@point;
			text-align:right;
			margin-top:6px;
			margin-bottom:12px;
		}
	}
	
}


#box{
	border:1px solid @boder;
	padding-bottom:26px;
	margin-bottom:16px;
	h2{
		margin-bottom:20px;
	}
	.normal-box{
		margin:8px 18px;
		padding-bottom:8px;
		font-size:@font_m;
		line-height:1.5em;
		border-bottom:1px solid @boder;
		strong{
			color:@point;
			font-size:@font_ll;
		}
	}
	.leftimg{
		.float-box();
		margin-left:24px;
		.img{
			float:left;
			width:249px;
			border:1px solid #3f3c38;
			margin-right:20px;
		}
		div{
			width:380px;
			float:left;
			line-height:1.4em;
			h3{
				color:#fffefe;
				font-weight:bold;
				margin-bottom:14px;
			}
			p{
				font-size:@font_m;
			}
		}
	}
}

.img_top{
	text-align:right;
	margin-right:80px;
	margin-top:44px;
}

/******************************************
コンセプト
*******************************************/
.column-box{
	width:@clumn_box;
	
	border:1px solid @point;
	/*background-color:@clumn_color;*/
	padding-bottom:48px;
	margin-bottom:14px;
	margin-left:10px;
	
background-image:url(/images/common/bg_btm01.gif),url(/images/common/box_bg.gif);
background-position:bottom,left top;
background-repeat:no-repeat,repeat-x;

	.clumn{
		min-height:263px;
		background:url(/images/concept/img_01.png) no-repeat top left;
		padding-left:272px;
		width:608px;
		margin-left:44px;
		margin-top:22px;
		h3{
			margin-bottom:28px;
		}
		p{
			font-size:@font_m;
			color:@lv2_txt;
			line-height:1.6em;
		}
	}
}

div.column-box{//写真が右にある時

	div.img_right{
		.float-box();
		width:880px;
		margin-left:64px;
		margin-top:22px;
		p.img{
			float:right;
			margin-right:52px;
		}
		div.txt{
			float:left;
		}
		div.txt h3{
			margin-bottom:8px;
		}
		div.txt p{
			.paragra();
			margin-left:26px;
			margin-bottom:6px;
		}
		div.txt ul{
			margin-bottom:24px;
		}
		div.txt ul li{
			color:@lv2_txt;
			font-size:@font_m;
			line-height:1.6em;
			margin-left:42px;
			list-style:disc;
		}
	}
}


/******************************************
メニュー
*******************************************/
div.list_right{//リストが右にあるパターン
		.list-box();
		.main{
			.main-box();
			h3{
				margin-bottom:18px;
				margin-top:12px;
			}
			h4{
				margin-left:10px;
				margin-bottom:4px;
			}
			p{
				margin-bottom:18px;
			}
			p.img{
				margin-bottom:40px;
			}
			p.img-r{
				text-align:right;
				margin-bottom:80px;
			}
			
		}
		.sub{
			.sub-box();
			
		}
}
div.list_right p{
	.paragra();
	padding-left:12px;
}
div#Content div.column-box div.list_right .main ul li{
	.paragra();
	margin-left:40px;
	list-style-type:disc;
	margin-bottom:6px;
}

/******************************************
ブログ
*******************************************/
div.blog_box{//ブログのような感じ
	.list-box();
	.main{
		.main-box();
		.list{
			.float-box();
			.border();
			.img{
				float:left;
				margin-right:12px;
			}
			
		}
	}
	.sub{
		.sub-box();
	}
}
div.blog_box p{
	.paragra();
	padding-left:12px;
}
div.blog_box p.date{
	.paragra();
	padding-left:12px;
	font-weight:bold;
	color:@point02;
}
div.blog_box strong{
	.paragra();
	font-size:@font_l;
	font-weight:bold;
	color:@point02;
}
div.blog_box h3{
	.h3();
}
div.blog_box h3 a{
	color:#ffffff;
	text-decoration:none;
}

div.blog_box h3 a:hover{
	text-decoration:underline;
}

/******************************************
スタッフ紹介
*******************************************/
div.list_right{//リストが右にあるパターン 店長用
	.list-box();
	.main{
		.main-box();
		.list-boss{
			.float-box();
			.border();
			.img{
				float:left;
				margin-right:12px;
			}
			h3{
				margin:78px 0 8px 282px;
			}
			
		}
	}
	.sub{
		.sub-box();
	}
}
div.list_right .main .list-boss p{
	margin:0;
	margin-left:282px;
	padding:0;
}
div.list_right .main .list-boss p.img{
	margin:0 0 0 62px;
	padding:0;
}


div.list_right{//リストが右にあるパターン スタッフ
	.list-box();
	.main{
		.main-box();
		.list-member{
			.float-box();
			.border();
			padding-left:66px;
			.list{
				float:left;
				margin: 0 8px 0 16px;
				width:142px;
				height: 270px;    
			}
		}
	}
}
div.list_right .main .list-member p.img{
	margin:0;
	padding:0;
}


div.list_right .main .list-member .list p{
	margin:0;
	padding:0;
	color:#ffffff;	
	line-height:1.3em;
}
div.list_right .main .list-member .list p.img{
	margin-bottom:4px;
}

div.list_right .main .list-member .list p strong{
	margin:0;
	padding:0;
	color:#ffffff;
	font-size:@font_m;
	line-height:1.3em;
}
div.list_right .main .list-member .list h4{
	margin:0;
	padding:0;
	color:@point;
}



/********************************************
フォーム関係
*********************************************/
.form-box{
	min-height:263px;
	width:800px;
	margin-left:84px;
	margin-top:22px;
	h3{
		margin-bottom:8px;
	}
	h4{
		font-size:@font_ll;
		color:#ffffff;
		margin-bottom:18px;
	}
	p{
		.paragra();
		margin-bottom:12px;
	}
	p.subtxt{
		font-size:@font_l;
		color:@point;
		margin-bottom:0;
		margin-top:8px;
	}
	table {
		border-top: 1px solid @point;
		width: 100%;
		font-size: inherit;
		border-collapse: collapse;
		border-spacing: 0;
		th{
			border-bottom: 1px solid @point;
			padding-bottom: 10px;
			padding-right: 10px;
			padding-top: 10px;
			vertical-align: top;
			font-size:@font_m;
			color:#ffffff;
			text-align: left;
			white-space: nowrap;
			em {
				color: @point;
			}
		}
		td {
			border-bottom: 1px solid @point;
			border-left: 1px solid @point;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-top: 10px;
			width: 100%;
			font-size:@font_m;
			color:@li_txt;
			strong{
				color:@point02;
				font-weight:bold;
				display:block;
				margin-bottom:8px;
			}
		}
	}
	.btnArea {
		.float-box();
		margin-top: 20px;
		.leftBox {
			float: left;
			p em{
				color:@point;
			}
		}
		.rightBox {
			float: right;
		}
	}
	.img_r{
		text-align:right;
		margin-bottom:12px;
	}
}

.formL {
    width: 90%;
}
.formS {
    width: 200px;
}
.formSS {
    width: 100px;
}
.formSS, .formS, .formM, .formL {
    border: 1px solid #999999;
    padding: 3px;
}
select{
	margin-bottom:4px;
	}
label{
	color:@li_txt;
}
/********************************************
Q&A
*********************************************/
.faqListArea{
	margin-bottom:40px;
	dt {
		line-height: 150%;
		margin-left: 42px;
		position: relative;
		color: @point02;
		font-size:@font_m;
		border:1px solid #464646;
		padding:4px;
		margin-bottom:4px;
		width:578px;
		a{
			text-decoration:none;
			color: @point02;
		}
		span {
			left: -20px;
			position: absolute;
			color: @point02;
		}
	}
	dd {
		line-height: 150%;
		margin-left: 42px;
		position: relative;
		color:#ffffff;
		font-size:@font_m;
		margin-bottom: 1em;
		span {
			left: -20px;
			position: absolute;
			color:#ffffff;
		}
	}
	
}

/********************************************
サロンのご案内
*********************************************/
div.column-box{//写真が左にある時

	div.img_left{
		.float-box();
		width:880px;
		margin-left:44px;
		margin-top:22px;
		h3{
			margin-bottom:12px;
		}
		p.img{
			float:left;
		}
		div.txt{
			float:right;
			width:667px;
			.list{
				.float-box();
				dl{
					float:left;
					margin-right: 22px;
					width: 310px;
					dt{
						.paragra();
						color:@point;
					}
					dd{
						.paragra();
						margin-left:32px;
						span{
							font-size:@font_s;
						}
						a img{
							margin-top:12px;
						}
					}
				}
			}
		}
	}
}


div.column-box{//写真の塊

	div.album{
		.float-box();
		width:880px;
		margin-left:44px;
		margin-top:22px;
		p{
			float:left;
			margin-bottom:18px;
			margin-right:8px;
		}
	}
}


/********************************************
サイトマップ
*********************************************/
#sitemap{
	.float-box();
	width:880px;
	margin-left:44px;
	margin-top:22px;
	margin-bottom:44px;
	ul{
		float:left;
		width:260px;
		margin-right:30px;
		li{
			line-height:2em;
			margin-top:12px;
			padding-left:12px;
			border-bottom:1px solid @txt_boder;
			a{
				text-decoration:none;
				color:#ffffff;
				font-size:@font_s;
			}
		}
	}
}

/******************************************
ギャラリー
*******************************************/
div.list_right{//リストが右にあるパターン スタッフ
	.list-box();
	.main{
		.main-box();
		.list-img{
			.float-box();
			margin-left:10px;
			p.img{
				float:left;
				margin:0;
				margin-bottom:12px;
				padding:0;
				padding-left:6px;
				width:150px;
			}
			p.img-box{
				float:left;
				margin:0;
				margin-bottom:12px;
				margin-left:4px;
				padding:0;
				height:150px;			
				width:150px;
				border:1px solid @txt_boder;
				font-size:@font_s;
			}
		}
	}
	.eve-box{
		margin-right:24px;
		height:240px;
		float:left;
		.float-box();
		p.img{
			float:none!important;
			margin-bottom:4px!important;
		}
		h4{
			float:left;
			font-size:@font_ll;
			}
		.txt{
			float:none;
			width:182px;
			font-size:@font_m;
			line-height:1.0em;
			height:100px;
		}
	}
}

div.list_right .main p.sub-txt{
	float:none;
	margin-bottom:0px;
	color:@point02;
	font-size:@font_l;
}

div.list_right .main h4{
	color:@point;
}


/******************************************
ナチュラルメイクとは
*******************************************/
.img-left{
	padding-left:220px;
	min-height:170px;
	margin-left:10px;
	background-repeat:no-repeat;
	margin-top:8px;
	h5{
		font-weight:bold;
		font-size:@font_m;
		margin-bottom:8px;
		color:#ffffff;
	}
	p{
		padding-left:0px;
	}
}


div.list_right{//リストが右にあるパターン
	.list-box();
	.main{
		.img-left01{
			.img-left();
			background-image:url(/images/natural-make/img_01.jpg);
		}
		.img-left02{
			.img-left();
			background-image:url(/images/natural-make/img_02.jpg);
		}
		.img-left03{
			.img-left();
			background-image:url(/images/natural-make/img_03.jpg);
		}
		.img-left04{
			.img-left();
			background-image:url(/images/natural-make/img_04.jpg);
			padding-left:310px;
			min-height:200px;
			margin-top:26px;
		}
		.img-left05{
			.img-left();
			background-image:url(/images/natural-make/img_05.jpg);
		}
		.img-left06{
			.img-left();
			background-image:url(/images/natural-make/img_06.jpg);
		}
		.img-left07{
			.img-left();
			background-image:url(/images/natural-make/img_07.jpg);
		}
		.img-left08{
			.img-left();
			background-image:url(/images/natural-make/img_08.jpg);
		}
	}
}

/* ==============================
お客様の声
 ============================== */
div.list_right{//リストが右にあるパターン スタッフ
	.list-box();
	.main{
		.main-box();
		.voise{
			p{
				font-size:@font_l;
				border-bottom:1px dotted @txt_boder;
				margin-bottom:4px;
				float:none;
			}
			p.name{
				border:none;
				margin-bottom:36px;
				font-size:@font_s;
				float:none;
				text-align:right;	
			}
			hr{
				margin:36px 0;
			}
		}
	}
}
/* ==============================
お客様の声
 ============================== */
 div.recruit_box{//リストが右にあるパターン スタッフ
	.list-box();
	.main{
		.main-box();
		h3{
			font-size:@font_ll;
			color:@li_txt;
			border-bottom:1px solid @txt_boder;
			margin-bottom:24px;
			padding-bottom:8px;
		}
		table{
			margin-bottom:12px;
			th{
				font-size:@font_l;
				border-bottom:1px solid @txt_boder;
				color:@li_txt;
				width:120px;
				padding:12px 12px 28px 12px;
				line-height:1.4em;
			}
			td{
				font-size:@font_l;
				border-bottom:1px solid @txt_boder;
				color:@li_txt;
				padding:12px 12px 28px 12px;
				line-height:1.4em;
			}
		}
		p{
			color:@li_txt;
			font-size:@font_l;
			line-height:1.4em;
		}
		p.come{
			color:@point02;
			font-size:@font_ll;
			font-weight:bold;
			line-height:1.4em;
			background-color:#333333;
			padding:8px;
			margin-bottom:12px;
			text-align:center;
		}
	}
}



.btn-align{
	margin:12px auto;
	text-align:center;
}

/******************************************
スクール
*******************************************/
div.list_right{//リストが右にあるパターン 店長用
	.list-box();
	.main{
		.main-box();
		h5{
			margin-bottom:6px;
			margin-top:24px;
		}
		.lv2{
			margin-left:8px;
		}
		.img-box02{
			.float-box();
			margin-left:20px;
			margin-bottom:22px;
			div.img{
				float:left;
				width:200px;
				background-color:#989;
			}
			div.txt{
				float:left;
				width:420px;
			}
		}
		table.courseTbl{
			font-size:@font_l;
			line-height:1.4em;
			margin-left:20px;
			width:610px;
			background-color:#111111;
			border:1px solid @boder;
			th{
				text-align:left;
				color:@point;
				padding-bottom:20px;
				padding-left:6px;
				padding-top:6px;
				border:1px solid @boder;
			}
			td{
				padding-bottom:20px;
				padding-left:6px;
				padding-top:6px;
				border:1px solid @boder;
				background-color:#141414;
			}
			td.secTB{
				background-color:#222222;
			}
		}
	}
}
h3 a{text-decoration:none;}


/* ==============================
キャンペーン関係
 ============================== */

#Content div.blog_box p.bigtxt,
#Content div.blog_box strong.bigtxt
{color:#FF9; font-size:16px;}

#Content div.blog_box p.highlight,
#Content div.blog_box strong.highlight
{background:#EDC436;color:#000;}

#Content div.blog_box p.redtxt,
#Content div.blog_box strong.redtxt
{color:#F69;}

#Content div.blog_box p.bigredtxt,
#Content div.blog_box strong.bigredtxt
{color:#F69; font-size:18px;}