/* ============================================================
   トップページ ([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:has(.cg-home) .p-mainVisual {
    display: none !important;
}
body:has(.cg-home) .p-postSlider {
    display: none !important;
}
body:has(.cg-home) .l-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 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;
}

/* ============================================================
   ヒーロー（値札）
   ============================================================ */
.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-hero--split-title {
    grid-template-rows: auto auto;
    column-gap: 48px;
    row-gap: 34px;
}
.cg-home .cg-hero--split-title .cg-hero-head {
    grid-column: 1 / -1;
    min-width: 0;
}
.cg-home .cg-hero--split-title .cg-hero-main {
    grid-column: 1;
    grid-row: 2;
}
.cg-home .cg-hero--split-title .cg-taghang-pool {
    grid-column: 2;
    grid-row: 2;
}
.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 h1.cg-h1--split {
    font-size: inherit;
    line-height: normal;
}
.cg-home .cg-h1-primary {
    display: block;
    max-width: 100%;
    font-size: clamp(26px, 3.1vw, 38px);
    line-height: 1.38;
    word-break: normal;
    word-break: auto-phrase;
    text-wrap: balance;
}
.cg-home .cg-h1-separator { display: none; }
.cg-home .cg-h1-secondary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 0;
    margin-top: 10px;
    color: var(--sumi-70);
    font-family: var(--disp);
    font-size: clamp(17px, 1.8vw, 22px);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .02em;
}
.cg-home .cg-h1-date {
    margin-left: .5em;
    color: var(--sumi-40);
    font-family: var(--num);
    font-size: .66em;
    font-weight: 500;
    letter-spacing: .03em;
    white-space: nowrap;
}
.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: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: flex-end;
    column-gap: 20px;
    row-gap: 5px;
    margin-bottom: 26px;
    border-bottom: 2px solid var(--sumi);
    padding-bottom: 12px;
}
.cg-home .cg-sechead > div { display: contents; }
.cg-home h2.cg-sechead-h2 {
    all: unset;
    display: block;
    font-family: var(--disp);
    font-weight: 400;
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 24px;
    margin: 0;
    letter-spacing: .015em;
    line-height: 1.4;
    color: var(--sumi);
    white-space: nowrap;
}
.cg-home .cg-sechead p { grid-column: 1; grid-row: 2; margin: 2px 0 0; font-size: 12.5px; color: var(--sumi-40); }
.cg-home .cg-more { grid-column: 2; grid-row: 2; 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 h3.cg-cname {
    all: unset;
    display: block;
    margin: 0;
    font: inherit;
    font-weight: 700;
}
.cg-home .cg-cname-main { display: block; }
.cg-home .cg-cname-detail {
    display: block;
    margin-top: 3px;
    color: var(--sumi-40);
    font-family: var(--num);
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.55;
}
.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); }
/* 前週比 列は中央寄せ（変動なしの「─」が右端に寄って見えるのを解消）。td.r より後に定義して勝たせる。 */
.cg-home .cg-table thead th.cg-chgcol,
.cg-home .cg-table td.cg-chgcol { text-align: center; }

/* ============================================================
   動向 3列
   ============================================================ */
.cg-home .cg-trends {
    display: grid;
    /* minmax(0,1fr): 1fr の暗黙 min-content（長いカード名等）でトラックが膨らみ
       コンテナ(.cg-wrap)を超過→3列目が右に見切れるのを防ぐ。ellipsis を効かせる。 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
}
.cg-home .cg-trends.cg-trends--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* min-width:0 必須: grid アイテムの既定 min-width:auto(=min-content) だと
   列(.cg-tcol)が中身の最小幅で膨らみ、トラック(minmax(0,1fr))を超えて画面外に見切れる。 */
.cg-home .cg-tcol { background: var(--paper-2); padding: 20px; min-width: 0; }
.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-heading-asof {
    display: inline-block;
    margin-left: .45em;
    color: var(--sumi-40);
    font-family: var(--num);
    font-size: .58em;
    font-weight: 500;
    letter-spacing: .02em;
    white-space: nowrap;
}
.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; }
/* 行は grid（サムネ / 名前(縮小可) / 値）。flex の basis 挙動で名前が省略されず
   値を画面外へ押し出す（＝動向の値が見切れる）のを確実に防ぐ。名前列 minmax(0,1fr) で ellipsis。 */
