#contact_wrap {
	background-color: #fff;
}

.sg {
	font-family: Noto Sans JP;
	color: #444;
	box-sizing: border-box;
	
	input,textarea {
		width: 100%;
		border: none;
		background-color: #F2F9FB;
	}
	
	.sg-chkbx {
		display: flex;
		flex-direction: column;
		row-gap: 2rem;
		.check_label {
			display: flex;
			align-items: center;
			column-gap: 1rem;
			cursor: pointer;
			input {
				width: 1.9rem;
				height: 1.9rem;
				border: 1px solid #959595;
				display: block;
			}
		}
	}
	.sg-chkbx2 {
		justify-content: center;
		align-items: center;
	}
	
	.none {
		display: none !important;
	}
	
	
	.input_error {
		color: #B23438;
		border: none;
		margin: 0;
		font-size: 1.6rem;
		background-color: transparent;
		padding: 0;
		@media screen and (max-width: 768px) {
			font-size: 1.2rem;
		}
	}
	.must,.any {
		color: #fff;
		font-size: 1.5rem;
		padding: 0.5rem 0;
		width: 7rem;
		text-align: center;
		background-color: #F979AB;
		border-radius: 3px;
		@media screen and (max-width: 768px) {
			font-size: 1rem;
			flex: 0 0 auto;
			width: 5rem;
			display: inline-block;
		}
	}
	.any {
		background-color: #444;
	}
	
	.sg-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: url('/syugyo/lp/img/bg.webp') no-repeat center / cover;
		z-index: -1;
	}
	.sg-bg1 {
		background-color: #F2F9FB;
	}
	
	.sg-fv {
		padding-top: 200px;
		background-color: #F5F5F5;
		@media screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			padding:7rem 2rem 2rem 2rem;
		}
		
		.sg-logo {
			display: flex;
			justify-content: center;
			@media screen and (max-width: 768px) {
				width: 15.8rem;
				margin: 0 auto 1rem;
			}
		}
		.sg-tp {
			padding-left: 18rem;
			@media screen and (max-width: 768px) {
				padding-left: 0;
			}
			
			ol {
				display: flex;
				flex-wrap: wrap;
				font-size: 1.4rem;
				@media screen and (max-width: 768px) {
					font-size: 1.2rem;
				}
				li > * {
					color: #656565 !important;
				}
				a {
					&::after {
						content: '>';
						margin: 0 10px;
					}
				}
			}
		}
	}
	
	.sg-sv {
		display: flex;
		justify-content: end;
		position: relative;
		background-color: #f8fcff;

		@media screen and (max-width: 768px) {
			width: 100%;
			background: linear-gradient(180deg, #FFFFFF 0%, #E6F5F8 66.01%);
			
		}
		
		figcaption {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 10rem;
			margin: auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: start;
			row-gap: 4rem;
			text-align: left;
			@media screen and (min-width: 1921px) {
				width: 50%;
				align-items: end;
			}
			@media screen and (max-width: 768px) {
				position: static;
				left: 0;
				align-items: start;
				row-gap: 2rem;
				padding: 2rem 0;
				width: 100%;
				margin-bottom: -10rem;
				z-index: 1;
			}
		}
		.sg-sv-main {
			display: flex;
			align-items: center;
			justify-content: end;

			@media screen and (max-width: 768px) {
				flex-direction: column-reverse;
				padding-bottom: 30rem;
			}
			> img {
				@media screen and (max-width: 1400px) {
					width: 80%;
					height: 100rem;
					object-fit: cover;
				}
				@media screen and (max-width: 768px) {
					width: 100%;
					height: auto;
			}
			}
		}
		.sg-sv-inner {
			@media screen and (max-width: 768px) {
				display: flex;
				flex-direction: column-reverse;
				row-gap: 1rem;
			}
		}
		.sg-sv-ttl1 {
			background-color: #E689AD;
			color: #fff;
			padding: 25px 40px;
			border-radius: 57.652px;
			font-weight: 700;
			line-height: 164%;
			color: #FFF;
			font-style: normal;
			letter-spacing: 1.067px;
			@media screen and (max-width: 768px) {
				padding: 15px 20px;
			}
			small {
				font-size: 21.338px;
				@media screen and (max-width: 768px) {
					font-size: 1.2rem;
				}
			}
			strong {
				font-size: 33.303px;
				@media screen and (max-width: 768px) {
					font-size: 1.6rem;
				}
			}
		}
		.sg-sv-ttl2 {
			color: #444;
			font-family: "Noto Sans JP";
			font-size: 62.469px;
			font-style: normal;
			font-weight: 700;
			line-height: 164%; 
			letter-spacing: 1.874px;
			width: 100%;
			text-align: left;
			@media screen and (max-width: 1400px) {
				font-size: 50px;
			}
			@media screen and (max-width: 768px) {
				font-size: 3.2rem;
			}
			strong {
				color: #3E9DB5;
				font-size: 79.564px;
				font-weight: 700;
				line-height: 164%;
				letter-spacing: 2.387px;
				@media screen and (max-width: 1400px) {
					font-size: 60px;
				}
				@media screen and (max-width: 768px) {
					font-size: 4rem;
				}
			}
		}
		.sg-sv-txt {
			font-size: 21.992px;
			font-weight: 700;
			line-height: 164%; /* 36.067px */
			letter-spacing: 1.1px;
			@media screen and (max-width: 768px) {
				font-size: 1.4rem;
			}
		}
		.sg-sv-ls {
			display: grid;
			grid-template-columns: repeat(4,20rem);
			grid-auto-rows: 200px;
			align-items: center;
			column-gap: 1rem;
			@media screen and (max-width: 768px) {
				grid-template-columns: repeat(2,170px);
				position: absolute;
				bottom: 5rem;
				left: 0;
				right: 0;
				margin: auto;
				width: 95%;
				justify-content: center;
				grid-auto-rows: 170px;
				gap: 1rem;
			}
			
			> li {
				border-radius: 50%;
				background-color: #F4F4F4;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				text-align: center;
				font-weight: 700;
				@media screen and (max-width: 768px) {
					background-color: rgba(255,255,255,.9);
				}
				strong {
					color: #E689AD;
					font-size: 20px;
					@media screen and (max-width: 768px) {
						font-size: 1.8rem;
					}
				}
				b {
					@media screen and (max-width: 768px) {
						font-size: 1.3rem;
					}
				}
			}
		}
	}
	
	.sg-pagelinks {
		background-color: #C9EBF3;
		padding: 45px;
		display: grid;
		grid-template-columns: repeat(3,41rem);
		align-items: center;
		text-align: center;
		justify-content: center;
		column-gap: 20px;
		@media screen and (max-width: 1300px) {
			grid-template-columns: repeat(3,1fr);
		}
		@media screen and (max-width: 768px) {
			display: flex;
			flex-direction: column;
			row-gap: 2rem;
			width: 100%;
			box-sizing: border-box;
			padding: 5rem 2rem;
		}
		a {
			border-radius: 5px;
			background: #3E9DB5;
			color: #fff;
			height: 120px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			font-size: 20px;
			font-style: normal;
			font-weight: 700;
			line-height: 164%; /* 32.8px */
			letter-spacing: 1px;
			row-gap: 5px;
			@media screen and (max-width: 768px) {
				width: 80%;
				height: auto;
				flex-direction: row;
				margin: 0 auto;
				gap: 2rem;
				padding: 2rem;
				justify-content: start;
				font-size: 1.6rem;
				> img {
					width: 4rem;
					object-fit: contain;
				}
			}
		}
	}
	
	
	
	.sg-bx1 {
		background-color: #FBF8F0;
		padding: 15rem 2rem;
		position: relative;
		@media screen and (max-width: 768px) {
			padding: 8rem 2rem 5rem;
		}
		&::before {
			content: attr(data-sgbx1txt);
			position: absolute;
			left: 0;
			top: 5rem;
			color: #fff;
			text-align: center;
			font-family: "Jost", sans-serif;
			font-size: 277.228px;
			font-weight: 500;
			line-height: 164%; /* 454.654px */
			letter-spacing: 13.861px;
			writing-mode: vertical-lr;
			z-index: 0;
			@media screen and (max-width: 768px) {
				writing-mode: horizontal-tb;
				font-size: 6rem;
				letter-spacing: 1px;
				width: 100%;
				text-align: center;
				top: 2rem;
			}
		}
		.sg-bx1-inner {
			max-width: 1045px;
			width: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			row-gap: 50px;
			position: relative;
			z-index: 1;
			@media screen and (max-width: 768px) {
				
			}
		}
		.sg-bx1-cont {
			display: flex;
			flex-direction: column;
			row-gap: 5rem;
			figure {
				display: flex;
				background-color: #fff;
				@media screen and (max-width: 768px) {
					flex-direction: column;
					padding: 3rem 2rem;
				}
				img {
					max-width: 370px;
					object-fit: cover;
					aspect-ratio: 37/32;
				}
				figcaption {
					padding: 50px 70px;
					display: flex;
					flex-direction: column;
					row-gap: 2rem;
					align-items: flex-start;
					width: 100%;
					@media screen and (max-width: 768px) {
						padding: 2rem 0;
					}
					.sg-btn1 {
						align-self: flex-end;
					}
				}
			}
		}
	}
	
	
	
	.sg-layout1 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		@media screen and (max-width: 768px) {
			flex-direction: column;
		}
	}
	.sg-layout2 {
		display: flex;
		justify-content: center;
		column-gap: 1rem;
		margin-top: 5rem;
		@media screen and (max-width: 768px) {
			flex-direction: column;
			align-items: center;
			row-gap: 1rem;
		}
	}
	
	
	
	.sg-ttl1 {
		color: #444;
		font-size: 37.692px;
		font-weight: 700;
		line-height: 164%; /* 61.814px */
		letter-spacing: 1.885px;
		text-align: left;
		@media screen and (max-width: 768px) {
			font-size: 2.2rem;
		}
		strong {
			color: #3E9DB5;
			@media screen and (max-width: 768px) {
				font-size: 2.6rem;
			}
		}
	}
	.sg-ttl2 {
		color: #444;
		font-size: 18.969px;
		font-weight: 700;
		line-height: 164%; /* 31.109px */
		letter-spacing: 0.948px;
		@media screen and (max-width: 768px) {
			font-size: 1.6rem;
		}
	}
	.sg-ttl3 {
		color: #25AACC;
		font-size: 3.8rem;
		font-weight: bold;
		text-align: center;
		line-height: 2;
		@media screen and (max-width: 768px) {
			font-size: 2.2rem;
		}
	}
	.sg-ttl4 {
		text-align: center;
		display: flex;
		flex-direction: column;
		row-gap: 1rem;
		strong {
			font-family: jost;
			font-size: 10rem;
			color: #3E9DB5;
			opacity: 0.2;
			line-height: 1;
			@media screen and (max-width: 768px) {
				font-size: 5rem;
			}
		}
		small {
			font-size: 2rem;
			font-weight: bold;
			color: #25AACC;
			@media screen and (max-width: 768px) {
				font-size: 1.6rem;
			}
		}
	}
	
	
	
	.sg-txt1 {
		font-size: 13.796px;
		line-height: 164%; /* 22.625px */
		letter-spacing: 0.69px;	
		
	}
	.sg-txt2 {
		@media screen and (max-width: 768px) {
			font-size: 1.3rem;
		}
	}
	.sg-txt3 {
		color: #25AACC;
		font-size: 1.8rem;
		margin-bottom: 3rem;
		@media screen and (max-width: 768px) {
			font-size: 1.4rem;
		}
	}
	.sg-txt4 {
		text-align: center;
		font-size: 1.6rem;
	}
	.sg-txt5 {
		text-align: center;
		color: #B23438;
		font-size: 1.8rem;
		@media screen and (max-width: 768px) {
			font-size: 1.6rem;
		}
	}
	
	
	
	.sg-btn1 {
		padding-bottom: 1rem;
		font-size: 13px;
		font-weight: 500;
		line-height: 164%; /* 21.32px */
		letter-spacing: 0.65px;
		border-bottom: 1px solid #000;
		min-width: 150px;
		display: flex;
		justify-content: space-between;
		&::after {
			content: '→';
		}
	}
	.sg-btn2 {
		color: #E689AD;
		font-size: 15.52px;
		font-style: normal;
		font-weight: 700;
		line-height: 164%; /* 25.453px */
		letter-spacing: 0.776px;
		min-width: 33rem;
		margin: 0 auto;
		text-align: center;
		display: flex;
		justify-content: center;
		border-radius: 4.311px;
		border: 1px solid #E689AD;
		background: #FFF;
		padding: 1.5rem;
		@media screen and (max-width: 768px) {
			min-width: 90%;
		}
	}
}
.sg-btn3 {
	min-width: 30rem !important;
	font-size: 1.8rem;
	text-align: center;
	color: #fff;
	border-radius: 5px;
	background-color: #fff !important;
	color: #25AACC !important;
	border: solid 1px #25AACC !important;
	padding: 0;
	height: 6rem;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-weight: bold;
}


