@charset "utf-8";

/*--------------------------------------------------
	トップページのみに関するCSS
---------------------------------------------------*/
	/*--------------------------------------------------
		「メイン」スライド部分
	---------------------------------------------------*/
		section#top-main-slide-outer {
			overflow: hidden;
			position: relative;
				height: auto;
		}
			section#top-main-slide-inner {
				height: auto;
			}
				section#top-main-slide-inner div {
/*
					display: inline-block;
*/
					height: auto;
					width: 100%;
				}
					section#top-main-slide-inner div img {
						height: auto;
						width: 100%;
					}
			section#top-main-slide-inquiry {
				border: 1px solid #21ab38;
				bottom: 3.0vw;
				left: 3.7vw;
				position: absolute;
				z-index: 1000;
			}
				section#top-main-slide-inquiry a {
					background: #fff;
					color: #21ab38;
					display: block;
					font-size: 0.65rem;
					font-weight: bold;
					line-height: 1.8em;
					padding: 1.0em 4.0em;
				}
				@media screen and (max-width: 768px) {
					section#top-main-slide-inquiry a {
						font-size: 1.0rem;
						padding: 0.5em 2.0em;
					}
				}
				@media screen and (max-width: 480px) {
					section#top-main-slide-inquiry a {
						font-size: 0.8rem;
						padding: 0.5em 1.0em;
					}
				}

@keyframes zoomUp {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(1.15); /* 拡大率 */
	}
}
.add-animation {
	animation: zoomUp 10s linear 0s normal both;
}

	/*--------------------------------------------------
		「重要情報」部分
	---------------------------------------------------*/
		section#top-important-outer {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			margin-bottom: 0.5em;
			margin-top: 0.5em;
		}
			section#important-title {
				background: #c30d22;
				color: #fff;
				display: inline-block;
				font-size: 0.6rem;
				font-weight: bold;
				letter-spacing: 0.3em;
				line-height: 1.7em;
				margin-right: 1.0em;
				padding: 0.7em 0.7em;
			}
			@media screen and (max-width: 768px) {
				section#important-title {
					font-size: 0.8rem;
				}
			}
			@media screen and (max-width: 480px) {
				section#important-title {
					font-size: 1.0rem;
					padding: 0.2em 0.7em;
				}
			}
			section#important-msgbox {
				font-size: 0.6rem;
				font-weight: bold;
				letter-spacing: 0;
				line-height: 2.0em;
			}
			@media screen and (max-width: 768px) {
				section#important-msgbox {
					font-size: 0.8rem;
				}
			}
			@media screen and (max-width: 480px) {
				section#important-msgbox {
					font-size: 1.0rem;
				}
			}

	/*--------------------------------------------------
		「新着情報」スライド部分
	---------------------------------------------------*/
		section.swiper-outer {
			position: relative;
		}
			section.swiper {
				margin: 0 auto;
				width: 80vw;
			}
				section.swiper-wrapper {
					text-align: center;
					width: 100%;
				}
					section.top-news-inner {
					}
						section.top-news-inner a {
							display: inline-block;
						}
			.swiper-button-prev,
			.swiper-button-next {
				background: #000;
				width: 40px!important;
			}
			@media screen and (max-width: 480px) {
				.swiper-button-prev,
				.swiper-button-next {
					width: 30px!important;
				}
			}
			.swiper-button-prev {
				left: 7vw!important;
			}
			.swiper-button-prev::after,
			.swiper-button-next::after {
				content: ""!important;
				height: 8px;
				position: absolute;
				top: calc(50% - 2px);
				width: 20px;
			}
			.swiper-button-prev::after {
				border-bottom: 1px solid #fff;
				border-left: 1px solid #fff;
				left: calc(50% + 5px);
				transform: translate(-50%, -50%) skew(-45deg);
			}
			.swiper-button-next {
				right: 7vw!important;
			}
			.swiper-button-next::after {
				border-bottom: 1px solid #fff;
				border-right: 1px solid #fff;
				left: calc(50% - 5px);
				transform: translate(-50%, -50%) skew(45deg);
			}

	/*--------------------------------------------------
		トップページ「新着情報」「一覧を見る」ボタン
	---------------------------------------------------*/
		section.top-news-list {
			margin: 3.0em auto 0;
			text-align: center;
		}
			div.top-news-list-button {
				display: inline-block;
			}
				div.top-news-list-button a {
					background: #21ab38;
					border: 1px solid #21ab38;
					color: #fff;
					display: inline-block;
					font-size: 0.7rem;
					font-weight: bold;
					line-height: 2.0em;
					overflow: hidden;
					padding: 0.2em 2.5em;
					position: relative;
					z-index: 1;
				}
				@media screen and (max-width: 768px) {
					div.top-news-list-button a {
						font-size: 1.0rem;
					}
				}
				@media screen and (max-width: 480px) {
					div.top-news-list-button a {
						font-size: 1.2rem;
					}
				}
				div.top-news-list-button a:hover {
					color: #21ab38;
				}

				div.top-news-list-button a,
				div.top-news-list-button a::before,
				div.top-news-list-button a::after {
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					-webkit-transition: all .3s;
					transition: all .3s;
				}
				div.top-news-list-button a::before {
					content: '';
					display: block;
					position: absolute;
					z-index: -1;
				}
				div.top-news-list-button a::after {
					content: '';
					display: block;
					height: 100%;
					left: -100%;
					position: absolute;
					top: -100%;
					width: 100%;
					z-index: -1;
				}
				div.top-news-list-button a:hover::after {
					background-color: #fff;
					color: #21ab38;
					left: 0;
					top: 0;
				}

	/*--------------------------------------------------
		トップページ「Open Campus」「入試情報」バナー
	---------------------------------------------------*/
		.top-banner-outer {
			background: #eeda00;
    		padding: 6em 0;
    	}
			.top-banner-outer ul {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				margin: 0 auto;
				max-width: 1715px;
			}
			@media screen and (max-width: 480px) {
				.top-banner-outer ul {
					flex-direction: column;
				}
			}
				.top-banner-outer ul li:not(:last-child) {
					margin-bottom: 2em;
					width: 48.34%;
				}
				@media screen and (max-width: 768px) {
					.top-banner-outer ul li:not(:last-child) {
						width: 100%;
					}
				}

					.top-banner-outer ul li a {
					}
						.top-banner-outer ul li a img {
						}

