@charset "UTF-8";
/*
  spia-net.com オリジナルデザイン
  Cocoon標準のscreen.css / スキンCSSは読み込みを止めているため（functions.php参照）、
  レイアウトに必要な最低限のスタイルをここに全て記述しています。

  【要確認】the_content() 内でCocoon標準機能が出力する下記要素は、
  実際のクラス名を本番で確認のうえ、該当セレクタを調整してください：
  - 目次ボックス（.toc-box 等を想定）
  - ブログカード（.blogcard 等を想定）
*/

:root{
  --bg:#FAF8F4;
  --card:#FFFFFF;
  --ink:#24272B;
  --ink-muted:#767B85;
  --ink-faint:#A7ACB5;
  --line:#E7E2D8;
  --accent:#2F4858;
  --accent-warm:#B9863C;
  --accent-warm-bg:#F6EEDE;
  --radius:10px;
  --measure:700px;
}

*{ box-sizing:border-box; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Zen Kaku Gothic New','Noto Sans JP',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  margin:0;
}

a{ color:var(--accent); text-decoration:none; }
img{ max-width:100%; height:auto; display:block; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--accent); color:#fff; padding:10px 16px; z-index:100;
}
.skip-link:focus{ left:12px; top:12px; }

/* ===== Header ===== */
.site-header{
  background:var(--card);
  border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.header-in{
  max-width:1080px; margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.logo a{
  font-family:'Shippori Mincho',serif;
  font-weight:700; font-size:22px; color:var(--ink); letter-spacing:0.02em;
}

.primary-nav .nav-list{
  display:flex; gap:4px; margin:0; padding:0; list-style:none;
}
.primary-nav .nav-list a{
  position:relative; display:block; padding:8px 14px;
  font-size:14px; font-weight:500; color:var(--ink); border-radius:6px;
  transition:color .15s ease, background .15s ease;
}
.primary-nav .nav-list a:hover{ background:var(--accent-warm-bg); color:var(--accent-warm); }
.primary-nav .nav-list li.current-menu-item > a,
.primary-nav .nav-list li.current-menu-parent > a{
  color:var(--accent); font-weight:700;
}
.primary-nav .nav-list li.current-menu-item > a::after,
.primary-nav .nav-list li.current-menu-parent > a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px;
  height:2px; background:var(--accent); border-radius:2px;
}

.header-icons{ display:flex; align-items:center; gap:14px; }
.hamburger{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:36px; height:36px; border:none; background:none; cursor:pointer; padding:0;
}
.hamburger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; }
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{ display:none; }
.mobile-nav .nav-list{ list-style:none; margin:0; padding:6px 24px 14px; }
.mobile-nav .nav-list a{ display:block; padding:12px 4px; font-size:15px; color:var(--ink); border-bottom:1px solid var(--line); }
.mobile-nav .nav-list li.current-menu-item > a{ color:var(--accent); font-weight:700; }

@media (max-width:860px){
  .primary-nav{ display:none; }
  .hamburger{ display:flex; }
  .mobile-nav[hidden]{ display:none; }
  .mobile-nav:not([hidden]){ display:block; border-top:1px solid var(--line); }
}

/* ===== Article shell ===== */
#container{ max-width:var(--measure); margin:0 auto; padding:0 24px 80px; }

.breadcrumb{ font-size:12px; color:var(--ink-faint); padding:20px 0 0; list-style:none; margin:0; display:flex; flex-wrap:wrap; gap:4px; }
.breadcrumb-home, .breadcrumb-item{ display:inline-flex; align-items:center; gap:4px; }
.breadcrumb a{ color:var(--ink-faint); }
.breadcrumb a:hover{ color:var(--accent); }
.breadcrumb .fa{ font-size:11px; }

.category-pill{
  display:inline-block; margin-top:22px; padding:4px 12px;
  font-size:12px; font-weight:700; letter-spacing:0.04em;
  color:var(--accent); background:#EAF0EF; border-radius:100px;
}

.article-title{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(26px,4.2vw,36px); font-weight:700; line-height:1.5;
  margin:14px 0 18px; color:var(--ink);
}

.article-meta{
  display:flex; align-items:center; gap:14px;
  font-size:13px; color:var(--ink-muted);
  padding-bottom:24px; border-bottom:1px solid var(--line);
}
.author-avatar{ border-radius:50%; }

.eyecatch{ margin:28px 0; border-radius:14px; overflow:hidden; }
.eyecatch img{ width:100%; }

/* ===== the_content() 内の要素 ===== */
.article-body{ font-size:16.5px; color:var(--ink); }
.article-body p{ margin:0 0 26px; }
.article-body h2{
  font-family:'Shippori Mincho',serif; font-size:23px; font-weight:700;
  margin:52px 0 20px; padding-left:16px; border-left:4px solid var(--accent); line-height:1.5;
}
.article-body h3{ font-size:18px; font-weight:700; margin:38px 0 16px; color:var(--ink); }
.article-body ul, .article-body ol{ margin:0 0 26px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body blockquote{
  margin:32px 0; padding:18px 22px; background:var(--accent-warm-bg);
  border-left:4px solid var(--accent-warm); border-radius:0 8px 8px 0;
  font-size:15px; color:#5B4526;
}
.article-body code{ background:#F0EEE8; padding:2px 6px; border-radius:4px; font-size:0.9em; }
.article-body table{ width:100%; border-collapse:collapse; margin:0 0 26px; }
.article-body th, .article-body td{ border:1px solid var(--line); padding:10px 12px; font-size:14.5px; }
.article-body figure{ margin:28px 0; }

/* 目次ボックス（要確認：実際のクラス名に合わせて調整） */
.article-body .toc-box, .article-body #toc{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; margin:0 0 36px;
}
.article-body .toc-box ol, .article-body #toc ol{ font-size:14px; color:var(--ink-muted); }

/* ブログカード（要確認：実際のクラス名に合わせて調整） */
.article-body .blogcard{
  border:1px solid var(--line) !important; border-radius:var(--radius) !important;
}

/* ===== Author box ===== */
.author-box{
  margin-top:60px; padding:28px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius);
  display:flex; gap:18px; align-items:flex-start;
}
.author-box .avatar{ border-radius:50%; flex-shrink:0; }
.author-box h4{ margin:0 0 6px; font-size:15px; }
.author-box p{ margin:0; font-size:13px; color:var(--ink-muted); line-height:1.8; }

