@charset "utf-8";

/* common style
----------------------------------------------------------- */



/* topics_list style
----------------------------------------------------------- */
.topics.list ul.topics_list{
	display:block!important;
}


/* topics_list narrow_down style
----------------------------------------------------------- */
ul.tab{}
ul.tab li{
	width:calc(50% - 2.5px);
	margin-right:5px;
	margin-bottom:15px;
}
ul.tab li:nth-child(2n){
	margin-right:0;
}
ul.tab li a{
	display:block;
	padding:10px;
	text-align:center;
	border:1px #00b996 solid;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	background-color:#fff;
}
div#topics ul.tab li:last-child{
	width:calc(100% - 10px);
	height:calc(1em + 20px);
	margin-right:0;
	border:5px #e1e1e1 solid;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	overflow:hidden;
}
ul.tab li a:hover{
	color:#fff;
	border:1px orange solid;
	background-color:orange;
}
div#topics ul.tab li p,
div#topics ul.tab li select{
	display:inline-block;
	vertical-align:top;
}
div#topics ul.tab li div p{
	padding:10px;
	text-align:center;
	line-height:1;
	background-color:#e1e1e1;
}
div#topics ul.tab li div select{
	width:calc(100% - 3em - 40px);
	margin:0;
	padding:6px 9px 12px;
	border:none;
	background-color:#fff;
}

@media screen and (min-width:480px){
ul.tab li a{
	padding:15px;
	}
}
@media screen and (min-width:600px){
	ul.tab li,
	ul.tab li:nth-child(2n){
		width:calc(20% - 8px);
		margin-right:10px;
	}
	ul.tab li:nth-child(5n){
		margin-right:0;
	}
}



/* topics_detail style
----------------------------------------------------------- */

div#topics_detail span.pic{
	width:100%;
	display:block;
	margin-bottom:30px;
	padding-top:70%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:contain;
}
div#topics_detail span.date{
	display:inline-block;
	margin-bottom:20px;
}
div#topics_detail h2.ttl{
	margin:0 0 15px;
	padding:0;
	color:#464646;
	font-size:20px;
	font-weight:bold;
	line-height:1.6;
	text-align:left;
	background-color:transparent;
}
div#topics_detail a.youth{
	display:block;
	font-size:12px;
}
@media screen and (min-width:370px){
	div#topics_detail a.youth{
		font-size:14px;
	}
}
@media screen and (min-width:640px){
	div#topics_detail a.youth{
		font-size:16px;
	}
}


/* title
----------------------------------------------------------- */
div#contents div.text h1{
	margin-bottom: 15px;
	padding-top: 15px;
	padding-bottom: 15px;
	color:#5f7e00;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	border-top: 5px #e1e1e1 solid;
	border-bottom: 5px #e1e1e1 solid;
}
div#contents div.text h2{
	margin-bottom: 15px;
	padding: 10px 0 10px 10px;
	color:#5f7e00;
	font-size: 18px;
	font-weight: bold;
	border-left: 5px #ccc solid;
	border-bottom: 1px #ccc solid;
}
div#contents div.text h3{
	display:inline-block;
	margin: 15px 0;
	padding-left: 0;
	color:#5f7e00;
	font-size: 18px;
	font-weight: bold;
	border-left: none;
	border-bottom: 1px #ccc solid;
}
div#contents div.text h4{
	margin:0 0 10px;
	padding:0;
	color:#464646;
	font-size:16px;
	font-weight: normal;
	border-left: none;
}
div#contents div.text h4:before{
	content:"■";
	color:#5f7e00;
}

/* text
----------------------------------------------------------- */
div#topics_detail div.text{
	margin-top:15px;
	margin-bottom:30px;
	padding-top:15px;
	border-top:#e1e1e1 5px solid;
}


/* pager
----------------------------------------------------------- */
ul.pager li.btn{
	width:calc(50% - 7.5px);
	margin-right:15px;
}
ul.pager li.btn.next,
ul.pager li.btn.home{
	margin-right:0;
}
ul.pager li.btn:nth-child(3){
	margin-right:15px;
}
@media screen and (min-width:640px){
	ul.pager li.btn{
		width:calc(25% - 11.25px);
	}
	ul.pager li.btn.next{
		margin-right:15px;
	}
}
@media screen and (min-width:860px){
	ul.pager li.btn{
		width:10em;
	}
}