/*==-----------------------------------------------
CSS Information

 File name:      layout.css
 Author:         Crea.,Inc. 
 Style Info:     レイアウト関連のスタイル

-------------------------------------------------*/




/*==-----------------------------------------------
body
-------------------------------------------------*/
body{
	min-width:320px;
}

/*==-----------------------------------------------
wapper
-------------------------------------------------*/
#wapper{
	min-height: 100%;
	width:100%;
}

/*==-----------------------------------------------
header
-------------------------------------------------*/
header{
	margin:0 0 20px 0;
	padding-top:10px;
}

header section{
	max-width:960px;
}
header section h1{
	margin:0 auto 20px auto;
	width:90%;
}



/*==-----------------------------------------------
nav
-------------------------------------------------*/

nav{
}
nav ul{
	max-width:960px;
	margin:0 auto;
	width:100%;
}
nav ul li{
	float:left;
	width:33.3%;
	text-align:center;
	border-bottom:solid 1px #CCC;
	font-size:1.4rem;
	font-size:14px;
	font-weight:bold;
	text-shadow:1px 2px #000;
	-moz-text-shadow:1px 2px #000;
	-webkit-text-shadow:1px 2px #000;
}
nav ul li span{
	font-size:1.2rem;
	font-size:12px;
}

nav ul li a{
	display:block;
	padding:12px 0;
	text-decoration:none;
	border-right:solid 1px #CCC;

}
nav ul li a:hover{
	background:url(/src/otodama/13/pc/common/nav/nav_back.png) 50% 50% no-repeat;
}
nav ul li.nav1 a:hover{
	background:url(/src/otodama/13/pc/common/nav/nav_home.png) 50% 50% no-repeat;
}
nav ul li a:link {color:#FFF;}
nav ul li a:visited {color: #FFF;}
nav ul li a:hover {color: #FFF;}
nav ul li a:active {color: #FFF;}

nav ul li.nav9 a{
	border-right:none;
}

.ie7 nav ul li{
	width:49.84375%;
}

/*==-----------------------------------------------
sns
-------------------------------------------------*/
#sns{
	max-width:960px;
	margin:0 auto;
	text-align:left;
}

/*==-----------------------------------------------
container
-------------------------------------------------*/
#container{
	max-width:960px;
	margin:0 auto;
	text-align:left;
}

/*==-----------------------------------------------
main
-------------------------------------------------*/
#main{
	margin:0 3% 50px 3%;
}

#main article{
	margin:0 0 20px 0;
}


/*==-----------------------------------------------
sidebar
-------------------------------------------------*/
#sidebar{
	margin:0 3% 20px 3%;
}
#sidebar aside{
	margin:10px;
}
#sidebar h1{
	font-size:2.8rem;
	font-size:28px;
}


/*==-----------------------------------------------
footer
-------------------------------------------------*/
footer{
	background:#006191;
	clear:both;
	padding:10px 0 0 0;
}

footer section{
	max-width:960px;
	margin:0 auto 10px auto;
}

footer .bottom{
	background:#002f42;
	text-align:center;
	padding:20px 0;
}

footer .bottom section{
	max-width:1095px;
	margin:0 auto 10px auto:
}

footer .bottom ul{
	display:block;
	list-style-type:none;
	clear:both;
	margin:auto 10px;
}

footer .bottom ul li{
	float:left;
	margin:0 5px 5px 0;
}

footer .bottom ul li.last{
	margin:0;
}
footer .bottom .event{
	margin:0 0 10px 0;
}
footer .bottom .event p{
	margin:0 3% 10px 3%;
}


