/* [au_table] 契約形態タブ。表本体はテーマ(SWELL)の標準ブロックスタイルに委ねる。 */
.aupt-container ul.aupt-tab-menu {
    display: flex !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.aupt-container ul.aupt-tab-menu li {
    width: 50% !important;
    padding: 12px 0 !important;
    margin: 0 -1px 0 0 !important;
    cursor: pointer;
    border: 1px solid #ccc;
    text-align: center;
    box-sizing: border-box;
    user-select: none;
}
/* テーマ側の擬似要素(リストマーカー等)を打ち消す */
.aupt-container ul.aupt-tab-menu li::before,
.aupt-container ul.aupt-tab-menu li::after {
    content: none !important;
    display: none !important;
}
.aupt-container ul.aupt-tab-menu li:last-child { margin-right: 0 !important; }

/* 選択中のタブ */
.aupt-container ul.aupt-tab-menu li.is-active {
    background: #5473b7;
    color: #fff;
    border-color: #5473b7;
    font-weight: 700;
    z-index: 2;
    position: relative;
}
.aupt-container ul.aupt-tab-menu li:focus-visible {
    outline: 2px solid #5473b7;
    outline-offset: -2px;
}

/* 非表示タブは max-height:0 で畳む。display:none にすると画像の遅延読込が効かない。 */
.aupt-content-box {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    border-top: 2px solid #5473b7;
}
.aupt-content-box.is-active {
    max-height: none;
    overflow: visible;
    visibility: visible;
}

/* ==========================================================================
   価格一覧テーブル(price 指定時)
   ========================================================================== */
.aupt-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #eee;
    table-layout: fixed;
    background: #fff;
    margin: 0;
}
.aupt-table thead th {
    background: #5473b7;
    color: #fff;
    padding: 14px 10px;
    font-weight: 700;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.3);
    vertical-align: middle;
}
.aupt-table th,
.aupt-table td {
    border: 1px solid #eee;
    vertical-align: middle;
    padding: 10px 8px;
}

/* 機種名 */
.aupt-cell-name { width: 30%; text-align: left; }
.aupt-name-flex { display: flex; align-items: center; gap: 8px; }
.aupt-img { width: 75px; flex-shrink: 0; }
.aupt-img img { width: 100%; height: auto; display: block; aspect-ratio: 75 / 100; object-fit: contain; }
.aupt-name-box { display: block; }
.aupt-release { display: block; font-size: .8em; color: #999; margin-top: 2px; }

/* 価格の内訳 */
.aupt-cell-price { width: 35%; background: #fafafa; }
.aupt-cell-toku  { width: 35%; }
.aupt-breakdown {
    display: block;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px dashed #ddd;
}
.aupt-row { display: flex; justify-content: space-between; }
.aupt-row.aupt-minus { color: #d32f2f; font-weight: 700; }

.aupt-amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.aupt-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 4px;
    background: #5473b7;
    color: #fff;
    font-weight: 700;
    font-size: .8em;
    line-height: 1;
    white-space: nowrap;
    min-width: 46px;
    text-align: center;
}
.aupt-badge-sub  { background: #999; }
.aupt-badge-toku { background: #d32f2f; }

.aupt-amount { display: flex; align-items: baseline; justify-content: flex-end; }
.aupt-num { font-size: 1.6em; font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.aupt-yen { font-size: .8em; font-weight: 700; margin-left: 3px; }
.aupt-num-toku, .aupt-yen-toku { color: #d32f2f; }
.aupt-note { display: block; font-size: .75em; color: #888; text-align: right; }
.aupt-none { display: block; text-align: center; color: #999; font-size: .85em; }
.aupt-toku-box { background: #fff9f9; border: 1px solid #ffecec; border-radius: 6px; padding: 8px; }

/* target に連動した列の強調 */
.aupt-col-mark {
    border-left: 2px solid #d32f2f !important;
    border-right: 2px solid #d32f2f !important;
}
.aupt-table thead .aupt-col-mark { border-top: 2px solid #d32f2f !important; }
.aupt-table tbody tr:last-child .aupt-col-mark { border-bottom: 2px solid #d32f2f !important; }

/* スマホ表示: 表をカード化 */
@media screen and (max-width: 900px) {
    .aupt-table thead { position: absolute; visibility: hidden; height: 0; overflow: hidden; clip: rect(0,0,0,0); }
    .aupt-table tr { display: block; margin-bottom: 24px; border: 2px solid #eee; border-radius: 10px; overflow: hidden; }
    .aupt-table th,
    .aupt-table td { display: block; width: 100% !important; border: none; border-bottom: 1px solid #eee; }
    .aupt-name-flex { flex-direction: column; align-items: center; text-align: center; }
    /* 縦並びでは列の枠線が意味を成さないので、中身を囲む方式に切り替える */
    .aupt-col-mark {
        border-left: none !important;
        border-right: none !important;
        border-top: none !important;
        border-bottom: none !important;
    }
    .aupt-mark-wrap { display: block; border: 2px solid #d32f2f; border-radius: 8px; padding: 6px; }
}