/* =============================================================
   スグはれる 統合スタイルシート（フォントは Noto Sans JP のみ / 影は不使用）
   ============================================================= */

/* ---------- デザイントークン ---------- */
:root {
	--color-ink: #3e3933;
	--color-ink-soft: #5b554e;
	--color-muted: #7a7268;
	--color-muted-soft: #a49b8f;
	--color-accent: #c8452f;
	--color-accent-dark: #a93b28;
	--color-accent-tint: #fdd6ba;
	--color-stamp: #c8452f;
	--color-paper: #ffffff;
	--color-bg: #f7f3ec;
	--color-surface: #f5f1e7;
	--color-surface-deep: #ece5d8;
	--color-border: #e4ddd0;
	--color-border-strong: #d3c9b8;

	--font-body: 'Noto Sans JP', sans-serif;

	--page-max-width: 1140px;
	--radius-s: 8px;
	--radius-m: 14px;
	--radius-l: 22px;
	--print-paper-w: 210mm;
	--print-paper-h: 297mm;
}

/* ---------- ベース/レイアウト ---------- */
/* 全体設定 */
*,*::before,*::after{box-sizing:border-box}*{border:0;margin:0;outline:0;padding:0;font:inherit;font-family:inherit;font-size:100%;font-style:inherit;font-weight:inherit;text-decoration:none;vertical-align:baseline}article,aside,footer,header,main,nav,article,section{display:block}img,picture,audio,canvas,video,svg{display:block;max-width:100%;height:auto;width:100%}br,hr{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}input,select{vertical-align:middle}body{line-height:1;line-break:strict;overflow-wrap:break-word;overflow-wrap:anywhere;word-break:normal;font-feature-settings:"palt";-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased}a{-webkit-tap-highlight-color:transparent}button{all:unset;display:inline-block;cursor:pointer;background:none;border:none;padding:0;margin:0;text-decoration:none;appearance:none;-webkit-appearance:none}

html { font-size: 62.5%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--color-ink);
	background-color: var(--color-bg);
	line-height: 1.78;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-size: 1.6rem;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

section {overflow: hidden;}
.page-inner { width: 100%; max-width: var(--page-max-width); margin-inline: auto; padding-left: 24px;padding-right: 24px;}
.section { padding-top: 60px;padding-bottom: 60px; overflow: hidden;}
.section-alternate { background-color: var(--color-surface); border-block: 1px solid var(--color-border); }
.section-head { margin-bottom: 36px; max-width: 640px; }

.section-kicker {
	display: inline-flex; align-items: center; gap: 8px; margin: 0 0 4px;
	font-size: 1.4rem; font-weight: 700; color: var(--color-stamp);
}
.section-kicker::before { content: ""; width: 10px; height: 2px; background-color: var(--color-stamp); }

.section-title { font-size: 4rem; font-weight: 700; margin: 0 0 10px; }
.section-lead { margin: 0; color: var(--color-muted); }

.page-title { font-size: 3.2rem; font-weight: 700; line-height: 1.32; margin: 4px 0 12px; }
.page-lead { color: var(--color-ink-soft); margin: 0; max-width: 720px; }

/* ---------- Swiper ---------- */
.swiper-buttons {
	display: flex;
	gap: 16px;
	margin-top: 16px;
}
.swiper-buttons .swiper-button-prev,
.swiper-buttons .swiper-button-next {
	position: static;
	transform: none;
	border-radius: 999px;
	padding: 4px 24px;
	margin: 0;
	background-color: rgba(255, 255, 255, 1);
	border: 1px solid var(--color-border-strong);
	transition: border 0.18s ease;
	cursor: pointer;
	user-select: none;
	width: auto;
	height: auto;
}
.swiper-buttons .swiper-button-prev img,
.swiper-buttons .swiper-button-next img {
	filter: brightness(0) invert(0.4);
	transition: filter 0.18s ease;
	width: 24px;
	height: 24px;
	user-select: none;
	max-width: none;
}
@media screen and (min-width: 820px) {
	.swiper-buttons .swiper-button-prev:hover,
	.swiper-buttons .swiper-button-next:hover {
		filter: brightness(1) invert(0);
		border-color: var(--color-accent);
	}
	.swiper-buttons .swiper-button-prev:hover img,
	.swiper-buttons .swiper-button-next:hover img {
		filter: brightness(1) invert(0);
	}
}
.swiper-buttons .swiper-navigation-icon {
	display: none;
}

