@charset "utf-8";

.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex div{
	flex-basis: 32%;
	margin-right: 1%;
}
.flex div ul li{
	display: block;
	width: auto !important;
}

#contents h4{
	font-size: 130%;
	font-weight: bold;
	background-color: #E6E6DC;
	padding: 10px 10px 5px;
	margin-bottom: 10px;
}
#contents #main ul{
	margin: -1.5em 0 0;
}
#contents ul.indent_1 li,
#contents ul.indent_2 li,
#contents ul.indent_3 li,
#contents ul.indent_4 li,
#contents ul.indent_5 li,
#contents ul.indent_6 li,
#contents ul.indent_7 li,
#contents ul.indent_8 li,
#contents ul.indent_9 li,
#contents ul.indent_10 li,
#contents ul.indent_11 li,
#contents ul.indent_12 li,
#contents ul.indent_13 li,
#contents ul.indent_14 li,
#contents ul.indent_15 li{
	margin: 0 0 1em;
}
#contents ul.indent_1 li{
	text-indent: -1em;
	margin-left: 1em;
}
#contents ul.indent_2 li{
	text-indent: -2em;
	margin-left: 2em;
}
#contents ul.indent_3 li{
	text-indent: -3em;
	margin-left: 3em;
}
#contents ul.indent_4 li{
	text-indent: -4em;
	margin-left: 4em;
}
#contents ul.indent_5 li{
	text-indent: -5em;
	margin-left: 5em;
}
#contents ul.indent_6 li{
	text-indent: -6em;
	margin-left: 6em;
}
#contents ul.indent_7 li{
	text-indent: -7em;
	margin-left: 7em;
}
#contents ul.indent_8 li{
	text-indent: -8em;
	margin-left: 8em;
}
#contents ul.indent_9 li{
	text-indent: -9em;
	margin-left: 9em;
}
#contents ul.indent_10 li{
	text-indent: -10em;
	margin-left: 10em;
}
#contents ul.indent_11 li{
	text-indent: -11em;
	margin-left: 11em;
}
#contents ul.indent_12 li{
	text-indent: -12em;
	margin-left: 12em;
}
#contents ul.indent_13 li{
	text-indent: -13em;
	margin-left: 13em;
}
#contents ul.indent_14 li{
	text-indent: -14em;
	margin-left: 14em;
}
#contents ul.indent_15 li{
	text-indent: -15em;
	margin-left: 15em;
}
@media screen and (max-width: 1000px) {
	#contents ul li {
		text-indent: 0 !important;
		margin-left: 0 !important;
	}
}

/* 詳細ページ用スタイル */
#contents{
	overflow: hidden;
}
#contents p{
	clear: both;
	overflow: hidden;
	margin-bottom: 2em;
}
#contents p span{
	color: #3FA9F5;
	font-weight: bold;
	margin-bottom: 10px;
	display: block;
}
#contents .img_l{
	float: left;
	margin: 0 25px 25px 0;
}
#contents .img_r{
	float: right;
	margin: 0 0 25px 25px;
}
#contents .img_c{
	text-align: center;
	margin: 25px 0;
}
#contents .listener{
	text-align: right;
}
#contents .btn a{
	padding: 10px 20px;
	color: #3FA9F5;
	border: 1px solid #3FA9F5;
}
#contents .btn a:hover{
	color: #FFF;
	background-color: #3FA9F5;
}

/* 詳細ページ用サイドバー内スタイル */
#sidebar iframe{
	height: 1000px;
}
ul.multi li{
	width: 32%;
	margin-right: 0.5%;
	display: inline-block;
}
ul.multi li.long-word strong{
	font-size: 75% !important;
}

ul.single li span{
	display: block;
	float: right;
}
ul.multi,
ul.single{
	margin-bottom: 30px;
	padding-bottom: 30px;
}
ul.boxlist{
	display: none;
}
ul.boxlist:nth-of-type(1),
ul.boxlist:nth-of-type(2),
ul.boxlist:nth-of-type(3),
ul.boxlist:nth-of-type(4),
ul.boxlist:nth-of-type(5){
	display: block!important;
}
ul.boxlist li{
	margin-bottom: 20px;
	border: 1px solid #C8C8C8;
}
ul.boxlist li a{
	text-decoration: none;
	color: #3c3c3c;
	display: block;
	overflow: hidden;
}
ul.boxlist li img{
	float: left;
	width: 125px;
	margin-right: 10px;
	vertical-align: middle;
}
ul.boxlist li div{
	margin: 5px;
}
ul.boxlist li small{
	color: #FFF;
	font-size: 80%;
	padding: 2px 5px 0px;
	background-color: #F00;
}
ul.boxlist li strong{
	font-size: 120%;
	font-weight: bold;
}
ul.boxlist li span{
	font-size: 80%;
	color: #3FA9F5;
	padding: 3px 10px 3px 10px;
	margin-top: 5px;
	border: 1px solid #3FA9F5;
	background-color: #FFF;
	display: inline-block;
	transition: all 0.3s linear;
}
ul.boxlist li span:after{
	content: ">";
	margin-left: 25px;
	color: #3FA9F5;
	transition: all 0.3s linear;
}
ul.boxlist a:hover span{
	color: #FFF;
	background-color: #3FA9F5;
}
ul.boxlist a:hover span:after{
	color: #FFF;
}




.sidetitle{
	font-size: 130%;
	font-weight: bold;
	padding: 10px 0 5px;
}

.endnavi{
	clear: both;
	border: 1px dashed #EDEDED;
	padding: 1em 0;
	margin: 4em 0 !important;
}
.endnavi ul.boxlist{
	margin: 1em 0 !important;
}


/* media query
*********************************************************************/
@media (max-width: 1000px) {
.flex{
	display: flex;
	flex-wrap: wrap;
}
.flex div{
	flex-basis: 100%;
	margin-right: 0;
}

	#contents .img_l,
	#contents .img_r{
        float: none;
        width: 80%;
        margin: 0 10% 0.5em;
	}
	#contents .img_c{
		text-align: center;
        width: 80%;
		margin: 25px auto;
	}
	#contents .img_c img{
		width: auto;
		max-width: 100%;
	}
	ul.boxlist li{
		width: 98%;
		margin-bottom: 20px;
		border: 1px solid #C8C8C8;
	}
	ul.boxlist li div{
		margin: 5px;
	}
	ul.boxlist li small{
		color: #FFF;
		font-size: 80%;
		padding: 2px 5px 0px;
		background-color: #F00;
	}
	ul.boxlist li strong{
		font-size: 120%;
		font-weight: bold;
	}
	ul.boxlist li span{
		text-align: center;
		width: calc(100% - 160px);
		padding: 3px 10px 3px 10px;
	}
	ul.multi li.long strong{
		font-size: 0.9rem !important;
		line-height: 1.0;
	}
}