section.switchpanel {
	margin-top: 10px;
	margin-bottom: 40px;
	max-width: 1920px;
	margin-inline: auto;
	> div {
		max-width: 1300px;
		margin-inline: auto;
		padding-inline: 10px;
		> #switchPanelStage {
			user-select: none;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 1fr;
			grid-area: 1/1/2/2;
			> div {
				grid-row: 1/2;
				grid-column: 1/2;
				&:nth-of-type(1) {
					z-index: 0;
					display: grid;
				}
				&:nth-of-type(2) {
					display: grid;
					z-index: 1;
					transition: 0.5s;
					cursor: ew-resize;
				}
				&:nth-of-type(3) {
					z-index: 2;
					justify-self: center;
					margin-bottom: -30px;
					align-self: end;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 20px;
					@media (width < 670px) {
						column-gap: 3px;
						margin-bottom: -20px;
						> span {
							> img {
								width: 14px;
							}
						}
					}
					> span {
						transition: 0.3s;
						cursor: pointer;
						> img:nth-of-type(1) {
							display: block;
						}
						> img:nth-of-type(2) {
							display: none;
						}
						&.on {
							> img:nth-of-type(1) {
								display: none;
							}
							> img:nth-of-type(2) {
								display: block;
							}
						}
					}
				}
				> div {
					grid-area: 1/1/2/2;
					> picture {
						> img {
							width: 100%;
							border-radius: 30px;
						}
					}
				}
				> div.panelbutton {
					z-index: 3;
					align-self: end;
					justify-self: end;
					padding-right: 8%;
					padding-bottom: 2%;
					display: flex;
					grid-area: 1/1/2/2;
					column-gap: 20px;
					@media (width < 600px) {
						display: grid;
						row-gap: 10px;
						justify-items: end;
						padding-right: 4%;
					}
					@media (width < 440px) {
						display: none;
					}
					> a {
						text-decoration: none;
						> img {
							max-width: 100%;
							height: min(5vw, 50px);
							@media (width < 600px) {
								height: 40px;
							}
						}
						&:hover {
							opacity: 0.7;
						}
					}
				}
			}
		}
	}
}
section.graph {
	padding: 50px 5% 50px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> div {
			grid-area: 1/1/2/2;
			@media (width < 750px) {
				grid-area: unset;
			}
			> h3 {
				font-size: min(2.7rem, 9.0vw);
				line-height: 1.2;
				font-weight: 900;
				background: linear-gradient(to right, #ff8264, #dc2850);
				background-clip: text;
				color: transparent;
			}
			> p {
				font-size: min(1.1rem, 6.0vw);
				line-height: 1.6;
				font-weight: 600;
				color: #333;
				&:nth-of-type(1) {
					padding-top: 20px;
				}
				&:nth-of-type(2) {
					padding-top: 10px;
				}
				&:nth-of-type(2), &:nth-of-type(3) {
					line-height: 1.3;
					text-indent: -0.85rem;
					padding-left: 0.85rem;

				}
				> small {
					font-size: min(0.9rem, 4.5vw);
				}
			}
			> h4 {
				padding-inline: 5px;
				font-size: min(1.8rem, 7.0vw);
				line-height: 1.2;
				font-weight: 900;
				color: #dc2850;
				background: linear-gradient(transparent 60%, #ffff00 60%);
				display: inline-block;
			}
		}
		> figure {
			padding-top: min(10vw, 80px);
			grid-area: 1/1/2/2;
			@media (width < 750px) {
				grid-area: unset;
				padding-top: 10px;
			}
			> img {
				max-width: 100%;
			}
		}
	}
}
section.subtitle {
	padding: 80px 5% 0px 5%;
	&.gray {
		background-color: #eff1f1;
	}
	> div {
		max-width: 1100px;
		margin-inline: auto;
		> div {
			display: flex;
			align-items: center;
			gap: 15px;
			> div {
				height: 2px;
				width: 12px;
				background-color: var(--color-accent);
			}
			> h2 {
				font-size: min(2.2rem, 7vw);
				line-height: 1.0;
				color: #333;
				font-weight: 600;
				font-family: var(--font-serif);
				> small {
					font-size: min(1.1rem, 4.0vw);
					letter-spacing: -0.4px;
				}
			}
		}
		> p {
			font-size: min(1.0rem, 5.0vw);
			line-height: 1.6;
			color: var(--color-accent);
			font-weight: 800;
			padding-top: 10px;
			padding-left: 25px;
		}
	}
}
section.points {
	padding: 30px 5% 80px 5%;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 40px;
		@media (width < 950px) {
			grid-template-columns: repeat(2, 1fr);
			row-gap: 40px;
		}
		@media (width < 600px) {
			grid-template-columns: repeat(1, 1fr);
		}
		> article {
			> figure {
				text-align: center;
				> img {
					width: 100%;
					max-width: 100%;
				}
			}
			> div {
				padding-inline: 5%;
				> h3 {
					margin-block: 15px;
					font-size: min(1.4rem, 5.5vw);
					line-height: 1.2;
					font-weight: 800;
					color: var(--color-accent);
				}
				> p {
					font-size: min(1.0rem, 5.0vw);
					line-height: 1.8;
					font-weight: 600;
					color: #333;
					text-align: justify;
				}
			}
		}
	}
}
section.inform {
	background-color: #eff1f1;
	padding: 30px 5% 80px 5%;
	> div {
		max-width: 1300px;
		margin-inline: auto;
		> div.slideItem {
			position: relative;
			> div.items {
				touch-action: pan-y;
				cursor: grab;
				&.dragging {
					cursor: grabbing;
					user-select: none;
				}
				> div#informArea {
					display: flex;
					gap: 20px;
					transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
					will-change: transform;
					> article {
						background-color: #fff;
						width: 270px;
						flex-shrink: 0;
						border-radius: 10px;
						overflow: hidden;
						> figure {
							> img {
								max-width: 100%;
							}
						}
						> div {
							padding-block: 15px;
							padding-inline: 15px;
							> div {
								display: flex;
								column-gap: 5px;
								> ce-inform-category {
								}
								> ce-inform-mark {
								}
							}
							> p {
								margin-top: 5px;
								font-size: 0.9rem;
								line-height: 1.5;
								color: #111;
							}
						}
					}
				}
			}
			> div.buttons {
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 50px;
				@media (width < 500px) {
					column-gap: 30px;
				}
				> div {
					background: transparent;
					cursor: pointer;
					transition: opacity 0.3s;
					> img {
						width: 25px;
						@media (width < 500px) {
							width: 15px;
						}
					}
					&:hover {
						opacity: 0.7;
					}
					&:focus-visible {
						outline: 3px solid #b51f35;
						outline-offset: 3px;
					}
					&.disabled {
						opacity: 0.2;
						cursor: default;
					}
				}
				> a {
					text-decoration: none;
					@media (width < 500px) {
						width: 200px;
					}
					> img {
						max-width: 100%;
					}
					&:hover {
						opacity: 0.7;
					}
				}
			}
		}
	}
}
section.info {
	background: linear-gradient(135deg, #ff8264 45%, #dc2850 95%);
	@media (width < 960px) {
		padding: 30px 5% 0px 5%;
	}
	> div {
		display: grid;
		grid-template-columns: 1.1fr 1fr;
		column-gap: 10px;
		max-width: 1300px;
		margin-inline: auto;
		@media (width < 1300px) {
			max-width: unset;
			margin-inline: unset;
		}
		@media (width < 960px) {
			grid-template-columns: 1fr;
			row-gap: 20px;
		}
		> figure {
			padding-top: 20px;
			margin-left: 2%;
			align-self: end;
			justify-self: end;
			display: inline-block;
			@media (width < 960px) {
				order: 2;
				margin-left: unset;
			}
			> img {
				max-width: min(100%,750px);
				margin-right: auto;
			}
		}
		> div {
			display: grid;
			margin-right: 5%;
			align-content: center;
			@media (width < 960px) {
				margin-right: unset;
			}
			> div.subtitle {
				> div {
					display: flex;
					align-items: center;
					gap: 15px;
					> div {
						height: 2px;
						width: 12px;
						background-color: #fff;
					}
					> h2 {
						font-size: min(2.2rem, 7vw);
						line-height: 1.0;
						color: #fff;
						font-weight: 600;
						font-family: var(--font-serif);
					}
				}
				> p {
					font-size: min(1.0rem, 5.0vw);
					line-height: 1.6;
					color: #fff;
					font-weight: 800;
					padding-top: 10px;
					padding-left: 25px;
				}
			}
			> p {
				margin-block: 30px;
				font-size: min(1.2rem, 5.5vw);
				line-height: 1.8;
				color: #fff;
				font-weight: 800;
				text-align: justify;
				@media (width < 1030px) {
					margin-block: 10px;
				}
				@media (width < 960px) {
					margin-block: 30px;
				}
			}
			> div.memberlink {
				justify-self: start;
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.8;
					}
					> p {
						border-radius: 10px;
						padding: 15px 80px 15px 30px;
						background: url(./image/arrow_fff.svg), rgba(255,255,255,0.3);
						background-position: calc(100% - 40px) 50%;
						background-size: 15px;
						background-repeat: no-repeat;
						font-size: min(1.1rem, 7vw);
						line-height: 1.3;
						color: #fff;
						font-weight: 600;
					}
				}
			}
		}
	}
}
section.service {
	padding: 50px 5% 50px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		> div {
			justify-self: center;
			display: grid;
			grid-template-columns: auto auto;
			align-items: center;
			justify-content: center;
			column-gap: 10px;
			filter: drop-shadow(0 0 10px rgba(51,51,51,0.3));
			background-color: #fff;
			padding: 15px 40px;
			border-radius: 20px;
			@media (width < 830px) {
				grid-template-columns: 1fr;
				row-gap: 10px;
			}
			@media (width < 520px) {
				padding: 15px 20px;
			}
			> figure {
				text-align: center;
				> img {
					max-width: 100%;
				}
			}
			> div {
				> p {
					font-size: min(1.1rem, 5.0vw);
					line-height: 1.0;
					color: #333;
					font-weight: 600;
				}
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> div {
						display: flex;
						align-items: center;
						column-gap: 5px;
						> h3 {
							font-size: min(1.7rem, 5.5vw);
							line-height: 1.2;
							color: #dc2850;
							font-weight: 600;
						}
						> img {
							width: 40px;
							@media (width < 460px) {
								width: 25px;
							}
						}
					}
				}
			}
		}
	}
}
section.aboutItem {
	> div {
		display: grid;
		> div.bg {
			grid-area: 1/1/2/2;
			align-self: end;
			background-color: #fadfe5;
			width: 100%;
			height: 70%;
			border-radius: 50px 50px 0 0;
			@media (width < 1120px) {
				height: 90%;
			}
		}
		> div.content {
			padding: 50px 5% 50px 5%;
			grid-area: 1/1/2/2;
			> div {
				max-width: 1100px;
				margin-inline: auto;
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				column-gap: 10px;
				@media (width < 1120px) {
					grid-template-columns: repeat(1, 1fr);
				}
				> article {
					display: grid;
					border-radius: 10px;
					@media (width < 1120px) {
						justify-self: center;
						max-width: 700px;
						margin-inline: auto;
						&:nth-of-type(n + 2) {
							margin-top: 50px;
						}
					}
					&:nth-of-type(3) {
						> a {
							> div {
								> div {
									> p {
										padding-bottom: 2rem;
										@media (width < 1120px) {
											padding-bottom: unset;
										}
									}
								}
							}
						}
					}
					> figure {
						align-self: start;
						> img {
							border-radius: 10px 10px 0px 0px;
							max-width: 100%;
						}
					}
					> a {
						text-decoration: none;
						display: block;
						&:hover {
							opacity: 0.7;
						}
						> div {
							min-height: 190px;
							background-color: #fff;
							padding: 15px 20px;
							border-radius: 0px 0px 10px 10px;
							pointer-events: none;
							@media (width < 1120px) {
								min-height: unset;
							}
							> h3 {
								font-size: min(1.3rem, 5.5vw);
								line-height: 1.5;
								color: var(--color-accent);
								font-weight: 600;
							}
							> div {
								display: grid;
								grid-template-columns: 1fr auto;
								column-gap: 15px;
								> p {
									height: 100%;
									padding-top: 10px;
									font-size: min(1.0rem, 5vw);
									line-height: 1.8;
									color: #333;
									font-weight: 600;
									text-align: justify;
									letter-spacing: 0.5px;
								}
								> img {
									align-self: end;
									width: 40px;
								}
							}
						}
					}
				}
			}
		}
	}
}
section.knowledge {
	background-color: #eff1f1;
	padding: 30px 5% 80px 5%;
	> div {
		max-width: 1300px;
		margin-inline: auto;
		> div.slideItem {
			position: relative;
			> div.items {
				touch-action: pan-y;
				cursor: grab;
				&.dragging {
					cursor: grabbing;
					user-select: none;
				}
				> div#knowledgeArea {
					display: flex;
					gap: 20px;
					transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
					will-change: transform;
					> article {
						background-color: #fff;
						width: 270px;
						flex-shrink: 0;
						border-radius: 10px;
						overflow: hidden;
						> figure {
							> img {
								max-width: 100%;
							}
						}
						> div {
							padding-block: 10px 15px;
							padding-inline: 15px;
							/*
							> div {
								font-size: 0.9rem;
								line-height: 1.5;
								color: #666;
							}
							*/
							> p {
								margin-top: 5px;
								font-size: 0.9rem;
								line-height: 1.5;
								color: #111;
							}
						}
					}
				}
			}
			> div.buttons {
				margin-top: 20px;
				display: flex;
				justify-content: center;
				align-items: center;
				column-gap: 50px;
				@media (width < 500px) {
					column-gap: 30px;
				}
				> div {
					background: transparent;
					cursor: pointer;
					transition: opacity 0.3s;
					> img {
						width: 25px;
						@media (width < 500px) {
							width: 15px;
						}
					}
					&:hover {
						opacity: 0.7;
					}
					&:focus-visible {
						outline: 3px solid #b51f35;
						outline-offset: 3px;
					}
					&.disabled {
						opacity: 0.2;
						cursor: default;
					}
				}
				> a {
					text-decoration: none;
					@media (width < 500px) {
						width: 200px;
					}
					> img {
						max-width: 100%;
					}
					&:hover {
						opacity: 0.7;
					}
				}
			}
		}
	}
}
section.other {
	padding: 30px 5% 80px 5%;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 30px;
		@media (width < 680px) {
			grid-template-columns: 1fr;
			row-gap: 80px;
		}
		> article {
			display: grid;
			&:nth-of-type(2) {
				> figure {
					> img {
						border: 1px solid #231815;
					}
				}
			}
			> figure {
				> img {
					border-radius: 20px;
					max-width: 100%;
				}
			}
			> p {
				margin-block: 20px;
				font-size: min(1.0rem, 5vw);
				line-height: 1.8;
				color: #333;
				font-weight: 600;
				text-align: justify;
			}
			> div.otherlink {
				justify-self: start;
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.8;
					}
					> p {
						border: 1px solid #00ac9a;
						border-radius: 10px;
						padding: 15px 80px 15px 30px;
						background: url(./image/arrow_00ac9a.svg);
						background-position: calc(100% - 40px) 50%;
						background-size: 15px;
						background-repeat: no-repeat;
						font-size: min(1.1rem, 7vw);
						line-height: 1.0;
						color: #00ac9a;
						font-weight: 600;
					}
				}
			}
		}
	}
}
section.firstTime {
	margin-bottom: 50px;
	background: linear-gradient(135deg, #1d9fff 45%, #6f00d9 95%);
	display: grid;
	> figure {
		display: block;
		grid-area: 1/1/2/2;
		align-self: end;
		justify-self: end;
		padding-top: 20px;
		max-width: min(100%,50vw);
		@media (width < 960px) {
			grid-area: 2/1/3/2;
			padding-top: 10px;
			max-width: 70vw;
		}
		> img {
			max-width: 100%;
		}
	}
	> div {
		grid-area: 1/1/2/2;
		display: grid;
		grid-template-columns: 1fr 1.1fr;
		column-gap: 10px;
		max-width: 1300px;
		margin-inline: auto;
		@media (width < 1300px) {
			max-width: unset;
			margin-inline: unset;
		}
		@media (width < 960px) {
			padding-top: 30px;
			grid-template-columns: 1fr;
			row-gap: 20px;
		}
		> div {
			display: grid;
			margin-left: 5%;
			align-content: center;
			@media (width < 960px) {
				padding-top: 0px;
				margin-right: unset;
				margin-inline: 5%;
			}
			> div.subtitle {
				> div {
					display: flex;
					align-items: center;
					gap: 15px;
					> div {
						height: 2px;
						width: 12px;
						background-color: #fff;
					}
					> h2 {
						font-size: min(2.2rem, 7vw);
						line-height: 1.0;
						color: #fff;
						font-weight: 600;
						font-family: var(--font-serif);
					}
				}
				> p {
					font-size: min(1.0rem, 5.0vw);
					line-height: 1.6;
					color: #fff;
					font-weight: 800;
					padding-top: 10px;
					padding-left: 25px;
				}
			}
			> p {
				margin-block: 30px;
				font-size: min(1.2rem, 5.5vw);
				line-height: 1.8;
				color: #fff;
				font-weight: 800;
				text-align: justify;
				@media (width < 1030px) {
					margin-block: 10px;
				}
				@media (width < 960px) {
					margin-block: 30px;
				}
			}
			> div.memberlink {
				justify-self: start;
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.8;
					}
					> p {
						border-radius: 10px;
						padding: 15px 80px 15px 30px;
						background: url(./image/arrow_fff.svg), rgba(255,255,255,0.3);
						background-position: calc(100% - 40px) 50%;
						background-size: 15px;
						background-repeat: no-repeat;
						font-size: min(1.1rem, 7vw);
						line-height: 1.0;
						color: #fff;
						font-weight: 600;
						@media (width < 960px) {
							padding: 15px 60px 15px 20px;
							background-position: calc(100% - 30px) 50%;
						}
					}
				}
			}
		}
	}
}
section.documents {
	user-select: none;
	position: fixed;
	right: 0px;
	top: 30%;
	z-index: 500;
	opacity: 1.0;
	transition: bottom 0.3s, opacity 0.3s;
	&.hidden {
		display: none;
	}
	@media print {
		display: none;
	}
	@media (width < 900px) {
		display: none;
	}
	&:hover {
		opacity: 1;
	}
	&.on {
		bottom: 0px;
	}
	> a {
		&:hover {
			opacity: 0.8;
		}
		> img {
			cursor: pointer;
			width: 90px;
		}
	}
}