section.switchpanel {
	background-color: #eee;
	> div {
		max-width: 1920px;
		margin: 0 auto;
		overflow: hidden;
		> #switchPanelImage {
			user-select: none;
			display: grid;
			grid-template-rows: 1fr;
			grid-template-columns: 1fr;
			> div {
				grid-row: 1/2;
				grid-column: 1/2;
				&:nth-of-type(1) {
					z-index: 0;
				}
				&:nth-of-type(2) {
					z-index: 1;
					transition: 0.5s;
					cursor: ew-resize;
				}
				&:nth-of-type(3) {
					z-index: 2;
					justify-self: flex-end;
					align-self: end;
					display: flex;
					justify-content: center;
					align-items: center;
					column-gap: 5px;
					padding: 0 20px 20px 0;
					@media (width < 670px) {
						column-gap: 3px;
						padding: 0 3px 3px 0;
						> span {
							> img {
								width: 16px;
							}
						}
					}
					> span {
						transition: 0.3s;
						cursor: pointer;
						> img:nth-of-type(1) {
							display: block;
						}
						> img:nth-of-type(2) {
							display: none;
						}
						> img:nth-of-type(3) {
							display: none;
						}
						&.on {
							> img:nth-of-type(1) {
								display: none;
							}
							> img:nth-of-type(2) {
								display: block;
							}
							> img:nth-of-type(3) {
								display: none;
							}
						}
						&.next {
							> img:nth-of-type(1) {
								display: none;
							}
							> img:nth-of-type(2) {
								display: none;
							}
							> img:nth-of-type(3) {
								display: block;
							}
						}
					}
				}
				> a {
					> picture {
						> img {
							width: 100%;
						}
					}
				}
			}
		}
	}
}

#informwrapper {
	padding: 40px 5% 40px 5%;
	margin-top: 40px;
	background-color: #e6ecd7;
	> .inner {
		max-width: 980px;
		margin: 0 auto;
		> h2 {
			margin-top: 10px;
			font-size: 3.6rem;
			line-height: 100%;
			color: #333;
			font-family: var(--font-serif);
			letter-spacing: 0.1em;
			text-align: center;
		}
		> #informArea {
			margin-top: 20px;
			> a {
				text-decoration: none;
				padding: 15px 30px 12px 30px;
				border-top: dashed 1px #aaa;
				display: flex;
				&:hover {
					background-color: #dae3c3;
				}
				&:nth-of-type(1) {
					border-top-style: solid;
				}
				&:last-child {
					border-bottom: solid 1px #aaa;
				}
				> div {
					font-size: 1.5rem;
					line-height: 130%;
					color: #333;
					white-space: nowrap;
					margin-right: 20px;
				}
				> p {
					font-size: 1.5rem;
					line-height: 130%;
					color: #333;
				}
			}
		}
		> .button {
			text-align: center;
			margin-top: 30px;
			> a {
				display: inline-block;
				text-decoration: none;
				font-size: 1.5rem;
				line-height: 100%;
				color: #333;
				padding: 15px 50px;
				border: solid 1px #777;
				&:hover {
					background-color: #dae3c3;
				}
			}
		}
	}
}
@media screen and (max-width:1089px) {
	#informwrapper {
		> .inner {
			> #informArea {
				> a {
					flex-direction: column;
				}
			}
		}
	}
}
@media screen and (max-width:479px) {
	#informwrapper {
		padding: 40px 2% 40px 2%;
		> .inner {
			> .link {
				text-align: center;
				transform: translateY(0px);
				margin-top: 10px;
			}
		}
	}
}

.textwrapper {
	padding: 40px 5% 40px 5%;
	margin-top: 40px;
	background-color: #f4f2f0;
	> .inner {
		max-width: 1050px;
		margin: 0 auto;
		> article {
			padding: 20px 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			> img {
				width: 70%;
				max-width: 100%;
			}
			> a {
				text-decoration: none;
				background-color: #fff;
				width: 450px;
				&:hover {
					opacity: 0.7;
				}
				> h2 {
					padding: 20px 20px 0 20px;
					font-size: 1.7rem;
					line-height: 120%;
					color: #333;
				}
				> p {
					padding: 5px 20px 0 20px;
					margin-top: 5px;
					font-size: 1.5rem;
					line-height: 140%;
					color: #333;
					> span {
						color: #ddd;
					}
				}
				> div {
					margin: 20px 0 20px 20px;
					text-align: right;
					margin-right: -5px;
					> div {
						display: inline-block;
						font-size: 1.5rem;
						line-height: 100%;
						color: #fff;
						background-color: #f2a59d;
						padding: 5px 20px 5px 10px;
						background-image: url(../common/image/mark_external_fff.svg);
						background-repeat: no-repeat;
						background-position: right 5px top 50%;
					}
				}
			}
			&:nth-of-type(odd) {
				> img {
					order: 2;
				}
				> a {
					z-index: 1;
					order: 1;
					margin-right: -20px;
				}
			}
			&:nth-of-type(even) {
				> img {
					order: 1;
				}
				> a {
					z-index: 1;
					order: 2;
					margin-left: -20px;
				}
			}
		}
	}
}
@media screen and (max-width:799px) {
	.textwrapper {
		> .inner {
			> article {
				flex-direction: column;
				> img {
					width: auto;
					max-width: 100%;
				}
				> a {
					width: 100%;
				}
				&:nth-of-type(odd) {
					> img {
						order: 1;
					}
					> a {
						order: 2;
						margin-right: 0px;
					}
				}
				&:nth-of-type(even) {
					> a {
						margin-left: 0px;
					}
				}
			}
		}
	}
}

.imgwrapper {
	margin-top: 30px;
	text-align: center;
	> a {
		text-decoration: none;
		&:hover {
			opacity: 0.7;
		}
		> picture {
			> img {
				max-width: 100%;
			}
		}
	}
}

#triplewrapper {
	padding: 40px 5% 40px 5%;
	margin-top: 40px;
	> .inner {
		max-width: 1050px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		> article {
			margin: 10px;
			width: 320px;
			max-width: 320px;
			background-color: #fdefeb;
			> img {
				max-width: 100%;
			}
			> div {
				padding: 15px;
				> h3 {
					font-size: 1.8rem;
					line-height: 120%;
					color: #333;
					font-weight: 500;
					text-align: center;
				}
				> p {
					margin-top: 8px;
					font-size: 1.5rem;
					line-height: 140%;
					color: #333;
				}
			}
		}
	}
}
@media screen and (max-width:559px) {
	#triplewrapper {
		> .inner {
			flex-direction: column;
			align-items: center;
			> article {
				width: auto;
			}
		}
	}
}