.cg-home .cg-tl li a { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px; margin: -8px; border-radius: 4px; }
.cg-home .cg-tl li { min-width: 0; }
.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 h4.cg-titem-h4 {
    all: unset;
    display: block;
    min-width: 0;
}
.cg-home .cg-titem-main,
.cg-home .cg-titem-detail {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cg-home .cg-titem-main { font-size: 13.5px; font-weight: 700; }
.cg-home .cg-titem-detail {
    margin-top: 2px;
    color: var(--sumi-40);
    font-family: var(--num);
    font-size: 11px;
    font-weight: 400;
}
.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;
}

/* カード共通CSSの a{height:100%} は、同一行で本文量が異なると内容を
   実寸より短く固定し、overflow:hidden のカード枠が最安販売行を切ってしまう。
   最新弾カードだけ内容量から高さを算出しつつ、短いカードは行高まで広げる。 */
.cg-home .cg-newpack .unified-card-item > a {
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
}

/* ============================================================
   パック
   ============================================================ */
.cg-home .cg-pack-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 24px;
    padding: 0 0 4px;
    overflow-x: auto;
    scrollbar-width: thin;
}
.cg-home .cg-pack-tab {
    flex: 0 0 auto;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    color: var(--sumi);
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.cg-home .cg-pack-tab span {
    margin-left: 6px;
    color: var(--sumi-40);
    font-family: var(--num);
    font-size: 11px;
    font-weight: 500;
}
.cg-home .cg-pack-tab.is-active {
    border-color: var(--sumi);
    background: var(--sumi);
    color: var(--paper);
}
.cg-home .cg-pack-tab.is-active span { color: rgba(247,245,239,.72); }
.cg-home .cg-pack-tab:focus-visible {
    outline: 3px solid rgba(29, 126, 105, .28);
    outline-offset: 2px;
}
.cg-home .cg-pack-panel[hidden],
.cg-home .cg-pack-item[hidden] { display: none !important; }
.cg-home .cg-packs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
}
.cg-home .cg-pack-more {
    display: block;
    width: min(360px, 100%);
    margin: 28px auto 0;
    border: 1px solid var(--sumi);
    border-radius: 4px;
    background: var(--paper-2);
    color: var(--sumi);
    padding: 12px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.cg-home .cg-pack-more:hover { background: var(--sumi); color: var(--paper); }
.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); }

/* ============================================================
   カード複合検索
   ============================================================ */
.cg-home .cg-home-card-search {
    border: 1.5px solid var(--sumi);
    background: var(--kraft);
    box-shadow: 6px 6px 0 var(--sumi);
    padding: 24px;
}
.cg-home .cg-home-card-search-grid {
    display: grid;
    grid-template-columns: minmax(130px, .8fr) minmax(150px, 1fr) minmax(220px, 1.4fr) minmax(130px, .8fr) auto;
    gap: 12px;
    align-items: end;
}
.cg-home .cg-home-card-search-field {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
}
.cg-home .cg-home-card-search-field > span {
    color: var(--sumi-70);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
}
.cg-home .cg-home-card-search-field select,
.cg-home .cg-home-card-search-field input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 44px;
    border: 1.5px solid rgba(21,21,28,.32);
    border-radius: 3px;
    background: var(--paper);
    color: var(--sumi);
    padding: 0 12px;
    font: inherit;
    font-size: 14px;
}
.cg-home .cg-home-card-search-field select:focus,
.cg-home .cg-home-card-search-field input:focus {
    border-color: var(--sumi);
    outline: 3px solid rgba(29, 126, 105, .2);
    outline-offset: 1px;
}
.cg-home .cg-home-card-search-submit {
    height: 44px;
    border: 1px solid var(--sumi);
    border-radius: 3px;
    background: var(--neon);
    color: var(--paper);
    padding: 0 20px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}
.cg-home .cg-home-card-search-submit:hover { background: var(--sumi); border-color: var(--sumi); }
.cg-home .cg-home-card-search-links {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1.5px solid var(--sumi);
    border-top: 0;
    background: var(--paper-2);
}
.cg-home .cg-home-card-search-links a {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-left: 1px solid var(--rule);
    color: var(--sumi);
    padding: 14px 16px;
    font-size: 12px;
    font-weight: 700;
}
.cg-home .cg-home-card-search-links a:first-child { border-left: 0; }
.cg-home .cg-home-card-search-links a:hover { background: var(--paper-2); color: var(--neon); }

