/* ============================================================
   トップページ ([cardgame_homepage] ショートコード)
   正本: docs/superpowers/specs/assets/2026-07-18-homepage-design-AUTHORITATIVE.html
   和紙/クラフト紙 + 墨(#15151c) + ネオンピンク(#ff2d6f) のエディトリアル。
   フォント: Zen Antique(明朝見出し) / Zen Kaku Gothic New(UI) / Oswald(数字)。
   - 正本をそのまま再現。レア度チップ色は PHP 単一ソース
     cardgame_get_rarity_color() を inline で使用（CSSに再定義しない）。
   - SWELL コンテンツ内に挟まるため、ティッカー/墨ストリップは 100vw で
     フルブリードさせ、内容は 1180px に収める。
   ============================================================ */

/* ===== デザイントークン（正本 :root を正とする・.cg-home スコープ） ===== */
.cg-home {
    --sumi: #15151c;
    --sumi-70: rgba(21,21,28,.62);
    --sumi-40: rgba(21,21,28,.38);
    --paper: #f7f5ef;
    --paper-2: #ffffff;
    --kraft: #e5dcc7;
    --kraft-dark: #cbbfa2;
    --neon: #ff2d6f;
    --indigo: #23348c;
    --kohaku: #f0b429;
    --mizu: #1b8f9e;
    --rule: rgba(21,21,28,.14);

    --disp: "Zen Antique", "Yu Mincho", "YuMincho", serif;
    --ui: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", sans-serif;
    --num: "Oswald", "Zen Kaku Gothic New", sans-serif;

    position: relative;
    z-index: 0;
    color: var(--sumi);
    font-family: var(--ui);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
}

/* 罫線テクスチャの紙地（コンテンツ背後をフルブリードで塗る） */
.cg-home::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: var(--paper);
    background-image: radial-gradient(rgba(21,21,28,.045) 1px, transparent 1px);
    background-size: 22px 22px;
}
/* SWELL コンテンツラッパの白背景を透過させ、紙地を見せる */
body.page .l-mainContent,
body.page #main_content,
body.page .l-content,
body.page .c-content,
body.page .l-mainContent__inner,
body.page .post_content,
body.page .l-container {
    background: transparent !important;
}
/* SWELL 既定の記事本文の上下余白を殺し、正本の余白設計に委ねる */
.cg-home a { color: inherit; text-decoration: none; }
.cg-home :focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.cg-home .cg-num {
    font-family: var(--num);
    font-feature-settings: "tnum";
    letter-spacing: .02em;
}

/* 内容の最大幅（正本 .wrap = 1180 / padding 24） */
.cg-home .cg-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   ティッカー（LIVE 相場・フルブリード・流れる）
   ============================================================ */
.cg-home .cg-ticker {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--sumi);
    color: var(--paper);
    border-top: 1px solid var(--sumi);
    border-bottom: 1px solid var(--sumi);
    overflow: hidden;
    height: 38px;
    display: flex;
    align-items: center;
}
.cg-home .cg-ticker-tag {
    flex: none;
    background: var(--neon);
    color: #fff;
    height: 38px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    font-size: 11px;
    letter-spacing: .18em;
    font-weight: 700;
    white-space: nowrap;
    /* 流れる項目（.cg-ticker-track は transform で独自スタッキング）より前面に固定し、
       札の裏で文字が消えるようにする。右端に軽い影で境界をきれいに。 */
    position: relative;
    z-index: 2;
    box-shadow: 6px 0 8px -4px rgba(0,0,0,.35);
}
.cg-home .cg-ticker-tag i {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #fff;
    animation: cg-blink 1.6s infinite;
}
@keyframes cg-blink { 50% { opacity: .2; } }
.cg-home .cg-ticker-track {
    display: flex;
    gap: 34px;
    white-space: nowrap;
    padding-left: 24px;
    animation: cg-slide 42s linear infinite;
    position: relative;
    z-index: 1;
}
@keyframes cg-slide { to { transform: translateX(-50%); } }
.cg-home .cg-ticker:hover .cg-ticker-track { animation-play-state: paused; }
.cg-home .cg-tk {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    color: var(--paper);
}
.cg-home .cg-tk b { font-weight: 500; color: rgba(247,245,239,.72); }
.cg-home .cg-tk .p { font-family: var(--num); font-size: 15px; }
.cg-home .cg-tk .up { color: #ff6b9d; }
.cg-home .cg-tk .dn { color: #5fd3df; }
.cg-home .cg-tk .fl { color: rgba(247,245,239,.4); }

/* ============================================================
   ヒーロー（値札）
   ============================================================ */
.cg-home .cg-hero {
    padding: 72px 0 64px;
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 56px;
    align-items: start;
}
.cg-home .cg-hero-main { min-width: 0; }
.cg-home .cg-eyebrow {
    font-size: 11px;
    letter-spacing: .22em;
    font-weight: 700;
    color: var(--neon);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}
.cg-home .cg-eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--rule); }

