@charset "UTF-8";



/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 共通項目 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
*{margin:0;padding:0;text-decoration:none;box-sizing: border-box}fieldset{border:0}body{line-height:1.8}body,dd,dl,dt,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,select,ul{margin:0;padding:0}img{border:0;vertical-align:top}a{text-decoration:none}em{font-style:normal}ul li{list-style-type:none;list-style-image:none}address{font-style:normal}strong {font-weight: bold}img {width: 100%;height: auto}.sp {display: none}
:root {
  --design-width-pc: 1400;
  --design-width-sp: 421;
  --vw-ratio: calc(100vw / var(--design-width-pc));
}
@media (max-width: 767px) {
  :root {
    --vw-ratio: calc(100vw / var(--design-width-sp));
  }
}




/* リンク */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
a {
	color: #333333;
	text-decoration: none;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
a:before {
	transition: 0.3s;
	-webkit-transition: 0.3s;
}



/* 横幅 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
body {
	font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	font-size: clamp(14px, calc(16 * var(--vw-ratio)), 24px);
	font-weight: 400;
	color: #333333;
	padding: 0;
	margin: 0;
	letter-spacing: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	font-feature-settings: "palt";
	text-justify: inter-ideograph;
	-ms-text-justify: inter-ideograph;
}
body.fixed {
	width: 100%;
	height: 100%;
	position: fixed;
	overflow: hidden;
}



/* テキスト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.en {
	font-family: "Jost", sans-serif;
	font-weight: 500;
}



/* カラー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.bg-green {
	background: url("../img/bg_green.webp") repeat;
}
.bg-dack-green {
	background: url("../img/bg_dack-green.webp") repeat;
}
.bg-light-green {
	background: url("../img/bg_light-green.webp") repeat;
}
.bg-light-green02 {
	background: url("../img/bg_light-green02.webp") repeat;
}
.bg-blue {
	background: url("../img/bg_blue.webp") repeat;
}
.bg-gray {
	background: url("../img/bg_gray.webp") repeat;
}

.c-green {
	color: #8FCF3E;
}
.c-dark-green {
	color: #21A067;
}
.c-white {
	color: #fff;
}
.c-gray {
	color: #B9B9B9;
}



/* flex */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
.flex {
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}
.flex-start {
	display: flex;
	display: -webkit-flex;
	justify-content: space-between;
}
.flex-end {
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: reverse;
	 -ms-flex-direction: row-reverse;
		 flex-direction: row-reverse;
}
.flex-center {
	display: flex;
	justify-content: center;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	height: calc(80 * var(--vw-ratio));
	padding-left: calc(20 * var(--vw-ratio));
	padding-right: calc(20 * var(--vw-ratio));
	position: fixed;
	top: 0;
	left: 0;
	z-index: 12;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#header.is-animation {
	background: #fff;
}
	#header .logo {
		width: calc(196 * var(--vw-ratio));
		margin-top: calc(-5 * var(--vw-ratio));
	}
		#header .logo a {
			display: block;
			line-height: 1;
		}
		#header .logo a:hover {
			opacity: 0.7;
		}

	#header .nav {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
		#header .nav ul.globalnav {
			opacity: 1;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#header.active .nav ul.globalnav {
			opacity: 0;
			pointer-events: none; 
		}
			#header .nav ul.globalnav li {
				margin-right: calc(35 * var(--vw-ratio));
			}
				#header .nav ul.globalnav li a {
					display: block;
					height: calc(80 * var(--vw-ratio));
					line-height: calc(80 * var(--vw-ratio));;
					font-weight: 500;
				}
				#header .nav ul.globalnav li a:hover,
				#header .nav ul.globalnav li.active a {
					color: #8FCF3E;
				}

				#header .nav ul.globalnav li.has-child .area {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					width: 100%;
					height: calc(120 * var(--vw-ratio));
					border-top: solid 1px #d2d2d2;
					position: absolute;
					left: 0;
					top: calc(80 * var(--vw-ratio));
					padding: 0 calc(100 * var(--vw-ratio));
					overflow: hidden;
					background: #fff;
					visibility: hidden;
					opacity: 0;
					transition: 0.3s;
					-webkit-transition: 0.3s;
					z-index: 4;
				}
				#header .nav ul.globalnav li.has-child:hover > .area {
					visibility: visible;
					opacity: 1;
				}
				#header .nav ul.globalnav li.has-child .area:before {
					content: "";
					width: 100%;
					height: 100vh;
					background: #9B9B9B;
					opacity: 0.3;
					pointer-events: none; 
					position: fixed;
					top: calc(200 * var(--vw-ratio));
					left: 0;
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
					#header .nav ul.globalnav li.has-child .area .cat-head {
						width: 20%;
						font-weight: 500;
					}
						#header .nav ul.globalnav li.has-child .area .cat-head dt {
							line-height: 1;
							margin-bottom: calc(10 * var(--vw-ratio));
						}
						#header .nav ul.globalnav li.has-child .area .cat-head dd {
							line-height: 1;
						}

					#header .nav ul.globalnav li.has-child .area ul.sub_list {
						width: 80%;
					}
						#header .nav ul.globalnav li.has-child .area ul.sub_list li {
							margin-top: 0;
							margin-right: calc(40 * var(--vw-ratio));
							margin-bottom: 0;
						}
							#header .nav ul.globalnav li.has-child .area ul.sub_list li a {
								display: inline-block;
								background: url("../img/icon_arrow_green.svg") no-repeat right center / calc(7 * var(--vw-ratio));
								padding-right: calc(14 * var(--vw-ratio));
								height: auto;
								color: #333;
								line-height: 1;
							}
							#header .nav ul.globalnav li.has-child .area ul.sub_list li a:hover {
								color: #8FCF3E;
							}

		#header .nav ul.btn-list {
			width: calc(295 * var(--vw-ratio));	
			margin-right: calc(154 * var(--vw-ratio));
			opacity: 1;
			position: relative;
			z-index: 5;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#header.active .nav ul.btn-list {
			opacity: 0;
			pointer-events: none; 
		}
			#header .nav ul.btn-list li {
				width: 48.5%;
				position: relative;
			}
				#header .nav ul.btn-list li a.btn-graduates,
				#header .nav ul.btn-list li a.btn-career {
					display: flex;
					justify-content: center;
					align-items: center;
					height: calc(46 * var(--vw-ratio));
					border-radius: calc(23 * var(--vw-ratio));
					background: #fff;
					font-weight: 700;
					line-height: 1;
					text-align: center;
				}
				#header .nav ul.btn-list li a.btn-career {
					color: #008900;
					border: solid 1px #008900;
				}
				#header .nav ul.btn-list li a.btn-career:hover {
					color: #fff;
					background: #008900;
				}

				#header .nav ul.btn-list li a.btn-graduates {
					color: #4DBC00;
					border: solid 1px #4DBC00;
					text-indent: calc(-20 * var(--vw-ratio));
					position: relative;
				}
				#header .nav ul.btn-list li a.btn-graduates:before {
					content: "";
					width: calc(13 * var(--vw-ratio));
					height: calc(2 * var(--vw-ratio));
					background: #4DBC00;
					position: absolute;
					top: 50%;
					right: calc(15 * var(--vw-ratio));
					margin-top: calc(-1 * var(--vw-ratio));
				}
				#header .nav ul.btn-list li a.btn-graduates:after {
					content: "";
					width: calc(2 * var(--vw-ratio));
					height: calc(13 * var(--vw-ratio));
					background: #4DBC00;
					position: absolute;
					top: 50%;
					right: calc(21 * var(--vw-ratio));
					margin-top: calc(-6.5 * var(--vw-ratio));
					transition: 0.3s;
					-webkit-transition: 0.3s;
				}
				#header .nav ul.btn-list li.active a.btn-graduates:after {
					opacity: 0;
				}
					#header .nav ul.btn-list li ul.sub-list {
						opacity: 0;
						pointer-events: none;
						overflow: hidden;
						width: 100%;
						max-height: 0;
						background: url("../img/bg_green.webp") repeat;
						border-radius: calc(23 * var(--vw-ratio));
						padding: calc(56 * var(--vw-ratio)) calc(15 * var(--vw-ratio)) calc(12 * var(--vw-ratio)) calc(15 * var(--vw-ratio));
						position: absolute;
						top: 0;
						left: 0;
						z-index: -1;
						transition: 0.4s;
						-webkit-transition: 0.4s;
					}
					#header .nav ul.btn-list li.active ul.sub-list {
						opacity: 1;
						pointer-events: auto;
					}
						#header .nav ul.btn-list li ul.sub-list li {
							width: 100%;
						}
							#header .nav ul.btn-list li ul.sub-list li a {
								display: block;
								background: url("../img/icon_entry_arrow.svg") no-repeat right center / calc(10 * var(--vw-ratio));
								font-weight: 700;
							}
							#header .nav ul.btn-list li ul.sub-list li a:hover {
								opacity: 0.7;
							}
