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

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

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




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

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

/*==-----------------------------------------------
header
-------------------------------------------------*/
header{
	background:url(/otodama/history/src/common/back.gif) 0 0 repeat;
	margin:0 0 20px 0;
	width:100%;
	z-index:100;
	border-top:solid 5px #2b1c13;
}
header .line{
	margin-top:2px;
	border-top:solid 1px #2b1c13;
}
header section{
	max-width:960px;
}

header section h1{
	width:160px;
	float:left;
	margin:0 0 0 10px;
}

header section p.btn_back{
	margin:18px 10px 0 10px;
	width:65px;
	width:65px;
	float:right;
}

/*==-----------------------------------------------
nav
-------------------------------------------------*/
nav{
	max-width:960px;
	clear:both;
}
nav ul{
	margin:0 auto;
	width:100%;
}
nav ul li{
	float:left;
	width:25%;
	text-align:center;
	background:#cc0300;
}
nav ul li a{
	display:block;
	padding:5px 8px;
	border-left:solid 1px #FFF;
	border-bottom:solid 1px #FFF;
	text-decoration:none;
	font-size:1.2rem;
	font-size:12px;
	font-weight:bold;
}



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



/*==-----------------------------------------------
footer
-------------------------------------------------*/
footer{
	background:#312620;
	clear:both;
	height:60px;
}

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

footer .copyright{
	text-align:center;
	color:#FFF;
	font-size:1.0rem;
	font-size:10px;
	text-shadow:1px 1px 0px rgba(0,0,0,0.8);
}

/*==-----------------------------------------------
スモールサイズ　～599px
-------------------------------------------------*/
@media only screen and (max-width:599px){

	nav ul li{
		float:left;
		width:20%;
		text-align:center;
		background:#cc0300;
	}
}

