/* tenki-e.jp ブログ用スタイル。
   LP（/house-coating/styles.css）は参照しない。LP再公開のたびに ?v= と中身が
   変わるため、参照するとブログの表示がLPの公開作業に巻き込まれる。
   ブランドトークン（下の :root）だけはLPと同じ値に揃える。
   値がずれたら tests/test_blog_platform.py が検知する。 */

:root {
  --ivory: #f7f3ec;
  --paper: #fffdf9;
  --ink: #39332d;
  --muted: #746e66;
  --teal: #4f8585;
  --teal-dark: #315f60;
  --teal-pale: #dfeceb;
  --gold: #b99869;
  --line: #d9c8af;
  --line-green: #06c755;
  --serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --sans: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --blog-content: 760px;
}

*, *::before, *::after { box-sizing: border-box; }
body.blog-page {
  margin: 0;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: .025em;
  -webkit-font-smoothing: antialiased;
}
.blog-page img { display: block; width: 100%; height: auto; }
.blog-page a { color: inherit; }
.blog-page figure, .blog-page p, .blog-page h1, .blog-page h2, .blog-page h3,
.blog-page ul, .blog-page ol, .blog-page dl { margin-top: 0; }

.skip-link {
  position: fixed;
  z-index: 999;
  top: 8px;
  left: 8px;
  transform: translateY(-160%);
  padding: .65rem 1rem;
  color: #fff;
  background: var(--teal-dark);
}
.skip-link:focus { transform: none; }

/* Header */
.blog-header {
  border-bottom: 1px solid rgba(185, 152, 105, .28);
  background: rgba(255, 253, 249, .96);
}
.blog-header-inner {
  width: min(var(--blog-content), calc(100% - 36px));
  min-height: 64px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.blog-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif);
  font-size: 21px;
  letter-spacing: .12em;
  text-decoration: none;
}
.blog-brand span { font-family: var(--sans); font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.blog-header-line {
  margin-left: auto;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--line-green);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
}

/* Layout */
.blog-main {
  width: min(var(--blog-content), calc(100% - 36px));
  margin: 0 auto;
  padding: 28px 0 72px;
}

/* Breadcrumb */
.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .06em;
}
.blog-breadcrumb a { color: var(--teal-dark); text-decoration: none; border-bottom: 1px solid rgba(49, 95, 96, .3); }
.blog-breadcrumb span[aria-current] { color: var(--muted); }

/* Article */
.article-header { margin-bottom: 34px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.article-category {
  display: inline-block;
  margin-bottom: 12px;
  padding: 3px 12px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal-dark);
  font-size: 12px;
  letter-spacing: .1em;
}
.article-header h1, .index-header h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(25px, 5vw, 34px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .06em;
}
.article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .06em;
}

.article-body { font-size: 16.5px; }
.article-body h2 {
  margin: 52px 0 20px;
  padding-left: 14px;
  border-left: 3px solid var(--gold);
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .06em;
}
.article-body h3 {
  margin: 34px 0 14px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .05em;
}
.article-body p { margin-bottom: 1.7em; }
.article-body ul, .article-body ol { margin-bottom: 1.7em; padding-left: 1.4em; }
.article-body li { margin-bottom: .5em; }
.article-body a { color: var(--teal-dark); text-decoration: underline; text-underline-offset: 3px; }
.article-body figure { margin: 32px 0; }
.article-body figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; }
.article-body blockquote {
  margin: 32px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--line);
  background: var(--paper);
  color: var(--muted);
}
.article-body .note {
  margin: 32px 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  font-size: 15px;
}

/* 本文テーブル。記事側は <table><tr><th> だけを書く前提で、
   見出し行・項目列の区別はここで付ける（body.html に class を足さない）。 */
