@charset "UTF-8";

body {
	background:url(images/home_bg.png) top repeat-x;
}
@media screen and (min-width:740px) and (max-width: 999px) {
	body {background:#FFFFFF url(images/bg.png) top repeat-x;}
}
@media screen and (max-width: 739px) {
	body {background:#FFFFFF url(images/bg_sp.png) top repeat-x;}
}


/*contents
-----------------------------------------------------------------------------------------*/
#contents a:hover{
	text-decoration:underline;
}
#contents .right{
	float:right;
	width:700px;
}
#contents .left{
	float:left;
	width:250px;
}
#contents section{
	background:#FFFFFF;
	box-shadow: 0 3px 4px #BBBBBB;
	-webkit-box-shadow: 0 3px 4px #BBBBBB;
	-moz-box-shadow: 0 3px 4px #BBBBBB;
	margin-top:20px;
}
#contents section{border:1px solid #CCCCCC\9;}
#contents section h2{
	background:#F2F2F2;
	padding:7px 0;
	border-bottom:2px solid #3387B3;
	font-size:18px;
	color:#0069A0;
	font-weight:bold;
	line-height:46px;
	letter-spacing:1px;
}
#contents section h2 img{
	box-shadow: 2px 2px 0 #CCC;
	-webkit-box-shadow: 2px 2px 0 #CCC;
	-moz-box-shadow: 2px 2px 0 #CCC;
	border-radius: 23px;
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	margin:0 10px;
}
#contents section .more{
	text-align:right;
	margin:-46px 15px 16px 0;
}
@media screen and (max-width: 999px) {
	#contents .right{float:none;width:auto;}
	#contents .left{float:none;width:auto;}
}
@media screen and (max-width: 739px) {
	#contents section .more{margin:-38px 5px 8px 0;}
	#contents section{margin-top:0px;}
	#contents section h2{padding:18px 0px 12px 10px;line-height:20px;background:#F2F2F2 url(images/title_sp.png) top repeat-x;}
	#contents section h2 img{width:30px;margin:-7px 5px -3px -3px;}
}

/*mainimg
-----------------------------------------------------------------------------------------*/
@media screen and (min-width:740px) and (max-width: 999px) {
	#mainimg{margin:0 -20px;}
}

/*重要なお知らせ
-----------------------------------------------------------------------------------------*/
#notice{
	margin-top:20px;
	border:2px solid #ed1c53;
	padding:15px 20px;
}
#notice .date{
	font-size:12px;
	font-weight:bold;
	margin-bottom:3px;
}
#notice .item{
	font-size:16px;
	line-height:1.5;
}
@media screen and (max-width: 739px) {
	#notice{margin:10px;padding:10px 15px;}
}

/*お知らせ
-----------------------------------------------------------------------------------------*/
#topics dl{
	padding:15px 25px;
}
#topics dt{
	width:80px;
	font-size:12px;
	line-height:22px;
	font-weight:bold;
	text-align:center;
	color:#FFFFFF;
	background:#666666;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#topics dt.topics{
	background:#2BAED9;
}
#topics dt.event{
	background:#88B319;
}
#topics dt.koubo{
	background:#F14F70;
}
#topics dd.date{
	font-size:12px;
	line-height:22px;
	font-weight:bold;
	margin:-22px 0 0 92px;
}
#topics dd.item{
	margin:-22px 0 9px 0;
	padding:0 0 10px 210px;
	color:#555555;
	border-bottom:1px solid #D5D5D5;
}
#topics dd.item:last-child{
	border:none;
	margin-bottom:0;
	padding-bottom:5px;
}
@media screen and (max-width: 739px) {
	#topics dl{padding:10px;}
	#topics dd.item{margin:3px 0 9px 0;padding:0 0 10px 0px;}
}

/*-------------------------icon*/
#topics a[href$='.pdf']{
	padding-left:20px;
	padding-top:1px;
	padding-bottom:1px;
	margin-left:3px;
}
#topics a[href$='.pdf']{
	background:url(images/icon_pdf.png) left no-repeat;
}

#topics a[target]:after{
	content:url(images/icon_blank2.png);
	margin:0 3px 0 5px;
}
/*アイコンをつけたくない場合*/
#topics a.noicon{
	padding:0;
	margin:0;
	background:none;
}

