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

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

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

/*==-----------------------------------------------
home
-------------------------------------------------*/

#home #mainimg{
	margin:0 auto;
	text-align:center;
}
#home #mainimg h1{
	margin:0 0 10px 0;
}

#home #mainimg .copy{
	margin:0 10px 10px 10px;
}

#home #mainimg .banner{
	margin:0 10px 10px 10px;
}

#home #mainimg .banner a:hover{
	opacity: 0.6;  
}

#home article{
	margin:0 0 30px 0;
}

#home article#otodama05{
	margin:0 0 60px 0;
}

#home article h1{
	margin:0 10px 10px 10px;
}

#home article section .field{
	margin:0 0 10px 0;
}
#home article section ul.btn_nobori{
	display:none;
	clear:both;
}
/*==----------------link------------------*/
#home article section.link{
	margin:0 auto 10px auto;
	width:220px;
}

#home article section.link .web a{
	display:block;
	width:210px;
	max-height:500px;
	border:solid 4px #FFF;
	box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
	margin:0 0 10px 0;
}

#home article section.link .web a:hover{
	border:solid 4px #cc0c00;
}

#home article section.link .btn_photo a{
	display:block;
	width:220px;
	height:50px;
	background:url(/otodama/history/src/index/btn_photo.png) 0 0 no-repeat;
	text-indent:-9999px;
}

#home article section.link .btn_photo a:hover{
	display:block;
	width:220px;
	height:50px;
	background-position:bottom;
}
/*==----------------date------------------*/
#home article section.date{
	margin:0 10px 20px 10px;
}

#home article section.date dl{
	clear:both;
	padding:0 0 10px 0;
	margin:0 0 10px 0;
	border-bottom:dotted 1px #948d8a;
}
#home article section.date dl dt{
	display:block;
	width:100px;
	text-align:center;
	padding:2px 0;
	margin:0 0 10px 0;
	background:#312620;
	color:#FFF;
	font-weight:bold;
	float:left;
	text-shadow:1px 1px 0px rgba(0,0,0,0.8);
}

#home article section.date dl dd{
	padding-left:110px;
	clear:right;
	font-weight:bold;
	font-size:1.6rem;
	font-size:16px;
}
/*==----------------band------------------*/
#home article section.band{
	margin:0 10px 20px 10px;
}


#home article section.band h2{
	padding:0 0 2px 0;
	margin:0 0 10px 0;
	border-bottom:solid 2px #272a52;
}


#home article section.band h3{
	font-size:1.6rem;
	font-size:16px;
	padding:2px 10px;
	background:#272a52;
	color:#FFF;
	width:125px;
	text-align:center;
	text-shadow:1px 1px 0px rgba(0,0,0,0.8);
}
#home article section.band dl{
	clear:both;
	padding:0 0 10px 0;
	margin:0 0 10px 0;
	border-bottom:dotted 1px #948d8a;
	max-width:700px;
}
#home article section.band dl dt{
	font-size:15px;
	color:#272a52;
	font-weight:bold;
}

#home article section.band dl.daiyokujyo dt{
	color:#cc0000;
}
#home article section.band dl.rotenburo dt{
	color:#0648ab;
}

/*==-----------------------------------------------
ミディアムサイズ　600px～
-------------------------------------------------*/
@media only screen and (min-width:600px){
	#home article#otodama05{
		margin:0 0 80px 0;
	}
}
/*==-----------------------------------------------
ラージサイズ　960px～
-------------------------------------------------*/
@media only screen and (min-width:960px){
	#home #mainimg{
		margin:130px auto 0 auto;
		text-align:center;
		border-bottom:solid 24px #312620;
		background:url(/otodama/history/src/index/back_mainimg.png) 0 0 repeat-x;
	}
	#home #mainimg h1{
		margin:0 auto 10px auto;
		max-width:960px;
	}

	#home #mainimg .copy{
		margin:0 auto 20px auto;
		max-width:960px;
	}
	#home #mainimg .banner{
		margin:0 auto 20px auto;
		max-width:960px;
	}

	#home #container article{
		padding-top:160px;
		margin:0 0 30px 0;
	}
	#home article#otodama05{
		margin:0 0 100px 0;
	}
	#home article h1{
		margin:0 0 10px 0;
	}
	#home article section.link{
		margin:0 10px 10px 0;
		float:right;
	}
	#home article section.date,
	#home article section.band{
		float:left;
		width:700px;
		margin:0 20px 10px 10px;
	}
	#home article section ul.btn_nobori{
		display:block;
		list-style-type:none;
		margin:0 auto;
		width:1000px;
	}
	#home article section ul.btn_nobori li{
		float:left;
		margin:0 5px;
		height:230px;
		width:70px;
	}
	#home article section ul.btn_nobori li a{
		display:block;
		background:url(/otodama/history/src/index/nobori24.png) no-repeat;
		width:100%;
		height:100%;
		text-indent:-9999px;
	}
  #home article section ul.btn_nobori li.nobori23 a{background-position:-1280px 0;}
	#home article section ul.btn_nobori li.nobori22 a{background-position:-1200px 0;}
	#home article section ul.btn_nobori li.nobori1819 a{background-position:-1120px 0;}
	#home article section ul.btn_nobori li.nobori18 a{background-position:-1040px 0;}
	#home article section ul.btn_nobori li.nobori17 a{background-position:-960px 0;}
	#home article section ul.btn_nobori li.nobori16 a{background-position:-880px 0;}
	#home article section ul.btn_nobori li.nobori15 a{background-position:-800px 0;}
	#home article section ul.btn_nobori li.nobori14 a{background-position:0 0;}
	#home article section ul.btn_nobori li.nobori13 a{background-position:-80px 0;}
	#home article section ul.btn_nobori li.nobori1112 a{background-position:-160px 0;}
	#home article section ul.btn_nobori li.nobori11 a{background-position:-240px 0;}
	#home article section ul.btn_nobori li.nobori10 a{background-position:-320px 0;}
	#home article section ul.btn_nobori li.nobori09 a{background-position:-400px 0;}
	#home article section ul.btn_nobori li.nobori08 a{background-position:-480px 0;}
	#home article section ul.btn_nobori li.nobori07 a{background-position:-560px 0;}
	#home article section ul.btn_nobori li.nobori06 a{background-position:-640px 0;}
	#home article section ul.btn_nobori li.nobori05 a{background-position:-720px 0;}

	#home article section ul.btn_nobori li.nobori23 a:hover{background-position:-1280px -230px;}
	#home article section ul.btn_nobori li.nobori22 a:hover{background-position:-1200px -230px;}
	#home article section ul.btn_nobori li.nobori1819 a:hover{background-position:-1120px -230px;}
	#home article section ul.btn_nobori li.nobori18 a:hover{background-position:-1040px -230px;}
	#home article section ul.btn_nobori li.nobori17 a:hover{background-position:-960px -230px;}
	#home article section ul.btn_nobori li.nobori16 a:hover{background-position:-880px -230px;}
	#home article section ul.btn_nobori li.nobori15 a:hover{background-position:-800px -230px;}
	#home article section ul.btn_nobori li.nobori14 a:hover{background-position:0 -230px;}
	#home article section ul.btn_nobori li.nobori13 a:hover{background-position:-80px -230px;}
	#home article section ul.btn_nobori li.nobori1112 a:hover{background-position:-160px -230px;}
	#home article section ul.btn_nobori li.nobori11 a:hover{background-position:-240px -230px;}
	#home article section ul.btn_nobori li.nobori10 a:hover{background-position:-320px -230px;}
	#home article section ul.btn_nobori li.nobori09 a:hover{background-position:-400px -230px;}
	#home article section ul.btn_nobori li.nobori08 a:hover{background-position:-480px -230px;}
	#home article section ul.btn_nobori li.nobori07 a:hover{background-position:-560px -230px;}
	#home article section ul.btn_nobori li.nobori06 a:hover{background-position:-640px -230px;}
	#home article section ul.btn_nobori li.nobori05 a:hover{background-position:-720px -230px;}
}

