/* =============================================================================
   08-paperbag.css
   紙袋・仕様紹介の4ページ（standard / onepoint / fullorder / specs）固有のUI。
   ヒーロー・パンくず・フォーム・FAQ などの汎用パーツは 05-components.css 側に集約済み。

   このファイルに残るのは、各ページに固有の UI のみ：
     .standard-page                          フィルター・カードグリッド・比較表
     .onepoint-page                          プレビューUI / 業種別おすすめ / 価格表
     .onepoint-page[data-page="fullorder"]   フルオーダー専用セクション群（.fo-*）
     .specs-page                             仕様紹介（タブアンカー・カードリスト・CTAバナー）

   どのページも、ページ直下の .container は左寄せに上書きする。
   ============================================================================= */

@layer pages {

	/* ==========================================================================
	   全 paperbag ページ共通：container 上書きとセクション縦余白
	   ========================================================================== */
	.standard-page,
	.onepoint-page,
	.specs-page {
		.container { text-align: left; }
	}
	.standard-page,
	.onepoint-page {
		> .container > section {
			margin: 6rem 0;
			&:first-child { margin-top: 2rem; }

			@media (max-width: 600px) { margin: 4rem 0; }
		}
	}

	/* ==========================================================================
	   .standard-page — 規格サイズ紙袋
	   ========================================================================== */
	.standard-page {

		/* ----- フィルター ----- */
		.sp-filter {
			background: var(--color-surface-soft);
			border: 1px solid #f0e7d5;
			border-radius: 12px;
			padding: 1.5rem;

			@media (max-width: 600px) { padding: 1rem; }
		}
		.sp-filter-groups { display: grid; gap: 1rem; }
		.sp-filter-group {
			display: grid;
			grid-template-columns: 9rem 1fr;
			gap: 1rem;
			align-items: start;

			@media (max-width: 600px) {
				grid-template-columns: 1fr;
				gap: 0.5rem;
			}
		}
		.sp-filter-label {
			font-weight: 600;
			padding-top: 0.4rem;
			color: #444;
			font-size: 0.95rem;

			@media (max-width: 600px) { padding-top: 0; }
		}
		.sp-filter-actions { margin-top: 1rem; text-align: right; }
		.sp-filter-clear {
			background: none;
			border: none;
			color: var(--color-muted);
			text-decoration: underline;
			cursor: pointer;
			font-size: 0.85rem;
			padding: 0.25rem 0.5rem;

			&:hover { color: var(--color-accent); }
		}

		/* ----- 検索結果ヘッダ -----
		   見出しは c-section-head の中央寄せをそのまま活かしたいので、
		   親をブロック扱いにし、並び順セレクトだけ右端へ寄せる。 */
		.sp-results-head {
			display: block;

			> div { text-align: center; }

			.sp-sort {
				display: block;
				text-align: right;
				margin-top: 1rem;

				@media (max-width: 600px) { text-align: center; }
			}
		}
		.sp-sort {
			font-size: 0.85rem;
			color: #555;

			select {
				margin-left: 0.5rem;
				padding: 0.4rem 1.75rem 0.4rem 0.75rem;
				border: 1px solid var(--color-border);
				border-radius: 6px;
				font-size: 0.875rem;
				background: #fff;
				font-family: inherit;
			}
		}

		/* ----- 商品カードグリッド（画像をサイズ名の下に、カード幅で自動カラム）-----
		   auto-fill + minmax(220px, 1fr) で、画面幅に応じて自然に 3〜4 カラム化。
		   - 〜700px:    1 カラム
		   - 700〜1000px: 3 カラム前後
		   - 1000px〜:   3〜4 カラム
		   - 1400px〜:   4〜5 カラム
		*/
		.sp-card-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
			gap: 1rem;

			@media (max-width: 480px) { grid-template-columns: 1fr; gap: 0.75rem; }
		}
		.sp-card {
			position: relative;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.25rem 1rem;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			transition: box-shadow 0.15s ease, transform 0.15s ease;

			&:hover {
				box-shadow: 0 6px 18px rgba(0,0,0,0.08);
				transform: translateY(-2px);
			}
			&.is-top {
				border-color: #2670cc;
				border-width: 2px;
				padding: calc(1.25rem - 1px) calc(1rem - 1px);
			}
		}
		/* フィルタで除外したカードを実際に非表示にする。
		   .sp-card の display:flex が UA の [hidden]{display:none} を上書きするため明示する。 */
		.sp-card[hidden] { display: none; }

		/* 商品名の左に重ねるタイプバッジの基準点（中央寄せのまま絶対配置を許可） */
		.sp-card-head {
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			min-height: 1.6rem;
		}

		/* タイプバッジ（タテ型 / ヨコ型 / スクエア）
		   - 商品名と同じ高さに絶対配置して上下スペースを取らない
		   - 角丸の塗りつぶし＋白抜き文字 */
		.sp-card-type {
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			padding: 3px 10px;
			border-radius: 999px;
			font-size: 0.7rem;
			font-weight: 700;
			color: #fff;
			letter-spacing: 0.04em;
			line-height: 1.2;
			white-space: nowrap;
			background: #888;
		}
		.sp-card-type--tate   { background: #2670cc; }
		.sp-card-type--yoko   { background: #f24e00; }
		.sp-card-type--square { background: #6b3aa7; }

		/* 人気ランクバッジ（円形） */
		.sp-card-rank {
			position: absolute;
			top: 10px;
			right: 10px;
			width: 46px;
			height: 46px;
			border-radius: 50%;
			background: #f24e00;
			color: #fff;
			font-size: 0.7rem;
			font-weight: 700;
			text-align: center;
			line-height: 1.2;
			padding-top: 9px;
			box-shadow: 0 2px 6px rgba(242, 78, 0, 0.35);
			z-index: 1;
		}

		.sp-card-body {
			display: flex;
			flex-direction: column;
			gap: 0.4rem;
			text-align: center;
		}
		.sp-card-name {
			font-size: 1.1rem;
			margin: 0;
			font-weight: 700;
			color: #333;
		}
		.sp-card-dim {
			font-size: 0.8rem;
			color: var(--color-muted);
			margin: 0;
		}

		/* サイズ名の下に画像を配置。商品ページのスライダー画像（アスペクト比はまちまち）でも
		   切れずに収まるよう object-fit:contain で高さ固定の枠に収める */
		.sp-card-thumb {
			margin: 0.5rem auto 0.25rem;
			width: 100%;
			max-width: 180px;
			aspect-ratio: 1 / 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fafafa;
			border: 1px solid #eee;
			border-radius: 6px;
			overflow: hidden;

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: contain;
			}
			svg { width: 100%; height: 100%; max-width: 160px; }
		}

		.sp-card-fit {
			font-size: 0.825rem;
			color: #444;
			margin: 0.25rem 0 0.5rem;
			line-height: 1.55;
		}
		/* 「詳細を見る」「お見積もり」の 2 ボタン（よりボタンらしいスタイル） */
		.sp-card-actions {
			margin-top: auto;
			padding-top: 0.75rem;
			border-top: 1px solid #f0f0f0;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.sp-card-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			padding: 0.65rem 1rem;
			border-radius: 999px;
			text-align: center;
			text-decoration: none;
			font-size: 0.85rem;
			font-weight: 700;
			line-height: 1.3;
			letter-spacing: 0.02em;
			box-shadow: 0 1px 2px rgba(0,0,0,0.06);
			transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
		}
		.sp-card-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
		.sp-card-btn--detail {
			background: #fff;
			border: 1.5px solid #2670cc;
			color: #2670cc;
		}
		.sp-card-btn--detail:hover { background: #2670cc; color: #fff; }
		.sp-card-btn--estimate {
			background: var(--color-accent, #f24e00);
			border: 1.5px solid var(--color-accent, #f24e00);
			color: #fff;
		}
		.sp-card-btn--estimate:hover { background: #d63f00; border-color: #d63f00; color: #fff; }

		/* 旧クラス（互換のため） — 既存 HTML が残っている場合に表示崩れしないよう最低限のスタイル */
		.sp-card-link {
			display: inline-block;
			margin-top: auto;
			padding-top: 0.75rem;
			color: var(--color-accent-dark);
			font-weight: 600;
			text-decoration: none;
			font-size: 0.875rem;
			border-top: 1px solid #f0f0f0;

			&:hover { color: var(--color-accent); text-decoration: underline; }
		}
		.sp-no-results {
			padding: 2rem;
			text-align: center;
			color: var(--color-muted);
			background: #fafafa;
			border-radius: 8px;
			margin: 1rem 0 0;
		}

		/* ----- 比較表 ----- */
		.sp-compare-tabs {
			display: flex;
			gap: 0;
			margin: 0 0 1rem;
			border-bottom: 1px solid var(--color-border);
		}
		.sp-compare-tab {
			background: none;
			border: none;
			padding: 0.6rem 1.2rem;
			cursor: pointer;
			color: var(--color-muted);
			font-size: 0.9rem;
			border-bottom: 2px solid transparent;
			margin-bottom: -1px;
			font-family: inherit;

			&:hover { color: var(--color-accent-dark); }
			&.is-active {
				color: var(--color-accent-dark);
				border-bottom-color: var(--color-accent);
				font-weight: 600;
			}
		}
		.sp-compare-wrap {
			overflow-x: auto;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			background: #fff;
		}
		.sp-compare-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.9rem;

			thead { background: #f7f4ef; }
			th, td {
				padding: 0.7rem 1rem;
				text-align: left;
				border-bottom: 1px solid var(--color-border);
				vertical-align: middle;

				@media (max-width: 600px) { padding: 0.5rem 0.6rem; font-size: 0.825rem; }
			}
			thead th {
				font-weight: 600;
				color: #444;
				font-size: 0.825rem;

				small { font-weight: 400; color: var(--color-muted); }
			}
			tbody tr:hover           { background: #fff8ef; }
			tbody tr.is-highlight    { background: #fff8ef; }
			tbody tr.is-highlight:hover { background: #fff1de; }
			.num { text-align: right; white-space: nowrap; }
		}
		.sp-row-star { color: var(--color-accent); margin-right: 0.25em; }
		.sp-row-link {
			color: var(--color-accent-dark);
			text-decoration: none;
			font-weight: 600;

			&:hover { color: var(--color-accent); text-decoration: underline; }
		}
		.sp-compare-more { text-align: center; margin-top: 1rem; }
		.sp-compare-toggle {
			background: #fff;
			border: 1px solid var(--color-border);
			padding: 0.5rem 1.5rem;
			border-radius: 999px;
			cursor: pointer;
			color: #555;
			font-size: 0.875rem;
			font-family: inherit;

			&:hover {
				border-color: var(--color-accent);
				color: var(--color-accent-dark);
			}
		}

		/* ----- flow / voice / faq の補足ブロック ----- */
		.sp-extra > div { margin-top: 2.5rem; }

		.sp-flow-steps {
			list-style: none;
			padding: 0; margin: 0;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;

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

			li {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 8px;
				padding: 1rem 1rem 1.25rem;
				position: relative;
			}
		}
		.sp-flow-num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.75rem; height: 1.75rem;
			background: var(--color-accent);
			color: #fff;
			border-radius: 50%;
			font-weight: 700;
			font-size: 0.9rem;
			margin-bottom: 0.5rem;
		}
		.sp-flow-title { display: block; font-weight: 700; margin-bottom: 0.35rem; }
		.sp-flow-desc  { display: block; font-size: 0.85rem; color: #555; line-height: 1.6; }

		.sp-voice-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;

			@media (max-width: 1024px) { grid-template-columns: 1fr; }
		}
		.sp-voice-card {
			margin: 0;
			padding: 1rem 1.25rem;
			background: #fafafa;
			border-left: 3px solid var(--color-accent);
			border-radius: 4px;

			p {
				margin: 0 0 0.5rem;
				font-size: 0.9rem;
				line-height: 1.7;
				color: #444;
			}
			cite {
				font-style: normal;
				font-size: 0.8rem;
				color: var(--color-muted);
			}
		}

		/* ----- 人気の紙袋の仕様（.sp-spec） -----
		   トップに中央寄せのテキスト概要、下に標準仕様6項目のグリッド。 */
		.sp-spec-lead {
			margin: 0 auto 2rem;
			max-width: 760px;
			text-align: center;
		}
		.sp-spec-lead-text {
			h3 {
				font-size: 1.15rem;
				font-weight: 700;
				margin: 0 0 0.6rem;
				color: var(--color-accent-dark);
			}
			p {
				margin: 0;
				font-size: 0.9rem;
				line-height: 1.85;
				color: #444;
			}
		}
		.sp-spec-grid {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1.25rem;

			@media (max-width: 600px) { grid-template-columns: 1fr; }
		}
		.sp-spec-item {
			display: grid;
			grid-template-columns: 40% 1fr;
			gap: 1rem;
			align-items: start;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			padding: 0.9rem;

			@media (max-width: 600px) { grid-template-columns: 35% 1fr; }
		}
		.sp-spec-item-img {
			background: var(--color-surface-soft);
			border-radius: 6px;
			aspect-ratio: 4 / 3;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			img { width: 100%; height: 100%; object-fit: cover; }
		}
		.sp-spec-item-text {
			p {
				margin: 0;
				font-size: 0.825rem;
				line-height: 1.65;
				color: #555;
			}
		}
		.sp-spec-item-name {
			margin: 0 0 0.4rem;
			font-size: 1rem;
			font-weight: 700;
			color: var(--color-primary);
		}
		.sp-spec-cta {
			text-align: center;
			margin-top: 2rem;

			.c-btn { min-width: 280px; }
		}

		/* ----- ご注文の流れ（.sp-guide） -----
		   素材／サイズ／ハンドル／印刷色数の4ステップ。各ステップに番号付き見出しとカードグリッド。
		   ステップ内のジャンプリンクから guide-step1〜4 にアンカー遷移。 */
		.sp-guide-nav {
			list-style: none;
			padding: 0.75rem 1rem;
			margin: 0 0 2rem;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 0.5rem 1rem;
			background: var(--color-accent-soft);
			border: 1px solid var(--color-accent-border);
			border-radius: 8px;

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

			a {
				display: inline-flex;
				align-items: center;
				gap: 0.4rem;
				color: var(--color-accent-dark);
				text-decoration: none;
				font-size: 0.9rem;
				font-weight: 600;
				padding: 0.25rem 0;

				&:hover { color: var(--color-primary); text-decoration: underline; }
				i { font-size: 0.85em; }
			}
		}
		.sp-guide-step {
			margin: 0 0 2.5rem;
			scroll-margin-top: 80px;

			&:last-child { margin-bottom: 0; }

			> p {
				font-size: 0.95rem;
				line-height: 1.85;
				color: #444;
				margin: 0 0 1rem;
			}
		}
		.sp-guide-step-title {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			font-size: 1.25rem;
			font-weight: 700;
			margin: 0 0 1.25rem;
			padding-bottom: 0.6rem;
			border-bottom: 2px solid var(--color-accent);
			color: #333;
		}
		.sp-guide-step-num {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 2rem;
			height: 2rem;
			background: var(--color-accent);
			color: #fff;
			border-radius: 50%;
			font-size: 1rem;
			font-weight: 700;
			flex: 0 0 auto;
		}
		.sp-guide-grid {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			gap: 1rem;
		}
		.sp-guide-grid-3 {
			grid-template-columns: repeat(3, 1fr);

			@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 480px) { grid-template-columns: 1fr; }
		}
		.sp-guide-item {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			padding: 1rem;

			p {
				margin: 0;
				font-size: 0.825rem;
				line-height: 1.65;
				color: #555;
			}
		}
		.sp-guide-item-img {
			background: var(--color-surface-soft);
			border-radius: 6px;
			aspect-ratio: 4 / 3;
			margin: 0 0 0.75rem;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;

			img { width: 100%; height: 100%; object-fit: cover; }
		}
		.sp-guide-item-name {
			margin: 0 0 0.5rem;
			font-size: 1rem;
			font-weight: 700;
			color: var(--color-primary);
		}
		.sp-guide-emph {
			color: var(--color-primary);
			font-weight: 600;
		}
		.sp-guide-more {
			text-align: right;
			margin-top: 1rem;
		}
		.sp-guide-more-link {
			color: var(--color-accent-dark);
			font-size: 0.875rem;
			font-weight: 600;
			text-decoration: none;

			&:hover { color: var(--color-primary); text-decoration: underline; }
		}
	}

	/* ==========================================================================
	   .onepoint-page — ワンポイント箔押し / 名入れ / フルオーダーで共有するUI
	   ========================================================================== */
	.onepoint-page {

		/* ----- プレビューセクション（onepoint固有） ----- */
		.op-preview { background: #fff; }
		.op-preview-grid {
			display: grid;
			grid-template-columns: minmax(280px, 1fr) 1.1fr;
			gap: 2rem;
			align-items: start;

			@media (max-width: 768px) { grid-template-columns: 1fr; gap: 1.5rem; }
		}
		.op-preview-stage {
			background: linear-gradient(180deg, var(--color-surface-soft) 0%, #f1eee4 100%);
			border: 1px solid var(--color-border);
			border-radius: 12px;
			padding: 1.5rem;
			margin: 0;
			text-align: center;
		}
		.op-bag-svg {
			width: 100%;
			max-width: 360px;
			height: auto;
			aspect-ratio: 1 / 1;
			display: block;
			margin: 0 auto;

			@media (max-width: 768px) { max-width: 280px; }
		}
		.op-preview-caption {
			margin: 1rem 0 0;
			font-size: 0.875rem;
			color: #555;
			line-height: 1.7;

			strong { color: var(--color-text); font-weight: 700; }
		}
		.op-preview-controls {
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
		}
		.op-control-group { display: flex; flex-direction: column; gap: 0.6rem; }
		.op-control-label { font-weight: 700; font-size: 0.95rem; color: #444; }

		/* ----- サイズタグ ----- */
		.op-tag-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
		.op-tag {
			padding: 0.5rem 1.1rem;
			background: #fff;
			border: 1.5px solid var(--color-border);
			color: #555;
			border-radius: 999px;
			font-size: 0.9rem;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.15s ease;
			font-family: inherit;

			&:hover {
				border-color: var(--color-accent);
				color: var(--color-accent-dark);
			}
			&.is-active {
				background: var(--color-accent);
				border-color: var(--color-accent);
				color: #fff;
			}
			&:focus-visible {
				outline: 2px solid var(--color-accent);
				outline-offset: 2px;
			}
		}

		/* ----- スウォッチ ----- */
		.op-swatch-list {
			display: flex;
			flex-wrap: wrap;
			gap: 0.75rem;

			/* 箔色（9色）は1行あたり最大5つの等間隔グリッドで並べる。
			   ・minmax(0,1fr) でコンテナ幅に応じて折り返し、横はみ出しを防ぐ
			   ・行間は名称ラベル（スウォッチの下に絶対配置）が次行と重ならないよう広めに確保
			   ※ Sass風の &--foil は素のCSSネストでは無効になるため & + クラスで指定する。 */
			&.op-swatch-list--foil {
				display: grid;
				grid-template-columns: repeat(5, minmax(0, 1fr));
				justify-items: center;
				gap: 2.5rem 0.5rem;
			}
			.op-swatch--paper + .op-swatch--paper { margin-left: 2rem; }
		}
		.op-swatch {
			position: relative;
			width: 56px; height: 56px;
			border-radius: 50%;
			background: var(--op-swatch-bg, #fff);
			border: 2px solid #fff;
			box-shadow: 0 0 0 1.5px var(--color-border), 0 2px 4px rgba(0,0,0,0.06);
			cursor: pointer;
			padding: 0;
			transition: all 0.15s ease;
			font-family: inherit;

			&:hover {
				box-shadow: 0 0 0 1.5px var(--color-accent), 0 4px 8px rgba(0,0,0,0.1);
				transform: translateY(-1px);
			}
			&.is-active {
				box-shadow:
					0 0 0 2px var(--color-accent-dark),
					0 0 0 5px color-mix(in srgb, var(--color-accent) 25%, transparent);
			}
			&:focus-visible {
				outline: 2px solid var(--color-accent);
				outline-offset: 4px;
			}
			&--paper { width: 64px; height: 64px; }

			@media (max-width: 768px) {
				width: 48px; height: 48px;
				&--paper { width: 56px; height: 56px; }
			}
		}
		.op-swatch-name {
			position: absolute;
			left: 50%; bottom: -1.5rem;
			transform: translateX(-50%);
			white-space: nowrap;
			font-size: 0.7rem;
			color: #666;
			font-weight: 500;

			@media (max-width: 768px) { font-size: 0.65rem; bottom: -1.3rem; }
		}

		/* ----- 業種別おすすめ（onepoint固有） ----- */
		.op-industry-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.op-industry-card {
			display: flex;
			gap: 1rem;
			align-items: center;
			padding: 1.25rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			cursor: pointer;
			text-align: left;
			font-family: inherit;
			transition: all 0.15s ease;

			&:hover {
				border-color: var(--color-accent);
				box-shadow: 0 4px 12px rgba(0,0,0,0.06);
				transform: translateY(-1px);
			}
			&:focus-visible {
				outline: 2px solid var(--color-accent);
				outline-offset: 2px;
			}
		}
		.op-industry-swatches {
			position: relative;
			flex: 0 0 auto;
			width: 72px; height: 72px;
		}
		.op-industry-swatch {
			position: absolute;
			border-radius: 50%;
			border: 2px solid #fff;
			box-shadow: 0 0 0 1.5px var(--color-border);

			&--paper { width: 56px; height: 56px; top: 0; left: 0; }
			&--foil  { width: 40px; height: 40px; bottom: 0; right: 0; }
		}
		.op-industry-name  { font-size: 1rem; margin: 0 0 0.25rem; font-weight: 700; }
		.op-industry-combo {
			margin: 0 0 0.4rem;
			font-size: 0.85rem;
			color: var(--color-accent-dark);

			strong { font-weight: 700; }
		}
		.op-industry-desc { margin: 0; font-size: 0.825rem; color: var(--color-muted); line-height: 1.6; }

		/* ----- 価格表（paperbag-pricing-table.php — onepoint/naire/fullorder で共通） -----
		   見出し（.c-section-head）の中央寄せをそのまま活かし、見出し下にタブを中央配置で配置する。 */
		.op-pricing {
			width: 100%;
			margin: 0;
			padding: 0;
		}

		.op-pricing-head {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 1rem;

			> div:first-child { width: 100%; }
		}
		.op-pricing-tabs {
			display: inline-flex;
			background: #f5f3ee;
			border: 1px solid var(--color-border);
			border-radius: 999px;
			padding: 4px;
			gap: 2px;
		}
		.op-pricing-tab {
			background: transparent;
			border: none;
			padding: 0.45rem 1.1rem;
			border-radius: 999px;
			font-size: 0.875rem;
			font-weight: 600;
			color: var(--color-muted);
			cursor: pointer;
			transition: all 0.15s ease;
			font-family: inherit;

			&:hover { color: var(--color-text); }
			&.is-active {
				background: #fff;
				color: var(--color-accent-dark);
				box-shadow: 0 1px 3px rgba(0,0,0,0.08);
			}
			&:focus-visible {
				outline: 2px solid var(--color-accent);
				outline-offset: 2px;
			}
		}
		.op-pricing-wrap {
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			background: #fff;
		}
		.op-pricing-table {
			width: 100%;
			min-width: 640px;
			border-collapse: collapse;
			font-size: 0.9rem;

			@media (max-width: 768px) { font-size: 0.825rem; }

			thead th {
				background: var(--color-surface-soft);
				padding: 0.85rem 0.5rem;
				text-align: center;
				font-weight: 700;
				color: #444;
				border-bottom: 2px solid var(--color-border);
				position: relative;

				&.op-pricing-th-size { text-align: left; padding-left: 1rem; }
				&.is-popular-col {
					background: var(--color-popular);
					color: #fff;

					.op-popular-label { background: #fff; color: var(--color-popular); }
				}
			}
			.op-pricing-th-qty-num { display: block; font-size: 0.95rem; }
			.op-popular-label {
				display: inline-block;
				margin-top: 0.2rem;
				padding: 0.1rem 0.45rem;
				background: var(--color-popular);
				color: #fff;
				font-size: 0.65rem;
				font-weight: 700;
				border-radius: 999px;
				letter-spacing: 0.05em;
			}

			tbody tr { border-bottom: 1px solid #eee; }
			tbody tr:last-child { border-bottom: none; }
			tbody th {
				padding: 0.85rem 1rem;
				text-align: left;
				font-weight: 700;
				background: #fff;
				vertical-align: middle;
				white-space: nowrap;
			}

			/* 人気列・人気行・交差ハイライト */
			.is-popular-col       { background: var(--color-popular-soft); }
			.is-popular-row > *   { background: var(--color-popular-soft); }
			.is-popular-cross     {
				background: var(--color-popular-strong);
				.op-cell-total { color: var(--color-popular); }
			}
		}
		.op-pricing-size-name { display: inline-block; font-size: 1rem; color: var(--color-text); }
		.op-pricing-size-dim  {
			display: block;
			font-size: 0.75rem;
			color: var(--color-muted);
			font-weight: 500;
			margin-top: 0.15rem;
		}
		.op-popular-badge {
			display: inline-block;
			margin-left: 0.35rem;
			padding: 0.1rem 0.45rem;
			background: var(--color-popular);
			color: #fff;
			font-size: 0.65rem;
			font-weight: 700;
			border-radius: 999px;
			vertical-align: middle;
		}
		.op-pricing-td { padding: 0.85rem 0.5rem; text-align: center; vertical-align: middle; }
		.op-cell-total {
			display: block;
			font-size: 0.95rem;
			font-weight: 700;
			color: var(--color-text);
			line-height: 1.3;

			@media (max-width: 768px) { font-size: 0.875rem; }
		}
		.op-cell-unit {
			display: block;
			font-size: 0.75rem;
			color: var(--color-muted);
			margin-top: 0.15rem;
		}
		.op-pricing-info { display: grid; gap: 1rem; margin-top: 1.5rem; }

		.op-pricing-notes {
			margin: 1.5rem 0 0;
			padding: 0;
			list-style: disc;
			padding-left: 1.5rem;

			li {
				margin: 0.4rem 0;
				font-size: 0.9rem;
				color: #666;
				line-height: 1.6;
			}
		}

		.op-pricing-cta {
			margin-top: 1.5rem;
			text-align: center;
		}

		/* ----- 名入れ「こんな方におすすめ」 ----- */
		.naire-target-user-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.naire-target-user-card {
			display: flex;
			gap: 1rem;
			padding: 1.25rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			align-items: flex-start;

			@media (max-width: 768px) { padding: 1rem; gap: 0.75rem; }
		}
		.naire-target-user-icon {
			flex: 0 0 auto;
			width: 44px; height: 44px;
			border-radius: 50%;
			background: var(--color-accent-soft);
			color: var(--color-accent-dark);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.1rem;
		}
		.naire-target-user-body  { flex: 1; min-width: 0; }
		.naire-target-user-title { margin: 0 0 0.4rem; font-size: 1.05rem; line-height: 1.4; }
		.naire-target-user-desc  { margin: 0; color: #444; font-size: 0.9rem; line-height: 1.7; }

		/* ----- サイズ紹介セクション（original-pb.net/naire 参考のカード形式・onepoint / naire 共有） ----- */
		.op-sizes { margin-top: 2.5rem; }
		.op-sizes-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;

			@media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 600px)  { grid-template-columns: 1fr; }
		}
		.op-size-card {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			background: #fff;
			border: 1.5px solid var(--color-border);
			border-radius: 12px;
			padding: 1.25rem;
			text-align: center;
		}
		.op-size-card-name {
			margin: 0;
			font-size: 1.15rem;
			font-weight: 700;
			color: var(--color-accent-dark);
		}
		.op-size-card-dim {
			margin: 0;
			font-size: 0.9rem;
			font-weight: 600;
			color: var(--color-text);
		}
		.op-size-card-desc {
			margin: 0;
			font-size: 0.875rem;
			color: #555;
			line-height: 1.7;
			flex: 1;
		}
		.op-size-card-foil {
			margin: 0;
			font-size: 0.8rem;
			color: var(--color-muted);
			background: var(--color-accent-soft);
			border-radius: 6px;
			padding: 0.4rem 0.6rem;
		}
		/* 商品ページのスライダー画像（アスペクト比はまちまち）でも切れずに収まるよう
		   object-fit:contain で正方形枠に収める。規格サイズ紙袋ページの .sp-card-thumb に揃える。 */
		.op-size-card-thumb {
			margin: 0.5rem auto 0.25rem;
			width: 100%;
			max-width: 180px;
			aspect-ratio: 1 / 1;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fafafa;
			border: 1px solid #eee;
			border-radius: 6px;
			overflow: hidden;
		}
		.op-size-card-thumb img {
			display: block;
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		/* 「詳細を見る」「お見積もり」の2ボタン（規格サイズ紙袋ページの .sp-card-actions に揃える） */
		.op-size-card-actions {
			margin-top: auto;
			padding-top: 0.75rem;
			border-top: 1px solid #f0f0f0;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.op-size-card-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 4px;
			padding: 0.65rem 1rem;
			border-radius: 999px;
			text-align: center;
			text-decoration: none;
			font-size: 0.85rem;
			font-weight: 700;
			line-height: 1.3;
			letter-spacing: 0.02em;
			box-shadow: 0 1px 2px rgba(0,0,0,0.06);
			transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
		}
		.op-size-card-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.12); }
		.op-size-card-btn--detail {
			background: #fff;
			border: 1.5px solid var(--color-accent-dark);
			color: var(--color-accent-dark);
		}
		.op-size-card-btn--detail:hover { background: var(--color-accent-dark); color: #fff; }
		.op-size-card-btn--estimate {
			background: var(--color-accent);
			border: 1.5px solid var(--color-accent);
			color: #fff;
		}
		.op-size-card-btn--estimate:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; }

		/* ----- 入稿について／次のような現象／入稿NG例（naire / onepoint 共通） ----- */
		.op-input-notes,
		.op-input-phenomena,
		.op-input-ng {
			margin: 3rem 0;
		}
		.op-input-quicklinks {
			list-style: none;
			padding: 0;
			margin: 0 0 1rem;
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 0.5rem;

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

			a {
				display: flex;
				align-items: center;
				gap: 0.5rem;
				padding: 0.75rem 1rem;
				background: var(--color-accent-soft);
				border: 1px solid var(--color-accent-border);
				border-radius: 6px;
				text-decoration: none;
				color: var(--color-text);
				font-size: 0.9rem;
				transition: background-color 0.15s ease, border-color 0.15s ease;
			}
			a:hover { background: color-mix(in srgb, var(--color-accent) 14%, white); border-color: var(--color-accent); }
			i { color: var(--color-accent); font-size: 0.75rem; flex-shrink: 0; }
		}
		.op-input-card-figure {
			margin: 0 0 0.75rem;
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			border-radius: 6px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.op-input-card-figure img { width: 100%; height: 100%; object-fit: cover; }
		.op-input-card--ng h4 {
			border-bottom-color: #e6a4a4;
			color: #c0392b;
		}

		/* ======================================================================
		   ワンポイント箔押し専用（data-page="onepoint" のときだけ有効）
		   ※ .onepoint-page は naire / fullorder と共有するため、箔押しページだけに
		      効かせたい上書きは必ずこのスコープ内に置く。
		   ====================================================================== */
		&[data-page="onepoint"] {

			/* #2 価格表「500枚を超えるご注文をご検討の方」：
			   CTA を右端へ飛ばさず、説明テキストのすぐ隣に並べる。
			   ※ 親テーマの .c-info-box--accent { &--accent { display:flex … } } は
			      素のCSSネストでは無効化され効かないため、ここで横並びを明示する。 */
			.c-info-box--accent {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				gap: 1rem;
				justify-content: flex-start;

				@media (max-width: 768px) {
					flex-direction: column;
					align-items: flex-start;
				}
			}

			/* #4 他サービスとの比較カード：
			   dt/dd を両端揃え（space-between）から、dt のすぐ隣に dd を置き、
			   ペアをカード内で中央寄せにする。 */
			.c-compare-card-specs > div {
				justify-content: center;
				gap: 0.5rem;
			}

			/* ----- 箔押しについて（エデュケーショナルセクション） ----- */
			.op-foil-about { margin: 3rem 0; }
			.op-foil-about-body {
				display: grid;
				grid-template-columns: minmax(0, 320px) 1fr;
				gap: 1.5rem 2rem;
				align-items: center;
				margin: 1.5rem 0 2.5rem;

				@media (max-width: 768px) { grid-template-columns: 1fr; }
			}
			.op-foil-about-figure {
				margin: 0;
				background: var(--color-surface-soft);
				border-radius: 8px;
				overflow: hidden;

				img { width: 100%; height: auto; display: block; }
			}
			.op-foil-about-figure--variety {
				margin: 0 auto 0.5rem;
				background: transparent;
			}
			.op-foil-about-note {
				display: block;
				text-align: right;
				font-size: 0.8rem;
				color: var(--color-muted);
				margin-top: 0.5rem;
			}
			.op-foil-about-text p {
				margin: 0 0 0.85rem;
				font-size: 0.95rem;
				line-height: 1.85;
				color: #444;
			}
			.op-foil-about-text p:last-child { margin-bottom: 0; }
			.op-foil-about-variety {
				margin: 2.5rem 0 1.75rem;
				padding: 1.75rem 1.25rem;
				background: var(--color-accent-soft);
				border-radius: 10px;
			}
			.op-foil-about-variety-head {
				text-align: center;
				margin: 0 0 1.25rem;

				h3 {
					margin: 0 0 0.5rem;
					font-size: 1.1rem;
					font-weight: 700;
					color: var(--color-secondary);
				}
				p {
					margin: 0;
					font-size: 0.875rem;
					color: var(--color-muted);
					line-height: 1.75;
				}
			}
			.op-foil-about-lead {
				margin: 0.75rem 0 0;
				font-size: 0.9rem;
				line-height: 1.85;
				color: #444;
			}
			.op-foil-about-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;
				margin-top: 1.5rem;

				@media (max-width: 768px) { grid-template-columns: 1fr; }
			}
			.op-foil-about-card {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 10px;
				padding: 0;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}
			.op-foil-about-card-thumb {
				margin: 0;
				aspect-ratio: 4 / 3;
				background: var(--color-surface-soft);
				overflow: hidden;

				img { width: 100%; height: 100%; object-fit: cover; display: block; }
			}
			.op-foil-about-card-name {
				margin: 0.85rem 1rem 0.45rem;
				font-size: 1rem;
				font-weight: 700;
				color: var(--color-secondary);
			}
			.op-foil-about-card-desc {
				margin: 0 1rem 1rem;
				font-size: 0.85rem;
				line-height: 1.75;
				color: #555;
			}
		}

		/* ======================================================================
		   名入れ専用（data-page="naire" のときだけ有効）
		   ※ サイズ紹介カード等の共通スタイルは上の .onepoint-page スコープに定義。
		      ここには名入れページ固有の上書きだけを置く。
		   ====================================================================== */
		&[data-page="naire"] {

			/* サイズが3種のため、デスクトップは3列で均等割りにする（onepoint は4列）。 */
			.op-sizes-grid {
				grid-template-columns: repeat(3, 1fr);

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

			/* 比較カードの dt/dd をカード内で中央寄せ（onepoint と揃える）。 */
			.c-compare-card-specs > div {
				justify-content: center;
				gap: 0.5rem;
			}
		}

		/* ======================================================================
		   フルオーダー専用セクション（data-page="fullorder" のときだけ有効）
		   トークンは tokens 側で青系に上書き済み。
		   ====================================================================== */
		&[data-page="fullorder"] {

			/* ----- 無料相談CTA ----- */
			.fo-consultation { margin: 2rem 0 2.5rem; }
			.fo-consultation-inner {
				background: linear-gradient(180deg, #f7faff 0%, #fff 100%);
				border: 1px solid var(--color-accent-border);
				border-radius: 14px;
				padding: 2rem 1.75rem;
				box-shadow: 0 2px 12px rgba(38, 112, 204, 0.06);

				@media (max-width: 600px) { padding: 1.5rem 1.25rem; }
			}
			.fo-consultation-head { text-align: center; margin: 0 0 1.25rem; }
			.fo-consultation-title {
				margin: 0 0 0.5rem;
				font-size: 1.4rem;
				line-height: 1.4;
				color: var(--color-text);

				@media (max-width: 600px) { font-size: 1.2rem; }
			}
			.fo-consultation-sub {
				margin: 0;
				max-width: 600px;
				margin-inline: auto;
				color: #444;
				font-size: 0.95rem;
				line-height: 1.7;

				@media (max-width: 600px) { font-size: 0.9rem; }
			}
			.fo-consultation-assurances {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				gap: 0.5rem;
				margin: 0 0 1.5rem;
				padding: 0;
				list-style: none;
			}
			.fo-consultation-pill {
				display: inline-flex;
				align-items: center;
				gap: 0.4em;
				padding: 0.4rem 0.85rem;
				background: #fff;
				border: 1px solid var(--color-accent-border);
				border-radius: 999px;
				font-size: 0.825rem;
				font-weight: 600;
				color: var(--color-accent-dark);

				i { color: var(--color-accent); font-size: 0.75rem; }
			}
			.fo-consultation-actions {
				display: grid;
				grid-template-columns: 2fr 1fr;
				gap: 0.75rem;
				max-width: 600px;
				margin: 0 auto;
				align-items: stretch;

				@media (max-width: 600px) { grid-template-columns: 1fr; gap: 0.6rem; }
			}
			.fo-consultation-cta-primary { padding-block: 1rem; font-size: 1.05rem; }
			.fo-consultation-call { display: contents; }

			/* PC：電話番号を大きく表示（ボタンより視認性優先） */
			.fo-consultation-call-pc {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.65rem;
				padding: 0.5rem 0.75rem;
				background: #fff;
				border: 1px solid var(--color-accent-border);
				border-radius: 8px;

				i {
					color: var(--color-accent);
					font-size: 1.15rem;
				}
			}
			.fo-consultation-call-pc-body { display: flex; flex-direction: column; line-height: 1.2; }
			.fo-consultation-call-number {
				font-family: 'Helvetica Neue', Arial, sans-serif;
				font-size: 1.35rem;
				font-weight: 800;
				color: var(--color-accent-dark);
				text-decoration: none;
				letter-spacing: 0.02em;
			}
			.fo-consultation-call-number:hover { text-decoration: underline; }
			.fo-consultation-call-hours { font-size: 0.72rem; color: var(--color-muted); margin-top: 0.15rem; }

			/* SP：電話ボタン表示。PC ではテキスト表示に切り替えるため非表示 */
			.fo-consultation-call-sp { display: none; }

			@media (max-width: 600px) {
				.fo-consultation-call-pc { display: none; }
				.fo-consultation-call-sp { display: inline-flex; }
			}

			/* ----- 共通ヘルパー ----- */
			.fo-accent { color: var(--color-accent-dark); }

			/* ----- 4つのパーツ解説 ----- */
			.fo-parts-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1.25rem;

				@media (max-width: 768px) { grid-template-columns: 1fr; gap: 1rem; }
			}
			.fo-parts-card {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 12px;
				padding: 1.5rem 1.25rem;
				display: flex;
				flex-direction: column;
				gap: 1rem;

				@media (max-width: 768px) { padding: 1.25rem 1rem; }
			}
			.fo-parts-card-head { display: flex; align-items: center; gap: 0.85rem; }
			.fo-parts-number {
				flex: 0 0 auto;
				width: 40px; height: 40px;
				border-radius: 50%;
				background: #fff;
				border: 2px solid var(--color-accent);
				color: var(--color-accent-dark);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.1rem;
				font-weight: 800;
				line-height: 1;
				font-family: 'Helvetica Neue', Arial, sans-serif;
			}
			.fo-parts-name-block { flex: 1; min-width: 0; }
			.fo-parts-name {
				margin: 0;
				font-size: 1.15rem;
				line-height: 1.3;
				color: var(--color-text);

				@media (max-width: 768px) { font-size: 1.05rem; }
			}
			.fo-parts-subtitle { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--color-muted); }
			.fo-parts-desc    { margin: 0; color: #444; font-size: 0.9rem; line-height: 1.7; }
			.fo-parts-options {
				display: flex;
				flex-wrap: wrap;
				gap: 0.4rem;
				margin: 0; padding: 0;
				list-style: none;
				margin-top: auto;
			}
			.fo-parts-option {
				display: inline-flex;
				padding: 0.3rem 0.7rem;
				background: var(--color-accent-soft);
				border: 1px solid var(--color-accent-border);
				border-radius: 999px;
				font-size: 0.78rem;
				font-weight: 600;
				color: var(--color-accent-dark);
			}

			/* ----- お悩み逆引きガイド ----- */
			.fo-concerns-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;

				@media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
				@media (max-width: 600px)  { grid-template-columns: 1fr; }
			}
			.fo-concern-card {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 12px;
				padding: 0;
				display: flex;
				flex-direction: column;
				overflow: hidden;
				transition: box-shadow 0.15s ease, border-color 0.15s ease;

				&:hover {
					border-color: var(--color-accent);
					box-shadow: 0 4px 14px rgba(38, 112, 204, 0.1);
				}
			}
			.fo-concern-link {
				display: flex;
				flex-direction: column;
				gap: 0.75rem;
				padding: 1.25rem 1.1rem;
				text-decoration: none;
				color: inherit;
				flex: 1;

				&:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
			}
			.fo-concern-head { display: flex; align-items: center; gap: 0.7rem; }
			.fo-concern-icon {
				flex: 0 0 auto;
				width: 38px; height: 38px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1rem;

				&--warm  { background: #fff4e6; color: #c66700; }
				&--green { background: #e8f4ec; color: #2e7d4b; }
				&--blue  { background: var(--color-accent-soft); color: var(--color-accent-dark); }
			}
			.fo-concern-title { margin: 0; font-size: 0.95rem; line-height: 1.4; color: var(--color-text); font-weight: 700; }
			.fo-concern-desc  { margin: 0; font-size: 0.78rem; line-height: 1.7; color: #555; }
			.fo-concern-spec {
				background: var(--color-accent-soft);
				border: 1px solid var(--color-accent-border);
				border-radius: 8px;
				padding: 0.6rem 0.75rem;
				margin-top: auto;
			}
			.fo-concern-spec-label {
				display: block;
				font-size: 0.7rem;
				font-weight: 700;
				color: var(--color-accent-dark);
				margin-bottom: 0.2rem;
				letter-spacing: 0.04em;
			}
			.fo-concern-spec-value {
				margin: 0;
				font-size: 0.825rem;
				line-height: 1.5;
				color: #2a4565;
				font-weight: 600;
			}
			.fo-concern-cross {
				padding: 0.65rem 1.1rem 1rem;
				border-top: 1px dashed #e6e6e6;
				font-size: 0.75rem;
				line-height: 1.6;
				color: var(--color-muted);
			}
			.fo-concern-cross-link {
				color: var(--color-accent-dark);
				font-weight: 600;
				text-decoration: underline;
				text-underline-offset: 2px;

				&:hover { color: var(--color-accent-dark); }
			}
			.fo-concern-cross-sep { color: #bbb; }

			/* ----- 価格・納期・ロット目安 ----- */
			.fo-pricing-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;

				@media (max-width: 768px) { grid-template-columns: 1fr; gap: 0.75rem; }
			}
			.fo-pricing-card {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 12px;
				padding: 1.5rem 1.25rem;
				text-align: center;
				display: flex;
				flex-direction: column;
				gap: 0.5rem;

				@media (max-width: 768px) { padding: 1.25rem 1rem; }
			}
			.fo-pricing-label {
				display: block;
				font-size: 0.825rem;
				color: var(--color-muted);
				font-weight: 600;
				letter-spacing: 0.02em;
			}
			.fo-pricing-value {
				display: block;
				font-size: 1.65rem;
				line-height: 1.2;
				font-weight: 800;
				color: var(--color-accent-dark);
				font-family: 'Helvetica Neue', Arial, sans-serif;

				@media (max-width: 768px) { font-size: 1.45rem; }
			}
			.fo-pricing-sub { display: block; font-size: 0.78rem; color: #555; line-height: 1.5; }

			/* ----- 予算別の作例 ----- */
			.fo-budgets-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1.25rem;
				align-items: stretch;

				@media (max-width: 1024px) { grid-template-columns: 1fr; gap: 1rem; }
			}
			.fo-budget-card {
				position: relative;
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 14px;
				overflow: hidden;
				display: flex;
				flex-direction: column;
				transition: box-shadow 0.15s ease, transform 0.15s ease;

				&:hover {
					box-shadow: 0 6px 18px rgba(0,0,0,0.08);
					transform: translateY(-2px);
				}
				&.is-popular {
					border: 2px solid var(--color-accent);
					box-shadow: 0 6px 20px rgba(38,112,204,0.14);

					@media (max-width: 1024px) { order: -1; }

					.fo-budget-industry {
						background: var(--color-accent-soft);
						border-color: var(--color-accent-border);
						color: var(--color-accent-dark);
					}
				}
			}
			.fo-budget-badge {
				position: absolute;
				top: -10px; right: 16px;
				z-index: 1;
				background: var(--color-accent);
				color: #fff;
				padding: 0.2rem 0.85rem;
				border-radius: 999px;
				font-size: 0.75rem;
				font-weight: 700;
				box-shadow: 0 2px 6px rgba(38,112,204,0.3);
				white-space: nowrap;
			}
			.fo-budget-link {
				display: flex;
				flex-direction: column;
				flex: 1;
				text-decoration: none;
				color: inherit;

				&:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
			}
			.fo-budget-thumb {
				position: relative;
				width: 100%;
				aspect-ratio: 16 / 10;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
				font-size: 1.1rem;
				letter-spacing: 0.05em;
			}
			.fo-budget-thumb-label {
				font-family: 'Helvetica Neue', Arial, sans-serif;
				text-shadow: 0 1px 3px rgba(0,0,0,0.1);
			}
			.fo-budget-body {
				padding: 1.25rem 1.1rem 1.35rem;
				display: flex;
				flex-direction: column;
				gap: 0.75rem;
				flex: 1;
			}
			.fo-budget-title { margin: 0; font-size: 1.1rem; line-height: 1.4; color: var(--color-text); }
			.fo-budget-price {
				display: flex;
				align-items: baseline;
				gap: 0.5rem;
				padding-bottom: 0.6rem;
				border-bottom: 1px dashed var(--color-border);
			}
			.fo-budget-price-label { font-size: 0.75rem; color: var(--color-muted); font-weight: 600; }
			.fo-budget-price-range {
				font-size: 1.4rem;
				font-weight: 800;
				color: var(--color-accent-dark);
				font-family: 'Helvetica Neue', Arial, sans-serif;
				line-height: 1.1;
			}
			.fo-budget-spec     { margin: 0; font-size: 0.85rem; line-height: 1.6; color: #444; }
			.fo-budget-industry {
				margin-top: auto;
				align-self: flex-start;
				padding: 0.3rem 0.7rem;
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 6px;
				font-size: 0.75rem;
				color: var(--color-muted);
				font-weight: 600;
			}

			/* ----- 制作事例ギャラリー ----- */
			.fo-cases-head {
				display: flex;
				flex-wrap: wrap;
				gap: 1rem;
				justify-content: space-between;
				align-items: flex-end;
				text-align: left;

				@media (max-width: 600px) { align-items: flex-start; }

				h2 { text-align: left; }
				p  { margin-left: 0; max-width: none; }
			}
			.fo-cases-head-text { flex: 1; min-width: 0; }
			.fo-cases-more {
				display: inline-flex;
				align-items: center;
				gap: 0.3em;
				color: var(--color-accent-dark);
				font-size: 0.875rem;
				font-weight: 600;
				text-decoration: none;
				padding-bottom: 0.5rem;

				&:hover { color: var(--color-accent-dark); text-decoration: underline; }
			}
			.fo-cases-filters {
				display: flex;
				flex-direction: column;
				gap: 0.85rem;
				margin-bottom: 1.25rem;
				padding: 1rem 1.25rem;
				background: var(--color-surface-soft);
				border: 1px solid var(--color-border);
				border-radius: 10px;
			}
			.fo-cases-filter-group {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 0.65rem;

				@media (max-width: 600px) {
					flex-direction: column;
					align-items: flex-start;
					gap: 0.4rem;
				}
			}
			.fo-cases-filter-label {
				font-size: 0.825rem;
				font-weight: 700;
				color: var(--color-text);
				min-width: 6em;

				@media (max-width: 600px) { min-width: 0; }
			}
			.fo-cases-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 1rem;

				@media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
				@media (max-width: 600px) { grid-template-columns: 1fr; }
			}
			.fo-case-card {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 12px;
				overflow: hidden;
				transition: box-shadow 0.15s ease, transform 0.15s ease;

				&:hover {
					box-shadow: 0 4px 14px rgba(0,0,0,0.08);
					transform: translateY(-2px);
				}
			}
			.fo-case-link {
				display: flex;
				flex-direction: column;
				text-decoration: none;
				color: inherit;

				&:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
			}
			.fo-case-thumb {
				aspect-ratio: 1 / 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 700;
				font-size: 1rem;
				letter-spacing: 0.04em;
			}
			.fo-case-thumb-label {
				font-family: 'Helvetica Neue', Arial, sans-serif;
				text-shadow: 0 1px 3px rgba(0,0,0,0.1);
			}
			.fo-case-body {
				padding: 0.85rem 1rem 1rem;
				display: flex;
				flex-direction: column;
				gap: 0.35rem;
			}
			.fo-case-industry  { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--color-text); line-height: 1.4; }
			.fo-case-spec-memo { margin: 0; font-size: 0.78rem; line-height: 1.6; color: var(--color-muted); }
			.fo-cases-empty {
				margin: 1.5rem 0 0;
				padding: 1.25rem;
				text-align: center;
				background: var(--color-surface-soft);
				border: 1px dashed var(--color-border);
				border-radius: 8px;
				color: var(--color-muted);
				font-size: 0.9rem;
			}

			/* ----- 特殊加工ギャラリー ----- */
			.fo-special-category {
				margin-bottom: 1.5rem;
				&:last-child { margin-bottom: 0; }
			}
			.fo-special-cat-label {
				display: inline-block;
				margin: 0 0 0.75rem;
				padding: 0.25rem 0.85rem;
				background: var(--color-accent-soft);
				color: var(--color-accent-dark);
				border-radius: 999px;
				font-size: 0.8rem;
				font-weight: 700;
				letter-spacing: 0.04em;
			}
			.fo-special-grid {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 0.75rem;

				@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
			}
			.fo-special-card {
				display: flex;
				flex-direction: column;
				gap: 0.25rem;
				padding: 0.85rem 1rem;
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 8px;
				min-height: 64px;
			}
			.fo-special-name { font-size: 0.875rem; font-weight: 700; color: var(--color-text); }
			.fo-special-desc { font-size: 0.7rem; color: var(--color-muted); line-height: 1.5; }

			/* ----- 制作の流れタイムライン ----- */
			.fo-flow-list { list-style: none; margin: 0; padding: 0; }
			.fo-flow-step {
				position: relative;
				display: grid;
				grid-template-columns: 56px 1fr;
				gap: 1rem;
				padding-bottom: 1.5rem;

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

				&::before {
					content: '';
					position: absolute;
					left: 27px; top: 44px;
					bottom: 0;
					width: 2px;
					background: var(--color-accent-border);

					@media (max-width: 600px) { left: 21px; top: 38px; }
				}
				&.is-tail {
					padding-bottom: 0;
					&::before { display: none; }
				}
			}
			.fo-flow-marker { display: flex; justify-content: center; }
			.fo-flow-num {
				width: 44px; height: 44px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 1.05rem;
				font-weight: 800;
				color: #fff;
				line-height: 1;
				font-family: 'Helvetica Neue', Arial, sans-serif;
				box-shadow: 0 2px 6px rgba(0,0,0,0.08);

				@media (max-width: 600px) { width: 36px; height: 36px; font-size: 0.95rem; }

				&--blue  { background: var(--color-accent); }
				&--green { background: #2e7d4b; }
			}
			.fo-flow-body {
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 10px;
				padding: 1rem 1.25rem;

				@media (max-width: 600px) { padding: 0.85rem 1rem; }
			}
			.fo-flow-step-head {
				display: flex;
				flex-wrap: wrap;
				align-items: baseline;
				gap: 0.65rem;
				margin-bottom: 0.4rem;
			}
			.fo-flow-step-title {
				margin: 0;
				font-size: 1.05rem;
				line-height: 1.4;
				color: var(--color-text);

				@media (max-width: 600px) { font-size: 0.975rem; }
			}
			.fo-flow-step-duration {
				padding: 0.15rem 0.6rem;
				background: var(--color-surface-soft);
				border: 1px solid var(--color-border);
				border-radius: 999px;
				font-size: 0.75rem;
				font-weight: 600;
				color: var(--color-muted);
			}
			.fo-flow-step-desc { margin: 0; font-size: 0.875rem; line-height: 1.7; color: #444; }

			/* ----- お客様の声 ----- */
			.fo-voices-grid {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: 1rem;

				@media (max-width: 768px) { grid-template-columns: 1fr; }
			}
			.fo-voice-card {
				margin: 0;
				background: #fff;
				border: 1px solid var(--color-border);
				border-radius: 12px;
				padding: 1.25rem 1.35rem;
				display: flex;
				flex-direction: column;
				gap: 0.6rem;

				@media (max-width: 768px) { padding: 1.1rem 1.15rem; }
			}
			.fo-voice-head {
				display: flex;
				flex-wrap: wrap;
				align-items: center;
				gap: 0.6rem;
			}
			.fo-voice-stars { display: inline-flex; gap: 0.1em; }
			.fo-voice-star {
				font-size: 0.875rem;
				color: #e0d8c8;

				&.is-filled { color: #f0b400; }
			}
			.fo-voice-meta    { font-size: 0.72rem; color: var(--color-muted); font-weight: 600; }
			.fo-voice-quote   { margin: 0; }
			.fo-voice-quote p { margin: 0; font-size: 0.925rem; line-height: 1.8; color: #333; }
			.fo-voice-company { font-size: 0.72rem; color: #999; font-style: normal; margin-top: 0.2rem; }

			/* ----- 最終CTA（青グラデ・全幅） ----- */
			.fo-final-cta {
				margin-top: 3rem;
				padding: 3.5rem 20px;
				background: linear-gradient(135deg, #185FA5 0%, #1A4A8C 100%);
				color: #fff;

				@media (max-width: 600px) { padding: 2.5rem 18px; }
			}
			.fo-final-cta-inner {
				max-width: 760px;
				margin: 0 auto;
				text-align: center;
			}
			.fo-final-cta-head { margin-bottom: 1.75rem; }
			.fo-final-cta-title {
				margin: 0 0 0.85rem;
				font-size: 1.75rem;
				line-height: 1.4;
				color: #fff;

				@media (max-width: 600px) { font-size: 1.4rem; }
			}
			.fo-final-cta-sub {
				margin: 0;
				font-size: 1rem;
				line-height: 1.8;
				color: rgba(255, 255, 255, 0.92);
				max-width: 600px;
				margin-inline: auto;

				@media (max-width: 600px) { font-size: 0.925rem; }
			}
			.fo-final-cta-actions {
				display: grid;
				grid-template-columns: 2fr 1fr;
				gap: 0.75rem;
				max-width: 560px;
				margin: 0 auto;

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

	/* ==========================================================================
	   .specs-page — 選べる仕様の紹介ページ
	   ========================================================================== */
	.specs-page {
		color: #333;
		line-height: 1.7;

		/* タブ風アンカー */
		.specs-tabs {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 0.75rem;
			margin: 0 0 3rem;

			@media (max-width: 600px) {
				grid-template-columns: repeat(2, 1fr);
				gap: 0.5rem;
				margin-bottom: 2rem;
			}
		}
		.specs-tab {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 1.1rem 0.5rem;
			background: #fff;
			border: 1px solid #e8d8c0;
			border-radius: 8px;
			color: #3d3833;
			text-decoration: none;
			transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;

			&:hover {
				border-color: var(--color-accent);
				box-shadow: 0 4px 14px rgba(224, 122, 43, 0.12);
				transform: translateY(-2px);
			}

			@media (max-width: 600px) { padding: 0.85rem 0.4rem; }
		}
		.specs-tab-icon {
			display: block;
			width: 36px;
			height: 36px;
			margin-bottom: 0.4rem;

			svg { width: 100%; height: 100%; }

			@media (max-width: 600px) { width: 30px; height: 30px; margin-bottom: 0.3rem; }
		}
		.specs-tab-label {
			font-size: 0.95rem;
			font-weight: 700;
			color: #3d3833;

			@media (max-width: 600px) { font-size: 0.875rem; }
		}

		/* セクション */
		.specs-section {
			margin: 0 0 3.5rem;
			scroll-margin-top: 1.5rem;

			@media (max-width: 600px) { margin-bottom: 2.5rem; }
		}
		.specs-section-head {
			position: relative;
			margin: 0 0 1.75rem;
			padding: 0 0 1.25rem;
			border-bottom: 1px solid #eee;
			text-align: center;

			h2 {
				font-size: 1.5rem;
				line-height: 1.4;
				margin: 0 0 0.5rem;
				color: #3d3833;
				padding: 0;
				border: 0;

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

				&::after {
					content: "";
					display: block;
					width: 40px;
					height: 3px;
					background: var(--color-accent);
					border-radius: 2px;
					margin: 0.6rem auto 0;
				}
			}
		}
		.specs-section-lead {
			margin: 0 auto;
			color: #5a4f47;
			font-size: 0.95rem;
			max-width: 720px;
		}

		/* カードグリッド */
		.specs-card-list {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.25rem;

			@media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
			@media (max-width: 600px) { grid-template-columns: 1fr; gap: 0.9rem; }
		}
		.specs-card {
			display: flex;
			flex-direction: column;
			padding: 1.1rem;
			background: #fff;
			border: 1px solid #ececec;
			border-radius: 8px;
			transition: border-color 0.15s ease, box-shadow 0.15s ease;

			&:hover { border-color: #f0d8b8; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); }

			@media (max-width: 600px) { padding: 1rem; }
		}
		.specs-card-thumb {
			position: relative;
			width: 100%;
			aspect-ratio: 4 / 3;
			background: #f7f4ef;
			border: 1px dashed #d8c8ac;
			border-radius: 6px;
			overflow: hidden;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 1rem;

			@media (max-width: 600px) { aspect-ratio: 16 / 9; margin-bottom: 0.75rem; }

			.specs-card-thumb-icon {
				width: 55%;
				height: 55%;
				display: block;

				@media (max-width: 600px) { width: 40%; height: 75%; }
			}
			img { width: 100%; height: 100%; object-fit: cover; display: block; }

			&.has-image { background: #fff; border-style: solid; border-color: #ececec; }
		}
		.specs-card-thumb-note {
			position: absolute;
			bottom: 0.4rem;
			left: 50%;
			transform: translateX(-50%);
			font-size: 0.7rem;
			color: #a08868;
			background: rgba(255, 255, 255, 0.85);
			padding: 0.1rem 0.5rem;
			border-radius: 999px;
			letter-spacing: 0.05em;
		}
		.specs-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
		.specs-card-name { font-size: 1.05rem; font-weight: 700; color: #3d3833; margin: 0 0 0.4rem; line-height: 1.4; }
		.specs-card-lead { font-size: 0.9rem; color: var(--color-accent-dark); font-weight: 600; margin: 0 0 0.55rem; line-height: 1.5; }
		.specs-card-desc {
			font-size: 0.875rem;
			line-height: 1.7;
			color: #444;
			margin: 0 0 0.85rem;
			flex: 1 1 auto;
		}
		.specs-card-link {
			align-self: flex-start;
			font-size: 0.875rem;
			color: var(--color-accent-dark);
			text-decoration: none;
			font-weight: 600;
			padding: 0.3rem 0;
			border-bottom: 1px solid transparent;
			transition: border-color 0.15s ease, color 0.15s ease;

			&:hover {
				color: var(--color-accent);
				border-bottom-color: var(--color-accent);

				span { transform: translateX(2px); }
			}
			span {
				display: inline-block;
				margin-left: 0.25rem;
				transition: transform 0.15s ease;
			}
		}

		/* CTA バナー */
		.specs-cta {
			margin: 1rem 0 3rem;
			padding: 2.25rem 1.5rem;
			background: var(--color-accent-soft);
			border: 1px solid var(--color-accent-border);
			border-radius: 8px;
			text-align: center;

			@media (max-width: 600px) { padding: 1.75rem 1rem; }
		}
		.specs-cta-title {
			font-size: 1.25rem;
			color: #3d3833;
			margin: 0 0 0.5rem;
			line-height: 1.5;
			padding: 0;
			border: 0;

			@media (max-width: 600px) { font-size: 1.1rem; }
		}
		.specs-cta-text {
			color: #5a4f47;
			margin: 0 auto 1.5rem;
			max-width: 600px;
			font-size: 0.95rem;
		}
		.specs-cta-actions {
			display: inline-flex;
			flex-wrap: wrap;
			gap: 0.75rem;
			justify-content: center;

			@media (max-width: 600px) {
				display: flex;
				flex-direction: column;
				width: 100%;
			}
		}
		.specs-cta-btn {
			display: inline-block;
			padding: 0.85rem 1.5rem;
			background: #fff;
			color: var(--color-accent-dark);
			border: 1px solid var(--color-accent);
			border-radius: 4px;
			font-weight: 700;
			text-decoration: none;
			transition: background 0.15s ease, color 0.15s ease;

			&:hover { background: var(--color-accent-soft); color: var(--color-accent-dark); }

			&--primary {
				background: var(--color-accent);
				color: #fff;
				border-color: var(--color-accent);

				&:hover { background: var(--color-accent-dark); color: #fff; }
			}

			@media (max-width: 600px) { width: 100%; }
		}
	}

	/* ==========================================================================
	   OFJ紙袋ページ固有（.onepoint-page[data-page="ofj"]）
	     - 仕様と特徴：2列グリッド（参考サイトの col-2 相当）
	     - 選べるハンドル：4列グリッド（参考サイトの col-4 相当）
	     - 「お見積もりはこちら」ボタンは flex で確実に中央配置
	   ========================================================================== */
	.onepoint-page[data-page="ofj"] {

		/* 見積もり CTA ボタンを明示的に中央配置（page-cta / spec-links 共通） */
		.page-cta {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.btn-cta { margin: 0; }
		}
		.spec-links.spec-links--single {
			display: flex;
			justify-content: center;
			grid-template-columns: none;

			.btn-spec {
				width: 100%;
				max-width: 360px;
			}
		}

		/* 仕様と特徴：既存 .guide-row を2列に並べる */
		.ofj-spec-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1.25rem 2rem;
			margin: 1.25rem 0 1.75rem;

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

			.guide-row { margin: 0; }
		}

		/* 選べるハンドル：画像上＋テキストの縦型カードを4列に並べる */
		.ofj-handle-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1.25rem;
			margin: 1.25rem 0 1.75rem;

			@media (max-width: 900px) { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 480px) { grid-template-columns: 1fr; }
		}
		.ofj-handle-card {
			display: flex;
			flex-direction: column;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			overflow: hidden;

			figure {
				margin: 0;

				img {
					display: block;
					width: 100%;
					aspect-ratio: 4 / 3;
					object-fit: cover;
					background: #fafafa;
				}
			}
			h3 {
				margin: 0.85rem 0.9rem 0.4rem;
				font-size: 1rem;
				font-weight: 700;
				color: var(--color-text);
			}
			p {
				margin: 0 0.9rem 0.85rem;
				font-size: 0.85rem;
				line-height: 1.75;
				color: #555;
			}
			.ofj-handle-swatch {
				margin: auto 0.9rem 1rem;
				font-size: 0.8125rem;
				font-weight: 600;
				text-align: center;
				color: var(--color-accent-dark);
				text-decoration: underline;

				&:hover { color: var(--color-accent); }
			}
		}
	}

	/* ==========================================================================
	   .about-page — ご利用ガイド（contents/about.php）
	   ========================================================================== */
	.about-page {
		.container { text-align: left; }

		> .container > section {
			margin: 6rem 0;

			&:first-child { margin-top: 2rem; }

			@media (max-width: 600px) { margin: 4rem 0; }
		}

		/* ----- できること（6カード）----- */
		.og-services-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;

			@media (max-width: 1024px) { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 600px)  { grid-template-columns: 1fr; }
		}
		.og-service-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.25rem;
			text-align: center;

			i {
				font-size: 2rem;
				color: var(--color-accent);
				margin-bottom: 0.75rem;
			}
			h3 {
				font-size: 1rem;
				color: var(--color-secondary);
				margin: 0 0 0.5rem;
				line-height: 1.4;
			}
			p {
				font-size: 0.85rem;
				color: #444;
				line-height: 1.7;
				margin: 0;
				text-align: left;
			}
		}

		/* ----- 3プラン比較 ----- */
		.og-plans-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.25rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.og-plan-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
				border-color: var(--color-accent-border);
			}
		}
		.og-plan-thumb {
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			display: flex;
			align-items: center;
			justify-content: center;

			img { max-width: 80%; max-height: 80%; object-fit: contain; }
		}
		.og-plan-body {
			padding: 1.25rem;
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			flex: 1;
		}
		.og-plan-name {
			font-size: 1.1rem;
			color: var(--color-secondary);
			margin: 0;
		}
		.og-plan-tagline {
			font-size: 0.85rem;
			color: var(--color-muted);
			margin: 0;
			line-height: 1.6;
		}
		.og-plan-meta {
			margin: 0;
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 0.25rem 0.75rem;
			font-size: 0.82rem;

			dt {
				color: var(--color-muted);
				font-weight: 600;
				white-space: nowrap;
			}
			dd { margin: 0; color: #333; }
		}
		.og-plan-actions {
			margin-top: auto;

			.c-btn { width: 100%; }
		}

		/* ----- ご注文の流れ ----- */
		.og-flow-steps {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
		.og-flow-step {
			display: grid;
			grid-template-columns: 120px 1fr;
			gap: 1.25rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			padding: 1.25rem;
			align-items: start;

			@media (max-width: 600px) {
				grid-template-columns: 1fr;
				gap: 0.5rem;
			}
		}
		.og-flow-step-num {
			background: var(--color-accent);
			color: #fff;
			text-align: center;
			padding: 0.7rem 0.5rem;
			border-radius: 6px;
			font-size: 0.9rem;
			font-weight: 700;
			letter-spacing: 0.06em;
		}
		.og-flow-step-body {
			h3 {
				font-size: 1.05rem;
				color: var(--color-secondary);
				margin: 0 0 0.5rem;
			}
			p {
				font-size: 0.9rem;
				color: #444;
				line-height: 1.75;
				margin: 0;
			}
		}

		/* ----- データ入稿 ----- */
		.og-data-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.og-data-grid .c-info-box {
			h3 { font-size: 1rem; color: var(--color-secondary); margin: 0 0 0.5rem; }
			ul {
				margin: 0;
				padding-left: 1.25rem;
				font-size: 0.85rem;
				line-height: 1.8;
				color: #444;
			}
		}

		/* ----- CTA ----- */
		.og-cta .c-info-box {
			h3 { margin: 0 0 0.5rem; color: var(--color-secondary); }
			p  { margin: 0; font-size: 0.9rem; line-height: 1.7; color: #444; }
		}
		.og-cta-actions {
			display: flex;
			gap: 0.5rem;
			flex-shrink: 0;
			flex-wrap: wrap;

			@media (max-width: 768px) { width: 100%; }
		}
	}

	/* ==========================================================================
	   .orderguide-page / .fo-orderguide — フルオーダー オーダーステップ紹介
	   (contents/orderguide.php / fullorder ページ内埋め込み partial) —
	   STEP1〜4 の選択肢を順番に紹介する縦長ガイド
	   ========================================================================== */
	:is(.orderguide-page, .fo-orderguide) {
		.container { text-align: left; }

		> .container > section {
			margin: 5rem 0;

			&:first-child { margin-top: 2rem; }

			@media (max-width: 600px) { margin: 3.5rem 0; }
		}

		.og-intro-lead {
			margin: 0 0 1.5rem;
			font-size: 0.95rem;
			line-height: 1.85;
			color: #444;
		}
		.og-step-nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 0.5rem;

			@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 480px) { grid-template-columns: 1fr; }
		}
		.og-step-nav a {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 0.5rem;
			padding: 0.85rem 1rem;
			background: var(--color-accent-soft);
			border: 1px solid var(--color-accent-border);
			border-radius: 8px;
			text-decoration: none;
			color: var(--color-text);
			font-size: 0.875rem;
			line-height: 1.4;
			transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;

			&:hover {
				background: color-mix(in srgb, var(--color-accent) 14%, white);
				border-color: var(--color-accent);
				transform: translateY(-1px);
			}

			i {
				color: var(--color-accent);
				font-size: 0.75rem;
				flex-shrink: 0;
			}
		}
		.og-step-nav-num {
			font-size: 0.7rem;
			font-weight: 700;
			letter-spacing: 0.06em;
			color: var(--color-accent-dark);
			margin-right: 0.4em;
		}
		.og-step-nav-label {
			flex: 1;
			font-weight: 600;
		}

		.og-step { scroll-margin-top: 1.5rem; }

		/* fullorder ページ内に埋め込んだ場合、各 STEP セクションの縦間隔を確保
		   （orderguide.php では `> .container > section` の margin で取れる） */
		&.fo-orderguide > .og-step { margin-top: 3.5rem; }
		&.fo-orderguide > .og-step-nav { margin: 1.5rem 0 2.5rem; }
		.og-step-head {
			margin-bottom: 1.5rem;

			h2, h3 {
				margin: 0.25rem 0 0.5rem;
				font-size: 1.4rem;
				color: var(--color-secondary);
				line-height: 1.4;
			}
			p {
				margin: 0;
				font-size: 0.9rem;
				color: #555;
				line-height: 1.8;
			}
		}
		.og-step-num {
			display: inline-block;
			background: var(--color-accent);
			color: #fff;
			font-size: 0.75rem;
			font-weight: 700;
			letter-spacing: 0.08em;
			padding: 0.3rem 0.7rem;
			border-radius: 4px;
		}

		.og-step-grid {
			display: grid;
			gap: 1rem;
		}
		.og-step-grid--2col { grid-template-columns: repeat(2, 1fr); }
		.og-step-grid--3col { grid-template-columns: repeat(3, 1fr); }
		.og-step-grid--4col { grid-template-columns: repeat(4, 1fr); }

		@media (max-width: 1024px) {
			.og-step-grid--3col,
			.og-step-grid--4col { grid-template-columns: repeat(2, 1fr); }
		}
		@media (max-width: 600px) {
			.og-step-grid--2col,
			.og-step-grid--3col,
			.og-step-grid--4col { grid-template-columns: 1fr; }
		}

		.og-choice-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1rem;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
		}
		.og-choice-thumb {
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			img { max-width: 100%; max-height: 100%; object-fit: cover; }
		}
		.og-choice-name {
			margin: 0.3rem 0 0;
			font-size: 1rem;
			color: var(--color-secondary);
			line-height: 1.4;
		}
		.og-choice-desc {
			margin: 0;
			font-size: 0.85rem;
			line-height: 1.75;
			color: #444;
		}
		.og-choice-card--wide {
			@media (min-width: 769px) {
				display: grid;
				grid-template-columns: 200px 1fr;
				grid-template-rows: auto auto;
				gap: 0.4rem 1rem;
				padding: 1.25rem;

				.og-choice-thumb { grid-row: 1 / span 2; aspect-ratio: 1 / 1; }
				.og-choice-name  { grid-column: 2; }
				.og-choice-desc  { grid-column: 2; }
			}
		}

		.og-color-block { margin-top: 1.25rem; }
		.og-color-block:first-of-type { margin-top: 0; }
		.og-color-block-head {
			margin-bottom: 0.75rem;

			h3 {
				margin: 0 0 0.25rem;
				font-size: 1rem;
				color: var(--color-secondary);
			}
		}
		.og-color-note {
			margin: 0.25rem 0 0;
			font-size: 0.8rem;
			color: #c33;
			line-height: 1.6;
		}
		.og-color-grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 0.75rem;

			@media (max-width: 768px) { grid-template-columns: repeat(4, 1fr); }
			@media (max-width: 480px) { grid-template-columns: repeat(3, 1fr); }
		}
		.og-color-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4rem;
		}
		.og-color-swatch {
			width: 100%;
			aspect-ratio: 1 / 1;
			border-radius: 6px;
			border: 1px solid var(--color-border);
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			img { width: 100%; height: 100%; object-fit: cover; }
		}
		.og-color-swatch--clear {
			background-color: #fff;
			background-image:
				linear-gradient(45deg, #ddd 25%, transparent 25%),
				linear-gradient(-45deg, #ddd 25%, transparent 25%),
				linear-gradient(45deg, transparent 75%, #ddd 75%),
				linear-gradient(-45deg, transparent 75%, #ddd 75%);
			background-size: 14px 14px;
			background-position: 0 0, 0 7px, 7px -7px, -7px 0;
		}
		.og-color-name {
			font-size: 0.8rem;
			font-weight: 600;
			color: #333;
		}

		.og-shape-block {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.25rem;
			margin-top: 1rem;

			&:first-of-type { margin-top: 0; }
		}
		.og-shape-head {
			display: grid;
			grid-template-columns: 180px 1fr;
			gap: 1.25rem;
			align-items: start;
			margin-bottom: 1rem;

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

			h3 {
				margin: 0 0 0.5rem;
				font-size: 1.05rem;
				color: var(--color-secondary);
			}
			p {
				margin: 0;
				font-size: 0.875rem;
				line-height: 1.75;
				color: #444;
			}
		}
		.og-shape-thumb {
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			overflow: hidden;

			img { max-width: 90%; max-height: 90%; object-fit: contain; }
		}

		.og-size-block {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.25rem;
			margin-top: 1rem;

			&:first-of-type { margin-top: 0; }
		}
		.og-size-block-head {
			margin-bottom: 0.75rem;

			h3, h4 {
				margin: 0 0 0.25rem;
				font-size: 1.05rem;
				color: var(--color-secondary);
			}
			p {
				margin: 0;
				font-size: 0.85rem;
				color: #555;
				line-height: 1.6;
			}
		}

		.og-size-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.875rem;

			th, td {
				padding: 0.55rem 0.75rem;
				border: 1px solid var(--color-border-soft);
				text-align: left;
			}
			thead th {
				background: var(--color-accent-soft);
				color: var(--color-accent-dark);
				font-weight: 700;
				font-size: 0.8rem;
			}
			tbody th {
				background: #fafafa;
				font-weight: 600;
				color: #333;
				white-space: nowrap;
			}
			tbody td { color: #444; }
		}
		.og-size-type {
			display: inline-block;
			padding: 0.1rem 0.45rem;
			margin-right: 0.4rem;
			border-radius: 3px;
			font-size: 0.7rem;
			font-weight: 700;
			color: #fff;
			letter-spacing: 0.04em;
			vertical-align: middle;
		}
		.og-size-type--tate   { background: #2670cc; }
		.og-size-type--yoko   { background: #e0682b; }
		.og-size-type--square { background: #6b3aa7; }

		.og-step-footnote {
			margin: 1rem 0 0;
			font-size: 0.85rem;
			text-align: right;

			a {
				color: var(--color-accent-dark);
				font-weight: 600;
				text-decoration: none;
				border-bottom: 1px solid transparent;
				transition: border-color 0.15s ease;

				&:hover { border-bottom-color: var(--color-accent); }
			}
		}
		.og-step-note {
			margin: 0.5rem 0 0;
			text-align: right;
			font-size: 0.75rem;
			color: var(--color-muted);
		}

		.og-cta .c-info-box {
			h3 { margin: 0 0 0.5rem; color: var(--color-secondary); }
			p  { margin: 0; font-size: 0.9rem; line-height: 1.7; color: #444; }
		}
		.og-cta-actions {
			display: flex;
			gap: 0.5rem;
			flex-shrink: 0;
			flex-wrap: wrap;

			@media (max-width: 768px) { width: 100%; }
		}
	}

}