/* v5 (2026-09-29, includes/v5-design.php): 写真調ヒーロー画像の撤去に伴う余白の調整と、編集部の署名ブロック。
   v3.css / v4.css の後に読む。 */

/* トップの PC: ヒーロー画像を右列に置く 2 列グリッド(v2.css M10)。画像を出さないので 1 列に戻す。 */
@media (min-width:1024px){
  .stnv2-deal:not(:has(>.stnv2-hero)){grid-template-columns:minmax(0,1fr)}
}

/* 編集部の署名(記事・収益ページの本文末尾に 1 つ) */
.stnv5-signature{box-sizing:border-box;display:flex;align-items:center;gap:12px;max-width:760px;margin:32px 0 8px;padding:14px 0 0;border-top:1px solid #dbe4ef}
.stnv5-signature__logo{flex:0 0 40px;width:40px;height:40px;border:1px solid #d5e5f4;border-radius:50%;object-fit:cover;background:#fff}
.stnv5-signature__body{min-width:0}
body .stnv5-signature p{margin:0;font-size:14px;line-height:1.5}
body .stnv5-signature .stnv5-signature__name{font-family:inherit;font-size:16px;font-weight:700;color:#0b2545}
.stnv5-signature__links{display:flex;flex-wrap:wrap;column-gap:16px}
body .stnv5-signature__links a{display:inline-flex;min-height:48px;align-items:center;color:#475569;text-decoration:underline;text-underline-offset:2px}

/* 本文に残す日付入りの確認日(旧 eyebrow「公式確認日：YYYY年M月D日」)。ピルや日付印にせず、小さい本文の1行で出す。
   本体 PHP の inline CSS(.sn-page-hero .sn-eyebrow、!important)に勝つため !important を付けている。 */
body main p.stnv5-dateline.stnv5-dateline{display:block;margin:0 0 6px!important;padding:0!important;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;color:#526579!important;font-family:inherit;font-size:14px!important;font-weight:400!important;letter-spacing:0;line-height:1.6;text-transform:none}

/* ==========================================================================
   90 stage6 (2026-09-29, ユーザー指摘「背景が地味。社名がただの文字で目立ちにくい」)
   docs/design-2026-09-28/HANDOFF.md 段階6。ロゴ図形・ロゴ書体は真似ない。社名は必ず文字で出し、色・ラベル・縦帯で識別する。
   マークアップ(includes/v3-design.php ほか): .stnv3-brand.stnv3-brand--solid[data-brand] / 行・カードの [data-brand] /
   .stnv6-brand-page[data-brand](キャリア別ヒーロー)+ .stnv6-brand-name / .stnv6-lineage / body.stnv6-page-{home,campaign,hikari,carrier}。
   色は v3.css の --stnv3-brand-<slug>(本色 / -bg / -ink)だけ。文字に使うのは -ink(白と 6.2:1 以上、-bg と 5.5:1 以上)。
   本色は 5px 帯・4px 線などの装飾にだけ使う。方眼・ドット・グラデーション・大きな幾何形は使わない。
   ========================================================================== */

/* 91 brand vars: data-brand を持つ要素の中(と、キャリア別ページの body)で --stnv6-c / -bg / -ink が使える。
   キャリア別ページは body 側にも置く(H2 の左帯がヒーロー wrapper の外にあるため) */
[data-brand="docomo"],body:has(.stnv6-brand-page[data-brand="docomo"]){--stnv6-c:var(--stnv3-brand-docomo);--stnv6-bg:var(--stnv3-brand-docomo-bg);--stnv6-ink:var(--stnv3-brand-docomo-ink)}
[data-brand="ahamo"],body:has(.stnv6-brand-page[data-brand="ahamo"]){--stnv6-c:var(--stnv3-brand-ahamo);--stnv6-bg:var(--stnv2-sky,#eaf5ff);--stnv6-ink:var(--stnv3-brand-ahamo-ink)}
[data-brand="au"],body:has(.stnv6-brand-page[data-brand="au"]){--stnv6-c:var(--stnv3-brand-au);--stnv6-bg:var(--stnv3-brand-au-bg);--stnv6-ink:var(--stnv3-brand-au-ink)}
[data-brand="uq"],body:has(.stnv6-brand-page[data-brand="uq"]){--stnv6-c:var(--stnv3-brand-uq);--stnv6-bg:var(--stnv3-brand-uq-bg);--stnv6-ink:var(--stnv3-brand-uq-ink)}
[data-brand="povo"],body:has(.stnv6-brand-page[data-brand="povo"]){--stnv6-c:var(--stnv3-brand-povo);--stnv6-bg:var(--stnv2-sky,#eaf5ff);--stnv6-ink:var(--stnv3-brand-povo-ink)}
[data-brand="softbank"],body:has(.stnv6-brand-page[data-brand="softbank"]){--stnv6-c:var(--stnv3-brand-softbank);--stnv6-bg:var(--stnv3-brand-softbank-bg);--stnv6-ink:var(--stnv3-brand-softbank-ink)}
[data-brand="ymobile"],body:has(.stnv6-brand-page[data-brand="ymobile"]){--stnv6-c:var(--stnv3-brand-ymobile);--stnv6-bg:var(--stnv3-brand-ymobile-bg);--stnv6-ink:var(--stnv3-brand-ymobile-ink)}
[data-brand="linemo"],body:has(.stnv6-brand-page[data-brand="linemo"]){--stnv6-c:var(--stnv3-brand-linemo);--stnv6-bg:var(--stnv3-brand-linemo-bg);--stnv6-ink:var(--stnv3-brand-linemo-ink)}
[data-brand="rakuten"],body:has(.stnv6-brand-page[data-brand="rakuten"]){--stnv6-c:var(--stnv3-brand-rakuten);--stnv6-bg:var(--stnv3-brand-rakuten-bg);--stnv6-ink:var(--stnv3-brand-rakuten-ink)}
[data-brand="iijmio"],body:has(.stnv6-brand-page[data-brand="iijmio"]){--stnv6-c:var(--stnv3-brand-iijmio);--stnv6-bg:var(--stnv3-brand-iijmio-bg);--stnv6-ink:var(--stnv3-brand-iijmio-ink)}
[data-brand="mineo"],body:has(.stnv6-brand-page[data-brand="mineo"]){--stnv6-c:var(--stnv3-brand-mineo);--stnv6-bg:var(--stnv3-brand-mineo-bg);--stnv6-ink:var(--stnv3-brand-mineo-ink)}
[data-brand="nuro"],body:has(.stnv6-brand-page[data-brand="nuro"]){--stnv6-c:var(--stnv3-brand-nuro);--stnv6-bg:var(--stnv3-brand-nuro-bg);--stnv6-ink:var(--stnv3-brand-nuro-ink)}
[data-brand="docomo-hikari"],body:has(.stnv6-brand-page[data-brand="docomo-hikari"]){--stnv6-c:var(--stnv3-brand-docomo-hikari);--stnv6-bg:var(--stnv3-brand-docomo-hikari-bg);--stnv6-ink:var(--stnv3-brand-docomo-hikari-ink)}
[data-brand="au-hikari"],body:has(.stnv6-brand-page[data-brand="au-hikari"]){--stnv6-c:var(--stnv3-brand-au-hikari);--stnv6-bg:var(--stnv3-brand-au-hikari-bg);--stnv6-ink:var(--stnv3-brand-au-hikari-ink)}
[data-brand="softbank-hikari"],body:has(.stnv6-brand-page[data-brand="softbank-hikari"]){--stnv6-c:var(--stnv3-brand-softbank-hikari);--stnv6-bg:var(--stnv3-brand-softbank-hikari-bg);--stnv6-ink:var(--stnv3-brand-softbank-hikari-ink)}
[data-brand="flets"],body:has(.stnv6-brand-page[data-brand="flets"]){--stnv6-c:var(--stnv3-brand-flets);--stnv6-bg:var(--stnv3-brand-flets-bg);--stnv6-ink:var(--stnv3-brand-flets-ink)}
[data-brand="otegaru"],body:has(.stnv6-brand-page[data-brand="otegaru"]){--stnv6-c:var(--stnv3-brand-otegaru);--stnv6-bg:var(--stnv3-brand-otegaru-bg);--stnv6-ink:var(--stnv3-brand-otegaru-ink)}
[data-brand="dti"],body:has(.stnv6-brand-page[data-brand="dti"]){--stnv6-c:var(--stnv3-brand-dti);--stnv6-bg:var(--stnv3-brand-dti-bg);--stnv6-ink:var(--stnv3-brand-dti-ink)}
[data-brand="nifty"],body:has(.stnv6-brand-page[data-brand="nifty"]){--stnv6-c:var(--stnv3-brand-nifty);--stnv6-bg:var(--stnv3-brand-nifty-bg);--stnv6-ink:var(--stnv3-brand-nifty-ink)}

/* ahamo / povo は bg が灰色で地味なので、ヒーローと交互面の地だけ sky にする(帯・線・ink は本色のまま) */
body:has(.stnv6-brand-page[data-brand="ahamo"]),body:has(.stnv6-brand-page[data-brand="povo"]){--stnv6-tint:var(--stnv2-sky,#eaf5ff)}

/* 92 塗りラベル(社名): 地は -ink、白文字 700、色丸は出さない。一覧行・比較カード・申込窓口・記事内の社名 */
html body main .stnv3-brand.stnv3-brand--solid.stnv3-brand--solid{gap:0;min-height:0;padding:4px 10px;border-radius:4px;background:var(--stnv3-ink);color:#fff;font-family:inherit;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.01em}
.stnv3-brand--solid[data-brand]{--stnv3-ink:var(--stnv6-ink)}
.stnv3-brand--solid .stnv3-brand__dot{display:none}
html body main :is(.stnv3-offer__head,.stnv2-plan__name) .stnv3-brand.stnv3-brand--solid.stnv3-brand--solid{font-size:16px}
/* 系列札(ドコモ系・au系・ソフトバンク系・格安SIM・光回線): 塗りラベルの右に 6px */
.stnv6-lineage{display:inline-block;flex:none;box-sizing:border-box;margin:0 0 0 6px;padding:2px 8px;border-radius:4px;background:var(--stnv2-chip-bg,#eef2f6);color:var(--stnv2-muted-strong,#526579);font-size:11.5px;font-weight:600;line-height:1.5;letter-spacing:.02em;white-space:nowrap;vertical-align:middle}

/* 93 左端の縦帯: 一覧行・カードの [data-brand]。表の行(tr)は狭い幅では flex なので行に、1024px 以上は先頭セルに */
:is(tr,li,article,div,section)[data-brand]:not(.stnv6-brand-page):not(.stnv2-plan):not(.stnv3-offer){border-left:5px solid var(--stnv6-c)}
/* 「今月で終わる」行の既存の左罫(v2.css の amber inset 4px)は、ブランド帯があるので消す(二重にしない) */
tr[data-brand].stnv2-table__row--ending{box-shadow:none}
@media (min-width:1024px){
  tr[data-brand]{border-left:0}
  tr[data-brand]>:first-child{box-shadow:inset 5px 0 0 var(--stnv6-c)}
}
/* 光回線: 比較カードは縦帯でなく本色 3px の下線(併用しない) */
.stnv2-plan[data-brand]{border-bottom:3px solid var(--stnv6-c)}

/* 94 キャリア別ページのヒーロー: 地は当該 -bg、下罫線と H1 下の短い線は本色。社名は -ink・本文の書体(Hiragino 側)700・palt(2026-10-09 / 1.0.352。Zen Kaku は H1・H2・サイト名だけ) */
body .stnv6-brand-page,body .stnv6-brand-page .stn-r2-hero{background:var(--stnv6-bg)}
body .stnv6-brand-page{border-bottom:3px solid var(--stnv6-c)}
body .stnv6-brand-page .stn-r2-hero{border-bottom:0}
/* 収益ページ型(楽天・ソフトバンクのキャンペーン一覧)は wrapper が本文幅の節なので、薄地と下罫線を画面端まで広げる(文字位置は変えない) */
body .stnv6-brand-page:not(.stn-r2-hero){box-shadow:0 0 0 100vmax var(--stnv6-bg);clip-path:inset(0 -100vmax);border-bottom:3px solid var(--stnv6-c);border-image:linear-gradient(var(--stnv6-c),var(--stnv6-c)) 1/0 0 3px 0/0 100vmax}
body .stnv6-brand-page h1::after{content:"";display:block;width:64px;height:4px;margin:12px 0 0;background:var(--stnv6-c)}
body .stnv6-brand-page .stnv6-brand-name,.stnv6-brand-name{color:var(--stnv6-ink);font-family:var(--stnv4-font-body,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif);font-size:.8em;font-weight:700;letter-spacing:0;font-feature-settings:"palt" 1}
body .stnv6-brand-page .stn-r2-hero__lead{color:var(--stnv2-ink,#102033)}
body .stnv6-brand-page .stnv6-hero-lineage{margin:0 0 8px}
body .stnv6-brand-page .stnv6-lineage{margin:0;font-size:12px}
/* 以降の H2: 左帯(5px)はその社の本色(蛍光ペン風の線と連番は 2026-10-09 に全体で撤去) */
body.stnv6-page-carrier .stn-r2-service-detail .stnv2-section>h2:not(.stnv2-h1){padding-left:14px;border-left:5px solid var(--stnv6-c)}

/* 95 ページ種別の色帯: 章立てが見えるよう、ヒーロー帯と交互の節に薄地を敷く(奇数=白、偶数=薄地。ヒーローがある型は
   ヒーロー=薄地から数える)。home=sky / campaign=cream 系 / hikari=青緑の薄地 / carrier=当該社の -bg。境界は 1px の罫線。
   薄地は box-shadow+clip-path で画面端まで広げる(本文の左右位置・余白は変えない) */
body.stnv6-page-home{--stnv6-tint:#eaf5ff;--stnv6-rule:#c9def2}
body.stnv6-page-campaign{--stnv6-tint:#fbf3e6;--stnv6-rule:#ead9b9}
body.stnv6-page-hikari{--stnv6-tint:#e8f5f3;--stnv6-rule:#bfe0da}
body.stnv6-page-carrier{--stnv6-tint:#f4f8fc;--stnv6-tint:color-mix(in srgb,var(--stnv6-bg,#eaf5ff) 65%,#fff);--stnv6-rule:var(--stnv2-line,#dbe7f3)}
body.stnv6-page-campaign :is(.stn-r2-hero,.stn-r2-band),body.stnv6-page-campaign .stn-r2-page>.stn-r2-band{background:var(--stnv6-tint);border-block:1px solid var(--stnv6-rule)}
body.stnv6-page-home .stn-r2-page--home>section.stnv2-section:nth-of-type(odd),
body.stnv6-page-hikari .entry-content>section.stnv2-section:nth-of-type(odd),
body.stnv6-page-carrier .stn-r2-service-detail>.stnv2-section:nth-child(even){background:var(--stnv6-tint);box-shadow:0 0 0 100vmax var(--stnv6-tint);clip-path:inset(0 -100vmax);border-block:1px solid var(--stnv6-rule);border-image:linear-gradient(var(--stnv6-rule),var(--stnv6-rule)) 1/1px 0/0 100vmax}
body.stnv6-page-home .stn-r2-page--home>section.stnv2-section:nth-of-type(even),
body.stnv6-page-hikari .entry-content>section.stnv2-section:nth-of-type(even),
body.stnv6-page-carrier .stn-r2-service-detail>.stnv2-section:nth-child(odd){background:var(--stnv2-white,#fff)}

/* 96 重なり・はみ出しの解消(2026-09-29 ユーザー指示「重なりやはみ出しは徹底的に無くして」。検出器 ~/.cache/stn/design-2026-09-29/overlap/detect.mjs、
   81 ページ × 320〜1440 の 7 幅+メニュー開・検索開・details 全開)。文言・数字は変えず、折り返しと余白だけを直す */
/* 一覧行(1023px 以下): 「今月で終わる」行の薄地は左の余白へ 10px はみ出していた(v2.css)。段階 6 で全行に左の縦帯が付いたので、
   はみ出しをやめて全行を同じ位置の縦帯+帯の右 10px の余白にそろえる(縦帯と文字が接していたのも解消) */
@media (max-width:1023px){
  body :is(.stnv2-table--board,.stnv2-table--nested) tbody>tr.stnv2-table__row.stnv2-table__row--ending{margin-left:0}
  body :is(.stnv2-table--board,.stnv2-table--nested) tbody>tr.stnv2-table__row[data-brand]{padding-left:10px!important}
}
/* 比較表(/kakuyasu-sim/ 1440px)の「公式確認日：YYYY年M月D日」: 列幅 164px に 1 行で収まらず隣の列へ出ていた。「：」の後ろだけで折り返す */
body.stn-r2-enabled .stn-r2-service-row__confirmation span:not(.stnv2-badge){white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
/* 4 列カードの「〜を読む」ボタン(1024px): 1 行固定でカードの右へ出ていた。カード幅に収めて折り返す */
body .sn-card .sn-more-link{box-sizing:border-box;max-width:100%;white-space:normal;text-align:center}
/* 合う人/合わない人の二分図(360px 前後)の「向かない理由を見る →」: 1 行固定で列の外へ出ていた */
body .stnv3-fit__more .stnv2-jump{max-width:100%;white-space:normal}
/* スライド解説カードの番号札(01〜): カードが狭い幅(1024px)で中央のアイコンに重なっていた。アイコンを番号札の下へ下げる */
body .stn-slide-card__visual{align-items:flex-end;padding:44px 0 14px;box-sizing:border-box}
/* 目的カード(/docomo-online-shop/ など): 782px 以上で余白が一律 24px になり、左上の 42px の札が見出しに重なっていた。札の分だけ左を空ける */
@media (min-width:782px){body .stn-purpose-card.stn-purpose-card{padding-left:76px!important}}
/* 97 段階 6 の薄地(キャリア別ヒーロー・campaign 暖色・hikari 青緑・home sky・キャリア別の交互の節)の上の muted 文字は #475569 以上の濃さに
   (#64748b は楽天の薄地 #f8e3e3 で 3.87:1 と AA 未満だった。2026-09-29 頭脳判定) */
:is(.stnv6-brand-page,body.stnv6-page-home .stn-r2-page--home>section.stnv2-section:nth-of-type(odd),body.stnv6-page-hikari .entry-content>section.stnv2-section:nth-of-type(odd),body.stnv6-page-carrier .stn-r2-service-detail>.stnv2-section:nth-child(even),body.stnv6-page-campaign :is(.stn-r2-hero,.stn-r2-band)){--stnv2-muted:#475569;--stnv2-muted-strong:#475569;--stn-r2-muted:#475569}
html body :is(.stnv6-brand-page,body.stnv6-page-home .stn-r2-page--home>section.stnv2-section:nth-of-type(odd),body.stnv6-page-hikari .entry-content>section.stnv2-section:nth-of-type(odd),body.stnv6-page-carrier .stn-r2-service-detail>.stnv2-section:nth-child(even),body.stnv6-page-campaign :is(.stn-r2-hero,.stn-r2-band)) :is(.affiliate-disclosure,.affiliate-disclosure *,.stn-cta-assurance>span,.affiliate-text-slot__label,.stnv2-go__chev){color:#475569!important}
/* 98 一覧行の「対象」欄(440px 以下): 1 行の … 省略で「対象端…」のように意味が取れなくなっていた。2 行まで折り返し、3 行目以降だけ省略。
   期限の右に 9em 取れないときは次の段へ回して行幅いっぱいを使う(2026-09-29 頭脳判定) */
@media (max-width:440px){
  body .stnv2-table__row>.stnv2-deal__who{flex:1 1 9em;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;white-space:normal;text-overflow:clip}
}
/* 99 収益 2 ページ(楽天・ソフトバンクのキャンペーン一覧、.stnv2m-hero)の特典一覧だけ、320px 級で行を詰める。X 着地アンカー
   (#android など)から外部 CTA が 1 画面(320x568)に収まるように(audit:campaign-anchors、2026-09-30 頭脳判定: 全体の 320 余白は詰めない) */
@media (max-width:340px){
  body .stnv2m-hero .stnv2-board--title :is(.stnv2-table--board,.stnv2-table--nested) tbody>tr.stnv2-table__row{padding:4px 0;row-gap:0}
  body .stnv2m-hero .stnv2-board--title+.stnv2m-apply,body .stnv2m-hero .stnv2m-apply{margin-top:16px}
  body .stnv2m-hero .stnv2-board--title{margin-bottom:0}
}