/* ==========================================================================
   dogs.css — Small breed guide design (petdogcat.jp /dogs/)
   Theme: 高級感 × 読みやすい × モバイル最適化
   ========================================================================== */
:root{
  --dg-bg:#ffffff;
  --dg-text:#222;
  --dg-muted:#5f6b73;
  --dg-accent:#4db8e8;
  --dg-accent-d:#2e8fbf;
  --dg-soft:#f7f9fc;
  --dg-line:#e6ecf2;
  --dg-warn:#f4a637;
  --dg-shadow:0 2px 8px rgba(20,40,60,.06);
}
*{box-sizing:border-box}
body{font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Yu Gothic",sans-serif;background:var(--dg-bg);color:var(--dg-text);line-height:1.85;margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--dg-accent-d);text-decoration:none}
a:hover{text-decoration:underline}

/* Header / Footer reuse global, fallbacks below */
.dg-header{background:#fff;border-bottom:1px solid var(--dg-line);position:sticky;top:0;z-index:50}
.dg-header__inner{max-width:1080px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.dg-header__logo img{height:54px;width:auto}
.dg-nav{display:flex;gap:18px;flex-wrap:wrap}
.dg-nav a{color:var(--dg-text);font-weight:700;font-size:.92rem}
.dg-nav a:hover{color:var(--dg-accent-d)}

.dg-container{max-width:780px;margin:0 auto;padding:24px 20px 80px}
.dg-container--wide{max-width:1080px}

.dg-breadcrumb{font-size:.82rem;color:var(--dg-muted);margin:8px 0 18px}
.dg-breadcrumb a{color:var(--dg-muted)}
.dg-breadcrumb .sep{margin:0 6px;color:#b8c2cc}
.dg-breadcrumb [aria-current]{color:var(--dg-text);font-weight:700}

/* Article */
.dg-art-head{padding:8px 0 18px;border-bottom:1px solid var(--dg-line);margin-bottom:20px}
.dg-eyebrow{display:inline-block;background:var(--dg-soft);color:var(--dg-accent-d);padding:4px 12px;border-radius:999px;font-size:.78rem;font-weight:700;letter-spacing:.04em}
.dg-h1{font-size:1.7rem;line-height:1.45;margin:14px 0 10px;letter-spacing:.01em}
@media(min-width:768px){.dg-h1{font-size:2.05rem}}
.dg-lead{color:var(--dg-muted);font-size:1rem;margin:0 0 8px}
.dg-meta{font-size:.78rem;color:var(--dg-muted);margin-top:6px}

.dg-article h2{font-size:1.32rem;margin:36px 0 14px;padding-left:14px;border-left:5px solid var(--dg-accent);line-height:1.5}
.dg-article h3{font-size:1.08rem;margin:24px 0 10px;color:var(--dg-accent-d)}
.dg-article p{margin:0 0 16px}
.dg-article ul,.dg-article ol{padding-left:1.4em;margin:0 0 18px}
.dg-article li{margin:0 0 6px}
.dg-article strong{color:var(--dg-text);background:linear-gradient(transparent 60%,#fff2c2 60%);padding:0 2px}

/* Conclusion box (top) */
.dg-conclusion{background:var(--dg-soft);border-left:4px solid var(--dg-accent);padding:16px 18px;border-radius:6px;margin:0 0 22px;font-size:.96rem}
.dg-conclusion strong{background:none;color:var(--dg-accent-d)}

/* TLDR card */
.dg-tldr{background:#fff;border:1px solid var(--dg-line);border-radius:10px;padding:18px 20px;margin:0 0 26px;box-shadow:var(--dg-shadow)}
.dg-tldr h2{font-size:1.04rem;margin:0 0 10px;padding:0;border:none;color:var(--dg-text)}
.dg-tldr ul{margin:0;padding-left:1.2em}
.dg-tldr li{font-size:.94rem}

/* Comparison table */
.dg-table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:.92rem;background:#fff;border-radius:8px;overflow:hidden;box-shadow:var(--dg-shadow)}
.dg-table th,.dg-table td{padding:10px 12px;border:1px solid var(--dg-line);text-align:left;vertical-align:top}
.dg-table thead th{background:var(--dg-accent);color:#fff;font-weight:700}
.dg-table tbody tr:nth-child(even){background:#fafcfe}

/* FAQ accordion */
.dg-faq{margin:8px 0 0}
.dg-faq details{background:#fff;border:1px solid var(--dg-line);border-radius:8px;padding:0;margin:0 0 10px;overflow:hidden}
.dg-faq summary{cursor:pointer;list-style:none;padding:14px 18px;font-weight:700;color:var(--dg-text);position:relative;padding-right:42px}
.dg-faq summary::-webkit-details-marker{display:none}
.dg-faq summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:1.4rem;color:var(--dg-accent);font-weight:700;transition:.2s}
.dg-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.dg-faq__body{padding:0 18px 16px;color:var(--dg-muted);font-size:.94rem}

/* CTA box */
.dg-cta{margin:36px 0 24px;background:linear-gradient(135deg,#eaf6fc 0%,#fff 100%);border:1px solid var(--dg-line);border-radius:14px;padding:24px;text-align:center;box-shadow:var(--dg-shadow)}
.dg-cta h3{margin:0 0 10px;color:var(--dg-accent-d);font-size:1.18rem}
.dg-cta p{margin:0 0 16px;color:var(--dg-text);font-size:.95rem}
.dg-cta__btn{display:inline-block;background:var(--dg-accent);color:#fff !important;padding:12px 28px;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;box-shadow:0 3px 10px rgba(77,184,232,.4);transition:.2s}
.dg-cta__btn:hover{background:var(--dg-accent-d);text-decoration:none;transform:translateY(-1px)}

/* References & Related */
.dg-refs{background:var(--dg-soft);padding:18px 22px;border-radius:10px;margin:24px 0;font-size:.9rem}
.dg-refs h3{margin:0 0 10px;color:var(--dg-text);font-size:1rem}
.dg-refs ul{margin:0;padding-left:1.2em}

.dg-related{margin:30px 0 10px}
.dg-related h2{font-size:1.1rem;border-left-color:var(--dg-accent);padding-left:12px;margin-bottom:14px}
.dg-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.dg-rel-card{display:block;background:#fff;border:1px solid var(--dg-line);border-radius:10px;padding:14px 16px;transition:.2s;text-decoration:none;color:var(--dg-text)}
.dg-rel-card:hover{border-color:var(--dg-accent);transform:translateY(-2px);box-shadow:var(--dg-shadow);text-decoration:none}
.dg-rel-card__tag{display:inline-block;font-size:.7rem;color:var(--dg-accent-d);background:var(--dg-soft);padding:2px 8px;border-radius:4px;margin-bottom:6px;font-weight:700}
.dg-rel-card__title{margin:0;font-size:.92rem;font-weight:700;line-height:1.5}

/* Hub / breed grid */
.dg-hub-hero{background:linear-gradient(135deg,#eaf6fc 0%,#fff 100%);padding:40px 20px;text-align:center;border-radius:14px;margin-bottom:30px}
.dg-hub-hero__eyebrow{color:var(--dg-accent-d);font-weight:700;letter-spacing:.1em;font-size:.85rem}
.dg-hub-hero h1{font-size:1.9rem;margin:8px 0 10px}
.dg-hub-hero p{color:var(--dg-muted);max-width:640px;margin:0 auto}

.dg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0 0 30px}
.dg-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--dg-line);border-radius:14px;padding:20px;text-decoration:none;color:var(--dg-text);transition:.2s;box-shadow:var(--dg-shadow)}
.dg-card:hover{transform:translateY(-3px);border-color:var(--dg-accent);text-decoration:none;box-shadow:0 6px 18px rgba(20,40,60,.08)}
.dg-card__icon{font-size:2.2rem;margin-bottom:8px}
.dg-card__title{font-size:1.08rem;font-weight:700;margin:0 0 6px;color:var(--dg-text)}
.dg-card__desc{font-size:.86rem;color:var(--dg-muted);margin:0;line-height:1.7;flex-grow:1}
.dg-card__more{margin-top:10px;font-size:.82rem;color:var(--dg-accent-d);font-weight:700}

/* Footer reused; fallback */
.dg-footer{background:#222;color:#cdd5dc;padding:28px 20px;text-align:center;font-size:.85rem;margin-top:40px}
.dg-footer a{color:#cdd5dc;margin:0 10px}

/* Back-link */
.dg-back{display:inline-block;margin:24px 0 0;color:var(--dg-accent-d);font-weight:700;font-size:.92rem}