/* ---------- ヘッダー・フッター ---------- */
.site-header {
	position: sticky; top: 0; z-index: 20;
	background-color: rgba(247, 243, 236, 0.9);
	backdrop-filter: saturate(1.15) blur(10px);
	border-bottom: 1px solid var(--color-border);
}
.site-header-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.site-logo a { display: inline-flex; align-items: center; gap: 12px; }
.site-logo-mark {
	display: block;
	width: 180px;
	height: auto;
}

.site-footer { margin-top: 56px; background-color: #2a2620; color: #d8d0c4; }
.site-footer-inner { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; padding-block: 52px 34px; }
.site-footer-brand { max-width: 360px; }
.site-footer-logo { width: 230px; display: block; margin-bottom: 24px;}
.site-footer-note { color: #b3a99c; margin: 0; line-height: 1.85; font-size: 1.4rem;}
.site-footer-links { display: flex; flex-wrap: wrap; gap: 52px; }
.site-footer-heading { font-weight: 700; color: #fff; margin: 0 0 14px;}
.site-footer-column ul { display: flex; flex-direction: column; gap: 10px; }
.site-footer-column a { color: #c9c0b3; }
@media screen and (min-width: 820px) {
	.site-footer-column a:hover { color: #fff; }
}
.site-footer-copyright { border-top: 1px solid rgba(255,255,255,0.1); padding-block: 20px; font-size: 1.4rem; color: #948b7e; }
.site-footer-copyright p { margin: 0; }

/* ---------- ボタン ---------- */
.button-primary, .button-outline {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-weight: 700; font-size: 2rem; border-radius: 999px; padding: 13px 26px;
	transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
	border: 1.5px solid transparent; text-align: center;
}
.button-primary { background-color: var(--color-accent); color: #fff; }
@media screen and (min-width: 820px) {
	.button-primary:hover { background-color: var(--color-accent-dark); transform: translateY(-1px); }
}
.button-outline { background-color: #fff; color: var(--color-accent); border-color: var(--color-border-strong); }
@media screen and (min-width: 820px) {
	.button-outline:hover { border-color: var(--color-accent); transform: translateY(-1px); }
}

/* ---------- トップページ ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--color-border);
	background:
		radial-gradient(circle at 88% 12%, rgba(200, 69, 47, 0.06), transparent 38%),
		radial-gradient(circle at 8% 90%, rgba(234, 64, 21, 0.07), transparent 42%),
		var(--color-bg);
}
.hero-inner { display: flex; align-items: center; justify-content: space-between; padding-block: 84px; }
.hero-eyebrow {
	display: inline-block; margin: 0 0 12px; font-size: 2rem; font-weight: 700;
	color: var(--color-stamp);
	letter-spacing: 0.08em;
}
.hero-hero-text { width: 47%; height: auto;}
.hero-title { font-size: 5.6rem; font-weight: 700; line-height: 1.3; margin: 0 0 22px; letter-spacing: 0.08em; }
.hero-lead { font-size: 1.6rem; color: var(--color-ink-soft);max-width: 30em; }

.hero-decoration { position: relative; width: 47%; height: auto;filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.05));}
.hero-paper img { width: 100%; height: auto; }



/* ---------- 一覧・カード ---------- */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr)); gap: 24px; }
.template-card.swiper-slide { width: 256px;height: auto; user-select: none;}
.guide-list-item.swiper-slide { width: 256px; height: auto;}
.template-card a {
	display: flex; flex-direction: column; height: 100%; background-color: var(--color-paper);
	border: 1px solid var(--color-border); border-radius: var(--radius-m); overflow: hidden;
	transition: border-color 0.18s ease, transform 0.18s ease;
}
@media screen and (min-width: 820px) {
	.template-card a:hover { border-color: var(--color-accent); transform: translateY(-3px); }
}
.template-card-preview { display: block; padding: 12px; background: linear-gradient(var(--color-surface-deep), var(--color-surface)); aspect-ratio: 1/1;overflow: hidden;}
.template-card-image { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.05));}
.template-card-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 20px 22px; }
.template-card-category { font-size: 1rem; font-weight: 700; color: var(--color-stamp); }
.template-card-title { font-weight: 700; line-height: 1.4;}
.template-card-summary { color: var(--color-muted); line-height: 1.65; font-size: 1.2rem;}
.template-card-arrow { margin-top: 8px; display: flex; justify-content: center; gap: 8px; background-color: var(--color-accent);border-radius: 999px;padding: 6px 0;color: var(--color-paper);font-size: 1.4rem;font-weight: 700;}
.template-card-arrow img { width: 20px; height: auto; filter: brightness(0) invert(1);}

.category-block { padding-top: 44px; }
.category-block:first-of-type { padding-top: 0; }
.category-block-head { margin-bottom: 22px; }
.category-block-title { font-size: 2.4rem; font-weight: 700; margin: 0 0 4px; }
.category-block-description { margin: 0; color: var(--color-muted); font-size: 2rem; }

/* まとめ記事一覧 */
.guides-index { padding-bottom: 48px; }
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 32px;}
.guide-list-item a {
	display: block; background-color: var(--color-paper); border: 1px solid var(--color-border);
	border-radius: var(--radius-m); height: 100%;
	transition: border-color 0.18s ease, transform 0.18s ease; overflow: hidden;
}
@media screen and (min-width: 820px) {
	.guide-list-item a:hover { border-color: var(--color-accent); transform: translateY(-2px); }
}
.guide-list-thumb { display: block;aspect-ratio: 16/9;}
.guide-list-thumb img { width: 100%; height: 100%; object-fit: cover;}
.guide-list-body { display: flex; flex-direction: column; gap: 5px; padding: 16px 24px;}
.guide-list-title { font-size: 2rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px;}
.guide-list-summary { font-size: 1.4rem; color: var(--color-muted); line-height: 1.4;}
.guide-list-date { font-size: 1.4rem; color: var(--color-muted-soft); margin-top: auto;display: none;}

/* ---------- パンくず・記事・固定ページ ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--color-muted); padding-block: 24px 6px;margin-bottom: 20px; font-size: 1.4rem;}
@media screen and (min-width: 820px) {
	.breadcrumb a:hover { color: var(--color-accent); }
}
.breadcrumb span[aria-current="page"] { color: var(--color-ink); font-weight: 500; }
.breadcrumb-separator { color: var(--color-muted-soft); }

.template-tag-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding-bottom: 32px;}
.template-tag { color: var(--color-ink-soft); background-color: #fff; border: 1px solid var(--color-border); border-radius: 999px; padding: 4px 12px; font-size: 1.2rem;}

.guide-page {margin-inline: auto;}
.guide-article {}
.guide-article-header { border-bottom: 1px solid var(--color-border); padding-bottom: 24px;margin-bottom: 24px; }
.guide-article-meta { margin: 0; color: var(--color-muted); font-size: 1.4rem;}
.guide-content { font-size: 1.6rem; color: var(--color-ink-soft); }
.guide-content h2 { font-size: 2.4rem; font-weight: 700; color: var(--color-ink); margin: 50px 0 16px; padding-left: 16px; border-left: 5px solid var(--color-accent); line-height: 1.4; }
.guide-content h3 { font-size: 2rem; font-weight: 700; color: var(--color-accent); margin: 32px 0 12px; }
.guide-content p { margin: 0 0 1em; line-height: 1.95; }
.guide-content p.note { color: var(--color-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: 12px 16px; line-height: 1.8; font-size: 1.4rem; }
.guide-content em { font-style: normal; font-weight: 700; color: var(--color-accent-dark); background: linear-gradient(transparent 62%, var(--color-accent-tint) 62%); padding: 0 2px; }
.guide-content hr { border: none; border-top: 1px solid var(--color-border); margin: 36px 0; }
.guide-content ul { list-style: none; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; }
.guide-content ul li { position: relative; padding-left: 26px; line-height: 1.85; }
.guide-content ul li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 10px; height: 10px; border-radius: 3px; background-color: var(--color-accent); }
.guide-content ol { list-style: none; counter-reset: guide-ol; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guide-content ol li { counter-increment: guide-ol; position: relative; padding-left: 26px; line-height: 1.85; min-height: 28px; }
.guide-content ol li::before {
	content: counter(guide-ol); position: absolute; left: 0; top: 0.55em;
	width: 1.5em;height: 1.5em;border-radius: 50%; background-color: var(--color-accent);
	color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center;line-height: 1;padding-bottom: 0.15em;font-size: 1.2rem;
}
.guide-content a:not(.template-card a) { color: var(--color-accent); text-decoration: underline; text-underline-offset: 2px; }

.guide-content img.guide-img { width: 100%; height: auto; border-radius: var(--radius-m); margin: 24px 0; border: 1px solid var(--color-border); }

.related-content { margin-top: 48px; padding-top: 48px; border-top: 1px solid var(--color-border); }
.related-title { font-size: 2.4rem; font-weight: 700; margin: 0 0 20px; }

.guide-box { background-color: #fff; border-radius: var(--radius-m); padding: 20px 24px; margin-block: 20px; }
.guide-box-title { font-weight: 700; color: var(--color-accent-dark); margin: 0 0 8px; font-size: 2rem;}
.guide-box p { margin: 0 0 8px; }
.guide-box p:last-child, .guide-box ul:last-child, .guide-box ol:last-child { margin-bottom: 0; }

/* ---------- テンプレート編集 ---------- */
.editor-layout { display: grid; grid-template-columns: 1fr 380px; gap: 34px; align-items: start; margin-top: 8px; margin-bottom: 48px;padding-bottom: 48px;border-bottom: 1px solid var(--color-border);}
.editor-preview-column { position: sticky; top: 88px; }

.editor-preview-frame {
	position: relative;
	background:
		repeating-linear-gradient(45deg, rgba(0,0,0,0.02) 0 12px, transparent 12px 24px),
		linear-gradient(160deg, var(--color-surface-deep), var(--color-surface));
	border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: 36px 36px 26px;
}
.editor-stage { width: 100%; max-width: 440px; margin-inline: auto; }
.editor-dimensions { margin: 16px 0 0; text-align: center; font-weight: 700; color: var(--color-ink-soft); }

.paper-sheet {
	container-type: size; position: relative;
	display: flex; align-items: center; justify-content: center;
	width: 100%; border-radius: 2px; box-shadow: 0 0 30px -10px rgba(0, 0, 0, 0.25);
}
.sign-canvas {
	container-type: size; position: relative;
	width: min( calc(var(--design-scale) * 100cqw), calc(var(--design-scale) * 100cqh * var(--sign-aspect)) );
}

.editor-reset {
	position: absolute; top: 12px; right: 12px; z-index: 3;
	font-size: 12px; line-height: 1; font-weight: 700;
	color: var(--color-ink-soft); background-color: rgba(255, 255, 255, 0.94);
	border: 1px solid var(--color-border-strong); border-radius: 999px; padding: 7px 12px;
	transition: color 0.18s ease, border-color 0.18s ease;
	display: flex;align-items: center;gap: 0.4em;
	cursor: pointer;
}
.editor-reset::before {
	content:"";display:block;width:1em;height:1em;
	background-image:url("images/icon-back-orange.svg");background-repeat:no-repeat;background-size:contain;background-position:center;filter: brightness(0) invert(0.4);
	transition: filter 0.18s ease;
}
@media screen and (min-width: 820px) {
	.editor-reset:hover { color: var(--color-accent); border-color: var(--color-accent); }
	.editor-reset:hover::before { filter: brightness(1) invert(0); }
}

.editor-output { margin-top: 22px; }
.editor-print-button { width: 100%; font-size: 2rem; padding: 15px; cursor: pointer; margin-bottom: 20px;}
.editor-download { display: flex; gap: 12px; align-items: flex-end; }
.editor-field-inline { display: flex; flex-direction: column; gap: 6px; color: var(--color-muted); flex: 1; }
.editor-field-inline select { width: 100%; padding: 8px 12px; font-size: 1.6rem; color: var(--color-ink); background-color: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-s); }
.editor-download .button-outline { height: 43px; white-space: nowrap; padding-top: 0;padding-bottom: 0;cursor: pointer;font-size: 1.6rem;}
.editor-output-note { margin: 0; color: var(--color-muted-soft); text-align: left; font-size: 1.2rem;margin-top: 4px;}

