@charset "UTF-8";

/* header
------------------------------------------------------------ */
header {
	background: url(../img/common/1bg_header.jpg) no-repeat center top;
	width: 1000px;
	height: 200px;
	margin: 0px auto;
}
header h1 {
	float: left;
	display: inline;
}
header .tel {
	float: right;
	display: inline;
	padding: 15px 20px 15px 0px;
}
@media all and (min-width: 0) and (max-width: 767px) {
	body {
		text-size-adjust: none;
		-webkit-text-size-adjust: none;
	}
	
	header {
		padding: 0 5px;
		width: auto;
		height: auto;
		position: relative;
		z-index: 10;
	}
	
	header h1 {
		float: none;
		text-align: left;
		display: block;
	}
	
	header h1 img {
		width: 210px;
		height: auto;
	}
	
	header .tel {
		display: none;
	}
	
	.menuBtn {
		width: 25px;
		height: 25px;
		display: block;
		position: absolute;
		right: 10px;
		top: 30px;
		cursor: pointer;
		z-index: 100;
		transition: opacity .25s ease;
		-webkit-transition: all .3s ease;
		transition: all .3s ease;
	}
	
	.menuBtn.active .top {
		-webkit-transform: translateY(7px) translateX(0) rotate(45deg);
		-ms-transform: translateY(7px) translateX(0) rotate(45deg);
		transform: translateY(7px) translateX(0) rotate(45deg);
		background: #231f20;
	}
	
	.menuBtn.active .middle {
		opacity: 0;
		background: #231f20;
	}
	
	.menuBtn.active .bottom {
		-webkit-transform: translateY(-7px) translateX(0) rotate(-45deg);
		-ms-transform: translateY(-7px) translateX(0) rotate(-45deg);
		transform: translateY(-7px) translateX(0) rotate(-45deg);
		background: #231f20;
	}
	
	.menuBtn span {
		background: #231f20;
		border: none;
		height: 3px;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transition: all .35s ease;
		transition: all .35s ease;
		cursor: pointer;
	}
	
	.menuBtn span:nth-of-type(2) {
		top: 7px;
	}
	
	.menuBtn span:nth-of-type(3) {
		top: 14px;
	}
}


/* nav
------------------------------------------------------------ */
nav {
	clear: both;
}
nav ul li {
	float: left;
	display: inline;
}

@media all and (min-width: 768px) {
	nav {
		display: block !important;
	}
}

@media all and (min-width: 0) and (max-width: 767px) {
	nav {
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
	}
	
	nav ul li {
		float: none;
		display: block;
	}
	
	nav a {
		margin-bottom: -1px;
		display: block;
		height: 29px;
		overflow: hidden;
		background: url(../img/common/1bg.jpg) repeat-x left bottom;
	}
	
	nav span {
		width: 120px;
		height: 29px;
		display: inline-block;
		overflow: hidden;
	}
	
	nav ul li img {
		margin-right: -4px;
		width: auto;
		height: 29px;
	}
}

/* article
------------------------------------------------------------ */
article {
	width: 980px;
	margin: 20px auto 10px;
	overflow: hidden;
}
@media all and (min-width: 0) and (max-width: 767px) {
	article {
		margin: 0 5px;
		width: auto;
		clear: both;
	}
}

/* main
------------------------------------------------------------ */
#main {
	width: 750px;
	float: right;
	display: inline;
	overflow: hidden;
}
@media all and (min-width: 0) and (max-width: 767px) {
	#main {
		width: auto;
		float: none;
	}
}

/* main2
------------------------------------------------------------ */
#main2 {
	width: 750px;
	float: right;
	text-align: right;
}
@media all and (min-width: 0) and (max-width: 767px) {
	#main2 {
		width: auto;
		float: none;
	}
}

/* main3
------------------------------------------------------------ */
#main3 {
	width: 750px;
	float: right;
	text-align: left;
}
@media all and (min-width: 0) and (max-width: 767px) {
	#main3 {
		width: auto;
		float: none;
	}
}

/* main4
------------------------------------------------------------ */
#main4 {
	width: 600px;
	float: right;
	margin: 0px 0px 0px 0px;
	text-align: left;
}

@media all and (min-width: 0) and (max-width: 767px) {
	#main4 {
		width: auto;
		float: none;
	}
}

/* side
------------------------------------------------------------ */
#side {
	background: #EDE8DA;
	width: 220px;
	float: left;
	display: inline;
	overflow: hidden;
}
#side div.inner {
	background: url(../img/common/shopping.gif) no-repeat center 5px;
	width: 214px;
	margin: 2px auto;
	padding: 30px 0px 0px;
	border: 1px solid #DDD3BB;
	overflow: hidden;
}
#side div.inner ul {
	background: #FFF;
	width: 186px;
	margin: 0px auto 10px;
	padding-bottom: 10px;
	overflow: hidden;
}
#side div.inner ul li {
	float: left;
	display: inline;
}

@media all and (min-width: 768px) {
	#side div.inner ul {
		display: block !important;
	}
}

@media all and (min-width: 0) and (max-width: 767px) {
	#side {
		margin: 0 10%;
		width: auto;
		float: none;
		display: block;
	}
	
	#side div.inner {
		margin: 2px;
		padding-bottom: 10px;
		width: auto;
	}
	
	#side div.inner ul {
		display: none;
		margin: 0 0 10px;
		width: auto;
		background-color: inherit;
	}
	
	#side div.inner ul li {
		padding-bottom: 10px;
		float: none;
		background-color: #fff;
	}
	
	#side div.inner img {
		width: auto;
	}
}

/* pagetop
------------------------------------------------------------ */
.pagetop {
	clear: both;
	text-align: right;
	padding: 30px 0px;
}

/* footer
------------------------------------------------------------ */
footer {
	background: #D66A97;
	clear: both;
}
footer div.menu {
	background: #FFF url(../img/common/line.png) no-repeat center top;
	font-size: 14px;
	color: #552E31;
	line-height: 45px;
}
footer div#add {
	background: url(../img/common/add.png) no-repeat left 15px;
	width: 1000px;
	height: 110px;
	margin: 0px auto;
}
footer div#add h2,
footer div#add p {
	display: none;
}
footer address {
	background: #FFF;
	color: #B09C53;
	line-height: 30px;
	text-align: right;
	padding-right: 30px;
}
@media all and (min-width: 0) and (max-width: 767px) {
	footer div#add {
		width: auto;
		height: 100px;
		background-size: 300px auto;
	}
	
	footer div.menu {
		padding: 10px 10px 0;
		font-size: 10px;
		line-height: 20px;
	}
	
	footer address {
		padding: 0;
	}
}