@charset "UTF-8";

/* common */
#pageHeader hgroup::before {
	background-image: url(../images/icon_guideline.svg);
}
#information {
	overflow: hidden;
	border: solid var(--color-orange);
	.title {
		color: #fff;
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-orange);
		&::before {
			content: "";
			display: block;
			aspect-ratio: 1 / 1;
			background: url(../images/guideline/icon_megaphone_w.svg) no-repeat center center;
			background-size: 100%;
		}
	}
	#infoBox {
		display: flex;
		dl { display: flex; }
		dt {
			color: #fff;
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: center;
			aspect-ratio: 1 / 1;
			border-radius: 50%;
			background-color: var(--color-orange);
		}
	}
}
#pastLink {
	a {
		color: #fff;
		width: fit-content;
		margin-inline: auto;
		background-color: var(--color-brown);
		&::after {
			background-color: #fff;
			background-image: url(../images/arrow_orange.svg);
		}
	}
}
@media screen and (min-width:769px), print{
	#information {
		margin-top: 50px;
		border-width: 4px;
		border-radius: 20px;
		.title {
			height: 90px;
			font-size: 30px;
			padding-block: 4px;
			&::before {
				width: 61px;
				margin-right: 38px;
			}
		}
		#infoBox {
			padding-block: 33px 43px;
			justify-content: center;
			dl { align-items: center; }
			dl + dl { margin-left: 80px; }
			dt {
				width: 121px;
				font-size: 20px;
			}
			dd {
				font-size: 18px;
				line-height: 34px;
				margin-left: 45px;
			}
		}
	}
	#pastLink {
		margin-top: 50px;
		a {
			height: 80px;
			font-size: 20px;
			padding-inline: 50px 30px;
			&::after { margin-left: 25px; }
		}
	}
}
@media screen and (max-width:768px){
	#information {
		margin-top: 24px;
		border-width: 2px;
		border-radius: 10px;
		.title {
			height: 53px;
			padding-block: 2px;
			&::before {
				width: 29px;
				margin-right: 12px;
			}
		}
		#infoBox {
			flex-direction: column;
			padding: 17px 17px 27px;
			dl + dl { margin-top: 16px; }
			dt {
				height: 60px;
				font-size: 13px;
				line-height: 15px;
				align-self: flex-start;
			}
			dd {
				font-size: 12px;
				line-height: 23px;
				margin-left: 15px;
				letter-spacing: 0.05em;
				align-self: center;
			}
		}
	}
	#pastLink {
		margin-top: 30px;
		a {
			height: 60px;
			font-size: 13px;
			padding-inline: 30px 16px;
			&::after { margin-left: 22px; }
		}
	}
}

