/* ============================================================
   実家相続コンパス フロントLP「相談窓口（温かい信頼）」
   すべて .jsc-front 配下にスコープ。Cocoon側に影響しない。
   子テーマ /assets/css/front-warm.css として配置し、
   トップページのみ enqueue する。
   ============================================================ */
:root{
  --jsc-cream:#F3EEE5; --jsc-cream-2:#FBF8F2; --jsc-beige:#EDE7DB; --jsc-card:#FFFFFF;
  --jsc-ink:#2B2A26; --jsc-mute:#6E6A60;
  --jsc-forest:#27432F; --jsc-forest-deep:#1C3123; --jsc-forest-soft:#E3EAE2;
  --jsc-clay:#C5613A; --jsc-clay-deep:#AC5230;
  --jsc-check:#3E7A4E;
  --jsc-line:#E3DDD0; --jsc-line-soft:#EDE8DD;
  --jsc-serif:"Noto Serif JP",serif; --jsc-sans:"Noto Sans JP",sans-serif;
}

/* フロントページの土台（bodyの地色をクリームに） */
body.jsc-front-page{background:var(--jsc-cream); margin:0; padding:0}

/* Cocoon の余白・ラッパーが残っていても無効化 */
body.jsc-front-page #container,
body.jsc-front-page #wrap,
body.jsc-front-page #content,
body.jsc-front-page #main,
body.jsc-front-page .article,
body.jsc-front-page .main,
body.jsc-front-page .content{margin:0; padding:0; max-width:none; width:auto; background:transparent}

