@charset "utf-8";

/*============================
body
============================*/
body {
	color: #222;
}

/*============================
ヘッダー
============================*/
header {
	transition: transform 0.5s 0.3s;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	&::before {
		content: "";
		width: 100%;
		height: 1.00rem;
		background-color: rgba(255, 255, 255, 0.85);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		@media screen and (max-width: 640px) {
			height: 0.65rem;
			background-color: rgba(255, 255, 255, 0.6);
		}
	}
	&::after {
		content: "";
		width: 100%;
		height: 0.10rem;
		background-color: #f2f2f2;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		@media screen and (max-width: 640px) {
			content: none;
		}
	}
	.logo {
		/* max-width: 3.92rem; */
		position: absolute;
		top: 0.20rem;
		left: 0.40rem;
		z-index: 1;
		@media screen and (max-width: 640px) {
			top: 0.12rem;
			left: 0.20rem;
		}
		img {
			width: 100%;
			display: block;
			height: 0.60rem;
			@media screen and (max-width: 640px) {
				height: auto;
				width: 2.60rem;
			}
		}
	}
	.glo_navi {
		position: absolute;
		top: 0;
		right: 0.30rem;
		z-index: 1;
		@media screen and (max-width: 640px) {
			top: 0.65rem;
			width: 100%;
			background-color: rgba(70, 172, 162, 0.92);
			right: 0;
			padding: 0.35rem 0.20rem 0.25rem;
			box-sizing: border-box;
			display: none;
		}
		.list {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 0 0.50rem;
			@media screen and (max-width: 640px) {
				gap: 0.25rem 0;
				.link {
					width: 100%;
				}
			}
			a {
				display: block;
				text-align: center;
				color: inherit;
				text-decoration: none;
				@media screen and (max-width: 640px) {
					display: flex;
					align-items: center;
					flex-direction: column-reverse;
					width: 100%;
				}
				.en_txt {
					font-family: "Inter", sans-serif;
					font-size: 0.12rem;
					font-weight: 700;
					letter-spacing: 0.06em;
					color: #6ECCC4;
					display: block;
					padding-bottom: 0.08rem;
					@media screen and (max-width: 640px) {
						padding-bottom: 0;
						padding-top: 0.10rem;
						color: #FFF;
					}
				}
				.jp_txt {
					font-size: 0.18rem;
					font-weight: 500;
					color: #222;
					position: relative;
					@media screen and (max-width: 640px) {
						text-shadow: 0 1px 0 rgba(255,255,255,0.3);
					}
					&::after {
						position: absolute;
						bottom: -4px;
						left: 0;
						content: '';
						width: 100%;
						height: 1px;
						background: #222;
						transform: scale(0, 1);
						transform-origin: right top;
						transition: transform .3s;
					}
				}
				&:hover {
					.jp_txt {
						&::after {
							transform-origin: left top;
							transform: scale(1, 1);
						}
					}
				}
			}
			.contact {
				width: 1.90rem;
				height: 1.00rem;
				position: relative;
				@media screen and (max-width: 640px) {
					width: 100%;
					height: auto;
					padding: 0.20rem 0;
					text-align: center;
					border-radius: 0.06rem;
				}
				a {
					display: block;
					height: 100%;
					background-color: #6ECCC4;
					position: relative;
					text-align: center;
					@media screen and (max-width: 640px) {
						display: block;
						background-color: #FFF;
						border-radius: 0.06rem;
						margin-top: 0.10rem;
					}
					.box {
						width: 100%;
						position: absolute;
						top: calc(50% - 0.06rem);
						left: 0;
						transform: translateY(-50%);
						@media screen and (max-width: 640px) {
							display: flex;
							flex-wrap: wrap;
							flex-direction: column-reverse;
						}
						.en_txt {
							font-family: "Inter", sans-serif;
							font-size: 0.12rem;
							font-weight: 700;
							letter-spacing: 0.06em;
							color: #FFF;
							display: block;
						}
						.jp_txt {
							font-size: 0.18rem;
							font-weight: 500;
							color: #222;
							&::after {
								background-color: #FFF;
							}
						}
					}
					&:hover {
						background-color: #46ACA2;
						.jp_txt {
							color: #FFF;
						}
					}
				}
			}
		}
	}
}