@media screen and (max-width: 767px) {
	#header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: calc(70 * var(--vw-ratio));
		padding-left: calc(20 * var(--vw-ratio));
		padding-right: calc(20 * var(--vw-ratio));
		position: fixed;
		top: 0;
		left: 0;
		z-index: 12;
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
		#header .logo {
			width: calc(155 * var(--vw-ratio));
			margin-top: 0;
		}
			#header .logo a {
				display: block;
				line-height: 1;
			}
			#header .logo a:hover {
				opacity: 0.7;
			}

		#header .nav ul.globalnav {
			display: none;
		}

		#header .nav ul.btn-list {
			width: calc(160 * var(--vw-ratio));	
			margin-right: calc(48 * var(--vw-ratio));
		}
			#header .nav ul.btn-list li a.btn-graduates,
			#header .nav ul.btn-list li a.btn-career {
				height: calc(44 * var(--vw-ratio));
				border-radius: calc(23 * var(--vw-ratio));
				font-size: calc(12 * var(--vw-ratio));
				line-height: 1.1em;
				text-indent: 0;
			}
			#header .nav ul.btn-list li a.btn-graduates:before,
			#header .nav ul.btn-list li a.btn-graduates:after {
				display: none;
			}
				#header .nav ul.btn-list li ul.sub-list {
					padding: calc(56 * var(--vw-ratio)) 0 calc(15 * var(--vw-ratio)) 0;
				}
					#header .nav ul.btn-list li ul.sub-list li {
						width: 100%;
						margin-bottom: calc(8 * var(--vw-ratio));
					}
					#header .nav ul.btn-list li ul.sub-list li:nth-last-child(1) {
						margin-bottom: 0;
					}
						#header .nav ul.btn-list li ul.sub-list li a {
							font-size: calc(11 * var(--vw-ratio));
							background: none;
							text-align: center;
							line-height: 1.3em;
						}
}


	



	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* メニュー展開 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#menubtn {
	display: block;
	width: calc(144 * var(--vw-ratio));
	height: calc(46 * var(--vw-ratio));
	position: fixed;
	top: calc(17 * var(--vw-ratio));
	right: calc(20 * var(--vw-ratio));
	z-index: 17;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
	#menubtn .menu {
		display: block;
		position: relative;
		cursor: pointer;
		border-radius: calc(23 * var(--vw-ratio));
		background: url("../img/menu_btn_bg.webp") no-repeat center / 200%;
		width: calc(144 * var(--vw-ratio));
		height: calc(46 * var(--vw-ratio));
	}
	#menubtn .menu:before {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		height: 100%;
		content: "MENU";
		font-family: "Jost", sans-serif;
		font-size: calc(15 * var(--vw-ratio));
		font-weight: 500;
		color: #707070;
		line-height: 1;
		position: absolute;
		top: 0;
		left: calc(30 * var(--vw-ratio));
	}
		#menubtn .menu span {
			width: calc(22 * var(--vw-ratio));
			display: inline-block;
			border-radius: calc(1 * var(--vw-ratio));
			position: absolute;
			top: 50%;
			right: calc(30 * var(--vw-ratio));
			height: calc(2 * var(--vw-ratio));
			background: #707070;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#menubtn .menu span:nth-of-type(1) {
			margin-top: calc(-4 * var(--vw-ratio));
		}
		#menubtn .menu span:nth-of-type(2) {
			width: calc(11 * var(--vw-ratio));
			margin-top: calc(3 * var(--vw-ratio));
			right: calc(41 * var(--vw-ratio));
		}

		#menubtn .menu.active .openbtn-area {
			transform: rotateY(-360deg);
		}
			#menubtn .menu.active span:nth-of-type(1) {
				transform: translateY(6px) rotate(-155deg);
				margin-top: -6px;
			}
			#menubtn .menu.active span:nth-of-type(2) {
				width: calc(22 * var(--vw-ratio));
				transform: translateY(-6px) rotate(155deg);
				margin-top: 6px;
				right: calc(30 * var(--vw-ratio));
			}

