民泊専門掃除屋

簡易見積もり – myclears
body { background: #f5f5f5; padding: 24px 0; } .mc-estimator { font-family: ‘Helvetica Neue’, Arial, sans-serif; max-width: 520px; margin: 0 auto; padding: 0 16px 40px; } .mc-estimator h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 24px; color: #1a1a1a; border-left: 4px solid #2d7dd2; padding-left: 12px; } .mc-section { background: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .mc-section > label { display: block; font-size: 0.8rem; font-weight: 700; color: #888; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .mc-beds { display: flex; align-items: center; gap: 20px; } .mc-beds button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #2d7dd2; background: #fff; color: #2d7dd2; font-size: 1.5rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .mc-beds button:hover { background: #2d7dd2; color: #fff; } .mc-beds button:disabled { border-color: #ccc; color: #ccc; cursor: not-allowed; } .mc-beds button:disabled:hover { background: #fff; } .mc-beds-num { font-size: 2.2rem; font-weight: 800; color: #1a1a1a; min-width: 52px; text-align: center; } .mc-beds-unit { font-size: 0.9rem; color: #aaa; } .mc-beds-range { font-size: 0.75rem; color: #bbb; margin-top: 8px; } .mc-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .mc-toggle-row:last-child { border-bottom: none; padding-bottom: 0; } .mc-toggle-name { font-size: 0.95rem; font-weight: 600; color: #1a1a1a; } .mc-toggle-price { font-size: 0.78rem; color: #aaa; margin-top: 2px; } .mc-switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; } .mc-switch input { opacity: 0; width: 0; height: 0; } .mc-slider { position: absolute; inset: 0; background: #ddd; border-radius: 26px; cursor: pointer; transition: 0.2s; } .mc-slider:before { content: ”; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .mc-switch input:checked + .mc-slider { background: #2d7dd2; } .mc-switch input:checked + .mc-slider:before { transform: translateX(22px); } .mc-linen-note { background: #f0f6ff; border: 1px solid #cce0ff; border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; color: #4a7ab5; margin-bottom: 16px; line-height: 1.6; } .mc-result { background: #1a1a1a; border-radius: 12px; padding: 24px; color: #fff; margin-bottom: 16px; } .mc-result-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 6px; } .mc-result-total { font-size: 2.6rem; font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: -0.02em; } .mc-result-breakdown { border-top: 1px solid #2a2a2a; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; } .mc-result-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: #aaa; } .mc-total-row { color: #fff; font-weight: 700; font-size: 0.95rem; border-top: 1px solid #333; padding-top: 10px; margin-top: 4px; } .mc-note { font-size: 0.75rem; color: #666; margin-top: 14px; line-height: 1.7; } .mc-cta { display: block; width: 100%; background: #06C755; color: #fff; text-align: center; padding: 18px; border-radius: 12px; font-size: 1rem; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: opacity 0.15s; } .mc-cta:hover { opacity: 0.88; } .mc-cta-sub { font-size: 0.78rem; font-weight: 400; opacity: 0.85; display: block; margin-top: 3px; }

簡易見積もり – myclears body { background: #f5f5f5; padding: 24px 0; } .mc-estimator { font-family: ‘Helvetica Neue’, Arial, sans-serif; max-width: 520px; margin: 0 auto; padding: 0 16px 40px; } .mc-estimator h2 { font-size: 1.4rem; font-weight: 700; margin-bottom: 24px; color: #1a1a1a; border-left: 4px solid #2d7dd2; padding-left: 12px; } .mc-section { background: #fff; border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); } .mc-section > label { display: block; font-size: 0.8rem; font-weight: 700; color: #888; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 14px; } .mc-beds { display: flex; align-items: center; gap: 20px; } .mc-beds button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #2d7dd2; background: #fff; color: #2d7dd2; font-size: 1.5rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .mc-beds button:hover { background: #2d7dd2; color: #fff; } .mc-beds button:disabled { border-color: #ccc; color: #ccc; cursor: not-allowed; } .mc-beds button:disabled:hover { background: #fff; } .mc-beds-num { font-size: 2.2rem; font-weight: 800; color: #1a1a1a; min-width: 52px; text-align: center; } .mc-beds-unit { font-size: 0.9rem; color: #aaa; } .mc-beds-range { font-size: 0.75rem; color: #bbb; margin-top: 8px; } .mc-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; } .mc-toggle-row:last-child { border-bottom: none; padding-bottom: 0; } .mc-toggle-name { font-size: 0.95rem; font-weight: 600; color: #1a1a1a; } .mc-toggle-price { font-size: 0.78rem; color: #aaa; margin-top: 2px; } .mc-switch { position: relative; width: 48px; height: 26px; flex-shrink: 0; } .mc-switch input { opacity: 0; width: 0; height: 0; } .mc-slider { position: absolute; inset: 0; background: #ddd; border-radius: 26px; cursor: pointer; transition: 0.2s; } .mc-slider:before { content: ”; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.2); } .mc-switch input:checked + .mc-slider { background: #2d7dd2; } .mc-switch input:checked + .mc-slider:before { transform: translateX(22px); } .mc-linen-note { background: #f0f6ff; border: 1px solid #cce0ff; border-radius: 8px; padding: 12px 14px; font-size: 0.82rem; color: #4a7ab5; margin-bottom: 16px; line-height: 1.6; } .mc-result { background: #1a1a1a; border-radius: 12px; padding: 24px; color: #fff; margin-bottom: 16px; } .mc-result-label { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #888; margin-bottom: 6px; } .mc-result-total { font-size: 2.6rem; font-weight: 800; color: #fff; margin-bottom: 16px; letter-spacing: -0.02em; } .mc-result-breakdown { border-top: 1px solid #2a2a2a; padding-top: 14px; display: flex; flex-direction: column; gap: 7px; } .mc-result-row { display: flex; justify-content: space-between; font-size: 0.85rem; color: #aaa; } .mc-total-row { color: #fff; font-weight: 700; font-size: 0.95rem; border-top: 1px solid #333; padding-top: 10px; margin-top: 4px; } .mc-note { font-size: 0.75rem; color: #666; margin-top: 14px; line-height: 1.7; } .mc-cta { display: block; width: 100%; background: #06C755; color: #fff; text-align: center; padding: 18px; border-radius: 12px; font-size: 1rem; font-weight: 700; text-decoration: none; box-sizing: border-box; transition: opacity 0.15s; } .mc-cta:hover { opacity: 0.88; } .mc-cta-sub { font-size: 0.78rem; font-weight: 400; opacity: 0.85; display: block; margin-top: 3px; } var beds = 1; function changeBeds(d) { beds = Math.max(1, Math.min(12, beds + d)); document.getElementById(‘bedsNum’).textContent = beds; document.getElementById(‘btnMinus’).disabled = beds = 12; calc(); } function calc() { var base = beds === 1 ? 8000 : 8000 + (beds – 1) * 500; var amenity = document.getElementById(‘amenity’).checked ? 500 : 0; var trash = document.getElementById(‘trash’).checked ? 1000 : 0; var total = base + amenity + trash; document.getElementById(‘total’).textContent = total.toLocaleString() + ‘円〜’; var rows = ”; rows += ‘‘; if (amenity > 0) rows += ‘‘; if (trash > 0) rows += ‘‘; rows += ‘‘; document.getElementById(‘breakdown’).innerHTML = rows; } // 初期状態 document.getElementById(‘btnMinus’).disabled = true;