@charset "UTF-8";
/* CSS Document */
//ブレイクポイントを指定------ここから
$xxl:1899px;
$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;
  }
}
//ブレイクポイントを指定------ここまで

//メインカラー指定
$main100: #0079bf;
$main90: #1986c5;
$main70: #4ca1d2;
$main10: #e5f2f9;


article {
	padding: 3rem 0 0 0;
}

#mainimage {
	position: relative;
	padding-top: 3rem;
	@include md {
		padding-top: 0;
	}
	.swiper-container {
		position: relative;
		.swiper-img {
			max-width: 100%;
			height: 720px;
			background-position: bottom;
			@include xl {
				height: 560px;
			}
			@include lg {
				height: 450px;
			}
			@include md {
				height: 330px;
			}
			@include sm {
				height: 310px;
			}
			@include xs {
				height: 230px;
			}
		}
		.img1 {
			background-image: url("../img/top-slide-01.jpg");
			background-size: cover;
			background-repeat:no-repeat;
			@include sm {
				background-image: url("../img/top-slide-sm01.jpg");
			}
		}
		.img2 {
			background-image: url("../img/top-slide-02.jpg");
			background-size: cover;
			background-repeat:no-repeat; 
			@include sm {
				background-image: url("../img/top-slide-sm02.jpg");
			}
		}
		.img3 {
			background-image: url("../img/top-slide-03.jpg");
			background-size: cover;
			background-repeat:no-repeat;
			@include sm {
				background-image: url("../img/top-slide-sm03.jpg");
			}
		}
		.img4 {
			background-image: url("../img/top-slide-04.jpg");
			background-size: cover;
			background-repeat:no-repeat; 
			@include sm {
				background-image: url("../img/top-slide-sm04.jpg");
			}
		}
		.mainimage-parts {
			position: absolute;
			&:first-of-type {
				bottom: 0;
				z-index: 2;
			}
			&:nth-of-type(2) {
				bottom: -3rem;
				right: 8%;
				z-index: 3;
				width: 80%;
				left: 0;
				right: 0;
				margin: auto;
				max-width: 1050px;
				@include xl {
					width: 88%;
				}
				@include lg {
					bottom: -2.5rem;
				}
			}
			&:nth-of-type(3) {
				bottom: -2.5rem;
				right: 8%;
				z-index: 3;
				width: 95%;
				left: 0;
				right: 0;
				margin: auto;
				@include xs {
					bottom: -1.5rem;
				}
			}
		}
		p {
			position: absolute;
			z-index: 4;
			top: 12%;
			right: 7%;
			font-family: 'Kiwi Maru', serif;
			font-size: 29px;
			font-size: 2.9rem;
			line-height: 1.7;
			letter-spacing: 0.09em;
			text-align: right;
			@include lg {
				font-size: 22px;
				font-size: 2.2rem;
				top: 15%;
			}
			@include md {
				font-size: 21px;
				font-size: 2.1rem;
				right: 25%;
				top: 2%;
				text-align: center;
			}
			@include sm {
				font-size: 18px;
				font-size: 1.8rem;
				right: 5%;
				top: 15%;
				text-align: right;
			}
			@include xs {
				font-size: 13px;
				font-size: 1.3rem;
				right: 0;
			}
			span {
				background-color: #fff;
				padding: 0 1.5rem;
			}
			.mini {
				font-size: 60%;
				position: relative;
				top: -11px;
				@includo md {
					top: -8px;
				}
				@include sm {
					top: -7px;
				}
				@include xs {
					top: -3px;
				}
			}
		}
	}
	.site-search {
		position: absolute;
		top: 1rem;
		right: 1rem;
		display: none;
		line-height: 1;
		z-index: 3;
		@include md {
			display: flex;
		}
		@include xs {
			top: 0.5rem;
			right: 0.5rem;
		}
		.header-search {
			height: 25px;
			width: 120px;
			border: solid 1px rgba(101,100,100,0.8);
			border-radius: 3px 0 0 3px;
			font-size: 12px;
			font-size: 1.2rem;
			@include xs {
				height: 20px;
			}
			&:focus {
				outline: none;
				font-size: 12px;
				font-size: 1.2rem;
			}
		}
		.header-submit {
			height: 25px;
			width: 40px;
			border: solid 1px rgba(101,100,100,0.8);
			border-radius: 0 3px 3px 0;
			background-color: #656464;
			color: #fff;
			font-weight: 500;
			font-size: 10px;
			font-size: 1rem;
			@include xs {
				height: 20px;
			}
		}
	}
}

