/* Apple認定整備済製品の一覧と推移ページ
 *
 * 変数はこのファイルで持つ（推移ページでは slab-index.css が読まれないことがある）。
 * ★列を増やすときは table-layout:fixed の割合をここで調整すること。
 *   既存の表で auto のまま列を足して枠から 500px はみ出したことがある（2026-11-10）。
 * ★ブレークポイントは 700px。600px では効かない（ウィンドウ 390px でも
 *   documentElement.clientWidth は 606px になる）。
 */
.rfb-section,.rfb-page{
 --rfb-ink:#18322d; --rfb-ink2:#3B4C49; --rfb-muted:#6B7C79;
 --rfb-line:#cfe6ea; --rfb-line2:#e8f3f5; --rfb-band:#f2fbfd; --rfb-rule:#9cc9d3;
 --rfb-accent:#1F6FB2; --rfb-good:#0f6f57; --rfb-pr:#8A6D1F;
 color:var(--rfb-ink);
}

/* ===== セクション ===== */
.rfb-section{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--rfb-line)}
.rfb-section h2{margin:0 0 10px;font-size:19px;line-height:1.5}
.rfb-section h3{margin:22px 0 8px;font-size:15px}
.rfb-lead{margin:0 0 16px;font-size:13.5px;line-height:1.9;color:var(--rfb-ink2)}
.rfb-note{margin:10px 0 0;font-size:12px;line-height:1.8;color:var(--rfb-muted)}
.rfb-src{margin:18px 0 0;font-size:11.5px;color:var(--rfb-muted)}
.rfb-src a{color:inherit}

/* ===== 一覧表 ===== */
.rfb-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rfb-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:13px}
.rfb-table th,.rfb-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--rfb-line2);vertical-align:top}
.rfb-table thead th{font-size:10.5px;letter-spacing:.06em;font-weight:700;color:var(--rfb-muted);
 white-space:nowrap;border-bottom:1px solid var(--rfb-line);background:var(--rfb-band)}
.rfb-table tbody tr:last-child td{border-bottom:0}

/* ★割合の合計は 100% にすること。nowrap の列（掲載・推移）が割合より狭いと
   その列が押し広げられて表全体が枠からはみ出す（4.5% にしていて 7px はみ出した）。
   padding も幅に含まれる（box-sizing:border-box）ので、狭い列は padding を削る。 */
.rfb-table .rfb-c-name {width:32.5%}
.rfb-table .rfb-c-spec {width:18.5%}
.rfb-table .rfb-c-price{width:12.5%;text-align:right}
.rfb-table .rfb-c-list {width:11.5%;text-align:right}
.rfb-table .rfb-c-diff {width:11.5%;text-align:right}
.rfb-table .rfb-c-days {width:7%;text-align:right;white-space:nowrap;padding-left:4px;padding-right:6px}
.rfb-table .rfb-c-link {width:6.5%;text-align:right;white-space:nowrap;padding-left:4px;padding-right:6px}
/* 構成の列が無いとき（iPhone など）はその幅を製品名に回す */
.rfb-nospec .rfb-c-name{width:50%}