/*==-----------------------------------------------
ミディアムサイズ　600px～
-------------------------------------------------*/
@media only screen and (min-width:600px){
	header section h1{
	margin:0 auto 20px auto;}
	nav ul li{
	font-size:1.7rem;
	font-size:17px;
		}
	nav ul li a{
		padding:15px 0;
	}
}
/*==-----------------------------------------------
ラージサイズ　960px～
-------------------------------------------------*/
@media only screen and (min-width:960px){
	header section{
		max-width:960px;
		margin:0 auto;
		text-align:left;
	}
	header section h1{
	width:300px;
	height:auto;
	margin:5px 0 20px 0;
	float:left;
	}
	header section p.date{
	float:right;
	margin:-10px 0 0 0;
	}
	#main{
	float:right;
	width:680px;
	margin:0 0 20px 0;
	}
	#sidebar{
	margin:0 0 20px 0;
	width:260px;
	float:left;
	}
	nav ul{
		max-width:960px;
		margin:0 auto;
		width:100%;
	}
	nav ul li{
		float:left;
		text-align:center;
		border-bottom:none;
		display:table-cell;
		vertical-align:middle;
		font-size:1.8rem;
		font-size:18px;
	}
	nav ul li.nav3{
	font-size:1.6rem;
	font-size:16px;
		}
	nav ul li span{
		font-size:1.0rem;
		font-size:10px;
	}
	nav ul li.nav1{width:95px;}
	nav ul li.nav2{width:103px;}
	nav ul li.nav3{width:95px;}
	nav ul li.nav4{width:103px;}
	nav ul li.nav5{width:103px;}
	nav ul li.nav6{width:103px;}
	nav ul li.nav7{width:95px;}
	nav ul li.nav8{width:127px;}
	nav ul li.nav9{width:127px;}
	
	nav ul li a{
		border-right:none;
		display:block;
		padding:12px 0;
		text-decoration:none;
	}
	nav ul li:last-child a{
		border-right:none;
	}
	nav ul li:first-child a{
		border-left:none;
	}
	footer .bottom .event{
	margin:0 auto 10px auto;
	width:960px;
	}
	footer .bottom .event p{
	margin:0 10px 20px 10px;
	float:left;
	width:300px;
	}
}


/*==-----------------------------------------------
IE8
-------------------------------------------------*/
.ie8 nav ul li,
.ie7 nav ul li{
	font-size:1.8rem;
	font-size:18px;
}
.ie8 nav ul li.nav3,
.ie7 nav ul li.nav3{
	font-size:1.5rem;
	font-size:15px;
		}
.ie8 nav ul li span,
.ie7 nav ul li span{
		font-size:1.0rem;
		font-size:10px;
}
.ie8 header section,
.ie7 header section{
		max-width:960px;
		margin:0 auto;
}
.ie8 header section h1,
.ie7 header section h1{
	width:300px;
	height:auto;
	margin:5px 0 20px 0;
	float:left;
}
.ie8 header section p.date,
.ie7 header section p.date{
	float:right;
	margin:-10px 0 0 0;
}
.ie8 #main,
.ie7 #main{
	float:right;
	width:680px;
	margin:0 0 20px 0;
}
.ie8 #sidebar,
.ie7 #sidebar{
	margin:0 0 20px 0;
	width:260px;
	float:left;
}
.ie8 nav ul
.ie7 nav ul{
	max-width:960px;
	margin:0 auto;
	width:100%;
}
.ie8 nav ul li
.ie7 nav ul li{
	float:left;
	text-align:center;
	border-bottom:none;
	display:table-cell;
	vertical-align:middle;
	font-size:1.8rem;
	font-size:18px;
}
.ie8 nav ul li a,
.ie7 nav ul li a{
		padding:15px 0;

}
.ie8 nav ul li.nav1,
.ie7 nav ul li.nav1{width:95px;}
.ie8 nav ul li.nav2,
.ie7 nav ul li.nav2{width:103px;}
.ie8 nav ul li.nav3,
.ie7 nav ul li.nav3{width:95px;}
.ie8 nav ul li.nav4,
.ie7 nav ul li.nav4{width:103px;}
.ie8 nav ul li.nav5,
.ie7 nav ul li.nav5{width:103px;}
.ie8 nav ul li.nav6,
.ie7 nav ul li.nav6{width:103px;}
.ie8 nav ul li.nav7,
.ie7 nav ul li.nav7{width:95px;}
.ie8 nav ul li.nav8,
.ie7 nav ul li.nav8{width:127px;}
.ie8 nav ul li.nav9,
.ie7 nav ul li.nav9{width:127px;}
	
.ie8 nav ul li a,
.ie7 nav ul li a{
		border-right:none;
		display:block;
		padding:12px 0;
		text-decoration:none;
}
.ie8 nav ul li:last-child a,
.ie7 nav ul li:last-child a{
	border-right:none;
}
.ie8 nav ul li:first-child a,
.ie7 nav ul li:first-child a{
	border-left:none;
}
.ie8 footer .bottom .event{
	margin:0 auto 10px auto;
	width:960px;
}
.ie8 footer .bottom .event p,
.ie7 footer .bottom .event p{
	margin:0 10px 20px 10px;
	float:left;
	width:300px;
}