/*
Theme Name: Wakaru Line Guide
Theme URI: https://wakaru-line.com/
Author: Wakaru Line
Description: LINEのやさしい解決ガイド用の固定ページ自動生成テーマ。HTML本文を固定ページとして取り込み、ヘッダー・フッターを共通管理します。
Version: 1.0.0
Text Domain: wakaru-line-guide
*/

/* ===================================================================
   LINEのやさしい解決ガイド — style.css
=================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');

:root{
  --g:#06C755;--gd:#049e42;--gl:#e6f9ee;--gll:#f0fbf4;--gm:#b2eecb;
  --navy:#0f1f2e;--ink:#1c2b3a;--mid:#4a5568;--soft:#718096;
  --bg:#f5f7fa;--white:#fff;--border:#dde3ec;
  --warn-bg:#fffbeb;--warn-border:#fcd34d;
  --r:12px;--r-lg:18px;
  --shadow-sm:0 1px 6px rgba(0,0,0,.07);
  --shadow:0 3px 16px rgba(0,0,0,.10);
  --shadow-green:0 4px 20px rgba(6,199,85,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Noto Sans JP',sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;font-size:16px}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ===== HEADER ===== */
header{background:var(--g);position:sticky;top:0;z-index:300;box-shadow:0 2px 16px rgba(6,199,85,.35)}
.hdr{max-width:1100px;margin:0 auto;padding:0 20px;height:58px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;color:#fff;font-size:1.08rem;font-weight:900;cursor:pointer;text-decoration:none}
.logo-icon{width:34px;height:34px;background:#fff;border-radius:9px;display:grid;place-items:center;font-size:1.2rem;flex-shrink:0}
.hdr-badge{background:rgba(255,255,255,.22);color:#fff;font-size:.7rem;padding:4px 12px;border-radius:20px;font-weight:700;border:1px solid rgba(255,255,255,.3)}

/* ===== HERO ===== */
.hero{background:linear-gradient(140deg,#06C755 0%,#00a846 55%,#008f3e 100%);color:#fff;padding:52px 20px 58px;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.08) 0%,transparent 60%)}
.hero::after{content:'';position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);width:600px;height:120px;background:var(--bg);border-radius:50% 50% 0 0;z-index:1}
.hero-inner{max-width:720px;margin:0 auto;position:relative;z-index:2}
.hero-badge{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.4);color:#fff;font-size:.8rem;font-weight:700;padding:5px 16px;border-radius:20px;margin-bottom:16px;letter-spacing:.05em}
.hero h1{font-size:clamp(1.55rem,4.5vw,2.5rem);font-weight:900;line-height:1.3;letter-spacing:-.02em;margin-bottom:14px}
.hero h1 em{font-style:normal;border-bottom:3px solid rgba(255,255,255,.65);padding-bottom:1px}
.hero-lead{font-size:clamp(.97rem,2.5vw,1.08rem);opacity:.93;margin-bottom:6px;line-height:1.82}
.hero-sub{font-size:.86rem;opacity:.74;margin-bottom:30px}
/* hero SEO text */
.hero-seo{margin-top:28px;padding:18px 22px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);border-radius:12px;text-align:left;font-size:.88rem;line-height:1.75;opacity:.92}
.hero-seo h2{font-size:1rem;font-weight:900;margin-bottom:6px;color:#fff}
.hero-seo p{opacity:.9}

/* ===== QUICK BUTTONS ===== */
.quick-section{background:#fff;max-width:1060px;margin:-36px auto 0;border-radius:var(--r-lg);box-shadow:0 6px 28px rgba(0,0,0,.11);position:relative;z-index:10;padding:26px 28px 22px}
.quick-title{font-size:.95rem;font-weight:900;color:var(--navy);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.quick-title::before{content:'';display:inline-block;width:4px;height:1.1em;background:var(--g);border-radius:2px}
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
.qbtn{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--gl);border:2px solid var(--gm);border-radius:var(--r);padding:14px 8px 12px;cursor:pointer;transition:all .18s;text-align:center}
.qbtn:hover{background:var(--g);border-color:var(--g);transform:translateY(-2px);box-shadow:var(--shadow-green)}
.qbtn:hover .qb-lbl,.qbtn:hover .qb-hint{color:#fff}
.qb-ico{width:40px;height:40px;background:#fff;border-radius:10px;display:grid;place-items:center;font-size:1.25rem;box-shadow:var(--shadow-sm);flex-shrink:0}
.qb-lbl{font-size:.8rem;font-weight:700;color:var(--navy);line-height:1.3}
.qb-hint{font-size:.69rem;color:var(--soft);line-height:1.3;margin-top:1px}

/* ===== SEARCH ===== */
.search-wrap{max-width:1060px;margin:18px auto 0;padding:0 20px}
.search-inner{display:flex;gap:10px;background:#fff;border:2px solid var(--border);border-radius:var(--r);padding:10px 14px;box-shadow:var(--shadow-sm);transition:border .2s}
.search-inner:focus-within{border-color:var(--g)}
.search-inner input{flex:1;border:none;outline:none;font-size:1rem;font-family:inherit;background:transparent;color:var(--ink)}
.search-inner input::placeholder{color:#a0aec0}
.search-btn{background:var(--g);color:#fff;border:none;border-radius:9px;padding:8px 18px;font-size:.88rem;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .18s}
.search-btn:hover{background:var(--gd)}

/* ===== MAIN ===== */
main{max-width:1060px;margin:32px auto;padding:0 20px}

/* ===== SECTION TITLE ===== */
.sec-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.sec-icon{width:32px;height:32px;background:var(--gl);border-radius:9px;display:grid;place-items:center;font-size:1rem}
.sec-ttl{font-size:1.08rem;font-weight:900;color:var(--navy)}

/* ===== POPULAR ===== */
.pop-box{background:#fff;border-radius:var(--r);border:1px solid var(--border);overflow:hidden;margin-bottom:40px}
.pop-list{display:flex;flex-direction:column}
.pop-item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.pop-item:last-child{border-bottom:none}
.pop-item:hover{background:var(--gl)}
.pop-left{display:flex;align-items:center;gap:12px;grid-column:1}
.pop-mid{grid-column:2}
.pop-title{font-size:.9rem;font-weight:700;line-height:1.45;color:var(--ink);display:block}
.pop-cat{font-size:.71rem;color:var(--soft);display:block;margin-top:2px}
.pop-num{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;font-size:.82rem;font-weight:900;flex-shrink:0}
.n1{background:var(--g);color:#fff}.n2{background:#ffd600;color:#6b5000}.n3{background:#e07b39;color:#fff}.nx{background:var(--bg);color:var(--soft)}
.pop-arrow{color:var(--g);font-size:.8rem;grid-column:3}

/* ===== CAT NAV ===== */
.cat-nav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
.cat-btn{background:#fff;border:2px solid var(--border);border-radius:30px;padding:7px 15px;font-size:.83rem;font-weight:700;cursor:pointer;transition:all .18s;color:var(--ink);font-family:inherit}
.cat-btn:hover,.cat-btn.active{background:var(--g);border-color:var(--g);color:#fff}

/* ===== CATEGORY HEADER ===== */
.cat-sec{margin-bottom:44px}
.cat-hdr{display:flex;align-items:center;gap:0;margin-bottom:16px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.cat-hdr-accent{width:6px;background:var(--g);align-self:stretch;flex-shrink:0}
.cat-hdr-body{flex:1;padding:14px 18px;background:#fff;display:flex;align-items:center;gap:14px}
.cat-hdr-icon{width:44px;height:44px;background:var(--gl);border-radius:10px;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0}
.cat-hdr-text{flex:1}
.cat-hdr-name{font-size:1.08rem;font-weight:900;color:var(--navy);line-height:1.3}
.cat-hdr-desc{font-size:.75rem;color:var(--soft);margin-top:2px}
.cat-hdr-arrow{font-size:1.1rem;color:var(--g);flex-shrink:0;padding:0 8px}

/* ===== ARTICLE CARDS ===== */
.art-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:11px}
.acard{background:#fff;border-radius:var(--r);border:1px solid var(--border);padding:15px 17px;display:flex;flex-direction:column;gap:7px;cursor:pointer;transition:all .18s;text-decoration:none;color:inherit}
.acard:hover{border-color:var(--g);box-shadow:var(--shadow-green);transform:translateY(-2px)}
.atag{display:inline-block;background:var(--gl);color:var(--gd);font-size:.68rem;font-weight:700;padding:2px 9px;border-radius:20px;width:fit-content}
.atitle{font-size:.91rem;font-weight:700;line-height:1.5;color:var(--navy)}
.adesc{font-size:.79rem;color:var(--soft);line-height:1.55;flex:1}
.aread{font-size:.76rem;color:var(--g);font-weight:700;margin-top:4px}

/* ===== SEARCH RESULTS ===== */
#search-results{display:none;margin-bottom:30px}
.sr-head{font-size:.95rem;font-weight:900;color:var(--navy);margin-bottom:13px}
.sr-empty{color:var(--soft);font-size:.88rem;padding:20px;background:#fff;border-radius:var(--r);border:1px solid var(--border)}

/* ===================================================================
   ARTICLE PAGE
=================================================================== */
.breadcrumb{font-size:.77rem;color:var(--soft);margin-bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.bcl{color:var(--g);cursor:pointer}.bcl:hover{text-decoration:underline}

.back-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--border);border-radius:10px;padding:8px 15px;font-size:.86rem;font-weight:700;cursor:pointer;margin-bottom:20px;transition:all .18s;color:var(--ink);font-family:inherit;text-decoration:none}
.back-btn:hover{border-color:var(--g);color:var(--g)}

.art-layout{display:grid;grid-template-columns:1fr 270px;gap:26px;max-width:1040px;margin:0 auto}

/* ARTICLE BODY */
.art-body{background:#fff;border-radius:16px;border:1px solid var(--border);padding:34px 38px}
.art-meta{font-size:.74rem;color:var(--soft);margin-bottom:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.art-meta-tag{background:var(--gl);color:var(--gd);font-size:.71rem;font-weight:700;padding:2px 10px;border-radius:20px}
.art-body h1{font-size:clamp(1.18rem,3.5vw,1.56rem);font-weight:900;color:var(--navy);line-height:1.38;margin-bottom:16px;padding-bottom:14px;border-bottom:3px solid var(--g)}
.art-body h2{font-size:1.04rem;font-weight:900;color:var(--navy);margin:24px 0 10px;display:flex;align-items:flex-start;gap:8px;line-height:1.4}
.art-body h2::before{content:'';display:inline-block;width:4px;min-height:1.1em;background:var(--g);border-radius:2px;flex-shrink:0;margin-top:4px}
.art-body h3{font-size:.94rem;font-weight:700;color:var(--ink);margin:16px 0 8px;padding:8px 12px;background:var(--gl);border-radius:8px}
.art-body p{font-size:.93rem;color:var(--ink);line-height:1.9;margin-bottom:11px}
.art-body a.inline-link{color:var(--g);text-decoration:underline;font-weight:600}
.art-body a.inline-link:hover{color:var(--gd)}
.art-body ul,.art-body ol{padding-left:0;margin-bottom:12px;list-style:none}
.art-body ul li{font-size:1rem;line-height:1.8;margin-bottom:6px;padding-left:22px;position:relative}
.art-body ul li::before{content:'✓';position:absolute;left:0;color:var(--g);font-weight:900;font-size:.82rem}
.art-body ol{counter-reset:ol}
.art-body ol li{counter-increment:ol;font-size:1rem;line-height:1.8;margin-bottom:7px;padding:10px 13px 10px 43px;border:1px solid var(--border);border-radius:10px;position:relative}
.art-body ol li::before{content:counter(ol);position:absolute;left:11px;top:50%;transform:translateY(-50%);width:22px;height:22px;background:var(--g);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:.8rem}

/* BOXES */
.intro-box{background:var(--gl);border-left:4px solid var(--g);border-radius:0 10px 10px 0;padding:13px 16px;margin-bottom:18px;font-size:1.02rem;line-height:1.8}
.conc-box{background:#f0fdf4;color:#14532d;border:1px solid #bbf7d0;border-left:5px solid var(--g);border-radius:13px;padding:19px 22px;margin:16px 0}
.conc-box h2{color:#14532d;font-size:1.08rem;margin-top:0;margin-bottom:10px}
.conc-box h2::before{background:var(--g)}
.conc-box ul li{color:#14532d}.conc-box ul li::before{color:var(--g)}
.warn-box{background:var(--warn-bg);border:1px solid var(--warn-border);border-left:4px solid #f59e0b;border-radius:0 10px 10px 0;padding:12px 15px;margin:13px 0;font-size:.88rem;line-height:1.7}
.sum-box{background:var(--gl);border-radius:12px;padding:18px 21px;margin-top:22px}
.sum-box h2{margin-top:0}

/* SEARCH KEYWORDS */
.kw-box{background:#f8f4ff;border:1px solid #d8b4fe;border-radius:10px;padding:14px 18px;margin:18px 0}
.kw-box h2{font-size:.93rem;font-weight:900;color:#6d28d9;margin-bottom:8px}
.kw-box h2::before{background:#6d28d9}
.kw-box ul li{font-size:.84rem;color:#5b21b6}
.kw-box ul li::before{color:#7c3aed}

/* INLINE LINK SECTION */
.inline-link-box{background:var(--gll);border:1px dashed var(--gm);border-radius:10px;padding:12px 16px;margin:16px 0;font-size:.88rem}
.inline-link-box a{color:var(--g);font-weight:700;text-decoration:underline}

/* SIDEBAR */
.art-sidebar{display:flex;flex-direction:column;gap:16px}
.sb-box{background:#fff;border-radius:13px;border:1px solid var(--border);overflow:hidden}
.sb-ttl{background:var(--g);color:#fff;font-size:.82rem;font-weight:700;padding:9px 15px}
.sb-list{display:flex;flex-direction:column}
.sb-item{padding:10px 15px;border-bottom:1px solid var(--border);font-size:.81rem;font-weight:700;color:var(--navy);cursor:pointer;line-height:1.45;transition:background .15s;text-decoration:none;display:block}
.sb-item:last-child{border-bottom:none}
.sb-item:hover{background:var(--gl);color:var(--gd)}

/* RELATED */
.related-sec{margin-top:28px;padding-top:22px;border-top:2px solid var(--gl)}
.related-ttl{font-size:.95rem;font-weight:900;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.rel-card{background:var(--gl);border:1px solid var(--gm);border-radius:9px;padding:11px 13px;font-size:.81rem;font-weight:700;color:var(--navy);cursor:pointer;line-height:1.5;transition:all .15s;text-decoration:none;display:block}
.rel-card:hover{background:var(--g);color:#fff;border-color:var(--g)}

/* NEXT ARTICLE */
.next-sec{margin-top:22px;padding:15px 18px;background:#fff;border:2px dashed var(--gm);border-radius:11px}
.next-lbl{font-size:.71rem;font-weight:700;color:var(--g);margin-bottom:6px;letter-spacing:.06em}
.next-ttl{font-size:.91rem;font-weight:700;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;text-decoration:none;color:inherit}
.next-ttl:hover{color:var(--g)}
.next-arr{color:var(--g);flex-shrink:0;font-size:1.1rem}

/* ===== FOOTER ===== */
footer{background:var(--navy);color:#94a3b8;padding:42px 20px 22px;margin-top:60px}
.footer-inner{max-width:1060px;margin:0 auto}
.footer-logo{color:#fff;font-size:1.05rem;font-weight:900;margin-bottom:9px;display:flex;align-items:center;gap:8px}
.footer-logo a{color:#fff;text-decoration:none}
.footer-desc{font-size:.82rem;margin-bottom:18px;line-height:1.75;max-width:540px}
.footer-cats{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px}
.fcat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#cbd5e1;font-size:.76rem;padding:4px 11px;border-radius:20px;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block}
.fcat:hover{background:var(--g);color:#fff;border-color:var(--g)}
.footer-links{display:flex;flex-wrap:wrap;gap:15px;font-size:.79rem;margin-bottom:22px}
.footer-links a{color:#94a3b8}.footer-links a:hover{color:#fff}
.footer-copy{font-size:.74rem;border-top:1px solid rgba(255,255,255,.1);padding-top:15px}

/* ===== STATIC PAGES (privacy/disclaimer/contact/sitemap) ===== */
.static-page{max-width:760px;margin:36px auto;padding:0 20px}
.static-page-body{background:#fff;border-radius:16px;border:1px solid var(--border);padding:38px 44px}
.static-page-body h1{font-size:1.4rem;font-weight:900;color:var(--navy);margin-bottom:20px;padding-bottom:14px;border-bottom:3px solid var(--g)}
.static-page-body h2{font-size:1.02rem;font-weight:900;color:var(--navy);margin:22px 0 10px;display:flex;gap:8px;align-items:flex-start}
.static-page-body h2::before{content:'';display:inline-block;width:4px;min-height:1em;background:var(--g);border-radius:2px;flex-shrink:0;margin-top:4px}
.static-page-body p{font-size:.92rem;line-height:1.9;margin-bottom:12px;color:var(--ink)}
.static-page-body ul{padding-left:0;list-style:none;margin-bottom:14px}
.static-page-body ul li{font-size:.91rem;padding-left:18px;position:relative;margin-bottom:6px;line-height:1.75}
.static-page-body ul li::before{content:'·';position:absolute;left:0;color:var(--g);font-weight:900;font-size:1.2rem;line-height:1}
.static-page-body a{color:var(--g)}.static-page-body a:hover{text-decoration:underline}
.contact-form{display:flex;flex-direction:column;gap:14px;margin-top:16px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:.85rem;font-weight:700;color:var(--navy)}
.form-group input,.form-group textarea,.form-group select{border:2px solid var(--border);border-radius:9px;padding:10px 14px;font-size:.93rem;font-family:inherit;outline:none;transition:border .2s;background:#fff;color:var(--ink)}
.form-group input:focus,.form-group textarea:focus{border-color:var(--g)}
.form-group textarea{resize:vertical;min-height:130px}
.form-submit{background:var(--g);color:#fff;border:none;border-radius:10px;padding:13px 28px;font-size:.96rem;font-weight:700;cursor:pointer;font-family:inherit;align-self:flex-start;transition:background .18s}
.form-submit:hover{background:var(--gd)}
.sitemap-cat{margin-bottom:26px}
.sitemap-cat h2{font-size:1rem;font-weight:900;color:var(--navy);margin-bottom:10px;display:flex;gap:8px;align-items:center}
.sitemap-cat h2::before{display:none}
.sitemap-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:7px}
.sitemap-links a{font-size:.84rem;color:var(--g);padding:6px 12px;background:var(--gl);border-radius:8px;display:block;line-height:1.45;font-weight:600}
.sitemap-links a:hover{background:var(--g);color:#fff}

/* ===== RESPONSIVE ===== */
@media(max-width:860px){
  .art-layout{grid-template-columns:1fr}
  .art-sidebar{display:none}
}
@media(max-width:640px){
  .quick-grid{grid-template-columns:repeat(3,1fr)}
  .art-grid{grid-template-columns:1fr}
  .cat-nav{gap:6px}
  .cat-btn{font-size:.79rem;padding:6px 12px}
  .quick-section{padding:18px 14px 16px;margin:0 14px;border-radius:14px;margin-top:-28px}
  .search-wrap{padding:0 14px}
  main{padding:0 14px}
  .art-body{padding:20px 16px}
  .static-page-body{padding:22px 18px}
  .pop-item{grid-template-columns:auto 1fr auto}
}


/* ===================================================================
   DESIGN UPGRADE 2026-04: senior-friendly, richer cards, cleaner OGP ready
=================================================================== */
:root{
  --bg:#f2f8f5;
  --ink:#14232b;
  --navy:#10252d;
  --mid:#3f5660;
  --border:#d7e7df;
  --g:#06C755;
  --gd:#038b3b;
  --gl:#e9fbf1;
  --gll:#f6fff9;
  --shadow-sm:0 4px 14px rgba(16,37,45,.07);
  --shadow:0 10px 30px rgba(16,37,45,.10);
  --shadow-green:0 12px 32px rgba(6,199,85,.20);
}
body{
  font-size:17px;
  line-height:1.9;
  letter-spacing:.01em;
  background:
    radial-gradient(circle at 12% 5%, rgba(6,199,85,.08), transparent 28%),
    radial-gradient(circle at 92% 8%, rgba(255,198,41,.13), transparent 26%),
    var(--bg);
}
header{background:rgba(6,199,85,.96);backdrop-filter:blur(10px)}
.hdr{max-width:1220px;height:68px}.logo{font-size:1.18rem}.logo-icon{width:40px;height:40px;border-radius:13px}
.hero{padding:72px 20px 76px;background:linear-gradient(135deg,#06C755 0%,#00b894 48%,#07826d 100%)}
.hero h1{font-size:clamp(2rem,5vw,3.45rem);text-shadow:0 3px 14px rgba(0,0,0,.16)}
.hero-lead{font-size:clamp(1.08rem,2.5vw,1.25rem);font-weight:700}.hero-sub{font-size:.98rem}.hero-badge{font-size:.92rem;padding:8px 20px;background:rgba(255,255,255,.22)}
.quick-section,.pop-box,.cat-hdr,.acard,.art-body,.sb-box,.static-page-body{box-shadow:var(--shadow);border-color:rgba(6,199,85,.16)}
.quick-section{max-width:1180px;border:1px solid rgba(6,199,85,.18);padding:32px 34px 28px}.quick-title,.sec-ttl{font-size:1.16rem}
.qbtn{border-radius:18px;padding:17px 10px;background:linear-gradient(180deg,#fff,#f4fff8);border-color:#c7f3d8}.qbtn:hover{transform:translateY(-4px)}.qb-lbl{font-size:.9rem}.qb-hint{font-size:.76rem}
.search-wrap,main,.footer-inner{max-width:1180px}.search-inner{border-radius:18px;padding:13px 16px}.search-inner input{font-size:1.08rem}.search-btn{font-size:1rem;border-radius:14px}
.cat-btn{font-size:.92rem;padding:9px 18px;background:#fff;border-color:#cfe6da}.cat-btn:hover,.cat-btn.active{transform:translateY(-1px);box-shadow:var(--shadow-green)}
.cat-hdr{border-radius:20px}.cat-hdr-body{padding:18px 22px}.cat-hdr-icon{width:54px;height:54px;border-radius:16px}.cat-hdr-name{font-size:1.25rem}.cat-hdr-desc{font-size:.9rem}.cat-hdr-accent{width:8px}
.art-grid{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}.acard{border-radius:20px;padding:20px 22px}.atitle{font-size:1.04rem}.adesc{font-size:.9rem}.atag{font-size:.76rem;padding:4px 11px}
.pop-title{font-size:1rem}.pop-cat{font-size:.82rem}.pop-item{padding:16px 20px}
.art-layout{grid-template-columns:minmax(0,1fr) 290px !important;gap:34px !important;max-width:1220px !important}
.art-body{border-radius:22px;padding:44px 52px !important;border-top:6px solid var(--g)}
.art-meta{font-size:.88rem;margin-bottom:22px}.art-meta-tag{font-size:.82rem;padding:4px 12px}
.art-body h1{font-size:clamp(1.65rem,3.2vw,2.35rem) !important;line-height:1.46;margin-bottom:24px;padding-bottom:18px;border-bottom:4px solid var(--g)}
.art-body h2{font-size:1.36rem !important;margin:34px 0 14px;line-height:1.55}.art-body h2::before{width:6px;min-height:1.35em;margin-top:6px;border-radius:6px}
.art-body h3{font-size:1.12rem !important;margin:22px 0 10px;padding:11px 15px;border-radius:14px;background:linear-gradient(90deg,var(--gl),#fff)}
.art-body p{font-size:1.08rem !important;line-height:2.02;margin-bottom:16px}.art-body ul li,.art-body ol li{font-size:1.06rem !important;line-height:1.95}
.intro-box{font-size:1.1rem;line-height:1.9;padding:18px 22px;border-radius:0 18px 18px 0;background:linear-gradient(90deg,#e8fbf0,#fff)}
.conc-box{background:linear-gradient(135deg,#f0fff6 0%,#ffffff 100%) !important;color:#123d2a !important;border:2px solid #bff4d3 !important;border-left:8px solid var(--g) !important;border-radius:20px !important;padding:24px 28px !important;box-shadow:0 10px 24px rgba(6,199,85,.10)}
.conc-box h2{font-size:1.25rem !important;color:#123d2a !important}.conc-box ul li{padding-left:0 !important;color:#123d2a !important}.conc-box ul li::before{content:'' !important;display:none !important}
.warn-box{font-size:1rem;line-height:1.85;border-radius:0 18px 18px 0;padding:17px 20px}.sum-box{border-radius:20px;padding:24px 28px;background:linear-gradient(135deg,#e9fbf1,#fff)}
.kw-box{border-radius:18px;padding:18px 22px}.kw-box h2{font-size:1.08rem}.kw-box ul li{font-size:.96rem}
.inline-link-box{font-size:1.02rem;line-height:1.8;border-radius:18px;padding:17px 20px;background:#f7fff9}
.sb-ttl{font-size:.94rem;padding:12px 16px}.sb-item{font-size:.92rem;padding:13px 16px}.related-ttl{font-size:1.1rem}.rel-card{font-size:.95rem;border-radius:15px;padding:14px 16px}.next-sec{border-radius:18px;padding:20px 22px}.next-ttl{font-size:1.05rem}
footer{background:linear-gradient(135deg,#10252d,#0a1a20);padding:54px 20px 28px}.footer-desc{font-size:.95rem;max-width:none !important}.footer-links{font-size:.9rem}.footer-copy{font-size:.82rem}
.static-page{max-width:900px}.static-page-body{border-radius:22px;padding:48px 56px}.static-page-body h1{font-size:2rem}.static-page-body h2{font-size:1.3rem}.static-page-body p,.static-page-body ul li{font-size:1.05rem;line-height:2}
@media(max-width:860px){.art-layout{grid-template-columns:1fr !important}.art-body{padding:30px 22px !important}.art-sidebar{display:none}.hero{padding:54px 18px 62px}.quick-section{margin-left:14px;margin-right:14px}}
@media(max-width:640px){body{font-size:16.5px}.hdr{height:62px}.art-body h1{font-size:1.55rem !important}.art-body h2{font-size:1.23rem !important}.art-body p{font-size:1.03rem !important}.art-grid{grid-template-columns:1fr}.quick-grid{grid-template-columns:repeat(2,1fr)}.static-page-body{padding:28px 22px}.hero h1{font-size:2rem}}


/* ===================================================================
   CAT HEADER FIX: トップページのカテゴリ見出しにメリハリを追加
=================================================================== */
.cat-hdr{
  background: linear-gradient(135deg, #06C755 0%, #00b894 58%, #07826d 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 12px 30px rgba(6,199,85,.24) !important;
  overflow: hidden;
  position: relative;
}

.cat-hdr::before{
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -80px;
  top: -100px;
  background: rgba(255,255,255,.16);
  border-radius: 50%;
  pointer-events: none;
}

.cat-hdr::after{
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  left: -55px;
  bottom: -70px;
  background: rgba(255,255,255,.11);
  border-radius: 50%;
  pointer-events: none;
}

.cat-hdr-body{
  position: relative;
  z-index: 1;
}

.cat-hdr-icon{
  background: rgba(255,255,255,.22) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

.cat-hdr-name{
  color: #fff !important;
  font-weight: 800;
}

.cat-hdr-desc{
  color: rgba(255,255,255,.92) !important;
}

.cat-hdr-count{
  background: rgba(255,255,255,.2) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.3);
}

.cat-hdr-accent{
  background: rgba(255,255,255,.72) !important;
}


.cat-hdr-body {
  background: transparent !important;
}

.cat-hdr-accent {
   display: none;
}