.covid {
	background-color: #fff;
	border: solid 1px rgba(216,87,117,0.8);
	border-radius: 8px;
	text-align: center;
	padding: 0;
	p {
		font-size: 90%;
		font-weight: bold;
		padding: 0.5rem 0;
		line-height: 1.7;
		margin-bottom: 0;
		color: #d85775;
	}
	a {
		display: block;
		background-color: #d85775;
		color: #fff;
		border: solid 1px rgba(216,87,117,0.8);
		border-radius: 0 0 6px 6px;
		padding: 0.5rem 0;
		font-size: 90%;
		font-weight: 500;
		line-height: 1.4;
		transition: 0.3s;
		&:hover {
			background-color: #fff;
			color: #d85775;
			border: solid 1px #fff;
		}
	}
}

.new-infomation {
//	padding-top: 3rem;
//	@include xs {
//		padding-top: 2rem;
//	}
////	img {
////		width: 30px;
////		margin-bottom: 0.5rem;
////	}
	h2 {
		font-size: 17px;
		font-size: 1.7rem;
		color: $main100;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-bottom: 2rem;
		&::before {
			content: "";
			background: url("../img/icon-1.svg");
			width: 30px;
			height: 28px;
			padding-right: 4rem;
			background-repeat: no-repeat;
		}
	}
	
//	タブのスタイル
	.tab_item {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 23%;
		margin-right: 1%;
		margin-bottom: 0;
		height: 30px;
		line-height: 50px;
		font-size: 14px;
		font-size: 1.4rem;
		text-align: center;
		color: #4d4d4d;
		float: left;
		font-weight: 500;
		transition: all 0.2s ease;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		@include sm {
			width: 24%;
			font-size: 12px;
			font-size: 1.2rem;
			margin-right: 0;
		}
		@include xs {
			width: 32%;
			font-size: 14px;
			font-size: 1.4rem;
		}
		&:first-of-type {
			border: 2px solid #eca9c1;
			background-color: #eca9c1;
			border-bottom: none;
			margin-left: 2%;
		}
//		&:nth-of-type(2) {
//			border: 2px solid #ffe6a1;
//			background-color: #ffe6a1;
//			border-bottom: none;
//		}
		&:nth-of-type(2) {
			border: 2px solid #c1dfd4;
			background-color: #c1dfd4;
			border-bottom: none;
		}
		&:last-of-type {
			border: 2px solid #cbe4ff;
			background-color: #cbe4ff;
			border-bottom: none;
		}
		&:hover {
			cursor: pointer;
			opacity: 0.75;
		}
	}
//	ラジオボタンを全て消す
	input[name="tab_item"] {
		display: none;
	}
//	タブ切り替えの中身のスタイル
	.tab_content {
		clear: both;
		overflow: hidden;
		display: none;
	}
//	選択されているタブのコンテンツのみを表示
	#all:checked ~ #all_content, #volunteer:checked ~ #volunteer_content, #event:checked ~ #event_content, #subsidy:checked ~ #subsidy_content {
		display: block;
	}
//	タブのスタイル変更
	.tabs input:checked + .tab_item {
		background-color: #fff;
	}
//	新着情報の内容
	.newsarea {
		height: 428px;
		text-align: left;
		background-color: #FFFFFF;
		border: solid 1px #e4e4e4;
		border-radius: 9px;
		padding: 10px;
		overflow: scroll;
		margin-bottom: 0px;
		font-size: 90%;
		list-style: none;
		@include sm {
			height: 390px;
		}
		@include xs {
			height: 305px;
		}
		li {
			line-height: 1.5;
			padding: 1rem 0;
			border-bottom: dashed 1px rgba(151,151,151,0.8);
			&:hover {
				background-color: $main10;
			}

			a {
				color: #4d4d4d;
				font-size: 100%;
				text-align: left;
				display: block;
				@include xs {
					font-size: 100%;
				}
				&::before {
					display: block;
					text-align: center;
					width: 110px;
					padding: 0.5rem 0;
					margin-bottom: 0.5rem;
					font-size: 80%;
					@include xs {
						font-size: 100%;
					}
				}
			}
			.type_all {
				&::before {
					content: "お知らせ";
					background-color: #eca9c1;
				}
			}
			.type_volunteer {
				&::before {
					content: "ボランティア";
					background-color: #ffe6a1;
				}
			}
			.type_event {
				&::before {
					content: "講座・イベント";
					background-color: #c1dfd4;
				}
			}
			.type_subsidy {
				&::before {
					content: "助成金";
					background-color: #cbe4ff;
				}
			}
		}
		li:first-child{
			@include xs {
				padding-top: 0.5rem;
			}
		}
	}
}