#menubox {
	display: none;
	width: 100%;
	height: 100vh;
	background: #fff url("../img/menu_bg.webp") no-repeat center right / 20%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 11;
}
	#menubox .menunav {
		width: 100%;
		height: 100vh;
		overflow-y: scroll;
		padding-top: calc(100 * var(--vw-ratio));
		padding-left: calc(70 * var(--vw-ratio));
		padding-right: calc(100 * var(--vw-ratio));
	}
	#menubox .menunav::-webkit-scrollbar {
		width: 5px;
		height: 5px;
	}
	#menubox .menunav::-webkit-scrollbar-track {
		background: none;
	}
	#menubox .menunav::-webkit-scrollbar-thumb {
		background: #B9B9B9;
	}
		#menubox .menunav .pickup {
			width: 30%;
			position: relative;
		}
			#menubox .menunav .pickup .box {
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				z-index: -1;
				transform: scale(0.9);
				transition: opacity 0.3s ease, transform 0.3s ease;
			}
			#menubox .menunav .pickup .box.active {
				opacity: 1;
				z-index: 1;
				transform: scale(1);
			}
				#menubox .menunav .pickup .box a.linkbox {
					display: block;
					width: 100%;
					position: relative;
				}
					#menubox .menunav .pickup .box a.linkbox .text {
						width: 90%;
						border-radius: calc(20 * var(--vw-ratio));
						padding: calc(40 * var(--vw-ratio));
						position: absolute;
						bottom: calc(-120 * var(--vw-ratio));
						left: 5%;
					}
						#menubox .menunav .pickup .box a.linkbox .text .number {
							font-size: calc(30 * var(--vw-ratio));
							font-weight: 500;
							line-height: 1;
							position: absolute;
							top: calc(-13 * var(--vw-ratio));
							left: calc(40 * var(--vw-ratio));
						}

						#menubox .menunav .pickup .box a.linkbox .text .head {
							font-weight: 500;
							line-height: 1;
							padding-left: calc(15 * var(--vw-ratio));
							margin-bottom: calc(12 * var(--vw-ratio));
							position: relative;
						}
						#menubox .menunav .pickup .box a.linkbox .text .head:before {
							content: "";
							width: calc(8 * var(--vw-ratio));
							height: calc(8 * var(--vw-ratio));
							border-radius: 50%;
							background: #fff;
							position: absolute;
							top: calc(2 * var(--vw-ratio));
							left: 0;
						}

						#menubox .menunav .pickup .box a.linkbox .text h3 {
							font-size: calc(22 * var(--vw-ratio));
							font-weight: 500;
							line-height: 1.3em;
							margin-bottom: calc(15 * var(--vw-ratio));
						}

						#menubox .menunav .pickup .box a.linkbox .text .txt-14 {
							font-weight: 500;
						}


		#menubox .menunav .globalnav {
			width: 65%;
		}
			#menubox .menunav .globalnav .area {
				width: 47%;
			}
				#menubox .menunav .globalnav .area .box:nth-child(1) {
					height: calc(210 * var(--vw-ratio));
				}
				#menubox .menunav .globalnav .area .box:nth-child(2) {
					height: calc(180 * var(--vw-ratio));
				}
				#menubox .menunav .globalnav .area .box-special {
					width: 44%;
				}
					#menubox .menunav .globalnav .area .box .sub-box {
						width: 44%;
					}
					#menubox .menunav .globalnav .area .box .sub-box:nth-last-child(1) {
						margin-top: calc(-180 * var(--vw-ratio));
					}

					#menubox .menunav .globalnav .area .box .cat-head {
						border-top: solid 1px #ddd;
						padding-top: calc(15 * var(--vw-ratio));
						margin-bottom: calc(25 * var(--vw-ratio));
					}
						#menubox .menunav .globalnav .area .box .cat-head dt {
							font-size: calc(36 * var(--vw-ratio));
							line-height: 1;
							margin-bottom: calc(5 * var(--vw-ratio));
						}
						#menubox .menunav .globalnav .area .box .cat-head dd {
							font-weight: 500;
							line-height: 1;
						}

					#menubox .menunav .globalnav .area .box ul.link-list li {
						line-height: 1;
						margin-bottom: calc(10 * var(--vw-ratio));
					}
					#menubox .menunav .globalnav .area .box ul.link-list li:nth-last-child(1) {
						margin-bottom: 0;
					}
					#menubox .menunav .globalnav .area .box ul.link-list.flex li {
						width: 42%;
					}
					#menubox .menunav .globalnav .area .box ul.link-list.flex li:nth-child(1) {
						width: 100%;
					}
						#menubox .menunav .globalnav .area .box ul.link-list li a {
							display: inline-block;
							background: url("../img/icon_arrow_green.svg") no-repeat right center / calc(7 * var(--vw-ratio));
							padding-right: calc(14 * var(--vw-ratio));
							line-height: 1.3em;
							font-weight: 500;
						}
						#menubox .menunav .globalnav .area .box ul.link-list li a:hover {
							color: #8FCF3E;
						}

					#menubox .menunav .globalnav .area .box .txt-15 {
						font-weight: 700;
						line-height: 1;
						margin-bottom: calc(12 * var(--vw-ratio));
					}
					#menubox .menunav .globalnav .area .box .txt-15.head-graduates {
						color: #4DBC00;
					}
					#menubox .menunav .globalnav .area .box .txt-15.head-career {
						color: #008900;
						margin-top: calc(25 * var(--vw-ratio));
					}

					#menubox .menunav .globalnav .area .box ul.btn-list {
						width: 100%;
					}
						#menubox .menunav .globalnav .area .box ul.btn-list li {
							margin-bottom: calc(9 * var(--vw-ratio));
						}
						#menubox .menunav .globalnav .area .box ul.btn-list li:nth-last-child(1) {
							margin-bottom: 0;
						}
							#menubox .menunav .globalnav .area .box ul.btn-list li a {
								display: flex;
								justify-content: center;
								align-items: center;
								height: calc(36 * var(--vw-ratio));
								border-radius: calc(18 * var(--vw-ratio));
								background: #fff;
								font-weight: 500;
								line-height: 1;
								text-align: center;
								margin-bottom: 0;
							}
							#menubox .menunav .globalnav .area .box ul.btn-list.graduates li a {
								border: solid 1px #4DBC00;
							}
							#menubox .menunav .globalnav .area .box ul.btn-list.graduates a:hover {
								color: #fff;
								background: #4DBC00;
							}
							#menubox .menunav .globalnav .area .box ul.btn-list.career a {
								border: solid 1px #008900;
							}
							#menubox .menunav .globalnav .area .box ul.btn-list.career li a:hover {
								color: #fff;
								background: #008900;
							}
