/* LDATコンサルティング — ロゴの緑とベージュをもとにしたスタイル（mydatajapan.org のスタイルを土台にしたもの）。
   JavaScript・外部フォントは使わない */
:root {
  --green: #3f8a2a;       /* 文字・ボタン用の緑（ロゴの緑 #63b243 を白地で読める濃さにしたもの） */
  --green-deep: #2c6420;
  --green-logo: #63b243;
  --green-soft: #eef6ea;
  --beige: #d2b273;       /* ロゴのベージュ */
  --beige-soft: #faf5ea;
  --ink: #23261f;
  --text: #3a3d37;
  --muted: #676b63;
  --line: #e3e6df;
  --bg: #ffffff;
  --bg-soft: #f6f7f4;
  --radius: 8px;
  --max: 1120px;
  --narrow: 820px;
  --shadow: 0 1px 2px rgba(35, 38, 31, .06), 0 8px 24px rgba(35, 38, 31, .06);
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, system-ui, -apple-system, sans-serif;
  --font-en: "Helvetica Neue", "Segoe UI", Arial, var(--font);
}

/* ───────── base ───────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; -webkit-tap-highlight-color: rgba(63, 138, 42, .15); }
body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.85; font-size: 16px; letter-spacing: .02em; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--beige); outline-offset: 2px; }
/* 見出しは文節で折り返す（対応ブラウザのみ） */
h1, h2, h3, h4 { color: var(--ink); line-height: 1.45; font-feature-settings: "palt"; letter-spacing: .04em; word-break: auto-phrase; }
/* iPhone を横にしたときにノッチ（切り欠き）へ文字がかからないよう、左右の安全領域を確保する */
.container { max-width: var(--max); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
.container.narrow { max-width: calc(var(--narrow) + 48px); }
.section { padding-top: 64px; padding-bottom: 64px; }
.section-soft { background: var(--bg-soft); border-top: 1px solid var(--line); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 10; background: #fff; padding: 8px 12px; }
.empty, .note { color: var(--muted); }
.note { font-size: 14px; }

.eyebrow { margin: 0 0 6px; font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #8a6d2c; }

/* ───────── buttons ───────── */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 26px; border-radius: 999px; border: 1.5px solid var(--green); background: var(--green); color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.4; letter-spacing: .06em; transition: background .15s, color .15s, border-color .15s; }
.button:hover { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
.button-ghost { background: transparent; color: var(--green); }
.button-ghost:hover { background: var(--green-soft); color: var(--green-deep); border-color: var(--green-deep); }
/* 本文の {.buttons}（旧サイトのボタン） */
.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 28px; }
.prose .buttons .button { color: #fff; text-decoration: none; }

/* ───────── preview ───────── */
.preview-bar { background: #b4541a; color: #fff; text-align: center; font-size: 13px; padding: 6px 12px; font-weight: 600; }
.review-box { border: 2px dashed #b4541a; background: #fff7f2; border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; font-size: 14px; }
.review-box ul { margin: 6px 0 0; padding-left: 1.2em; }

/* ───────── header ───────── */
.site-header { position: relative; z-index: 5; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--line); }
/* 画面に余裕があるときだけヘッダーを上に固定する */
@media (min-width: 761px) and (min-height: 600px) { .site-header { position: sticky; top: 0; } }
.header-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; color: var(--ink); text-decoration: none; }
.logo img { width: 48px; height: auto; }
.logo-text { font-weight: 700; font-size: 17px; letter-spacing: .04em; white-space: nowrap; }
.logo:hover { color: var(--green); }
.global-nav { margin-left: auto; }
.global-nav ul { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0; list-style: none; margin: 0; padding: 0; }
.global-nav a { position: relative; display: block; padding: 8px 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14.5px; letter-spacing: .04em; white-space: nowrap; }
.global-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; background: var(--green-logo); transform: scaleX(0); transition: transform .2s; }
.global-nav a:hover { color: var(--green); }
.global-nav a:hover::after, .global-nav a[aria-current="page"]::after { transform: scaleX(1); }
.global-nav a[aria-current="page"] { color: var(--green); }

@media (max-width: 1060px) {
  .header-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 10px; }
  .global-nav { flex-basis: 100%; margin: 4px -10px 4px; }
  .global-nav ul { justify-content: flex-start; }
}

/* スマホ用のメニュー（JavaScript を使わず details で開閉する） */
.menu { display: none; }
@media (max-width: 760px) {
  .header-inner { flex-wrap: nowrap; min-height: 64px; padding-top: 0; gap: 12px; }
  .logo img { width: 40px; }
  .logo-text { font-size: 15px; }
  .global-nav { display: none; }
  .menu { display: block; margin-left: auto; }
  .menu summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px 0 8px; list-style: none; cursor: pointer; color: var(--green-deep); font-size: 12px; font-weight: 700; white-space: nowrap; }
  .menu summary::-webkit-details-marker { display: none; }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 20px; height: 2px; border-radius: 1px; background: var(--green-deep); transition: transform .2s, background .2s; }
  .menu-icon { position: relative; }
  .menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; }
  .menu-icon::before { top: -6px; }
  .menu-icon::after { top: 6px; }
  .menu[open] .menu-icon { background: transparent; }
  .menu[open] .menu-icon::before { transform: translateY(6px) rotate(45deg); }
  .menu[open] .menu-icon::after { transform: translateY(-6px) rotate(-45deg); }
  .menu-panel { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(35, 38, 31, .12); padding: 8px max(18px, env(safe-area-inset-right)) 20px max(18px, env(safe-area-inset-left)); max-height: calc(100vh - 64px); overflow-y: auto; }
  .menu-panel ul { list-style: none; margin: 0; padding: 0; }
  .menu-panel a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 16px; }
  .menu-panel a::after { content: "→"; color: var(--muted); font-weight: 400; }
  .menu-panel a[aria-current="page"] { color: var(--green); }
}
@media (max-width: 380px) {
  /* 狭い画面ではアイコンだけにする（読み上げでは「メニュー」と伝わる） */
  .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ───────── page header ───────── */
.page-header { background: linear-gradient(180deg, var(--green-soft), var(--bg-soft)); border-bottom: 1px solid var(--line); padding: 28px 0 44px; }
.page-header h1 { font-size: clamp(22px, 3.2vw, 34px); margin: 0; max-width: 900px; }
.page-header .lead { margin: 14px 0 0; max-width: 760px; color: var(--muted); font-size: 15.5px; }
.page-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; font-size: 14px; color: var(--muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 0; margin: 0 0 24px; font-size: 12px; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; margin: 0 10px; color: #b7bbb2; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--green); text-decoration: underline; }
.breadcrumb li[aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40em; }

/* ───────── hero (home) ───────── */
.hero { background: linear-gradient(135deg, var(--green-soft) 0%, #fff 55%, var(--beige-soft) 100%); border-bottom: 1px solid var(--line); }
.hero-inner { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: center; gap: 48px; padding-top: 64px; padding-bottom: 64px; }
.hero-logo { width: 220px; height: auto; }
.hero h1 { font-size: clamp(28px, 4vw, 42px); margin: 0; letter-spacing: .06em; }
.hero-owner { margin: 12px 0 0; color: var(--muted); font-size: 15px; }
/* タイトルの右の写真（src/site.yml の ownerPhoto） */
.hero-inner:has(.hero-photo) { grid-template-columns: 200px minmax(0, 1fr) 220px; gap: 40px; }
.hero-inner:has(.hero-photo) .hero-logo { width: 200px; }
.hero-photo { width: 220px; height: auto; aspect-ratio: 480 / 497; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); background: #fff; justify-self: end; }
@media (max-width: 960px) {
  .hero-inner:has(.hero-photo) { grid-template-columns: 150px minmax(0, 1fr) 160px; gap: 28px; }
  .hero-inner:has(.hero-photo) .hero-logo { width: 150px; }
  .hero-photo { width: 160px; }
}
@media (max-width: 760px) {
  .hero-inner, .hero-inner:has(.hero-photo) { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 40px; padding-bottom: 40px; }
  .hero-logo, .hero-inner:has(.hero-photo) .hero-logo { width: 140px; }
  /* スマホでは写真を文字の下に、小さめに出す */
  .hero-photo { width: 160px; justify-self: start; }
}
.home-intro .buttons { margin-top: 8px; }
/* 本文の <div class="notice"> … </div>：お知らせなどを枠で囲んで、前後の文と分ける */
.prose .notice { margin: 0 0 40px; padding: 20px 24px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.prose .notice > :last-child { margin-bottom: 0; }
@media (max-width: 600px) { .prose .notice { padding: 16px 18px; } }

/* ───────── sections ───────── */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.section-head h2 { margin: 0; font-size: 22px; }
.more { flex-shrink: 0; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--green); }
.more::after { content: "→"; margin-left: 8px; transition: margin .15s; }
.more:hover::after { margin-left: 12px; }
.more-line { margin: 16px 0 0; text-align: right; }

/* ───────── 投稿の一覧 ───────── */
.rows { list-style: none; margin: 0; padding: 0; }
.prose .rows { padding: 0; }
.prose .rows li + li { margin-top: 0; }
.row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.row-date { font-family: var(--font-en); font-size: 14px; color: var(--muted); padding-top: 2px; letter-spacing: .04em; }
.row-meta { margin-bottom: 4px; }
.row-title { display: block; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 16.5px; line-height: 1.65; font-feature-settings: "palt"; }
.prose .row-title { text-decoration: none; }
.row-title:hover { color: var(--green); text-decoration: underline; }
@media (max-width: 560px) { .row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.year-group + .year-group { margin-top: 40px; }
.year { font-family: var(--font-en); font-size: 26px; color: var(--green-deep); margin: 0; padding-bottom: 8px; border-bottom: 2px solid var(--green-logo); letter-spacing: .02em; }
.feed-link { margin-top: 40px; font-size: 14px; }

.chip { display: inline-block; font-size: 12px; line-height: 1.7; padding: 0 10px; border-radius: 4px; white-space: nowrap; letter-spacing: .04em; }
.chip-kind { background: var(--green); color: #fff; }
.chip-accent { background: #8a6d2c; color: #fff; }

/* ───────── 投稿のページ ───────── */
.post-image { margin: 0 0 32px; }
.post-image img { max-height: 280px; width: auto; max-width: 100%; border-radius: var(--radius); border: 1px solid var(--line); }
.pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.pager a { display: block; padding: 14px 18px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 1.6; }
.pager a:hover { border-color: var(--green); color: var(--green); }
.pager span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.pager-next { text-align: right; grid-column: 2; }
@media (max-width: 560px) { .pager { grid-template-columns: minmax(0, 1fr); } .pager-next { grid-column: 1; } }
.back { margin-top: 28px; font-size: 14px; }

/* ───────── document ───────── */
.toc { margin: 0 0 40px; padding: 20px 24px; background: var(--bg-soft); border-radius: var(--radius); font-size: 14.5px; }
.toc-title { margin: 0 0 6px; font-weight: 700; color: var(--green-deep); font-size: 13px; letter-spacing: .1em; }
.toc ol { margin: 0; padding-left: 0; list-style: none; }
.toc li { padding: 4px 0; line-height: 1.6; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--green); text-decoration: underline; }
.subnav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 14px; margin: 0 0 32px; background: var(--bg-soft); border-radius: var(--radius); }
.subnav a { display: inline-flex; align-items: center; padding: 7px 16px; border: 1.5px solid var(--green); border-radius: 999px; background: #fff; color: var(--green); font-size: 14px; font-weight: 600; text-decoration: none; transition: background .15s, color .15s; }
.subnav a:hover, .subnav a:focus-visible, .subnav a[aria-current="page"] { background: var(--green); color: #fff; }
.updated { color: var(--muted); font-size: 14px; margin-top: 48px; }

/* ───────── prose ───────── */
.prose { overflow-wrap: anywhere; font-size: 16px; line-height: 1.95; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 22px; margin: 56px 0 18px; padding-left: 14px; border-left: 4px solid var(--green-logo); scroll-margin-top: 100px; }
.prose h3 { font-size: 18px; margin: 36px 0 12px; scroll-margin-top: 100px; }
.prose h4 { font-size: 16px; margin: 24px 0 8px; }
.prose p { margin: 0 0 1.2em; }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 1.2em; }
.prose li + li { margin-top: .3em; }
.prose img { border-radius: var(--radius); margin: 8px 0 24px; }
.prose a img { margin-bottom: 8px; }
.table-wrap { overflow-x: auto; margin: 8px 0 28px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.75; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: 12px 14px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--bg-soft); border-bottom: 2px solid var(--green-logo); color: var(--green-deep); font-size: 14px; white-space: nowrap; }
.prose tbody tr:first-child td { border-top: 1px solid var(--line); }
/* 見出し行のある表（記事・論文・講演の一覧など）は、種別・日付などの短い先頭の2列を折り返さない */
.prose table:not(.table-kv) td:nth-child(-n+2) { white-space: nowrap; }
/* 「項目・内容」の2列の表だけ、項目名を太字にして折り返さない */
.prose .table-kv tbody td:first-child { white-space: nowrap; color: var(--ink); font-weight: 600; width: 1%; }
.prose blockquote { margin: 24px 0; padding: 4px 20px; border-left: 4px solid var(--line); color: var(--muted); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* ───────── footer ───────── */
.site-footer { background: var(--bg-soft); border-top: 1px solid var(--line); font-size: 14px; }
.footer-main { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; padding-top: 40px; padding-bottom: 36px; }
.footer-name { margin: 0; font-weight: 700; color: var(--ink); line-height: 1.7; }
.footer-name span { font-weight: 400; color: var(--muted); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 4px 24px; list-style: none; margin: 0; padding: 0; }
.footer-links a { color: var(--text); text-decoration: none; }
.footer-links a:hover { color: var(--green); text-decoration: underline; }
.footer-bottom { background: var(--green-deep); color: rgba(255, 255, 255, .8); font-size: 12px; letter-spacing: .06em; }
.footer-bottom p { margin: 0; padding: 14px 0; }

/* ───────── touch devices ───────── */
/* 指で押しやすい大きさにする */
@media (pointer: coarse) {
  .footer-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .toc li { padding: 6px 0; }
  .subnav a { min-height: 44px; }
  .more { display: inline-flex; align-items: center; min-height: 40px; }
  .breadcrumb a { display: inline-block; padding: 6px 0; }
}

/* ───────── small screens ───────── */
@media (max-width: 600px) {
  .section { padding-top: 44px; padding-bottom: 44px; }
  .container { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  /* 「項目・内容」の2列の表は縦に積む */
  .prose .table-kv, .prose .table-kv tbody, .prose .table-kv tr, .prose .table-kv td { display: block; width: 100%; }
  .prose .table-kv tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .prose .table-kv tr:first-child { border-top: 2px solid var(--green-logo); }
  .prose .table-kv td { border: 0 !important; padding: 0; }
  .prose .table-kv tbody td:first-child { margin-bottom: 2px; font-size: 13px; color: var(--muted); white-space: normal; width: 100%; }
  .prose table { font-size: 14px; }
  /* 3列以上の表は縮めすぎず、表の中だけ横にスクロールさせる */
  .prose table:not(.table-kv) { min-width: 600px; }
  .prose th, .prose td { padding: 10px; }
  .prose h2 { font-size: 20px; margin-top: 44px; }
  .page-header { padding: 20px 0 30px; }
  .breadcrumb ol { margin-bottom: 16px; }
  .buttons .button { flex: 1 1 auto; text-align: center; }
}