/* ぷくリンク - 商品リンク表示用CSS */

.pukulink {
	--pukulink-amazon: #ff9900;
	--pukulink-rakuten: #bf0000;
	--pukulink-yahoo: #ff0033;
	--pukulink-amazon-text: #ffffff;
	--pukulink-rakuten-text: #ffffff;
	--pukulink-yahoo-text: #ffffff;
	--pukulink-modern-amazon-text: #ffffff;
	--pukulink-modern-rakuten-text: #ffffff;
	--pukulink-modern-yahoo-text: #ffffff;
	--pukulink-radius: 4px;
	/* カードの基本配色。pukulink-scheme-* が必要に応じて上書きする。 */
	--pukulink-surface: #fff;
	--pukulink-surface-subtle: #fafafa;
	--pukulink-border: #e3e3e3;
	/* 画像ギャラリーの送り矢印。写真の上に重ねるので半透明にする。 */
	--pukulink-gallery-nav-bg: rgba(255, 255, 255, 0.72);
	--pukulink-gallery-nav-border: rgba(0, 0, 0, 0.12);
	--pukulink-body: #333;
	--pukulink-title: #333;
	--pukulink-link: #0073aa;
	--pukulink-rate: #e7a600;
	--pukulink-price: #b12704;
	--pukulink-meta: #666;
	--pukulink-meta-muted: #888;
	--pukulink-note: #999;
	--pukulink-credit: #9aa6b2;
	--pukulink-card-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	--pukulink-modern-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
	/* モダンは、ゆったりした設計に合わせて少し青みのある独自の中間色を持つ。 */
	--pukulink-modern-surface: #fff;
	--pukulink-modern-border: #eef1f4;
	--pukulink-modern-title: #1e293b;
	--pukulink-modern-link: #0073aa;
	--pukulink-modern-price: #b12704;
	--pukulink-modern-meta: #64748b;
	--pukulink-modern-note: #8491a0;
	--pukulink-amazon-line: var(--pukulink-amazon);
	--pukulink-rakuten-line: var(--pukulink-rakuten);
	--pukulink-yahoo-line: var(--pukulink-yahoo);
	box-sizing: border-box;
	margin: 1.5em 0;
	font-size: 15px;
	line-height: 1.5;
}
.pukulink *,
.pukulink *::before,
.pukulink *::after {
	box-sizing: border-box;
}
.pukulink a {
	text-decoration: none;
}
.pukulink img {
	max-width: 100%;
	height: auto;
	border: none;
}

