@charset "UTF-8";

/*
 * mat_imp3.css
 * ピアリビング 防音マット系 見積ツール 共通スタイル
 * 対象: 静床ライト / 静床プレミア / P防振マット / 足音マット / 足音マットWoody
 *
 * ※ サイト側 body に font-size:1.6rem が設定されているため
 *   フォントサイズはすべて px 固定で記述しています
 */

/* ============================================================
   CSS変数
   プレフィックス: --mie- (mat-imp-estimate)
   ============================================================ */
:root {
    --mie-cream:        #faf8f4;
    --mie-white:        #ffffff;
    --mie-border:       #e8ddd0;
    --mie-brown-dark:   #3d2b1f;
    --mie-brown-mid:    #7a5c44;
    --mie-brown-light:  #c4a882;
    --mie-accent:       #c17f3e;
    --mie-accent-hover: #a36830;
    --mie-accent-pale:  rgba(193, 127, 62, 0.12);
    --mie-green:        #5a8060;
    --mie-green-hover:  #446348;
    --mie-red:          #c0392b;
    --mie-red-bg:       #fdf2f0;
    --mie-red-border:   #f5c6c0;
    --mie-shadow-sm:    0 2px 10px rgba(61, 43, 31, 0.10);
    --mie-radius:       10px;
    --mie-radius-sm:    6px;
    --mie-transition:   0.18s ease;
    --mie-font:         'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Meiryo', sans-serif;
}


/* ============================================================
   ラッパー：font-size を px でリセット（body:1.6rem の影響遮断）
   ============================================================ */
.mie-wrapper {
    max-width: 760px;
    width: 100%;
    margin: 24px auto 48px;
    font-family: var(--mie-font) !important;
    font-size: 14px !important;
    color: var(--mie-brown-dark);
    line-height: 1.7;
    box-sizing: border-box;
}

.mie-wrapper *,
.mie-wrapper *::before,
.mie-wrapper *::after {
    box-sizing: border-box;
    font-family: var(--mie-font);
}


/* ============================================================
   h1（ツールタイトル）
   ============================================================ */
.mie-wrapper #estimate,
.mie-wrapper .matestimate_area h1 {
    font-size: 15px !important;
    font-weight: 700 !important;
    background: var(--mie-brown-dark) !important;
    color: var(--mie-white) !important;
    padding: 12px 16px !important;
    border-radius: var(--mie-radius) var(--mie-radius) 0 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.03em;
    line-height: 1.4 !important;
}


/* ============================================================
   全体ラッパーのボーダー・背景
   ============================================================ */
/* category.css 側の border:2px solid #464645 / width:100% をそのまま活かす
   mat_imp3.css 側ではボーダー・幅を上書きせず、角丸とoverflowだけ指定する */
.mie-wrapper .matestimate_area-wrapper {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border-radius: 6px !important;   /* category.css と同じ値 */
    box-shadow: none !important;
    overflow: hidden;
    background: var(--mie-white);
}

.mie-wrapper .areaIn {
    width: 100%;
    margin: 0;
    padding: 16px;
}

.mie-wrapper .areaIn form {
    display: block;
    padding: 0;
}


/* ============================================================
   dt（注記テキスト）
   ============================================================ */
.mie-wrapper dl {
    margin: 0;
}

.mie-wrapper dt {
    font-size: 13px;
    font-weight: 700;
    color: var(--mie-brown-mid);
    padding: 0 0 10px;
    border-bottom: 1px dashed var(--mie-border);
    margin-bottom: 14px;
    line-height: 1.65;
}

.mie-wrapper dt span[style*="color: red"],
.mie-wrapper dt span[style*="color:red"] {
    font-size: 12px !important;
    color: var(--mie-red) !important;
    font-weight: 600;
    line-height: 1.7;
}

.mie-wrapper dd {
    margin: 0 0 12px;
}

.mie-wrapper .choice_item {
    font-size: 12px;
    font-weight: 700;
    color: var(--mie-brown-mid);
    padding-bottom: 8px;
    margin: 0;
}


