:root {
	--paper: #fbf7ee;
	--ink: #28251f;
	--green: #168f7c;
	--green2: #0f7567;
	--yellow: #ffdf1e;
	--line: #e6dece;
	--section: #faf8f1;
	--shadow: 0 16px 44px rgba(72, 69, 56, .08);
	--sans: "Noto Sans JP", "Yu Gothic", sans-serif;
}
* {
	box-sizing: border-box;
}
html {
	scroll-behavior: smooth;
}
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	line-height: 1.8;
}
img {
	width: 100%;
	display: block;
}
/* リンク */

a {
	text-decoration: none;
	color: inherit;
	transition: 0.25s;
}
a:hover {
	color: var(--green);
}
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 22px;
	border-radius: 999px;
	font-weight: 700;
}
.btn.green {
	background: var(--green);
	color: #fff;
}
.btn.yellow {
	background: var(--yellow);
	color: #24211c;
	min-width: min(540px, 100%);
}
.btn.green:hover, .btn.yellow:hover {
	background: var(--green2);
	color: white;
}
.fa-regular, .fa-book {
	margin-right: 5px;
}
/* section */

.section {
	padding: 90px 24px;
}
.section-inner {
	width: min(1180px, 100%);
	margin: auto;
}
/* 見出し */

.heading {
	text-align: center;
	margin-bottom: 42px;
}
.heading.left {
	text-align: left;
	margin-bottom: 0;
}
.heading .en {
	margin: 0;
	color: var(--green);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
}
.heading h2 {
	margin: 3px 0 10px;
	font-size: clamp(28px, 3vw, 40px);
}
.heading p:last-child {
	margin: 0;
	color: #6c665c;
}
.reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: 0.65s;
}
.reveal.visible {
	opacity: 1;
	transform: none;
}
/*=====================================
                Header
=====================================*/

.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(251, 247, 238, 0.95);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(219, 208, 187, 0.7);
}
.header-inner {
	width: min(1320px, 100%);
	min-height: 82px;
	margin: auto;
	padding: 10px 22px;
	display: flex;
	align-items: center;
	gap: 26px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 10px;
}
.brand img {
	height: 45px;
	width: auto;
}
.nav {
	display: flex;
	justify-content: center;
	gap: 24px;
	flex: 1;
}
.nav a {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}
.header-cta {
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 700;
}
.menu-btn {
	display: none;
	margin-left: auto;
	border: 0;
	background: none;
}
.menu-btn span {
	display: block;
	width: 25px;
	height: 2px;
	background: #333;
	margin: 5px;
}
/*=====================================
                Footer
=====================================*/

footer {
	background: #fff;
}
.footer-main {
	width: min(1260px, 100%);
	margin: auto;
	padding: 35px 24px;
	display: grid;
	grid-template-columns: 1fr 1.2fr 1.2fr 1fr;
	gap: 24px;
	align-items: start;
}
.ssp-logo {
	width: auto;
	height: 25px;
}
.footer-main p, .footer-main nav a {
	font-size: 10px;
	color: #5e5a52;
}
.footer-main p {
	margin: 0;
}
.footer-main nav a:hover {
	color: var(--green);
}
.footer-main nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px 14px;
}
.footer-cta {
	padding: 15px;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
}
/* copyright */

.footer-bottom {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	background: #08705e;
	color: #fff;
	padding: 12px 20px;
	font-size: 9px;
}
.footer-bottom p {
	margin: 0;
}
/* page-top */

.page-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--yellow);
	color: black;
	display: grid;
	place-items: center;
	opacity: 0;
	pointer-events: none;
}
.page-top:hover {
	background: var(--green2);
	color: white;
}
.page-top.show {
	opacity: 1;
	pointer-events: auto;
}
/* contact */

