@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=M+PLUS+1p:400,700|Sawarabi+Mincho&display=swap&subset=japanese');
/* CSS Document */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: 'M PLUS 1p',"游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Helvetica Neue, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

#header {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	background: #333;
	color: #fff;
	font-size: 16px;
	position: -webkit-sticky;
	position:sticky;
	top:0; /* 縦スクロールに追従 */
	z-index: 100;
	width: 100%;
}
#header a{
	display: inline-block;
	color: #fff;
	padding: 4px 8px;
}
#head_atarashi{
	font-family: 'Sawarabi Mincho', sans-serif;
}
#logoJP span:before{
	content: '';
 display: inline-block;
	background:url("../images/logo-w.png");
	background-size:20px 20px;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	margin: 0 8px;
}
#container {
	width: 760px;
	margin: 0 auto;
}
.year_index #container {
	width: 1200px;
	margin: 0 auto;
}
@media screen and (max-width: 1200px) {
.year_index #container {
	width: 760px;
	margin: 0 auto;
}
}

/* mobile use */
@media screen and (max-width: 768px) {
	.year_index #container,#container {
	width: 100%;
}
}

/*--------------*/
/*トップページ用*/
/*--------------*/

/*メインタイトル*/
#maintitle{
	font-family: 'Sawarabi Mincho', sans-serif;
	width: 240px;
	height: 240px;
	margin: 16px auto;
	background: #333;
	color: #fff;
	font-size: 86px;
	line-height: 1;
}
#maintitle span{
	display: inline-flex;
	justify-content: center;/*flexbox左右中央*/
	width: 100%;
}
#maintitle span#atarashi{
	font-size: 34px;
	align-items:flex-end;
}
/*トップページメニュー*/
/*カード型リスト*/
ul.top-menu{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;/*flex中央均等配置*/
}
ul.top-menu li{
	list-style: none;
	flex-basis: 240px;
	margin:10px;
}
ul.top-menu .year{
	font-weight: bold;
	font-size: 1.5em;
	padding-left: 0.5em;
}
ul.top-menu a{
	display: inline-flex;
	width: 100%;
	justify-content: center;
	align-items:center;
	padding: 16px;
	border: #666 1px solid;
	text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.66);
	box-shadow: 1px 1px 3px 0px #ccc;
	border-radius: 100px;
	background-image: linear-gradient(#fff 0%, #ccc 100%);
}
ul.top-menu a:hover{
	background:#D9E4EC;
}

/*# スマホでは一列表示 */
@media (max-width: 640px) {
li.institution{
	flex-basis: 100%;
	margin: 0 auto 12px;
}
}
/*パン屑*/
#topiPath{
	background: #aaa;
	font-size: 12px;
	padding: 4px 8px;
	width: 100%;
}
#topiPath a{
	text-decoration: underline;
}
#topiPath a:hover{
color: #479;
}
#topiPath .institution-name{
	margin-left: 2em;
}

/*コンテンツ*/
#contents {
	color: #333;
	padding: 8px;
	width: 100%;
}

/*見出し*/
h3, h4 {
	margin-top: 1em;
	margin-bottom: 0.5em;
}
h1 {
	padding: 8px 0;
	font-size: 1.8em;
}
/*# スマホ */
@media (max-width: 640px) {
h1{
	font-size: 1.5em;
}
}
h1#institution {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items:flex-end;
}
h1 .institution-name{
	display: inline-flex;
	max-width: calc(100% - 46px);
}
h1 .institution-id {
	display: inline-flex;
	justify-content: center;/*flexbox左右中央*/
	align-items: center;/*flexbox縦中央*/
	border-radius: 50%;
	flex-flow: column;/*flexbox縦並び*/
	vertical-align: bottom;
	width: 46px;
	height: 46px;
	border: #888 3px solid;
	background: #888;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}

h2#area {
	display: flex;
	justify-content: space-between;
	background: #a66;
	color: #fff;
	padding: 4px 10px;
	font-size: 1.2em;
	font-weight: normal;
}

