/* chapter02-07: chapter01のトーンを保つための最小限の追加表現 */

/* 判型比較：カードではなく、本が並んでいるように見せる */
.main-column {
    min-width: 0;
}

.chapter-size-line {
	margin: 22px 0 8px 73px;
	min-height: 190px;
	display: flex;
	align-items: flex-end;
	gap: 24px;
	padding: 18px 12px 0;
  flex-wrap: wrap;
}
.size-book {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background: #f5f1df;
	border: 1px solid #d8d0bd;
	box-shadow: 4px 5px 0 #e8e1d0;
	color: #4f4b44;
}
.size-book span {
	font-size: 12px;
	font-weight: 700;
}
.size-book small {
	margin-top: 4px;
	font-size: 8px;
	color: #777064;
}
.size-shiroku {
	width: 82px;
	height: 125px;
}
.size-a5 {
	width: 92px;
	height: 132px;
}
.size-b5 {
	width: 108px;
	height: 145px;
}
.size-a4 {
	width: 118px;
	height: 165px;
}
/* 縦書き・横書き：説明の間に挟む比較 */

.chapter-writing-sample {
	margin: 18px 0 0 73px;
	display: grid;
	grid-template-columns: 1fr 0.5fr 1fr;
	align-items: center;
	gap: 18px;
	padding: 18px 0;
	border-top: 1px dotted #d9d1bf;
	border-bottom: 1px dotted #d9d1bf;
}
.chapter-writing-sample>div {
	padding: 0 8px;
}
.chapter-writing-sample b {
	display: block;
	color: #5e897b;
	font-size: 14px;
	margin-bottom: 4px;
}
.chapter-writing-sample p {
	margin: 0;
	font-size: 14px;
}
.chapter-writing-sample>span {
	color: #aaa08f;
	font-size: 12px;
}
/* 表紙案：同じ枠のカードではなく、3冊の本を置く */

.chapter-cover-line {
	margin: 24px 0 4px 73px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 34px;
}
.cover-sample {
	margin: 0;
	width: 130px;
	text-align: center;
}
.cover-mark {
	aspect-ratio: .72;
	display: flex;
	align-items: center;
	justify-content: center;
	/*box-shadow: 5px 7px 0 #ebe4d5;*/
}
.cover-sample figcaption {
	font-size: 11px;
	color: #756e63;
	margin-top: 9px;
}
.chapter-type-line {
	margin: 18px 0 2px 73px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	border-top: 1px solid #ded7c8;
	border-bottom: 1px solid #ded7c8;
}
.chapter-type-line>div {
	padding: 18px 20px;
}
.chapter-type-line>div+div {
	border-left: 1px solid #ded7c8;
}
.chapter-type-line b {
	display: block;
	font-size: 19px;
	margin-bottom: 4px;
}
.chapter-type-line span {
	font-size: 12px;
	color: #6b655c;
}
.type-mincho b {
	font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
	font-weight: 500;
}
.type-gothic b {
	font-family: var(--sans);
}
.chapter-layout-demo {
	margin: 20px 0 40px 73px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
}
.layout-demo-page {
	width: 170px;
	height: 125px;
	padding: 13px;
	background: #fff;
	border: 1px solid #d9d1c1;
	display: grid;
	gap: 6px;
	position: relative;
}
.layout-demo-page i {
	display: block;
	background: #ded8ca;
}
.layout-demo-page.equal {
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}
.layout-demo-page.focus {
	grid-template-columns: 1.6fr .7fr;
	grid-template-rows: 1fr 1fr;
}
.layout-demo-page.focus i:first-child {
	grid-row: 1 / 3;
}
.layout-demo-page small {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -22px;
	font-size: 12px;
	color: #726b60;
	text-align: center;
}
.layout-arrow {
	color: #77964f;
}
/* 印刷・製本 */

.chapter-two-way {
	margin: 18px 0 0 73px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid #ddd5c5;
	border-bottom: 1px solid #ddd5c5;
}
.chapter-two-way>div {
	padding: 18px 20px;
}
.chapter-two-way>div+div {
	border-left: 1px solid #ddd5c5;
}
.chapter-two-way b {
	color: #5e897b;
	font-size: 14px;
}
.chapter-two-way p {
	margin: 5px 0 0;
	font-size: 14px;
}
.chapter-binding-line {
	margin: 22px 0 0 73px;
	display: flex;
	gap: 50px;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 8px;
}
.chapter-cost-line {
	margin: 18px 0 20px 73px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	padding: 13px 0;
	border-top: 1px dotted #d8d0be;
	border-bottom: 1px dotted #d8d0be;
}
.chapter-cost-line span {
	font-size: 14px;
}
.chapter-cost-line span:not(:last-child)::after {
	content: "+";
	margin-left: 14px;
	color: #9baa71;
}
/* 完成までの流れ */

