/*
 * アイパネル 送料の目安(/help/shipping)専用スタイル — handoff 054
 *
 * 下層リニューアル版(ipanel-renewal-sub.css / `rtsub-*`)の上に載せる差分だけを持つ。
 * 配色・フォント・セクション枠は `.ipanel-rtsub` 側の変数(--rts-*)をそのまま使う。
 *   - 料金表は横に広いので **必ず .ship-tableWrap 側で横スクロール**させる
 *     (ページ本体に横スクロールを出さない。390px で scrollWidth == clientWidth を維持)。
 * ブレイクポイント: mobile 〜767px / desktop 768px〜(renewal-sub と同じ)。
 */

/* パンくず + ヒーロー補足 */
.ship-breadcrumb { font-size: 13px; color: var(--rts-ink-soft); margin: 0 0 14px; }
.ship-breadcrumb a { color: var(--rts-orange); text-decoration: none; }
.ship-breadcrumb a:hover { text-decoration: underline; }
.ship-breadcrumb span { margin: 0 8px; color: #c9c3b8; }
.ship-intro { font-size: 14px; color: var(--rts-ink-soft); line-height: 2; margin: 14px 0 0; }

/* ヒーロー画像(段ボール)は縦長寄り(1287x1222)。
   handoff 055 でヒーローがフルブリードの 2 分割になったので、右半分いっぱいに収める。
   contain で全体を見せ、余白はヒーローの地色(クリーム)で埋める。 */
.ipanel-rtsub .rtsub-hero__img { display: grid; place-items: center; padding: clamp(16px, 2vw, 40px); }
.ipanel-rtsub .rtsub-hero__img img { width: 100%; height: 100%; max-height: none; object-fit: contain; }

/* サイズ区分(A3 → A0 を比率で並べる) */
.ship-boards {
    display: flex; align-items: flex-end; justify-content: center; gap: 24px;
    background: var(--rts-cream-2); border: 1px solid var(--rts-line); border-radius: 12px;
    padding: 40px 20px 28px; margin: 0 0 24px; flex-wrap: wrap;
}
.ship-board {
    background: #fff; border: 3px solid var(--rts-ink); border-radius: 2px;
    display: grid; place-items: center; position: relative;
    font-weight: 700; color: var(--rts-ink);
}
.ship-board small {
    position: absolute; bottom: -24px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; font-size: 11px; font-weight: 700; color: var(--rts-orange);
}
.ship-board--a0 { width: 116px; height: 164px; font-size: 18px; }
.ship-board--a1 { width: 92px; height: 130px; font-size: 16px; }
.ship-board--a2 { width: 70px; height: 98px; font-size: 15px; }
.ship-board--a3 { width: 52px; height: 74px; font-size: 14px; }

/* 注意ボックス */
.ship-alert {
    background: #fff; border: 1px solid var(--rts-line); border-left: 4px solid var(--rts-orange);
    border-radius: 10px; padding: 20px 24px; margin: 36px 0 0;
}
.ship-alert strong { display: block; color: var(--rts-orange); font-weight: 700; margin-bottom: 8px; }
.ship-alert p { font-size: 14px; color: var(--rts-ink-soft); line-height: 1.9; margin: 0; }

/* 料金表
 * `.rtsub-step` は grid(84px 1fr)なので、grid アイテムの既定 `min-width: auto` により
 * 表の min-content(=520px)がそのままカラム幅を押し広げ、**ページ全体が横スクロール**する。
 * ラッパーと、その親のグリッドアイテムの両方に `min-width: 0` を入れて閉じ込める。 */
.rtsub-step > * { min-width: 0; }
.ship-tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0 0; min-width: 0; max-width: 100%; }
.ship-table {
    width: 100%; min-width: 520px; border-collapse: collapse;
    font-size: 13px; background: #fff;
}
.ship-table th,
.ship-table td {
    border: 1px solid var(--rts-line); padding: 10px 14px;
    text-align: left; white-space: nowrap;
}
.ship-table thead th { background: var(--rts-ink); color: #fff; font-weight: 700; }
.ship-table tbody th { background: var(--rts-cream-2); font-weight: 700; color: var(--rts-ink); }
.ship-note { font-size: 12px; color: var(--rts-ink-soft); line-height: 1.9; margin: 12px 0 0; }

/* ご注意リスト */
.ship-caution { background: var(--rts-cream); }
.ship-cautionList { margin: 0 0 12px; padding-left: 1.3em; }
.ship-cautionList li { font-size: 14px; color: var(--rts-ink-soft); line-height: 2; }

@media (max-width: 767px) {
    .ship-boards { gap: 16px; padding: 28px 12px 24px; }
    .ship-board--a0 { width: 92px; height: 130px; font-size: 16px; }
    .ship-board--a1 { width: 74px; height: 104px; font-size: 15px; }
    .ship-board--a2 { width: 56px; height: 78px; font-size: 13px; }
    .ship-board--a3 { width: 42px; height: 59px; font-size: 12px; }
    .ship-board small { font-size: 10px; bottom: -22px; }
    .ship-alert { padding: 16px 18px; }
}