@charset "utf-8";

/* topicsContents
---------------------------------------- */
/* menuList */
#topicsContents #menuList a {
	display:block;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	line-height:1.5em;
	background-color:#fff;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
}
#topicsContents #menuList .cat0 a {color:#4cae45; border:#4cae45 2px solid;}
#topicsContents #menuList .cat2 a {color:#e60012; border:#e60012 2px solid;}
#topicsContents #menuList .cat3 a {color:#14c081; border:#14c081 2px solid;}
#topicsContents #menuList .cat4 a {color:#00a0e9; border:#00a0e9 2px solid;}
#topicsContents #menuList .cat5 a {color:#d55f68; border:#d55f68 2px solid;}
#topicsContents #menuList .cat6 a {color:#ff9c00; border:#ff9c00 2px solid;}
#topicsContents #menuList .cat7 a {color:#5f52a0; border:#5f52a0 2px solid;}
#topicsContents #menuList .cat8 a {color:#dc279a; border:#dc279a 2px solid;}
#topicsContents #menuList a:hover,
#topicsContents #menuList a.current {
	color:#fff;
}
#topicsContents #menuList .cat0 a:hover, #topicsContents #menuList .cat0 a.current {background-color:#4cae45;}
#topicsContents #menuList .cat2 a:hover, #topicsContents #menuList .cat2 a.current {background-color:#e60012;}
#topicsContents #menuList .cat3 a:hover, #topicsContents #menuList .cat3 a.current {background-color:#14c081;}
#topicsContents #menuList .cat4 a:hover, #topicsContents #menuList .cat4 a.current {background-color:#00a0e9;}
#topicsContents #menuList .cat5 a:hover, #topicsContents #menuList .cat5 a.current {background-color:#d55f68;}
#topicsContents #menuList .cat6 a:hover, #topicsContents #menuList .cat6 a.current {background-color:#ff9c00;}
#topicsContents #menuList .cat7 a:hover, #topicsContents #menuList .cat7 a.current {background-color:#5f52a0;}
#topicsContents #menuList .cat8 a:hover, #topicsContents #menuList .cat8 a.current {background-color:#dc279a;}

/* newsList */
#newsList {
	background-color:#fff;
}
#newsList li:nth-child(odd) {
	background-color:#fef4e9;
}
#newsList li a {
	display:block;
	line-height:1.8em;
	text-decoration:none;
	background:url(../../images/mainframe/arrow_brown02.png) no-repeat 95% center / 16px 16px;
}
#newsList li span,
#detail header p span {
	display:inline-block;
	width:5em;
	text-align:center;
	color:#fff;
	margin-right:1em;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	vertical-align:middle;
}
#newsList li time,
#detail header p time {
	color:#954f19;
}
span.cat2 {background-color:#e60012;}
span.cat3 {background-color:#14c081;}
span.cat4 {background-color:#00a0e9;}
span.cat5 {background-color:#d55f68;}
span.cat6 {background-color:#ff9c00;}
span.cat7 {background-color:#5f52a0;}
span.cat8 {background-color:#dc279a;}
#comTable {
	background-color:#fff;
	border:#e4cdab 1px solid;
}
#topicsContents #comCaption {
	color:#ff0;
	font-size:1.8em;
	line-height:1.4em;
	padding-left:36px;
	background:url(../../images/index/icon_note.png) no-repeat 10px center / 16px 22px #046fce;
	letter-spacing:-3px;
	box-sizing:border-box;
	font-family: "RocknRoll One", sans-serif;
	font-weight: 400;
	letter-spacing: 0.01em;
}
body.topics #comTable td a {
	width:100%;
	display:inline-block;
	text-decoration:none;
	padding:1em;
	background:url(../../images/mainframe/arrow_brown02.png) no-repeat 95% center / 16px 16px;
	box-sizing:border-box;
}

/* pager
---------------------------------------- */
.pager .number {
	display:none;
}
.pager ul {
	display:table;
	margin:0 auto;
	border-collapse:separate;
	border-spacing:0.5em 0;
}
.pager ul li {
	display:table-cell;
	width:2em;
	color:#4cae45;
	line-height:2.2em;
	text-align:center;
	border:#4cae45 1px solid;
	background-color:#fff;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	font-family:"Roboto", sans-serif;
}
.pager ul li a {
	display:block;
	color:#4cae45;
	text-decoration:none;
}
.pager ul li.currentpage {
	color:#fff;
	background-color:#4cae45;
}

/* detail
---------------------------------------- */
#detail .link,
#detail .pdfList li {
	position:relative;
	padding-left:1.5em;
}
#detail .pdfList li img {
	display:none;
}
#detail .link:before,
#detail .pdfList li:before {
	display:block;
	position:absolute;
	top:0;
	left:0;
	font-family:"icomoon";
}
#detail .link:before {
	content:"\e6c3";
}
#detail .pdfList li:before {
	content:"\e7b2";
}
#detail .photoBox li {
	box-sizing:border-box;
	margin-bottom:1em;
}
#detail .photoBox a {
	display:block;
	width:100%;
	height:75%;
}
#detail .photoBox a:after {
	content:"";
	display:block;
	width:100%;
	padding-top:75%;
}
#youtube {
	position:relative;
	padding-bottom:56.25%;
	padding-top:1.5em;
	height:0;
	overflow:hidden;
	margin-top:1em;
}
#youtube iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*===============================================
●画面の横幅が729px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 729px){
	
	/* topicsContents
	---------------------------------------- */
	/* menuList */
	#topicsContents #menuList {
		margin-bottom:1em;
	}
	#topicsContents #menuList li {
		width:48.5%;
		float:left;
		margin:0 0 3% 0;
		box-sizing:border-box;
	}
	#topicsContents #menuList li:nth-child(odd) {
		margin-right:3%;
	}
	#topicsContents #menuList li a {
		padding:0.5em 0;
	}
	
	/* newsList */
	#topicsContents #newsList {
		margin-bottom:1em;
	}
	#topicsContents #newsList li a {
		line-height:1.3em;
		padding:0.7em 2em 0.7em 0.7em;
	}
	#topicsContents #newsList li span,
	#detail header p span {
		font-size:0.85em;
		margin-bottom:0.5em;
		line-height:1.6em;
		vertical-align:middle;
	}
	#topicsContents .text {
		margin-bottom:1.5em;
	}
	body.topics #comTable td {
		display:block;
		width:100%;
		box-sizing:border-box;
		border-bottom:#e4cdab 1px solid;
	}
	body.topics #comTable {
		border-bottom:none!important;
	}
	
	/* volunteerContents
	---------------------------------------- */
	#volunteerContents {
		padding-top:3em;
	}
	#volunteerContents .text {
		margin-bottom:1em;
	}
	
	/* detail
	---------------------------------------- */
	#detail {
		margin-bottom:2em;
	}
	#detail header p {
		margin-bottom:0.5em;
	}
	#detail header h3 {
		margin-bottom:1em;
	}
	#detail .textBox {
		margin-bottom:1.5em;
	}
	#detail .textBox #desc {
		margin-bottom:0.8em;
	}
}

