@charset "utf-8";

/* =========================================
* ページ全体の共通パーツ
* ======================================== */
html {
	scroll-padding-top: var(--header-height);
	/* 追従メニューの高さに応じて適切な値を設定 */
	scroll-behavior: smooth;
}

body {
	font-family: "Noto Sans JP", sans-serif;
	font-size: var(--txt14-12);
	text-align: justify;
	line-height: 175%;
	font-weight: 500;
}

main {
	overflow: clip;
	margin-top: var(--header-height);
}

section {
	padding: var(--m56-32) 0px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

section:last-child {
	padding-bottom: 160px;
}

details summary {
	list-style: none;
	cursor: pointer;

	/* リストスタイルの削除 */
	&::-webkit-details-marker {
		display: none;
	}
}

a {
	text-decoration: none;
	color: inherit;
}


img {
	max-width: 100%;
	height: auto;
	object-fit: contain;
	vertical-align: bottom;
}

.container {
	width: 92%;
	max-width: 900px;
	display: block;
	margin: auto;
}

/* SP */
.sp_none {
	display: none !important;
}

/* PC以上 */
@media (min-width: 769px) {
	.pc_none {
		display: none !important;
	}

	.sp_none {
		display: block !important;
	}
}

.txtC {
	text-align: center;
}

.txtR {
	text-align: right;
}

.txtL {
	text-align: left;
}

.txtJ {
	text-align: justify;
}


/* フレックス関連
* ---------------------------------- */
.flex {
	display: -ms-flexbox;
	display: flex;
}

.flexR {
	flex-direction: row-reverse;
}

.justC {
	justify-content: center;
}

.justS {
	justify-content: flex-start;
}

.justE {
	justify-content: flex-end;
}

.justB {
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.justA {
	-ms-flex-pack: distribute;
	justify-content: space-around;
}

.flexW {
	flex-wrap: wrap;
}

.alignS {
	align-items: start;
}

.alignC {
	align-items: center;
}

.alignB {
	align-items: flex-end;
}



/* =========================================
* 共通パーツ
* ======================================== */

/* 変数
* ---------------------------------- */
:root {
	--main-color: #F46061;
	--sub-color: #FFF3DB;
	--light-color: #fddfdf;
	--orange-color: #F37B26;
	--ohara-color: #CF1000;
	/* --- 公認会計士・税理士科 --- */
	--kaikeishi-color: #FF5B4A;
	--kaikeishi-bg: #FFEFED;
	--kaikeishi-gd: linear-gradient(31deg, var(--kaikeishi-color) 50.82%, #F7849B 87.92%);
	/* --- 医療事務科・経理事務科 --- */
	--jimu-color: #F16A98;
	--jimu-bg: #FEF0F5;
	--jimu-gd: linear-gradient(31deg, var(--jimu-color) 50.82%, #FFBCD7 87.92%);
	/* --- 経営ビジネス科 --- */
	--keiei-color: #FF8A41;
	--keiei-bg: #FFF3EC;
	--keiei-gd: linear-gradient(31deg, var(--keiei-color) 50.82%, #FFDF95 87.92%);
	/* --- 情報処理科 --- */
	--it-color: #3DA8D6;
	--it-bg: #ECF6FB;
	--it-gd: linear-gradient(31deg, var(--it-color) 50.82%, #40E6B9 87.92%);
	/* --- 公務員科 --- */
	--komuin-color: #62C073;
	--komuin-bg: #EFF9F1;
	--komuin-gd: linear-gradient(31deg, var(--komuin-color) 50.82%, #A7E478 87.92%);
	/* --- 全日制 専門課程集中学習 --- */
	--open-color: #D62629;
	--open-bg: #FBE9EA;
	--open-gd: linear-gradient(31deg, var(--open-color) 50.82%, #FFB78E 87.92%);
	/* --- ホテル・ブライダル科 --- */
	--hotelbridal-color: #E77AB9;
	--hotelbridal-bg: #FBE9EA;
	--hotelbridal-gd: linear-gradient(31deg, var(--hotelbridal-color) 50.82%, #FFC2EC 87.92%);
	/* --- ホテル科 --- */
	--hotel-color: #2B84CB;
	--hotel-bg: #EAF3FA;
	--hotel-gd: linear-gradient(31deg, var(--hotel-color) 50.82%, #69C8FF 87.92%);
	/* --- ブライダル科 --- */
	--bridal-color: #C8569A;
	--bridal-bg: #F9EEF5;
	--bridal-gd: linear-gradient(31deg, var(--bridal-color) 50.82%, #FFB9F0 87.92%);
	/* --- 介護福祉科 --- */
	--kaigo-color: #B9DC24;
	--kaigo-bg: #F8FBE9;
	--kaigo-gd: linear-gradient(31deg, var(--kaigo-color) 50.82%, #FCFFA5 87.92%);

	--main-gd: linear-gradient(90deg, var(--main-color) 0%, #F68788 56.25%, #FC985A 100%);
	--sub-gd: conic-gradient(from 180deg at 50% 50%, #FFE9A9 0deg, #F8FFDF 114.23076510429382deg, #FFF0D2 193.84616374969482deg, #FFE8E5 287.30769395828247deg, #FFE9A9 360deg);
	--circle-gd: conic-gradient(from 180deg at 50% 50%, var(--main-color) 24.230770468711853deg, var(--main-color) 153.2572603225708deg, #FBC258 253.74978303909302deg, #FFC3AB 310.9471821784973deg, var(--main-color) 346.5380573272705deg);
	--en-txt: "Poppins", sans-serif;
	--fluffy-txt: "M PLUS Rounded 1c", sans-serif;
	--kunoji: rotate(45deg) translateY(-50%);
	--hov-move: all .4s;
	--header-height: 70px;
	--txt56-36: 36px;
	--txt40-32: 32px;
	--txt32-28: 28px;
	--txt36-24: 24px;
	--txt32-24: 24px;
	--txt24-20: 20px;
	--txt20-18: 18px;
	--txt18-16: 16px;
	--txt16-14: 14px;
	--txt14-12: 12px;
	--m120-104: 104px;
	--m104-80: 80px;
	--m96-64: 64px;
	--m96-52: 52px;
	--m80-40: 40px;
	--m56-32: 32px;
	--m40-24: 24px;
	--m32-16: 16px;
	--m24-16: 16px;
	--m16-8: 8px;
}


/* パンくず
* ---------------------------------- */

.bread-list {
	margin: var(--m24-16) 0;
	/* margin-bottom: var(--m24-16); */
	display: flex;
	font-size: 12px;
	font-weight: 700;
	flex-wrap: wrap;

	li {
		position: relative;
		margin-left: 32px;
		font-weight: 500;
		line-height: normal;

		a {
			border-bottom: #000 1px solid;
		}

		&::before {
			position: absolute;
			content: "";
			width: 6px;
			height: 6px;
			border-top: solid 1px #000;
			border-right: solid 1px #000;
			top: 50%;
			left: -24px;
			transform: var(--kunoji);
			box-sizing: content-box; /* base.cssへのカウンターとして指定 */
		}

		&:first-child {
			margin-left: 0;

			&::before {
				display: none;
			}
		}

	}
}

/* テキストまわり
* ---------------------------------- */

/* --- 普通のリスト --- */
ul.normal-list {
	padding-left: 1.5em;
	text-indent: -1.5em;
}

.normal-list li {
	list-style-type: disc;
	list-style-position: inside;
}

/* --- 注釈 --- */
ul.note {
	padding-left: 1em;
	text-indent: -1em;
	text-align: justify;
}

a.inline-link {
	color: var(--main-color);
	text-decoration: underline;
	font-weight: 500;
}

/* --- トップページリード文 --- */
.top-lead-txt {
	font-size: var(--txt14-12);
	font-weight: 500;
	line-height: 160%;
	margin-bottom: var(--m40-24);
}

/* --- 見出し --- */
.oc-mv-wrap h1 {
	font-size: var(--txt18-16);
	font-weight: 700;
	text-align: center;
	letter-spacing: 0.32px;
	color: #fff;
	filter: drop-shadow(0 0 10px #F46061);


	&::before {
		content: attr(data-en);
		display: block;
		font-family: var(--en-txt);
		line-height: 120%;
		font-weight: 700;
		font-size: var(--txt56-36);
	}

}

h2 {
	font-size: var(--m40-24);
	line-height: 120%;
	font-family: var(--fluffy-txt);
	margin-bottom: var(--m56-32);
	font-weight: 800;

	&.gd-midashi {
		display: inline-block;
		background: var(--main-gd);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

h2.top-midashi {
	font-size: var(--txt18-16);
	font-weight: 700;
	letter-spacing: 0.32px;
	margin-bottom: var(--m40-24);

	&::before {
		content: attr(data-en);
		display: block;
		font-family: var(--en-txt);
		background: var(--main-gd);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		line-height: 120%;
		font-weight: 700;
		font-size: var(--txt56-36);
	}
}

h3 {
	font-size: var(--txt24-20);
	font-family: var(--fluffy-txt);
	font-weight: 800;
}

/* --- 各学科の見出し --- */
h1.course-midashi {
	font-size: var(--txt32-28);
	font-family: var(--fluffy-txt);
	text-align: center;
	margin-bottom: var(--m40-24);
	font-weight: 800;
  line-height: 120%;

	#kaikeishi &,
	#kaikeishi_zei & {
		color: var(--kaikeishi-color);
	}
	#jimu & {
		color: var(--jimu-color);
	}
	#keiei & {
		color: var(--keiei-color);
	}
	#it & {
		color: var(--it-color);
	}
	#komuin & {
		color: var(--komuin-color);
	}
	#open & {
		color: var(--open-color);
	}
	#hotelbridal & {
		color: var(--hotelbridal-color);
	}
	#bridal & {
		color: var(--bridal-color);
	}
	#hotel & {
		color: var(--hotel-color);
	}
	#kaigo & {
		color: var(--kaigo-color);
	}
	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		color: var(--jimu-color);
	}
	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		color: var(--hotel-color);
	}
}

h2.course-midashi {
	font-size: var(--txt32-24);
	margin-bottom: var(--m24-16);

	#kaikeishi &,
	#kaikeishi_zei & {
		color: var(--kaikeishi-color);
	}
	#jimu & {
		color: var(--jimu-color);
	}
	#keiei & {
		color: var(--keiei-color);
	}
	#it & {
		color: var(--it-color);
	}
	#komuin & {
		color: var(--komuin-color);
	}
	#open & {
		color: var(--open-color);
	}
	#hotelbridal & {
		color: var(--hotelbridal-color);
	}
	#hotel & {
		color: var(--hotel-color);
	}
	#bridal & {
		color: var(--bridal-color);
	}
	#kaigo & {
		color: var(--kaigo-color);
	}
	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		color: var(--jimu-color);
	}
	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		color: var(--hotel-color);
	}
}

/* --- 色付きテキスト --- */
.main-color-txt {
	color: var(--main-color);
}

/* アイコン周り
* ---------------------------------- */
.icon-kunoji {
	position: relative;
	display: inline-block;
	height: 1em;

	&:after {
		width: .6em;
		height: .6em;
		display: inline-block;
		border-top: var(--main-color) solid 2px;
		border-right: var(--main-color) solid 2px;
		transform: var(--kunoji);
		top: 50%;
		right: -1.2em;
		content: "";
		position: absolute;
		box-sizing: content-box; /* base.cssへのカウンターとして指定 */
	}
}

.gd-circle {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 80px;
	background: var(--main-gd);
	color: #FFF;
	text-align: center;


	p {
		font-size: var(--txt40-32);
		font-weight: 700;

		span {
			font-size: .5em;
			display: block;
		}
	}
}

