/* 読みもの（/articles 配下）の共通スタイル。色・フォント・ヘッダー/フッターは index.html に合わせる */
:root {
  --paper: #f0f7ff;
  --paper-deep: #e3eefb;
  --card: #ffffff;
  --ink: #28324d;
  --ink-soft: #69707d;
  --terra: #5b8def;
  --terra-deep: #3f6fd6;
  --mustard: #bcd6f7;
  --line: #dbe4f1;
  --shadow: 30, 41, 59;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-x: hidden; }
body {
  font-family: 'Zen Maru Gothic', sans-serif;
  background-color: var(--paper);
  color: var(--ink);
  line-height: 1.85;
  overflow-x: hidden;
}
a { color: inherit; }
.ni { width: 1.25em; height: 1.25em; vertical-align: -0.28em; display: inline-block; }

/* ---------- nav（index.html と同じ見た目） ---------- */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(16px, 5vw, 56px); max-width: 1160px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 900; font-size: 1.3rem; letter-spacing: .02em; text-decoration: none; }
.brand img { width: 40px; height: 40px; border-radius: 12px; background: #fff; padding: 3px; box-shadow: 2px 3px 0 rgba(var(--shadow),.16); }
.nav-links { display: flex; gap: 22px; align-items: center; font-size: .94rem; font-weight: 500; }
.nav-links a { color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover { color: var(--terra-deep); }
.nav-cta {
  background: var(--ink); color: var(--paper) !important; padding: 9px 20px; border-radius: 40px;
  font-weight: 700; box-shadow: 2px 3px 0 rgba(var(--shadow), .3); text-decoration: none;
}

/* ---------- 本文の枠 ---------- */
main { max-width: 760px; margin: 0 auto; padding: 8px 16px 72px; }
.crumbs { font-size: .82rem; color: var(--ink-soft); margin-bottom: 18px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li + li::before { content: '›'; margin: 0 6px 0 2px; color: var(--line); }
.crumbs a { text-decoration: none; color: var(--terra-deep); }
.eyebrow { font-family: 'Klee One', cursive; color: var(--terra-deep); font-weight: 600; font-size: 1rem; display: inline-block; margin-bottom: 8px; }
h1 { font-size: clamp(1.5rem, 4.4vw, 2.1rem); font-weight: 900; line-height: 1.4; margin-bottom: 14px; }
.meta { font-size: .82rem; color: var(--ink-soft); margin-bottom: 26px; }

/* ---------- 記事本文 ---------- */
.article { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(22px, 5vw, 44px);
  box-shadow: 0 10px 0 -2px var(--paper-deep), 0 14px 30px rgba(var(--shadow),.08); }
.article h2 { font-size: clamp(1.2rem, 3.4vw, 1.45rem); font-weight: 900; line-height: 1.5; margin: 44px 0 14px; padding-left: 14px; border-left: 5px solid var(--terra); }
.article h2:first-child { margin-top: 0; }
.article h3 { font-size: 1.08rem; font-weight: 700; margin: 26px 0 8px; }
.article p { margin-bottom: 1.1em; }
.article ul, .article ol { margin: 0 0 1.2em 1.4em; }
.article li { margin-bottom: .35em; }
.article a { color: var(--terra-deep); text-underline-offset: 3px; }
.article .note { font-size: .88rem; color: var(--ink-soft); }
.memo-sample { background: var(--paper); border: 2px dashed var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 1.4em; font-size: .94rem; }
.memo-sample .lbl { font-family: 'Klee One', cursive; color: var(--terra-deep); font-weight: 600; margin-bottom: 6px; }
.memo-sample ul { margin-bottom: 0; }
.table-wrap { overflow-x: auto; margin-bottom: 1.4em; }
.article table { border-collapse: collapse; width: 100%; font-size: .9rem; min-width: 460px; }
.article th, .article td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.article th { background: var(--paper); font-weight: 700; }

/* ---------- アプリ紹介と出典 ---------- */
.app-box { background: var(--paper-deep); border-radius: 18px; padding: 22px 20px; margin: 10px 0 1.4em; }
.app-box .cta-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper) !important;
  padding: 11px 18px 11px 15px; border-radius: 14px; text-decoration: none; font-weight: 700; font-size: .95rem;
  box-shadow: 3px 4px 0 rgba(var(--shadow),.28);
}
.store-badge svg { width: 22px; height: 22px; fill: var(--paper); }
.sources { border-top: 2px dashed var(--line); margin-top: 40px; padding-top: 20px; font-size: .86rem; }
.sources h2 { border-left: none; padding-left: 0; margin-top: 0; font-size: 1.05rem; }
.sources li { word-break: break-all; }

/* ---------- 一覧 ---------- */
.list-lead { color: var(--ink-soft); margin-bottom: 26px; }
.article-list { list-style: none; display: grid; gap: 18px; }
.article-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 22px 22px 20px; text-decoration: none;
  box-shadow: 0 8px 0 -2px var(--paper-deep), 0 12px 26px rgba(var(--shadow),.08); transition: transform .25s; }
.article-card:hover { transform: translateY(-4px); }
.article-card .tag { font-family: 'Klee One', cursive; color: var(--terra-deep); font-weight: 600; font-size: .9rem; display: flex; align-items: center; gap: 6px; }
.article-card h2 { font-size: 1.15rem; font-weight: 900; line-height: 1.5; margin: 6px 0 8px; }
.article-card p { font-size: .9rem; color: var(--ink-soft); }
.article-card time { display: block; font-size: .78rem; color: var(--ink-soft); margin-top: 10px; }

/* ---------- footer（index.html と同じ見た目） ---------- */
footer { background: var(--ink); color: #aeb9cc; padding: 44px 20px 52px; text-align: center; font-size: .86rem; }
footer .brand { justify-content: center; color: var(--paper); margin-bottom: 14px; }
footer .fl { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 12px 0; }
footer .fl a { color: #c4cfe2; text-decoration: none; }
footer .fl a:hover { color: var(--paper); }
footer .company { margin-top: 14px; font-size: .78rem; color: #7c889e; }

@media (max-width: 600px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .brand { font-size: 1.15rem; }
  .brand img { width: 34px; height: 34px; }
  .nav-cta { padding: 8px 14px; font-size: .86rem; }
  .article { padding: 22px 16px; }
  .article table { min-width: 0; font-size: .8rem; }
  .article th, .article td { padding: 6px 6px; }
}