@charset "utf-8";

.none {
	display: none;
}

.contentWrap, .contetWrap {
	background: #fcfaf5;
}
.contentWrap section,
.contetWrap section {
	padding: 2rem 0;
	border-bottom: 5px solid #fff;
}
h2  {
	color: #736357;
	font-weight: lighter;
	font-size: 1.6rem;
}

h2.ico_eco{
	border-left: none;
	line-height:2;
	padding:1rem 0 1rem 2rem;
	vertical-align: bottom;
}
h2.ico_eco::before{
	content: '';
    vertical-align: bottom;
    display: block;
    position: relative;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    box-sizing: border-box;
    left: -1.5rem;
    top: 2rem;
}

.bannerWrap h2 {
	text-align: center;
	border-radius:100%;
	box-shadow: 4px 4px 1px rgba(0,0,0,0.15),inset 6px 6px 1px rgba(0,0,0,0.15);
	display: inline-block;
	margin-bottom: 3rem;
}
.bannerWrap h2 span {
	text-align: center;
	border:#b4ab97 solid 3px;
	padding:3rem 1rem;
	display: inline-block;
	border-radius:100%;
	box-shadow: 1px 1px 1px rgba(255,255,255,1),inset 1px 1px 1px rgba(255,255,255,1);
	color: #000;
}

