/* ======================================================
   Area article (editorial) — my-best.com style refresh
   2026-05-15
   - 白基調 / 黒見出し / 本文14px・line-height 1.9
   - ホロ帯・ナビーH2・カード装飾を削減
   - max-width 800px、線区切り中心
   ====================================================== */

.area-article--editorial {
    --mb-ink: #1a1a1a;
    --mb-text: #1a1a1a;
    --mb-sub: #6b7280;
    --mb-line: #e5e7eb;
    --mb-line-soft: #f3f4f6;
    --mb-accent: #022f7c;
    --mb-link: #2563eb;

    color: var(--mb-text);
    line-height: 1.9;
    font-size: 14px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}

/* ===== ヘッダー: ホロ帯削除・白地+下線のみ ===== */
.area-article--editorial .area-article__header {
    padding: 22px 0 22px;
    border-top: none;
    border-image: none;
    border-bottom: 1px solid var(--mb-line);
    background: transparent;
    margin-bottom: 28px;
}
.area-article--editorial .area-article__title {
    color: var(--mb-ink);
    font-family: inherit;
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 0;
    margin-bottom: 8px;
}
@media (min-width: 720px) {
    .area-article--editorial .area-article__title { font-size: 24px; }
}
.area-article--editorial .area-article__meta {
    color: var(--mb-sub);
    font-family: inherit;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
    margin: 4px 0 10px;
}
.area-article--editorial .area-article__lead {
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.9;
    margin-top: 8px;
}

/* ===== アイキャッチ（タイトル・リード直下のヒーロー画像） ===== */
.area-article--editorial .area-article__eyecatch {
    margin: 0 0 28px;
}
.area-article--editorial .area-article__eyecatch img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ds-radius-card);
}

/* ===== 目次 ===== */
.area-article--editorial .area-toc {
    background: var(--mb-line-soft);
    border: none;
    border-radius: 6px;
    padding: 18px 22px;
    margin: 0 0 36px;
}
.area-article--editorial .area-toc__title {
    font-size: 12px;
    font-weight: 700;
    color: var(--mb-sub);
    letter-spacing: 0.04em;
    margin-bottom: 8px;
}
.area-article--editorial .area-toc ol { padding-left: 20px; margin: 0; }
.area-article--editorial .area-toc li {
    font-size: 14px;
    line-height: 1.85;
    padding: 2px 0;
}
.area-article--editorial .area-toc a {
    color: var(--ds-color-text-link-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.area-article--editorial .area-toc a:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ===== body_html 本文 ===== */
.area-article--editorial .area-body {
    font-size: 14px;
    line-height: 1.9;
}
.area-article--editorial .area-body p {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--mb-text);
}
.area-article--editorial .area-body h2 {
    color: var(--mb-ink);
    font-family: inherit;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.45;
    margin: 48px 0 20px;
    padding: 0;
    border: none;
    background: none;
    letter-spacing: 0;
}
.area-article--editorial .area-body h3 {
    color: var(--mb-ink);
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.55;
    margin: 30px 0 12px;
    padding: 0;
    border: none;
}
@media (max-width: 480px) {
    .area-article--editorial .area-body h2 { font-size: 21px; }
    .area-article--editorial .area-body h3 { font-size: 17px; }
}

/* ===== body_html テーブル(分類表/key_facts/早見表) ===== */
.area-article--editorial .area-body table {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid var(--mb-line);
    border-bottom: 1px solid var(--mb-line);
    margin: 12px 0 24px;
    font-size: 13px;
    background: #fff;
}
.area-article--editorial .area-body thead { background: var(--mb-line-soft); }
.area-article--editorial .area-body th,
.area-article--editorial .area-body td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--mb-line);
    line-height: 1.7;
    color: var(--mb-text);
    font-weight: 400;
    vertical-align: top;
}
.area-article--editorial .area-body th {
    font-weight: 700;
    color: var(--mb-ink);
    white-space: nowrap;
    background: var(--mb-line-soft);
}
.area-article--editorial .area-body tbody th { background: transparent; }
.area-article--editorial .area-body tbody tr:last-child td,
.area-article--editorial .area-body tbody tr:last-child th { border-bottom: none; }

/* ===== body_html shop-mini → 線区切りリストへ ===== */
.area-article--editorial .area-body .shop-mini {
    border: none;
    border-top: 1px solid var(--mb-line);
    background: transparent;
    padding: 20px 0;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}