.article-body table {
  width: 100%;
  margin: 32px 0;
  border-collapse: collapse;
  background: var(--paper);
  font-size: 15px;
  line-height: 1.75;
}
.article-body th, .article-body td {
  padding: 11px 14px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.article-body th {
  background: var(--teal-pale);
  color: var(--teal-dark);
  font-weight: 700;
}
/* 1列目は行の項目名。見出し行から遠い下の行でも主語が追えるようにする。 */
.article-body td:first-child {
  background: var(--ivory);
  font-weight: 700;
}
/* 判断マトリクスの左上（空セル）。列見出しでも項目名でもないので塗りを外し、
   見出しが上と左の2方向にあることを見た目で分かるようにする。 */
.article-body th:empty { background: var(--paper); }

/* 区分列を縦方向に結合した表（rowspan あり）だけの手当て。
   結合すると2行目以降の先頭 td は「区分」ではなく次の列になるため、上の
   td:first-child の塗りと太字が誤った列に乗る。塗りと太字を結合セル側へ移す。
   :has() で rowspan を持つ表だけに絞るので、結合の無い既存の表には当たらない。 */
.article-body table:has(td[rowspan]) td:first-child {
  background: var(--paper);
  font-weight: 400;
}
.article-body table:has(td[rowspan]) td[rowspan] {
  background: var(--ivory);
  font-weight: 700;
  vertical-align: middle;
}

/* Related */
.article-related {
  margin-top: 56px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
}
.article-related h2 {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .1em;
}
.article-related ul { margin: 0; padding-left: 1.2em; }
.article-related a { color: var(--teal-dark); }

/* CTA */
.article-cta {
  margin-top: 56px;
  padding: 32px 26px;
  border-radius: 8px;
  background: var(--teal-pale);
}
.article-cta h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .06em;
}
.article-cta p { margin-bottom: 0; font-size: 15px; }
.article-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
}
.button-line { color: var(--ink); background: var(--line-green); }
.button-ghost { color: var(--teal-dark); background: var(--paper); border: 1px solid var(--teal); }

/* Index list（案B）
   絵で記事を見分けさせる。色は1色も足さず、既存トークンの割り当てだけで組む。
   カード1枚 = 16:9のサムネ + カテゴリ/日付 + タイトル + 抜粋2行。
   区切りの主役は罫線ではなく余白（罫線は弱め、上下の余白を広げる）。 */
.index-header { margin-bottom: 34px; }
.index-lead { margin: 16px 0 0; color: var(--muted); font-size: 15px; }
.article-list { margin: 0; padding: 0; list-style: none; }
.article-list li { border-top: 1px solid rgba(217, 200, 175, .55); }
.article-list li:last-child { border-bottom: 1px solid rgba(217, 200, 175, .55); }
.article-list a {
  display: block;
  padding: 30px 0;
  text-decoration: none;
}
/* 詳細度に注意：.blog-page img の width/height を上回る必要があるので
   必ず .article-list を前置する。
   16:9の枠に object-fit: cover で収める。サムネ未設定の記事は本文先頭の写真
   （4:3のことが多い）が入るが、枠の形が変わらないので列のリズムが崩れない。 */
.article-list .article-list-thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin-bottom: 16px;
  border-radius: 6px;
  object-fit: cover;
  background: var(--paper);
}
.article-list .article-list-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 12.5px;
  letter-spacing: .06em;
}
/* カテゴリは記事ページと同じアウトラインピル（既存部品 .article-category の再利用）。
   色は全カテゴリ共通のまま。カテゴリ別の色分け（案C）を足すときは、
   li[data-category="..."] を頭に付けたルールをこの下に置くだけで済む。 */
.article-list .article-list-category {
  display: inline-block;
  padding: 2px 11px;
  border: 1px solid var(--teal);
  border-radius: 999px;
  color: var(--teal-dark);
  font-size: 11.5px;
  line-height: 1.7;
  letter-spacing: .1em;
}
.article-list h2 {
  margin: 0 0 9px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
/* 抜粋は2行で打ち切る。行数がそろうとタイトルが視線の止まり所になる。
   非対応の環境では全文が出るだけで、崩れはしない。 */
.article-list p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75;
}
/* 破調を1箇所だけ：先頭（最新）記事のタイトルを大きく、抜粋を3行にする。
   サムネの寸法は7枚とも同じにする（srcset の sizes を1本で済ませるため）。 */
