@charset "UTF-8";

/*---------------------------------
version---1.0
updated---2012.04.03
-----------------------------------
#wrapper
	└#heaedr
		└#navi
	└#container
└#footer
------------------------------------
----------------------------------*/

/*default
-----------------------------------*/
body,h1, h2, h3, h4, h5, h6,
p, pre, blockquote,form,input,textarea,fieldset,
ul, ol, dl, li,dt,dd,address,caption {
    margin: 0;
    padding: 0;
}

img{
	max-width: 100%;
	height: auto;
	width: auto\9;
}


table{
	border-collapse:collapse;
	}
p{
	margin-bottom:1em;
	}
	
body{
	color: #333;
	font-size:17px;
	line-height:1.5;
	font-family:"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","Osaka","メイリオ","ＭＳ Ｐゴシック",Arial,Helvetica,Verdana,sans-serif;
	background:#f7f7f7 url(../img/08_015.jpg);


}
address,em,caption,th{	
	font-style:normal;
	font-weight:normal;
	text-align:left;
	}
img{
	vertical-align:bottom;
	border:none;
	}
	
li{	list-style-type:none;	}
.bold{	font-weight:bold;	}
.color1{ color:#000;	}
.color2{ color:#fff;	}
.color3{ color:#c00;	}
.color4{ color:#009;	}
.bgcolor1{ background-color:#666;	}
.bgcolor2{ background-color:#009;	}
.bgcolor3{ background-color:#80ff80;	}
.bgcolor4{ background-color:#80ffff;	}
.bgcolor5{ background-color:#ff8080;	}



/*link
-----------------------------------*/
a{	color:#2929b3;	}
a:hover,a:active{	color:#000080;	}
a:visited{	color:#000080;	}



/*====================================================
480px以下 for スマートフォン
====================================================*/
/*layout
----------------------------------------------------*/
/*wrapper*/
#wrapper{
	position: relative;
	width: 100%;
	margin:0 auto;
	}


/*headre*/
#header{
	height: 230px;
	background: url(../img/bg_body-mob.png) center bottom no-repeat;
	}


/*navi*/
#navi{
	padding: 10px 0 0;
	font-size: 14px;
}
	#navi ul{
		overflow: hidden;
	}
	#navi ul li{
		width: 20%;
		float: left;
		text-align: center;
	}
	#navi ul li a{
		display: block;
		padding: 40px 0 0 0;
		height: 30px; /*70px*/
		color: #333;
		text-decoration: none;
		background: top center no-repeat;
	}
		#navi ul li a:hover{
			color: #3693b3;
		}

		#navi ul li#nav01 a{ background-image:url(../img/icon_info.png);	}
		#navi ul li#nav02 a{ background-image:url(../img/icon_info.png);	}
		#navi ul li#nav03 a{ background-image:url(../img/ILM09_EA01045.png);	}
		#navi ul li#nav04 a{ background-image:url(../img/ILM09_EA01045.png);	}
		#navi ul li#nav055 a{ background-image:url(../img/cart_o.png);	}
		#navi ul li#nav06 a{ background-image:url(../img/cart_o.png);	}
		#navi ul li#nav07 a{ background-image:url(../img/cart_o.png);	}
		#navi ul li#nav08 a{ background-image:url(../img/icon_info.png);	}
		#navi ul li#nav09 a{ background-image:url(../img/icon_car.png);	}
		#navi ul li#nav10 a{ background-image:url(../img/sy0200.png);	}
		#navi ul li#nav11 a{ background-image:url(../img/sy0236.png);	}
		#navi ul li#nav12 a{ background-image:url(../img/icon_colors.png);	}
		#navi ul li#nav01 a:hover{ background-image:url(../img/icon_info-on.png);	}
		#navi ul li#nav02 a:hover{ background-image:url(../img/icon_info-on.png);	}
		#navi ul li#nav03 a:hover{ background-image:url(../img/ILM09_EA01081.png);	}
		#navi ul li#nav04 a:hover{ background-image:url(../img/ILM09_EA01081.png);	}
		#navi ul li#nav055 a:hover{ background-image:url(../img/cart_r.png);	}
		#navi ul li#nav06 a:hover{ background-image:url(../img/cart_r.png);	}
		#navi ul li#nav07 a:hover{ background-image:url(../img/cart_r.png);	}
		#navi ul li#nav08 a:hover{ background-image:url(../img/icon_info-on.png);	}
		#navi ul li#nav09 a:hover{ background-image:url(../img/icon_car-on.png);	}
		#navi ul li#nav10 a:hover{ background-image:url(../img/sy0199.png);	}
		#navi ul li#nav11 a:hover{ background-image:url(../img/sy0235.png);	}
		#navi ul li#nav12 a:hover{ background-image:url(../img/icon_colors-on.png);	}

/*container*/
#container{
	margin: 0 auto;
	padding: 0 0 130px;
	width: 93.7%;
	}

/*footer*/
#footer{
	clear: both;
	padding: 5px 0;
	height: 20px;
	color: #fff;
	text-align: center;
	background: #4169e1;
	}


#tel{
	position: absolute;
	bottom: 60px;
	width: 100%;
	text-align:center;
}

#socialBtn{
	position:absolute;
	bottom: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	height: 40px;
}
	#socialBtn li{
		float: left;
		width: 50%;
		padding: 5px 0;
		background: #000;
	}
	#socialBtn li.tw{	background: #45b0e3;	}
	#socialBtn li.fb{	background: #39599f;	}
	#socialBtn a{
		display: block;
	}