.area-article--editorial .area-body .shop-mini + .shop-mini {
    border-top: 1px solid var(--mb-line);
}
/* グループ末尾(直後にh2が来るパターン)は下線を引かない: 兄弟結合子で対応難しいので一律 */
.area-article--editorial .area-body .shop-mini__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--mb-ink);
    margin: 0 0 6px;
    line-height: 1.5;
}
.area-article--editorial .area-body .shop-mini__meta {
    color: var(--mb-sub);
    font-size: 12px;
    margin: 0 0 8px;
    line-height: 1.7;
    letter-spacing: 0;
}
.area-article--editorial .area-body .shop-mini__body {
    color: var(--mb-text);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

/* ===== FAQ: 線区切り・背景なし・+/− ===== */
.area-article--editorial .area-section--faq { margin: 56px 0 44px; }
.area-article--editorial .area-section--faq h2 {
    color: var(--mb-ink);
    font-size: 24px;
    font-weight: 800;
    border: none;
    padding: 0;
    background: none;
    margin: 0 0 20px;
    border-left: none;
}
.area-article--editorial .area-faq {
    border: none;
    border-top: 1px solid var(--mb-line);
    border-radius: 0;
    background: transparent;
    margin: 0;
    overflow: visible;
}
.area-article--editorial .area-faq:last-of-type {
    border-bottom: 1px solid var(--mb-line);
}
.area-article--editorial .area-faq summary {
    background: transparent;
    padding: 18px 36px 18px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--mb-ink);
}
.area-article--editorial .area-faq summary::before {
    content: "";
    margin: 0;
    color: var(--mb-ink);
}
.area-article--editorial .area-faq summary::after {
    right: 4px;
    color: var(--mb-sub);
    font-weight: 400;
}
.area-article--editorial .area-faq__answer {
    border-top: none;
    padding: 0 0 18px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--mb-text);
}

/* ===== 店舗関係者セクション ===== */
.area-article--editorial .area-section--store-relations { margin-top: 64px; }
.area-article--editorial .area-section--store-relations h2 {
    color: var(--mb-ink);
    font-size: 20px;
    font-weight: 700;
    border: none;
    padding: 0;
    background: none;
    margin: 0 0 16px;
    border-left: none;
}
.area-article--editorial .store-relations {
    background: var(--mb-line-soft);
    border: none;
    border-radius: 6px;
    padding: 22px 24px;
}
.area-article--editorial .store-relations__lead {
    font-size: 13px;
    line-height: 1.9;
    color: var(--mb-text);
}
.area-article--editorial .store-relations__url {
    background: #fff;
    border: 1px solid var(--mb-line);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 12px 0;
}
.area-article--editorial .store-relations__url-label {
    color: var(--mb-sub);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.area-article--editorial .store-relations__url-value {
    color: var(--mb-text);
    font-size: 12px;
    background: transparent;
}
.area-article--editorial .store-relations__btn {
    background: #fff;
    color: var(--mb-ink);
    border: 1px solid var(--mb-line);
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.area-article--editorial .store-relations__btn:hover {
    background: var(--mb-line-soft);
    color: var(--mb-ink);
}
.area-article--editorial .store-relations__btn--primary {
    background: var(--mb-ink);
    color: #fff;
    border-color: var(--mb-ink);
}
.area-article--editorial .store-relations__btn--primary:hover {
    background: #333;
    color: #fff;
}
.area-article--editorial .store-relations__note {
    color: var(--mb-sub);
    font-size: 11px;
    margin-top: 14px;
}

/* ===== モバイル微調整 ===== */
@media (max-width: 600px) {
    .area-article--editorial { padding-left: 14px; padding-right: 14px; }
    .area-article--editorial .area-section--faq h2 { font-size: 21px; }
    .area-article--editorial .area-body table { font-size: 12px; }
    .area-article--editorial .area-body th,
    .area-article--editorial .area-body td { padding: 10px 10px; }
}

/* ===== atobarai-picks: 参考記事風サイトカード縦並び ===== */
.area-article--editorial .area-body .atobarai-picks {
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    overflow: hidden;
    margin: 0 0 40px;
    box-shadow: var(--ds-shadow-card);
}
.area-article--editorial .area-body .atobarai-picks__header {
    background: var(--ds-color-bg-inverse);
    color: var(--ds-color-accent-gold);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-align: center;
    padding: 12px 16px;
    margin: 0;
}

/* ── pick-card 2カラム ── */
.area-article--editorial .area-body .pick-card {
    background: var(--ds-color-bg-elevated);
    border-top: 1px solid var(--ds-color-border);
    padding: 14px 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
/* 左カラム: ランクバッジ + ロゴ + 店名 */
.area-article--editorial .area-body .pick-card__col-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    width: 80px;
}
/* 右カラム: 特徴 + クーポン or CTA */
.area-article--editorial .area-body .pick-card__col-right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
/* ランクバッジ（::after で "位" 付与） */
.area-article--editorial .area-body .pick-card__rank {
    display: block;
    width: 100%;
    padding: 3px 0;
    background: var(--ds-color-rating);
    color: var(--ds-color-text-inverse);
    border-radius: var(--ds-radius-input);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    line-height: 1.5;
}
.area-article--editorial .area-body .pick-card__rank::after {
    content: '位';
}
/* サムネをリンク化 */
.area-article--editorial .area-body .pick-card__image-link {
    display: block;
    line-height: 0;
}
/* サムネイル */
.area-article--editorial .area-body .pick-card__thumb {
    width: 78px !important;
    height: 78px !important;
    flex-shrink: 0;
    border-radius: var(--ds-radius-card);
    background-color: var(--ds-color-bg-elevated);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--ds-color-border);
}
/* 店名ラベル */
.area-article--editorial .area-body .pick-card__label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text);
    text-align: center;
    line-height: 1.3;
    word-break: break-all;
}
.area-article--editorial .area-body .pick-card__feats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.area-article--editorial .area-body .pick-card__feat {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-color-text);
    padding-left: 16px;
    position: relative;
}
.area-article--editorial .area-body .pick-card__feat::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--ds-color-text-muted);
    font-size: 11px;
    top: 1px;
}
.area-article--editorial .area-body .pick-card__feat--pay {
    color: var(--ds-color-positive);
    font-weight: 700;
}
.area-article--editorial .area-body .pick-card__feat--pay::before {
    color: var(--ds-color-positive);
}
/* クーポンウィジェット（右カラム内）の外マージン除去 */
.area-article--editorial .area-body .pick-coupon {
    margin: 0;
}

