section.panel {
	background-color: #eee;
	> div {
		max-width: 1920px;
		margin-inline: auto;
		> img {
			width: 100%;
		}
	}
}

section.item {
	padding: 0px 3%;
	> div {
		max-width: 810px;
		margin-inline: auto;
		> article {
			background-color: rgba(255,255,255,0.7);
			padding: 70px 40px;
			@media (width < 600px) {
				padding: 70px 20px;
			}
			> div.image {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				> figure.object {
					max-width: 500px;
					> img {
						margin-bottom: 30px;
						max-width: 100%;
					}
				}
				> figure.text {
					max-width: 400px;
					> img {
						margin-bottom: 30px;
						max-width: 100%;
					}
				}
			}
			> div.nametext {
				max-width: 600px;
				margin-inline: auto;
				display: grid;
				grid-template-columns: 1fr 1fr;
				column-gap: 10%;
				@media (width < 600px) {
					grid-template-columns: 1fr;
				}
				> div.block {
					@media (width < 600px) {
						margin-top: 30px;
					}
					> figure {
						> img {
							max-width: 100%;
						}
					}
					> h3 {
						padding-top: 30px;
						font-size: 2.4em;
						line-height: 1.5;
						text-align: center;
						font-weight: 500;
						@media (width < 600px) {
							font-size: 1.8rem;
						}
					}
				}

			}
			> h2 {
				padding-bottom: 40px;
				font-size: 4.6rem;
				line-height: 1.5;
				text-align: center;
				font-weight: 700;
				color: #BD1D21;
				font-family: var(--font-serif);
				@media (width < 600px) {
					font-size: 2.4rem;
				}
				> span {
					font-size: 3.4rem;
					@media (width < 600px) {
						font-size: 2.0rem;
					}
				}
			}
			> h3 {
				font-size: 2.4em;
				line-height: 1.5;
				text-align: center;
				font-weight: 500;
				@media (width < 600px) {
					font-size: 2.2rem;
				}
			}
			> h4 {
				text-align: center;
				padding-top: 20px;
				font-size: 3.8rem;
				line-height: 1.5;
				text-align: center;
				font-weight: 700;
				color: #235A46;
				font-family: var(--font-serif);
				@media (width < 600px) {
					font-size: 2.2rem;
				}
				> span {
					font-size: 2.4rem;
					line-height: 1.0;
				}
			}
			> p {
				margin-top: 20px;
				font-size: 2.0rem;
				line-height: 1.7;
				color: #333;
				text-align: justify;
				> span.red {
					color: #FF415A;
				}
			}
		}
	}
}
section.item02 {
	> div {
		> article {
			> div.image {
				> figure.object {
					max-width: 270px;
				}
			}
		}
	}
}
section.item03 {
	> div {
		> article {
			> div.image {
				margin-left: -20%;
				@media (width < 600px) {
					margin-left: 0;
				}
				> figure.object {
					max-width: 500px;
				}
			} 
		}
	}
}

section.line {
	padding: 0px 3%;
	max-width: 1100px;
	margin-inline: auto;
	> div {
		margin-inline: 5%;
		border-top: solid 1px #bbb;
		@media (width < 850px) {
			max-width: 810px;
			margin-inline: 40px;
		}
		@media (width < 600px) {
			margin-inline: 20px;
		}
	}
}

section.order {
	padding: 30px 7% 0 7%;
	> div {
		max-width: 900px;
		margin-inline: auto;
		> div {
			padding: 20px;
			border: solid 1px #006E32;
			text-align: center;
			> p {
				font-size: 4.3rem;
				line-height: 1.3;
				text-align: center;
				font-weight: 700;
				color: #006E32;
				@media (width < 600px) {
					font-size: 2.8rem;
				}
			}
			> figure {
				padding-top: 20px;
				> img {
					max-width: 100%;
				}
			}
		}
		> a {
			display: block;
			padding: 30px;
			font-size: 3.0rem;
			line-height: 1.2;
			color: #fff;
			text-decoration: none;
			background-image: url(../../common/image/mark_external_fff.svg);
			background-size: 30px;
			background-repeat: no-repeat;
			background-position: right 30px top 50%;
			background-color: #006E32;
			text-align: center;
			@media (width < 450px) {
				background-size: 20px;
				background-position: right 20px top 50%;
			}
			&:hover {
				opacity: 0.7;
			}
		}
	}
}