@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;
$color-maindouble: #6E1D6B;

#wrapper{
	overflow: hidden;
}
//header
header#top-header{
	background: url("../img/top-img.jpg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	position: relative;
	height: 600px;
	padding-top: 1.5rem;
	@include xs {
		height: 750px;
	}
	h1{
		color: #ffffff;
	}
	h1 + div{
		align-items: flex-start;
		@include sm {
			display: flex;
		}
		@include xs {
			display: block;
		}
		a{
			color: #ffffff;
		}
		ul{
			display: block;
			text-align: right;
			@include xs {
				text-align: center;
			}
			li:first-child{
				font-size: 12px;
				font-size: 1.2rem;
				color: #ffffff;
				@include sm {
					line-height: 15px;
    				padding: 0.5rem 0;
				}
				@include xs {
					padding-top: 0;
					margin-top: 0;
				}
				p{
					margin: 0;
				}
			}
			li:nth-child(2){
				@include xs {
						margin: 0;
					}
				a{
					display: inline-block;
					background: #4D9A24;
					color: #fff;
					text-align: center;
					font-weight: 400;
					padding: 0.3rem 2rem 0.5rem 2rem;
					border-radius: 0.5rem;
					width: 250px;
					margin-bottom: 0.5rem;
					@include sm {
						width: 200px;
					}
					@include xs {
						display: block;
						width: auto;
						margin: 0 4rem;
					}
					&:hover{
						background: #3A731B;
						color: #FCEE21;
					}
				}
			}
			li:last-child{
				@include xs {
						margin: 0;
					}
				a{
					display: inline-block;
					background: $color-main;
					color: #fff;
					text-align: center;
					font-weight: 400;
					padding: 0.3rem 2rem 0.5rem 2rem;
					border-radius: 0.5rem;
					width: 250px;
					@include sm {
						width: 200px;
					}
					@include xs {
						display: block;
						width: auto;
						margin: 0 4rem;
					}
					&:hover{
						background: $color-maindouble;
						color: #FCEE21;
					}
				}
			}
		}
	}
	.top-title{
		margin-top: 2rem;
		text-align: center;
		img{
			margin: auto;
			display: block;
			width: 230px;
		}
		img + img{
			width: 200px;
			margin-top: 1rem;
			filter: drop-shadow(3px 3px 6px rgba(0,0,0,0.8));
		}
		figcaption{
			font-size: 11px;
			color: #fff;
			text-align: left;
			display: inline-block;
			padding-top: 0.5rem;
		}
		&:after{
			display: none;
		}
	}
}
//header------ここまで

//article
article{
	background: none!important;
	@include md {
		padding: 2rem 0;
	}

}
//article------ここまで

//news
#news{
	h3{
		font-size: 23px;
		font-size: 2.3rem;
		background: $color-mainhalf;
		border: none;
		border-radius: 0.5rem 0.5rem 0 0;
		padding: 1.5rem 3rem;
		margin: 0;
		border: 1px solid $color-mainhalf;
		border-bottom: none;
		span{
			color: #000000;
			padding-right: 1rem;
		}
	}
	div{
		border: 1px solid $color-mainhalf;
		border-top: none;
		border-radius: 0 0 0.5rem 0.5rem;
		background: #ffffff;
		height: 200px;
		overflow: scroll;
		@include md {
			height: 200px;
		}
		dl{
			margin: 1.5rem 2rem;
			dt{
				font-size: 14px;
				font-size: 1.4rem;
				padding: 0rem 1rem;
				display: inline-block;
				background: $color-main;
				color: #ffffff;
				border-radius: 0.5rem;
			}
			dd{
				border-bottom: 1px solid #C4C4C4;
				padding: 0.5rem 0;
				a{
					color: $color-main;
					&:hover{
						color:  $color-mainhalf;
					}
				}
			}
		}
	}
}
//news------ここまで

//Facebook
#Facebook{
	@include xs {
		margin-bottom: 6rem;
	}
	h3{
		background: none;
		border: none;
		padding-top: 0.5rem;
		img{
			width: 80%;
		}
	}
	div.time-line{
		height: 180px;
		overflow: hidden;
		@include md {
			height: 180px;
		}
	}
}
//Facebook------ここまで