/* ボタン
* ---------------------------------- */
.gd-btn {
	background: var(--main-gd);
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 180px;
	font-weight: 700;
	font-size: 16px;
	padding: .7em 2.4em .7em 1.2em;
	border-radius: 40px;
	filter: drop-shadow(0 0 4px #DA9F9F);
	margin: var(--m40-24) auto 0 auto;

	.icon-kunoji::after {
		border-top: 2px #fff solid;
		border-right: 2px #fff solid;
	}
}

/* 既存ページの共通
* ---------------------------------- */
.simple-page {
	.simple-mv-wrap {
		background: var(--main-gd);
		padding: var(--m56-32);

		h1 {
			letter-spacing: 0.32px;
			color: #fff;
			text-align: center;
			font-family: "Poppins", "M PLUS Rounded 1c", sans-serif;
			line-height: 120%;
			font-weight: 700;
			font-size: var(--txt56-36);
		}
	}

	h3.simple-midashi {
		color: var(--main-color);
		margin-bottom: var(--m40-24);
	}

	.top-copy {
		margin-bottom: var(--m32-16);
	}
}

/* =========================================
	* ヘッダー
	* ======================================== */
header {
	height: var(--header-height);
	z-index: 10000;
	background-color: #fff;
	display: flex !important; /* base.cssへのカウンターでimportant */
	align-items: center;
	padding: 0 var(--m32-16);
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;

	.header-contents {
		.top-logo {
			font-weight: 700;
			font-size: 16px;
			letter-spacing: 0.32px;
			color: var(--ohara-color);
			white-space: nowrap;
			line-height: 125%;

			span {
				font-size: .75em;
				letter-spacing: .25px;
				display: block;
			}
		}

		nav {
			display: block;
			position: fixed;
			background-color: #fff;
			width: 100%;
			top: var(--header-height);
			height: auto;
			font-size: var(--txt18-16);
			font-weight: 700;
			transition: right 0.3s ease-in-out;
			right: -100%;
			padding: 0 24px;
			border-radius: 0 0 24px 24px;
			box-shadow: 0 4px 4px 0 #88888860;

			&.active {
				right: 0;
			}

			.parent-wrap .nav-link {

				&>p,
				&>a {
					padding: 24px 0px;
					cursor: pointer;
					border-bottom: 1px dashed #000;
					display: block;
					position: relative;
					transition: var(--hov-move);

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

					.has-child & .icon-kunoji::after {
						transform: rotate(135deg) translateY(-50%);
						top: -10%;
						right: -1.5em;
						box-sizing: content-box; /* base.cssへのカウンターとして指定 */
					}

				}

				&.active>p .icon-kunoji::after {
					transform: rotate(-45deg) translateY(-50%);
					top: 80%;
					right: -2em;
					transform-origin: 50% 50%;
				}

				.child-link {
					display: none;
					padding: 16px 0;
					text-align: left;

					li {
						display: inline-block;
						font-size: 14px;
						padding-left: 1em;
						position: relative;
						font-weight: 500;
						margin-right: .2em;

						&::before {
							position: absolute;
							content: "●";
							font-size: .5em;
							color: var(--main-color);
							transform: translateY(-50%);
							top: 50%;
							left: .5em;
						}
					}
				}
			}
		}
	}
}

.sns-links {
	padding: 24px 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
}

/* ハンバーガー
* ---------------------------------- */

/* --- 3本線を囲ってる正方形を囲ってる正方形 --- */
.burger {
	position: absolute;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	width: var(--header-height);
	height: var(--header-height);
	right: 0;
	top: 0;
	z-index: 100001;
	background: var(--main-gd);
	border-radius: 0 0 0 16px;

}

/* --- 3本線を囲ってる正方形(widthが3本線の長さになる) --- */

.burger-wrap {
	width: 25px;
	height: 25px;
	position: relative;
	margin: auto;
}

.burger {
	span {
		display: inline-block;
		transition: all 0.4s;
		height: 2px;
		width: 25px;
		background-color: #fff;
		position: absolute;

		&:nth-of-type(1) {
			top: 3px;
		}

		&:nth-of-type(2) {
			top: 11px;
		}

		&:nth-of-type(3) {
			bottom: 3px;
		}
	}

	&.active span {
		&:nth-of-type(1) {
			-webkit-transform: translateY(20px) rotate(315deg);
			transform: translateY(20px) rotate(315deg);
			top: -9px;
		}

		&:nth-of-type(2) {
			opacity: 0;
		}

		&:nth-of-type(3) {
			-webkit-transform: translateY(-20px) rotate(-315deg);
			transform: translateY(-20px) rotate(-315deg);
			bottom: -8px;
		}
	}
}

/* =========================================
* トップページ
* ======================================== */

/* メインビジュアル
* ---------------------------------- */
.mv-slider {
	width: 100%;

	.mv-slide {
		height: 100%;
		aspect-ratio: 195 / 272;

		img,
		video {
			width: 100%;
			height: 100%;
			display: block;
			object-fit: cover;
		}
	}
}

.top-contents {
	background-color: #FEFFE8;
}

/* スライド
* ---------------------------------- */
.top-slider {
	margin-top: -15%;

	.slide-item {
		margin: 0 2.7vw 8px;
		border-radius: var(--txt18-16);
		box-shadow: 0 4px 4px 0 rgba(169, 208, 219, 0.50);
		overflow: hidden;
		aspect-ratio: 2 / 1;
	}
}

.prev-icon,
.next-icon {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 1;
	cursor: pointer;
	width: max(7vw, 36px);
}

.prev-icon {
	left: 8%;
}

.next-icon {
	right: 8%;
}

/* 重要なお知らせ
* ---------------------------------- */
.serious-info {
	border-radius: var(--m32-16) var(--m32-16) 0 0;
	overflow: hidden;
	border-bottom: 1px solid var(--main-color);

	.info-title {
		background: var(--main-gd);
		color: #FFF;
		font-weight: 700;
		padding: var(--m16-8);
		text-align: center;
	}
}

.info-contents {
	display: flex;
	flex-direction: column;
	gap: var(--m16-8);
	background-color: #fff;
	padding: var(--m32-16);

	.info-date-txt {
		margin-right: auto;
		font-weight: 700;
	}

	.info-sentence {
		font-size: var(--txt14-12);
		line-height: 160%;
	}
}

/* お知らせ
* ---------------------------------- */
.top-info {
	background-color: #fff;
}
/* 重要なお知らせがなく、スクロールバナー→お知らせと続く場合のみ上部余白をつける */
.top-slider + .top-info {
  margin-top: 8px;
}

.info-tag-wrap {
	text-align: left;
	margin-bottom: var(--m16-8);

	.info-tag {
		margin: 0 var(--m16-8) var(--m16-8) 0;
	}
}

.info-tag {
	display: inline-block;
	font-size: var(--txt14-12);
	font-weight: 600;
	padding: 0 12px;
	border-radius: 50px;

	&:last-child {
		margin: 0;
	}

	&.all-tag {
		color: var(--main-color);
		border: solid var(--main-color) 1px;
	}

	&.news-tag {
		color: #5DBC3D;
		border: solid #5DBC3D 1px;
	}

	&.message-tag {
		color: #4A987C;
		border: solid #4A987C 1px;
	}

	&.test-tag {
		color: #A459A8;
		border: solid #A459A8 1px;
	}

	&.job-tag {
		color: #CF4FA8;
		border: solid #CF4FA8 1px;
	}

	&.event-tag {
		color: #2D87BB;
		border: solid #2D87BB 1px;
	}

	&.campus-tag {
		color: #EA9151;
		border: solid #EA9151 1px;
	}
}

.news-wrap {
	.info-contents {
		padding: 0;
		border-bottom: 1px solid #000;

		a {
			padding: var(--m24-16) 0;
			display: flex;
			flex-direction: column;
			gap: var(--m16-8);

			.info-contents-top {
				display: flex;
				gap: var(--m24-16);

				.info-date-txt {
					margin-right: 0;
				}
			}
		}

		&:first-child {
			border-top: 1px solid #000;
		}
	}
}

.news-btn {
	color: var(--main-color);
	border-radius: 50px;
	border: 1px solid var(--main-color);
	font-size: var(--txt14-12);
	font-weight: 700;
	padding: var(--m16-8) var(--m56-32) var(--m16-8) var(--m24-16);
	background-color: #fff;
	transition: var(--hov-move);
	display: inline-block;
	margin-top: var(--m24-16);

	&:hover {
		color: #fff;
		background: var(--main-gd);

		.icon-kunoji::after {
			border-right: #fff 2px solid;
			border-top: #fff 2px solid;
		}
	}
}

/* オープンキャンパス
* ---------------------------------- */
.top-oc {
	background: var(--circle-gd);
	color: #fff;
	border-radius: var(--m104-80);
	margin-top: var(--m104-80);

	h2.top-midashi {
		filter: drop-shadow(0 0 10px #F46061);
		color: #fff;
		background: #fff;
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		&::before {
			color: #fff;
			background: #fff;
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	.top-oc-img {
		aspect-ratio: 21 / 13;
		border-radius: var(--m24-16);
		margin: var(--m24-16) auto;
		display: block;
		width: 100%;
		max-width: 800px;
	}

}


.oc-schedule-wrap {
	display: grid;
	width: 100%;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px 2%;

	.oc-schedule-col {
		background-color: #fff;
		border-radius: var(--m80-40);
		filter: drop-shadow(0 0 8px #bcbcbc49);
		font-weight: 700;
		color: #000;
		padding: 8px var(--m24-16);

		a {
			display: flex;
			align-items: center;
			position: relative;

			.oc-year {
				font-size: var(--txt18-16);
				letter-spacing: 0.32px;
				line-height: 120%;
			}

			.oc-date {
				font-size: var(--txt24-20);
				line-height: 100%;
				/* 26px */
				letter-spacing: 0.4px;

				.oc-week {
					font-size: .6em;
					background: #000;
					color: #fff;
					vertical-align: middle;
					border-radius: 16px;
					aspect-ratio: 1 / 1;
					display: inline-block;
					width: 1.4em;
					height: 1.4em;
					text-align: center;
					line-height: 100%;
					padding: .2em;
				}
			}

			.icon-kunoji-wrap {
				position: absolute;
				right: 1em;
			}
		}

	}
}

.all-days-btn {
	background: var(--main-gd);
	font-size: var(--txt14-12);
	font-weight: 700;
	border: 2px solid #fff;
	color: #fff; /* 20260311追加 */
	padding: 4px var(--m80-40) 4px var(--m40-24);
	border-radius: 50px;
	margin: var(--m40-24) auto 0 auto;
	display: inline-block;

	.icon-kunoji::after {
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
	}
}

/* コース
* ---------------------------------- */


.top-course-wrap {
	display: flex;
	gap: 32px;
	flex-direction: column;

	.top-course-col {
		padding: 32px;
		border-radius: 48px;
		color: #fff;
		max-width: 400px;
		margin: auto;

		&.kaikeishi-col {
			background: var(--kaikeishi-gd);
		}
		&.jimu-col {
			background: var(--jimu-gd);
		}
		&.keiei-col {
			background: var(--keiei-gd);
		}
		&.it-col {
			background: var(--it-gd);
		}
		&.komuin-col {
			background: var(--komuin-gd);
		}
		&.open-col {
			background: var(--open-gd);
		}
		&.hotelbridal-col {
			background: var(--hotelbridal-gd);
		}
		&.hotel-col {
			background: var(--hotel-gd);
		}
		&.bridal-col {
			background: var(--bridal-gd);
		}
		&.kaigo-col {
			background: var(--kaigo-gd);
		}
		&.international-nobs-col { /* 簿記情報医療校の留学生は医療のカラー */
			background: var(--jimu-gd);
		}
		&.international-nitb-col { /* トラベル校の留学生はホテルのカラー */
			background: var(--hotel-gd);
		}

		a {

			display: flex;
			flex-direction: column;
			gap: var(--m24-16);

			.top-course-img {
				border-radius: var(--m80-40);
				aspect-ratio: 34 / 25;
				object-fit: cover;
			}

			.top-course-txt {
				font-weight: 800;
				display: flex;
				flex-direction: column;
				gap: var(--m16-8);

				.top-course-copy {
					font-size: var(--txt18-16);
				}

				hgroup {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: var(--m16-8);

					.icon-circle-kunoji-wrap {
						background-color: #fff;
						border-radius: 80px;
						width: 2.3em;
						min-width: 2.3em;
						height: 2.3em;
						display: grid;
						place-items: center;
						position: relative;

						.icon-circle-kunoji {
							transform: rotate(45deg) translate(-50%);
							position: absolute;
							top: 44%;
							left: 40%;
							width: .9em;
							height: .9em;

							.kaikeishi-col & {
								border-top: var(--kaikeishi-color) 2px solid;
								border-right: var(--kaikeishi-color) 2px solid;
							}
							.jimu-col & {
								border-top: var(--jimu-color) 2px solid;
								border-right: var(--jimu-color) 2px solid;
							}
							.keiei-col & {
								border-top: var(--keiei-color) 2px solid;
								border-right: var(--keiei-color) 2px solid;
							}
							.it-col & {
								border-top: var(--it-color) 2px solid;
								border-right: var(--it-color) 2px solid;
							}
							.komuin-col & {
								border-top: var(--komuin-color) 2px solid;
								border-right: var(--komuin-color) 2px solid;
							}
							.open-col & {
								border-top: var(--open-color) 2px solid;
								border-right: var(--open-color) 2px solid;
							}
							.hotelbridal-col & {
								border-top: var(--hotelbridal-color) 2px solid;
								border-right: var(--hotelbridal-color) 2px solid;
							}
							.hotel-col & {
								border-top: var(--hotel-color) 2px solid;
								border-right: var(--hotel-color) 2px solid;
							}
							.bridal-col & {
								border-top: var(--bridal-color) 2px solid;
								border-right: var(--bridal-color) 2px solid;
							}
							.kaigo-col & {
								border-top: var(--kaigo-color) 2px solid;
								border-right: var(--kaigo-color) 2px solid;
							}
							.international-nobs-col & { /* 簿記情報医療校の留学生は医療のカラー */
								border-top: var(--jimu-color) 2px solid;
								border-right: var(--jimu-color) 2px solid;
							}
							.international-nitb-col & { /* トラベル校の留学生はホテルのカラー */
								border-top: var(--hotel-color) 2px solid;
								border-right: var(--hotel-color) 2px solid;
							}

						}
					}
				}
			}
		}
	}
}

/* 大原が選ばれる理由
* ---------------------------------- */
.top-reason {
	background: var(--sub-gd);
	border-radius: var(--m104-80);

	h3 {
		margin-bottom: 8px;
	}

	.top-reason-wrap {
		display: flex;
		flex-direction: column;
		gap: 24px;

		.top-reason-col {

			.top-reason-img {
				margin-bottom: var(--m16-8);
				position: relative;

				.top-reason-number {
					position: absolute;
					background: var(--main-gd);
					color: #fff;
					font-weight: 700;
					bottom: 0;
					left: 0;
					width: 72px;
					height: 72px;
					border-radius: 80px;
					text-align: center;
					font-size: var(--m56-32);

					span {
						font-size: .5em;
					}
				}
			}

			&:nth-child(odd) {
				.top-reason-img img {
					border-radius: 16px 96px 16px 32px;
				}
			}

			&:nth-child(even) {
				.top-reason-img img {
					border-radius: 96px 16px 16px 32px;
				}
			}
		}
	}
}

/* アクセス
* ---------------------------------- */
.top-access {
	font-size: var(--txt14-12);
	font-weight: 400;
	line-height: 140%;

	.top-map-wrap {
		display: flex;
		flex-direction: column;
		gap: var(--m40-24);

		.top-map {
			border-radius: var(--m24-16);
			aspect-ratio: 21 / 13;
			overflow: hidden;

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

	.top-map-wrap+div {
		margin-top: var(--m40-24);
	}

	.top-map-tel ul {
		margin-top: var(--m24-16);
		display: flex;
		gap: var(--txt40-32);
	}
}

/* インスタグラム
* ---------------------------------- */
.top-ig-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--m24-16);

	.top-ig-col a {
		aspect-ratio: 4/5;
	}
}

.top-InstaSec_iframeCoverLink { /* top.cssより */
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	z-index: 1;
}

/* =========================================
* オープンキャンパス
* ======================================== */

/* メインビジュアル
* ---------------------------------- */
.oc-mv-wrap {
	background: var(--main-gd);
	height: 320px;
	display: grid;
	place-items: center;
	overflow: hidden;
	position: relative;

	.oc-mv01,
	.oc-mv02,
	.oc-mv03,
	.oc-mv04,
	.oc-mv-circle01,
	.oc-mv-circle02,
	.oc-mv-circle03,
	.oc-mv-circle04 {
		position: absolute;
		border-radius: 100%;
	}

	.oc-mv01 {
		top: -50px;
		left: -42px;
		width: 178px;
		height: 178px;
	}

	.oc-mv02 {
		left: 150px;
		top: -31px;
		width: 145px;
		height: 145px;
	}

	.oc-mv03 {
		right: 132px;
		bottom: -76px;
		width: 178px;
		height: 178px;
	}

	.oc-mv04 {
		right: -27px;
		bottom: -23px;
		width: 150px;
		height: 150px;
	}

	.oc-mv-circle01 {
		background: linear-gradient(90deg, #FF9951 0%, #FEAE63 56.25%, #FFDB8C 100%);
		width: 32px;
		height: 32px;
		right: 49px;
		top: 21px;
	}

	.oc-mv-circle02 {
		background: conic-gradient(from 180deg at 50% 50%, #FFE9A9 0deg, #F8FFDF 114.23076510429382deg, #FFF0D2 193.84616374969482deg, #FFE8E5 287.30769395828247deg, #FFE9A9 360deg);
		width: 78px;
		height: 78px;
		right: -38px;
		top: 42px;
	}

	.oc-mv-circle03 {
		background: conic-gradient(from 180deg at 50% 50%, #FFE9A9 0deg, #F8FFDF 114.23076510429382deg, #FFF0D2 193.84616374969482deg, #FFE8E5 287.30769395828247deg, #FFE9A9 360deg);
		width: 92px;
		height: 92px;
		left: -46px;
		bottom: 85px;
	}

	.oc-mv-circle04 {
		background: linear-gradient(90deg, #FF9951 0%, #FEAE63 56.25%, #FFDB8C 100%);
		width: 40px;
		height: 40px;
		left: 46px;
		bottom: 70px;
	}
}

/* オープンキャンパス
* ---------------------------------- */
#oc-date-area {
	.oc-schedule-wrap {

		.oc-schedule-col {
			background: var(--main-gd);
			color: #fff;
			padding: var(--m24-16) var(--m40-24);
			border-radius: var(--m56-32);

			a {

				.oc-date {
					font-size: var(--txt32-24);

					.oc-week {
						background: #fff;
						color: var(--main-color);
					}
				}

				.icon-kunoji-wrap {
					.icon-kunoji::after {
						border-top: 2px solid #fff;
						border-right: 2px solid #fff;
					}
				}
			}

		}
	}

	.all-days-btn {
		background: #fff;
		border: 2px solid var(--main-color);
		color: var(--main-color);
		display: none;
		width: 180px;

		.icon-kunoji::after {
			border-top: 2px solid var(--main-color);
			border-right: 2px solid var(--main-color);
			transform: translateY(-50%) rotate(135deg);
		}

		&.is-active .icon-kunoji::after {
			transform: translateY(-10%) rotate(-45deg);
		}
	}
}


/* 体験メニュー
* ---------------------------------- */
#oc-menu {
	border-radius: 96px;
	padding: var(--m96-52) 0;
	background: var(--sub-gd);

	.oc-more-btn {
		display: none;
	}
}

#oc-menu .oc-link-wrap {
	display: none;

	&.select {
		display: flex;

		.oc-link-col:nth-child(n+4) {
			display: none;
		}

		&.is-open .oc-link-col:nth-child(n+4) {
			display: block;
			/* もしflex等を使っているなら適宜変更してください */
		}
	}
}

.oc-link-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m24-16);

	.oc-link-col {
		a {
			background-color: #fff;
			border-radius: var(--m40-24);
			padding: 14px;
			position: relative;
			display: flex;
			align-items: center;
			gap: var(--m16-8);

			.oc-link-img {
				position: relative;
				width: 80px;
				min-width: 80px;

				.oc-date-wrap {
					background-color: #fff;
					border-radius: var(--m16-8);
					position: absolute;
					padding: .2em .5em;
					top: -10px;
					left: -9px;

					.oc-date span {
						color: #fff;
						border-radius: 100%;
						width: 16px;
						height: 16px;
						display: inline-block;
						line-height: 16px;
						text-align: center;
						font-size: .9em;
						font-size: 700;
					}
				}

				img {
					height: 100%;
					width: 100%;
					border-radius: var(--m16-8);
					object-fit: cover;
				}

			}

			.oc-link-txt {
				h3 {
					font-size: var(--txt18-16);
				}

				.oc-link-detail {
					padding-right: 36px;
					line-height: 140%;
				}
			}

			.oc-link-circle {
				position: absolute;
				width: 24px;
				height: 24px;
				border-radius: 80px;
				bottom: 14px;
				right: 14px;
				display: grid;
				place-items: center;

				.icon-kunoji::after {
					border-right: 1px solid #fff;
					border-top: 1px solid #fff;
					top: 23%;
					right: -7px;
					transform: translate(-50%) rotate(45deg);
				}
			}
		}
	}

	&#kaikeishi,
	&#kaikeishi_zei {
		.oc-link-col a {
			border: 1px solid var(--kaikeishi-color);
			color: var(--kaikeishi-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--kaikeishi-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--kaikeishi-color);
				}
			}

			.oc-link-circle {
				background-color: var(--kaikeishi-color);
			}
		}
	}

	&#jimu {
		.oc-link-col a {
			border: 1px solid var(--jimu-color);
			color: var(--jimu-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--jimu-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--jimu-color);
				}
			}

			.oc-link-circle {
				background-color: var(--jimu-color);
			}
		}
	}

	&#keiei {
		.oc-link-col a {
			border: 1px solid var(--keiei-color);
			color: var(--keiei-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--keiei-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--keiei-color);
				}
			}

			.oc-link-circle {
				background-color: var(--keiei-color);
			}
		}
	}

	&#it {
		.oc-link-col a {
			border: 1px solid var(--it-color);
			color: var(--it-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--it-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--it-color);
				}
			}

			.oc-link-circle {
				background-color: var(--it-color);
			}
		}
	}

	&#komuin {
		.oc-link-col a {
			border: 1px solid var(--komuin-color);
			color: var(--komuin-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--komuin-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--komuin-color);
				}
			}

			.oc-link-circle {
				background-color: var(--komuin-color);
			}
		}
	}

	&#open {
		.oc-link-col a {
			border: 1px solid var(--open-color);
			color: var(--open-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--open-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--open-color);
				}
			}

			.oc-link-circle {
				background-color: var(--open-color);
			}
		}
	}

	&#hotelbridal {
		.oc-link-col a {
			border: 1px solid var(--hotelbridal-color);
			color: var(--hotelbridal-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--hotelbridal-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--hotelbridal-color);
				}
			}

			.oc-link-circle {
				background-color: var(--hotelbridal-color);
			}
		}
	}

	&#hotel {
		.oc-link-col a {
			border: 1px solid var(--hotel-color);
			color: var(--hotel-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--hotel-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--hotel-color);
				}
			}

			.oc-link-circle {
				background-color: var(--hotel-color);
			}
		}
	}

	&#bridal {
		.oc-link-col a {
			border: 1px solid var(--bridal-color);
			color: var(--bridal-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--bridal-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--bridal-color);
				}
			}

			.oc-link-circle {
				background-color: var(--bridal-color);
			}
		}
	}

	&#kaigo {
		.oc-link-col a {
			border: 1px solid var(--kaigo-color);
			color: var(--kaigo-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--kaigo-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--kaigo-color);
				}
			}

			.oc-link-circle {
				background-color: var(--kaigo-color);
			}
		}
	}

	&#international-nobs { /* 簿記情報医療校の留学生は医療のカラー */
		.oc-link-col a {
			border: 1px solid var(--jimu-color);
			color: var(--jimu-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--jimu-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--jimu-color);
				}
			}

			.oc-link-circle {
				background-color: var(--jimu-color);
			}
		}
	}

	&#international-nitb { /* トラベル校の留学生はホテルのカラー */
		.oc-link-col a {
			border: 1px solid var(--hotel-color);
			color: var(--hotel-color);
			box-shadow: 0 0 8px 0 #DA9F9F;

			.oc-date-wrap {
				.oc-date span {
					background-color: var(--hotel-color);
				}
			}

			.oc-link-txt {
				h3 {
					color: var(--hotel-color);
				}
			}

			.oc-link-circle {
				background-color: var(--hotel-color);
			}
		}
	}

}

