/*---------- h1 color ----------*/

.lower-ttl.is-mg { color: var(--color-navy);}
.lower-ttl.is-amg { color: var(--color-brown);}
.lower-ttl.is-fbs { color: var(--color-green);}
.lower-ttl.is-sse { color: var(--color-yellow);}
.lower-ttl.is-financial { color: var(--color-charcoal);}

/*
.lower-head.is-mg { color: var(--color-navy);}
.lower-head.is-amg { color: var(--color-brown);}
.lower-head.is-fbs { color: var(--color-green);}
.lower-head.is-sse { color: var(--color-yellow);}
.lower-head.is-financial { color: var(--color-charcoal);}
*/

/*---------- intro ----------*/
.program-intro {
	width: 100%;
	margin-bottom: 50px;
}
.program-lead-txt {
	margin-bottom: 30px;
	font-size: 1.8rem;
	text-align: center;
}
.program-intro-box {
	width: 100%;
	padding: 30px;
	background: #fff;
	border-radius: 16px;
}
.program-txt {
	font-size: 1.2rem;
	font-weight: 400;
}
.txt-indent {
	text-indent: -1em;
	padding-left: 1em;
}

/*---------- link ----------*/
.program-link-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
}
.program-link-wrap .btn {
	width: calc((100% - 20px * 2) / 3);
}
.program-link-wrap .btn.btn-mg a { background: var(--color-navy); border-color: var(--color-navy);}
.program-link-wrap .btn.btn-amg a { background: var(--color-brown); border-color: var(--color-brown);}
.program-link-wrap .btn.btn-fbs a { background: var(--color-green); border-color: var(--color-green);}
.program-link-wrap .btn.btn-sse a { background: var(--color-yellow); border-color: var(--color-yellow);}
.program-link-wrap .btn.btn-financial a { background: var(--color-charcoal); border-color: var(--color-charcoal);}

.program-link-wrap .btn.btn-mg a.is-current { background: var(--color-white); color: var(--color-navy);}
.program-link-wrap .btn.btn-amg a.is-current { background: var(--color-white); color: var(--color-brown);}
.program-link-wrap .btn.btn-fbs a.is-current { background: var(--color-white); color: var(--color-green);}
.program-link-wrap .btn.btn-sse a.is-current { background: var(--color-white); color: var(--color-yellow);}
.program-link-wrap .btn.btn-financial a.is-current { background: var(--color-white); color: var(--color-charcoal);}

.program-link-wrap .btn.btn-mg a.is-current .arrow { border-left: 1px solid var(--color-navy);}
.program-link-wrap .btn.btn-amg a.is-current .arrow { border-left: 1px solid var(--color-brown);}
.program-link-wrap .btn.btn-fbs a.is-current .arrow { border-left: 1px solid var(--color-green);}
.program-link-wrap .btn.btn-sse a.is-current .arrow { border-left: 1px solid var(--color-yellow);}
.program-link-wrap .btn.btn-financial a.is-current .arrow { border-left: 1px solid var(--color-charcoal);}

.program-link-wrap .btn.btn-mg a.is-current .arrow::before, 
.program-link-wrap .btn.btn-mg a.is-current .arrow::after { background-color: var(--color-navy);}
.program-link-wrap .btn.btn-amg a.is-current .arrow::before, 
.program-link-wrap .btn.btn-amg a.is-current .arrow::after { background-color: var(--color-brown);}
.program-link-wrap .btn.btn-fbs a.is-current .arrow::before, 
.program-link-wrap .btn.btn-fbs a.is-current .arrow::after { background-color: var(--color-green);}
.program-link-wrap .btn.btn-sse a.is-current .arrow::before, 
.program-link-wrap .btn.btn-sse a.is-current .arrow::after { background-color: var(--color-yellow);}
.program-link-wrap .btn.btn-financial a.is-current .arrow::before, 
.program-link-wrap .btn.btn-financial a.is-current .arrow::after { background-color: var(--color-charcoal);}