/*受賞者*/
#award-winner ul{
	margin-top: 0;
}
/* PC use */
/*
@media screen and (min-width: 640px) {
#award-winner{
	display: flex;
}
#award-winner h4:after{
	content: "：";
}
#award-winner ul{
	margin-top: 1em;
	margin-left: 0;
}
#award-winner li{
	list-style: none;
}
}
*/
/*figure 図表*/
.figure-box{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.figure-box figure{
	width: 45%;
	margin-bottom: 20px;
	text-align: center;
}
	.figure-box figure img{
		width: 100%;
		height: auto;
	}
figcaption{
	width: 100%;
	text-align: right;
	font-size: 0.8em;
}

/*縦画像*/
	.figure-box figure img.tp{
		width: auto;
		height: 320px;
		margin: auto;
	}
figcaption.tp{
	text-align: center;
}

/* mobile use */
@media screen and (max-width: 640px) {
.figure-box figure{
	width: 86%;
	margin: 0 auto 16px;
}
	.figure-box figure img.tp{
		max-width: auto;
		height: 86vw;
	}
	figcaption.tp{
	text-align: right;
}
}

h3 {
	position: relative;
	padding-left: 1.2em;
}
h3:before {
	content: "■";
	position: absolute;
	font-size: 1em;
	left: 0;
	top: 0;
	color: #a66;
}
#contents p {
	margin-bottom: 1em;
	margin-left: 1em;
	font-size: 1em;
}
a {
	text-decoration: none;
	color: #479;
}
ul, ol {
	margin: 1em;
	margin-left: 3em;
	font-size: 1em;
}
/* mobile use */
@media screen and (max-width: 640px) {
ul, ol {
	margin: 0.5em;
	margin-left: 2em;
}
}


/*ページャー*/
.pager{
	display:flex;
	justify-content: space-between;
	margin: 20px 0;
}
.pager a{
	display: inline-block;
	width: 33%;
	padding: 8px;
	text-align: center;
	background: #eee;
	transition: all  0.3s ease;
}
.pager a:hover{
	background: #479;
	color: #fff;
}
.pager a.prev{
	border-radius:30px 0 0 30px;
}
.pager a.next{
	border-radius:0 30px 30px 0;
}

/*フッタ*/
#footer {
	background: #333;
	font-size: 10px;
	color: #fff;
	text-align: center;
	padding: 1em;
}

/*------------*/
/*indexページ用*/
/*------------*/

/*カード型リスト*/
ul.area-list{
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}
li.institution{
	list-style: none;
	flex-basis: 384px;
	min-height: 108px;
	margin: 0 15px 10px 0;
}
li.institution:nth-child(3n) {
	margin-right: 0;
}
@media (max-width: 1200px) {
	ul.area-list{
	justify-content: space-between;
}
li.institution{
	flex-basis: 49%;
		margin: 0 0 10px 0;
}
}
/*# スマホでは一列表示 */
@media (max-width: 640px) {
li.institution{
	flex-basis: 100%;
	margin: 0 auto 12px;
}
}
a.institution-link{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
	color: #333;
	padding: 4px;
	border: #ccc 1px solid;
	box-shadow: 1px 1px 3px 0px #ccc;
	border-radius: 4px;
}
a.institution-link:hover{
	background:#D9E4EC;
}

/*カード左側テキスト*/
.institution-info{
	flex-basis: calc(100% - 104px);
}
.institution-info h4{
	margin: 0;
	padding: 0;
	position: relative;
	background: #a66;
	font-size: 12px;
	color: #fff;
	font-weight: 100;
}
.institution-info h4 .institution-id {
	display: inline-flex;
	position: absolute;
	top:-8px;
	left: -8px;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column;
	vertical-align: bottom;
	width: 30px;
	height: 30px;
	border: #888 3px solid;
	background: #888;
	font-size: 12px;
}
.institution-info h4 .area-name{
	padding-left: 30px;
}
.institution-info h2{
	font-weight: 100;
	font-size: 1em;
	margin: 8px 0 0 8px;
}

/*カードサムネイル*/
li.institution .thumbnail{
	flex-basis: 100px;
	height: 100px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*ページ内リンク*/
ul.pagecontents5 {
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around ;
	margin-bottom: 1.5em;
}

.pagecontents5 li {
	list-style: none;
	flex-basis: 19%;
	margin-bottom:8px;
	text-align: center;
}

.pagecontents5 li a {
	width: 100%;
	height: 100%;
	display:inline-block;
	padding: 4px 0;
	background: #eee;
	border: none;
	border-radius: 4px;
	transition: all  0.3s ease;
}

.pagecontents5 li a:hover {
	background: #479;
	color: #fff;
}


/*スマホでは2列*/
@media screen and (max-width: 640px) {
.pagecontents5 li{
	flex-basis:48%;
}

}



/* go to page home */

p.totop {
	margin-left: 0px;
	text-align: right;
	border-bottom: 1px dotted #69c;
}
.totop a{
	display: inline-block;
}
.totop a:hover{
	opacity: 0.7;
}
.totop span:after{
	content:'▲';
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
	flex-flow: column;
	vertical-align: bottom;
	width: 24px;
	height: 24px;
	font-size: 12px;
	border-radius: 4px;
	background: #479;
	color: #fff;
	margin-left: 8px;
}