@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-main: #93278F;
$color-mainhalf: #E9D4E9;

#wrapper{
	overflow: hidden;
	p {
		text-align: justify;
	}
}

//header-title
header{
	.top-title{
		&:before{
			content: "新見市社協について";
		}
	}
}
//header-title------ここまで

//what-is
#what-is {
	p {
		a {
			color: $color-main;
			text-decoration: underline;
			&::after {
				font-family: "Font Awesome 5 Free";
				content: "\f35d";
				font-weight: 900;
				margin-left: 3px;
			}
			&:hover {
				opacity: 0.7;
			}
		}
		span {
			color: $color-main;
		}
	}
}
//what-is------ここまで

//membership-fee
#membership-fee {
	ul {
		li {
			@include sm {
				width: 100%;
			}
		}
	}
	.mf-box {
		display: flex;
		align-items: center;
		margin-bottom: 2rem;
		@include sm {
			display: block;
		}
		h5 {
			width: 12%;
			margin: 0;
			@include md {
				width: 15%;
			}
			@include sm {
				width: 100%;
				margin-bottom: 1rem;
			}
		}
		ul {
			margin-bottom: 0;
			a {
				margin-bottom: 0;
				@include sm {
					margin-bottom: 1rem;
				}
			}
		}
	}
}
//membership-fee------ここまで

//donation
#donation {
	dl {
		padding: 0 1.5rem;
		display: flex;
		@include sm {
			display: block;
		}
		&:last-child {
			margin-bottom: 0
		}
		dt {
			color: #fff;
			font-size: 20px;
			font-size: 2rem;
			background-color: $color-main;
			padding: 1rem;
			height: 100%;
			@include sm {
				padding: 0.7rem;
			}
		}
		dd {
			ul {
				padding-left: 2rem;
				@include xs {
					padding-left: 1rem;
				}
				li {
					display: block;
				}
			}
		}
	}
}
//donation------ここまで

//budgetn
#budgetn {
	ul {
		li {
			width: 100%;
			.pdf-link {
				@include md {
					margin-right: 0;
				}
			}
		}
	}
}
//budgetn------ここまで

//recruit
#recruit {
	ul {
		li {
			width: 100%;
		}
	}
	h4 {
		@include md {
			font-size: 19.5px;
			font-size: 1.95rem;
		}
		@include sm {
			font-size: 20px;
			font-size: 2rem;
		}
	}
}
//recruit------ここまで

//council
#council {
	ul {
		li {
			width: 100%;
		}
	}
}
//council------ここまで

//location
#location {
	dl {
		margin-top: 3rem;
		dt {
			background-color: $color-main;
			color: #fff;
			text-align: center;
			padding: 0.5rem;
			letter-spacing: 0.1em;
			font-size: 18px;
			font-size: 1.8rem;
		}
	}
	table {
		width: 100%;
		tr {
			&:first-child {
				td {
					padding: 0;
				}
			}
		}
		th {
			text-align: center;
			width: 13%;
			padding: 0;
			line-height: 1.4;
			@include md {
				width: 15%;
			}
			@include sm {
				width: 100%;
				display: block;
				padding: 0.5rem;
				border-bottom: solid 1px rgba(147,39,143,0.5);
			}
		}
		td {
			line-height: 1.4;
			@include sm {
				display: block;
				text-align: center;
			}
			ul {
				padding-left: 0;
				display: inline-block;
				text-align: left;
				margin-bottom: 0;
				li {
					display: block;
					margin-bottom: 5px;
					@include xs {
						margin-bottom: 1rem;
					}
					&:last-child {
						margin-bottom: 0;
					}
				}
			}
			a {
				color: $color-main;
				&:hover {
					color: $color-main;
					opacity: 0.7;
				}
			}
		}
	}
	iframe {
		display: block;
		width: 100%;
		height: 170px;
	}
}
//location------ここまで