@media (hover: hover) and (pointer: fine) {
	.btn a:hover {
		background: var(--color-white);
		color: var(--color-black);
	}
	.btn a:hover .arrow {
		border-left: 1px solid var(--color-black);
	}
	.btn a:hover .arrow::before,
	.btn a:hover .arrow::after {
		background-color: var(--color-black);
	}
	.program-link-wrap .btn.btn-mg a:hover { background: var(--color-white); color: var(--color-navy);}
	.program-link-wrap .btn.btn-amg a:hover { background: var(--color-white); color: var(--color-brown);}
	.program-link-wrap .btn.btn-fbs a:hover { background: var(--color-white); color: var(--color-green);}
	.program-link-wrap .btn.btn-sse a:hover { background: var(--color-white); color: var(--color-yellow);}
	.program-link-wrap .btn.btn-financial a:hover { background: var(--color-white); color: var(--color-charcoal);}
	
	.program-link-wrap .btn.btn-mg a:hover .arrow { border-left: 1px solid var(--color-navy);}
	.program-link-wrap .btn.btn-amg a:hover .arrow { border-left: 1px solid var(--color-brown);}
	.program-link-wrap .btn.btn-fbs a:hover .arrow { border-left: 1px solid var(--color-green);}
	.program-link-wrap .btn.btn-sse a:hover .arrow { border-left: 1px solid var(--color-yellow);}
	.program-link-wrap .btn.btn-financial a:hover .arrow { border-left: 1px solid var(--color-charcoal);}
	
	.program-link-wrap .btn.btn-mg a:hover .arrow::before, 
	.program-link-wrap .btn.btn-mg a:hover .arrow::after { background-color: var(--color-navy);}
	.program-link-wrap .btn.btn-amg a:hover .arrow::before, 
	.program-link-wrap .btn.btn-amg a:hover .arrow::after { background-color: var(--color-brown);}
	.program-link-wrap .btn.btn-fbs a:hover .arrow::before, 
	.program-link-wrap .btn.btn-fbs a:hover .arrow::after { background-color: var(--color-green);}
	.program-link-wrap .btn.btn-sse a:hover .arrow::before, 
	.program-link-wrap .btn.btn-sse a:hover .arrow::after { background-color: var(--color-yellow);}
	.program-link-wrap .btn.btn-financial a:hover .arrow::before, 
	.program-link-wrap .btn.btn-financial a:hover .arrow::after { background-color: var(--color-charcoal);}
}

/*---------- about ----------*/
.cont-wrap {
	margin-top: 80px;
}
.about .cont-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 45px;
}
.about-txt-wrap {
	width: calc((100% - 45px) / 2);
}
.cont-ttl-en {
	font-size: 2rem;
	font-weight: 600;
	color: var(--color-gray);
}
.cont-ttl-en span {
	font-size: 2.8rem;
}
.cont-ttl {
	font-size: 3.7rem;
	margin: 20px 0 45px;
	font-weight: 600;
}
.cont-ttl span {
	display: inline-block;
	font-size: 2.7rem;
}
.cont-ttl span.is-line-2 {
	display: block;
	margin-top: -0.5em;
}
.cont-read {
	font-size: 1.8rem;
	font-weight: 600;
}

.about-img-wrap {
	width: calc((100% - 45px) / 2);
	border-radius: 8px;
	overflow: hidden;
}

/*---------- expectations ----------*/
.expectations-ttl-wrap {
	width: 100%;
	margin-bottom: 35px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-black);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.expectations .cont-ttl {
	font-size: 2.6rem;
	margin: 0;
}
.expectations .cont-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 30px;
}
.expectations .cont-box {
	width: calc((100% - 30px * 3) / 4);
	text-align: center;
}
.expectations .column-5 .cont-box {
	width: calc((100% - 30px * 4) / 5);
	text-align: center;
}
.expectations-icon {
	width: 50%;
	max-width: 60px;
	margin: 0 auto 20px;
}
.expectations .box-en {
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--color-gray);
	text-align: center;
	margin-bottom: 10px;
}
.expectations .box-txt {
	font-size: 1.4rem;
	font-weight: 300;
}