/* OS/ブラウザ追従が既定。サイト側が常時ダークの場合は設定で dark を選べる。 */
.pukulink-scheme-dark {
	--pukulink-surface: #182235;
	--pukulink-surface-subtle: #1f2a3d;
	--pukulink-border: #34445d;
	--pukulink-gallery-nav-bg: rgba(24, 34, 53, 0.72);
	--pukulink-gallery-nav-border: rgba(255, 255, 255, 0.22);
	--pukulink-body: #e2e8f0;
	--pukulink-title: #f8fafc;
	--pukulink-link: #7dd3fc;
	--pukulink-rate: #fbbf24;
	--pukulink-price: #fb923c;
	--pukulink-meta: #cbd5e1;
	--pukulink-meta-muted: #a8b5c7;
	--pukulink-note: #a8b5c7;
	--pukulink-credit: #a8b5c7;
	--pukulink-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
	--pukulink-modern-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
	--pukulink-modern-surface: #182235;
	--pukulink-modern-border: #34445d;
	--pukulink-modern-title: #f8fafc;
	--pukulink-modern-link: #7dd3fc;
	--pukulink-modern-price: #fb923c;
	--pukulink-modern-meta: #cbd5e1;
	--pukulink-modern-note: #a8b5c7;
	/* 枠線ボタンは濃色面でも読み取れる明度に補正する。 */
	--pukulink-amazon-line: #ffc266;
	--pukulink-rakuten-line: #ff9b9b;
	--pukulink-yahoo-line: #ff94a8;
}
@media (prefers-color-scheme: dark) {
	.pukulink-scheme-auto {
		--pukulink-surface: #182235;
		--pukulink-surface-subtle: #1f2a3d;
		--pukulink-border: #34445d;
		--pukulink-gallery-nav-bg: rgba(24, 34, 53, 0.72);
		--pukulink-gallery-nav-border: rgba(255, 255, 255, 0.22);
		--pukulink-body: #e2e8f0;
		--pukulink-title: #f8fafc;
		--pukulink-link: #7dd3fc;
		--pukulink-rate: #fbbf24;
		--pukulink-price: #fb923c;
		--pukulink-meta: #cbd5e1;
		--pukulink-meta-muted: #a8b5c7;
		--pukulink-note: #a8b5c7;
		--pukulink-credit: #a8b5c7;
		--pukulink-card-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
		--pukulink-modern-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
		--pukulink-modern-surface: #182235;
		--pukulink-modern-border: #34445d;
		--pukulink-modern-title: #f8fafc;
		--pukulink-modern-link: #7dd3fc;
		--pukulink-modern-price: #fb923c;
		--pukulink-modern-meta: #cbd5e1;
		--pukulink-modern-note: #a8b5c7;
		--pukulink-amazon-line: #ffc266;
		--pukulink-rakuten-line: #ff9b9b;
		--pukulink-yahoo-line: #ff94a8;
	}
}

