/*
Theme Name: cre8home
Theme URI: https://cre8home.net
Author: 株式会社クリエイトホーム
Author URI: https://cre8home.net
Description: cre8home 公式テーマ（黒×ゴールド）
Version: 1.0.0
License: Private
Text Domain: cre8home
*/

/* ===========================
   リセット・基本設定
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#0a0a0a; --bg2:#111111; --bg3:#1a1a1a;
  --gold:#C8A96E; --gold-lt:#F0D080; --gold-dk:#9A7A3A;
  --white:#ffffff; --gray:#aaaaaa; --border:rgba(200,169,110,0.25);
  --font-jp:'Noto Sans JP',sans-serif; --font-en:'Helvetica Neue',Arial,sans-serif;
}
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--white); font-family:var(--font-jp); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a { color:var(--gold); text-decoration:none; transition:opacity .2s; }
a:hover { opacity:.75; }
img { max-width:100%; height:auto; display:block; }

/* ===== ヘッダー ===== */
#site-header { position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(10,10,10,0.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); height:70px; display:flex; align-items:center; }
.header-inner { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.site-logo img { height:44px; width:auto; }
#site-nav ul { list-style:none; display:flex; gap:32px; }
#site-nav ul li a { color:var(--white); font-size:13px; letter-spacing:.08em; font-family:var(--font-en); text-transform:uppercase; font-weight:500; transition:color .2s; }
#site-nav ul li a:hover { color:var(--gold); }
.header-cta a { background:linear-gradient(135deg,var(--gold-lt),var(--gold),var(--gold-dk)); color:var(--bg); font-weight:700; font-size:13px; padding:10px 20px; border-radius:4px; white-space:nowrap; transition:opacity .2s,transform .2s; }
.header-cta a:hover { opacity:.85; transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; background:none; border:none; }
.hamburger span { display:block; width:24px; height:2px; background:var(--gold); transition:all .3s; }

/* ===== ヒーロー ===== */
#hero { min-height:100vh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; padding:100px 24px 60px; background:radial-gradient(ellipse at 20% 50%,rgba(200,169,110,0.07) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(200,169,110,0.05) 0%,transparent 50%),var(--bg); }
.hero-grid-bg { position:absolute; inset:0; background-image:linear-gradient(rgba(200,169,110,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(200,169,110,0.04) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; }
.hero-inner { max-width:1200px; width:100%; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.hero-text { position:relative; z-index:1; }
.hero-eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.25em; color:var(--gold); text-transform:uppercase; margin-bottom:20px; display:flex; align-items:center; gap:12px; }
.hero-eyebrow::before { content:''; display:block; width:32px; height:1px; background:var(--gold); }
.hero-title { font-size:clamp(32px,5vw,56px); font-weight:900; line-height:1.2; margin-bottom:24px; }
.hero-title .gold { background:linear-gradient(135deg,var(--gold-lt),var(--gold),var(--gold-dk)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.hero-lead { font-size:15px; color:var(--gray); margin-bottom:36px; line-height:1.9; }
.hero-btns { display:flex; gap:16px; flex-wrap:wrap; }
.btn-gold { background:linear-gradient(135deg,var(--gold-lt),var(--gold),var(--gold-dk)); color:var(--bg); font-weight:700; font-size:14px; padding:14px 28px; border-radius:4px; border:none; cursor:pointer; transition:opacity .2s,transform .2s; display:inline-block; }
.btn-gold:hover { opacity:.85; transform:translateY(-2px); color:var(--bg); }
.btn-outline { background:transparent; color:var(--gold); font-weight:600; font-size:14px; padding:13px 28px; border-radius:4px; border:1px solid var(--gold); cursor:pointer; transition:background .2s,color .2s; display:inline-block; }
.btn-outline:hover { background:var(--gold); color:var(--bg); }

/* ===== 30秒査定フォーム ===== */
#assessment { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:36px 32px; position:relative; z-index:1; }
.assessment-badge { display:inline-block; background:linear-gradient(135deg,var(--gold-lt),var(--gold)); color:var(--bg); font-size:11px; font-weight:700; letter-spacing:.1em; padding:4px 12px; border-radius:20px; margin-bottom:16px; }
#assessment h2 { font-size:20px; font-weight:800; margin-bottom:6px; }
#assessment .sub { font-size:12px; color:var(--gray); margin-bottom:24px; }
.form-step { display:none; }
.form-step.active { display:block; }
.step-indicator { display:flex; gap:8px; margin-bottom:20px; }
.step-dot { width:8px; height:8px; border-radius:50%; background:var(--bg3); border:1px solid var(--border); transition:background .3s; }
.step-dot.active { background:var(--gold); border-color:var(--gold); }
.form-label { display:block; font-size:12px; color:var(--gray); margin-bottom:8px; letter-spacing:.05em; }
.form-select,.form-input { width:100%; background:var(--bg3); border:1px solid var(--border); color:var(--white); font-size:14px; padding:12px 16px; border-radius:6px; margin-bottom:16px; font-family:var(--font-jp); transition:border-color .2s; -webkit-appearance:none; }
.form-select:focus,.form-input:focus { outline:none; border-color:var(--gold); }
.form-select option { background:var(--bg3); }
.assessment-next,.assessment-submit { width:100%; background:linear-gradient(135deg,var(--gold-lt),var(--gold),var(--gold-dk)); color:var(--bg); font-weight:700; font-size:15px; padding:14px; border-radius:6px; border:none; cursor:pointer; transition:opacity .2s,transform .2s; margin-top:4px; }
.assessment-next:hover,.assessment-submit:hover { opacity:.85; transform:translateY(-1px); }
.assessment-result { display:none; text-align:center; padding:16px 0; }
.assessment-result h3 { color:var(--gold); font-size:18px; margin-bottom:8px; }
.assessment-result p { font-size:13px; color:var(--gray); }
.lstep-btn { display:block; width:100%; background:#06C755; color:#fff; font-weight:700; font-size:14px; padding:12px; border-radius:6px; border:none; cursor:pointer; margin-top:12px; text-align:center; transition:opacity .2s; }
.lstep-btn:hover { opacity:.85; color:#fff; }

/* ===== サービス ===== */
#services { padding:100px 24px; background:var(--bg); }
.section-inner { max-width:1200px; margin:0 auto; }
.section-header { text-align:center; margin-bottom:60px; }
.section-eyebrow { font-family:var(--font-en); font-size:11px; letter-spacing:.25em; color:var(--gold); text-transform:uppercase; margin-bottom:16px; }
.section-title { font-size:clamp(26px,4vw,40px); font-weight:800; margin-bottom:16px; }
.section-lead { font-size:15px; color:var(--gray); max-width:560px; margin:0 auto; }
.services-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.service-card { background:var(--bg2); border:1px solid var(--border); border-radius:10px; padding:32px 28px; transition:border-color .3s,transform .3s; }
.service-card:hover { border-color:var(--gold); transform:translateY(-4px); }
.service-icon { font-size:32px; margin-bottom:16px; }
.service-card h3 { font-size:18px; font-weight:700; margin-bottom:12px; }
.service-card p { font-size:14px; color:var(--gray); line-height:1.8; }

/* ===== 実績 ===== */
#results { padding:100px 24px; background:var(--bg2); }
.results-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.result-card { text-align:center; padding:32px 20px; border:1px solid var(--border); border-radius:10px; background:var(--bg3); }
.result-num { font-family:var(--font-en); font-size:48px; font-weight:900; background:linear-gradient(135deg,var(--gold-lt),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:8px; }
.result-label { font-size:13px; color:var(--gray); }

/* ===== フロー ===== */
#flow { padding:100px 24px; background:var(--bg); }
.flow-list { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.flow-list::before { content:''; position:absolute; top:36px; left:12.5%; right:12.5%; height:1px; background:linear-gradient(90deg,var(--gold-dk),var(--gold),var(--gold-dk)); }
.flow-item { text-align:center; padding:0 16px; position:relative; }
.flow-num { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--gold-lt),var(--gold),var(--gold-dk)); display:flex; align-items:center; justify-content:center; font-family:var(--font-en); font-size:20px; font-weight:900; color:var(--bg); margin:0 auto 20px; position:relative; z-index:1; }
.flow-item h3 { font-size:15px; font-weight:700; margin-bottom:8px; }
.flow-item p { font-size:13px; color:var(--gray); }

/* ===== CTAバナー ===== */
#cta-banner { padding:80px 24px; background:linear-gradient(135deg,rgba(200,169,110,0.12),rgba(200,169,110,0.04)),var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); text-align:center; }
#cta-banner h2 { font-size:clamp(24px,4vw,38px); font-weight:800; margin-bottom:16px; }
#cta-banner p { font-size:15px; color:var(--gray); margin-bottom:36px; }
.cta-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ===== フッター ===== */
#site-footer { background:#050505; border-top:1px solid var(--border); padding:60px 24px 32px; }
.footer-inner { max-width:1200px; margin:0 auto; }
.footer-top { display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-brand .footer-logo { height:40px; margin-bottom:16px; }
.footer-brand p { font-size:13px; color:var(--gray); line-height:1.9; }
.footer-col h4 { font-size:12px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; margin-bottom:16px; font-family:var(--font-en); }
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul li a { font-size:13px; color:var(--gray); transition:color .2s; }
.footer-col ul li a:hover { color:var(--gold); }
.footer-info { font-size:13px; color:var(--gray); line-height:2; }
.footer-divider { border:none; border-top:1px solid var(--border); margin-bottom:24px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:12px; color:#555; font-family:var(--font-en); }
.footer-license { font-size:11px; color:#444; }

/* ===== レスポンシブ ===== */
@media (max-width:960px) {
  .hero-inner { grid-template-columns:1fr; gap:40px; }
  .services-grid { grid-template-columns:repeat(2,1fr); }
  .results-grid { grid-template-columns:repeat(2,1fr); }
  .flow-list { grid-template-columns:repeat(2,1fr); gap:32px; }
  .flow-list::before { display:none; }
  .footer-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  #site-nav,.header-cta { display:none; }
  #site-nav.open { display:flex; flex-direction:column; position:fixed; top:70px; left:0; right:0; background:rgba(10,10,10,0.98); padding:24px; border-bottom:1px solid var(--border); }
  #site-nav.open ul { flex-direction:column; gap:20px; }
  .hamburger { display:flex; }
  .services-grid { grid-template-columns:1fr; }
  .results-grid { grid-template-columns:repeat(2,1fr); }
  .flow-list { grid-template-columns:1fr; }
  .footer-top { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }
  #assessment { padding:24px 20px; }
}

/* ===== アニメーション ===== */
@keyframes fadeUp { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
.fade-up { opacity:0; animation:fadeUp .6s ease forwards; }
.fade-up:nth-child(1){animation-delay:.1s} .fade-up:nth-child(2){animation-delay:.2s} .fade-up:nth-child(3){animation-delay:.3s} .fade-up:nth-child(4){animation-delay:.4s}