section.switchzoomimage {
	user-select: none;
	overflow: hidden;
	position: relative;
	display: grid;
	@media print {
		display: none;
	}
	> figure {
		grid-area: 1/1/2/2;
		z-index: 0;
		position: relative;
		width: 100vw;
		height: 100vh;
		height: 100svh;
		> div {
			position: absolute;
			left: 0;
			top: 0;
			width: 100vw;
			height: 100vh;
			height: 100svh;
			background-size: cover;
			background-position: 50% 50%;
			transition: opacity 2s;
			opacity: 0;
			animation-duration: 15s;
			animation-timing-function: linear;
		}
	}
	> div.content {
		grid-area: 1/1/2/2;
		z-index: 1;
		transition: 2s;
		display: flex;
		justify-self: center;
		align-self: center;
		pointer-events: none;
		max-width: 283px;
		> img {
			max-width: 100%;
		}
	}
	> div.nav {
		grid-area: 1/1/2/2;
		z-index: 1;
		display: flex;
		justify-self: center;
		align-self: end;
		margin-bottom: 10px;
		> a {
			padding: 5px;
			cursor: pointer;
			transition: 0.2s;
			&:hover {
				opacity: 0.7;
			}
			> 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;
				}
			}
		}
	}
	> a {
		grid-area: 1/1/2/2;
		z-index: 1;
		justify-self: start;
		align-self: end;
		margin-left: 20vw;
		margin-bottom: 10px;
		transition: transform ease-in-out 0.66s;
		animation-name: panelbottomarrowanima;
		animation-duration: 4s;
		pointer-events: none;
		@media (width < 800px) {
			margin-left: 1vw;
		}
	}
}
@keyframes panelanima {
	0% {
		transform: scale(1);
	}
	97% {
		transform: scale(1.1);
	}
	100% {
		transform: scale(1);
	}
}
@keyframes panelbottomarrowanima {
	0% {
		transform: translateY(0);
	}
	16.6% {
		transform: translateY(-20px);
	}
	33.3% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
	66.6% {
		transform: translateY(0);
	}
	83.3% {
		transform: translateY(-20px);
	}
	100% {
		transform: translateY(0);
	}
}
section.inform {
	padding: 100px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
		> div.more {
			text-align: right;
			> a {
				text-decoration: none;
				&:hover {
					opacity: 0.7;
				}
				> img {}
			}
		}
		> div#informArea {
			margin-top: 40px;
			display: flex;
			column-gap: 20px;
			overflow-x: auto;
			overflow-y: hidden;
			> div {
				max-width: 235px;
				&.empty {
					display: block;
					max-width: 100%;
					width: 100%;
					text-align: center;
					background-color: #eee;
					padding-block: 20px;
					padding-inline: 5px;
					font-size: 0.9rem;
				}
				> a {
					text-decoration: none;
					&:hover {
						> figure > img {
							transform: scale(1.1);
						}
						> ce-inform-category {
							opacity: 0.7;
						}
						> div {
							opacity: 0.7;
						}
						> p {
							opacity: 0.7;
						}
					}
					> figure {
						overflow: hidden;
						> img {
							width: 235px;
							height: 235px;
							object-fit: cover;
							object-position: 50% 50%;
							transition: transform 0.5s;
						}
					}
					> ce-inform-category {
						margin-top: 10px;
						display: block;
					}
					> div {
						margin-top: 5px;
						font-size: min(0.9rem,4.5vw);
						line-height: 1.3;
						color: #222;
					}
					> p {
						margin-top: 5px;
						font-size: min(0.9rem,4.5vw);
						line-height: 1.3;
						color: #222;
					}
				}
			}
		}
	}
}
section.about {
	padding: 100px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
		> input[type="checkbox"] {
			display: none;
			&:checked + div {
				> article {
					&:nth-of-type(1) {
						opacity: 0;
					}
					&:nth-of-type(2) {
						opacity: 1;
					}
				}
			}
		}
		> div {
			margin-top: 80px;
			display: grid;
			> article {
				grid-area: 1/1/2/2;
				align-self: start;
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 50px;
				row-gap: 10px;
				transition: opacity 0.4s;
				&:nth-of-type(2) {
					opacity: 0;
				}
				@media (width < 860px) {
					grid-template-columns: 1fr;
				}
				> div {
					margin-top: 20px;
					@media (width < 860px) {
						grid-row: 2/3;
					}
					> h3 {
						font-size: 1.3rem;
						line-height: 1.3;
						color: #111;
					}
					> p {
						margin-top: 20px;
						font-size: 1rem;
						line-height: 1.8;
					}
					> ul {
						margin-top: 30px;
						> li {
							padding-block: 10px;
							font-size: 1rem;
							line-height: 1.8;
							border-top: dashed 1px #a32034;
							&:nth-of-type(1) {
								border-top: none;
							}
							@media (width < 860px) {
								padding-block: 5px;
							}
						}
					}
				}
				> figure {
					@media (width < 860px) {
						grid-row: 1/2;
					}
					> img {
						max-width: 100%;
					}
					> div {
						order: 2;
						text-align: right;
						padding-top: 20px;
						> label {
							display: inline-block;
							text-decoration: none;
							cursor: pointer;
							&:hover {
								opacity: 0.7;
							}
							> img {
								max-width: 100%;
							}
						}
					}
				}
			}
		}
	}
}
section.store {
	padding: 100px 5% 0 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> img {
				max-width: 100%;
			}
		}
		> article {
			margin-top: 80px;
			display: grid;
			grid-template-columns: 1.2fr 1fr 30px;
			column-gap: 40px;
			row-gap: 10px;
			@media (width < 950px) {
				grid-template-columns: 0.7fr 1fr 30px;
				column-gap: 20px;
			}
			> figure {
				@media (width < 800px) {
					grid-column: 1/4;
				}
				> img {
					max-width: 100%;
				}
			}
			> div.text {
				align-self: center;
				@media (width < 800px) {
					grid-column: 1/3;
				}
				> h3 {
					font-size: 1.3rem;
					line-height: 1.3;
					color: #5f3f34;
				}
				> p.text01 {
					margin-top: 10px;
					font-size: min(1rem,5vw);
					line-height: 1.6;
					color: #5f3f34;
					@media (width < 500px) {
						> br {
							display: none;
						}
					}
				}
				> p.text02 {
					margin-top: 10px;
					font-size: min(0.9rem,4.5vw);
					line-height: 1.8;
					color: #5f3f34;
					border-top: solid 1px currentColor;
					border-bottom: solid 1px currentColor;
					padding-block: 10px;
				}
				> div {
					margin-top: 20px;
					> a {
						text-decoration: none;
						&:hover {
							opacity: 0.7;
						}
					}
					> figcaption {
						margin-top: 5px;
						margin-left: 10px;
						font-size: 0.8rem;
						line-height: 1.3;
						color: #5f3f34;
					}
				}
			}
			> div.sns {
				display: flex;
				flex-direction: column;
				justify-content: end;
				align-items: center;
				row-gap: 10px;
				@media (width < 800px) {
					grid-column: 3/4;
				}
				> a {
					text-decoration: none;
					&:hover {
						opacity: 0.7;
					}
					> img {
						max-width: 100%;
					}
				}
			}
		}
	}
}
section.handle {
	padding: 120px 5% 120px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: grid;
		grid-template-columns: 1fr 1fr;
		@media (width < 950px) {
			grid-template-columns: 1fr;
			row-gap: 40px;
		}
		> figure {
			justify-self: center;
			align-self: center;
			> img {
				max-width: 100%;
			}
		}
		> div {
			display: grid;
			grid-template-columns: 1fr 120px;
			@media (width < 950px) {
				column-gap: 30px;
				max-width: 500px;
				margin-inline: auto;
			}
			@media (width < 510px) {
				grid-template-columns: 1fr;
				row-gap: 40px;
			}
			> figure {
				justify-self: center;
				align-self: center;
				> img {
					max-width: 100%;
				}
			}
			> div {
				> h3 {
					font-size: 1.3rem;
					line-height: 1.6;
					color: #5f3f34;
					@media (width < 380px) {
						text-align: center;
					}
				}
				> ul {
					margin-top: 20px;
					> li {
						font-size: min(1rem,5vw);
						line-height: 1.8;
						color: #5f3f34;
					}
				}
			}
		}
	}
}