/*****************************************************************/
/*  Codex修正：通常記事・瞬刊で共通の製品カードを使い、写真・商品名・購入導線に強弱を付ける
/*****************************************************************/
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] {
    --cdx-product-image-size: 160px;
    --cdx-product-ink: #19191d;
    --cdx-product-copy: #3f3f46;
    --cdx-product-rule: rgb(var(--main-color));
    container: collection-box / inline-size;
    box-sizing: border-box; width: 100%; max-width: 760px;
    margin: 56px auto; padding: 0; border: 0; border-top: 3px solid var(--cdx-product-rule); border-radius: 0;
    background: var(--cdx-collection-background, #fff); color: var(--cdx-product-ink); box-shadow: none;
    font-size: 16px; line-height: 1.6;
}
/* Codex修正：瞬刊レイヤーでは商品枠を透過し、レイヤーの背景になじませる。 */
.cdx-quick-read-modal .cdx-quick-read-body { --cdx-collection-background: transparent; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] * { box-sizing: border-box; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-layout {
    display: grid; grid-template-columns: var(--cdx-product-image-size) minmax(0, 1fr);
    grid-template-areas: "image heading" "image description" "shops shops";
    gap: 0 24px; padding-top: 24px; padding-bottom: 4px;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] div.container, :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] div.container .info { display: contents; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] div.container > .image {
    grid-area: image; display: grid; align-self: stretch; align-content: center; width: 100%; height: auto;
    /* Codex修正：瞬刊の旧280px制限を解除し、スマホでも商品画像を本文幅いっぱいに見せる。 */
    min-width: 0; max-width: none; margin: 0; padding: 0;
    border-radius: 0; background: transparent;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .image > a { display: block; margin: 0; border: 0; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] div.container .image img {
    display: block; width: 100%; height: var(--cdx-product-image-size); object-fit: contain;
    margin: 0; border-radius: 0; transform: none; mix-blend-mode: multiply;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-heading { grid-area: heading; min-width: 0; display: block; padding: 0 0 14px; border: 0; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-heading > :is(a, span) {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 18px; margin: 0; color: inherit; border: 0; text-decoration: none;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .name {
    margin: 0; font-size: 27px; font-weight: 800; line-height: 1.18;
    letter-spacing: -.025em; text-decoration: none; overflow-wrap: anywhere;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-heading > a:hover .name { text-decoration: underline; text-underline-offset: 4px; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
    gap: 6px; max-width: 230px; margin: 0; padding: 5px 0; border: 0;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .sale { padding: 0; background: none; color: var(--cdx-product-ink); font-size: 23px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price :is(.off, .point) { padding: 2px 5px; margin: 0; border-radius: 0; font-size: 12px; line-height: 1.5; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .badge { margin: 0; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .badge.cart { display: none; }
/* Codex追加：Amazon・楽天市場の価格ロゴをAppleと同じ寸法・単色で揃える。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .cdx-collection-price-icon { display: block; width: 18px; height: 18px; fill: currentColor; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links:empty { display: none; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links > span { display: inline-flex; margin: 0; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links a { display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 2px 0; border: 0; border-radius: 0; background: transparent; color: var(--cdx-product-ink); font-size: 12px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-details { grid-area: description; display: block; min-width: 0; margin: 0 0 14px; }
/* Codex修正：冒頭2行と控えめな続きを読むを置き、購入ボタンと読む操作を区別する。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-copy { display: block; color: var(--cdx-product-copy); font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-details[data-cdx-expanded="false"] .cdx-collection-copy { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* Codex追加：開閉中は本文を切り詰めず、高さに応じて隠す範囲だけを変える。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-details.is-animating .cdx-collection-copy { display: block; -webkit-line-clamp: unset; overflow: hidden; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-toggle { display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 36px; margin: 2px 0 0; padding: 0 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--cdx-product-ink); font: inherit; font-size: 13px; font-weight: 600; line-height: 1.5; cursor: pointer; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-toggle[hidden] { display: none; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-toggle::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(225deg); }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-toggle:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Codex修正：本文のフェードを除去し、矢印だけを本文の開閉と同じ時間で回す。 */
@media (prefers-reduced-motion: no-preference) {
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-toggle::after { transition: transform .22s ease, margin-top .22s ease; }
}

:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button {
    grid-area: shops; display: flex; flex-wrap: wrap; justify-content: center;
    gap: 14px 16px; width: auto; margin: 24px 0 0; padding: 0 4px 4px 0; border: 0; list-style: none;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li {
    display: block; flex: 1 1 180px; max-width: 300px; min-width: 0;
    width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0;
    /* Codex修正：購入先を問わずサイトのメインカラーに揃え、SVGと名称で識別する。 */
    background: rgb(var(--main-color)); box-shadow: 3px 3px 0 rgba(var(--main-color), .3);
    transition: background .15s, box-shadow .15s;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li::before, :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li a::before { content: none; }
/* Codex修正：購入ボタンの文字とcurrentColorで描くSVGを白に統一する。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 46px; height: 100%; margin: 0; padding: 11px 16px;
    border: 0; background: none; color: #fff; font-size: 14px; font-weight: 700;
    line-height: 1.5; letter-spacing: .025em; text-decoration: none; overflow-wrap: anywhere;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li:hover { background: rgb(var(--main-color-hover)); box-shadow: 1px 1px 0 rgba(var(--main-color), .3); }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* Codex追加：ロゴはボタンを高くせず、ラベルの前に固定サイズで配置する。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button a .cdx-collection-shop-logo { display: block; flex: 0 0 18px; width: 18px; height: 18px; margin: 0; padding: 0; fill: currentColor; pointer-events: none; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] :is(a, button):focus-visible { outline: 2px solid var(--cdx-product-rule); outline-offset: 5px; }

/* Codex修正：ロゴと金額の間へパイプを移し、通貨単位は金額の後ろに添える。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .cdx-collection-price-main { display: inline-flex; align-items: center; white-space: nowrap; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .cdx-collection-price-brand { display: inline-flex; align-items: center; padding-right: 12px; margin-right: 12px; border-right: 1px solid #c9c9ce; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .cdx-collection-price-unit { font-size: 14px; letter-spacing: 0; }

/*****************************************************************/
/*  Codex修正：比較・レビューを、薄いグレーのコンパクトなカプセルで並べる
/*****************************************************************/
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links a {
    gap: 8px; min-height: 32px; padding: 4px 0;
    background: transparent; box-shadow: none; font-size: 13px; font-weight: 600;
    line-height: 1.5; letter-spacing: 0; white-space: nowrap;
    text-decoration: underline; text-decoration-color: #b7b7bf;
    text-decoration-thickness: 1px; text-underline-offset: 5px;
}
/* Codex修正：元の色付きアイコンは隠し、比較とレビューには用途別のSVGを表示する。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links svg { display: none; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links a::after {
    content: ""; display: block; flex: 0 0 5px; width: 5px; height: 5px;
    /* Codex修正：共通リンクの全面ホバー用レイヤーを解除し、矢印を文字の右に並べる。 */
    position: static; inset: auto; margin: 0; padding: 0; background: none;
    border-bottom: 0; border-left: 0;
    border-top: 1px solid currentColor; border-right: 1px solid currentColor;
    transform: rotate(45deg);
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links a:hover { text-decoration-color: currentColor; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links a:hover::after { color: rgb(var(--main-color-hover)); }
/* Codex修正：比較を先頭に並べ、短いラベルとSVGを一つのカプセルに収める。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links > span { max-width: 100%; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links > .comparison { order: -1; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links :is(.comparison, .review) a {
    box-sizing: border-box; min-height: 36px; gap: 6px; padding: 8px 14px;
    border: 0; border-radius: 999px; background: #f2f2f2;
    white-space: nowrap; text-decoration: none;
    font-size: 14px; font-weight: 600; line-height: 20px; color: var(--cdx-product-ink);
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links :is(.comparison, .review) a:hover { background: #e5e5e5; text-decoration: none; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links :is(.comparison, .review) a:active { background: #dcdcdc; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links :is(.comparison, .review) a:focus-visible { outline: 2px solid var(--cdx-product-ink); outline-offset: 3px; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links .cdx-collection-link-label { display: block; }
/* Codex修正：最安タイ・過去最安は、従来のcrimson背景と白文字のカプセルで強調する。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links .lowest a {
    min-height: 36px; padding: 8px 14px; border: 0; border-radius: 999px;
    background: rgba(var(--crimson-rgb), .9); color: #fff;
    font-size: 14px; font-weight: 700; line-height: 20px; text-decoration: none;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links .lowest a:hover { background: rgb(var(--crimson-rgb)); color: #fff; text-decoration: none; }
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links .lowest :is(svg, span) { position: static; color: #fff; fill: currentColor; }
/* Codex修正：用途別のSVGを20pxに揃え、比較は塗りつぶしの剣で小さくても形を判別しやすくする。 */
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links :is(.comparison, .review, .lowest) a::after {
    content: none; display: none;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links svg.cdx-collection-related-icon {
    display: block; flex: 0 0 20px; width: 20px; height: 20px;
    position: static; margin: 0; padding: 0; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
:is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .links svg.cdx-collection-related-icon[data-cdx-related-icon="comparison"] {
    fill: currentColor; stroke: none;
}

/*****************************************************************/
/*  Codex修正：スマホは写真を大きく見せ、購入先を2列にして縦の長さを抑える
/*****************************************************************/
@container collection-box (max-width: 540px) {
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .name { font-size: 26px; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-heading > :is(a, span) { display: block; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price { padding: 0; margin-top: 12px; border: 0; max-width: none; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .info .price .sale { font-size: 22px; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] div.container .image img { height: clamp(220px, 75cqw, 300px); }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] div.container > .image { padding: 12px; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-heading { padding-top: 20px; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li { max-width: none; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li:last-child:nth-child(odd) { grid-column: 1 / -1; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button li a { min-height: 46px; padding: 10px 8px; font-size: 13px; letter-spacing: 0; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "image" "heading" "description" "shops"; padding-top: 18px; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-heading { padding: 20px 0 0; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] .cdx-collection-details { margin: 14px 0 0; }
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] ul.button { margin-top: 18px; }
}
@media (max-width: 600px) {
    :is(body.single article div#entry, .cdx-quick-read-body) div.product[data-cdx-collection-ready="true"] { margin-block: 40px; }
}