@charset "utf-8";
/*topイメージ*/
.top_img_area { position: relative; width: 100%; background: url("../img/header_photo.png") no-repeat; background-size: cover; max-width: 1400px; min-width: 1180px; margin: 20px auto 0 auto;}
.top_img_area:before { content:""; display: block; padding-top: 47.2%; }
.top_img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }

/*お知らせ*/
#oshirase { width: 800px; margin: 0 auto; }
.kiji_area li { border-bottom: dotted 2px #CECEBF; margin: 0;}
.kiji_area li:first-of-type { border-top: dotted 2px #CECEBF; margin-top: 30px; }
.kiji { display: flex; padding: 10px 0; }
.kiji dt { width: 120px; height: 38px; line-height: 38px; text-align: center; background: #EDF4E9; border-radius: 20px;}
.kiji dd { width: 680px; margin-top: 10px; padding-left: 20px; }
.kiji dd a { color: #222; text-decoration: underline; }

/* ごみの分別歩法 */
#gomi_separate {
    margin: 20px auto 30px auto;
    padding: 0px;
    width: 100%;
    max-width: 1400px;
    min-width: 1180px;
    aspect-ratio: 1 / 0.33;
    background-repeat: no-repeat;
    background-position: bottom;
    background-image: url(../img/chara/separate_back2.jpg);
    background-size: 85%;
    position: relative;
}
#separate_chara { margin: 0px; padding: 0px; width: 15%; height: auto; position: absolute; top: 0%; left: 9%; z-index: 2; }
#gomi_separate ul { margin: 0px auto; padding: 5.5% 0px 0px 0px; }
#gomi_separate li { margin: 0px; padding: 0px; width: 100%; text-align: center; }
#gomi_separate li:first-child span { margin: 0px auto; padding: 1.2% 0px; width: 100%; max-width: 40%; color: #fff; font-size: 22px; letter-spacing: 0.16em; background: #005BAC; border-radius: 20px; display: block; }
#gomi_separate li:nth-child(2) { margin: 2% auto 1.5% auto; width: 52%; font-size: 16px; line-height: 140%; }
.b_separate { margin: 0 0 20px 0; padding: 0px; width: 100%; text-align: center; }
.b_separate a { margin: 0px; padding: 0px; }
.b_separate a:nth-of-type(2) { display: none; }
.b_separate img { margin: 0px; padding: 0px; width: 390px; height: auto; }

/* ごみの持込み */
#gomi_in { margin: 0px auto; padding: 0px; width: 100%; max-width: 1400px; min-width: 1180px; aspect-ratio: 1 / 0.34; background: url(../img/chara/in_back.jpg) center center no-repeat; background-size: 85%; position: relative; }
#in_chara { margin: 0px; padding: 0px; width: 15%; height: auto; position: absolute; top: -7%; right: 11%; z-index: 2; }
#in_chara_m { display: none; }
#in_gomi { margin: 0px; padding: 0px; width: 13.5%; height: auto; position: absolute; bottom: 12%; left: 13%; z-index: 3; }
#gomi_in ul { margin: 0px auto; padding: 6% 0px 0px 0px; }
#gomi_in * { box-sizing: border-box; }
#gomi_in li { margin: 0px; padding: 0px; width: 100%; text-align: center; }
#gomi_in li:first-child span { margin: 0px auto; padding: 1.2% 0px; width: 100%; max-width: 40%; color: #fff; font-size: 22px; letter-spacing: 0.16em; background: #009944; border-radius: 20px; display: block; }
#gomi_in li:nth-child(2) { margin: 1.2% auto; width: 49%; font-size: 22px; font-weight: 500; line-height: 140%; letter-spacing: 0.2em; }
#gomi_in li:nth-child(3) { margin: 1.2% auto 1.6% auto; padding: 1% 2%; width: 54%; background: #fff; border-radius: 50px; }
#gomi_in li:nth-child(3) div { margin: 0px; padding: 0px 0px 2% 0px; width: 100%; font-size: 14px; }
#gomi_in li:nth-child(3) dl { margin: 0px; padding: 0px; width: 100%; display: flex; }
#gomi_in li:nth-child(3) dt { margin: 0px; padding: 0px 0px 0px 2.4%; width: 50%; color: #009944; font-size: 14px; text-align: left; }
#gomi_in li:nth-child(3) dt span { margin: 0px; padding: 0px 0px 2% 0px; width: 100%; color: #000; font-size: 23px; font-weight: 500; display: block; }
#gomi_in li:nth-child(3) dd { margin: 0px; padding: 0px; width: 50%; text-align: left; background: url(../img/chara/in_tel_mark.jpg) 6% center no-repeat; background-size: 12%; }
#gomi_in li:nth-child(3) dd span { margin: 0px; padding: 0px 0px 0px 20%; color: #009944; font-size: 250%; font-weight: 500; line-height: 100%; }
#b_in { margin: 0px auto; padding: 0px; width: 100%; text-align: center; }
#b_in a { margin: 0px; padding: 0px; }
#b_in a:nth-of-type(2) { display: none; }
#b_in img { margin: 0px; padding: 0px; width: 370px; height: auto; }

/* ご施設見学申込み */
#gomi_study { margin: 0px auto; padding: 0px; width: 100%; max-width: 1400px; min-width: 1180px; aspect-ratio: 1 / 0.369; background: url(../img/chara/study_back.jpg) center center no-repeat; background-size: 85%; position: relative; }
#study_photo { margin: 0px; padding: 0px; width: 21%; height: auto; position: absolute; top: 0%; left: 7%; z-index: 5; }
#study_gomi { margin: 0px; padding: 0px; width: 11%; height: auto; position: absolute; bottom: 20%; right: 12%; z-index: 6; }
#gomi_study ul { margin: 0px auto; padding: 9.5% 0px 0px 0px; }
#gomi_study * { box-sizing: border-box; }
#gomi_study li { margin: 0px; padding: 0px; width: 100%; text-align: center; }
#gomi_study li:first-child span { margin: 0px auto; padding: 1.2% 0px; width: 100%; max-width: 40%; color: #fff; font-size: 22px; letter-spacing: 0.16em; background: #005bac; border-radius: 20px; display: block; }
#gomi_study li:nth-child(2) { margin: 1.8% auto 1.4% auto; width: 49%; font-size: 16px; line-height: 180%; }
#gomi_study li:last-child { margin: 0px auto; padding: 1% 2%; width: 100%; }
#b_study { margin: 0px auto; padding: 0px; width: 100%; text-align: center; }
#b_study a { margin: 0px; padding: 0px; width: 100%; }
#b_study a:nth-of-type(2) { display: none; }
#b_study img { margin: 0px; padding: 0px; width: 316px; height: auto; }

/**/
.botm_navi_area { width: 100%; padding: 40px 0; background: url("../img/masu_bk.png");}
.botm_navi1 { display: flex; flex-wrap: wrap; justify-content:space-around; width: 1100px; margin: 0 auto; }
.botm_navi2 { display: flex; flex-wrap: wrap; justify-content:space-around; width: 750px; margin: 40px auto 0 auto; }

@media screen and (max-width: 800px) {
	/*topイメージ*/
	.top_img_box { padding: 0 2%;}
	.top_img_area { position: relative; width: 100%; background: url("../img/header_photo_m.png") no-repeat; background-size: cover; max-width: 800px; min-width: 100%; margin: 0px; }
	.top_img_area:before { content:""; display: block; padding-top: 78.44%; }
	.top_img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; }
	
	/*お知らせ*/
	#oshirase { max-width: 640px; width: 100%; margin: 0 auto; padding: 0 3%;}
	.kiji_area li { }
	.kiji_area li:first-of-type { }
	.kiji { display: block; padding: 10px 3%; }
	.kiji dt { }
	.kiji dd { width: 100%; padding: 0; line-height: 140%; font-size: 12px; }
	.kiji dd a { }
	
	/* ごみの分別方法 */
	#gomi_separate {
    min-width: 100%;
    max-width: 100%;
    aspect-ratio: 1 / 0.734;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(../img/chara/separate_back_m2.jpg);
    background-size: 94%;
	margin: 5px auto;
}
	#separate_chara { width: 26%; top: 0%; left: 4%; }
	#gomi_separate ul { padding: 26% 0px 20px 0px; }
	#gomi_separate li:first-child span { padding: 2.2% 0px; max-width: 50%; font-size: 3.8vw; letter-spacing: 0.18em; border-radius: 40px; }
	#gomi_separate li:nth-child(2) { margin: 2.6% auto; width: 84%; font-size: 3vw; }
	.b_separate { margin: 0 0 15px 0; width: 100%; }
	.b_separate a:nth-of-type(1) { display: none; }
	.b_separate a:nth-of-type(2) { display: inline; }
	.b_separate img { width: 80%; }
	
	/* ごみの持込み */
	#gomi_in { max-width: 100%; min-width: 100%; aspect-ratio: 1 / 1.066; background: url(../img/chara/in_back_m.jpg) center 84% no-repeat; background-size: 94%; }
	#in_chara { display: none; }
	#in_chara_m { width: 26%; height: auto; position: absolute; top: 0%; right: 2%; z-index: 4; display: block; }
	#in_gomi { width: 25%; height: auto; position: absolute; top: 0%; left: 2%; }
	#gomi_in ul { margin: 0px auto; padding: 34.5% 0px 0px 0px; }
	#gomi_in li:first-child span { padding: 2.2% 0px; width: 100%; max-width: 60%; font-size: 3.8vw; letter-spacing: 0.18em; border-radius: 40px; }
	#gomi_in li:nth-child(2) { margin: 2% auto; width: 90%; font-size: 3.5vw; font-weight: 500; line-height: 140%; letter-spacing: 0.05em; }
	#gomi_in li:nth-child(3) { margin: 2.4% auto 3.2% auto; padding: 2.4% 4%; width: 86%; border-radius: 130px; }
	#gomi_in li:nth-child(3) div { margin: 0px; padding: 0px 0px 2% 0px; width: 100%; font-size: 3vw; }
	#gomi_in li:nth-child(3) dl { display: block; }
	#gomi_in li:nth-child(3) dt {padding: 0px; width: 100%; font-size: 2.6vw; text-align: center; }
	#gomi_in li:nth-child(3) dt span { padding: 0px 0px 1.2% 0px; width: 100%; font-size: 4.2vw; }
	#gomi_in li:nth-child(3) dd { padding: 1% 0px 0px 0px; width: 100%; text-align: center; background: url(../img/chara/in_tel_mark.jpg) 13% 100% no-repeat; background-size: 8%; }
	#gomi_in li:nth-child(3) dd span { padding: 0px 0px 0px 10%; font-size: 7vw; letter-spacing: 0.06em; }
	#b_in a:nth-of-type(1) { display: none; }
	#b_in a:nth-of-type(2) { display: inline; }
	#b_in img { width: 60%; height: auto; }
	
	/* ご施設見学申込み */
	#gomi_study { max-width: 100%; min-width: 100%; aspect-ratio: 1 / 0.667; background: url(../img/chara/study_back_m.jpg) center 84% no-repeat; background-size: 94%; }
	#study_photo { width: 26%; top: 0%; left: auto; right: 3%; }
	#study_gomi { width: 21%; bottom: 20%; left: 5%; right: auto; top: 9%; }
	#gomi_study ul { padding:26% 0px 0px 0px; }
	#gomi_study li:first-child span { padding: 2.2% 0px; width: 100%; max-width: 60%; font-size: 3.8vw; letter-spacing: 0.18em; border-radius: 40px; }
	#gomi_study li:nth-child(2) { margin: 1.8% auto 1.4% auto; width: 90%; font-size: 3vw; line-height: 180%; }
	#b_study a:nth-of-type(1) { display: none; }
	#b_study a:nth-of-type(2) { display: inline; }
	#b_study img { width: 60%; height: auto; }
	
	/**/
	.botm_navi_area { width: 100%; padding: 0px 0 30px 0; background: url("../img/masu_bk.png");}
	.botm_navi1 { display: block; width: 100%; margin: 0; text-align: center; }
	.botm_navi1 li { padding: 30px 6% 0;}
	.botm_navi1 img { max-width: 530px; width: 100%; height: auto; }
	.botm_navi2 { display: block; width: 100%; margin: 0; text-align: center;}
	.botm_navi2 li {  padding: 30px 10% 0;}
	.botm_navi2 img { max-width: 404px; width: 100%; height: auto;}


}
@media screen and (max-width: 460px) {
	
	.bunbetsu_area { position: relative; width: 100%; background: url("../img/bg_gomi_bunbetsu_m2.png") no-repeat; background-size: cover; max-width: 800px; min-width: 100%; margin: 0px; }
	.bunbetsu_area:before { content:""; display: block; padding-top: 88.23%; }

	
	.bunbetsu_title_area { text-align: center; margin: 25% 0 0 0; padding: 0 25%;}
	.bunbetsu_title { max-width: 300px; width: 100%; font-size: 14px; margin: 0 auto 0 auto; height: 35px;  line-height: 35px; }
	.area_text_normal { font-size: 12px; margin: 4% 0 4% 0; }
	
	
	
}