@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xl: 1399px;
$lg: 1199px;
$md: 991px;
$sm: 767px;
$xs: 575px;

@mixin xl {
  @media screen and (max-width: ($xl)) {
    @content;
  }
}
@mixin lg {
  @media screen and (max-width: ($lg)) {
    @content;
  }
}
@mixin md {
  @media screen and (max-width: ($md)) {
    @content;
  }
}
@mixin sm {
  @media screen and (max-width: ($sm)) {
    @content;
  }
}
@mixin xs {
  @media screen and (max-width: ($xs)) {
    @content;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$color-pink: #ed848b;
$color-blue: #007ac5;
$color-yellow: #fff2cb;
$color-orange: #f8ad4e;


//全体-----------------------------------
.headline {
	margin-top: 0rem;
	&::before {
		content: "\f4be";
	}
}

#community-project,#disaster,#donation {
	margin-bottom: 4rem;
}

//.ac-menu {
//	margin-top: 2rem;
//	margin-bottom: 0rem;
//	@include sm {
//		margin-top: 1.3rem;
//	}
//}

.links {
	margin-top: 2rem;
	li {
		a {
			@include lg {
				width: 60%;
			}
			@include md {
				width: 50%;
			}
			@include sm {
				width: 70%;
			}
			@include xs {
				width: 100%;
			}
		}
	}
}

h3 {
	margin-top: 3rem;
}

p {
	text-align: justify;
}


//「申請書等についてはこちら」のリンクアイコン------------------------
.links .paper-icon {
	justify-content: center;
		&::before {
			font-family: "Font Awesome 5 Free";
			content: "\f0c5";
			font-weight: 600;
			font-size: 2rem;
			color: #808080;
			padding: 10px 10px 10px 0px;
		}
		&::after {
			font-family: "Font Awesome 5 Free";
			content: "\f138";
			font-weight: 600;
			color: $color-pink;
			font-size: 2rem;
			padding: 10px 0px 10px 10px;
		}
}



//community-project 地域福祉活動計画-----------------------------------

//community-development　ふれあいのまちづくり事業-----------------------
#community-development {
	span {
		font-weight: bold;
		color: $color-blue;
	}
	#committee-member {
		dd {
			padding-left: 2em;
		}
		img {
			margin-top: 0.5rem;
			height: 195px;
		}
	}
}

//community-promotion　地域福祉活動推進事業-----------------------
#community-promotion {
	#fureai-salon {
		section {
			table {
				tr {
					th {
						width: 24%;
						@include md {
							width: 20%;
						}
						@include xs {
							width: 100%;
							display: block;
							text-align-last: inherit;
						}
					}
					td {
						padding: 1rem;
						line-height: 1.5em;
						padding-left: 2rem;
						text-align: justify;
						@include xs {
							width: 100%;
							display: block;
							padding-left: 1rem;
						}
					}
				}
			}
		}
	}
	#elderly-support {
		.accordion-title {
			&::before {
				@include xs {
					top: 18px;	
				}
			}
		}
		img {
			margin-top: 0.5rem;
			height: 100px;
			margin-bottom: 3rem;
		}
	}
	#handicapped-support {
		.inner {
			padding-bottom: 2rem;
		}
	}
	#childcare-support {
		img {
			margin-top: 0.5rem;
			height: 150px;
			margin-bottom: 0rem;
		}
		.inner {
			padding-bottom: 2rem;
		}
	}
	#lending-support {
		section {
			table {
				tr {
					th {
						width: 30%;
						@include lg {
							width: 25%;
						}
						@include md {
							width: 21%;
						}
						@include sm {
							width: 25%;
						}
						@include xs {
							width: 100%;
							display: block;
							text-align-last: inherit;
						}
					}
					td {
						padding: 1rem;
						line-height: 1.5em;
						padding-left: 2rem;
						text-align: justify;
						@include xs {
							width: 100%;
							display: block;
							padding-left: 1rem;
						}
					}
				}
			}
		}
	}
}

//volunteer　ボランティアセンター活動事業-----------------------
#volunteer {
	.headline {
		@include xs {
			font-size: 20px;
			font-size: 2rem;
		}
	}
	#register-mediation {
		.link-icon {
			@include xs {
				font-size: 13px;
				font-size: 1.3rem;
			}
		}
	}
	#student-volunteer {
		.accordion-title {
			@include lg {
				font-size: 19px;
				font-size: 1.9rem;
			}
			@include xs {
				font-size: 15px;
				font-size: 1.5rem;
			}
			&::before {
				@include sm {
					top: 18px;	
				}
			}
		}
		.links li a {
			@include xs {
				font-size: 13px;
				font-size: 1.3rem;
			}
		}
	}
	#summer-volunteer {
		.pdf-icon {
			@include xs {
				font-size: 13px;
				font-size: 1.3rem;
			}
		}
		img {
			height: 150px;
			margin-bottom: 0rem;
			@include xs {
				height: revert;
			}
		}
		.inner {
			padding-bottom: 2rem;
		}
	}
	#lecture {
		.table_container {
			@include xs {
				width: 90%;
				margin: auto;
				overflow: auto;
			}
		}
		table {
			@include sm {
				width: 90%;
				font-size: 15px;
				font-size: 1.5rem;
			}
			@include xs {
				width: 450px;
			}
			tr {
				@include xs {
					display: flex;
				}
			}
			th,td {
				border-right: 1px dotted #979797;
				@include xs {
					overflow: auto;
				}
				&:last-child {
					border-right: none;
					@include xs {
						width: 75%;
					}
				}
			}
		}
	}
	#disaster-volunteer {
		.inner {
			padding-bottom: 2rem;
		}
	}
}