.sg-bx2 {
	height: 60rem;
	background: url('/syugyo/lp/img/system/bg.webp') no-repeat center / cover;
	position: relative;
	@media screen and (max-width: 768px) {
		height: 45rem;
		background-image: url('/syugyo/lp/img/system/sumaho.webp');
	}
	&::before {
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: linear-gradient(270deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.00) 100%);
		@media screen and (max-width: 768px) {
			background: linear-gradient(360deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.00) 100%);
			
		}
	}
	.sg-bx2-ttl {
		position: absolute;
		bottom: 10rem;
		left: 20rem;
		display: flex;
		flex-direction: column;
		text-align: left;
		@media screen and (max-width: 768px) {
			left: 2rem;
			bottom: 5rem;
		}
		b {
			color: rgba(248, 248, 248, 0.25);
			text-align: center;
			font-family: Jost;
			font-size: 134.934px;
			font-style: normal;
			font-weight: 500;
			letter-spacing: 6.747px;
			line-height: 0;
			@media screen and (max-width: 768px) {
				font-size: 6.5rem;
				line-height: 0.5;
				margin-left: 5rem;
			}
		}
		strong {
			color: #FFF;
			font-size: 43.11px;
			font-weight: 700;
			line-height: 164%;
			letter-spacing: 2.156px;
			margin-left: 35rem;
			@media screen and (max-width: 768px) {
				margin-left: 2rem;
				font-size: 2rem;
			}
		}
	}
}
.sg-bx3 {
	display: flex;
	justify-content: center;
	align-items: start;
	margin-top: 10rem;
	position: relative;
	z-index: 1;
	@media screen and (max-width: 768px) {
		margin-top: 5rem;
	}
}
.sg-bx4 {
	background-color: #fff;
	display: flex;
	flex-direction: column;
	row-gap: 10rem;
	padding: 10rem 0;
	@media screen and (max-width: 768px) {
		padding: 0;
		row-gap: 0;
	}
	.sg-bx4-outer {
		padding: 15rem 0 10rem;
		position: relative;
		@media screen and (max-width: 768px) {
			padding: 5rem 2rem;
		}
		&::before {
			content: '';
			max-width: 130rem;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: #F2F9FB;
		}
		&:nth-of-type(even) {
			&::before {
				left: auto;
				right: 0;
				@media screen and (max-width: 768px) {
					background-color: #fff;
				}
			}
			figure {
				flex-direction: row-reverse;
				.sg-bx4-icon {
					top: -10rem;
					right: 0;
					left: auto;
				}
			}
		}
		figure {
			max-width: 125rem;
			width: 100%;
			margin: 0 auto;
			display: flex;
			align-items: center;
			column-gap: 5rem;
			padding: 0 2rem;
			position: relative;
			box-sizing: border-box;
			z-index: 1;
			@media screen and (max-width: 768px) {
				flex-direction: column !important;
				padding: 0;
				row-gap: 2rem;
			}
			.sg-bx4-icon {
				position: absolute;
				top: -10rem;
				left: -15rem;
				@media screen and (max-width: 768px) {
					width: 15rem;
					height: 15rem;
					left: auto;
					right: 0;
					top: 0 !important;
				}
			}
			.sg-bx4-ph {
				width: 60rem;
				object-fit: cover;
				@media screen and (max-width: 1300px) {
					width: 50%;
					height: auto;
				}
				@media screen and (max-width: 768px) {
					width: 100%;
				}
			}
			figcaption {
				.sg-bx4-ttl {
					display: flex;
					align-items: center;
					column-gap: 3rem;
					border-bottom: 3px dotted #C0C0C0;
					padding-bottom: 2rem;
					margin-bottom: 2rem;
					color: #25AACC;
					@media screen and (max-width: 768px) {
						flex-direction: column;
						row-gap: 1rem;
					}
					strong {
						display: flex;
						flex-direction: column;
						justify-content: center;
						text-align: center;
						@media screen and (max-width: 768px) {
							text-align: left;
						}
					}
					small {
						font-size: 1.8rem;
						font-weight: bold;
						line-height: 1;
						@media screen and (max-width: 768px) {
							font-size: 2rem;
						}
					}
					b {
						font-size: 7rem;
						font-weight: bold;
						line-height: 1;
						font-family: jost;
					}
				}
				span {
					font-weight: bold;
					@media screen and (max-width: 768px) {
						font-size: 2rem;
					}
				}
				.sg-bx4-txt {
					line-height: 2;
					font-size: 1.6rem;
					@media screen and (max-width: 768px) {
						font-size: 1.4rem;
					}
					b {
						color: #F979AB;
					}
				}
			}
		}
	}
}
.sg-bx5 {
	max-width: 125rem;
	width: 100%;
	margin: 0 auto;
	padding: 10rem 0;
	@media screen and (max-width: 768px) {
		padding: 5rem 0;
	}
	.sg-bx5-outer {
		background-color: #fff;
		padding: 10rem 0;
		box-sizing: border-box;
		@media screen and (max-width: 768px) {
			padding: 5rem 2rem;
			width: 90%;
			margin: 0 auto;
		}
		.form_box {
			@media screen and (max-width: 768px) {
				padding: 0;
			}
		}
	}
	.sg-bx5-inner {
		max-width: 100rem;
		width: 100%;
		margin: 0 auto;
	}
}
.sg-bx6 {
	background-color: #F2F9FB;
	padding: 10rem 0;
	display: flex;
	flex-direction: column;
	row-gap: 5rem;
	@media screen and (max-width: 768px) {
		padding: 5rem 0;
		row-gap: 2.5rem;
	}
	.sg-bx6-inner {
		max-width: 125rem;
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		padding: 10rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		row-gap: 3rem;
		flex-direction: column;
		@media screen and (max-width: 768px) {
			padding: 5rem 0;
		}
	}
}

