/* =============================================================================
   05-components.css
   サイト横断で再利用できる共通コンポーネント（.c-* プレフィックス）。
   各ページスコープ（.standard-page / .onepoint-page / .specs-page）から
   token を上書きされて使われる。

   主な命名規則：
     .c-{component}            ベース
     .c-{component}--{variant} 外観のバリエーション
     .c-{component}-{part}     構成パーツ
     .is-active / .is-popular / .has-error  JS が付与する状態クラス

   含まれるコンポーネント：
     - .c-topbar         パンくず単独のスリムバー
     - .c-hero           ヒーロー（ページ最上段）
     - .c-stat           統計カード（ヒーロー内 stats）
     - .c-section-head   セクション見出し
     - .c-chip           フィルター用ピル型ボタン
     - .c-faq            FAQアコーディオン
     - .c-form           問い合わせ・見積もりフォーム
     - .c-btn            汎用ボタン（accent/outline/invert/full 変種）
     - .c-info-box       インフォボックス（note / accent / callout 変種）
     - .c-alert-banner   注意・在庫アピールバナー
     - .c-guide-card     入稿ガイドへの誘導カード
     - .c-nodata-card    「データなしOK」カード
     - .c-compare-cards  サービス比較カードグリッド
   ============================================================================= */

@layer components {

	/* ==========================================================================
	   .c-topbar — パンくず単独バー（ヒーロー直下）
	   ========================================================================== */
	.c-topbar {
		background: #fff;
		border-bottom: 1px solid var(--color-border);

		.breadcrumb {
			color: var(--color-muted);
			margin: 0;
			font-size: 0.8rem;

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

				&:hover { color: var(--color-accent); }
			}
			.sep     { margin: 0 0.4em; color: #bbb; }
			.current { color: #444; }
		}
	}
	.c-topbar-inner {
		max-width: 1240px;
		margin: 0 auto;
		padding: 0.5rem 32px;
		font-size: 0.825rem;

		@media (max-width: 768px) { font-size: 0.75rem; padding: 0.4rem 16px; }
	}

	/* ==========================================================================
	   .c-hero — ページヒーロー（全幅・背景画像対応）
	   --hero-bg はトークン側で定義。--hero-bg-image は PHP からインライン注入。
	   ========================================================================== */
	.c-hero {
		position: relative;
		padding: 3.5rem 0 3rem;
		background-color: var(--hero-bg);
		background-image: linear-gradient(180deg, var(--hero-bg) 0%, #fff 100%);
		border-bottom: 1px solid var(--color-border);

		@media (max-width: 768px) { padding: 2rem 0 1.75rem; }

		&--has-bg {
			background-image:
				linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.92) 100%),
				var(--hero-bg-image);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}
	}

	/* ワンカラム固定ページでは article.container が 1240px に閉じ込めるので、
	   ヒーローだけビューポート全幅に逃がす。`body { overflow-x: clip }` 前提。 */
	.page-article .c-hero {
		width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}
	.c-hero-container {
		max-width: 1240px;
		margin: 0 auto;
		padding: 0 32px;
		text-align: center;
		position: relative;
		z-index: 1;

		@media (max-width: 600px) { padding: 0 16px; }
	}

	/* ----- バッジ（複数バッジ・色違いに対応） ----- */
	.c-hero-badge {
		display: inline-block;
		background: var(--color-accent);
		color: #fff;
		font-size: 0.8rem;
		font-weight: 700;
		padding: 0.25rem 0.85rem;
		border-radius: 999px;
		margin-bottom: 0.85rem;

		@media (max-width: 768px) { font-size: 0.72rem; padding: 0.2rem 0.7rem; }

		&--orange { background: #e87722; }
		&--blue   { background: #2956b2; }
		&--green  { background: #2e7d4b; }
	}
	.c-hero-badges {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		justify-content: center;
		margin-bottom: 1rem;

		@media (max-width: 768px) { gap: 0.4rem; }

		.c-hero-badge { margin-bottom: 0; }
	}

	.c-hero-title {
		font-size: 2.25rem;
		line-height: 1.3;
		margin: 0 0 1rem;
		text-align: center;

		@media (max-width: 768px) { font-size: 1.75rem; }
	}
	.c-hero-lead {
		font-size: 1.05rem;
		text-align: center;
		max-width: 760px;
		margin: 0 auto 2rem;
		color: #444;
		line-height: 1.8;

		@media (max-width: 768px) { font-size: 0.95rem; padding: 0 1rem; }

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

	/* ----- stats（件数は --stats-count で可変） ----- */
	.c-hero-stats {
		display: grid;
		grid-template-columns: repeat(var(--stats-count, 3), 1fr);
		gap: 1rem;
		max-width: 960px;
		margin: 0 auto;

		@media (max-width: 768px) { gap: 0.4rem; }
	}

	/* ==========================================================================
	   .c-stat — ヒーロー内の統計カード
	   ========================================================================== */
	.c-stat {
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		padding: 1rem 0.5rem;
		text-align: center;

		@media (max-width: 768px) { padding: 0.7rem 0.25rem; }
		@media (max-width: 480px) { padding: 0.55rem 0.2rem; border-radius: 8px; }
	}
	.c-stat-label {
		display: block;
		color: var(--color-muted);
		font-size: 0.825rem;
		margin-bottom: 0.3rem;

		@media (max-width: 768px) { font-size: 0.7rem; }
		@media (max-width: 480px) { font-size: 0.62rem; line-height: 1.2; margin-bottom: 0.2rem; }
	}
	.c-stat-value {
		display: block;
		color: var(--color-accent-dark);
		font-size: 1.75rem;
		font-weight: 700;
		line-height: 1.1;

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

		.unit {
			font-size: 0.875rem;
			color: #555;
			font-weight: 500;
			margin-left: 0.15em;

			@media (max-width: 768px) { font-size: 0.75rem; }
			@media (max-width: 480px) { font-size: 0.65rem; margin-left: 0.1em; }
		}
	}
	.c-stat-sub {
		display: block;
		color: var(--color-muted);
		font-size: 0.75rem;
		margin-top: 0.3rem;
		line-height: 1.4;

		@media (max-width: 480px) { font-size: 0.6rem; }
	}

	/* ==========================================================================
	   .c-section-head — セクション見出し
	   ワンカラム商品ページで使う共通見出し（standard / fullorder / onepoint /
	   list / horei / orderguide 等）。
	   不織布トップの .section-title と統一: 中央配置＋固定幅60pxアクセント下線。
	   --center 修飾子は後方互換のため残しているが、既定と同じスタイル。
	   ========================================================================== */
	.c-section-head {
		margin: 0 0 3rem;
		text-align: center;

		@media (max-width: 600px) { margin-bottom: 2.25rem; }

		h2 {
			font-size: 1.5rem;
			font-weight: 700;
			line-height: 1.4;
			margin: 0;
			padding-left: 0;
			border-left: 0;

			/* 60px 幅の primary 色アクセント下線（不織布 .section-title と同形） */
			&::after {
				content: "";
				display: block;
				width: 60px;
				height: 4px;
				margin: 14px auto 0;
				background: var(--color-primary);
				border-radius: 2px;
			}

			@media (max-width: 768px) { font-size: 1.35rem; }
			@media (max-width: 600px) { font-size: 1.25rem; }
		}
		p {
			color: var(--color-muted);
			margin: 1.25rem auto 0;
			max-width: 880px;
			font-size: 0.95rem;
			line-height: 1.8;

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

	/* ==========================================================================
	   .c-chip — フィルター・タブ用ピル型ボタン
	   ========================================================================== */
	.c-chip-list {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.c-chip {
		padding: 0.45rem 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: 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;
		}
	}

	/* ==========================================================================
	   .c-badge — 3サイト共通の商品バッジ（新商品 / 人気 / 定番 / セール 等）

	   用途別 modifier:
	     --new        新商品（赤・固定色）
	     --popular    人気・売れ筋（共通トークン --color-popular 青・固定）
	     --standard   定番（--color-secondary、サイトのブランドサブ色）
	     --rank       ランキング表示（--color-accent、サイトのアクセント色）
	     --sale       セール（濃い赤・固定）
	     --limited    限定（オレンジ・固定）
	     --outline    控えめ（白背景＋アクセント枠）

	   レイアウトヘルパー:
	     .c-badge-stack  複数バッジをカード左上に縦並びで絶対配置するラッパー
	     親要素には position: relative を必ず指定すること。

	   使用例:
	     <div class="c-badge-stack">
	       <span class="c-badge c-badge--new">新商品</span>
	       <span class="c-badge c-badge--popular">人気</span>
	     </div>

	     インライン:
	     <span class="c-badge c-badge--rank">人気No.1</span>
	   ========================================================================== */
	.c-badge {
		display: inline-flex;
		align-items: center;
		gap: 0.25em;
		padding: 0.25rem 0.7rem;
		font-size: 0.72rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0.04em;
		border-radius: 999px;
		white-space: nowrap;
		background: var(--color-accent);   /* デフォルト=ブランドアクセント */
		color: #fff;

		/* 用途別カラー modifier */
		&--new {
			background: #e53935;            /* 赤：新商品の汎用色（固定） */
			color: #fff;
		}
		&--popular {
			background: var(--color-popular);  /* 共通トークン青：3サイトとも比較表で人気色として使用 */
			color: #fff;
		}
		&--standard {
			background: var(--color-secondary);  /* ブランドサブ色（多くは紺系） */
			color: #fff;
		}
		&--rank {
			background: var(--color-accent);  /* ブランドアクセント色 */
			color: #fff;
			font-size: 0.7rem;
		}
		&--sale {
			background: #c62828;            /* 濃い赤：セール（固定） */
			color: #fff;
		}
		&--limited {
			background: #ff6f00;            /* オレンジ：限定（固定） */
			color: #fff;
		}
		&--outline {
			background: transparent;
			color: var(--color-accent-dark);
			border: 1px solid var(--color-accent);
			padding-block: calc(0.25rem - 1px);
			padding-inline: calc(0.7rem - 1px);
		}
	}

	/* カード左上に絶対配置するときのヘルパー（複数バッジ縦並びにも対応） */
	.c-badge-stack {
		position: absolute;
		top: 10px;
		left: 10px;
		z-index: 2;
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		align-items: flex-start;
		pointer-events: none;  /* リンクのクリックを通す。バッジ自体は装飾扱い */
	}

	/* ==========================================================================
	   .c-faq — Q&Aアコーディオン（<details>/<summary>）
	   ========================================================================== */
	.c-faq-list {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}
	.c-faq-item {
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 8px;
		overflow: hidden;

		summary {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 1rem 1.25rem;
			cursor: pointer;
			font-weight: 600;
			list-style: none;
			gap: 1rem;

			&::-webkit-details-marker { display: none; }
			&:hover { background: var(--color-surface-soft); }
		}
		&[open] .c-faq-toggle {
			transform: rotate(45deg);
			border-color: var(--color-accent);
		}
		&:focus-within { box-shadow: 0 0 0 2px var(--color-accent); }
	}
	.c-faq-q {
		font-size: 0.95rem;
		line-height: 1.5;
	}
	.c-faq-toggle {
		flex: 0 0 auto;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1.5px solid var(--color-border);
		border-radius: 50%;
		font-size: 1rem;
		color: var(--color-accent-dark);
		transition: transform 0.2s ease;
	}
	.c-faq-body {
		padding: 0 1.25rem 1.25rem;

		p {
			margin: 0;
			color: #444;
			line-height: 1.7;
			font-size: 0.925rem;
		}
	}

	/* ==========================================================================
	   .c-form — 問い合わせ・見積もりフォーム
	   ========================================================================== */
	.c-form {
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 12px;
		padding: 2rem;

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

		&--accent-border { border: 2px solid var(--color-accent); }
	}

	.c-form-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.25rem 1.5rem;
		margin-bottom: 1.25rem;

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

		&--3col {
			grid-template-columns: repeat(3, 1fr);

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

	.c-field {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;

		&--block { grid-column: 1 / -1; }

		input, select, textarea {
			width: 100%;
			padding: 0.6rem 0.75rem;
			border: 1.5px solid var(--color-border);
			border-radius: 6px;
			font-size: 0.95rem;
			font-family: inherit;
			background: #fff;
			color: var(--color-text);
			transition: border-color 0.15s ease;

			&:focus {
				outline: none;
				border-color: var(--color-accent);
				box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
			}
		}
		textarea { resize: vertical; min-height: 80px; }

		&.has-error {
			input, select, textarea {
				border-color: #d9534f;
				box-shadow: 0 0 0 3px rgba(217,83,79,0.15);
			}
		}
	}
	.c-field-label {
		font-size: 0.9rem;
		font-weight: 600;
		color: #444;
	}
	.c-required {
		display: inline-block;
		margin-left: 0.4rem;
		padding: 0.05rem 0.4rem;
		background: #d9534f;
		color: #fff;
		font-size: 0.7rem;
		font-weight: 700;
		border-radius: 3px;
		vertical-align: middle;
	}
	.c-field-hint {
		font-size: 0.75rem;
		color: var(--color-muted);
		margin-top: 0.15rem;

		a { color: var(--color-accent-dark); }
	}

	/* 任意フィールドを折りたたみ */
	.c-form-optional {
		margin-bottom: 1.5rem;
		border: 1px dashed var(--color-border);
		border-radius: 8px;
		padding: 0;

		summary {
			padding: 0.75rem 1rem;
			cursor: pointer;
			font-size: 0.9rem;
			color: var(--color-accent-dark);
			font-weight: 600;
			list-style: none;

			&::-webkit-details-marker { display: none; }
			&::before { content: "+ "; font-weight: 700; }
		}
		&[open] {
			padding: 0 1rem 1rem;

			summary {
				padding-left: 0;
				padding-right: 0;

				&::before { content: "− "; }
			}
		}
	}

	/* 完了表示 */
	.c-form-thanks {
		text-align: center;
		padding: 3rem 1.5rem;
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 12px;
	}
	.c-form-thanks-icon {
		font-size: 3.5rem;
		color: #5cad5c;
		margin-bottom: 1rem;
	}
	.c-form-thanks-title { font-size: 1.25rem; margin: 0 0 0.75rem; }
	.c-form-thanks-desc {
		margin: 0;
		color: var(--color-muted);

		strong { color: var(--color-text); }
	}

	/* 安心要素リスト（送信ボタンの下） */
	.c-form-assurance {
		list-style: none;
		padding: 0;
		margin: 1rem 0 0;
		display: flex;
		justify-content: center;
		gap: 1.25rem;
		flex-wrap: wrap;
		font-size: 0.85rem;
		color: var(--color-muted);

		i { color: var(--color-accent); margin-right: 0.3em; }
	}

	/* ==========================================================================
	   .c-btn — 汎用ボタン
	   ========================================================================== */
	.c-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5em;
		padding: 0.85rem 1.25rem;
		border-radius: 8px;
		font-size: 1rem;
		font-weight: 700;
		text-decoration: none;
		transition: all 0.15s ease;
		line-height: 1.2;
		cursor: pointer;
		font-family: inherit;
		border: 2px solid transparent;

		&:focus-visible {
			outline: 2px solid var(--color-accent-dark);
			outline-offset: 2px;
		}
		&:disabled { opacity: 0.65; cursor: not-allowed; }
	}

	/* 変種は .c-btn のネストから出してフラット記述（raw CSS で &-- 記法が
	   機能しないため。`[[native-css-nesting-modifier-bug]]` の根本対処）。 */

	/* 変種：背景塗りつぶし（CTA） */
	.c-btn--primary {
		background: var(--color-accent);
		color: #fff;
		border-color: var(--color-accent);
	}
	.c-btn--primary:hover:not(:disabled) {
		background: var(--color-accent-dark);
		border-color: var(--color-accent-dark);
		color: #fff;
	}

	/* 変種：アウトライン（補助CTA） */
	.c-btn--secondary {
		background: #fff;
		color: var(--color-accent-dark);
		border-color: var(--color-accent);
	}
	.c-btn--secondary:hover:not(:disabled) {
		background: var(--color-accent-soft);
		color: var(--color-accent-dark);
	}

	/* 変種：色背景上の反転（白背景・色文字） */
	.c-btn--invert {
		background: #fff;
		color: var(--color-accent-dark);
		border-color: #fff;
	}
	.c-btn--invert:hover:not(:disabled) {
		background: color-mix(in srgb, var(--color-accent-soft) 80%, white);
		color: var(--color-accent-dark);
		border-color: color-mix(in srgb, var(--color-accent-soft) 80%, white);
	}

	/* 変種：色背景上の半透明（白枠） */
	.c-btn--invert-outline {
		background: rgba(255, 255, 255, 0.12);
		color: #fff;
		border-color: rgba(255, 255, 255, 0.65);
		backdrop-filter: blur(2px);
	}
	.c-btn--invert-outline:hover:not(:disabled) {
		background: rgba(255, 255, 255, 0.22);
		color: #fff;
		border-color: #fff;
	}

	/* 変種：フォーム送信用（フル幅・縦長め） */
	.c-btn--full {
		width: 100%;
		padding: 1rem 1.5rem;
		border-radius: 8px;
		font-size: 1.05rem;
	}
	.c-btn--full:disabled { opacity: 0.7; cursor: progress; }

	/* ==========================================================================
	   .c-info-box — インフォボックス（説明・注意・誘導）
	   ========================================================================== */
	.c-info-box {
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 10px;
		padding: 1.25rem;

		/* 変種：強調（左にアクセントバー＋横並び） */
		&--accent {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: 1rem;
			flex-wrap: wrap;
			border-left: 4px solid var(--color-accent);

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

		/* 変種：補足ノート（薄い青背景） */
		&--note {
			display: flex;
			gap: 0.75rem;
			align-items: center;
			background: #f7f9fc;
			border-color: #d8e2ee;

			.c-info-box-icon { color: #5a7fb0; font-size: 1.1rem; margin-top: 0; }
			p { margin: 0; font-size: 0.875rem; color: #4a6080; }
		}

		/* 変種：コールアウト（accent-soft 背景。fullorder 派生ページで使用） */
		&--callout {
			display: flex;
			gap: 0.75rem;
			align-items: flex-start;
			background: var(--color-accent-soft);
			border: 1px solid var(--color-accent-border);

			.c-info-box-icon { color: var(--color-accent); }
			p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: #2a4565; }
			strong { color: var(--color-accent-dark); font-weight: 700; }
		}
	}
	.c-info-box-title { font-size: 1.05rem; margin: 0 0 0.3rem; }
	.c-info-box-desc  { font-size: 0.9rem; color: var(--color-muted); margin: 0; line-height: 1.6; }
	.c-info-box-icon  { flex: 0 0 auto; font-size: 1.1rem; margin-top: 0.15rem; }
	.c-info-box-cta {
		display: inline-flex;
		align-items: center;
		gap: 0.4em;
		padding: 0.6rem 1.2rem;
		background: var(--color-accent);
		color: #fff;
		border-radius: 8px;
		font-weight: 700;
		text-decoration: none;
		white-space: nowrap;
		font-size: 0.925rem;

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

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

	/* ==========================================================================
	   .c-alert-banner — 在庫アピール・他社対抗バナー（オレンジ系）
	   ========================================================================== */
	.c-alert-banner {
		display: flex;
		align-items: center;
		gap: 1rem;
		background: var(--color-stock-bg);
		border: 1px solid var(--color-stock-border);
		border-radius: 10px;
		padding: 1rem 1.25rem;
		margin: 1.25rem 0;

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

		p {
			margin: 0;
			font-size: 0.925rem;
			line-height: 1.6;
			color: var(--color-stock-text);

			strong { color: #8a3a00; font-weight: 800; }
		}

		/* 変種：accent-left（左に強調バー・アイコンはフラット） */
		&--accent-left {
			border-left: 4px solid #e87722;
			border-radius: 8px;
			gap: 0.85rem;

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

			.c-alert-banner-icon {
				width: auto;
				height: auto;
				background: transparent;
				box-shadow: none;
				color: #c66700;
				font-size: 1.4rem;
			}
		}
	}
	.c-alert-banner-icon {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		border-radius: 50%;
		background: #fff;
		color: var(--color-stock-text);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		box-shadow: 0 2px 4px rgba(162,85,0,0.15);

		@media (max-width: 768px) { width: 36px; height: 36px; font-size: 1rem; }
	}
	.c-alert-banner-text {
		display: flex;
		flex-direction: column;
		gap: 0.15rem;
		line-height: 1.5;

		strong { color: var(--color-stock-text); font-size: 0.975rem; font-weight: 700; }
		span   { color: #8a4a00; font-size: 0.85rem; }
	}

	/* ==========================================================================
	   .c-guide-card — 入稿ガイドへの誘導カード
	   ========================================================================== */
	.c-guide-card {
		display: flex;
		align-items: center;
		gap: 1.25rem;
		padding: 1.25rem 1.5rem;
		background: var(--color-surface-soft);
		border: 1px solid var(--color-border);
		border-radius: 10px;
		text-decoration: none;
		color: inherit;
		transition: all 0.15s ease;

		&:hover {
			background: #fff;
			border-color: var(--color-accent);
			box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		}

		@media (max-width: 768px) { padding: 1rem; gap: 0.75rem; }
	}
	.c-guide-card-icon {
		flex: 0 0 auto;
		width: 48px;
		height: 48px;
		border-radius: 8px;
		background: #fff;
		color: var(--color-accent-dark);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		border: 1px solid var(--color-border);
	}
	.c-guide-card-body  { flex: 1; }
	.c-guide-card-title { margin: 0 0 0.2rem; font-size: 1.05rem; }
	.c-guide-card-desc  { margin: 0; font-size: 0.85rem; color: var(--color-muted); }
	.c-guide-card-arrow { color: var(--color-accent-dark); font-size: 1.25rem; }

	/* ==========================================================================
	   .c-nodata-card — 「データなしでもOK」カード
	   ========================================================================== */
	.c-nodata-card {
		display: flex;
		gap: 1.25rem;
		align-items: flex-start;
		padding: 1.75rem;
		background: linear-gradient(135deg, #fffbf0 0%, #fef4d8 100%);
		border: 1px solid #f0d68a;
		border-radius: 12px;

		@media (max-width: 768px) { flex-direction: column; padding: 1.25rem; }
	}
	.c-nodata-card-icon {
		flex: 0 0 auto;
		width: 56px;
		height: 56px;
		border-radius: 50%;
		background: #fff;
		color: #c89c2e;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		box-shadow: 0 2px 6px rgba(200,156,46,0.2);
	}
	.c-nodata-card-title { font-size: 1.25rem; margin: 0 0 0.5rem; color: #6b4f12; }
	.c-nodata-card-desc  { margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.7; color: #5a4612; }
	.c-nodata-card-tags {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;

		li {
			padding: 0.3rem 0.85rem;
			background: #fff;
			border: 1px solid #e8c97a;
			border-radius: 999px;
			font-size: 0.8rem;
			color: #6b4f12;
			font-weight: 600;
		}
	}

	/* ==========================================================================
	   .c-compare-cards — サービス比較カードグリッド（他社比較）
	   ========================================================================== */
	.c-compare-cards {
		display: grid;
		grid-template-columns: repeat(var(--compare-cols, 3), 1fr);
		gap: 1rem;

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

		&--4 {
			--compare-cols: 4;

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

	.c-compare-card {
		position: relative;
		background: #fff;
		border: 1.5px solid var(--color-border);
		border-radius: 12px;
		padding: 1.5rem 1.25rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;

		&.is-featured {
			border-color: var(--color-popular);
			border-width: 2px;
			box-shadow: 0 4px 16px rgba(38,112,204,0.12);

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

			.c-compare-card-name { color: var(--color-popular); }
			.c-compare-card-fit  {
				background: var(--color-popular-soft);
				color: var(--color-popular);
				font-weight: 600;
			}
			.c-compare-card-cta {
				background: var(--color-popular);
				border-color: var(--color-popular);
				color: #fff;

				&:hover { background: #1d5aa3; }
			}
		}
	}
	.c-compare-card-badge {
		position: absolute;
		top: -10px;
		left: 50%;
		transform: translateX(-50%);
		background: var(--color-popular);
		color: #fff;
		padding: 0.2rem 0.8rem;
		border-radius: 999px;
		font-size: 0.75rem;
		font-weight: 700;
		box-shadow: 0 2px 4px rgba(38,112,204,0.3);
		white-space: nowrap;
	}
	.c-compare-card-name {
		font-size: 1.1rem;
		margin: 0;
		font-weight: 700;
		text-align: center;
	}
	.c-compare-card-specs {
		margin: 0;
		display: grid;
		gap: 0.5rem;

		> div {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			padding-bottom: 0.4rem;
			border-bottom: 1px dashed #eee;
			font-size: 0.875rem;
		}
		dt { color: var(--color-muted); font-weight: 500; }
		dd { margin: 0; font-weight: 600; color: var(--color-text); }
	}
	.c-compare-card-fit {
		margin: 0;
		padding: 0.5rem;
		background: var(--color-surface-soft);
		border-radius: 6px;
		font-size: 0.825rem;
		color: #555;
		text-align: center;
	}
	.c-compare-card-cta {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		padding: 0.6rem 1rem;
		background: transparent;
		color: var(--color-accent-dark);
		border: 1.5px solid var(--color-accent);
		border-radius: 6px;
		font-size: 0.875rem;
		font-weight: 600;
		text-decoration: none;
		transition: all 0.15s ease;

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

}

/* ==========================================================================
 * .specs-page — 選べる仕様の紹介ページ（3サイト共通）
 *   contents/specifications.php から呼ばれる。タブ風アンカー＋カードグリッド＋CTA。
 * ========================================================================== */
.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 var(--color-accent-border, #ddd);
		border-radius: 8px;
		color: var(--color-text, #333);
		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(0, 0, 0, 0.08);
			transform: translateY(-2px);
		}

		@media (max-width: 600px) { padding: 0.85rem 0.4rem; }
	}
	.specs-tab-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		margin-bottom: 0.4rem;

		svg { width: 100%; height: 100%; }
		i { font-size: 1.5rem; color: var(--color-accent); }

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

		@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 {
		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: var(--color-text, #333);
			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: var(--color-muted, #5a5a5a);
		font-size: 0.95rem;
		max-width: 720px;
	}

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

		@media (max-width: 900px) { 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: var(--color-accent-border, #ddd); 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: var(--color-accent-soft, #f5f5f5);
		border: 1px dashed var(--color-accent-border, #ddd);
		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; }
		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: var(--color-muted, #888);
		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: var(--color-text, #333); margin: 0 0 0.4rem; line-height: 1.4; }
	.specs-card-lead { font-size: 0.9rem; color: var(--color-accent-dark, #888); 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;
	}
	.specs-card-spec {
		width: 100%;
		margin: 0 0 0.85rem;
		border-collapse: collapse;
		font-size: 0.8rem;

		th, td { padding: 0.35rem 0.5rem; border: 1px solid #eee; text-align: left; vertical-align: top; }
		th { background: var(--color-accent-soft, #f5f5f5); font-weight: 600; width: 35%; }
	}
	.specs-card-link {
		margin-top: auto; /* リンクだけカード下端に固定し、本文・テーブルは上から自然に並べる */
		align-self: flex-start;
		font-size: 0.875rem;
		color: var(--color-accent-dark, #888);
		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, #f5f5f5);
		border: 1px solid var(--color-accent-border, #ddd);
		border-radius: 8px;
		text-align: center;

		@media (max-width: 600px) { padding: 1.75rem 1rem; }
	}
	.specs-cta-title {
		font-size: 1.25rem;
		color: var(--color-text, #333);
		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: var(--color-muted, #5a5a5a);
		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, #888);
		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, #f5f5f5); color: var(--color-accent-dark, #888); }

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

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

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