/*刊行物のご案内
-----------------------------------------------------------------------------------------*/
#publish{
	padding-bottom:20px;
}
/*-------------------------carousel*/
#carousel {
	margin: 0 auto;
	margin-top:40px;
	width: 590px;
	height: 150px;
	text-align: left;
	position: relative;
}
#carousel_prev,
#carousel_next {
	top:55px;
	width: 30px;
	height: 30px;
	cursor: pointer;
	position: absolute;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
}
#carousel_prev:hover,
#carousel_next:hover {
	opacity: 0.75;
	filter: alpha(opacity=75);
	-moz-opacity: 0.75;
}
#carousel_prev {
	left: -30px;
	background: url(images/prev.png) no-repeat top left;
}
#carousel_next {
	right: -30px;
	background: url(images/next.png) no-repeat top left;
}
#carousel ul li {
	float: left;
	display: inline;
}
#carousel ul li img{
	width:100px;
	max-width: 100px;
	border:3px solid #FFFFFF;
	margin:2px 24px 8px 24px;
	box-shadow: 0 2px 4px #999999;
	-webkit-box-shadow: 0 2px 4px #999999;
	-moz-box-shadow: 0 2px 4px #999999;
}
#carousel ul li img{border:1px solid #CCCCCC\9;}
#carousel ul li a img:hover{
	opacity: 1.00;
	filter: alpha(opacity=100);
	-moz-opacity: 1.00;
	margin:5px 24px;
	box-shadow: 0 1px 2px #999999;
	-webkit-box-shadow: 0 1px 2px #999999;
	-moz-box-shadow: 0 1px 2px #999999;
}
@media screen and (min-width:540px) and (max-width: 739px) {
	#carousel {width: 450px;}
}
@media screen and (min-width:380px) and (max-width: 539px) {
	#carousel {width: 300px;}
}
@media screen and (max-width: 379px) {
	#carousel{margin-top:30px;}
	#carousel ul li img{width:80px;	margin:2px 15px 5px 15px;}
	#carousel ul li a img:hover{margin:5px 15px 2px 15px;}
	#carousel {width: 220px;height: 120px;}
	#carousel_prev,#carousel_next {top:43px;}
}

/*普及啓発・活動支援
-----------------------------------------------------------------------------------------*/
#promotion div{
	padding:10px 30px;
}
#promotion div a{
	display:block;
	padding:20px 10px 20px 0;
	border-bottom:1px solid #D5D5D5;
	min-height:140px;
}
#promotion div a:hover{
	text-decoration:none;
	background:#E6E6E6;
}
#promotion div a:last-child{
	border:none;
}
#promotion div a h3{
	margin-bottom:-100px;
}
#promotion div a p{
	margin-left:170px;
}
#promotion div a p.cat{
	float:left;
	margin-right:10px;
}
#promotion div a p.title{
	font-size:16px;
	line-height:22px;
	font-weight:bold;
	color:#000000;
}
#promotion div a p.copy{
	margin-top:5px;
	color:#555555;
	line-height:24px;
}
#promotion div a p.kotira{
	text-align:right;
	margin-top:5px;
	padding-right:18px;
	background:url(images/ya.png) right no-repeat;
}
@media screen and (max-width: 739px) {
	#promotion div{padding:0px;}
	#promotion div a{display:block;padding:10px 0 10px 10px;min-height:70px;}
	#promotion div a h3{margin-bottom:-50px;}
	#promotion div a h3 img{width:75px;}
	#promotion div a p{margin-left:80px;}
	#promotion div a p.cat{float:none;margin-bottom:5px;}
	#promotion div a p.title{font-size:14px;line-height:20px;}
	#promotion div a p.copy,#promotion div a p.kotira{display:none}
}


/*調査研究実績
-----------------------------------------------------------------------------------------*/
#research{
}
#research div{
	padding:30px;
}
#research p.img{
	float:left;
}
#research p.copy{
	color:#555555;
	line-height:24px;
	margin-left:170px;
}
#research ul li{
	margin-top:5px;
	padding-left:15px;
	background:url(images/ya.png) left no-repeat;
	margin-left:170px;
}
@media screen and (max-width: 739px) {
	#research div{padding:15px;}
	#research p.img{display:none;}
	#research p.copy{margin:0;}
	#research ul li{margin:5px 0;}
}

/*会員について
-----------------------------------------------------------------------------------------*/
#contents section#kaiin{
	margin-top:400px;
}
#kaiin ul{
	padding:15px 20px;
}
#kaiin li{
	border-top:1px solid #D5D5D5;
}
#kaiin li:first-child{
	border-top:none;
}
#kaiin li a{
	display:block;
	padding:5px 0;
	padding-left:20px;
	background:url(images/ya.png) 5px 8px no-repeat;
	color:#000000;
}
#kaiin li a:hover{
	background-color:#F2F2F2;
	text-decoration:none;
}
@media screen and (min-width:740px) and (max-width: 999px) {
	#contents section#kaiin{margin-top:20px;}
	#kaiin li{border:none;}
	#kaiin li a{padding-right:30px;float:left;}
}
@media screen and (max-width: 739px) {
	#contents section#kaiin{margin-top:0px;}
	#kaiin ul{padding:10px;}
}