/* h1（SWELL の見出し装飾を完全に打ち消して正本の明朝に戻す） */
.cg-home h1.cg-h1 {
    all: unset;
    display: block;
    font-family: var(--disp);
    font-weight: 400;
    font-size: clamp(34px, 5.4vw, 60px);
    line-height: 1.28;
    letter-spacing: .01em;
    margin: 0 0 20px;
    color: var(--sumi);
}
.cg-home .cg-h1 em {
    font-style: normal;
    position: relative;
    white-space: nowrap;
}
.cg-home .cg-h1 em::after {
    content: "";
    position: absolute;
    left: -2px; right: -2px; bottom: .08em;
    height: .34em;
    background: var(--kohaku);
    opacity: .5;
    z-index: -1;
}
.cg-home .cg-lede {
    font-size: 15px;
    color: var(--sumi-70);
    max-width: 44ch;
    margin: 0 0 34px;
    line-height: 1.7;
}
.cg-home .cg-lede b { font-weight: 700; color: var(--sumi); }

.cg-home .cg-search {
    display: flex;
    border: 2px solid var(--sumi);
    background: var(--paper-2);
    box-shadow: 5px 5px 0 var(--sumi);
    max-width: 620px;
}
.cg-home .cg-search input {
    flex: 1;
    border: 0;
    background: none;
    padding: 16px 18px;
    font-family: var(--ui);
    font-size: 15px;
    color: var(--sumi);
    min-width: 0;
}
.cg-home .cg-search input::placeholder { color: var(--sumi-40); }
.cg-home .cg-search input:focus { outline: none; }
.cg-home .cg-search button {
    border: 0;
    border-left: 2px solid var(--sumi);
    background: var(--neon);
    color: #fff;
    padding: 0 30px;
    font-family: var(--ui);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background .18s;
    white-space: nowrap;
}
.cg-home .cg-search button:hover { background: var(--sumi); }
.cg-home .cg-hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12.5px;
    color: var(--sumi-40);
}
.cg-home .cg-hints a {
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 4px 13px;
    color: var(--sumi-70);
    transition: .18s;
}
.cg-home .cg-hints a:hover { border-color: var(--sumi); color: var(--sumi); background: var(--paper-2); }