/*elements
----------------------------------------------------*/
#logo{
	position: absolute;
	left: 50%;
	top: 80px;
	width: 200px;
	z-index: 10;
	margin-left: -100px;
}

#mainImg {
	position:relative;
}
#mainImg img{
	margin-bottom:10px;
}

/*catch copy*/
h1#thema{
	position:absolute;
	top:5px;
	right:5px;
	font-weight :normal;
	font-size: 10px;
	color: #fff;
}
h2#catch{
	font-weight :bold;
	font-size: 18px;
	color: #333;
	text-align: center;
}
#container h3{
	font-size: 18px;
	color: #cc0066;
	font-weight: bold;
}

#column01{
	width: 100%;
}
#column02{
	width: 100%;
}
	#column01 header,
	#column02 header{
		margin:0 0 5px;
		text-align: center;
	}
		#column01 header img,
		#column02 header img{
					margin:0 0 10px;
				}


#topics{
	margin: 30px 0 0;
}
	#topics h2{
		margin-bottom: 10px;
		text-align: center;
		height: 55px;
		background: url(../img/bg_ribbon_l.png) left top no-repeat;
	}
		#topics h2 span{
			display: block;
			margin-left: 105px;
			padding:2px 105px 0 0;
			height: 53px; /*55px*/
			color: #ADD8E6;
			background: url(../img/bg_ribbon_r.png) right top no-repeat;
		}
	#topics ul{
		margin: 0 0 0 2em;
	}
		#topics ul li{
			margin: 0 0 0.5em 0;
			list-style-type: disc;
		}
	

#contTxt{
	margin: 20px 0;
}
#contTxt h2,
#contTxt p{
	margin:0;
	font-size:10px;
	text-align:left;
	line-height:1.4em;
}
#contTxt h2{
	background:none;
	padding:0 0 5px;
	height:auto;
}