.contact {
	position: relative;
	overflow: hidden;
	padding: 54px 24px;
	background: url("img/contact_back.png") bottom center / cover no-repeat, radial-gradient( circle at 15% 0, rgba(215, 236, 119, 0.33), transparent 33%), linear-gradient(90deg, #edf6ea, #fffde6, #edf6ea);
}
.contact-inner {
	text-align: center;
	position: relative;
	z-index: 2;
}
.contact-inner p {
	font-size: 18px;
	margin: 0;
}
.contact-inner h2 {
	font-size: 27px;
	margin: 3px 0 22px;
}
.contact-illus {
	position: absolute;
	width: 170px;
	bottom: -10px;
	z-index: 1;
}
.person-left {
	left: 9%;
}
.person-right {
	right: 9%;
}
/*=====================================
                Index
=====================================*/

.hero {
	overflow: hidden;
	background: url(img/hero_back.jpg);
	background-size: cover;
	background-position: center center;
	padding: 50px 0;
}
.hero img {
	width: 80%;
	margin: 0 auto;
}
.hero-copy {
	text-align: center;
}
.hero-intro {
	margin: 0 20px;
	font-size: 24px;
}
.hero-intro p {
	margin: 1px 0;
}
.genres {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 30px 0;
}
.genres span {
	background: var(--green);
	color: white;
	border-radius: 999px;
	padding: 7px 16px;
	font-size: 20px;
}
/* =========================================================
                      本ができるまでの流れ
========================================================= */

.flow {
	background: var(--section);
}
.flow-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 18px;
}
.flow-step {
	text-align: center;
	position: relative;
}
.flow-step:not(:last-child):after {
	content: "›";
	position: absolute;
	right: -14px;
	top: 88px;
	font-size: 30px;
	color: #a89d89;
}
.flow-step b {
	font-size: 16px;
	color: #8b9c4b;
	letter-spacing: 0.1em;
}
.circle-illus {
	margin: 9px auto 10px;
	width: 118px;
}
.flow-step h3 {
	font-size: 14px;
	margin: 2px 0 6px;
}
.flow-step p {
	font-size: 12px;
	color: #655e55;
	margin: 0;
}
.flow-note {
	text-align: center;
	margin: 28px 0 0;
}
/* =========================================================
                      自分の本のつくり方
========================================================= */

.guide {
	background: #fff;
}
.guide-card {
	display: grid;
	grid-template-columns: 0.5fr 1fr 1fr;
	overflow: hidden;
	background: var(--section);
	border: 1px solid #e4dccb;
	border-radius: 14px;
	box-shadow: 0 18px 45px rgba(80, 72, 57, 0.08);
}
.guide-photo {
	margin: 0;
	min-height: 325px;
}
.guide-photo img {
	height: 100%;
	object-fit: cover;
}
.guide-copy {
	padding: 42px 30px;
	align-self: center;
}
.guide-copy .en {
	color: var(--green);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
}
.guide-copy h2 {
	font-size: 29px;
	line-height: 1.55;
	margin: 5px 0 15px;
}
.guide-copy p {
	font-size: 14px;
	color: #615b52;
	margin-bottom: 20px;
}
.guide-list {
	position: relative;
	margin: 20px;
	background: #fffdf8;
	border: 1px solid #e5ddce;
	border-radius: 10px;
	padding: 24px 24px 22px;
	overflow: hidden;
}
.guide-list h3 {
	color: #d6844f;
	font-size: 16px;
	margin-top: 0;
}
.guide-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.guide-list li {
	font-size: 16px;
	margin: 7px 0;
	padding-left: 22px;
	position: relative;
}
.guide-list li:before {
	content: "\f058";
	font-family: "Font Awesome 7 Free";
	position: absolute;
	left: 0;
	color: var(--green);
	font-weight: 900;
}
.guide-person {
	position: absolute;
	right: -6px;
	bottom: -15px;
	width: 118px;
	opacity: 0.92;
}

