@charset "utf-8";
@import url("root.css");



body {
	background: #F5F6F8;
	width: 100vw;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	overflow-x: hidden;

	* {

		header,
		.slick-list {
			.slick-list {
				overflow: visible;
			}
		}

	}

	.ios {
		max-width: 100vw;
		overflow-x: hidden !important;
	}

}

main {

	width: 100%;
	display: flex;
	flex-direction: column;
	min-height: 100vh;

	article,
	footer {
		width: 100%;
	}
}

section {
	padding: 96px 0;

	&.kv {
		padding: 0;

		background: url(../img/kv_bg.jpg) no-repeat;
		background-size: cover;
		background-position: center top;
		position: relative;

		@media screen and (max-width: 600px) {
			background: url(../img/kv_bg_sp.jpg) no-repeat;
			background-size: contain;
			background-position: center top;

		}

		.kv_copyright {
			display: inline-block;
			z-index: 100;
			width: 90%;
			max-width: 1335px;
			bottom: 65px;
			right: 0;
			left: 0;
			margin: auto;
			position: absolute;
			text-align: right;
			font-weight: 500;
			color: #00728E;
			/* display: none; */
			opacity: 0.6;

			img {
				max-width: 320px;

			}

			@media screen and (max-width: 1200px) {
				bottom: 15px;
			}

			@media screen and (max-width: 600px) {
				bottom: 15px;
				left: auto;
				right: 3%;
				max-width: 55%;
			}
		}

		.kv_bg {
			margin: 0 auto;
			/* background: url(../img/kv_bg.jpg) no-repeat;
			background-size: cover; */
			position: relative;
			/* background-position: top center; */
			width: 96%;
			max-width: 1440px;
			aspect-ratio: 1440/ 735;
			padding: 0;

			@media screen and (max-width: 1500px) {
				width: 90%;
				/* margin: 0 0 0 auto; */
				max-width: 1286px;
			}

			@media screen and (max-width: 600px) {
				aspect-ratio: auto;
				width: 100%;
				margin: 0 auto;
				display: block;
			}

			picture,
			img {
				vertical-align: bottom;
			}

			.kv_text {
				position: relative;
				z-index: 2;
				height: 100%;
				max-width: 57%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				z-index: 3;

				@media screen and (max-width: 1500px) {
					max-width: 62%;
				}

				@media screen and (max-width: 1200px) {
					max-width: 50%;
				}

				@media screen and (max-width: 600px) {
					max-width: 100%;
					height: auto;
					padding-top: 8vw;
				}


				h2 {
					text-align: center;
					display: flex;
					flex-direction: column;
					justify-content: flex-end;
					align-items: center;
					width: 92%;
					padding-bottom: 73px;

					@media screen and (max-width: 1500px) {
						padding-bottom: 5vw;
					}



					@media screen and (max-width: 600px) {
						margin-bottom: 0;
						padding-bottom: 0;
					}

					picture {
						display: inline-block;
						max-height: 105px;
						width: auto;

						max-width: 100%;

						@media screen and (max-width: 1500px) {
							max-height: 7.2vw;
						}


						@media screen and (max-width: 600px) {
							max-height: 58px;
						}


						&.logo1 {
							/* width: 100%;
							max-width: 48vw; */
							margin-bottom: 31px;

							@media screen and (max-width: 1500px) {
								margin-bottom: 2vw;
							}
						}

						&.logo2 {
							/* width: 100%;

							margin-left: 10px;
							max-width: 29vw; */

						}

						img {
							height: 100%;
							width: auto;
						}

					}

				}

				h3 {
					width: 100%;
					text-align: center;
					font-size: 1.8rem;
					line-height: 4.8rem;
					letter-spacing: 0.24em;
					font-weight: 500;

					@media screen and (max-width: 1500px) {
						font-size: 1.25vw;
						line-height: 2.9vw;
					}

					@media screen and (max-width: 600px) {
						display: none;
					}

				}
			}

			.kv_img {
				position: absolute;
				width: 58%;
				height: 100%;
				z-index: 1;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				display: flex;
				align-items: center;

				@media screen and (max-width: 600px) {
					width: 100%;
					position: relative;
					height: auto;
					margin: 0;
					aspect-ratio: 375 / 352;
					margin-top: -25px;
					z-index: 2;
				}



				ul {
					width: 100%;
					height: 100%;
					position: relative;
					z-index: 2;

					li {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						display: flex;
						align-items: center;
						opacity: 0;

						@media screen and (max-width: 600px) {
							width: 100%;
							aspect-ratio: 1 / 1;
							height: auto;
						}



						picture {
							display: inline-block;

							img {
								width: 100%;
							}
						}

						&.kv1 {
							opacity: 1;
						}


						&.kv2 {
							width: 54.3%;
							left: 0;
							right: 0;
							opacity: 1;

							@media screen and (max-width: 600px) {
								width: 69%;
							}
						}

						&.kv3 {
							width: 92%;
							left: 0;

							@media screen and (max-width: 600px) {
								left: 0;
								right: 0;
								margin: auto;
							}

						}


						&.kv4 {
							width: 94.3%;
							left: 0;

							@media screen and (max-width: 600px) {
								width: 100%;
								left: 0;
								right: 0;
							}

						}

					}
				}
			}

			.sp_text {
				display: none;

				@media screen and (max-width: 600px) {
					display: block;
					text-align: center;
					position: relative;
					z-index: 1;

					&::after {
						position: absolute;
						content: "";
						background: url(../img/kv_bg_sp2.jpg) no-repeat;
						width: 100%;
						height: 200%;
						aspect-ratio: 100 / 200;
						background-size: contain;
						background-position: bottom center;
						bottom: 0;
						left: 0;
						right: 0;
						margin: auto;
						z-index: 1;

					}


					h3 {
						margin-bottom: 0;
						padding: 0;
						margin-top: 10px;
						font-size: 4.2vw;
						font-weight: 500;
						padding-bottom: 60px;
						line-height: 9vw;
						letter-spacing: 0.01em;
						position: relative;
						z-index: 2;
					}
				}
			}

		}
	}


	&.news {
		padding: 46px 0;
		background: #D3EFFF;

		@media screen and (max-width: 820px) {
			padding: 30px 0;
		}

		.news_box_top {
			background: white;
			border-radius: 5px;
			padding: 15px 40px;
			display: flex;
			align-items: center;

			@media screen and (max-width: 820px) {
				padding: 7px 15px;
				flex-wrap: wrap;
			}

			@media screen and (max-width: 600px) {
				padding: 20px 20px 10px;
				width: calc(100% + 20px);
				margin-left: -10px;

			}

			h3 {
				font-size: 1.7rem;
				color: var(--black);
				/* margin-right: 35px;
				padding-right: 35px; */
				/* border-right: 1px solid #A9DDED; */
				width: 16%;
				margin-right: 4%;
				text-align: center;
				font-weight: 500;

				@media screen and (max-width: 820px) {
					font-size: 1.6rem;
				}

				@media screen and (max-width: 600px) {
					width: 100%;
					text-align: center;
					font-size: 1.8rem;
					font-weight: 600;
					color: var(--blue);
					border: none;
					padding: 0;
					margin: 0;
				}

			}


			.news_list {
				width: 80%;

				@media screen and (max-width: 600px) {
					width: 100%;
				}

				li {
					width: 100%;

					border-bottom: 1px solid #efefef;

					&.news_title:last-child,
					&.news_title:nth-child(2) {
						border: none !important;
					}

					a {
						color: var(--black);
						display: block;
						width: 100%;
						padding: 23px 0;
						text-decoration: none;
						transition: all .1s;
						width: 100%;

						&:hover {
							color: var(--blue);
						}

						@media screen and (max-width:600px) {
							&:hover {
								color: var(--black);
							}

						}

						>div {
							display: flex;
							align-items: center;

							@media screen and (max-width:600px) {
								flex-direction: column;
								text-align: left;
								width: 100%;
								display: block;
							}

							.post_date {
								font-family: var(--noto);
								font-size: 1.4rem;
								margin-right: 20px;
								font-weight: 500;
								color: var(--blue);

								@media screen and (max-width: 820px) {
									font-size: 1.4rem;
								}

								@media screen and (max-width: 600px) {
									font-size: 1.2rem;
								}

							}

							h4 {
								font-weight: 500;
								font-size: 1.5rem;

								@media screen and (max-width: 820px) {
									font-size: 1.4rem;
									padding: 0;
								}

								@media screen and (max-width: 600px) {
									margin-top: 4px;
								}
							}
						}
					}
				}

			}
		}
	}

	&.about {
		background: url(../img/about_bg.jpg) no-repeat;
		background-size: 100% 100%;
		padding-bottom: 84px;

		@media screen and (max-width: 1200px) {
			padding-bottom: 55px;
		}

		@media screen and (max-width: 820px) {
			padding-top: 55px;
			padding-bottom: 0;
			background-size: cover;

		}

		.about_box {
			background: white;
			position: relative;
			padding: 0 150px 430px;

			@media screen and (max-width: 1500px) {
				padding-bottom: 340px;
			}

			@media screen and (max-width: 820px) {
				padding: 0 70px 500px;
			}

			@media screen and (max-width: 600px) {
				padding: 0 25px 400px;
				width: calc(100% + 20px);
				margin-left: -10px;
			}

			&::before {
				position: absolute;
				content: "";
				background: url(../img/about_left.png) no-repeat;
				width: 244px;
				aspect-ratio: 244 / 145;

				background-size: contain;
				right: -123px;
				top: 222px;
				margin: auto;




			}

			@media screen and (max-width: 1200px) {
				&::before {
					right: -10px;
					width: 220px;
					top: 250px;
				}
			}


			@media screen and (max-width: 820px) {
				&::before {
					right: -10px;
					width: 40%;
					top: 45%;
				}
			}

			@media screen and (max-width: 600px) {
				&::before {

					display: none !important;
				}
			}


			&::after {
				position: absolute;
				content: "";
				background: url(../img/about_right.png) no-repeat;
				width: 220px;
				aspect-ratio: 219 / 257;
				background-size: contain;
				left: -85px;
				top: 140px;
				margin: auto;

			}


			@media screen and (max-width: 1200px) {
				&::after {

					left: -30px;
					width: 200px;
					top: 210px;
				}
			}


			@media screen and (max-width: 820px) {
				&::after {

					left: -30px;
					width: 40%;
					top: 45%;
				}
			}

			@media screen and (max-width: 600px) {
				&::after {

					display: none;
				}
			}


			h3 {
				position: relative;
				text-align: center;
				top: -35px;
				right: 0;
				left: 0;
				margin-bottom: 56px;
				color: var(--blue);

				@media screen and (max-width:820px) {
					top: -15px
				}

				@media screen and (max-width: 600px) {
					margin-bottom: 20px;
				}

				img {
					max-width: 225px;
					height: auto;

					@media screen and (max-width:820px) {
						max-width: 145px;
						margin-bottom: 10px;
					}
				}

				small {
					font-size: 1.4rem;
					letter-spacing: 0.18em;
					font-weight: 700;
					display: inline-block;
					margin-top: 15px;
				}
			}

			h4 {
				text-align: center;
				font-size: 3.2rem;
				font-weight: bold;
				letter-spacing: 0.24em;
				line-height: 6.4rem;
				margin-bottom: 40px;
				margin-top: -35px;

				@media screen and (max-width: 1500px) {
					font-size: 2.6rem;
					line-height: 5.2rem;
				}

				@media screen and (max-width: 820px) {
					font-size: 2.2rem;
					line-height: 4.2rem;
				}

				@media screen and (max-width: 600px) {
					font-size: 2.2rem;
					letter-spacing: 0.1em;
					margin-bottom: 36px;
					margin-top: 0;
				}


				span {
					color: var(--blue);
				}
			}

			p {
				font-size: 1.8rem;
				font-weight: 500;
				letter-spacing: 0.1em;
				text-align: center;
				line-height: 4.5rem;
				font-family: var(--zen);

				@media screen and (max-width: 1500px) {
					font-size: 1.8rem;
					line-height: 4rem;
				}

				@media screen and (max-width: 820px) {
					font-size: 1.6rem;
					line-height: 3.2rem;
				}

				@media screen and (max-width: 600px) {
					font-size: 1.6rem;
					line-height: 3.4rem;
					position: relative;


					&::before {
						position: absolute;
						content: "";
						background: url(../img/about_left.png) no-repeat;
						width: 54%;
						aspect-ratio: 320 / 190;
						background-size: contain;
						right: -35px;
						top: calc(100% + 30px);
						margin: auto;

					}

					&::after {
						position: absolute;
						content: "";
						background: url(../img/about_right.png) no-repeat;
						width: 43%;
						aspect-ratio: 283 / 346;
						background-size: contain;
						left: -35px;
						top: calc(100% - 20px);
						margin: auto;
					}


				}


			}
		}
	}

	.about_slide {
		overflow: visible;
		margin: 0 auto;
		width: 1650px;
		position: relative;
		margin-top: -420px;

		@media screen and (max-width: 1500px) {
			margin-top: -320px;
			max-width: 1200px;
		}

		@media screen and (max-width: 600px) {
			margin-top: -270px;
			max-width: 200vw;
		}

		/* &::before {
			position: absolute;
			z-index: 1;
			content: "";
			width: 90%;
			max-width: 1132px;
			height: 100%;
			background: white;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: 0 auto !important;
			padding-top: 45px;
			padding-bottom: 45px;


		}

		@media screen and (max-width: 1500px) {
			&::before {

				display: none!important;
			}

		} */


		.about_slider {
			position: relative;
			padding-top: 45px;
			z-index: 2;
			display: none;

			&.slick-initialized {
				display: block;
				/*slick-initializedが付与されたら表示*/
			}


			@media screen and (max-width: 600px) {
				overflow-x: hidden;
			}

			.slick-list {
				overflow: visible;
				height: auto !important;

				@media screen and (max-width: 600px) {
					overflow-x: hidden;
				}

			}

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
		}

		.slick-track {
			display: flex;
		}

		.slick-slide {
			margin: 0 36px !important;
			width: auto !important;
			height: auto !important;

			@media screen and (max-width: 600px) {
				margin: 0 16px !important;
			}

		}
	}

	&.structure {
		padding: 82px 0 97px;
		background: #D3EFFF;
		position: relative;

		@media screen and (max-width: 820px) {
			padding: 62px 0;
		}



		&::after {
			position: absolute;
			content: "";
			clip-path: polygon(50% 100%, 0 0, 100% 0);
			width: 66px;
			aspect-ratio: 66 / 46;
			background: #D3EFFF;
			top: calc(100% - 1px);
			left: 0;
			right: 0;
			margin: auto;

			@media screen and (max-width: 600px) {
				width: 35px;
				aspect-ratio: 51 / 43;
			}
		}

		.structure_box {
			.section_title {
				display: flex;
				align-items: center;
				justify-content: center;

				h3 {
					display: inline-block;
					width: auto;
					font-size: 2.8rem;
					line-height: 4.6rem;
					font-weight: 700;
					text-align: center;
					position: relative;

					@media screen and (max-width: 600px) {
						font-size: 1.8rem;
						line-height: 3rem;
						letter-spacing: 0.1em;
						padding: 0;
					}

					&::before,
					&::after {
						position: absolute;
						content: "";
						width: 35px;
						height: 100%;
						margin: auto;
						bottom: 0;

						@media screen and (max-width: 600px) {
							bottom: -10px;
							width: 28px;
						}
					}

					&::before {
						background: url(../img/structure_icon1.svg) no-repeat;
						right: calc(100% + 10px);
						background-position: center bottom;
						background-size: contain;


					}

					@media screen and (max-width: 600px) {
						&::before {
							right: 100%;
							left: auto;
						}
					}



					&::after {
						background: url(../img/structure_icon2.svg) no-repeat;
						left: calc(100% + 10px);
						background-position: center bottom;
						background-size: contain;


					}

					@media screen and (max-width: 600px) {
						&::after {

							left: 100%;
						}
					}

					span {
						color: var(--blue);
					}
				}
			}

			.structure_img {
				margin-top: 60px;


			}


			@media screen and (max-width: 600px) {
				.structure_img {

					margin-top: 30px;
				}
			}

			.structure_btn {
				display: none;
				background: var(--blue);
				margin: 35px auto 0;
				max-width: 290px;
				padding: 19px;
				border-radius: 100px;
				text-align: center;
				filter: drop-shadow(0 5px 0 rgba(0, 134, 177, 1));
				transform: translateZ(0);
				transition: all .2s;

				&::active {
					filter: drop-shadow(0 1px 0 rgba(0, 134, 177, 1));
					transform: translateY(4px);
				}

				span {
					color: white;
					font-weight: 600;
					font-size: 1.4rem;
					letter-spacing: 0.1em;
				}

				box-shadow: 3px;
			}
		}
	}


	&.merit {
		/* background: #9BF2E5; */
		background: url(../img/merit_bg.jpg);
		background-size: 100% 100%;
		/* padding-bottom: 0; */

		padding-top: 82px;


		@media screen and (max-width: 600px) {
			padding-top: 50px;
			padding-bottom: 20px;
		}

		.merit_box {
			position: relative;
			z-index: 3;

			padding-bottom: 110px;

			.section_title {
				display: flex;
				justify-content: center;
				align-items: center;

				h3 {
					font-size: 2.8rem;

					span {
						color: var(--blue);
					}

					@media screen and (max-width: 600px) {
						font-size: 1.8rem;
						line-height: 3rem;
						text-align: center;
						padding: 0;
					}
				}

				img {
					width: 32px;
					aspect-ratio: 32 / 39;
					margin-left: 10px;

					@media screen and (max-width: 600px) {
						width: 19px;
						margin-bottom: 3px;
					}
				}

			}

			ul {
				&.merit_list {
					margin-top: 52px;
					display: flex;
					justify-content: space-between;
					filter: drop-shadow(0 15px 22px rgba(223, 230, 244, 1));
					transform: translateZ(0);

					@media screen and (max-width: 600px) {
						margin-top: 29px;
						align-items: flex-start;
					}

					li {
						width: 32.4%;
						background: white;
						border-radius: 10px;
						overflow: hidden;
						/* border: 1px solid #0DABDD; */

						@media screen and (max-width: 600px) {
							width: 100%;
							margin-bottom: 30px;

							&:last-child {
								margin-bottom: 0;
							}
						}


						.title {
							background: #0DABDD;

							h4 {
								text-align: left;
								color: white;
								font-size: 2rem;
								font-weight: 700;
								letter-spacing: 0.06em;
								padding: 30px 25px;
								padding-right: 105px;

								@media screen and (max-width: 1200px) {
									font-size: 1.8rem;
									padding: 20px 25px;
								}

								@media screen and (max-width: 600px) {}
							}
						}

						&:nth-child(1) {
							.title {
								h4 {
									background: url(../img/merit1.png) no-repeat;
									background-size: contain;
									background-position: bottom right;

									@media screen and (max-width: 1200px) {
										background-size: 55px auto;

									}

									@media screen and (max-width: 600px) {
										background-size: contain;

									}

								}

							}
						}

						&:nth-child(2) {
							.title {
								h4 {
									background: url(../img/merit2.png) no-repeat;
									background-size: contain;
									background-position: bottom right;

									@media screen and (max-width: 1200px) {
										background-size: 55px auto;

									}

									@media screen and (max-width: 600px) {
										background-size: contain;

									}

								}

							}
						}

						&:nth-child(3) {

							.title {
								background: #04BA9F;

								h4 {
									background: url(../img/merit3.png) no-repeat;
									background-size: contain;
									background-position: bottom right;
									color: white;

									@media screen and (max-width: 1200px) {
										background-size: 55px auto;

									}

									@media screen and (max-width: 600px) {
										background-size: contain;

									}

								}

							}

							.text {
								dl {

									dt {
										background: #08BA9F;
									}
								}
							}
						}

						.text {
							padding: 37px 38px 50px;

							@media screen and (max-width: 1200px) {
								padding: 30px 25px 45px;

							}

							dl {
								flex-wrap: wrap;
								display: flex;
								text-align: left;
								justify-content: space-between;
								align-items: flex-start;

								dt {
									margin-top: 2px;
									background: var(--blue);
									aspect-ratio: 1 / 1;
									width: 26px;
									display: flex;
									border-radius: 50%;
									color: white;
									align-items: center;
									justify-content: center;
									text-align: center;

									@media screen and (max-width: 1200px) {
										width: 22px;

									}

									@media screen and (max-width: 600px) {
										margin-top: 5px;
									}

									span {
										display: grid;
										place-content: center;
										width: 100%;
										height: 100%;
										color: white;
										font-weight: 700;
										padding-bottom: 3px;
										font-family: var(montserrat);
										font-size: 1.6rem;

										@media screen and (max-width: 1200px) {
											font-size: 1.4rem;
											padding-bottom: 0;

										}

									}
								}

								dd {
									width: calc(100% - 35px);
									font-size: 1.6rem;
									letter-spacing: 0.06em;
									line-height: 2.9rem;
									font-weight: 500;

									@media screen and (max-width: 1200px) {
										width: calc(100% - 30px);
										font-size: 1.5rem;
									}

								}

								dt,
								dd {
									margin-bottom: 26px;

									&:last-child {
										margin-bottom: 0;

									}
								}
							}

						}
					}
				}
			}
		}


		.message_box {
			padding-top: 245px;
			padding-bottom: 270px;

			position: relative;

			@media screen and (max-width: 600px) {
				margin-top: -65px;
				padding-top: 105px;
				padding-bottom: 155px;
				position: relative;
				z-index: 2;

			}


			&::before,
			&::after {
				position: absolute;
				content: "";
				width: 141%;
				left: -20%;
				margin: auto;
				z-index: 1;

			}

			@media screen and (max-width: 600px) {

				&::before,
				&::after {
					width: 100vw;
					left: -23px;
				}
			}



			&::before {
				background: url(../img/message_bg_top.png) no-repeat;
				background-size: contain;
				background-position: top center;
				aspect-ratio: 1558 / 456;
				top: 0;


			}

			@media screen and (max-width: 600px) {
				&::before {
					background: url(../img/message_bg_top_sp.png) no-repeat;
					aspect-ratio: 482 / 182;
					background-size: contain;
					width: 128VW;
					margin-left: -14vw;
					background-position: top center;
				}
			}


			&::after {
				background: url(../img/message_bg_bottom.png) no-repeat;
				background-size: contain;
				background-position: top center;
				aspect-ratio: 1558 / 404;
				bottom: 0;

			}

			@media screen and (max-width: 600px) {
				&::after {

					background: url(../img/message_bg_bottom_sp.png) no-repeat;
					aspect-ratio: 375 / 197;
					background-size: contain;
					background-position: bottom center;
					bottom: 25px;
					z-index: 10;
				}
			}



			.message_text {
				position: relative;
				z-index: 2;
				text-align: center;
				margin: 0 auto;
				max-width: 745px;

				&::before,
				&::after {
					position: absolute;
					content: "";
					margin: auto;
				}

				&::before {
					width: 140%;
					aspect-ratio: 1088 / 313;
					background: url(../img/message_left_2.png) no-repeat;
					background-size: contain;
					left: -14%;
					top: 75%;
					z-index: 3;
				}


				@media screen and (max-width: 600px) {
					&::before {

						background: url(../img/message_left_sp.png) no-repeat;
						background-size: contain;
						width: 34%;
						aspect-ratio: 222 / 169;

						right: calc(50% + 100px);
						top: 30px;
						z-index: 5;
						border-radius: 8px;

					}
				}


				&::after {
					width: 44.5%;
					aspect-ratio: 321 / 213;
					background: url(../img/message_right.png) no-repeat;
					background-size: contain;
					left: calc(100% - 80px);
					bottom: calc(100% - 180px);

				}

				@media screen and (max-width: 600px) {
					&::after {
						width: 32%;
						left: calc(50% + 110px);
						bottom: calc(100% - 145px);
						border-radius: 8px;

					}
				}


				.message_bg {
					position: relative;
					background: white;
					width: 100%;
					filter: drop-shadow(0 12px 28px rgba(209, 239, 245, 1));
					transform: translateZ(0);
					padding: 74px 95px 90px;
					border-radius: 20px;

					@media screen and (max-width: 820px) {
						padding: 55px 65px 70px;
					}

					@media screen and (max-width: 600px) {
						padding: 49px 30px 90px;
					}
				}

				h3 {
					font-size: 3rem;
					line-height: 5.4rem;
					font-weight: 700;
					letter-spacing: 0.1em;


					@media screen and (max-width: 820px) {
						font-size: 2.4rem;
						line-height: 4.8rem;
						padding: 0;
					}


					strong {
						font-weight: 700;
						display: inline-block;
						border-bottom: 2px dashed var(--blue);

						margin-bottom: 10px;

						span {
							color: var(--blue);
						}

						@media screen and (max-width: 600px) {
							margin-bottom: 0;
						}
					}

					small {
						font-size: 2.8rem;

						@media screen and (max-width: 820px) {
							font-size: 2.4rem;

						}

						@media screen and (max-width: 600px) {
							border-bottom: 2px dashed var(--blue);

						}


					}
				}

				p {
					margin-top: 52px;
					font-size: 1.8rem;
					font-weight: 600;
					letter-spacing: 0.1em;
					line-height: 4.8rem;
					font-family: var(--zen);

					@media screen and (max-width: 820px) {
						font-size: 1.6rem;
						line-height: 3.4rem;
						margin-top: 40px;
					}

					@media screen and (max-width: 600px) {
						letter-spacing: 0.01em;
					}

					span {
						color: var(--blue);
					}
				}
			}
		}
	}

	&.participation {
		position: relative;
		z-index: 7;
		background: white;
		background-size: 100% 100%;
		padding: 35px 0;

		@media screen and (max-width: 600px) {

			padding: 25px 0;
		}

		.participation_box {
			.participation_box_title {
				display: flex;
				justify-content: center;
				align-items: center;

				@media screen and (max-width: 600px) {

					align-items: flex-end;

				}

				h3 {
					font-size: 3rem;
					line-height: 5.8rem;
					margin: 0 20px;

					@media screen and (max-width: 820px) {
						font-size: 2.4rem;
						margin: 0 10px;
					}

					@media screen and (max-width: 600px) {
						font-size: 1.8rem;
						line-height: 3rem;
						letter-spacing: 0.05em;
						padding: 0;
						margin: 0 10px;
					}

					span {
						color: var(--blue);
					}
				}

			}

			ul {
				/* display: flex; */
				width: 100%;
				justify-content: space-between;
				/* margin-top: 2em;
				margin-bottom: 2em; */
				border-radius: 10px;
				flex-wrap: wrap;

				.slick-track {
					display: flex;
					align-items: center;
				}

				.slick-list {
					overflow: visible !important;
				}


				li {
					margin: 0 1.5em;

					&.azuchi {
						max-width: 65px;
						min-width: 60px;
					}

					&.nihontotor {
						max-width: 100px;

					}
					&.shiojiri{
						max-width: 120px;
					}

					picture {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;

						img {
							object-position: center center;
							width: 100%;
							height: auto;
						}
					}
				}
			}
		}
	}


	&.scene {
		position: relative;
		z-index: 6;
		background: #E5FBFF;
		/* background-size: 100% 100%; */

		/* border-radius: 100vw 100vw 0 0 / 450px 450px 0 0; */
		padding: 75px 0;
		/* min-height: 300px; */

		/* @media screen and (max-width: 600px) {
			border-radius: 100vw 100vw 0 0 / 150px 150px 0 0;
			padding: 55px 20vw;
			margin: -55px -20vw 0;
		} */


		@media screen and (max-width: 600px) {
			padding-top: 35px;
		}

		text-align: center;
		padding-bottom: 0;

		/* &::before {
			position: absolute;
			content: "";
			height: auto;
			aspect-ratio: 1440 / 586;

			max-height: 586px;
			width: 100%;
			background: white;
			background-size: 100% 100%;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			z-index: 1;
		}




		&::after {
			position: absolute;
			content: "";
			width: 100%;
			aspect-ratio: 1440 / 250;
			background: #E5FBFF;
			clip-path: polygon(50% 99%, 100% 0, 100% 100%, 0 100%, 0 0);
			bottom: -1px;
			left: 0;
			right: 0;
			margin: auto;
			z-index: 1;
		}


		@media screen and (max-width: 600px) {
			&::before {
				background: white repeat-x;
				background-size: contain;
				background-position: center bottom;
				aspect-ratio: auto;
				height: 100%;
				width: 100% !important;
			}

			&::after {
				aspect-ratio: 375 / 116;
			}
		} */


		.difference {
			position: relative;
			z-index: 2;
			padding-bottom: 110px;

			@media screen and (max-width: 600px) {
				padding-bottom: 65px;
			}

			.difference_box {
				text-align: center;



				.difference_box_title {
					display: flex;
					justify-content: center;
					align-items: center;

					@media screen and (max-width: 600px) {

						align-items: flex-end;

					}

					h3 {
						font-size: 3rem;
						line-height: 5.8rem;
						margin: 0 20px;

						@media screen and (max-width: 820px) {
							font-size: 2.4rem;
							margin: 0 10px;
						}

						@media screen and (max-width: 600px) {
							font-size: 1.8rem;
							line-height: 3rem;
							letter-spacing: 0.05em;
							padding: 0;
							margin: 0 10px;
						}

						span {
							color: var(--blue);
						}
					}

					img {
						width: 79px;

						@media screen and (max-width: 820px) {
							width: 55px;
						}

						@media screen and (max-width: 600px) {
							width: 30px;
						}
					}
				}

				.difference_feature {
					margin: 0;
					padding: 0;
					margin-top: 30px;
					border-radius: 16px;
					/* background: white; */

					filter: drop-shadow(0 33px 26px rgba(54, 170, 206, 0.3));
					transform: translateZ(0);
					overflow: hidden;
					align-items: stretch;

					@media screen and (max-width: 600px) {
						flex-direction: column;
					}

					.difference_img {
						display: flex;
						width: 47%;
						padding: 30px 66px 27px;
						align-items: flex-end;
						justify-content: space-between;
						background: #D1ECF5;

						@media screen and (max-width: 600px) {
							width: 100%;
							padding: 26px 15px 18px;
						}

						figure {
							max-width: 110px;
							height: auto;

							/* img {
								filter: drop-shadow(0 0px 5px rgba(183, 183, 183, 1));
								transform: translateZ(0);
							} */

							@media screen and (max-width: 600px) {
								max-width: 100px;

								img {
									width: 75%;
									margin: 0 auto;
								}
							}


							figcaption {
								font-size: 1.4rem;
								text-align: center;
								font-weight: 600;
								line-height: 1.7rem;
								margin-top: 15px;
								height: 40px;
								display: grid;
								place-content: center;

								@media screen and (max-width: 600px) {
									margin-top: 10;
								}
							}
						}
					}

					.difference_text {
						background: white;
						width: 53%;
						padding: 32px 60px 20px;

						@media screen and (max-width: 600px) {
							width: 100%;
							padding: 21px 18px 20px;
						}


						h5 {
							display: inline-block;
							width: auto;
							background: #0EABDD;
							color: white;
							font-weight: 700;
							padding: 8px 15px;
							border-radius: 3px;
							font-size: 2rem;

							@media screen and (max-width: 600px) {
								font-size: 1.6rem;
								padding: 6px 15px;
							}
						}

						dl {
							margin-top: 19px;
							display: flex;
							flex-wrap: wrap;
							text-align: left;

							dt,
							dd {
								margin-bottom: 22px;

								&:last-child {
									margin-top: 0;
								}
							}

							dt {
								margin-right: 10px;
								flex-grow: 0;
								line-height: 3.2rem;
								padding-top: 4px;

								span {
									line-height: 3.2rem;

									display: grid;
									place-content: center;
									width: 26px;
									aspect-ratio: 1/1;
									border-radius: 50%;
									background: #0EABDD;
									color: white;
									font-weight: 600;
									font-family: var(--montserrat);

									@media screen and (max-width: 600px) {
										width: 21px;
										font-size: 1.2rem;
									}
								}
							}

							dd {
								width: calc(100% - 36px);
								flex-grow: 1;
								font-size: 1.8rem;
								letter-spacing: 0.08em;
								font-weight: 600;
								line-height: 3.2rem;

								@media screen and (max-width: 600px) {
									line-height: 2.7rem;
									font-size: 1.6rem;
								}

								span {
									color: #0EABDD;
								}
							}
						}

					}
				}
			}

		}

	}

	.diffusion {
		position: relative;
		z-index: 3;
		margin-top: 80px;
		padding-top: 69px;

		@media screen and (max-width: 1200px) {
			padding-top: 0;
		}

		@media screen and (max-width: 600px) {
			margin-top: 45px;
		}

		.diffusion_box {
			padding-top: 46px;
			position: relative;

			@media screen and (max-width: 600px) {
				padding-bottom: 240px;
			}

			&::after {
				position: absolute;
				content: "";
				width: 50.4%;
				aspect-ratio: 567 / 480;
				background: url(../img/about_diffusion.png) no-repeat;
				background-size: contain;
				background-position: right center;
				top: 0;
				bottom: 0;
				right: 0;
				margin: auto;

			}

			@media screen and (max-width: 600px) {
				&::after {
					width: 100%;
					top: auto;
					bottom: 50px;
				}
			}


			h3 {
				font-size: 3rem;
				font-weight: bold;
				letter-spacing: 0.21em;

				line-height: 5.8rem;
				margin-bottom: 61px;

				@media screen and (max-width: 1200px) {
					font-size: 2.4rem;
					line-height: 4.8rem;
					margin-bottom: 40px;
				}

				@media screen and (max-width: 600px) {
					font-size: 2rem;
					line-height: 3.8rem;
					letter-spacing: 0.11em;
					padding: 0;
					margin-bottom: 45px;
				}

				span {
					color: var(--blue);

				}
			}

			p {
				font-size: 1.8rem;
				letter-spacing: 0.16em;
				line-height: 4.5rem;
				font-weight: 500;
				padding-bottom: 120px;
				font-family: var(--zen);

				@media screen and (max-width: 1200px) {
					font-size: 1.6rem;
					line-height: 3.6rem;
				}

				@media screen and (max-width: 600px) {
					line-height: 3.4rem;
				}

			}
		}
	}


	&.spacial {
		background: #E5FBFF;
		padding: 60px 0 104px;
		position: relative;

		@media screen and (max-width: 600px) {
			padding-top: 35px;
		}

		&::before {
			position: absolute;
			content: "";
			width: 72%;
			max-width: 1132px;
			aspect-ratio: 1132 / 919;
			background: url(../img/special_bg.jpg) no-repeat;
			background-size: contain;
			background-position: left center;
			/* top: 0; */
			bottom: 2%;
			/* left: calc(50% - 751px); */
			right: 31%;
			margin: auto;
			z-index: 1;
		}

		.spacial_box {
			position: relative;
			z-index: 5;

			.spacial_title {
				text-align: center;
				margin-bottom: 50px;

				h3 {
					display: inline-block;
					position: relative;
					font-size: 2.9rem;
					line-height: 5rem;

					@media screen and (max-width: 600px) {
						font-size: 1.8rem;
						line-height: 3.4rem;
						font-weight: 800;
						padding: 0;
						letter-spacing: 0.01em;
					}

					&::before,
					&::after {
						position: absolute;
						content: "";
						width: 5px;
						aspect-ratio: 5 / 75;
						background: var(--blue);
						margin: auto;
						bottom: -10px;
						border-radius: 50px;

					}

					@media screen and (max-width: 600px) {

						&::before,
						&::after {
							width: 3px;
							bottom: -10px;
							aspect-ratio: 3 / 30;
						}
					}


					&::before {
						right: calc(100% + 15px);
						transform: rotate(-38deg);
						transform-origin: right bottom;
					}

					@media screen and (max-width: 600px) {
						&::before {

							right: auto;
							left: 0;
						}
					}

					&::after {
						transform: rotate(38deg);
						left: calc(100% + 15px);
						transform-origin: left bottom;
					}

					@media screen and (max-width: 600px) {
						&::after {

							left: auto;
							right: 0;
						}

					}

					span {
						margin: 5px 3px;
						background: white;
						display: inline-block;
						padding: 0 10px 4px;
						color: var(--blue);

						@media screen and (max-width: 600px) {
							padding: 1px 4px;
							margin: 5px 4px;
						}
					}
				}
			}

			>p {
				text-align: center;
				margin-bottom: 70px;
				font-size: 1.8rem;
				font-weight: 600;
				line-height: 4.2rem;
				letter-spacing: 0.1em;

				span {
					color: var(--blue);
				}

				@media screen and (max-width: 600px) {
					display: none;
				}
			}

			ul {
				overflow: visible;
				display: flex;
				justify-content: space-between;
				position: relative;

				@media screen and (max-width: 820px) {
					flex-direction: column;
					justify-content: flex-start;
					z-index: 1;
					aspect-ratio: auto;
				}

				li {
					&.spacial_img {
						width: 37%;
						height: 100%;
						z-index: 1;
						top: 0;
						bottom: 0;
						position: absolute;

						@media screen and (max-width: 820px) {
							width: 100%;
							aspect-ratio: auto;
							position: relative;
							flex-grow: 1;
						}

						.spacial_img_list {
							width: 100%;
							margin-top: calc(100% - 95%);
							height: 90%;
							display: block;
							position: relative;

							@media screen and (max-width: 820px) {
								margin-top: 0;
								aspect-ratio: auto;
								height: auto;
								display: flex;
								justify-content: space-between;
								margin-bottom: 45px;

								.img_box {
									position: static !important;
									width: 30% !important;
									aspect-ratio: 3/4;

									picture {
										display: block;
										width: 100%;
										height: 100%;
									}

									img {
										width: 100%;
										height: 100%;
									}

								}
							}

							@media screen and (max-width: 600px) {
								margin-bottom: 0;
							}

							.img_box {
								position: absolute;
								width: 53.5%;
								margin: auto;
								opacity: 1;
								transition: all 1s;

								@media screen and (max-width: 600px) {
									width: 39%;
								}

								&.fade {
									transform: translateY(0);
									opacity: 1;
								}

								picture {
									display: inline-block;
									position: relative;

									img {
										/* filter: drop-shadow(0 10px 45px rgba(148, 212, 228, 0.2)); */
										transform: translateZ(0);
										/* @media screen and (max-width: 600px) {
											filter: drop-shadow(0 25px 27px rgba(148, 212, 228, 1));

										} */
									}

									&::after {
										position: absolute;
										content: "";
									}
								}

								&:nth-child(1) {
									left: 0;
									top: 15%;
									transition-delay: .5s;


									picture {
										&::after {
											background: url(../img/special_sub1.svg);
											width: 24%;
											aspect-ratio: 56 / 36;
											background-size: contain;
											left: 31%;
											bottom: 107%;
											margin: auto;

										}

										@media screen and (max-width: 600px) {
											&::after {
												width: 34%;
												left: 25%;
												bottom: 107%;
											}

										}
									}
								}

								&:nth-child(2) {
									right: 0;
									top: 0;
									transition-delay: 1.5s;

									@media screen and (max-width: 600px) {
										right: 0;
										left: 0;
										margin: auto;
										z-index: 3;
										transition-delay: 2.5s;

									}


									picture {
										&::after {
											background: url(../img/special_sub2.svg);
											width: 26%;
											aspect-ratio: 60 / 38;
											background-size: contain;
											left: 109%;
											top: 5%;
											margin: auto;

										}

										@media screen and (max-width: 600px) {
											&::after {
												top: -5%;

											}
										}


									}

								}

								&:nth-child(3) {
									bottom: 0;
									left: 0;
									right: 0;
									transition-delay: 2.5s;

									@media screen and (max-width: 600px) {
										transition-delay: 1.5s;

										left: auto;
										right: 0;
										margin: auto;
										z-index: 2;
									}


									picture {
										&::after {
											background: url(../img/special_sub3.svg);
											width: 20%;
											aspect-ratio: 45 / 52;
											background-size: contain;
											left: 103%;
											top: 93%;
											margin: auto;

										}

										@media screen and (max-width: 600px) {
											&::after {
												width: 32%;
												left: auto;
												right: 0;
												top: 105%;
											}
										}
									}


								}

							}

						}

					}

					&.spacial_text {
						width: 66%;
						justify-content: space-between;
						aspect-ratio: 100 / 91;
						position: relative;
						z-index: 3;
						margin: 0 0 0 auto;

						@media screen and (max-width: 820px) {
							margin: 0;
							width: 100%;
							aspect-ratio: auto;
							margin: 0;
							display: block;
							z-index: 1;
							padding: 0 0 40px;
							padding-bottom: 0;
							position: relative;
							z-index: 5;


							&::after {
								position: absolute;
								content: "";
								width: 200vw;
								height: 103%;
								top: calc(3% + 25px);
								bottom: 0;
								border-radius: 100vw;
								left: calc(-50vw - 23px);
								margin: auto;
								z-index: 1;
								background: #D0F8FF;

							}



						}

						&::before {
							position: absolute;
							content: "";
							width: 82%;
							border-radius: 50%;
							aspect-ratio: 1 / 1;
							background: #D0F8FF;
							bottom: 10px;
							left: 0;
							right: 0;
							margin: auto;


						}

						@media screen and (max-width: 820px) {

							&::after,
							&::before {
								display: none;
							}
						}


						.special_center {
							position: absolute;
							content: "";
							width: 20%;
							border-radius: 50%;
							aspect-ratio: 1 / 1;
							background: linear-gradient(135deg, #3CE5CB, #14B4DB);
							background: -webkit-linear-gradient(135deg, #3CE5CB, #14B4DB);
							filter: drop-shadow(0 3px 16px rgba(174, 219, 234, 1));
							transform: translateZ(0);

							top: calc(50% - 35px);
							left: 0;
							right: 0;
							margin: auto;
							z-index: 5;
							display: flex;
							justify-content: center;
							align-items: center;
							text-align: center;
							padding: 6px;


							@media screen and (max-width: 600px) {
								width: 100%;
								max-width: 230px;
								border-radius: 5px;
								position: relative;
								z-index: 3;
								aspect-ratio: 229 / 72;
								margin-bottom: 25px;
								padding: 6px;
							}


							span {
								text-align: center;
								border: 1px solid #9BF2E5;
								width: 100%;
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
								color: white;

								@media screen and (max-width: 600px) {
									width: 100%;
									max-width: 230px;
									border-radius: 5px;
									position: relative;
									z-index: 3;
									aspect-ratio: 218 / 60;
									height: auto;

									flex-direction: row;
									align-items: center;
								}


								img {
									display: block;
									width: 80%;
									margin-bottom: 5px;

									@media screen and (max-width: 600px) {
										width: 55%;
										margin-right: 5px;

									}


								}
							}
						}

						.text_box {
							position: absolute;
							background: var(--blue);
							background: linear-gradient(-90deg, #DCF3F7, #C3F8EC, #A0DCEA);
							background: -webkit-linear-gradient(-90deg, #DCF3F7, #C3F8EC, #A0DCEA);
							border-radius: 50%;
							padding: 15px;
							aspect-ratio: 1 / 1;
							width: 51%;
							margin: auto;
							z-index: 4;


							@media screen and (max-width: 600px) {
								width: 100%;
								position: static;
							}


							.texts {
								border-radius: 50%;
								background: white;
								filter: drop-shadow(0 3px 15px rgba(126, 222, 218, 1));
								transform: translateZ(0);
								position: relative;
								aspect-ratio: 1 / 1;
								text-align: center;
								z-index: 5;
								padding: 0 45px;

								@media screen and (max-width: 600px) {
									display: flex;
									flex-wrap: wrap;
									/* align-items: center; */
									justify-content: space-between;
									/* padding: 30px 40px; */
								}

								>span {
									display: inline-block;
									position: relative;
									top: -15px;
									min-height: 58px;

									@media screen and (max-width: 600px) {
										top: auto;
										height: auto;
										min-height: 0;
										width: 70px;
										display: flex;
										align-items: center;
									}

								}

								h4 {
									color: var(--blue);
									font-size: 2.4rem;
									font-weight: 700;
									line-height: 3.5rem;
									letter-spacing: 0.07em;
									margin-top: 15px;
									height: 70px;
									justify-content: center;
									display: flex;
									align-items: center;

									@media screen and (max-width: 600px) {
										text-align: left;
										font-size: 2.2rem;
										line-height: 3rem;
										margin-top: -5px !important;
										height: auto;
										width: calc(100% - 80px);
										display: flex;
										justify-content: flex-start;
										letter-spacing: 0.01em;
									}
								}

								p {
									margin-top: 15px;

									@media screen and (max-width: 600px) {
										margin-top: -10px !important;
									}

									span {
										display: inline-block;
										text-align: left;
										font-size: 1.6rem;
										font-weight: 500;
										line-height: 3.2rem;
										letter-spacing: 0em;

										@media screen and (max-width: 600px) {
											font-size: 1.3rem;
											line-height: 2.2rem;
										}


									}


								}
							}


							&:nth-child(2) {
								right: 0;
								left: 0;
								top: 0;
								z-index: 3;
								width: 49.5%;

								@media screen and (max-width: 600px) {
									width: 100%;
								}


								.texts {

									>span {
										top: -30px;

										@media screen and (max-width: 600px) {
											top: auto;
										}


									}

									h4 {
										margin-top: 0;
									}

									p {
										margin-top: 15px;
									}
								}
							}

							&:nth-child(3) {
								left: 0;
								bottom: 0;
								z-index: 2;

								@media screen and (max-width: 600px) {
									margin-top: -80px;
								}

							}

							&:nth-child(4) {
								right: 0;
								bottom: 0;
								z-index: 1;

								@media screen and (max-width: 600px) {
									margin-top: -80px;
									z-index: 3;
								}

							}



						}

						&.four_box {
							aspect-ratio: 100/95;
							width: 65%;

							@media screen and (max-width: 820px) {
								width: 100%;
								aspect-ratio: 1/1;
							}

							@media screen and (max-width: 600px) {
								aspect-ratio: auto;
							}

							&::before {
								top: 0;
							}

							.special_center {
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								width: 22%;
								filter: none;

								@media screen and (max-width: 600px) {
									width: 100%;
								}
							}

							.text_box {
								width: 52%;

								@media screen and (max-width: 600px) {
									width: 100%;
								}


								.texts {

									@media screen and (max-width: 600px) {
										flex-direction: column;
										justify-content: flex-start;
										align-items: center;
										padding: 0 35px;
									}

									h4 {
										font-size: 2.2rem;
										line-height: 3.3rem;
										margin-top: -10px;

										@media screen and (max-width: 600px) {
											width: 100%;
											font-size: 2rem;

											width: auto;
											flex-grow: unset;
											text-align: center;
										}
									}

									p {
										font-size: 1.4rem;
										line-height: 2rem;
										margin-top: 5px;

										@media screen and (max-width: 600px) {
											margin-top: 20px !important;
											font-size: 1.2rem;
										}
									}

									small {
										display: inline-block;
										line-height: 2rem;
										margin-top: 10px;
									}

									>span {
										width: 70px;
										aspect-ratio: 1/1;
										margin-top: -20px;

										img {
											display: inline-block;
											width: 100%;
											height: 100%;
											object-fit: contain;
											object-position: center center;
										}

										@media screen and (max-width: 600px) {
											width: 50px;
											margin-top: 0 !important;
											top: -10px !important;
											bottom: auto !important;
										}
									}
								}

								&:nth-child(2) {
									left: 0;
									top: 0;
									bottom: auto;
									right: auto;
									z-index: 1;

									@media screen and (max-width: 600px) {
										width: 100%;
									}


									.texts {
										padding: 0 30px;

										>span {
											top: -15px;

											@media screen and (max-width: 600px) {
												top: auto;
											}


										}

										h4 {
											margin-top: 0;

										}

									}
								}


								&:nth-child(3) {
									right: 0;
									top: 0;
									bottom: auto;
									left: auto;
									z-index: 1;

									@media screen and (max-width: 600px) {
										margin-top: -80px;
										z-index: 3;
									}

								}

								&:nth-child(4) {
									left: 0;
									top: auto;
									right: auto;
									bottom: 0;
									z-index: 3;
								}

								&:nth-child(5) {
									right: 0;
									top: auto;
									left: auto;
									bottom: 0;
									z-index: 1;

									@media screen and (max-width: 600px) {
										margin-top: -80px;
										z-index: 3;
									}

								}


							}

						}


					}

					>p {
						margin-top: 70px;
						text-align: left;
						margin-bottom: 70px;
						font-size: 1.6rem;
						font-weight: 600;
						line-height: 3.2rem;
						letter-spacing: 0.06em;


						span {
							color: var(--blue);
						}

					}
				}
			}
		}
	}


	/* 問合せ */
	&.inquiry {
		background: #F0FDFF;
		position: relative;
		padding-top: 50px;



		@media screen and (max-width: 1200px) {
			padding-top: 10px;
		}

		@media screen and (max-width: 600px) {
			padding-bottom: 45px;

		}





		&::after {
			position: absolute;
			content: "";
			background: url(../img/inquiry_bg.png) no-repeat;
			width: 100%;
			aspect-ratio: 1440 / 500;
			background-size: 100% 100%;
			background-position: top center;
			top: 0;
			right: 0;
			left: 0;
			margin: auto;
			z-index: 1;

		}

		.inquiry_info,
		.inquiry_box {
			position: relative;
			z-index: 2;

		}

		.mfp_element_submit,
		.mfp_element_reset,
		.mfp_element_button,
		button.mfp_next,
		button.mfp_prev {
			text-shadow: none !important;
			box-shadow: none !important;
			background: none;
		}

		form#mailformpro label.mfp_checked {
			border: none;
			background: none;
			box-shadow: none;
		}

		form#mailformpro label.mfp_not_checked {
			border: none;
		}

		.inquiry_info {
			position: relative;
			z-index: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			@media screen and (max-width: 600px) {
				flex-direction: column;
				margin-top: 45px;
			}

			p {

				width: 100%;
				position: relative;
				z-index: 2;
				margin-top: 30px;

				font-size: 2.8rem;
				line-height: 5rem;
				font-weight: 700;
				letter-spacing: 0.03em;
				color: var(--blue);
				font-family: var(--zen);
				text-align: center;
				margin-bottom: 30px;

				@media screen and (max-width: 1200px) {
					font-size: 2.2rem;
					line-height: 4rem;
				}

				@media screen and (max-width: 600px) {

					font-size: 1.6rem;
					text-align: center;
					line-height: 3.8rem;
					width: 100%;
					padding-top: 0;
					letter-spacing: 0;
					margin: 0 0 30px;
				}

				span {
					padding: 0 5px;
					margin: 5px 3px;
					background: white;
					display: inline-block;
					width: auto;
					align-items: center;

					@media screen and (max-width: 600px) {
						padding: 0 3px;
						margin: 2px 2px;
					}

					img {
						width: 39px;
						height: auto;
						padding-bottom: 10px;

						@media screen and (max-width: 600px) {
							width: 25px;
							padding-bottom: 10px;
						}
					}
				}

			}

			.inquiry_img {
				position: relative;
				z-index: 1;
				display: block;
				max-width: 100%;
				text-align: center;
				/* margin: 0 auto; */

				img {
					width: 60%;
					margin: 0 auto;
					aspect-ratio: 779 / 522;
				}

				@media screen and (max-width: 600px) {
					max-width: 140%;
					width: 140%;
					margin-left: -20%;

					img {
						width: 140%;
					}
				}
			}
		}


		.inquiry_form {
			position: relative;
			z-index: 2;
			margin-top: -180px;

			background: white;
			padding: 55px 95px 35px;
			border-radius: 40px;
			/* filter: drop-shadow(0 3px 36px rgba(157, 214, 230, 1)); */
			transform: translateZ(0);

			@media screen and (max-width: 600px) {
				margin-top: -155px;
				filter: none;
				border-radius: 12px;
				padding: 30px 25px 0;
			}

			.inquiry_title {
				display: flex;
				align-items: center;
				justify-content: center;

				h3 {
					font-size: 2.8rem;
					text-align: center;
					display: flex;
					align-items: center;
					width: auto;
					color: var(--blue);

					img {
						max-width: 30px;
						aspect-ratio: 30 / 20;
						margin-left: 10px;
					}

					@media screen and (max-width: 600px) {
						font-size: 1.8rem;

						img {
							width: 20px;
							margin-left: 5px;
						}
					}
				}

			}

			>p {
				font-size: 1.6rem;
				letter-spacing: 0.07em;
				font-weight: 500;
				line-height: 3rem;
				margin: 30px 0 20px;
				text-align: center;

				@media screen and (max-width: 600px) {
					font-size: 1.3rem;
					line-height: 2.4rem;
					margin: 15px 0;
					text-align: left;

				}


				em {
					font-style: normal;
					background: none;
					color: #FD6960;
					font-weight: 600;
					letter-spacing: 0;
					display: inline-block;
				}


			}

		}

		table {
			border-collapse: collapse;
			width: 100%;
			table-layout: fixed;
			word-break: break-all;
			word-wrap: break-all;

			tr {

				@media screen and (max-width: 820px) {
					padding: 10px 0;
				}

				&:last-child th,
				&:last-child td {
					border: none;
				}

				th,
				td {
					/* border-bottom: 1px solid #e3e3e3; */
					/* padding: 30px 0; */
					vertical-align: middle;
					display: block;
					width: 100%;

					@media screen and (max-width: 820px) {
						display: block;
					}
				}

				td {
					padding-bottom: 30px;

					@media screen and (max-width: 820px) {
						padding-top: 10px;
					}

					@media screen and (max-width:600px) {
						margin-bottom: 0;
						padding-bottom: 15px;

					}

					&:nth-child(3) {
						width: 20%;
					}

					>span {
						display: inline-block;
						padding-left: 20px;
						font-size: 1.2rem;
						line-height: 2.1rem;
					}

					.small {
						width: 100%;
						display: inline-block;

						@media screen and (max-width:600px) {
							margin-top: 10px;
						}
					}

					iframe {
						border-radius: 0.3rem;
						background: #f6f6f6 !important;
						border: none !important;
					}
				}

				th {
					font-size: 1.5rem;
					letter-spacing: 0.05em;
					line-height: 2.5rem;
					font-weight: 500;
					/* width: 25%; */
					/* margin-right: 20px; */
					min-width: 350px;
					text-align: left;
					font-family: var(--noto);

					div {
						display: flex;
						align-items: center;

						span {
							display: inline-block;
						}
					}

					em {
						font-style: normal;
						background: none;
						color: #FD6960;
						font-weight: 600;
						letter-spacing: 0;
						display: inline-block;
					}

					@media screen and (max-width: 820px) {
						margin-right: 0;
						width: 100%;
						border-bottom: none;
						margin-bottom: 0;
						padding: 15px 0 0;

						br {
							display: none;
						}
					}

					@media screen and (max-width: 600px) {
						font-size: 1.4rem;
					}
				}
			}

			input,
			textarea,
			select {
				float: none;
				width: 100%;
				max-width: 100%;
				border: none;
				margin: 0.5rem 0;
				padding: 0.5rem 1rem;
				border-radius: 0.3rem;
				/* background: #EFF1F4; */
				background: #f6f6f6;
				font-weight: 500;
				outline: none;
				border: none;
				box-shadow: none;
				padding: 15px 10px;
				font-size: 1.6rem;
				transition: all .1s;
				color: #000;
			}

			select {
				width: auto;
			}

			textarea {
				width: 100% !important;
			}

			.on_focus {
				background: white;
				outline: var(--deep-blue) solid 2px;
			}

			input {

				&[type=radio],
				&[type=checkbox] {
					margin-right: 5px;

					&.on_focus {
						background: none;
						outline: none;
					}
				}

				&[type=radio],
				&[type=checkbox],
				select {
					width: auto;
				}
			}

			input,
			textarea {
				&::placeholder {
					color: #9f9f9f;
					font-size: 1.4rem;
				}
			}

			.tel_button {
				.tel_button_box {
					>a {
						max-width: 1280px;
						margin: 55px auto 0;

						img {
							width: 100%;
							margin: 0 auto 0;
							max-width: 1000px !important;
						}
					}
				}
			}

			.thanks_button {
				margin-top: 35px;
			}
		}

	}


}

footer {
	margin-top: auto;
	padding: 70px 0 70px;
	border-top: 1px solid #BBECF5;
	background: #F0FDFF;

	@media screen and (max-width: 600px) {
		padding-top: 0;
	}

	.privacy {
		margin-bottom: 2em;
		display: inline-block;
		width: auto;
		color: var(--black);
		text-decoration: underline;

		&:hover {
			opacity: .7;
		}

		p,
		span {
			color: var(--black);

			width: auto;
		}
	}

	.copyright {
		text-align: center;

		a.company {
			color: var(--black);
			text-decoration: none;
			display: inline-block;
			margin-bottom: 1.5em;
			width: auto;
			margin-top: 30px;

			@media screen and (max-width: 600px) {
				margin-top: 2.5em;
			}

			p {
				small {
					color: #515151;
				}

				span {
					display: inline-block;
					max-width: 180px;
					width: 100%;

					@media screen and (max-width: 600px) {
						max-width: 180px;
					}

					img {
						width: 100%;
					}
				}

				font-weight: 500;
				font-size: 1.6rem;
				color: var(--black);
			}
		}

		h2 {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 20px;

			@media screen and (max-width: 600px) {
				margin: 20px 0;
			}

			img {
				max-height: 53px;
				width: auto;
			}

			a {
				@media screen and (max-width: 600px) {
					display: flex;
					align-items: center;
					width: 80%;
					margin: 0 auto;

					picture {
						width: auto;

						img {
							margin: 0 2px;
							width: 100%;
							height: auto;
						}
					}

				}
			}
		}

		p {
			font-size: 1.4rem;
			color: #AAAAAA;
			font-weight: 500;
		}
	}
}

/* アニメーション */

.kv_text h2 {
	animation-name: h2;
	animation-duration: 3s;
	animation-delay: 2.2s;
	animation-fill-mode: forwards;
	transform: scale(0.98);

}

@keyframes h2 {
	from {
		transform: scale(0.98);

	}

	to {
		transform: scale(1);

	}
}


.kv_text .logo1 {
	animation-name: logo1;
	animation-duration: 1.5s;
	animation-delay: .2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes logo1 {
	from {
		transform: translateX(-3%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

.kv_text .logo2 {
	animation-name: logo2;
	animation-duration: 1.2s;
	animation-delay: 0.7s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes logo2 {
	from {
		transform: translateX(-3%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}



/* li.kv1 {
	animation: kv1 1s forwards;
	animation-delay: 2.1s;
}

@keyframes kv1 {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
} */


li.kv2 {
	animation: kv2 3s forwards;
	/* animation-delay: 2s; */
}


@keyframes kv2 {
	from {
		opacity: 1;
	}

	33% {
		opacity: 1;
	}

	60% {
		opacity: 0;

	}

	to {
		opacity: 0;
	}

}


li.kv3 {
	animation: kv3 3s forwards;
	/* animation-delay: 2s; */

}

@keyframes kv3 {
	from {
		opacity: 0;
	}

	33% {
		opacity: 0;
	}

	60% {
		opacity: 1;

	}

	to {
		opacity: 0;
	}
}

li.kv4 {
	animation: kv4 3s forwards;
	/* animation-delay: 2s; */

}

@keyframes kv4 {
	from {
		opacity: 0;
	}

	33% {
		opacity: 0;
	}

	60% {
		opacity: 0;

	}

	to {
		opacity: 1;
	}
}



div#mfp_overlay {
	position: fixed !important;
	top: 3vh !important;
	display: none;
	z-index: 10001;
}