.rfb-c-name a{color:var(--rfb-accent);text-decoration:none;border-bottom:1px solid currentColor;line-height:1.5}
.rfb-c-spec{font-size:11.5px;color:var(--rfb-muted);line-height:1.7;overflow-wrap:anywhere}
.rfb-c-price,.rfb-c-list,.rfb-c-diff,.rfb-c-days{font-variant-numeric:tabular-nums;white-space:nowrap}
.rfb-c-price{font-weight:700}
.rfb-c-diff b{color:var(--rfb-good);display:block}
.rfb-c-diff small{display:block;font-size:10.5px;color:var(--rfb-muted)}
.rfb-c-link a{color:var(--rfb-accent);font-size:11.5px;text-decoration:none;border-bottom:1px solid currentColor}
.rfb-na{color:#c6d3d1}
.rfb-new{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
 background:#e3f3ee;color:var(--rfb-good);font-size:10px;font-weight:700;vertical-align:1px}

/* 横スクロールの案内。狭い画面でだけ出す */
.rfb-scroll-hint{display:none;margin:6px 0 0;font-size:11px;color:var(--rfb-muted)}

/* ===== 機種ごとの囲み =====
 * 「その他のApple整備済製品一覧」のアコーディオンと同じ、角丸の囲み罫線にそろえる。
 * 囲みそのものが機種の区切りになるので、太い区切り線は要らない。
 */
.rfb-model{margin:18px 0 0;border:1px solid var(--rfb-line);border-radius:8px;background:#fff;overflow:hidden}
.rfb-model:first-child{margin-top:14px}
.rfb-model-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
 margin:0;padding:13px 16px;border-bottom:1px solid var(--rfb-line2);background:var(--rfb-band);
 font-size:15.5px;font-weight:700;color:var(--rfb-ink);line-height:1.5}
.rfb-model-meta{font-size:11.5px;font-weight:400;color:var(--rfb-muted);font-variant-numeric:tabular-nums}
.rfb-model .rfb-wrap{padding:0 16px}
.rfb-model .rfb-table{margin:0}
.rfb-model .rfb-table thead th{background:transparent}
.rfb-model .rfb-scroll-hint{padding:0 16px 12px;margin:6px 0 0}
.rfb-model .rfb-table tbody tr:last-child td{padding-bottom:14px}

/* アコーディオンの中は枠が二重になるので、内側は少し控えめに */
.rfb-others-body .rfb-model{background:#fcfeff}
.rfb-others-body .rfb-model-head{font-size:14px;padding:11px 14px}
.rfb-others-body .rfb-model .rfb-wrap{padding:0 14px}

/* ===== その他（アコーディオン） ===== */
.rfb-others{margin:26px 0 0;border:1px solid var(--rfb-line);border-radius:8px;background:#fff}
.rfb-others>summary{padding:13px 16px;cursor:pointer;font-size:13.5px;font-weight:700;
 list-style:none;color:var(--rfb-ink);position:relative;padding-right:40px}
.rfb-others>summary::-webkit-details-marker{display:none}
.rfb-others>summary::after{content:"＋";position:absolute;right:16px;top:50%;transform:translateY(-50%);
 color:var(--rfb-muted);font-weight:400}
.rfb-others[open]>summary{border-bottom:1px solid var(--rfb-line2)}
.rfb-others[open]>summary::after{content:"−"}
.rfb-others>summary:hover{background:var(--rfb-band)}
.rfb-others-body{padding:4px 16px 18px}
.rfb-others-body h3:first-child{margin-top:12px}

/* ===== 広告枠 =====
 * ★見出しは「PR」ではなく「広告」。既存の .slab-sponsored（機種別ページの広告）に合わせる。
 *   景品表示法（2023年10月からのステマ規制）により、本文より先に「広告」と明示する。
 * ★紹介料を受け取ることの開示文を必ず入れる。
 * ★iPhoneラボのページでは slab-app.css が読まれていないので、
 *   .slab-sponsored のスタイルは使えない。ここで自前に持つこと。
 */
.rfb-aff{margin:24px 0 0;padding:18px 20px 16px;border:1px solid #e3e5e8;border-radius:6px;background:#fafbfc}
.rfb-aff p{margin:0}
.rfb-aff-label{display:inline-block;margin:0 0 8px;padding:2px 8px;border-radius:3px;
 background:#eef0f2;color:#6b7378;font-size:11px;font-weight:700;letter-spacing:.04em}
.rfb-aff-lead{margin:0 0 14px;font-size:14px;line-height:1.8;color:var(--rfb-ink)}
.rfb-aff-btn{margin:0 0 12px}
.rfb-aff-btn a{display:inline-block;padding:11px 24px;border-radius:5px;background:#0c3d47;
 color:#fff;font-size:14px;font-weight:700;text-decoration:none}
.rfb-aff-btn a:hover{background:#06282e;color:#fff}
.rfb-aff-note{margin:0;color:#767b80;font-size:12px;line-height:1.7}

/* ===== 推移ページ ===== */
.rfb-page{margin:0}
.rfb-page h1{margin:6px 0 20px;font-size:22px;line-height:1.5}
.rfb-page h2{margin:34px 0 10px;font-size:17px}
.rfb-crumb{margin:0 0 4px;font-size:12px}
.rfb-crumb a{color:var(--rfb-muted);text-decoration:none}
.rfb-facts{width:100%;border-collapse:collapse;font-size:13.5px;margin:0 0 20px}
.rfb-facts th,.rfb-facts td{padding:10px 12px;border-bottom:1px solid var(--rfb-line2);text-align:left}
.rfb-facts th{width:30%;font-weight:600;color:var(--rfb-muted);font-size:12.5px;background:var(--rfb-band);white-space:nowrap}
.rfb-facts td{font-variant-numeric:tabular-nums}
.rfb-facts b{color:var(--rfb-good)}
.rfb-gone{display:inline-block;margin-left:10px;padding:1px 8px;border-radius:999px;
 background:#f6eeee;color:#b32d2e;font-size:11px;font-weight:700}
.rfb-cta{margin:0 0 8px}
.rfb-cta a{display:inline-block;padding:9px 18px;border-radius:6px;background:var(--rfb-accent);
 color:#fff;font-size:13px;font-weight:700;text-decoration:none}

/* ===== グラフ ===== */
.rfb-chart{margin:14px 0 0}
.rfb-chart svg{width:100%;height:auto;display:block}
.rfb-chart figcaption{margin:8px 0 0;font-size:11.5px;line-height:1.8;color:var(--rfb-muted)}
.rfb-grid{stroke:var(--rfb-line2);stroke-width:1}
.rfb-axis{stroke:var(--rfb-line);stroke-width:1}
.rfb-line{fill:none;stroke:var(--rfb-accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.rfb-dot{fill:var(--rfb-accent)}
.rfb-bar{fill:#52c2d0}
.rfb-ylab,.rfb-xlab{font-size:10.5px;fill:var(--rfb-muted)}
.rfb-ylab{text-anchor:end}
.rfb-bval{font-size:10.5px;fill:var(--rfb-ink2);font-weight:700}
.rfb-note-sm{font-size:10px;fill:var(--rfb-muted)}

/* ===== 狭い画面 ===== */
@media (max-width:700px){
 /* ★auto レイアウトにすると製品名の長さに引っ張られ、横スクロールしても
    価格の列までなかなか届かない。狭い画面でも fixed のまま px で配る。 */
 .rfb-table{table-layout:fixed;min-width:700px;font-size:12.5px}
 .rfb-table .rfb-c-name {width:190px}
 .rfb-table .rfb-c-spec {width:150px}
 .rfb-table .rfb-c-price{width:92px}
 .rfb-table .rfb-c-list {width:86px}
 .rfb-table .rfb-c-diff {width:86px}
 .rfb-table .rfb-c-days {width:50px}
 .rfb-table .rfb-c-link {width:46px}
 .rfb-nospec .rfb-c-name{width:300px}
 .rfb-wrap{margin-right:-16px;padding-right:16px}
 .rfb-scroll-hint{display:block}
 .rfb-section h2{font-size:17px}
 .rfb-page h1{font-size:19px}
 .rfb-facts th{width:38%;font-size:11.5px}
 .rfb-facts th,.rfb-facts td{padding:8px 9px;font-size:12.5px}
 .rfb-others-body{padding:4px 10px 16px}
 .rfb-aff{padding:14px 15px 12px}
 .rfb-aff-btn a{display:block;text-align:center}
 .rfb-model-head{font-size:14.5px;padding:11px 14px}
 .rfb-model{margin-top:16px}
 /* ★囲みの中では、外へはみ出させる指定（margin-right のマイナス）を打ち消す。
    打ち消さないと表が囲みの右枠を越えて出てしまう（2026-11-11 に出した）。 */
 .rfb-model .rfb-wrap{padding:0 14px;margin-right:0}
 .rfb-model .rfb-scroll-hint{padding:0 14px 12px}
}