.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
}

* html .clearfix {
	height: 1px;
	/*ﾂ･*//*/
	height: auto;
	overflow: hidden;
	/**/
}

article.enviro{margin-top:1em;overflow:hidden}

/*--nav f_l--*/
nav.f_l{float:left;width:20%;margin:2em 2em 0 0;}
/*
nav.f_l dl{margin-bottom:2em;line-height:2em}
nav.f_l dt,nav.f_l dd a{padding:.2em 0 .2em 1em; border-bottom:1px #fff solid;color:#fff}
nav.f_l dt{background:#7ab537}
nav.f_l dd a{background:#c5d707;display:block}
nav.f_l dd.now a{background:#f2af00}
*/

nav.f_l dl{line-height:2em; position:relative;border:1px #ccc solid; padding:1em 0 0;margin-bottom:.5em}
nav.f_l dt{background:#7ab537;color:#fff;position:absolute;top:-1em;left:-1px;padding:0 1em}
nav.f_l dd{border-top:1px #ccc dashed}
nav.f_l dt+dd{border-top:none;}
nav.f_l dd a,nav.f_l ul.child li a{display:block;padding:.2em 0 .2em 1em;}
nav.f_l li a{display:block;cursor:pointer}
nav.f_l a:hover{background:#f8febd}
nav.f_l dd.now a,nav.f_l li.now a.parent,.f_l ul.child li.now a{background:#f2af00;color:#fff}

nav.f_l ul.child{line-height:2em;border:1px #cecece solid;font-size:.9em;margin:0 auto .2em;display:none}

nav.f_l li.now a.parent+ul.child{display:block;}

nav.f_l ul.child li:not(:last-child){border-bottom:1px #cecece dashed;}

nav.f_l a.parent{padding:0 .5em;border-bottom:1px #999 solid;margin-bottom:.2em;border-left:5px solid}

nav.f_l li:nth-of-type(1) a.parent{border-left-color:#F2000B}
nav.f_l li:nth-of-type(2) a.parent{border-left-color:#F200EB}
nav.f_l li:nth-of-type(3) a.parent{border-left-color:#6800F2}
nav.f_l li:nth-of-type(4) a.parent{border-left-color:#006CF2}
nav.f_l li:nth-of-type(5) a.parent{border-left-color:#00F2D0}
nav.f_l li:nth-of-type(6) a.parent{border-left-color:#04F200}
nav.f_l li:nth-of-type(7) a.parent{border-left-color:#CDF200}

nav.f_l a.parent:after{content:"\3e";float:right;
-moz-transform:    rotate( 90deg );  /* Firefox用 */
-webkit-transform: rotate( 90deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( 90deg );  /* 古いOpera用 */
-ms-transform:     rotate( 90deg );  /* IE9用 */
transform: rotate( 90deg);
-webkit-transition: 0.4s;-moz-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;}

nav.f_l a.parent.rotate:after{
-moz-transform:    rotate( -90deg );  /* Firefox用 */
-webkit-transform: rotate( -90deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -90deg );  /* 古いOpera用 */
-ms-transform:     rotate( -90deg );  /* IE9用 */
transform: rotate( -90deg);
}

nav.f_l li.now a.parent:after{-moz-transform:    rotate( 90deg );  /* Firefox用 */
-webkit-transform: rotate( -90deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( -90deg );  /* 古いOpera用 */
-ms-transform:     rotate( -90deg );  /* IE9用 */
transform: rotate( -90deg);
}
nav.f_l li.now a.parent.rotate:after{
-moz-transform:    rotate( 90deg );  /* Firefox用 */
-webkit-transform: rotate( 90deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( 90deg );  /* 古いOpera用 */
-ms-transform:     rotate( 90deg );  /* IE9用 */
transform: rotate( 90deg);
}


/*--f_r--*/
div.f_r{overflow:hidden;margin-left:23%;}
#eventarea .event-list .f_r figure.f_r{float:right; margin-left:1em;width:40%}

/*--aside--*/
.enviro aside dl{width:49%;}
.enviro dl.f_r{float:right;}
.enviro dl.f_l{float:left;}
.enviro aside dt{font-size:1.6em; font-weight:bold; color:#7eb438; border-bottom:2px #ccc solid; padding:.5em 0}
.enviro aside dd{border-bottom:2px #ccc dashed; position:relative}
.enviro aside dd a{display:block;color:#000;text-decoration: underline;text-indent:2em;padding:.5em 0;}
.enviro aside dd:before{content:"\3e";color:#fff; background:#b5d631; padding:0 2px;font-size:.8em; text-decoration:none; position:absolute;top:1.2em;left:0;line-height:1em;-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;} 
.enviro aside dd a:hover{background:#f8febd}

.enviro aside dd:hover:before{left:.4em}

.enviro aside.detail dl{width:100%;}
.enviro aside.detail dt{padding:.5em 1em;margin-bottom:1em}
.enviro aside.detail dd a{text-indent:4em}
.enviro aside.detail dd:before{left:2em;font-size:.5em; top:1.4em;-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	-o-transition: 0.4s;
	transition: 0.4s;} 
.enviro aside.detail dd:hover:before{left:2.4em;}

/*--envlink--*/
#content .enviro .f_r h5{border:none;background:#59bdef;color:#fff; margin:1em auto;    padding: .4em 1em .3em;font-size: 1.2em !important;}

.enviro .envlink > li > a{display: block;color: #000;padding: .5em 0 .5em 2em;border-bottom: 2px #ccc dashed;position: relative;}
.enviro .envlink > li > a:before{content: "\3e";color: #fff;background: #fdbb41;padding: 0 2px;font-size: .8em;text-decoration: none;position: absolute;top: 1.2em;left:.5em;line-height: 1em;text-indent:0;-webkit-transition: 0.4s;-moz-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;}
.enviro .envlink > li a:hover{background:#FEF3BD;text-decoration: underline;}
.enviro .envlink > li > a:hover:before{left:.9em;} 

.enviro .envlink a.parent{cursor:pointer}
.enviro .envlink .child{display:none;}

.enviro .envlink .child{margin:1em auto; padding-left:2em;}
.enviro .envlink .child li{line-height:2em; margin-bottom:.5em}
.enviro .envlink .child a{display:block; position:relative; padding-left:2em;line-height:1.6em}
.enviro .envlink .child a:before{content:"\25a0";position:absolute;left:0;display:inline-block;color:#fd9c00; margin-right:.5em;font-size:.9em;text-indent:0;-webkit-transition: 0.4s;-moz-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;}
.enviro .envlink .child a:hover{text-decoration:none;}
.enviro .envlink .child a:hover:before{left:.4em;}

.enviro .envlink a.parent{font-weight:bold;}
.enviro .envlink a.parent:after{content:url(../img/com/arw_orn.png);text-indent:0;position:absolute;display:inline-block;right:.5em;-webkit-transition: 0.4s;-moz-transition: 0.4s;-o-transition: 0.4s;transition: 0.4s;}
.enviro .envlink a.parent.rotate:after{
-moz-transform:    rotate( 180deg );  /* Firefox用 */
-webkit-transform: rotate( 180deg );  /* Chrome,Safari,新しいOpera用 */
-o-transform:      rotate( 180deg );  /* 古いOpera用 */
-ms-transform:     rotate( 180deg );  /* IE9用 */
transform: rotate(180deg);}


.enviroment-link{padding:2em 1em 3em;}
.enviroment-link h2{padding: .4em 0 .4em 2em;margin-bottom: .4em;font-size: 24px;font-weight: bold;background: url("../img/com/icon_environment-info.png") no-repeat center left;}

.enviroment-link dl,.enviroment-link ul{width: 49%;font-size: .9em;}
.enviroment-link dl.f_l{float:left;border:1px #ccc solid;position:relative; padding:2em 1em 1em;margin:4.9em auto 0}
.enviroment-link ul.f_r{float:right;margin-top:3em}
.enviroment-link dt{font-size: 1.6em;font-weight: bold;color:#fff;background: #7eb438;padding: .2em 1em; display;inline-block;position:absolute; top:-1.3em; left:-1px;}
.enviroment-link dd{border-bottom: 2px #ccc dashed;position: relative;padding: 0;margin-bottom: 0;font-size:1.4em}

/*.enviroment-link dd:before{content: "\3e";
    color: #fff;
    background: #b5d631;
    padding: 1px 0 2px 2px;
    font-size: .8em;
    text-decoration: none;
    position: absolute;
    top: 1em !important;
    left: .5em;
    line-height: 1em;
    transform: none;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.enviroment-link dd:hover:before{left: .8em;}*/

.enviroment-link dd:nth-of-type(1){background:url(../img/enviro/env_icon1.gif)left no-repeat;}
.enviroment-link dd:nth-of-type(2){background:url(../img/enviro/env_icon2.gif)left no-repeat;}
.enviroment-link dd:nth-of-type(3){background:url(../img/enviro/env_icon3.gif)left no-repeat;}
.enviroment-link dd:nth-of-type(4){background:url(../img/enviro/env_icon4.gif)left no-repeat;}
.enviroment-link dd:nth-of-type(5){background:url(../img/enviro/env_icon5.gif)left no-repeat;}

.enviroment-link dd a{display: block;color: #000;text-decoration: underline;text-indent:2.5em;padding: .5em 0;}
.enviroment-link dd a:hover {background: #f8febd;}

.enviroment-link li{ margin-bottom:.5em;}
/*
.enviroment-link li a{display:block;color:#000;text-decoration:underline; padding:.3em 1em;border:1px #ccc solid;font-size:1.4em}
.enviroment-link li a:hover{background:#f8febd}
*/

.enviroment-link li a{display:block;color:#fff;text-decoration:underline; padding:.2em 1em;border:1px #7eb438 solid;font-size:1.4em;background:#7eb438;font-weight:bold}
.enviroment-link li a:hover{background:#fff;color:#7eb438}

@media only screen and (max-width: 768px){
/*--nav f_l--*/
nav.f_l{float:none;width:100%;margin:0 auto;}
nav.f_l dl{margin-bottom:.2em;line-height:2em}
nav.f_l dt,nav.f_l dd a{padding:.2em 1em; margin-bottom:2px}
nav.f_l dt{background:#7ab537;width:100%}
nav.f_l dd{display:inline-block;}

/*--f_r--*/
div.f_r{overflow:hidden;margin-left:0;}
#content div.f_r h4{margin:.5em 0}
#eventarea .event-list .f_r figure.f_r{float:none; margin-left:0;width:100%}

/*--aside--*/
.enviro aside dl{width:100%;}
.enviro dl.f_r{float:none;}
.enviro dl.f_l{float:none;}

.enviro aside.detail dt{padding:.5em;margin-bottom:.5em}
.enviro aside.detail dd a{text-indent:2em}
.enviro aside.detail dd:before{left:.5em;}
.enviro aside.detail dd:hover:before{left:1em;} 

.enviro .envlink .child{padding-left:.5em;}
.enviro .envlink .child a{padding-left:1.5em;}

.enviroment-link dl{width:95%}
.enviroment-link dl.f_l,.enviroment-link ul.f_r{float:none; margin-bottom:2em};
.enviroment-link dd{font-size:1.1em}

.enviroment-link ul.f_r{width:100%;margin-top:0; padding:0 1em}
.enviroment-link li{display:inline-block;width:49%}
}