section.panel {
	padding: 40px 5% 0px 5%;
	@media (width < 550px) {
		padding: 40px 0% 0px 0%;
	}
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		> picture {
			padding-inline: 4%;
			grid-area: 1/1/2/2;
			@media (width < 550px) {
				padding-inline: 0%;
			}
			> img {
				width: 100%;
				max-width: 100%;
			}
		}
		> div {
			grid-area: 1/1/2/2;
			justify-self: start;
            align-self: center;
			@media (width < 550px) {
				padding-left: 2%;
			}
			> figure {
				> img {
					width: 28vw;
					@media (width < 550px) {
						width: 30vw;
					}
				}
			}
			> p {
				display: inline-block;
				padding-block: 2px 4px;
				padding-inline: 40px;
				margin-top: 10px;
				margin-right: 10%;
				text-align: center;
				background: linear-gradient(to right,#4065ff,#48edfc);
				font-size: min(1.1rem, 6vw);
				line-height: 1.5;
				color: #fff;
				white-space: nowrap;
			}
		}
	}
}
section.breadcrumbs {
	padding-inline: 8.5vw;
	@media (width < 550px) {
		padding-inline: 5vw;
	}
}
section.top {
	margin-top: 50px;
	background: url(./image/topbg_text.svg), var(--color-accent2);
	background-repeat: no-repeat;
	background-size: 35% auto;
	background-position: 50% -3%;
	padding: 60px 5% 60px 5%;
	@media (width < 800px) {
		background: url(./image/topbg_text.svg), var(--color-accent2);
		background-repeat: no-repeat;
		background-size: min(600px, 80%) auto;
		background-position: 50% -5px;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h3 {
			text-align: center;
			font-size: min(2rem,8vw);
			line-height: 1.5;
			color: #fff;
			font-weight: 700;
		}
		> p {
			text-align: center;
			margin-top: 30px;
			font-size: min(1.1rem, 5vw);
			line-height: 2.0;
			color: #fff;
			@media (width < 1080px) {
				text-align: justify;
				> br {
					display: none;
				}
			}
		}
	}
}
section.triangle {
	margin-top: -1px;
	display: flex;
	justify-content: center;
	> div {
		clip-path: polygon(100% 0, 0 0, 50% 100%);
		background-color: var(--color-accent2);
		height: 40px;
		width: 50px;
	}
}
section.link {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 40px;
		row-gap: 40px;
		> a {
			text-decoration: none;
			align-self: center;
			&:hover {
				opacity: 0.8;
			}
			> p {
				min-width: 280px;
				background-image: url(./image/link.svg);
				background-repeat: no-repeat;
				background-position: calc(100% - 20px) 50%;
				user-select: none;
				border-radius: 15px;
				text-align: center;
				padding: 30px 60px 30px 20px;
				background-color: var(--color-accent2);
				font-size: 1.1rem;
				line-height: 1.0;
				color: #fff;
			}
		}
	}
}
section.datatitle {
	padding: 0px 5% 0px 5%;
	> div {
		padding-block: 50px;
		max-width: 800px;
		margin-inline: auto;
		background-image: url(./image/double_parentheses01.svg),url(./image/double_parentheses02.svg);
		background-repeat: no-repeat;
		background-size: auto, auto;
		background-position: 0% 0%, 100% 100%;
		@media (width < 700px) {
			background-image: url(./image/double_parentheses01.svg),url(./image/double_parentheses02.svg);
			background-repeat: no-repeat;
			background-size: 20vw, 20vw;
			background-position: 0% 0%, 100% 100%;
		}
		> h2 {
			padding: 30px 5%;
			background-image: url(./image/data_text.svg);
			background-repeat: no-repeat;
			background-size: min(60%, 360px) auto;
			background-position: 50% 50%;
			text-align: center;
			font-size: min(3.2rem,9.5vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			@media (width < 700px) {
				padding: 5vw 2%;
			}
		}
		> p {
			text-align: center;
			font-size: 1.0rem;
			line-height: 1.0;
			color: #4d4d4d;
		}
	}
}
section.datacontent01 {
	padding: 100px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-rows: 2fr 1fr;
		row-gap: 20px;
		@media (width < 970px) {
			grid-template-rows: 4fr 1fr;
		}
		@media (width < 600px) {
			grid-template-rows: 6fr 2fr;
		}
		> div {
			column-gap: 20px;
			row-gap: 20px;
			&:nth-of-type(1) {
				display: grid;
				grid-template-columns: auto 1fr auto;
				justify-items: center;
				@media (width < 970px) {
					grid-template-columns: 1fr 1fr;
				}
			}
			&:nth-of-type(2) {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				@media (width < 970px) {
					display: grid;
					grid-template-columns: 1fr 1fr;
					justify-items: center;
				}
				@media (width < 600px) {
					grid-template-columns: 1fr;
				}
			}
			> article {
				padding: 20px;
				min-width: 260px;
				background-color: #ccecf2;
				border-radius: 15px;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-flow: column;
				@media (width < 970px) {
					&:nth-of-type(1) {
						justify-self: right;
					}
					&:nth-of-type(2) {
						justify-self: left;
					}
				}
				@media (width < 600px) {
					padding: 40px 20px;
					&:nth-of-type(1) {
						justify-self: center;
					}
					&:nth-of-type(2) {
						justify-self: center;
					}
				}
				> p {
					text-align: center;
					font-size: 1.2rem;
					line-height: 1.0;
					color: #222;
					font-weight: 700;
				}
				> h3 {
					margin-top: 10px;
					text-align: center;
					font-size: min(3.0rem, 14vw);
					line-height: 1.5;
					color: var(--color-accent2);
					font-weight: 700;
					> small {
						font-size: min(2.0rem, 10vw);
					}
				}
				> div {
					margin-top: 10px;
					width: 40px;
					height: 5px;
					background: linear-gradient(to right, #6dc8d9, #3f5fe4);	
				}
			}
			> div {
				display: grid;
				grid-template-rows: repeat(2,1fr);
				row-gap: 20px;
				&:nth-of-type(1) {
					@media (width < 970px) {
						order: 2;
						justify-self: right;
					}
					@media (width < 600px) {
						grid-area: 2/1/3/3;
						justify-self: center;
					}
				}
				&:nth-of-type(2) {
					@media (width < 970px) {
						order: 3;
						justify-self: left;
					}
					@media (width < 600px) {
						grid-area: 3/1/4/3;
						justify-self: center;
					}
				}
				> article {
					padding: 20px;
					min-width: 260px;
					background-color: #ccecf2;
					border-radius: 15px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: column;
					@media (width < 600px) {
						padding: 40px 20px;
					}
					> p {
						text-align: center;
						font-size: 1.2rem;
						line-height: 1.0;
						color: #222;
						font-weight: 700;
					}
					> h3 {
						text-align: center;
						font-size: min(3.0rem, 14vw);
						line-height: 1.5;
						color: var(--color-accent2);
						font-weight: 700;
						> small {
							font-size: min(2.0rem, 10vw);
						}
						&.nolineheight {
							line-height: 1.0;
						}
					}
					> h4 {
						text-align: center;
						font-size: 1.0rem;
						line-height: 1.0;
						color: var(--color-accent2);
						font-weight: 700;
					}
					> div {
						margin-top: 10px;
						width: 40px;
						height: 5px;
						background: linear-gradient(to right, #6dc8d9, #3f5fe4);	
					}
				}
			}
			> figure {
				align-self: center;
				@media (width < 970px) {
					grid-area: 1/1/2/3;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.datacontent02 {
	padding: 100px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			column-gap: 20px;
			row-gap: 20px;
			&:nth-of-type(1) {
				display: grid;
				grid-template-columns: auto 1fr auto;
				justify-items: center;
				@media (width < 970px) {
					grid-template-columns: 1fr 1fr;
				}
			}
			> div {
				display: grid;
				grid-template-rows: repeat(2,1fr);
				row-gap: 20px;
				&:nth-of-type(1) {
					@media (width < 970px) {
						order: 2;
						justify-self: right;
					}
					@media (width < 600px) {
						grid-area: 2/1/3/3;
						justify-self: center;
					}
				}
				&:nth-of-type(2) {
					@media (width < 970px) {
						order: 3;
						justify-self: left;
					}
					@media (width < 600px) {
						grid-area: 3/1/4/3;
						justify-self: center;
					}
					> article {
						grid-area: 1/1/3/2;
					}
				}
				> article {
					padding: 20px;
					min-width: 260px;
					background-color: #f6e5f1;
					border-radius: 15px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: column;
					@media (width < 600px) {
						padding: 40px 20px;
					}
					> p {
						text-align: center;
						font-size: 1.2rem;
						line-height: 1.0;
						color: #222;
						font-weight: 700;
					}
					> h3 {
						text-align: center;
						font-size: min(3.0rem, 14vw);
						line-height: 1.5;
						color: var(--color-accent2);
						font-weight: 700;
						> small {
							font-size: min(2.0rem, 10vw);
						}
						&.nolineheight {
							line-height: 1.0;
						}
					}
					> div.line {
						align-self: center;
						margin-top: 10px;
						width: 40px;
						height: 5px;
						background: linear-gradient(to right, #6dc8d9, #3f5fe4);	
					}
					> div {
						padding-inline: 10px;
						margin-top: 30px;
						align-self: start;
						display: grid;
						grid-template-columns: 40px 1fr;
						column-gap: 10px;
						justify-content: center;
						&:nth-of-type(2) {
							margin-top: 30px;
						}
						> img {
							width: 40px;
						}
						> p {
							align-self: center;
							font-size: 1.3rem;
							line-height: 1.0;
							color: var(--color-accent2);
							font-weight: 700;
						}
					}
					> figure {
						margin-top: 10px;
						> img {
							max-width: 100%;
						}
					}
				}
			}
			> figure {
				align-self: center;
				@media (width < 970px) {
					grid-area: 1/1/2/3;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.datacontent03 {
	padding: 100px 5% 0px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div {
			column-gap: 20px;
			row-gap: 20px;
			&:nth-of-type(1) {
				display: grid;
				grid-template-columns: auto 1fr auto;
				justify-items: center;
				@media (width < 970px) {
					grid-template-columns: 1fr 1fr;
				}
			}
			&:nth-of-type(2) {
				display: flex;
				justify-content: center;
			}
			> article {
				margin-top: 20px;
				padding: 20px;
				min-width: 540px;
				background-color: #e3f6ed;
				border-radius: 15px;
				display: flex;
				align-items: center;
				flex-flow: column;
				@media (width < 600px) {
					padding: 40px 20px;
					min-width: 260px;
					&:nth-of-type(1) {
						justify-self: center;
					}
					&:nth-of-type(2) {
						justify-self: center;
					}
				}
				> p {
					text-align: center;
					font-size: 1.2rem;
					line-height: 1.0;
					color: #222;
					font-weight: 700;
				}
				> h3 {
					margin-top: 10px;
					text-align: center;
					font-size: min(3.0rem, 14vw);
					line-height: 1.5;
					color: var(--color-accent2);
					font-weight: 700;
					> small {
						font-size: min(2.0rem, 10vw);
					}
				}
				> div.line {
					margin-top: 10px;
					width: 40px;
					height: 5px;
					background: linear-gradient(to right, #6dc8d9, #3f5fe4);	
				}
				> div {
					margin-top: 10px;
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					column-gap: 40px;
					row-gap: 10px;
					@media (width < 600px) {
						margin-top: 20px;
						grid-template-columns: repeat(1, 1fr);
					}
					> p {
						align-self: center;
						font-size: 1.1rem;
						line-height: 1.0;
						color: var(--color-accent2);
						font-weight: 700;
						> span {
							color: #6dc8d9;
						}
					}
				}
			}
			> div {
				display: grid;
				grid-template-rows: repeat(1,1fr);
				row-gap: 20px;
				justify-self: center;
				align-self: center;
				&:nth-of-type(1) {
					@media (width < 970px) {
						order: 2;
						justify-self: right;
					}
					@media (width < 600px) {
						grid-area: 2/1/3/3;
						justify-self: center;
					}
				}
				&:nth-of-type(2) {
					@media (width < 970px) {
						order: 3;
						justify-self: left;
					}
					@media (width < 600px) {
						grid-area: 3/1/4/3;
						justify-self: center;
					}
				}
				> article {
					padding: 20px;
					min-width: 260px;
					min-height: 190px;
					background-color: #e3f6ed;
					border-radius: 15px;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: column;
					@media (width < 600px) {
						padding: 40px 20px;
					}
					> p {
						text-align: center;
						font-size: 1.2rem;
						line-height: 1.0;
						color: #222;
						font-weight: 700;
					}
					> h3 {
						text-align: center;
						font-size: min(3.0rem, 14vw);
						line-height: 1.5;
						color: var(--color-accent2);
						font-weight: 700;
						> small {
							font-size: min(2.0rem, 10vw);
							> small {
								font-size: min(1.4rem, 7vw);
							}
						}
						&.nolineheight {
							line-height: 1.0;
						}
					}
					> div.line {
						align-self: center;
						margin-top: 10px;
						width: 40px;
						height: 5px;
						background: linear-gradient(to right, #6dc8d9, #3f5fe4);	
					}
					> figure {
						margin-top: 10px;
						> img {
							max-width: 100%;
						}
					}
				}
			}
			> figure {
				align-self: center;
				@media (width < 970px) {
					grid-area: 1/1/2/3;
				}
				> img {
					max-width: 100%;
				}
			}
		}
	}
}
section.active {
	padding: 100px 0% 0px 0%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> figure {
			grid-area: 1/1/2/2;
			> img {
				object-fit: cover;
				min-height: 270px;
				max-width: 100%;
				object-position: center 50%;
			}
		}
		> div {
			padding: 5%;
			grid-area: 1/1/2/2;
			> h3 {
				font-size: min(2.0rem, 7vw);
				line-height: 1.4;
				color: #fff;
				font-weight: 700;
				@media (width < 740px) {
					line-height: 1.2;
				}
			}
			> p {
				margin-top: 20px;
				font-size: min(1.1rem, 5vw);
				line-height: 1.0;
				color: #efea3a;
				@media (width < 740px) {
					margin-top: 10px;
				}
			}
			> a {
				display: inline-block;
				margin-top: 20px;
				text-decoration: underline;
				color: #fff;
				@media (width < 740px) {
					margin-top: 10px;
				}
				&:hover {
					opacity: 0.7;
				}
				> p {
					font-size: min(1.1rem, 5vw);
					line-height: 1.0;
					color: #fff;
				}
			}
		}
	}
}
section.voicetitle {
	padding: 100px 5% 0px 5%;
	> div {
		padding-block: 50px;
		max-width: 800px;
		margin-inline: auto;
		background-image: url(./image/double_parentheses01.svg),url(./image/double_parentheses02.svg);
		background-repeat: no-repeat;
		background-size: auto, auto;
		background-position: 0% 0%, 100% 100%;
		@media (width < 700px) {
			background-image: url(./image/double_parentheses01.svg),url(./image/double_parentheses02.svg);
			background-repeat: no-repeat;
			background-size: 20vw, 20vw;
			background-position: 0% 0%, 100% 100%;
		}
		> h2 {
			padding: 30px 5%;
			background-image: url(./image/voice_text.svg);
			background-repeat: no-repeat;
			background-size: min(60%, 360px) auto;
			background-position: 50% 50%;
			text-align: center;
			font-size: min(3.2rem,9.5vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			@media (width < 700px) {
				padding: 5vw 2%;
			}
		}
		> p {
			text-align: center;
			font-size: 1.0rem;
			line-height: 1.0;
			color: #4d4d4d;
		}
	}
}
section.textblock {
	padding: 100px 5% 0px 5%;
	> div {
		max-width: 800px;
		margin-inline: auto;
		> figure {
			> img {
				max-width: 100%;
			}
		}
	}
}
section.newgrade {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
	margin-top: 200px;
	background-image: url(./image/newgrade_bg01.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	> figure {
		grid-area: 1/2/1/3;
		justify-self: end;
		filter: drop-shadow(-10px 0px 10px rgba(0, 0, 0, 0.25));
		> img {
			max-width: 100%;
			clip-path: polygon(33% 0%, 100% 0, 100% 60%, 85% 100%, 0 100%);
		}
	}
	> div {
		margin-left: 20px;
		grid-area: 1/1/2/2;
		justify-self: center;
		align-self: center;
		@media (width < 460px) {
			margin-left: 10px;
		}
		> h1 {
			text-align: start;
			font-size: min(2.2rem,8vw);
			line-height: 1.5;
			color: #fff;
			font-weight: 700;
		}
		> a {
			text-decoration: none;
			display: inline-flex;
			margin-top: 20px;
			&:hover {
				opacity: 0.8;
			}
			@media (width < 460px) {
				margin-top: 10px;
			}
			> p {
				text-align: center;
				color: #fff;
				border: 1px solid #fff;
				font-size: min(1.0rem, 5vw);
				line-height: 1.3;
				padding-block: 20px;
				padding-inline: 20px 40px;
				background-image: url(./image/arrow.svg);
				background-repeat: no-repeat;
				background-position: right 10px top 50%;
				@media (width < 430px) {
					padding-block: 2px;
					padding-inline: 10px 40px;
				}
			}
		}
	}
}
section.career {
	clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
	margin-top: -1px;
	background-image: url(./image/career_bg01.webp);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	> figure {
		grid-area: 1/1/1/2;
		justify-self: start;
		filter: drop-shadow(10px 0px 10px rgba(0, 0, 0, 0.25));
		> img {
			max-width: 100%;
			clip-path: polygon(0 48%, 0 0, 68% 0, 100% 100%, 15% 100%);
		}
	}
	> div {
		margin-right: 20px;
		grid-area: 1/2/2/3;
		justify-self: center;
		align-self: center;
		@media (width < 460px) {
			margin-right: 10px;
		}
		> h1 {
			text-align: end;
			font-size: min(2.2rem,8vw);
			line-height: 1.5;
			color: #fff;
			font-weight: 700;
		}
		> a {
			text-decoration: none;
			display: inline-flex;
			margin-top: 20px;
			&:hover {
				opacity: 0.8;
			}
			@media (width < 460px) {
				margin-top: 10px;
			}
			> p {
				text-align: center;
				color: #fff;
				border: 1px solid #fff;
				font-size: min(1.0rem, 5vw);
				line-height: 1.3;
				padding-block: 20px;
				padding-inline: 20px 40px;
				background-image: url(./image/arrow.svg);
				background-repeat: no-repeat;
				background-position: right 10px top 50%;
				@media (width < 430px) {
					padding-block: 2px;
					padding-inline: 10px 40px;
				}
			}
		}
	}
}