.sg-contact {
	padding: 20rem 0;
	@media screen and (max-width: 768px) {
		padding: 5rem 0;
	}
	.sg-contact-outer {
		display: flex;
		flex-direction: column;
		row-gap: 5rem;
		max-width: 100rem;
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		padding: 15rem 0;
		box-sizing: border-box;
		@media screen and (max-width: 768px) {
			padding: 5rem 2rem;
			width: 95%;
			row-gap: 2.5rem;
		}
	}
	form {
		max-width: 90rem;
		width: 100%;
		margin: 0 auto;
		dl {
			border-bottom: 1px solid #D0D0D0;
			padding-bottom: 2rem;
			margin-bottom: 2rem;
			display: flex;
			row-gap: 2rem;
			flex-direction: column;
			dt {
				display: flex;
				align-items: center;
				column-gap: 2rem;
				flex-wrap: wrap;
				@media screen and (max-width: 768px) {
					column-gap: 1rem;
				}
				b {
					flex: 0 0 auto;
					font-size: 2rem;
					@media screen and (max-width: 768px) {
						font-size: 1.5rem;
					}
				}
			}
			dd {
				width: 100%;
				padding: 1rem;
				@media screen and (max-width: 768px) {
					padding: 0;
				}
				textarea,input {
					width: 100%;
					padding: 1rem;
					box-sizing: border-box;
					font-size: 1.6rem;
				}
			}
		}
		
	}
}

.sg-submit1,.sg-submit2 {
	max-width: 30rem !important;
	font-size: 1.8rem;
	text-align: center;
	color: #fff;
	background-color: #25AACC !important;
	border: 1px solid #25AACC;
	border-radius: 5px;
	padding: 0;
	height: 6rem;
	cursor: pointer;
	font-weight: bold;
	&::after {
		display: none;
	}
}
.sg-submit2 {
	background-color: #fff !important;
	color: #25AACC;
	border: solid 1px #25AACC !important;
}

.sg-error {
	@media screen and (max-width: 768px) {
		width: 100%;
	}
}

dl.sg-confirm {
	column-gap: 3rem;
	dt {
		width: 35rem;
		@media screen and (max-width: 768px) {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
}