@charset "UTF-8";
/* ============================================================
   SimpleOrder セミオーダー商品詳細ページ用 CSS
   detail_simple_order.twig の {% block stylesheet %} 内にあった <style> を分離 (2026-10-21)
   読み込み元: Resource/template/default/Product/detail_simple_order.twig
   配置先    : html/plugin/SimpleOrder/assets/css/detail_simple_order.css (asset('SimpleOrder/assets/css/...', 'plugin'))
   ※ このファイルの編集はそのまま配信に反映される(cache:clear 不要)。ブラウザに古い CSS が残る場合はスーパーリロード
   ============================================================ */

/* ---- detail_2 から流用: 不要なCanvas CSS を除外し、共通部のみ残す ---- */

/* 選択行のみ表示（invalid非表示） */
.simulation-main .panel-main .custom__list .value.switch ul.invalid,
.simulation-main .panel-sub .custom__list .value.switch ul.invalid {
    display: none;
}
.simulation-main .panel-main .custom__list .value.switch li.invalid,
.simulation-main .panel-sub .custom__list .value.switch li.invalid {
    display: none;
}

/* ---- トグルピル: サイトCSSと同じグレーピル外観を item-option でも確実に適用 ----
   レスポンシブ上書き（display:flex on li）が適用されても崩れないよう明示指定 */
.simulation-main .panel-main .custom__list .item-option .value.switch ul {
    display: flex !important;
    background-color: #EDEDED !important;
    border-radius: 10px !important;
    padding: 3px;
}
.simulation-main .panel-main .custom__list .item-option .value.switch li {
    flex: 1;
}
.simulation-main .panel-main .custom__list .item-option .value.switch li label {
    display: block;
    text-align: center;
    padding: 6px 8px;
    color: #BABABA;
    border-radius: 8px;
    cursor: pointer;
}
.simulation-main .panel-main .custom__list .item-option .value.switch li label.active {
    background-color: #FFFFFF !important;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16) !important;
    color: #3C3C3C !important;
}


.ec-numberInput span {
    display: none;
}
.ec-numberInput input[type="number"] {
    display: none;
}

.isloading {
    display: none;
}

/* 商品画像ギャラリー: 標準 .productsDetail-main__image を使用（style.css で定義済み）
   ただし標準 CSS は 47.91%（2カラムレイアウト前提）なので、SimpleOrder の 1カラム相当に合わせて 100% に上書き。
   カラースウォッチ画像は setup で標準商品と同じ 1150x884 で生成済みのため、
   家具写真とサイズが統一され slick の adaptiveHeight も正しく動作する。 */
.simulation-main .productsDetail-main__image {
    width: 100%;
}
/* 親 .product-box__inner が font-size: 0（whitespace collapse 用）なので
   カウンタ表示（1/N）の文字が潰れる。標準値に戻す */
.simulation-main .productsDetail-main__image-main .num {
    font-size: 12px;
    line-height: 1.5;
}

/* ---- 画像一覧モーダルの z-index / スタッキングコンテキスト対策 -----------
   標準 CSS は .productsDetail-main__image-sub に opacity:0→1 の transition を持つ。
   opacity<1 の要素は自前のスタッキングコンテキストを形成するため、
   子 .modal-box (position:fixed; z-index:9999) は親コンテキスト内に閉じ込められ、
   transition 途中で右パネル（sticky/relative 要素）より背後に沈んで見える瞬間が発生する。
   → 親自体を position:fixed inset:0 で最前面レイヤー(z-index:10000)に昇格、
     transition 中も常にすべての兄弟要素より前面となるようにする。 */
.simulation-main .productsDetail-main__image-sub {
    position: fixed;
    inset: 0;
    z-index: 10000;
}
/* 非表示時は pointer-events:none（親サイト CSS）で透過するため画面操作に影響しない */
.simulation-main .productsDetail-main__image-sub:not(.show) {
    pointer-events: none;
}

/* ---- サムネイルナビゲーション: メイン画像下の横並びサムネ列 -------------
   slick.asNavFor は標準 ProductImage クラスと競合するため独自 UI で実装。
   クリック → メイン slick slickGoTo、afterChange → active 同期。
   サムネ列が溢れたら左右矢印で横スクロール。 */
.simulation-main .so-thumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    font-size: 0; /* whitespace collapse */
}
.simulation-main .so-thumb-nav__arrow {
    flex: 0 0 28px;
    width: 28px;
    height: 60px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #3c3c3c;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.simulation-main .so-thumb-nav__arrow:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #3c3c3c;
}
.simulation-main .so-thumb-nav__arrow:disabled {
    opacity: 0.3;
    cursor: default;
}
.simulation-main .so-thumb-nav__track {
    flex: 1 1 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
    cursor: grab;            /* #42: PC はマウスドラッグで横スクロール */
    user-select: none;
}
.simulation-main .so-thumb-nav__track.is-dragging {
    cursor: grabbing;
}
.simulation-main .so-thumb-nav__btn img {
    -webkit-user-drag: none; /* #42: ドラッグ中に画像が掴まれないように */
    pointer-events: none;
}
.simulation-main .so-thumb-nav__track::-webkit-scrollbar {
    display: none;
}
.simulation-main .so-thumb-nav__list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 2px;
    list-style: none;
}
.simulation-main .so-thumb-nav__item {
    flex: 0 0 auto;
    list-style: none;
}
.simulation-main .so-thumb-nav__btn {
    display: block;
    width: 80px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
    transition: border-color 0.15s, opacity 0.15s;
    opacity: 0.7;
}
.simulation-main .so-thumb-nav__btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.simulation-main .so-thumb-nav__btn:hover {
    opacity: 1;
}
.simulation-main .so-thumb-nav__btn.is-active {
    border-color: #3c3c3c;
    opacity: 1;
}
@media (max-width: 767px) {
    .simulation-main .so-thumb-nav {
        gap: 6px;
        margin-top: 8px;
    }
    .simulation-main .so-thumb-nav__btn {
        width: 64px;
        height: 48px;
    }
    .simulation-main .so-thumb-nav__arrow {
        flex: 0 0 24px;
        width: 24px;
        height: 48px;
    }
}

/* ---- SimpleOrder カラースウォッチ (so-item-color) ----
   サイトCSS style.css の .item-color は modal 開閉パターンのため
   .so-item-color スコープで全挙動を上書き
   specificity: (0,8,3) > site (0,6,3) ---------------------------------------- */

/* 1. 常時表示: ul は display:none → flex に上書き。overflow:visible でスクロールなし折り返し */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 8px;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 8px 0 0;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}
/* 2. flex: 1 で右カラム幅を最大に。overflow:visible でスウォッチが折り返し表示されるよう */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list {
    flex: 1;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}
