/*
Theme Name: Clean Recycle Red
Theme URI: https://example.com/themes/clean-recycle-red
Author: ChatGPT
Description: Minimal one-page WordPress theme for recycle/cleanup service (red color scheme). JP sample text included in templates.
Version: 1.0.0
License: GPLv2 or later
Text Domain: clean-recycle-red
*/

* { box-sizing: border-box; }
html, body { margin:0; padding:0; font-family: -apple-system, BlinkMacSystemFont, Arial, "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif; color:#202124; line-height:1.7; }
img { max-width: 100%; height: auto; display:block; }
a { color:#b00020; text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92%); margin: 0 auto; }

.site-header { position: sticky; top:0; z-index: 100; background:#fff; border-bottom:1px solid #eee; }
.site-header .inner { display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand { display:flex; align-items:center; gap:12px; }
.brand .logo { width:42px; height:42px; border-radius:8px; background:#b00020; display:grid; place-items:center; color:#fff; font-weight:700; letter-spacing:1px; }
.brand .title { font-size:18px; font-weight:700; }

.header-cta { display:flex; gap:10px; align-items:center; }
.header-cta .tel { font-weight:700; }
.btn { display:inline-block; padding:12px 16px; border-radius:10px; background:#b00020; color:#fff; font-weight:700; border: none; }
.btn--ghost { background:#fff; color:#b00020; border:2px solid #b00020; }

.hero { background: linear-gradient(120deg, #ffdde1, #ffe6ea); padding: 56px 0 32px; border-bottom:1px solid #f5c5cc; }
.hero .lead { font-size: 36px; font-weight:800; letter-spacing: .02em; margin: 0 0 10px; }
.hero .sub { font-size: 16px; color:#555; margin-bottom: 18px; }
.hero .badges { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 22px; }
.badge { background:#fff; border:1px solid #f1a1ad; color:#b00020; padding:6px 10px; border-radius:999px; font-size:12px; }

.hero .cta { display:flex; gap:12px; flex-wrap:wrap; }

.section { padding: 56px 0; }
.section .section-title { font-size: 28px; font-weight:800; margin:0 0 18px; position: relative; }
.section .section-title::after { content:""; position:absolute; left:0; bottom:-8px; width:56px; height:4px; background:#b00020; border-radius:999px; }
.section .sub { color:#666; margin-bottom: 24px; }

.grid { display:grid; gap:16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){ .grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card { background:#fff; border:1px solid #eee; border-radius:16px; padding:18px; box-shadow: 0 1px 0 rgba(0,0,0,.02); }
.card h3 { margin:6px 0 8px; font-size:18px; }
.card p { margin:0; color:#444; }

.price-table { width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px; border:1px solid #eee; }
.price-table th, .price-table td { padding:12px; border-bottom:1px solid #eee; text-align:left; }
.price-table thead th { background:#fff3f5; color:#b00020; font-weight:800; }
.price-note { font-size:12px; color:#666; margin-top:8px; }

.area-list { display:flex; flex-wrap:wrap; gap:8px; }
.area-list li { list-style:none; padding:8px 12px; border:1px solid #eee; border-radius:999px; background:#fff; }

.contact-box { background:#fff6f7; border:1px solid #f8c7cf; border-radius:16px; padding:18px; }
.contact-box label { display:block; font-weight:700; margin: 8px 0 6px; }
.contact-box input, .contact-box textarea { width:100%; padding:12px; border:1px solid #ddd; border-radius:10px; background:#fff; }
.contact-box textarea { min-height:120px; resize:vertical; }

.site-footer { background:#111; color:#eee; padding:28px 0; margin-top: 40px; }
.site-footer a { color:#fff; }
.small { font-size:12px; color:#888; }