/* 署名要素：値札 */
.cg-home .cg-taghang { padding-top: 6px; perspective: 900px; }
.cg-home .cg-tag {
    position: relative;
    background: var(--kraft);
    border: 1.5px solid var(--kraft-dark);
    padding: 52px 26px 24px;
    transform: rotate(-2.2deg);
    transform-origin: 50% 0;
    box-shadow: 0 18px 40px -18px rgba(21,21,28,.45);
    clip-path: polygon(0 26px, 26px 0, 100% 0, 100% 100%, 0 100%);
    animation: cg-sway 7s ease-in-out infinite;
}
@keyframes cg-sway { 0%,100% { transform: rotate(-2.2deg); } 50% { transform: rotate(1.4deg); } }
.cg-home .cg-tag::before {
    content: "";
    position: absolute;
    top: 14px; left: 15px;
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--kraft-dark);
    transform: rotate(-45deg) translate(-6px, 4px);
}
.cg-home .cg-tag-string {
    position: absolute;
    top: -6px; left: 6px;
    width: 64px; height: 44px;
    border-top: 2px solid var(--neon);
    border-left: 2px solid var(--neon);
    border-radius: 30px 0 0 0;
    transform: rotate(-8deg);
}
.cg-home .cg-tag-kind { font-size: 10.5px; letter-spacing: .2em; font-weight: 700; color: rgba(21,21,28,.5); }
.cg-home .cg-tag-thumb {
    margin: 12px 0 4px;
    text-align: center;
}
.cg-home .cg-tag-thumb-img {
    display: inline-block;
    max-width: 100%;
    max-height: 150px;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 6px 16px -8px rgba(21,21,28,.5);
    background: var(--paper);
}
.cg-home .cg-tag-chg {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 8px 0 2px;
    font-family: var(--num);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .02em;
}
.cg-home .cg-tag-chg i { font-family: var(--sans, inherit); font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .12em; color: var(--sumi-40); }
.cg-home .cg-tag-chg.up { color: var(--neon); }
.cg-home .cg-tag-chg.dn { color: var(--mizu); }
.cg-home .cg-tag-name {
    font-family: var(--disp);
    font-weight: 400;
    font-size: 23px;
    line-height: 1.4;
    margin: 6px 0 2px;
    color: var(--sumi);
}
.cg-home .cg-tag-meta { font-family: var(--num); font-size: 12px; color: var(--sumi-40); letter-spacing: .06em; }
.cg-home .cg-tag-rule { height: 1px; background: var(--kraft-dark); margin: 16px 0 12px; }
.cg-home .cg-tag-label { font-size: 10.5px; letter-spacing: .16em; font-weight: 700; color: rgba(21,21,28,.5); }
.cg-home .cg-tag-price {
    font-family: var(--num);
    font-weight: 600;
    font-size: 44px;
    line-height: 1;
    letter-spacing: -.01em;
    margin: 2px 0 4px;
    color: var(--sumi);
}
.cg-home .cg-tag-price small { font-size: 19px; font-weight: 400; margin-right: 2px; }
.cg-home .cg-tag-shop { font-size: 12px; color: var(--sumi-70); }
.cg-home .cg-tag-shop b { font-weight: 700; }
.cg-home .cg-tag-foot {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px dashed var(--kraft-dark);
    font-size: 11.5px;
    color: var(--sumi-40);
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

/* ============================================================
   数値ストリップ（墨・フルブリード）
   ============================================================ */
.cg-home .cg-strip {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    border-top: 1px solid var(--sumi);
    border-bottom: 1px solid var(--sumi);
    background: var(--sumi);
    color: var(--paper);
}
.cg-home .cg-strip-in {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 auto;
}
.cg-home .cg-st {
    padding: 22px 24px;
    border-left: 1px solid rgba(247,245,239,.16);
}
.cg-home .cg-st:first-child { border-left: 0; }
.cg-home .cg-st dt { font-size: 11px; letter-spacing: .16em; color: rgba(247,245,239,.5); margin-bottom: 6px; }
.cg-home .cg-st dd { margin: 0; font-family: var(--num); font-size: 29px; font-weight: 400; line-height: 1; color: var(--paper); }
.cg-home .cg-st dd i { font-style: normal; font-family: var(--ui); font-size: 12px; font-weight: 500; color: rgba(247,245,239,.5); margin-left: 4px; }

/* ============================================================
   セクション共通
   ============================================================ */
.cg-home .cg-blk { padding: 74px 0; }
.cg-home .cg-blk--tight { padding-top: 0; }
.cg-home .cg-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--sumi);
    padding-bottom: 12px;
}
.cg-home h2.cg-sechead-h2 {
    all: unset;
    display: block;
    font-family: var(--disp);
    font-weight: 400;
    font-size: 26px;
    margin: 0;
    letter-spacing: .03em;
    line-height: 1.4;
    color: var(--sumi);
}
.cg-home .cg-sechead p { margin: 2px 0 0; font-size: 12.5px; color: var(--sumi-40); }
.cg-home .cg-more { font-size: 12.5px; font-weight: 700; color: var(--neon); white-space: nowrap; }
.cg-home .cg-more:hover { text-decoration: underline; }

/* SWELL テーマが見出しに付ける絶対配置の ::before/::after 装飾を打ち消す。
   （放置すると SWELL の h2::before の 2px 罫バーや h3::before のドットが
     絶対配置で本体下部へ飛び、墨のライン/青ドットの残像になる） */
.cg-home h1.cg-h1::before,
.cg-home h1.cg-h1::after,
.cg-home h2.cg-sechead-h2::before,
.cg-home h2.cg-sechead-h2::after,
.cg-home h3.cg-pk-name::before,
.cg-home h3.cg-pk-name::after,
.cg-home h3.cg-tcol-h3::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
}

/* ============================================================
   相場テーブル（高額買取ランキング）
   ============================================================ */
