/* ========================================================= keisan.css（最終版・重複なし）対象：目的：980px中央固定（旧バージョンと同じ見た目） ========================================================= */ /* ========================================================= 全体レイアウト（中央基準） ========================================================= */ /* 共通CSS(bcss2)の影響を受けないよう keisan 側で基準を作る */ body.keisan main{ display: block; } /* 外枠：画面幅いっぱい */ body.keisan .tyuuou{ width: 100%; margin: 0 auto; padding-top: 20px; box-sizing: border-box; } /* 中央コンテンツ本体（980px） */ body.keisan .keisan-center{ max-width: 980px; margin: 0 auto; padding: 0 12px; box-sizing: border-box; } /* ========================================================= 見出し・導入 ========================================================= */ body.keisan .keisan-h1{ margin: 18px 0 6px; font-size: 1.6rem; line-height: 1.3; } body.keisan .keisan-lead{ margin: 0 0 18px; line-height: 1.8; } /* ========================================================= 説明ボックス ========================================================= */ body.keisan .keisan-note{ max-width: 720px; margin: 24px auto 32px; padding: 16px 18px; background: rgba(255,255,255,0.95); border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; font-size: 0.95rem; line-height: 1.8; color: #111; } body.keisan .keisan-note h2{ font-size: 1.25rem; margin: 0 0 10px; } body.keisan .keisan-note p{ margin: 0; } /* ========================================================= 計算フォーム（★ここが中央寄せの本体） ========================================================= */ /* フォーム外枠：980px基準で中央 */ body.keisan .calc-form-container{ max-width: 500px; margin: 0 auto; padding: 0 12px; display: flex; justify-content: center; box-sizing: border-box; } /* フォーム本体：720px固定（旧挙動） */ body.keisan .calc-form{ width: 500px; max-width: 100%; margin: 24px 0; font-size: 15px; text-align: left; box-sizing: border-box; } body.keisan .calc-form h3{ font-size: 15px; font-weight: normal; margin: 0; } body.keisan .calc-item{ margin-bottom: 20px; } /* ========================================================= 入力行（個 × 単価 = 金額） ========================================================= */ body.keisan .input-row{ display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } body.keisan .input-row input[type="number"]{ width: 110px; height: 32px; text-indent: 5px; box-sizing: border-box; } body.keisan .input-row input:disabled{ background: #FFF300; border: 1px solid #FFF300; } /* ========================= 中央寄せを崩す flex/float の影響を遮断 ========================= */ body.keisan main{ display: block !important; } body.keisan .tyuuou{ display: block !important; /* ← ここが重要 */ float: none !important; } body.keisan .keisan-center{ display: block !important; max-width: 980px; margin: 0 auto !important; padding: 0 12px; box-sizing: border-box; } /* 計算フォーム本体も中央に固定（flexが効かなくても中央になる） */ body.keisan .calc-form{ width: 720px; max-width: 100%; margin: 24px auto !important; } /* ========================= 行間・余白を戻して「息苦しさ」を解消 ========================= */ body.keisan .calc-item{ margin-bottom: 28px; } body.keisan .total-count{ margin: 26px 0 18px; } body.keisan .packaging-select{ margin: 22px 0 10px; } body.keisan .two-block{ margin: 22px 0; } body.keisan .two-block-item h3{ margin: 0 0 8px; } body.keisan .button-area{ margin: 34px auto 46px; } body.keisan .keisan-after{ margin: 34px auto 0; } /* ========================================================= keisan 最終FIX：中央基準を強制（bcss2 の影響を遮断） ※これを keisan.css の一番下に置く ========================================================= */ body.keisan main{ display: block !important; } /* 中央の基準はこの2つで決める */ body.keisan .tyuuou{ width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding-top: 20px !important; box-sizing: border-box !important; float: none !important; position: static !important; } body.keisan .keisan-center{ width: 100% !important; max-width: 980px !important; margin: 0 auto !important; padding: 0 12px !important; box-sizing: border-box !important; } /* フォーム本体は “auto” で確実に中央 */ body.keisan .calc-form{ width: min(720px, 100%) !important; margin: 24px auto !important; } /* 「計算する」ボタンと案内文も中央に戻す */ body.keisan .button-area{ text-align: center !important; } body.keisan .keisan-after{ max-width: 720px; margin: 32px auto 0 !important; padding: 0 12px; text-align: center !important; line-height: 1.9 !important; } /* 息苦しさ（総合計数以降の詰まり）を戻す */ body.keisan .total-count{ margin: 26px 0 18px !important; } body.keisan .packaging-select{ margin: 18px 0 10px !important; } body.keisan .two-block{ margin: 22px 0 !important; } body.keisan .input-row{ gap: 10px !important; } /* ========================= 行ごとの縦リズム（基本：24px） ========================= */ /* 各商品ブロック */ body.keisan .calc-item{ margin-bottom: 24px; } /* 入力行（1行単位） */ body.keisan .input-row{ margin-bottom: 24px; } /* ========================= 重要ブロック（区切り：32px） ========================= */ body.keisan .total-count{ margin: 32px 0; } body.keisan .packaging-select{ margin: 32px 0 24px; } body.keisan .two-block{ margin: 32px 0; } /* ========================= 締め部分（ボタン・案内） ========================= */ body.keisan .button-area{ margin: 32px auto 40px; } body.keisan .keisan-after{ margin: 32px auto 0; line-height: 1.9; } /* ========================= 送料・代引き：見出しと金額を近づける（縦リズム優先） ========================= */ /* 送料：見出し(送料+都道府県)の直下の金額行を詰める */ body.keisan .delivery-select + .input-row{ margin-top: 6px !important; /* 見出しに近づける */ margin-bottom: 18px !important; /* 次の「代引き有無」まで少し空ける */ } /* 代引き：見出し(代引き有無+有無)の直下の金額行を詰める */ body.keisan .is-cash-select + .input-row{ margin-top: 6px !important; /* 見出しに近づける */ margin-bottom: 24px !important; /* 次（消費税）へは通常の区切り */ } /* 念のため：見出し行自体に余計な下余白が付いていたら0にする */ body.keisan .delivery-select, body.keisan .is-cash-select{ margin-bottom: 0 !important; } /* ========================= 総合計数〜計算ボタン：1枚カードで一体化（調整版） ========================= */ /* カード本体（総合計数〜） */ body.keisan .total-count{ background: rgba(255,255,255,0.96); border: 1px solid rgba(0,0,0,0.08); border-radius: 14px 14px 0 0; box-shadow: 0 10px 26px rgba(0,0,0,0.10); padding: 18px 18px 0; } /* カード中身を連結（総合計まで） */ body.keisan .total-count + .packaging-select, body.keisan .packaging-select + .input-row, body.keisan .packaging-select + .input-row + .two-block, body.keisan .two-block + .two-block{ background: rgba(255,255,255,0.96); border-left: 1px solid rgba(0,0,0,0.08); border-right: 1px solid rgba(0,0,0,0.08); padding: 0 18px; margin: 0; } /* ▼重要：ここで「総合計（two-blockの最後）」は“下の線”を付けない（下の角丸は button-area が担当するため） */ body.keisan .two-block:last-of-type{ border-left: 1px solid rgba(0,0,0,0.08); border-right: 1px solid rgba(0,0,0,0.08); border-bottom: none; padding-bottom: 10px; margin: 0; } /* ========================= 計算する：カードのフッター（同じ幅・下だけ角丸） ========================= */ body.keisan .button-area{ /* カードと同じ“面” */ background: #f2f2f2; /* 薄いグレー */ border-left: 1px solid rgba(0,0,0,0.08); border-right: 1px solid rgba(0,0,0,0.08); border-bottom: 1px solid rgba(0,0,0,0.08); /* 下だけ角丸 */ border-radius: 0 0 14px 14px; /* 高さを増やしすぎない（前くらいの密度） */ padding: 14px 18px 16px; /* ←ここが縦の高さ */ margin: 0; /* 幅は“カード幅”に揃える（画面いっぱいにしない） */ width: 100%; box-sizing: border-box; /* 影はカード本体が持つのでここでは不要 */ box-shadow: none; text-align: center; } /* 計算するボタン：枠なし・薄グレー・ピル型（大きすぎない） */ body.keisan button#calc-btn{ width: min(320px, 100%); padding: 10px 0; background: #f2f2f2; border: none; border-radius: 999px; font-size: 1rem; cursor: pointer; } /* 見出しはカード内だけ強調 */ body.keisan .total-count h3, body.keisan .packaging-select h3, body.keisan .two-block-item h3{ font-weight: 700; } body.keisan .total-count.flash { animation: flash-bg 0.6s ease; } @keyframes flash-bg { 0% { background-color: #fffbe6; } 100% { background-color: transparent; } }