/*====================================================
480px以上 for タブレット
====================================================*/
@media only screen and (min-width: 481px){
	/*layout
	----------------------------------------------------*/
	body{
		font-size: 14px;
	}
	#wrapper{
		width: 94.7%;
	}
	
	#header{
		/*position: relative;*/
		height: auto;
		background: none;
	}
	
	#navi{
		padding: 10px 0 0 200px;
		font-size: 16px;
	}
		#navi ul{
			margin-bottom: 10px;
		}
			#navi ul li{
				margin:0 9% 0 0;
				width: 45%;
			}
				#navi ul li.none{
					margin: 0;
				}
			#navi ul li a{
				padding: 10px 0 0 40px;
				height:30px;
				text-align:left;
				background-position:left center;
				border-bottom: 1px dashed #73c3e6;
			}
			#navi ul li#nav05{
				display: none;
			}
	
	#container{
		padding-bottom: 50px;
		width: 100%;
	}
	
	/*elements
	----------------------------------------------------*/
	#logo{
		top: 0;
		left: 10px;
		margin: 0;
		padding: 5px 0 0 0;
		width: 180px;
		height: 215px; /*220px*/
		background: url(../img/bg_logo.png) no-repeat;
	}
	
	#tel{
		position: static;
		padding: 0 80px 10px 200px;
		width: auto;
		text-align: left;
	}
	
	#mainImg{
		position: relative;
		z-index: -1;
	}
		#mainImg h1#thema{
			position: absolute;
			top:5px;
			right:5px;
			color:#fff;
			font-size:10px;
			font-weight:normal;
		}

		#mainImg h2#catch{
			position: absolute;
			left: 50%;
			top: 50%;
			margin:0 0 0 -7em;
			font-size: 24px;
			color: #fff;
		}
	
	#socialBtn{
		top: 100px;
		bottom: auto;
		right: 0;
		left: auto;
		width: 80px;
	}
		#socialBtn li{
			margin-left: 10px;
			padding: 0;
			width: 30px;
		}
			#socialBtn li.tw{	background: none;	}
			#socialBtn li.fb{	background: none;	}
		
	#columns{
		overflow: hidden;
	}
	
	#column01{
		float: left;
		width: 47.8%;
	}
	#column02{
		float: right;
		width: 47.8%;
	}
		#column01 header,
		#column02 header{
			text-align: left;
		}
	
}


/*====================================================
768px以上 for PC
====================================================*/
@media only screen and (min-width: 769px){

	
	/*layout
	----------------------------------------------------*/
	#wrapper{
		width: 96%;
		overflow: hidden;
	}
	
	#header{
		float:left;
		width: 25%;
		height: auto;
		background: url(../img/bg_tag.png) center bottom no-repeat;
		/*IE8以下*/
		background-image: url(../img/bg_tag-ie.jpg)\9;
		width: 23%\9;
		border: 2px solid #fff\9;
		border-top: none\9;
		background-size: 100% auto;
	}
	
	#navi{
		padding:0;
		height: auto;
	}
		#navi ul li,
		#navi ul li.none{
			float: none;
			margin:0 15px 10px;
			width: auto;
		}
	
	#container{
		float: right;
		padding: 15px 0 50px 3.1%;
		width: 71.9%; /*75%*/
	}
	
	/*layout
	----------------------------------------------------*/
	#logo{
		position: static;
		padding-top: 5px;
		width: 100%;
		height: auto;
		background: none;
	}
	
	#tel{
		margin: 0 10px;
		padding: 0;
		text-align: center;
		line-height: 2;
	}
	
	#socialBtn{
		position: static;
		margin: 20px 0 0;
		padding: 0 0 80px 0;
		width: auto;
		text-align: center;
	}
		#socialBtn li{
			float: none;
			display: inline;
			}
			#socialBtn li a{
				display: inline;
			}
	
}


/*====================================================
1000px以上 for PC 固定レイアウト
====================================================*/
@media only screen and (min-width: 1000px){
	/*layout
	----------------------------------------------------*/
	#wrapper{
		width: 960px;
	}
	#header{
		width: 240px;
		background-image: url(../img/bg_tag.png)\9;
		border: none\9;
	}
	#conteinar{
		width: 690px;
	}
	
	/*elements
	----------------------------------------------------*/
	#column01,
	#column02{
		width: 330px;
	}
	#topics ul{
		margin-left: 4em;
	}
}