/*
Theme Name: あおぞら工務店
Theme URI: https://tribal-works.com/
Author: TRIBAL WORKS
Description: 地域密着の工務店・リフォーム会社向けコーポレートサイト(制作サンプル)。施工事例カスタム投稿・お知らせ・お問い合わせフォーム付き。
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: aozora
*/

:root {
	--c-primary: #2d6a4f;
	--c-accent: #d98c3f;
	--c-surface: #f6f1e7;
	--c-dark: #1b3a2d;
	--c-text: #2b2b27;
	--c-muted: #6b6a62;
	--c-line: #e6dfcf;
	--c-footer-bg: #1b3a2d;
	--radius: 18px;
	--font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
	--font-en: "Josefin Sans", "Noto Sans JP", sans-serif;
}
body { background: #fffdf8; }

/* ---------- ヒーロー ---------- */
.hero { background: linear-gradient(180deg, var(--c-surface) 0%, #fffdf8 100%); padding: 56px 0 72px; overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero__title { font-size: clamp(2.2rem, 5.2vw, 3.8rem); line-height: 1.3; margin: 8px 0 .5em; color: var(--c-dark); }
.hero__lead { font-size: 1.05rem; color: var(--c-muted); max-width: 32em; margin-bottom: 1.8em; }
.hero__badges { display: flex; flex-wrap: wrap; gap: 10px 22px; list-style: none; margin: 28px 0 0; padding: 0; font-size: .9rem; font-weight: 700; color: var(--c-primary); }
.hero__badges li { display: inline-flex; align-items: center; gap: 6px; }
.hero__art { position: relative; }
.hero__art::before { content: ""; position: absolute; inset: 4% 2% -4% 6%; background: #dfeadf; border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%; }
.hero__art svg { position: relative; width: 100%; filter: drop-shadow(0 18px 30px rgba(27, 58, 45, .16)); }
.art-sun { fill: #f2c879; }
.art-cloud { fill: #fff; }
.art-ground { fill: #9dc3a0; }
.art-roof { fill: var(--c-primary); }
.art-wall { fill: #fbf4e4; }
.art-door { fill: var(--c-accent); }
.art-window { fill: #bfe0ea; stroke: var(--c-dark); stroke-width: 3; }
.art-line { stroke: var(--c-dark); stroke-width: 3; fill: none; }
.art-chimney { fill: #8a5a35; }
.art-tree { fill: #4e8a64; }
.art-tree--sm { fill: #6fa57f; }
.art-trunk { fill: #7a5535; }
@media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; } .hero__art { order: -1; max-width: 420px; margin: 0 auto; } }

/* ---------- 数字 ---------- */
.stats { background: var(--c-dark); color: #fff; padding: 36px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: center; }
.stat__num { display: block; font-family: var(--font-en); font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; color: #f2c879; }
.stat__num small { font-family: var(--font-head); font-size: .45em; margin-left: 4px; color: #fff; }
.stat__label { font-size: .82rem; opacity: .85; }
@media (max-width: 700px) { .stats__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }

/* ---------- 理由 ---------- */
.reason { background: #fff; border: 1px solid var(--c-line); border-radius: var(--radius); padding: 38px 30px 32px; position: relative; }
.reason__no { position: absolute; top: -22px; left: 26px; background: var(--c-accent); color: #fff; font-family: var(--font-en); font-weight: 700; font-size: 1.1rem; padding: 6px 16px; border-radius: 999px; letter-spacing: .08em; }
.reason h3 { font-size: 1.15rem; color: var(--c-dark); }
.reason p { color: var(--c-muted); font-size: .92rem; margin: 0; }

/* ---------- 事業内容 ---------- */
.svc { background: #fff; border-radius: var(--radius); padding: 28px 28px 24px; border-top: 5px solid var(--c-primary); box-shadow: 0 6px 20px rgba(27, 58, 45, .06); }
.svc:nth-child(3n+2) { border-top-color: var(--c-accent); }
.svc:nth-child(3n) { border-top-color: #4f7a8a; }
.svc h3 { font-size: 1.1rem; }
.svc p { font-size: .9rem; color: var(--c-muted); margin-bottom: 1em; }
.svc__note { display: inline-block; font-size: .75rem; font-weight: 700; color: var(--c-primary); background: #e4efe7; padding: 3px 12px; border-radius: 999px; }

/* ---------- 流れ ---------- */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; counter-reset: none; }
.flow li { position: relative; text-align: center; background: #fff; border-radius: var(--radius); padding: 30px 16px 24px; border: 1px solid var(--c-line); }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -15px; width: 12px; height: 12px; border-top: 3px solid var(--c-accent); border-right: 3px solid var(--c-accent); transform: translateY(-50%) rotate(45deg); }
.flow__no { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-primary); color: #fff; font-family: var(--font-en); font-weight: 700; margin-bottom: 12px; }
.flow h3 { font-size: 1rem; }
.flow p { font-size: .82rem; color: var(--c-muted); margin: 0; }
@media (max-width: 900px) { .flow { grid-template-columns: 1fr; } .flow li:not(:last-child)::after { top: auto; bottom: -15px; right: 50%; transform: translateX(50%) rotate(135deg); } }

/* ---------- お客様の声 ---------- */
.voice { margin: 0; background: #fff; border-radius: var(--radius); padding: 34px 32px; border: 1px solid var(--c-line); position: relative; }
.voice::before { content: "“"; position: absolute; top: 6px; left: 18px; font-size: 4.5rem; line-height: 1; color: var(--c-accent); font-family: Georgia, serif; opacity: .5; }
.voice p { margin-top: 12px; }
.voice footer { font-size: .85rem; font-weight: 700; color: var(--c-primary); }

/* ---------- お知らせ ---------- */
.top-news { display: grid; grid-template-columns: 260px 1fr; gap: 40px; }
.top-news__head .section__title { margin-bottom: 1em; }
@media (max-width: 800px) { .top-news { grid-template-columns: 1fr; gap: 20px; } }

/* ---------- CTA ---------- */
.cta-band { background: linear-gradient(135deg, var(--c-primary), var(--c-dark)); color: #fff; text-align: center; padding: 80px 0; }
.cta-band h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
.cta-band p { opacity: .9; margin-bottom: 1.8em; }
.cta-band__btns { justify-content: center; }

/* ---------- 詳細 ---------- */
.page-header { background: linear-gradient(180deg, var(--c-surface), #fffdf8); }
.card { border-radius: var(--radius); }