/* --- Blog styles (scoped) --- */
:root {
  --blog-max: 72ch;
  --blog-accent: #0b5cff;
  --blog-muted: #6b7280;
  --blog-bg: #ffffff;
  --blog-card-bg: #fff;
  --blog-border: #e5e7eb;

   /* spacing scale */
  --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem;
  /* layout */
  --container: 1040px;
  /* colors */
  --ink:#111; --muted:#6b7280; --line:rgba(0,0,0,.1); --bg:#fff; --card:#fff;
  /* radius/shadow */
  --radius: 14px; --shadow: 0 6px 24px rgba(0,0,0,.06);
}

.blog-container {
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
  max-width: 1200px;
  background: var(--blog-bg);
  color: #111827;
  line-height: 1.7;
  font-size: 16px;
}

.blog-breadcrumbs {
  font-size: 0.9rem;
  color: var(--blog-muted);
  margin-bottom: 0.75rem;
}

.blog-breadcrumbs a { color: var(--blog-muted); text-decoration: none; }
.blog-breadcrumbs a:hover { text-decoration: underline; }

.blog-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--blog-border);
}

.blog-title {
  font-size: clamp(1.6rem, 2vw + 1rem, 2.2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

.blog-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.blog-search {
  width: min(320px, 50vw);
  border: 1px solid var(--blog-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.95rem;
  outline: none;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

@media (min-width: 700px) {
  .blog-grid { gap: 1.25rem; }
}

.blog-card {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  background: var(--blog-card-bg);
  border: 1px solid var(--blog-border);
  border-radius: 14px;
  overflow: hidden;
  transition: transform .16s ease, box-shadow .16s ease;
}

@media (min-width: 720px) {
  .blog-card { grid-column: span 6; }
}
@media (min-width: 1100px) {
  .blog-card { grid-column: span 4; }
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.blog-card a {
  color: inherit;
  text-decoration: none;
}

.blog-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #f3f4f6;
}

.blog-card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.blog-card-title {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.blog-card-meta {
  font-size: 0.85rem;
  color: var(--blog-muted);
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.blog-card-excerpt {
  font-size: 0.95rem;
  color: #374151;
}

.blog-empty {
  padding: 2rem;
  text-align: center;
  color: var(--blog-muted);
  border: 1px dashed var(--blog-border);
  border-radius: 12px;
}

/* --- Article page --- */
.article {
  margin: 0 auto;
  max-width: var(--blog-max);
}

.article-header {
  margin: 0 auto 1.25rem;
}

.article-title {
  font-size: clamp(1.8rem, 2.4vw + 1.2rem, 2.6rem);
  line-height: 1.15;
  margin: 0.25rem 0 0.75rem;
  letter-spacing: -0.015em;
}

.article-meta {
  font-size: 0.92rem;
  color: var(--blog-muted);
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.article-hero {
  margin: 1rem auto 1.5rem;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--blog-border);
}

.article-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.prose {
  font-size: 1.02rem;
}

.prose p { margin: 1em 0; }
.prose h2, .prose h3, .prose h4 {
  margin: 1.6em 0 0.6em;
  line-height: 1.25;
}
.prose h2 { font-size: 1.6rem; }
.prose h3 { font-size: 1.3rem; }
.prose h4 { font-size: 1.1rem; }
.prose a { color: var(--blog-accent); }
.prose blockquote {
  margin: 1.2em 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--blog-accent);
  background: #f9fafb;
  border-radius: 8px;
}
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.95em;
  background: #f3f4f6;
  padding: 0.15em 0.35em;
  border-radius: 6px;
}
.prose pre {
  background: #0b1020;
  color: #e5e7eb;
  padding: 1rem;
  overflow: auto;
  border-radius: 12px;
}
.prose figure {
  margin: 1.2em 0;
}
.prose figcaption {
  font-size: 0.9rem;
  color: var(--blog-muted);
  text-align: center;
  margin-top: 0.4rem;
}

/* --- Article footer --- */
.article-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--blog-border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.prev-next {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.prev-next a {
  border: 1px solid var(--blog-border);
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
}

.toc {
  border: 1px solid var(--blog-border);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  margin: 1rem 0 1.5rem;
}

.toc h3 {
  font-size: 1rem;
  margin: 0 0 0.5rem;
}

.toc ol {
  margin: 0;
  padding-left: 1rem;
  color: #374151;
}
.toc a { text-decoration: none; color: inherit; }
.toc a:hover { text-decoration: underline; }

/* Utility */
.hidden { display: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; clip: rect(0 0 0 0); overflow: hidden; }


html,body{margin:0;padding:0;background:var(--bg);color:var(--ink)}
/* fluid type: 16px → 18px (sm) → 20px (lg) */
html{ font-size: clamp(15px, 1.2vw + 12px, 20px); }
body{
  font-family: system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans JP", sans-serif;
  line-height: 1.65;
}

.container, .bo-container{
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--s-4);
}

/* headings */
h1,h2,h3{ line-height:1.25; margin: 0 0 var(--s-4) }
h1{ font-size: clamp(1.6rem, 2.8vw, 2.2rem) }
h2{ font-size: clamp(1.3rem, 2.2vw, 1.8rem) }
h3{ font-size: clamp(1.1rem, 1.8vw, 1.4rem) }

p{ margin: .6em 0 }
.small{ font-size: .875rem; color: var(--muted) }



.grid{
  display:grid; grid-template-columns:1fr; gap: var(--s-4);
}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.card__body{ padding: var(--s-4) }
.card__title{ font-weight:600; margin: 0 0 .25rem }
.card__meta{ color:var(--muted); font-size:.9rem; margin-top:.25rem }

@media (min-width:600px){
  .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:900px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}


.thumb{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block }




/* header layout (共通) */
header{ position:relative; z-index:10; }
#menubar{ transition: max-height .25s ease, opacity .2s ease; }

/* モバイル: 折りたたみ */
@media (max-width:900px){
  #menubar{ 
    max-height: 0; opacity:.0; overflow:hidden; 
    background:#fff; border-top:1px solid var(--line);
  }
  /* JSが .open を付けたら展開（main.jsの挙動に合わせてクラス名は両対応） */
  #menubar.open, #menubar.active{ max-height: 80vh; opacity:1; }
  #menubar_hdr{
    display:flex; gap:8px; align-items:center; cursor:pointer;
    width:44px; height:36px; margin: var(--s-4); 
  }
  #menubar_hdr span{
    flex:1 0 0; height:2px; background:#333; border-radius:2px;
  }
  /* メニューリスト（縦積み） */
  #menubar nav ul{ list-style:none; margin:0; padding: var(--s-2) var(--s-4); }
  #menubar nav li{ border-bottom:1px solid var(--line) }
  #menubar nav a{ display:block; padding: .9rem .4rem; color:inherit; text-decoration:none }
}

/* PC: 横並び */
@media (min-width:901px){
  #menubar_hdr{ display:none }
  #menubar{ max-height:none; opacity:1 }
  #menubar nav ul{ display:flex; gap: 1.2rem; align-items:center; list-style:none; margin:0; padding:0 }
  #menubar nav a{ text-decoration:none; padding:.75rem .25rem; color:inherit }
  #menubar nav li ul{ display:none; position:absolute } /* 必要に応じて */
}



/* tables */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table{ width:100%; border-collapse:collapse; font-size:.95rem }
.table th,.table td{ padding:.6rem .8rem; border-bottom:1px solid var(--line) }
.table th{ white-space:nowrap; text-align:left }

/* forms */
input[type="text"],input[type="search"],select,textarea{
  width:100%; font:inherit; padding:.7rem .9rem;
  border:1px solid var(--line); border-radius:12px;
}
button,.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:999px; border:1px solid transparent;
  background:#0f766e; color:#fff; cursor:pointer;
}




.section{ padding-block: var(--s-8) }
.section--alt{ background: #f8fafc }
.stack>*+*{ margin-top: var(--s-4) }     /* 縦積みの間隔 */
.cluster{ display:flex; flex-wrap:wrap; gap: var(--s-3) } /* 水平の並び */



@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none!important; transition: none!important; }
}