@media screen and (max-width: 767px) {
	#menubtn {
		width: calc(46 * var(--vw-ratio));
		height: calc(46 * var(--vw-ratio));
		top: calc(12 * var(--vw-ratio));
		right: calc(12 * var(--vw-ratio));
	}
		#menubtn .menu {
			border-radius: calc(23 * var(--vw-ratio));
			background: url("../img/menu_btn_bg.webp") no-repeat center / 300%;
			width: calc(46 * var(--vw-ratio));
			height: calc(46 * var(--vw-ratio));
		}
		#menubtn .menu:before {
			display: none;
		}
			#menubtn .menu span {
				right: calc(12 * var(--vw-ratio));
			}
			#menubtn .menu span:nth-of-type(2) {
				width: calc(11 * var(--vw-ratio));
				right: calc(23 * var(--vw-ratio));
			}
			#menubtn .menu.active span:nth-of-type(2) {
				right: calc(12 * var(--vw-ratio));
			}

	#menubox {
		height: 100dvh;
		background: #fff url("../img/menu_bg.webp") no-repeat center right / 30%;
	}
		#menubox .menunav {
			display: block;
			width: 100%;
			height: 100dvh;
			overflow-y: scroll;
			padding-top: calc(80 * var(--vw-ratio));
			padding-left: calc(30 * var(--vw-ratio));
			padding-right: calc(30 * var(--vw-ratio));
		}
			#menubox .menunav .pickup {
				display: none;
			}

			#menubox .menunav .globalnav {
				display: block;
				width: 100%;
			}
				#menubox .menunav .globalnav .area {
					width: 100%;
				}
					#menubox .menunav .globalnav .area .box {
						display: block;
						margin-bottom: calc(40 * var(--vw-ratio));
					}
					#menubox .menunav .globalnav .area .box:nth-child(1),
					#menubox .menunav .globalnav .area .box:nth-child(2) {
						height: auto;
					}
					#menubox .menunav .globalnav .area .box-special {
						width: 100%;
					}
						#menubox .menunav .globalnav .area .box .sub-box {
							width: 100%;
							margin-bottom: calc(35 * var(--vw-ratio));
						}
						#menubox .menunav .globalnav .area .box .sub-box:nth-last-child(1) {
							margin-top: 0;
						}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ページタイトル */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* pagetitle */
