/* =============================================================================
   08-poly.css
   ポリ袋・ビニール袋商品ページ固有のスタイル集約：
     .poly-list-page (data-page="plb-list")    商品一覧（contents/list.php）
     .poly-standard-page                       規格サイズポリ袋（contents/standard.php）
     .poly-onepoint-page                       ワンポイントポリ袋（contents/onepoint.php）
     .poly-quick-page                          短納期OPPポリ袋（contents/quick.php）
     .poly-fullorder-page                      フルオーダーポリ袋（contents/fullorder.php）
     .poly-flexo-page                          フレキソレジ袋（contents/flexo.php）

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

@layer pages {

	/* ==========================================================================
	   ページ共通：container 上書きとセクション縦余白
	   ========================================================================== */
	.poly-list-page,
	.poly-standard-page,
	.poly-onepoint-page,
	.poly-quick-page,
	.poly-fullorder-page,
	.poly-flexo-page {
		.container { text-align: left; }

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

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

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

	/* ==========================================================================
	   .pl-* — プラン LP 共通：商品ラインナップカードグリッド
	   contents/partials/poly-lineup.php が出力する .pl-section / .pl-card 群。
	   紙袋 /standard/ の .sp-card 系を簡略化したもの（タイプラベル・ランク無し）。
	   画像は商品ページのメイン画像、ボタンは「詳細を見る」「お見積もり」の 2 つ。
	   ========================================================================== */
	.pl-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 1.5rem;

		@media (max-width: 1024px) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
		@media (max-width: 768px)  { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
		@media (max-width: 480px)  { grid-template-columns: 1fr; gap: 1rem; }
	}
	.pl-card {
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		overflow: hidden;
		transition: box-shadow 0.18s ease, transform 0.18s ease;

		/* カード幅で見積もりボタンが収まらない場合、横並びを縦並びに切替えるための
		   コンテナクエリ用コンテキスト。 */
		container-type: inline-size;
		container-name: pl-card;

		&:hover { box-shadow: 0 6px 18px rgba(28, 112, 197, 0.10); transform: translateY(-2px); }

		&.is-hidden { display: none; }
	}
	.pl-card-thumb {
		display: block;
		aspect-ratio: 4 / 3;
		background: var(--color-surface-soft);
		overflow: hidden;
		position: relative;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
			display: block;
			padding: 0.5rem;
			box-sizing: border-box;
		}
	}
	.pl-card-thumb-empty {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-muted);
		font-size: 0.85rem;
	}
	.pl-card-body {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
		padding: 0.875rem 1rem 1rem;
		flex: 1;
	}
	.pl-card-name {
		margin: 0;
		font-size: 0.95rem;
		font-weight: 700;
		line-height: 1.5;
		color: var(--color-text);

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

			&:hover { color: var(--color-accent-dark); }
		}
	}
	.pl-card-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.4rem;
		margin-top: auto;
	}
	/* カードの内寸でボタン 2 個が収まらない幅になったら自動で縦並びに切替。
	   container query 非対応ブラウザ向けに 480px 以下でも縦並びにフォールバック。 */
	@container pl-card (max-width: 240px) {
		.pl-card-actions { grid-template-columns: 1fr; }
	}
	@media (max-width: 480px) {
		.pl-card-actions { grid-template-columns: 1fr; }
	}
	.pl-card-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.25em;
		padding: 0.5rem 0.6rem;
		font-size: 0.8rem;
		font-weight: 600;
		text-decoration: none;
		border-radius: 6px;
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
		line-height: 1.3;
		text-align: center;
		white-space: nowrap;
	}
	.pl-card-btn--detail {
		background: #fff;
		color: var(--color-accent-dark);
		border: 1px solid var(--color-accent-border);

		&:hover { background: var(--color-accent-soft); border-color: var(--color-accent); }
	}
	.pl-card-btn--estimate {
		background: var(--color-cta, var(--color-accent));
		color: #fff;
		border: 1px solid transparent;

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

	/* ----- ラインナップ：形状タブ（standard ページ用） ----- */
	.pl-tabs {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
		margin: 0 0 1.75rem;

		@media (max-width: 600px) { gap: 0.4rem; margin-bottom: 1.25rem; }
	}
	.pl-tab {
		padding: 0.5rem 1.1rem;
		background: #fff;
		border: 1.5px solid var(--color-border);
		color: #555;
		border-radius: 999px;
		font-size: 0.875rem;
		font-weight: 600;
		cursor: pointer;
		transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
		font-family: inherit;
		line-height: 1.3;

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

		@media (max-width: 600px) { font-size: 0.8rem; padding: 0.4rem 0.85rem; }
	}
	.pl-empty {
		grid-column: 1 / -1;
		padding: 2rem 1rem;
		text-align: center;
		color: var(--color-muted);
		background: var(--color-surface-soft);
		border-radius: 8px;
	}

	/* ==========================================================================
	   .poly-list-page — ポリ袋商品一覧（contents/list.php）
	   ========================================================================== */
	.poly-list-page {

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

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

			@media (max-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
			@media (max-width: 600px)  { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 1rem; }
			@media (max-width: 380px)  { grid-template-columns: 1fr; }
		}
		.plb-list-filter-group {
			display: flex;
			flex-direction: column;
			gap: 0.3rem;

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

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

		.plb-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; }
		}

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

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

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

		/* ----- カードグリッド（PC 4カラム → タブレット3 → スマホ2 → 極小1）----- */
		.plb-list-grid {
			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; }
		}

		.plb-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);
			}
		}

		.plb-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); }
		}

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

		.plb-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; }
			}
		}

		.plb-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; }
		}

		/* ----- 5列価格表（不織布より列数が1つ多い）----- */
		.plb-list-card-prices {
			width: 100%;
			border-collapse: collapse;
			font-size: 0.68rem;
			margin-top: 0.25rem;
			table-layout: fixed;

			th, td {
				padding: 0.3rem 0.1rem;
				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.62rem;
				letter-spacing: -0.02em;
			}
			td {
				color: #333;
				font-weight: 600;

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

		.plb-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);
				}
			}
		}
	}

	/* ==========================================================================
	   .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 — フルオーダー オーダーステップ紹介
	   (contents/orderguide.php) — STEP1〜5 の選択肢を順番に紹介する縦長ガイド
	   ========================================================================== */
	.orderguide-page,.poly-fullorder-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(5, 1fr);
			gap: 0.5rem;

			@media (max-width: 1024px) { grid-template-columns: repeat(3, 1fr); }
			@media (max-width: 600px)  { 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);
		}

		.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%; }
		}
	}

}