/*瀬戸内海情報
-----------------------------------------------------------------------------------------*/
#setonaikai ul.joho{
	padding:10px 20px;
}
#setonaikai ul.joho li{
	border-bottom:1px solid #D5D5D5;
	padding:10px 0;
}
#setonaikai ul.joho li img{
	float:left;
	margin-right:10px;
}
#setonaikai ul.joho li span{
	display:block;
	height:60px;
	display:table-cell;
	vertical-align:middle;
}
#setonaikai ul.joho li a{
	display:block;
}
#setonaikai ul.joho li a:hover{
	background-color:#F2F2F2;
	text-decoration:none;
}
#setonaikai p.banner{
	border-bottom:1px solid #D5D5D5;
	padding:10px 0;
	margin:-10px 20px 10px 20px;
}
#setonaikai ul.blank{
	padding:0px 20px 15px 20px;
}
#setonaikai ul.blank li{
	padding:2px 0;
	padding-left:20px;
	background:url(images/icon_blank.png) left no-repeat;
}
#setonaikai ul.blank li a{
	color:#000000;
}

@media screen and (min-width:740px) and (max-width: 999px) {
	#setonaikai ul.joho li{width:25%;float:left;}
	#setonaikai ul.joho li img{margin-right:5px;}
	#setonaikai ul.joho li a{margin-right:5px;}
	#setonaikai ul.joho li span br{display:none;}
	#setonaikai p.banner{float:right;border-bottom:none;}
}
@media screen and (max-width: 739px) {
	#setonaikai ul.joho{padding:7px 10px 10px 10px;}
	#setonaikai ul.joho li{padding:3px 0;}
	#setonaikai ul.joho li img{margin-right:5px;width:40px;}
	#setonaikai ul.joho li span{height:40px;}
	#setonaikai ul.joho li span br{display:none;}
	#setonaikai p.banner{padding:5px 0;margin:-10px 10px 10px 10px;}
	#setonaikai ul.blank{padding:0px 20px 15px 15px;}
}

/*インフォメーション
-----------------------------------------------------------------------------------------*/
#info{
	height:360px;
	width:250px;
	position:absolute;
	top:570px;
	border:1px solid #B2D2E2;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	padding:17px 19px 0px 19px;
}
#info h2{
	font-size:18px;
	line-height:24px;
	font-weight:bold;
	color:#0069A0;
}
#info h2 span{
	display:block;
	font-weight:bold;
	font-size:14px;
	line-height:20px;
}
#info figure{
	display:block;
	margin:8px 0;
}
#info p.adress{
	font-size:12px;
	line-height:18px;
	color:#555555;
}
#info p.adress br{
	display:none;
}
#info p.telfax{
	margin-top:3px;
	font-size:16px;
	line-height:24px;
	font-weight:bold;
}
#info p.contact{
	margin-top:5px;
}
@media screen and (max-width: 999px) {
	#info{position:static;top:0;margin-top:20px;}
	#info h2 span{display:inline;margin-right:3px;vertical-align:top;line-height:24px;}
}
@media screen and (min-width:740px) and (max-width: 999px) {
	#info{height:auto;width:auto;padding-bottom:17px;}
	#info h2{float:left;}
	#info br{display:none;}
	#info figure{float:right;margin:0;}
	#info p.adress{margin-top:30px;}
	#info p.telfax{margin:5px 0 13px;}
}
@media screen and (max-width: 739px) {
	#info{margin:0px;height:auto;width:auto;position:static;top:0;border:none;padding:20px 0;text-align:center;}
	#info h2{font-size:16px;}
	#info h2 span{font-size:12px;}
	#info figure,#info p.telfax br{display:none;}
	#info p.adress br{display:inline;}
	#info p.telfax{font-size:12px;line-height:20px;}
}

/*バナー
-----------------------------------------------------------------------------------------*/
#banner{
	padding:20px 0;
	text-align:center;
}
@media screen and (min-width:740px) and (max-width: 999px) {
	#banner {position:relative;overflow:hidden;}
	#banner ul {position:relative;left:50%;float:left;}
	#banner li {position:relative;left:-50%;float:left;padding:0 10px;}
}
@media screen and (max-width: 739px) {
	#banner{border-top:1px solid #B2D2E2;}
}