#pagetitle {
	width: 100%;
	padding-top: calc(100 * var(--vw-ratio));
	padding-bottom: calc(100 * var(--vw-ratio));
	position: relative;
}
	#pagetitle .leef {
		position: absolute;
	}

	#pagetitle .en.c-gray {
		font-size: calc(120 * var(--vw-ratio));
		text-align: center;
		line-height: 1;
		margin-bottom: calc(15 * var(--vw-ratio));
	}

	#pagetitle h1 {
		font-size: calc(34 * var(--vw-ratio));
		font-weight: 500;
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 1.3em;
	}

	#pagetitle h2 {
		font-size: calc(24 * var(--vw-ratio));
		font-weight: 500;
		text-align: center;
		letter-spacing: 0.1em;
		line-height: 1.6em;
		margin-top: calc(70 * var(--vw-ratio));
	}

	#pagetitle .read {
		margin-top: calc(25 * var(--vw-ratio));
		text-align: center;
	}
@media screen and (max-width: 767px) {
	/* pagetitle */
	#pagetitle {
		padding-top: calc(90 * var(--vw-ratio));
		padding-bottom: calc(60 * var(--vw-ratio));
	}
		#pagetitle .en.c-gray {
			font-size: calc(50 * var(--vw-ratio));
			margin-bottom: calc(10 * var(--vw-ratio));
		}

		#pagetitle h1 {
			font-size: calc(26 * var(--vw-ratio));
		}

		#pagetitle h2 {
			font-size: calc(20 * var(--vw-ratio));
			margin-top: calc(40 * var(--vw-ratio));
		}

		#pagetitle .read {
			margin-top: calc(15 * var(--vw-ratio));
		}
}




	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* main */
