/* =========================================================
   彩美テレビボード一覧（風雅テレビボード一覧 fuuga-tv-list.css をもとに、クラス名を saibi- に置き換えたもの）
   file: saibi-tv-list.css
   ========================================================= */

.saibi-tv-list {
    background: #F2EFE5;
    color: #211E1A;
    font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
    max-width: 750px;
    margin: 0 auto;
    box-sizing: border-box;
}

.saibi-tv-list *,
.saibi-tv-list *::before,
.saibi-tv-list *::after {
    box-sizing: border-box;
}

/* ---------- 材種タブ ---------- */
.saibi-material-tabs {
    display: flex;
    border: 1px solid #D9D3C0;
    background: #FBFAF6;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}

.saibi-material-tab {
    flex: 1;
    padding: 20px 8px;
    border: 0;
    border-right: 1px solid #D9D3C0;
    border-bottom: 3px solid transparent;
    background: transparent;
    color: #5C5648;
    font-size: 13.5px;
    cursor: pointer;
    font-family: inherit;
}

.saibi-material-tab:last-child {
    border-right: 0;
}

.saibi-material-tab.is-active {
    background: #37493A;
    color: #fff;
    border-bottom-color: #C9A66B;
}

.saibi-material-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-right: 9px;
    vertical-align: -3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.saibi-material-swatch--walnut {
    background: #4A2E1E;
}

.saibi-material-swatch--oak {
    background: #C9A66B;
}

.saibi-material-panel {
    display: none;
    border: 1px solid #D9D3C0;
    border-top: 0;
    background: #FBFAF6;
    padding: 32px;
    box-shadow: 0 10px 26px -18px rgba(33, 30, 26, .25);
}

.saibi-material-panel.is-active {
    display: block;
}

/* ---------- タイプ切替 ---------- */
.saibi-type-tabs {
    display: flex;
    gap: 12px;
    margin-bottom: 26px;
    flex-wrap: wrap;
}

.saibi-type-tab {
    flex: 1;
    min-width: 160px;
    padding: 16px 20px;
    font-size: 14px;
    border: 1px solid #D9D3C0;
    background: #fff;
    color: #5C5648;
    cursor: pointer;
    font-family: inherit;
    border-radius: 2px;
}

.saibi-type-tab.is-active {
    background: #37493A;
    color: #fff;
}

.saibi-type-panel {
    display: none;
}

.saibi-type-panel.is-active {
    display: block;
}

/* ---------- 既存デザインから抽出した共通スタイル ---------- */

.saibi-css-01 {
    padding: 28px 28px 0;
}

.saibi-css-02 {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: #37493A;
    margin-bottom: 10px;
}

.saibi-css-03 {
    font-family: serif;
    font-size: 30px;
    line-height: 1.5;
    margin: 0 0 16px;
    font-weight: 700;
}

.saibi-css-04 {
    font-size: 14.5px;
    line-height: 2;
    color: #5C5648;
    max-width: 60ch;
    margin: 0 0 28px;
}

.saibi-css-05 {
    width: 100%;
    display: block;
    border-top: 1px solid #D9D3C0;
    border-bottom: 1px solid #D9D3C0;
}

.saibi-css-06 {
    padding: 32px 28px 6px;
}

.saibi-css-07 {
    border-left: 4px solid #C9A66B;
    padding-left: 16px;
    margin-bottom: 26px;
}

.saibi-css-08 {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #37493A;
    margin-bottom: 7px;
}

.saibi-css-09 {
    font-family: serif;
    font-size: 24px;
    margin: 0 0 10px;
    font-weight: 700;
}

.saibi-css-10 {
    font-size: 13.5px;
    color: #5C5648;
    line-height: 1.9;
    margin: 0;
}

.saibi-css-11 {
    width: 100%;
    border: 1px solid #D9D3C0;
    aspect-ratio: 16/9;
    object-fit: cover;
    margin-bottom: 24px;
}

.saibi-css-12 {
    font-family: serif;
    font-size: 26px;
    line-height: 1.6;
    margin: 0 0 8px;
}

.saibi-css-13 {
    font-family: monospace;
    font-size: 12px;
    color: #37493A;
    letter-spacing: 1.5px;
    margin-bottom: 28px;
}

.saibi-css-14 {
    width: 100%;
    border-collapse: collapse;
}

.saibi-css-15 {
    width: 280px;
    vertical-align: top;
    padding: 0;
}

.saibi-css-16 {
    width: 260px;
    max-width: 100%;
    border: 1px solid #D9D3C0;
    background: #fff;
    display: block;
}

.saibi-css-17 {
    vertical-align: top;
    padding: 0 0 0 26px;
}

.saibi-css-18 {
    font-size: 12px;
    letter-spacing: 1.5px;
    color: #5C5648;
    margin-bottom: 16px;
    font-weight: 700;
}

.saibi-css-19 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.saibi-css-20 {
    display: inline-block;
    padding: 13px 20px;
    border: 2px solid #D9D3C0;
    background: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: monospace;
    color: #211E1A;
    text-decoration: none;
    min-width: 74px;
    text-align: center;
}

.saibi-css-21 {
    font-family: serif;
    font-size: 24px;
    margin: 0;
    font-weight: 700;
}

.saibi-css-22 {
    background: #FBFAF6;
    border: 1px solid #D9D3C0;
    padding: 30px;
}

.saibi-css-23 {
    font-family: serif;
    font-size: 18px;
    margin: 0 0 14px;
}

.saibi-css-24 {
    width: 100%;
    border: 1px solid #D9D3C0;
    margin-bottom: 14px;
}

.saibi-css-25 {
    padding: 0 28px 6px;
}

.saibi-css-26 {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.saibi-css-27 {
    background: #FBFAF6;
    border: 1px solid #D9D3C0;
    padding: 28px 30px;
}

.saibi-css-28 {
    font-family: monospace;
    font-size: 11.5px;
    color: #37493A;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.saibi-css-29 {
    font-family: serif;
    font-size: 19px;
    margin: 0 0 12px;
}

.saibi-css-30 {
    font-size: 13.5px;
    color: #5C5648;
    line-height: 1.9;
    margin: 0 0 14px;
}

.saibi-css-31 {
    font-size: 13px;
    color: #37493A;
    border-bottom: 1px solid #37493A;
    text-decoration: none;
    padding-bottom: 2px;
}


.saibi-css-35 {
    background: #25332A;
    color: #F2EFE5;
    padding: 40px 28px;
    margin-top: 14px;
}

.saibi-css-36 {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #C9A66B;
    margin-bottom: 10px;
}

.saibi-css-37 {
    font-family: serif;
    font-size: 24px;
    margin: 0 0 12px;
    font-weight: 700;
}

.saibi-css-38 {
    font-size: 13.5px;
    color: #D8D6C6;
    line-height: 1.9;
    margin: 0;
}


/* ---------- PC/狭幅での崩れ防止 ---------- */
@media (max-width: 750px) {
    .saibi-material-tabs {
        flex-wrap: wrap;
    }

    .saibi-material-tab {
        min-width: 33.333%;
    }

    .saibi-material-panel {
        padding: 24px 18px;
    }

    .saibi-type-tabs {
        gap: 8px;
    }

    .saibi-type-tab {
        min-width: 140px;
    }
}

/* =========================================================
   彩美で足したもの
   ========================================================= */
/* 風雅は動画、彩美は写真を一番上に置く */
img.saibi-css-05 {
    height: auto;
}

/* スタンダードの注意書き（リモコン不可） */
.saibi-type-note {
    margin: 14px 0 0;
    color: #8A5A2B;
    font-size: 12px;
    line-height: 1.8;
}

/* 材種が2つなのでタブを広く取る（風雅は5つ） */
@media (max-width: 750px) {
    .saibi-material-tab {
        min-width: 50%;
    }
}

/* サイズボタンの文字がショップ側のリンク色（青）にならないようにする */
.saibi-tv-list a.saibi-css-20 {
    color: #211E1A !important;
    text-decoration: none !important;
}

/* =========================================================
   スマホ版だけの調整（スマホ用txtの一番外の枠に saibi-tv-list--sp を付けたときだけ効く）
   ・ショップサーブの説明欄は <style> を消すので、txt ではなくこのCSSに書く
   ・写真 → 「SELECT WIDTH ／ サイズを選ぶ」→ ボタン2つ の順に縦に並べる（画面の幅に関係なく）
   ・ショップ側の表（table/td）の指定に負けないよう、並びに関わる所だけ !important
   ========================================================= */
.saibi-tv-list--sp .saibi-css-14,
.saibi-tv-list--sp .saibi-css-14 tbody,
.saibi-tv-list--sp .saibi-css-14 tr,
.saibi-tv-list--sp .saibi-css-15,
.saibi-tv-list--sp .saibi-css-17 {
    display: block !important;
    width: 100% !important;
}

.saibi-tv-list--sp .saibi-css-16 {
    width: 100% !important;
    max-width: 100%;
}

.saibi-tv-list--sp .saibi-css-17 {
    padding: 20px 0 0 !important;
    text-align: center;
}

/* 見出しの両側に細い線を引いて、ボタンの見出しだと分かるようにする */
.saibi-tv-list--sp .saibi-css-18 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 11px;
}

.saibi-tv-list--sp .saibi-css-18::before,
.saibi-tv-list--sp .saibi-css-18::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #D9D3C0;
}

/* ボタン2つを同じ幅で並べる */
.saibi-tv-list--sp .saibi-css-19 {
    justify-content: center;
    gap: 10px;
}

.saibi-tv-list--sp .saibi-css-19 .saibi-css-20 {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 0;
}

/* キャッチ（26px）だと「深い色合いと重厚感」の最後の1文字が次の行に落ちる */
.saibi-tv-list--sp .saibi-css-12 {
    font-size: 21px;
}