@charset "UTF-8";
/* topics.css */

	

/* pc */
@media screen and (min-width: 501px) {
/*ここにpc用スタイルを記述*/


/*------------ topics ------------*/

#background_topics {
	margin: 0 auto;
	width: 100%;
	top: 0;
	padding: 0 0 0 0;
	text-align: left;
	background-color: #ffffff;
	background-image: url(../images/topics_bg.jpg);
	background-position: center top;
	background-size: contain;
	background-repeat: no-repeat;
}




h2.font_topicstitle {
	font-family: 'Quicksand', sans-serif;
	font-size: 2.0em;
	font-weight: normal;
	letter-spacing: 0.15em;
	top: 0;
	padding: 23% 0 3% 6.3%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

ul#topics {
	width: 65%;
	padding: 0 0 0 5%;
	margin-top: -0.0em;
	margin-bottom: 12%;
    display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
}

ul#topics li {
	margin:0 3% 3% 0;
	margin-top: -0.0em;
	margin-bottom: 5%;
	list-style:none;
	width: 44%;
	position:relative;
	border: 1px #d39a73 solid;
	background-color: #ffffff;
}





ul#topics li #pad_img {
	width:94%;
	margin: 3% 3%;
	position: relative;
	z-index: 5;
	box-sizing: border-box;
	border: 1px #d39a73 solid; 
}



ul#topics li a {
	position: absolute;
	display: block;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	z-index: 10000;
	transition-duration: 0.5s;
} 

ul#topics li a:hover {
	background-color: rgba(255,255,200,0.4);

} 



.font_topicsdate {
	font-family: "M PLUS 1p";
	font-size: 1.0em;
	font-weight: normal;
	text-align: left;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	position: relative;
	padding: 0 0 0 3.3%;
	z-index: 5;
}

h4.font_topics {
	width: 92%;
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 1.15em;
	font-weight: normal;
	line-height: 1.5em;
	position: relative;
	padding: 0 0 2% 3.3%;
	z-index: 5;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

/*********************/
	
#wrap_topics {
	width: 78%;
	padding: 3% 0 8% 6.5%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	text-align: left;
}	

#wrap_topics  .font_date {
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 0.88em;
	font-weight: normal;
	position: relative;
	padding: 0 0 2% 1.3%;
	z-index: 5;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}	

#wrap_topics  .font_title {
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 1.3em;
	line-height: 1.8em;
	font-weight: normal;
	border-bottom: 1px #323232 solid;
	display: inline-block;
	position: relative;
	padding: 0 0 0.3% 0;
	z-index: 5;
	margin-top: -0.0em;
	margin-bottom: 3%;
}		

	
#wrap_topics  .font_main {
	width: 65%;
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 1.1em;
	line-height: 1.8em;
	font-weight: normal;
	position: relative;
	padding: 0 0 0 1.3%;
	z-index: 5;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

	
.pad_button001 {
	padding: 3% 0 8% 1.2%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}
	
	
.pad_bu01 {
	display: inline-block;
	position: absolute;
	text-align: center;
	font-family: "M PLUS 1p";
	font-weight: normal;
	color: #323232;
	background-color: #a0d8c9;
	font-size: 1.1em;
	padding: 0.6% 3% 0.6% 3%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	transition-duration: 0.5s;
    border-radius: 4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
	white-space: nowrap;
}
.pad_bu01 a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999999px;
	z-index: 10000;
}
.pad_bu01:after {
	content:'▶︎';
	font-size: 0.8em;
	padding-left:0.6%;
}
.pad_bu01:hover {
	background-color: #cc0000;
	color: #ffffff;
}

.pad_bu01 a:link {
	color: #323232;
	text-decoration:none;
	outline: none;
}

.pad_bu01 a:visited {
	color: #323232;
	text-decoration: none;
	outline: none;
}

.pad_bu01 a:active {
	color: #ffffff;
	text-decoration: none;
	outline: none;
}
	
	
}
 


 
/* smartPhone */
@media screen and (max-width: 500px) {
/*ここにスマホ用スタイルを記述*/



/*------------ topics ------------*/

#background_topics {
	margin: 0 auto;
	width: 100%;
	top: 0;
	padding: 0 0 0 0;
	text-align: left;
	background-color: #ffffff;
	background-image: url(../images/topics_bg_sp.jpg);
	background-position: center top;
	background-size: contain;
	background-repeat: no-repeat;
}