/* ============================================================================
   /onepoint/ ページ – 基本仕様カード（手穴LDPE・片ショルダー）と
                       選べる生地色 × 印刷色テーブル
   フラット selector で記述（CSS native nesting の &--modifier トラップ回避）
   ============================================================================ */

.op-feature-heading {
	margin: 1.5rem 0 0.75rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: #333;
	border-left: 4px solid var(--color-accent, #2e7d8c);
	padding-left: 0.6rem;
}

.op-feature-grid {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

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

.op-feature-card {
	display: grid;
	grid-template-columns: 100px 1fr;
	gap: 0.85rem;
	padding: 0.85rem;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 6px;
	align-items: start;
}

.op-feature-card figure {
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
}

.op-feature-card figure img {
	display: block;
	width: 100%;
	height: auto;
}

.op-feature-body h5 {
	margin: 0 0 0.35rem;
	font-size: 0.95rem;
	color: #333;
	font-weight: 700;
}

.op-feature-body p {
	margin: 0;
	font-size: 0.83rem;
	line-height: 1.65;
	color: #555;
}

.op-feature-note {
	margin: 0.5rem 0 0;
	font-size: 0.78rem;
	line-height: 1.7;
	color: #b03030;
}

.op-color-intro {
	margin: 0 0 1.5rem;
	padding: 0.85rem 1rem;
	background: #fff8f0;
	border: 1px solid #f0d8b8;
	border-radius: 4px;
	font-size: 0.83rem;
	line-height: 1.75;
	color: #444;
}

.op-color-intro strong {
	color: #b03030;
}

.op-color-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.5rem;
}

.op-color-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
	background: #fff;
}

.op-color-table th,
.op-color-table td {
	border: 1px solid #e2e2e2;
	padding: 0.6rem 0.7rem;
	vertical-align: middle;
	text-align: center;
}

.op-color-table thead th {
	background: #f6f6f6;
	font-weight: 600;
	color: #333;
}

.op-color-table tbody th {
	background: #fafafa;
	font-weight: 600;
	width: 9rem;
}

.op-color-swatches,
.op-print-swatches {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.op-color-swatches li,
.op-print-swatches li {
	flex: 0 0 5.5rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
}

.op-color-swatches img,
.op-print-swatches img {
	display: block;
	width: inherit;
	height: 4rem;
	object-fit: cover;
	border-radius: 4px;
	border: 1px solid #ddd;
}

.op-color-swatches span,
.op-print-swatches span {
	font-size: 0.7rem;
	color: #555;
	text-align: center;
	line-height: 1.3;
}

.op-color-table-note {
	margin: 0.6rem 0 0;
	font-size: 0.72rem;
	color: #b03030;
	line-height: 1.6;
	text-align: left;
}

.op-print-samples {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem;
}

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

.op-print-samples figure {
	margin: 0 0 0.4rem;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
	background: #fafafa;
}

.op-print-samples figure img {
	display: block;
	width: 100%;
	height: auto;
}

.op-print-samples figcaption {
	font-size: 0.78rem;
	color: #555;
	text-align: center;
	line-height: 1.5;
}

/* =============================================================================
   お知らせ（contents/price.php で表示）
   親テーマ 07-product.css はこのページでは読み込まれないため、ここで明示的に当てる。
   price.php では既存の .container 内に $notice_bare=true で出力されるため、
   .product-notice はコンテンツ幅いっぱいの枠（左ボーダーつき）になる。
   ============================================================================= */
.product-notice {
	padding: 12px 16px;
	border-left: 4px solid var(--jamble-color-accent, #f24e00);
	background: #fff8f3;
	margin: 24px 0;
}
.product-notice-heading {
	margin: 0 0 6px;
	font-size: 14px;
	font-weight: 700;
}
.product-notice-body {
	font-size: 13px;
	line-height: 1.7;
}

} /* end @layer pages */