@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-g1: #6bc2b4;
$color-g2: #339999;

section {
	padding-bottom: 10rem;
	@include md {
		padding-bottom: 8rem;
	}
	@include xs {
		padding-bottom: 6rem;
	}
}

h3{
	font-size: 30px;
	font-size: 3rem;
	@include sm {
		font-size: 23px;
		font-size: 2.3rem;
	}
	@include xs {
		font-size: 20px;
		font-size: 2rem;
	}
}

h4 {
	font-size: 20px;
	font-size: 2rem;
	font-weight: 600;
	color: $color-g2;
	margin-bottom: 1rem;
}

//volunteer-information
#volunteer-information {
	.latest {
		margin: 4rem 0 3rem 6rem;
		a {
			position: relative;
			display: inline-block;
			img {
				display: block;
				width: 182px;
				height: 228px;
				z-index: 1;
			}
			&::before {
				content: "";
				position: absolute;
				display: inline-block;
				background-image: url("../img/latest.svg");
				width: 78px;
				height: 78px;
				top: -30px;
				left: -39px;
				z-index: 2;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
	h5 {
		font-size: 20px;
		font-size: 2rem;
		font-weight: 600;
	}
	ul {
		margin: 0 -0.5rem 4rem;
		li {
			padding: 0 0.5rem;
		}
	}
	.pdf-link {
		width: 100%;
	}
	p {
		margin-bottom: 3rem;
	}
}

//point
#point {
	p {
		margin-bottom: 2rem;
	}
}

//organization
#organization {
	.row {
		margin: 0 -1rem;
		&>div {
			padding: 0 1rem;
		}
		.organization-left {
			width: 30%;
			margin-bottom: 2rem;
			@include md {
				width: 40%;
				margin: 0 auto 2rem;
			}
			@include sm {
				width: 70%;
			}
			@include xs {
				width: 100%;
			}
			img {
				width: 100%;
			}
		}
		.organization-right {
			width: 70%;
			margin-bottom: 6rem;
			@include md {
				width: 60%;
			}
			@include sm {
				width: 100%;
			}
			table {
				width: 100%;
				th {
					width: 94px;
					@include xs {
						display: table-cell;
						width: 80px;
					}
				}
				td {
					padding: 1rem 2rem;
					@include xs {
						padding: 1rem;
					}
				}
			}
			p {
				span {
					font-size: 18px;
					font-size: 1.8rem;
					font-weight: 600;
					color: #ca464f;
				}
			}
			.pdf-link {
				width: 85%;
				@include lg {
					width: 90%;
				}
				@include md {
					width: 100%;
				}
				@include md {
					width: 100%;
					padding: 1rem 2rem 1rem 4rem;
				}
			}
		}
	}
}