/*---------- variations ----------*/
.variations.cont-wrap {
	margin-top: 30px;
}
.variations .cont-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.variations .sec-ttl-sub {
	color: var(--color-gray);
	margin-bottom: 40px;
}
.variations .cont-box {
	width: calc((100% - 30px * 3) / 4);
	background: var(--color-white);
	border-radius: 16px;
	padding: 20px 30px 10px;
	display: flex;
	flex-direction: column;
}
.variations .ttl-box {
	width: calc((100% - 30px * 3) / 4);
	min-width: 250px;
	display: block;
}
.variations-ttl {
	background: var(--color-navy);
	color: var(--color-white);
	text-align: center;
	border-radius: 999px;
	padding: 8px;
	margin-bottom: 15px;
	font-size: 18px;
}
.variations-amg .variations-ttl { background: var(--color-brown);}
.variations-fbs .variations-ttl { background: var(--color-green);}
.variations-sse .variations-ttl { background: var(--color-yellow);}
.variations-financial .variations-ttl { background: var(--color-charcoal);}

.variations .box-txt {
	margin-bottom: 10px;
	flex-grow: 1;
}

.btn-more {
	font-size: 1.2rem;
	font-weight: 500;
	color: var(--color-navy);
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.btn-more .arrow {
	position: relative;
	background: var(--color-navy);
	width: 30px;
	height: 30px;
	display: block;
	border-radius: 8px;
	margin-left: 10px;
}
.btn-more .arrow::before,
.btn-more .arrow::after {
	content: '';
	position: absolute;
	top: 50%;
	right: calc(50% - 3px);
	width: 7px;
	height: 1px;
	background-color: var(--color-white);
	transform-origin: calc(100% - 0.5px) 50%;
}
.btn-more .arrow::before {
	transform: rotate(40deg);
}
.btn-more .arrow::after {
	transform: rotate(-40deg);
	top: calc(50% + 0.5px);
}

.variations .txt-note {
	font-weight: 400;
	text-align: center;
}
a.link-normal {
	color: var(--color-navy);
	text-decoration: underline;
}


/*---------- style ----------*/
.style .cont-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}
.style .cont-box {
	width: calc((100% - 30px * 3) / 4);
	background: var(--color-white);
	border-radius: 16px;
	padding: 20px 30px 10px;
	display: flex;
	flex-direction: column;
}
.style-icon {
	width: 60%;
	max-width: 88px;
	margin: 0 auto 20px;
}
.style .box-ttl {
	font-size: 1.8rem;
	text-align: center;
}
.style .txt-note {
	margin-top: 30px;
	text-align: center;
	font-weight: 400;
}
.style .cont-box .txt-note {
	margin-top: 10px;
	text-align: left;
	font-weight: 400;
}


@media screen and (max-width: 1200px) {
	.expectations .column-5 {
		justify-content: center;
	}
	.expectations .column-5 .cont-box {
		width: calc((100% - 30px * 2) / 3);
	}
	
	.variations .cont-box {
		padding: 20px 20px 10px;
	}
}

@media screen and (max-width: 1080px) {
	.program-link-wrap .btn {
		width: calc((100% - 20px) / 2);
	}
	.cont-box {
		width: calc((100% - 30px) / 2);
	}
	.expectations .cont-box {
		width: calc((100% - 30px) / 2);
	}
	.variations .cont-box {
		width: calc((100% - 30px) / 2);
		padding: 20px 30px 10px;
	}
	.variations .ttl-box:nth-child(5) .variations-ttl, 
	.variations .ttl-box:nth-child(6) .variations-ttl {
		margin-bottom: 0;
	}
	.style .cont-box {
		width: calc((100% - 60px) / 3);
	}
}