/* スケジュール
* ---------------------------------- */

.oc-timeschedule-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m56-32);

	.oc-detail-col {
		summary {
			position: relative;

			&::after {
				content: "";
				border-top: 2px solid var(--main-color);
				border-right: 2px solid var(--main-color);
				width: .8em;
				height: .8em;
				transform: translateY(-50%) rotate(135deg);
				right: 8px;
				top: 45%;
				position: absolute;
				transition: var(--hov-move);
				box-sizing: content-box; /* base.cssへのカウンターとして指定 */
			}

			hgroup {
				display: flex;
				gap: var(--m16-8);
				align-items: center;
				position: relative;
				padding-left: .5em;

				&::before {
					content: "●";
					color: var(--main-color);
					font-size: .5em;
				}

				.time-txt {
					font-family: var(--en-txt);
					font-size: var(--txt20-18);
					font-weight: 700;
					border-radius: var(--m24-16);
					padding: .1em .5em;
					border: solid 1px #000;
				}
			}
		}

		&[open] summary::after {
			transform: translateY(-50%) rotate(-45deg);
			top: 55%;
		}
	}

	.oc-detail {
		padding: var(--m24-16) 0;

		.oc-wcolumn {
			display: flex;
			gap: var(--m32-16);

			p,
			img {
				flex: 1;
			}

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

		.note {
			margin-top: var(--m32-16);
		}

		.oc-timetable-list {
			display: flex;
			flex-direction: column;
			gap: var(--m24-16);
			margin-top: var(--m40-24);

			.oc-timetable-col {
				background-color: var(--sub-color);
				border-radius: var(--m40-24);
				padding: 14px;
				display: flex;
				gap: var(--m16-8);


				.oc-time-img {
					position: relative;
					width: 80px;
					min-width: 80px;

					.oc-time-wrap {
						background-color: var(--sub-color);
						border-radius: var(--m16-8);
						position: absolute;
						padding: .2em .5em;
						top: -10px;
						left: -9px;
						color: var(--main-color);
						font-weight: 700;
					}

					img {
						height: 100%;
						width: 100%;
						border-radius: var(--m16-8);
						object-fit: cover;
					}

				}

				.oc-time-txt {
					h3 {
						font-size: var(--txt18-16);
						font-family: "Noto Sans JP", sans-serif;
						color: var(--main-color);
						margin-bottom: 4px;
					}

					.oc-time-detail {
						line-height: 140%;

						.inline-link {
							text-decoration: none;
							font-weight: 700;
							margin-left: auto;
						}
					}
				}
			}
		}
	}
}

/* 交通費サポート制度
* ---------------------------------- */
.support-table {
	width: 100%;
	margin: var(--m40-24) auto;
	border-top: var(--main-color) 1px solid;

	th {
		padding: 1em;
		font-size: var(--txt18-16);
		font-weight: 700;
		width: 20%;
		min-width: 93px;
		background-color: var(--light-color);
		text-align: center;
		vertical-align: middle;
	}

	td {
		padding: 1em;
	}

	tr {
		border-bottom: var(--main-color) 1px solid;
	}
}

#support h4 {
	font-size: var(--txt18-16);
	font-weight: 700;
	margin-bottom: var(--m16-8);
}

/* Q&A
* ---------------------------------- */
#oc-faq {
	background-color: var(--sub-color);
}

.faq-wrap {
	display: flex;
	flex-direction: column;

	.faq-col {
		border-bottom: 1px solid var(--main-color);
		padding: var(--m32-16);

		summary {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icon-plus {
				position: relative;
				width: var(--m40-24);
				min-width: var(--m40-24);
				height: var(--m40-24);

				&::before,
				&::after {
					background-color: var(--main-color);
					position: absolute;
					height: 1.5px;
					width: 80%;
					transform: translate(-50%);
					top: 50%;
					left: 50%;
					content: "";
					transition: var(--hov-move);
				}

				&::after {
					transform: translate(-50%) rotate(90deg);
				}
			}
		}

		&[open] {
			summary {
				.icon-plus {
					&::after {
						transform: translate(-50%) rotate(180deg);
						opacity: 0;
					}
				}
			}
		}

		.faq-icon {
			font-size: var(--m40-24);
			color: var(--main-color);
			padding: .3em .2em;
			font-family: var(--fluffy-txt);
			font-weight: 800;
		}

		h3 {
			font-size: 12px;
			font-family: "Noto Sans JP", sans-serif;
			font-weight: 700;
			display: flex;
			align-items: center;
			gap: var(--m16-8);
			padding-right: var(--m16-8);
		}

		.answer-wrap {
			display: flex;
			gap: var(--m16-8);
			padding-top: var(--m24-16);
		}
	}
}

/* 参加者の声
* ---------------------------------- */
.oc-voice-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m80-40);

	.oc-voice-col {
		display: flex;

		.oc-voice-img {
			min-width: 74px;
		}

		.voice-fukidashi {
			flex: 1;
			position: relative;
			background: var(--sub-color);
			text-align: center;
			color: var(--orange-color);
			font-weight: 700;
			border-radius: 40px;
			display: grid;
			place-items: center;
			padding: .5em;
			margin-left: var(--m24-16);
			line-height: 150%;

			&::before {
				content: "";
				width: 0;
				height: 0;
				border-style: solid;
				border-top: 8px solid transparent;
				border-bottom: 8px solid transparent;
				border-right: 24px solid var(--sub-color);
				border-left: 0;
				position: absolute;
				transform: translateY(-50%);
				top: 50%;
				left: -20px;
			}
		}

		&:nth-child(even) {
			flex-direction: row-reverse;

			.voice-fukidashi {
				color: var(--main-color);
				margin-right: var(--m24-16);
				margin-left: auto;

				&::before {
					width: 0;
					height: 0;
					border-style: solid;
					border-top: 8px solid transparent;
					border-bottom: 8px solid transparent;
					border-left: 24px solid var(--sub-color);
					border-right: 0;
					position: absolute;
					transform: translateY(-50%);
					top: 50%;
					right: -20px;
					left: auto;
				}
			}
		}
	}
}


/* =========================================
* 各学科説明
* ======================================== */
.course-mv-wrap {

	img {
		object-fit: cover;
		height: 100%;
		width: 100%;
		aspect-ratio: 195 / 176;
		object-position: bottom;
	}

	.slick-prev,
	.slick-next {
		top: 35%;
		transform: translateY(-50%);

		&::before {
			content: "";
			width: .7em;
			height: .7em;
			display: inline-block;
			opacity: 1;
		}

		#kaikeishi &::before,
		#kaikeishi_zei &::before {
			border-top: var(--kaikeishi-color) 2px solid;
			border-right: var(--kaikeishi-color) 2px solid;
		}

		#jimu &::before {
			border-top: var(--jimu-color) 2px solid;
			border-right: var(--jimu-color) 2px solid;
		}

		#keiei &::before {
			border-top: var(--keiei-color) 2px solid;
			border-right: var(--keiei-color) 2px solid;
		}

		#it &::before {
			border-top: var(--it-color) 2px solid;
			border-right: var(--it-color) 2px solid;
		}

		#komuin &::before {
			border-top: var(--komuin-color) 2px solid;
			border-right: var(--komuin-color) 2px solid;
		}

		#open &::before {
			border-top: var(--open-color) 2px solid;
			border-right: var(--open-color) 2px solid;
		}

		#hotelbridal &::before {
			border-top: var(--hotelbridal-color) 2px solid;
			border-right: var(--hotelbridal-color) 2px solid;
		}

		#hotel &::before {
			border-top: var(--hotel-color) 2px solid;
			border-right: var(--hotel-color) 2px solid;
		}

		#bridal &::before {
			border-top: var(--bridal-color) 2px solid;
			border-right: var(--bridal-color) 2px solid;
		}

		#kaigo &::before {
			border-top: var(--kaigo-color) 2px solid;
			border-right: var(--kaigo-color) 2px solid;
		}

		#international-nobs &::before { /* 簿記情報医療校の留学生は医療のカラー */
			border-top: var(--jimu-color) 2px solid;
			border-right: var(--jimu-color) 2px solid;
		}

		#international-nitb &::before { /* トラベル校の留学生はホテルのカラー */
			border-top: var(--hotel-color) 2px solid;
			border-right: var(--hotel-color) 2px solid;
		}

	}

	.slick-prev {
		left: 5vw;
		z-index: 1;

		&::before {
			transform: rotate(-135deg);
		}
	}

	.slick-next {
		right: 5vw;

		&::before {
			transform: rotate(45deg);
		}
	}
}