/*==-----------------------------------------------
ミディアムサイズ　600px～
-------------------------------------------------*/
@media only screen and (min-width:600px){

	header section h1{
		width:220px;
		height:110px;
	}
	header section p.btn_back{
		margin:20px 10px 0 10px;
		width:90px;
		width:90px;
	}
	nav{
		max-width:960px;
		clear:both;
	}
	nav ul{
		margin:0 auto;
		width:100%;
	}
	nav ul li{
		float:left;
		width:10%;
		text-align:center;
		background:#cc0300;
	}
	nav ul li a{
		padding:5px 8px;
	}
}
/*==-----------------------------------------------
ラージサイズ　960px～
-------------------------------------------------*/
@media only screen and (min-width:960px){
	header{
		position:fixed;
		top:0;
		left:0;
		height:110px;
	}
	header section{
		max-width:960px;
		margin:0 auto;
		text-align:left;
	}
	header section h1{
		width:190px;
		height:95px;
		margin:5px 0 20px 0;
	}
	header section p.btn_back{
		margin:15px 0 0 0px;
		width:85px;
		height:85px;
	}
	nav{
		float:left;
		width:650px;
		margin:5px 10px 0 15px;
		clear:none;
	}
	nav ul{
		margin:0 auto;
		width:100%;
	}
	nav ul li{
		display:block;
		float:left;
		text-align:center;
		background:none;
		height:18px;
		margin:0 0 6px 0;
	}

	nav ul li.nav00{width:60px;}

	nav ul li{
		width:112px;
		margin:0 0 2px 0;
		padding:0 8px;
		border-right:2px solid #333;
	}
	nav ul li.nav1112,nav ul li.nav1819{width:137px;}
	nav ul li.nav16{width:150px;}

	nav ul li:nth-child(4n+1){
		clear:both;
		border-left:2px solid #333;
	}


	nav ul li a{
		display:block;
		border-bottom:none;
		border-left:none;
		text-decoration:none;
		background:url(/otodama/history/src/common/nav200227.png) center center;
		text-indent:-9999px;
		width:100%;
		height:100%;
		padding:0;
	}
	nav ul li.nav00 a{background-position:0 0;}
	nav ul li.nav05 a{background-position:0 0;}
	nav ul li.nav06 a{background-position:0 -18px;}
	nav ul li.nav07 a{background-position:0 -36px;}
	nav ul li.nav08 a{background-position:0 -54px;}
	nav ul li.nav09 a{background-position:0 -72px;}
	nav ul li.nav10 a{background-position:0 -90px;}
	nav ul li.nav11 a{background-position:0 -108px;}
	nav ul li.nav1112 a{background-position:0 -126px;}
	nav ul li.nav13 a{background-position:0 -144px;}
	nav ul li.nav14 a{background-position:0 -162px;;}
	nav ul li.nav15 a{background-position:0 -180px;}
	nav ul li.nav16 a{background-position:0 -198px;}
	nav ul li.nav17 a{background-position:0 -216px;}
	nav ul li.nav18 a{background-position:0 -234px;}
	nav ul li.nav1819 a{background-position:0 -252px;}
	nav ul li.nav22 a{background-position:0 -306px;}
  nav ul li.nav23 a{background-position:0 -324px;}


	nav ul li.nav00 a:hover{background-position:0 0;}
	nav ul li.nav05 a:hover{background-position:-180px 0;}
	nav ul li.nav06 a:hover{background-position:-180px -18px;}
	nav ul li.nav07 a:hover{background-position:-180px -36px;}
	nav ul li.nav08 a:hover{background-position:-180px -54px;}
	nav ul li.nav09 a:hover{background-position:-180px -72px;}
	nav ul li.nav10 a:hover{background-position:-180px -90px;}
	nav ul li.nav11 a:hover{background-position:-180px -108px;}
	nav ul li.nav1112 a:hover{background-position:-180px -126px;}
	nav ul li.nav13 a:hover{background-position:-180px -144px;}
	nav ul li.nav14 a:hover{background-position:-180px -162px;;}
	nav ul li.nav15 a:hover{background-position:-180px -180px;}
	nav ul li.nav16 a:hover{background-position:-180px -198px;}
	nav ul li.nav17 a:hover{background-position:-180px -216px;}
	nav ul li.nav18 a:hover{background-position:-180px -234px;}
	nav ul li.nav1819 a:hover{background-position:-180px -252px;}
	nav ul li.nav22 a:hover{background-position:-180px -306px;}
  nav ul li.nav23 a:hover{background-position:-180px -324px;}



	footer .copyright{
		font-size:1.2rem;
		font-size:12px;
	}
}

/*==-----------------------------------------------
IE7,IE8
-------------------------------------------------*/
.ie8 header,
.ie7 header{
	position:fixed;
	top:0;
	left:0;
	height:110px;
}
.ie8 header section,
.ie7 header section{
	max-width:960px;
	margin:0 auto;
	text-align:left;
}
.ie8 header section h1,
.ie7 header section h1{
	width:190px;
	height:95px;
	margin:5px 0 20px 0;
}
.ie8 header section p.btn_back,
.ie7 header section p.btn_back{
	margin:15px 0 0 0px;
	width:85px;
	height:85px;
}
.ie8 nav,
.ie7 nav{
	float:left;
	width:650px;
	margin:50px 10px 0 15px;
	clear:none;
}
.ie8 nav ul,
.ie7 nav ul{
	margin:0 auto;
	width:100%;
}
.ie8 nav ul li,
.ie7 nav ul li{
	float:left;
	text-align:center;
	background:none;
	height:18px;
	margin:0 0 6px 0;
}
.ie8 nav ul li.nav00,.ie7 nav ul li.nav00{width:60px;}
.ie8 nav ul li.nav13,.ie7 nav ul li.nav13{width:134px;}
.ie8 nav ul li.nav1112,.ie7 nav ul li.nav1112{width:148px;}
.ie8 nav ul li.nav11,.ie7 nav ul li.nav11{width:126px;}
.ie8 nav ul li.nav10,.ie7 nav ul li.nav10{width:140px;}
.ie8 nav ul li.nav09,.ie7 nav ul li.nav09{width:123px;}
.ie8 nav ul li.nav08,.ie7 nav ul li.nav08{width:133px;}
.ie8 nav ul li.nav07,.ie7 nav ul li.nav07{width:135px;}
.ie8 nav ul li.nav06,.ie7 nav ul li.nav06{width:134px;}
.ie8 nav ul li.nav05,.ie7 nav ul li.nav05{width:123px;}