/* ── pick-card CTA ── */
.area-article--editorial .area-body .pick-card__cta {
    display: block;
    background: var(--ds-color-positive);
    color: var(--ds-color-text-inverse);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 11px 16px;
    border-radius: var(--ds-radius-button);
    text-decoration: none;
    transition: opacity 0.15s;
}
.area-article--editorial .area-body .pick-card__cta:hover { opacity: 0.85; }

/* ===== pay-service-guide: 後払いサービス解説 ===== */
.area-article--editorial .area-body .pay-service-guide {
    margin: 0 0 24px;
}
.area-article--editorial .area-body .pay-service-guide__heading {
    font-size: 17px;
    font-weight: 700;
    color: var(--ds-color-text);
    margin: 0 0 12px;
    padding: 0;
    border: none;
    line-height: 1.45;
}
.area-article--editorial .area-body .pay-service-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    overflow: hidden;
    margin: 0 0 10px !important;
}
.area-article--editorial .area-body .pay-service-table thead {
    background: var(--ds-color-bg-subtle);
}
.area-article--editorial .area-body .pay-service-table th {
    padding: 9px 10px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-muted);
    text-align: center;
    border-bottom: 1px solid var(--ds-color-border);
    border-right: 1px solid var(--ds-color-border);
    white-space: nowrap;
}
.area-article--editorial .area-body .pay-service-table th:last-child { border-right: none; }
.area-article--editorial .area-body .pay-service-table td {
    padding: 10px 10px;
    text-align: center;
    border-bottom: 1px solid var(--ds-color-border);
    border-right: 1px solid var(--ds-color-border);
    color: var(--ds-color-text);
    line-height: 1.55;
    vertical-align: middle;
    font-weight: 400;
    background: var(--ds-color-bg-elevated);
}
.area-article--editorial .area-body .pay-service-table td:last-child { border-right: none; text-align: left; }
.area-article--editorial .area-body .pay-service-table tbody tr:last-child td { border-bottom: none; }
.area-article--editorial .area-body .pay-service-table__name {
    text-align: left !important;
    font-size: 13px;
    white-space: nowrap;
}
.area-article--editorial .area-body .pay-service-table__mark {
    font-size: 17px;
    font-weight: 700;
}
.area-article--editorial .area-body .pay-service-table__mark--ok {
    color: var(--ds-color-positive);
}
.area-article--editorial .area-body .pay-service-guide__note {
    font-size: 12px;
    color: var(--ds-color-text-subtle);
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.7;
}