/* ===== Related ===== */
.related{ margin-top:60px; }
.related h3{ font-size:16px; margin-bottom:18px; }
.related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; }
.related-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:block; }
.related-card .thumb{ aspect-ratio:16/9; background:linear-gradient(135deg,#E5E9E3,#EFE9DC); }
.related-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.related-card .txt{ padding:12px 14px; }
.related-card .cat{ font-size:11px; color:var(--accent); font-weight:700; }
.related-card h4{ font-size:13.5px; margin:6px 0 0; line-height:1.6; color:var(--ink); font-weight:500; }

/* ===== Archive header ===== */
.archive-header{ padding:24px 0 8px; }
.archive-icon{ font-size:15px; margin-right:6px; }
.archive-title{
  font-family:'Shippori Mincho',serif; font-size:clamp(22px,5vw,28px); font-weight:700;
  display:inline; color:var(--ink);
}
.archive-desc{ margin-top:10px; font-size:13.5px; color:var(--ink-muted); line-height:1.8; }

/* ===== Entry list (archive/category/search/home) ===== */
.entry-list{ display:flex; flex-direction:column; gap:16px; margin:24px 0 40px; }

.entry-card{
  display:flex; gap:18px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:14px; text-decoration:none; color:inherit;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.entry-card:hover{ border-color:var(--accent); box-shadow:0 6px 20px rgba(47,72,88,.08); transform:translateY(-1px); }

.entry-thumb{
  flex:0 0 200px; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:#EFEAE0;
}
.entry-thumb img{ width:100%; height:100%; object-fit:cover; }
.entry-thumb-fallback{ width:100%; height:100%; background:linear-gradient(135deg,#E5E9E3,#EFE9DC); }

.entry-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.entry-cat{
  align-self:flex-start; font-size:11px; font-weight:700; letter-spacing:.03em;
  color:var(--accent); background:#EAF0EF; border-radius:100px; padding:3px 10px; margin-bottom:8px;
}
.entry-title{
  font-size:16px; font-weight:700; line-height:1.5; margin:0 0 8px; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.entry-excerpt{
  font-size:13px; color:var(--ink-muted); line-height:1.7; margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.entry-date{ font-size:11.5px; color:var(--ink-faint); margin-top:auto; }

@media (max-width:560px){
  .entry-card{ flex-direction:column; }
  .entry-thumb{ flex-basis:auto; width:100%; aspect-ratio:16/9; }
}

.archive-pagination{ display:flex; justify-content:center; gap:10px; margin:20px 0 60px; font-size:13px; }
.archive-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:34px; padding:0 10px; border-radius:8px;
  border:1px solid var(--line); color:var(--ink-muted); background:var(--card);
}
.archive-pagination .page-numbers.current{ background:var(--accent); border-color:var(--accent); color:#fff; }
.archive-pagination a.page-numbers:hover{ border-color:var(--accent); color:var(--accent); }

.entry-empty{ color:var(--ink-muted); padding:40px 0; text-align:center; }

/* ===== 404 ===== */
.error-404-wrap{ text-align:center; padding:60px 0 100px; }
.error-code{
  font-family:'Orbitron','Shippori Mincho',serif; font-size:64px; font-weight:900;
  color:var(--line); margin:0 0 10px; letter-spacing:.05em;
}
.error-404-wrap .article-title{ margin:0 0 14px; }
.error-desc{ color:var(--ink-muted); font-size:14px; line-height:1.8; max-width:420px; margin:0 auto 28px; }
.error-search{ display:flex; gap:8px; max-width:340px; margin:0 auto 24px; }
.error-search input{
  flex:1; padding:10px 14px; border:1px solid var(--line); border-radius:8px;
  font-size:14px; background:var(--card); color:var(--ink);
}
.error-search button{
  padding:10px 18px; border:none; border-radius:8px; background:var(--accent);
  color:#fff; font-size:14px; cursor:pointer;
}
.error-home-link{
  display:inline-block; font-size:13.5px; color:var(--accent); border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}

.site-footer{ border-top:1px solid var(--line); margin-top:80px; }
.site-footer-in{ max-width:1080px; margin:0 auto; padding:36px 24px; text-align:center; }
.footer-logo{ font-family:'Shippori Mincho',serif; font-weight:700; font-size:16px; margin-bottom:10px; }
.footer-nav .nav-list{ list-style:none; display:flex; justify-content:center; gap:16px; margin:0 0 14px; padding:0; flex-wrap:wrap; }
.footer-nav .nav-list a{ font-size:12.5px; color:var(--ink-muted); }
.footer-copyright{ font-size:12px; color:var(--ink-faint); margin:0; }