/* ============================================================
   ラジオボタン選択エリア
   既存HTML: <ul><li><input type="radio">テキスト</li></ul>
   ============================================================ */
.mie-wrapper .left dd ul {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* li 全体をボタン風に */
.mie-wrapper .left dd ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px 6px !important;
    position: relative;
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 2px solid var(--mie-border) !important;
    border-radius: var(--mie-radius-sm) !important;
    background: var(--mie-cream) !important;
    cursor: pointer;
    transition: border-color var(--mie-transition), background var(--mie-transition), box-shadow var(--mie-transition);
    font-size: 13px !important;
    font-weight: 600;
    color: var(--mie-brown-mid) !important;
    text-align: center;
    user-select: none;
    box-shadow: none !important;
}

.mie-wrapper .left dd ul li:hover {
    border-color: var(--mie-brown-light) !important;
    background: var(--mie-white) !important;
}

/* :has() 対応ブラウザ：チェック済みを強調 */
.mie-wrapper .left dd ul li:has(input[type="radio"]:checked) {
    border-color: var(--mie-accent) !important;
    background: var(--mie-white) !important;
    color: var(--mie-accent) !important;
    box-shadow: 0 0 0 3px var(--mie-accent-pale) !important;
}

/* ラジオボタン本体：li 全体をクリック領域にするため透明で重ねる */
.mie-wrapper .left dd ul li input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 100% !important;
    height: 100% !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    cursor: pointer;
    z-index: 1;
}


/* ============================================================
   厚さ・タイプ セレクトボックス
   ============================================================ */
.mie-wrapper .thickness-chk {
    margin: 12px 0;
}

.mie-wrapper .thickness-chk label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--mie-brown-mid);
    margin-bottom: 6px;
}

.mie-wrapper .thickness-chk select,
.mie-wrapper #thickness {
    width: 100%;
    max-width: 320px;
    padding: 8px 32px 8px 10px;
    border: 1.5px solid var(--mie-border) !important;
    border-radius: var(--mie-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--mie-brown-dark);
    background-color: var(--mie-cream) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a5c44' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: auto !important;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color var(--mie-transition);
    line-height: 1.4;
}

.mie-wrapper .thickness-chk select:focus,
.mie-wrapper #thickness:focus {
    outline: none;
    border-color: var(--mie-accent) !important;
    background-color: var(--mie-white) !important;
}


/* ============================================================
   サイズ入力エリア
   ============================================================ */
.mie-wrapper .right1,
.mie-wrapper .right2 {
    position: static !important;
}


/* ------ 通常のお部屋：縦・横を横並びグリッド ------ */
/* display はあえて指定しない → JSのdisplay:noneを上書きしないため */
.mie-wrapper .single_calc {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: start;
}

/* #firstBox が表示状態のときだけ grid を適用 */
.mie-wrapper #firstBox:not([style*="display: none"]):not([style*="display:none"]) .single_calc {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}

/* 画像・説明文を2列全体にまたがるよう指定 */
.mie-wrapper .single_calc img,
.mie-wrapper .single_calc p {
    grid-column: 1 / -1 !important;
}

/* #showSize1 は非表示 */
.mie-wrapper .single_calc #showSize1 {
    display: none !important;
}

/* 注意文言を入力欄より上に */
.mie-wrapper .single_calc .choice_description {
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
}

/* 画像は注意文言と入力欄の間に */
.mie-wrapper .single_calc img {
    order: 0 !important;
}

/* 入力ボックスを画像より後に */
.mie-wrapper .single_calc1 {
    order: 1 !important;
}
.mie-wrapper .single_calc2 {
    order: 1 !important;
}

