@charset "utf-8";
/* CSS Document */

/*-- headline ------------------------------------------------------------*/

#content { margin: 0 2%; }
#content #anch02,#content #anch04 { background: #fff; }

#headline { background: url("../img/second/headline.png") top right no-repeat; position: relative; }
#headline h2 { color: #009688; line-height: 1.5; }
#headline h2 span { display: block; opacity: 0.5; font-size: 0.3em; font-family:'Roboto Condensed', sans-serif; font-weight:bold; color: #000; }

.sideMenu li { border-bottom: 1px dotted #dedede; height: 50px; line-height: 50px; text-indent: 0.5em; font-size: 0.9rem; }
.sideMenu li a         { resize: none; display: block; }
.sideMenu li a:link    { color:#333333; text-decoration: none; }
.sideMenu li a:visited { color:#333333; text-decoration: none; }
.sideMenu li a:hover   { color:#fff; text-decoration: none; background: #333; }
.sideMenu li a:active  { color:#333333; text-decoration: none; font-family:'Roboto Condensed', sans-serif; font-weight:bold; color: #ccc; }

.secondTtl { position: relative; }
.secondTtl span { font-size: 0.9rem; margin-left: 5px; color: #009688; font-family:'Roboto Condensed', sans-serif; font-weight:bold; opacity: 0.3; display: block; }
.secondSubTtl { background: #f4f4f4; padding: 10px 20px; margin-bottom: 20px; border-left: 5px solid #dedede; font-weight: bold; }
.resultList h5 { text-align: center; }
@media screen and (max-width: 599px) {
	#headline .in { position: absolute; bottom:10px; width: 90%; height: 70px; background: #fff; z-index: 1;  }
	#headline { height: 110px; background-size: contain; }
	#headline h2 { position: absolute; left: 6%; bottom: 30px; font-size: 1.4rem; line-height: 1.5; }
	#headline h2 span { display: inline-block; margin-left: 10px; vertical-align: middle; }
	
	#content main section { margin:0 4% 40px; padding:0 4% 40px; border-bottom: 1px dotted #dedede; }
	#content aside { padding: 4%; margin-bottom: 20px;}
	.sp-toggle { background: #333; padding: 5px 10px; text-align: center; color: #fff; font-size: 0.9rem; position: relative; color: #fff; }
	.sp-toggle:after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2%; top: 50%; transform: translateY(-50%); }
	.sp-toggle.active:after { content: "\f106"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2%; top: 50%; transform: translateY(-50%); }
	
	.secondTtl { font-size: 1.4rem; margin-bottom: 20px; padding-left: 50px; }
	.secondTtl:before { width: 30px; height: 3px; content: ""; position: absolute; left: 0px; top: 50%; background-color: #009688; z-index: 10; }
	#content section#anch02,#content section#anch04 { background: #fff !important; }
	#content section#introduction p { margin-bottom: 0px; background: #000; color: #fff; padding: 10px; font-size: 0.7rem;  }
	
	.tbl01 { width: 100%; margin: 0 auto; }
	.tbl01 th { padding: 10px; border-top: 1px solid #dedede; display: block; text-align: center; background: #dedede;}
	.tbl01 td { padding: 10px; border-top: 1px dotted #dedede; display: block; background: #fff; line-height: 1.7;}
}
@media screen and (min-width: 600px) {
	#content { display: flex; justify-content: flex-start; }
	#content main { width: 80%; padding: 4% 0; }
	#content main section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px dotted #dedede; }
	#content aside { width: 16%; padding: 4% 2%;}

	#content section#introduction p { margin-bottom: 20px; background: #000; color: #fff; padding: 10px; font-size: 0.8rem;  }
	
	.secondTtl { margin-bottom: 20px; padding-left: 90px; }
	.secondTtl:before { width: 70px; height: 3px; content: ""; position: absolute; left: 0px; top: 50%; background-color: #009688; z-index: 10; }
	
	.tbl01 { width: 100%; margin: 0 auto; }
	.tbl01 th { padding: 20px; border-bottom: 3px solid #dedede;}
	.tbl01 td { padding: 20px; border-bottom: 1px solid #dedede;}
	
	#content main section .newsList { width: 100%; max-width: 100% !important; margin: 0 auto; }
	
}
@media screen and (min-width: 600px) and (max-width: 899px)  {
	#headline .in { position: absolute; bottom:60px; width: 90%; height: 140px; background: #fff; z-index: 1;  }
	#headline { height: 240px; background-size: contain; }
	#headline h2 { position: absolute; left: 4%; bottom: 60px; font-size: 2.0rem; line-height: 1.5; }
	
	.secondTtl { font-size: 1.6rem; }	
}
@media screen and (min-width: 900px) and (max-width: 1079px)  {
	#headline .in { position: absolute; bottom:0; width: 90%; height: 150px; background: #fff; z-index: 1;  }
	#headline { height: 250px; background-size: contain; }
	#headline h2 { position: absolute; left: 4%; bottom: 50px; font-size: 2.1rem; line-height: 1.5; }
	
	.secondTtl { font-size: 1.7rem; }
}
@media screen and (min-width: 1080px) and (max-width: 1199px)  {
	#headline .in { position: absolute; bottom:0; width: 90%; height: 150px; background: #fff; z-index: 1;  }
	#headline { height: 300px; background-size: contain; }
	#headline h2 { position: absolute; left: 4%; bottom: 50px; font-size: 2.2rem; line-height: 1.5; }
	
	.secondTtl { font-size: 1.8rem; }
}
@media screen and (min-width: 1200px) and (max-width: 1479px)  {
	#headline .in { position: absolute; bottom:0; width: 90%; height: 150px; background: #fff; z-index: 1;  }
	#headline { height: 300px; background-size: contain; }
	#headline h2 { position: absolute; left: 4%; bottom: 50px; font-size: 2.3rem; line-height: 1.5; }
	
	.secondTtl { font-size: 1.9rem; }
}
@media screen and (min-width: 1480px) {
	#headline .in { position: absolute; bottom:0; width: 96%; height: 150px; background: #fff; z-index: 1;  }
	#headline { height: 300px; background-size: contain; }
	#headline h2 { position: absolute; left: 8%; bottom: 50px; font-size: 2.4rem; line-height: 1.5; }
	#content { margin: 0 6%;}
	.secondTtl { font-size: 2.0rem; }
}

/*-- breadcrumbs ------------------------------------------------------------*/
#breadcrumbs { margin: 0 2%; }
#breadcrumbs ul { display: flex; justify-content: flex-start; align-items: center; }
@media screen and (max-width: 599px) {
	#breadcrumbs .in { margin:0 0%;}
}
@media screen and (min-width: 600px) {
	#breadcrumbs .in { margin:0 2%; }
}

#breadcrumbs li a {display:block;}

#breadcrumbs li a         { resize: none; }
#breadcrumbs li a:link    { color:#fff; text-decoration: none; }
#breadcrumbs li a:visited { color:#fff; text-decoration: none; }
#breadcrumbs li a:hover   { color:#fff; text-decoration: none; opacity:0.7; }
#breadcrumbs li a:active  { color:#fff; text-decoration: none; }

#breadcrumbs li:nth-child(2) { background:#888; }
#breadcrumbs li:nth-child(2):after { border-color: transparent transparent transparent #888; }
#breadcrumbs li:nth-child(3) { background:#777; }
#breadcrumbs li:nth-child(3):after { border-color: transparent transparent transparent #777; }
#breadcrumbs li:nth-child(4) { background:#666;}
#breadcrumbs li:nth-child(4):after { border-color: transparent transparent transparent #1b7990; }
#breadcrumbs li.current { background:#009688; }

@media screen and (max-width: 599px) {
	#breadcrumbs li {
		font-size:11px;
		color:#fff;
		height:18px;
		line-height:18px;
		background:#999999;
		padding:0 10px;
		position:relative;
	}
	#breadcrumbs li:after {
		position:absolute;
		top:0px;
		right:-5px;
		content:"";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 9px 0 9px 5px;
		border-color: transparent transparent transparent #999999;
		z-index:100;
	}
	#breadcrumbs li.current:after {
		position:absolute;
		top:0px;
		right:-5px;
		content:"";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 9px 0 9px 5px;
		border-color: transparent transparent transparent #009688;
		z-index:100;
	}
}
@media screen and (min-width: 600px) {
	#breadcrumbs li {
		font-size:12px;
		color:#fff;
		height:18px;
		line-height:18px;
		background:#999999;
		padding:0 10px;
		position:relative;
	}
	#breadcrumbs li:after {
		position:absolute;
		top:0px;
		right:-5px;
		content:"";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 9px 0 9px 5px;
		border-color: transparent transparent transparent #999999;
		z-index:100;
	}
	#breadcrumbs li.current:after {
		position:absolute;
		top:0px;
		right:-5px;
		content:"";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 9px 0 9px 5px;
		border-color: transparent transparent transparent #009688;
		z-index:100;
	}
}
@media screen and (min-width: 1480px) {
	#breadcrumbs { margin: 0 6%;}
}