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: 3%;
			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%;
			}
			> picture {
				> img {
					width: min(28vw,533px);
					@media (width < 550px) {
						width: 60vw;
					}
				}
			}
			> p {
				display: inline-block;
				padding-block: 2px 4px;
				padding-inline: 20px;
				margin-top: 10px;
				margin-right: 4%;
				text-align: center;
				background: linear-gradient(to right,#4065ff,#48edfc);
				font-size: min(1.1rem, 6vw);
				line-height: 1.5;
				color: #fff;
			}
		}
	}
}
section.breadcrumbs {
	padding-inline: 8.5vw;
	@media (width < 550px) {
		padding-inline: 5vw;
	}
}
section.top {
	margin-top: 50px;
	position: relative;
	z-index: 3;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h4 {
			font-size: min(2.2rem, 8vw);
            line-height: 1.0;
            color: #000;
            font-weight: 700;
            letter-spacing: 1px;
            text-align: center;
			letter-spacing: 4px;
		}
		> h3 {
			margin-top: 30px;
			font-size: min(3.0rem, 11vw);
            line-height: 1.0;
            color: #000;
            font-weight: 700;
            letter-spacing: 1px;
            text-align: center;
		}
		> p {
            font-size: min(1.2rem, 6vw);
            color: #009e96;
            font-weight: 700;
            line-height: 2.0;
			text-align: center;
		}
		> div {
			margin-top: 30px;
			display: grid;
			grid-template-columns: repeat(5,auto);
			justify-self: center;
			border: 1px solid #232d32;
			background-color: rgba(255,255,255,0.5);
			@media (width < 910px) {
				border: unset;
				background-color: unset;
				justify-content: center;
				margin-inline: auto;
				display: flex;
				flex-wrap: wrap;
				row-gap: 10px;
				border-top: 1px solid #232d32;
				border-bottom: 1px solid #232d32;
				background-color: rgba(255,255,255,0.5);
				padding-block: 5px;
			}
			> a {
				text-decoration: none;
				user-select: none;
				border-collapse: collapse;
				&:nth-of-type(n) {
					> div {
						border-left: 1px solid #232d32;
						border-right: 1px solid #232d32;
						margin-left: -1px;
					}
				}
				&:nth-of-type(1) {
					> div {
						border-left: unset;
						@media (width < 910px) {
							border-left: 1px solid #232d32;
						}
					}
				}
				&:nth-of-type(5) {
					> div {
						border-right: unset;
						@media (width < 910px) {
							border-right: 1px solid #232d32;
						}
					}
				}
				&:hover {
					opacity: 0.7;
					> div {
						> p {
							color: var(--color-accent2);
						}
					}
				}
				> div {
					margin-block: 5px;
					padding-inline: 20px;
					@media (width < 910px) {
						padding-inline: 25px;
					}
					@media (width < 700px) {
						padding-inline: 10px;
					}
					> p {
						text-align: center;
						font-size: min(1.1rem, 4.5vw);
						color: #222;
						font-weight: 700;
						line-height: 2.0;
					}
				}
			}
		}
	}
}
section.overview {
	position: relative;
	z-index: 2;
	padding-top: 40px;
	@media (width < 700px) {
		margin-top: -20vw;
	}
	> div {
		display: grid;
		> div.block01 {
			background-color: #232d32;
			> div {
				max-width: 1000px;
				margin-inline: auto;
				> div {
					margin-top: -10%;
					padding-top: 5%;
					padding-inline: 5%;
					> h3 {
						margin-top: 30px;
						font-size: min(3.0rem, 12vw);
						line-height: 1.0;
						color: #fff;
						font-weight: 700;
						letter-spacing: 1px;
						text-align: center;
						padding-inline: 8px;
					}
					> h4 {
						font-size: min(1.2rem, 6vw);
						color: #00dbd0;
						font-weight: 700;
						line-height: 2.0;
						text-align: center;
						padding-inline: 8px;
					}
					> P {
						margin-top: 5%;
						font-size: min(1.2rem, 5vw);
						color: #fff;
						font-weight: 600;
						line-height: 2.0;
						text-align: center;
						padding-inline: 8px;
						@media (width < 990px) {
							margin-top: 20px;
							font-size: min(1.1rem, 5vw);
							> br {
								display: none;
							}
						}
						@media (width < 610px) {
							line-height: 1.6;
						}
					}
				}
			}
		}
		> div.block02 {
			> div {
				max-width: 1000px;
				margin-inline: auto;
				> div {
					padding-inline: 5%;
					> h3 {
						margin-top: 30px;
						font-size: min(3.0rem, 12vw);
						line-height: 1.0;
						color: #232d32;
						font-weight: 700;
						letter-spacing: 1px;
						text-align: center;
						padding-inline: 8px;
					}
					> h4 {
						font-size: min(1.2rem, 6vw);
						color: #00dbd0;
						font-weight: 700;
						line-height: 2.0;
						text-align: center;
						padding-inline: 8px;
					}
					> P {
						margin-top: 5%;
						font-size: min(1.2rem, 5vw);
						color: #232d32;
						font-weight: 600;
						line-height: 2.0;
						text-align: center;
						padding-inline: 8px;
						@media (width < 990px) {
							font-size: min(1.1rem, 5vw);
							margin-top: 20px;
							> br {
								display: none;
							}
						}
						@media (width < 610px) {
							line-height: 1.6;
						}
					}
				}
			}
		}
		> div {
			> picture {
				text-align: center;
				> img {
					width: 100%;
					max-width: 100%;
				}
			}
		}
	}
}
section.imageblock {
	> picture {
		text-align: center;
		> img {
			width: 100%;
			max-width: 100%;
		}
	}
}
section.solution {
	background: url(./image/solution_bg.svg), #dedfe0;
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: auto 100%;
	@media (width < 700px) {
		background: url(./image/solution_bg_sp.svg), #dedfe0;
		background-position: -10vw 0;
		background-repeat: no-repeat;
		background-size: 90% auto;
	}
	> div {
		padding-inline: 5%;
		> h3 {
			padding-top: 50px;
			font-size: min(3.0rem, 12vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			letter-spacing: 1px;
			text-align: center;
		}
		> p {
			padding-bottom: 50px;
			font-size: min(1.2rem, 6vw);
			color: var(--color-accent2);
			font-weight: 700;
			line-height: 2.0;
			text-align: center;
		}
		> figure {
			max-width: 1000px;
			margin-inline: auto;
			> img {
				max-width: 100%;
			}
		}
		> div {
			max-width: 1000px;
			margin-inline: auto;
			background-color: #fff;
			@media (width < 700px) {
				background-color: #f2f7fb;
			}
			> article {
				padding-bottom: 60px;
				@media (width < 820px) {
					padding-bottom: 20px;
				}
				&:nth-of-type(odd) {
					display: grid;
					grid-template-columns: 1.1fr 1fr;
					@media (width < 820px) {
						grid-template-columns: 1fr;
					}
					> div {
						padding: 40px 0px 0px 40px;
						@media (width < 820px) {
							order: 2;
							padding: 40px 20px;
						}
						> p {
							font-size: min(1.0rem, 5vw);
							color: #222;
							font-weight: 500;
							line-height: 2.0;
							text-align: justify;
							padding-bottom: 20px;
						}
					}
					> figure {
						margin-top: -40px;
						margin-right: -6vw;
						display: grid;
						align-self: start;
						@media (width < 820px) {
							width: 75%;
							justify-self: end;
							order: 1;
						}
						@media (width < 700px) {
							margin-top: 0px;
							width: calc(100% + 5vw);
							margin-right: -5vw;
						}
						> img {
							clip-path: polygon(30% 0%, 100% 0, 100% 100%, 0% 100%);
							grid-area: 1/1/2/2;
							max-width: 100%;
							order: 2;
							@media (width < 700px) {
								clip-path: unset;
								margin-left: 10px;
							}
						}
						> div {
							clip-path: polygon(30% 0%, 100% 0, 100% 100%, 0% 100%);
							margin-top: 10px;
							align-self: start;
							order: 1;
							grid-area: 1/1/2/2;
							width: 100%;
							height: 100%;
							background: linear-gradient(to left, rgba(64,101,255,0.5), rgba(72,238,253,0.5));
							@media (width < 700px) {
								clip-path: unset;
								margin-right: -4vw;
								margin-top: 15px;
							}
						}
					}
				}
				&:nth-of-type(even) {
					display: grid;
					grid-template-columns: 1fr 1.1fr;
					@media (width < 820px) {
						grid-template-columns: 1fr;
					}
					> div {
						padding: 40px 40px 0px 0px;
						@media (width < 820px) {
							padding: 40px 20px;
							order: 2;
						}
						> p {
							font-size: min(1.0rem, 5vw);
							color: #222;
							font-weight: 500;
							line-height: 2.0;
							text-align: justify;
							padding-bottom: 20px;
						}
					}
					> figure {
						margin-top: -40px;
						margin-left: -6vw;
						display: grid;
						align-self: start;
						@media (width < 820px) {
							width: 75%;
							justify-self: start;
							order: 1;
							margin-top: -40px;
						}
						@media (width < 700px) {
							margin-top: 0px;
							width: calc(100% + 5vw);
							margin-left: -5vw;
						}
						> img {
							clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
							grid-area: 1/1/2/2;
							max-width: 100%;
							order: 2;
							@media (width < 700px) {
								margin-left: -10px;
								clip-path: unset;
							}
						}
						> div {
							clip-path: polygon(0 0, 100% 0, 70% 100%, 0% 100%);
							margin-top: 10px;
							margin-left: 10px;
							align-self: start;
							order: 1;
							grid-area: 1/1/2/2;
							width: 100%;
							height: 100%;
							background: linear-gradient(to left, rgba(64,101,255,0.5), rgba(72,238,253,0.5));
							@media (width < 700px) {
								margin-left: 0px;
								clip-path: unset;
								margin-right: -4vw;
								margin-top: 15px;
							}
						}
					}
				}
			}
		}
	}
}
section.progress {
	background-color: #dedfe0;
	padding: 60px 5%;
	@media (width < 700px) {
		padding: 0px 5% 60px 5%;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		@media (width < 700px) {
			background-color: #f2f7fb;
			padding-inline: 20px;
		}
		> h3 {
			padding-top: 50px;
			font-size: min(3.0rem, 12vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			letter-spacing: 1px;
			text-align: center;
		}
		> h4 {
			padding-bottom: 50px;
			font-size: min(1.2rem, 6vw);
			color: var(--color-accent2);
			font-weight: 700;
			line-height: 2.0;
			text-align: center;
		}
		> p {
			font-size: min(1.0rem, 5vw);
			color: #222;
			font-weight: 500;
			line-height: 2.0;
			text-align: center;
			padding-bottom: 20px;
			@media (width < 690px) {
				text-align: justify;
				> br {
					display: none;
				}
			}
		}	
	}
}
section.challenge {
	padding: 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h3 {
			padding-top: 50px;
			font-size: min(3.0rem, 12vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			letter-spacing: 1px;
			text-align: center;
		}
		> h4 {
			padding-bottom: 50px;
			font-size: min(1.2rem, 6vw);
			color: var(--color-accent2);
			font-weight: 700;
			line-height: 2.0;
			text-align: center;
		}
		> p {
			font-size: min(1.0rem, 5vw);
			color: #222;
			font-weight: 500;
			line-height: 2.0;
			text-align: center;
			padding-bottom: 20px;
			@media (width < 690px) {
				text-align: justify;
				> br {
					display: none;
				}
			}
		}
		> figure {
			> img {
				max-width: 100%;
			}
		}
	}
}
section.case {
	> div {
		> article {
			background-color: #fff;
			border-bottom: 1px solid #999999;
			&:last-of-type {
				margin-bottom: 0px;
			}
			> input[type="checkbox"] {
				display: none;
				&:checked + label > div > div > div > figure {
					transform: rotate(-45deg);
				}
				&:checked + label + div {
					animation-name: moreToggleOpen;
					animation-duration: 0.3s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-in;
				}
				& + label + div {
					animation-name: moreToggleClose;
					animation-duration: 0.3s;
					animation-fill-mode: forwards;
					animation-timing-function: ease-out;
				}
			}
			> label {
				display: block;
				margin-top: 5px;
				list-style: none;
				cursor: pointer;
				&:hover {
					opacity: 0.7;
				}
				> div {
					padding-bottom: 5vw;
					padding-inline: 5vw;
					> div {
						max-width: 1000px;
						margin-inline: auto;
						> div {
							border: 4px solid;
							border-image: linear-gradient(to right, #4065ff, #48eefd) 1;
							padding: 20px 0px;
							display: flex;
							justify-content: center;
							align-items: center;
							column-gap: 30px;
							> h3 {
								color: var(--color-accent2);
								font-size: min(1.6rem, 6vw);
								line-height: 1.4;
								font-weight: 700;
								text-align: center;
							}
							> figure {
								transition: 0.2s;
								> img {
									width: 40px;
								}
							}
						}
					}
				}
			}
			> div {
				overflow: hidden;
				> div {
					padding: 5%;
					background: url(./image/case_bg.svg), #cce1f1;
					background-position: 0 0;
					background-repeat: no-repeat;
					background-size: auto 100%;
					@media (width < 700px) {
						background: url(./image/case_bg_sp.svg), #cce1f1;
						background-position: 0 0;
						background-repeat: no-repeat;
						background-size: 100% auto;
					}
					> div {
						max-width: 1000px;
						margin-inline: auto;
						> h4 {
							padding: 10px 60px;
							display: inline-block;
							background: linear-gradient(to right, #4065ff, #48eefd);
							color: #fff;
							font-size: min(1.3rem, 6vw);
							line-height: 1.4;
							font-weight: 600;
							text-align: center;
							letter-spacing: 4px;
							@media (width < 700px) {
								display: block;
							}
						}
						> p {
							padding-block: 20px;
							font-size: min(1.0rem, 5vw);
							color: #222;
							font-weight: 500;
							line-height: 2.0;
							text-align: justify;
						}
						> div {
							display: grid;
							grid-template-columns: repeat(3, 1fr);
							column-gap: 20px;
							@media (width < 700px) {
								grid-template-columns: repeat(1, 1fr);
								row-gap: 20px;
								padding-inline: 20px;
							}
							> figure {
								> img {
									max-width: 100%;
								}
								> p {
									font-size: min(1.0rem, 5vw);
									color: #222;
									font-weight: 700;
									line-height: 2.0;
									text-align: center;
								}
							}
						}
					}
				}
			}
		}	
	}
}
@keyframes moreToggleOpen {
	0% {
		max-height: 0px;
	}
	80% {
		max-height: 100px;
	}
	90% {
		max-height: 200px;
	}
	100% {
		max-height: 9999px;
	}
}
@keyframes moreToggleClose {
	0% {
		max-height: 9999px;
	}
	10% {
		max-height: 200px;
	}
	20% {
		max-height: 100px;
	}
	100% {
		max-height: 0px;
	}
}