/* =============================================================================
   06-content.css
   固定ページ (.page-section) 本文・記事本文 (.entry-content) ・各種一覧
   （投稿/コラム/ロゴテンプレート/制作実績）。
   contents/*.php と archive-*.php / single-*.php / taxonomy-*.php から使われる。
   ============================================================================= */

@layer content {

	/* ==========================================================================
	   .page-section / .section-header (固定ページ共通)
	   ========================================================================== */
	.page-section {
		max-width: 1000px;
		margin: 0 auto;
		padding: 3rem 1rem;

		.container { padding: 0; }

		@media (max-width: 600px) { padding: 2rem 1rem; }
	}

	/* ==========================================================================
	   サイドメニュー併用時のヘッダーバー（breadcrumb + section-header）
	   page.php が partial から抽出して 2 カラムの上に full-width で出力する。
	   ========================================================================== */
	.page-header-bar {
		padding: 1.5rem 0 0;
		text-align: left;

		.container { padding-left: 32px; padding-right: 32px; }

		.breadcrumb {
			margin-bottom: 1rem;
		}
		.section-header {
			margin: 0 0 1rem;
			padding-bottom: 0.75rem;
			border-bottom: 1px solid #e5e5e5;

			.entry-title {
				margin: 0 0 0.5rem;
				font-size: 1.75rem;
				font-weight: 700;
				color: #002b6b;
			}
			.section-lead {
				margin: 0;
				color: var(--jamble-color-text-muted, #555);
				font-size: 0.95rem;
				line-height: 1.7;
			}
		}

		@media (max-width: 600px) {
			padding-top: 1rem;
			.container { padding-left: 16px; padding-right: 16px; }
			.section-header .entry-title { font-size: 1.4rem; }
		}
	}

	/* ==========================================================================
	   サイドメニュー併用時のレイアウト（page.php からの 2 カラム）
	   HTML はメイン → サイドの順で出力するが、grid-template-areas で
	   PC ではサイドを左・メインを右に視覚的に並び替える。
	   モバイルでは縦積み（メイン → サイド）に戻す。
	   ========================================================================== */

	/* フォールバック：古い構造で <aside class="side-contents"> が <main> の外側
	   （#content の直下に main と aside が並ぶ）に出力されているケースで、
	   #content にグリッドをかけて 2 カラム化する。新しい page.php / 404.php /
	   index.php / search.php / single.php では aside は main の内側に入るため、
	   このフォールバックは作動しない。 */
	.site-content:has(> aside.side-contents) {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		grid-template-areas: "sidebar main";
		gap: 32px;
		align-items: start;
		max-width: 1240px;
		margin: 0 auto;
		padding: 32px;

		> #main { grid-area: main; min-width: 0; }
		> aside.side-contents { grid-area: sidebar; }

		@media (max-width: 900px) {
			grid-template-columns: 1fr;
			grid-template-areas:
				"main"
				"sidebar";
			gap: 24px;
			padding: 24px 16px;
		}
	}

	.page-with-sidebar {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		grid-template-areas: "sidebar main";
		gap: 32px;
		align-items: start;
		text-align: left;

		.page-main { grid-area: main; min-width: 0; }
		.side-contents { grid-area: sidebar; }

		@media (max-width: 900px) {
			grid-template-columns: 1fr;
			grid-template-areas:
				"main"
				"sidebar";
			gap: 24px;
		}
	}
	/* サイドメニュー有りの場合、メイン側の page-section は中央寄せ・狭幅制約を解除 */
	.site-main.has-sidebar .page-main .page-section {
		max-width: none;
		margin: 0;
		padding: 1.5rem 0;
	}
	.site-main.has-sidebar .page-main .page-section:first-child {
		padding-top: 0;
	}

	/* サイドメニュー本体 */
	.side-contents {
		font-size: 0.9rem;
		text-align: left;
		color: #333;
		min-width: 0;

		@media (max-width: 900px) {
			margin-top: 24px;
			padding-top: 24px;
			border-top: 1px solid #e5e5e5;
		}

		.side-block {
			margin-bottom: 24px;
			background: #fff;
			border: 1px solid #e5e5e5;
			border-radius: 6px;
			overflow: hidden;

			&:last-child { margin-bottom: 0; }
		}
		.side-block-heading {
			margin: 0;
			padding: 10px 14px;
			background: #002b6b;
			color: #fff;
			font-size: 0.875rem;
			font-weight: 700;
			letter-spacing: 0.02em;
		}
		.side-list {
			list-style: none;
			padding: 0;
			margin: 0;

			li {
				margin: 0;
				padding: 0;
				border-bottom: 1px solid #f0f0f0;

				&:last-child { border-bottom: 0; }
			}
			a {
				display: block;
				padding: 10px 14px;
				color: #333;
				text-decoration: none;
				transition: background-color 0.15s ease, color 0.15s ease;
				line-height: 1.5;

				&::before {
					content: '›';
					margin-right: 8px;
					color: var(--jamble-color-accent, #f24e00);
					font-weight: 700;
				}
				&:hover {
					background: #fff8f0;
					color: #c25e10;
				}
			}
		}
	}

	.section-header {
		margin-bottom: 2rem;
		padding-bottom: 1rem;
		border-bottom: 1px solid #eee;

		.entry-title {
			font-size: 1.875rem;
			line-height: 1.4;
			margin: 0 0 0.5rem;

			@media (max-width: 600px) { font-size: 1.5rem; }
		}
		.section-lead { color: #555; margin: 0; }

		/* アーカイブ・シングルテンプレート用：全幅ヒーロー */
		&--cover {
			margin: 0 calc(50% - 50vw) 2.5rem;
			padding: 3rem calc(50vw - 50%);
			background: #fff8f0;
			border-bottom: 0;
			text-align: center;

			@media (max-width: 600px) {
				padding-top: 2rem;
				padding-bottom: 2rem;
				margin-bottom: 1.5rem;
			}

			.entry-title {
				font-size: 2rem;
				color: #3d3833;

				@media (max-width: 600px) { font-size: 1.5rem; }
			}
			.section-lead,
			.archive-description {
				max-width: 720px;
				margin: 0.75rem auto 0;
				color: #5a4f47;
			}
			.post-meta,
			.column-meta {
				margin-top: 0.75rem;
				color: #666;

				.tag { margin-left: 0.5rem; }
			}
		}
	}

	/* ==========================================================================
	   .entry-content — 本文タイポグラフィ
	   ========================================================================== */
	.entry-content {
		line-height: 1.7;
		color: #222;
		text-align: left;

		h2 {
			font-size: 1.5rem;
			margin: 2.5rem 0 1rem;
			padding-left: 0.75rem;
			border-left: 4px solid #e07a2b;
			line-height: 1.4;

			@media (max-width: 600px) { font-size: 1.25rem; }
		}
		h3 { font-size: 1.15rem; margin: 1.75rem 0 0.75rem; line-height: 1.5; }
		p  { margin: 0 0 1rem; }
		ul, ol { margin: 0 0 1rem; padding-left: 1.5rem; }
		ul li, ol li { margin-bottom: 0.4rem; }
		dl { margin: 0 0 1.5rem; }
		dt { font-weight: 600; margin-top: 1rem; }
		dd { margin: 0.25rem 0 0 1.25rem; color: #444; }
		/* テキストリンクのみ下線。ボタン (.c-btn / .btn-cta / .btn-primary 等) は除外。
		   参考: /draft/ の「データを入稿する」ボタンが下線付きで表示されていた件の対処。 */
		a:not(.c-btn):not(.btn-cta):not(.btn-primary):not(.btn-outline):not(.btn-spec):not(.btn-round-outline) {
			color: #c25e10;
			text-decoration: underline;

			&:hover { color: #e07a2b; }
		}
		table {
			width: 100%;
			border-collapse: collapse;
			margin: 1rem 0 1.5rem;
			font-size: 0.95rem;
		}
		th, td {
			border: 1px solid #e0e0e0;
			padding: 0.6em 0.8em;
			text-align: left;
			vertical-align: top;
		}
		th { background: #f7f4ef; font-weight: 600; }
		blockquote {
			margin: 1rem 0;
			padding: 1rem 1.25rem;
			border-left: 4px solid #ddd;
			background: #fafafa;
			color: #444;

			cite {
				display: block;
				margin-top: 0.5rem;
				font-style: normal;
				font-size: 0.875rem;
				color: #777;
			}
		}

		/* 価格ページ：商品画像 + 仕様テーブルの横並び */
		.spec-block {
			display: flex;
			gap: 1.25rem;
			align-items: flex-start;
			margin: 1rem 0 1.5rem;

			@media (max-width: 600px) { flex-direction: column; gap: 0.75rem; }

			.spec-image {
				flex: 0 0 240px;
				margin: 0;

				@media (max-width: 600px) { flex: 0 0 auto; max-width: 280px; }

				img {
					display: block;
					width: 100%;
					height: auto;
					border-radius: 4px;
					background: #f6f4ef;
				}
			}
			.spec-table { flex: 1 1 auto; margin: 0; }
		}

		/* 価格ページ：価格表（枚数を横並び） */
		.price-table-wrap {
			overflow-x: auto;
			margin: 1rem 0 1.5rem;
			-webkit-overflow-scrolling: touch;
		}
		.price-table {
			margin: 0;
			min-width: 100%;

			th, td {
				text-align: center;
				vertical-align: middle;
				white-space: nowrap;
			}
			tr:first-child th {
				background: #3d3833;
				color: #fff;
				border-color: #2a2723;

				&:first-child {
					background: #f7f4ef;
					color: #333;
					border-color: #e0e0e0;
				}
			}
			tr:not(:first-child) th {
				width: 1%;
				text-align: left;
				white-space: nowrap;
				font-size: 0.9rem;
			}
			.unit {
				display: inline-block;
				margin-top: 0.15em;
				font-size: 0.8rem;
				color: #888;
				font-weight: normal;
			}
		}

		/* FAQページ：質問インデックス（目次） */
		.faq-index {
			margin: 1.5rem 0 2.5rem;
			padding: 1.25rem 1.5rem;
			background: #fbf6ec;
			border-radius: 6px;
			scroll-margin-top: 1.5rem;

			@media (max-width: 600px) { padding: 1rem 1.25rem; }
		}
		.faq-index-label {
			margin: 0 0 0.85rem;
			font-weight: 700;
			color: #c25e10;
			font-size: 0.95rem;
		}
		.faq-index ol {
			margin: 0;
			padding: 0;
			list-style: none;
			counter-reset: faqindex;
		}
		.faq-index li {
			counter-increment: faqindex;
			position: relative;
			padding-left: 2.25rem;
			margin: 0 0 0.5rem;
			line-height: 1.55;

			@media (max-width: 600px) { padding-left: 2rem; }

			&:last-child { margin-bottom: 0; }
			&::before {
				content: counter(faqindex);
				position: absolute;
				left: 0;
				top: 0.1em;
				width: 1.6em; height: 1.6em;
				line-height: 1.6em;
				text-align: center;
				background: #fff;
				color: #c25e10;
				border: 1px solid #f0d8b8;
				border-radius: 50%;
				font-size: 0.75rem;
				font-weight: 700;
				font-family: Arial, sans-serif;
			}
		}
		.faq-index a {
			color: #444;
			text-decoration: none;
			border-bottom: 1px solid transparent;
			transition: color 0.15s ease, border-color 0.15s ease;

			&:hover { color: #c25e10; border-bottom-color: #e07a2b; }
		}

		/* FAQページ：Q&A リスト */
		.faq-list {
			margin: 1.5rem 0 2rem;
			padding: 0;

			dt {
				position: relative;
				margin-top: 1.75rem;
				padding: 0.85rem 1rem 0.85rem 3rem;
				background: #fff8f0;
				border: 1px solid #f0d8b8;
				border-radius: 6px;
				color: #333;
				font-weight: 700;
				line-height: 1.5;
				scroll-margin-top: 1.5rem;
				transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

				@media (max-width: 600px) { padding-left: 2.5rem; }

				&:first-of-type { margin-top: 0; }
				&::before {
					content: "Q";
					position: absolute;
					left: 0.85rem; top: 50%;
					transform: translateY(-50%);
					width: 1.6em; height: 1.6em;
					line-height: 1.6em;
					text-align: center;
					background: #e07a2b;
					color: #fff;
					border-radius: 50%;
					font-size: 0.85rem;
					font-weight: 700;
					font-family: Arial, sans-serif;

					@media (max-width: 600px) { left: 0.5rem; }
				}
				&:target {
					background: #ffe9cc;
					border-color: #e07a2b;
					box-shadow: 0 0 0 3px rgba(224, 122, 43, 0.18);
				}
			}
			dd {
				position: relative;
				margin: 0.75rem 0 0;
				padding: 0.5rem 1rem 0.5rem 3rem;
				color: #444;
				line-height: 1.8;

				@media (max-width: 600px) { padding-left: 2.5rem; padding-right: 0; }

				&::before {
					content: "A";
					position: absolute;
					left: 0.85rem; top: 0.45rem;
					width: 1.6em; height: 1.6em;
					line-height: 1.6em;
					text-align: center;
					background: #fff;
					color: #c25e10;
					border: 1px solid #e07a2b;
					border-radius: 50%;
					font-size: 0.85rem;
					font-weight: 700;
					font-family: Arial, sans-serif;

					@media (max-width: 600px) { left: 0.5rem; }
				}
			}
		}
		.faq-back-link {
			display: inline-block;
			margin-top: 0.85rem;
			padding: 0.15rem 0;
			font-size: 0.825rem;
			color: #888;
			text-decoration: none;
			border-bottom: 1px dashed #ccc;
			transition: color 0.15s ease, border-color 0.15s ease;

			&:hover { color: #c25e10; border-bottom-color: #e07a2b; }
		}

		/* 価格ページ：注意事項リスト */
		.notes-list {
			list-style: none;
			padding: 1.25rem 1.5rem;
			margin: 1rem 0 2rem;
			background: #fff8f0;
			border: 1px solid #f0d8b8;
			border-radius: 6px;

			li {
				display: flex;
				align-items: flex-start;
				gap: 0.5rem;
				margin-bottom: 0.5rem;
				color: #444;
				line-height: 1.6;

				&:last-child { margin-bottom: 0; }
				&::before {
					content: "!";
					flex: 0 0 auto;
					width: 1.1em; height: 1.1em;
					line-height: 1.1em;
					text-align: center;
					background: #e07a2b;
					color: #fff;
					border-radius: 50%;
					font-size: 0.75rem;
					font-weight: 700;
					margin-top: 0.3em;
				}
			}
		}

		/* 価格ページ：詳細・見積りボタン2つ並び */
		.spec-links {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.75rem;
			margin: 1rem 0 2rem;

			@media (max-width: 600px) { grid-template-columns: 1fr; }

			+ h3 {
				margin-top: 3.5rem;
				padding-top: 2.5rem;
				border-top: 1px dashed #e8d8c0;
			}

			.btn-spec {
				display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				padding: 0.85rem 1rem;
				border: 1px solid #e07a2b;
				border-radius: 4px;
				background: #fff;
				color: #c25e10;
				text-decoration: none;
				font-weight: 600;
				line-height: 1.4;
				transition: background 0.15s ease, color 0.15s ease;

				&:hover { background: #fff8f0; color: #c25e10; }
			}
		}

		/* raw CSS で &-modifier が機能しないため、フラット定義で補う
		   [[native-css-nesting-modifier-bug]] */
		.spec-links .btn-spec-primary {
			background: #e07a2b;
			color: #fff;
		}
		.spec-links .btn-spec-primary:hover { background: #c25e10; color: #fff; }

		/* ボタンがひとつだけのときは中央寄せ */
		.spec-links.spec-links--single {
			grid-template-columns: minmax(0, 360px);
			justify-content: center;
		}
	}

	/* ==========================================================================
	   ワンカラム（サイドメニュー無し）固定ページの h2：
	   中央配置＋アクセント下線（不織布トップ .section-title と統一）
	   ※ 各テーマの --color-primary を使うので、紙袋=オレンジ／ポリ=ブルー／
	      不織布=紺 が自動で適用される。
	   ※ 2 カラム（.has-sidebar）側はそのまま左寄せ＋オレンジ左ボーダーを維持。
	   ========================================================================== */
	.site-main:not(.has-sidebar) .page-section .entry-content > h2 {
		text-align: center;
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.4;
		margin: 0 0 2.5rem;
		padding-left: 0;
		border-left: 0;

		&::after {
			content: "";
			display: block;
			width: 60px;
			height: 4px;
			margin: 14px auto 0;
			background: var(--color-primary);
			border-radius: 2px;
		}

		@media (max-width: 600px) {
			font-size: 1.25rem;
			margin-bottom: 2rem;
		}
	}

	/* ==========================================================================
	   親ページ用：子ページ一覧カード
	   ========================================================================== */
	.child-pages {
		list-style: none;
		padding: 0;
		margin: 1rem 0 2rem;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: 1rem;

		li { margin: 0; }
		a {
			display: block;
			padding: 1rem 1.25rem;
			border: 1px solid #e0e0e0;
			border-radius: 6px;
			background: #fff;
			color: inherit;
			text-decoration: none;
			transition: box-shadow 0.15s ease, border-color 0.15s ease;

			&:hover { border-color: #e07a2b; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
		}
		.child-title { display: block; font-weight: 600; color: #c25e10; margin-bottom: 0.35rem; }
		.child-desc  { display: block; font-size: 0.875rem; color: #555; line-height: 1.5; }
	}

	/* お問い合わせ完了 / 戻る導線 */
	.back-to-parent {
		margin: 2rem 0 0;
		text-align: center;

		a {
			display: inline-block;
			padding: 0.5rem 1rem;
			border: 1px solid #ddd;
			border-radius: 4px;
			text-decoration: none;
			color: #555;

			&:hover { border-color: #e07a2b; color: #e07a2b; }
		}
	}

	/* CTAボタン（見積もりページへの誘導） */
	.page-cta {
		margin: 2rem 0;
		padding: 1.5rem;
		background: #fff8f0;
		border: 1px solid #f0d8b8;
		border-radius: 6px;
		text-align: center;

		.btn-cta {
			display: inline-block;
			margin-top: 0.5rem;
			padding: 0.75rem 1.5rem;
			background: #e07a2b;
			color: #fff;
			text-decoration: none;
			border-radius: 4px;
			font-weight: 600;

			&:hover { background: #c25e10; color: #fff; }
		}
	}

	/* ==========================================================================
	   オーダーガイド系ページ（paper / size / handles / print）共通スタイル
	   ========================================================================== */

	/* 観点コールアウト（参考の .alert.alert-warning に相当） */
	.guide-callout {
		margin: 0.75rem 0;
		padding: 0.85rem 1.1rem;
		background: #fff8e0;
		border-left: 4px solid #f4b400;
		border-radius: 4px;

		dt {
			margin: 0 0 0.25rem;
			font-weight: 700;
			color: #6b4500;
		}
		dd {
			margin: 0;
			padding-left: 0;
			line-height: 1.7;
			color: #333;
		}
	}

	/* 画像左 / テキスト右 の横並びブロック（参考の flex-30 / flex-70 に相当） */
	.guide-row {
		display: grid;
		grid-template-columns: minmax(180px, 30%) 1fr;
		gap: 20px;
		align-items: start;
		margin: 1rem 0 1.75rem;

		@media (max-width: 600px) { grid-template-columns: 1fr; gap: 12px; }

		figure {
			margin: 0;
			img {
				width: 100%;
				height: auto;
				border-radius: 4px;
				background: #fafafa;
				border: 1px solid #eee;
				display: block;
			}
			figcaption {
				margin-top: 0.5rem;
				font-size: 0.8125rem;
				color: #666;
				text-align: center;
			}
		}
		.guide-row-body {
			p { line-height: 1.85; margin: 0 0 0.75em; }
			p:last-child { margin-bottom: 0; }
			ul { padding-left: 1.4em; line-height: 1.8; }
		}
	}

	/* シーン紹介ページ：本文中に差し込む単体画像（メインビジュアル・図版など）。
	   画像ファイルが入るまでは PHP 側の file_exists() 判定で <figure> 自体が
	   出力されないため、準備中もリンク切れにならず、用意でき次第そのまま表示される。
	   画像の縦横比に依存しないよう max-width:100% の単純なセンタリングに留める。 */
	.entry-content .scene-figure {
		margin: 1.5rem 0;
		text-align: center;
	}
	.entry-content .scene-figure img {
		max-width: 100%;
		height: auto;
		display: block;
		margin: 0 auto;
		border: 1px solid #eee;
		border-radius: 6px;
		background: #fafafa;
	}
	.entry-content .scene-figure figcaption {
		margin-top: 0.5rem;
		font-size: 0.8125rem;
		color: #666;
	}

	/* 会社概要ページ：所在地マップ（Google Maps 埋め込み iframe） */
	.entry-content .company-map {
		margin: 1rem 0 1.5rem;
	}
	.entry-content .company-map iframe {
		display: block;
		width: 100%;
		height: 360px;
		border: 1px solid #e0e0e0;
		border-radius: 6px;

		@media (max-width: 600px) { height: 280px; }
	}

	/* 強調ハイライト（参考の <span class="red"> に相当する控えめ強調） */
	.guide-em {
		color: #d8431a;
		font-weight: 600;
	}

	/* セクション区切り見出し（h3） */
	.guide-section-heading {
		margin: 2rem 0 0.75rem;
		padding-bottom: 0.5rem;
		border-bottom: 2px solid #f0d8b8;
		color: #c25e10;
		font-size: 1.15rem;
	}

	/* 詳細リンク（参考の .more-box .more） */
	.guide-more {
		margin-top: 0.75rem;

		a {
			display: inline-block;
			padding: 0.35rem 0.85rem;
			border: 1px solid #e07a2b;
			border-radius: 4px;
			color: #c25e10;
			text-decoration: none;
			font-size: 0.875rem;
			font-weight: 600;

			&:hover { background: #fff8f0; }
		}
	}

	/* 色サンプルの 3 カラム比較（用紙ページ） */
	.paper-color-compare {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 12px;
		margin: 1rem 0 1.75rem;

		dl {
			margin: 0;

			dt {
				margin-bottom: 0.4rem;
				font-size: 0.875rem;
				font-weight: 700;
				color: #c25e10;
			}
			dd {
				margin: 0;
				img {
					width: 100%;
					height: auto;
					border-radius: 4px;
					background: #fafafa;
					border: 1px solid #eee;
					display: block;
				}
			}
		}
	}

	/* 用途別テーブル（紙の厚み等） */
	.guide-table {
		margin: 1rem 0 1.75rem;
		overflow-x: auto;

		/* 外側の枠線・角丸は <table> 側に直接適用し、ラッパー側に枠線は持たせない
		   （ラッパー border ＋ table 内部 border の二重描画による「変な余白」を防ぐ）
		   border-collapse:separate + border-spacing:0 + overflow:hidden の組み合わせで
		   border-radius を清潔にクリップする。 */
		table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			background: #fff;
			border: 1px solid #e5e5e5;
			border-radius: 6px;
			overflow: hidden;

			th, td {
				padding: 10px 14px;
				text-align: left;
				border-bottom: 1px solid #f0f0f0;
				font-size: 0.9rem;
				vertical-align: middle;
			}
			thead th {
				background: #fafafa;
				color: #333;
				font-weight: 700;
				border-bottom: 2px solid #e5e5e5;
				text-align: center;
			}
			tbody th {
				background: #fafafa;
				font-weight: 600;
				color: #c25e10;
				white-space: nowrap;
			}
			tbody td { text-align: center; }
			tbody tr:last-child th,
			tbody tr:last-child td { border-bottom: 0; }
		}
	}
	/* PC/SP 用テーブル切替（参考と同じ） */
	.guide-table.is-pc { display: block; }
	.guide-table.is-sp { display: none; }
	@media (max-width: 600px) {
		.guide-table.is-pc { display: none; }
		.guide-table.is-sp { display: block; }
	}

	/* 規格サイズ早見テーブル（size ページ） */
	.size-overview-table {
		margin: 1rem 0 1.75rem;
		overflow-x: auto;
		border: 1px solid #e5e5e5;
		border-radius: 6px;

		table {
			width: 100%;
			border-collapse: collapse;
			background: #fff;
			font-size: 0.875rem;

			caption {
				caption-side: top;
				padding: 10px 14px;
				background: #002b6b;
				color: #fff;
				font-weight: 700;
				text-align: left;
				border-radius: 6px 6px 0 0;
			}
			th, td {
				padding: 8px 12px;
				border: 1px solid #e5e5e5;
				text-align: center;
				vertical-align: middle;
			}
			thead th {
				background: #fafafa;
				font-weight: 700;
			}
			tbody th { font-weight: 600; text-align: left; }
			.size-tate, .size-yoko, .size-square {
				display: inline-block;
				margin-right: 4px;
				padding: 1px 6px;
				border-radius: 3px;
				font-size: 0.75rem;
				font-weight: 700;
				color: #fff;
			}
			.size-tate { background: #2670cc; }
			.size-yoko { background: #f24e00; }
			.size-square { background: #6b3aa7; }
			.size-image td {
				padding: 12px;
				font-size: 0.85rem;
				img { max-width: 120px; height: auto; display: block; margin: 0 auto 0.5rem; }
			}
		}
	}

	/* サイズカード一覧（size ページ） */
	.size-cards {
		list-style: none;
		padding: 0;
		margin: 1rem 0 2rem;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 16px;

		li { margin: 0; }
	}
	.size-card {
		position: relative;
		padding: 1rem;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 8px;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		.size-card-type {
			display: inline-block;
			align-self: flex-start;
			padding: 2px 8px;
			border-radius: 3px;
			font-size: 0.75rem;
			font-weight: 700;
			color: #fff;

			&.size-tate { background: #2670cc; }
			&.size-yoko { background: #f24e00; }
			&.size-square { background: #6b3aa7; }
		}
		.size-card-rank {
			position: absolute;
			top: 10px; right: 10px;
			width: 44px; height: 44px;
			border-radius: 50%;
			background: #f24e00;
			color: #fff;
			font-size: 0.7rem;
			text-align: center;
			line-height: 1.2;
			padding-top: 8px;
			font-weight: 700;
		}
		.size-card-img img {
			width: 100%;
			height: auto;
			border-radius: 4px;
			background: #fafafa;
			border: 1px solid #eee;
			display: block;
		}
		.size-card-title {
			margin: 0;
			font-size: 1rem;
			font-weight: 700;
			color: #333;

			.dim {
				display: block;
				margin-top: 2px;
				font-size: 0.8rem;
				font-weight: 400;
				color: #666;
			}
		}
		.size-card-desc {
			margin: 0;
			font-size: 0.8125rem;
			line-height: 1.6;
			color: #555;
		}
		.size-card-actions {
			margin-top: auto;
			display: flex;
			flex-direction: column;
			gap: 6px;

			a {
				display: block;
				padding: 0.4rem 0.6rem;
				border-radius: 4px;
				font-size: 0.8125rem;
				font-weight: 600;
				text-align: center;
				text-decoration: none;
				transition: opacity .15s ease;

				&.is-detail { border: 1px solid #ccc; color: #555; background: #fff; }
				&.is-detail:hover { background: #f7f7f7; }
				&.is-estimate { background: #f24e00; color: #fff; }
				&.is-estimate:hover { background: #d63f00; }
			}
		}
	}
	.size-group-heading {
		margin: 1.5rem 0 0.5rem;
		font-size: 1rem;
		font-weight: 700;
		color: #002b6b;
	}

	/* 独自視点ブロック（オーダーガイド各ページ共通） */
	.guide-insight {
		margin: 1rem 0 1.5rem;
		padding: 1rem 1.25rem;
		background: #fafbfd;
		border: 1px solid #e3e7ee;
		border-radius: 6px;

		h4 {
			margin: 0.75rem 0 0.5rem;
			font-size: 0.95rem;
			font-weight: 700;
			color: #002b6b;
		}
		h4:first-child { margin-top: 0; }
		ul {
			margin: 0 0 0.75rem;
			padding-left: 1.4em;
			line-height: 1.8;
		}
		ul:last-child { margin-bottom: 0; }
		li { margin-bottom: 0.25rem; }
		p {
			margin: 0 0 0.75rem;
			line-height: 1.8;
		}
		p:last-child { margin-bottom: 0; }
	}

	/* FAQ ブロック（オーダーガイド各ページ共通） */
	.guide-faq {
		margin: 1rem 0 1.5rem;

		dt {
			margin: 1rem 0 0.4rem;
			padding-left: 0;
			font-weight: 700;
			color: #c25e10;
			line-height: 1.6;
		}
		dt:first-child { margin-top: 0; }
		dd {
			margin: 0 0 0.5rem;
			padding-left: 1.1rem;
			line-height: 1.8;
			color: #333;
			border-left: 3px solid #f0d8b8;
		}
	}

	/* サイズ選びの 3 ステップ */
	.size-step-list {
		margin: 1rem 0 1.75rem;
		padding-left: 0;
		list-style: none;
		counter-reset: size-step;

		li {
			position: relative;
			margin: 0 0 0.75rem;
			padding: 0.75rem 1rem 0.75rem 3rem;
			background: #fff;
			border: 1px solid #ececec;
			border-left: 4px solid #002b6b;
			border-radius: 4px;
			counter-increment: size-step;
			line-height: 1.8;

			&::before {
				content: counter(size-step);
				position: absolute;
				left: 0.75rem;
				top: 0.75rem;
				width: 1.75rem; height: 1.75rem;
				background: #002b6b;
				color: #fff;
				font-weight: 700;
				border-radius: 50%;
				display: inline-flex;
				align-items: center;
				justify-content: center;
				font-size: 0.85rem;
			}
		}
	}

	/* ==========================================================================
	   ご利用ガイド（about）ページ共通スタイル — シンプル版
	   ========================================================================== */

	/* 目次 */
	.about-toc {
		margin: 1.5rem 0;
		padding: 1rem 1.25rem;
		background: #fafafa;
		border: 1px solid #e5e5e5;
		border-radius: 6px;

		.about-toc-heading {
			margin: 0 0 0.5rem;
			font-size: 0.95rem;
			font-weight: 700;
			color: #333;
		}
		ul {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
			gap: 0.25rem 1rem;
		}
		li { margin: 0; padding: 0; }
		a {
			color: #c25e10;
			text-decoration: none;
			font-size: 0.9rem;

			&::before {
				content: '›';
				margin-right: 0.4rem;
				color: #999;
			}
			&:hover { text-decoration: underline; }
		}
	}

	/* おすすめポイント 2 カラムカード */
	.about-points {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		margin: 1rem 0 1.5rem;

		@media (max-width: 700px) { grid-template-columns: 1fr; }
	}
	.about-point-card {
		padding: 1.25rem;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		gap: 0.5rem;

		h3 {
			margin: 0;
			padding: 0;
			color: #c25e10;
			font-size: 1rem;
			font-weight: 700;
			line-height: 1.5;
		}
		p {
			margin: 0;
			font-size: 0.9rem;
			line-height: 1.75;
			color: #333;
		}
		a {
			color: var(--jamble-color-accent, #f24e00);
			text-decoration: none;
			font-weight: 600;
			&:hover { text-decoration: underline; }
		}
	}

	/* 5 ステップオーダーガイド */
	.about-steps {
		list-style: none;
		padding: 0;
		margin: 1rem 0 1.5rem;

		li {
			display: grid;
			grid-template-columns: 200px 1fr;
			grid-template-areas:
				"heading heading"
				"thumb body";
			column-gap: 1.25rem;
			row-gap: 0.75rem;
			align-items: start;
			padding: 1.25rem;
			margin-bottom: 1rem;
			background: #fff;
			border: 1px solid #e5e5e5;
			border-radius: 6px;

			@media (max-width: 600px) {
				grid-template-columns: 1fr;
				grid-template-areas:
					"heading"
					"thumb"
					"body";
				gap: 0.75rem;
			}
		}

		.about-step-heading {
			grid-area: heading;
			margin: 0;
			padding: 0 0 0.5rem;
			border-bottom: 1px solid #eee;
			color: #c25e10;
			font-size: 1.05rem;
			font-weight: 700;
		}

		.about-step-thumb {
			grid-area: thumb;
			img {
				width: 100%;
				height: auto;
				border-radius: 4px;
				background: #fafafa;
				border: 1px solid #eee;
				display: block;
			}
		}
		.about-step-body {
			grid-area: body;

			p {
				margin: 0 0 0.5rem;
				line-height: 1.8;
				font-size: 0.9rem;
			}
			p:last-child { margin-bottom: 0; }
			ul:not(.about-step-buttons) {
				padding-left: 1.2em;
				margin: 0.25rem 0 0;
				line-height: 1.7;
				font-size: 0.875rem;
			}
			ul:not(.about-step-buttons) a {
				color: var(--jamble-color-accent, #f24e00);
				text-decoration: none;
				&:hover { text-decoration: underline; }
			}
		}

		/* STEP 内のリンクを角丸ボタンとして並べる（STEP 1 などの選択肢用） */
		.about-step-buttons {
			list-style: none;
			padding: 0;
			margin: 0.75rem 0 0;
			display: flex;
			flex-wrap: wrap;
			gap: 6px;

			li { margin: 0; padding: 0; }
			a {
				display: inline-block;
				padding: 6px 14px;
				background: #fff;
				border: 1px solid #d8a070;
				border-radius: 999px;
				color: #c25e10;
				text-decoration: none;
				font-size: 0.85rem;
				font-weight: 600;
				line-height: 1.4;
				transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;

				&:hover {
					background: #c25e10;
					color: #fff;
					border-color: #c25e10;
					text-decoration: none;
				}
			}
		}

		/* STEP 内の「お見積りフォームへ」ボタン（STEP 5 など） */
		.about-step-cta {
			margin-top: 0.75rem;
		}
		.about-step-cta-btn {
			display: inline-block;
			padding: 10px 24px;
			background: var(--jamble-color-accent, #f24e00);
			border-radius: 999px;
			color: #fff !important;
			text-decoration: none;
			font-size: 0.9rem;
			font-weight: 700;
			line-height: 1.4;
			transition: background-color 0.15s ease, transform 0.15s ease;

			&:hover {
				background: #d63f00;
				color: #fff !important;
				text-decoration: none;
				transform: translateY(-1px);
			}

			span { margin-left: 4px; }
		}
	}

	/* 3 つの強み */
	.about-strength {
		margin: 1rem 0;
		padding: 1.25rem;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: 6px;

		.guide-row { margin: 0; }
		.guide-row-body h3 {
			margin: 0 0 0.5rem;
			padding: 0 0 0.5rem;
			border-bottom: 1px solid #eee;
			color: #333;
			font-size: 1.05rem;
			font-weight: 700;
		}
	}

	/* 用途別カードグリッド（size ページ） */
	.size-usecase-grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 14px;
		margin: 1rem 0 1.75rem;
	}
	.size-usecase-card {
		padding: 0.9rem 1rem;
		background: #fff;
		border: 1px solid #ececec;
		border-radius: 6px;

		h4 {
			margin: 0 0 0.5rem;
			padding-bottom: 0.35rem;
			border-bottom: 2px solid #f0d8b8;
			color: #c25e10;
			font-size: 0.95rem;
			font-weight: 700;
		}
		p {
			margin: 0;
			font-size: 0.875rem;
			line-height: 1.8;
			color: #333;
		}
	}

	/* ==========================================================================
	   フロー / サイトマップ
	   ========================================================================== */
	/* ご注文の流れ — ナンバリングと見出しが視覚的に区別される
	   ステップカード＋下向き矢印スタイル */
	.flow-list {
		list-style: none;
		padding: 0;
		margin: 1.5rem 0 0;
		counter-reset: flow;

		li {
			position: relative;
			padding: 1.5rem 1.5rem 1.5rem 5.25rem;
			margin: 0 0 2rem;
			background: #fff;
			border: 1px solid #e6e6e6;
			border-radius: 8px;
			box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
			line-height: 1.8;
			color: #444;
			counter-increment: flow;

			/* STEP 番号バッジ（タイトルとは別の視覚スタイル） */
			&::before {
				content: counter(flow);
				position: absolute;
				left: 1.25rem; top: 1.25rem;
				width: 2.75rem; height: 2.75rem;
				line-height: 2.75rem;
				text-align: center;
				background: #e07a2b;
				color: #fff;
				border-radius: 50%;
				font-family: 'Helvetica', 'Arial', sans-serif;
				font-weight: 700;
				font-size: 1.25rem;
				box-shadow: 0 2px 4px rgba(224, 122, 43, 0.3);
			}

			/* ステップ間の下向き矢印（最後のステップにはつけない） */
			&:not(:last-child)::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: -1.4rem;
				width: 1rem;
				height: 1rem;
				transform: translateX(-50%) rotate(45deg);
				border-right: 3px solid #e07a2b;
				border-bottom: 3px solid #e07a2b;
				border-top-right-radius: 2px;
				z-index: 1;
			}
		}

		/* ステップ見出し — STEP 番号とは別の視覚スタイル */
		.flow-title {
			display: block;
			margin: 0 0 0.5rem;
			padding-bottom: 0.4rem;
			border-bottom: 1px dashed #e6e6e6;
			font-size: 1.1rem;
			font-weight: 700;
			color: #2b2b2b;
			letter-spacing: 0.02em;
		}
	}

	@media (max-width: 600px) {
		.flow-list li {
			padding: 1rem 1rem 1rem 4.25rem;
			margin-bottom: 1.5rem;

			&::before {
				left: 0.85rem; top: 0.85rem;
				width: 2.25rem; height: 2.25rem;
				line-height: 2.25rem;
				font-size: 1.05rem;
			}
		}
	}

	.sitemap-section {
		margin-bottom: 2rem;

		h2 { margin-bottom: 0.5rem; }
		ul { list-style: disc; }
	}

	/* ==========================================================================
	   アーカイブ共通（archive.php / archive-*.php / taxonomy-*.php）
	   ========================================================================== */
	.archive-section {
		.archive-description { margin: 0.5rem 0 1rem; color: #555; }
		.archive-empty       { padding: 2rem 0; color: #777; text-align: center; }
		.archive-pagination {
			margin-top: 2rem;

			.nav-links {
				display: flex;
				justify-content: center;
				gap: 0.5rem;
				flex-wrap: wrap;
			}
			a, .current {
				display: inline-block;
				padding: 0.4rem 0.8rem;
				border: 1px solid #ddd;
				border-radius: 4px;
				text-decoration: none;
				color: #555;
			}
			.current {
				background: #e07a2b;
				color: #fff;
				border-color: #e07a2b;
			}
			a:hover { border-color: #e07a2b; color: #e07a2b; }
		}
	}

	/* タグ（カテゴリ・スタイル等の小ラベル） */
	:is(.archive-section, .single-column, .single-post, .single-logo-template) .tag {
		display: inline-block;
		padding: 0.15em 0.6em;
		margin-right: 0.25rem;
		font-size: 0.75rem;
		background: #f3eee5;
		color: #c25e10;
		border-radius: 3px;
		text-decoration: none;
	}
	a.tag:hover { background: #e07a2b; color: #fff; }

	/* ==========================================================================
	   投稿一覧 / コラム一覧（カード型）
	   ========================================================================== */
	.post-list,
	.column-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 1.5rem;

		@media (max-width: 600px) { grid-template-columns: 1fr; }
	}
	.post-list {
		.post-card { margin: 0; }
		.post-card > a {
			display: block;
			color: inherit;
			text-decoration: none;
			border: 1px solid #eee;
			border-radius: 6px;
			overflow: hidden;
			background: #fff;
			transition: box-shadow 0.15s ease, border-color 0.15s ease;

			&:hover { border-color: #e07a2b; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
		}
		.post-thumb {
			aspect-ratio: 4/3;
			overflow: hidden;
			background: #f6f4ef;

			img         { width: 100%; height: 100%; object-fit: cover; display: block; }
			.placeholder { display: block; width: 100%; height: 100%; background: #eee; }
		}
		.post-body    { padding: 1rem; }
		.post-title   { font-size: 1.05rem; margin: 0 0 0.5rem; line-height: 1.4; }
		.post-meta    { font-size: 0.8rem; color: #888; margin: 0 0 0.5rem; time { margin-right: 0.5rem; } }
		.post-excerpt { font-size: 0.875rem; color: #555; margin: 0; line-height: 1.5; }
	}
	.column-list {
		.column-card { margin: 0; }
		.column-card > a {
			display: block;
			color: inherit;
			text-decoration: none;
			border: 1px solid #eee;
			border-radius: 6px;
			overflow: hidden;
			background: #fff;
			transition: box-shadow 0.15s ease, border-color 0.15s ease;

			&:hover { border-color: #e07a2b; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
		}
		.column-thumb {
			aspect-ratio: 4/3;
			overflow: hidden;
			background: #f6f4ef;

			img         { width: 100%; height: 100%; object-fit: cover; display: block; }
			.placeholder { display: block; width: 100%; height: 100%; background: #eee; }
		}
		.column-body    { padding: 1rem; }
		.column-title   { font-size: 1.05rem; margin: 0 0 0.5rem; line-height: 1.4; }
		.column-meta    { font-size: 0.8rem; color: #888; margin: 0 0 0.5rem; }
		.column-excerpt { font-size: 0.875rem; color: #555; margin: 0; line-height: 1.5; }
	}

	.column-category-nav {
		ul {
			list-style: none;
			padding: 0;
			margin: 0 0 1.5rem;
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
		}
		a {
			display: inline-block;
			padding: 0.4rem 0.85rem;
			border: 1px solid #ddd;
			border-radius: 999px;
			text-decoration: none;
			color: #555;
			font-size: 0.875rem;

			&:hover { border-color: #e07a2b; color: #e07a2b; }
		}
	}

	/* ==========================================================================
	   ロゴテンプレート一覧
	   ========================================================================== */
	.logo-template-grid {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
		gap: 1.25rem;

		@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); }

		.logo-template-card { margin: 0; }
		.logo-template-card > a {
			display: block;
			color: inherit;
			text-decoration: none;
			padding: 1rem;
			border: 1px solid #eee;
			border-radius: 6px;
			background: #fff;
			transition: box-shadow 0.15s ease, border-color 0.15s ease;

			&:hover { border-color: #e07a2b; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
		}
		.logo-template-thumb {
			aspect-ratio: 1/1;
			background: #f8f6f1;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 0.75rem;

			img         { max-width: 80%; max-height: 80%; height: auto; }
			.placeholder { display: block; width: 80%; height: 80%; background: #eee; }
		}
		.logo-template-title { font-size: 1rem; margin: 0 0 0.3rem; line-height: 1.4; }
		.logo-template-meta  { font-size: 0.75rem; color: #888; margin: 0; }
	}

	/* ==========================================================================
	   single ページ（投稿・コラム・ロゴテンプレート共通）
	   ========================================================================== */
	:is(.single-post .post-eyecatch,
	    .single-column .column-eyecatch,
	    .single-logo-template .logo-template-image) {
		margin: 1rem 0 1.5rem;

		img {
			width: 100%;
			height: auto;
			display: block;
			border-radius: 4px;
		}
	}

	:is(.single-post, .single-column) {
		.post-meta,
		.column-meta { font-size: 0.875rem; color: #777; margin: 0.5rem 0 0; }
		.post-footer,
		.column-footer {
			margin: 2rem 0 1rem;

			.nav-links {
				display: flex;
				justify-content: space-between;
				gap: 1rem;
				font-size: 0.875rem;
			}
			a {
				color: #c25e10;
				text-decoration: none;

				&:hover { text-decoration: underline; }
			}
		}
	}

}