#main {
	display: block;
}
.inner {
	width: -webkit-calc(100% - calc(200 * var(--vw-ratio)));
	width: calc(100% - calc(200 * var(--vw-ratio)));
	margin: 0 auto;
	position: relative;
}
.inner_full {
	width: 100%;
	position: relative;
}
.inner_140 {
	width: -webkit-calc(100% - calc(140 * var(--vw-ratio)));
	width: calc(100% - calc(140 * var(--vw-ratio)));
	margin: 0 auto;
	position: relative;
}
.inner_280 {
	width: -webkit-calc(100% - calc(280 * var(--vw-ratio)));
	width: calc(100% - calc(280 * var(--vw-ratio)));
	margin: 0 auto;
	position: relative;
}
.inner_420 {
	width: -webkit-calc(100% - calc(420 * var(--vw-ratio)));
	width: calc(100% - calc(420 * var(--vw-ratio)));
	margin: 0 auto;
	position: relative;
}

/* img-over */
a .img-over {
	overflow: hidden;
}
	a .img-over img {
		-moz-transition: -moz-transform 0.2s linear;
		-webkit-transition: -webkit-transform 0.2s linear;
		-o-transition: -o-transform 0.2s linear;
		-ms-transition: -ms-transform 0.2s linear;
		transition: transform 0.2s linear;
	}
	a:hover .img-over img {
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05);
		transform: scale(1.05);
	}

/* wrap */
.wrap-beginning {
	padding-top: calc(100 * var(--vw-ratio));
}
.wrap-top {
	padding-top: calc(150 * var(--vw-ratio));
}
.wrap-bottom {
	padding-bottom: calc(150 * var(--vw-ratio));
}

