/*-----------------------------------------
mainvisual
------------------------------------------*/

.mainvisual-top-eyecatch {
	position: absolute;
	z-index: 30;
}
.mainvisual-top-copy {
	position: absolute;
	z-index: 25;
	left:0;
	width:100%;
}
.mainvisual-top-copy span {
	display: inline-block;
	font-weight:700;
	background:linear-gradient(transparent 30%, rgba(255, 255,255,1) 30%);
	background-repeat: no-repeat;
	transition:background-size 1s;
	background-size: 0% 100%;
	font-feature-settings:"palt";
	line-height:150%;
	padding-left:1em;
	padding-right:0.5em;
}
.mainvisual-top-copy.putactionon span {
	background-size: 100% 100%;
}
@media (width < 767px) {
	.mainvisual-top {
		background-image:url(../images/mainvisual-sp.webp);
	}
	.mainvisual-top,
	.mainvisual-top:before {
		aspect-ratio:9 / 16;
	}
	.mainvisual-top-eyecatch {
		width:72vw;
		top:30vw;
		right:4vw;
	}
	.mainvisual-top-copy {
		top:75vw;
	}
	.mainvisual-top-copy span {
		font-size:var(--font-sp-x-large);
		transform: rotate(-5deg) translateX(-4vw);
	}
}
@media (768px <= width) {
	.mainvisual-top {
		background-image:url(../images/mainvisual-pc.webp);
	}
	.mainvisual-top,
	.mainvisual-top:before {
		aspect-ratio:16 / 9;
		min-height:520px;
	}
	.mainvisual-top-eyecatch {
		width:40%;
		top:200px;
		left:50px;
	}
	.mainvisual-top-copy {
		top:clamp(160px,22vw,320px);
		right:0;
		text-align: right;
	}
	.mainvisual-top-copy span {
		font-size:var(--font-pc-xx-large);
		transform: rotate(-5deg) translateX(10px);
	}
}
/*-----------------------------------------
topmenu
------------------------------------------*/
.topmenu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin:0px auto;
}
.topbtn {
	display: block;
	position: relative;
	background-repeat: no-repeat;
	background-position: center top;
	text-align: center;
	text-decoration: none;
}
.topbtn span {
	display: inline-block;
	text-align: center;
	font-weight: 700;
	padding-bottom:8px;
}
.topbtn-exam {
	background-image:url(../images/iconbtn-exam.svg);
}
.topbtn-about {
	background-image:url(../images/iconbtn-about.svg);
}
.topbtn-event {
	background-image:url(../images/iconbtn-event.svg);
}
.topbtn-exam span {
	color:var(--color-blue);
	border-bottom:4px solid var(--color-blue);
}
.topbtn-about span {
	color:var(--color-green);
	border-bottom:4px solid var(--color-green);
}
.topbtn-event span {
	color:var(--color-red);
		border-bottom:4px solid var(--color-red);
}
@media (width < 767px) {
	.topmenu-grid {
		width:80vw;
		grid-column-gap: 8vw;
		padding:8vw 0;
	}
	.topbtn {
		padding-top:18vw;
		background-size:auto 16vw;
	}
	.topbtn span {
		font-size:var(--font-sp-small);
	}
}
@media (768px <= width) {
	.topmenu-grid {
		width:700px;
		grid-column-gap: 40px;
		padding:40px 0;
	}
	.topbtn {
		padding-top:150px;
		background-size:auto 120px;
	}
	.topbtn span {
		font-size:var(--font-pc-large);
	}
}
/*-----------------------------------------
top-sec-1
------------------------------------------*/
.top-sec-1 {
	position: relative;
	background-image:url(../images/bg-top-num3.webp);
	background-size:469px auto;
	background-repeat: no-repeat;
	background-position: left top;
}
.top-1-title {
	display:grid;
	margin-left:auto;
	margin-right:auto;
}
.top-1-title span {
	grid-area: 1 / 2 / 2 / 3;
}
.top-1-title div {
	grid-area: 1 / 1 / 3 / 2;
}
.top-1-title h2 {
	grid-area: 2 / 2 / 3 / 3;
}
.top-sec-1 span,
.top-sec-1 h2 {
	color:var(--color-red);
	font-weight: 700;
	font-style: italic;
}
sanbon {
	position: relative;
}
.slide-pic {
	display: block;
	overflow: hidden;
	position: relative;
	z-index:1;
}
.slide-pic img {
	display: block;
}
.sanbon h3 {
	text-align: center;
	font-weight:700;
	margin-top:1em;
	margin-bottom:1em;
	letter-spacing: 0.1em;
}
.sanbon p {
	text-align: center;
	font-weight:700;
	margin-bottom:1em;
	letter-spacing: 0.1em;
}
.splide__arrows .splide__arrow {
	background:var(--color-black);
	width:48px;
	height:48px;
	opacity: 0.9;
}
.splide__arrow:before {
	font-family: 'icomoon';
	content: "\e90b";
	width:24px;
	height:24px;
	font-size:24px;
	color:var(--color-white);
}
.splide__arrow--prev:before {
	transform: rotate(180deg);
}