.editor-controls { background-color: var(--color-paper); border: 1px solid var(--color-border); border-radius: var(--radius-l); padding: 26px; }
.editor-controls-title { font-size: 2rem; font-weight: 700; margin: 0 0 20px; color: var(--color-accent);}
.editor-group { padding-block: 20px; border-top: 1px solid var(--color-border); }
.editor-group:first-of-type { border-top: none; padding-top: 0; }
.editor-group-title { font-size: 1.6rem; font-weight: 700; color: var(--color-ink); margin: 0 0 12px; }
.editor-group-body { display: flex; flex-direction: column; gap: 16px; }
.editor-field { display: flex; flex-direction: column; gap: 7px; }
.editor-field-label { color: var(--color-muted); font-weight: 500; font-size: 1.4rem;}
.editor-inline-pair { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }

.editor-controls input[type="text"], .editor-controls input[type="number"], .editor-controls select {
	width: 100%; padding: 8px 12px; font-size: 1.6rem; color: var(--color-ink);
	background-color: #fff; border: 1px solid var(--color-border-strong); border-radius: var(--radius-s);cursor: pointer;
}
.editor-controls input[type="text"], .editor-controls input[type="number"] {
	cursor: text;
}
.editor-controls input:focus, .editor-controls select:focus { border-color: var(--color-accent); outline: none; }
.editor-controls input[type="range"] { width: 100%; accent-color: var(--color-accent); }

