@charset "utf-8";
/*===============================================
共通部部
===============================================*/
#mainTitle {
    background: url(../../images/topics/title_tex.jpg) no-repeat center center;
}
#TopicsCategory ul li{
	display: inline-block;
	margin-bottom : 1em;
	border-radius: 5px;
}
#TopicsCategory ul li:after{
	content : "";
}
#TopicsCategory ul li a{
	display:block;
	text-decoration:none;
	text-align : center;
}
#TopicsCategory ul li:hover, #TopicsCategory ul li a:hover {transition: all 0.2s;}
#TopicsCategory a:hover{
	color : #ffffff;
}
#TopicsCategory .category_all{
	background:url(/images/topics/arrow_red.png) no-repeat 50% 85% #fff;
	background-size:10px 6px;
	border:#e60012 1px solid;
}
#TopicsCategory .category_all:hover{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #e60012;
	background-size:10px 6px;
	border:#e60012 1px solid;
}
#TopicsCategory .category_select_all{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #e60012;
	background-size:10px 6px;
	border:#e60012 1px solid;
}
#TopicsCategory .category_select_all a{
	color : #ffffff;
}
#TopicsCategory .category_1{
	background:url(/images/topics/arrow_blue.png) no-repeat 50% 85% #fff;
	background-size:10px 6px;
	border:#2d0c8a 1px solid;
}
#TopicsCategory .category_1:hover{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #2d0c8a;
	background-size:10px 6px;
	border:#2d0c8a 1px solid;
}
#TopicsCategory .category_select_1{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #2d0c8a;
	background-size:10px 6px;
	border:#2d0c8a 1px solid;
}
#TopicsCategory .category_select_1 a{
	color : #ffffff;
}
#TopicsCategory .category_2{
	background:url(/images/topics/arrow_green.png) no-repeat 50% 85% #fff;
	background-size:10px 6px;
	border:#1a7e28 1px solid;
}
#TopicsCategory .category_2:hover{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #1a7e28;
	background-size:10px 6px;
	border:#1a7e28 1px solid;
}
#TopicsCategory .category_select_2{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #1a7e28;
	background-size:10px 6px;
	border:#1a7e28 1px solid;
}
#TopicsCategory .category_select_2 a{
	color : #ffffff;
}
#TopicsCategory .category_3{
	background:url(/images/topics/arrow_brown.png) no-repeat 50% 85% #fff;
	background-size:10px 6px;
	border:#af5c2f 1px solid;
}
#TopicsCategory .category_3:hover{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #af5c2f;
	background-size:10px 6px;
	border:#af5c2f 1px solid;
}
#TopicsCategory .category_select_3{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #af5c2f;
	background-size:10px 6px;
	border:#af5c2f 1px solid;
}
#TopicsCategory .category_select_3 a{
	color : #ffffff;
}
#TopicsCategory .category_4{
	background:url(/images/topics/arrow_purple.png) no-repeat 50% 85% #fff;
	background-size:10px 6px;
	border:#9c396a 1px solid;
}
#TopicsCategory .category_4:hover{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #9c396a;
	background-size:10px 6px;
	border:#9c396a 1px solid;
}
#TopicsCategory .category_select_4{
	background:url(/images/topics/arrow02.png) no-repeat 50% 85% #9c396a;
	background-size:10px 6px;
	border:#9c396a 1px solid;
}
#TopicsCategory .category_select_4 a{
	color : #ffffff;
}