/* main */
.main {
	#introText { color: var(--color-brown); }
	#information {
		color: var(--color-orange);
		font-weight: 700;
		display: flex;
		align-items: center;
		justify-content: center;
		&::before {
			content: "";
			display: block;
			aspect-ratio: 1 / 1;
			background: url(../images/guideline/icon_megaphone_o.svg) no-repeat center center;
			background-size: 100%;
		}
	}
	#pageLinks {
		.image img { background-color: var(--color-beige); }
		.text {
			dt {
				color: var(--color-orange);
				font-weight: 700;
			}
			dd { color: var(--color-brown); }
		}
		.link a {
			color: #fff;
			box-sizing: border-box;
			justify-content: space-between;
			background-color: var(--color-orange);
			&::after {
				background-color: #fff;
				background-image: url(../images/arrow_brown.svg);
			}
		}
	}
	#badExamples {
		background-color: #efefef;
		.exTitle {
			color: var(--color-brown);
			font-weight: 700;
			text-align: center;
		}
		.list {
			li {
				display: flex;
				align-items: flex-start;
				letter-spacing: 0.15em;
				background-color:#fff;
				&::before {
					content: "";
					display: block;
					flex-shrink: 0;
					background: url(../images/guideline/icon_bad_ex.svg) no-repeat center center;
					background-size: 100%;
					aspect-ratio: 1 / 1;
				}
			}
			li + li { margin-top: 2px; }
			dt {
				color: var(--color-orange);
				font-weight: 700;
			}
			dd {
				color: var(--color-brown);
			}
			p { margin: 10px 0 0 0 ; }
		}
	}
}
@media screen and (min-width:769px), print{
	.main {
		#introText {
			font-size: 26px;
			line-height: 50px;
			text-align: center;
		}
		#information {
			height: 125px;
			font-size: 30px;
			&::before {
				width: 61px;
				margin-right: 35px;
			}
		}
		#pageLinks ul {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			grid-template-rows: auto;
			margin-top: 100px;
			li {
				display: grid;
				grid-template-rows: subgrid;
				grid-row: span 3;
				.image img { border-radius: 20px; }
				.text {
					dt {
						font-size: 30px;
						margin-top: 37px;
					}
					dd {
						font-size: 18px;
						line-height: 30px;
						margin-top: 8px;
					}
				}
				.link a {
					width: 375px;
					height: 100px;
					font-size: 20px;
					margin-top: 55px;
					padding-inline: 45px 30px;
					&:hover {
						background-color: var(--color-brown);
						&::after {
							background-image: url(../images/arrow_orange.svg);
						}
					}
				}
			}
			li + li { border-left: 1px solid #a0a0a0; }
			li:first-child { padding-right: 50px; }
			li:last-child { padding-left: 50px; }
		}
		#badExamples {
			margin-top: 115px;
			border-radius: 20px;
			padding: 50px 80px 55px;
			.exTitle {
				font-size: 28px;
			}
			.list {
				margin-top: 45px;
				li {
					padding: 35px 45px 35px 35px;
					&::before {
						width: 36px;
						margin-right: 30px;
					}
					dt {
						font-size: 20px;
						margin-top: 3px;
					}
					dd {
						font-size: 18px;
						line-height: 30px;
						margin-top: 15px;
					}
				}
			}
		}
	}
}
@media screen and (max-width:768px){
	.main {
		#introText {
			font-size: 14px;
			line-height: 38px;
		}
		#information {
			height: 76px;
			font-size: 17px;
			margin-top: 40px;
			&::before {
				width: 37.5px;
				margin-right: 13px;
			}
		}
		#pageLinks {
			margin-top: 7px;
			li + li { border-top: 1px solid #a0a0a0; }
			li {
				padding-block: 30px;
				.image img { border-radius: 10px; }
				.text {
					padding-inline: 10px;
					dt {
						font-size: 17px;
						margin-top: 15px;
					}
					dd {
						font-size: 12px;
						line-height: 24px;
						margin-top: 8px;
					}
				}
				.link {
					padding-inline: 10px;
					a {
						width: 250px;
						height: 60px;
						font-size: 13px;
						margin-top: 24px;
						padding-inline: 30px 16px;
					}
				}
			}
		}
		#badExamples {
			border-radius: 10px;
			margin-top: 20px;
			padding: 28px 10px 30px;
			.exTitle {
				font-size: 17px;
			}
			.list {
				margin-top: 25px;
				li {
					padding: 17px 16px 27px;
					&::before {
						width: 25px;
						margin-top: 4px;
						margin-right: 20px;
					}
					dt {
						font-size: 15px;
						line-height: 23px;
					}
					dd {
						font-size: 12px;
						line-height: 24px;
						margin-top: 4px;
					}
				}
			}
		}
	}
}

/* disability */
.disability .firstText {
	color: var(--color-brown);
	text-align: center;
}
@media screen and (min-width:769px), print{
	.disability .firstText { font-size: 20px; }
}
@media screen and (max-width:768px){
	.disability .firstText {
		font-size: 15px;
		line-height: 30px;
	}
}

/* scholarship */
.scholarship #purpose {
	color: var(--color-brown);
}
@media screen and (min-width:769px), print{
	.scholarship #purpose {
		font-size: 21px;
		line-height: 40px;
		text-align: center;
	}
}
@media screen and (max-width:768px){
	.scholarship #purpose {
		font-size: 15px;
		line-height: 30px;
		dt { text-align: center; }
	}
}

