@charset "Shift_JIS";
/*共用ＣＳＳ*/

/*背景等メインデザイン*/
body{
	color : #446633;
	background-color : #ffffff;
	margin : 0px;
	padding : 0px;
	text-align : left;
        font-size : 11pt;
}

a{
        color:#0000ff;
}


p{
	margin-top : 0px;
	margin-bottom : 0px;
	color : darkgreen;
	line-height : 150%;
}

#wrapper{
	background-color : #ffffff;
	margin : 0 auto;
	width : auto;
	align : center;
	text-align : center;
}

/*ヘッダーＣＳＳ*/
#header{
	margin-top : 0px;
	margin-bottom : 0px;
        width : 100%;
	text-align : center;
}

#header img{
	border : none;
	margin-top : 0px;
	margin-bottom : 0px;
}

/*ＨＯＭＥ他トップメニューＣＳＳ*/
#topmenu{
	color : white;
	text-align : right;
        background-color : #446633;

}

#topmenu ul {
    text-align:right;
    height:22px; /* バーの高さを確保 */
    margin-right:10px;
}

#topmenu li {
    width:200px;
    float:left; /* liを左寄せ */
    list-style-type:none; /* リスト記号なし */
}

#topmenu a{
    width:250px;
    border-top:1px solid #446633;
    border-bottom:1px solid #446633;
    padding:4px;
    display:block;
    line-height:16px; /* 行の高さをボタンの高さに */
    text-align:center;
    text-decoration:none; /* 下線なし */
    font-size:12px;
    font-weight:bold;
    color:#ffffff;
    background-color:#446633;
}

#topmenu a:hover{
	color : #446633;
	background-color : #ffffff;
	text-decoration : none;
}



/*ナビゲーションＣＳＳ*/
#nav{
   width:100%;
    height:100px;
    margin-bottom : 10px;
}

/* メインメニュー */
#menu{
   margin-top:0px;
   margin-left:350px;
}
#menu ul {
   display:block;
   list-style-type: none;
   margin:0;
   padding:0;
}
/* サブメニュー1段目 */
#menu ul ul{
   display:none;
   position:absolute;
   top:100%;
   left:0;
}
/* サブメニュー2段目以降 */
#menu ul ul ul {
   top:0;
   left:100%;
}
/* リスト */
#menu li {
   float:left;
}
#menu li li {
   clear:both;
}
#menu li:hover {
   position:relative;
}
#menu li:hover > ul {
   display: block
}
/* IE6用 */
* html #menu li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column1'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}
* html #menu li li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column2'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}
* html #menu li li li {
   behavior: expression(
      this.onmouseover=new Function("this.className='column3'"),
      this.onmouseout=new Function("this.className=''"),
      this.style.behavior = 'none'
   );
}
#menu .column1 {position:relative;}
#menu .column1 ul {display:block;}
#menu .column1 * ul {display:none;}
#menu .column2 {position:relative;}
#menu .column2 ul {display:block;}
#menu .column2 * ul {display:none;}
#menu .column3 {position:relative;}
#menu .column3 ul {display:block;}
#menu .column3 * ul {display:none;}
/* デザイン */
#menu li {
   border:1px solid #ffffff; /* しきり線 */
    float:left; /* liを左寄せ */
    list-style-type:none;
   text-align: center;
}
#menu li li {
   text-align: left;
}
#menu li li a{
   background-color:#eeffcc;
}
#menu a{
   border:1px solid #446633; /* しきり線 */
   background-color:#ffffff;
    padding:4px;
    display:block;
    line-height:30px; /* 行の高さをボタンの高さに */
    text-align:center;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
    color:#446633;
   width:100px;
   text-decoration:none;
}
#menu a:hover {
    color:#ffffff;
    background-color:#446633;
}
#menu .column1, #menu .column2, #menu .column3 {
   color:#ffffff;   background:#446633;
}

/*現在地*/
#now{
        width:700px;
        margin : 10px;
	background-color : #eeffcc;
	text-align : left;
}

#now a{
	padding :4px;
	font-size : 80%;
        text-decoration:none;
}

#now a:hover {
    color:#ffffff;
    background-color:#446633;
}


/*フッター*/
#footer{
	background-color : #ffffff;
	clear : both;
	text-align : center;
	padding-top :10px;
	font-size : 80%;
	border-top : solid 1px darkgreen;
}


/*外コンテンツ*/
#content{
	background-color : #ffffff;
	width : 900px;
	margin-left : auto;
	margin-right : auto;
	margin-bottom : 50px;
	text-align : left;
	line-height : 120%;
}
/*スマートフォン等での表示*/
@media screen and (max-width: 840px) {
#content{
	width : 100%;
	float : both;
	margin-left : 0px;
	margin-right : 0px;

}
 } 
/*中コンテンツＣＳＳ*/
#content1{
	margin-top : 10px;
	margin-bottom : 50px;
	margin-left : 50px;
	margin-right : 50px;
	padding : 5px;
}
/*スマートフォン等での表示*/
@media screen and (max-width: 840px) {
#content1{
	width : 100%;
	float : both;
	margin-left : 0px;
	margin-right : 0px;
}
#content1 p{
	width : 100%;
	float : both;
	margin-left : 0px;
	margin-right : 0px;
}
 } 