@media screen and (max-width: 640px) {
	#SPnaviBtn {
		background-color: #46ACA2;
		top: 0.08rem;
		right: 0.08rem;
		border-radius: 0.04rem;
		#SPmenuBars {
			span {
				background-color: #FFF;
				&:nth-of-type(1) {
					top: 35%;
				}
				&:nth-of-type(3) {
					bottom: 35%;
				}
			}
		}
		&.active {
			#SPmenuBars {
				span {
					background-color: #FFF;
					&:nth-of-type(1) {
						top: 50%;
					}
					&:nth-of-type(3) {
						bottom: calc(50% - 1px);
					}
				}
			}
		}
	}
}


/*============================
共通
============================*/
main {
	padding-top: 1.00rem;
	position: relative;
	z-index: 0;
	@media screen and (max-width: 640px) {
		padding-top: 0.50rem;
	}
}

.under_const {
	text-align: center;
	font-size: 0.18rem;
	padding:1.00rem 0 2.00rem;
}
@media screen and (max-width: 640px) {
	.under_const {
		font-size: 0.15rem;
		padding: 0.50rem 0;
	}
}

/*============================
セクションタイトル
============================*/
.titie_wrap {
  text-align: center;
  padding: 0.8rem 0;
  position: relative;
  z-index: 1;
	@media screen and (max-width: 640px) {
		padding: 0.40rem 0 0.50rem;
	}
}

.titie_wrap .en_title {
  font-family: "Inter", sans-serif;
  font-size: 0.2rem;
  color: #81d8d0;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 0.15rem;
	@media screen and (max-width: 640px) {
		font-size: 0.14rem;
		margin-bottom: 0.10rem;
	}
}

.titie_wrap .jp_title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 0.34rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  position: relative;
	@media screen and (max-width: 640px) {
		font-size: 0.22rem;
    letter-spacing: 0;
	}
}

.titie_wrap .jp_title::after {
  content: "";
  width: 0.8rem;
  height: 0.02rem;
  background: url(../img/common/title_border.svg) no-repeat center center;
  background-size: cover;
  position: absolute;
  bottom: -0.22rem;
  left: 50%;
  transform: translateX(-50%);
	@media screen and (max-width: 640px) {
		width: 0.30rem;
	}
}

/*============================
ボタン共通
============================*/
.btn_common a {
	width: 2.80rem;
	box-sizing: border-box;
	text-align: center;
	font-size: 0.18rem;
	font-weight: 600;
	color: #fff;
	background: #6ECCC4;
	border: 1px solid #6ECCC4;
	display: block;
	box-sizing: border-box;
	padding: 0.19rem 0 0.22rem;
	border-radius: 0.50rem;
	position: relative;
	overflow: hidden;
	transition: all .3;
}

@media screen and (max-width: 640px) {
	.btn_common a {
		font-size: 0.16rem;
		width: 2.50rem;
	}
}


.btn_common a span {
	position: relative;
	z-index: 1;
}

.btn_common a:hover {
	color: #6ECCC4;
	z-index: 1;
}
@media screen and (max-width: 640px) {
	.btn_common a:hover {
		color: #FFF;
	}
}

.btn_common a::after {
	content: '';
	width: 0.04rem;
	height: 0.04rem;
	display: block;
	background-color: #fff;
	position: absolute;
	top: calc(50% - 0.04rem);
	right: 0.20rem;
	border-radius: 50%;
	transition: all .3;
	z-index: 0;
}
@media screen and (max-width: 640px) {
	.btn_common a::after {
		top: calc(50% - 0.02rem);
	}
}

