@charset "utf-8";

/*===============================================
●共通
===============================================*/

/* topicsBox01
---------------------------------------------- */
#topicsBox01  .flexBox01 {justify-content: center;}
#topicsBox01 .cat:not(:last-child) {margin-right: 0.7em;}

/* topicsBox02
---------------------------------------------- */
#topicsBox02 .flexBox01 {align-items: center;}
#topicsBox02 .pager ul {
	display: flex;
	align-items: center;
	margin: 0 auto;
}
#topicsBox02 .pager ul li {
	border: #d8d8d8 1px solid;
	background-color: #F8F8F8;
	margin: 0 0.5em;
}
#topicsBox02 .pager ul li a {
	text-decoration: none;
	padding: 0.5em 0.8em;
	display: block;
}
#topicsBox02 .pager ul li:first-of-type {margin-right: 2em;}
#topicsBox02 .pager ul li:last-of-type {margin-left: 2em;}
#topicsBox02 .pager ul li:first-of-type,
#topicsBox02 .pager ul li:last-of-type {
	padding: 0;
	border: none;
	background-color: transparent;
}
#topicsBox02 .pager ul li:first-of-type a,
#topicsBox02 .pager ul li:last-of-type a {padding: 0;}
#topicsBox02 .pager .currentpage {
	border: 1px solid #EC0F85;
	background-color: #EC0F85;
	color: #FFF;
	padding: 0.5em 0.8em;
}
#topicsBox02 .number {display: none;}
#topicsBox02 .inversion {transform: scale(-1, 1);}

/* cat
---------------------------------------------- */
.cat {
	margin-right: 1em;
	text-align: center;
	border-top-left-radius : 6px;
	border-bottom-right-radius : 6px;
}
.cat a {
	text-decoration: none;
	display: block;
}
.cat00 {border: #FF0004 1px solid;}
.cat33 {border: #007DB5 1px solid;}
.cat34 {border: #00B57E 1px solid;}
.cat35 {border: #B84D3C 1px solid;}
.cat36 {border: #AB8211 1px solid;}
.cat37 {border: #9753B8 1px solid;}
.cat00 a {color: #FF0004;}
.cat33 a {color: #007DB5;}
.cat34 a {color: #00B57E;}
.cat35 a {color: #B84D3C;}
.cat36 a {color: #AB8211;}
.cat37 a {color: #9753B8;}
.cat00:hover, .cat00 .current {background-color: #FF0004;}
.cat33:hover, .cat33 .current {background-color: #007DB5;}
.cat34:hover, .cat34 .current {background-color: #00B57E;}
.cat35:hover, .cat35 .current {background-color: #B84D3C;}
.cat36:hover, .cat36 .current {background-color: #AB8211;}
.cat37:hover, .cat37 .current {background-color: #9753B8;}
.cat00 a:hover,.cat33 a:hover,.cat34 a:hover,.cat35 a:hover,.cat36 a:hover,.cat37 a:hover,.cat .current {color: #fff;}

/*===============================================
●画面の横幅が769px以下(スマホのみ)
===============================================*/
@media screen and (max-width: 769px){
	
	/* topicsWrap
	---------------------------------------------- */
	#topicsWrap .inner {padding: 0;}
	
	/* topicsBox01
	---------------------------------------------- */
	#topicsBox01 {margin: 3em 0 1em;}
	#topicsBox01 ul li {margin-bottom: 0.5em;}
	#topicsBox01 .cat {
		display: inline-block;
		width: 65px;
		margin-right: 1em;
	}
	#topicsBox01 .cat a {padding: 0.2em 0 0.1em;}
	
	/* topicsBox02
	---------------------------------------------- */
	#topicsBox02 {margin-bottom: 5em;}
	#topicsBox02 #topicsList {margin-bottom: 3em;}
	#topicsBox02 li a {padding: 1.2em 1em;}
	#topicsBox02 li {margin: 0;}
	#topicsBox02 p {line-height: 1.5em;}
	
	/* topicsPage
	---------------------------------------------- */
	#topicsPage p {line-height: 2.2em;}
}

/*===============================================
●画面の横幅が770px以上(PCのみ)
===============================================*/
@media screen and (min-width: 770px) {
	
	/*topicsBox01
	---------------------------------------------- */
	#topicsBox01 {margin-bottom: 4.3em;}
	#topicsBox01 .tit01 {margin-bottom: 2em;}
	#topicsBox01 .cat {
		width: 80px;
		min-width: 65px;
	}
	#topicsBox01 .cat a {
		padding: 0.3em 0 0.2em;
	}

	/* topicsBox02
	---------------------------------------------- */
	#topicsBox02 {margin-bottom: 8em;}
	#topicsBox02 #topicsList {margin-bottom: 7em;}
}