.editor-text-item { border: 1px solid var(--color-border); border-radius: var(--radius-m); padding: 14px; display: flex; flex-direction: column; gap: 12px; background-color: #fdfcfa; }
.editor-text-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.editor-text-item-label { font-weight: 700; color: var(--color-ink); font-size: 1.4rem;}
.editor-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 1.4rem; color: var(--color-muted); cursor: pointer;}

/* 色スウォッチ（native color inputを隠して整形・影なし） */
/* 色（ラベルなし・スウォッチを並べるだけ） */
.editor-color-grid { display: flex; flex-wrap: wrap; gap: 12px; }

/* 図形の選択（SVGをグリッドに並べて選ぶ） */
.editor-shape-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}
.editor-shape-option {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background-color: #fff;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-s);
	aspect-ratio: 1 / 1;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
.editor-shape-option svg { width: 100%; height: 100%; }
.editor-shape-option:hover { border-color: var(--color-accent); }
.editor-shape-option.is-selected {
	border-color: var(--color-accent);
	border-width: 2px;
	background-color: var(--color-accent-tint);
}

@media (max-width: 560px) {
	.editor-shape-grid { grid-template-columns: repeat(3, 1fr); }
}
.color-swatch { position: relative; width: 100%; height: 43px; flex: 0 0 auto; cursor: pointer; display: block;}
.color-swatch input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.color-swatch-face { display: block; width: 100%; height: 100%; border-radius: 9px; border: 3px solid #fff; outline: 1px solid var(--color-border-strong); outline-offset: -1px; }

.editor-custom-paper { display: flex; align-items: flex-end; gap: 10px; padding: 14px; background-color: var(--color-surface); border-radius: var(--radius-m); }
.editor-custom-paper[hidden] { display: none; }
.editor-custom-paper .editor-field { flex: 1; }
.editor-custom-paper-times { padding-bottom: 11px; color: var(--color-muted); }

.affiliate-slot { margin-top: 48px; font-size: 1.2rem; line-height: 1.4;}
.affiliate-slot h2 { font-size: 2.4rem; font-weight: 700; color: var(--color-ink); margin: 50px 0 32px; padding-left: 16px; border-left: 5px solid var(--color-accent); line-height: 1.4;}
.affiliate-slot-items{
	display: block;
	padding: 12px;
	background: linear-gradient(var(--color-surface-deep), var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-s);
	transition: border-color 0.18s ease, transform 0.18s ease;
}
.affiliate-slot-items:hover {
	border-color: var(--color-accent);
	transform: translateY(-3px);
}
.affiliate-slot-wrapper { display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: 2rem; row-gap: 2rem; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 960px) {
	.editor-layout { grid-template-columns: 1fr; }
	.editor-preview-column { position: static; }
	.editor-stage { max-width: 360px; }
}
@media (max-width: 820px) {
	.section { padding-block: 16px; }
	.site-footer-links { gap: 36px; }
}

@media (max-width: 560px) {
	.section-title { font-size: 3.2rem; }
	.editor-layout {margin-bottom: 40px;}
	.swiper-buttons .swiper-button-prev img,.swiper-buttons .swiper-button-next img {width: 20px;height: 20px;}
	.breadcrumb {padding-block: 0;margin-bottom: 8px;font-size: 1rem;padding-top: 16px;}
	.hero-inner { grid-template-columns: 1fr; gap: 24px;padding-block: 32px;}
	.hero-eyebrow {text-align: center;display: block;}
	.hero-title {font-size: 4rem;text-align: center;}
	.hero-decoration { width: 100%;}
	.site-footer-inner {padding-block: 32px;}
}

/* ---------- 印刷 ---------- */
/* 印刷用レイヤー（通常時は非表示。印刷時だけ表示する） */
#printLayer { display: none; }

@page { margin: 0; }

@media print {
	/* 印刷レイヤー以外はすべて隠す（プレビューのデザインだけを印刷） */
	body > *:not(#printLayer) { display: none !important; }
	body { background: #fff !important; margin: 0 !important; }

	#printLayer { display: block !important; }
	#printLayer .paper-sheet {
		margin: 0 !important;
		border: none !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* 背景色（例：cs-caption の background-color）も印刷に反映させる */
	#printLayer, #printLayer * {
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}
}

/* ---------- 関連 ---------- */
.pickup-section {
	border-top: 1px solid var(--color-border);
	margin-top: 48px;
	padding-top: 48px;
}

/* ---------- テンプレページ本文・FAQ ---------- */
.template-body { margin-top: 40px; }

.faq-content { margin-top: 48px; }
.faq-title { font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-ink);
	margin-bottom: 32px;
	padding-left: 16px;
	border-left: 5px solid var(--color-accent);
	line-height: 1.4; }
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-m); background-color: #fff; overflow: hidden; }
.faq-item dt { margin: 0; }
.faq-trigger { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 18px 20px; background: none; border: none; font-size: 1rem; font-weight: 700; line-height: 1.6; color: var(--color-ink); cursor: pointer; position: relative;}
.faq-question-text { font-size: 1.6rem;}
.faq-icon { position: absolute; top: 20px; right: 18px; width: 25px; height: 25px; }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; background-color: var(--color-accent); border-radius: 2px; }
.faq-icon::before { top: 11px; left: 0; width: 25px; height: 2px; }
.faq-icon::after { left: 11px; top: 0; width: 2px; height: 25px; transition: transform 0.2s ease; }
.faq-item.is-open .faq-icon::after { transform: rotate(90deg); }
.faq-answer { max-height: 0; overflow: hidden; padding: 0 20px; transition: max-height 0.25s ease, padding 0.25s ease; }
.faq-item.is-open .faq-answer { max-height: 640px; padding: 0 20px 18px; font-size: 1.45rem;}
.faq-answer p { margin: 0; color: var(--color-ink-soft); line-height: 1.9; }