@media (width < 767px) {
	.top-sec-1 {
		padding-top:8vw;
	}
	.top-1-title {
		grid-template-columns: 1fr 3fr;
		width:58vw;
		padding-bottom: 8vw;
	}
	.top-sec-1 span {
		margin-top:4vw;
	}
	.top-sec-1 h2 {
		font-size:var(--font-sp-xxx-large);
	}
	.sanbon {
		margin-bottom:8vw;
	}
	.slide-pic {
		aspect-ratio:1 / 1;
		border-radius:10vw 0 10vw 0;
	}
	.slide-pic img {
		position: absolute;
		top:0;
		left:-25vw;
		width:150vw;
		max-width:150vw;
	}
	.sanbon h3 {
		font-size:var(--font-sp-x-large);
	}
	.sanbon .splide__arrow {
		top:0;
		transform: translateY(40vw);
	}
}
@media (768px <= width) {
	.top-sec-1 {
		padding-top:40px;
	}
	.top-1-title {
		grid-template-columns: 1fr 2fr;
		width:480px;
		padding-bottom: 50px;
	}
	.top-sec-1 span {
		font-size:var(--font-pc-x-large);
		margin-top:30px;
	}
	.top-sec-1 h2 {
		font-size:72px;
	}
	.top-sec-1 div {
		padding-left:20px;
	}
	.slide-pic {
		aspect-ratio:3 / 2;
		border-radius:20px 0 20px 0;
	}
	.sanbon {
		padding-bottom:80px;
	}
	.sanbon h3 {
		font-size:var(--font-pc-x-large);
	}
}
@media (960px <= width) {
	.sanbon .splide__arrow {
		display:none;
	}
}
/*-----------------------------------------
top-sec-3
------------------------------------------*/
.top-sec-3 {
	position: relative;
	z-index: 10;
}
.top-sec-3 h2 {
	position: absolute;
	z-index: 10;
	border-radius: 50%;
	background-color:var(--color-white);
	color:var(--color-red);
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.top-sec-3 h2 span {
	display: block;
	color:var(--color-red);
}
.top-strong-1,
.top-strong-2 {
	display:block;
	position: relative;
	z-index: 1;
	background-size:cover;
	background-position: center center;
	overflow: hidden;
}
.top-strong-1 {
	background-image:url(../images/bg-top-strong-1n.webp);
}
.top-strong-2 {
	background-image:url(../images/bg-top-strong-2n.webp);
}
.top-strong-1:before {
	content:"";
	position: absolute;
	width:100%;
	height:100%;
	background: linear-gradient(0deg,rgba(0, 0, 0, 0.01) 50%, rgba(0, 103, 168, 0.5) 100%);
}
.top-strong p {
	position: relative;
	z-index: 10;
	font-weight:700;
}
.top-strong-1 p {
	color:var(--color-white);
}
.top-strong-2-copy {
	position: absolute;
}
.top-strong-2-copy span,
.top-strong-2-copy h3 {
	display: inline-block;
	font-weight:700;
	background:linear-gradient(transparent 30%, rgba(255, 255,255,1) 30%);
	background-repeat: no-repeat;
	transition:background-size 1s;
	background-size: 0% 100%;
	font-feature-settings:"palt";
	line-height:150%;
	padding-left:1em;
	padding-right:0.5em;
}
.top-strong-2-copy.putactionon span,
.top-strong-2-copy.putactionon h3 {
	background-size: 100% 100%;
}
@media (width < 767px) {
	.top-sec-3 h2 {
		font-size:var(--font-sp-normal);
		width:33.3vw;
		height:33.3vw;
	}
	.top-sec-3 h2 span {
		font-size:10vw;
		padding-top:3vw;
	}
	.top-strong-1,
	.top-strong-2 {
		aspect-ratio: 3 / 4;
	}
	.top-strong-1 p {
		text-align: right;
		padding:8vw;
		line-height:150%;
		font-size:var(--font-sp-large);
	}
	.top-strong-2-copy {
		top:60%;
		transform: translateY(-70%);
		left:0;
	}
	.top-strong-2 span {
		font-size:var(--font-sp-x-large);
	}
	.top-strong-2 h3 {
		font-size:var(--font-sp-xxx-large);
	}
}
@media (768px <= width) {
	.top-sec-3 h2 {
		font-size:var(--font-pc-large);
		width:160px;
		height:160px;
	}
	.top-sec-3 h2 span {
		font-size:var(--font-pc-xxxx-large);
		padding-top:10px;
	}
	.top-strong-grid {
		display:grid;
		grid-template-columns: 1fr 1fr;
	}
	.top-strong-1,
	.top-strong-2 {
		aspect-ratio: 3 / 4;
	}
	.top-strong-1 p {
		font-size:var(--font-pc-x-large);
		font-weight: 700;
		padding:30px;
	}
	.top-strong-2-copy {
		bottom:40%;
		right:0;
		text-align: right;
	}
	.top-strong-2 span {
		font-size:var(--font-pc-large);
	}
	.top-strong-2 h3 {
		font-size:var(--font-pc-xxxx-large);
	}
}