/* =============================
  FILE: css/style.css
  Junior Sunshine Plus - Base Theme
============================= */

/* =============================
  VARIABLES & BASE
============================= */
:root{
  --bg:#ffffff;
  --text:#222;
  --muted:#6b7280;          /* グレー */
  --line:#e5e7eb;           /* 枠線 */
  --accent:#2EC8D0;         /* 水色（ロゴ合わせ） */
  --accent-yl:#FFD873;      /* やさしい黄 */
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --radius:16px;
  --radius-sm:12px;
}

html { box-sizing: border-box; scroll-behavior:smooth; }
*, *::before, *::after { box-sizing: inherit; }

body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"Noto Sans JP", system-ui, -apple-system, Segoe UI, Roboto, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  line-height:1.85; font-size:16px;
}
img{max-width:100%; height:auto; vertical-align:bottom;}

/* =============================
  LAYOUT
  - Container
  - Header
  - Hero
============================= */
.container{
  width:min(1000px, calc(100% - 32px));
  margin-inline:auto; margin-left:auto; margin-right:auto;
}
.container--fit{
  width:min(1000px, calc(100% - 32px));
  margin:0 auto; text-align:center;
}

/* 背景ドット（装飾） */
.bg-dot{
  position:fixed; inset:auto -80px -80px auto; width:320px; height:320px;
  background: radial-gradient(circle at 1px 1px, var(--accent-yl) 1px, transparent 1.5px) 0 0/12px 12px;
  opacity:.35; filter:blur(.2px); z-index:-1; border-radius:50%;
}

/* Header */
.site-header{
  position: static; width: 100%;
  background:#fff; border-bottom:1px solid var(--line);
  text-align:center; padding:0;
}
.site-header .brand img{
  display:block; width:100%; height:auto; margin:0 auto;
}

/* Hero */
.hero{padding:18px 0 6px}
.hero-figure{position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow);}
.hero-img-full{display:block; width:100%; height:auto;}
.hero-caption{display:none}

/* =============================
  BREADCRUMB
============================= */
.breadcrumb{
  position: sticky;
  top: 0;
  z-index: 9;
  background:#f9fafb;             /* ← フッターと統一 */
  border-bottom:1px solid var(--line);
  font-size:0.88em;
}
.breadcrumb .container{ padding:8px 0; }
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:6px;
}
.breadcrumb li{ color:var(--muted); }
.breadcrumb li+li::before{
  content:"›";
  margin:0 6px; color:var(--muted);
}
.breadcrumb a{
  color:var(--accent);
  text-decoration:none;
}
.breadcrumb a:hover{ text-decoration:underline; }

/* =============================
  ARTICLE BODY
============================= */
.article{padding:28px 0 60px}
.prose{font-size:18px}

/* 字下げ */
.prose p{ text-indent:1em; }
.prose .no-indent{ text-indent:0; }

/* リード */
.lead{
  font-size:1.05em; color:#333; border-left:4px solid var(--accent);
  padding:12px 14px; background:#f9fafa; border-radius:8px
}