/* ===== pay-compare: 後払い一覧表 ===== */
.area-article--editorial .area-body .pay-compare {
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    overflow: hidden;
    margin: 0 0 36px;
    box-shadow: var(--ds-shadow-card);
}
.area-article--editorial .area-body .pay-compare__header {
    background: var(--ds-color-bg-inverse);
    color: var(--ds-color-text-inverse);
    font-size: 13px;
    font-weight: 700;
    padding: 11px 16px;
    margin: 0;
    letter-spacing: 0.02em;
}
.area-article--editorial .area-body .pay-compare__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.area-article--editorial .area-body .pay-compare__table {
    width: 100%;
    min-width: 360px;
    border-collapse: collapse;
    font-size: 13px;
    margin: 0 !important;
    background: var(--ds-color-bg-elevated);
}
/* マトリクス版（ペイディ/メルペイ/atone/バンドルの4決済列） */
.area-article--editorial .area-body .pay-compare__table--matrix {
    min-width: 500px;
}
/* ゼブラで行を追いやすく */
.area-article--editorial .area-body .pay-compare__table--matrix tbody tr:nth-child(even) td {
    background: var(--ds-color-bg-paper);
}
.area-article--editorial .area-body .pay-compare__table thead {
    background: var(--ds-color-bg-subtle);
}
/* style.css の旧ネイビーヘッダー (.area-body thead th) を打ち消し、グレー地+ミュート文字に */
.area-article--editorial .area-body .pay-compare__table thead th {
    background: var(--ds-color-bg-subtle);
    color: var(--ds-color-text-muted);
    border-bottom: 1px solid var(--ds-color-border);
}
.area-article--editorial .area-body .pay-compare__table th,
.area-article--editorial .area-body .pay-compare__table td {
    border: none;
    border-bottom: 1px solid var(--ds-color-border);
    padding: 0;
    text-align: center;
    vertical-align: middle;
    color: var(--ds-color-text);
    font-weight: 400;
    line-height: 1.4;
}
.area-article--editorial .area-body .pay-compare__table tbody tr:last-child td {
    border-bottom: none;
}
.area-article--editorial .area-body .pay-compare__th-site {
    text-align: left !important;
    padding: 12px 14px;
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-muted);
    width: 1%;
    white-space: nowrap;
}
.area-article--editorial .area-body .pay-compare__th-pay {
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-muted);
    padding: 18px 6px;
    width: 16%;
    white-space: nowrap;
}
/* ヘッダーの決済ロゴ＋ラベル（ロゴを上、ラベルを下に縦積み） */
.area-article--editorial .area-body .pay-compare__table--matrix .pay-compare__th-pay {
    vertical-align: middle;
}
.area-article--editorial .area-body .pay-compare__paylogo {
    display: block;
    width: 42px;
    height: 42px;
    margin: 0 auto 7px;
    background-color: var(--ds-color-bg-elevated);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: var(--ds-radius-input);
    border: 1px solid var(--ds-color-border);
}
.area-article--editorial .area-body .pay-compare__paylabel {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-muted);
}
/* サイト列をスクロール時に固定（横スクロールでも店名が見える） */
.area-article--editorial .area-body .pay-compare__table--matrix .pay-compare__th-site,
.area-article--editorial .area-body .pay-compare__table--matrix .pay-compare__site {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ds-color-bg-elevated);
    box-shadow: 1px 0 0 var(--ds-color-border);
}
.area-article--editorial .area-body .pay-compare__table--matrix tbody tr:nth-child(even) .pay-compare__site {
    background: var(--ds-color-bg-paper);
}
.area-article--editorial .area-body .pay-compare__th-other {
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-muted);
    padding: 10px 8px;
}

