@charset "utf-8";
	body {
		font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック"	, sans-serif;	background: url("nanjakorya-haikei.jpg");
	}
	img {
		max-width:100%; height:auto; 
	}
	a {
		text-decoration: none;
	}
	.title {
		text-align: center;
	}
	.title p {
		color: #000080;
		line-height: 0.5;
		margin: 3px;
		padding-top: 5px;
}
	.title img {
		box-shadow:5px 5px 10px gray;
	}
	.container {
		margin: 0 auto;
		padding: 5px 5px;
		max-width: 1200px;
	}
	.lead { 
		background: #fff;
		max-width: 450px;
		margin: 0 auto;
		padding: 5px 5px;
		border-radius: 5%;
		box-shadow:5px 5px 10px gray;
	}
	.lead p {
		text-align: left;
	}
	.linkaquanet {
		font-weight: bold;
		color: #000080;
	}
	.linkaquanet a:hover {
		opacity: 0.5;
	}
	.yuntakucorner p {
		color: #000080;
	}
	.hyosiphoto {
		margin: 10px auto;
		max-width: 230px;
	}
	.newfile {
		margin: 0 auto 15px auto;
		max-width: 450px;
	}
	.new {
		text-align: center;
		font-size: 20px;
		color: red;
		line-height: 0.7;
		padding-botom: 0;
	}
	.newest {
		text-align: center;
		margin-top: 0;
		font-size: 1.4rem;
		font-weight: bold;
		color: #000080;
		animation-name: fadein;
        	animation-duration: 2s;
	}
	@keyframes fadein {
	from {
	    opacity: 0;
	    transform: translateY(20px);
	}
	to {
	    opacity: 1;
	    transform: translateY(0);
		}
	}
	.newest a {
		display: inline-block;
		line-height: 1;
		font-size: 1.4rem;
		font-weight: bold;
		padding: 10px 10px;
		background: #fff;	
		border-radius: 5%;
		box-shadow:5px 5px 10px gray;
	}
/* Flexbox デモ 2 : レスポンシブ対応 */
	@media (min-width: 768px) {
	.newest a:hover {
		opacity: 0.5;
}
}
	.backnumbertitle {
		margin: 35px auto 0 auto;
		text-align: center;
		padding-botom: 0;
}
	h3 {
		text-align: center;
		color: #000080;
		line-height: 0.8;
	}
	h3 a:hover {
		opacity: 0.5;
	}
	h3 .year {
		font-size: 14px;
		font-weight: normal;
		line-height: 0.8;
	}
	.breadcrumb {
		text-align: center;
		margin-top: 10px;
		font-size:14px;
		padding: 0 16px;
	}
	.breadcrumb ol {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}
	.breadcrumb li {
		display: inline;
		color: white;
	}
	.breadcrumb a:hover {
		opacity: 0.5;
	}
	.breadcrumb li::after {
		content: '>';
		padding: 0 0.5em;
		color: #000080;
		font-weight: bold;
	}
	.breadcrumb li:last-child::after {
		content: none;
	}
	.breadcrumb a {
		text-decoration: none;
		color: #000080;
	}

.grouplist {
	max-width: 1000px;
	margin: 0 auto;
}

.grouplist {
	  display: flex;
 	  flex-wrap: wrap;
	  padding: 15px 2px 5px 2px;
}
.grouplist .box {
    width: calc(50% - 10px);
    margin: 5px;
}
/* Flexbox デモ 2 : レスポンシブ対応 */
@media screen and (min-width: 768px) {
.grouplist .box {
  width: calc(25% - 10px);
  margin: 5px;  
  }
}


	.box {
	    	border-radius:10px;
		text-align: center;
	   	background-color: #001e43;
	    	margin:5px 5px;
	    	width: 220;
		box-shadow:5px 5px 10px silver;
	}
	.fishname 	{
		color: #ffffff;
		line-height: 1.2;
	}
	.photo {
		max-width: 180px;
		margin: 2px auto;
		padding: 2px 2px;
	}
	.photo img {
		box-shadow:2px 2px 5px black;
	}
	.photo a:hover img{
		box-shadow:0 0 0;
		opacity: 0.7;
	}


	
	.list {
		margin-top: 0;
		display: flex;
		flex-wrap: wrap;
		padding: 0 5px 5px 5px;
	}
	.backnumber {
		width: calc(50% - 10px);
		margin: 5px;
	}
	.backnumber a {
		text-align: center;
		border-radius: 5%;
		color: #f0f8ff;
		display: block;
		background: #001e43;
	}
	
/* Flexbox デモ 2 : レスポンシブ対応 */
	@media (min-width: 768px) {
	.backnumber {
		width: calc(25% - 10px);
		margin: 5px;
  }
	.backnumber a:hover {
		opacity: 0.5;
	}
}
	.morelist  {
		margin: 0 auto;
		width: 200px;
	}
	.morelist a {
		border: 3px solid silver;
		background-color: #000066; 
		border-radius: 10px;	
		box-shadow:3px 3px 10px silver;
		color: #ccffff;              /* メニュー項目の文字色(ライトブルー) */
		line-height: 20px;         /* メニュー項目のリンクの高さ(40px) */
		text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
		text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
		font-weight: bold;         /* 太字にする */
		display: block;            /* ★4:項目内全域をリンク可能にする */
		font-size: 18px;
	}
	.morelist a:hover {
		opacity: 0.6;
		box-shadow: 0 0 0 ;
	}

	/* ========== フッター ========== */
	footer {		
		padding-top: 0;
		padding-bottom: 5px;
	}
	.footer-nav {
		margin: 15px auto 0 auto;
		width: 140px;
	
	}
	.footer-nav a {
		border: 3px solid silver;
		background-color: #000066; 
		border-radius: 10px;	
		box-shadow:3px 3px 10px silver;
		color: #ccffff;              /* メニュー項目の文字色(ライトブルー) */
		line-height: 40px;         /* メニュー項目のリンクの高さ(40px) */
		text-align: center;        /* メインメニューの文字列の配置(中央寄せ) */
		text-decoration: none;     /* メニュー項目の装飾(下線を消す) */
		font-weight: bold;         /* 太字にする */
		display: block;            /* ★4:項目内全域をリンク可能にする */
		font-size: 18px;
	}
	.footer-nav a:hover {
		opacity: 0.6;
		box-shadow: 0 0 0 ;
	}	
	.footer-copyright {
		text-align: center;
		color: #000080;
		font-size: 0.9rem;
	}