/* 見出し */
.prose h2{
  margin-top:2.2em; font-size:28px; line-height:1.4;
  padding-bottom:.3em; border-bottom:4px solid var(--accent)
}
.prose h3{margin-top:1.6em; font-size:22px; line-height:1.5; font-weight:800; color:#111}
.prose h2 + p, .prose h3 + p{ text-indent:0; }

/* 強調 */
.highlight{background:linear-gradient(transparent 60%, rgba(46,200,208,.35) 0)}

/* リンク */
.article a, .site-footer a{ color: var(--accent); text-decoration: underline; }
a:focus-visible{ outline:3px solid rgba(46,200,208,.5); outline-offset:2px; border-radius:6px; }

/* 図版 */
.figure{
  margin:26px 0; border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden; background:#fff; box-shadow:var(--shadow)
}
.figure img{display:block}
.figure figcaption{padding:8px 10px; font-size:.85em; color:var(--muted); background:none; text-align:center}
.figure.figure--plain{border:0; box-shadow:none}

/* Split：テキスト＋図 横並び */
.split{display:grid; grid-template-columns:1.25fr 1fr; gap:24px; align-items:start}
.split-figure{margin:0}
.split-figure img{
  width: clamp(220px, 38vw, 420px); height:auto; object-fit:contain;
  display:block; margin:0 auto;
}

/* Figure-row：画像2点 横並び */
.figure-row{
  display:flex; gap:24px; justify-content:space-between; align-items:center; margin:26px 0;
}
.figure-row .figure{
  flex:1; margin:0; display:flex; flex-direction:column; align-items:center; min-width:0;
}
.figure-row .figure img{ max-width:100%; max-height:520px; object-fit:contain; }
.figure-row .figure figcaption{ margin-top:8px; text-align:center; }

/* =============================
  COMPONENTS
============================= */
.summary{
  margin:36px 0; padding:18px 20px; border-radius:14px; border:1px solid var(--line);
  background:#FFF7D6
}
.summary-title{margin:0 0 .4em; font-size:22px; font-weight:900}
.summary .download .arrow{ color: var(--accent); font-weight:700; }

@counter-style circled-num{
  system: fixed;
  symbols: ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿ ⓫ ⓬ ⓭ ⓮ ⓯ ⓰ ⓱ ⓲ ⓳ ⓴;
  suffix: " ";
}
.summary ol{ list-style:none; counter-reset:step; padding-left:0; margin-left:0; }
.summary ol li{ counter-increment:step; margin:.6em 0; padding-left:1.6em; position:relative; }
.summary ol li::before{
  content: counter(step, circled-num);
  position:absolute; left:0; top:0; font-size:1.05em; color:var(--accent);
}

.references{font-size:.92em; color:#374151}
.references ul{padding-left:1.2em}

.article-nav{display:flex; justify-content:space-between; gap:14px; margin-top:28px}
.article-nav a{
  display:inline-block; text-decoration:none; color:#111;
  padding:10px 14px; border:1px solid var(--line); border-radius:999px
}
.article-nav a:hover{border-color:var(--accent); box-shadow:0 0 0 4px rgba(46,200,208,.12)}
.article-nav a.disabled{ color:var(--muted); border-color:var(--line); pointer-events:none; opacity:.6; cursor:default; }

.divider{border:0; height:1px; background:linear-gradient(90deg, var(--line), transparent)}

/* =============================
  FOOTER
============================= */
.site-footer{
  border-top:1px solid var(--line);
  background:#f9fafb;            /* ← パンくずと統一 */
  text-align:center;
}
.site-footer .container{padding:20px 0; color:#6b7280; font-size:.9em}
.site-footer a{text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.wb{ word-break: break-word; overflow-wrap: anywhere; }

/* =============================
  ACCESSIBILITY & UTILITIES
============================= */
.visually-hidden{
  position:absolute!important; height:1px; width:1px; overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px); white-space:nowrap
}

/* =============================
  RESPONSIVE & PRINT
============================= */
@media (max-width: 900px){
  .split{ grid-template-columns:1fr; }
  .split-figure{ margin:16px 0; }
  .split-figure img{ width: clamp(200px, 80vw, 360px); }

  .figure-row{ flex-direction:column; }
  .figure-row .figure{ width:100%; }
  .figure-row .figure img{ max-height:none; }
}

@media (max-width:600px){ .prose{font-size:17px} }

@media (max-width:360px){
  .container, .container--fit{ width: calc(100% - 24px); }
}

@media print{
  .site-header,.article-nav,.bg-dot{display:none}
  body{color:#000}
  .figure{box-shadow:none}
  .summary{ background:#fff }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:0.9em; }
}

/* =============================
  LIST / CARDS (Index page)
============================= */
.card-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* 2列 */
  gap:24px;
}

/* もっと見る内のグリッドも同じ見た目 */
.card-grid--more{
  margin-top:16px;
}

@media (max-width: 900px){
  .card-grid{ grid-template-columns: 1fr; } /* 1列に */
}

.card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}

.card-link{
  display:block;
  color:inherit;
  text-decoration:none;
}

.card-thumb img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16 / 9;   /* サムネ比率を統一（任意） */
  object-fit: cover;      /* 画像のトリミングで統一感 */
}

.card-body{
  padding:14px 14px 16px;
}
.card-title{
  font-size: clamp(18px, 2.2vw, 20px);
  line-height:1.5;
  margin: 2px 0 6px;
  font-weight: 800;
}
.card-meta{
  margin:0 0 8px;
  font-size:.9em;
  color: var(--muted);
}
.card-lead{
  margin:0;
  font-size: .95em;
  color:#374151;
  text-indent: 0; /* リード文は字下げなし */
}

/* もっと見る（details/summary） */
.more-section details{
  margin-top: 20px;
  border:1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
}
.more-section summary{
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color:#0a6165;
}
.more-section summary::-webkit-details-marker{ display:none; }
.more-section summary::before{
  content:"＋";
  margin-right:.4em;
  color: var(--accent);
  font-weight:900;
}
.more-section details[open] summary::before{
  content:"－";
}