section.toppanel {
	> div {
		> article {
			display: block;
			width: calc(100vw + 1px);
			height: 100vh;
			width: 100%;
			position: relative;
			clip-path: inset(0);
			z-index: 1;
			> img {
				object-fit: cover;
				position: fixed;
				top: calc(50% - 1px);
  				left: calc(50%);
				width: calc(100vw + 1px);
				height: calc(100vh + 1px);
				transform: translate(-50%, -50%);
				@media (width < 2000px) {
					object-fit: cover; 
    				object-position: 80% center;
				}
			}
			> div.pc {
				position: fixed;
				display: grid;
				padding-left: 5%;
				grid-template-columns: auto 1fr;
				column-gap: 20px;
				bottom: 0;
				left: 0;
				width: 100vw;
				@media (width < 1300px) {
					grid-template-columns: 1.5fr 1fr;
				}
				@media (width < 700px) {
					display: none;
				}
				> figure {
					align-self: end;
					&:nth-of-type(1) {
						justify-self: start;
						> img {
							filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.5));
						}
					}
					&:nth-of-type(2) {
						justify-self: start;
					}
					> img {
						max-width: 100%;
						max-height: calc(100vh - 100px);
					}
				}
			}
			> div.sp {
				position: fixed;
				display: none;
				@media (width < 700px) {
					display: block;
					bottom: 0;
  					left: 0;
					width: 100vw;
				}
				> figure {
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
}
section.panel01 {
	> div {
		> article {
			display: block;
			height: 100vh;
       		min-height: 600px;
			position: relative;
			clip-path: inset(0);
			z-index: 2;
			> picture {
				> img {
					object-fit: cover;
					position: fixed;
					top: calc(50% - 1px);
	  				left: calc(50% - 1px);
					width: calc(100vw + 1px);
					height: calc(100vh + 1px);
					transform: translate(-50%, -50%);
					@media (width < 2000px) {
						object-fit: cover; 
	    				object-position: 32% center;
					}
				}
				&.about {
					> img {
						@media (width < 2000px) {
							object-fit: cover; 
		    				object-position: 0% center;
						}
					}
				}
			}
			> div.sp {
				position: fixed;
				display: none;
				@media (width < 2000px) {
					display: block;
					bottom: 0;
  					left: 0;
				}
				&.right {
					@media (width < 2000px) {
						left: unset;
						right: 0;
					}
				}
				> figure {
					> img {
						max-width: 100%;
					}
				}
			}
			> div.text {
				padding-left: 20px;
				position: absolute;
				bottom: 40%;
				width: 50vw;
				@media (width < 900px) {
					width: 100vw;
					padding-inline: 5%;
				}
				&.right {
  					left: 50%;
					@media (width < 900px) {
						left: 0%;
					}
				}
				&.left {
  					right: 35%;
					@media (width < 900px) {
						right: 0%;
					}
				}
				> h2 {
					margin-bottom: 30px;
					text-shadow: 0 0 15px #333333;
					font-size: 1.4rem;
					line-height: 1.0;
					color: #fff;
					letter-spacing: 2px;
				}
				> p {
					text-shadow: 0 0 15px #333333;
					font-size: 1.1rem;
					line-height: 1.8;
					color: #fff;
					letter-spacing: 1.5px;
				}
				> div {
					margin-top: 30px;
					> a {
						text-decoration: none;
						&:hover {
							opacity: 0.8;
						}
						> img {
							width: 150px;
						}
					}
				}
			}
		}
	}
}
section.bottompanel {
	margin-bottom: 100px;
	> div {
		display: grid;
		grid-template-columns: 2fr 1fr;
		> figure {
			grid-area: 1/1/2/3;
			text-align: right;
			> img {
				max-width: 100%;
			}
		}
		> div {
			padding-inline: 5%;
			grid-area: 1/1/2/2;
			align-content: center;
			justify-self: center;
			> h1 {
				font-size: min(1.6rem, 5vw);
				line-height: 1.4;
				color: var(--color-accent);
				font-weight: 700;
				@media (width < 590px) {
					padding-top: 20px;
					line-height: 1.6;
				}
			}
			> p {
				text-align: right;
				font-size: min(1.2rem, 5vw);
				line-height: 1.8;
				color: var(--color-accent);
				@media (width < 590px) {
					text-align: left;
				}
			}
		}
	}
}
section.about {
	padding: 80px 5% 80px 5%;
	background-image: url(./image/wave_bg02.svg);
	background-repeat: repeat-x;
	background-size: auto;
	background-position: 100% 100px;
	min-height: 933px;	
	@media (width < 1300px) {
		background-image: url(./image/wave_bg01.svg);
		background-repeat: no-repeat;
		background-size: 100% auto;
		background-position: 100% 100px;
		min-height: unset;
	}
	@media (width < 960px) {
		background-image: unset;
		padding: 0px 5% 0px 5%;
		margin-block: 80px;
	}
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> div.item {
			text-align: center;
			padding-bottom: 60px;
			> h1 {
				font-size: 2.5rem;
				line-height: 1.8;
				color: #333;
			}
			> p {
				font-size: 1.1rem;
				line-height: 1;
				color: #333;
			}
		}
		> div.content {
			display: grid;
			grid-template-columns: 2fr 2.5fr;
			@media (width < 960px) {
				grid-template-columns: 1fr;
			}
			> div {
				position: relative;
				> div {
					position: relative;
					z-index: 3;
					> h2 {
						font-size: 1.6em;
						line-height: 1;
						color: #333;
					}
					> p {
						padding-top: 20px;
						font-size: 1.0rem;
						line-height: 1.4;
						color: #333;
						text-align: justify;
					}
				}
				> picture {
					@media (width < 960px) {
						display: flex;
						justify-content: center;
					}
					> img {
						margin-left: 8%;
						max-width: 100%;
						@media (width < 960px) {
							margin-left: 0%;
						}
					}
				}
				&:nth-of-type(2) {
					justify-self: center;
					@media (width < 960px) {
						padding-block: 40px;
					}
				}
				> img {
					&:nth-of-type(1) {
						position: absolute;
						z-index: 2;
						top: 30%;
                        left: -38%;
                        width: 170px;
						@media (width < 1250px) {
							top: unset;
                        	left: -15%;
							bottom: -5%;
						}
						@media (width < 960px) {
							bottom: unset;
							top: -40%;
							left: unset;
							right: -8%;
						}
						@media (width < 460px) {
							display: none;
						}
					}
					&:nth-of-type(2) {
						position: absolute;
						z-index: 2;
						bottom: 10%;
						right: -20%;
						width: 130px;
						@media (width < 960px) {
							display: none;
						}
					}
					&:nth-of-type(3) {
						position: absolute;
						z-index: 1;
						top: -12%;
                        left: -18%;
                        width: min(15vw, 170px);
						@media (width < 960px) {
							top: -65px;
                        	left: -65px;
							width: 130px;
						}
					}
				}
			}
		}
	}
}