/* サイトセル（ロゴを上・店名を下に縦積み、店名は青リンク色、セル全体がリンク） */
.area-article--editorial .area-body .pay-compare__site {
    padding: 12px 10px;
    text-align: center !important;
}
.area-article--editorial .area-body .pay-compare__site-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
}
.area-article--editorial .area-body .pay-compare__site-link:hover .pay-compare__site-name {
    text-decoration: underline;
}
.area-article--editorial .area-body .pay-compare__logo.card-block__image,
.area-article--editorial .area-body .pay-compare__logo {
    width: 52px !important;
    height: 52px !important;
    flex-shrink: 0;
    border-radius: var(--ds-radius-card);
    font-size: 8px;
    color: var(--ds-color-text-muted);
    background-color: var(--ds-color-bg-elevated);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 1px solid var(--ds-color-border);
}
/* ロゴ画像が無いサイト（ICHICA等）は枠なしで店名のみ見せる */
.area-article--editorial .area-body .pay-compare__logo--text {
    border: none !important;
    background: none !important;
    width: 52px !important;
    height: 52px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-subtle);
}
.area-article--editorial .area-body .pay-compare__site-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--ds-color-text-link-accent);
    line-height: 1.35;
    white-space: nowrap;
}

/* ◎ / △ / × / — セル */
.area-article--editorial .area-body .pay-compare__mark {
    font-size: 18px;
    font-weight: 700;
    padding: 12px 6px;
}
.area-article--editorial .area-body .pay-compare__mark--ok {
    color: var(--ds-color-danger);
}
.area-article--editorial .area-body .pay-compare__mark--maybe {
    color: var(--ds-color-warning);
    font-size: 15px;
}
.area-article--editorial .area-body .pay-compare__mark--ng {
    color: var(--ds-color-text-muted);
    font-size: 14px;
}
.area-article--editorial .area-body .pay-compare__mark--na {
    color: var(--ds-color-text-subtle);
    font-size: 14px;
}
.area-article--editorial .area-body .pay-compare__other {
    font-size: 12px;
    padding: 10px 8px;
    color: var(--ds-color-text-muted);
}
.area-article--editorial .area-body .pay-compare__note {
    font-size: 11px;
    color: var(--ds-color-text-subtle);
    padding: 8px 12px;
    margin: 0;
    background: var(--ds-color-bg-paper);
    border-top: 1px solid var(--ds-color-border);
}

/* ===== 早見表マトリクス: スマホ最適化（全5列を画面内に収める） ===== */
@media (max-width: 480px) {
    /* SPは横スクロール式（min-width維持）＋ロゴ大きめ。サイト列は sticky で固定 */
    .area-article--editorial .area-body .pay-compare__table--matrix {
        min-width: 440px;
        font-size: 13px;
    }
    .area-article--editorial .area-body .pay-compare__th-site {
        width: 1%;
        white-space: nowrap;
        padding: 10px 6px;
    }
    .area-article--editorial .area-body .pay-compare__th-pay {
        padding: 10px 2px;
        width: 12%;
    }
    .area-article--editorial .area-body .pay-compare__paylogo {
        width: 28px;
        height: 28px;
        margin-bottom: 4px;
    }
    .area-article--editorial .area-body .pay-compare__paylabel {
        font-size: 10px;
    }
    .area-article--editorial .area-body .pay-compare__site {
        padding: 10px 6px;
    }
    .area-article--editorial .area-body .pay-compare__mark {
        font-size: 16px;
        padding: 10px 2px;
    }
    .area-article--editorial .area-body .pay-compare__mark--maybe,
    .area-article--editorial .area-body .pay-compare__mark--ng,
    .area-article--editorial .area-body .pay-compare__mark--na {
        font-size: 13px;
    }
    .area-article--editorial .area-body .pay-compare__note {
        font-size: 10px;
        padding: 8px 10px;
    }
    /* 4サービス表（pay-service-table）も画面内に収める */
    .area-article--editorial .area-body .pay-service-table {
        font-size: 12px;
    }
    .area-article--editorial .area-body .pay-service-table th,
    .area-article--editorial .area-body .pay-service-table td {
        padding: 8px 6px;
    }
    .area-article--editorial .area-body .pay-service-table th {
        font-size: 10px;
    }
}