/* サブページ */
.breadcrumb-wrap {
	background: var(--paper);
}
.breadcrumb {
	width: min(1320px, 100%);
	margin: auto;
	padding: 10px 24px;
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 10px;
	color: #6e685e;
}
.guide-hero {
	overflow: hidden;
	background: url(img/hero_back.jpg);
	background-size: cover;
	background-position: center bottom;
	padding: 50px 24px;
}
.guide-hero-inner {
	position: relative;
	z-index: 2;
	width: min(1120px, 100%);
	margin: auto;
	display: grid;
	grid-template-columns: 1fr 1.05fr;
	align-items: center;
	gap: 55px;
}
.guide-hero-copy {
	text-align: left;
	padding: 20px 0 4px;
}
.guide-hero-eyebrow {
	color: var(--green);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	margin: 0 0 15px;
}

/* layout */
.content-section {
	background: #fffef9;
	padding: 48px 24px 75px
}
.content-layout {
	width: min(1180px, 100%);
	margin: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 310px;
	gap: 44px;
	align-items: start
}
.contents-heading {
	text-align: center;
	margin-bottom: 24px
}
.contents-en {
	font-size: 11px;
	letter-spacing: .16em;
	margin: 0;
	color: #3e3b35
}
.contents-heading h2 {
	font-family: var(--serif);
	font-size: 34px;
	margin: 2px 0 0
}
.chapter-list {
	display: grid;
	gap: 11px
}
.chapter-card {
	min-height: 115px;
	display: grid;
	grid-template-columns: 90px 1fr 135px 42px;
	gap: 14px;
	align-items: center;
	padding: 14px 18px 14px 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 13px;
	box-shadow: 0 8px 24px rgba(70, 65, 52, .035)
}
.chapter-number {
	font-family: var(--serif);
	font-size: 48px;
	color: #b9c766;
	line-height: 1;
	text-align: center
}
.chapter-copy h3 {
	font-family: var(--serif);
	font-size: 18px;
	margin: 0 0 5px
}
.chapter-copy p {
	font-size: 14px;
	color: #625c53;
	margin: 0;
	max-width: 500px
}
.chapter-illust {
	display: grid;
	place-items: center;
	height: 90px
}
.chapter-illust img {
	width: auto;
	max-height: 85px
}
.chapter-arrow {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--green);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: 15px;
	line-height: 1;
	transition: .2s
}
.chapter-card:hover {
	cursor: pointer;
}
.chapter-card:hover .chapter-arrow {
	color: #fff;
	background: var(--green2);
	transform: translateX(3px)
}

/* sidebar */
.sidebar {
	position: sticky;
	top: 105px;
	display: grid;
	gap: 16px
}
.toc-card {
	background: #fffdf8;
	border: 1px solid var(--line);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--shadow)
}
.toc-title {
	background: var(--green);
	color: #fff;
	padding: 13px 16px;
	font-size: 16px;
	font-weight: 700
}
.toc-nav {
	padding: 12px 16px 15px
}
.toc-nav>div {
	padding: 6px 0 9px;
	border-bottom: 1px solid #eee7da
}
.toc-nav>div:last-child {
	border-bottom: 0
}
.toc-nav b {
	display: inline-block;
	color: var(--green);
	width: 28px;
	font-size: 13px
}
.toc-nav a {
	font-size: 14px;
	font-weight: 700;
	color: var(--green)
}
.toc-nav a:hover {
	color: var(--green2)
}
.toc-nav ul {
	list-style: none;
	margin: 4px 0 0;
	padding: 0 0 0 28px
}
.toc-nav li {
	font-size: 12px;
	color: #4f4b44;
	margin: 2px 0
}
.side-contact {
	background: #fffdf3;
	border: 1px solid #dfe4bc;
	border-radius: 10px;
	padding: 16px 17px;
	text-align: center
}
.side-contact>p {
	font-family: var(--serif);
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 6px
}
.side-people {
	width: 155px;
	margin: auto
}
.side-contact>a {
	background: var(--yellow);
	padding: 10px 8px;
	font-size: 10px;
	font-weight: 700;
	margin-top: 3px
}

