@charset "utf-8";
/* --- plan --- */
.page a.back {
	display: inline-block;
	margin-top: 40px;
}

.detail {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	margin-top: 40px;
	padding: 38px 40px;
	background: #f7f3eb;
}
.detail:first-of-type {
	margin-top: 0;
}

.detail .detailImg {
	width: 38%;
	text-align: center;
}
.detail .detailImg img {
	width: auto;
	max-width: 100%;
}

.detail .detailText {
	width: calc(62% - 20px);
}
.detail .detailText h2 {
	padding: 0.5em 20px;
	background: #d7b779;
	color: #fff;
	font-size: 1.5em;
	font-weight: normal;
	line-height: 1.5;
}
.detail .detailText .text {
	width: 100%;
	padding: 50px 20px;
	font-size: 1.07142857em;
}

.detail .detailText dt {
	font-weight: bold;
	width: 100%;
	margin: 24px auto 10px;
	padding: 0 20px 10px;
	border-bottom: 1px solid currentColor;
	color: #d54f0b;
}
.detail .detailText dt:first-child {
	margin-top: 0;
}
.detail .detailText dd {
	width: 100%;
	padding: 0 20px;
}
.detail .detailText dt:first-child {
	margin-top: 0;
}
.detail .detailText th, .detail .detailText td {
	padding: 0.5em 1em;
	border: 1px solid currentColor;
}
.detail .detailText th {
	text-align: center;
	vertical-align: middle;
	white-space: nowrap;
}

.detail .detailText a.btn {
	background: #533a09;
}
.detail .detailText dl + a {
	margin-top: 40px;
}
.detail .detailText a.btn:hover {
	color: #533a09;
	background-color: transparent;
}

.archive .detail .detailText .text {
	padding: 30px 20px;
}

@media (min-width: 641px) {
	.archive .detail .detailImg {
		width: 24%;
	}
	.archive .detail .detailText {
		width: calc(76% - 20px);
	}

	.single .detail .detailText a.btn {
		max-width: 25em;
	}
}
@media (max-width: 640px) {
	.detail {
		padding: 30px 20px;
	}

	.detail .detailImg, .detail .detailText {
		width: 100%;
	}
	.detail .detailImg + .detailText {
		margin-top: 20px;
	}

	.archive .detail .detailImg {
		position: relative;
		overflow: hidden;
	}
	.archive .detail .detailImg::before {
		display: block;
		padding-top: 56.25%;
		content: '';
	}
	.archive .detail .detailImg img {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
}