/* 縦（緑の矢印）のラベル */
.mie-wrapper .single_calc1::before {
    content: "縦の長さ（緑の矢印）" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #7a9e47;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}

/* 横（オレンジの矢印）のラベル */
.mie-wrapper .single_calc2::before {
    content: "幅の長さ（オレンジの矢印）" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #c38056;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}


/* ------ 畳数：注意文言を入力欄の上に表示 ------ */
/* display は設定しない → JSの display:none が確実に効く */
.mie-wrapper .tm_calc {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    /* display はあえて指定しない（JSのdisplay:noneを上書きしないため） */
    gap: 8px;
}

/* #thirdBox が表示状態のときだけ flex を適用 */
.mie-wrapper #thirdBox:not([style*="display: none"]):not([style*="display:none"]) .tm_calc {
    display: flex !important;
    flex-direction: column !important;
}

/* tm_calc内の並び順：注意文言 → 入力ボックス */
.mie-wrapper .tm_calc .choice_description {
    order: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
}

.mie-wrapper .tm_calc1 {
    order: 2 !important;
}

/* showSize2・img は非表示 */
.mie-wrapper .tm_calc #showSize2 {
    display: none !important;
}

.mie-wrapper .tm_calc img {
    display: none !important;
}

/* 「帖(畳)数」ラベルをinputの上に */
.mie-wrapper .tm_calc1::before {
    content: "帖(畳)数" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: var(--mie-brown-mid);
    margin-bottom: 4px;
    line-height: 1;
}

/* 畳数li：HTMLで既に「帖(畳)」と記載済みなのでそのまま表示 */
.mie-wrapper #thirdBox .tm_calc1 li {
    display: inline-flex !important;
    align-items: center;
    font-size: 13px !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    position: static !important;
    transition: none !important;
}


/* ------ 複雑なお部屋：2×2グリッドレイアウト ------ */
/* display はあえて指定しない → JSのdisplay:noneを上書きしないため */
.mie-wrapper .right2 ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    align-items: start;
}

/* #secondBox が表示状態のときだけ grid を適用 */
.mie-wrapper #secondBox:not([style*="display: none"]):not([style*="display:none"]) .right2 ul {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto !important;
}

/* .multi_area（#secondBox直下）をflexにして注意文言を先頭に */
.mie-wrapper #secondBox:not([style*="display: none"]):not([style*="display:none"]) .multi_area,
.mie-wrapper #secondBox:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    flex-direction: column !important;
}

/* 注意文言を先頭に */
.mie-wrapper #secondBox > .choice_description,
.mie-wrapper .multi_area > .choice_description {
    order: -1 !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    font-size: 12px !important;
}

/* right2（入力グリッド）を注意文言の後に */
.mie-wrapper #secondBox .right2,
.mie-wrapper .multi_area .right2 {
    order: 0 !important;
}

/* 縦・横の配置（row2・3に移動、row1を画像用に空ける） */
.mie-wrapper .multi_calc1 { grid-column: 1; grid-row: 2; }
.mie-wrapper .multi_calc2 { grid-column: 1; grid-row: 3; }
.mie-wrapper .multi_calc3 { grid-column: 2; grid-row: 2; }
.mie-wrapper .multi_calc4 { grid-column: 2; grid-row: 3; }