/* ===== pay-coupon: ピックカード内クーポンウィジェット ===== */
.area-article--editorial .area-body .pay-coupon {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.area-article--editorial .area-body .pick-coupon {
    margin: 8px 0 4px;
    background: var(--ds-color-state-positive-bg);
    border: 1px solid var(--ds-color-state-positive-border);
    border-radius: var(--ds-radius-card);
    padding: 12px;
}
.area-article--editorial .area-body .pay-coupon__feats {
    margin: 0;
    padding: 0;
    list-style: none;
}
.area-article--editorial .area-body .pay-coupon__feats li {
    font-size: 12px;
    color: var(--ds-color-text);
    padding-left: 12px;
    position: relative;
    line-height: 1.6;
}
.area-article--editorial .area-body .pay-coupon__feats li::before {
    content: '・';
    position: absolute;
    left: 0;
}
.area-article--editorial .area-body .pay-coupon__code-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ds-color-bg-elevated);
    border: 1px solid var(--ds-color-border-strong);
    border-radius: var(--ds-radius-input);
    padding: 8px 10px;
}
.area-article--editorial .area-body .pay-coupon__code {
    font-size: 15px;
    font-weight: 700;
    color: var(--ds-color-text);
    letter-spacing: 0.04em;
    flex: 1;
}
.area-article--editorial .area-body .pay-coupon__copy {
    background: var(--ds-color-text-muted);
    color: var(--ds-color-text-inverse);
    border: none;
    border-radius: var(--ds-radius-input);
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.15s;
    line-height: 1.4;
}
.area-article--editorial .area-body .pay-coupon__copy:hover {
    background: var(--ds-color-text);
}
.area-article--editorial .area-body .pay-coupon__note {
    margin: 0;
    font-size: 11px;
    color: var(--ds-color-text-muted);
    line-height: 1.5;
}
.area-article--editorial .area-body .pay-coupon__cta {
    display: block;
    background: var(--ds-color-positive);
    color: var(--ds-color-text-inverse) !important;
    text-align: center;
    border-radius: var(--ds-radius-input);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    transition: opacity 0.15s;
}
.area-article--editorial .area-body .pay-coupon__cta:hover {
    opacity: 0.85;
}

/* ===== 決済チップ（site-block 共用） ===== */
.area-article--editorial .area-body .atobarai-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px 3px 5px;
    border-radius: 4px;
    line-height: 1.6;
}
.area-article--editorial .area-body .atobarai-chip__logo {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    flex-shrink: 0;
}
.area-article--editorial .area-body .atobarai-chip--ok {
    background: var(--ds-color-state-positive-bg);
    color: var(--ds-color-state-positive-text);
    border: 1px solid var(--ds-color-state-positive-border);
}
.area-article--editorial .area-body .atobarai-chip--ng {
    background: var(--ds-color-bg-subtle);
    color: var(--ds-color-text-muted);
    border: 1px solid var(--ds-color-border);
}
.area-article--editorial .area-body .atobarai-chip--other {
    background: var(--ds-color-state-info-bg);
    color: var(--ds-color-state-info-text);
    border: 1px solid var(--ds-color-state-info-border);
}

/* ===== site-block: 各サイト詳細セクション（本文フロー、カード枠なし） ===== */
.area-article--editorial .area-body .site-block {
    padding: 0;
    margin-top: 36px;
    scroll-margin-top: 80px;
    border-top: 2px solid var(--ds-color-border-strong);
    padding-top: 20px;
}
.area-article--editorial .area-body .site-block__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ds-color-text);
    margin: 0 0 8px;
    line-height: 1.45;
    padding: 0;
}
.area-article--editorial .area-body .site-block__name .site-block__tagline {
    font-size: 13px;
    font-weight: 400;
    color: var(--ds-color-text-muted);
}
.area-article--editorial .area-body .site-block__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 0 0 12px;
}

/* ── サイト画像（チップと spec 表の間） ── */
.area-article--editorial .area-body .site-block__figure {
    margin: 0 0 12px;
    padding: 0;
}
.area-article--editorial .area-body .site-block__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-color-border);
    background: var(--ds-color-bg-paper);
}

/* アフィリエイトバナー（300×250固定比率） */
.area-article--editorial .area-body .site-block__figure--banner {
    margin: 0 0 12px;
    padding: 0;
    text-align: center;
}
.area-article--editorial .area-body .site-block__image--banner {
    aspect-ratio: auto !important;
    height: auto !important;
    max-width: 300px;
    width: 100%;
    border-radius: var(--ds-radius-card);
    border: 1px solid var(--ds-color-border);
    display: block;
    margin: 0 auto;
}

