/* =========================================================
   IGNITE Partners — style.css
   色や余白はこの :root の値を変えると全体に反映されます
   ========================================================= */
:root{
  --white:#FFFFFF;
  --ink:#111111;
  --text:#2B2B2B;
  --muted:#4A4A4A;
  --subtle:#5F5F5F;
  --dark:#161616;
  --dark-2:#222222;
  --footer:#0F0F0F;
  --paper:#F6F5F2;
  --line:#E4E2DD;
  --gold:#C9A96E;        /* 暗い背景上のアクセント */
  --gold-ink:#8A6D3B;    /* 白背景上の小さな文字用（コントラスト確保） */
  --cream:#F3EFE7;
  --serif:'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans:'Zen Kaku Gothic New', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --latin:'Cormorant Garamond', 'Times New Roman', serif;
  --max:1240px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.9;letter-spacing:.04em;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:var(--text)}
a:hover{color:var(--gold-ink)}
h1,h2,h3{margin:0;font-weight:500}
p{margin:0}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);padding:12px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.narrow{max-width:1120px;margin:0 auto}
.split{display:flex;flex-wrap:wrap;gap:64px}
.split > .side{flex:1 1 320px;min-width:0}
.split > .main{flex:999 1 480px;min-width:0}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(20,20,20,.96);border-bottom:1px solid rgba(201,169,110,.25)}
.header-inner{height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none}
.brand:hover{color:var(--white)}
.brand span{font-family:var(--latin);font-size:22px;letter-spacing:.22em;font-weight:500}
.nav{display:flex;align-items:center;gap:32px;font-size:14px}
.navlink{color:#E9E6E0;text-decoration:none;transition:color .3s}
.navlink:hover{color:var(--gold)}
.nav-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);width:48px;height:48px;align-items:center;justify-content:center;cursor:pointer}
.mobile-nav{display:flex;flex-direction:column;background:#141414;border-top:1px solid rgba(255,255,255,.08);padding:12px 24px 28px}
.mobile-nav[hidden]{display:none}
.mobile-nav .navlink{padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.mobile-nav .btn-gold{margin-top:20px;justify-content:center}
@media (max-width:900px){.nav{display:none}.nav-toggle{display:inline-flex}}
@media (min-width:901px){.mobile-nav{display:none !important}}

/* ---------- Buttons ---------- */
.btn-gold,.btn-dark{display:inline-flex;align-items:center;gap:16px;text-decoration:none;letter-spacing:.1em;font-weight:500;min-height:48px;transition:background-color .35s,color .35s,transform .35s;cursor:pointer}
.btn-gold{background:var(--cream);color:var(--ink);padding:12px 22px}
.btn-gold:hover{background:var(--gold);color:var(--ink);transform:translateY(-2px)}
.btn-dark{background:var(--dark);color:var(--white);padding:16px 28px;border:0;font:inherit;letter-spacing:.1em}
.btn-dark:hover{background:#000;color:var(--white);transform:translateY(-2px)}
.btn-lg{padding:20px 36px;font-size:16px}
.arrow{font-family:var(--latin);font-size:20px}

/* ---------- Section common ---------- */
.section{padding:clamp(96px,12vw,170px) 24px}
.bg-paper{background:var(--paper)}
.bg-dark{background:var(--dark-2);color:var(--white)}
.eyebrow{font-family:var(--latin);font-size:15px;letter-spacing:.3em;color:var(--gold-ink);margin-bottom:24px}
.bg-dark .eyebrow,.hero .eyebrow{color:var(--gold)}
.h2{font-family:var(--serif);font-size:clamp(28px,3.6vw,42px);line-height:1.6;letter-spacing:.06em;color:var(--ink)}
.bg-dark .h2{color:var(--white)}
.body-muted p + p{margin-top:20px}
.body-muted{color:var(--muted)}
.note{font-size:13px;color:var(--subtle)}

/* ---------- Hero ---------- */
.hero{background:var(--dark);color:var(--white);overflow:hidden}
.hero-inner{padding:clamp(72px,10vw,140px) 24px clamp(80px,10vw,150px);display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-copy{flex:999 1 520px;min-width:0}
.hero-visual{flex:1 1 340px;min-width:0;display:flex;justify-content:center}
.hero-visual svg{width:100%;max-width:420px;height:auto}
.hero h1{font-family:var(--serif);font-size:clamp(34px,5.4vw,66px);line-height:1.45;letter-spacing:.08em}
.rule{width:56px;height:1px;background:var(--gold);margin:44px 0 36px}
.hero .lead{font-size:clamp(15px,1.4vw,17px);color:#E9E6E0;line-height:2.1;margin-bottom:20px}
.hero .lead-sub{font-size:clamp(14px,1.3vw,16px);color:#BDB8AF;line-height:2.1;margin-bottom:20px}
.hero .lead-end{font-size:clamp(15px,1.4vw,17px);margin-bottom:48px}
.hero-band{border-top:1px solid rgba(255,255,255,.08)}
.hero-band ul{list-style:none;margin:0 auto;padding:22px 24px;max-width:var(--max);display:flex;flex-wrap:wrap;gap:12px 40px;font-size:13px;color:#BDB8AF;letter-spacing:.12em}

/* ---------- Philosophy ---------- */
.ph-lead{font-size:18px;color:var(--ink)}
.q-list{list-style:none;margin:40px 0;padding:0;border-top:1px solid var(--line)}
.q-list li{display:flex;gap:24px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--line)}
.q-list .num{font-family:var(--latin);color:var(--gold-ink);font-size:18px;min-width:1.6em}

/* ---------- Service ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:24px}
.card{background:var(--white);border:1px solid var(--line);padding:44px 36px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(17,17,17,.08);border-color:var(--gold)}
.card .no{font-family:var(--latin);font-size:40px;line-height:1;color:var(--gold-ink);margin-bottom:20px}
.card h3{font-family:var(--serif);font-weight:600;font-size:21px;color:var(--ink);margin-bottom:20px;line-height:1.6}
.card p{font-size:15px;color:var(--muted)}
.card p + p{margin-top:16px}
.card .em{color:var(--ink)}
.card-dark{background:var(--dark);border-color:var(--dark);color:var(--white)}
.card-dark .no{color:var(--gold)}
.card-dark h3{color:var(--white)}
.card-dark p{color:#D8D4CC}
.card-cta{border:1px solid var(--gold);background:#FBF9F5;padding:44px 36px;display:flex;flex-direction:column;justify-content:space-between;gap:28px}
.card-cta p{font-family:var(--serif);font-size:20px;line-height:1.8;color:var(--ink)}
.card-cta .btn-dark{align-self:flex-start}

/* ---------- Why free ---------- */
.free-body{color:#D8D4CC}
.free-body p + p{margin-top:22px}
.free-body .strong{color:var(--white);padding:24px 0;border-top:1px solid rgba(201,169,110,.4);border-bottom:1px solid rgba(201,169,110,.4)}
.free-body .note{color:#B3AEA5}

/* ---------- Navigator ---------- */
.nav-sec{display:flex;flex-wrap:wrap;align-items:center;gap:72px}
.photo{flex:1 1 420px;min-width:0}
.photo img,.photo .ph{width:100%;aspect-ratio:4/5;object-fit:cover}
.photo .ph{background:#ECE9E3;border:1px solid var(--line);display:flex;align-items:flex-end;padding:24px;font-size:12px;color:var(--subtle);letter-spacing:.1em}
.nav-copy{flex:999 1 480px;min-width:0}
.nav-name{font-family:var(--latin);font-size:24px;letter-spacing:.16em;color:var(--muted);margin:12px 0 40px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 28px;padding:0;list-style:none}
.tags li{border:1px solid #D6D2C9;padding:6px 16px;font-size:14px}

/* ---------- Flow ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.steps li{border-top:1px solid var(--ink);padding:32px 28px 32px 0}
.steps li:last-child{border-top-color:var(--gold)}
.steps .label{font-family:var(--latin);font-size:15px;letter-spacing:.24em;color:var(--gold-ink);margin-bottom:16px}
.steps h3{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink);margin-bottom:14px}
.steps p{font-size:15px;color:var(--muted)}

/* ---------- Contact ---------- */
.worries{list-style:none;margin:40px 0 32px;padding:0;display:flex;flex-direction:column;gap:14px}
.worries li{padding-left:20px;border-left:1px solid var(--gold);color:var(--muted)}
.closing{font-family:var(--serif);font-size:19px;color:var(--ink);margin-top:12px}
.form{background:var(--paper);padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:24px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.req{color:var(--gold-ink);font-size:12px;margin-left:6px}
.opt{color:var(--subtle);font-size:12px;margin-left:6px}
.input{font:inherit;padding:14px 16px;border:1px solid #CFCAC0;background:var(--white);color:var(--ink);min-height:48px;border-radius:0;transition:border-color .3s;width:100%}
.input:focus{outline:none;border-color:var(--gold-ink)}
textarea.input{resize:vertical;min-height:160px}
.agree{display:flex;gap:12px;align-items:flex-start;font-size:14px}
.agree input{width:20px;height:20px;margin:4px 0 0;accent-color:var(--dark);flex-shrink:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn-dark{justify-content:center;padding:20px;font-size:16px;min-height:56px}
.form .btn-dark[disabled]{opacity:.6;cursor:wait;transform:none}
.form-status{border:1px solid var(--gold-ink);background:var(--white);padding:18px 20px;font-size:14px;line-height:1.8}
.form-status[hidden]{display:none}
.form-status strong{display:block;margin-bottom:6px;color:var(--ink)}

/* ---------- Company ---------- */
.company{margin:0;border-top:1px solid var(--ink)}
.company > div{display:flex;flex-wrap:wrap;gap:4px 32px;padding:22px 0;border-bottom:1px solid #DCD8CF}
.company dt{flex:0 0 180px;font-weight:500;color:var(--ink)}
.company dd{margin:0;flex:1 1 280px}
.placeholder{color:var(--subtle)}

/* ---------- Closing CTA / Footer ---------- */
.cta-band{background:var(--dark);color:var(--white);text-align:center;padding:clamp(80px,10vw,120px) 24px}
.cta-band .eyebrow{color:var(--gold);margin-bottom:20px}
.cta-band p.big{font-family:var(--serif);font-size:clamp(22px,3vw,32px);line-height:1.8;margin-bottom:40px}
.site-footer{background:var(--footer);color:#BDB8AF;padding:56px 24px 40px;font-size:13px}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px;align-items:flex-start}
.footer-brand{font-family:var(--latin);font-size:20px;letter-spacing:.22em;color:var(--white);margin-bottom:8px}
.footer-nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.copy{max-width:var(--max);margin:40px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#9C978E}

/* ---------- Sub pages ---------- */
.page{max-width:820px;margin:0 auto;padding:clamp(64px,9vw,120px) 24px;font-size:15px;line-height:1.95}
.page h1{font-family:var(--serif);font-size:clamp(28px,4vw,40px);color:var(--ink);margin-bottom:40px}
.page section{border-top:1px solid var(--line);padding:28px 0}
.page section:last-of-type{border-bottom:1px solid var(--line)}
.page h2{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--ink);margin-bottom:12px}
.draft-note{border:1px solid var(--gold);background:#FBF9F5;padding:16px 20px;font-size:13px;color:var(--muted);margin-bottom:48px}
.notice-list{border-top:1px solid var(--ink)}
.notice-list > div{display:flex;flex-wrap:wrap;gap:4px 32px;padding:24px 0;border-bottom:1px solid var(--line)}
.notice-list .date{flex:0 0 160px;color:var(--subtle)}

/* ---------- Reveal on scroll（控えめ） ---------- */
.rv{opacity:1}
@media (prefers-reduced-motion:no-preference){
  .js .rv{opacity:0;transform:translateY(28px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
  .js .rv.in{opacity:1;transform:none}
  .js .card.rv.in{transition:opacity 1s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s}
  .js .card.rv.in:hover{transform:translateY(-4px)}
}