@charset "utf-8";

/******************************************************/
/* common */
/******************************************************/
html,body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {margin:0;padding:0;}
body {
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	-webkit-text-size-adjust: none;
	min-width: 320px;
}
table {	border-collapse:collapse; border-spacing:0;}
fieldset,img{border:0;}
address, caption, cite, code, dfn, em, strong, th, var {font-style:normal;font-weight:normal;}
strong{font-weight:bold;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
th,td{vertical-align:top;}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
img{vertical-align:bottom; max-width:100%;}
q:before,q:after{content:'';}
hr{display:none;}
abbr,acronym{border:0;}
:focus { outline: 0; }
.opa a:hover img { opacity:0.8;	filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; background: #fff; }


/******************************************************/
/* class */
/******************************************************/
.center{text-align:center!important;}
.right{text-align:right!important;}
.left{text-align:left!important;}

.fnt80{font-size:80%!important;}
.fnt85{font-size:85%!important;}
.fnt90{font-size:90%!important;}
.fnt95{font-size:95%!important;}
.fnt100{font-size:100%!important;}
.fnt110{font-size:110%!important;}
.fnt120{font-size:120%!important;}
.fnt130{font-size:130%!important;}
.fnt140{font-size:140%!important;}
.strong{font-weight:bold!important;}
.bold{font-weight:bold!important;}
.normal{font-weight:normal!important;}
.blue{color:#1a6bff;}
.red{color:#fd4f4f;}

.floR{float:right!important;}
.floL{float:left!important;}
.floNone{float:none!important;}

.block{display:block;}
.none{display:none;}
.inline{display:inline;}

.marginAuto{margin-left:auto!important;margin-right:auto!important;}


/******************************************************/
/* clear */
/******************************************************/
.clearBoth{clear: both;}
.clear{display:inline-block;}
.clear:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
/* Hides MacIE5 \*/
* html .clear{height:1%;}
.clear{display:block;}
/* Hides MacIE5 */


/******************************************************/
/* layout */
/******************************************************/

.wrap { width: 1000px; margin: 0 auto; }
.wrap:after{content:".";display:block;height:0;visibility:hidden;clear:both;}
#container { clear: both; position: relative; z-index: 1; border-top: 3px solid #006a34; }
.wrapInner { width: 700px; margin: 0 auto; }

@media screen and (max-width: 736px){
	.wrap,
	.wrapInner { width: 100%; }
}


/******************************************************/
/* header */
/******************************************************/

#headerLeft { float: left; width: 715px; }
#headerRight { float: right; width: 285px; height: 168px; }

#headerLeft .logo { padding: 30px 20px; }

#headerRight .pageStyle { width: 130px; float: left; padding: 15px 0; }
#headerRight .fontSize { width: 98px; float: right; padding: 15px 0; }
#headerRight .fontSize ul li,
#headerRight .pageStyle ul li { float:left; cursor:pointer; }

#headerRight .headMenu { clear: both; border-top: 3px solid #006a34; height: 57px; }
#headerRight .headMenu li { float: left; font-size: 81.25%; }
#headerRight .headMenu li:nth-of-type(1) { width: 58.5%; }
#headerRight .headMenu li:nth-of-type(2) { width: 41.5%; }
#headerRight .headMenu li a { color: #000; display: block; text-align: center; text-decoration: none; padding: 20px 0 10px; }
#headerRight .headMenu li a:hover { color: #006a34; text-decoration: underline; }

#headerRight .search { clear: both; background: #f2f2f2; width: 100%; padding: 10px 0; display: inline-block; }
#headerRight .searchForm { width: 100%; float: right; display: block; height: 24px; position: relative; }  
#headerRight .searchFormText { width: 80%; position: absolute; top: 0; left: 10px; font-size: 100%; border: 1px solid #f2f2f2; background: #f2f2f2; }  
#headerRight .searchFormButton { position: absolute; top: 0; right: 12px; }  


@media screen and (max-width: 736px){

	header { height: 150px; }
	#headerLeft { float: none; width: 100%; position: absolute; z-index: 1; top: 50px; }
	#headerLeft .logo { padding: 10px; text-align: center; }
	#headerLeft .logo img { width: 310px; }
	
	#headerRight { float: none; width: 100%; position: absolute; z-index: 9999; height: auto; top: 0; }
	#headerRight .pageStyle,
	#headerRight .fontSize { display: none; }

	#headerRight .headMenu { border-top: none; height: auto; position: absolute; top: 105px; width: 100%; }
	#headerRight .headMenu li { float: left; font-size: 14px; }
	#headerRight .headMenu li:nth-of-type(1) { width: 55%; }
	#headerRight .headMenu li:nth-of-type(2) { width: 45%; }
	#headerRight .headMenu li a { padding: 10px 0; }

	#headerRight .search { float: right; width: calc(80% - 10px); margin: 10px 10px 10px 0; padding: 6px 0; }

}


/******************************************************/
/* globalNavi */
/******************************************************/

#nav { position: relative; z-index: 9999; width: 715px; clear: left; }
#nav a { color: #000; text-decoration: none; }
#nav > a { display: none; }
#nav li { position: relative; }

#nav > ul { }
#nav > ul > li { float: left; height: 48px; }
#nav > ul > li a { display: block; padding: 12px 20px 0; }
#nav > ul > li a:hover { color: #006a34; }
#nav > ul > li:nth-of-type(1) { width: 20%; }
#nav > ul > li:nth-of-type(2) { width: 20%; }
#nav > ul > li:nth-of-type(3) { width: 30%; }
#nav > ul > li:nth-of-type(4) { width: 20%; }

#nav li ul { display: none; position: absolute;	top: 100%; }
#nav li:hover ul { display: block; background: rgba(0,106,52,0.9); font-size: 87.5%; }
#nav li:hover ul a { color: #fff; width: 150px; padding-bottom: 10px; border-bottom: 1px solid #597; }
#nav li:hover ul a:hover { background: #597; }


@media screen and (max-width: 736px){

	#headNav { position: absolute; top: 0; margin: -94px 0 0; }
	#nav { clear: both; width: 100%; float: left; position: relative; }
	#nav img { width: 30px; margin: 105px 0 6px 10px; }
	#nav a { color: #fff; }
	#nav a:hover { color: #fff; }
	#nav:not( :target ) > a:first-of-type,
	#nav:target > a:last-of-type { display: block; }

	#nav > ul { background: #174; height: auto; display: none; position: absolute; left: 0; right: 0; width: 1000%; }
	#nav:target > ul { display: block; }
	#nav > ul > li { width: 100%; float: none; height: auto; }
	#nav > ul > li:nth-of-type(1),
	#nav > ul > li:nth-of-type(2),
	#nav > ul > li:nth-of-type(3),
	#nav > ul > li:nth-of-type(4) { width: 100%; }
	#nav > ul > li a { padding: 12px 20px; border-bottom: 1px solid #597; }
	#nav > ul > li a:hover { color: #fff; }
  
	#nav li ul { position: static; }
	#nav li:hover ul a { width: auto; padding-bottom: 10px; margin-left: 10px; border-bottom: 1px solid #597; }

}



/******************************************************/
/* footer */
/******************************************************/

#footerLeft { border-top: 3px solid #006a34; width: 730px; float: left; margin: 60px 0 0; }
#footerRight { border-top: 3px solid #006a34; width: 90px; float: right; margin: 60px 0 0; }

#footerLeft .logoArea { width: 360px; float: left; padding: 30px 0 0 20px; }
#footerLeft .logoArea .logo { width: 280px; }
#footerLeft .copyright { color: #666; padding: 30px 0; font-size: 75%; line-height: 2; }
#footerLeft ul { width: 175px; float: left; padding: 40px 0 0; }
#footerLeft ul li { font-size: 87.5%; margin: 0 0 10px; line-height: 1.4; }
#footerLeft ul li a { color: #000; text-decoration: none; }
#footerLeft ul li a:hover { color: #006a34; text-decoration: underline; }


@media screen and (max-width: 736px){

	#footerLeft { width: 75%; float: left; margin: 30px 0 0; padding: 0 10px; }
	#footerRight { width: 15%; float: right; margin: 30px 0 0; text-align: center; }
	
	#footerLeft .logoArea { width: 100%; float: none; padding: 30px 0 0; }
	#footerLeft .logoArea .logo { width: 100%; max-width: 280px; }	
	#footerLeft .copyright { padding: 30px 0; line-height: 1.5; }
	#footerLeft ul { width: 100%; float: none; padding: 0; }
	#footerLeft ul li { margin: 0 0 15px; }

}


/******************************************************/
/* titleArea */
/******************************************************/

.titleArea { height: 232px; background: #d8e3dd; }
.titleNameArea { float: left; width: 365px; display: table; }
.titleName { display: table-cell; height: 232px; vertical-align: middle; padding: 0 20px; font-size: 175%; line-height: 1.5; }
.titleImg { float: right; width: 635px; }


@media screen and (max-width: 736px){

	.titleArea { height: auto; }
	.titleNameArea { float: none; width: 100%; display: block; }
	.titleName { display: block; height: auto; padding: 20px 10px; font-size: 150%; }
	.titleImg { float: none; width: 100%; text-align: center; }

}



/******************************************************/
/* breadcrumb */
/******************************************************/

#breadcrumb { padding: 20px 20px 80px; font-size: 87.5%; line-height: 1.5; }
#breadcrumb a { color: #006a34; text-decoration: underline; }
#breadcrumb a:hover { color: #396; }
#breadcrumb span { margin: 0 10px; }

@media screen and (max-width: 736px){

	#breadcrumb { padding: 15px 10px 30px; font-size: 75%; }

}



/******************************************************/
/* container */
/******************************************************/

.subtitleArea { margin: 0 20px 40px; }
.subtitleArea .subtitleName { font-size: 150%; line-height: 1.4; width: 800px; float: left; }
.subtitleArea .subtitleDate { text-align: right; width: 160px; float: right; }

.btn_type01 a { display: block; background: #006a34; color: #fff; border: 1px solid #006a34; font-weight: bold; text-align: center; text-decoration: none; }
.btn_type01 a:hover { background: #396; }

.btn_single { clear: both; margin: 20px auto; width: 200px; }
.btn_single a { padding: 20px 0; }


#mainColumn { float: right; width: 75%; }
#mainColumn .subtitleArea { margin: 0 0 40px; }

#sideColumn { float: left; width: 20%; }
.sideMenu { border-top: 1px dotted #999; font-size: 87.5%; }
.sideMenu li { }
.sideMenu li a { display: block; color: #333; border-bottom: 1px dotted #999; padding: 20px 20px; text-decoration: none; }
.sideMenu li.current > a { color: #006a34; }
.sideMenu li a:hover { background: #eef5f1; }
.sideMenu li ul li a { padding: 16px 20px 16px 2.4em; }

.sideCategoryName { background: #006a34; color: #fff; padding: 20px; }
.sideCategoryName + .sideMenu { border-top: none; }

@media screen and (max-width: 736px){

	.subtitleArea { margin: 0 0 20px; }
	.subtitleArea .subtitleName { font-size: 120%; width: 100%; float: none; padding: 0 0 10px; }
	.subtitleArea .subtitleDate { width: 100%; float: none; }
	
	#mainColumn { float: none; width: 100%; margin: 0 0 50px; }
	#mainColumn .subtitleArea { margin: 0 0 20px; }
	
	#sideColumn { float: none; width: calc(100% - 20px); margin: 0 auto 30px; padding: 0 10px; }

}



/******************************************************/
/* bannerArea */
/******************************************************/

.bannerArea { background: #f2f2f2; margin: 50px 0 0; padding: 40px 0 0; }
.bannerArea .col2 { width: 480px; float: left; margin: 0 0 40px; }
.bannerArea .col2:nth-of-type(2n) { margin-left: 40px; }
.bannerArea .col2:nth-of-type(2n+1) { clear: both; }
.bannerArea .col4 { width: 220px; float: left; margin: 0 0 40px; }
.bannerArea .col4:nth-of-type(4n),
.bannerArea .col4:nth-of-type(4n+2),
.bannerArea .col4:nth-of-type(4n+3) { margin-left: 40px; }
.bannerArea .col4:nth-of-type(4n+1) { clear: both; }

@media screen and (max-width: 736px){

	.bannerArea { margin: 30px 0 0; padding: 20px 10px 10px; }
	.bannerArea .col2 { width: 100%; float: none; text-align: center; margin: 0 0 10px; }
	.bannerArea .col2:nth-of-type(2n) { margin-left: 0; }
	.bannerArea .col4 { width: 47.5%; margin: 0 0 10px; text-align: center;}
	.bannerArea .col4:nth-of-type(4n),
	.bannerArea .col4:nth-of-type(4n+2) { margin-left: 5%; }
	.bannerArea .col4:nth-of-type(4n+3) { clear: both; margin-left: 0; }

}



/******************************************************/
/* 4color style */
/******************************************************/

/* style02 */
.style02{
	background-color:#333;
	color:#fff;
}
.style02 a { color:#fff; }
.style02 #headerRight .headMenu li a,
.style02 #nav > ul > li a,
.style02 #footerLeft ul li a { color: #fff; }
.style02 #footerLeft .copyright { color: #ccc; }
.style02 .titleArea { background: #666; }

.style02 #breadcrumb a,
.style02 .contentsArea p a,
.style02 .pager ul li a { color: #fff; }
.style02 .contentsArea ul a,
.style02 .contentsArea .wrapBox,
.style02 .wrapTable table th { color: #333; }
.style02 #breadcrumb a:hover,
.style02 .contentsArea p a:hover { color: #ccc; }
.style02 .contentsArea ul a:hover { color: #666; }
.style02 .pager ul li:first-child a,
.style02 .pager ul li:last-child a { color: #fff; }
.style02 .pager ul li:first-child a:hover,
.style02 .pager ul li:last-child a:hover { color: #ccc; background: #333; }

.style02 #sideColumn a { color:#fff; }
.style02 #sideColumn a:hover { background: #666; }
.style02 #sideColumn .current > a { color:#cfc; }


/* style03 */
.style03{
	background-color:#ff0;
	color:#00f;
}
.style03 a {color:#00f;}

.style03 #sideColumn a { color:#00f; }
.style03 #sideColumn .current > a { color:#090; }

/* style04 */
.style04{
	background-color:#00f;
	color:#fff;
}
.style04 a{ color:#fff; }
.style04 #headerRight .headMenu li a,
.style04 #nav > ul > li a,
.style04 #footerLeft ul li a { color: #fff; }
.style04 #footerLeft .copyright { color: #ccc; }
.style04 .titleArea { background: #66f; }

.style04 #breadcrumb a,
.style04 .contentsArea p a,
.style04 .pager ul li a { color: #fff; }
.style04 .contentsArea ul a,
.style04 .contentsArea .wrapBox,
.style04 .wrapTable table th { color: #333; }
.style04 #breadcrumb a:hover,
.style04 .contentsArea p a:hover { color: #ccc; }
.style04 .contentsArea ul a:hover { color: #666; }
.style04 .pager ul li:first-child a,
.style04 .pager ul li:last-child a { color: #fff; }
.style04 .pager ul li:first-child a:hover,
.style04 .pager ul li:last-child a:hover { color: #ccc; background: #00f; }

.style04 #sideColumn a { color:#fff; }
.style04 #sideColumn a:hover { background: #99c; }
.style04 #sideColumn .current > a { color:#cfc; }