/* Chapter 01 */
.chapter-content-section {
	background: #fffef9;
	padding: 46px 24px 78px
}
.chapter-main {
	min-width: 0
}
.chapter-header {
	min-height: 270px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	padding: 34px 0;
	margin-bottom: 24px;
	overflow: hidden;
}
.chapter-header-copy {
	display: flex;
	align-items: center;
	gap: 28px
}
.chapter-label {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f2f1c9;
	color: #718d4d;
	flex: none
}
.chapter-label span {
	font-size: 10px;
	letter-spacing: .13em
}
.chapter-label strong {
	font-size: 44px;
	line-height: 1
}
.chapter-header h1 {
	font-size: 31px;
	margin: 0 0 12px
}
.chapter-header p {
	font-size: 16px;
	margin: 0
}
.chapter-header-illust {
	width: 245px;
	align-self: flex-end
}
.chapter-header-illust img {
	max-height: 230px;
	object-fit: contain
}
.chapter-intro-box {
	width: min(610px, 100%);
	margin-bottom: 22px;
	padding: 17px 24px;
	background: #fff;
	border: 1px solid #ddd6c5;
	border-radius: 16px
}
.chapter-intro-box ul {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 7px 28px;
	list-style: none;
	padding: 0;
	margin: 0
}
.chapter-intro-box li {
	font-size: 14px;
	color: #246f64
}
.chapter-intro-box p {
	text-align: center;
	font-size: 14px;
	margin: 10px 0 0
}
.chapter-lead {
	padding: 0 8px 25px;
	border-bottom: 2px dotted #ded5b9
}
.chapter-lead p, .chapter-text p {
	font-size: 14px;
	line-height: 2;
	margin: 0
}
.chapter-block {
	padding: 29px 8px 20px;
	border-bottom: 1px solid #e9e1d1
}
.chapter-block#faq-list{
	border: none;
}
.chapter-block-heading {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 7px
}
.chapter-block-heading span {
	font-size: 25px;
	color: #77964f
}
.chapter-block-heading h2 {
	font-size: 22px;
	margin: 0
}
.chapter-text {
	padding-left: 73px;
	margin-bottom: 17px
}
.chapter-example-box, .chapter-purpose-box {
	margin-left: 73px;
	padding: 18px 24px;
	border: 1px solid #e2dcc8;
	border-radius: 14px;
	background: linear-gradient(90deg, #faf8e9, #f4f2df);
	display: grid;
	grid-template-columns: 1fr 170px;
	gap: 20px;
	align-items: center
}
.chapter-example-box h3, .chapter-purpose-box h3, .chapter-check-box h3 {
	color: #5e897b;
	font-size: 14px;
	margin: 0 0 6px
}
.chapter-example-box li, .chapter-purpose-box li, .chapter-check-box li, .chapter-check-box p {
	font-size: 14px;
	margin: 3px 0
}
.chapter-box-illust img {
	max-height: 140px;
	object-fit: contain
}
.chapter-point-box {
	position: relative;
	margin: 16px 0 0 73px;
	padding: 14px 100px 14px 22px;
	min-height: 80px;
	border: 1px solid #ded7c6;
	border-radius: 13px;
	background: #fff
}
.chapter-point-box h3 {
	font-size: 14px;
	color: #5d8b7d;
	margin: 0
}
.chapter-point-box p {
	font-size: 14px;
	margin: 0
}
.chapter-point-illust {
	position: absolute;
	right: 15px;
	bottom: 0;
	width: 50px
}
.chapter-point-illust img {
	object-fit: contain;
}
.chapter-audience {
	margin-left: 73px;
	display: grid;
	grid-template-columns: 230px 1fr;
	gap: 22px;
	align-items: end
}
.chapter-audience img {
	max-height: 165px;
	object-fit: contain
}
.chapter-check-box {
	padding: 18px 22px;
	background: #f5f7e8;
	border: 1px solid #dde1c8;
	border-radius: 14px
}
.chapter-break-box {
	margin: 15px 0 0 73px;
	padding: 14px 22px;
	border: 1px dashed #dcd3bd;
	border-radius: 12px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #fffdf8
}
.chapter-break-box h3 {
	font-size: 14px;
	color: #628c7e;
	margin: 0
}
.chapter-break-box p {
	font-size: 14px;
	margin: 0;
	padding-right: 20px;
}
.chapter-break-box>img {
	max-height: 90px;
	width: auto;
}
.chapter-purpose-box {
	grid-template-columns: 1fr 125px
}
.chapter-purpose-box ul {
	columns: 2
}
.chapter-pagination {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 35px;
	border: 1px solid var(--green);
	border-radius: 8px;
	overflow: hidden
}
.chapter-pagination a {
	padding: 14px 18px;
	color: var(--green);
	font-size: 11px
}
.chapter-pagination a:hover {
	background: var(--green2);
	color: #fff;
}
.chapter-pagination a+a {
	border-left: 1px solid var(--green);
	text-align: right
}
.toc-nav .current {
	background: #f6f4e6;
	margin: 0 -16px;
	padding-left: 16px;
	padding-right: 16px
}
.toc-nav li a {
	font-size: 12px;
	font-weight: 400;
	color: #4f4b44
}
@media(max-width:820px) {
	.chapter-header {
		min-height: auto;
		padding: 26px
	}
	.chapter-header-illust {
		width: 190px
	}
	.chapter-text {
		padding-left: 0
	}
	.chapter-example-box, .chapter-purpose-box, .chapter-point-box, .chapter-audience, .chapter-break-box {
		margin-left: 0
	}
	.chapter-audience {
		grid-template-columns: 190px 1fr
	}
}
@media(max-width:520px) {
	.chapter-content-section {
		padding: 25px 14px 50px
	}
	.chapter-header {
		padding: 22px 18px;
		display: block
	}
	.chapter-header-copy {
		gap: 14px;
		align-items: flex-start
	}
	.chapter-label {
		width: 72px;
		height: 72px
	}
	.chapter-label strong {
		font-size: 30px
	}
	.chapter-header h1 {
		font-size: 22px
	}
	.chapter-break-box{
		flex-direction: column;
	}
	.chapter-break-box p{
		padding-right: 0;
	}
	.chapter-break-box > img {
    	width: 100%;
    	max-width: 500px;
    	height: auto;
    	max-height: none;
  	}
	.chapter-header-illust {
		width: 100%;
		margin: 10px 0 -22px auto
	}
	.chapter-point-illust {
		width: 80px
	}
	.chapter-box-illust img {
		max-height: 170px;
	}
	.chapter-intro-box ul {
		grid-template-columns: 1fr
	}
	.chapter-block-heading {
		gap: 11px;
		align-items: flex-start
	}
	.chapter-block-heading span {
		font-size: 20px
	}
	.chapter-block-heading h2 {
		font-size: 18px
	}
	.chapter-example-box, .chapter-purpose-box {
		grid-template-columns: 1fr;
		padding: 16px
	}
	.chapter-audience {
		grid-template-columns: 1fr
	}
	.chapter-purpose-box ul {
		columns: 1
	}
	.chapter-pagination {
		grid-template-columns: 1fr
	}
	.chapter-pagination a+a {
		border-left: 0;
		border-top: 1px solid var(--green);
	}
}
/* =========================================================
                           お客様の声
========================================================= */

.voices {
	background: var(--section);
}
.section-row {
	display: flex;
	align-items: end;
	justify-content: space-between;
	margin-bottom: 25px;
}
.voice-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}
.voice {
	padding: 21px 20px;
	display: grid;
	grid-template-columns: 65px 1fr;
	gap: 14px;
	background: white;
	border: 1px solid var(--line);
	border-radius: 12px;
}
.portrait-line img {
	width: 60px;
}
.voice-title {
	font-size: 12px;
	color: #716b61;
}
.voice p {
	font-size: 14px;
	margin: 5px 0 0;
}
/* =========================================================
                            制作実績
========================================================= */