/* ---------- スタンダード(横並び) ---------- */
.pukulink--standard,
.pukulink--card {
	background: var(--pukulink-surface);
	border: 1px solid var(--pukulink-border);
	border-radius: 8px;
	box-shadow: var(--pukulink-card-shadow);
	color: var(--pukulink-body);
	padding: 16px;
}
.pukulink--standard {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.pukulink--standard .pukulink-thumb {
	flex: 0 0 140px;
	text-align: center;
}
.pukulink--standard .pukulink-thumb img {
	max-height: 140px;
	object-fit: contain;
}
.pukulink--standard .pukulink-body {
	flex: 1;
	min-width: 0;
}

/* ---------- ラージカード(縦型) ---------- */
.pukulink--card {
	max-width: 480px;
	text-align: center;
}
.pukulink--card .pukulink-thumb {
	display: block;
	margin-bottom: 12px;
}
.pukulink--card .pukulink-thumb img {
	max-height: 260px;
	object-fit: contain;
}

/* ---------- コンパクト(1行) ---------- */
.pukulink--compact {
	background: var(--pukulink-surface-subtle);
	border: 1px solid var(--pukulink-border);
	border-radius: 6px;
	padding: 10px 14px;
	color: var(--pukulink-body);
}
.pukulink--compact .pukulink-body {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}
.pukulink--compact .pukulink-title {
	flex: 1 1 200px;
	min-width: 0;
}
.pukulink--compact .pukulink-price {
	margin: 0;
	white-space: nowrap;
}
.pukulink--compact .pukulink-btns {
	margin: 0;
	flex-wrap: nowrap;
}
.pukulink--compact .pukulink-btn {
	padding: 6px 12px;
	font-size: 12px;
}

/* ---------- テキストリンク ---------- */
.pukulink--text {
	margin: 0;
	display: inline;
}
.pukulink--text .pukulink-text-link {
	color: var(--pukulink-link);
	text-decoration: underline;
}

/* ---------- 共通パーツ ---------- */
.pukulink-title {
	display: block;
	font-weight: bold;
	color: var(--pukulink-title);
	margin-bottom: 6px;
	overflow-wrap: break-word;
}
.pukulink-title:hover {
	color: var(--pukulink-link);
}
.pukulink-review {
	font-size: 13px;
	margin-bottom: 4px;
}
.pukulink-rate {
	color: var(--pukulink-rate);
	font-weight: bold;
}
.pukulink-review-link {
	color: var(--pukulink-link);
	text-decoration: underline;
	font-size: 12px;
	margin-left: 6px;
}
.pukulink-price {
	color: var(--pukulink-price);
	font-size: 18px;
	font-weight: bold;
	margin: 4px 0;
}
.pukulink-price-item {
	display: inline-block;
	margin-right: 12px;
	white-space: nowrap;
}
.pukulink-price-source {
	color: var(--pukulink-meta);
	font-size: 13px;
	font-weight: normal;
}
.pukulink-price-date {
	color: var(--pukulink-meta-muted);
	font-size: 12px;
	font-weight: normal;
}
.pukulink-sales {
	margin: 6px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.pukulink-sale-label {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	color: #fff;
	background: #e65100;
	border-radius: 3px;
	padding: 2px 8px;
}
.pukulink-sale-rakuten {
	background: var(--pukulink-rakuten);
	color: #fff;
}
.pukulink-sale-yahoo {
	background: var(--pukulink-yahoo);
	color: #fff;
}
.pukulink-sale-amazon {
	background: var(--pukulink-amazon);
	color: #fff;
}
.pukulink-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 10px;
}
.pukulink--card .pukulink-btns {
	flex-direction: column;
}
.pukulink-btn {
	display: inline-block;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	text-align: center;
	padding: 10px 18px;
	border-radius: var(--pukulink-radius);
	transition: opacity 0.15s;
	flex: 1 1 auto;
}
.pukulink-btn:hover {
	opacity: 0.85;
}
.pukulink .pukulink-btn-amazon {
	background: var(--pukulink-amazon);
	color: var(--pukulink-amazon-text);
}
.pukulink .pukulink-btn-rakuten {
	background: var(--pukulink-rakuten);
	color: var(--pukulink-rakuten-text);
}
.pukulink .pukulink-btn-yahoo {
	background: var(--pukulink-yahoo);
	color: var(--pukulink-yahoo-text);
}
.pukulink-note {
	color: var(--pukulink-note);
	font-size: 11px;
	margin-top: 8px;
}

/* ---------- 商品画像ギャラリー(複数画像スワイプ。CSSのみ・JS不使用) ---------- */
.pukulink-gallery-track {
	display: flex;
	flex-direction: row; /* 600px以下の他要素へのcolumn指定(v2.4.20の教訓)と競合させない */
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	gap: 6px;
	scrollbar-width: thin; /* Firefox/新しめのChromium。WebKit系は下の::-webkit-scrollbarで対応。 */
}
.pukulink-gallery-track::-webkit-scrollbar {
	height: 4px;
}
.pukulink-gallery-track::-webkit-scrollbar-thumb {
	background: var(--pukulink-border);
	border-radius: 2px;
}
.pukulink-gallery-item {
	flex: 0 0 88%; /* 次の画像を少し覗かせて「まだある」ことを伝える */
	scroll-snap-align: center;
	display: block;
}
.pukulink-gallery-item img {
	/* 各テンプレの.pukulink-thumb img(max-height/object-fit)より詳細度が低いため、
	   通常はそちらが優先されたまま安全にトラック幅いっぱいに収まる。 */
	width: 100%;
	height: auto;
}
/* 送り矢印(front.jsが動いたときだけ表示される)。 */
.pukulink-thumb.pukulink-gallery {
	position: relative;
}
.pukulink-gallery-nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	/* [hidden]より詳細度が高い表示指定をここに書くと非表示にできなくなるため、
	   display は下の :not([hidden]) 側だけで指定する。 */
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 1px solid var(--pukulink-gallery-nav-border);
	border-radius: 50%;
	/* 写真の上に重ねるため背景だけを半透明にする。ボタン全体をopacityで薄くすると
	   記号までぼやけるので、記号(currentColor)は不透明のまま残す。 */
	background: var(--pukulink-gallery-nav-bg);
	color: var(--pukulink-body);
	cursor: pointer;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.pukulink-gallery-nav:not([hidden]) {
	display: flex;
}
/* 記号はSVGで描く。文字(‹ ›)はフォントごとに左右の余白が異なり中央に揃わないため。 */
.pukulink-gallery-nav svg {
	display: block;
	width: 13px;
	height: 13px;
}
.pukulink-gallery-nav:hover {
	border-color: var(--pukulink-border);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18);
}
.pukulink-gallery-nav:disabled {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}
.pukulink-gallery-prev {
	left: 2px;
}
.pukulink-gallery-next {
	right: 2px;
}