.sticky-wrap section {
  /* アンカーリンクずれ対策。jsで取得したsticky要素の高さをスクロール時の余白に設定。念のため初期値50pxを指定 */
  scroll-margin-top: var(--sticky-height, 50px); 
}
.anchor-wrap {
	position: sticky;
	top: var(--header-height);
	padding: var(--m24-16) 0;
	margin: auto;
	text-align: left;
	z-index: 5;
	background-color: #fff;

	ul {
		width: 92%;
		max-width: 900px;
		margin: auto;
		padding-right: 24px;

		.anchor-link {
			display: inline-block;
			margin: 0 16px 8px 0;

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

			a {
				display: block;
				padding: 4px 1.5em 2px 0;
				border-bottom: 1px dashed var(--main-color);

				.icon-kunoji::after {
					transform: translateY(-50%) rotate(135deg);
					right: -1.5em;
					width: .5em;
					border-right: 1px var(--main-color) solid;
					border-top: 1px var(--main-color) solid;
					height: .5em;
				}

				#kaikeishi &,
				#kaikeishi_zei & {
					border-bottom: 1px dashed var(--kaikeishi-color);

					.icon-kunoji::after {
						border-top: 1px var(--kaikeishi-color) solid;
						border-right: 1px var(--kaikeishi-color) solid;
					}
				}

				#jimu & {
					border-bottom: 1px dashed var(--jimu-color);

					.icon-kunoji::after {
						border-top: 1px var(--jimu-color) solid;
						border-right: 1px var(--jimu-color) solid;
					}
				}

				#keiei & {
					border-bottom: 1px dashed var(--keiei-color);

					.icon-kunoji::after {
						border-top: 1px var(--keiei-color) solid;
						border-right: 1px var(--keiei-color) solid;
					}
				}

				#it & {
					border-bottom: 1px dashed var(--it-color);

					.icon-kunoji::after {
						border-top: 1px var(--it-color) solid;
						border-right: 1px var(--it-color) solid;
					}
				}

				#komuin & {
					border-bottom: 1px dashed var(--komuin-color);

					.icon-kunoji::after {
						border-top: 1px var(--komuin-color) solid;
						border-right: 1px var(--komuin-color) solid;
					}
				}

				#open & {
					border-bottom: 1px dashed var(--open-color);

					.icon-kunoji::after {
						border-top: 1px var(--open-color) solid;
						border-right: 1px var(--open-color) solid;
					}
				}

				#hotelbridal & {
					border-bottom: 1px dashed var(--hotelbridal-color);

					.icon-kunoji::after {
						border-top: 1px var(--hotelbridal-color) solid;
						border-right: 1px var(--hotelbridal-color) solid;
					}
				}

				#hotel & {
					border-bottom: 1px dashed var(--hotel-color);

					.icon-kunoji::after {
						border-top: 1px var(--hotel-color) solid;
						border-right: 1px var(--hotel-color) solid;
					}
				}

				#bridal & {
					border-bottom: 1px dashed var(--bridal-color);

					.icon-kunoji::after {
						border-top: 1px var(--bridal-color) solid;
						border-right: 1px var(--bridal-color) solid;
					}
				}

				#kaigo & {
					border-bottom: 1px dashed var(--kaigo-color);

					.icon-kunoji::after {
						border-top: 1px var(--kaigo-color) solid;
						border-right: 1px var(--kaigo-color) solid;
					}
				}

				#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
					border-bottom: 1px dashed var(--jimu-color);

					.icon-kunoji::after {
						border-top: 1px var(--jimu-color) solid;
						border-right: 1px var(--jimu-color) solid;
					}
				}

				#international-nitb & { /* トラベル校の留学生はホテルのカラー */
					border-bottom: 1px dashed var(--hotel-color);

					.icon-kunoji::after {
						border-top: 1px var(--hotel-color) solid;
						border-right: 1px var(--hotel-color) solid;
					}
				}

			}

		}
	}

	#kaikeishi &,
	#kaikeishi_zei & {
		background-color: var(--kaikeishi-bg);
	}

	#jimu & {
		background-color: var(--jimu-bg);
	}

	#keiei & {
		background-color: var(--keiei-bg);
	}

	#it & {
		background-color: var(--it-bg);
	}

	#komuin & {
		background-color: var(--komuin-bg);
	}

	#open & {
		background-color: var(--open-bg);
	}

	#hotelbridal & {
		background-color: var(--hotelbridal-bg);
	}

	#hotel & {
		background-color: var(--hotel-bg);
	}

	#bridal & {
		background-color: var(--bridal-bg);
	}

	#kaigo & {
		background-color: var(--kaigo-bg);
	}

	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		background-color: var(--jimu-bg);
	}

	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		background-color: var(--hotel-bg);
	}

}
.anchor-list-wrapper {
  display: grid;
  grid-template-rows: 1fr; /* 展開状態 */
  transition: grid-template-rows 0.3s ease-out;

	ul {
		overflow: hidden; /* 収納状態で内容を隠す */
		margin: 0 auto; /* 上下marginがあるとアニメーションしないので注意 */
	}
}

.anchor-toggle { /* 開閉ボタン */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--main-gd);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  width: 40px;
  padding: 8px 0;
  font-size: 14px;
  text-align: center;
  position: absolute;
  left: auto;
  right: 8px;
  top: 12px;
}
.icon-inner {
  position: relative;
  width: 14px;
  height: 14px;
  margin-bottom: 4px;

	&::before,
	&::after {
		content: "";
		position: absolute;
		background-color: #FFF;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: transform 0.3s, opacity 0.3s;
	}
	&::before {
		width: 100%;
		height: 2px;
	}
	&::after {
		width: 2px;
		height: 100%;
	}
}
.anchor-wrap.closed {
	.anchor-list-wrapper {
		grid-template-rows: 0fr; /* 収納状態 */
	}
	.icon-inner::after {
		transform: translate(-50%, -50%) rotate(0deg);
		opacity: 1;
	}
	.toggle-text::before {
		content: "＋";
	}
}
@media (max-width: 768px) {
	.anchor-wrap.closed {
		background-color: transparent !important;
	}
}
.anchor-wrap:not(.closed) .icon-inner::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.anchor-wrap:not(.closed) .toggle-text::before {
	content: "ー";
}
.toggle-label { /* MENU文字部分 */
  font-size: 8px;
  font-weight: bold;
  color: #FFF;
  line-height: 1;
  letter-spacing: 0.05em;
}


.course-contents-wrap {
	border-radius: 0 88px 0 0;
	margin-top: -137px;
	position: relative;
	z-index: 1;

	#kaikeishi &,
	#kaikeishi_zei & {
		background-color: var(--kaikeishi-bg);
	}

	#jimu & {
		background-color: var(--jimu-bg);
	}

	#keiei & {
		background-color: var(--keiei-bg);
	}

	#it & {
		background-color: var(--it-bg);
	}

	#komuin & {
		background-color: var(--komuin-bg);
	}

	#open & {
		background-color: var(--open-bg);
	}

	#hotelbridal & {
		background-color: var(--hotelbridal-bg);
	}

	#hotel & {
		background-color: var(--hotel-bg);
	}

	#bridal & {
		background-color: var(--bridal-bg);
	}

	#kaigo & {
		background-color: var(--kaigo-bg);
	}

	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		background-color: var(--jimu-bg);
	}

	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		background-color: var(--hotel-bg);
	}

	.course-top-area {
		/* padding: 16px 0; */
    padding: 1px 0 16px 0;
	}
}

.aim-wrap {
	border-radius: var(--m40-24);
	overflow: hidden;

	h3 {
		font-size: var(--txt18-16);
		color: #fff;
		padding: .5em 1em;
		text-align: center;
		font-family: "Noto Sans JP", sans-serif;

		#kaikeishi &,
		#kaikeishi_zei & {
			background: var(--kaikeishi-gd);
		}

		#jimu & {
			background: var(--jimu-gd);
		}

		#keiei & {
			background: var(--keiei-gd);
		}

		#it & {
			background: var(--it-gd);
		}

		#komuin & {
			background: var(--komuin-gd);
		}

		#open & {
			background: var(--open-gd);
		}

		#hotelbridal & {
			background: var(--hotelbridal-gd);
		}

		#hotel & {
			background: var(--hotel-gd);
		}

		#bridal & {
			background: var(--bridal-gd);
		}

		#kaigo & {
			background: var(--kaigo-gd);
		}

		#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
			background: var(--jimu-gd);
		}

		#international-nitb & { /* トラベル校の留学生はホテルのカラー */
			background: var(--hotel-gd);
		}
	}

	.aim-list {
		background-color: #fff;
		padding: var(--m56-32);
		display: flex;
		flex-direction: column;
		gap: 8px;

		details {
			h4 {
				cursor: pointer;
				font-size: var(--txt18-16);
				padding: .5em 1.4em .5em 1em;
				position: relative;
				font-weight: 700;

				&::before {
					content: "●";
					font-size: .5em;
					position: absolute;
					top: 1em;
					left: 0;
				}

				&::after {
					content: "";
					position: absolute;
					transform: translateY(-50%)rotate(135deg);
					top: 50%;
					right: 0;
					width: .5em;
					height: .5em;
				}

				#kaikeishi &::before,
				#kaikeishi_zei &::before {
					color: var(--kaikeishi-color);
				}

				#kaikeishi &::after,
				#kaikeishi_zei &::after {
					border-top: 1px solid var(--kaikeishi-color);
					border-right: 1px solid var(--kaikeishi-color);
				}

				#komuin &::before {
					color: var(--komuin-color);
				}

				#komuin &::after {
					border-top: 1px solid var(--komuin-color);
					border-right: 1px solid var(--komuin-color);
				}

				#jimu &::before {
					color: var(--jimu-color);
				}

				#jimu &::after {
					border-top: 1px solid var(--jimu-color);
					border-right: 1px solid var(--jimu-color);
				}

				#it &::before {
					color: var(--it-color);
				}

				#it &::after {
					border-top: 1px solid var(--it-color);
					border-right: 1px solid var(--it-color);
				}

				#keiei &::before {
					color: var(--keiei-color);
				}

				#keiei &::after {
					border-top: 1px solid var(--keiei-color);
					border-right: 1px solid var(--keiei-color);
				}

				#open &::before {
					color: var(--open-color);
				}

				#open &::after {
					border-top: 1px solid var(--open-color);
					border-right: 1px solid var(--open-color);
				}

				#hotelbridal &::before {
					color: var(--hotelbridal-color);
				}

				#hotelbridal &::after {
					border-top: 1px solid var(--hotelbridal-color);
					border-right: 1px solid var(--hotelbridal-color);
				}

				#hotel &::before {
					color: var(--hotel-color);
				}

				#hotel &::after {
					border-top: 1px solid var(--hotel-color);
					border-right: 1px solid var(--hotel-color);
				}

				#bridal &::before {
					color: var(--bridal-color);
				}

				#bridal &::after {
					border-top: 1px solid var(--bridal-color);
					border-right: 1px solid var(--bridal-color);
				}

				#kaigo &::before {
					color: var(--kaigo-color);
				}

				#kaigo &::after {
					border-top: 1px solid var(--kaigo-color);
					border-right: 1px solid var(--kaigo-color);
				}

				#international-nobs &::before { /* 簿記情報医療校の留学生は医療のカラー */
					color: var(--jimu-color);
				}

				#international-nobs &::after {
					border-top: 1px solid var(--jimu-color);
					border-right: 1px solid var(--jimu-color);
				}

				#international-nitb &::before { /* トラベル校の留学生はホテルのカラー */
					color: var(--hotel-color);
				}

				#international-nitb &::after {
					border-top: 1px solid var(--hotel-color);
					border-right: 1px solid var(--hotel-color);
				}

			}

			&[open] {
				h4::after {
					transform: translateY(-50%)rotate(-45deg);
				}
			}
		}
	}
}

.tab-wrap {
	display: flex;
	flex-wrap: wrap;
	margin-top: var(--m40-24);

	.tab-label {
		color: #fff;
		white-space: nowrap;
		text-align: center;
		padding: .5em;
		order: -1;
		position: relative;
		z-index: 1;
		cursor: pointer;
		border-radius: var(--m40-24) var(--m40-24) 0 0;
		flex: 1;
		font-size: var(--txt18-16);
		font-weight: 700;
		opacity: .6;

		#kaikeishi &,
		#kaikeishi_zei & {
			background: var(--kaikeishi-color);
			opacity: .6;
		}

		#jimu & {
			background: var(--jimu-color);
			opacity: .6;
		}

		#it & {
			background: var(--it-color);
			opacity: .6;
		}

		#keiei & {
			background: var(--keiei-color);
			opacity: .6;
		}

		#komuin & {
			background: var(--komuin-color);
			opacity: .6;
		}

		#open & {
			background: var(--open-color);
			opacity: .6;
		}

		#hotelbridal & {
			background: var(--hotelbridal-color);
			opacity: 0.6;
		}

		#hotel & {
			background: var(--hotel-color);
			opacity: 0.6;
		}

		#bridal & {
			background: var(--bridal-color);
			opacity: 0.6;
		}

		#kaigo & {
			background: var(--kaigo-color);
			opacity: 0.6;
		}

		#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
			background: var(--jimu-color);
			opacity: .6;
		}

		#international-nitb & { /* トラベル校の留学生はホテルのカラー */
			background: var(--hotel-color);
			opacity: 0.6;
		}

	}

	.subjects-details {
		width: 100%;
		height: 0;
		overflow: hidden;
		opacity: 0;

		.subjects-wrap {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1px;

			.subject-col {
				padding: var(--m16-8);
				background-color: #fff;

				a {
					display: block;
				}

				p {
					display: flex;
					justify-content: space-between;
					align-items: center;
					line-height: 140%;

				}

				.popular-mark {
					color: var(--main-color);
					background-color: #FFE693;
					border-radius: 16px;
					padding: .1em .5em;
					font-size: var(--txt18-16);
					font-weight: 700;
					display: inline-block;
					vertical-align: middle;
					position: relative;
					margin-bottom: .5em;

					&::after {
						content: "";
						position: absolute;
						top: 90%;
						left: 50%;
						margin-left: -0.3em;
						border: 0.45em solid transparent;
						border-top: .8em solid #FFE693;
						transform: rotate(-10deg);
					}
				}
			}
		}
	}
}

.tab-switch {
	display: none;

	&:checked+.tab-label {
		#kaikeishi &,
		#kaikeishi_zei & {
			background: var(--kaikeishi-color);
			opacity: 1;
		}

		#jimu & {
			background: var(--jimu-color);
			opacity: 1;
		}

		#it & {
			background: var(--it-color);
			opacity: 1;
		}

		#komuin & {
			background: var(--komuin-color);
			opacity: 1;
		}

		#keiei & {
			background: var(--keiei-color);
			opacity: 1;
		}

		#open & {
			background: var(--open-color);
			opacity: 1;
		}

		#hotelbridal & {
			background: var(--hotelbridal-color);
			opacity: 1;
		}

		#hotel & {
			background: var(--hotel-color);
			opacity: 1;
		}

		#bridal & {
			background: var(--bridal-color);
			opacity: 1;
		}

		#kaigo & {
			background: var(--kaigo-color);
			opacity: 1;
		}

		#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
			background: var(--jimu-color);
			opacity: 1;
		}

		#international-nitb & { /* トラベル校の留学生はホテルのカラー */
			background: var(--hotel-color);
			opacity: 1;
		}

		&+.subjects-details {
			height: auto;
			overflow: auto;
			padding: var(--m40-24);
			opacity: 1;
			transition: .5s opacity;

			#kaikeishi &,
			#kaikeishi_zei & {
				background-color: var(--kaikeishi-color);
			}

			#jimu & {
				background-color: var(--jimu-color);
			}

			#it & {
				background-color: var(--it-color);
			}

			#keiei & {
				background-color: var(--keiei-color);
			}

			#komuin & {
				background-color: var(--komuin-color);
			}

			#open & {
				background-color: var(--open-color);
			}

			#hotelbridal & {
				background-color: var(--hotelbridal-color);
			}

			#hotel & {
				background-color: var(--hotel-color);
			}

			#bridal & {
				background-color: var(--bridal-color);
			}

			#kaigo & {
				background-color: var(--kaigo-color);
			}

			#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
				background-color: var(--jimu-color);
			}

			#international-nitb & { /* トラベル校の留学生はホテルのカラー */
				background-color: var(--hotel-color);
			}

		}
	}
}