/* ============================================================
   レスポンシブ（正本 @media 準拠）
   ============================================================ */
@media (max-width: 900px) {
    .cg-home .cg-hero { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
    .cg-home .cg-hero--split-title { row-gap: 26px; }
    .cg-home .cg-hero--split-title .cg-hero-head,
    .cg-home .cg-hero--split-title .cg-hero-main,
    .cg-home .cg-hero--split-title .cg-taghang-pool {
        grid-column: 1;
        grid-row: auto;
    }
    .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,
    .cg-home .cg-trends.cg-trends--2 { grid-template-columns: minmax(0, 1fr); }
    .cg-home .cg-packs { grid-template-columns: repeat(2, 1fr); }
    .cg-home h2.cg-sechead-h2 {
        white-space: normal;
        word-break: normal;
        word-break: auto-phrase;
    }
    .cg-home .cg-home-card-search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cg-home .cg-home-card-search-field--keyword { grid-column: 1 / -1; }
    .cg-home .cg-home-card-search-submit { width: 100%; }
    .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; }
    /* 長い見出しとCTAを横並びにすると、見出しが1文字幅まで潰れる。
       狭幅では見出し・説明・CTAを縦積みにして本文幅を全て使う。 */
    .cg-home .cg-sechead {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 20px;
    }
    .cg-home .cg-sechead > div {
        display: block;
        width: 100%;
        min-width: 0;
    }
    .cg-home h2.cg-sechead-h2 {
        font-size: clamp(16px, 5vw, 18px);
        line-height: 1.5;
        word-break: normal;
        text-wrap: pretty;
        overflow-wrap: normal;
    }
    .cg-home .cg-heading-asof {
        display: block;
        margin: 6px 0 0;
        font-size: .62em;
        white-space: normal;
    }
    .cg-home .cg-h1-date {
        display: block;
        flex-basis: 100%;
        margin: 2px 0 0;
        font-size: 12px;
    }
    .cg-home .cg-sechead p { line-height: 1.7; }
    .cg-home .cg-more {
        align-self: flex-start;
        max-width: 100%;
        white-space: normal;
        line-height: 1.5;
        overflow-wrap: break-word;
    }
    .cg-home .cg-home-card-search { padding: 16px; box-shadow: 4px 4px 0 var(--sumi); }
    .cg-home .cg-home-card-search-grid { grid-template-columns: minmax(0, 1fr); }
    .cg-home .cg-home-card-search-field--keyword { grid-column: auto; }
    .cg-home .cg-home-card-search-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cg-home .cg-home-card-search-links a:nth-child(odd) { border-left: 0; }
    .cg-home .cg-home-card-search-links a:nth-child(n+3) { border-top: 1px solid var(--rule); }
    /* 最新弾カードを3列へ詰めると、印刷種別ラベルとカード名が細切れになる。
       紹介カードは2列固定で、ラベルを1行のまま読める幅を確保する。 */
    .cg-home .cg-newpack .unified-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
    .cg-home .cg-newpack .card-parallel,
    .cg-home .cg-newpack .card-special-print {
        box-sizing: border-box;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .cg-home .cg-newpack .card-info,
    .cg-home .cg-newpack .card-prices,
    .cg-home .cg-newpack .price-row {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .cg-home .cg-newpack .price-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 4px;
        align-items: baseline;
    }
    .cg-home .cg-newpack .price-label,
    .cg-home .cg-newpack .price-value {
        white-space: nowrap;
    }
    .cg-home .cg-newpack .price-label { text-align: left; }
    .cg-home .cg-newpack .price-value {
        min-width: 0;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }
    /* 相場テーブルを狭幅に収める（前日比まで表示） */
    .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; }
}

/* ============================================================
   新弾（最新パック）枠の見出し
   ============================================================ */
.cg-home .cg-newpack-name {
    margin-left: 12px;
    font-size: 20px;
    color: var(--sumi-40, #666);
}
@media (max-width: 600px) {
    .cg-home .cg-newpack-name { display: block; margin-left: 0; margin-top: 4px; font-size: 17px; }
}