.slider {
	position: absolute;
	top: 42%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: 1px solid #d7cebd;
	background: #fff;
	border-radius: 50%;
	font-size: 24px;
	color: #827a6d;
	cursor: pointer;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
}
.prev {
	left: 0;
}
.next {
	right: 0;
}
.dots {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
}
.dots i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #d8d1c0;
}
.dots i.active {
	background: var(--green);
}
.book {
	flex: 0 0 calc((100% - 120px) / 6);
	min-width: 145px;
	text-align: center;
}
.book h3 {
	font-size: 11px;
	margin: 0;
}
.book p {
	font-size: 10px;
	color: #777;
	margin: 1px;
}
.cover {
	aspect-ratio: 0.7;
	display: grid;
	place-items: center;
	box-shadow: 0 11px 18px rgba(46, 45, 37, 0.17);
	margin-bottom: 10px;
}
.works {
	background: #fff;
}
.works-wrap {
	position: relative;
	padding: 0 44px;
}
.works-window {
	overflow: hidden;
}
.works-track {
	display: flex;
	gap: 24px;
	transition: transform 0.4s ease;
}
.book.work-open {
	cursor: pointer;
	position: relative;
	transition: transform 0.22s ease, filter 0.22s ease;
}
.book.work-open:hover, .book.work-open:focus-visible {
	transform: translateY(-5px);
	outline: none;
}
.book.work-open:focus-visible .cover {
	outline: 3px solid rgba(22, 143, 124, 0.25);
	outline-offset: 4px;
}
.book .work-author {
	margin: 4px 0 0;
	color: #5f5a52;
	font-size: 10px;
}
.book .work-date {
	margin: 1px 0 0;
	color: #918a7e;
	font-size: 9px;
}
.work-hint {
	display: inline-block;
	margin-top: 5px;
	color: var(--green);
	font-size: 10px;
	font-weight: 700;
	transition: 0.25s;
}
.book.work-open:hover .work-hint {
	color: var(--green2);
}
.work-modal {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: none;
}
.work-modal.is-open {
	display: block;
}
.work-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 37, 31, 0.62);
	backdrop-filter: blur(5px);
}
.work-modal-panel {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(1120px, calc(100% - 42px));
	max-height: calc(100vh - 42px);
	background: #fffdf7;
	border-radius: 18px;
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.28);
	overflow: hidden;
}
.work-modal-scroll {
	max-height: calc(100vh - 42px);
	overflow: auto;
	padding: 34px 38px 40px;
}
.work-modal-close {
	position: absolute;
	right: 16px;
	top: 14px;
	z-index: 3;
	width: 42px;
	height: 42px;
	border: 1px solid #ddd2bf;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #5b554b;
	font-size: 27px;
	line-height: 1;
	cursor: pointer;
}
.work-modal-head {
	padding-right: 50px;
	margin-bottom: 22px;
	border-bottom: 1px solid #e7decd;
	padding-bottom: 18px;
}
.work-modal-copy .en {
	margin: 0;
	color: var(--green);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
}
.work-modal-copy h2 {
	font-size: 32px;
	margin: 3px 0 5px;
}
.work-modal-copy>p:last-child {
	margin: 0;
	color: #6c655b;
	font-size: 12px;
}
.work-detail-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
	gap: 36px;
	align-items: start;
}
.sample-stage {
	min-height: 500px;
	display: grid;
	place-items: center;
	padding: 28px;
	background: #f3eedf;
	border-radius: 14px;
	border: 1px solid #e1d7c3;
	overflow: hidden;
}
.sample-thumbs {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 10px;
	margin-top: 14px;
}
.sample-note {
	font-size: 9px;
	color: #8a8378;
	margin: 10px 0 0;
}
.work-meta {
	margin: 0;
	border: 1px solid #d9d2c6;
	border-bottom: 0;
	background: #fff;
}
.work-meta-row {
	display: grid;
	grid-template-columns: 130px 1fr;
	border-bottom: 1px solid #d9d2c6;
}
.work-meta dt, .work-meta dd {
	margin: 0;
	padding: 15px 16px;
	font-size: 13px;
}
.work-meta dt {
	background: #f3f3f1;
	color: #666;
	font-weight: 500;
}
.work-meta dd {
	color: #48443d;
}
.work-description {
	margin-top: 24px;
	padding: 20px 22px;
	border-radius: 10px;
	background: #f8f4e9;
	border: 1px solid #e5dccb;
}
.work-description h3 {
	font-size: 17px;
	margin: 0 0 8px;
}
.work-description p {
	font-size: 12px;
	color: #635c52;
	margin: 0;
	line-height: 1.95;
	white-space: pre-line;
}
.work-contact, .work-pdf a {
	margin-top: 22px;
	width: 100%;
	text-align: center;
}
.work-cover {
	overflow: hidden;
	background: #f4f0e7;
}
.work-cover img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
body.modal-open {
	overflow: hidden;
}
/* =========================================================
                        料金について
========================================================= */