/* txt */
.txt-20 {
	font-size: calc(20 * var(--vw-ratio));
	line-height: calc(28 * var(--vw-ratio));
}
.txt-18 {
	font-size: calc(18 * var(--vw-ratio));
	line-height: calc(40 * var(--vw-ratio));
}
.txt-16 {
	font-size: calc(16 * var(--vw-ratio));
	line-height: calc(32 * var(--vw-ratio));
}
.txt-15 {
	font-size: calc(15 * var(--vw-ratio));
	line-height: calc(28 * var(--vw-ratio));
}
.txt-14 {
	font-size: calc(14 * var(--vw-ratio));
	line-height: calc(26 * var(--vw-ratio));
}
.txt-13 {
	font-size: calc(13 * var(--vw-ratio));
	line-height: calc(24 * var(--vw-ratio));
}
.txt-12 {
	font-size: calc(12 * var(--vw-ratio));
	line-height: calc(22 * var(--vw-ratio));
}
.txt-11 {
	font-size: calc(11 * var(--vw-ratio));
	line-height: calc(21 * var(--vw-ratio));
}
.txt-10 {
	font-size: calc(10 * var(--vw-ratio));
	line-height: calc(20 * var(--vw-ratio));
}
@media screen and (max-width: 767px) {
	.sp {
		display: block;
	}
	.pc {
		display: none !important;
	}
	
	/* inner */
	.inner,
	.inner_140,
	.inner_280,
	.inner_420 {
		width: -webkit-calc(100% - calc(80 * var(--vw-ratio)));
		width: calc(100% - calc(80 * var(--vw-ratio)));
	}

	/* wrap */
	.wrap-beginning {
		padding-top: calc(50 * var(--vw-ratio));
	}
	.wrap-top {
		padding-top: calc(75 * var(--vw-ratio));
	}
	.wrap-bottom {
		padding-bottom: calc(75 * var(--vw-ratio));
	}
}





	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ボタン */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* btn */
.btn {
	width: calc(150 * var(--vw-ratio));
	margin: 0 auto;
}
	.btn a {
		display: flex;
		justify-content: center;
		align-items: center;
		height: calc(40 * var(--vw-ratio));
		border-radius: calc(20 * var(--vw-ratio));
		background: #8FCF3E;
		color: #fff;
		text-align: center;
		line-height: calc(42 * var(--vw-ratio));
		transition: 0.3s;
		-webkit-transition: 0.3s;
	}
	.btn a:hover {
		background: #008900;
		letter-spacing: 0.06em;
	}
@media screen and (max-width: 767px) {
	.btn {
		width: calc(150 * var(--vw-ratio));
		margin: 0 auto;
	}
		.btn a {
			display: flex;
			justify-content: center;
			align-items: center;
			height: calc(40 * var(--vw-ratio));
			border-radius: calc(20 * var(--vw-ratio));
			background: #8FCF3E;
			color: #fff;
			text-align: center;
			line-height: calc(42 * var(--vw-ratio));
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		.btn a:hover {
			background: #008900;
			letter-spacing: 0.06em;
		}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* レコメンド */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#recommend-area h2 {
	font-size: calc(50 * var(--vw-ratio));
	text-align: center;
	line-height: 1;
	margin-bottom: calc(40 * var(--vw-ratio));
}

#recommend-area .list a.linkbox {
	display: block;
	width: 32.5%;
	padding-bottom: calc(60 * var(--vw-ratio));
	position: relative;
}
#recommend-area .list.column4 a.linkbox {
	width: 24.5%;
}
	#recommend-area .list a.linkbox .text {
		width: 86%;
		border-radius: calc(20 * var(--vw-ratio));
		padding: calc(40 * var(--vw-ratio));
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 7%;
	}
		#recommend-area .list a.linkbox .text .number {
			font-size: calc(30 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1;
			color: #8FCF3E;
			position: absolute;
			top: calc(-13 * var(--vw-ratio));
			left: calc(40 * var(--vw-ratio));
		}

		#recommend-area .list a.linkbox .text .head {
			font-weight: 500;
			line-height: 1;
			padding-left: calc(15 * var(--vw-ratio));
			margin-bottom: calc(12 * var(--vw-ratio));
			position: relative;
		}
		#recommend-area .list a.linkbox .text .head:before {
			content: "";
			width: calc(8 * var(--vw-ratio));
			height: calc(8 * var(--vw-ratio));
			border-radius: 50%;
			background: #8FCF3E;
			position: absolute;
			top: calc(2 * var(--vw-ratio));
			left: 0;
		}

		#recommend-area .list a.linkbox .text h3 {
			margin-bottom: calc(20 * var(--vw-ratio));
			font-size: calc(22 * var(--vw-ratio));
			font-weight: 500;
			line-height: 1.3em;
		}

		#recommend-area .list a.linkbox .text .more {
			width: calc(150 * var(--vw-ratio));
			height: calc(40 * var(--vw-ratio));
			border-radius: calc(20 * var(--vw-ratio));
			background: #8FCF3E;
			color: #fff;
			text-align: center;
			line-height: calc(42 * var(--vw-ratio));
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		#recommend-area .list a.linkbox:hover .text .more {
			background: #008900;
			letter-spacing: 0.06em;
		}
