/* ブログ専用スタイル（style.cssの変数を使用） */
.pagehead--blog{background-image:url(../img/value-02-consult.jpg);background-position:center 40%}

.tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
.tab{display:inline-block;padding:10px 20px;border-radius:999px;border:2px solid var(--line);font-weight:700;font-size:14px;color:var(--ink-sub)}
.tab:hover{text-decoration:none;border-color:var(--green)}
.tab--active{background:var(--green);border-color:var(--green);color:var(--white)}
.tab--active:hover{color:var(--white)}

.blog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.blog-card{display:block;background:var(--white);border:2px solid var(--line);border-radius:12px;overflow:hidden}
.blog-card:hover{text-decoration:none;border-color:var(--green);box-shadow:0 4px 14px rgba(36,128,77,.14)}
.blog-card-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--green-pale)}
.blog-card-body{padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.blog-card-title{font-size:16px;font-weight:700;color:var(--ink);line-height:1.6}
.tag--life{background:#8C6D3F}

.post-meta{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.post-title{margin:0 0 24px;font-size:28px;font-weight:900;color:var(--green);line-height:1.5}
.post-img{aspect-ratio:16/9;background-size:cover;background-position:center;background-repeat:no-repeat;background-color:var(--green-pale);border-radius:14px;margin-bottom:32px}
.post-body{font-size:16px;line-height:2;color:var(--ink)}
.post-body h2{font-size:21px;font-weight:900;color:var(--green);margin:40px 0 16px}
.post-body h3{font-size:18px;font-weight:900;color:var(--green);margin:28px 0 12px}
.post-body p{margin:0 0 20px}
.post-body ul,.post-body ol{margin:0 0 20px;padding-left:1.4em}
.post-body li{margin-bottom:6px}
.post-body strong{color:var(--green-dark)}
.post-body hr{border:0;border-top:1px solid var(--line);margin:32px 0}

.post-nav{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0;margin:36px 0}
.post-nav a{font-size:14px;font-weight:700;max-width:48%}
.post-cta{background:var(--green-pale);border-radius:12px;padding:28px;display:flex;flex-direction:column;gap:16px}
.post-cta p{margin:0;font-size:15px;line-height:1.8}

@media (max-width:760px){
  .post-title{font-size:22px}
  .post-nav a{max-width:100%}
}