.info-img {
	text-align: center;
	img {
		margin-top: 1rem;
		@include xs {
			margin-top: 2rem;
			width: 75%;
		}
	}
}
.sns-link {
	display: flex;
	justify-content: center;
	margin: 1rem 0;
	@include sm {
		margin: 0.5rem 0;
	}
	a {
		padding: 1rem;
		transition: 0.3s;
		&:hover {
			transform: scale(1.2);	
		}
		img {
			width: 40px;
			height: 40px;
		}
	}
}
.fb-content {
	overflow: hidden;
	height: 350px;
	text-align: center;
}

.purpose {
	margin-top: 3rem;
	h2 {
		font-size: 17px;
		font-size: 1.7rem;
		color: $main100;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 66%;
		margin-bottom: 2rem;
		@include sm {
			width: 100%;
		}
		&::before {
			content: "";
			background: url("../img/icon-2.svg");
			width: 30px;
			height: 38px;
		}
	}
	.row {
		margin: 0 -0.5rem;
		&>div {
			padding: 0 0.5rem;
			margin-bottom: 1rem;
			.purpose-box {
				position: relative;
				background-color: #fff;
				border: solid 3px #eca9c1;
				border-radius: 10px;
				height: 100%;
				@include xs {
					width: 95%;
					margin: 0 auto;
				}
				h3 {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 115%;
					color: #4d4d4d;
					text-align: center;
					background-color: #eca9c1;
					padding: 0.5rem 0;
					border-radius: 6px 6px 0 0;
					margin-bottom: 0;
					line-height: 1;
					letter-spacing: -0.05rem;
					@include lg {
						font-size: 105%;
					}
					span {
						font-size: 68%;
						margin-left: 0.5em;
					}
					&::before {
						content: "";
						display: inline-block;
						background-image: url("../img/top-know-icon.svg");
						background-repeat: no-repeat;
						background-position: center;
						width: 36px;
						height: 36px;
						margin-right: 0.5rem;
						@include lg {
							width: 32px;
							height: 32px;
						}
					}

				}
				ul {
					padding: 1rem 0.5rem 1rem 2rem;
					margin-bottom: 0;
					li {
						line-height: 1.5;
						@include xs {
								line-height:inherit;
						}
						a {
							font-size: 80%;
							color: #4d4d4d;
							line-height: 1.3;
							@include xs {
								font-size: 100%;
							}
							&::before {
								font-family: "Font Awesome 5 Free";
								content: "\f0da";
								font-weight: 900;
								margin-right: 0.5em;
								color: #eca9c1;
							}
							&:hover {
								color: $main100;
							}
						}
					}
				}
				img {
					position: absolute;
					bottom: 1rem;
					right: 0;
					left: 0;
					margin: 0 auto;
					width: 130px;
				}
			}
			&:nth-of-type(2) .purpose-box {
				border: solid 3px #f4d4b3;
				h3 {
					background-color: #f4d4b3;
					&::before {
						background-image: url("../img/top-use-icon.svg");
					}
				}
				a {
					&::before {
						color: #f4d4b3;
					}
				}
				img {
					right: 1rem;
					left: auto;
					margin: 0;
					width: 110px;
				}
			}
			&:nth-of-type(3) .purpose-box {
				border: solid 3px #ffe6a1;
				@include sm {
					height: 270px;
				}
				h3 {
					background-color: #ffe6a1;
					&::before {
						background-image: url("../img/top-consult-icon.svg");
					}
				}
				a {
					&::before {
						color: #ffe6a1;
					}
				}
				img {
					width: 150px;
				}
			}
			&:nth-of-type(4) .purpose-box {
				border: solid 3px #c1dfd4;
				@include sm {
					height: 270px;
				}
				h3 {
					background-color: #c1dfd4;
					&::before {
						background-image: url("../img/top-learn-icon.svg");
					}
				}
				a {
					&::before {
						color: #c1dfd4;
					}
				}
				img {
					width: 130px;
				}
			}
			&:nth-of-type(5) .purpose-box {
				border: solid 3px #cbe4ff;
				h3 {
					background-color: #cbe4ff;
					&::before {
						background-image: url("../img/top-participate-icon.svg");
						width: 46px;
						@include lg {
							width: 44px;
						}
					}
				}
				a {
					&::before {
						color: #cbe4ff;
					}
				}
				img {
					width: 110px;
					right: 1rem;
					left: auto;
					margin: 0;
				}
			}
			&:nth-of-type(6) .purpose-box {
				border: solid 3px #d0cbe8;
				@include xs {
					height: 270px;
				}
				h3 {
					background-color: #d0cbe8;
					&::before {
						background-image: url("../img/top-donate-icon.svg");
					}
				}
				a {
					&::before {
						color: #d0cbe8;
					}
				}
				img {
					width: 155px;
				}
			}
		}
	}
}