@charset "Shift_JIS";

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

  Main styles
  version 2012.02.01
  autor   Kenichi Okamura
  
  サイズ、色などを記述しています
--------------------------------------------------------------------*/


body {
	background: url(../images/bg.gif) center top;
}

body, td, th {
	font-size: 14px;
	line-height: 1.75em;
	letter-spacing: 0.075em;
	text-align: left;
	color: #333;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}


h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	line-height: 1.5em;
}

h1 {
	font-size:24px;
}
h2 {
	font-size:18px;
	margin-bottom: 30px;
}
h3 {
	font-size:16px;
}
h4 {
	font-size:14px;
}
h5 {
	font-size:14px;
	color: #666;
}
h6 {
	font-size:14px;
	color: #999;
}

p.photo {
	margin-bottom: 30px;
}

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

  link style

--------------------------------------------------------------------*/
a {
	color:#00B2B2;
	text-decoration: none;
}

a:link {
	color:#00B2B2;
	text-decoration: none;
}

a:visited {
	color:#00B2B2;
	text-decoration: none;
}

a:hover {
	color:#0077B2;
	text-decoration: none;
}

a:active {
	color:#0077B2;
	text-decoration: none;
}

	/*----------------------------
	  image link style
	----------------------------*/
	a.external img {
		vertical-align: middle;
	}
	

a:hover img {
	filter: alpha(opacity=60);
	-moz-opacity:0.60;
	opacity:0.60;
}

a:hover img.btn,
a:hover img.current,
a:hover img.nohover {
	filter: alpha(opacity=100);
	-moz-opacity:1.0;
	opacity:1.0;
}

a:hover img.current,
a:hover img.off,
a:hover img.nohover {
	cursor: default;
}


img.off,
a img.off,
a:hover img.off {
	filter: alpha(opacity=30);
	-moz-opacity:0.30;
	opacity:0.30;
}




.hr1 {
	height: 4px;
	margin: 25px 0;
	background: url(../images/hr1.gif) no-repeat center top;
}
.hr2 {
	height: 7px;
	margin: 25px 0;
	background: url(../images/hr2.gif) no-repeat center top;
}
.hr3 {
	height: 4px;
	margin: 25px 0;
	background: url(../images/hr3.gif) center bottom no-repeat;
}
.hr4 {
	height: 22px;
	margin: 25px 0;
	background: url(../images/hr4.gif) center bottom no-repeat;
}




#search {
	width: 90%;
	margin: 0 auto;
	background: url(../images/search_bg_bl.gif) left bottom no-repeat;
}
	#search div.top {
		background: url(../images/search_bg_tr.gif) right top no-repeat;
		height: 10px;
	}
		#search div.top div {
			background: url(../images/search_bg_tl.gif) left top no-repeat;
			height: 10px;
		}
	#search .content {
		background: url(../images/search_bg_br.gif) right bottom no-repeat;
		padding: 0 20px 10px 20px;
	}
	
	#search select {
		width: 155px;
		margin-right: 5px;
	}
	#search #freeWord {
		width: 155px;
		margin-right: 5px;
	}
	#search .label {
		font-weight: bold;
		margin-right: 20px;
	}
	#search #searchButton {
		width: 60px;
	}
	#random {
		text-align: center;
		padding-top: 2px;
		padding-bottom: 10px;
		margin-bottom: 8px;
	}
		#searchRandom {
			/*width: 200px;
			height: 40px;*/
			cursor: pointer;
		}
		
	

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

  menu style

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

#menu {
	width: 400px;
}
	#menu .midashi {
	}
	#menu li {
		font-size: 14px;
		line-height: 1.75em;
		padding-bottom: 1px;
	}
	
.article {
}
	.article h2,
	.article h3,
	.article h4,
	.article h5,
	.article h6 {
		width: 500px;
		margin: 0 auto 1em;
		text-align: left;
	}
	
	.article p {
		width: 500px;
		margin: 0 auto 2em;
	}

	.article .photo {
		width: 500px;
		margin: 0 auto 2em;
	}

.movie {
	width: 640px;
	margin: 0 auto 2em;
}

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

	  headNavi

--------------------------------------------------------------------*/
#headNavi {
	background: url(../images/hr1.gif) center bottom no-repeat;
	min-height: 28px;
	padding-top: 12px;
}
	#headNavi .hobo {
		padding: 0 0 12px 20px;
	}
	#headNavi .navi {
		padding-right: 20px;
	}
	#headNavi li {
		padding: 0 0 12px 20px;
		float: left;
		line-height: 1em;
		font-size: 12px;
	}
		#headNavi li img {
			margin-right: 5px;
			vertical-align: middle;
		}


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

	  items