.cg-home .cg-table-wrap { overflow-x: auto; }
.cg-home table.cg-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper-2);
    border: 1px solid var(--rule);
}
.cg-home .cg-table thead th {
    font-size: 10.5px;
    letter-spacing: .14em;
    color: var(--sumi-40);
    font-weight: 700;
    text-align: left;
    padding: 11px 14px;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
    background: none;
}
.cg-home .cg-table thead th.r,
.cg-home .cg-table td.r { text-align: right; }
.cg-home .cg-table tbody tr { border-bottom: 1px solid rgba(21,21,28,.07); transition: background .15s; }
.cg-home .cg-table tbody tr:hover { background: #fffdf7; }
.cg-home .cg-table tbody tr:last-child { border-bottom: 0; }
.cg-home .cg-table td { padding: 13px 14px; font-size: 14px; vertical-align: middle; }
.cg-home .cg-rk { font-family: var(--num); font-size: 13px; color: var(--sumi-40); width: 38px; }
.cg-home .cg-th-img { width: 46px; }
.cg-home .cg-td-img { width: 46px; padding-right: 4px; }
.cg-home .cg-cthumb {
    display: block;
    width: 36px;
    aspect-ratio: 3 / 4;
    border-radius: 3px;
    border: 1px solid var(--rule);
    overflow: hidden;
    background: linear-gradient(150deg, #e9e5dc, #d6d0c2);
}
.cg-home .cg-cthumb img,
.cg-home .cg-cthumb .cg-cthumb-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.cg-home .cg-cthumb-noimg { display: block; width: 100%; height: 100%; }
.cg-home .cg-cname { font-weight: 700; }
.cg-home .cg-cno { font-family: var(--num); font-size: 11.5px; color: var(--sumi-40); margin-left: 8px; letter-spacing: .05em; }
.cg-home .cg-chip {
    display: inline-block;
    font-family: var(--num);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    padding: 1px 7px;
    border-radius: 2px;
    color: #fff;
    margin-left: 8px;
    vertical-align: 1px;
    white-space: nowrap;
}
.cg-home .cg-price { font-family: var(--num); font-size: 17px; font-weight: 500; white-space: nowrap; }
.cg-home .cg-sub { font-family: var(--num); font-size: 13px; color: var(--sumi-40); white-space: nowrap; }
.cg-home .cg-chg { font-family: var(--num); font-size: 13px; font-weight: 500; width: 78px; white-space: nowrap; }
.cg-home .cg-chg.up { color: var(--neon); }
.cg-home .cg-chg.dn { color: var(--mizu); }
.cg-home .cg-chg.fl { color: var(--sumi-40); }

/* ============================================================
   動向 3列
   ============================================================ */
.cg-home .cg-trends {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.cg-home .cg-tcol { background: var(--paper-2); padding: 20px; }
.cg-home h3.cg-tcol-h3 {
    all: unset;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .14em;
    font-weight: 700;
    color: var(--sumi);
    line-height: 1.4;
}
.cg-home .cg-tcol-h3::before {
    content: "" !important;
    position: static !important;
    top: auto !important; left: auto !important;
    width: 9px !important; height: 9px !important;
    border-radius: 50% !important;
    border: 0 !important;
    flex: 0 0 auto;
    display: inline-block !important;
}
.cg-home .cg-tcol.up .cg-tcol-h3::before { background: var(--neon); }
.cg-home .cg-tcol.dn .cg-tcol-h3::before { background: var(--mizu); }
.cg-home .cg-tcol.nw .cg-tcol-h3::before { background: var(--indigo); }
.cg-home .cg-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cg-home .cg-tl li a { display: flex; align-items: center; gap: 12px; padding: 8px; margin: -8px; border-radius: 4px; }
.cg-home .cg-tl li a:hover { background: var(--paper); }
.cg-home .cg-thumb {
    width: 40px; height: 56px;
    flex: none;
    border-radius: 3px;
    background: linear-gradient(150deg, #e9e5dc, #d6d0c2);
    border: 1px solid var(--rule);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cg-home .cg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-home .cg-tinfo { flex: 1; min-width: 0; }
.cg-home .cg-tinfo b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cg-home .cg-tinfo span { font-family: var(--num); font-size: 12px; color: var(--sumi-40); }
.cg-home .cg-tval { font-family: var(--num); font-size: 14px; font-weight: 500; white-space: nowrap; }
.cg-home .cg-tval.up { color: var(--neon); }
.cg-home .cg-tval.dn { color: var(--mizu); }
.cg-home .cg-tval.wait { color: var(--sumi-40); }
.cg-home .cg-empty {
    font-size: 13px;
    color: var(--sumi-40);
    border: 1px dashed var(--rule);
    border-radius: 4px;
    padding: 22px 14px;
    text-align: center;
    margin: 0;
}

/* ============================================================
   パック
   ============================================================ */
.cg-home .cg-packs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.cg-home .cg-pk { display: block; margin: 0; }
.cg-home .cg-pk-img {
    aspect-ratio: 5 / 7;
    background: linear-gradient(160deg, #eeeae0, #dcd5c5);
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    transition: transform .25s, box-shadow .25s;
}
/* 全パックタイルを 5:7 枠に統一。パックによって native 比が違い、cover だと
   切れる/切れないが混在するため contain（全体を収める）で統一。余白は
   タイルのクラフト色背景が入って自然に見える。.cg-pack-image を絶対配置で
   枠に固定し、intrinsic サイズが aspect-ratio 枠を押し広げないようにする。 */
.cg-home .cg-pk-img .cg-pack-image,
.cg-home .cg-pk-img .cg-pack-image[data-category] {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    background: transparent;
    border-radius: 0;
}
.cg-home .cg-pk-img img,
.cg-home .cg-pk-img[data-pack-cat="deck_box"] img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cg-home .cg-pk:hover .cg-pk-img { transform: translateY(-5px); box-shadow: 0 16px 28px -14px rgba(21,21,28,.5); }
.cg-home .cg-pk-cat {
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    background: var(--sumi);
    color: var(--paper);
    font-size: 9.5px;
    letter-spacing: .1em;
    padding: 3px 8px;
}
.cg-home .cg-pk-noimg {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--sumi-40); font-size: 12px;
}
.cg-home h3.cg-pk-name {
    all: unset;
    display: block;
    margin: 10px 0 3px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--sumi);
    word-break: break-word;
}
.cg-home .cg-pk .cg-pk-top { font-family: var(--num); font-size: 12px; color: var(--sumi-40); }
.cg-home .cg-pk .cg-pk-top b { color: var(--neon); font-weight: 500; }

/* ============================================================
   カテゴリ
   ============================================================ */
.cg-home .cg-cats { display: flex; flex-wrap: wrap; gap: 10px; }
.cg-home .cg-cat {
    border: 1.5px solid var(--sumi);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    background: var(--paper-2);
    transition: .18s;
    color: var(--sumi);
}
.cg-home .cg-cat:hover { background: var(--sumi); color: var(--paper); }

/* ============================================================
   レスポンシブ（正本 @media 準拠）
   ============================================================ */
@media (max-width: 900px) {
    .cg-home .cg-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
    .cg-home .cg-taghang { max-width: 330px; }
    .cg-home .cg-strip-in { grid-template-columns: 1fr 1fr; }
    .cg-home .cg-st { border-top: 1px solid rgba(247,245,239,.16); }
    .cg-home .cg-st:nth-child(-n+2) { border-top: 0; }
    .cg-home .cg-st:nth-child(odd) { border-left: 0; }
    .cg-home .cg-trends { grid-template-columns: 1fr; }
    .cg-home .cg-packs { grid-template-columns: repeat(2, 1fr); }
    .cg-home .cg-hide-sp { display: none; }
    .cg-home .cg-blk { padding: 52px 0; }
}
@media (max-width: 600px) {
    /* 狭幅では内側余白を詰める（SWELL の入れ子コンテナ分だけ実効幅が狭いため） */
    .cg-home .cg-wrap { padding: 0 16px; }
    /* 相場テーブルを狭幅に収める（前日比まで表示） */
    .cg-home .cg-table thead th,
    .cg-home .cg-table td { padding: 10px 5px; }
    .cg-home .cg-table td { font-size: 12.5px; }
    .cg-home .cg-price { font-size: 13.5px; }
    .cg-home .cg-rk { width: 18px; }
    .cg-home .cg-th-img,
    .cg-home .cg-td-img { width: 34px; padding-right: 3px; }
    .cg-home .cg-cthumb { width: 28px; }
    .cg-home .cg-chg { width: auto; }
    .cg-home .cg-cname { word-break: break-word; }
    /* 型番はカード名の下へ回して列幅を圧縮 */
    .cg-home .cg-cno { display: block; margin-left: 0; margin-top: 2px; }
    .cg-home .cg-chip { margin-left: 6px; }
    /* 値札は中央寄せで大きすぎないように */
    .cg-home .cg-taghang { max-width: 340px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
    .cg-home * { animation: none !important; transition: none !important; }
}