@charset "UTF-8";


/*===== SITE LAYOUT =====*/


*
{
	font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,arial,"Lucida Sans","ＭＳ Ｐゴシック","MS PGothic","Osaka",sans-serif;
}

body
{
	background:url(../img/back_01.png) #eeeeee;
}

a
{
    color: #488302;
	text-decoration: none;
}

a:hover
{
    color: #488302;
	text-decoration: underline;
}




/*
========================================

　スタイル

========================================*/


/* ---- # 見出し # ---- */


h1
{
    margin-bottom:5%;
	padding: 1.5% 2%;
	
	color: #ffffff;
	font-size: 200%;
	line-height: 1.3;
    
	background: #488302;
    background: -webkit-repeating-linear-gradient(90deg, #488302, #5a9317 100%);
	background: repeating-linear-gradient(90deg, #488302, #5a9317 100%);  
}

h2
{
    margin-top:4%;
    margin-bottom:4%;
	padding: 0px 0px 2% 0px;
	
	color:#333333;
	font-size: 180%;
	line-height: 1.3;
    
	border-bottom: solid 3px #e2e2e2;
	
    position: relative;  
}

h2:after
{
	position: absolute;
	bottom: -3px;
	
	width: 25%;
	
	border-bottom: solid 3px #488302;
	
	content: " ";
	
	display: block;
}

h3
{
    margin-bottom:3%;
    padding:1% 2.3%;
	
    color:#333333;
	font-size: 150%;
	line-height: 1.3;
	
	border-left: solid 5px #488302;  
}

h4
{
    margin-bottom:1%;
	padding-left: 1.2em;
	
	color:#333333;
	font-size: 120%;
	line-height: 1.3;
	
	position: relative;
}

h4:before
{
	font-family: "Font Awesome 5 Free";
	content: "\f111";
	color: #488302;
	font-size: 1em;
	
	position: absolute;
	left: 0;
	top: 0;
}


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

    h1
    {
		font-size: 150%;
        margin-bottom:6%;
    }
    
    h2
    {
		font-size: 130%;
        margin-bottom:6%;
    }
    
    h3
    {
		font-size: 120%;
        margin-bottom:6%;
    	padding:2% 2.3%;
    }
    
    h4
    {
		font-size: 110%;
		line-height: 1.6;
        margin-bottom:3%;
    }
     
} 


/* ---- # 段落 # ---- */


p
{
	color:#333333; 
    margin:20px;
}


/* ---- # テーブル # ---- */


table
{
    width:100%;
    margin-bottom: 20px;
}

tr
{
 
}

th
{
	padding: 10px;
	
	width: 25%;
	
    color:#ffffff;
    font-weight:bold;
	
    vertical-align:middle;
	
	background: #488302;
	
    border: solid 2px #ffffff;
	border-collapse: separate;
}

td
{
	padding: 10px;
	
    vertical-align:middle;
	
	background: #eeeeee;
	
    border: solid 2px #ffffff;
	border-collapse: separate;
}


/* ---- # 定義リスト # ---- */


dl.table-list
{
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    border-right: 2px solid #ffffff;

	background: #488302;
}

dl.table-list dt
{
	clear: left;
	float: left;
	
	padding: 10px;
	
	width: 25%;
	
    color:#ffffff;
    font-weight:bold;
	
	border-top: 2px solid #ffffff;
}
 
dl.table-list dd
{
	margin-left: 26%;
	padding: 10px;
	
	background: #eeeeee;
	
	border-left: 2px solid #ffffff;
	border-top: 2px solid #ffffff;
}


@media screen and (max-width: 767px)
{
 
	dl.table-list
	{
		border-bottom: none;
		border-left: none;
		border-right: none;
	}
		
	dl.table-list dt
	{
		border-top:none;
		clear:none;
		float:none;
		width: 100%;
		padding: 6px;
	}
	 
	dl.table-list dd
	{
		border-left:none;
		border-top:none;
		margin-left: 0;
		padding: 6px;
		background: #f0f0f0;
	}

}   
    
	
/* ---------------- */
    
   
.inner
{
    padding:0 2%;    
}




/*
========================================

　メインビジュアル

========================================*/


#glHeader
{
    min-width: 1000px;
    height: 350px;
	
    text-align: center;
	
    background-color: #f1f1f1;
	
	background:url(../img/main.png) center #e5f5fd;
}

.dummy
{
    padding: 3em;
	
    color: #000;
    font-size: 3rem;
    line-height:1.8;
    text-align:left;
}


@media screen and (max-width: 767px)
{
	
	#glHeader
	{
    	min-width: 0px;
		height: auto;
	
		background:#e5f5fd;
	}
	
	#glHeader img
	{
		width:100%;
	}

	.dummy
	{
		padding: 1em;
		
		font-size: 1.5rem;
	}
	
}  




/*
========================================

　メインメニュー

========================================*/


/* ---- # PC # ---- */


#glNav
{	
	box-shadow:0px 1px 4px -2px #999;
		
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 50%, #ededed 51%, #f7f7f7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 50%,#ededed 51%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 50%,#ededed 51%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

#glNav ul
{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
    flex-wrap: wrap;
	
    justify-content: space-around;
	
    width: 1000px;
    margin: 0 auto;
	
    border-left: 1px solid #ddd;
    border-right: 1px solid #fff;
}

#glNav ul li
{
    width:calc(100% / 6);
    
    text-align:center;
}

#glNav ul li a
{
    color:#333333;
    font-size: 1.6rem;
    font-weight: bold;
    
    padding: 20px 0px;
    
    border-left: 1px solid #fff;
    border-right: 1px solid #ddd;
    
    cursor: pointer;
    display:block;
}

#glNav ul li a:hover
{
    color:#fff;
    text-decoration: none;
    
    border-left: 1px solid #80bf36;
    border-right: 1px solid #44a5c2;
    
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #80bf36 0%, #82c92f 50%, #8dba58 51%, #82c92f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #80bf36 0%,#82c92f 50%,#8dba58 51%,#82c92f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #80bf36 0%,#82c92f 50%,#8dba58 51%,#82c92f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80bf36', endColorstr='#82c92f',GradientType=0 ); /* IE6-9 */
}


@media screen and (max-width: 767px)
{
	
	#glNav
	{
		display: none;
	}
	
}   
 

/* ---- # スマートフォン # ---- */


#spNav
{
	display: none;
} 


@media screen and (max-width: 767px)
{
	
	#spNav
	{
		width:25px;
		padding:12px 10px;
		
		background: #fff;
		border:1px solid #ccc;
		
		display:block;
		
		position:fixed;
		top:10px;
		right:10px;
		
		z-index:9999;
	}
	
	#nav-drawer
	{
		position: relative;
	}
	
	.nav-unshown
	{
		display:none;
	}
	
	#nav-open
	{
		display: inline-block;
		
		width: 30px;
		height: 19px;
		
		vertical-align: middle;
	}
	
	#nav-open span, #nav-open span:before, #nav-open span:after
	{
		position: absolute;
		
		width: 25px;
		height: 3px;
		
		border-radius: 3px;
		
		background: #555;
		
		display: block;
		
		content: '';
		
		cursor: pointer;
	}
	
	#nav-open span:before
	{
		bottom: -8px;
	}
	
	#nav-open span:after
	{
		bottom: -16px;
	}
	
	#nav-close
	{
		display: none;
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0;
		transition: .3s ease-in-out;
	}
	
	#nav-content
	{
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		width: 80%;
		max-width: 330px;
		height: 100%;
		background: #fff;
		transition: .3s ease-in-out;
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
	}
	
	#nav-input:checked ~ #nav-close
	{
		display: block;
		opacity: .5;
	}
	
	#nav-input:checked ~ #nav-content
	{
		-webkit-transform: translateX(0%);
		transform: translateX(0%);
		box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}
	
	.header-logo-menu
	{
		display: flex;
		display: -moz-flex;
		display: -o-flex;
		display: -webkit-flex;
		display: -ms-flex;
		flex-direction: row;
		-moz-flex-direction: row;
		-o-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
	}
	
	.logo-erea
	{
		text-align:center;margin:auto;
	}
	
	#nav-content ul li a,
	#nav-content ul li.nolink 
	{
		padding:4% 13% 4% 4%;
		
		color:#333333;
		text-align:left;
		
		border-bottom:1px solid #ccc;
		
		position: relative;
		
		display:block;
	}
		
	#nav-content ul li a:hover
	{
		background:#59b9d5;
		
		color:#fff;
		
		text-decoration: none;
	}
		
	#nav-content ul li.nolink 
	{
		padding:1% 13% 1% 4%;
		
		background:#c0eee8;
	}
		
	#nav-content ul li.submenu a
	{
		border-left:10px solid #c0eee8;
	}
	
	#nav-content ul li .fa-chevron-down
	{
		-webkit-transform: rotate(-90deg);
				transform: rotate(-90deg);
	}
		
	#nav-content ul li i
	{
		position: absolute;
		top: 50%;
		right: 12px;
		
		margin-top:-0.5em;
		
		color:#999999;
	}
		
	#nav-content ul li a:hover i
	{
		color:#fff;
	}

}  




/*
========================================

　トピックパス

========================================*/


.breadClumb
{
    width: 1000px;
    margin: 1.5em auto;
}

.breadClumb ul
{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.breadClumb li
{
    list-style: none;
}

.breadClumb li:after
{
    content: ">";
    padding: 0 .5em;
    background-attachment: text-bottom;
}

.breadClumb li:last-child:after
{
    content: "";
    padding: 0;
}


@media screen and (max-width: 767px)
{
	
	.breadClumb
	{
		display: none;
	}
	
} 




/*
========================================

　メイン部分

========================================*/


#container
{
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	
    flex-wrap: wrap;
    flex-direction : row-reverse;
	
    width: 1000px;
    margin: 0 auto;
}


@media screen and (max-width: 767px)
{
	
	#container
	{
   		width: 100%;
    	display: inline;
	}
	
} 




/*
========================================

　メインコンテンツ

========================================*/


#contents
{
    width: 70%;
	
    margin-left: 5%;
    padding: 40px 4% 60px;
	
    background: #fff;
	
    box-shadow: 0px 1px 4px -1px #999;
}


@media screen and (max-width: 767px)
{
	
    #contents
	{
   		width: 92%;
		
   		margin-left: 0;
   		padding: 8% 4% 10%;
	}
	
} 




/*
========================================

　サイドメニュー

========================================*/


#side
{
    width: 17%;
}  
  
#side_box
{
    padding:8px 0;
    
    background: #488302;
    
    box-shadow:0px 1px 4px -2px #999;

    border-radius:5px;
}


@media screen and (max-width: 767px)
{
	
	#side
	{
		display: none;
	}
	
} 


/* ---- # アコーディオン # ---- */


.accordion-menu
{
    width: 100%;
  
    background: #fff;
    
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    
	  -webkit-box-sizing: border-box;
	 -moz-box-sizing: border-box;
	   -o-box-sizing: border-box;
	  -ms-box-sizing: border-box;
		  box-sizing: border-box;
}

.accordion-menu li.open .dropdownlink
{
    color:#2095b9;
}

.accordion-menu li.open .dropdownlink .fa-chevron-down
{
	-webkit-transform: rotate(180deg);
			transform: rotate(180deg);
}

.dropdownlink,
.accordion-menu > li > a
{
    cursor: pointer;
    display: block;
    position: relative;
	
    padding: 10px 30px 10px 10px;
	
    color:#333333;
    font-size: 100%;
	
    border-bottom: 1px solid #ddd;
	
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffffff 0%, #f7f7f7 50%, #ededed 51%, #f7f7f7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f7f7f7 50%,#ededed 51%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffffff 0%,#f7f7f7 50%,#ededed 51%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

.dropdownlink:hover
{
    color: #2095b9;
}

.accordion-menu > li > a:hover
{
    color:#fff;
    
    text-decoration: none;
    
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top,  #80bf36 0%, #82c92f 50%, #8dba58 51%, #82c92f 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #80bf36 0%,#82c92f 50%,#8dba58 51%,#82c92f 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #80bf36 0%,#82c92f 50%,#8dba58 51%,#82c92f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80bf36', endColorstr='#82c92f',GradientType=0 ); /* IE6-9 */   
}

.dropdownlink i
{
    position: absolute;
    top: 50%;
    right: 12px;
	
    margin-top:-0.5em;
	
    color:#999999;
}

.submenuItems
{
    display: none;
	
    background: #ffffff;
}

.submenuItems li
{
    border-bottom: 1px solid #ddd;
}

.submenuItems a
{
    display: block;
	
    padding: 7px 10px 7px 25px;
	
    color:#333333;
}

.submenuItems a:hover
{
    background-color: #59b9d5;
	
    color: #fff;
    text-decoration: none;
}




/*
========================================

　フッター

========================================*/


#glFooter
{
    margin: 4em auto 0;
    padding-bottom: 2em;
	
    text-align: center;
}


@media screen and (max-width: 767px)
{
	
	#glFooter
	{
    	margin: 2em auto 0;
		
		font-size:90%;
	}
	
	#glFooter p small
	{
		font-size:95%;
	}
	
} 




/*
========================================

　説明用

========================================*/


.style_list > dd
{
    border:5px solid #eeeeee;
    
    padding:6% 6%;
    
    margin-bottom:4%;
}

.style_list > dd h1,
.style_list > dd h2,
.style_list > dd h3,
.style_list > dd h4
{
    margin-bottom:0;
}


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

    .style_list > dd
    {
        margin-bottom:6%;
    }
	
}