/* --- ポップアップの中身 --- */
.subject-popup {
	background-color: #fff;
	max-width: 92%;
	position: relative;
	margin: auto;
	padding: var(--m80-40) var(--m24-16) var(--m24-16) var(--m24-16);

	h3 {
		font-size: var(--txt18-16);
		font-family: "Noto Sans JP", sans-serif;
		margin-bottom: var(--m24-16);
	}

	.lity-custom-close {
		position: absolute;
		top: var(--m24-16);
		right: var(--m24-16);
		border: none;
		background: transparent;
		outline: none;
		cursor: pointer;
		font-size: 3em;
		padding: 0;
		line-height: .8em;
	}

	#kaikeishi &,
	#kaikeishi_zei & {
		border: 1px solid var(--kaikeishi-color);

		h3,
		.lity-custom-close {
			color: var(--kaikeishi-color);
		}
	}

	#jimu & {
		border: 1px solid var(--jimu-color);

		h3,
		.lity-custom-close {
			color: var(--jimu-color);
		}
	}

	#keiei & {
		border: 1px solid var(--keiei-color);

		h3,
		.lity-custom-close {
			color: var(--keiei-color);
		}
	}

	#it & {
		border: 1px solid var(--it-color);

		h3,
		.lity-custom-close {
			color: var(--it-color);
		}
	}

	#komuin & {
		border: 1px solid var(--komuin-color);

		h3,
		.lity-custom-close {
			color: var(--komuin-color);
		}
	}

	#open & {
		border: 1px solid var(--open-color);

		h3,
		.lity-custom-close {
			color: var(--open-color);
		}
	}

	#hotelbridal & {
		border: 1px solid var(--hotelbridal-color);

		h3,
		.lity-custom-close {
			color: var(--hotelbridal-color);
		}
	}

	#hotel & {
		border: 1px solid var(--hotel-color);

		h3,
		.lity-custom-close {
			color: var(--hotel-color);
		}
	}

	#bridal & {
		border: 1px solid var(--bridal-color);

		h3,
		.lity-custom-close {
			color: var(--bridal-color);
		}
	}

	#kaigo & {
		border: 1px solid var(--kaigo-color);

		h3,
		.lity-custom-close {
			color: var(--kaigo-color);
		}
	}

	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		border: 1px solid var(--jimu-color);

		h3,
		.lity-custom-close {
			color: var(--jimu-color);
		}
	}

	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		border: 1px solid var(--hotel-color);

		h3,
		.lity-custom-close {
			color: var(--hotel-color);
		}
	}

}

.lity-close {
	display: none !important;
}

/* 3つの特徴
	* ---------------------------------- */
#features {
	color: #fff;
	border-radius: 96px;
	padding: var(--m96-52) 0;

	.container {
		width: 100%;
	}

	h2.course-midashi {
		color: #fff;
		margin-left: 4vw;
		margin-bottom: var(--m56-32);
	}

	#kaikeishi &,
	#kaikeishi_zei & {
		background: var(--kaikeishi-gd);
	}

	#jimu & {
		background: var(--jimu-gd);
	}

	#it & {
		background: var(--it-gd);
	}

	#keiei & {
		background: var(--keiei-gd);
	}

	#komuin & {
		background: var(--komuin-gd);
	}

	#open & {
		background: var(--open-gd);
	}

	#hotelbridal & {
		background: var(--hotelbridal-gd);
	}

	#hotel & {
		background: var(--hotel-gd);
	}

	#bridal & {
		background: var(--bridal-gd);
	}

	#kaigo & {
		background: var(--kaigo-gd);
	}

	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		background: var(--jimu-gd);
	}

	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		background: var(--hotel-gd);
	}

	.slide-list-wrap {
		overflow-x: scroll;
		width: 100%;
		-ms-overflow-style: none;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.features-wrap {
			display: flex;
			gap: 16px;
			justify-content: center;
			width: calc(968px + 8vw);

			.features-col {
				background-color: #fff;
				border-radius: var(--m24-16);
				padding: 16px;
				color: #000;
				min-width: 312px;
				width: 312px;

				.features-img {
					aspect-ratio: 35 / 26;
					height: 208px;
					border-radius: var(--m24-16);
					object-fit: cover;
				}

				.features-midashi {
					display: flex;
					align-items: center;

					p {
						font-size: 74px;
						font-family: var(--en-txt);
						font-style: italic;
						font-weight: 700;
						display: grid;
						place-items: center;
						width: 56px;
						height: 72px;

						#kaikeishi &,
						#kaikeishi_zei & {
							background: var(--kaikeishi-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#jimu & {
							background: var(--jimu-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#keiei & {
							background: var(--keiei-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#it & {
							background: var(--it-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#komuin & {
							background: var(--komuin-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#open & {
							background: var(--open-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#hotelbridal & {
							background: var(--hotelbridal-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#hotel & {
							background: var(--hotel-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#bridal & {
							background: var(--bridal-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#kaigo & {
							background: var(--kaigo-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
							background: var(--jimu-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

						#international-nitb & { /* トラベル校の留学生はホテルのカラー */
							background: var(--hotel-gd);
							background-clip: text;
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}

					}

					h3 {
						font-size: 18px;
						font-weight: 800;
						line-height: 150%;

						#kaikeishi &,
						#kaikeishi_zei & {
							color: var(--kaikeishi-color);
						}

						#jimu & {
							color: var(--jimu-color);
						}

						#keiei & {
							color: var(--keiei-color);
						}

						#it & {
							color: var(--it-color);
						}

						#komuin & {
							color: var(--komuin-color);
						}

						#open & {
							color: var(--open-color);
						}

						#hotelbridal & {
							color: var(--hotelbridal-color);
						}

						#hotel & {
							color: var(--hotel-color);
						}

						#bridal & {
							color: var(--bridal-color);
						}

						#kaigo & {
							color: var(--kaigo-color);
						}

						#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
							color: var(--jimu-color);
						}

						#international-nitb & { /* トラベル校の留学生はホテルのカラー */
							color: var(--hotel-color);
						}

					}
				}
			}

		}
	}

}

/* 学生・卒業生の声
	* ---------------------------------- */
#student-voice,
#alumni-voice,
#result-alumni-voice {
	.voice-wrap {
		display: flex;
		gap: 16px;
		overflow-x: scroll;
		width: 100%;
		-ms-overflow-style: none;
		scrollbar-width: none;

		&::-webkit-scrollbar {
			display: none;
		}

		.voice-col {
			min-width: 312px;
			width: 312px;
			will-change: transform;

			.voice-img img {
				/* aspect-ratio: 21 / 13; */
				aspect-ratio: 7 / 6;
				border-radius: var(--m24-16);
				object-fit: cover;
			}

			.voice-txt {
				h3 {
					font-family: "Noto Sans JP", sans-serif;
					line-height: 130%;
					letter-spacing: 0.4px;
					margin: 8px 0 var(--m24-16) 0;

					#kaikeishi &,
					#kaikeishi_zei & {
						color: var(--kaikeishi-color);
					}

					#jimu & {
						color: var(--jimu-color);
					}

					#keiei & {
						color: var(--keiei-color);
					}

					#it & {
						color: var(--it-color);
					}

					#komuin & {
						color: var(--komuin-color);
					}

					#open & {
						color: var(--open-color);
					}

					#hotelbridal & {
						color: var(--hotelbridal-color);
					}

					#hotel & {
						color: var(--hotel-color);
					}

					#bridal & {
						color: var(--bridal-color);
					}

					#kaigo & {
						color: var(--kaigo-color);
					}

					#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
						color: var(--jimu-color);
					}

					#international-nitb & { /* トラベル校の留学生はホテルのカラー */
						color: var(--hotel-color);
					}

				}

				.job-offer {
					display: flex;
					align-items: center;
					gap: .2em;

					span {
						color: #fff;
						border-radius: 32px;
						padding: 0 .5em;
						display: grid;
						place-items: center;
						white-space: nowrap;

						#kaikeishi &,
						#kaikeishi_zei & {
							background-color: var(--kaikeishi-color);
						}

						#jimu & {
							background-color: var(--jimu-color);
						}

						#keiei & {
							background-color: var(--keiei-color);
						}

						#it & {
							background-color: var(--it-color);
						}

						#komuin & {
							background-color: var(--komuin-color);
						}

						#open & {
							background-color: var(--open-color);
						}

						#hotelbridal & {
							background-color: var(--hotelbridal-color);
						}

						#hotel & {
							background-color: var(--hotel-color);
						}

						#bridal & {
							background-color: var(--bridal-color);
						}

						#kaigo & {
							background-color: var(--kaigo-color);
						}

						#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
							background-color: var(--jimu-color);
						}

						#international-nitb & { /* トラベル校の留学生はホテルのカラー */
							background-color: var(--hotel-color);
						}

					}

					p {
						font-size: var(--txt18-16);
						font-weight: 700;
					}
				}

				.voice-name {
					font-size: var(--txt24-20);
					font-weight: 700;
					margin: var(--m16-8) 0 var(--m24-16) 0;

					.name-title {
						font-size: .8em;
						margin-right: .5em;
					}

					.alma-mater {
						font-size: var(--txt14-12);
						font-weight: 400;
					}
				}
			}
		}
	}
}


/* 主な就職先
	* ---------------------------------- */
.employment-wrap {
	background-color: #fff;
	border-radius: var(--m40-24);

	h3 {
		font-size: var(--txt18-16);
		color: #fff;
		font-family: "Noto Sans JP", sans-serif;
		padding: var(--m16-8) var(--m56-32);
		border-radius: var(--m40-24);
		background: var(--main-gd);

		#kaikeishi &,
		#kaikeishi_zei & {
			background: var(--kaikeishi-gd);
		}

		#jimu & {
			background: var(--jimu-gd);
		}

		#keiei & {
			background: var(--keiei-gd);
		}

		#it & {
			background: var(--it-gd);
		}

		#komuin & {
			background: var(--komuin-gd);
		}

		#open & {
			background: var(--open-gd);
		}

		#hotelbridal & {
			background: var(--hotelbridal-gd);
		}

		#hotel & {
			background: var(--hotel-gd);
		}

		#bridal & {
			background: var(--bridal-gd);
		}

		#kaigo & {
			background: var(--kaigo-gd);
		}

		#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
			background: var(--jimu-gd);
		}

		#international-nitb & { /* トラベル校の留学生はホテルのカラー */
			background: var(--hotel-gd);
		}

	}

	.employment-txt {
		padding: var(--m32-16);

		p {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;

			&.is-open {
				-webkit-line-clamp: unset;
			}
		}
	}
}

.more-btn,
.oc-more-btn {
	display: grid;
	place-items: center;
	padding: .5em 1.5em .5em .5em;
	cursor: pointer;
	color: #fff;
	font-weight: 500;
	border-radius: 40px;
	max-width: 90px;
	position: relative;
	margin: var(--m40-24) auto 0 auto;
	background: var(--main-gd);

	&::after {
		position: absolute;
		content: "";
		transform: translateY(-50%)rotate(135deg);
		width: .5em;
		height: .5em;
		top: 50%;
		right: 1em;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		box-sizing: content-box; /* base.cssへのカウンターとして指定 */
	}

	&.is-open::after {
		transform: translateY(-30%) rotate(-45deg);
	}

	#kaikeishi &,
	#kaikeishi_zei & {
		background: var(--kaikeishi-gd);
	}

	#jimu & {
		background: var(--jimu-gd);
	}

	#keiei & {
		background: var(--keiei-gd);
	}

	#it & {
		background: var(--it-gd);
	}

	#komuin & {
		background: var(--komuin-gd);
	}

	#open & {
		background: var(--open-gd);
	}

	#hotelbridal & {
		background: var(--hotelbridal-gd);
	}

	#hotel & {
		background: var(--hotel-gd);
	}

	#bridal & {
		background: var(--bridal-gd);
	}

	#kaigo & {
		background: var(--kaigo-gd);
	}

	#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
		background: var(--jimu-gd);
	}

	#international-nitb & { /* トラベル校の留学生はホテルのカラー */
		background: var(--hotel-gd);
	}
}

/* コース一覧
* ---------------------------------- */
#course-list {
	background: var(--sub-gd);
	border-radius: 96px;
	padding: var(--m96-52) 0;

	.container {
		width: 100%;
	}

	.course-switch-wrap,
	.course-detail-col:not(.curriculum-col) {
		width: 92%;
		margin: auto;
	}

	h2 {
		margin: 0 auto var(--m24-16) auto;
		width: 92%;
	}

}

.course-switch-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 16px;
	margin: var(--m40-24) auto;

	.course-switch {
		a {
			display: grid;
			place-items: center;
			background-color: #fff;
			line-height: 140%;
			border-radius: var(--m80-40);
			font-weight: 500;
			padding: .4em 1em;
			text-align: center;
			height: 100%;

			#oc-menu & {
				min-height: 3.8em;
			}

			#kaikeishi &,
			#kaikeishi_zei & {
				border: solid var(--kaikeishi-color) 1px;
				color: var(--kaikeishi-color);
			}

			#jimu & {
				border: solid var(--jimu-color) 1px;
				color: var(--jimu-color);
			}

			#keiei & {
				border: solid var(--keiei-color) 1px;
				color: var(--keiei-color);
			}

			#it & {
				border: solid var(--it-color) 1px;
				color: var(--it-color);
			}

			#komuin & {
				border: solid var(--komuin-color) 1px;
				color: var(--komuin-color);
			}

			#open & {
				border: solid var(--open-color) 1px;
				color: var(--open-color);
			}

			#hotelbridal & {
				border: solid var(--hotelbridal-color) 1px;
				color: var(--hotelbridal-color);
			}

			#hotel & {
				border: solid var(--hotel-color) 1px;
				color: var(--hotel-color);
			}

			#bridal & {
				border: solid var(--bridal-color) 1px;
				color: var(--bridal-color);
			}

			#kaigo & {
				border: solid var(--kaigo-color) 1px;
				color: var(--kaigo-color);
			}

			#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
				border: solid var(--jimu-color) 1px;
				color: var(--jimu-color);
			}

			#international-nitb & { /* トラベル校の留学生はホテルのカラー */
				border: solid var(--hotel-color) 1px;
				color: var(--hotel-color);
			}
			
		}

		&.select a {
			#kaikeishi &,
			#kaikeishi_zei & {
				background-color: var(--kaikeishi-color);
				color: #fff;
			}

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

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

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

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

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

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

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

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

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

			#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
				background-color: var(--jimu-color);
				color: #fff;
			}

			#international-nitb & { /* トラベル校の留学生はホテルのカラー */
				background-color: var(--hotel-color);
				color: #fff;
			}
			
		}
	}
}

.course-detail-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m40-24);

	.course-contents {
		display: none;
		flex-direction: column;
		gap: var(--m40-24);

		&.select {
			display: flex;
		}

		h3,
		h4 {
			margin-bottom: var(--m16-8);

			#kaikeishi &,
			#kaikeishi_zei & {
				color: var(--kaikeishi-color);
			}

			#jimu & {
				color: var(--jimu-color);
			}

			#keiei & {
				color: var(--keiei-color);
			}

			#it & {
				color: var(--it-color);
			}

			#komuin & {
				color: var(--komuin-color);
			}

			#open & {
				color: var(--open-color);
			}

			#hotelbridal & {
				color: var(--hotelbridal-color);
			}

			#hotel & {
				color: var(--hotel-color);
			}

			#bridal & {
				color: var(--bridal-color);
			}

			#kaigo & {
				color: var(--kaigo-color);
			}

			#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
				color: var(--jimu-color);
			}

			#international-nitb & { /* トラベル校の留学生はホテルのカラー */
				color: var(--hotel-color);
			}
		}

		h4 {
			font-family: var(--fluffy-txt);
			font-size: var(--txt20-18);
		}

		.curriculum-col {
			h4 {
				width: 92%;
				margin: 0 auto var(--m16-8) auto;
			}

			.curriculum-img-wrap {
				width: 100%;
				overflow-x: scroll;
				-ms-overflow-style: none;
				scrollbar-width: none;

				&::-webkit-scrollbar {
					display: none;
				}

				.curriculum-img {
					width: calc(960px + 8vw);

					img {
						max-width: 960px;
						margin: auto;
						display: block;
					}
				}
			}
		}
	}
}

/* 追加 本文部分表示用
	* ---------------------------------- */
