@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:#009d42;
$bright-green:#4cba7b;
$soft-green:#bde2c9;
$orange:#f3ac00;
$soft-orange:#e8b86d;
$light-yellow:#fff8a1;
$pale-yellow:#f8f9e0;

.site-header {
	background-color: #fff!important;
}

#header{
	background: #efcd99 url("../img/header-entry.jpg") center / cover;
	&::before{
		background-image: url("../../img/wave-green-top.svg");
	}
}

#page-nav{
	background:$soft-green; 
	ul{
		width: 70%;
		margin: 0 auto;
		li{
			border: #513619 solid 1px;
			transition: 0.2s ease-in-out;
			a{color: #513619;}
			&:hover{
				background: #513619;
				a{color: #fff;}
			}
		}
	}
}

#wrapper{
	overflow: hidden;
}

#entry-intro{
	padding-bottom: 7rem;
	@include sm{padding-bottom: 5rem;}
	@include xs{padding-bottom: 3rem;}
	.message{
		text-align: center;
		background: $soft-green;
		padding-top: 5rem;
		@include md{padding-top: 3rem;}
		@include sm{padding-top: 0;}
		.message-main{
			position: relative;
			font-size: 32px;
			font-size: 3.2rem;
			font-weight: 700;
			display: inline-block;
			line-height: 1.3em;
			margin-bottom: 3rem;
			@include sm{
				font-size: 25px;
				font-size: 2.5rem;
				margin-bottom: 2rem;
			}
			@include xs{
				font-size: 22px;
				font-size: 2.2rem;
			}
			&::before {
				position: absolute;
				left: -30px;
				top: 0;
				content: "";
				width: 5px;
				height: 100%;
				background: #fff;
				border-radius: 5px;
				transform: rotate(-25deg);
				@include sm{
					left: -15px;
				}
			}
			&::after {
				position: absolute;
				content: "";
				right: -30px;
				top: 0;
				width: 5px;
				height: 100%;
				background: #fff;
				border-radius: 5px;
				transform: rotate(25deg);
				@include sm{
					right: -15px;
				}
			}
		}
		.message-bg{
			position: relative;
			background: url("../img/entry-hero.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
			height: 500px;
			@include md{height: 400px;}
			@include sm{height: 350px;}
			@include xs{height: 200px;}
			&::before{
				content: "";
				position: absolute;
				top: -20px;
				left: 5%;
				background-image: url("../../img/onpu2.svg");
				background-size: contain;
				background-repeat: no-repeat;
				width: 50px;
				height: 90px;
				@include sm{
					width: 40px;
					height: 70px;
				}
				@include xs{
					width: 35px;
					height: 60px;
				}
			}
			&::after{
				content: "";
				position: absolute;
				bottom: -20px;
				right: 5%;
				background-image: url("../../img/onpu1.svg");
				background-size: contain;
				background-repeat: no-repeat;
				width: 80px;
				height: 60px;
				z-index: 10;
				@include sm{
					width: 70px;
					height: 50px;
				}
				@include xs{
					width: 60px;
					height: 40px;
				}
			}
		}
	}
	.message-text{
		padding-top: 5rem;
		p{margin-bottom: 3rem;}
		.message-title{
			font-size: 23px;
			font-size: 2.3rem;
			font-weight: 600;
			color: $soft-orange;
			line-height: 1.75em;
			@include md{
				font-size: 20px;
				font-size: 2rem;
				margin-bottom: 2rem;
			}
		}
		.message-img{
			@include sm{text-align:center; }
			img{
				width: 480px;
				height: auto;
				transform: translateY(-10rem);
				border-radius: 50%; 
				border: 15px solid white;
				box-shadow: 0 0 10px rgba(0,0,0,0.1);
				@include md{
					transform: none;
					border: 10px solid white;
				}
				@include sm{
					width: 90%;
					margin-bottom: 3rem;
				}
			}
		}
	}
}

#voice{
	position: relative;
	padding-bottom: 10rem;
	@include xs{padding-bottom: 5rem;}
	&::after{
		content: "";
		position: absolute;
		bottom: -2px;
		width: 100%;
		height: 5.7vw;
		background-image: url("../../img/wave-green-top.svg");
		background-size: contain;
		background-repeat: no-repeat;
		left: 50%;
		transform: translateX(-50%);
	}
	.voice-container{
		display: flex;
		gap: 4rem;
		background: $soft-green;
		border-radius: 10px;
		padding: 4rem 4rem 3rem;
		margin-bottom: 3rem;
		@include sm{
			padding: 4rem 3rem 3rem;
			flex-direction: column;
			gap: 2rem;
		}
		@include xs{
			margin-bottom: 2rem;
			gap: 1rem;
		}
		.profile{
			width: 30%;
			text-align: center;
			@include md{width: 35%;}
			@include sm{width: 100%;}
			img{
				height: 195px;
				margin-bottom: 2rem;
				@include sm{height: 160px;}
			}
			p{
				font-weight: 600;
				line-height: 1.5em;
			}
		}
		.comment{
			width: 70%;
			@include md{width: 65%;}
			@include sm{width: 100%;}
		}
	}
}

#guidelines{
	padding-top: 2rem;
	background: $soft-green;
	table{
		width: 100%;
		th,td{
			border-top: 1px solid $color-main;
			border-bottom: 1px solid $color-main;
			padding: 1.5rem 0;
			vertical-align: top;
		}
		th{
			font-weight: 400;
			width: 15%;
			@include xs{
				width: 20%;
			}
		}
		.strong{
			font-weight: 600;
			color: $color-main;
		}
		.underline{text-decoration-line: underline;}
		
	}
}



#contact-banner{
	padding: 7rem 0 10rem;
	background: $soft-green;  
	@include md{padding: 5rem 0 5rem;}
	@include xs{padding: 3rem 0 3rem;}
	.banner-content{
		display: flex;
		gap: 2rem;
		align-items: center;
		background: $color-main;
		border-radius: 10px;
		margin-bottom: 3rem;
		padding: 2rem;
		box-shadow: 0 0 10px rgba(0,0,0,0.2);
		transition: 0.2s ease-in-out;
		@include sm{
			padding: 1.5rem;
		}
		&:hover{
			background: #4cba7b;
		}
		.text , .image {flex: 1;}
		.text{
			@include xs{text-align: center;}
			p{
				font-size: 35px;
				font-size: 3.5rem;
				line-height: 1.35em;
				color: #fff;
				border-bottom: dotted 3px #fff;
				display: inline-block;
				font-weight: 700;
				@include sm{
					font-size: 30px;
					font-size: 3rem;
				}
				@include xs{
					font-size: 28px;
					font-size: 2.8rem;
				}
			}
		}
		.image{
			height: 170px;
			overflow: hidden;
			@include md{
				height: 120px;
			}
			@include sm{
				height: 120px;
			}
			@include xs{display: none;}
			img {
				border-radius: 10px;
				width: 100%;
				height: 100%;
				object-fit: cover;
				mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
				-webkit-mask-image: linear-gradient(to right, black 0%, black 70%, transparent 100%);
			}
		}
	}
}