// RESET
html, body { border: 0; line-height: 1.5; letter-spacing: 2px; margin: 0; padding: 0; background-color: #f9f9f9; }
div, span, object, iframe, img, table, caption, thead, tbody,
tfoot, tr, tr, td, article, aside, canvas, details, figure, hgroup, menu,
nav, footer, header, section, summary, mark, audio, video { border: 0; margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cit, code,
del, dfn, em, ins, q, samp, small, strong, sub, sup, b, i, hr, dl, dt, dd,
ol, ul, li, fieldset, legend, label { border: 0; font-size: 100%; vertical-align: baseline; margin: 0; padding: 0; line-height: 1.5; }
article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video { display: block; }
table { border-collapse: separate; border-spacing: 0; }
a img { border: 0; outline: 0; }
:focus { outline: 0; }

// CASE
@brand_color: #007fc4;
@sub_brand_color: #58595B;


body {
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, 'メイリオ', sans-serif;
	color: @sub_brand_color;
	letter-spacing: 1px !important;
}
a:link { color: @sub_brand_color; }
a:visited{ color: @sub_brand_color; }
a:hover{ color: @sub_brand_color; text-decoration: underline; }
a:active{ color: @sub_brand_color; text-decoration: underline; }

.put_color_link(@color: @brand_color;) {
	a:link { color: @color; }
	a:visited{ color: @color; }
	a:hover{ color: @color; text-decoration: underline; }
	a:active{ color: @color; text-decoration: underline; }
}
.put_color_link2(@color: @brand_color;) {
	a:link { color: @color; text-decoration: underline; }
	a:visited{ color: @color; text-decoration: underline; }
	a:hover{ color: @color; text-decoration: none; }
	a:active{ color: @color; text-decoration: none; }
}

h1, h2, h3, h4, strong { font-size: 12px; font-weight: normal; }
.mgt20 { margin-top: 20px !important; }
.mgt30 { margin-top: 30px !important; }
.mgt40 { margin-top: 40px !important; }
.mgb20 { margin-bottom: 20px !important; }
.mgb30 { margin-bottom: 30px !important; }
.mgb35 { margin-bottom: 35px !important; }
.mgb40 { margin-bottom: 40px !important; }
.mgb50 { margin-bottom: 50px !important; }
.fwn { font-weight: normal; }
.fwb { font-weight: bold; }
.tar { text-align: right; }
.tal { text-align: left; }
.tac { text-align: center; }
.vam { vertical-align: middle; }
.vat { vertical-align: top; }
#wrapper { max-width: 1100px; width: 1100px; margin: 0 auto; padding-top: 50px; overflow: hidden; background-color: #f9f9f9; }
.contents { margin: 0 auto; }

// LESS
body {
	#header {
		padding-left: 60px;
		padding-right: 60px;
		padding-bottom: 40px;
		h1 { font-size: 12px; position: absolute; left: -9999px; }
		#logo { position: relative; top:21px; }
		.date { color: @brand_color; font-size: 12px; letter-spacing: 1px; line-height: 2; font-weight: bold; }
		.left { width: 240px; }
		.right { width: 600px; float: left; margin-left: 70px; margin-top: 20px; }
		h2 { font-size: 12px; position: relative; top: -5px; }
		.logo { position: relative !important; top: 10px !important; }
	}
	#contents {
		background-color: #FFF;
		width: 980px;
		padding-top: 60px;
		padding-left: 60px;
		padding-right: 60px;
		padding-bottom: 60px;
		.left {
			width: 242px;
			float: left;
		}
		.right {
			width: 720px;
			float: right;
			margin-left: 0px;
			.post_date { color: @brand_color; font-size: 12px; font-weight: bold; margin-top: 30px; margin-bottom: 0px; }
			.post_contact { margin-bottom: 30px; }
			.row-fluid {
				.span4 {
					width: 240px;
					padding-top: 20px;
					padding-left: 19px;
					padding-right: 19px;
					margin-left: 0px;
					margin-right: 0px;
					img { margin-top: 0px; }
					height: 300px;
				}
			}
		}
	}
	#sidebar {
		margin-left: 0px !important;
		.menu {
			margin-bottom: 20px;
			img { float: left; display: block; border: 1px dashed #A1A3A6; }
			.col1 { border-right: none !important; }
			.col2 { margin-left: -1px; }
			.col3 { border-right: none !important; border-top: none !important; }
			.col4 { border-top: none !important; margin-left: -1px; }
			.col5 { border-right: none !important; border-top: none !important; }
			.col6 { border-top: none !important; margin-left: -1px; }
		}
		.facebook {  width: 100%; border: 1px dashed #A1A3A6; }
	}
	#footer {
		padding-top: 45px;
		.content {
			width: 980px;
			padding-left: 60px;
			padding-right: 60px;
			padding-bottom: 30px;
			margin-left: auto;
			margin-right: auto;
			position: relative;
		}
		ul li {
			display: block;
			font-size: 12px;
			letter-spacing: 1px;
			line-height: 25px;
			a:link { color: @sub_brand_color; text-decoration: underline; }
			a:visited{ color: @sub_brand_color; }
			a:hover{ color: @sub_brand_color; text-decoration: none; }
			a:active{ color: @sub_brand_color; text-decoration: none; }
		}
		.col1 { border-top: 1px solid #A1A3A6; border-bottom: 1px solid #A1A3A6; line-height: 35px; padding-left: 28px; margin-bottom: 7px; }
		.copy { font-size: 12px; text-align: center; margin-top: 20px; margin-bottom: 10px; }
		.box1 {
			height: 230px;
			border-bottom: 1px solid #A1A3A6;
			.col1 {background-image: url(../img/footer_icon1.png); background-repeat: no-repeat; }
		}
		.box2 {
			height: 230px;
			border-bottom: 1px solid #A1A3A6;
			.col1 {background-image: url(../img/footer_icon2.png); background-repeat: no-repeat; }
		}
		.box3 {
			height: 230px;
			border-bottom: 1px solid #A1A3A6;
			.col1 {background-image: url(../img/footer_icon3.png); background-repeat: no-repeat; }
		}
		.box4 {
			height: 230px;
			border-bottom: 1px solid #A1A3A6;
			.col1 {background-image: url(../img/footer_icon4.png); background-repeat: no-repeat; }
		}
		.social {
			margin-top: 80px;
			margin-bottom: 50px;
			text-align: center;
			img { margin-left: 5px; margin-right: 5px; }
		}
	}
}

#home {
	.post h2 {
		width: 200px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
	}
	h3 { font-size: 10px; }
	.slider { margin-bottom: 20px; }
	.cell0 {
		border-top: 1px dashed #A1A3A6;
		border-left: 1px dashed #A1A3A6;
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell1 {
		border-top: 1px dashed #A1A3A6;
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell2 {
		border-top: 1px dashed #A1A3A6;
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell3 {
		border-left: 1px dashed #A1A3A6;
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell4 {
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell5 {
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell6 {
		border-left: 1px dashed #A1A3A6;
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell7 {
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
	.cell8 {
		border-right: 1px dashed #A1A3A6;
		border-bottom: 1px dashed #A1A3A6;
	}
}

#page {
	#wrapper { padding-top: 0px; }
	#header {
		margin-top: 50px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 20px;
		background-color: #FFF;
		ul li { display: block; float: left; border: 1px dashed #A1A3A6; }
		.col1 { width: 372px; height: 110px; text-align: center; padding-top: 10px; }
		.col2, .col3, .col4, .col5, .col6, .col7 {
			img { width: 120px; height: 120px; }
			border-left: none;
		}
	}
	#contents {
		padding-top: 0px;
		.breadcrumbs {
			font-size: 11px;
			margin-bottom: 50px;
		}
		.page_catch {
			margin-bottom: 35px;
		}
		.page_title {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 10px;
		}
		.aisatsu {
			text-align: right;
			margin-bottom: 40px;
		}
		.page_icon {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 25px;
		}
		.store_row { margin-bottom: 30px !important; }
		.store_list h2 { font-size: 16px; font-weight: bold; margin-bottom: 5px; }
		.store_detail.row1 { margin-bottom: 30px; }
		.store_detail.row2 { margin-bottom: 40px; }
		.store_detail.row3 { margin-bottom: 30px; }
		.store_detail, .recruit {
			h3.circle { background-image: url(/img/circle.jpg); background-repeat: no-repeat;; padding-left: 25px; font-size: 16px; margin-bottom: 20px; line-height: 1; }
			.midashi { color: #48a868; font-size: 27px; }
		}
		.recruit.row1 img { margin-top: 0px; margin-bottom: 0px; }
		.recruit .midashi { margin-top: 100px; }
		.recruit .bosyuu { background-color: #E9E5DC; text-align: center; width: 100%; height: 60px; line-height: 60px; font-weight: bold; letter-spacing: 5px; font-size: 18px; }
		.recruit table { width: 100%; }
		.recruit table tr td {
			border-collapse: collapse;
			border-bottom: 1px dashed #A1A3A6;
			padding-top: 30px;
			padding-bottom: 30px;
		}
		.recruit .cell1 { width: 230px; text-align: center; }
		.faq {
			.panel-heading a:link { color: @sub_brand_color; text-decoration: none; }
			.panel-heading a:visited{ color: @sub_brand_color; text-decoration: none; }
			.panel-heading a:hover{ color: @sub_brand_color; text-decoration: none; }
			.panel-heading a:active{ color: @sub_brand_color; text-decoration: none; }
			.panel-title {
				background-image: url(/img/faq_accordion.jpg);
				line-height: 60px;
				padding-left: 80px;
				font-size: 14px;
			}
			.panel-body { padding-left: 70px; padding-right: 70px; padding-top: 25px; }
		}
		.faq.panel-group {
			margin-bottom: 25px;
		}
		.about {
			.panel-heading a:link { color: @sub_brand_color; text-decoration: none; }
			.panel-heading a:visited{ color: @sub_brand_color; text-decoration: none; }
			.panel-heading a:hover{ color: @sub_brand_color; text-decoration: none; }
			.panel-heading a:active{ color: @sub_brand_color; text-decoration: none; }
			.panel-title {
				background-image: url(/img/about_accordion.jpg);
				line-height: 60px;
				padding-left: 80px;
				font-size: 14px;
			}
			.panel-body { padding-left: 70px; padding-right: 70px; padding-top: 25px; }
			table { width: 100%; }
			table tr td {
				border-collapse: collapse;
				padding-top: 10px;
				padding-bottom: 10px;
			}
			.cell1 { width: 230px; }
		}
		.about.panel-group {
			margin-bottom: 25px;
		}
	}
	#gMap { width:100%; height:320px;
		img{
			width: 10px;
			max-width: none;
		}
	}
	.catch {
		text-align: center;
		font-size: 14px;
		line-height: 2;
		h2 { font-size: 27px; color: #48a868; margin-bottom: 60px; }
		margin-bottom: 70px;
	}
	.cfm {
		table { width: 920px; }
		tr { border-collapse: collapse; }
		td { padding-top: 20px; padding-bottom: 20px; border: 1px solid #B6B7B8; border-collapse: collapse; }
		span { color: #D00; line-height: 30px; padding-left: 50px; }
		.br { text-align: center; vertical-align: top; background-color: #E9E5DC; width: 200px; }
		input[type="text"], input[type="email"] { width: 300px; }
		textarea { width: 600px; }
		.comment { padding-left: 50px; }
		iframe { width: 610px; border: 1px solid #B6B7B8; }
		.nbd td {
			border-left: none; border-right: none; border-bottom: none; text-align: center;
			input[type="submit"] { margin-top: 20px; background-color: #E9E5DC; border: none; padding-left: 30px; padding-right: 30px; padding-top: 10px; padding-bottom: 10px; letter-spacing: 5px; color: #000; }
		}
	}
}

#archive, #single {
	#wrapper { padding-top: 0px; }
	.span3.side_widget {
		h3 { height: 35px; border-top: 1px dashed #A1A3A6; border-bottom: 1px dashed #A1A3A6; line-height: 35px; color: #48a868; font-size: 15px; }
		.widget {
			margin-bottom: 30px;
			ul {
				display: block;
				margin-top: 15px;
				li { list-style: none; font-size: 12px; .put_color_link2(@sub_brand_color); line-height: 25px; }
			}
		}
	}
	#header {
		margin-top: 50px;
		padding-left: 0px;
		padding-right: 0px;
		padding-bottom: 20px;
		background-color: #FFF;
		ul li { display: block; float: left; border: 1px dashed #A1A3A6; }
		.col1 { width: 372px; height: 110px; text-align: center; padding-top: 10px; }
		.col2, .col3, .col4, .col5, .col6, .col7 {
			img { width: 120px; height: 120px; }
			border-left: none;
		}
	}
	#contents {
		padding-top: 0px;
		.breadcrumbs {
			font-size: 11px;
			margin-bottom: 50px;
		}
		.page_icon {
			display: block;
			margin-left: auto;
			margin-right: auto;
			margin-bottom: 25px;
		}
		.span9 .span4 img { margin-top: 0px; margin-bottom: 0px; }
		.span9 .span8 {
			strong {
				.put_color_link(#48a868);
				border-bottom: none;
				font-size: 15px;
				width: 100%;
				display: block;
				height: 30px;
				line-height: 30px;
				margin-bottom: 20px;
			}
			.date { height: 20px; line-height: 20px; font-size: 11px; margin-bottom: 10px; }
			p { font-size: 12px; }
		}
		.span9 .span12 {
			margin-bottom: 40px;
			strong {
				.put_color_link(#48a868);
				border-bottom: 1px dashed #A1A3A6;
				font-size: 15px;
				width: 100%;
				display: block;
				height: 30px;
				line-height: 30px;
			}
			.date { height: 30px; line-height: 30px; font-size: 11px; margin-bottom: 10px; }
		}
	}
}
.category-news .list_row {
	padding-bottom: 30px;
	border-bottom: 1px dashed #A1A3A6;
	margin-bottom: 30px;
}
.nopost {
	color: @brand_color;
	font-size: 12px;
	text-align: center;
}
// 404
.notfound {
	color: @brand_color;
	margin-top: 40px;
}

// responsive
.hid-phone { display: block; }
.vis-phone { display: none !important; }

.single {
	h2 { font-weight: bold; line-height: 1.5; margin-top: 5px; font-size: 14px; color: @brand_color; margin-bottom: 20px; }
	.blog {
		width: 600px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 50px;
		.post { font-size: 12px; }
	}
	.similar { display: none; }
	.similar-posts { display: none; }
}
.pager {
	background-image: url(/img/dotted.jpg);
	background-repeat: repeat-x;
	background-position: top;
	padding-top: 20px;
	margin-top: 50px;
	.button {
		width: 600px;
		height: 70px;
		margin: 0 auto;
		position: relative;
		.button_prev {
			position: absolute;
			left: 0px;
		}
		.button_next {
			position: absolute;
			right: 0px;
		}
	}
	color: #FFF;
}
@media screen and (min-width: 980px) {
	/* 980px以上用（PC用）の記述 */
	#wrapper { width: 1100px!important; }
	#header, #menu, #contents { width: 1100px; }
	#footer { min-width: 1100px; }
}
@media screen and (min-width: 768px) and (max-width: 979px) {
	/* 768px - 979px用（タブレット用）の記述 */
	#wrapper { width: 1100px !important; }
	#header, #menu, #contents { width: 1100px; }
	#footer { min-width: 1100px; }
}
@media screen and (min-width: 480px) and (max-width: 767px) {
	/* 480px - 767px用（タブレット／スマートフォン用）の記述 */
	#wrapper { width: 1100px !important; }
	#header, #menu, #contents { width: 1100px; }
	#footer { min-width: 1100px; }
}
// sphone
@media only screen and (max-width:420px) {
	.hid-phone { display: none !important; }
	.vis-phone { display: block !important; }
	#wrapper { width: 100% !important; }

	#header {
		padding-left: 0px !important;
		padding-right: 0px !important;
		text-align: center;
		.span6 { width: 100% !important; }
	}
	#footer {
		padding-top: 45px;
		.content {
			width: 100% !important;
			padding-left: 0px !important;
			padding-right: 0px !important;
			padding-bottom: 0px !important;
		}
		ul li {
			display: block;
			font-size: 12px;
			letter-spacing: 1px;
			line-height: 25px;
			a:link { color: @sub_brand_color; text-decoration: underline; }
			a:visited{ color: @sub_brand_color; }
			a:hover{ color: @sub_brand_color; text-decoration: none; }
			a:active{ color: @sub_brand_color; text-decoration: none; }
		}
		.col1 { border-top: 1px solid #A1A3A6; border-bottom: 1px solid #A1A3A6; line-height: 35px; padding-left: 28px; margin-bottom: 7px; }
		.copy { font-size: 12px; text-align: center; margin-top: 20px; margin-bottom: 10px; }
		.span3 { width: 100% !important; margin-left: 0px !important; }
		.box1 {
			width: 80% !important;
			margin-left: 10% !important;
			height: auto !important;
			border-bottom: none !important;
			margin-bottom: 15px;
			.col1 {background-image: url(../img/footer_icon1.png); background-repeat: no-repeat; }
		}
		.box2 {
			width: 80% !important;
			margin-left: 10% !important;
			height: auto !important;
			border-bottom: none !important;
			margin-bottom: 15px;
			.col1 {background-image: url(../img/footer_icon2.png); background-repeat: no-repeat; }
		}
		.box3 {
			width: 80% !important;
			margin-left: 10% !important;
			height: auto !important;
			border-bottom: none !important;
			margin-bottom: 15px;
			.col1 {background-image: url(../img/footer_icon3.png); background-repeat: no-repeat; }
		}
		.box4 {
			width: 80% !important;
			margin-left: 10% !important;
			height: auto !important;
			border-bottom: 1px solid #A1A3A6;
			.col1 {background-image: url(../img/footer_icon4.png); background-repeat: no-repeat; }
		}
		.social {
			margin-top: 80px;
			margin-bottom: 50px;
			text-align: center;
			img { margin-left: 5px; margin-right: 5px; }
		}
	}
	#contents {
		width: 100% !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	.home {
		.sp-menu {
			width: 80% !important;
			margin-left: 10% !important;
			li { float: left; width: 48.5%; list-style: none; img { width: 100%; } }
			margin-bottom: 30px !important;
			.col0 {
				border-top: 1px dashed #A1A3A6;
				border-left: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col1 {
				border-top: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col2 {
				border-left: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col3 {
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col4 {
				border-left: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col5 {
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
		}
		.right {
			width: 100% !important;
			.span4 {
				width: 80% !important;
				margin-left: 10% !important;
				height: auto !important;
				padding-bottom: 20px;
				margin-bottom: 10px;
				border: 1px dashed #A1A3A6 !important;
				img { width: 100%; }
			}
		}
	}
	#page, #archive, #single, #category {
		#header { padding-bottom: 40px; background-color: transparent; }
		.breadcrumbs { width: 100% !important; margin-left: 0% !important; }
		#contents{
			padding-top: 60px;
			.span12, .span9, .span3 { width: 80%; margin-left: 10%; .span9, .span3 { width: 100%; margin-left: 0px; } }
			.about .panel-body, .faq .panel-body { padding-left: 10px; padding-right: 10px; font-size: 12px; .cell1 { width: 100px; } }
			.catch { h2 { font-size: 16px !important; text-align: center; } font-size: 12px; text-align: left; }
			.recruit.row1 {
				margin-bottom: 30px;
				.span6 {  width: 100%; margin-left: 0px; }
			}
			.recruit.row2 {
				.span12 { .cell1 { width: 100px; }  width: 100%; margin-left: 0px; }
			}
			.list_row .span12 { .cell1 { width: 100px; }  width: 100%; margin-left: 0px; }
			.store_row { .span4 { width: 100%; margin-left: 0px; } }
			.store_detail.row1 { .span6 { width: 100%; margin-left: 0px; } }
			.store_detail.row2 { .span12 {  width: 100%; margin-left: 0px; } }
			.store_detail.row3 { .span12 {  width: 100%; margin-left: 0px; } }
			.store_detail.row4 { .span6 {  width: 100%; margin-left: 0px; } }
		}
		.sp-menu {
			width: 80% !important;
			margin-left: 10% !important;
			li { float: left; width: 48.5%; list-style: none; img { width: 100%; } }
			margin-bottom: 30px !important;
			.col0 {
				border-top: 1px dashed #A1A3A6;
				border-left: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col1 {
				border-top: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col2 {
				border-left: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col3 {
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col4 {
				border-left: 1px dashed #A1A3A6;
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
			.col5 {
				border-right: 1px dashed #A1A3A6;
				border-bottom: 1px dashed #A1A3A6;
			}
		}
	}
	.pager .button {
		width: 100%;
	}
}
.post img {
	display: block;
	margin-top: 15px;
	margin-bottom: 15px;
}