/*** for PC Browser ***/
@media (min-width:401px)
{
/* == Introduction 基本スタイル == */
.Introduction {
	--theme-color: var(--color-rs);

	/* カラーテーマ定義（.introのクラスに応じてテーマ色が切り替わります） */
	.intro_rs {
		--theme-color: var(--color-rs);
	}

	.intro_med {
		--theme-color: var(--color-med);
	}

	.intro_eng {
		--theme-color: var(--color-eng);
	}

	.intro_muses {
		--theme-color: var(--color-muses);
	}

	/* 今後追加する色の例:
	.intro_blue {
		--theme-color: var(--color-blue);
	}
	*/

	/* --- 共通画像リセット --- */
	img {
		max-width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
	}

	/* --- 見出しエリア --- */
	.intro {
		margin: 0 auto 80px;
	}

	/* --- 見出しエリア --- */
	.intro h2 {
		background-image: none;
		background-color: var(--theme-color);
		color: #fff;
		border-radius: 10px;
		padding: 20px;
		margin: 0 auto 30px !important;
		font-size: 170%;
	}

	.intro_h2_img {
		display: flex;
		justify-content: center;
		margin: 0 auto 10px;

		img {
			max-width: 90%;
		}
	}

	.intro_h2_txt {
		font-size: 120%;
		font-weight: bold;
		text-align: center;
		margin: 0 auto 40px;
		color: var(--theme-color);
	}

	/* --- ボックスデザイン --- */
	.intro_box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 25px;
		margin: 0 auto 40px;

		.box_h3 {
			margin: 0;
			padding: 0;

			a {
				font-size: 120%;
				width: 296px;
				min-height: 98px;
				border-radius: 10px;
				text-decoration: none;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid var(--theme-color);
				color: var(--theme-color);
				transition: background-color 0.2s, color 0.2s;

				&:hover {
					background-color: var(--theme-color);
					color: #fff;
				}
			}
		}

		.sub_txt {
			flex: 1 1 calc(100% - 325px);
			min-width: 280px;
			font-size: 90%;
		}
	}

	/* --- コンテンツセクション共通 --- */
	.intro_course,
	.intro_facilities {
		margin: 0 auto 40px;

		h3 {
			font-size: 120%;
			margin: 0 auto 20px;
			padding: 0;
			font-weight: bold;
			display: flex;
			align-items: center;
			gap: 1rem;
			color: var(--theme-color);

			&::before,
			&::after {
				content: "";
				flex: 1;
				height: 1px;
				background-color: var(--theme-color);
			}
		}
	}

	/* --- コースデザイン詳細 --- */
	.intro_course {
		padding: 0;

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 20px;

			li {
				width: calc((100% - 40px) / 3);

				a {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 10px;
				}
			}
		}

		span {
			font-size: 90%;
		}
		.sub_title {
			font-weight: bold;
		}
	}

	/* --- 関連デザイン詳細 --- */
	.intro_facilities {
		ul {
			list-style: inside;
			margin: 0px 0px 0px 15px;
			padding: 0px;
			display: grid;
			gap: 10px;
		}
		li::marker {
			color: var(--theme-color);
		}
	}
}


}
@media (max-width: 1100px) {
    .Introduction {
        .intro {
            margin: 0 10px 80px;
        }
    }
}



/*** for PC Browser ***/
@media (min-width:401px)
{
/*auto generated region*/

#BaseTable
{

}
#SystemMenu
{

}
#HeaderPane
{

}
#Middle
{

}
#LeftPane
{

}
#ContentPane
{

}
#RightPane
{

}
#FooterPane
{

}
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
/* == Introduction 基本スタイル == */
.Introduction {
	--theme-color: var(--color-rs);

	/* カラーテーマ定義（.introのクラスに応じてテーマ色が切り替わります） */
	.intro_rs {
		--theme-color: var(--color-rs);
	}

	.intro_med {
		--theme-color: var(--color-med);
	}

	.intro_eng {
		--theme-color: var(--color-eng);
	}

	.intro_muses {
		--theme-color: var(--color-muses);
	}

	/* 今後追加する色の例:
	.intro_blue {
		--theme-color: var(--color-blue);
	}
	*/

	/* --- 共通画像リセット --- */
	img {
		max-width: 100%;
		height: auto;
		margin: 0;
		padding: 0;
		vertical-align: bottom;
	}

	/* --- 見出しエリア --- */
	.intro {
		margin: 0 10px 80px;
	}

	/* --- 見出しエリア --- */
	.intro h2 {
		background-image: none;
		background-color: var(--theme-color);
		color: #fff;
		border-radius: 10px;
		padding: 20px;
		margin: 0 auto 30px !important;
		font-size: 170%;
	}

	.intro_h2_img {
		display: flex;
		justify-content: center;
		margin: 0 auto 10px;

		img {
			max-width: 90%;
		}
	}

	.intro_h2_txt {
		font-size: 120%;
		font-weight: bold;
		text-align: center;
		margin: 0 auto 40px;
		color: var(--theme-color);
	}

	/* --- ボックスデザイン --- */
	.intro_box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 25px;
		margin: 0 auto 40px;

		.box_h3 {
			margin: 0;
			padding: 0;

			a {
				font-size: 100%;
				width: 276px;
				min-height: 60px;
				border-radius: 10px;
				text-decoration: none;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 2px solid var(--theme-color);
				color: var(--theme-color);
				transition: background-color 0.2s, color 0.2s;

				&:hover {
					background-color: var(--theme-color);
					color: #fff;
				}
			}
		}

		.sub_txt {
			width: 260px;
			font-size: 90%;
		}
	}

	/* --- コンテンツセクション共通 --- */
	.intro_course,
	.intro_facilities {
		margin: 0 auto 40px;

		h3 {
			font-size: 120%;
			margin: 0 auto 20px;
			padding: 0;
			font-weight: bold;
			display: flex;
			align-items: center;
			gap: 1rem;
			color: var(--theme-color);

			&::before,
			&::after {
				content: "";
				flex: 1;
				height: 1px;
				background-color: var(--theme-color);
			}
		}
	}

	/* --- コースデザイン詳細 --- */
	.intro_course {
		padding: 0;

		ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			gap: 20px;

			li {
				width: calc((100% - 20px) / 2);

				a {
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					gap: 10px;
				}
			}
		}

		span {
			font-size: 90%;
		}
		.sub_title {
			font-weight: bold;
		}
	}

	/* --- 関連デザイン詳細 --- */
	.intro_facilities {
		ul {
			list-style: inside;
			margin: 0px 0px 0px 15px;
			padding: 0px;
			display: grid;
			gap: 10px;
		}
		li::marker {
			color: var(--theme-color);
		}
	}
}
}