.frame-title{
	margin-left : 10px;
	margin-right : 10px;
	margin-bottom :10px;
	padding : 3px;
        border-width : 1px;
	color : green;
	background-color : #ccff66;
}

.frame{
	margin : 1.0em;
        border-width : 1px;
        border-style : dashed;
  	padding: 0.5em;/*文字周りの余白*/
	line-height : 1.5;
}

/*テーブルCSS*/
#itiran table{
	border :1px solid green;
	border-collapse : collapse;
	width : auto;
  	padding: 0.5em;/*文字周りの余白*/
}

#itiran th{
	border : 1px solid green;
}

#itiran td{
	border : 1px solid green;
	font-size : 90%;
  	padding: 0.5em;/*文字周りの余白*/
}

#itiran tr{
	border : 1px solid green;
}
/*テーブルスクロールCSS*/
.scroll-table {
	width : 90%;
	margin-left : 20px;
	margin-right : auto;
	margin-bottom : 20px;
	text-align : left;
	line-height : 130%;
	  overflow: auto;
 	 white-space: nowrap;
}
@media screen and (max-width: 840px) {
.scroll-table table{
	width : auto;
 	 white-space: nowrap;
}
 } 

/*余白CSS*/
#blank {
	margin : 50px;
}


/*罫線デザイン*/
.line table{ font-size : 12px;
 line-height : 20px;
 border-width : 1px 1px 1px 1px;
 border-style : solid solid solid solid;
 border-color : green green green green;
}

.line td{ font-size : 12px;
 line-height : 20px;
 border-width : 1px 1px 1px 1px;
 border-style : solid solid solid solid;
 border-color : green green green green;
}

.box1{
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
background-color : #ffffcc;
text-align : center;
margin-top : 10px;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 10px;
padding : 10px;
}

.box2{
border-width : 1px 1px 1px 1px;
border-style : solid solid solid solid;
background-color : #ffffff;
text-align : center;
margin-top : 10px;
margin-left : 10px;
margin-right : 10px;
margin-bottom : 10px;
padding : 10px;
}

/*2020.04.07左揃えテキスト*/
.setsumei{
	width : 90%;
	margin : 1.0em;
  	padding: 0.5em;/*文字周りの余白*/
	text-align : left;
	line-height : 1.5;
}
.setsumei-ul ul{
	margin-left : 1.0em;
	line-height : 1.5;
}
.setsumei-ul 0l{
	margin-left : 1.0em;
	line-height : 1.5;
}
@media screen and (max-width: 840px) {
.setsumei{
	width : 100%;
	margin-left : 0em;
	margin-right : 0em;
	font-size : auto;
}
.setsumei-ul ul{
	margin-left : 0em;
}
.setsumei-ul ol{
	margin-left : 0em;
}
 } 
/*2020.04.07見出し*/
h1 {
  color: #446633;/*文字色*/
  border: solid 3px #446633;/*線色*/
  padding: 0.5em;/*文字周りの余白*/
  border-radius: 0.5em;/*角丸*/
}
@media screen and (max-width: 840px) {
h1{
	font-size:130%;
	font-weight: 900;
	text-align : left;
}
 } 
h2{
	border : 1px solid #446633;
	margin-top : 5px;
	margin-bottom : 5px;
	color : white;
	background-color : #446633;
	text-align : left;
  	padding: 0.5em;/*文字周りの余白*/
  	border-radius: 0.5em;/*角丸*/
}
h3{
	border : 1px dashed #446633;
	margin-top : 5px;
	margin-bottom : 5px;
	background-color : #c8fac8;
	text-align : left;
	padding: 0.5em;/*文字周りの余白*/
  	border-radius: 0.5em;/*角丸*/
}
h4{
	font-size : 1.3em;
	border-bottom : 1px solid;
	color : #446633;
 	text-align : left;
 	padding: 0.2em;/*文字周りの余白*/
}
h4:before{
	content : '□';
}
h5{
	font-size : 1.3em;
	border-bottom : 1px solid;
	margin-left : 3.0em;
	color : #446633;
 	text-align : left;
 	padding: 0.2em;/*文字周りの余白*/
}
h5:before{
	content : '■';
}
@media screen and (max-width: 840px) {
h5{
	margin-left : 1.0em;
}
 } 
/*3列横並び*/
*, *:before, *:after {
	box-sizing: border-box;
}
.col_3{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_3 > div{
	width: 30%;
	padding: 10px;
	margin : 5pt;
	border : 1px solid #446633;
}
@media screen and (max-width: 840px) {
	.col_3 > div{
		width: 100%;
	}
}
@media screen and (max-width: 480px) {
	.col_3 > div{
		width: 100%;
	}
}
/*2列横並び*/
*, *:before, *:after {
	box-sizing: border-box;
}
.col_2{
	width: 100%;
	display: flex;
	display: -ms-flexbox; /* IE10 */
	flex-wrap: wrap;
	-ms-flex-wrap: wrap; /* IE10 */
}
.col_2 > div{
	width: 50%;
	padding: 10px;
}
@media screen and (max-width: 840px) {
	.col_2 > div{
		width: 100%;
	}
}