h2.font_topicstitle {
	font-family: 'Quicksand', sans-serif;
	font-size:1.2rem;
	letter-spacing: 0.05rem;
	font-weight: normal;
	top: 0;
	padding: 35% 0 3% 6.3%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}


ul#topics {
	width: 76%;
	padding: 0 0 0 11%;
	margin-top: -0.0em;
	margin-bottom: 12%;
}

ul#topics li {
	margin:0 10% 10% 0;
	margin-top: -0.0em;
	margin-bottom: 5%;
	list-style:none;
	width: 100%;
	top:0;
	left:0;
	bottom:0;
	right:0;
	position: relative;
	border: 1px #d39a73 solid;
	background-color: #ffffff;
}






ul#topics li #pad_img {
	width:94%;
	margin: 3% 3%;
	position: relative;
	z-index: 5;
	box-sizing: border-box;
	border: 1px #d39a73 solid; 
}



ul#topics li a {
	display:block;
	position:absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
	z-index: 10000;
	transition-duration: 0.5s;
} 


.font_topicsdate {
	font-family: "M PLUS 1p";
	font-size: 0.6rem;
	font-weight: normal;
	text-align: left;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
	position: relative;
	padding: 0 0 0 3.3%;
	z-index: 5;
}

h4.font_topics {
	width: 92%;
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 0.78rem;
	font-weight: normal;
	line-height: 1.2rem;
	position: relative;
	padding: 0 0 2% 3.3%;
	z-index: 5;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
}

/*********************/
	
#wrap_topics {
	width: 95%;
	padding: 3% 0 8% 3.3%;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
	text-align: left;
}	

#wrap_topics  .font_date {
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 0.68rem;
	font-weight: normal;
	position: relative;
	padding: 0 0 2% 3%;
	z-index: 5;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
}	

#wrap_topics  .font_title {
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 1.1rem;
	line-height: 1.3rem;
	font-weight: normal;
	border-bottom: 1px #323232 solid;
	display: inline-block;
	position: relative;
	padding: 0 0 1% 0;
	z-index: 5;
	margin-top: -0.0rem;
	margin-bottom: 3%;
}	
	

	
#wrap_topics  .font_main {
	width: 90%;
	font-family: "M PLUS 1p";
	text-align: left;
	font-size: 0.78rem;
	line-height: 1.4rem;
	font-weight: normal;
	position: relative;
	padding: 0 0 0 3%;
	z-index: 5;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
}

	
.pad_button001 {
	padding: 3% 0 12% 2.2%;
	margin-top: -0.0rem;
	margin-bottom: -0.0rem;
}
	
	
.pad_bu01 {
	display: inline-block;
	position: absolute;
	text-align: center;
	font-family: "M PLUS 1p";
	font-weight: normal;
	color: #323232;
	background-color: #a0d8c9;
	font-size: 1.1em;
	padding: 0.6% 3% 0.6% 3%;
	margin-top: -0.0em;
	margin-bottom: -0.0em;
	transition-duration: 0.5s;
    border-radius: 4px;
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px;
	white-space: nowrap;
}
.pad_bu01 a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999999px;
	z-index: 10000;
}
.pad_bu01:after {
	content:'▶︎';
	font-size: 0.8em;
	padding-left:0.6%;
}
.pad_bu01:hover {
	background-color: #cc0000;
	color: #ffffff;
}

.pad_bu01 a:link {
	color: #323232;
	text-decoration:none;
	outline: none;
}

.pad_bu01 a:visited {
	color: #323232;
	text-decoration: none;
	outline: none;
}

.pad_bu01 a:active {
	color: #ffffff;
	text-decoration: none;
	outline: none;
}
	
}



.wp-pagenavi {
	clear: both;
	margin-left: 6.5%;
	margin-bottom: 8%;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	font-family: "M PLUS 1p";
	font-size: 1.0em;
	font-weight: normal;
	background-color: #ccd8ee;
	color: #566d98;
	border: 1px solid #728098;
	padding: 5px 10px;
	margin: 0.2%;
    border-radius: 24px;
    -webkit-border-radius: 24px; 
    -moz-border-radius: 24px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
	background-color:#6b82ac;
	color:#ffffff;
}

.wp-pagenavi span.current {
	font-weight: bold;
}