#entrycontent {
	background-color: #FFF;
}
.Table-fees + .Table-fees {
	margin-bottom: 40px;
}
#entrycontent .course-title03 { /* post.cssのオーバーライド */
	margin-top: 40px;
}


/* =========================================
* 合格・就職実績
* ======================================== */
.tier02 {
	h2 {
		margin-bottom: var(--m24-16);
	}

	.employment-wrap {
		background-color: var(--sub-color);
	}
}

.tier02-mv-wrap {
	background-size: cover;
	aspect-ratio: 195 / 148;
	border-radius: 0 0 var(--m80-40) var(--m80-40);
	padding: var(--m80-40) 4vw;
	display: flex;
	align-items: end;

	#result & {
		background-image: url(../images/result/result_mv_img.jpg);
	}

	#campuslife & {
		background-image: url(../images/campuslife/campuslife_mv_img.jpg);
	}

	h1 {
		color: #fff;
		font-size: var(--txt18-16);
		font-weight: 700;
		letter-spacing: 0.32px;
		text-shadow: 0 0 8px #A4A3A3;

		&::before {
			content: attr(data-en);
			display: block;
			font-family: var(--en-txt);
			line-height: 120%;
			font-weight: 700;
			font-size: var(--txt56-36);
		}
	}
}

.result-result-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: var(--m56-32) auto;

	.result-result-col {
		background-color: var(--sub-color);
		display: grid;
		place-items: center;
		border-radius: var(--m40-24);
		padding: var(--m56-32) 1em;
		text-align: center;

		h3 {
			font-family: "Noto Sans JP", sans-serif;
		}

		.number-txt-wrap {
			.number-txt {
				font-size: 74px;
				line-height: 100%;
				font-family: var(--en-txt);
				font-weight: 700;
				background: var(--main-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				.unit-txt {
					font-size: .5em;
				}

				.note-txt {
					margin-top: -16px;
				}
			}
		}
	}
}

.strengths-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m40-24);
	margin: var(--m40-24) auto;

	.strengths-col {
		h3 {
			font-size: var(--txt18-16);
			font-family: "Noto Sans JP", sans-serif;
			position: relative;
			display: flex;
			justify-content: space-between;
			margin-left: 1.5em;

			&::before {
				content: "●";
				color: var(--main-color);
				position: absolute;
				transform: translateY(-50%);
				top: 50%;
				left: -1.5em;
				font-size: .4em;
			}

			&::after {
				content: "";
				position: absolute;
				transform: translateY(-50%) rotate(135deg);
				top: 50%;
				right: 1em;
				border-top: 2px solid var(--main-color);
				border-right: 2px solid var(--main-color);
				width: .5em;
				height: .5em;
			}
		}

		&[open] {
			h3::after {
				transform: translateY(-50%)rotate(-45deg);

			}
		}
	}

	.strengths-detail-wrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: var(--m16-8);
		padding: var(--m24-16) 0;

		.strengths-detail-col {
			background-color: var(--sub-color);
			border-radius: var(--m40-24);
			padding: var(--m24-16);
			text-align: center;
			display: grid;
			place-items: center;

			h4 {
				font-weight: 700;
				line-height: 150%;
				margin-bottom: var(--m16-8);
			}

			.number-txt {
				font-size: var(--txt56-36);
				line-height: 100%;
				font-family: var(--en-txt);
				font-weight: 700;
				background: var(--main-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				.unit-txt {
					font-size: .5em;
				}
			}
		}
	}
}

#result-reason {
	background: var(--sub-gd);
	border-radius: 96px;
	padding: var(--m96-52) 0;

	.container {
		width: 100%;
	}

	h2 {
		width: 92%;
		margin: 0 auto var(--m24-16) auto;
		padding-left: 4%; /*inline-blockにしており左右margin:autoが効かないため*/

		&+p {
			width: 92%;
			margin: auto;
		}
	}

	.slide-list-wrap {
		overflow-x: scroll;
		width: 100%;
		-ms-overflow-style: none;
		scrollbar-width: none;
		margin-top: var(--m56-32);

		&::-webkit-scrollbar {
			display: none;
		}

		.result-reason-wrap {
			display: flex;
			gap: var(--m24-16);
			justify-content: center;
			width: calc(2608px + 8vw);

			.result-reason-col {
				width: 312px;
				height: 381px;
				background-color: #fff;
				border-radius: var(--m24-16);
				padding: 24px;
				display: flex;
				flex-direction: column;
				gap: var(--m16-8);

				.result-midashi {
					display: flex;
					gap: var(--m16-8);
					align-items: center;
					color: var(--main-color);

					h3 {
						line-height: 150%;
					}

				}
			}

			.slide-result-img {
				width: 100%;
				flex: 1;
				object-fit: cover;
				display: block;
				overflow: hidden;
				border-radius: var(--m24-16);
			}
		}

	}
}

.carrier-program-top {
	display: flex;
	flex-direction: column-reverse;
	gap: var(--m16-8);

	img {
		border-radius: var(--m24-16);
		aspect-ratio: 21 / 13;
		object-fit: cover;
	}
}

.carrier-program-wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: var(--m80-40);

	.carrier-program-col {
		.carrier-program-box {
			display: flex;
			gap: var(--m16-8);

			img {
				width: 120px;
			}
		}

		h3 {
			border-left: var(--main-color) 8px solid;
			padding-left: var(--m16-8);
			line-height: 150%;
			color: var(--main-color);
			margin-bottom: var(--m24-16);
		}

		dl {
			display: flex;
			flex-direction: column;
			gap: var(--m16-8);

			.carrier-program-table {
				display: flex;
				gap: var(--m16-8);
				align-items: center;

				dt {
					background: var(--main-gd);
					color: #fff;
					font-size: var(--txt18-16);
					border-radius: var(--m16-8);
					display: grid;
					place-items: center;
					text-align: center;
					min-width: 82px;
					padding: .5em 0;
					font-weight: 700;
				}
			}
		}
	}
}

#result-alumni-voice {
	background-color: var(--sub-color);
}

.course-switch-wrap {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 8px 16px;
	/*margin: var(--m40-24) auto;*/
	margin: 0 auto var(--m40-24) auto;

	.course-switch {
		a {
			display: grid;
			place-items: center;
			background-color: #fff;
			line-height: 140%;
			border-radius: var(--m80-40);
			font-weight: 500;
			padding: .4em 1em;
		}

		&[data-target="kaikeishi"] a,
		&[data-target="kaikeishi_zei"] a {
			border: solid var(--kaikeishi-color) 1px;
			color: var(--kaikeishi-color);
		}

		&[data-target="kaikeishi"].select a,
		&[data-target="kaikeishi_zei"].select a {
			background-color: var(--kaikeishi-color);
			color: #fff;
		}

		&[data-target="jimu"] a {
			border: solid var(--jimu-color) 1px;
			color: var(--jimu-color);
		}

		&[data-target="jimu"].select a {
			background-color: var(--jimu-color);
			color: #fff;
		}

		&[data-target="keiei"] a {
			border: solid var(--keiei-color) 1px;
			color: var(--keiei-color);
		}

		&[data-target="keiei"].select a {
			background-color: var(--keiei-color);
			color: #fff;
		}

		&[data-target="it"] a {
			border: solid var(--it-color) 1px;
			color: var(--it-color);
		}

		&[data-target="it"].select a {
			background-color: var(--it-color);
			color: #fff;
		}

		&[data-target="komuin"] a {
			border: solid var(--komuin-color) 1px;
			color: var(--komuin-color);
		}

		&[data-target="komuin"].select a {
			background-color: var(--komuin-color);
			color: #fff;
		}

		&[data-target="open"] a {
			border: solid var(--open-color) 1px;
			color: var(--open-color);
		}

		&[data-target="open"].select a {
			background-color: var(--open-color);
			color: #fff;
		}

		&[data-target="hotelbridal"] a {
			border: solid var(--hotelbridal-color) 1px;
			color: var(--hotelbridal-color);
		}

		&[data-target="hotelbridal"].select a {
			background-color: var(--hotelbridal-color);
			color: #fff;
		}

		&[data-target="hotel"] a {
			border: solid var(--hotel-color) 1px;
			color: var(--hotel-color);
		}

		&[data-target="hotel"].select a {
			background-color: var(--hotel-color);
			color: #fff;
		}

		&[data-target="bridal"] a {
			border: solid var(--bridal-color) 1px;
			color: var(--bridal-color);
		}

		&[data-target="bridal"].select a {
			background-color: var(--bridal-color);
			color: #fff;
		}

		&[data-target="kaigo"] a {
			border: solid var(--kaigo-color) 1px;
			color: var(--kaigo-color);
		}

		&[data-target="kaigo"].select a {
			background-color: var(--kaigo-color);
			color: #fff;
		}

		&[data-target="international-nobs"] a { /* 簿記情報医療校の留学生は医療のカラー */
			border: solid var(--jimu-color) 1px;
			color: var(--jimu-color);
		}

		&[data-target="international-nobs"].select a {
			background-color: var(--jimu-color);
			color: #fff;
		}

		&[data-target="international-nitb"] a { /* トラベル校の留学生はホテルのカラー */
			border: solid var(--hotel-color) 1px;
			color: var(--hotel-color);
		}

		&[data-target="international-nitb"].select a {
			background-color: var(--hotel-color);
			color: #fff;
		}

	}
}


.result-voice-contents {
	display: none;
	flex-direction: column;
	gap: var(--m40-24);

	&.select {
		display: flex;
	}

	h3,
	h4 {
		margin-bottom: var(--m16-8);

		#kaikeishi &,
		#kaikeishi_zei & {
			color: var(--kaikeishi-color);
		}

		#jimu & {
			color: var(--jimu-color);
		}

		#keiei & {
			color: var(--keiei-color);
		}

		#it & {
			color: var(--it-color);
		}

		#komuin & {
			color: var(--komuin-color);
		}

		#open & {
			color: var(--open-color);
		}

		#hotelbridal & {
			color: var(--hotelbridal-color);
		}

		#hotel & {
			color: var(--hotel-color);
		}

		#bridal & {
			color: var(--bridal-color);
		}

		#kaigo & {
			color: var(--kaigo-color);
		}

		#international-nobs & { /* 簿記情報医療校の留学生は医療のカラー */
			color: var(--jimu-color);
		}

		#international-nitb & { /* トラベル校の留学生はホテルのカラー */
			color: var(--hotel-color);
		}

	}

	h4 {
		font-family: var(--fluffy-txt);
		font-size: var(--txt20-18);
	}

}

/* =========================================
* キャンパスライフ
* ======================================== */

/* ページ内共通
* ---------------------------------- */

.honne-name {
	font-weight: 700;
	font-size: var(--txt24-20);

	span {
		font-size: .8em;
	}
}


/* 年間スケジュール
* ---------------------------------- */
.schedule-col {
	position: relative;

	&::before {
		width: 3px;
		height: 100%;
		background-color: var(--sub-color);
		position: absolute;
		left: 36px;
		top: 40px;
		content: "";
	}

	&:last-child::before {
		display: none;
	}

	dl {
		display: flex;
		gap: var(--m32-16);

		.month-wrap {
			background-color: var(--sub-color);
			display: grid;
			place-items: center;
			width: 72px;
			min-width: 72px;
			height: 72px;
			border-radius: 80px;
			position: relative;
			z-index: 1;

			p {
				line-height: 140%;
				font-size: var(--txt56-36);
				font-family: var(--en-txt);
				font-weight: 700;
				background: var(--main-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;

				span {
					font-size: .6em;
					vertical-align: middle;
					font-family: var(--fluffy-txt);
				}
			}
		}

		.schedule-detail {
			padding: var(--m24-16) 0;

			ul {
				font-size: var(--txt18-16);
				font-weight: 700;
        min-height: var(--m96-52);

				li {
					margin-bottom: var(--m16-8);
					position: relative;
					padding-left: 1em;

					&::before {
						position: absolute;
						content: "●";
						color: var(--main-color);
						font-size: 6px;
						left: 0;
						top: 0;
					}

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

/* 全体のコンテナ */
.marquee-wrap {
	overflow: hidden;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--m16-8);
	margin: var(--m80-40) auto;

	.marquee-contents {
		display: flex;
		width: max-content;

		.marquee-col {
			aspect-ratio: 10 / 7;
			width: 160px;
			flex-shrink: 0;
			padding-right: var(--m16-8);

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}
	}


	&:hover .marquee-contents {
		animation-play-state: paused;
	}
}




/* --- 左に流れるアニメーション --- */
.is-left {
	animation: marquee-left 15s linear infinite;
}

@keyframes marquee-left {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}

}

/* --- 右に流れるアニメーション --- */
.is-right {
	animation: marquee-right 15s linear infinite;
}

@keyframes marquee-right {
	0% {
		transform: translateX(-50%);
	}

	/* 半分の位置から開始 */
	100% {
		transform: translateX(0);
	}
}


/* 大原生のホンネ
* ---------------------------------- */
/* --- 全体・区切り線 --- */
#true-feelings {
	background-color: var(--light-color);

	.honne-wrap {
		width: 100%;

		.honne-col {
			padding: var(--m56-32) 0;

			.honne-arrow {
				width: 100%;
				height: 1px;
				background-color: var(--main-color);
				position: relative;

				&::before,
				&::after {
					content: "";
					width: 0;
					height: 0;
					border-style: solid;
					border-right: 22px solid transparent;
					border-left: 22px solid transparent;
					border-bottom: 0;
					position: absolute;
					left: 50%;
					margin-left: -22px;
				}

				&:before {
					border-top: 16px solid var(--main-color);
					top: 0;
				}

				&::after {
					border-top: 16px solid var(--light-color);
					top: -1.8px;
				}
			}

			&:first-child {
				margin-top: var(--m56-32);
			}

			&:nth-child(odd) {
				background-color: var(--sub-color);

				.honne-arrow::after {
					border-top: 16px solid var(--sub-color);
				}
			}

		}

	}
}

/* --- 名前・写真 --- */
.honne-detail {
	display: flex;
	justify-content: center;
	align-items: end;
	gap: var(--m40-24);
	margin-bottom: var(--m40-24);

	.honne-prof {
		display: flex;
		flex-direction: column;
		gap: var(--m16-8);
	}

	.honne-img {
		aspect-ratio: 4 / 5;
		object-fit: contain;
		width: 22%;
		min-width: 128px;
	}
}

/* --- 文章 --- */
.honne-txt-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;

	.honne-before-col,
	.honne-after-col {
		h3 {
			font-family: "Noto Sans JP", sans-serif;
			font-size: var(--txt18-16);
			background-color: #fff;
			text-align: center;
			padding: .4em;
			margin-bottom: var(--m16-8);
			position: relative;
			margin-top: 20px;

			&:before {
				left: 0;
				top: -20px;
				display: block;
				position: absolute;
				height: 100%;
				background-repeat: no-repeat;
				background-size: contain;
				content: "";
			}
		}

	}

	.honne-before-col h3:before {
		background-image: url('../images/campuslife/icon_before.svg');
		width: 45px;
		aspect-ratio: 45/19;
	}

	.honne-after-col h3:before {
		background-image: url('../images/campuslife/icon_after.svg');
		width: 38px;
		aspect-ratio: 2 / 1
	}

}

/* 大原生の1日
* ---------------------------------- */
.daily-schedule-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--m56-32);
	margin-top: var(--m56-32);

	.daily-schedule-col {
		background-color: var(--sub-color);
		border: 3px solid var(--sub-color);
		border-radius: 16px;
		display: flex;
		flex-direction: column;
		gap: 32px;

		.daily-schedule-top {
			display: flex;
			align-items: end;
			justify-content: center;
			padding: 32px 23px 0 23px;

			.daily-schedule-txt {
				display: flex;
				flex-direction: column;
				gap: var(--m16-8);

				h3 {
					font-size: var(--txt24-20);
					background: var(--main-gd);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					font-family: "Noto Sans JP", sans-serif;
					line-height: 130%;

				}
			}

			.daily-schedule-img {
				aspect-ratio: 112 / 205;
				min-width: 112px;
				object-fit: contain;
				width: 25%;
			}
		}

		.daily-schedule-table-wrap {
			padding: 8px 32px 32px 32px;
			background-color: #fff;
			border-radius: 0 0 13px 13px;
			display: flex;
			flex-direction: column;
			gap: 8px;

			.daily-schedule-table {
				display: flex;
				flex-direction: column;
				gap: var(--m16-8);

				.daily-schedule dl {
					display: flex;
					gap: var(--m16-8);
					align-items: flex-start;

					.time-col {
						display: grid;
						place-items: center;
						color: #fff;
						border-radius: var(--m24-16);
						background-color: var(--main-color);
						font-size: var(--txt18-16);
						padding: .2em;
						font-weight: 700;
						min-width: 4.2em;
					}

					.daily-schedule-contents {

						h4 {
							font-size: var(--txt24-20);
							font-weight: 700;
							line-height: 130%;
						}
					}
				}
			}

			.daily-schedule-imgs {
				display: flex;
				gap: var(--m16-8);
				flex: 1;
				max-width: 100%;

				img {
					border-radius: var(--m24-16);
					object-fit: cover;
					width: calc(50% - 8px);
					min-height: 136px;
				}
			}
		}
	}
}