div.searchnav {
	margin: 0 auto;
	text-align: center;
	margin-bottom:1em;
}
div.searchnav ul {
	width:100%;
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
}
div.searchnav ul li {
	display:inline-block;
	width : 30px;
	height:30px;
	line-height:30px;
	margin:0 5px 0 0;
	border:#e60012 1px solid;
}
div.searchnav ul li.disabled {
	color:#e60012;
}
div.searchnav ul li.currentpage {
	background : #e60012;
	color : #ffffff;
}
div.searchnav ul li.currentpage a{
	color : #ffffff;
}
div.searchnav ul li a {
	display:block;
	width :100%;
	text-decoration:none;
	color : #333333;
}
div.searchnav ul li a:hover {
	background : #e60012;
	color : #ffffff;
}
div.searchnav ul li a:hover {
	background : #e60012;
	color : #ffffff;
}
#TextFrame p{
	margin-bottom : 2em;
	color : #000000;
	line-height : 2em;
}
#TextFrame_noimag p{
	margin-bottom : 2em;
	color : #000000;
	line-height : 2em;
}
.listBtn a{
	display: block;
	padding : 1em;
	width : 280px;
	font-size: 1.15em;
	margin : 0 auto;
	color:#e60012;
	text-align: center;
	text-decoration:none;
	border: #e60012 1px solid;
	background:url(/images/topics/arrow03.png) no-repeat 10% 50% #fff;
	background-size:10px 16px;
	font-family: "Zen Kaku Gothic New", sans-serif;
	font-weight: 500;
}
.listBtn a:hover{
	color: #fff;
	border: #e60012 1px solid;
	background:url(/images/topics/arrow04.png) no-repeat 10% 50% #e60012;
	background-size:10px 16px;
}
/*===============================================
●画面の横幅が729px以下
===============================================*/
@media screen and (max-width: 729px){
	
	#header #topTitle {display: none;}
	
	#TopicsCategory ul{
		width: 100%;
		list-style : none;
		margin-bottom : 10px;
		text-align: center;
	}
	#TopicsCategory ul li {
		width: 46%;
		margin-right: 4%;
		vertical-align: text-top;
	}
	#TopicsCategory ul li:nth-child(2n) { margin-right: 0;}
	#TopicsCategory ul li a{
		padding : 1.3em;
		line-height:1.3em;
	}
	#TopicsList a{
		display: block;
		margin-top : 1em;
	}
	#Topics{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#PhotoFrame{
		display:block!important;
		margin-bottom : 1em;
		width : 100%;
	}
	#PhotoFrame a{
		display:block!important;
		width: 100%;
		height: 250px;
		margin-bottom : 1em;
		border : 1px solid #cccccc;
		overflow: hidden;
	}
	#Attached_files{
		margin-top: 2em;
		margin-bottom: 2em;
	}
	#TextFrame{
		display: block;
		margin:0 auto;
		margin-bottom: 2em;
	}
	#descBox{
		display: block;
		width : 100%;
		margin-bottom: 2em;
	}
}
/*===============================================
●画面の横幅が730px以上
===============================================*/
@media screen and (min-width: 730px) {
	
	#header #topTitle {
		width: 50%;
		font-size: 0.85em;
		float: left;
		line-height: 36px;
	}
	
	#TopicsCategory ul{
		list-style : none;
		padding-left : 0;
		margin-bottom : 10px;
	}
	#TopicsCategory ul li {
		min-width: 10em;
		margin-right: 0.5em;
	}
	#TopicsCategory ul li a{
		padding :1.3em;
	}
	#Topics{
		display: flex;
		flex-direction:row-reverse;
		flex-wrap: wrap;
		justify-content: center;
	}
	#PhotoFrame{
		display: inline-block;
		width : 280px;
	}
	#PhotoFrame a{
		display: block;
		width: 100%;
		height: 250px;
		margin-bottom: 0.7em;
		border : 1px solid #cccccc;
		overflow: hidden;
	}
	#Attached_files{
		margin-top: 2em;
		margin-bottom: 2em;
	}
	#TextFrame{
		display: block;
		width :calc(100% - 300px);
		margin:0 auto;
		margin-bottom: 2em;
	}
	#descBox{
		display: block;
		width :calc(100%);
		margin:0 auto;
		margin-bottom: 2em;
	}
}