/* ============================================================
   site-2026.css — cash-guide.jp 2026 renewal design system
   Extracted from the approved TOP page (index.html) inline styles
   so subpages can adopt the same look without duplicating CSS.
   Load order: /style.css → /css/site-2026.css
   Each page sets its hero image via inline background-image.
   ============================================================ */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ===== SECTION HEADING ===== */
.section-heading{text-align:center;margin-bottom:2rem;padding-top:3rem}
.section-heading h2{font-size:1.8rem;font-weight:900;color:var(--main);margin-bottom:.5rem;border-bottom:none;display:block;padding-bottom:0}
.section-heading p{color:var(--text-note);font-size:.95rem}

/* ===== IMAGE HERO (renewal) ===== */
.hero-v2{position:relative;display:flex;align-items:center;min-height:400px;background:#0f3a22 center/cover no-repeat;color:#fff;overflow:hidden}
.hero-v2::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,38,22,.94) 0%,rgba(9,38,22,.8) 36%,rgba(9,38,22,.25) 68%,rgba(9,38,22,0) 100%)}
.hero-v2 .hero-inner{position:relative;z-index:1;max-width:880px;width:100%;margin:0 auto;padding:3.5rem 1.5rem;text-align:left}
.hero-v2 .hero-badges{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:1.2rem}
.hero-v2 .hero-badge{display:inline-block;background:linear-gradient(135deg,#d4a942,#f5d880,#c5a24d);color:#16432a;font-size:.78rem;font-weight:700;padding:6px 16px;border-radius:30px;letter-spacing:.04em;margin-bottom:0}
.hero-v2 .last-updated{font-size:.78rem;color:rgba(255,255,255,.85);margin-top:0}
.hero-v2 h1{font-size:2.5rem;font-weight:900;line-height:1.32;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.3);max-width:640px}
.hero-v2 h1 .accent{color:#f5d880}
.hero-v2 h1 span{border-bottom:none;padding-bottom:0}
.hero-v2 .hero-sub{font-size:1.05rem;line-height:1.85;color:rgba(255,255,255,.92);max-width:580px;text-shadow:0 1px 6px rgba(0,0,0,.25);opacity:1;margin:0 0 .5rem}
.hero-v2 .hero-sub a{color:#f5d880;text-decoration:underline}
.hero-cta{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.hero-cta a{display:inline-block;font-size:.9rem;font-weight:700;padding:11px 20px;border-radius:10px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.hero-cta a:hover{transform:translateY(-2px);text-decoration:none}
.hero-cta .cta-gold{background:linear-gradient(135deg,#d4a942,#f5d880);color:#16432a;box-shadow:0 4px 14px rgba(197,162,77,.4)}
.hero-cta .cta-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4)}
.hero-v2.hero-v2-sm{min-height:240px}
.hero-v2.hero-v2-sm .hero-inner{padding:2.5rem 1.5rem}
.hero-v2.hero-v2-sm h1{font-size:1.9rem;margin-bottom:.6rem}

/* ===== IMAGE CATEGORY CARDS ===== */
.cat-img-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.cat-img-card{display:block;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 2px 14px rgba(0,0,0,.07);border:1px solid #eee;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.cat-img-card:hover{transform:translateY(-5px);box-shadow:0 12px 30px rgba(0,0,0,.12);text-decoration:none}
.cat-img-card img{width:100%;height:auto;display:block;aspect-ratio:8/5;object-fit:cover}
.cat-body{padding:1.15rem 1.3rem 1.35rem}
.cat-body h3{font-size:1.12rem;font-weight:800;color:var(--main);margin-bottom:.35rem}
.cat-body .cat-desc{font-size:.86rem;color:#555;line-height:1.65;margin-bottom:.8rem}
.cat-pick{display:inline-block;font-size:.83rem;font-weight:700;color:#8a6d2b;background:linear-gradient(135deg,#fff8e3,#fbeec2);border:1px solid #ecdcad;padding:7px 13px;border-radius:8px;line-height:1.45}
.cat-pick b{color:var(--main)}
.cat-go{display:inline-block;margin-top:.7rem;font-size:.86rem;font-weight:700;color:var(--main)}
.cat-img-card:hover .cat-go{color:#0f3a22}

/* ===== IMAGE RANKING CARDS ===== */
.rank-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.rank-card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.07);transition:transform .25s,box-shadow .25s;display:flex;flex-direction:column}
.rank-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,.1)}
.rank-card>img{width:100%;display:block;aspect-ratio:8/5;object-fit:cover}
.rank-list{padding:.9rem 1rem 1.1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.rank-row{display:flex;align-items:center;gap:.8rem;padding:.5rem .55rem;border-radius:10px;transition:background .2s}
.rank-row:hover{background:#f6faf8}
.rank-row .rank-num{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:.8rem;font-weight:900;color:#fff;flex-shrink:0}
.rn1{background:linear-gradient(135deg,#d4a942,#f5d880);color:#5a4410;box-shadow:0 2px 8px rgba(197,162,77,.4)}
.rn2{background:linear-gradient(135deg,#a8b0b5,#c8cfd4)}
.rn3{background:linear-gradient(135deg,#b87333,#d4945a)}
.rank-row a{text-decoration:none;color:var(--text);font-weight:600;font-size:.9rem;line-height:1.3}
.rank-row a:hover{color:var(--main)}
.rank-cta{margin:.2rem .6rem .2rem;text-align:center;font-size:.84rem;font-weight:700;color:var(--main);text-decoration:none;padding:.55rem;border-top:1px solid #f0f0f0;display:block}
.rank-cta:hover{color:#0f3a22}

/* ===== IMAGE ARTICLE CARDS ===== */
.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem}
.art-card{display:block;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.06);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s}
.art-card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.1);text-decoration:none}
.art-card img{width:100%;height:auto;display:block;aspect-ratio:8/5;object-fit:cover}
.art-body{padding:.85rem .95rem 1rem}
.art-body p{font-size:.8rem;color:#555;line-height:1.6;margin-bottom:.5rem}
.art-more{font-size:.79rem;color:var(--gold);font-weight:700}

/* ===== PORTAL FOOTER (from portal-styles.css, unified sitewide) ===== */
.portal-footer{background:#1a5632;color:#fff;padding:3rem 1.5rem 1.5rem}
.portal-footer .footer-inner{max-width:900px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-bottom:2rem}
.portal-footer .footer-col h3,.portal-footer .footer-col h4{font-size:.9rem;font-weight:700;color:#f5d880;margin-bottom:.75rem}
.portal-footer .footer-col ul{list-style:none;margin:0;padding:0}
.portal-footer .footer-col li{margin-bottom:.4rem}
.portal-footer .footer-col a{color:rgba(255,255,255,.8);font-size:.85rem;text-decoration:none}
.portal-footer .footer-col a:hover{color:#fff;text-decoration:underline}
.portal-footer .footer-bottom{text-align:center;border-top:1px solid rgba(255,255,255,.15);padding-top:1.25rem;font-size:.8rem;color:rgba(255,255,255,.6)}
.portal-footer .footer-sister{text-align:center;margin:16px 0 0;font-size:.85rem;color:rgba(255,255,255,.7)}
.portal-footer .footer-sister a{color:#f5d880}

/* ===== RESPONSIVE ===== */
@media(max-width:880px){
  .hero-v2 h1{font-size:2rem}
  .art-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero-v2{min-height:340px}
  .hero-v2 .hero-inner{padding:2.8rem 1.25rem;text-align:left}
  .hero-v2 h1{font-size:1.7rem}
  .hero-v2 .hero-sub{font-size:.98rem}
  .cat-img-grid{grid-template-columns:1fr}
  .rank-grid{grid-template-columns:1fr}
  .section-heading h2{font-size:1.5rem}
  .portal-footer .footer-inner{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:480px){
  .art-grid{grid-template-columns:1fr}
}

/* ===== LEGACY COMPONENT FIXES (2026-07-04) =====
   Defensive defaults for legacy components that relied on inline styles.
   .compare-header: style.css sets color:white but no background, so cards
   without an inline background rendered white-on-white (invisible names).
   Inline style="background:..." still wins over this default. */
.compare-card .compare-header{background:var(--main,#1a5632)}
.compare-card .compare-value{overflow-wrap:anywhere}
/* Long-text rows (e.g. 特徴): stack label above value, left-aligned */
.compare-card .compare-row.compare-row-wide{flex-direction:column;align-items:flex-start;gap:2px}
.compare-card .compare-row.compare-row-wide .compare-value{text-align:left;font-weight:500;line-height:1.7}
/* .last-updated is styled for dark hero (white text); when it sits after the
   breadcrumb on a light background it was invisible — use note color there */
.breadcrumb+.last-updated{color:var(--text-note,#888)}

/* ===== CARD INNER SPACING (2026-07-04 fixes round 2) =====
   .compare-card and .faq-item were designed for structured children that
   carry their own padding (.cc-name/.cc-row, .compare-header/.compare-row,
   .faq-q/.faq-a), so the shells ship with padding:0. Many article pages put
   raw h3/h4/ul/p content directly inside instead, which then hugs the card
   borders. Give the shell padding only when no structured child is present
   (structured cards keep their full-bleed headers). Old browsers without
   :has() simply keep today's rendering — no regression. */
.compare-card:not(:has(> .cc-name)):not(:has(> .compare-header)){padding:1.35rem 1.6rem 1.5rem}
.faq-item:not(:has(> .faq-q)){padding:1.1rem 1.4rem 1.2rem}

/* Raw compare-card heading: card title treatment instead of bare bold text */
.compare-card>h3:first-child,
.compare-card>h4:first-child{font-size:1.08rem;font-weight:900;color:var(--main,#1a5632);margin:0 0 .85rem;padding-bottom:.55rem;border-bottom:2px solid var(--main-light,#f0f7f3)}
/* Raw faq-item Q/A */
.faq-item>h3{font-size:.98rem;font-weight:700;color:var(--main,#1a5632);margin:0 0 .55rem}
.faq-item>p{font-size:.93rem;line-height:1.8}

/* Kill runaway margins at box edges so padding stays visually even */
.compare-card>:first-child,.faq-item>:first-child{margin-top:0}
.compare-card>:last-child,.faq-item>:last-child,
.point-box>:last-child,.section-summary>:last-child,
.balloon>:last-child,.voice-card>:last-child{margin-bottom:0}
.compare-card li>p,.faq-item li>p{margin:.2rem 0 0}

/* Vertical rhythm inside raw compare cards: the plain bullet list is dense
   (8px rows) while .check-list rows are airy (borders + .6rem pads) — even
   them out so the card doesn't read cramped on top / hollow at the bottom */
.compare-card>ul:not(.check-list){margin-bottom:.9rem}
.compare-card>p{margin-bottom:.6rem}
.compare-card .check-list{margin:.35rem 0 0}
.compare-card .check-list li{padding-top:.5rem;padding-bottom:.5rem}
.compare-card .check-list li::before{top:.5rem}
.compare-card .check-list li:first-child{padding-top:.2rem}
.compare-card .check-list li:first-child::before{top:.2rem}
.compare-card .check-list li:last-child{border-bottom:none;padding-bottom:.2rem}

@media(max-width:640px){
  .compare-card:not(:has(> .cc-name)):not(:has(> .compare-header)){padding:1.05rem 1.1rem 1.2rem}
  .faq-item:not(:has(> .faq-q)){padding:.95rem 1.05rem 1.05rem}
}