section.panel {
	padding: 40px 5% 0px 5%;
	@media (width < 780px) {
		padding: 40px 0% 0px 0%;
	}
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		> picture {
			grid-area: 1/1/2/2;
			> img {
				width: 100%;
				max-width: 100%;
				@media (width < 650px) {
					min-height: 140px;
					object-fit: cover;
                    object-position: 25% center;
				}
			}
		}
		> div {
			grid-area: 1/1/2/2;
			justify-self: start;
            align-self: end;
			margin-bottom: 2%;
			@media (width < 500px) {
				margin-bottom: 0px;
				align-self: center;
			}
			> figure {
				margin-left: 20%;
				> img {
					width: 12vw;
					@media (width < 780px) {
						width: 160px;
					}
				}
			}
			> p {
				margin-top: 10px;
				text-align: center;
				background-color: #fff;
				font-size: min(1.1rem, 6vw);
				line-height: 1.5;
				color: var(--color-accent2);
				font-weight: 700;
			}

		}
	}
}
section.breadcrumbs {
	background-color: #fff;
}
section.top {
	background: url(./image/top_bg.webp), #002060;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 0 0;
	padding: 100px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> figure {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
		> h3 {
			text-align: center;
			padding-top: 50px;
			font-size: min(2.6rem, 6vw);
			line-height: 1.4;
			color: #fff;
			font-weight: 700;
			letter-spacing: 5px;
		}
		> div.project {
			margin-top: 30px;
			position: relative;
			background-color: #006bff;
			z-index: 3;
			padding: 10px;
			> figure {
				max-width: 300px;
				position: absolute;
				z-index: 2;
				top: 5%;
				right: -5%;
				@media (width < 640px) {
					width: 50vw;
					top: -15%;
				}
				> img {
					max-width: 300px;
					@media (width < 640px) {
						max-width: 100%;
					}
				}
			}
			> h4 {
				position: relative;
				z-index: 3;
				text-align: center;
				font-size: min(2.0rem, 7vw);
				color: #fff;
				font-weight: 700;
				@media (width < 640px) {
					margin-block: 10px;
				}
			}
			> p {
				position: relative;
				z-index: 3;
				font-size: min(1.4rem, 5vw);
				line-height: 1.8;
				color: #fff;
				text-align: center;
				font-weight: 700;
			}
		} 
		> p {
			margin-top: 3%;
			font-size: min(1.1rem, 5vw);
			line-height: 2.0;
			color: #fff;
			text-align: center;
			font-weight: 600;
			@media (width < 590px) {
				text-align: justify;
				> br {
					display: none;
				}
			}
		}
	}
}
section.car {
	> div {
		> figure {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
	}
}
section.disk {
	background-color: #002060;
	padding: 100px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> div.title {
			background: linear-gradient(to right,#4065ff 30%,#4065ff,#48eefd 100%);
			clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0% 100%);
			padding: 10px 60px;	
			justify-self: center;
			@media (width < 540px) {
				padding: 10px 5vw;
				clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0% 100%);
			}
			> h4 {
				font-size: min(1.3rem, 5.5vw);
				line-height: 1.4;
				color: #fff;
				text-align: center;
				font-weight: 600;
			}
		}
		> div.content {
			margin-top: -25px;
			border-radius: 30px;
			background: url(./image/disk_bg.webp),linear-gradient(to right,#fff 60%,#fff,#8fbffb 100%);
			background-size: auto 100%;
			background-repeat: no-repeat;
			background-position: 100% 0;
			padding: 120px 50px 80px 0px;
			@media (width < 870px) {
				padding: 80px 50px 60px 0px;
				background: linear-gradient(to right,#fff 40%,#fff,#8fbffb 100%);
			}
			@media (width < 540px) {
				padding: 60px 20px 60px 0px;
			}
			> article {
				&:nth-of-type(1) {
					display: grid;
					grid-template-columns: 1fr 1.1fr;
					column-gap: 30px;
					@media (width < 870px) {
						grid-template-columns: 1fr;
						row-gap: 30px;
					}
					> div {
						&:nth-of-type(2) {
							display: grid;
							grid-template-columns: 1fr 1fr;
							column-gap: 30px;
							@media (width < 870px) {
								padding-left: 50px;
							}
							@media (width < 540px) {
								row-gap: 20px;
								padding-left: 20px;
							}

						}
						> h3 {
							display: inline-block;
							padding-inline: 50px 20px;
							border-bottom: 2px solid #006bff;
							font-size: min(2.2rem, 7vw);
							line-height: 1.8;
							color: #006bff;
							font-weight: 600;
							@media (width < 540px) {
								padding-inline: 20px 20px;
							}
						}
						> p {
							padding-left: 50px;
							padding-top: 20px;
							font-size: min(1.1rem, 5vw);
							line-height: 2.0;
							color: #000;
							text-align: justify;
							@media (width < 540px) {
								padding-left: 20px;
							}
						}
						> figure {
							align-self: center;
							text-align: center;
							> img {
								max-width: 100%;
							}
							> p {
								font-size: min(1.1rem, 5vw);
								line-height: 2.0;
								color: #000;
								text-align: ce;
							}
						}
					}
				}
				&:nth-of-type(2) {
					padding-top: 50px;
					> h3 {
						display: inline-block;
						padding-left: 50px;
						border-bottom: 2px solid #006bff;
						font-size: min(2.2rem, 7vw);
						line-height: 1.8;
						color: #006bff;
						font-weight: 600;
						@media (width < 540px) {
							padding-left: 20px;
						}
					}
					> div {
						display: grid;
						grid-template-columns: 1fr 1.1fr;
						column-gap: 30px;
						@media (width < 870px) {
							grid-template-columns: 1fr;
							row-gap: 30px;
						}
						> p {
							padding-left: 50px;
							padding-top: 20px;
							font-size: min(1.1rem, 5vw);
							line-height: 2.0;
							color: #000;
							text-align: justify;
							@media (width < 540px) {
								padding-left: 20px;
							}
						}
						> figure {
							align-self: center;
							text-align: center;
							@media (width < 870px) {
								padding-left: 50px;
							}
							@media (width < 540px) {
								padding-left: 20px;
							}
							> img {
								max-width: 100%;
							}
							> div {
								display: grid;
								grid-template-columns: 1fr 1fr;
								padding-left: 4%;
								> p {
									font-size: min(1.1rem, 5vw);
									line-height: 2.0;
									color: #000;
									text-align: center;
									&:nth-of-type(2) {
										padding-left: 10%;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}
section.desire {
	background: url(./image/desire_text.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: 100% 0;
	> div {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		@media (width < 640px) {
			grid-template-columns: 1fr;
		}
		> figure {
			&:nth-of-type(1) {
				grid-area: 1/1/2/3;
				> img {
					width: 100%;
					height: 100%;
					@media (width < 640px) {
						grid-area: 1/1/2/2;
						width: 100%;
						height: 400px;
						object-fit: cover;
						object-position: 50% 50%;
					}
				}
			}
			&:nth-of-type(2) {
				grid-area: 1/1/2/3;
				align-self: end;
				justify-self: start;
				margin-bottom: 2%;
				margin-left: 2%;
				> img {
					max-width: 100%;
					@media (width < 1100px) {
						max-width: 70vw;
					}
				}
			}
		}
		> div {
			max-width: 700px;
			grid-area: 1/1/2/2;
			width: 80%;
			justify-self: end;
			align-self: center;
			margin-bottom: 25%;
			@media (width < 900px) {
				width: 100%;
				padding-left: 5%;
			}
			@media (width < 720px) {
				align-self: start;
				padding-top: 20px;
			}
			@media (width < 640px) {
				grid-area: 1/1/2/2;
				padding-inline: 5%;
				padding-top: 40px;
			}
			> div {
				background: linear-gradient(to right,#4065ff 30%,#4065ff,#48eefd 100%);
				clip-path: polygon(50px 0, 100% 0, calc(100% - 50px) 100%, 0% 100%);
				padding-block: 20px;
				@media (width < 720px) {
					padding-block: 10px;
					clip-path: polygon(30px 0, 100% 0, calc(100% - 30px) 100%, 0% 100%);
				}
				> p {
					font-size: min(1.3rem, 5.5vw);
					line-height: 1.0;
					color: #fff;
					text-align: center;
					font-weight: 600;
				}
			}
			> p {
				margin-top: 20px;
				font-size: min(1.1rem, 5vw);
				line-height: 2.0;
				color: #fff;
				text-align: justify;
				font-weight: 600;
				@media (width < 720px) {
					margin-top: 10px;
				}
				@media (width < 640px) {
					margin-top: 30px;
				}
			}
		}
	}
}