@media screen and (max-width: 768px) {
	/*---------- intro ----------*/
	.program-intro {
		width: 100%;
		margin-bottom: 10vw;
	}
	.program-lead-txt {
		margin-bottom: 6vw;
		font-size: var(--fs-sp-18);
		text-align: center;
	}
	.program-intro-box {
		width: 100%;
		padding: 5vw;
		border-radius: 2vw;
	}
	.program-txt {
		font-size: var(--fs-sp-12);
	}
	
	
	/*---------- link ----------*/
	.program-link-wrap {
		gap: 3vw;
	}
	.program-link-wrap .btn {
		width: calc((100% - 3vw) / 2);
	}

	/*---------- about ----------*/
	.cont-wrap {
		margin-top: 10vw;
	}
	.about .cont-flex {
		display: flex;
		flex-direction: column;
		gap: 5vw;
	}
	.about-txt-wrap {
		width: 100%;
	}
	.cont-ttl-en {
		font-size: var(--fs-sp-20);
	}
	.cont-ttl-en span {
		font-size: var(--fs-sp-28);
	}
	.cont-ttl {
		font-size: var(--fs-sp-40);
		margin: 0 0 5vw;
	}
	.cont-ttl span {
		font-size: var(--fs-sp-27);
	}
	.cont-read {
		font-size: var(--fs-sp-18);
	}

	.about-img-wrap {
		width: 100%;
		border-radius: 1.5vw;
	}

	/*---------- expectations ----------*/
	.expectations-ttl-wrap {
		width: 100%;
		margin-bottom: 6vw;
		padding-bottom: 3vw;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
	}
	.expectations .cont-ttl {
		font-size: var(--fs-sp-26);
	}
	.expectations .btn {
		width: 44vw;
	}
	.expectations .btn a {
		font-size: var(--fs-sp-13);
	}
	.expectations .cont-flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
		gap: 6vw;
	}
	.expectations .cont-box, 
	.expectations .column-5 .cont-box {
		width: calc((100% - 6vw) / 2);
		text-align: center;
	}
	.expectations-icon {
		width: 30%;
		max-width: initial;
		margin: 0 auto 3vw;
	}
	.expectations .box-en {
		font-size: var(--fs-sp-26);
		margin-bottom: 1vw;
	}
	.expectations .box-txt {
		font-size: var(--fs-sp-14);
		text-align: left;
	}

	
	/*---------- variations ----------*/
	.variations .cont-box {
		width: 100%;
		padding: 5vw;
	}
	.variations .sec-ttl-sub {
		margin-bottom: 5vw;
	}
	.variations .ttl-box {
		width: 100%;
	}
	.variations-ttl {
		padding: 2vw;
		margin-bottom: 3vw;
		font-size: var(--fs-sp-18);
	}
	.variations .ttl-box .variations-ttl {
		margin-bottom: 0;
	}
	.variations .box-txt {
		margin-bottom: 3vw;
	}
	.btn-more {
		font-size: var(--fs-sp-12);
	}
	.btn-more .arrow {
		width: 8vw;
		height: 8vw;
		border-radius: 1vw;
		margin-left: 3vw;
	}
	.btn-more .arrow::before,
	.btn-more .arrow::after {
		right: calc(50% - 0.8vw);
		width: 1.867vw;
		height: 0.267vw;
		transform-origin: calc(100% - 0.133vw) 50%;
	}
	.btn-more .arrow::after {
		top: calc(50% + 0.133vw);
	}

	.variations .txt-note {
		margin-top: 5vw;
	}


	/*---------- style ----------*/
	.style .cont-flex {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5vw;
	}
	.style .cont-box {
		width: 100%;
		border-radius: 2vw;
		padding: 5vw;
		display: flex;
		flex-direction: column;
	}
	.style-icon {
		width: 25%;
		max-width: initial;
		margin: 0 auto 2vw;
	}
	.style .box-ttl {
		font-size: var(--fs-sp-18);
	}
	.style .txt-note {
		margin-top: 3vw;
	}
	.style .cont-box .txt-note {
		margin-top: 2vw;
	}
	.style .sec-ttl{
		font-size:var(--fs-sp-60)
	}
}