/* 大原生アンケート
* ---------------------------------- */
#questionnaire {
	border-radius: 96px;
	padding: var(--m96-52) 0;
	background: var(--sub-gd);
}

.questionnaire-wrap {
	display: flex;
	flex-direction: column;
	gap: 40px;
	margin-top: var(--m80-40);

	.questionnaire-col {
		h3.questionnaire-midashi {
			font-family: "Noto Sans JP", sans-serif;
			margin-bottom: var(--m24-16);
			line-height: 130%;

			span {
				min-width: 80px;
				font-size: var(--txt56-36);
				background: var(--main-gd);
				background-clip: text;
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-family: var(--en-txt);
				line-height: 130%;
				font-weight: 700;
				margin-right: var(--m16-8);
				vertical-align: middle;
			}
		}

		.data-wrap {
			display: flex;
			flex-direction: column;
			gap: var(--m24-16);

			/* --- Q3,Q5 --- */
			.percentage-wrap {
				display: flex;
				flex-wrap: wrap;

				li {
					display: flex;
					align-items: center;
					font-weight: 700;
					margin-right: 24px;
					padding: .5em 0;
					gap: .3em;

					h4 {
						font-size: 16px;
					}

					.percentage-txt {
						font-family: var(--en-txt);
						font-size: 18px;

						span {
							font-size: 18px;
							vertical-align: middle;
						}
					}

					&:first-child,
					&:nth-child(2) {
						margin-right: var(--m24-16);

						h4 {
							font-size: 24px;
						}

						.percentage-txt {
							font-size: 36px;
						}
					}
				}
			}

			/* --- Q6 --- */
			.ranking-wrap {
				display: flex;
				flex-direction: column;
				gap: 8px;

				li {
					display: flex;
					align-items: center;
					gap: var(--m16-8);

					span {
						display: grid;
						place-items: center;
						background: var(--main-gd);
						aspect-ratio: 1/1;
						color: #fff;
						font-family: var(--en-txt);
						font-size: 36px;
						font-weight: 700;
						min-width: 40px;
						height: 40px;
					}

					p {
						font-size: 20px;
						font-weight: 700;
						line-height: 130%;
					}

					&:nth-child(4),
					&:last-child {
						span {
							font-size: 18px;
							font-weight: 700;
							min-width: 24px;
							height: 24px;
						}

						p {
							font-size: 16px;
						}
					}
				}
			}

			/* --- Q9 --- */
			.arbeit-wrap {
				display: flex;
				gap: var(--m16-8);
				flex-wrap: wrap;

				li {
					padding: .3em .4em;
					font-size: var(--txt18-16);
					font-weight: 700;
					color: var(--main-color);
					background-color: #fff;
					border-radius: var(--m16-8);
					position: relative;

					&:last-child::after {
						content: 'etc...';
						padding-left: var(--m16-8);
						font-size: var(--txt14-12);
						color: #000;
						position: absolute;
					}
				}
			}

			/* --- Q10 --- */
			.volunteer-wrap {
				display: flex;
				gap: var(--m16-8);
				flex-wrap: wrap;

				li {
					padding-left: .8em;
					position: relative;

					&:before {
						content: "●";
						font-size: .5em;
						position: absolute;
						left: 0;
						color: var(--main-color);
					}

					&:last-child::after {
						content: 'etc...';
						padding-left: var(--m16-8);
						position: absolute;
					}
				}
			}
		}
	}
}

/* 先生×学生
* ---------------------------------- */
.one-one-wrap {
	margin: var(--m24-16) auto;
	display: flex;
	flex-direction: column;
	gap: var(--m80-40);

	.one-one-col {
		display: flex;
		flex-direction: column;
		gap: var(--m56-32);

		.one-one-img {
			position: relative;

			img {
				border-radius: var(--m24-16);
				aspect-ratio: 21 / 13;
				object-fit: cover;
			}

			.buddy-circle {
				position: absolute;
				left: 0;
				bottom: -8px;
				display: grid;
				place-items: center;
				width: 72px;
				height: 72px;
				border-radius: 80px;
				background: rgba(255, 255, 255, 0.8);
				text-align: center;
				z-index: 1;
				border: solid 1px var(--main-color);

				p {
					font-size: var(--txt40-32);
					font-weight: 700;
					background: var(--main-gd);
					background-clip: text;
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					line-height: 100%;


					span {
						font-size: .5em;
						display: block;
						margin-bottom: -10px;
					}
				}
			}
		}

		.one-one-txt-wrap {
			display: flex;
			flex-direction: column;
			gap: 40px;

			.one-one-txt {
				display: flex;
				gap: var(--m32-16);
				flex-direction: column;
				padding-left: var(--m24-16);
				border-left: 2px solid var(--main-color);

				.one-one-txt-col {
					h3 {
						font-size: var(--txt18-16);
						font-family: "Noto Sans JP", sans-serif;
						margin-bottom: 8px;
					}
				}
			}
		}
	}
}

/* =========================================
* その他既存ページ用 既存CSSの調整
* ======================================== */
/*
  既存のcssに追加・オーバーライドする
  （既存のcssは社会人向けサイトでも使われているため編集しない）
*/

/* post.css ------------------- */
.Wysiwyg {
	max-width: 100%;
}
.Wysiwyg p {
  font-weight: 500;
}
.SingleHeader {
	margin-bottom: 40px;
}
.SingleHeader_time {
  margin-top: 8px;
}
h2.CoursesCard_title {
	margin-bottom: 0;
}
.CoursesCard_listLink {
	font-size: var(--txt14-12);
  padding: 10px 35px 10px 6px;
}
.CoursesCard_textArea {
	padding: 20px 18px 30px;
}
#access { /* トップページACCESS */
	padding-top: var(--m56-32);
	margin-top: 0;
}
.CvPamphlet_img { /* 募集要項ページなど 資料請求バナー */
	height: 100%;
	object-fit: cover;
}

/* base.css ------------------- */
body {
	min-width: auto;
}
.l-container {
	max-width: 100%;
}

/* module.css ------------------- */
.container > .Title.-h2:first-child,
.container > div > .Title.-h2:first-child  { /* ページ内最初の見出し */
	margin-top: 40px;
}
.Wysiwyg > .ImageTextBox_Sec:first-child { /* 記事内最初の画像＋テキストブロック */
  padding-top: 0;
}
.l-content-medium {
	max-width:  100%;
}
.Images_Wrap.-col2 > .Images_Item {
	height: auto !important;
}
.PictureBtn_TextWrap { /* 入学案内ページ等のリンクボタン */
	height: 100%;
}
.Flow_Text { /* 入学案内ページ等のフローチャート見出し部分 */
	line-height: 1.5;
}
.Flow_Content .CircleList_Item { /* 入学案内ページ等のフローチャートテキスト部分 */
	max-width: 100%;
}
#requirement .IconBtn { /* 募集要項・学費ページ ページ最初のボタン */
	white-space: nowrap;
}
@media (min-width: 768px) {
	.Anchor_Item {
		width: calc(100% / 6);
	}
	.Flow_WrapText::after { /* 入学案内ページの入学までの流れ最終段「入学」部分 */
    top: -80px;
    height: 70px;
	}
}

/* top.css ------------------- */
@media (max-width: 767px) { /* AO入学ガイドページ */
	.top-SchoolSec_title {
		padding: 20px 24px 20px 10px;
		line-height: 1.2;
	}
}

/* scroll-hint.css ------------------- */
/* スクロールヒント表示のcss */
#requirement .Tab .scroll-hint-icon { /* 募集要項・学費ページ 入学方法別のタブ */
  top: calc(50% - 45px);
}


/* =========================================
* フッター
* ======================================== */