/* ── 開催中キャンペーン（プロモ・グリーン基調） ── */
.area-article--editorial .area-body .site-block__campaign {
    margin: 16px 16px 26px;
    padding: 14px;
    background: var(--ds-color-state-positive-bg);
    border: 1px solid var(--ds-color-state-positive-border);
    border-radius: var(--ds-radius-card);
}
.area-article--editorial .area-body .site-block__campaign-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-color-text);
    margin: 0 0 11px;
}
.area-article--editorial .area-body .site-block__campaign-tag {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ds-color-text-inverse);
    background: var(--ds-color-state-positive-text);
    border-radius: var(--ds-radius-chip);
    padding: 3px 9px;
    line-height: 1.4;
}
.area-article--editorial .area-body .site-block__campaign-banner {
    margin: 0 0 13px;
}
.area-article--editorial .area-body .site-block__campaign-banner img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ds-radius-input);
}
.area-article--editorial .area-body .site-block__campaign-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.area-article--editorial .area-body .site-block__campaign-item {
    font-size: 13px;
    line-height: 1.6;
    color: var(--ds-color-text-muted);
    margin: 0;
    padding-left: 22px;
    position: relative;
}
.area-article--editorial .area-body .site-block__campaign-item::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-color-state-positive-text);
}
.area-article--editorial .area-body .site-block__campaign-name {
    display: block;
    font-weight: 700;
    color: var(--ds-color-text);
    margin-bottom: 1px;
}

/* ── specs table ── */
.area-article--editorial .area-body .site-block__specs {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    border: 1px solid var(--ds-color-border);
    border-radius: var(--ds-radius-card);
    margin: 0 0 12px !important;
    background: var(--ds-color-bg-paper);
    overflow: hidden;
}
.area-article--editorial .area-body .site-block__specs th,
.area-article--editorial .area-body .site-block__specs td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--ds-color-border);
    text-align: left;
    vertical-align: middle;
    line-height: 1.5;
}
.area-article--editorial .area-body .site-block__specs tbody tr:last-child th,
.area-article--editorial .area-body .site-block__specs tbody tr:last-child td {
    border-bottom: none;
}
.area-article--editorial .area-body .site-block__specs th {
    font-weight: 600;
    color: var(--ds-color-text-muted);
    white-space: nowrap;
    width: 7em;
    background: var(--ds-color-bg-subtle);
    font-size: 12px;
}
.area-article--editorial .area-body .site-block__specs td {
    color: var(--ds-color-text);
    font-weight: 500;
}

/* ── editorial 本文 ── */
.area-article--editorial .area-body .site-block > p:not(.site-block__cta-wrap) {
    padding: 0 16px;
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--ds-color-text);
}

/* ── 編集部コメント (verdict) ── */
.area-article--editorial .area-body .site-block__verdict {
    margin: 16px 16px 0;
    background: var(--ds-color-state-info-bg);
    border: 1px solid var(--ds-color-state-info-border);
    border-radius: var(--ds-radius-input);
    padding: 12px 14px;
}
.area-article--editorial .area-body .site-block__verdict-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--ds-color-state-info-text);
    margin: 0 0 5px;
}
.area-article--editorial .area-body .site-block__verdict p:last-child {
    font-size: 13px;
    line-height: 1.75;
    color: var(--ds-color-text);
    margin: 0;
    padding: 0;
}

/* ── おすすめポイント（本文フロー内・ブロックなし） ── */
.area-article--editorial .area-body .site-block__points {
    list-style: none;
    margin: 0;
    padding: 12px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.area-article--editorial .area-body .site-block__points li {
    font-size: 13px;
    line-height: 1.65;
    color: var(--ds-color-text);
    padding-left: 18px;
    position: relative;
}
.area-article--editorial .area-body .site-block__points li::before {
    content: "★";
    position: absolute;
    left: 0;
    font-size: 10px;
    color: var(--ds-color-rating);
    top: 3px;
}
.area-article--editorial .area-body .site-block__points li strong {
    display: inline;
    font-size: 13px;
    font-weight: 700;
    color: var(--ds-color-text);
}

/* ── CTA ── */
.area-article--editorial .area-body .site-block__cta-wrap {
    padding: 12px 0 4px;
    margin: 0 !important;
}
.area-article--editorial .area-body .site-block__cta {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--ds-color-text-inverse);
    background: var(--ds-color-text);
    border-radius: var(--ds-radius-button);
    padding: 13px 16px;
    text-decoration: none;
    transition: opacity 0.15s;
    box-sizing: border-box;
}
.area-article--editorial .area-body .site-block__cta:hover { opacity: 0.8; }
.area-article--editorial .area-body .site-block__cta::after { content: none; }