//search
#search{
	background: #D7E6B8;
	border: 1px solid #ffffff;
	border-radius: 0.5rem;
	padding: 2rem;
	h3{
		background: none;
		border: none;
		color: #00853C;
		font-size: 25px;
		font-size: 2.5rem;
	}
	ul{
		padding: 0;
		margin: auto;
		li{
			padding: 0 0.5rem;
			dl{
				background: #fff;
				padding: 2rem;
				border-radius: 0.5rem;
				min-height: 180px;
				position: relative;
				@include md {
					min-height: 175px;
				}
				@include sm {
					min-height: inherit;
				}
				&:after{
					content: "";
					height: 80px;
					width: 95px;
					background: url("../img/purpose-icon-01.svg");
					background-repeat: no-repeat;
					background-size: auto;
					filter: drop-shadow(3px 3px 5px rgba(131,131,131,0.6));
					position: absolute;
					top: -10px;
					right: -10px;
				}
				dt{
					color: #00853C;
					font-size: 20px;
					font-size: 2rem;
					margin-bottom: 1rem;
				}
				dd{
					ul{
						li{
							padding: 0;
							display: block;
							line-height: 2.3rem;
							text-indent: -1em;
							padding-left: 1rem;
							@include xs {
								font-size: 14px;
								font-size: 1.4rem;
							}
							a{
								color: #000;
								&:before{
									content: "・";
								}
								&:hover{
									color: $color-main;
								}
								span{
									font-size: 13px;
									font-size: 1.3rem;	
								}
							}
						}
					}
				}
			}
		}
		li:nth-child(2) dl{
			position: relative;
			&:after{
				background: url("../img/purpose-icon-02.svg");
				background-repeat: no-repeat;
				background-size: auto;
				filter: drop-shadow(3px 3px 5px rgba(131,131,131,0.6));
			}
		}
		li:nth-child(3) dl{
			position: relative;
			&:after{
				background: url("../img/purpose-icon-03.svg");
				background-repeat: no-repeat;
				background-size: auto;
				filter: drop-shadow(3px 3px 5px rgba(131,131,131,0.6));
			}
		}
		li:nth-child(4) dl{
			position: relative;
			min-height: 250px;
			@include md {
				min-height: 285px;
			}
			@include sm {
				min-height: inherit;
			}
			&:after{
				background: url("../img/purpose-icon-04.svg");
				background-repeat: no-repeat;
				background-size: auto;
				filter: drop-shadow(3px 3px 5px rgba(131,131,131,0.6));
			}
		}
		li:last-child dl{
			position: relative;
			min-height: 250px;
			@include md {
				min-height: 285px;
			}
			@include sm {
				min-height: inherit;
			}
			&:after{
				background: url("../img/purpose-icon-05.svg");
				background-repeat: no-repeat;
				background-size: auto;
				filter: drop-shadow(3px 3px 5px rgba(131,131,131,0.6));
			}
		}
	}
}
//search------ここまで

//site-map
#site-map{
	h3{
		color: #000;
		background: none;
		display: inline-block;
		border-top: none;
		border-bottom: 3px dashed $color-main;
	}
	div.row{
		div{
			padding-right: 0rem;
		}
		div:nth-child(2n+1){
			@include sm {
				padding-right: 1rem;
			}
		}
		div:nth-child(2n){
			@include sm {
				padding-left: 1rem;
			}
		}
	}
	h4{
		font-size: 19px;
		font-size: 1.9rem;
		@include xs {
			font-size: 15px;
			font-size: 1.5rem;
			font-weight: bold;
		}
		&:before{
			display: none;
			font-weight: bold;
		}
	}
	ul{
		padding: 0;
		li{
			display: block;
			text-indent: -0.8em;
			padding-left: 0.8em;
			@include xs {
				font-size: 14px;
				font-size: 1.4rem;
			}
			a{
				color: #000;
				&:hover{
					color: $color-main;
				}
				&:before{
					font-family: "Font Awesome 5 Free";
					font-weight: 900;
					content: "\f105";
					padding-right: 0.5rem; 
					color: $color-main;
				}
				span{
					font-size: 14px;
					font-size: 1.4rem;
				}
			}
		}
	}
}
//site-map------ここまで