--------------------------------------------------------------------*/
#items {
}
	#items .item {
		background: url(../images/list_bg_top.gif) no-repeat center top;
	}
		#items .item .content {
			background: url(../images/list_bg_btm.gif) no-repeat center bottom;
			width: 100%;
			height: 100%;
		}
			#items .item .content div.inner {
				padding: 20px;
			}
			#items .item .content div.inner li {
				margin-bottom: 5px;
			}
			#items .item .content div.inner li img {
				padding-left: 5px;
			}
	#items .alert {
		background: url(../images/list_bg_alert_top.gif) no-repeat center top;
	}
		#items .alert .content {
			background: url(../images/list_bg_alert_btm.gif) no-repeat center bottom;
			width: 100%;
			height: 100%;
		}
			#items .alert .content div.inner {
				padding: 20px;
				text-align: center;
				color: #808066;
			}
				#items .alert .content div.inner h4 {
					margin: 1.5em 0;
				}

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

	  Override Common styles

--------------------------------------------------------------------*/
#wrapper {
}

#header {
	position: relative;
	margin-bottom: 10px;
	margin-top: 20px;
	/*background:url(../images/ph_main2.jpg) no-repeat left 300px;*/
}
	#header h1 {
		margin-bottom: 10px;
	}
	#header h3 {
		margin-bottom: 30px;
	}

#yodogawa {
	font-size: 14px;
	font-weight: bold;
	color: #808080;
}

#contents {
}

#update {
}

#navi {
	width: 320px;
	text-align: center;
}
	#navi li {
		float:left;
	}
	#navi li.next {
		width: 90px;
	}
	#navi li.prev {
		width: 90px;
	}
	#navi li.latest {
		width: 120px;
		padding: 0 10px;
	}

#date {
	color: #666;
	padding-top: 10px;
	padding-bottom: 10px;
}

#footer {
	padding-top: 0;
}
	#footer li {
		padding-right: 20px;
	}
	
#copyright,
#footer li.copyright {
	line-height: 16px;
	text-align: left;
	margin-top: 10px;
}


.mainPhoto {
	float:left;
	margin-bottom:20px;
}
.mainPhoto2 {
	margin-bottom:20px;
}


/*		Tablet Layout: 768px.
		Inherits styles from: Default Layout. */

@media only screen and (min-width: 768px) and (max-width: 991px) {

}


/*		Mobile Layout: 320px.
		Inherits styles from: Default Layout. */

@media only screen and (max-width: 767px) {
	
	#items .item {
		background: url(../images/list_bg_s_top.gif) no-repeat center top;
	}
		#items .item .content {
			background: url(../images/list_bg_s_btm.gif) no-repeat center bottom;
		}
	
	#header h1 img {
		width: 80%;
	}
	
	#footer ul li.mail {
		width: 79px; /* 99px*0.8 */
	}
	#footer ul li.tweet {
		width: 72px; /* 90*0.8 */
	}
	#footer ul li.home {
		width: 97px; /* 121px*0.8 */
		padding-right: 0;
	}
	
	.grid h1,
	.grid h2,
	.grid h3,
	.grid h4,
	.grid h5,
	.grid h6,
	.grid p {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	
	.mainPhoto {
		float:none;
		width: 50%;
		padding-left: 30px;
	}
	
}



/*		Wide Mobile Layout: 480px.
		Inherits styles from: Default Layout, Mobile Layout. */

@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#items .item {
		background: url(../images/list_bg_top.gif) no-repeat center top;
	}
		#items .item .content {
			background: url(../images/list_bg_btm.gif) no-repeat center bottom;
		}
	
	#footer ul li.mail {
		width: auto;
	}
	#footer ul li.tweet {
		width: auto;
	}
	#footer ul li.home {
		width: auto;
		padding-right: 0;
	}
	
	.grid h1,
	.grid h2,
	.grid h3,
	.grid h4,
	.grid h5,
	.grid h6,
	.grid p {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.mainPhoto {
		float:none;
		width: 50%;
		padding-left: 30px;
	}
}


/*	Retina media query.
	Overrides styles for devices with a 
	device-pixel-ratio of 2+, such as iPhone 4.
-----------------------------------------------    */

@media 
	only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (min-device-pixel-ratio: 2) {
	
}