/*
				.top-banner-outer ul li {
				}
				@media screen and (max-width: 480px) {
					.top-banner-outer ul li:first-child {
						margin-bottom: 2.0em;
					}
				}
					.top-banner-outer ul li a {
					}
						.top-banner-outer ul li a img {
						}
*/

	/*--------------------------------------------------
		トップページ「目的別メニュー」
	---------------------------------------------------*/
		.sec-c-outer01 {
			margin: 0 auto;
			padding: 3.0em 0 0;
			width: 90vw;
		}
			.sec-logo {
				margin: 3.0em 0;
				text-align: center;
			}
				.sec-logo img {
				}

		/*--------------------------------------------------
			トップページ「目的別メニュー」１つのセクション枠
		---------------------------------------------------*/
			.sec-wrapper01 {
				margin-bottom: 8.0em;
			}
				.sec-t-bx01 {
					margin: 0 3.5em 40px 3.5em;
					position: relative;
				}
				@media screen and (max-width: 1400px) {
					.sec-t-bx01 {
						margin-bottom: 100px;
					}
				}
				@media screen and (max-width: 1100px) {
					.sec-t-bx01 {
						display: block!important;
						margin-bottom: 0px;
					}
				}
				@media screen and (max-width: 480px) {
					.sec-t-bx01 {
						margin: 0 2.5em 40px 2.5em;
					}
				}
				.sec-t-bx01-left-img {
				}
				.sec-t-bx01-right-img {
					display: flex;
					justify-content: flex-end;
				}

		/*--------------------------------------------------
			トップページ「目的別メニュー」１つのセクション枠（左サイド）
		---------------------------------------------------*/
				.sec-t-bx01-left {
					display: inline-block;
					position: relative;
/*
					width: 61%;
*/
					width: 54.9vw;
				}
				@media screen and (max-width: 1100px) {
					.sec-t-bx01-left {
						display: block;
						margin: 0 auto;
						width: 80vw;
					}
				}
			/*--------------------------------------------------
				トップページ「目的別メニュー」１つのセクション枠（左サイド）
				左サイドにイメージがあるケース
			---------------------------------------------------*/
				.sec-t-bx01-left-img .sec-t-bx01-left {
/*
					left: 20px;
*/
					left: 1.04vw;
				}
				@media screen and (max-width: 1100px) {
					.sec-t-bx01-left-img .sec-t-bx01-left {
						left: 0;
					}
				}
			/*--------------------------------------------------
				トップページ「目的別メニュー」１つのセクション枠（左サイド）
				右サイドにイメージがあるケース
			---------------------------------------------------*/
				.sec-t-bx01-right-img .sec-t-bx01-left {
					right: 0;
					text-align: right;
				}

			/*--------------------------------------------------
				トップページ「目的別メニュー」１つのセクション枠（左サイド）
				イメージ
			---------------------------------------------------*/
					.sec-t-bx01-left img {
						margin-bottom: 1.04vw;
						position: relative;
/*
						top: 20px;
*/
						top: 1.04vw;
					}
				/*--------------------------------------------------
					トップページ「目的別メニュー」１つのセクション枠（左サイド）
					イメージ
					左サイドにイメージがあるケース
				---------------------------------------------------*/
					.sec-t-bx01-left-img .sec-t-bx01-left img {
						box-shadow: 20px -20px 0px 0 rgb(237,217,0);
/*
						right: 20px;
*/
						right: 1.04vw;
					}
					@media screen and (max-width: 480px) {
						.sec-t-bx01-left-img .sec-t-bx01-left img {
							box-shadow: none;
							right: 0;
						}
					}
				/*--------------------------------------------------
					トップページ「目的別メニュー」１つのセクション枠（右サイド）
					イメージ
					右サイドにイメージがあるケース
				---------------------------------------------------*/
					.sec-t-bx01-right-img .sec-t-bx01-left img {
						box-shadow: -20px -20px 0px 0 rgb(237,217,0);
						right: 0;
					}
					@media screen and (max-width: 480px) {
						.sec-t-bx01-right-img .sec-t-bx01-left img {
							box-shadow: none;
						}
					}
		/*--------------------------------------------------
			トップページ「目的別メニュー」１つのセクション枠（右サイド）
		---------------------------------------------------*/
				.sec-t-bx01-right {
					display: inline-block;
					height: calc(100% + 20px);
					position: absolute;
					top: 0;
/*
					width: calc(39% - 20px);
*/
					width: 34.06vw;
				}
			/*--------------------------------------------------
				トップページ「目的別メニュー」１つのセクション枠（右サイド）
				左サイドにイメージがあるケース
			---------------------------------------------------*/
				.sec-t-bx01-left-img .sec-t-bx01-right {
					right: 0;
				}
				@media screen and (max-width: 1100px) {
					.sec-t-bx01-left-img .sec-t-bx01-right {
						bottom: 0;
						height: 500px;
						margin-top: 5vw;
						position: relative;
						top: unset;
						width: 100%;
					}
				}
				@media screen and (max-width: 768px) {
					.sec-t-bx01-left-img .sec-t-bx01-right {
						height: 400px;
						margin-top: 10vw;
					}
				}
			/*--------------------------------------------------
				トップページ「目的別メニュー」１つのセクション枠（右サイド）
				右サイドにイメージがあるケース
			---------------------------------------------------*/
				.sec-t-bx01-right-img .sec-t-bx01-right {
					left: 0;
				}
				@media screen and (max-width: 1100px) {
					.sec-t-bx01-right-img .sec-t-bx01-right {
						bottom: 0;
						height: 500px;
						margin-top: 5vw;
						position: relative;
						top: unset;
						width: 100%;
					}
				}
				@media screen and (max-width: 768px) {
					.sec-t-bx01-right-img .sec-t-bx01-right {
						height: 400px;
					}
				}

					.sec-t-bx01-cont-wrapper {
						height: 100%;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						width: 100%;
					}

				/*--------------------------------------------------
					テキストボックス大枠
				---------------------------------------------------*/
					.sec-t-bx01-cont-outer {
						min-height: 300px;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						width: 100%;
					}
					@media screen and (max-width: 480px) {
						.sec-t-bx01-cont-outer {
							min-height: 400px;
						}
					}
					/*--------------------------------------------------
						テキストボックス大枠
						左サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-left-img .sec-t-bx01-cont-outer {
							left: 0;
						}
					/*--------------------------------------------------
						テキストボックス大枠
						右サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-right-img .sec-t-bx01-cont-outer {
							right: 0;
						}

					/*--------------------------------------------------
						トップページ「メニュー」１つのセクション枠
						英字
					---------------------------------------------------*/
							.sec-t-bx01-eng {
								color: #21ab38;
								font-size: 0.7rem;
								font-weight: bold;
								letter-spacing: 0.1em;
								line-height: 2.0em;
								position: relative;
							}
							@media screen and (max-width: 768px) {
								.sec-t-bx01-eng {
									font-size: 0.9rem;
								}
							}
							@media screen and (max-width: 480px) {
								.sec-t-bx01-eng {
									font-size: 1.2rem;
								}
							}

						/*--------------------------------------------------
							SP用キャッチコピー
						---------------------------------------------------*/
							.sp-sec-t-catch {
								color: #21ab38;
								display: none;
								font-size: 1.0rem;
								font-weight: bold;
								letter-spacing: 0.2em;
								line-height: 2.0em;
							}
							@media screen and (max-width: 480px) {
								.sp-sec-t-catch {
									display: block;
								}
							}
						/*--------------------------------------------------
							トップページ「メニュー」１つのセクション枠
							英字
							左サイドにイメージがあるケース
						---------------------------------------------------*/
							.sec-t-bx01-left-img .sec-t-bx01-eng {
								margin-left: 0.3em;
								text-align: left;
							}
							@media screen and (max-width: 1100px) {
								.sec-t-bx01-left-img .sec-t-bx01-eng {
									margin-left: 0;
									margin: 0 auto;
/*
									text-align: left;
*/
									width: 50vw;
								}
							}
							@media screen and (max-width: 768px) {
								.sec-t-bx01-left-img .sec-t-bx01-eng {
									width: 80vw;
								}
							}
						/*--------------------------------------------------
							トップページ「メニュー」１つのセクション枠
							英字
							右サイドにイメージがあるケース
						---------------------------------------------------*/
							.sec-t-bx01-right-img .sec-t-bx01-eng {
								margin-right: 0.5em;
								text-align: right;
							}
							@media screen and (max-width: 1100px) {
								.sec-t-bx01-right-img .sec-t-bx01-eng {
									margin-right: 0;
									margin: 0 auto;
/*
									text-align: center;
*/
									width: 50vw;
								}
							}
							@media screen and (max-width: 768px) {
								.sec-t-bx01-right-img .sec-t-bx01-eng {
									width: 80vw;
								}
							}

				/*--------------------------------------------------
					右サイドのコンテンツ
				---------------------------------------------------*/
						.sec-t-bx01-right .sec-t-bx01-cont {
							background: #21ab38;
							min-height: 260px;
							position: absolute;
/*
							width: calc(100% + 100px);
*/
							width: 39.26vw;
						}
						@media screen and (max-width: 1100px) {
							.sec-t-bx01-right .sec-t-bx01-cont {
								left: 50%!important;
								transform: translateX(-50%);
								width: 50vw;
							}
						}
						@media screen and (max-width: 768px) {
							.sec-t-bx01-right .sec-t-bx01-cont {
								width: 80vw;
							}
						}
						@media screen and (max-width: 480px) {
							.sec-t-bx01-right .sec-t-bx01-cont {
								width: 90vw;
							}
						}
					/*--------------------------------------------------
						右サイドのコンテンツ
						左サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-left-img .sec-t-bx01-right .sec-t-bx01-cont {
/*
							left: -100px;
*/
							left: -5.21vw;
						}
						@media screen and (max-width: 1100px) {
							.sec-t-bx01-left-img .sec-t-bx01-right .sec-t-bx01-cont {
								left: 0;
							}
						}
					/*--------------------------------------------------
						右サイドのコンテンツ
						右サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-right-img .sec-t-bx01-right .sec-t-bx01-cont {
/*
							right: -100px;
*/
							right: -5.21vw;
						}

					/*--------------------------------------------------
						トップページ「目的別メニュー」１つのセクション枠
						テキスト文字列
						左サイドにイメージがあるケース
					---------------------------------------------------*/
							.sec-t-bx01-cont-text {
								color: #fff;
								font-size: 0.6rem;
								font-weight: bold;
								line-height: 2.0em;
								position: absolute;
								text-align: left;
								top: 50%;
								transform: translateY(-50%);
								z-index: 1;
							}
							@media screen and (max-width: 768px) {
								.sec-t-bx01-cont-text {
									font-size: 1.0rem;
								}
							}
							@media screen and (max-width: 480px) {
								.sec-t-bx01-cont-text {
									left: 50%;
									margin-left: 0!important;
									top: 50%;
									transform: translate(-50%,-50%);
									width: 90%;
/*
									font-size: 0.9rem;
*/
								}
							}
						/*--------------------------------------------------
							トップページ「目的別メニュー」１つのセクション枠
							テキスト文字列
							左サイドにイメージがあるケース
						---------------------------------------------------*/
							.sec-t-bx01-left-img .sec-t-bx01-cont-text {
								margin-left: 3.0em;
							}
						/*--------------------------------------------------
							トップページ「目的別メニュー」１つのセクション枠
							テキスト文字列
							右サイドにイメージがあるケース
						---------------------------------------------------*/
							.sec-t-bx01-right-img .sec-t-bx01-cont-text {
								margin-right: 3.0em;
								right: 0;
							}

					/*--------------------------------------------------
						ロゴ
					---------------------------------------------------*/
							.sec-t-bx01-cont-logo {
								bottom: 0;
								position: absolute;
							}
						/*--------------------------------------------------
							ロゴ
							左サイドにイメージがあるケース
						---------------------------------------------------*/
							.sec-t-bx01-left-img .sec-t-bx01-cont-logo {
								right: 0;
							}
						/*--------------------------------------------------
							ロゴ
							右サイドにイメージがあるケース
						---------------------------------------------------*/
							.sec-t-bx01-right-img .sec-t-bx01-cont-logo {
								left: 0;
							}

								.sec-t-bx01-left-img .sec-t-bx01-cont-logo img {}
								.sec-t-bx01-right-img .sec-t-bx01-cont-logo img {}

				/*--------------------------------------------------
					トップページ「目的別メニュー」１つのセクション枠
					上部キャッチ文字列
				---------------------------------------------------*/
						.sec-t-bx01-cont-catch {
							bottom: 0;
							position: absolute;
							z-index: 10;
						}
					/*--------------------------------------------------
						トップページ「目的別メニュー」１つのセクション枠
						上部キャッチ文字列
						左サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-left-img .sec-t-bx01-cont-catch {
/*
							right: 120px;
*/
/*
							right: 6vw;
*/
							right: 10vw;
						}
					/*--------------------------------------------------
						トップページ「目的別メニュー」１つのセクション枠
						上部キャッチ文字列
						右サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-right-img .sec-t-bx01-cont-catch {
/*
							left: 100px;
*/
							left: 5.21vw;
						}
							.sec-t-bx01-cont-catch-top {
								font-size: 1.0rem;
								font-weight: bold;
								letter-spacing: 0.2em;
								line-height: 2.0em;
								writing-mode: vertical-rl;
							}
							@media screen and (max-width: 768px) {
								.sec-t-bx01-cont-catch-top {
									font-size: 1.4rem;
								}
							}
							@media screen and (max-width: 480px) {
								.sec-t-bx01-cont-catch-top {
									display: none;
								}
							}

				/*--------------------------------------------------
					トップページ「目的別メニュー」１つのセクション枠
					下部キャッチ文字列
				---------------------------------------------------*/
						.sec-t-bx01-cont-catch02 {
							position: absolute;
							top: 0;
							z-index: 10;
						}
					/*--------------------------------------------------
						トップページ「目的別メニュー」１つのセクション枠
						下部キャッチ文字列
						左サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-left-img .sec-t-bx01-cont-catch02 {
/*
							right: 120px;
*/
/*
							right: 6vw;
*/
							right: 10vw;
						}
					/*--------------------------------------------------
						トップページ「目的別メニュー」１つのセクション枠
						下部キャッチ文字列
						右サイドにイメージがあるケース
					---------------------------------------------------*/
						.sec-t-bx01-right-img .sec-t-bx01-cont-catch02 {
/*
							left: 100px;
*/
							left: 5.21vw;
						}

							.sec-t-bx01-cont-catch-under {
								color: #fff;
								font-size: 1.0rem;
								font-weight: bold;
								letter-spacing: 0.2em;
								line-height: 2.0em;
								writing-mode: vertical-rl;
							}
							@media screen and (max-width: 768px) {
								.sec-t-bx01-cont-catch-under {
									font-size: 1.4rem;
								}
							}
							@media screen and (max-width: 480px) {
								.sec-t-bx01-cont-catch-under {
									display: none;
								}
							}

						/*--------------------------------------------------
							トップページ「目的別メニュー」１つのセクション枠
							ボタン枠の基準になる枠
						---------------------------------------------------*/
							.sec-t-bx-btn-wrapper {
								bottom: 0;
								left: 0;
								position: absolute;
								right: 0;
								top: 0;
							}
							/* 「学校生活」ボタン */
							#sec-t-bx-btn-wrapper01 {}
							/* 「学校案内」ボタン */
							#sec-t-bx-btn-wrapper02 {}
							/* 「学科紹介」ボタン */
							#sec-t-bx-btn-wrapper03 {}
							/* 「クラブ活動」ボタン */
							#sec-t-bx-btn-wrapper04 {}

							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの上部ライン（緑枠内）
							---------------------------------------------------*/
								.sec-t-bx-btn-tline {
									border-left: 1px solid #fff;
									bottom: 0;
/*
									height: 30px;
*/
									height: 1.56vw;
									position: absolute;
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx-btn-tline {
										display: none;
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの上部ライン（緑枠内）
								左サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-left-img .sec-t-bx01-btn-tline {
/*
									right: 190px;
*/
									right: 10.41vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-tline {
										right: 9.37vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-tline {
										right: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-tline {
										right: 18vw;
									}
								}
								.sec-t-bx01-left-img .sec-t-bx02-btn-tline {
/*
									right: 490px;
*/
									right: 26.04vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-tline {
										right: 25vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-tline {
										right: unset;
										left: 10vw;
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-tline {
										left: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-tline {
										left: 16vw;
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの上部ライン（緑枠内）
								右サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-right-img .sec-t-bx01-btn-tline {
/*
									left: 190px;
*/
									left: 10.41vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-tline {
										left: 9.37vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-tline {
										left: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-tline {
										left: 16vw;
									}
								}
								.sec-t-bx01-right-img .sec-t-bx02-btn-tline {
/*
									left: 490px;
*/
									left: 26.04vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-tline {
										left: 25vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-tline {
										left: unset;
										right: 10vw;
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-tline {
										right: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-tline {
										right: 18vw;
									}
								}

						/*--------------------------------------------------
							トップページ「目的別メニュー」１つのセクション枠
							ボタンの上部ライン
						---------------------------------------------------*/
								.sec-t-bx-btn-mline {
									border-left: 1px solid #b4b4b5;
/*
									bottom: -60px;
									height: 60px;
*/
									bottom: -3.12vw;
									height: 3.12vw;
									position: absolute;
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx-btn-mline {
										bottom: -2.12vw;
										height: 2.12vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx-btn-mline {
										display: none;
									}
								}
								.sec-t-bx-btn-wrapper.on .sec-t-bx-btn-mline {
									border-left: 1px solid #1eaa39;
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの上部ライン
								左サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-left-img .sec-t-bx01-btn-mline {
/*
									right: 190px;
*/
									right: 10.41vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-mline {
										right: 9.37vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-mline {
										right: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-mline {
										right: 18vw;
									}
								}
								.sec-t-bx01-left-img .sec-t-bx02-btn-mline {
/*
									right: 490px;
*/
									right: 26.04vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-mline {
										right: 25vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-mline {
										right: unset;
										left: 10vw;
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-mline {
										left: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-mline {
										left: 16vw;
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの上部ライン
								右サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-right-img .sec-t-bx01-btn-mline {
/*
									left: 190px;
*/
									left: 10.41vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-mline {
										left: 9.37vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-mline {
										left: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-mline {
										left: 16vw;
									}
								}
								.sec-t-bx01-right-img .sec-t-bx02-btn-mline {
/*
									left: 490px;
*/
									left: 26.04vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-mline {
										left: 25vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-mline {
										left: unset;
										right: 10vw;
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-mline {
										right: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-mline {
										right: 18vw;
									}
								}

						/*--------------------------------------------------
							トップページ「目的別メニュー」１つのセクション枠
							ボタンの下部ライン
						---------------------------------------------------*/
								.sec-t-bx-btn-uline {
									border-left: 1px solid #717071;
/*
									bottom: -170px;
*/
									bottom: -8.85vw;
									display: none;
/*
									height: 30px;
*/
									height: 1.56vw;
									position: absolute;
								}
								@media screen and (max-width: 800px) {
									.sec-t-bx-btn-uline {
										bottom: -11.85vw;
										height: 2.56vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx-btn-uline {
										bottom: -10.85vw;
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの下部ライン
								左サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-left-img .sec-t-bx01-btn-uline {
/*
									right: 190px;
*/
									right: 10.41vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-uline {
										right: 9.37vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-uline {
										right: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-uline {
										display: none!important;
										right: 18vw;
									}
								}
								.sec-t-bx01-left-img .sec-t-bx02-btn-uline {
/*
									right: 490px;
*/
									right: 26.04vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-uline {
										right: 25vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-uline {
										right: unset;
										left: 10vw;
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-uline {
										left: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-uline {
										left: 16vw;
										display: none!important;
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタンの下部ライン
								右サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-right-img .sec-t-bx01-btn-uline {
/*
									left: 190px;
*/
									left: 10.41vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-uline {
										left: 9.37vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-uline {
										left: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-uline {
										left: 16vw;
									}
								}
								.sec-t-bx01-right-img .sec-t-bx02-btn-uline {
/*
									left: 490px;
*/
									left: 26.04vw;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-uline {
										left: 25vw;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-uline {
										left: unset;
										right: 10vw;
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-uline {
										right: 15vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-uline {
										right: 18vw;
									}
								}

								.sec-t-bx-btn-wrapper.on .sec-t-bx-btn-uline {
									display: block;
								}

						/*--------------------------------------------------
							トップページ「目的別メニュー」１つのセクション枠
							ボタン部分（外枠）
						---------------------------------------------------*/
								.sec-t-bx-btn-outer {
/*
									bottom: -140px;
									min-height: 80px;
*/
									bottom: -7.29vw;
									min-height: 5vw;
									min-width: 240px;
									position: absolute;
								}
								@media screen and (max-width: 1400px) {
									.sec-t-bx-btn-outer {
										min-width: 200px;
									}
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx-btn-outer {
										min-height: 5.17vw;
										min-width: 180px;
									}
								}
								@media screen and (max-width: 800px) {
									.sec-t-bx-btn-outer {
										bottom: -9.29vw;
										min-height: 7.17vw;
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx-btn-outer {
/*
										bottom: -9.29vw;
*/
										bottom: -70px;
/*
										min-height: 7.17vw;
*/
										min-height: 50px;
										min-width: 140px;
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタン部分（外枠）
								左サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-left-img .sec-t-bx01-btn-outer {
/*
									right: 80px;
*/
									right: calc(9.89vw - 110px);
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-outer {
										right: calc(15vw - 90px);
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx01-btn-outer {
										right: calc(18vw - 70px);
									}
								}
								.sec-t-bx01-left-img .sec-t-bx02-btn-outer {
/*
									right: 380px;
*/
									right: calc(25.52vw - 110px);
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-outer {
										right: unset;
										left: calc(10vw - 90px);
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-outer {
										left: calc(15vw - 90px);
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-left-img .sec-t-bx02-btn-outer {
										left: calc(16vw - 70px);
									}
								}
							/*--------------------------------------------------
								トップページ「目的別メニュー」１つのセクション枠
								ボタン部分（外枠）
								右サイドにイメージがあるケース
							---------------------------------------------------*/
								.sec-t-bx01-right-img .sec-t-bx01-btn-outer {
/*
									left: 80px;
*/
									left: calc(9.89vw - 110px);
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-outer {
										left: calc(15vw - 90px);
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx01-btn-outer {
										left: calc(16vw - 70px);
									}
								}
								.sec-t-bx01-right-img .sec-t-bx02-btn-outer {
/*
									left: 380px;
*/
									left: calc(25.52vw - 110px);
								}
								@media screen and (max-width: 1100px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-outer {
										left: unset;
										right: calc(10vw - 90px);
									}
								}
								@media screen and (max-width: 768px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-outer {
										left: unset;
										right: calc(15vw - 90px);
									}
								}
								@media screen and (max-width: 480px) {
									.sec-t-bx01-right-img .sec-t-bx02-btn-outer {
										left: unset;
										right: calc(18vw - 70px);
									}
								}

								.sec-t-bx-btn-wrapper.on .sec-t-bx-btn-outer {
									background: #edd900;
									transition: all 1.5s;
								}
								.sec-t-bx-btn-wrapper:not(.active) .sec-t-bx-btn-outer {
									cursor: pointer;
								}

								/*--------------------------------------------------
									トップページ「目的別メニュー」１つのセクション枠
									ボタン部分（内枠）
								---------------------------------------------------*/
									.sec-t-bx-btn-outer .sec-bx-btn-inner {
										color: #b4b5b5;
										font-size: 0.96rem;
										font-weight: bold;
										left: 50%;
										line-height: 1.2em;
										position: absolute;
										text-align: center;
										top: 50%;
										transform: translate(-50%,-50%);
										width: 100%;
									}
									.sec-t-bx-btn-wrapper.on .sec-bx-btn-inner {
										color: #221814;
										font-size: 1.2rem;
										transition: all 0.2s;
									}
									@media screen and (max-width: 1300px) {
										.sec-t-bx-btn-wrapper.on .sec-bx-btn-inner {
											font-size: 1.0rem;
										}
									}
									@media screen and (max-width: 1000px) {
										.sec-t-bx-btn-wrapper.on .sec-bx-btn-inner {
											line-height: 1.0em;
										}
									}
									@media screen and (max-width: 768px) {
										.sec-t-bx-btn-wrapper.on .sec-bx-btn-inner {
											font-size: 1.3rem;
										}
									}
										.sec-t-bx-btn-outer .sec-bx-btn-inner span {
											color: #b4b5b5;
											display: inline-block;
											font-size: 0.5rem;
											font-weight: bold;
											letter-spacing: 0.1em;
											line-height: 1.0em;
											margin-top: 0.5em;
										}
										@media screen and (max-width: 768px) {
											.sec-t-bx-btn-outer .sec-bx-btn-inner span {
												font-size: 0.8rem;
											}
										}
										.sec-t-bx-btn-wrapper.on .sec-t-bx-btn-outer span {
											color: #21ab38;
											font-size: 0.6rem;
											transition: all 0.2s;
										}
										@media screen and (max-width: 768px) {
											.sec-t-bx-btn-wrapper.on .sec-t-bx-btn-outer span {
												font-size: 0.8rem;
											}
										}

			#sec-wrapper01-menu {}
			#sec-wrapper02-menu {
				display: none;
			}
			#sec-wrapper03-menu {}
			#sec-wrapper04-menu {
				display: none;
			}
			#sec-wrapper05-menu {}
			#sec-wrapper06-menu {
				display: none;
			}

			.sec-wrapper01-m-std {
				margin: 0 3.5em;
				padding-top: 30px;
/*
				padding-top: 70px;
*/
			}
			.sec-wrapper01-m-r {
				text-align: right;
			}
				.sec-wrapper01-m-std ul {
					display: flex;
				}
				@media screen and (max-width: 1100px) {
					.sec-wrapper01-m-std ul {
						flex-wrap: wrap;
						justify-content: center!important;
					}
				}
				.sec-wrapper01-m-r ul {
					justify-content: flex-end;
				}
				.sec-wrapper01-m-l ul {
					justify-content: flex-start;
				}
					.sec-wrapper01-m-std ul li {
						box-shadow: 0 0 10px #ddd;
					}
					@media screen and (max-width: 1100px) {
						.sec-wrapper01-m-std ul li {
							margin-bottom: 2.0em;
						}
					}
					@media screen and (max-width: 768px) {
						.sec-wrapper01-m-std ul li {
							margin-bottom: 4.0em;
						}
					}
					.sec-wrapper01-m-r ul li {
						margin-left: 1.0em;
					}
					.sec-wrapper01-m-l ul li {
						margin-right: 1.0em;
					}
/*
					.sec-wrapper01-m-l ul li:first-child {
						margin-left: 0.2em;
					}
*/
					.sec-wrapper01-m-r ul li:last-child {
						margin-right: 0.2em;
					}
						.sec-wrapper01-m-std ul li a {
							display: block;
							padding: 0 0.9em 0.5em;
						}
							.sec-wrapper01-m-std ul li a img {
								position: relative;
								top: -20px;
							}
							.sec-wrapper01-m-std ul li a span {
								display: flex;
								align-items: center;

								color: #21ab38;
								font-size: 0.8rem;
								font-weight: bold;
								letter-spacing: 0;
								line-height: 1.4em;
								min-height: 60px;
/*
								margin-top: 0.5em;
*/
								text-align: left;
							}
							@media screen and (max-width: 768px) {
								.sec-wrapper01-m-std ul li a span {
									font-size: 1.0rem;
								}
							}
							@media screen and (max-width: 480px) {
								.sec-wrapper01-m-std ul li a span {
									font-size: 1.2rem;
								}
							}

	/*--------------------------------------------------
		「学校Movie」セクション
	---------------------------------------------------*/
		#sec-t-movie {
			text-align: center;
		}
			.sec-t-movie-contents {
				aspect-ratio: 16 / 9;
				margin: 0 auto;
				width: 60%;
			}
			@media screen and (max-width: 768px) {
				.sec-t-movie-contents {
					width: 90vw;
				}
			}
				.sec-t-movie-contents iframe {
					height: 100%;
					width: 100%;
				}
			.sec-t-movie-youtube {
				display: inline-block;
				margin: 3.0em auto 0;
			}
				.sec-t-movie-youtube-inner {
				}
					.sec-t-movie-youtube-inner a {
						display: flex;
						justify-content: center;
						align-items: center;

						background: #21ab38;
						border: 1px solid #21ab38;
						overflow: hidden;
						padding: 1.0em 2.5em;
						position: relative;
						z-index: 1;
					}
					@media screen and (max-width: 480px) {
						.sec-t-movie-youtube-inner a {
							flex-direction: column;
						}
					}
					.sec-t-movie-youtube-inner a,
					.sec-t-movie-youtube-inner a::before,
					.sec-t-movie-youtube-inner a::after {
						-webkit-box-sizing: border-box;
						-moz-box-sizing: border-box;
						box-sizing: border-box;
						-webkit-transition: all .3s;
						transition: all .3s;
					}
					.sec-t-movie-youtube-inner a::before {
						content: '';
						display: block;
						position: absolute;
						z-index: -1;
					}
					.sec-t-movie-youtube-inner a::after {
						content: '';
						display: block;
						height: 100%;
						left: -100%;
						position: absolute;
						top: -100%;
						width: 100%;
						z-index: -1;
					}
					.sec-t-movie-youtube-inner a:hover::after {
						background-color: #fff;
						color: #21ab38;
						left: 0;
						top: 0;
					}

						.sec-t-movie-youtube-upper {
							display: flex;
							justify-content: center;
							align-items: center;
						}
/*
						@media screen and (max-width: 480px) {
							.sec-t-movie-youtube-upper {
								margin-bottom: 1.0em;
							}
						}
*/
							.sec-t-movie-youtube-img {
								line-height: 1.0em;
							}
								.sec-t-movie-youtube-img img {}
/*
								@media screen and (max-width: 480px) {
									.sec-t-movie-youtube-img img {
										width: 50%;
									}
								}
*/
							.sec-t-movie-youtube-text {
								color: #fff;
								font-size: 0.7rem;
								font-weight: bold;
								line-height: 1.0em;
								margin-left: 0.5em;
							}
							@media screen and (max-width: 768px) {
								.sec-t-movie-youtube-text {
									font-size: 0.9rem;
								}
							}
							@media screen and (max-width: 480px) {
								.sec-t-movie-youtube-text {
									font-size: 1.0rem;
									line-height: 1.4em;
								}
							}
					.sec-t-movie-youtube-inner a:hover .sec-t-movie-youtube-text {
						color: #21ab38;
					}


	/*--------------------------------------------------
		「Q&A、アクセス」セクション
	---------------------------------------------------*/
		#sec-qa-access {
			display: flex;
			justify-content: space-between;
			
			margin: 8.0em auto;
			width: 90vw;
		}
		@media screen and (max-width: 768px) {
			#sec-qa-access {
				flex-wrap: wrap;
			}
		}
			#sec-qa {}
			@media screen and (max-width: 768px) {
				#sec-qa {
					margin-bottom: 2.0em;
				}
			}
				#sec-qa-access a {
					display: block;
					position: relative;
				}
					#sec-qa-access a img {}
					.sec-qa-access-bg {
						background-color: rgba(116,143,157,0.6);
						height: 100%;
						left: 0;
						mix-blend-mode: multiply;
						position: absolute;
						top: 0;
						width: 100%;
					}

					.sec-qa-access-box {
						color: #fff;
						left: 50%;
						position: absolute;
						text-align: center;
						top: 50%;
						transform: translate(-50%,-50%);
					}
						.sec-qa-access-text01 {
							font-size: 1.2rem;
							font-weight: bold;
							line-height: 1.0em;
						}
						@media screen and (max-width: 768px) {
							.sec-qa-access-text01 {
								font-size: 1.4rem;
							}
						}
						@media screen and (max-width: 480px) {
							.sec-qa-access-text01 {
								font-size: 1.6rem;
							}
						}
						.sec-qa-access-text02 {
							font-size: 0.7rem;
							font-weight: bold;
							line-height: 2.0em;
						}
						@media screen and (max-width: 768px) {
							.sec-qa-access-text02 {
								font-size: 1.0rem;
							}
						}
						@media screen and (max-width: 480px) {
							.sec-qa-access-text02 {
								font-size: 1.2rem;
							}
						}