.article-list li:first-child { border-top: none; }
.article-list li:first-child a { padding: 4px 0 34px; }
.article-list li:first-child h2 {
  font-size: 27px;
  line-height: 1.5;
  margin-bottom: 11px;
}
.article-list li:first-child p { -webkit-line-clamp: 3; font-size: 14.5px; }
.index-empty {
  padding: 40px 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--paper);
  color: var(--muted);
  text-align: center;
}

/* Preview banner (確認版のみ。公開パッケージには出力しない) */
.preview-bar {
  padding: 6px 16px;
  color: #fff;
  background: #a4443a;
  font-size: 12px;
  text-align: center;
  letter-spacing: .1em;
}

/* Footer */
.blog-footer {
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.blog-footer-inner {
  width: min(var(--blog-content), calc(100% - 36px));
  margin: 0 auto;
  padding: 30px 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-size: 13.5px;
}
.blog-footer-inner a { color: var(--teal-dark); }
.blog-copyright {
  width: min(var(--blog-content), calc(100% - 36px));
  margin: 0 auto;
  padding-bottom: 30px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .1em;
}

/* ------------------------------------------------------------------
   本文の階層とリズム（案B。案Aの中身をそのまま含む）
   色は1色も足していない。既存トークンの割り当てを変えているだけ。
   表（.article-body table / th / td）のセル寸法には1行も触れていないので、
   公開済みの表12個は1pxも動かない。
   上の定義より後ろに置いて上書きする。順番を入れ替えないこと。
   ------------------------------------------------------------------ */

/* リズム：見出しの前を広く、見出しの直後を詰める */
.article-body h2 { margin: 68px 0 16px; }
.article-body h2 + p,
.article-body h2 + h3,
.article-body h2 + ul,
.article-body h2 + ol { margin-top: 0; }

/* h3に階層を与える。h2＝明朝＋金の縦線、h3＝ゴシック＋ティールの下線 */
.article-body h3 {
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(79, 133, 133, .35);
  color: var(--teal-dark);
}

/* 囲みを地から浮かせる。新規トークンは足さず、既存の --teal-pale を面に使う */
.article-body .note {
  border: none;
  border-left: 4px solid var(--teal);
  border-radius: 0 6px 6px 0;
  background: var(--teal-pale);
  color: var(--ink);
}
/* 引用は「面」ではなく「線」にして、.note と役割を分ける */
.article-body blockquote {
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--gold);
  background: transparent;
}

/* 強調。色文字ではなく金の細マーカー（既存トークンのみ） */
.article-body strong {
  font-weight: 700;
  background: linear-gradient(transparent 62%, rgba(185, 152, 105, .38) 62%);
}

/* 先頭のリード段落だけ大きく読ませる（本文の文章は1文字も変えない） */
.article-body > figure:first-child + p {
  font-size: 17.5px;
  line-height: 1.95;
}

/* 破調を1箇所：画面が広いときだけ写真を本文幅より外へ出す。
   本文カラム自体は動かさないので、文字の折返しは変わらない。 */
@media (min-width: 900px) {
  .article-body > figure {
    width: calc(100% + 72px);
    margin-left: -36px;
  }
  .article-body > figure figcaption { padding-left: 36px; }
}