.price {
	background: var(--section);
}
.price-grid {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 65px;
	align-items: center;
}
.price .heading p:last-child {
	margin-bottom: 18px;
}
.faq {
	display: grid;
	gap: 10px;
}
.faq details {
	background: #fff;
	border: 1px solid #e3dbc9;
	border-radius: 9px;
	padding: 0 18px;
}
.faq summary {
	cursor: pointer;
	padding: 16px 30px 16px 0;
	font-weight: 700;
	list-style: none;
	position: relative;
}
/* ＋ − */

.faq summary::after {
	content: "＋";
	position: absolute;
	right: 2px;
	color: var(--green);
}
.faq details[open] summary::after {
	content: "−";
}
/* -------------------------
   開閉アニメーション
------------------------- */

.faq p {
	font-size: 14px;
	color: #666056;
	margin: -4px 0 15px;
}
@media (max-width: 1100px) {
	.nav {
		display: none;
	}
	.menu-btn {
		display: block;
	}
	.nav.open {
		display: flex;
		position: absolute;
		top: 72px;
		left: 0;
		right: 0;
		background: var(--paper);
		padding: 20px;
		flex-direction: column;
		align-items: flex-start;
		border-top: 1px solid var(--line);
	}
	.flow-grid {
		grid-template-columns: repeat(3, 1fr);
		row-gap: 35px;
	}
	.flow-step:nth-child(3):after {
		display: none;
	}
	.guide-card {
		grid-template-columns: 1.1fr 1fr;
	}
	.guide-list {
		grid-column: 1/-1;
	}
	.book {
		flex-basis: calc((100% - 72px) / 4);
	}
	.footer-main {
		grid-template-columns: 1fr 1.4fr 1fr;
	}
	.footer-cta {
		grid-column: 1/-1;
	}
	.contact-illus {
		width: 140px;
	}
	.content-layout {
		grid-template-columns: minmax(0, 1fr) 270px;
		gap: 28px
	}
	.chapter-card {
		grid-template-columns: 75px 1fr 105px 38px
	}
}
@media (max-width: 820px) {
	.work-detail-layout {
		grid-template-columns: 1fr;
	}
	.work-info-area {
		display: grid;
		gap: 18px;
	}
	.sample-stage {
		min-height: 410px;
	}
	.work-meta-row {
		grid-template-columns: 105px 1fr;
	}
	.work-modal-scroll {
		padding: 28px 20px 30px;
	}
	.sample-thumbs {
		grid-template-columns: repeat(3, minmax(58px, 1fr));
		overflow-x: auto;
	}
	.contact {
		background: url("img/contact_back_sp.png") bottom center / cover no-repeat, radial-gradient( circle at 15% 0, rgba(215, 236, 119, 0.33), transparent 33%), linear-gradient(90deg, #edf6ea, #fffde6, #edf6ea);
	}
	.hero-inner, .guide-hero-inner {
		grid-template-columns: 1fr;
		gap: 10px
	}
	.hero-copy {
		text-align: center
	}
	.hero-points {
		justify-content: center;
		border-radius: 16px
	}
	.content-layout {
		grid-template-columns: 1fr
	}
	.sidebar {
		position: static;
		grid-row: 1
	}
	.toc-card {
		display: none
	}
	.side-contact {
		display: grid;
		grid-template-columns: 1fr 120px;
		align-items: center;
		text-align: left
	}
	.side-contact>a {
		grid-column: 1/-1;
		text-align: center
	}
	.chapter-card {
		grid-template-columns: 70px 1fr 95px 35px
	}
	.side-people {
		width: auto;
	}
}
@media (max-width: 800px) {
	.section {
		padding: 70px 18px;
	}
	.header-inner {
		min-height: 72px;
	}
	.hero-intro {
		font-size: 18px;
	}
	.genres {
		margin: 15px;
	}
	.genres span {
		font-size: 16px;
	}
	.flow-grid {
		grid-template-columns: 1fr 1fr;
	}
	.flow-step:nth-child(2n):after {
		display: none;
	}
	.flow-step:nth-child(3):after {
		display: block;
	}
	.guide-card {
		grid-template-columns: 1fr;
	}
	.guide-photo {
		min-height: 260px;
	}
	.voice-grid {
		grid-template-columns: 1fr;
	}
	.book {
		flex-basis: calc((100% - 48px) / 3);
	}
	.price-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.contact-illus {
		display: none;
	}
	.footer-main {
		grid-template-columns: 1fr;
	}
	.footer-bottom {
		flex-wrap: wrap;
		text-align: center;
	}
}
@media (max-width: 520px) {
	.header-cta {
		width: 42px;
		min-height: 42px;
		padding: 0;
		overflow: hidden;
		font-size: 0;
		position: relative;
	}
	.header-cta:before {
		content: "\f0e0";
		font-family: "Font Awesome 7 Free";
		font-size: 18px;
		position: absolute;
		left: 12px;
		top: 6px;
		font-weight: 400;
	}
	.hero{
		padding: 25px 0;
	}
	.hero img{
		width: 95%;
	}
	.hero-intro {
		font-size: 14px;
	}
	.genres span {
		font-size: 12px;
		padding: 5px 10px;
	}
	.flow-grid {
		grid-template-columns: 1fr;
	}
	.flow-step:after {
		display: none !important;
	}
	.book {
		flex-basis: calc((100% - 24px) / 2);
	}
	.works-wrap {
		padding: 0 32px;
	}
	.guide-list {
		margin: 12px;
	}
	.guide-person {
		opacity: 0.35;
	}
	.section-row {
		align-items: flex-start;
	}
	.btn.yellow {
		font-size: 12px;
	}
	.work-modal-panel {
		width: calc(100% - 18px);
		max-height: calc(100vh - 18px);
		border-radius: 12px;
	}
	.work-modal-scroll {
		max-height: calc(100vh - 18px);
		padding: 24px 14px;
	}
	.work-modal-copy h2 {
		font-size: 25px;
	}
	.sample-stage {
		min-height: 330px;
		padding: 14px;
	}
	.sample-page {
		padding: 26px 22px;
	}
	.sample-thumb {
		padding: 5px;
	}
	.work-meta dt, .work-meta dd {
		padding: 12px 10px;
		font-size: 11px;
	}
	.work-meta-row {
		grid-template-columns: 92px 1fr;
	}
	.hero-points {
		padding: 12px;
		gap: 6px 12px
	}
	.hero-points span {
		font-size: 10px
	}
	.content-section {
		padding: 35px 14px 55px
	}
	.side-contact {
		grid-template-columns: 1fr 90px
	}
	.chapter-card {
		grid-template-columns: 54px 1fr 34px;
		padding: 12px 11px;
		min-height: 102px
	}
	.chapter-number {
		font-size: 38px
	}
	.chapter-copy h3 {
		font-size: 15px
	}
	.chapter-copy p {
		font-size: 12px
	}
	.chapter-illust {
		display: none
	}
}