/* ラベル */
.mie-wrapper .multi_calc1::before {
    content: "縦の長さ（左側の矢印）" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #7a9e47;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}
.mie-wrapper .multi_calc2::before {
    content: "横の長さ（上側の矢印）" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #c38056;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}
.mie-wrapper .multi_calc3::before {
    content: "縦の長さ（右側の矢印）" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #7a9e47;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}
.mie-wrapper .multi_calc4::before {
    content: "横の長さ（下側の矢印）" !important;
    display: block !important;
    font-size: 11px !important;
    font-weight: 700;
    color: #c38056;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
    line-height: 1;
}

/* 画像をrow1（入力欄より上）に配置・2列全体にまたがる */
.mie-wrapper .right2 ul img {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

/* #showSize1 は非表示 */
.mie-wrapper .right2 ul #showSize1 {
    display: none !important;
}

/* 説明文は2列全体にまたがる */
.mie-wrapper .right2 ul p {
    grid-column: 1 / -1 !important;
}


/* ------ 吹き出しボックス共通 → ブロック型入力ボックスに ------ */
.mie-wrapper .single_calc1,
.mie-wrapper .single_calc2,
.mie-wrapper .tm_calc1,
.mie-wrapper .multi_calc1,
.mie-wrapper .multi_calc2,
.mie-wrapper .multi_calc3,
.mie-wrapper .multi_calc4 {
    position: static !important;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    background: var(--mie-cream) !important;
    border: 1.5px solid var(--mie-border) !important;
    border-radius: var(--mie-radius-sm) !important;
    padding: 8px 10px !important;
    font-size: 13px !important;
    font-weight: 600;
    color: var(--mie-brown-dark);
    z-index: auto !important;
    min-width: 0;
    width: 100%;
}

/* 吹き出し矢印（::after のみ非表示、::before はラベルとして使うので残す） */
.mie-wrapper .single_calc1::after,
.mie-wrapper .single_calc2::after,
.mie-wrapper .tm_calc1::after,
.mie-wrapper .multi_calc1::after,
.mie-wrapper .multi_calc2::after,
.mie-wrapper .multi_calc3::after,
.mie-wrapper .multi_calc4::after {
    display: none !important;
    content: none !important;
}

/* li をインラインに（ラジオ用スタイルを上書き） */
.mie-wrapper .single_calc li,
.mie-wrapper .tm_calc li,
.mie-wrapper .right2 ul li {
    list-style: none !important;
    display: inline-flex !important;
    align-items: center;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    box-shadow: none !important;
    font-size: 13px;
    font-weight: 600;
    color: var(--mie-brown-dark);
    cursor: default;
    grid-column: auto !important;
    position: static !important;
    transition: none !important;
    user-select: auto;
}


/* ------ テキスト入力（余白を確保） ------ */
.mie-wrapper #firstBox input[type="text"],
.mie-wrapper #secondBox input[type="text"],
.mie-wrapper #thirdBox input[type="text"] {
    border: 1.5px solid var(--mie-border) !important;
    border-radius: var(--mie-radius-sm) !important;
    padding: 7px 10px !important;   /* 左右余白を広げる */
    font-size: 14px !important;
    font-weight: 600;
    color: var(--mie-brown-dark);
    background: var(--mie-white) !important;
    width: 100% !important;         /* 親ボックス幅いっぱいに */
    max-width: 120px !important;
    transition: border-color var(--mie-transition);
    outline: none;
    line-height: 1.4;
    margin: 0 4px !important;       /* 「縦」「cm」との間に余白 */
}

.mie-wrapper #firstBox input[type="text"]:focus,
.mie-wrapper #secondBox input[type="text"]:focus,
.mie-wrapper #thirdBox input[type="text"]:focus {
    border-color: var(--mie-accent) !important;
    background: var(--mie-white) !important;
}


/* ------ 採寸画像 ------ */
/* 通常のお部屋・複雑なお部屋：表示 */
.mie-wrapper .right2 img,
.mie-wrapper .single_calc img {
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    border-radius: var(--mie-radius-sm);
    display: block !important;
    margin: 12px 0 6px !important;
}

/* 畳数（#thirdBox）：画像を非表示 */
.mie-wrapper #thirdBox img,
.mie-wrapper .tm_calc img {
    display: none !important;
}


/* ------ 説明文 ------ */
.mie-wrapper .choice_description {
    font-size: 12px !important;
    color: var(--mie-brown-mid);
    margin-top: 6px !important;
    line-height: 1.6;
}


/* ============================================================
   計算ボタン
   ============================================================ */
.mie-wrapper .calcbutton,
.mie-wrapper input.calcbutton {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    background: var(--mie-accent) !important;
    color: var(--mie-white) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    border: none !important;
    border-radius: var(--mie-radius-sm) !important;
    cursor: pointer;
    transition: background var(--mie-transition), transform var(--mie-transition);
    margin-top: 14px !important;
    font-family: var(--mie-font) !important;
    text-align: center;
    box-sizing: border-box;
    -webkit-appearance: none;
}

.mie-wrapper .calcbutton:hover,
.mie-wrapper input.calcbutton:hover {
    background: var(--mie-accent-hover) !important;
    transform: translateY(-1px);
}


/* ============================================================
   エラーメッセージ
   ============================================================ */
.mie-wrapper .ermes,
.mie-wrapper p.ermes {
    background: var(--mie-red-bg) !important;
    color: var(--mie-red) !important;
    border: 1px solid var(--mie-red-border) !important;
    border-radius: var(--mie-radius-sm);
    padding: 8px 12px !important;
    font-size: 13px !important;
    font-weight: 600;
    margin: 8px 0 !important;
    line-height: 1.5;
}

/* 中身が空のエラー要素は非表示 */
.mie-wrapper .ermes:empty,
.mie-wrapper p.ermes:empty {
    display: none !important;
}


/* ============================================================
   計算結果エリア（#show_calc 配下）
   ============================================================ */
.mie-wrapper #show_calc {
    margin-top: 10px;
}