.chapter-flow-line {
	list-style: none;
	margin: 22px 0 0 73px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid #d8d0c0;
	border-bottom: 1px solid #d8d0c0;
}
.chapter-flow-line li {
	position: relative;
	padding: 17px 18px;
	min-height: 76px;
}
.chapter-flow-line li+li {
	border-left: 1px solid #e1d9ca;
}
.chapter-flow-line li:not(:last-child)::after {
	content: "›";
	position: absolute;
	right: -5px;
	top: 19px;
	z-index: 2;
	color: #87a260;
	background: #fffef9;
	padding: 0 2px;
}
.chapter-flow-line b {
	display: block;
	color: #5e897b;
	font-size: 14px;
}
.chapter-flow-line span {
	display: block;
	font-size: 14px;
	margin-top: 3px;
}
/* FAQ：chapter01の細い罫線と余白に寄せる */

.chapter-faq {
	margin-left: 73px;
	border-top: 1px solid #ddd5c5;
}
.chapter-faq details {
	border-bottom: 1px solid #e5dece;
}
.chapter-faq summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 16px 44px 16px 34px;
	font-size: 14px;
	font-weight: 700;
}
.chapter-faq summary::-webkit-details-marker {
	display: none;
}
.chapter-faq summary::before {
	content: "Q";
	position: absolute;
	left: 5px;
	top: 14px;
	color: #77964f;
	font-size: 14px;
}
.chapter-faq summary::after {
	content: "+";
	position: absolute;
	right: 10px;
	top: 12px;
	color: #77964f;
	font-size: 18px;
	font-weight: 400;
}
.chapter-faq details[open] summary::after {
	content: "−";
}
.chapter-faq .faq-answer {
	position: relative;
	padding: 0 34px 17px;
	font-size: 14px;
	line-height: 1.9;
	color: #5d5850;
}
.chapter-faq .faq-answer::before {
	content: "A";
	position: absolute;
	left: 5px;
	top: 0;
	color: #c48556;
	font-weight: 700;
}
@media(max-width:820px) {
	.chapter-size-line, .chapter-writing-sample, .chapter-cover-line, .chapter-type-line, .chapter-layout-demo, .chapter-two-way, .chapter-binding-line, .chapter-cost-line, .chapter-flow-line, .chapter-faq {
		margin-left: 0;
	}
}
@media(max-width:520px) {
	.chapter-size-line {
		gap: 10px;
		justify-content: flex-start;
		padding-bottom: 8px;
	}
	.chapter-writing-sample {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.chapter-writing-sample>span {
		display: none;
	}
	.chapter-cover-line {
		gap: 14px;
		justify-content: flex-start;
		overflow-x: auto;
		padding: 0 4px 12px;
	}
	.cover-sample {
		flex: 0 0 90px;
	}
	.chapter-type-line, .chapter-two-way {
		grid-template-columns: 1fr;
	}
	.chapter-type-line>div+div, .chapter-two-way>div+div {
		border-left: 0;
		border-top: 1px solid #ded7c8;
	}
	.chapter-layout-demo {
		gap: 8px;
        width: 100%;
	}
	.layout-demo-page {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
        max-width: 125px;
        height: auto;
        aspect-ratio: 125 / 98;
    }
    .layout-arrow {
        flex: 0 0 auto;
    }
	.chapter-binding-line {
		gap: 22px;
		justify-content: flex-start;
		overflow-x: auto;
	}
	.binding-book {
		min-width: 205px;
	}
	.chapter-cost-line span:not(:last-child)::after {
		margin-left: 8px;
	}
	.chapter-flow-line {
		grid-template-columns: 1fr 1fr;
	}
	.chapter-flow-line li:nth-child(3) {
		border-left: 0;
		border-top: 1px solid #e1d9ca;
	}
	.chapter-flow-line li:nth-child(4) {
		border-top: 1px solid #e1d9ca;
	}
	.chapter-faq summary {
		padding-left: 28px;
	}
	.chapter-faq .faq-answer {
		padding-left: 28px;
		padding-right: 10px;
	}
	.layout-demo-page small {
		font-size: 10px;
	}
}