footer {
	padding: 32px 0 80px 0;
	background: linear-gradient(180deg, var(--main-color) 0%, #FFAE57 100%);
	border-radius: 80px 80px 0 0;
	margin-top: -80px;
	position: relative;
	z-index: 2;

	.icon-kunoji::after {
		border-right: #fff 2px solid;
		border-top: #fff 2px solid;
	}

	.footer-container {
		width: 92%;
		max-width: 900px;
		margin: auto;

		&>nav {
			display: block;
			width: 100%;
			height: auto;
			font-size: var(--txt18-16);
			font-weight: 700;
			padding: 24px;
			color: #fff;

			.parent-wrap .nav-link {

				&>p,
				&>a {
					padding: 16px 0px;
					cursor: pointer;
					display: block;
					position: relative;
					transition: var(--hov-move);

					.has-child & .icon-kunoji::after {
						transform: rotate(135deg) translateY(-50%);
						top: -10%;
						right: -1.5em;
						transition: var(--hov-move);
						box-sizing: content-box; /* base.cssへのカウンターとして指定 */
					}
				}

				&.active>p .icon-kunoji::after {
					transform: rotate(-45deg) translateY(-50%);
					top: 50%;
					right: -2em;
					transform-origin: 50% 50%;
				}

				.child-link {
					display: none;
					text-align: left;

					li {
						display: inline-block;
						font-size: 14px;
						padding-left: 1em;
						position: relative;
						font-weight: 500;
						margin-right: .2em;

						&::before {
							position: absolute;
							content: "●";
							font-size: .5em;
							transform: translateY(-50%);
							top: 50%;
							left: .5em;
						}
					}
				}
			}
		}

		.footer-midashi {
			font-size: var(--txt18-16);
			font-weight: 700;
			margin-bottom: var(--m32-16);
			color: #FFF;
			text-align: center;
		}

		.footer-links {
			column-count: 2;
			column-gap: 40px;
			color: #fff;
			margin: auto;
			font-size: var(--txt14-12);
			font-weight: 700;
			max-width: 240px;

			li a {
				display: inline-block;
				padding: .4em 0;
			}
		}

		.copyright {
			padding-top: var(--m32-16);
			text-align: center;
			color: #fff;
			font-weight: 400;
			border-top: 1px solid #fff;
			margin-top: var(--m56-32);
		}
	}
}

/* =========================================
* 追従ボタン
* ======================================== */

/* ページトップ
* ---------------------------------- */
.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.float-top-wrap {
	width: 40px;
	height: 40px;
	background: var(--main-gd);
	border-radius: 72px;
	padding: 2px;
	position: fixed;
	right: 2%;
	bottom: 48px;
	z-index: 2;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, transform 0.5s ease;

	.float-top-btn {
		background-color: #fff;
		width: 100%;
		height: 100%;
		display: grid;
		place-items: center;
		border-radius: 72px;

		.icon-kunoji::after {
			width: 8px;
			height: 8px;
			transform: translateY(-50%) rotate(-45deg);
			top: 64%;
			right: -5px;
		}
	}

	&.is-visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* フロートリンク
* ---------------------------------- */
.float-link-wrap {
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease, transform 0.5s ease;
	position: fixed;
	bottom: -2px;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 40px;

	.float-links {
		display: flex;
		height: 100%;
		gap: 4px;

		a {
			flex: 1;
			background: var(--main-gd);
			border-radius: 24px 24px 0 0;
			padding: 2px;

			p {
				background-color: #fff;
				border-radius: 24px 24px 0 0;
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: center;
				gap: var(--m16-8);
				align-items: center;
				color: var(--main-color);
				padding: 0 .5em;
				font-size: var(--txt16-14);
				font-weight: 700;
			}
		}
	}

	&.is-visible {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

@media (min-width: 769px) {

	/* =========================================
* 共通パーツ
* ======================================== */

	/* 変数
* ---------------------------------- */
	:root {
		--header-height: 80px;
		--txt56-36: 56px;
		--txt40-32: 40px;
		--txt32-28: 32px;
		--txt36-24: 36px;
		--txt32-24: 32px;
		--txt24-20: 24px;
		--txt20-18: 20px;
		--txt18-16: 18px;
		--txt16-14: 16px;
		--txt14-12: 14px;
		--m120-104: 120px;
		--m104-80: 104px;
		--m96-64: 96px;
		--m96-52: 96px;
		--m80-40: 80px;
		--m56-32: 56px;
		--m40-24: 40px;
		--m32-16: 32px;
		--m24-16: 24px;
		--m16-8: 16px;
	}

	/* ボタン
* ---------------------------------- */
	.gd-btn {
		max-width: 220px;
		font-size: 20px;
	}

	/* =========================================
* ヘッダー
* ======================================== */
	header {
		background-color: #fff;
		height: var(--header-height);
		display: flex;
		padding: 0 16px 0 var(--m56-32);

		.header-contents {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;

			nav {
				display: flex;
				position: static;
				height: 100%;
				padding: 0 24px;
				border-radius: 0;
				box-shadow: none;
				justify-content: end;
				font-size: min(1.8vw, 18px);

				.parent-wrap {
					display: flex;
					gap: min(4vw, 64px);

					.nav-link {

						&>p,
						&>a {
							border-bottom: none;

							.has-child & .icon-kunoji::after {
								right: -1em;
							}
						}

						&.active>p .icon-kunoji::after {
							right: -1.5em;
						}

						.child-link {
							display: none;
							padding: 40px;
							position: absolute;
							top: var(--header-height);
							background-color: #fff;
							width: 100%;
							left: 0;


							li {
								font-size: 16px;
								margin-right: 2em;
								transition: var(--hov-move);

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

				.sns-links {
					display: none;
				}
			}
		}
	}


	/* ハンバーガー
	* ---------------------------------- */

	.burger {
		display: none;
	}

	/* =========================================
* トップページ
* ======================================== */

	/* メインビジュアル
* ---------------------------------- */
	.mv-slider {
		.mv-slide {
			aspect-ratio: 16 / 9;
		}
	}

	/* スライド
* ---------------------------------- */
	.top-slider {
		margin-top: -5%;

		.slide-item {
			margin: 0 8px 8px;
			border-radius: 16px;
		}
	}

	.prev-icon,
	.next-icon {
		width: 64px;
	}

	/* オープンキャンパス
* ---------------------------------- */
	.top-oc {
		.all-days-btn {
			font-size: 16px;
		}
	}


	/* コース
* ---------------------------------- */
	.top-course-wrap {
		.top-course-col {
			border-radius: 24px;
			max-width: 100%;
			width: 100%;
			padding: 24px;


			a {
				flex-direction: row;
				align-items: center;

				.top-course-img {
					border-radius: 16px;
					aspect-ratio: 1 / 1;
					height: 150px;
				}
			}
		}
	}

	/* 大原が選ばれる理由
* ---------------------------------- */
	.top-reason {
		.top-reason-wrap {

			.top-reason-col {
				display: flex;
				gap: 32px;
				align-items: center;

				.top-reason-img {
					margin-bottom: var(--m16-8);
					position: relative;

					img {
						max-width: 300px;
					}

					.top-reason-number {
						top: 0;
						bottom: auto;
						width: 80px;
						height: 80px;
						font-size: 40px;

						span {
							font-size: .5em;
						}
					}
				}

				&:nth-child(odd) {
					.top-reason-img img {
						border-radius: 96px 16px 16px 32px;
					}
				}

				.top-reason-txt h3 {
					margin-bottom: 16px;
				}
			}
		}
	}

	/* アクセス
* ---------------------------------- */
	.top-access {
		font-size: 16px;
		font-weight: 700;
		line-height: 150%;

		.top-map-wrap {
			flex-direction: row;
		}

		.top-map {
			width: 500px;
			margin-bottom: 0;
		}
	}

	/* インスタグラム
* ---------------------------------- */
	.top-ig-wrap {
		grid-template-columns: repeat(4, 1fr);
	}

	/* =========================================
* オープンキャンパス
* ======================================== */

	/* メインビジュアル
* ---------------------------------- */
	.oc-mv-wrap {
		.oc-mv01 {
			top: -60px;
			left: -40px;
			width: 200px;
			height: 200px;
		}

		.oc-mv02 {
			left: 188px;
			top: -20px;
			width: 210px;
			height: 210px;
		}

		.oc-mv03 {
			right: 196px;
			bottom: -96px;
			width: 250px;
			height: 250px;
		}

		.oc-mv04 {
			right: -45px;
			bottom: -22px;
			width: 200px;
			height: 200px;
		}

		.oc-mv-circle01 {
			width: 64px;
			height: 64px;
			right: 87px;
			top: -30px;
		}

		.oc-mv-circle02 {
			width: 100px;
			height: 100px;
			right: -15px;
			top: 18px;
		}

		.oc-mv-circle03 {
			width: 120px;
			height: 120px;
			left: -33px;
			bottom: 54px;
		}

		.oc-mv-circle04 {
			width: 67px;
			height: 67px;
			left: 46px;
			bottom: -13px;
		}
	}

	/* オープンキャンパス
* ---------------------------------- */
	#oc-date-area {
		.oc-schedule-wrap {
			gap: 16px;

			.oc-schedule-col {

				a {

					.icon-kunoji-wrap {
						.icon-kunoji::after {
							border-top: 3px solid #fff;
							border-right: 3px solid #fff;
							width: 16px;
							height: 16px;
						}
					}
				}

			}
		}

		.all-days-btn {
			padding: .5em 2.5em .5em 1em;
			font-size: 18px;
			width: 220px;
		}
	}


	/* 体験メニュー
* ---------------------------------- */

	.oc-link-wrap {

		.oc-link-col a {
			border-radius: 32px;

			.oc-link-img {
				width: 180px;
				min-width: 180px;

				.oc-date-wrap {
					padding: .5em;
					font-size: 20px;
					font-weight: 700;

					.oc-date span {
						width: 24px;
						height: 24px;
						line-height: 22px;
						margin-left: .2em;
					}
				}

			}

			.oc-link-txt {
				h3 {
					font-size: 20px;
				}

				.oc-link-detail {
					padding-right: 48px;
				}
			}

			.oc-link-circle {
				width: 40px;
				height: 40px;

				.icon-kunoji::after {
					border-right: 2px solid #fff;
					border-top: 2px solid #fff;
				}
			}
		}

	}

	/* スケジュール
* ---------------------------------- */

	.oc-timeschedule-wrap {
		.oc-detail {
			.oc-timetable-list {

				.oc-timetable-col {
					border-radius: 32px;


					.oc-time-img {
						width: 180px;
						min-width: 180px;

						.oc-time-wrap {
							padding: .5em;
							font-size: 20px;
							font-weight: 700;
						}
					}

					.oc-time-txt {
						h3 {
							font-size: 20px;
							margin-bottom: 16px;
						}
					}
				}
			}
		}
	}

	/* Q&A
* ---------------------------------- */

	.faq-wrap {

		.faq-col {
			h3 {
				font-size: 18px;
			}
		}
	}

	/* 参加者の声
* ---------------------------------- */
	.oc-voice-wrap {

		.oc-voice-col {

			.oc-voice-img {
				min-width: 100px;
			}

			.voice-fukidashi {
				font-size: 18px;
			}
			.voice-fukidashi br {
				display: none;
			}

		}
	}

	/* =========================================
* 各学科説明
* ======================================== */
	.course-mv-wrap {

		img {
			/* aspect-ratio: 85 / 44; */
			aspect-ratio: 77 / 44;
			/* object-position: center; */
			object-position: center 40%;

			/* 縮める */
			max-width: 1280px;
			margin: 0 auto;
		}

		.slick-prev,
		.slick-next {
			top: 40%;
		}
	}
	.anchor-wrap {
		ul {
			padding-right: 0;
		}
	}
	.anchor-toggle {
    display: none;
  }
  .anchor-wrap.closed {
		/* background-color: #FFF; */

		ul {
			display: block;
		}
		.anchor-list-wrapper {
			grid-template-rows: 1fr;
		}
	} 

	/* 3つの特徴
	* ---------------------------------- */
	#features {
		.container {
			width: 92%;
		}

		h2.course-midashi {
			margin-left: 0;
		}

		.slide-list-wrap {
			overflow-x: hidden;

			.features-wrap {
				width: 100%;

				.features-col {
					width: 100%;
					min-width: auto;

					.features-img {
						aspect-ratio: 3 / 2;
						height: auto;
						width: 100%;
					}

					.features-midashi {
						p {
							font-size: min(6vw, 56px);
							width: .6em;
						}

						h3 {
							font-size: min(1.7vw, 18px);
						}
					}
				}

			}
		}

	}

	/* 学生・卒業生の声
	* ---------------------------------- */
	#student-voice,
	#alumni-voice,
	#result-alumni-voice {
		.voice-wrap {
			flex-direction: column;
			overflow-x: hidden;
			gap: 32px;

			.voice-col {
				width: 100%;
				display: flex;
				gap: 24px;

				.voice-img {
					/* width: 36%; */
					min-width: 36%;
				}

				&:nth-child(even) {
					flex-direction: row-reverse;
				}
			}
		}
	}

	/* コース一覧
* ---------------------------------- */
	#course-list {
		.container {
			width: 92%;
		}

		.course-switch-wrap,
		.course-detail-col:not(.curriculum-col) {
			width: 100%;
		}

		h2 {
			width: 100%;
		}

	}

	.course-detail-wrap {

		.course-contents {

			.curriculum-col {
				h4 {
					width: 100%;
				}

				.curriculum-img-wrap {
					width: 100%;
					overflow-x: hidden;

					.curriculum-img {
						width: 100%;

						img {
							max-width: 100%;
						}
					}
				}
			}
		}
	}

	/* =========================================
* 合格・就職実績
* ======================================== */
	.tier02-mv-wrap {
		aspect-ratio: 16 / 9;
	}

	.result-result-wrap {
		flex-direction: row;

		.result-result-col {
			flex: 1;
			background-color: var(--sub-color);
			display: grid;
			place-items: center;
			border-radius: var(--m40-24);
			padding: var(--m56-32) 1em;
			text-align: center;

			h3 {
				min-height: 2em;
				display: grid;
				place-items: center;
			}

			.number-txt-wrap {
				.number-txt {
					.note-txt {
						margin-top: -8px;
					}
				}
			}
		}
	}

	.strengths-wrap {
		.strengths-col {
			h3 {
				font-size: 20px;

				&::after {
					border-top: 3px solid var(--main-color);
					border-right: 3px solid var(--main-color);
					width: .7em;
					height: .7em;
				}
			}
		}

		.strengths-detail-wrap {

			.strengths-detail-col {
				h4 {
					font-size: 18px;
				}
			}
		}
	}

	#result-reason {

		.container {
			width: 92%;
		}

		h2 {
			width: 100%;
			padding-left: 0;

			&+p {
				width: 100%;

			}
		}

		.slide-list-wrap {
			overflow-x: hidden;
			width: 100%;

			.result-reason-wrap {
				width: 100%;
				flex-wrap: wrap;

				.result-reason-col {
					width: 48%;
					height: auto;

					.result-midashi {
						h3 {
							font-size: 20px;
						}

						.gd-circle {
							width: 64px;
							height: 64px;

							p {
								font-size: 30px;
							}
						}
					}
				}
			}
		}
	}

	.carrier-program-top {
		flex-direction: row;

		img {
			width: 34%;
		}
	}

	.carrier-program-wrap {

		.carrier-program-col {
			.carrier-program-box {
				align-items: center;

				img {
					width: auto;
					height: 240px;
				}
			}

			dl {
				.carrier-program-table {

					dt {
						min-width: 115px;
						padding: .5em;
					}
				}
			}
		}
	}


	.course-switch-wrap {
		.course-switch {
			a {
				font-weight: 600;
				padding: 1em;
				font-size: 16px;

				#oc-menu & {
					min-height: 82px;
				}
			}
		}
	}

	/* =========================================
* キャンパスライフ
* ======================================== */

	/* 年間スケジュール
* ---------------------------------- */
	#annual-schedule ol {
		max-width: 80%;
		margin: auto;
	}

	.schedule-col {

		&::before {
			left: 60px;
			top: 60px;
		}

		dl {
			.month-wrap {
				width: 120px;
				min-width: 120px;
				height: 120px;
			}
		}
	}

	/* 全体のコンテナ */
	.marquee-wrap {

		.marquee-contents {

			.marquee-col {
				width: 300px;
			}
		}
	}

	/* 大原生のホンネ
* ---------------------------------- */
	/* --- 全体・区切り線 --- */
	#true-feelings {
		.honne-wrap {
			.honne-col {
				.container {
					display: flex;
					justify-content: space-between;
					gap: 40px;
					align-items: center;
				}
			}

		}
	}

	/* --- 名前・写真 --- */
	.honne-detail {
		flex-direction: column;
		align-items: center;
		gap: 0;
		margin-bottom: 0;
		min-width: 200px;

		.honne-prof {
			align-items: center;

			.honne-prof-txt {
				text-align: center;
			}

			.gd-circle {
				width: 96px;
				height: 96px;

				p {
					line-height: 70%;
				}
			}
		}

		.honne-img {
			width: 100%;
		}
	}

	/* --- 文章 --- */
	.honne-txt-wrap {
		gap: 32px;

		.honne-before-col h3:before {
			width: 80px;
		}

		.honne-after-col h3:before {
			width: 72px;
		}

	}

	/* 大原生の1日
* ---------------------------------- */
	.daily-schedule-wrap {

		.daily-schedule-col {
			border: 5px solid var(--sub-color);
			border-radius: 32px;
			gap: 24px;
			flex-direction: row;

			.daily-schedule-top {
				min-width: 280px;
				flex-direction: column;
				align-items: center;
				padding: 24px 24px 0 24px;

				.daily-schedule-txt {

					h3 {
						line-height: 150%;
					}
				}

				.daily-schedule-img {
					min-width: 180px;
					width: 10%;
				}
			}

			.daily-schedule-table-wrap {
				padding: 24px;
				border-radius: 0 28px 28px 0px;

				.daily-schedule-imgs {

					img {
						height: 170px;
					}
				}
			}
		}
	}

	/* 大原生アンケート
* ---------------------------------- */

	.questionnaire-wrap {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 80px 40px;
		justify-content: space-between;

		.questionnaire-col {
			width: calc(50% - 40px);

			h3.questionnaire-midashi {
				font-size: 20px;

				span {
					min-width: auto;
					font-size: 36px;
				}
			}

			.data-wrap {

				/* --- Q3,Q5 --- */
				.percentage-wrap {
					li {
						margin-right: 16px;

						h4 {
							font-size: 17px;
						}

						.percentage-txt {
							font-size: 19px;

							span {
								font-size: 19px;
							}
						}

						&:first-child,
						&:nth-child(2) {

							h4 {
								font-size: 26px;
							}

							.percentage-txt {
								font-size: 40px;
							}
						}
					}
				}

				/* --- Q6 --- */
				.ranking-wrap {

					li {
						span {
							font-size: 28px;
							min-width: 36px;
							height: 36px;
						}
					}
				}
			}
		}
	}

	/* 先生×学生
* ---------------------------------- */
	.one-one-wrap {

		.one-one-col {

			.one-one-img {
				margin: auto;
				max-width: 800px;

				.buddy-circle {
					width: 104px;
					height: 104px;
					bottom: auto;
					top: -8px;
				}
			}

			.one-one-txt-wrap {
				flex-direction: row;
				flex: 1;

				.one-one-txt {
					width: calc(50% - 40px);
					border-left: 3px solid var(--main-color);
				}
			}

		}
	}

	/* =========================================
	* フッター
	* ======================================== */
	footer {
		padding: 32px 0 32px 0;

		.footer-container {
			max-width: 1080px;

			&>nav {
				.parent-wrap {
					display: grid;
					grid-template-columns: repeat(5, 1fr);
					width: 100%;

					.nav-link {
						&>p {
							cursor: auto;
						}

						&>p,
						&>a {
							padding: 0 16px 16px 0;
							font-size: min(1.6vw, 18px);
							line-height: normal;

							.icon-kunoji::after {
								right: -1em !important;
							}
						}

						.child-link {
							display: block !important;
							height: auto !important;
							opacity: 1 !important;
							visibility: visible !important;

							li {
								display: block;

								&::before {
									top: 2.2em;
								}
							}
						}
					}
				}
			}

			.footer-link-wrap {
				display: flex;
				gap: 40px;
				margin-top: 40px;

				.footer-midashi {
					text-align: left;
				}


				.footer-links {
					column-count: 5;
					column-gap: min(3vw, 56px);
					line-height: normal;
					margin: 0;
					max-width: none;

					li a {
						padding: .8em 0;
					}
				}
			}

		}
	}

	/* =========================================
* 追従ボタン
* ======================================== */

	/* ページトップ
* ---------------------------------- */
	.float-top-wrap {
		width: 72px;
		height: 72px;
		padding: 3px;
		transition: var(--hov-move);

		&:hover {
			opacity: .8;
			filter: brightness(110%);
		}

		.float-top-btn {
			.icon-kunoji::after {
				width: 16px;
				height: 16px;
				right: -10px;
				border-top: 3px var(--main-color) solid;
				border-right: 3px var(--main-color) solid;
			}
		}
	}

	/* フロートリンク
* ---------------------------------- */
	.float-link-wrap {
		position: fixed;
		bottom: auto;
		top: 14vh;
		right: -3px;
		left: auto;
		z-index: 6;
		width: 48px;
		height: auto;

		.float-links {
			flex-direction: column;
			height: 100%;

			a {
				border-radius: 24px 0 0 24px;
				padding: 3px;
				height: 240px;
				transition: var(--hov-move);

				&:hover {
					opacity: .8;
					filter: brightness(110%);
				}

				p {
					writing-mode: vertical-rl;
					border-radius: 21px 0 0 21px;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}
}