nav ul{
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.info_nav .nav{
	justify-content: space-between;
}

.info_nav ul.nav li{
	width: 20%;
	list-style:none;
}

ul.nav li {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.icon_img_box{
	background: #fff;
	width: 100%;
	border-radius: 100%;
	box-shadow: 3px 3px 1px rgba(0,0,0,0.15);
	transition:  ease;
	text-align: center;
	flex-shrink: 0;
}
.icon_img_box:hover{
	box-shadow: inset 3px 3px 1px rgba(0,0,0,0.15), inset -3px -3px 1px rgba(255,255,255,0.3);
}
.icon_img_box img{
	width: 50%;
	padding: 2rem;
}
li.school .icon_img_box:hover{
	background: #f7931e;
}
li.business .icon_img_box:hover{
	background: #907fbf;
}
li.map .icon_img_box:hover{
	background: #39b54a;
}
li.home .icon_img_box:hover{
	background: #e8546b;
}


.info_nav a p,.info_nav p{
	text-decoration:none;
	color: #000;
	font-size: 1.4rem;
	margin-top:1rem;
	
}

.info_nav a {
	text-decoration:none;
	display: block;
	width: 100%;
	text-align:center;
}

a.subnav {
	color: #8f856f;
	font-size: 0.75rem;
	padding:0.6rem 0.8rem;
	background: #fff;
	box-shadow: 0px 5px 1px rgba(0,0,0,0.15);
	width: 88%;
	display:block;
}
.subnav::after{
	content: '▼';
	color:#ed1c24;
	padding-left: 0.3rem;
}
ol.sub_list {
	box-shadow: 0px 5px 1px rgba(0,0,0,0.15);
	background:#fff;
	padding:1rem 0.2rem;
	width: 100%;
	display: none;
}
.info_nav .nav ol.sub_list li{
	list-style: decimal;
	width: 100%;
	display: list-item;
	margin-left: 2rem;
	padding-left: 1rem;
	font-size: 0.7rem;
}



.banner_area {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.bannerWrap .banner_area{
	justify-content: center;
}

.banner_01{
	width: 45%;
  padding-bottom: 2rem;
}
.banner_01 img {
	width: 100%;
	box-shadow: 5px 5px 8px rgba(0,0,0,0.2);
}

.banner_02{
	width: 100%;
}
.banner_02 img {
	width: 100%;
}

.banner_03{
	margin-bottom: 3rem;
}
.banner_03 img {
	height: 4.3rem;
    margin-right: 0.8rem;
}
.bannerWrap {
	text-align: center;
}
section.bannerWrap {
	background: #fff;
	padding-top: 5rem;
	padding-bottom: 10rem;
	}
.link_website {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top:0.5rem;
}
.link_website img{
	box-shadow:none;
	width: 6.5rem;
}
.link_txt {
	display: flex;
	justify-content: flex-end;
	margin-top: 0.5rem;
	color: #736357;
	text-decoration: none;
	font-size: 1.1rem;
}
.link_txt span{
	font-size: 2.2rem;
	line-height: 0;
    bottom: -0.3rem;
    position: relative;
}

footer {
	width: 100%;
	font-size: 0.6rem;
	text-align: center;
	padding-bottom:2rem;
}
.gotop {
	width: 100%;
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #000;
}
.gotop img {
	width:3.6rem;
}

.footer_area{
	text-align: center;
}
.footer_area a{
	width: 100%;
}
.logo {
	margin-top:3rem;
	margin-bottom:3rem;
	width: 10%;
}
.pagewrap.attention {
	text-align: left;
	margin-bottom: 2rem;

}

@media screen and (max-width:768px){
	.info_nav ul.nav li {
    width: 45%;
    margin-bottom: 2rem;
}
	.sp_column{
		flex-direction: column;
	}

	.bannerWrap .banner_area{
		justify-content: space-between;
		padding: 0 1rem;
	}
	.banner_03 {
		margin-bottom: 1rem;
		width:49%;
	}
	.banner_03 img{
		margin-left: 0;
		height: 3rem;
		margin-right: 0rem;
		width: 100%;
    	height: 100%;
	}
	.logo {
    margin-top: 2rem;
    margin-bottom: 2rem;
    width: 50%;
}
}

/* お知らせ */
.ncat1 {	/* WEB */
	background: #187fc3;
}
.ncat2 {	/* 催し */
	background: #e8546b;
}
.ncat3 {	/* 教材 */
	background: #187fc3;
}
.ncat4 {	/* 報告書 */
	background: #187fc3;
}
.ncat5 {	/* 公募 */
	background: #187fc3;
}
.ncat6 {	/* 市民調査 */
	background: #187fc3;
}
.ncat7 {	/* 助成等 */
	background: #187fc3;
}
.ncat8 {	/* 制度・計画 */
	background: #187fc3;
}
.ncat9 {	/* 出前授業 */
	background: #187fc3;
}
.ncat10 {	/* 施設 */
	background: #187fc3;
}
.ncat11 {	/* 人材 */
	background: #187fc3;
}
.ncat12 {	/* その他 */
	background: #187fc3;
}
span.new{
	background: #ea6025;
	color: #fff;
	font-size: 60%;
	padding:0.1rem 0.2rem;
	margin-right: 1em;
}

/*--------------------------------------------
topページのスライドナビゲーション
 --------------------------------------------*/
 
 header a{
 	text-decoration:none;
 }

  header a .wrapTitle h1:hover{
 	color: #999;
 }

 .wrapTitle {
	text-align: center;
	margin-top:2rem;
}
.wrapTitle h1 {

}
.wrapTitle h1 span{

}

.wrapTitle p {
	display: table-cell;
	vertical-align: middle;
	text-align: right;
}
.wrapTitle p a img {
	font-size: 100%;
	font-weight: bold;
	padding: 0 5px;
	text-decoration: none;	
}

@media screen and (max-width:768px){
	.wrapTitle {
		margin-top: 1rem;
	}
	.wrapTitle p{
		display: none;
	}
	.contentWrap section,
	.contetWrap section {
		padding:1rem 0;
	}
	h2 {
		font-size: 1.2rem;
	}
	h2.ico_eco {
		line-height:1.5;
		padding:0rem 0 1rem 2rem;
	}
	h2.ico_eco::before{
		top:1.3rem;
	}
	section.bannerWrap {
		padding-top: 1rem;
		padding-bottom: 5rem;
	}
	.bannerWrap h2 span {
		padding:2.6rem 1rem;
	}
	ol.sub_list {
		margin-bottom: 1rem;
		padding:0rem 0.2rem 0.5rem;
		overflow: hidden;
	}
	.info_nav .nav ol.sub_list li {
		margin-bottom:0rem;
	}
}

@media screen and (max-width:359px){
	.wrapTitle h1 img {
    	width: 100%;
		height: auto;
	}

}	

/*--------------------------------------------
ECO学習ページのTOP
 --------------------------------------------*/

.topBanner img{
	max-width: 780px;
	max-height: 112px;
	width: 100%;
	object-fit: cover;
	object-position: 0 100%;
}

.topBanner2{
	text-align: center;
}

.topBanner2 img{
	max-width: 745px;
	max-height: 190px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: right;
}

.topBanner3 img{
	max-width: 780px;
	max-height: 227px;
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: right;
}

.ecoNav01 {
	display: table;	 
}
.ecoNav01 ul {
	list-style: none;
}
.ecoNav01 li {
	display: table-cell;
	width: 195px;
}
.ecoNav01 li img {
	padding-left: 10px;
	padding-bottom: 10px;
}
.ecoNav02 {
	width: 100%;
	display: table;	 
}
.ecoNav02 ul {
	list-style: none;
}
.ecoNav02 li {
	display: table-cell;
	width: 190px;
	float:none !important;
}
.ecoNav02 li a{
	display: block;
}
.ecoNav02 li img{
	border: none;
}
.ecoNav02 li a:hover{
    background: none;
}
.ecoNav02 li a:hover img{
    visibility: hidden;
}

.inline {
	text-align: center;
}
.inline li,.inline div {
	display: inline-block;
}


.ecoTopSlide{
	width: 100%;
	display: table;
	margin: 0 auto;
}

.ecoTopSlide1,.ecoTopSlide2,.ecoTopSlide3,.ecoTopSlide4{
	width: 190px;
    float: none;
} 

.ecoTopSlide div span {
	display: none;
	position: absolute;
	top: 165px;
	left: 15px;
	width: 140px;
	font-size: 0.78em;
	line-height: 1.5;
	color: #000;
	text-align: justify;
}



.ecoBtn1 {
    background: url(../images/eco_btn_1_on.png) 0 0 no-repeat;
    width: 194px;
    height: 46px;
	float: left;
}
.ecoBtn2 {
    background: url(../images/eco_btn_2_on.png) 0 0 no-repeat;
    width: 194px;
    height: 46px;
	float: left;
}
.ecoBtn3 {
    background: url(../images/eco_btn_3_on.png) 0 0 no-repeat;
    width: 194px;
    height: 46px;
	float: left;
}
.ecoBtn4 {
    background: url(../images/eco_btn_4_on.png) 0 0 no-repeat;
    width: 194px;
    height: 46px;
	float: left;
}
.ecoNav03 {
	width: 100%;
	display: table;	 
}
.ecoNav03 ul {
	list-style: none;
}
.ecoNav03 li {
	display: table-cell;
	padding: 0 0 0 7px;
	width: 188px;
	vertical-align: top;
	position: relative;
}



@media screen and (max-width: 768px){
	
	.ecoNav01,.ecoNav03{
		display: none;
	}
	
}




.genreOpen {
	position: absolute;
	display: none;
	margin-top: -11px;
	width: 183px;
	height: 70px;
	background:url(../images/eco_genre_open1.png) 0 0 no-repeat;
	cursor: pointer;
	z-index: 100;
}

.genreOpen span {
	position: absolute;
	top: 6px;
	left: 30px;
	font-size: 0.8em;
	line-height: 1.4;
}

.forRead {
	display: none !important;	
}
 
.ecoTopWrap {
	margin-top: 30px;
	display: table;
	padding-left: 30px;
}

.ecoTopWrap a:focus, .ecoTopWrap div:focus {
	outline: none;	
}


.ecoBtmWrap {
	margin-top: 20px;
	display: table;
	background: url(../images/eco_card_hag.png) top left no-repeat;
	padding-left: 210px;
}

.ecoBtmWrap2 {
	margin-top: 20px;
	display: table;
}

.ecoBtmWrap a:focus, .ecoBtmWrap div:focus,
.ecoBtmSlide a:focus, .ecoBtmSlide div:focus{
	outline: none;	
}


.ecoBtmSlide {
	width: 100%;
	display: table;
	margin: 20px auto;
	position: relative;
}

.ecoBtmSlide div.hagugunn{
    float:none;
	width: 200px;
}

.ecoBtmSlide div{
	width: 185px;
	height: 350px;
    float: none;
}

.ecoBtmSlide div span {
	display: none;
	position: absolute;
	top: 115px;
	left: 15px;
	width: 155px;
	font-size: 0.78em;
	line-height: 1.5;
	color: #000;
	text-align: justify;
}
.ecoBtmSlide div.kidsyouth02,
.ecoBtmSlide div.kidsyouth03{
	position: relative;
	bottom: 0;
	height: 290px;
}


@media screen and (max-width: 739px){
	
	.ecoBtmSlide div.kidsyouth03{
		margin-top: 10px;
	}
	
}


.ecoNews div {
	width: 100%;
	height: 25px;
	display: table;
	margin-top: 35px;
	margin-bottom: 10px;
	background:url(../images/eco_leaves.png) left bottom no-repeat;
}
.ecoNews div h2 {
	color: #000;
	font-size: 1.2em;
	font-weight: bold;
	display: table-cell;
	vertical-align: bottom;
	float: left;
	margin: 0;
	padding: 0 0 0 35px;
	border: none;
}
.ecoNews div p {
	display: table-cell;
	vertical-align: top;
	float: right;
}
.ecoNews div p a {
	font-size: 0.9em;
	font-weight: bold;
	padding: 3px 30px 3px 2px;
	color: #555555;
	text-decoration: underline;
	background: url(../images/eco_arrow.png) right center no-repeat;
}
.ecoNews dl {
	max-width: 745px;
    width: 100%;
    float: right;
}
.ecoNews dt {
	display: block;
 	clear: left;
	float: left;
	width: 5.0em;
	font-weight: 600;
	font-size: 1.0em;
	padding: 5px 5px 2px 0;
}
.ecoNews dd {
	display: block;
	font-size: 0.9em;
	margin-left: 0;
	padding: 4px;
	border-bottom: 1px dashed #000;
	margin-bottom: 10px;
}
.ecoNews dd.sort2 {
	float: left;
	display:inline-block;
	line-height:1;
	padding-left: 0;
	padding-bottom: 2px;
	text-align: center;
	color: #fff;
	font-size: 0.8em;
	font-weight: bold;
	width: 85px;
	margin-right: 15px;
	border: none;
}
.ecoNews dd a  {
	font-size: 1.1em;
	font-weight: normal;
	color: #2e3192;
	text-decoration: none;
}

.govApproach {
	margin-top: 10px;
	width: 340px;
	float: left;
	clear: both
}
.corpApproach {
	margin-top: 10px;
	width: 340px;
	float: right
}
.govApproach h3, .corpApproach h3 {
	height: 25px;
	padding: 3px 3px 3px 35px;
	background: url(../images/eco_leaves.png) left bottom no-repeat;	
}
.govApproach dl, .corpApproach dl {
	border-bottom: 1px solid #ccc;
	padding: 15px 0 10px 35px;
	margin-bottom: 10px;
}
.govApproach dd, .corpApproach dd {
	padding: 2px 0;	
}
.govApproach dd a, .corpApproach dd a {
	color: #0000ff;
	text-decoration: none;
}
.govApproach p, .corpApproach p {
	text-align: right;	
}
.linkWrap {
	margin-top: 30px;
	height: 45px;
	display: table;
}
.linkWrap h3 {
	line-height: 45px;
	border-left: 5px solid #65af5e;
	padding-left: 10px;
	display: table-cell;
	width: 150px;
	font-size: 1.1em;
}
.linkWrap ul {
	list-style: none;
	display: table-cell;
	vertical-align: bottom;
}
.linkWrap li {
	display: table-cell;
	padding-left: 10px;
}


@media screen and (max-width: 320px){
	
	.linkWrap {
		margin-top: 30px;
		height: 90px;
		display:inline-block;
	}

	.linkWrap h3 {
		margin: 0 0 10px;
		display: block;
}	
	
	
}