@charset "utf-8";
	body {
		font-family: Verdana, Roboto, "Droid Sans", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック"	, sans-serif;	
	}
	img {
		max-width:100%; height:auto; 
	}
	.breadcrumb {
		text-align: center;
		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 a {
		text-decoration: none;
		color: silver;
	}
	.title { 
		margin: 0 auto;
		max-width: 490px;		
	}
	.title p {
		background: black;
		border-radius: 10px;
		border: 5px double silver;
		padding: 0 5px;
		box-shadow:5px 5px 15px silver;
	}	
	.main { 
		max-width: 880px;
		margin: 0 auto 0 auto;
		padding: 0 16px 0 16px;
	}
	.kensaku {
		margin: 0 auto;
		max-width: 500px;
		color: #fff;
		text-align: center;		
	}
	.kome {
		color: silver;
	}
	.gyosyulist {
		justify-content: center;
		flex-wrap:wrap;
		display: flex;		
	 	margin: 2px 2px;
	}	
	.box {
	    	border-radius:10px;
		text-align: center;
	   	background-color: gray;
	    	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;
	}
	/* ========== フッター ========== */
	footer {		
		padding-top: 5px;
		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: silver;
		font-size: 0.9rem;
	}

.intro {
	padding: 15px 5px 5px 5px;
}
.introhonbun {
	max-width:450px;
	margin: 0 auto;
	padding: 5px;
	border-radius: 10px;
	border: 2px solid #fff;
	background: silver;
}
.introhonbun p {
	font-size: 14px;
	line-height: 1.4;
}
.date {
	text-align: right;
}

.count {
	line-height: 1.0;
	text-align: center;
	color: #fff;
	font-size: 20px;
	margin-botom: 2px;
}
.count p {
        animation-name: fadein;
        animation-duration: 2s;
}
@keyframes fadein {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.newsbox {
	margin-top: 0;
	padding: 15px 5px 5px 5px;
}
.news {
	margin: 0 auto;
	background: #fff;
	max-width: 420px;
	border-radius: 5%;
	padding: 2px 10px;
}
.news ul {
	list-style-type: none;
	line-height: 1.0;
	padding-left: 4em;
	text-indent: -4em;
}
.news .newest {
	color: #f00;
}	
.grouplist {
	max-width: 1000px;
	margin: 0 auto;
}

.grouplist {
	  display: flex;
 	  flex-wrap: wrap;
	  padding: 2px 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;  
  }
}