@media (max-width: 640px) {
  .blog-header-inner { min-height: 56px; }
  .blog-brand { font-size: 18px; }
  .blog-brand span { display: none; }
  .blog-main { padding-top: 20px; }
  .article-body { font-size: 16px; }
  .article-body h2 { margin-top: 42px; font-size: 20px; }
  /* 列を潰さずに読ませる。table 自体をスクロール枠にして、
     本文（body）側には横スクロールを出さない。 */
  .article-body table {
    display: block;
    overflow-x: auto;
    font-size: 14.5px;
  }
  .article-body th, .article-body td { padding: 10px 12px; min-width: 8.5em; }
  .article-body th:first-child, .article-body td:first-child { min-width: 7em; }
  /* 結合した表では、先頭 td が区分列とはかぎらない（上の :has() と同じ理由）。
     狭い幅の指定も結合セル側へ移す。 */
  .article-body table:has(td[rowspan]) td:first-child { min-width: 8.5em; }
  .article-body table:has(td[rowspan]) td[rowspan] { min-width: 7em; }
  .article-cta { padding: 26px 18px; }
  .article-cta-actions .button { width: 100%; }
}

/* ------------------------------------------------------------------
   見出し送り（H2ナビ）。記事ページだけに出る。
   色は1色も足していない。面は --paper、線と矢印は --teal / --teal-dark の
   値をそのまま使っている（既存の rgba() 表記と同じ流儀）。
   既存要素の寸法・余白には一切触れていないので、表12個・本文の囲み・h3・
   余白は1pxも動かない。
   初期状態は display: none。JSが .is-on を付けたときだけ出す
   （JSが動かない環境に、押しても何も起きないボタンを残さないため）。
   z-index は .skip-link（999）より下に置く。キーボードの「本文へ移動」を
   矢印が覆わないようにするため。
   ------------------------------------------------------------------ */
.h2nav {
  display: none;
  position: fixed;
  z-index: 20;
  right: 10px;
  bottom: 22px;
  flex-direction: column;
  gap: 8px;
}
.h2nav.is-on { display: flex; }
/* 問い合わせ導線が画面に入ったら、JSが bottom を書き換えて導線の上へ逃がす。
   逃げ場が無いほど導線が画面を占めたときだけ引っ込める。
   .is-on より後ろに置いて上書きする。順番を入れ替えないこと。 */
.h2nav.is-off { display: none; }
.h2nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(79, 133, 133, .45);
  border-radius: 999px;
  background: rgba(255, 253, 249, .92);
  box-shadow: 0 2px 8px rgba(57, 51, 45, .12);
  color: var(--teal-dark);
  cursor: pointer;
}
/* 矢印は文字ではなく罫線で描く（フォント差で形と位置が変わらないようにする）。 */
.h2nav-btn::before {
  content: "";
  width: 10px;
  height: 10px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
}
.h2nav-up::before { transform: translateY(2px) rotate(45deg); }
.h2nav-down::before { transform: translateY(-2px) rotate(-135deg); }
/* 端に着いたボタンは消さずに薄くする（消すと残った側の位置が動いて押しにくい）。 */
.h2nav-btn:disabled { opacity: .32; cursor: default; }
.h2nav-btn:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }

/* パソコン。本文カラムの右外側に置く。画面の右端ではなくカラム基準にするので、
   横に広い画面でも本文のそばから離れない。
   380px（本文760pxの半分）＋36px（min-width:900px で写真がはみ出す量）＋12px（すき間）。 */
@media (min-width: 1000px) {
  .h2nav {
    right: auto;
    left: calc(50% + 428px);
    bottom: 40px;
  }
  .h2nav-btn { background: var(--paper); }
}

/* スマホの手当て（案B）。上の @media より後ろに置いて上書きする。 */
@media (max-width: 640px) {
  .article-list li:first-child h2 { font-size: 23px; }
  .article-body h2 { margin-top: 54px; }
  .article-body > figure:first-child + p { font-size: 16.5px; }
  /* 3列表が横スクロールできることを影で示す。
     セルの padding・min-width には触れないので、既存12表の寸法は1pxも動かない。 */
  .article-body table {
    box-shadow: inset -14px 0 14px -14px rgba(57, 51, 45, .5);
  }
}