/* =============================================================================
   08-nonwoven.css
   不織布商品ページ固有のスタイル集約：
     .standard-page (data-page="nb-list")  既製品不織布バッグ一覧（contents/list.php）
     .horei-page                          保冷不織布バッグ（contents/horei.php）— 今後実装
     .fullorder-page                      フルオーダー不織布バッグ（contents/fullorder.php）— 今後実装
     .nb-shape-page                       形状別（hirafukuro / kakuzoko / funazoko / teana / shoulder）— 今後実装

   ※ 共通コンポーネント（.c-hero / .c-topbar / .c-section-head / .c-btn 等）は
      親テーマの 05-components.css を流用する。
   ============================================================================= */

@layer pages {

	/* ==========================================================================
	   ページ共通：container 上書きとセクション縦余白
	   ========================================================================== */
	.standard-page,
	.horei-page,
	.fullorder-page,
	.fullfbag-page,
	.nb-shape-page {
		.container { text-align: left; }

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

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

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

	/* ==========================================================================
	   .standard-page[data-page="nb-list"] — 既製品不織布バッグ一覧（list.php）
	   ========================================================================== */
	.standard-page {

		/* ----- フィルター・ソートツールバー ----- */
		.nb-list-toolbar { margin-top: 1rem; }

		.nb-list-filter {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;
			background: var(--color-surface-soft);
			border: 1px solid var(--color-border-soft);
			border-radius: 8px;
			padding: 1.25rem;
			margin-top: 1rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; gap: 0.75rem; padding: 1rem; }
		}
		.nb-list-filter-group {
			display: flex;
			flex-direction: column;
			gap: 0.4rem;

			label {
				font-size: 0.8rem;
				font-weight: 600;
				color: #555;
				letter-spacing: 0.04em;
			}
			select {
				padding: 0.55rem 0.75rem;
				border: 1px solid var(--color-border);
				border-radius: 6px;
				background: #fff;
				font-size: 0.9rem;
				font-family: inherit;
				cursor: pointer;
				appearance: auto;

				&:focus {
					outline: 2px solid var(--color-accent);
					outline-offset: 1px;
				}
			}
		}

		.nb-list-mock-notice {
			margin: 0.75rem 0 0;
			padding: 0.6rem 0.85rem;
			background: #fff8e6;
			border: 1px dashed #e0c989;
			border-radius: 6px;
			color: #7a5a0e;

			small { font-size: 0.78rem; line-height: 1.6; }
			code { background: rgba(0, 0, 0, 0.06); padding: 0 4px; border-radius: 3px; font-size: 0.82em; }
		}

		/* ----- 結果ヘッダ ----- */
		.nb-list-results-head {
			margin-bottom: 1rem;

			h3 {
				margin: 0;
				font-size: 1rem;
				color: #444;
				font-weight: 600;
			}
			.nb-list-count {
				color: var(--color-accent-dark);
				font-size: 1.1em;
				margin: 0 0.1em;
			}
		}

		.nb-list-empty {
			text-align: center;
			padding: 3rem 1rem;
			color: var(--color-muted);
			background: var(--color-surface-soft);
			border-radius: 8px;
		}

		/* ----- カードグリッド（PC4カラム → タブレット3 → スマホ2 → 極小1）-----
		   ※ 5カラムにしたい場合は最初の repeat(4,...) を repeat(5,...) に変えるだけ。
		      ただし価格表5列が窮屈になるため、4カラムを推奨。 */
		.nb-list-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;

			@media (max-width: 1024px) { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
			@media (max-width: 768px)  { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
			@media (max-width: 480px)  { grid-template-columns: 1fr; }
		}

		.nb-list-card {
			position: relative;
			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 {
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
				border-color: var(--color-accent-border);
				transform: translateY(-2px);
			}
			&.is-top {
				border-color: var(--color-accent);
				box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 15%, transparent);
			}
		}

		.nb-list-card-thumb {
			display: block;
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				display: block;
				transition: transform 0.4s ease;
			}
			&:hover img { transform: scale(1.04); }
		}

		.nb-list-card-body {
			padding: 0.85rem;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			flex: 1;
		}

		.nb-list-card-name {
			margin: 0;
			font-size: 0.92rem;
			line-height: 1.4;

			a {
				color: var(--color-text);
				text-decoration: none;

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

		.nb-list-card-meta {
			margin: 0;
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 0.15rem 0.5rem;
			font-size: 0.75rem;
			color: #555;

			dt {
				color: var(--color-muted);
				font-weight: 600;
				white-space: nowrap;
			}
			dd { margin: 0; }
		}

		.nb-list-card-prices {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.7rem;
			margin-top: 0.25rem;
			table-layout: fixed;

			th, td {
				padding: 0.3rem 0.15rem;
				text-align: center;
				border: 1px solid var(--color-border-soft);
				overflow: hidden;
				text-overflow: ellipsis;
			}
			th {
				background: var(--color-surface-soft);
				font-weight: 600;
				color: #666;
				font-size: 0.65rem;
			}
			td {
				color: #333;
				font-weight: 600;

				&.is-highlight {
					background: color-mix(in srgb, var(--color-accent) 8%, white);
					color: var(--color-accent-dark);
				}
			}
		}

		.nb-list-card-actions {
			display: flex;
			flex-direction: column;
			gap: 0.4rem;
			margin-top: auto;

			.c-btn {
				font-size: 0.78rem;
				padding: 0.6rem 0.6rem;
				white-space: nowrap;
				border-radius: 6px;
				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
				transition: transform 0.2s ease, box-shadow 0.2s ease,
				            background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;

				&:hover:not(:disabled) {
					transform: translateY(-1px);
					box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				}
				&:active:not(:disabled) {
					transform: translateY(0);
					box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
				}
			}

			/* 詳細を見る／お見積もり — どちらも同じレベル感の控えめスタイルで揃える。
			   違いは矢印アニメ（プライマリのみ）のマイクロインタラクションだけ。 */
			.c-btn--primary,
			.c-btn--secondary {
				background: var(--color-surface);
				color: var(--color-accent-dark);
				border-color: var(--color-accent-border);
				font-weight: 600;

				&:hover:not(:disabled) {
					background: var(--color-accent);
					border-color: var(--color-accent);
					color: #fff;
				}
			}

			/* 詳細を見る — 矢印を右にスライドさせて遷移を示唆 */
			.c-btn--primary {
				span[aria-hidden="true"] {
					display: inline-block;
					margin-left: 0.3em;
					transition: transform 0.25s ease;
				}
				&:hover span[aria-hidden="true"] {
					transform: translateX(3px);
				}
			}
		}
	}

	/* ==========================================================================
	   .horei-page — 保冷不織布バッグ（contents/horei.php）
	   ========================================================================== */
	.horei-page {

		/* ----- 保冷バッグの特徴（4カード）----- */
		.horei-features-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; }
		}
		.horei-feature-card {
			text-align: center;
			padding: 1.5rem 1rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;

			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;
				line-height: 1.7;
				color: #444;
				margin: 0;
				text-align: left;
			}
		}

		/* ----- フィルター（並び順のみ）----- */
		.horei-list-filter {
			display: flex;
			justify-content: flex-end;
			gap: 0.75rem;
			margin: 1rem 0 0.5rem;

			@media (max-width: 600px) { justify-content: stretch; }
		}
		.horei-list-filter-group {
			display: flex;
			align-items: center;
			gap: 0.5rem;

			label {
				font-size: 0.85rem;
				font-weight: 600;
				color: #555;
				white-space: nowrap;
			}
			select {
				padding: 0.5rem 0.75rem;
				border: 1px solid var(--color-border);
				border-radius: 6px;
				background: #fff;
				font-size: 0.85rem;
				font-family: inherit;
				cursor: pointer;
				appearance: auto;

				&:focus {
					outline: 2px solid var(--color-accent);
					outline-offset: 1px;
				}
			}

			@media (max-width: 600px) { flex: 1; }
		}

		.horei-mock-notice {
			margin: 0.75rem 0;
			padding: 0.6rem 0.85rem;
			background: #fff8e6;
			border: 1px dashed #e0c989;
			border-radius: 6px;
			color: #7a5a0e;

			small { font-size: 0.78rem; line-height: 1.6; }
			code { background: rgba(0, 0, 0, 0.06); padding: 0 4px; border-radius: 3px; font-size: 0.82em; }
		}

		.horei-empty {
			text-align: center;
			padding: 3rem 1rem;
			color: var(--color-muted);
			background: var(--color-surface-soft);
			border-radius: 8px;
		}

		/* ----- 商品カードグリッド ----- */
		.horei-product-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;
			margin-top: 1rem;

			@media (max-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
			@media (max-width: 768px)  { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
			@media (max-width: 480px)  { grid-template-columns: 1fr; }
		}

		.horei-product-card {
			position: relative;
			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 {
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
				border-color: var(--color-accent-border);
				transform: translateY(-2px);
			}
		}

		.horei-product-thumb {
			display: block;
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				display: block;
				transition: transform 0.4s ease;
			}
			&:hover img { transform: scale(1.04); }
		}

		.horei-product-body {
			padding: 0.85rem;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			flex: 1;
		}

		.horei-product-name {
			margin: 0;
			font-size: 0.92rem;
			line-height: 1.4;

			a {
				color: var(--color-text);
				text-decoration: none;

				&:hover { color: var(--color-accent-dark); text-decoration: underline; }
			}
		}
		.horei-product-size {
			display: block;
			font-size: 0.72rem;
			color: var(--color-muted);
			font-weight: 400;
			margin-top: 0.25rem;
		}

		.horei-product-price {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			padding: 0.4rem 0;
			border-top: 1px solid var(--color-border-soft);
			border-bottom: 1px solid var(--color-border-soft);
			gap: 0.5rem;

			.horei-product-price-label {
				font-size: 0.7rem;
				color: var(--color-muted);
			}
			.horei-product-price-value {
				font-size: 0.95rem;
				font-weight: 700;
				color: var(--color-accent-dark);
				white-space: nowrap;
			}
		}

		.horei-product-actions {
			display: flex;
			flex-direction: column;
			gap: 0.35rem;
			margin-top: auto;

			.c-btn {
				font-size: 0.78rem;
				padding: 0.55rem 0.5rem;
				border-radius: 6px;
				white-space: nowrap;
			}

			.c-btn--primary,
			.c-btn--secondary {
				background: var(--color-surface);
				color: var(--color-accent-dark);
				border-color: var(--color-accent-border);
				font-weight: 600;

				&:hover:not(:disabled) {
					background: var(--color-accent);
					border-color: var(--color-accent);
					color: #fff;
				}
			}
		}

		/* ----- おすすめ形状（3カード）----- */
		.horei-shapes-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.5rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.horei-shape-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.25rem;
			text-align: center;

			h3 {
				font-size: 1.05rem;
				color: var(--color-secondary);
				margin: 0.75rem 0 0.5rem;
			}
			p {
				font-size: 0.85rem;
				line-height: 1.75;
				color: #444;
				margin: 0;
				text-align: left;
			}
		}
		.horei-shape-image {
			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: 80%;
				max-height: 80%;
				object-fit: contain;
			}
		}

		/* ----- 用途・利用シーン（6カード）----- */
		.horei-scenes-list {
			list-style: none;
			padding: 0;
			margin: 0;
			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; }
		}
		.horei-scene-item {
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			padding: 1.25rem;
			background: var(--color-surface-soft);
			border-radius: 8px;
			border-left: 4px solid var(--color-accent);

			i {
				font-size: 1.5rem;
				color: var(--color-accent);
			}
			h3 {
				font-size: 1rem;
				color: var(--color-secondary);
				margin: 0;
				line-height: 1.4;
			}
			p {
				font-size: 0.85rem;
				line-height: 1.7;
				color: #444;
				margin: 0;
			}
		}
	}

	/* ==========================================================================
	   .fullorder-page — フルオーダー不織布バッグ（contents/fullorder.php）
	   ========================================================================== */
	.fullorder-page {

		/* ----- こんな方にお勧めです（3カード）----- */
		.fo-recommend-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.25rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.fo-recommend-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.5rem 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.6rem;
				line-height: 1.45;
			}
			p {
				font-size: 0.85rem;
				line-height: 1.75;
				color: #444;
				margin: 0;
				text-align: left;
			}
		}

		/* ----- オーダーガイド 4ステップ ----- */
		.fo-guide-step {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			padding: 1.75rem;
			margin-bottom: 1.5rem;
			position: relative;

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

		.fo-guide-step-head {
			text-align: center;
			margin-bottom: 1.5rem;
			padding-bottom: 1rem;
			border-bottom: 1px dashed var(--color-border);

			h3 {
				font-size: 1.3rem;
				color: var(--color-text);
				margin: 0.5rem 0 0.5rem;
			}
			p {
				font-size: 0.9rem;
				color: var(--color-muted);
				margin: 0;
				line-height: 1.7;
			}
		}
		.fo-guide-step-num {
			display: inline-block;
			background: var(--color-accent);
			color: #fff;
			font-size: 0.8rem;
			font-weight: 700;
			padding: 0.3rem 0.85rem;
			border-radius: 999px;
			letter-spacing: 0.08em;
		}

		.fo-guide-cta {
			text-align: center;
			margin-top: 1.5rem;

			.c-btn { font-size: 1rem; padding: 0.85rem 2.5rem; }
		}

		/* ----- STEP1 形状（6カード）----- */
		.fo-shapes {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
			@media (max-width: 480px) { grid-template-columns: 1fr; }
		}
		.fo-shape-card {
			background: var(--color-surface-soft);
			border-radius: 8px;
			padding: 1rem;
			text-align: center;

			h4 {
				font-size: 0.95rem;
				color: var(--color-secondary);
				margin: 0.75rem 0 0.4rem;
			}
			p {
				font-size: 0.78rem;
				line-height: 1.6;
				color: #555;
				margin: 0;
				text-align: left;
			}
		}
		.fo-shape-thumb {
			aspect-ratio: 4 / 3;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 6px;
			overflow: hidden;

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

		/* ----- STEP2 生地色（12色）----- */
		.fo-colors {
			list-style: none;
			padding: 0;
			margin: 0;
			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); }
		}
		.fo-color-chip {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 0.4rem;
		}
		.fo-color-swatch {
			width: 48px;
			height: 48px;
			border-radius: 50%;
			box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.08);
		}
		.fo-color-name {
			font-size: 0.78rem;
			color: #555;
			font-weight: 600;
		}
		.fo-color-note {
			margin: 1rem 0 0;
			font-size: 0.78rem;
			color: var(--color-muted);
			line-height: 1.7;
			text-align: center;
		}

		/* ----- STEP3 印刷色数（4カード）----- */
		.fo-prints {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.fo-print-card {
			background: var(--color-surface-soft);
			border-radius: 8px;
			padding: 1rem;
			text-align: center;

			h4 {
				font-size: 0.95rem;
				color: var(--color-secondary);
				margin: 0.5rem 0 0.4rem;
			}
			p {
				font-size: 0.78rem;
				line-height: 1.6;
				color: #555;
				margin: 0;
			}
		}
		.fo-print-thumb {
			aspect-ratio: 4 / 3;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 6px;
			overflow: hidden;

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

		/* ----- STEP4 オプション（4カード）----- */
		.fo-options {
			list-style: none;
			padding: 0;
			margin: 0;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: repeat(2, 1fr); }
		}
		.fo-option-card {
			background: var(--color-surface-soft);
			border-radius: 8px;
			padding: 1rem;
			text-align: center;

			h4 {
				font-size: 0.95rem;
				color: var(--color-secondary);
				margin: 0.5rem 0 0.4rem;
			}
			p {
				font-size: 0.78rem;
				line-height: 1.6;
				color: #555;
				margin: 0;
			}
		}
		.fo-option-thumb {
			aspect-ratio: 4 / 3;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			border-radius: 6px;
			overflow: hidden;

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

		/* ----- 制作事例ギャラリー ----- */
		.fo-cases-grid {
			list-style: none;
			padding: 0;
			margin: 0 0 1.5rem;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 1rem;

			@media (max-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
			@media (max-width: 768px)  { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
			@media (max-width: 480px)  { grid-template-columns: 1fr; }
		}
		.fo-case-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}
		.fo-case-thumb {
			aspect-ratio: 1 / 1;
			background: var(--color-surface-soft);
			overflow: hidden;
			display: block;

			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: transform 0.4s ease;
			}
			&:hover img { transform: scale(1.05); }
		}
		.fo-case-body {
			padding: 0.75rem;
			display: flex;
			flex-direction: column;
			gap: 0.5rem;
			flex: 1;
		}
		.fo-case-meta {
			font-size: 0.75rem;
			line-height: 1.6;
			color: #555;
			margin: 0;
			flex: 1;
		}
		.fo-case-actions {
			display: flex;
			flex-direction: column;
			gap: 0.3rem;
			margin-top: auto;

			.c-btn {
				font-size: 0.75rem;
				padding: 0.5rem 0.4rem;
				border-radius: 6px;
			}
			.c-btn--primary,
			.c-btn--secondary {
				background: var(--color-surface);
				color: var(--color-accent-dark);
				border-color: var(--color-accent-border);
				font-weight: 600;

				&:hover:not(:disabled) {
					background: var(--color-accent);
					border-color: var(--color-accent);
					color: #fff;
				}
			}
		}
		.fo-cases-empty {
			text-align: center;
			color: var(--color-muted);
			padding: 3rem 0;
		}

		/* ----- 参考価格目安 ----- */
		.fo-pricing-wrap { overflow-x: auto; }
		.fo-pricing-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.88rem;
			min-width: 600px;

			th, td {
				padding: 0.75rem 0.6rem;
				border: 1px solid var(--color-border);
				text-align: center;
			}
			thead th {
				background: var(--color-accent);
				color: #fff;
				font-weight: 700;
				font-size: 0.82rem;
			}
			tbody th {
				background: var(--color-surface-soft);
				font-weight: 600;
				color: #444;
				text-align: left;
				white-space: nowrap;
			}
			td {
				color: #333;

				&.is-highlight {
					background: color-mix(in srgb, var(--color-accent) 8%, white);
					color: var(--color-accent-dark);
					font-weight: 700;
				}
			}
		}
		.fo-pricing-note {
			margin: 0.75rem 0 0;
			font-size: 0.8rem;
			color: var(--color-muted);
			line-height: 1.7;
		}
	}

	/* ==========================================================================
	   ページ共通：container 上書きとセクション縦余白（拡張）
	   ========================================================================== */
	.price-page,
	.specs-page,
	.faq-page,
	.about-page {
		.container { text-align: left; }

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

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

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

	/* ==========================================================================
	   .price-page — 参考価格例（contents/price.php）
	   ========================================================================== */
	.price-page {

		.price-card {
			display: grid;
			grid-template-columns: 1fr 1.5fr;
			gap: 1.5rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.5rem;

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

		.price-spec-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.85rem;

			th, td {
				padding: 0.55rem 0.6rem;
				border-bottom: 1px solid var(--color-border-soft);
				text-align: left;
				vertical-align: top;
			}
			th {
				width: 35%;
				color: #555;
				background: var(--color-surface-soft);
				font-weight: 600;
				white-space: nowrap;
			}
		}

		.price-lot-table {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.9rem;

			th, td {
				padding: 0.7rem 0.5rem;
				border: 1px solid var(--color-border-soft);
				text-align: center;
			}
			thead th {
				background: var(--color-accent);
				color: #fff;
				font-weight: 700;
				font-size: 0.85rem;
			}
			tbody th {
				background: var(--color-surface-soft);
				font-weight: 600;
				color: #444;
				text-align: left;
				white-space: nowrap;
			}
			tbody tr.is-even { background: rgba(0, 0, 0, 0.02); }
			tbody tr.is-highlight {
				background: color-mix(in srgb, var(--color-accent) 10%, white);

				td { color: var(--color-accent-dark); font-weight: 700; }
			}
		}

		.price-note {
			margin: 1rem 0 0;
			font-size: 0.78rem;
			color: var(--color-muted);
			line-height: 1.7;
		}

		.section-footer {
			text-align: center;
			margin-top: 1rem;
			display: flex;
			justify-content: center;
			gap: 0.75rem;
			flex-wrap: wrap;
		}
	}

	/* .specs-page の共通スタイルは jamble-base/css/05-components.css に移動しました。
	   不織布サイト固有の上書きが必要になったらここに追加してください。 */

	/* ==========================================================================
	   .faq-page — よくあるご質問ハブ（contents/faq.php）
	   ========================================================================== */
	.faq-page {

		/* ----- カテゴリー3カード ----- */
		.faq-cats-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.faq-cat-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 1.5rem 1.25rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			text-decoration: none;
			color: inherit;
			gap: 0.5rem;
			transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
				border-color: var(--color-accent);
			}
			i {
				font-size: 1.8rem;
				color: var(--color-accent);
				margin-bottom: 0.25rem;
			}
			h3 {
				font-size: 1.05rem;
				color: var(--color-secondary);
				margin: 0;
			}
			p {
				font-size: 0.82rem;
				color: var(--color-muted);
				margin: 0;
				line-height: 1.6;
			}
			.faq-cat-count {
				margin-top: 0.5rem;
				font-size: 0.75rem;
				font-weight: 700;
				color: var(--color-accent-dark);
				background: var(--color-accent-soft);
				padding: 0.2rem 0.7rem;
				border-radius: 999px;
			}
		}

		/* ----- 質問リスト ----- */
		.faq-list-section { scroll-margin-top: 20px; }
		.faq-list-section .c-section-head h2 i {
			color: var(--color-accent);
			margin-right: 0.4em;
		}
		.faq-list {
			list-style: none;
			margin: 0;
			padding: 0;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			overflow: hidden;
		}
		.faq-list-item {
			border-bottom: 1px solid var(--color-border-soft);

			&:last-child { border-bottom: 0; }
		}
		.faq-list-item a {
			display: flex;
			align-items: baseline;
			gap: 0.5rem;
			padding: 0.9rem 1.25rem;
			text-decoration: none;
			color: var(--color-text);
			line-height: 1.6;
			transition: background-color 0.15s ease, color 0.15s ease;

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

			i {
				color: var(--color-accent);
				font-size: 0.75rem;
				flex-shrink: 0;
				transform: translateY(2px);
			}
		}
		.faq-list-q {
			color: var(--color-accent-dark);
			font-weight: 700;
			flex-shrink: 0;
		}
		.faq-list-text {
			font-size: 0.92rem;
			flex: 1;
		}

		/* ----- 個別お問い合わせCTA ----- */
		.faq-contact-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; }
		}
		.faq-contact-actions { flex-shrink: 0; }
	}

	/* ==========================================================================
	   .about-page — ご利用ガイド（contents/about.php）
	   ========================================================================== */
	.about-page {

		/* ----- できること（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 — フルオーダー オーダーステップ紹介
	   (contents/orderguide.php) — STEP1〜5 の選択肢を順番に紹介する縦長ガイド
	   ========================================================================== */
	.orderguide-page {
		.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; }
		.og-step-head {
			margin-bottom: 1.5rem;

			h2 {
				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 {
				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);
		}

		/* ----- 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%; }
		}
	}

	/* ==========================================================================
	   .faq-detail-page — FAQ サブカテゴリー
	     (contents/faq-product.php / faq-order.php / faq-design.php)
	   ========================================================================== */
	.faq-detail-page {
		.container { text-align: left; }

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

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

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

		/* ----- 質問ナビ（アンカーリスト）----- */
		.faq-detail-nav {
			background: var(--color-surface-soft);
			border: 1px solid var(--color-border-soft);
			border-radius: 10px;
			padding: 1.5rem 1.75rem;

			@media (max-width: 600px) { padding: 1.25rem 1rem; }
		}
		.faq-detail-nav-title {
			font-size: 1.1rem;
			color: var(--color-secondary);
			margin: 0 0 1rem;
			padding-bottom: 0.6rem;
			border-bottom: 2px solid var(--color-accent);
			display: inline-block;
		}
		.faq-detail-nav-list {
			list-style: none;
			margin: 0;
			padding: 0;

			li { margin: 0; }

			a {
				display: flex;
				align-items: baseline;
				gap: 0.5rem;
				padding: 0.6rem 0.5rem;
				color: var(--color-text);
				text-decoration: none;
				line-height: 1.6;
				font-size: 0.92rem;
				border-bottom: 1px dashed var(--color-border);
				transition: background-color 0.15s ease, color 0.15s ease;

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

				i {
					color: var(--color-accent);
					font-size: 0.75rem;
					flex-shrink: 0;
					transform: translateY(2px);
				}
			}

			li:last-child a { border-bottom: 0; }
		}
		.faq-detail-nav-q {
			color: var(--color-accent-dark);
			font-weight: 700;
			flex-shrink: 0;
		}
		.faq-detail-nav-text { flex: 1; }

		/* ----- 質問と回答カード ----- */
		.faq-detail-list {
			display: flex;
			flex-direction: column;
			gap: 1.25rem;
		}
		.faq-detail-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			overflow: hidden;
			scroll-margin-top: 20px;
		}
		.faq-detail-card-q {
			display: flex;
			align-items: baseline;
			gap: 0.6rem;
			padding: 1.1rem 1.5rem;
			background: var(--color-accent-soft);
			border-bottom: 1px solid var(--color-accent-border);

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

			h3 {
				font-size: 1.05rem;
				color: var(--color-secondary);
				margin: 0;
				line-height: 1.5;

				@media (max-width: 600px) { font-size: 0.95rem; }
			}
		}
		.faq-detail-card-num {
			color: var(--color-accent-dark);
			font-weight: 700;
			font-size: 1.1rem;
			flex-shrink: 0;

			@media (max-width: 600px) { font-size: 1rem; }
		}
		.faq-detail-card-a {
			padding: 1.25rem 1.5rem;
			position: relative;

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

			&::before {
				content: "A.";
				position: absolute;
				top: 1.2rem;
				left: 1.5rem;
				color: var(--color-accent);
				font-weight: 700;
				font-size: 1.05rem;

				@media (max-width: 600px) { top: 0.95rem; left: 1rem; }
			}

			p {
				margin: 0;
				padding-left: 1.75rem;
				line-height: 1.85;
				color: #333;
				font-size: 0.92rem;

				@media (max-width: 600px) { font-size: 0.88rem; line-height: 1.8; }
			}

			a {
				color: var(--color-accent-dark);
				text-decoration: underline;

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

		/* ----- 他カテゴリーへの誘導 ----- */
		.faq-detail-other-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 1rem;

			@media (max-width: 600px) { grid-template-columns: 1fr; }
		}
		.faq-detail-other-card {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			padding: 1.25rem;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			text-decoration: none;
			color: inherit;
			gap: 0.4rem;
			transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);
				border-color: var(--color-accent);
			}
			i {
				font-size: 1.6rem;
				color: var(--color-accent);
				margin-bottom: 0.25rem;
			}
			h3 {
				font-size: 1rem;
				color: var(--color-secondary);
				margin: 0;
			}
			p {
				font-size: 0.82rem;
				color: var(--color-muted);
				margin: 0;
				line-height: 1.6;
			}
		}

		/* ----- 個別お問い合わせCTA ----- */
		.faq-detail-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; }
		}
		.faq-detail-cta-actions { flex-shrink: 0; }
	}

	/* ==========================================================================
	   .fullfbag-page — フルカラー不織布バッグ（contents/fullfbag.php）
	   ========================================================================== */
	.fullfbag-page {

		/* ----- 選ばれる理由（3カード）----- */
		.fb-reason-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.25rem;

			@media (max-width: 768px) { grid-template-columns: 1fr; }
		}
		.fb-reason-card {
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 10px;
			padding: 1.5rem 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.6rem;
				line-height: 1.45;
			}
			p {
				font-size: 0.85rem;
				line-height: 1.75;
				color: #444;
				margin: 0;
				text-align: left;
			}
		}

		/* ----- 他商材との価格比較テーブル ----- */
		.fb-compare-wrap {
			overflow-x: auto;
		}
		.fb-compare-table {
			width: 100%;
			border-collapse: collapse;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 8px;
			overflow: hidden;

			th, td {
				padding: 0.85rem 1rem;
				border-bottom: 1px solid var(--color-border);
				font-size: 0.92rem;
				text-align: left;
				vertical-align: middle;
			}
			thead th {
				background: var(--color-surface-soft);
				color: var(--color-secondary);
				font-weight: 600;
				font-size: 0.88rem;
			}
			tbody th {
				font-weight: 600;
				color: var(--color-secondary);
				background: #fafafa;
			}
			tbody tr.is-highlight {
				background: color-mix(in srgb, var(--color-accent) 8%, #fff);
			}
			tbody tr.is-highlight th {
				background: color-mix(in srgb, var(--color-accent) 14%, #fff);
				color: var(--color-accent);
			}
			tbody tr:last-child th,
			tbody tr:last-child td { border-bottom: none; }
		}
		.fb-compare-note {
			margin-top: 0.85rem;
			font-size: 0.82rem;
			color: var(--color-muted);
		}

		/* ----- 取り扱い商品ラインナップ ----- */
		.fb-lineup-mock-notice {
			margin-top: 0.5rem;
			color: var(--color-muted);

			code {
				font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
				font-size: 0.85em;
				background: var(--color-surface-soft);
				padding: 0.1em 0.35em;
				border-radius: 3px;
			}
		}
		.fb-lineup-empty {
			padding: 2rem;
			text-align: center;
			background: var(--color-surface-soft);
			border-radius: 8px;
			color: var(--color-muted);
		}

		.fb-lineup-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 1.5rem;

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

		.fb-lineup-card {
			position: relative;
			display: flex;
			flex-direction: column;
			background: #fff;
			border: 1px solid var(--color-border);
			border-radius: 12px;
			overflow: hidden;
			transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;

			/* カード幅でアクションボタン2個が収まらない場合に縦並びへ切替えるための
			   コンテナクエリ用コンテキスト。 */
			container-type: inline-size;
			container-name: fb-card;

			&:hover {
				transform: translateY(-3px);
				box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
				border-color: var(--color-accent);
			}
		}
		.fb-lineup-card.is-top {
			border-color: var(--color-accent);
		}

		.fb-lineup-rank {
			position: absolute;
			top: 0.6rem;
			left: 0.6rem;
			z-index: 2;
			background: var(--color-accent);
			color: #fff;
			font-size: 0.72rem;
			font-weight: 700;
			line-height: 1.25;
			padding: 0.35rem 0.55rem;
			border-radius: 6px;
			text-align: center;
		}

		.fb-lineup-thumb {
			display: block;
			aspect-ratio: 4 / 3;
			background: var(--color-surface-soft);
			overflow: hidden;

			img {
				width: 100%;
				height: 100%;
				object-fit: contain;
				padding: 1rem;
			}
		}

		.fb-lineup-body {
			padding: 1.1rem 1.1rem 1.25rem;
			display: flex;
			flex-direction: column;
			gap: 0.85rem;
		}

		.fb-lineup-name {
			margin: 0;
			font-size: 1rem;
			line-height: 1.5;
			color: var(--color-secondary);

			a {
				color: inherit;
				text-decoration: none;

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

		.fb-lineup-meta {
			display: grid;
			grid-template-columns: auto 1fr;
			gap: 0.25rem 0.75rem;
			margin: 0;
			font-size: 0.82rem;
			line-height: 1.5;

			dt {
				color: var(--color-muted);
				font-weight: 500;
			}
			dd {
				margin: 0;
				color: var(--color-text);
			}
		}

		.fb-lineup-prices {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.78rem;

			th, td {
				padding: 0.4rem 0.3rem;
				border: 1px solid var(--color-border);
				text-align: center;
			}
			thead th {
				background: var(--color-surface-soft);
				color: var(--color-muted);
				font-weight: 500;
			}
			tbody td {
				color: var(--color-text);
				font-weight: 600;
			}
			tbody td.is-highlight {
				background: color-mix(in srgb, var(--color-accent) 10%, #fff);
				color: var(--color-accent);
			}
		}

		.fb-lineup-actions {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 0.5rem;
			margin-top: auto;
		}
		/* カード内寸でボタン2個が収まらなくなったら縦並びに切替。
		   container query 非対応ブラウザ向けに 480px 以下でも縦並びにフォールバック。 */
		@container fb-card (max-width: 260px) {
			.fb-lineup-actions { grid-template-columns: 1fr; }
		}
		@media (max-width: 480px) {
			.fb-lineup-actions { grid-template-columns: 1fr; }
		}

		.fb-lineup-btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 0.3em;
			width: 100%;
			padding: 0.65rem 0.6rem;
			font-size: 0.8rem;
			font-weight: 600;
			line-height: 1.3;
			text-align: center;
			text-decoration: none;
			border-radius: 6px;
			white-space: nowrap;
			transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
		}
		.fb-lineup-btn--detail {
			background: #fff;
			color: var(--color-secondary);
			border: 1px solid var(--color-border);

			&:hover {
				background: var(--color-surface-soft);
				color: var(--color-accent);
				border-color: var(--color-accent);
			}
		}
		.fb-lineup-btn--estimate {
			background: var(--color-accent);
			color: #fff;
			border: 1px solid var(--color-accent);

			&:hover {
				background: color-mix(in srgb, var(--color-accent) 85%, #000);
				border-color: color-mix(in srgb, var(--color-accent) 85%, #000);
			}
		}
	}

}

/* ============================================================================
   形状別 LP（/hirabukuro/ /kakuzoko/ /hunazoko/ /teana/ /shoulder/）
   フラット selector で記述（CSS native nesting の &--modifier トラップ回避）
   ============================================================================ */
.shape-page > .container > section {
	margin: 0 0 3rem;
}

.shape-intro-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	gap: 1.5rem;
	align-items: start;
}

.shape-intro-image {
	margin: 0;
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
	background: #fafafa;
}

.shape-intro-image img {
	display: block;
	width: 100%;
	height: auto;
}

.shape-intro-body p {
	margin: 0 0 0.85rem;
	line-height: 1.8;
}

.shape-intro-body p:last-child { margin-bottom: 0; }

.shape-size-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
}

.shape-size-grid:has(.shape-size-image) {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.shape-size-image {
	margin: 0;
	border: 1px solid #eee;
	border-radius: 6px;
	overflow: hidden;
	background: #fafafa;
}

.shape-size-image img {
	display: block;
	width: 100%;
	height: auto;
}

.shape-step-note {
	margin: 1.25rem 0 0;
	padding: 0.85rem 1rem;
	background: #f6f9fb;
	border-left: 4px solid var(--color-accent, #2e7d8c);
	border-radius: 0 4px 4px 0;
}

.shape-step-note h4 {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	color: #333;
}

.shape-step-note p {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.7;
	color: #444;
}

/* og-color-swatch にホワイトなど薄い色を載せる際の縁取り */
.og-color-swatch--bordered {
	box-shadow: inset 0 0 0 1px #ddd;
}

/* 形状 LP 末尾の「○○のお見積もり」CTA ボックス。
   親テーマの .c-info-box--accent は `&--modifier` ネストで死んでいる
   （[[native-css-nesting-modifier-bug]] 参照）ため、ここでフラット selector で再定義。
   見出し・本文・ボタン群を縦並び＋センター揃えにする。 */
.shape-cta {
	margin-top: 2.5rem;
}
.shape-cta .c-info-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	padding: 2rem 1.5rem;
	background: var(--color-accent-soft);
	border: 1px solid var(--color-accent-border);
	border-radius: 12px;
}
.shape-cta .c-info-box > div {
	width: 100%;
}
.shape-cta .c-info-box h3 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
}
.shape-cta .c-info-box p {
	margin: 0;
	color: var(--color-muted, #666);
	font-size: 0.92rem;
	line-height: 1.7;
}
.shape-cta .og-cta-actions {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

@media (max-width: 768px) {
	.shape-intro-grid,
	.shape-size-grid:has(.shape-size-image) {
		grid-template-columns: 1fr;
	}
}

/* -----------------------------------------------
   保冷商品詳細：価格お問い合わせブロック
   ----------------------------------------------- */
.product-price-block--inquiry {
	background: #f0f6ff;
}
.product-price-block--inquiry .product-price-inquiry {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: #334;
	line-height: 1.7;
}

/* -----------------------------------------------
   お見積もりボタン上の吹き出しマイクロコピー
   ----------------------------------------------- */
.product-estimate-cta-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.product-estimate-balloon {
	position: relative;
	z-index: 1;
	display: inline-block;
	background: #fff;
	color: #d33;
	border: 2px solid #d33;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 18px;
	border-radius: 20px;
	margin-bottom: -18px;
	white-space: nowrap;
}
.product-estimate-balloon::after {
	content: "";
	position: absolute;
	bottom: -6px;
	left: 50%;
	translate: -50% 0;
	border-style: solid;
	border-width: 6px 5px 0;
	border-color: #d33 transparent transparent;
}
.product-estimate-balloon::before {
	content: "";
	position: absolute;
	bottom: -4px;
	left: 50%;
	translate: -50% 0;
	border-style: solid;
	border-width: 5px 4px 0;
	border-color: #fff transparent transparent;
	z-index: 1;
}