@charset "utf-8";

/*==============================
        content
==============================*/

a {
	img {
		display:block;
	}
	&.btn {
		display: block;
	}
}

#mv {
	.mv {
		background: url(../img/top/mv.jpg) no-repeat center center/cover;
		width: 100%;
		aspect-ratio: .66;
		display: grid;
		justify-items: center;
		align-content: start;
		position: relative;
		padding-top: min(4vw,30px);
		.jsaf {
			grid-area: 1/1/2/2;
			width: 50%;
			margin-bottom: min(8vw,60px);
		}
		h1 {
			font-size: min(9.07vw,6.8rem);
			text-align: center;
				text-shadow: .05em .05em 0 #FFFFFF;
				line-height: 1;
				margin-bottom: .75em;
			span {
				&:first-child {
					color:var(--color_main);
				}
				&:nth-child(2) {
					font-size: min(10vw,7.5rem);
					color:var(--color_sub);
				}
				&:last-child {
					display: block;
					font-size: min(8vw,6rem);background: linear-gradient(transparent 60%, #ffff00 60%);
					max-width: 8.33em;
					padding-left: .33em;
					margin:.33em auto 0;
				}
			}
		}
		.mvcta {
			font-size: min(5.33vw,4.0rem);
			font-weight: 600;
			display: grid;
			justify-items: center;
			grid-row-gap: .33em;
			img {
				animation: arrow 1s infinite ease-in-out;
			}
		}
		.bnr {
			position: absolute;
			bottom:0;
			display: flex;
			max-width: 96%;
			left: 2%;
			column-gap: 2%;
			transform: translateY(50%);
			li {
				flex-grow: 1;
			}
		}
	}
}

@keyframes arrow {
	0% {
		transform: translateY(-3px);
	}
	50% {
		transform: translateY(5px);
	}
	100% {
		transform: translateY(-3px);
	}
}


@media screen and (max-width:480px){

	#mv {
		.mv {
			max-height: 90vh;
			max-height: 90dvh;
		}
	}

}

#purpose {
	.contents {
		padding-top: min(12vw,90px);
		padding-bottom: min(8vw,60px);
		h2 {
			font-size: min(6.67vw,5.0rem);
			text-align: center;
			margin-bottom: 1em;
		}
		ul {
			display: grid;
			grid-template-columns: repeat(3,1fr);
			max-width: 96%;
			margin:0 auto;
			grid-column-gap: 2%;
			li {
				flex-grow: 1;
			}
		}
	}
}

.info {
	&#jsaf {
		background-color: var(--color_main);
		padding:min(3.2vw,24px);
		.contents {
			h2 {
				color: var(--color_main);
			}
		}
	}
	&#acej {
		background-color: var(--color_sub2);
		padding:min(3.2vw,24px);
		.contents {
			h2 {
				color: var(--color_main);
			}
		}
	}
	&#ielts {
		background-color: var(--color_sub);
		padding:min(3.2vw,24px);
		.contents {
			h2 {
				color: var(--color_main);
			}
		}
	}
	.contents {
		background-color: #FFFFFF;
		border-radius: min(2.67vw,20px);
		padding:min(6.67vw,50px) min(4vw,30px);
		h2 {
			font-size: min(4.8vw,3.6rem);
			display: grid;
			grid-row-gap: .33em;
			justify-items: center;
			max-width: 75%;
			margin:0 auto 1.33em;
		}
		h3 {
			font-size: min(4.3vw,3.2rem);
			display: grid;
			grid-template-columns: repeat(3,auto);
			align-items: center;
			justify-content: center;
			grid-column-gap: .66em;
			margin-bottom: 1em;
			&::before,&::after {
				content:'ー';
			}
		}
		p {
			font-size: min(4vw,1.8rem);
			font-weight: 500;
			line-height: 1.66;
			margin-bottom: 1em;
		}
		.img {
			img {
				display: block;
				border-radius: min(2.67vw,20px);
				margin-bottom: min(8vw,60px);
			}
		}
		ul {
			font-size: min(4vw,1.8rem);
			display: grid;
			row-gap: .33em;
			margin-bottom: 1.5em;
			li {
				font-weight: 500;
				display: grid;
				grid-template-columns: 1em 1fr;
				grid-column-gap: .33em;
				line-height: 1.5;
				img {
					transform: translateY(.33em);
				}
			}
		}
	}
}

#faq {
	.contents {
		padding: min(8vw,60px) 0  min(10vw,75px);
		width: 94%;
		margin:0 auto;
		h2 {
			text-align: center;
			font-size: min(6.4vw,4.0rem);
			margin: 1em;
		}
		dl {
			&:not(:last-child) {
				border-bottom:2px dotted #cccccc;
			}
			dt {
				font-size:min(3.8vw,1.8rem);
				font-weight:500;
				line-height:1.5;
				display:grid;
				grid-template-columns:auto 1fr 1.5em;
				grid-column-gap:.5em;
				padding:1em 0;
				align-items:center;
				cursor:pointer;
				span {
					&:first-child {
						color:#ff9900;
						font-size:2em;
						font-weight:600;
						line-height:1;
					}
				}
				.icon {
					height:1.5em;
					transition-duration:.3s;
				}
				&.open {
					.icon {
						transform:rotate(180deg);
					}
				}
			}
			dd {
				font-size:min(3.8vw,1.8rem);
				padding:0 0 1.5em;
				display:none;
				& > div {
					display:grid;
					grid-template-columns:auto 1fr;
					grid-column-gap:.66em;
					line-height:1.66;
					span {
						&:first-child {
							color:var(--color_main);
							font-size:2em;
							font-weight:600;
							transform:translateY(-.15em);
							line-height:1;
							padding-left: .1em;
						}
					}
					a {
						color:var(--color_main);
						text-decoration:underline;
					}
				}
			}
		}
	}
}

#bottomlink {
	.contents {
		padding-bottom:  min(10vw,75px);
		width: 96%;
		margin:0 auto;
		ul {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			row-gap: min(2vw,10px);
			li {
				width: 49%;
				&:first-child {
					width: 100%;
				}
			}
		}
	}
}

@media (hover:hover) {

	a {
		img {
			transition:.3s;
		}
		&:hover {
			img {
				opacity: .75;
			}
		}
	}
	
}

@media screen and (max-width:1200px) {
}

@media screen and (max-width:1024px) {
}

@media screen and (max-width:768px) {
}