.btn_common a:hover::after {
	transition: .9s;
	transform: scale(150) translate(0, 0);
	/* position: relative; */
}
@media screen and (max-width: 640px) {
	.btn_common a:hover::after {
		transform: scale(1);
	}
}

.btn_common a::before {
	content: '';
	width: 0.09rem;
	height: 0.08rem;
	display: block;
	background: url(../img/common/btn_arrow_wh.svg);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0.50rem;
	border-radius: 50%;
	z-index: 1;
	opacity: 0;
}

.btn_common a:hover:before {
	transition: .9s;
	opacity: 1;
}

/*============================
CTA
============================*/
.mod_cta {
	background-color: #6ECCC4;
	padding: 0.40rem 0;
	@media screen and (max-width: 640px) {
		padding: 0.30rem 0.10rem;
	}
	.in {
		max-width: 10.80rem;
		.ttl {
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-size: 0.30rem;
			font-weight: 700;
			color: #FFF;
			text-align: center;
			@media screen and (max-width: 640px) {
				font-size: 0.22rem;
				line-height: 1.4;
			}
		}
		.lead {
			font-family: "Zen Kaku Gothic New", sans-serif;
			font-size: 0.20rem;
			font-weight: 700;
			color: #FFF;
			padding-top: 0.15rem;
			text-align: center;
			@media screen and (max-width: 640px) {
				padding-top: 0.10rem;
				font-size: 0.15rem;
			}
		}
		.btn_wrap {
			padding-top: 0.30rem;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			@media screen and (max-width: 640px) {
				gap: 0.15rem 0;
			}
			.btn {
				width: 100%;
				max-width: 3.19rem;
				background-color: #FFF;
				padding: 0.25rem 0.20rem;
				box-sizing: border-box;
				border-radius: 0.10rem;
				@media screen and (max-width: 640px) {
					max-width: 100%;
				}
				a {
					display: block;
					.btn_ttl {
						font-family: "Zen Kaku Gothic New", sans-serif;
						text-align: center;
						font-size: 0.20rem;
						font-weight: 700;
						color: #222;
						padding-bottom: 0.20rem;
						@media screen and (max-width: 640px) {
							font-size: 0.18rem;
						}
						span {
							border-bottom: 1px solid #6ECCC4;
						}
					}
					.link {
						font-size: 0.18rem;
						font-weight: 700;
						text-align: center;
						&.-line {
							background-color: #00B900;
							padding: 0.10rem 0;
							border-radius: 0.06rem;
							box-shadow: 0 0.03rem 0 rgba(0,0,0,0.2);
							span {
								color: #FFF;
								position: relative;
								top: -0.10rem;
								&::before {
									content: "";
									width: 0.33rem;
									height: 0.31rem;
									background-image: url(../common/img/icon_line_white.svg);
									background-position: center;
									background-repeat: no-repeat;
									background-size: contain;
									display: inline-block;
									margin-right: 0.10rem;
									position: relative;
									top: 0.10rem;
								}
							}
						}
						&.-tel {
							font-size: 0.28rem;
							font-weight: 700;
							color: #222;
							padding: 0.10rem 0;
							@media screen and (max-width: 640px) {
								padding-top: 0;
							}
							span {
								&::before {
									content: "";
									width: 0.26rem;
									height: 0.26rem;
									display: inline-block;
									background-image: url(../img/common/icon_tel.svg);
									background-position: center;
									background-repeat: no-repeat;
									background-size: contain;
									position: relative;
									margin-right: 0.06rem;
									top: 0.04rem;
								}
							}
						}
						&.-youth {
							background-color: #0079B9;
							color: #FFF;
							padding: 0.18rem 0 0.20rem;
							text-align: center;
							border-radius: 0.06rem;
							box-shadow: 0 0.03rem 0 rgba(0,0,0,0.2);
						}
					}
					.txt {
						text-align: center;
						font-size: 0.13rem;
						color: #222;
					}
					&:hover {
						opacity: 0.7;
					}
				}
			}
		}
		.other_link {
			padding-top: 0.30rem;
			text-align: center;
			@media screen and (max-width: 640px) {
				padding-top: 0.15rem;
			}
			.link {
				@media screen and (max-width: 640px) {
					padding-top: 0.15rem;
				}
			}
			a {
				font-size: 0.18rem;
				font-weight: 500;
				line-height: 2;
				color: #FFF;
				text-decoration: underline;
				@media screen and (max-width: 640px) {
					font-size: 0.14rem;
					line-height: 1.65;
					text-decoration: none;
					span {
						font-size: 0.17rem;
						font-weight: 500;
						display: block;
						text-decoration: underline;
					}
				}
				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}

/*============================
インスタ
============================*/
.mod_insta {
	padding: 0.54rem 0;
	@media screen and (max-width: 640px) {
		padding: 0.40rem 0;
	}
	.in {
		.insta_link {
			width: 100%;
			max-width: 7.60rem;
			margin: auto;
			position: relative;
			&::before {
				content: "";
				width: 1.30rem;
				height: 1.26rem;
				background-image: url(../img/common/insta_deco_left.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				left: -1.80rem;
				top: 50%;
				transform: translateY(-50%);
				@media screen and (max-width: 640px) {
					width: 0.80rem;
					height: 0.70rem;
					top: auto;
					bottom: -0.10rem;
					left: -0.10rem;
					transform: translateY(0);
				}
			}
			&::after {
				content: "";
				width: 1.30rem;
				height: 1.26rem;
				background-image: url(../img/common/insta_deco_right.svg);
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				position: absolute;
				right: -1.80rem;
				top: 50%;
				transform: translateY(-50%);
				@media screen and (max-width: 640px) {
					width: 0.80rem;
					height: 0.70rem;
					top: auto;
					bottom: -0.10rem;
					right: -0.10rem;
					transform: translateY(0);
				}
			}
			a {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				@media screen and (max-width: 640px) {
					display: block;
					text-align: center;
				}
				&::before {
					content: "";
					width: 0.60rem;
					height: 0.60rem;
					background-image: url(../img/common/insta_icon.svg);
					background-position: center;
					background-repeat: no-repeat;
					background-size: contain;
					display: block;
					@media screen and (max-width: 640px) {
						width: 0.40rem;
						height: 0.40rem;
						margin: auto;
					}
				}
				.txt_box {
					font-family: "Zen Kaku Gothic New", sans-serif;
					.ttl {
						font-size: 0.20rem;
						font-weight: 700;
						color: #222;
						@media screen and (max-width: 640px) {
							font-size: 0.16rem;
							line-height: 1.4;
							padding-top: 0.10rem;
						}
					}
					.txt {
						font-size: 0.16rem;
						font-weight: 700;
						color: #6ECCC4;
						padding-top: 0.08rem;
						@media screen and (max-width: 640px) {
							font-size: 0.14rem;
							padding-bottom: 0.20rem;
						}
					}
				}
				.link_btn {
					width: 100%;
					max-width: 1.90rem;
					background-color: #6ECCC4;
					text-align: center;
					padding: 0.20rem 0;
					border-radius: 0.10rem;
					box-shadow: 0 0.03rem 0 rgba(0,0,0,0.2);
					@media screen and (max-width: 640px) {
						margin: auto;
					}
					span {
						font-size: 0.16rem;
						font-weight: 700;
						color: #FFF;
					}
				}
				&:hover {
					opacity: 0.7;
				}
			}
		}
	}
}

/*============================
関連リンク
============================*/
.mod_link {
	position: relative;
	background-color: #E6F7F6;
	&::before {
		content: "";
		width: 100%;
		height: 4.00rem;
		background-image: url(../img/common/footer_link_ph.jpg);
		background-position: right center;
		background-repeat: no-repeat;
		background-size: cover;
		display: block;
		@media screen and (max-width: 640px) {
			height: 40vw;
		}
	}
	.in {
		padding-top: 0.40rem;
		padding-bottom: 0.50rem;
		.sec_ttl {
			font-size: 0.26rem;
			font-weight: 700;
			text-align: center;
			@media screen and (max-width: 640px) {
				font-size: 0.20rem;
			}
		}
		.list {
			padding-top: 0.40rem;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			gap: 0 0.80rem;
			@media screen and (max-width: 640px) {
				padding-top: 0.30rem;
				gap: 0.20rem 0;
			}
			.link {
				@media screen and (max-width: 640px) {
					width: 100%;
				}
				a {
					font-size: 0.15rem;
					color: #222;
					position: relative;
					@media screen and (max-width: 640px) {
						font-size: 0.14rem;
						display: block;
						text-align: center;
					}
					span {
						position: relative;
						&::before {
							position: absolute;
							bottom: -4px;
							left: 0;
							content: '';
							width: 100%;
							height: 1px;
							background: #222;
							transform: scale(0, 1);
							transform-origin: right top;
							transition: transform .3s;
						}
						&::after {
							content: "";
							width: 0.20rem;
							height: 0.13rem;
							background-image: url(../common/img/icon_newwin_black.svg);
							background-position: right center;
							background-repeat: no-repeat;
							background-size: contain;
							display: inline-block;
							position: relative;
							@media screen and (max-width: 640px) {
								width: 0.16rem;
								height: 0.10rem;
							}
						}
					}
					&:hover {
						span {
							&::before {
								transform-origin: left top;
								transform: scale(1, 1);
							}
						}
					}
				}
			}
		}
	}
}

/*============================
フッター
============================*/
footer {
	padding-top: 0.30rem;
	.in {
		.logo {
			width: 100%;
			max-width: 4.00rem;
			margin: auto;
			@media screen and (max-width: 640px) {
				width: 2.80rem;
			}
			img {
				width: 100%;
			}
		}
		.overview {
			padding-top: 0.30rem;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-items: center;
			@media screen and (max-width: 640px) {
				display: block;
			}
			.ttl {
				font-size: 0.18rem;
				font-weight: 700;
				padding-right: 0.40rem;
				@media screen and (max-width: 640px) {
					font-size: 0.16rem;
					text-align: center;
					padding-right: 0;
					padding-bottom: 0.10rem;
				}
			}
			.txt_box {
				font-size: 0.16rem;
				line-height: 1.75;
				padding-left: 0.40rem;
				position: relative;
				@media screen and (max-width: 640px) {
					font-size: 0.14rem;
					padding-left: 0;
					text-align: center;
					padding-top: 0.20rem;
				}
				&::before {
					content: "";
					width: 1px;
					height: 100%;
					background-color: #6ECCC4;
					position: absolute;
					left: 0;
					top: 0;
					@media screen and (max-width: 640px) {
						width: 100%;
						height: 1px;
					}
				}
				.tel {
					color: #222;
					@media screen and (max-width: 640px) {
						font-weight: 500;
						text-decoration: underline;
					}
				}
				.link {
					color: #222;
					font-weight: 600;
					text-decoration: underline;
					&:hover {
						text-decoration: none;
						color: #6ECCC4;
					}
				}
			}
		}
		.caption {
			padding: 0.20rem 0 0.40rem;
			text-align: center;
			font-size: 0.13rem;
			@media screen and (max-width: 640px) {
				font-size: 0.11rem;
				letter-spacing: 0;
			}
		}
	}
	.copyright {
		font-family: "Inter", sans-serif;
		position: relative;
		text-align: center;
		padding: 0.30rem 0;
		font-size: 0.12rem;
		@media screen and (max-width: 640px) {
			line-height: 1.5;
			padding: 0.20rem 0;
		}
		&::before {
			content: "";
			width: calc(100% - 0.40rem);
			height: 1px;
			background-color: #CCC;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			@media screen and (max-width: 640px) {
				width: 100%;
			}
		}
	}
}