@charset "UTF-8";

/* page-header */
@media all {
	.page-header {
		overflow: hidden;
		position: relative;
	}
	.page-header::after {
		content: '';
		position: absolute;
		bottom: -1rem;
		left: 0;
		display: block;
		width: 100%;
		background: center bottom / cover no-repeat;
	}
	.page-header-pic {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.page-header-text {position: relative;}

	.page-header-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
		color: #fff;
		letter-spacing: -.02em;
	}
	.page-header-ttl > small {display: block;}
	.page-header-lead > span {
		display: inline-flex;
		align-items: center;
		padding: 0 .5em 1rem;
		background-color: #fff;
		font-family: var(--lineseed);
		font-weight: bold;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.page-header {height: 370rem;}
		.page-header::after {
			height: 111rem;
			background-image: url(../img/common/page/header-line-sp.svg);
		}
		.page-header-text {
			margin: 118rem auto 0;
			width: 360rem;
		}
		.page-header-ttl {
			margin-top: 38rem;
			font-size: 28rem;
		}
		.page-header-ttl > small {
			margin: -14rem 0 12rem;
			font-size: 18rem;
		}
		.page-header-ttl + .page-header-lead {margin-top: 20rem;}
		.page-header-lead + .page-header-lead {margin-top: 8rem;}
		.page-header-lead > span {height: 22rem;}

	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.page-header {height: 560rem;}
		.page-header::after {
			height: 251rem;
			background-image: url(../img/common/page/header-line-pc.svg);
		}
		.page-header-text {
			margin: 140rem auto 0;
			width: 1000rem;
		}
		.page-header-ttl {
			margin-top: 65rem;
			font-size: 42rem;
		}
		.page-header-ttl > small {
			margin: -15rem 0 15rem;
			font-size: 28rem;
		}
		.page-header-ttl + .page-header-lead {margin-top: 36rem;}
		.page-header-lead + .page-header-lead {margin-top: 10rem;}
		.page-header-lead {font-size: 18rem;}
		.page-header-lead > span {height: 30rem;}
	}
}

/* main-section */
@media all {
	.page-main {overflow: clip;}
	.main-section-inner {position: relative;}
	.main-header-ttl {
		position: relative;
		font-family: var(--lineseed);
		font-weight: bold;
		letter-spacing: -.02em;
		padding-bottom: 1em;
		text-align: center;
	}
	.main-header-ttl::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: calc(50% - 1em);
		display: block;
		width: 2em;
		height: 3rem;
		background: linear-gradient(to right, #f00, #b507de, #00a2e7);
	}
	.main-header-ttl > small {display: block;}
	
	.content-btn-right {text-align: right;}
	.button > span {padding-left: 1em;}

	/* sp */
	@media only screen and (max-width: 767px) {
		:root {--txt-lineheight:2.285;}
		.main-header-ttl {
			padding-bottom: 30rem;
			font-size: 22rem;
		}
		.main-header-ttl > small {
			margin-bottom: 15rem;
			font-size: 16rem;
		}

		.main-content {margin-top: 30rem;}
		.main-content p {line-height: var(--txt-lineheight);}

		.main-section:has(.exam-info-card) {
			padding: 0;
		}

		.aside-card-top {margin-top: 40rem;}
		.exam-info-card {margin: 0 auto;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.main-section-inner {
			margin: 0 auto;
			width: 1000rem;
		}
		.main-section-inner.pc800 {width: 800rem;}
		.main-header-ttl {font-size: 28rem;}
		.main-header-ttl.pc-left {text-align: left;}
		.main-header-ttl.pc-left::after {left: 0;}
		.main-header-ttl > small {
			margin-bottom: 18rem;
			font-size: 20rem;
		}

		.main-content p {line-height: 2.5;}

		.pc-flex {
			display: flex;
			justify-content: space-between;
		}

		.deco.clip img {clip-path: polygon(7.7% 0, 100% 0, 92.3% 100%, 0 100%);}

		/* pc */
		@media (min-width: 1025px) {
			.page-main {min-width: 1280px;}
		}
	}
}



/* rainbow-text */
@media all {
	.rainbow-text {
		background: linear-gradient(to right top, #f00, #b507de, #00a2e7 var(--rainbow-text-end));
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}

/* belt-img */
@media all {
	.belt-img {
		display: block;
		width: 100%;
	}
	.belt-img img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.belt-img {height: 180rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.belt-img {height: 280rem;}
	}
}


/* data-section */
@media all {
	aside .data-section-inner {background-color: var(--bg-lightblue);}

	/* sp */
	@media only screen and (max-width: 767px) {
		aside.data-section {padding: 60rem 25rem 0;}
		aside .data-section-inner {
			padding-top: 190rem;
		}
		aside .data-header-ttl {
			padding-bottom: 16rem;
			font-size: 22rem;
			line-height: 36rem;
		}
		aside .data-content {
			margin-top: 30rem;
			padding: 0 20rem 40rem;
		}
		aside .data-content > p {line-height: 32rem;}
		aside .data-content-btn {
			position: absolute;
			bottom: -24rem;
			right: 30rem;
			width: 235rem;
			height: 48rem;
		}

		aside .deco-data {
			top: 0;
			left: 0;
			width: 100%;
			height: 160rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		aside.data-section {padding: 80rem 0;}
		aside .data-section-inner {
			margin: 0 auto;
			padding: 45rem 30rem;
			width: 880rem;
			height: 325rem;
		}
		aside .data-header-ttl {
			font-size: 28rem;
			line-height: 45rem;
		}
		aside .data-content {margin-top: 30rem;}
		aside .data-content > p {line-height: 2.5;}
		aside .data-content-btn {
			position: absolute;
			bottom: -30rem;
			right: calc(50% + 25rem);
			width: 270rem;
			height: 60rem;
		}

		aside .deco-data {
			top: 0;
			right: 0;
			width: 420rem;
			height: 100%;
			clip-path: polygon(33rem 0, 100% 0, 100% 100%, 0 100%);
		}
	}
}


/* button balloon  */
@media all {
	.with-balloon {
		display: flex;
		flex-direction: column;
	}
	.balloon {
		position: relative;
		display: inline-block;
		font-weight: bold;
		color: var(--main-blue);
		text-align: center;
	}
	.balloon::before,
	.balloon::after {
		content: '';
		position: absolute;
		top: 0;
		display: block;
		width: 3rem;
		height: 2.43em;
		background: linear-gradient(to bottom, #f00, #b507de, #00a2e7);
		transform-origin: center top;
	}
	.balloon::before {
		left: 0;
		transform: rotate(-45deg);
	}
	.balloon::after {
		right: 0;
		transform: rotate(45deg);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.balloon {
			margin-bottom: 16rem;
			font-size: 12rem;
			padding: 0 1.5em;
			min-width: 160rem;
		}
		.balloon::before,
		.balloon::after {width: max(1.5px, 1.5rem);}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.balloon {
			margin-bottom: 20rem;
			font-size: 14rem;
		}
	}
}

/* youtube iframe */
@media all {
	div.youtube > iframe {
		width: 100%;
		height: 100%;
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		div.youtube {
			margin: 0 auto;
			width: 350rem;
			height: 196.875rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		div.youtube {
			margin: 0 auto;
			width: 640rem;
			height: 360rem;
		}
	}
}




/* template-section */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {}

	/* pc & tab */
	@media print,
	(min-width: 768px) {}
}