/*===============================================
●画面の横幅が730px以上(PCのみ)
===============================================*/
@media screen and (min-width: 730px){
	
	/* topicsContents
	---------------------------------------- */
	/* menuList */
	#topicsContents #menuList {
		margin-bottom:2em;
	}
	#topicsContents #menuList li {
		width:18%;
		float:left;
		margin:0 2.5% 2.5% 0;
		box-sizing:border-box;
	}
	#topicsContents #menuList li:nth-child(5n) {
		margin-right:0;
	}
	#topicsContents #menuList li a {
		font-size:1.28em;
		padding:0.3em 0;
	}
	
	/* newsList */
	#topicsContents #newsList {
		margin-bottom:2em;
	}
	#topicsContents #newsList li a {
		padding:0.8em;
		font-size:1.15em;
	}
	#topicsContents #newsList span,
	#detail header p span {
		font-size:0.85em;
	}
	#topicsContents #newsList time,
	#detail header p time {
		display:inline-block;
		padding-right:1em;
	}
	#topicsContents .text {
		margin-bottom:5.5em;
	}
	#topicsContents #comCaption {
		font-size:2em;
		vertical-align:middle;
		padding-bottom:0.2em;
		margin-top:1.5em;
	}
	body.topics #comTable td {
		box-sizing:border-box;
		border-right:#e4cdab 1px solid;
		border-bottom:#e4cdab 1px solid;
	}
	body.topics #comTable tr td:nth-child(4n) {
		border-right:none;
	}
	
	/* volunteerContents
	---------------------------------------- */
	#volunteerContents {
		padding-top:5.5em;
	}
	#volunteerContents .text {
		margin-bottom:2em;
	}
	
	/* detail
	---------------------------------------- */
	#detail {
		margin-bottom:3.5em;
	}
	#detail header p {
		margin-bottom:0.8em;
	}
	#detail header h3 {
		margin-bottom:1.5em;
	}
	#detail .textBox {
		width:70%;
		float:right;
		font-size:1.15em;
		line-height:1.7em;
	}
	#detail .width100 {
		width:100%!important;
		float:none!important;
	}
	#detail #desc {
		margin-bottom:2em;
	}
	#detail .photoBox {
		width:25%;
		float:left;
	}
	#detail .photoBox li {
		box-sizing:border-box;
		margin-bottom:1em;
	}
	#detail .photoBox a {
		display:block;
		width:100%;
		height:75%;
	}
	#detail .photoBox a:after {
		content:"";
		display:block;
		width:100%;
		padding-top:75%;
	}
}

/*===============================================
●画面の横幅が860px以上(PCのみ)
===============================================*/
@media screen and (min-width: 860px){
	
	/* 全般
	---------------------------------------- */
}