/* standard(デスクトップ)は.pukulink-thumbが flex:0 0 140px で幅が確定済み、
   cardはdisplay:blockで親の確定幅をそのまま使うため、いずれも上書き不要。
   幅が不定(auto)になる下記2箇所だけ明示する(SPEC-image-gallery.md §4-4)。 */
.pukulink--modern .pukulink-thumb.pukulink-gallery {
	width: 220px;
}
@media (max-width: 600px) {
	.pukulink--standard .pukulink-thumb.pukulink-gallery {
		width: 220px;
	}
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 600px) {
	.pukulink--standard {
		flex-direction: column;
		align-items: center;
	}
	.pukulink--standard .pukulink-thumb {
		flex-basis: auto;
	}
	.pukulink--standard .pukulink-body {
		width: 100%;
	}
	.pukulink-btns {
		flex-direction: column;
	}
	.pukulink-btn {
		width: 100%;
	}
	.pukulink--compact .pukulink-body {
		flex-direction: column;
		align-items: stretch;
	}
	.pukulink--compact .pukulink-btns {
		flex-wrap: wrap;
	}
}

/* ---------- サービスクレジット(standard/card/modernの右下) ---------- */
.pukulink-credit {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 4px;
	margin-top: 6px;
	color: var(--pukulink-credit);
	font-size: 11px;
	line-height: 1;
}
.pukulink-credit img {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	vertical-align: middle;
}

/* ---------- 比較表用ボタンのみ ---------- */
/* 表のセル内でも崩れないよう外側はinline-flex。横(h)は自動折り返し、縦(v)は積み上げ。 */
.pukulink--buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	vertical-align: middle;
}
.pukulink-buttons-v {
	flex-direction: column;
	align-items: stretch;
}
.pukulink-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--pukulink-radius);
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s;
}
.pukulink-badge:hover {
	opacity: 0.85;
}
/* 塗りつぶし */
.pukulink-buttons-fill .pukulink-badge {
	color: #fff;
	border: 1px solid transparent;
}
.pukulink-buttons-fill .pukulink-badge-amazon { background: var(--pukulink-amazon); color: var(--pukulink-amazon-text); }
.pukulink-buttons-fill .pukulink-badge-rakuten { background: var(--pukulink-rakuten); color: var(--pukulink-rakuten-text); }
.pukulink-buttons-fill .pukulink-badge-yahoo { background: var(--pukulink-yahoo); color: var(--pukulink-yahoo-text); }
/* 枠線のみ */
.pukulink-buttons-line .pukulink-badge {
	background: transparent;
}
.pukulink-buttons-line .pukulink-badge-amazon { color: var(--pukulink-amazon-line); border: 1.5px solid var(--pukulink-amazon-line); }
.pukulink-buttons-line .pukulink-badge-rakuten { color: var(--pukulink-rakuten-line); border: 1.5px solid var(--pukulink-rakuten-line); }
.pukulink-buttons-line .pukulink-badge-yahoo { color: var(--pukulink-yahoo-line); border: 1.5px solid var(--pukulink-yahoo-line); }

/* ---------- モダン(角丸+シャドウ+余白広め) ---------- */
/* コンテナクエリ: カードの実幅に応じて縦積み⇔横並びが切り替わる
   (スマホ縦=縦型カード、横向き・PC=横型)。 */