.ie8 nav ul li a,
.ie7 nav ul li a{
	display:block;
	border-bottom:none;
	border-left:none;
	text-decoration:none;
	background:url(/otodama/history/src/common/nav.png);
	text-indent:-9999px;
	width:100%;
	height:100%;
	padding:0;
}
.ie8 nav ul li.nav00 a{background-position:0 0;}
.ie8 nav ul li.nav13 a{background-position:-60px 0;}
.ie8 nav ul li.nav1112 a{background-position:-194px 0;}
.ie8 nav ul li.nav11 a{background-position:-342px 0;}
.ie8 nav ul li.nav10 a{background-position:-468px 0;}
.ie8 nav ul li.nav09 a{background-position:0 -36px;}
.ie8 nav ul li.nav08 a{background-position:-123px -36px;}
.ie8 nav ul li.nav07 a{background-position:-256px -36px;}
.ie8 nav ul li.nav06 a{background-position:-390px -36px;}
.ie8 nav ul li.nav05 a{background-position:-524px -36px;}

.ie8 nav ul li.nav00 a:hover{background-position:0 -18px;}
.ie8 nav ul li.nav13 a:hover{background-position:-60px -18px;}
.ie8 nav ul li.nav1112 a:hover{background-position:-194px -18px;}
.ie8 nav ul li.nav11 a:hover{background-position:-342px -18px;}
.ie8 nav ul li.nav10 a:hover{background-position:-468px -18px;}
.ie8 nav ul li.nav09 a:hover{background-position:0 -54px;}
.ie8 nav ul li.nav08 a:hover{background-position:-123px -54px;}
.ie8 nav ul li.nav07 a:hover{background-position:-256px -54px;}
.ie8 nav ul li.nav06 a:hover{background-position:-390px -54px;}
.ie8 nav ul li.nav05 a:hover{background-position:-524px -54px;}
	
.ie7 nav ul li.nav00 a{background-position:0 0;}
.ie7 nav ul li.nav13 a{background-position:-60px 0;}
.ie7 nav ul li.nav1112 a{background-position:-194px 0;}
.ie7 nav ul li.nav11 a{background-position:-342px 0;}
.ie7 nav ul li.nav10 a{background-position:-468px 0;}
.ie7 nav ul li.nav09 a{background-position:0 -36px;}
.ie7 nav ul li.nav08 a{background-position:-123px -36px;}
.ie7 nav ul li.nav07 a{background-position:-256px -36px;}
.ie7 nav ul li.nav06 a{background-position:-390px -36px;}
.ie7 nav ul li.nav05 a{background-position:-524px -36px;}

.ie7 nav ul li.nav00 a:hover{background-position:0 -18px;}
.ie7 nav ul li.nav13 a:hover{background-position:-60px -18px;}
.ie7 nav ul li.nav1112 a:hover{background-position:-194px -18px;}
.ie7 nav ul li.nav11 a:hover{background-position:-342px -18px;}
.ie7 nav ul li.nav10 a:hover{background-position:-468px -18px;}
.ie7 nav ul li.nav09 a:hover{background-position:0 -54px;}
.ie7 nav ul li.nav08 a:hover{background-position:-123px -54px;}
.ie7 nav ul li.nav07 a:hover{background-position:-256px -54px;}
.ie7 nav ul li.nav06 a:hover{background-position:-390px -54px;}
.ie7 nav ul li.nav05 a:hover{background-position:-524px -54px;}

.ie8 footer .copyright,
.ie7 footer .copyright{
	font-size:1.2rem;
	font-size:12px;
}