/*==-----------------------------------------------
photo
-------------------------------------------------*/
#photo article h1{
	margin:0 10px 10px 10px;
}
#photo article section h2{
	font-size:2.1rem;
	font-size:21px;
	padding:0 0 2px 0;
	margin:0 0 10px 0;
	border-bottom:solid 2px #272a52;
	color:#272a52;
}

#photo article section h3{
	font-size:1.6rem;
	font-size:16px;
	padding:2px 10px;
	margin:0 0 10px 0;
	background:#272a52;
	color:#FFF;
	text-shadow:1px 1px 0px rgba(0,0,0,0.5);
}

#photo .album ul{
	margin:0 auto;
	padding:0;
	list-style-type:none;
}
#photo .album ul li a{
	display:block;
	width: 60px;
	margin: 5px;
	float: left;
	border:solid 3px #FFF;
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
}

#photo article section{
		margin:0 0 20px 10px;
}

#photo .paging{
	position:relative;
	overflow:hidden;
	margin:0 0 100px 0;
}

#photo .paging ul {
	position:relative;
	left:50%;
	float:left;
	list-style-type:none;
}

#photo .paging li {
	position:relative;
	left:-50%;
	float:left;
}

#photo .paging li a{
	margin:0 3px 10px 3px;
	padding:3px 5px;
	display:block;
	background:#cc0900;
	color:#FFF;
	text-decoration:none;
	border:solid 2px #cc0900;
	font-weight:bold;
	text-shadow:1px 1px 0px rgba(148,7,0,1);
	font-size:1.1rem;
	font-size:11px;
}

#photo .paging li a:hover{
	background:none;
	color:#cc0900;
	text-shadow:1px 1px 0px rgba(255,255,255,0.8);
}

#photo .paging li.home a{
	background:none;
	color:#cc0900;
	text-shadow:1px 1px 0px rgba(255,255,255,0.8)
}
#photo .paging li.home a:hover{
	background:#cc0900;
	color:#FFF;
	text-shadow:1px 1px 0px rgba(148,7,0,1);
}
/*==-----------------------------------------------
ミディアムサイズ　600px～
-------------------------------------------------*/
@media only screen and (min-width:600px){
}
/*==-----------------------------------------------
ラージサイズ　960px～
-------------------------------------------------*/
@media only screen and (min-width:960px){
	#photo article h1{
		margin:0 0 10px 0;
	}
	#photo article section h2{
		font-size:2.6rem;
		font-size:26px;
	}
	
	#photo #container article{
			padding-top:130px;
			margin:0 0 50px 0;
		}
	#photo article section{
			margin:0 0 20px 0;
	}
	#photo .album ul li a{
		border:solid 3px #efebe1;
		background:url(/otodama/history/src/photo/photo_back.png) 0 0 ;
		background-size:cover;
	margin: 7px;
	}
	#photo .album ul li a img{
		filter:alpha(opacity=65);
		-moz-opacity:0.65;
		-khtml-opacity: 0.65;
		opacity:0.65;
		-webkit-transition: all 0.4s ease;
		-moz-transition: all 0.4s ease;
		-o-transition: all 0.4s ease;
		box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
		-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
		-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	}
	#photo .album ul li a:hover{
		border:solid 3px #FFF;
	}
	#photo .album ul li a:hover img{
	     filter:alpha(opacity=100);
	     -moz-opacity:1;
	     -khtml-opacity: 1;
	     opacity:1;
	}
}