#application {
	color: var(--color-brown);
	.applyTitle {
		font-weight: 700;
		&::before {
			content: "";
			border-radius: 50%;
			display: inline-block;
			vertical-align: middle;
			aspect-ratio: 1 / 1;
			background-color: var(--color-orange);
		}
	}
	.columnsTitle { font-weight: 700; }
	.columns {
		#details {
			& > section {
				position: relative;
				background-color: var(--color-beige);
				&:not(:first-child)::before, &:not(:last-child)::after {
					content: "";
					z-index: 0;
					display: block;
					position: absolute;
				}
				&:not(:last-child)::after { bottom: 0; }
			}
			& > section + section {
			}
			.title {
				display: flex;
				align-items: center;
				position: relative;
				z-index: 1;
				font-weight: 700;
				&::before {
					content: "";
					flex-shrink: 0;
					aspect-ratio: 19 / 17;
					display: block;
					background: no-repeat left center;
					background-size: auto 100%;
				}
				.important {
					color: #fff;
					flex-shrink: 0;
					background-color: var(--color-orange);
				}
			}
			#flow01 .title::before { background-image: url(../images/guideline/num01.webp); }
			#flow02 .title::before { background-image: url(../images/guideline/num02.webp); }
			#flow03 .title::before { background-image: url(../images/guideline/num03.webp); }
			#flow04 .title::before { background-image: url(../images/guideline/num04.webp); }
			#flow05 .title::before { background-image: url(../images/guideline/num05.webp); }
			#flow06 .title::before { background-image: url(../images/guideline/num06.webp); }
			#flow07 .title::before { background-image: url(../images/guideline/num07.webp); }
			#flow08 .title::before { background-image: url(../images/guideline/num08.webp); }
			#flow09 .title::before { background-image: url(../images/guideline/num09.webp); }
			#flow10 .title::before { background-image: url(../images/guideline/num10.webp); }
			#flow11 .title::before { background-image: url(../images/guideline/num11.webp); }
			#flow12 .title::before { background-image: url(../images/guideline/num12.webp); }
			.title:not([id^="flow0"] .title)::before {
				aspect-ratio: 43 / 23;
			}
			.links {
				a {
					color: #fff;
					display: flex;
					align-items: center;
					background-color: var(--color-orange);
					&::before {
						content: "";
						display: block;
						aspect-ratio: 1 / 1;
						background: no-repeat center center;
						background-size: auto 100%;
					}
					&:hover { background-color: var(--color-brown); }
				}
				.pdf a::before { background-image: url(../images/icon_pdf.svg); }
				.excel a::before { background-image: url(../images/icon_excel.svg); }
			}
			.list {
				& > li {
					display: grid;
					grid-template-rows: subgrid;
					grid-row: span 3;
					gap: 0;
					.image img { width: 100%; }
				}
				.name {
					font-weight: 700;
					color: var(--color-orange);
				}
			}
			.checkList {
				border-style: solid;
				background-color: #fff;
				.checkListItems li {
					position: relative;
					&::before, &::after {
						content: "";
						display: block;
						position: absolute;
						aspect-ratio: 1 / 1;
					}
					&::before { border: solid #c7c5b5; }
					&::after {
						background: url(../images/guideline/checkmark.svg) no-repeat center center;
						background-size: 100%;
					}
					.number {
						text-indent: 0;
						display: inline-block;
					}
				}
			}
			.zip {
				display: flex;
				align-items: top;
				justify-content: flex-end;
				&::after {
					content: "";
					display: block;
					border-radius: 50%;
					aspect-ratio: 1 / 1;
					background: url(../images/guideline/icon_zip.svg) var(--color-orange) no-repeat center center;
					background-size: auto 56%;
					flex-shrink: 0;
					position: relative;
					z-index: 2;
				}
			}
			.contents dt { font-weight: 900; }
			.ribbonBox {
				color: #fff;
				text-align: center;
				background-color: var(--color-brown);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
.disability #application {
	#summary .active a,
	#details .title,
	#details > section:not(:first-child)::before,
	#details > section:not(:last-child)::after { background-color: #b3cc66; }
	#details .checkList { border-color: #b3cc66; }
	#summary .active a::after { border-top-color: #b3cc66; }
}
.scholarship #application {
	#summary .active a,
	#details .title,
	#details > section:not(:first-child)::before,
	#details > section:not(:last-child)::after { background-color: #e8c567; }
	#details .checkList { border-color: #e8c567; }
	#summary .active a::after { border-top-color: #e8c567; }
}
@media screen and (min-width:769px), print{
	#application {
		margin-top: 135px;
		.applyTitle {
			font-size: 32px;
			&::before {
				width: 14px;
				margin-top: -6px;
				margin-right: 12px;
			}
		}
		.columnsTitle {
			font-size: 26px;
			margin-top: 60px;
		}
		.columns {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 25px;
			#summary {
				width: 260px;
				ol {
					top: 30px;
					position: sticky;
					li + li { margin-top: 16px; }
					a {
						display: flex;
						align-items: flex-start;
						font-weight: 700;
						line-height: 30px;
						position: relative;
						border-radius: 20px;
						padding: 15px 16px;
						background-color: var(--color-beige);
						&::before {
							content: "";
							height: 19px;
							display: block;
							margin-top: 4px;
							margin-right: 22px;
							aspect-ratio: 19 / 17;
							background: no-repeat left center;
							background-size: auto 100%;
							flex-shrink: 0;
						}
						&::after {
							content: "";
							top: 100%;
							left: 0;
							right: 0;
							width: 0;
							height: 0;
							display: block;
							position: absolute;
							margin-inline: auto;
							border-style: solid;
							border-width: 15px 13px 0;
							border-color: var(--color-beige) transparent transparent;
						}
						&:hover {
							color: #fff;
							background-color: var(--color-orange);
							&::before { background-position: right center; }
							&::after { border-top-color: var(--color-orange); }
						}
					}
					a[href$="01"]::before { background-image: url(../images/guideline/num01.webp); }
					a[href$="02"]::before { background-image: url(../images/guideline/num02.webp); }
					a[href$="03"]::before { background-image: url(../images/guideline/num03.webp); }
					a[href$="04"]::before { background-image: url(../images/guideline/num04.webp); }
					a[href$="05"]::before { background-image: url(../images/guideline/num05.webp); }
					a[href$="06"]::before { background-image: url(../images/guideline/num06.webp); }
					a[href$="07"]::before { background-image: url(../images/guideline/num07.webp); }
					a[href$="08"]::before { background-image: url(../images/guideline/num08.webp); }
					a[href$="09"]::before { background-image: url(../images/guideline/num09.webp); }
					a[href$="10"]::before { background-image: url(../images/guideline/num10.webp); }
					a[href$="11"]::before { background-image: url(../images/guideline/num11.webp); }
					a[href$="12"]::before { background-image: url(../images/guideline/num12.webp); }
					a:not([href^="#flow0"])::before { aspect-ratio: 39 / 21; }
					li:last-child a::after {
						content: none;
					}
				}
			}
			#details {
				width: calc(100% - 300px);
				& > section {
					border-radius: 20px;
					padding: 20px 20px 40px;
					&:not(:first-child)::before, &:not(:last-child)::after {
						width: 4px;
						left: 70px;
					}
					&:not(:first-child)::before {
						top: -30px;
						height: 50px;
					}
					&:not(:last-child)::after { top: 90px; }
					.title {
						font-size: 24px;
						padding: 17px 45px;
						border-radius: 35px;
						&::before {
							height: 25px;
							margin-right: 30px;
						}
						.important {
							font-size: 20px;
							border-radius: 10px;
							padding: 6px 22px;
							margin-inline: -5px 13px;
						}
					}
					.innerBox {
						padding-top: 30px;
						padding-left: 105px;
						& > * + * { margin-top: 25px; }
						.text {
							line-height: 34px;
							margin-right: 45px;
						}
						.links {
							display: flex;
							flex-wrap: wrap;
							li {
								margin-block: 5px;
								margin-right: 10px;
								a {
									font-size: 24px;
									padding: 22px 50px;
									border-radius: 20px;
									&::before {
										width: 33px;
										margin-right: 22px;
									}
									small { font-size: 18px; }
								}
							}
						}
						.list {
							display: grid;
							grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
							grid-template-rows: auto;
							gap: 30px 0;
							margin-right: 70px;
							li {
								/*&.thin { width: 155px; }*/
								/*&.wide { width: 300px; }*/
								.name {
									font-size: 14px;
									line-height: 20px;
									padding-right: 30px;
									&.line2 { height: 40px; }
									&.line3 { height: 60px; }
								}
								.image {
									margin-top: 12px;
									padding-right: 30px;
									img { box-shadow: 6px 6px 0 rgba(142,142,142,0.4); }
								}
								.note {
									font-size: 13px;
									line-height: 20px;
									margin-top: 18px;
								}
							}
						}
						.checkList {
							border-width: 4px;
							margin-right: 40px;
							margin-block: 35px 30px;
							border-radius: 20px;
							padding: 25px 45px 40px;
							.checkListTitle { font-size: 20px; }
							.checkListItems {
								line-height: 2;
								padding-left: 40px;
								li {
									margin-top: 20px;
									&::before {
										top: 5px;
										left: -42px;
										width: 19px;
										border-width: 2px;
									}
									&::after {
										top: 2px;
										left: -38px;
										width: 25px;
									}
								}
							}
						}
						&.zip {
							&::after {
								width: 196px;
								margin: -60px 40px 0 55px;
							}
						}
						.contents {
							line-height: 34px;
							dt { font-size: 18px; }
						}
					}
					.ribbonBox {
						height: 105px;
						font-size: 28px;
						margin: 55px -20px -40px;
						border-radius: 0 0 20px 20px;
					}
				}
				& > section + section { margin-top: 30px; }
			}
		}
	}
}
@media screen and (max-width:768px){
	#application {
		margin-top: 45px;
		.applyTitle {
			font-size: 19px;
			&::before {
				width: 9px;
				margin-top: -2px;
				margin-right: 7px;
			}
		}
		.columnsTitle {
			font-size: 17px;
			margin-top: 10px;
		}
		.columns {
			#summary { display: none; }
			#details {
				margin-top: 18px;
				& > section {
					border-radius: 10px;
					padding: 16px 9px 30px;
					&:not(:first-child)::before, &:not(:last-child)::after {
						width: 2px;
						left: 37px;
					}
					&:not(:first-child)::before {
						top: -20px;
						height: 36px;
					}
					&:not(:last-child)::after { top: 65px; }
					.title {
						height: 50px;
						font-size: 15px;
						line-height: 17px;
						padding-inline: 22px;
						border-radius: 25px;
						&::before {
							width: 19px;
							margin-top: 2px;
							margin-right: 10px;
						}
						.important {
							font-size: 13px;
							border-radius: 5px;
							margin-right: 10px;
							padding: 5px 10.5px;
						}
					}
					.innerBox {
						padding: 12px 20px 0 53px;
						& > * + * { margin-top: 17px; }
						.text {
							font-size: 12px;
							line-height: 24px;
						}
						.links {
							li + li { margin-top: 10px; }
							a {
								height: 60px;
								font-size: 14px;
								line-height: 19px;
								border-radius: 10px;
								padding-left: 19px;
								&::before {
									width: 25px;
									margin-right: 15px;
								}
							}
						}
						.list {
							display: grid;
							grid-template-columns: repeat(2, 1fr);
							grid-template-rows: auto;
							gap: 15px 0;
							margin-right: -30px;
							& > li {
								margin-right: 15px;
							}
							.name {
								font-size: 10.5px;
								line-height: 15px;
								letter-spacing: 0;
							}
							.image {
								margin-top: 11px;
								img {
									max-width: 116px;
									max-height: 165px;
									box-shadow: 3px 3px 0 rgba(142,142,142,0.4);
								}
							}
							.note {
								font-size: 10px;
								line-height: 14px;
								margin-top: 12px;
							}
							&.large {
								grid-template-columns: repeat(1, 1fr);
								img {
									max-width: none;
								}
							}
						}
						.checkList {
							border-width: 2px;
							border-radius: 10px;
							margin-top: 25px;
							margin-right: -20px;
							padding: 18px 5px 22px 20px;
							.checkListTitle { font-size: 14px; }
							.checkListItems {
								font-size: 12px;
								line-height: 20px;
								margin-top: 14px;
								padding-left: 30px;
								li {
									padding-left: 1.5em;
									text-indent: -1.5em;
									.number { width: 1.5em; }
									&::before {
										top: 2px;
										left: -30px;
										width: 15px;
										border-width: 1px;
									}
									&::after {
										top: 0;
										left: -27px;
										width: 18px;
									}
								}
								li + li { margin-top: 10px; }
							}
						}
						&.zip::after {
							height: 98px;
							margin-inline: 13px -11px;
						}
						.contents {
							font-size: 12px;
							line-height: 24px;
							dt { font-size: 13px; }
							dd { letter-spacing: 0; }
						}
					}
					.ribbonBox {
						height: 65px;
						font-size: 14px;
						margin: 32px -9px -30px;
						border-radius: 0 0 10px 10px;
					}
				}
				& > section + section { margin-top: 20px; }
			}
		}
	}
}