/* 3. li サイズ: 自動幅（8 等分 → auto に上書き） */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li {
    width: auto !important;
    margin: 0 !important;
    list-style: none;
}
/* 4. label: 縦並び・中央揃え */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 0 !important;
    color: #888;
    font-size: 1.0rem;
    border: none !important;    /* .item-color .value.list li label.active の border 上書き用ベース */
}
/* 5. スウォッチ本体: 40×40 角丸4px 正方形
   高特異度で site の border:none / border-radius:50%/0 をすべて上書き */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-chip {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
    border: 2px solid #d8d8d8 !important;
    overflow: hidden;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-chip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 6. 選択中・hover */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label.active .so-swatch-chip,
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label:hover .so-swatch-chip {
    border-color: #3c3c3c !important;
    box-shadow: 0 0 0 1px #3c3c3c;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label.active {
    color: #3c3c3c;
}
/* 7. ラベルテキスト（非表示: カラースウォッチはチップのみ表示、ラベルはアクセシビリティのため残す） */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
/* 8. カラースウォッチ下の差額バッジ（差額がある選択肢のみ表示） */
.so-swatch-price-badge {
    display: block;
    margin-top: -2px;
    font-size: 1rem;
    color: inherit;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
}
/* 8b. 必須枠 未選択エラー (#11) */
.so-required-error {
    margin: 4px 0 0;
    font-size: 1.2rem;
    line-height: 1.4;
    color: #d0021b;
}
.simulation-main .panel-main .custom__list li.so-has-error > .name {
    color: #d0021b;
}
/* 9. トグル/プルダウン用の差額タグ（label テキスト内インライン） */
.so-price-tag {
    margin-left: 4px;
    font-size: 1rem;
    color: inherit;
    font-weight: normal;
}
/* 10. トグル（枠C）用 差額バッジ
   - <li> 自体のサイズは変えない（=ピル背景が間延びしない）
   - バッジは絶対配置でピル直下に表示 */
.so-toggle-li {
    position: relative;
}
.so-toggle-price-badge {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 2px);
    font-size: 1rem;
    color: inherit;
    line-height: 1.1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
}
/* ---- 有料オプションバッジ ---- */
.so-badge-paid {
    display: inline-block;
    font-size: 1.0rem;
    background: #f60;
    color: #fff;
    padding: 2px 6px;
    border-radius: 2px;
    font-weight: 500;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0;
}
/* 必須設定は未選択チェックに使い、フロントの必須タグは非表示にする。 */
.simulation-main .so-badge-required {
    display: none;
}
/* ---- オプション名バッジ ---- */
.so-badge-optional {
    display: inline-block;
    font-size: 0.9rem;
    background: #888;
    color: #fff;
    padding: 1px 5px;
    border-radius: 2px;
    font-weight: 500;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0;
    line-height: 1.4;
}

/* ---- .name 幅100px固定下でバッジを次行に小さく表示 ----
   site CSS の .name{width:100px} は変更せず、
   オプション行（item-option / item-color）のバッジのみ
   block + 小フォントで「ラベルの下」に表示することで
   テキスト折り返しによる行高崩れを防ぐ。
   スライダー行（幅/奥行き/高さ）にはバッジが無いため影響なし。 */
.simulation-main .panel-main .custom__list li.item-option > .name .so-badge-optional,
.simulation-main .panel-main .custom__list li.item-color > .name .so-badge-optional {
    display: block;
    width: fit-content;
    margin: 2px 0 0;
    padding: 0 4px;
    font-size: 0.85rem;
    line-height: 1.4;
    vertical-align: baseline;
}


/* ---- 価格フォント (XD: 28-32px = 3.0rem) ---- */
.simulation-main .panel-main .panel-top__box .price {
    font-size: 3.0rem;
    font-weight: 700;
    position: relative;  /* スピナーの絶対配置基準 */
}

/* ---- 価格更新中のローディング表示 ---- */
/* AJAX 中: 価格テキストを淡色化 + 右端にスピナー表示 */
.simulation-main .panel-main .panel-top__box .price.is-loading {
    opacity: 0.45;
    transition: opacity 0.15s ease-in-out;
}
.simulation-main .panel-main .panel-top__box .price.is-loading::after {
    content: "";
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    margin-left: 0.6rem;
    vertical-align: middle;
    border: 2.5px solid #ccc;
    border-top-color: #555;
    border-radius: 50%;
    animation: so-price-spin 0.7s linear infinite;
}
@keyframes so-price-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- タイトル: 「セミオーダー家具」ラベル(<span>)の後で改行 ----
   既存サイトCSS のラベルスタイル（.title span を想定）はそのまま当たる前提。
   so-title-name は block 化して次行へ送り、ラベル由来の装飾を打ち消す。 */
.simulation-main .panel-main .title .so-title-name {
    display: block;
    /* ラベル装飾（背景・border・padding 等）の継承を断つ */
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
}

/* ---- ドロップダウン幅統一 (paid / dropdown) ----
   option テキストの長短で select の幅が変動しないよう固定幅を明示する。
   SP（〜767px）の width:100% は後続 media query で上書きされるため SP は全幅のまま。 */
.simulation-main .panel-main .custom__list .item-option .value .c-select--a,
.simulation-main .panel-main .custom__list .item-option .value .c-select--a select {
    width: 240px;
    max-width: 100%;
}

/* ================================================================
   SimpleOrder レスポンシブ
   ≤1000px: サイトCSSのタブ切替パターン（display:none）を上書き。
   detail_simple_order では全オプション行を常時表示する。
   ================================================================ */
