/*
Theme Name: STUDIO KAGUA Blog
Theme URI: https://studio.kagua.biz/blog/
Author: STUDIO KAGUA
Author URI: https://studio.kagua.biz/
Description: STUDIO KAGUAブログ用オリジナルテーマ。「仕事のこだわり」「制作事例」を、静かで上質な余白のあるレイアウトで届けます。ご提供いただいた記事一覧・記事本文の静的HTMLをベースに構築。
Version: 1.0.2
Requires at least: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: studio-kagua
*/

:root{
  --ground:#FBFAF7; --paper:#FFFFFF; --ink:#15140F; --mute:#8C897E;
  --line:#E6E3DA; --tile:#EFEDE5; --accent:#1F39C9;
  --jp:"Zen Kaku Gothic New",sans-serif; --en:"Archivo",sans-serif; --mc:"Shippori Mincho B1",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--ink);font-family:var(--jp);line-height:1.9;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:820px;margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:680px;margin:0 auto;padding:0 24px}

/* ===== header ===== */
header{border-bottom:1px solid var(--line);background:rgba(251,250,247,.9);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{font-family:var(--en);font-weight:800;font-size:19px;letter-spacing:.04em;display:flex;align-items:center;gap:9px;color:var(--ink)}
.brand i{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block}
.nav a.back,.nav a.home{font-size:13px;color:var(--mute);font-weight:500}
.nav a.back:hover,.nav a.home:hover{color:var(--ink)}

/* ===== hero (list/archive) ===== */
.bhead{padding:70px 0 40px;border-bottom:1px solid var(--line)}
.bhead .kick{font-family:var(--en);font-weight:700;font-size:13px;letter-spacing:.14em;color:var(--accent)}
.bhead h1{font-family:var(--mc);font-weight:800;font-size:clamp(28px,5vw,42px);line-height:1.35;margin:14px 0 12px}
.bhead p{color:var(--mute);font-size:15px;max-width:34em}

/* ===== category filter ===== */
.cats{display:flex;gap:10px;margin:26px 0 0;flex-wrap:wrap}
.cats span{font-size:12.5px;font-weight:700;padding:5px 13px;border:1px solid var(--line);border-radius:999px;color:var(--mute);display:inline-block}
.cats span a{color:inherit}
.cats span.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ===== post list ===== */
.list{padding:26px 0 80px}
.post{display:block;padding:26px 0;border-bottom:1px solid var(--line);transition:transform .2s}
.post:hover{transform:translateX(4px)}
.post .meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--mute);margin-bottom:9px}
.post .tag{font-weight:700;color:var(--accent);letter-spacing:.02em}
.post .tag.case{color:var(--ink)}
.post h2{font-family:var(--mc);font-weight:700;font-size:21px;line-height:1.5;margin-bottom:8px}
.post:hover h2{color:var(--accent)}
.post .ex{font-size:14px;color:#4a453d;line-height:1.8}

/* ===== pagination ===== */
.pager{display:flex;justify-content:center;gap:8px;padding:36px 0 0;flex-wrap:wrap}
.pager .page-numbers{font-size:13px;font-weight:600;color:var(--mute);border:1px solid var(--line);border-radius:6px;padding:8px 14px}
.pager .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pager .page-numbers:hover{color:var(--ink);border-color:var(--ink)}

/* ===== single article ===== */
article{padding:56px 0 20px}
.a-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--mute);margin-bottom:16px}
.a-meta .tag{font-weight:700;color:var(--accent)}
.a-meta .tag.case{color:var(--ink)}
article h1{font-family:var(--mc);font-weight:800;font-size:clamp(26px,4.5vw,36px);line-height:1.5;margin-bottom:30px}

.entry-content p{font-size:16px;line-height:2.05;margin-bottom:24px;color:#25211c}
.entry-content h2{font-family:var(--mc);font-weight:700;font-size:21px;line-height:1.6;margin:40px 0 16px;padding-top:6px}
.entry-content blockquote{border-left:3px solid var(--accent);background:#fff;padding:14px 20px;margin:28px 0;font-size:15px;color:#3a352d;border-radius:0 4px 4px 0}
.entry-content img{width:100%;height:auto;border-radius:6px;margin:28px 0}
.entry-content ul,.entry-content ol{margin:0 0 24px 1.2em}
.entry-content li{margin-bottom:8px}
.entry-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

.featured-image img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;margin:0 0 28px}

.sign{border-top:1px solid var(--line);margin-top:44px;padding-top:26px;font-size:14px;color:var(--mute)}
.sign b{color:var(--ink);font-weight:700}

.more{display:block;text-align:center;font-size:13px;color:var(--mute);padding:22px 0}
.more:hover{color:var(--ink)}

/* ===== footer CTA ===== */
.foot{border-top:1px solid var(--line);background:var(--tile);padding:44px 0}
.foot h3{font-family:var(--mc);font-weight:700;font-size:20px;margin-bottom:10px}
.foot p{color:var(--mute);font-size:14px;margin-bottom:18px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:700;font-size:14px;padding:12px 24px;border-radius:3px}
.btn:hover{background:#16299c}
.copy{padding:24px 0;font-size:12px;color:var(--mute);text-align:center}

@media (max-width:600px){
  .bhead{padding:48px 0 28px}
  article{padding:36px 0 10px}
}