/* 必要枚数バナー */
.mie-wrapper #calculesion_output1 {
    background: linear-gradient(135deg, var(--mie-brown-dark) 0%, var(--mie-brown-mid) 100%) !important;
    color: var(--mie-white) !important;
    border-radius: var(--mie-radius-sm);
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    font-size: 14px !important;
    font-weight: 700;
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    line-height: 1.4;
}

.mie-wrapper #calculesion_output1 span {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--mie-white) !important;
}

/* おすすめ枚数テキスト */
.mie-wrapper #qty_output {
    background: var(--mie-cream) !important;
    border: 1px solid var(--mie-border) !important;
    border-radius: var(--mie-radius-sm);
    padding: 10px 14px !important;
    font-size: 13px !important;
    color: var(--mie-brown-mid) !important;
    margin-bottom: 10px !important;
    font-weight: 600;
    line-height: 1.7;
}

.mie-wrapper #qty_output span {
    color: var(--mie-accent) !important;
    font-weight: 800 !important;
}

/* 静床ライト＋足音マット セット枚数 */
.mie-wrapper #est_result {
    background: var(--mie-cream);
    border: 1px solid var(--mie-border);
    border-radius: var(--mie-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.7;
}


/* ============================================================
   商品カード（spcart_col2）
   ============================================================ */
.mie-wrapper .spcart_col2 {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* spcart_col2 直下 li（ラジオui用スタイルとの競合を解消） */
.mie-wrapper .spcart_col2 > li {
    background: var(--mie-white) !important;
    border: 1.5px solid var(--mie-border) !important;
    border-radius: var(--mie-radius-sm) !important;
    padding: 8px 12px !important;
    list-style: none !important;
    min-height: auto !important;
    display: block !important;
    cursor: default !important;
    font-size: 13px !important;
    color: var(--mie-brown-dark) !important;
    box-shadow: none !important;
    transition: border-color var(--mie-transition);
    text-align: left !important;
    position: static !important;
    grid-column: auto !important;
}

.mie-wrapper .spcart_col2 > li:hover {
    border-color: var(--mie-brown-light) !important;
    background: var(--mie-white) !important;
    box-shadow: none !important;
}

/* 商品名 */
.mie-wrapper .itemtitle {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--mie-brown-dark) !important;
    margin-bottom: 4px !important;
    line-height: 1.4;
    display: block;
}

/* li内のpは基本表示 */
.mie-wrapper .spcart_col2 li p {
    font-size: 12px !important;
    color: var(--mie-brown-mid) !important;
    margin: 2px 0 !important;
    line-height: 1.4;
    display: block !important;
}

/* 価格（単価）のみ非表示 */
.mie-wrapper .spcart_col2 li p.item-price {
    display: none !important;
}