.jsc-front, .jsc-front *{box-sizing:border-box}
.jsc-front{
  background:var(--jsc-cream); color:var(--jsc-ink);
  font-family:var(--jsc-sans); line-height:1.85; font-size:16px; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.jsc-front a{color:inherit; text-decoration:none}
.jsc-front img, .jsc-front svg{display:block; max-width:100%}
.jsc-front h1, .jsc-front h2, .jsc-front h3{font-family:var(--jsc-serif); font-weight:600; line-height:1.5; letter-spacing:.04em; margin:0}
.jsc-front .wrap{max-width:1140px; margin:0 auto; padding:0 28px}
.jsc-front .section{padding:84px 0}
.jsc-front .section-head{display:flex; align-items:center; gap:20px; margin-bottom:40px}
.jsc-front .section-title{font-size:27px; color:var(--jsc-ink); white-space:nowrap}
.jsc-front .section-head .rule{height:1px; background:var(--jsc-line); flex:1}
.jsc-front .section-head .more{font-size:13px; color:var(--jsc-mute); white-space:nowrap}
.jsc-front .section-head .more:hover{color:var(--jsc-clay)}

.jsc-front .ic{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* buttons */
.jsc-front .btn{display:inline-flex; align-items:center; justify-content:space-between; gap:14px;
  font-family:var(--jsc-sans); font-weight:700; font-size:15.5px; letter-spacing:.04em;
  padding:16px 22px; border-radius:8px; transition:.25s; border:1.5px solid transparent; cursor:pointer; min-width:230px}
.jsc-front .btn .chev{width:22px; height:22px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.jsc-front .btn--clay{background:var(--jsc-clay); color:#fff; box-shadow:0 12px 24px -14px rgba(172,82,48,.9)}
.jsc-front .btn--clay:hover{background:var(--jsc-clay-deep); transform:translateY(-2px)}
.jsc-front .btn--out{background:var(--jsc-card); color:var(--jsc-ink); border-color:var(--jsc-line)}
.jsc-front .btn--out:hover{border-color:var(--jsc-clay); color:var(--jsc-clay)}
.jsc-front .btn--out-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.jsc-front .btn--out-light:hover{background:rgba(255,255,255,.1); border-color:#fff}
.jsc-front .btn:focus-visible{outline:2px solid var(--jsc-forest); outline-offset:3px}

/* Header — Cocoon親テーマの .header-in { flex-direction: column } を必ず上書きするため row 明示 */
.jsc-front .site-header{position:sticky; top:0; z-index:60; background:var(--jsc-forest); color:#fff; margin:0; padding:0}
.jsc-front .site-header .wrap.header-in{display:flex; flex-direction:row; align-items:center; justify-content:space-between; height:72px}
.jsc-front .brand{display:flex; flex-direction:row; align-items:center; gap:11px}
.jsc-front .brand-logo{width:36px; height:36px; flex:none}
.jsc-front .brand-logo--sm{width:32px; height:32px}
.jsc-front .brand-name{font-family:var(--jsc-serif); font-size:21px; font-weight:600; letter-spacing:.08em; color:#fff}
.jsc-front .header-tools{display:flex; flex-direction:row; align-items:center; gap:28px}
.jsc-front .htool{display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; letter-spacing:.06em; color:#E7EDE7; cursor:pointer; background:none; border:0}
.jsc-front .htool .ic{width:20px; height:20px; stroke:#fff}
.jsc-front .htool:hover{color:#fff}
@media(max-width:760px){ .jsc-front .header-tools .htool span{display:none} }

/* cta-enhancement.js が注入する hakajimai-cta-box / 浮きCTA / 退出ポップアップを完全に隠す（トップでは不要） */
body.jsc-front-page .hakajimai-cta-box,
body.jsc-front-page .hakajimai-floating-cta,
body.jsc-front-page .hakajimai-exit-popup,
body.jsc-front-page .hakajimai-inline-cta,
body.jsc-front-page [class*="hakajimai-cta"]{display:none !important}

/* Hero */
.jsc-front .hero{background:linear-gradient(180deg,var(--jsc-cream-2),var(--jsc-cream)); padding:64px 0 72px; border-bottom:1px solid var(--jsc-line-soft)}
.jsc-front .hero-in{display:grid; grid-template-columns:1.05fr 1fr; gap:50px; align-items:center}
.jsc-front .hero h1{font-size:40px; font-weight:600; color:var(--jsc-ink); line-height:1.55; letter-spacing:.05em}
.jsc-front .hero-sub{margin:24px 0 32px; color:#55524A; font-size:16px; line-height:1.95; max-width:40ch}
.jsc-front .hero-actions{display:flex; gap:14px; flex-wrap:wrap}
.jsc-front .hero-visual{position:relative; display:flex; align-items:center; justify-content:center}
/* FV写真エリアは非表示。「相談できること」カードのみ右に表示 */
.jsc-front .hero-photo{display:none}
.jsc-front .hero-photo::after{display:none}
.jsc-front .hero-card{position:static; width:100%; max-width:380px; background:var(--jsc-card); border:1px solid var(--jsc-line); border-radius:12px; box-shadow:0 30px 60px -32px rgba(43,42,38,.5); padding:26px 26px 24px}
.jsc-front .hero-card h2{font-size:16px; color:var(--jsc-ink); margin-bottom:16px; font-weight:600}
.jsc-front .check-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.jsc-front .check-list li{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--jsc-ink); line-height:1.6}
.jsc-front .check-ic{width:20px; height:20px; flex:none; border-radius:50%; background:var(--jsc-check); display:grid; place-items:center; margin-top:1px}
.jsc-front .check-ic svg{width:12px; height:12px; stroke:#fff; fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.jsc-front .hero-card-note{margin-top:18px; background:var(--jsc-beige); border-radius:9px; padding:14px; display:flex; gap:12px; align-items:center}
.jsc-front .hero-card-note .ic{width:30px; height:30px; stroke:var(--jsc-forest); flex:none}
.jsc-front .hero-card-note p{margin:0; font-size:12px; color:#5A574E; line-height:1.65}
@media(max-width:880px){
  .jsc-front .hero-in{grid-template-columns:1fr; gap:34px}
  .jsc-front .hero h1{font-size:31px}
  .jsc-front .hero-card{width:auto; margin:0 auto; max-width:380px}
}

/* Finder */
.jsc-front .finder{background:var(--jsc-beige)}
.jsc-front .finder-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.jsc-front .fcard{background:var(--jsc-card); border:1px solid var(--jsc-line); border-radius:12px; padding:30px 24px 24px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; transition:.25s; cursor:pointer}
.jsc-front .fcard:hover{transform:translateY(-4px); box-shadow:0 26px 46px -32px rgba(43,42,38,.45); border-color:var(--jsc-clay)}
.jsc-front .fcard .ic-wrap{color:var(--jsc-forest); margin-bottom:2px}
.jsc-front .fcard .ic{width:40px; height:40px; stroke-width:1.4}
.jsc-front .fcard h3{font-size:16.5px; color:var(--jsc-ink); font-weight:600}
.jsc-front .fcard p{font-size:12.5px; color:var(--jsc-mute); line-height:1.7; margin:0}
.jsc-front .fcard .go{width:36px; height:36px; border:1px solid var(--jsc-line); border-radius:50%; display:grid; place-items:center; margin-top:8px; transition:.25s}
.jsc-front .fcard:hover .go{background:var(--jsc-clay); border-color:var(--jsc-clay)}
.jsc-front .fcard .go svg{width:16px; height:16px; stroke:var(--jsc-mute); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.jsc-front .fcard:hover .go svg{stroke:#fff}
@media(max-width:880px){ .jsc-front .finder-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .jsc-front .finder-grid{grid-template-columns:1fr} }

/* Services */
.jsc-front .svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.jsc-front .scard{background:var(--jsc-card); border:1px solid var(--jsc-line); border-radius:12px; padding:32px 28px; transition:.25s; display:flex; flex-direction:column}
.jsc-front .scard:hover{transform:translateY(-4px); box-shadow:0 26px 48px -34px rgba(43,42,38,.45)}
.jsc-front .scard .ic-wrap{width:60px; height:60px; border-radius:50%; background:var(--jsc-forest-soft); display:grid; place-items:center; color:var(--jsc-forest); margin-bottom:18px}
.jsc-front .scard .ic{width:30px; height:30px}
.jsc-front .scard h3{font-size:19px; color:var(--jsc-ink); margin-bottom:12px; font-weight:600}
.jsc-front .scard p{font-size:13.5px; color:var(--jsc-mute); line-height:1.85; margin:0 0 18px}
.jsc-front .scard .feat{list-style:none; padding:0; margin:0 0 22px; display:flex; flex-direction:column; gap:9px}
.jsc-front .scard .feat li{font-size:13px; color:var(--jsc-ink); padding-left:18px; position:relative}
.jsc-front .scard .feat li::before{content:""; position:absolute; left:0; top:.6em; width:7px; height:7px; border-radius:50%; background:var(--jsc-clay)}
.jsc-front .scard .link{margin-top:auto; font-size:14px; font-weight:700; color:var(--jsc-clay); display:inline-flex; align-items:center; gap:8px}
.jsc-front .scard .link svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:.2s}
.jsc-front .scard .link:hover svg{transform:translateX(4px)}
@media(max-width:880px){ .jsc-front .svc-grid{grid-template-columns:1fr} }

/* AI診断 panel */
.jsc-front .ai-sec{background:var(--jsc-cream)}
.jsc-front .ai-panel{background:var(--jsc-forest-deep); border-radius:18px; color:#fff; padding:50px 52px; display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; position:relative; overflow:hidden}
.jsc-front .ai-panel::before{content:""; position:absolute; right:-90px; top:-90px; width:320px; height:320px; border:1px solid rgba(255,255,255,.07); border-radius:50%}
.jsc-front .ai-panel::after{content:""; position:absolute; right:-40px; bottom:-120px; width:240px; height:240px; border:1px solid rgba(255,255,255,.05); border-radius:50%}
.jsc-front .ai-eyebrow{display:inline-flex; align-items:center; gap:13px; margin-bottom:20px; position:relative; z-index:1}
.jsc-front .ai-eyebrow .lbl{font-size:12px; letter-spacing:.22em; color:#C7D1C8; font-weight:500}
.jsc-front .ai-panel h2{font-size:30px; color:#fff; line-height:1.5; position:relative; z-index:1}
.jsc-front .ai-desc{margin:18px 0 30px; color:#C4CDC4; font-size:14.5px; line-height:1.9; max-width:40ch; position:relative; z-index:1}
.jsc-front .ai-panel .btn--clay{position:relative; z-index:1}
.jsc-front .ai-note{margin:16px 0 0; font-size:12px; color:#90A096; position:relative; z-index:1}
.jsc-front .ai-preview{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:26px; position:relative; z-index:1; backdrop-filter:blur(2px)}
.jsc-front .ai-preview-head{display:flex; justify-content:space-between; font-size:12.5px; color:#D8B791; letter-spacing:.12em; padding-bottom:15px; border-bottom:1px solid rgba(255,255,255,.15); margin-bottom:18px}
.jsc-front .ai-steps{list-style:none; margin:0; padding:0; counter-reset:s; display:flex; flex-direction:column; gap:15px}
.jsc-front .ai-steps li{font-size:13.5px; color:#E7ECE6; padding-left:32px; position:relative; line-height:1.6}
.jsc-front .ai-steps li::before{counter-increment:s; content:counter(s); position:absolute; left:0; top:-1px; width:21px; height:21px; border-radius:50%; border:1px solid var(--jsc-clay); color:#E2A483; display:grid; place-items:center; font-size:11px; font-family:var(--jsc-serif)}
@media(max-width:880px){ .jsc-front .ai-panel{grid-template-columns:1fr; gap:32px; padding:38px 30px} .jsc-front .ai-panel h2{font-size:25px} }

/* Columns */
.jsc-front .col-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px}
.jsc-front .ccard{background:var(--jsc-card); border:1px solid var(--jsc-line); border-radius:12px; overflow:hidden; transition:.25s}
.jsc-front .ccard:hover{transform:translateY(-4px); box-shadow:0 24px 44px -32px rgba(43,42,38,.45)}
.jsc-front .ccard .thumb{height:140px; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--jsc-forest-soft),#E7DFD0)}
.jsc-front .ccard .thumb-ic{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; stroke:var(--jsc-forest); opacity:.3; z-index:0}
.jsc-front .ccard .thumb-photo{position:absolute; inset:0; background-size:cover; background-position:center; z-index:1}
.jsc-front .ccard .thumb-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(39,67,47,.12))}
.jsc-front .ccard .badge{position:absolute; top:12px; left:12px; z-index:2; background:rgba(255,255,255,.92); color:var(--jsc-forest); font-size:11px; font-weight:700; letter-spacing:.04em; padding:4px 12px; border-radius:20px}
.jsc-front .ccard .cbody{padding:18px 18px 20px}
.jsc-front .ccard h3{font-family:var(--jsc-serif); font-size:14.5px; line-height:1.7; color:var(--jsc-ink); font-weight:600}
.jsc-front .ccard .date{margin-top:12px; font-size:11.5px; color:var(--jsc-mute); letter-spacing:.06em}
@media(max-width:880px){ .jsc-front .col-grid{grid-template-columns:1fr 1fr} }
@media(max-width:520px){ .jsc-front .col-grid{grid-template-columns:1fr} }

/* Bottom CTA */
.jsc-front .cta{position:relative; color:#fff; background:var(--jsc-forest-deep); overflow:hidden}
.jsc-front .cta-bg{position:absolute; inset:0; background:#1C3123 center/cover; opacity:.22}
.jsc-front .cta-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--jsc-forest-deep) 10%,rgba(28,49,35,.6))}
.jsc-front .cta-in{position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding:60px 0}
.jsc-front .cta h2{font-size:28px; color:#fff; margin-bottom:12px}
.jsc-front .cta p{margin:0; color:#CBD3CB; font-size:14px}
.jsc-front .cta-actions{display:flex; flex-direction:column; gap:12px; min-width:300px}
.jsc-front .cta-actions .btn{width:100%}
@media(max-width:880px){ .jsc-front .cta-in{grid-template-columns:1fr; gap:28px; padding:48px 0} .jsc-front .cta-actions{min-width:0} }

/* Footer */
.jsc-front .site-footer{background:var(--jsc-forest-deep); color:#CDD4CD}
.jsc-front .footer-in{padding:64px 0 36px}
.jsc-front .footer-top{display:grid; grid-template-columns:1.3fr 2fr; gap:48px}
.jsc-front .footer-brand .brand-name{color:#fff}
.jsc-front .footer-tag{font-size:13px; color:#9BA89C; line-height:1.8; margin-top:16px; max-width:34ch}
.jsc-front .footer-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.jsc-front .footer-col h3{font-family:var(--jsc-sans); font-size:13px; font-weight:700; color:#fff; letter-spacing:.06em; margin-bottom:16px}
.jsc-front .footer-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.jsc-front .footer-col a{font-size:13px; color:#A9B3AA; display:inline-flex; gap:7px; align-items:center}
.jsc-front .footer-col a::before{content:"›"; color:#6E7C6F}
.jsc-front .footer-col a:hover{color:#fff}
.jsc-front .footer-bottom{margin-top:46px; padding-top:22px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center}
.jsc-front .footer-legal{display:flex; gap:22px; list-style:none; padding:0; margin:0; flex-wrap:wrap}
.jsc-front .footer-legal a{font-size:12.5px; color:#9BA89C}
.jsc-front .footer-legal a:hover{color:#fff}
.jsc-front .footer-copy{font-size:11.5px; color:#76847A; width:100%; text-align:center; margin-top:8px}
@media(max-width:880px){ .jsc-front .footer-top{grid-template-columns:1fr; gap:34px} .jsc-front .footer-cols{grid-template-columns:1fr 1fr} }

/* reveal */
.jsc-front .reveal{opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1)}
.jsc-front .reveal.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ .jsc-front *{animation:none!important; transition:none!important} .jsc-front .reveal{opacity:1; transform:none} }