.pukulink--modern {
	container-type: inline-size;
	max-width: 720px;
}
.pukulink--modern .pukulink-modern-inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
	background: var(--pukulink-modern-surface);
	border: 1px solid var(--pukulink-modern-border);
	border-radius: 16px;
	box-shadow: var(--pukulink-modern-shadow);
	padding: 28px;
}
.pukulink--modern .pukulink-thumb {
	flex: 0 0 auto;
	text-align: center;
	align-self: center;
}
.pukulink--modern .pukulink-thumb img {
	max-width: 220px;
	max-height: 220px;
	object-fit: contain;
}
.pukulink--modern .pukulink-body {
	min-width: 0;
	flex: 1;
}
.pukulink--modern .pukulink-title {
	font-size: 17px;
	font-weight: 600;
	line-height: 1.6;
	color: var(--pukulink-modern-title);
	text-decoration: none;
}
.pukulink--modern .pukulink-title:hover,
.pukulink--modern .pukulink-review-link { color: var(--pukulink-modern-link); }
.pukulink--modern .pukulink-price {
	margin-top: 12px;
	color: var(--pukulink-modern-price);
}
.pukulink--modern .pukulink-price-source,
.pukulink--modern .pukulink-price-date { color: var(--pukulink-modern-meta); }
.pukulink--modern .pukulink-btns {
	margin-top: 18px;
	gap: 10px;
}
/* モダンは設定「モダンテンプレートのモール別カラー」の色をそのまま反映する。
   (色を抑えたい場合はカラーピッカーで淡い色を選ぶ。全ブラウザ共通で効くよう
    @supports/color-mixは使わない。設定と見た目を1対1で連動させるのが目的。) */
.pukulink--modern .pukulink-btn {
	/* ラベルを常に上下左右センター(高さがラベル数で変わっても中央に来る)。 */
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	padding: 10px 22px;
	font-weight: 600;
	box-shadow: none;
}
.pukulink--modern .pukulink-btn-amazon { background: var(--pukulink-modern-amazon); color: var(--pukulink-modern-amazon-text); }
.pukulink--modern .pukulink-btn-rakuten { background: var(--pukulink-modern-rakuten); color: var(--pukulink-modern-rakuten-text); }
.pukulink--modern .pukulink-btn-yahoo { background: var(--pukulink-modern-yahoo); color: var(--pukulink-modern-yahoo-text); }
.pukulink--modern .pukulink-note {
	margin-top: 16px;
	color: var(--pukulink-modern-note);
}
.pukulink--modern .pukulink-credit {
	margin-top: 10px;
	color: var(--pukulink-modern-note);
}
/* カード幅520px以上: 画像+本文の横並びに切り替え */
@container (min-width: 520px) {
	.pukulink--modern .pukulink-modern-inner {
		flex-direction: row;
		align-items: center;
	}
	/* モール表示順の1番目を上段に全幅、2・3番目を下段に置く。
	   下段はflexで各ボタンの基準幅=ラベルの文字量とし、余りを分け合うので
	   「文字が多いボタンほど自動で広く」なる(割合が文字数に追従)。
	   幅が足りない極端に長いラベルのときだけ、ボタン内で自然に折り返す(はみ出さない)。
	   (.pukulink-btns の子は part_buttons が mall_order 順に出す .pukulink-btn だけ。) */
	.pukulink--modern .pukulink-btns {
		display: flex;
		/* 600px以下の共通モバイル指定(flex-direction:column)を打ち消す。 */
		flex-direction: row;
		flex-wrap: wrap;
	}
	.pukulink--modern .pukulink-btns .pukulink-btn {
		flex: 1 1 auto;
		width: auto;
	}
	/* 1番目のモールは上段に単独で全幅。2番目以降は下段へ回り、文字量に応じて分け合う。
	   (モールが2つだけなら2番目が下段全幅になる。) */
	.pukulink--modern .pukulink-btns .pukulink-btn:first-child {
		flex-basis: 100%;
	}
}