@media screen and (max-width: 1000px) {
    /* 全オプション行を表示（site CSS が display:none で隠す） */
    .simulation-main .panel-main .custom__list > li {
        display: flex !important;
        justify-content: space-between;
    }
    /* 行間を復元 */
    .simulation-main .panel-main .custom__list > li + li {
        margin-top: 12px !important;
    }
    /* オプション名を表示（site CSS が display:none で隠す） */
    .simulation-main .panel-main .custom__list .name {
        display: block !important;
        width: 90px;
        min-width: 90px;
        font-size: 1.3rem;
        padding-top: 6px;
    }
    /* 価格ブロックを表示（site CSS が display:none で隠す） */
    .simulation-main .panel-main .panel-top__box {
        display: flex !important;
    }
    /* item-option は flex でも子要素が縦積みになるようにする */
    .simulation-main .panel-main .custom__list > li.item-option {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .simulation-main .panel-main .custom__list > li.item-option .value {
        flex: 1;
    }

    /* ---- ボタン左端揃え修正 ----
       サイトCSS が panel-bottom__box を display:flex / justify:center にするのは
       「form が panel-bottom__box の子要素」という旧構造向け。
       本プラグインでは form が panel-bottom__box の親であるため、
       flex centering がカートボタンのみに作用し color-request（margin:0）と
       左端がずれる。両ボタンを同じ幅・同じ中央揃えで統一する。 */
    .simulation-main .panel-main .panel-bottom__box {
        display: block !important;
    }
    .simulation-main .panel-main .panel-bottom__box .cart__button {
        width: 62.6865671641791%;
        max-width: 370px;
        margin: 0 auto;
    }
    .simulation-main .panel-main .panel-bottom__box .cart__button .c-button--h {
        width: 100% !important;
        margin: 0 !important;
    }
    .simulation-main .panel-main .panel-bottom__note .color-request {
        margin: 0 auto !important;
    }
}

/* ---- タブレット (768px ~ 1024px): パネル幅を制限 ---- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .simulation-main .panel-main .custom__list .name {
        width: 90px;
        min-width: 90px;
        font-size: 1.5rem;
    }
}

/* ---- SP対応 (〜767px) ---- */
@media screen and (max-width: 767px) {
    /* タイトル: SP のとき font が大きすぎると商品名が早く折り返してしまうので、
       横幅を活かせるサイズに縮小。
       「セミオーダー家具」ラベル部分は元々ラベル風サイズなので影響を受けない。 */
    .simulation-main .panel-main .title .so-title-name {
        word-break: keep-all;     /* 不自然な単語分断を抑制 */
        overflow-wrap: anywhere;  /* どうしても入らない時は折り返す */
    }
    /* スウォッチを少し小さく */
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-chip {
        width: 34px !important;
        height: 34px !important;
    }
    /* スウォッチ並びは左寄せ。配置範囲はドロップダウンの内側テキスト位置に揃えるため
       ul 両端に padding を入れて、絶対左端ベタ付きを避ける。 */
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list ul {
        gap: 8px 6px;
        justify-content: flex-start !important;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    /* オプション名: SP でも読めるサイズに（カートボタンと同程度）。
       1.2rem → 1.6rem に拡大。幅は枠Dテストなどの2文字以上を想定して少し広げる。 */
    .simulation-main .panel-main .custom__list .name {
        width: 90px !important;
        min-width: 90px !important;
        font-size: 1.6rem !important;
    }
    /* スライダーは幅いっぱい */
    .simulation-main .custom__list .step-slider input[type="range"] {
        width: calc(100% - 60px);
    }
    /* プルダウン・セレクトは全幅 */
    .simulation-main .panel-main .custom__list .c-select--a {
        width: 100%;
    }
    .simulation-main .panel-main .custom__list .c-select--a select {
        width: 100%;
        max-width: 100%;
    }
    /* カートに入れる・カラーサンプル請求ボタンを全幅 */
    /* ① フォームコンテナの幅制限・padding-right を解除（サイトCSSの max-width:370px を上書き） */
    .simulation-main .panel-main .panel-bottom__box {
        flex-wrap: wrap !important;
    }
    .simulation-main .panel-main .panel-bottom__box > form {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }
    /* ② カートボタン全幅 */
    /* 1024px-media の max-width:370px がカスケードで残るため明示的に解除。
       これを外すとタブレット中間幅(例:500px)でカートだけ370pxで止まり、
       100%で広がるカラーサンプル請求ボタンと幅が一致せず間延びして見える。 */
    .cart__button {
        width: 100% !important;
        max-width: 100% !important;
    }
    .cart__button .add-cart,
    .cart__button .ec-blockBtn--action {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* ③ カラーサンプル請求ボタン全幅（サイトCSSの width:220px を上書き） */
    .panel-bottom__note > a {
        display: block !important;
        width: 100% !important;
    }
    .panel-bottom__note .color-request {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
}

/* ---- 極小SP対応 (〜480px) ---- */
@media screen and (max-width: 480px) {
    /* オプション行を縦積みに変更 */
    .simulation-main .panel-main .custom__list > li {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .simulation-main .panel-main .custom__list .name {
        width: 100% !important;
        min-width: 100% !important;
        font-size: 1.6rem !important;
        padding-top: 0 !important;
        padding-bottom: 4px;
    }
    .simulation-main .panel-main .custom__list .value,
    .simulation-main .panel-main .custom__list .value.slider,
    .simulation-main .panel-main .custom__list .value.list,
    .simulation-main .panel-main .custom__list .value.switch {
        width: 100% !important;
        flex: none !important;
    }
    /* スウォッチ行は横スクロールではなく折り返し */
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list ul {
        flex-wrap: wrap !important;
        overflow: visible !important;
    }
    /* スライダーはフル幅 */
    .simulation-main .custom__list .step-slider input[type="range"] {
        width: calc(100% - 70px);
    }
    /* トグル(枠C): .value 自体は 100% にして dropdown と同じ幅枠を確保するが、
       ul / li は自然サイズに抑える（ピルが横に間延びしないようにする）。
       旧実装: ul を width:100% にして li.flex:1 のせいでピルが半分ずつ巨大化していた。 */
    .simulation-main .panel-main .custom__list .item-option .value.switch {
        width: 100% !important;
    }
    .simulation-main .panel-main .custom__list .item-option .value.switch ul {
        width: auto;
        max-width: 100%;
        display: inline-flex;
    }
    .simulation-main .panel-main .custom__list .item-option .value.switch li {
        flex: 0 0 auto;
    }
}

/* 奥行きスライダー行のラベル縦位置を幅・高さに揃える
   site CSS が .item-width/.item-height に padding-top:18px を指定しているが
   .item-depth は含まれていないため補完する */
.simulation-main .panel-main .custom__list .item-depth .name {
    padding-top: 18px !important;
}

/* 固定寸法行: slider クラスがなく margin-top:-5px も適用されないため
   .name の padding-top:18px に揃えて <p> を下げる */
.simulation-main .panel-main .custom__list li.is-fixed .value > p {
    padding-top: 18px;
}

/* item 11: 寸法スライダーセクション 余白調整 */
/* スライダー行の .value コンテナに内側余白を追加 */
.simulation-main .panel-main .custom__list .item-width .value.slider > div,
.simulation-main .panel-main .custom__list .item-depth .value.slider > div,
.simulation-main .panel-main .custom__list .item-height .value.slider > div {
    padding-top: 4px;
    padding-bottom: 8px;
}
/* スライダー行間の余白を統一（全画面幅） */
.simulation-main .panel-main .custom__list li.item-depth,
.simulation-main .panel-main .custom__list li.item-height {
    margin-top: 4px;
}

/* 人気のキーワード（KARTEウィジェット）非表示
   オーダー家具(detail_2.twig)と同様に、SimpleOrderページでは表示しない
   - .ec-layoutRole__mainBottom : レイアウトのMainBottomブロック
   - .ec-layoutRole__main .karte-g    : KARTEの外側ラッパー（KARTE-JSが高さを設定するため
                                        .karte-widget だけを隠しても親がgapを作る）
   - .ec-layoutRole__main .karte-widget : KARTEウィジェット本体（念のため） */
.ec-layoutRole__mainBottom {
    display: none !important;
}
.ec-layoutRole__main .karte-g,
.ec-layoutRole__main .karte-widget {
    display: none !important;
}

/* ================================================================
   XD デザイン反映 (簡易オーダー_pc / 簡易オーダー_sp)  2026-10
   - 上の既存ルールを上書きする追記ブロック。
   - 基準: PC=1440px(コンテンツ幅1200px, 画像575px / 情報545px), SP=375px
   - 768〜1000px は XD に無いため SP と同じ縦積みレイアウトにしている
   ================================================================ */

/* ---- 共通: 背景・パネルのカード装飾を外す ---- */
.simulation-main {
    background: #fff;
    min-height: 0;
}
.simulation-main .panel-main .panel {
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

/* ---- タイトル: セレクト家具（.productsDetail-main__info .brand / .name）に合わせる ----
   「セミオーダー家具」ラベル = .brand 相当、商品名 = h1.name 相当 */
.simulation-main .panel-main .title {
    display: block;
    max-width: none;
    margin: 0 0 10px;
    font-size: 2.0rem;
    font-weight: 700;
    line-height: 1.5;
    color: #3C3C3C;
}
.simulation-main .panel-main .title span {
    display: block;
    font-size: 1.6rem; /* #38 (2026-10-09): 先方指定 1.6rem(テーマ CSS / ituki と同じ)。以前は 2.0rem */
    font-weight: normal;
    color: #939393;
    padding-right: 0;
}
.simulation-main .panel-main .title .so-title-name {
    display: block;
    margin-left: 0;
    font-weight: 700;
    color: #3C3C3C;
}
/* レビューの星: サイトCSSの左マージン(20px)を外し、h1 の左端に揃える */
.simulation-main .panel-main .yotpo.bottomLine {
    margin-left: 0;
}

/* ---- 価格 + お気に入り ---- */
.simulation-main .panel-main .panel-top__box {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 16px;
    margin: 0 0 12px;
    border-bottom: 1px solid #f2f2f2;
}
/* 価格: セレクト家具（.productsDetail-main__info .price / .zei）に合わせる */
.simulation-main .panel-main .panel-top__box .price {
    font-size: 4.0rem;
    font-weight: 700;
    line-height: 1.1;
    color: #3c3c3c;
}
.simulation-main .panel-main .panel-top__box .price .zei {
    margin-left: 0;
    padding-left: 0.2em;
    font-size: 1.6rem;
    font-weight: 400;
    color: #939393;
}
.simulation-main .panel-main .favorite__button button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #cecece;
    cursor: pointer;
}
.simulation-main .panel-main .favorite__button button .icon {
    width: 22px;
}
.simulation-main .panel-main .favorite__button button.is-active {
    background: #d5a72d;
}

/* ---- 操作リスト共通 ---- */
.simulation-main .panel-main .panel-middle__box {
    padding: 0;
    margin: 0;
    border-bottom: 0;
}
.simulation-main .panel-main .custom__list > li {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
}
.simulation-main .panel-main .custom__list > li + li {
    margin-top: 24px;
}
.simulation-main .panel-main .custom__list .name {
    display: flex !important;
    align-items: center;
    flex: 0 0 187px;
    width: 187px;
    min-width: 0;
    padding: 0 !important;
    font-size: 1.6rem !important;
    line-height: 1.4;
    color: #555;
    text-align: left;
}
.simulation-main .panel-main .custom__list .value {
    flex: 1;
    min-width: 0;
    text-align: left;
}

/* ---- 任意バッジ: 白地・細枠・ラベルの右に同じ行で表示 ---- */
.simulation-main .panel-main .custom__list li.item-option > .name .so-badge-optional,
.simulation-main .panel-main .custom__list li.item-color > .name .so-badge-optional {
    display: inline-block;
    width: auto;
    margin: 0 0 0 8px;
    padding: 2px 6px;
    font-size: 1.0rem;
    font-weight: 400;
    line-height: 1.4;
    color: #555;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* ---- サイズスライダー行 (幅/奥行/高さ) ---- */
.simulation-main .panel-main .custom__list > li.item-size-axis {
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    align-items: flex-start;
}
.simulation-main .panel-main .custom__list > li.item-size-axis .name {
    flex: 0 0 93px;
    width: 93px;
    padding-top: 32px !important;
    align-items: flex-start;
}
.simulation-main .custom__list .step-slider {
    margin: 0;
}
/* つまみの位置は --so-ratio (0〜1) で吹き出し・min/max表示と共有する */
.simulation-main .custom__list .step-slider > div {
    position: relative;
    padding: 38px 37px 31px 35px;
}
.simulation-main .custom__list .step-slider input[type="range"] {
    display: block;
    width: 100%;
    height: 10px;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    background: #efefef;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
}
.simulation-main .custom__list .step-slider input[type="range"]::-webkit-slider-runnable-track {
    height: 10px;
    background: transparent;
}
.simulation-main .custom__list .step-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    box-sizing: border-box; /* 2px の枠線込みで 22px にする(content-box だと 26px になり、吹き出しの中心計算とずれる) */
    width: 22px;
    height: 22px;
    margin-top: -6px;
    border: 2px solid #bdbdbd;
    border-radius: 50%;
    background: #ededed;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.simulation-main .custom__list .step-slider input[type="range"]::-moz-range-thumb {
    box-sizing: border-box;
    width: 22px;  /* webkit と同じ 22px(吹き出し位置の計算を共通にする) */
    height: 22px;
    border: 2px solid #bdbdbd;
    border-radius: 50%;
    background: #ededed;
}
.simulation-main .custom__list .step-slider .btn-minus,
.simulation-main .custom__list .step-slider .btn-plus {
    position: absolute;
    top: 32px;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
}
.simulation-main .custom__list .step-slider .btn-minus { left: 0; }
.simulation-main .custom__list .step-slider .btn-plus  { right: 0; }
.simulation-main .custom__list .step-slider .btn-minus img,
.simulation-main .custom__list .step-slider .btn-plus img {
    display: block;
    width: 100%;
    height: 100%;
}
/* 吹き出し: 現在値(つまみに追従)
   2026-10-09 先方指示(DevTools キャプチャ): 灰色の箱(background / border)を外し、太字 1.6rem の数値だけにする */
.simulation-main .so-slider-bubble {
    position: absolute;
    top: 0;
    /* つまみの中心に合わせる: つまみ(22px)は入力欄の端から半径 11px 内側までしか動かないので、
       移動範囲 = 入力欄幅 − 22px、開始位置 = 左 padding 35px + 11px(2026-10-09 ずれ修正。以前は端〜端で計算していて両端で最大 11px ずれた) */
    left: calc(46px + (100% - 94px) * var(--so-ratio, 0.5));
    transform: translateX(-50%);
    margin: 0;
    padding: 3px 10px;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.5;
    color: #555;
    white-space: nowrap;
    background: none;
    border: 0;
    border-radius: 4px;
}
/* 最小・最大の目盛り */
.simulation-main .so-slider-range {
    position: absolute;
    left: 35px;  /* 最小・最大の目盛りはバー(トラック)の両端を中心にする(先方指示 2026-10-09。つまみ基準ではない) */
    right: 37px;
    bottom: 7px;
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    line-height: 1;
    color: #555;
}
.simulation-main .so-slider-range .so-slider-min { transform: translateX(-50%); }
.simulation-main .so-slider-range .so-slider-max { transform: translateX(50%); }
/* 既存の個別余白調整(item 11)を打ち消す */
.simulation-main .panel-main .custom__list .item-width .value.slider > div,
.simulation-main .panel-main .custom__list .item-depth .value.slider > div,
.simulation-main .panel-main .custom__list .item-height .value.slider > div {
    padding: 38px 37px 31px 35px;
}
.simulation-main .panel-main .custom__list li.item-depth,
.simulation-main .panel-main .custom__list li.item-height {
    margin-top: 0;
}
.simulation-main .panel-main .custom__list .item-depth .name {
    padding-top: 32px !important;
}

/* ---- 本体カラー(スウォッチ): 40px角丸 + 選択時は枠付き ---- */
.simulation-main .panel-main .custom__list > li.item-color {
    align-items: flex-start;
    margin-top: 26px;
}
.simulation-main .panel-main .custom__list > li.item-color + li {
    margin-top: 16px;
}
.simulation-main .panel-main .custom__list > li.item-color .name {
    padding-top: 14px !important;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list ul {
    gap: 8px 14px;
    margin: 0;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label {
    width: 48px;
    height: 48px;
    padding: 3px !important;
    border: 1px solid transparent !important;
    border-radius: 5px;
    box-sizing: border-box;
    justify-content: center;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label.active .so-swatch-chip {
    outline: 1px solid #3c3c3c;
    outline-offset: 3px;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-chip {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 4px !important;
    box-shadow: none;
}
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label.active .so-swatch-chip,
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label:hover .so-swatch-chip {
    box-shadow: none;
}

/* 白系スウォッチが背景に溶けないよう、チップに薄い内枠を付ける */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-chip {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/* 差額バッジ付きでもスウォッチ枠が切れないよう、高さは最小値指定にする */
.simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label {
    height: auto;
    min-height: 48px;
}
/* 固定寸法の行: ラベルと値を縦中央で揃える */
.simulation-main .panel-main .custom__list > li.item-size-axis.is-fixed {
    align-items: center !important;
}
.simulation-main .panel-main .custom__list > li.item-size-axis.is-fixed .name {
    padding-top: 0 !important;
    align-items: center;
}
/* 固定軸の値(例: 奥行 45cm)。2026-10-09 先方指示: スライダーの吹き出しと同じく箱(background / border)を外して太字の数値だけにする */
.simulation-main .panel-main .custom__list li.is-fixed .value > p {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 12px;
    background: none;
    border: 0;
    border-radius: 6px;
    color: #3c3c3c;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* ---- プルダウン ---- */
.simulation-main .panel-main .custom__list .item-option .value .c-select--a {
    display: block;
    width: 100%;
}
.simulation-main .panel-main .custom__list .item-option .value .c-select--a select {
    width: 100%;
    max-width: none;
    height: 40px;
    padding: 0 40px 0 16px;
    font-size: 1.4rem;
    color: #555;
    background: #fdfdfd;
    border: 0;
    border-radius: 6px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
    -webkit-appearance: none;
    appearance: none;
}
.simulation-main .panel-main .custom__list .item-option .c-select--a:before {
    top: calc(50% - 6px);
    right: 16px;
    width: 7px;
    height: 7px;
    border-color: #555;
    border-width: 1px;
}

/* ---- トグル(あり/なし) ---- */
.simulation-main .panel-main .custom__list .item-option .value.switch {
    justify-content: flex-end;
}
.simulation-main .panel-main .custom__list .item-option .value.switch ul {
    padding: 0;
    border: 1px solid #d9d9d9;
    border-radius: 8px !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.16);
}
.simulation-main .panel-main .custom__list .item-option .value.switch li {
    flex: 0 0 60px;
}
.simulation-main .panel-main .custom__list .item-option .value.switch li + li:before {
    display: none;
}
.simulation-main .panel-main .custom__list .item-option .value.switch li label {
    width: 60px;
    height: 40px;
    padding: 0;
    font-size: 1.4rem;
    line-height: 40px;
    color: #555;
    border-radius: 8px;
}
.simulation-main .panel-main .custom__list .item-option .value.switch li label.active {
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.18) !important;
}

/* ---- ボタン ---- */
.simulation-main .panel-main .panel-bottom__box {
    display: block !important;
    margin-top: 48px;
}
.simulation-main .panel-main .panel-bottom__box .cart__button {
    width: 100%;
    max-width: none;
    margin: 0;
}
.simulation-main .panel-main .panel-bottom__box .cart__button .c-button--h {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 60px;
    padding: 0;
    margin: 0 !important;
    font-size: 1.6rem;
    border-radius: 30px;
}
.simulation-main .panel-main .panel-bottom__note {
    margin-top: 16px;
    font-size: 1.4rem;
    text-align: left;
}
.simulation-main .panel-main .panel-bottom__note > a {
    display: block;
}
/* #35 (2026-10-09): 配色・線・太字・ホバーはテーマ CSS(style.css .color-request / :hover)に任せて
   ituki と同一にする(枠線 2px #000・太字・ホバーで黒背景/白文字 + アイコン反転)。
   以前ここで指定していた border:1.5px #333 / color:#333 / background:#fff / font-weight:400 は
   詳細度が高く :hover の配色まで打ち消していたため削除。ここでは寸法と配置だけ上書きする。 */
.simulation-main .panel-main .panel-bottom__note .color-request {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: none !important;
    height: 58px;
    margin: 0 !important;
    padding: 0;
    font-size: 1.5rem;
    border-radius: 30px;
    box-sizing: border-box;
}
/* PC: セレクト家具（.productsDetail-main__info .cart）に合わせ、幅300px・高さ50px */
@media screen and (min-width: 1001px) {
    .simulation-main .panel-main .panel-bottom__box .cart__button .c-button--h,
    .simulation-main .panel-main .panel-bottom__note .color-request {
        width: 300px !important;
        height: 50px;
        font-size: 1.6rem;
    }
}
.simulation-main .panel-main .panel-bottom__note .link {
    margin-top: 12px;
    font-size: 1.3rem;
    color: #555;
}
.simulation-main .panel-main .panel-bottom__note p + p {
    margin-top: 12px;
}

/* ---- 注記テキスト(商品説明の注意書き / 配送注記): twig の .panel-simulator__note に対応 ---- */
.simulation-main .panel-simulator__note {
    margin-top: 20px;
    font-size: 1.4rem;
    line-height: 1.85;
    color: #555;
}
.simulation-main .panel-simulator__note p { margin: 0; }
.simulation-main .panel-simulator__note.u-pc { display: block; margin-top: 28px; }
.simulation-main .panel-simulator__note.u-sp { display: none; }

/* ---- 画像エリア: メイン画像 + サムネ列 ---- */
.simulation-main .productsDetail-main__image-main {
    margin: 0;
    background: #fff;
    /* サイトCSSの aspect-ratio:30/23 を解除し、枠の高さを画像に合わせる(下に灰色が出ないように) */
    aspect-ratio: auto;
    height: auto !important;
}
.simulation-main .productsDetail-main__image-main .num {
    display: none;
}
.simulation-main .productsDetail-main__image-main .slick-arrow {
    opacity: 0;
    transition: opacity 0.2s;
}
.simulation-main .productsDetail-main__image-main:hover .slick-arrow {
    opacity: 1;
}
.simulation-main .so-thumb-nav {
    position: relative;
    display: block;
    margin: 14px 0 0;
    padding-bottom: 0;
}
/* #34 (2026-10-09): サムネ列の下のスクロールバー。以前は固定 130px の飾りで動かなかった。
   JS(initSoThumbNav の updateScrollbar)がサムネ列(.so-thumb-nav__track)のスクロール位置・表示比率から
   --so-bar-x(つまみの左位置) / --so-bar-w(つまみの幅) を更新し、矢印・ドラッグ・メイン画像切替のいずれでも連動する。
   全サムネが収まっているときはつまみが全幅(=スクロール不要)になる。 */
.simulation-main .so-thumb-nav::after {
    content: "";
    display: block;
    height: 1px; /* #34 追記(261013): 2px → 1px */
    margin-top: 12px;
    background: linear-gradient(90deg,
        #e5e5e5 0,
        #e5e5e5 var(--so-bar-x, 0px),
        #bbb var(--so-bar-x, 0px),
        #bbb calc(var(--so-bar-x, 0px) + var(--so-bar-w, 130px)),
        #e5e5e5 calc(var(--so-bar-x, 0px) + var(--so-bar-w, 130px)),
        #e5e5e5 100%);
}
/* #34 追記(261013): サムネが全部収まっていてスクロール不要なときはバーと左右の矢印を出さない(JS が is-no-scroll を付ける) */
.simulation-main .so-thumb-nav.is-no-scroll::after,
.simulation-main .so-thumb-nav.is-no-scroll .so-thumb-nav__arrow {
    display: none;
}
.simulation-main .so-thumb-nav__track {
    overflow-x: auto;
}
.simulation-main .so-thumb-nav__list {
    gap: 20px;
    padding: 8px 20px;
}
.simulation-main .so-thumb-nav__btn {
    width: 120px;
    height: 68px;
    border: 0;
    border-radius: 2px;
    opacity: 1;
}
.simulation-main .so-thumb-nav__btn.is-active {
    outline: 1px solid #7f7f7f;
    outline-offset: 5px;
}
.simulation-main .so-thumb-nav__arrow {
    position: absolute;
    top: 42px;
    z-index: 1;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    color: #fff;
    background: #7f7f7f;
    border: 0;
    border-radius: 50%;
}
.simulation-main .so-thumb-nav__arrow:hover:not(:disabled) {
    background: #555;
    border-color: transparent;
}
.simulation-main .so-thumb-nav__arrow--prev { left: 0; }
.simulation-main .so-thumb-nav__arrow--next { right: 0; }

/* ---- 商品説明エリア(配送について〜ブランド紹介): 白背景 + グレーの角丸ボックス ----
   markup は標準商品詳細(detail_1.twig)と同じ。テーマCSSの配色だけ XD に寄せる */
.simulation-main ~ .so-detail-under,
.so-detail-under {
    background: #fff;
}
.so-detail-under .productsDetail-main-under {
    padding: 0;
    background: #fff;
}
.so-detail-under .productsDetail-main__detail-body {
    padding: 48px 50px;
    background: #f5f5f5;
    border: 1px solid #ececec;
    border-radius: 8px;
}
.so-detail-under .productsDetail-main__detail-body .box + .box {
    margin-top: 40px;
}
.so-detail-under .productsDetail-main__detail-body .title {
    padding-bottom: 10px;
    margin-bottom: 18px;
    font-size: 1.6rem;
    font-weight: 700;
    color: #3c3c3c;
    border-bottom: 1px solid #ddd;
}
.so-detail-under .productsDetail-main__detail-body .text,
.so-detail-under .productsDetail-main__detail-body .text p {
    font-size: 1.4rem;
    line-height: 1.9;
    color: #555;
}
@media screen and (max-width: 767px) {
    /* SP: 画面幅いっぱいのグレー帯 */
    .so-detail-under .u-cts__inner {
        padding: 0;
    }
    /* テーマの SP 用 margin:0 -20px を解除（u-cts__inner の左右余白を 0 にしたため、画面外へはみ出す） */
    .so-detail-under .productsDetail-main-under,
    .so-detail-under .productsDetail-main__detail,
    .so-detail-under .productsDetail-main__detail-body {
        margin-right: 0;
        margin-left: 0;
    }
    /* テーマの SP 用 .box の左右余白(20px)を解除し、DB項目と貼り付けHTMLの左端を揃える */
    .so-detail-under .productsDetail-main__detail-body .box {
        padding-right: 0;
        padding-left: 0;
    }
    .so-detail-under .productsDetail-main-under,
    .so-detail-under .productsDetail-main__detail-body {
        background: #f5f5f5;
    }
    .so-detail-under .productsDetail-main__detail-body {
        padding: 40px 20px;
        border: 0;
        border-radius: 0;
    }
    .so-detail-under .productsDetail-main__detail-body .text,
    .so-detail-under .productsDetail-main__detail-body .text p {
        font-size: 1.3rem;
    }
}

@media screen and (max-width: 767px) {
    /* SP でもテーマの黒いアコーディオン見出しは使わず、XD どおり見出し + 本文を常時表示する */
    .so-detail-under .productsDetail-main__detail-button {
        display: none;
    }
    .so-detail-under .productsDetail-main__detail-body .title.u-pc {
        display: block !important;
    }
    .so-detail-under .productsDetail-main__detail-body .js-toggle__body {
        display: block !important;
    }
    .so-detail-under .productsDetail-main__detail-body .block + .block {
        margin-top: 40px;
    }
}

/* ---- チャット質問エリア以降(レビュー・使用事例など)も背景なし(白) ----
   テーマの .ec-layoutRole は全体が #FAFAFA のため、メイン領域とフッター上部
   (支払い・納期などの案内 〜 パンくず)を白にする。
   営業日カレンダー以降のフッターは変更しない */
.ec-layoutRole__contents,
.ec-layoutRole__main,
.ec-layoutRole__footer .l-footerRole__wrap {
    background: #fff;
}
/* 末尾の子要素の margin-bottom(使用事例の80px)が親の外へ抜けて下地のグレーが見えるのを防ぐ */
.ec-layoutRole__main {
    display: flow-root;
}

/* ---- 管理画面で貼り付けた商品説明HTML(size_diagram_html): 同じグレー枠の中で見た目を統一 ----
   中身はインラインスタイル付きHTMLのため !important で上書きする。
   枠(背景・角丸・余白)は親の .productsDetail-main__detail-body が担当し、HTML側の外枠は解除する */
.so-detail-html {
    margin-top: 40px;
    font-size: 1.4rem;
    line-height: 1.9;
    color: #555;
    /* p / br のないCMS本文も、入力された改行と空行を保つ。字下げの空白は折り畳む */
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.so-detail-html:first-child {
    margin-top: 0;
}
.so-detail-html > div {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.4rem !important;
    line-height: 1.9 !important;
    color: #555 !important;
    background: none !important;
    border: 0 !important;
    /* セクション付きHTMLでは、タグ間の整形用改行を余白として表示しない */
    white-space: normal;
}
.so-detail-html img,
.so-detail-html video {
    display: block;
    max-width: 100%;
    height: auto;
}
/* 標準商品詳細の .text .uwaoki と同じ幅にする（PC: 本文幅の半分 / SP: 全幅） */
.so-detail-html .uwaoki {
    width: 50%;
}
.so-detail-html a {
    /* 画像リンク内のタグ整形用改行は、本文の空行と区別する */
    white-space: normal;
}
.so-detail-html .c-button--j {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 10px;
}
.so-detail-html section {
    margin: 0 0 40px !important;
}
.so-detail-html section:last-child {
    margin-bottom: 0 !important;
}
.so-detail-html h2,
.so-detail-html h3 {
    margin: 0 0 18px !important;
    padding: 0 0 10px !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    color: #3c3c3c !important;
    border-bottom: 1px solid #ddd !important;
}
.so-detail-html p,
.so-detail-html li,
.so-detail-html td {
    font-size: 1.4rem !important;
    line-height: 1.9 !important;
    color: #555 !important;
}
@media screen and (max-width: 767px) {
    .so-detail-html,
    .so-detail-html > div,
    .so-detail-html p,
    .so-detail-html li,
    .so-detail-html td {
        font-size: 1.3rem !important;
    }
    .so-detail-html .uwaoki {
        width: 100%;
    }
}

/* ---- PC (1001px〜): 左=画像575px / 右=情報545px の2カラム ---- */
@media screen and (min-width: 1001px) {
    /* 1240px 以下でも画像側(.product-box)と情報側(.panel-main)の間隔 80px を保ち、
       両者を同じ比率で少しずつ縮める。画像側は cqw(コンテナ幅比)でサムネ・ボタン・高さも連動 */
    .simulation-main .u-cts__inner {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 80px;
        max-width: 1240px;
        padding: 100px 20px 0px;
    }
    .simulation-main .product-box {
        position: static;
        flex: 0 1 575px;
        width: auto;
        min-width: 0;
        max-width: 575px;
        padding: 0;
        container-type: inline-size;
    }
    .simulation-main .product-box__inner {
        max-width: none;
        margin: 0;
    }
    .simulation-main .panel-main {
        flex: 0 1 545px;
        width: auto;
        min-width: 430px;
        margin: 0;
        padding: 0;
    }
    .simulation-main .productsDetail-main__image-main {
        height: auto !important;
    }
    .simulation-main .productsDetail-main__image-main img {
        width: 100%;
        height: auto;
    }
    .simulation-main .so-thumb-nav { margin-top: 2.4cqw; }
    .simulation-main .so-thumb-nav::after { margin-top: 2cqw; }
    .simulation-main .so-thumb-nav__list { gap: 3.48cqw; padding: 1.4cqw 3.48cqw; }
    .simulation-main .so-thumb-nav__btn { width: 20.87cqw; height: 11.83cqw; }
    .simulation-main .so-thumb-nav__arrow {
        top: 7.3cqw;
        width: 4.87cqw;
        height: 4.87cqw;
        margin-top: -2.43cqw;
    }
}

/* ---- SP/タブレット(〜1000px): 縦積み ---- */
@media screen and (max-width: 1000px) {
    .simulation-main .u-cts__inner {
        display: block;
        padding: 0;
    }
    .simulation-main .product-box {
        padding: 0;
        margin: 0; /* サイトCSS(〜767px)の margin:0 -20px を解除 */
    }
    .simulation-main .panel-main {
        margin: 0;
    }
    .simulation-main .productsDetail-main__image-main {
        width: 100%;
        height: auto !important;
        margin: 0;
    }
    .simulation-main .productsDetail-main__image-main img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    .simulation-main .so-thumb-nav {
        width: auto; /* 元CSSの width:100% + 左右margin で画面幅からはみ出すのを防ぐ */
        margin: 12px 20px 0;
    }
    .simulation-main .panel-simulator__note.u-pc { display: none; }
    .simulation-main .panel-simulator__note.u-sp { display: block; }
    .simulation-main .panel-main {
        padding: 28px 20px 40px;
    }
    .simulation-main .panel-main .panel-top__box {
        display: flex !important;
    }
    .simulation-main .panel-main .title {
        margin-top: 0;
    }
}

/* ---- SP (〜767px) ---- */
@media screen and (max-width: 767px) {
    /* タイトル: セレクト家具と同じく、ラベル・商品名とも 16px */
    .simulation-main .panel-main .title,
    .simulation-main .panel-main .title span {
        font-size: 1.6rem;
    }
    /* 価格: セレクト家具の SP と同じサイズ */
    .simulation-main .panel-main .panel-top__box .price {
        font-size: 2.2rem;
    }
    .simulation-main .panel-main .panel-top__box .price .zei {
        font-size: 1.0rem;
    }
    .simulation-main .panel-main .custom__list .name {
        flex-basis: 123px;
        width: 123px !important;
        min-width: 0 !important;
        font-size: 1.3rem !important;
    }
    .simulation-main .panel-main .custom__list > li.item-size-axis .name {
        flex-basis: 48px;
        width: 48px !important;
    }
    .simulation-main .custom__list .step-slider > div,
    .simulation-main .panel-main .custom__list .item-width .value.slider > div,
    .simulation-main .panel-main .custom__list .item-depth .value.slider > div,
    .simulation-main .panel-main .custom__list .item-height .value.slider > div {
        padding: 37px 32px 28px 30px;
    }
    .simulation-main .custom__list .step-slider .btn-minus,
    .simulation-main .custom__list .step-slider .btn-plus {
        width: 24px;
        height: 24px;
        top: 30px;
    }
    .simulation-main .so-slider-bubble {
        left: calc(41px + (100% - 84px) * var(--so-ratio, 0.5)); /* SP: 左 padding 30px + つまみ半径 11px、範囲 = 幅 − 62px − 22px */
        font-size: 1.6rem;  /* #37 追記(261013): SP は 1.6rem / #3c3c3c(1.2rem / #555 から。先方キャプチャの赤印の指示) */
        color: #3c3c3c;
    }
    /* #37 追記(261013): 固定値(奥行 45cm)は SP では 1.4rem(PC の 1.6rem より一段小さく、吹き出しとそろえる) */
    .simulation-main .panel-main .custom__list li.is-fixed .value > p {
        font-size: 1.4rem;
    }
    .simulation-main .so-slider-range {
        left: 30px;  /* SP もバーの両端を中心に */
        right: 32px;
    }
    .simulation-main .panel-main .custom__list > li.item-size-axis .name,
    .simulation-main .panel-main .custom__list .item-depth .name {
        padding-top: 30px !important;
    }
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list ul {
        gap: 9px 9px;
        padding: 0;
    }
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label {
        width: max-content;
        min-width: 35px;
        height: auto;
        min-height: 35px;
        padding: 3px !important;
    }
    /* 差額はチップの下に必要な高さ・幅を確保し、テーマの span 用切り抜きを解除する */
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-price-badge {
        flex-shrink: 0;
        overflow: visible;
        border: 0;
        margin-top: 0;
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .simulation-main .panel-main .custom__list .item-color.so-item-color .value.list li label .so-swatch-chip {
        width: 29px !important;
        height: 29px !important;
    }
    .simulation-main .panel-main .custom__list > li {
        flex-direction: row !important;
        align-items: center !important;
    }
    .simulation-main .panel-main .custom__list > li.item-size-axis,
    .simulation-main .panel-main .custom__list > li.item-color {
        align-items: flex-start !important;
    }
    .simulation-main .panel-main .custom__list .value,
    .simulation-main .panel-main .custom__list .value.slider,
    .simulation-main .panel-main .custom__list .value.list,
    .simulation-main .panel-main .custom__list .value.switch {
        width: auto !important;
        flex: 1 !important;
    }
    .simulation-main .panel-main .custom__list .item-option .value.switch {
        justify-content: flex-end;
    }
    .simulation-main .panel-main .custom__list .item-option .value.switch ul {
        display: flex !important;
    }
    .simulation-main .panel-main .panel-bottom__box {
        margin-top: 28px;
    }
    .simulation-main .panel-simulator__note {
        font-size: 1.2rem;
    }
    .simulation-main .panel-main .panel-bottom__box .cart__button .c-button--h {
        height: 52px;
    }
    .simulation-main .panel-main .panel-bottom__note .color-request {
        height: 50px;
    }
    .simulation-main .so-thumb-nav__list { gap: 11px; padding: 8px 12px; }
    .simulation-main .so-thumb-nav__btn { width: 96px; height: 52px; }
    .simulation-main .so-thumb-nav__arrow { width: 24px; height: 24px; margin-top: -12px; top: 34px; }
}

/* サムネイル: 各ブレイクポイントの高さはそのまま、幅は画像ごとの比率に合わせる（切り抜かない）。
   上の width 指定より後ろに置いて全ブレイクポイントで上書きする */
.simulation-main .so-thumb-nav__btn {
    width: auto;
}
.simulation-main .so-thumb-nav__btn img {
    width: auto;
    max-width: none;
    height: 100%;
    object-fit: contain;
}

/* 商品説明のグレー枠 (.so-detail-under) の通常テキストを PC・SP 共通で 16px に統一。
   div の基本サイズは、個別指定で上書きできるようにする。
   ※ 取り込み時にスコープを .u-cts → .so-detail-under に限定 (シミュレータ・レビュー・使用事例・フッター側ブロックへ波及しないように) */
.so-detail-under,
.so-detail-under div {
    font-size: 16px;
}
.so-detail-under p,
.so-detail-under .text,
.so-detail-under .text div,
.so-detail-under .so-detail-html,
.so-detail-under .so-detail-html div,
.so-detail-under .so-detail-html li,
.so-detail-under .so-detail-html td {
    font-size: 16px !important;
}

/* グレー枠の見出しサイズを PC・SP 共通で統一（既存の !important 指定も上書き） */
.so-detail-under h2,
.so-detail-under h3 {
    font-size: 2.0rem !important;
}

/* ---- #39 (2026-10-09): SP でカラー選択(枠A)の名称からチップまでの余白が広すぎる ----
   SP(≤767px)は全行とも「ラベル列 123px 固定 + 右に入力部」の横並び(上の ≤767px ブロック)。
   プルダウンは 123px の位置から箱が始まるので気にならないが、カラー行は小さな丸チップが並ぶため
   「カラー」(3 文字 ≒ 40px)の後ろに 80px 前後の空白が目立っていた。
   カラー行だけラベル列を文字幅に合わせ(auto)、チップとの間隔をチップ同士の間隔(9px)と同程度の 10px にする。
   ラベルの上余白は PC の 14px(48px チップの中央合わせ)から、SP の 35px チップに合わせた 8px にする。
   枠B/C/D(プルダウン・トグル)は 123px のまま(入力部の左端がそろう現状を維持)。
   この位置(≤767px ブロックより後)に置くのは、同じ詳細度・!important 同士で後勝ちさせるため。 */
@media screen and (max-width: 767px) {
    .simulation-main .panel-main .custom__list > li.item-color .name {
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: 40%;
        padding-top: 8px !important;
        padding-right: 10px !important;
    }
}