/* 数量入力 */
.mie-wrapper .spcart_caseQty {
    display: flex !important;
    align-items: center;
    gap: 6px;
    margin: 4px 0 !important;
}

.mie-wrapper .spcart_caseQty span {
    font-size: 12px !important;
    color: var(--mie-brown-mid) !important;
    font-weight: 600;
}

.mie-wrapper .spcart_caseQty input[type="text"] {
    width: 46px !important;
    text-align: center;
    border: 1.5px solid var(--mie-border) !important;
    border-radius: 5px !important;
    padding: 4px 3px !important;
    font-size: 13px !important;
    font-weight: 700;
    color: var(--mie-brown-dark) !important;
    background: var(--mie-cream) !important;
}

/* カラーセレクト ラベル */
.mie-wrapper .selectName {
    font-size: 12px !important;
    font-weight: 700;
    color: var(--mie-brown-mid) !important;
    padding: 4px 0 2px !important;
    margin: 0 !important;
    display: block;
}

/* カラーセレクト本体 */
.mie-wrapper .spcart_select select,
.mie-wrapper .cp_sl01 select,
.mie-wrapper .spcart_col2 > li select {
    width: 100% !important;
    padding: 6px 28px 6px 8px !important;
    border: 1.5px solid var(--mie-border) !important;
    border-radius: 5px !important;
    font-size: 12px !important;
    color: var(--mie-brown-dark) !important;
    background-color: var(--mie-cream) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a5c44' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: auto !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color var(--mie-transition);
    line-height: 1.4;
}

.mie-wrapper .spcart_select select:focus,
.mie-wrapper .cp_sl01 select:focus,
.mie-wrapper .spcart_col2 > li select:focus {
    outline: none;
    border-color: var(--mie-accent) !important;
    background-color: var(--mie-white) !important;
}


/* ============================================================
   合計金額
   ============================================================ */
.mie-wrapper #total_fee {
    background: var(--mie-cream) !important;
    border: 2px solid var(--mie-accent) !important;
    border-radius: var(--mie-radius-sm) !important;
    padding: 10px 14px !important;
    margin: 8px 0 !important;
    font-size: 14px !important;
    font-weight: 700;
    color: var(--mie-brown-dark) !important;
    line-height: 1.5;
    display: block !important;   /* flexをやめてblockに */
}

/* 「合計金額：XXXXX円」を1行に収める */
.mie-wrapper #total_fee .mie-total-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: nowrap;
}

.mie-wrapper .total_output {
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--mie-accent) !important;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.mie-wrapper .total_note,
.mie-wrapper #total_fee p.total_note {
    font-size: 11px !important;
    color: var(--mie-brown-mid) !important;
    line-height: 1.55;
    margin: 4px 0 0 !important;
    font-weight: 400 !important;
    display: block !important;
}


/* ============================================================
   まとめてカートに入れるボタン
   ============================================================ */
.mie-wrapper .large--ibox2__btn {
    margin: 8px 0 0 !important;
    text-align: center;
}

.mie-wrapper .large--ibox2__btn button {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    background: var(--mie-green) !important;
    color: var(--mie-white) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em;
    border: none !important;
    border-radius: var(--mie-radius-sm) !important;
    cursor: pointer;
    transition: background var(--mie-transition), transform var(--mie-transition);
    font-family: var(--mie-font) !important;
}

.mie-wrapper .large--ibox2__btn button:hover {
    background: var(--mie-green-hover) !important;
    transform: translateY(-1px);
}

.mie-wrapper .large--ibox2__btn button:active {
    transform: translateY(0);
}


/* ============================================================
   レスポンシブ
   ============================================================ */
@media screen and (max-width: 480px) {

    .mie-wrapper .left dd ul {
        grid-template-columns: 1fr !important;
    }

    .mie-wrapper .spcart_col2 > li {
        padding: 10px 12px !important;
    }

    .mie-wrapper .areaIn {
        padding: 12px;
    }
}