@charset "UTF-8";

/* app-section */
@media all {
	.app-dl {
		display: flex;
		flex-wrap: wrap;
	}
	.app-dt {
		padding: 3rem;
		font-weight: bold;
		text-align: center;
	}
	.app-dt p {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		background : linear-gradient(-60deg, rgba(0, 97, 162, 1) 31.71%, rgba(0, 139, 194, 1) 100%);
		border-radius: 5rem;
		color: #fff;
		line-height: 1.5;
	}
	.app-dd {border-top: 2rem dotted var(--table-lightblue);}
	.app-dl .app-dd:last-child {border-bottom: 2rem dotted var(--table-lightblue);}
	.button.app-required-notice::before,
	.button.app-required-notice > span {border-radius: 10em;}
	.app-required-list {
		display: flex;
		flex-wrap: wrap;
	}
	.button.app-required-notice > span,
	.app-dd .button {
		padding-left: 0;
		justify-content: center;
	}
	.app-required-item::before {
		content: '●';
		display: inline-block;
		margin-right: 1em;
		color: var(--main-red);
		font-size: 50%;
		transform: translateY(-.25em);
	}

	.app-required-check-btn {
		display: flex;
		align-items: center;
	}
	.btn-deco {
		position: relative;
		font-weight: bold;
		color: var(--main-blue);
	}
	.btn-deco::before,
	.btn-deco::after {
		content: '';
		position: absolute;
		display: block;
		width: 27rem;
		height: 2rem;
		background: linear-gradient(to left, #f00, #b507de, #00a2e7);
		transform-origin: left center;
	}

	.app-range-img-btn {
		display: flex;
		align-items: flex-end;
	}
	.app-notice-list {
		margin-top: 1em;
		line-height: 1.5;
	}
	.app-notice-item {color: var(--table-lightblue);}
	.app-notice-item.red {color: var(--main-red);}
	.app-notice-item + .app-notice-item {margin-top: .5em;}

	.application-aside {text-align: center;}
	.application-aside .button {justify-content: center;}
	.application-aside .button > span {padding: 0;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.app-section {margin-top: 30rem;}

		.app-dl {margin-top: 30rem;}
		.app-dt {
			width: 70rem;
			font-size: 13rem;
		}
		.app-dt p {font-weight: 400;}
		.app-dd {
			padding: 10rem 0 10rem 15rem;
			width: calc(100% - 70rem);
			font-size: 14rem;
			line-height: 32rem;
		}

		.app-dd .button.app-required-notice {
			width: 260rem;
			height: 26rem;
		}
		.app-required-list {margin-top: 15rem;}
		.app-required-item {
			width: 50%;
			line-height: 1.9;
		}

		.app-required-check-btn {margin: 30rem 0 10rem;}
		.app-dd .button {
			width: 124rem;
			height: 36rem;
		}
		.btn-deco {
			padding-left: 28rem;
			font-size: 12rem;
			line-height: 18rem;
		}
		.btn-deco::before,
		.btn-deco::after {left: 24rem;}
		.btn-deco::before {
			top: 0;
			rotate: -25deg;
		}
		.btn-deco::after {
			bottom: 0;
			rotate: 25deg;
		}


		.app-range-img-btn {margin-top: 10rem;}
		.app-range-img-btn > img {
			margin-right: 20rem;
			width: 110rem;
		}

		.app-notice-list {
			margin-top: 0;
			font-size: 12rem;
			line-height: 22rem;
		}
		.app-notice-item + .app-notice-item {margin-top: 0;}

		.application-aside,
		.cbt-exam-btn {margin: 80rem auto;}
		.application-aside .button,
		.cbt-exam-btn .button {
			width: 250rem;
			height: 60rem;
			font-size: 16rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		section.main-section {margin-top: 100rem;}

		.app-dl {margin-top: 50rem;}
		.app-dt {
			width: 180rem;
		}
		.app-dd {
			padding: 22rem 20rem;
			width: calc(100% - 180rem);
		}

		.app-dd .button.app-required-notice {
			width: 300rem;
			height: 30rem;
		}

		.app-required-list {margin-top: 20rem;}
		.app-required-item {
			width: 192rem;
			line-height: 2;
		}

		.app-dd .button {
			width: 200rem;
			height: 40rem;
		}

		.app-required-check-btn {margin-top: 50rem;}
		.btn-deco {
			padding-left: 40rem;
			font-size: 14rem;
			line-height: 22rem;
		}
		.btn-deco::before,
		.btn-deco::after {left: 28rem;}
		.btn-deco::before {
			top: 0;
			rotate: -25deg;
		}
		.btn-deco::after {
			bottom: 0;
			rotate: 25deg;
		}
		.lineheight > p {line-height: 2.5;}

		.app-range-img-btn {margin-top: 20rem;}
		.app-range-img-btn > img {
			margin-right: 20rem;
			width: 142rem;
		}

		.app-notice-list {font-size: 14rem;}

		.application-aside {margin: 100rem auto;}
		.application-aside .button {
			width: 320rem;
			height: 80rem;
			font-size: 20rem;
		}
		
	}
}

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

	.flow-item {background-color: #fff;}
	.flow-item-no,
	.flow-item-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
	}
	.flow-item-no {
		position: relative;
		display: inline-block;
		--rainbow-text-end: 85%;
	}
	.flow-item-no::after {
		content: '●';
		position: absolute;
		z-index: 3;
		left: 50%;
		color: #00a2e7;
	}
	.flow-item:nth-child(2) .flow-item-no::after {color: #5b54e2;}
	.flow-item:nth-child(3) .flow-item-no::after {color: #b507de;}
	.flow-item:nth-child(4) .flow-item-no::after {color: #d90472;}
	.flow-item:nth-child(5) .flow-item-no::after {color: #f00;}

	.flow-item-period {
		font-weight: bold;
		color: var(--main-blue);
	}
	.flow-item-txt a {text-decoration: underline;}

	.flow-item .flow-line {
		position: absolute;
		z-index: 1;
		display: block;
		height: max(1px, 1rem);
		background: #999;
		width: 0;
		transition: width .25s;
	}
	.flow-item:nth-child(1) .flow-line {
		background: linear-gradient(to right, #00a2e7, #5b54e2);
	}
	.flow-item:nth-child(2) .flow-line {
		background: linear-gradient(to right, #5b54e2, #b507de);
	}
	.flow-item:nth-child(3) .flow-line {
		background: linear-gradient(to right, #b507de, #d90472);
	}
	.flow-item:nth-child(4) .flow-line {
		background: linear-gradient(to right, #d90472, #f00);
	}

	/* sp */
	@media only screen and (max-width: 767px) {
		.flow-section {padding: 60rem 25rem;}

		.flow-list {margin-top: 40rem;}

		.flow-item {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex-wrap: wrap;
			padding-left: 10rem;
			border-radius: 7rem;
			height: 100rem;
		}
		.flow-item + .flow-item {margin-top: 15rem;}
		.flow-item-no {
			margin-right: 50rem;
			padding: 32.5rem 0;
			width: 50rem;
			font-size: 35rem;
		}
		.flow-item-no::after {
			top: 45rem;
			left: 62rem;
			font-size: 15rem;
		}
		.flow-item-ttl,
		.flow-item-period,
		.flow-item-txt {width: calc(100% - 100rem);}

		.flow-item-period,
		.flow-item-txt {padding-left: 18rem;}
		.flow-item-ttl {
			margin-top: 5rem;
			font-size: 18rem;
		}
		.flow-item-img {
			position: absolute;
			top: 14rem;
			right: -10rem;
			width: 90rem;
			height: 85rem;
		}

		.flow-item-period {margin-top: 3rem;}
		.flow-item-period p {margin-top: 10rem;}
		.flow-item-period p:not(:first-child) {display: inline-block;}

		.flow-item-txt {
			margin-top: 6rem;
			line-height: 24rem;
		}


		.flow-item .flow-line {
			top: 50rem;
			left: 69rem;
			transition-timing-function: ease;
			transition: width .75s;
			transform: rotate(90deg);
			transform-origin: left center;
		}
		.flow-line.animated {width: 120rem;}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.flow-section {
			padding: 60rem 0 80rem;
			text-align: center;
		}

		.flow-list {
			display: flex;
			justify-content: space-between;
			margin-top: 50rem;
		}

		.flow-item {
			padding-top: 25rem;
			border-radius: 10rem;
			width: 185rem;
			height: 320rem;
		}
		.flow-item-no {font-size: 40rem;}
		.flow-item-no::after {
			bottom: -43rem;
			font-size: 15rem;
		}
		.flow-line {
			bottom: -36rem;
			left: calc(50% + 8rem);
			transition-timing-function: linear;
		}
		.flow-item:nth-child(1) .flow-line {
			transition-timing-function: ease-in;
			transition-duration: .3s;
		}
		.flow-item:nth-child(2) .flow-line {transition-delay: .3s;}
		.flow-item:nth-child(3) .flow-line {transition-delay: .55s;}
		.flow-item:nth-child(4) .flow-line {
			transition-delay: .8s;
			transition-duration: .3s;
			transition-timing-function: ease-out;
		}
		.flow-line.animated {width: 200rem;}
		.flow-item-ttl {
			margin-top: 70rem;
			margin-bottom: 30rem;
			font-size: 22rem;
		}
		.flow-item-period > p {
			font-size: 18rem;
			line-height: 32rem;
			white-space: nowrap;
		}
		.pc-90deg {rotate: 90deg;}
		.flow-item-img img {
			margin-top: 10rem;
			width: 150rem;
		}
		.flow-item-txt {line-height: 28rem;}
		.flow-item-txt a {transition: opacity .3s;}
		.flow-item-txt a:hover {opacity: .7;}
	}
}

/* cbt-section */
@media all {
	.cbt-content-ttl {
		font-family: var(--lineseed);
		font-weight: bold;
		color: var(--main-blue);
	}

	.cbt-exam-btn {text-align: center;}
	.cbt-exam-btn .button {justify-content: center;}

	/* sp */
	@media only screen and (max-width: 767px) {
		.cbt-section {padding: 60rem 0 0;}
		.cbt-content-ttl {
			font-size: 20rem;
			text-align: center;
		}
		.cbt-content-txt {
			margin-top: 30rem;
			padding: 0 25rem;
		}
		.cbt-content-pc_right {
			display: block;
			margin-top: 40rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.cbt-section {margin-top: 80rem;}
		.cbt-content {
			display: flex;
			justify-content: space-between;
			margin-top: 50rem;
		}
		.cbt-content-pc_left {width: 520rem;}
		.cbt-content-ttl {font-size: 22rem;}
		.cbt-content-txt {margin-top: 20rem;}
		.cbt-content-txt > p {line-height: 2.5;}
		
		.cbt-content-pc_right {
			width: 420rem;
			clip-path: polygon(28rem 0, 100% 0, 100% 100%, 0 100%);
		}
		.cbt-exam-btn {margin: 100rem 0;}
		.cbt-exam-btn .button {
			width: 320rem;
			height: 80rem;
			font-size: 20rem;
		}
	}
}

/* exam-section */
@media all {
	.exam-section {margin-top: 0;}
	.exam-section-inner {
		position: relative;
		background-color: #fff;
	}
	.exam-section-header {position: relative;}
	.exam-ttl-notice {
		position: absolute;
		top: 1em;
		right: 1em;
		color: var(--txt-gray);
	}
	.exam-item {
		overflow: hidden;
		position: relative;
		background-color: #fff;
	}
	.exam-item-ttl {
		display: flex;
		align-items: center;
	}
	.q-num {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 600;
		color: #fff;
	}
	.q-num-xx {
		display: inline-block;
		margin-left: .25em;
		padding-right: .5em;
		font-family: var(--montserrat);
	}
	.q-ttl {
		display: inline-block;
		margin-left: .5em;
	}
	.a-list {
		counter-reset: cnt;
		padding-top: 1.5em;
		padding-left: 1.25em;
	}
	.a-item {
		counter-increment: cnt;
		position: relative;
		padding-left: 1.25em;
	}
	.a-item::before {
		content: counter(cnt) '.';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
	}

	.exam-item-content, .answer-content {display: none;}
	.exam-item-opener {position: absolute;}

	/* pass-status SP にも流用 */
	.answer-button {
		position: relative;
		display: block;
		margin: 0 auto;
		border: none;
		border-radius: 10em;
	}
	.button.answer-button::after {content: none;}
	.answer-button > span {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 10em;
		background-color: #fff;
		color: var(--txt);
	}

	.answer-content {background-color: #fdf2f3;}
	.answer-detail {
		position: relative;
		padding-left: 1.5em;
	}
	.answer-no {
		position: absolute;
		top: 0;
		left: 0;
	}

	.exam-content-btn,
	.data-content-btn  {
		position: absolute;
		z-index: 10;
	}
	
	/* sp */
	@media only screen and (max-width: 767px) {
		.exam-section {padding: 60rem 0;}
		.exam-section-inner {
			padding: 70rem 25rem 40rem;
			box-shadow: 3rem 2rem 3rem rgba(0,0,0,.15);
		}
		.exam-ttl-notice {
			position: absolute;
			top: -25rem;
			right: 0;
			font-size: 11rem;
		}

		.exam-content {margin-top: 35rem;}

		.exam-item {
			border-radius: 7rem;
			box-shadow: 2rem 2rem 6rem 0rem rgba(0,0,0,.3);
		}
		.exam-item + .exam-item {margin-top: 12rem;}
		.exam-item-opener {
			aspect-ratio: unset;
			top: 14rem;
			right: 10rem;
			width: 20rem;
			height: 20rem;
		}

		.q-ttl {
			padding-right: 2.5em;
			font-size: 16rem;
			line-height: 1.2;
		}
		.q-ttl .sp-small {
			display: inline-block;
			font-size: 14rem;
			padding-right: 1em;
		}
		.q-num {
			flex-shrink: 0;
			width: 90rem;
			height: 48rem;
			font-size: 12rem;
			clip-path: polygon(0 0, 100% 0, calc(100% - 13rem) 100%, 0 100%);
		}
		.q-num-xx {font-size: 16rem;}
		.q-text, .a-list, .answer-content {
			padding: 0 15rem;
			line-height: 2;
		}
		.q-text {margin-top: 20rem;}
		.a-list {
			margin-top: 10rem;
			padding-left: 2em;
		}

		/* pass-status SP にも流用 */
		.answer-button {
			margin: 20rem auto;
			width: 160rem;
			height: 36rem;
			box-shadow: 3rem 2rem 3rem rgba(0,0,0,.3);
		}
		.answer-button > span {
			top: max(1px, 1rem);
			left: max(1px, 1rem);
			padding-right: 1.5em;
			width: calc(100% - max(2px, 2rem));
			height: calc(100% - max(2px, 2rem));
		}
		.answer-button .open-close {
			right: 7rem;
			width: 18rem;
			height: 18rem;
			font-size: 12rem;
		}
		.answer-content {
			margin: 0 auto 30rem;
			width: 320rem;
			padding: 15rem;
		}

		.exam-content-btn,
		.data-content-btn {
			left: calc(50% - 100rem);
			bottom: -23rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {
		.exam-section {padding: 100rem 0 120rem;}
		.exam-section-inner {
			margin: 0 auto;
			padding: 70rem 80rem 80rem;
			width: 1000rem;
			box-shadow: 5rem 5rem 5rem rgba(0,0,0,.15);
		}
		.exam-section-header {
			margin: 0 auto;
			width: 660rem;
		}
		.exam-section-ttl {font-size: 28rem;}
		.exam-ttl-notice {
			top: -25rem;
			font-size: 12rem;
		}

		.exam-content {margin-top: 60rem;}

		.exam-item {
			border-radius: 10rem;
			box-shadow: 3rem 2rem 5rem 2rem rgba(0,0,0,.3);
		}
		.exam-item + .exam-item {margin-top: 20rem;}
		.exam-item-ttl:hover {cursor: pointer;}
		.exam-item-opener {
			top: 15rem;
			right: 15rem;
			width: 30rem;
			height: 30rem;
			transition: opacity .3s;
		}
		.exam-item-opener:hover {
			cursor: pointer;
			opacity: .8;
		}

		.q-ttl {font-size: 22rem;}
		.q-num {
			width: 145rem;
			height: 60rem;
			font-size: 16rem;
			clip-path: polygon(0 0, 100% 0, calc(100% - 20rem) 100%, 0 100%);
		}
		.q-num-xx {font-size: 32rem;}
		.q-text, .a-list, .answer-content, .q-img {
			margin: 0 auto;
			width: 740rem;
			line-height: 2.125;
		}
		.q-img {margin-top: 1em;}

		.q-text {margin-top: 30rem;}

		.answer-button {
			margin: 30rem auto;
			width: 200rem;
			height: 40rem;
			box-shadow: 3rem 2rem 3rem rgba(0,0,0,.3);
			transition: opacity .3s;
		}
		.answer-button:hover {
			opacity: .7;
			cursor: pointer;
		}
		.answer-button > span {
			top: max(1px, 1rem);
			left: max(1px, 1rem);
			padding-left: 0;
			padding-right: 1em;
			width: calc(100% - max(2px, 2rem));
			height: calc(100% - max(2px, 2rem));
			transition: .3s;
		}
		.answer-button .open-close {
			right: 8rem;
			width: 20rem;
			height: 20rem;
			font-size: 13rem;
		}
		
		.answer-content {
			margin-bottom: 40rem;
			padding: 20rem 30rem;
		}

		.exam-content-btn {
			left: calc(50% - 100rem);
			bottom: -30rem;
		}

	}
}





/* etc. */
@media all {

	/* sp */
	@media only screen and (max-width: 767px) {
		aside.data-section {
			padding: 80rem 25rem 190rem;
		}
	}

	/* pc & tab */
	@media print,
	(min-width: 768px) {.site-footer {margin-top: 70rem;}}
}

/* template-section */
@media all {

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

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