@media screen and (max-width: 767px) {
	#recommend-area h2 {
		font-size: calc(34 * var(--vw-ratio));
		margin-bottom: calc(30 * var(--vw-ratio));
	}

	#recommend-area .list {
		display: block;
	}
		#recommend-area .list a.linkbox {
			display: block;
			width: 100%;
			padding-bottom: calc(40 * var(--vw-ratio));
			margin-bottom: calc(30 * var(--vw-ratio));
			position: relative;
		}
		#recommend-area .list.column4 a.linkbox {
			width: 100%;
		}
		#recommend-area .list a.linkbox:nth-last-child(1) {
			margin-bottom: 0;
		}
			#recommend-area .list a.linkbox .pht {
				width: 100%;
				height: 100%;
				aspect-ratio: 4 / 3;
			}
				#recommend-area .list a.linkbox .pht img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
	
			#recommend-area .list a.linkbox .text {
				padding: calc(30 * var(--vw-ratio));
			}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* エントリー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#entry-area h2 {
	font-size: calc(24 * var(--vw-ratio));
	line-height: 1.3em;
	font-weight: 500;
	text-align: center;
	letter-spacing: 0.1em;
	margin-bottom: calc(30 * var(--vw-ratio));
}

#entry-area .list .btn-entry {
	width: 32%;
}
	#entry-area .list .btn-entry a {
		display: block;
		height: calc(90 * var(--vw-ratio));
		background: url("../img/bg_green.webp");
		border-radius: calc(45 * var(--vw-ratio));
		font-size: calc(22 * var(--vw-ratio));
		line-height: calc(88 * var(--vw-ratio));
		font-weight: 500;
		text-align: center;
	}
	#entry-area .list .btn-entry a:hover {
		background: url("../img/bg_light-green.webp");
		letter-spacing: 0.1em;
	}
@media screen and (max-width: 767px) {
	#entry-area h2 {
		font-size: calc(22 * var(--vw-ratio));
		margin-bottom: calc(25 * var(--vw-ratio));
	}

	#entry-area .list {
		display: block;
	}
		#entry-area .list .btn-entry {
			width: 100%;
			margin-top: calc(25 * var(--vw-ratio));
		}
			#entry-area .list .btn-entry a {
				height: calc(80 * var(--vw-ratio));
				border-radius: calc(40 * var(--vw-ratio));
				font-size: calc(20 * var(--vw-ratio));
				line-height: calc(80 * var(--vw-ratio));
			}
}




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#footer {
	padding: calc(60 * var(--vw-ratio)) 0;
}
	#footer .logo {
		width: calc(190 * var(--vw-ratio));
	}

	#footer .linktxt a:hover {
		text-decoration: underline;
	}

	#footer .copyright {
		width: 100%;
		text-align: center;
		pointer-events: none; 
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 0;
	}
@media screen and (max-width: 767px) {
	#footer {
		padding: calc(40 * var(--vw-ratio)) 0;
	}
		#footer .inner_420 {
			display: block;
		}
			#footer .logo {
				width: calc(190 * var(--vw-ratio));
				margin: 0 auto calc(20 * var(--vw-ratio)) auto;
			}

			#footer .linktxt {
				text-align: center;
				margin-bottom: calc(30 * var(--vw-ratio));
			}

			#footer .copyright {
				width: 100%;
				text-align: center;
				position: static;
			}
}