@charset "UTF-8";
/*******************************************************************************
	サイト名：松山市青少年育成市民会議
	作成会社：Fellow System
--------------------------------------------------------------------------------
 No.│   日付   │区分│						内  容
━━┿━━━━━┿━━┿━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 001│2020.05│新規│[V1.00] 山本
*******************************************************************************/

/*******************************************************************************
	デフォルトセッティング
--------------------------------------------------------------------------------
	適応：全部
*******************************************************************************/
.page_container {
	width: 90%;
	margin: 0 auto;
	margin-top: 30px;
	margin-bottom: 100px;
}
.offical_supporter_title {
	text-align: center;
}
.offical_supporter_title img {
	/* max-width: 546.95px; */
	max-width: 547px;
	width: 100%;
	margin: auto;
}
.offical_supporter_title p {
	margin-top: 35px;
	font-weight: 400;
	font-size: 15px;
	line-height: 2;
}
.matters_container {
	max-width: 1000px;
	margin: 0 auto;
	padding-top: 20px;
}
.matters_container span {
	margin-right: 15px;
}
.matters_container .metters_title {
	display: flex;
	margin-bottom: 15px;
	font-weight: 700;
	font-size: 27px;
	align-items: center;
}
.metters_left {
	float: left;
	max-width: 574px;
}
.metters_left p {
	color: #343434;
	font-weight: 400;
	font-size: 14px;
	line-height: 2;
}
.metters_left ol {
	color: #343434;
	font-weight: 400;
	font-size: 14px;
	line-height: 2;
}
.metters_left ol li {
	position: relative;
}
#list_1::before {
	content: "\02460";
}
#list_2::before {
	content: "\02461";
}
#list_3::before {
	content: "\02462";
}
#list_4::before {
	content: "\02463";
}
.metters_right {
	float: right;
	padding-left: 10px;
	line-height: 2;
}
.metters_right dt {
	font-weight: 400;
	font-size: 14px;
}
.metters_right dd {
	font-weight: 400;
	font-size: 14px;
	text-indent: 1em;
}
.download_button_wrap {
	margin-top: 40px;
	margin-bottom: 60px;
}
.download_button_wrap a {
	max-width: 487px;
	width: 100%;
	height: 70px;
	margin: 0 auto;
	margin-top: 10px;
	border: 1px solid;
	border-radius: 37px;
	box-shadow: 0px 3px 6px rgb(0 0 0 / 16%);
	background-color: #f0f0f0;
	color: #000000;
	font-weight: bold;
	font-size: 30px;
	flex-direction: row;
}
.download_button_wrap a i {
	margin-right: 20px;
	font-size: 32px;
}
.supporter_list-title {
	max-width: 568px;
	width: 90%;
	margin: 0 auto;
}
.supporter_list-title img {
	width: 100%;
}
.supporter_list-outline {
	margin-top: 25px;
	font-size: 18px;
	text-align: center;
}
.supporter_list {
	margin: 0 auto;
	margin-top: 55px;
}
.supporter_list ul {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}
.supporter_list ul li {
	max-width: 310px;
	width: 31%;
	filter: drop-shadow(0px 3px 6px rgba(0, 0, 0, 0.16));
}

.supporter_list ul li img {
	width: 100%;
	height: auto;
	border: 1px solid #000000;
}

.supporter_foot_text {
	margin-top: 50px;
	font-size: 14px;
	text-align: center;
}

@media screen and (min-width: 768px) {
	.supporter_list-outline br {
		display: none;
	}
	.supporter_list {
		max-width: 1000px;
		width: 95%;
	}
	.supporter_list ul li {
		width: 31%;
	}
	.supporter_list ul li:not(:nth-child(-n+3)) {
		margin-top: 40px;
	}
	.supporter_list ul li:not(:nth-child(3n+1)) {
		margin-left: 3.5%;
	}
}
@media screen and (max-width: 767px) {
	.page_container {
		width: 85%;
	}
	.offical_supporter_title {
		text-align: left;
	}
	.offical_supporter_title p {
		margin-top: 20px;
		font-size: 13px;
		line-height: 1.6;
	}
	.offical_supporter_title p br {
		display: none;
	}
	.metters_title {
		font-size: 23px;
		justify-content: center;
	}
	.left_span_img img {
		width: 45px;
	}
	.metters_left {
		float: none;
		line-height: 1.6;
	}
	.metters_right {
		float: none;
		padding-left: 0;
		line-height: 1.6;
	}
	.download_button_wrap {
		margin-top: 25px;
		margin-bottom: 40px;
	}
	.download_button_wrap a {
		height: 60px;
		font-size: 20px;
	}
	.download_button_wrap a i {
		margin-right: 10px;
		font-size: 20px;
	}
	.supporter_list-outline {
		margin-top: 20px;
		font-size: 14px;
	}
	.supporter_list {
		max-width: 650px;
		width: 100%;
		margin-top: 35px;
	}

	@media screen and (min-width: 375px) {
		.supporter_list ul li {
			width: 47.6924%;
		}
		.supporter_list ul li:not(:nth-child(-n+2)) {
			margin-top: 25px;
		}
		.supporter_list ul li:not(:nth-child(2n+1)) {
			margin-left: 4.6154%;
		}
	}
	@media screen and (max-width: 374px) {
		.supporter_list ul li {
			width: 100%;
			margin: 0 auto;
		}
		.supporter_list ul li:not(:first-child) {
			margin-top: 25px;
		}
	}
}