@charset "utf-8";
/*===============================
blog.css  ブログ（通常投稿）専用
2026-08-10 v2 － ハウスインフォ デザインシステム準拠に改訂

デザインシステムの正本：
 G:\マイドライブ\ハウスインフォ\01 事業部\03 IT事業\00 管理ファイル\
 デザインシステム\ハウスインフォデザインシステム\DESIGN.md

■ このシステムの絶対ルール（v1はこれを外していた。戻さないこと）
  ・影・グラデーション・装飾パターンを**一切使わない**
  ・暖色モノクローム（墨黒／和紙白／墨タイル）＋クレイ＋弁柄以外の色を入れない
    → 青も緑も使わない
  ・角丸は既定0px。ボタンでも2px。ピル型は極小のチップ/ドットだけ
  ・区切りは線ではなく**余白**でつくる。罫線は控えめに
  ・本文は太字にしない（300〜400、強調500）。**太字が許されるのは大見出し1行だけ**
  ・弁柄（#B0472B）は1画面に1〜2箇所まで。使いすぎると強調でなくなる

■ common.css の癖の打ち消し（消すと壊れる）
  1. `*{text-align:justify; word-break:break-all}` → 本文が両端揃え＋単語途中で改行
  2. `a{color:#fff}`                              → 白背景でリンクが見えない
  3. `ol,ul{list-style:none}`                     → 箇条書きが消える
  4. `.news_list .item a .thumb img{border-radius:20px}` → 角丸。システムは0px
  5. `.l-header` は position:fixed の白文字 → 最上部は必ず濃色タイルにする
================================*/

/*-------------------------------
 トークン（DESIGN.md より）
--------------------------------*/
:root {
 /* colors */
 --hi-ink: #1A1A1A;            /* 墨 — 見出し・主ボタン */
 --hi-ink-hover: #3A342C;      /* ホバーで土色に寄る */
 --hi-body: #2B2B2B;           /* 本文 */
 --hi-muted: #6E6A63;          /* グレージュ — キャプション */
 --hi-accent: #8A6E52;         /* クレイ — 日常のアクセント（下線・小さな強調） */
 --hi-accent-on-dark: #C7A987;
 --hi-emphasis: #B0472B;       /* 弁柄 — ここぞの強調のみ */
 --hi-emphasis-on-dark: #CE6B45;
 --hi-hairline: #E5E2DC;       /* 暖色の罫 */
 --hi-canvas: #FFFFFF;
 --hi-canvas-warm: #F5F4F1;    /* 和紙 */
 --hi-mist: #FAF9F6;
 --hi-dark: #1F1D1A;           /* 墨タイル */
 --hi-on-dark: #F5F4F1;
 --hi-muted-on-dark: #B9B3A8;

 /* type — 3つの声 */
 --hi-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
 --hi-latin: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
 --hi-caps: Oswald, "Helvetica Neue", "Noto Sans JP", sans-serif; /* 英字ディスプレイ（大きく・大文字のみ） */

 /* spacing — 8px基調 */
 --hi-lg: 24px;
 --hi-xl: 40px;
 --hi-xxl: 64px;
 --hi-section: 120px;
}

/*-------------------------------
 打ち消し1・2（本文組みを取り戻す）
--------------------------------*/
.blog-hero,
.blog-hero *,
.blog-main,
.blog-main * {
 text-align: left;
 word-break: normal;
 overflow-wrap: anywhere;
 line-break: strict;
}

.blog-main {
 background: var(--hi-canvas);
 color: var(--hi-body);
 font-family: var(--hi-latin);
 padding-bottom: clamp(4rem, 2.6rem + 6vw, 7.5rem);
}

/*-------------------------------
 上部の墨タイル（打ち消し5）
 property-tile-dark / quote-card の作法。フラット・角丸なし・影なし
--------------------------------*/
.blog-hero {
 background: var(--hi-dark);
 color: var(--hi-on-dark);
 padding-top: 128px;
 padding-bottom: clamp(2.5rem, 1.8rem + 3vw, 4.5rem);
}
@media screen and (min-width: 768px) {
 .blog-hero {
  padding-top: 152px;
 }
}

.blog-breadcrumb {
 font-family: var(--hi-latin);
 font-size: 12px;
 font-weight: 400;
 line-height: 1.7;
 letter-spacing: 0.02em;
 color: var(--hi-muted-on-dark);
 margin-bottom: var(--hi-xl);
}
.blog-breadcrumb a {
 color: var(--hi-muted-on-dark);
 text-decoration: none;
 transition: color 0.4s ease;
}
.blog-breadcrumb a:hover {
 color: var(--hi-on-dark);
}
.blog-breadcrumb span {
 margin: 0 8px;
 color: rgba(185, 179, 168, 0.6);
}

/* eyebrow — 英字スペースドキャップス。和文の大見出しの真上に置く（Mode B の作法） */
.blog-eyebrow {
 display: block;
 font-family: var(--hi-latin);
 font-size: 13px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--hi-accent-on-dark);
 margin-bottom: 16px;
}

/* 大見出し — このシステムで太字が許される唯一の行 */
.blog-title {
 font-family: var(--hi-jp);
 font-size: clamp(1.5rem, 1.05rem + 2vw, 2.875rem);
 font-weight: 700;
 line-height: 1.4;
 letter-spacing: 0.03em;
 color: var(--hi-on-dark);
}

.blog-date {
 display: block;
 margin-top: var(--hi-lg);
 font-family: var(--hi-caps);
 font-size: 14px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.08em;
 color: var(--hi-muted-on-dark);
}

.blog-hero-lead {
 margin-top: var(--hi-lg);
 font-family: var(--hi-latin);
 font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
 font-weight: 300;
 line-height: 1.7;
 letter-spacing: 0.01em;
 color: var(--hi-muted-on-dark);
 max-width: 44em;
}

/*-------------------------------
 記事本文
--------------------------------*/
.blog-article {
 padding-top: clamp(3rem, 2rem + 4vw, 5rem);
}

/* 写真は全幅・角丸なし・オーバーレイなし。ラベルは画像の下（property-card の作法） */
.blog-thumb-main {
 margin-bottom: clamp(2.5rem, 1.8rem + 3vw, 4rem);
}
.blog-thumb-main img {
 display: block;
 width: 100%;
 height: auto;
 border-radius: 0;
}

.blog-body {
 font-family: var(--hi-latin);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.9;
 letter-spacing: 0.02em;
 color: var(--hi-body);
 max-width: 42em;
}

.blog-body p {
 margin-bottom: 1.9em;
}

/* 見出しは罫で飾らない。余白で切る */
.blog-body h2 {
 font-family: var(--hi-jp);
 font-size: clamp(1.375rem, 1.15rem + 0.95vw, 2rem);
 font-weight: 500;
 line-height: 1.5;
 letter-spacing: 0.02em;
 color: var(--hi-ink);
 margin: 3.2em 0 1.3em;
}
.blog-body h2:first-child {
 margin-top: 0;
}

.blog-body h3 {
 font-family: var(--hi-jp);
 font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
 font-weight: 500;
 line-height: 1.6;
 letter-spacing: 0.02em;
 color: var(--hi-ink);
 margin: 2.4em 0 1em;
}

.blog-body h4 {
 font-family: var(--hi-jp);
 font-size: 1.02em;
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: 0.02em;
 color: var(--hi-ink);
 margin: 2em 0 0.8em;
}

/* 打ち消し3：箇条書きを戻す */
.blog-body ul,
.blog-body ol {
 margin: 0 0 1.9em;
 padding-left: 1.5em;
}
.blog-body ul {
 list-style: disc;
}
.blog-body ol {
 list-style: decimal;
}
.blog-body li {
 margin-bottom: 0.7em;
 line-height: 1.9;
}
.blog-body li::marker {
 color: var(--hi-accent);
}

/* 打ち消し2：text-link ＝ インクの文字＋クレイの下線 */
.blog-body a {
 color: var(--hi-ink);
 text-decoration: underline;
 text-decoration-color: var(--hi-accent);
 text-decoration-thickness: 1px;
 text-underline-offset: 4px;
 transition: color 0.4s ease;
}
.blog-body a:hover {
 color: var(--hi-accent);
}

/* 本文は太字にしない。強調は500まで */
.blog-body strong,
.blog-body b {
 font-weight: 500;
}
.blog-body em {
 font-style: normal;
 color: var(--hi-emphasis); /* 弁柄。1記事に1〜2箇所まで */
}

.blog-body img {
 display: block;
 max-width: 100%;
 height: auto;
 border-radius: 0;
 margin: 0.5em 0;
}
.blog-body figure {
 margin: 2.5em 0;
}
.blog-body figcaption {
 margin-top: 0.9em;
 font-size: 13px;
 font-weight: 400;
 line-height: 1.7;
 letter-spacing: 0.03em;
 color: var(--hi-muted);
}

/* 引用は塗らずに、クレイの縦罫1本だけ */
.blog-body blockquote {
 margin: 2.5em 0;
 padding: 0.2em 0 0.2em 1.6em;
 border-left: 1px solid var(--hi-accent);
 color: var(--hi-muted);
}
.blog-body blockquote p:last-child {
 margin-bottom: 0;
}

.blog-body table {
 width: 100%;
 border-collapse: collapse;
 margin: 2.5em 0;
 font-size: 15px;
}
.blog-body th,
.blog-body td {
 border-bottom: 1px solid var(--hi-hairline);
 padding: 1em 1em 1em 0;
 line-height: 1.8;
 vertical-align: top;
}
.blog-body th {
 font-weight: 500;
 color: var(--hi-ink);
 white-space: nowrap;
}
.blog-body .blog-scroll {
 overflow-x: auto;
}

.blog-body hr {
 border: 0;
 border-top: 1px solid var(--hi-hairline);
 margin: 3em 0;
}

/*-------------------------------
 数字の要点ボックス
 大きな数字は英字コンデンス（Oswald）で組む＝このブランドの見せ場
 貼るHTMLは作業記録を参照
--------------------------------*/
.blog-figs {
 display: flex;
 flex-wrap: wrap;
 gap: var(--hi-xl);
 margin: 0 0 clamp(2.5rem, 1.8rem + 3vw, 4rem);
 padding: clamp(2rem, 1.5rem + 2vw, 3rem) 0;
 border-top: 1px solid var(--hi-hairline);
 border-bottom: 1px solid var(--hi-hairline);
 border-radius: 0;
 background: none;
}
.blog-fig {
 flex: 1 1 140px;
}
.blog-fig-num {
 display: block;
 font-family: var(--hi-caps);
 font-size: clamp(2.75rem, 2rem + 3.2vw, 4.5rem);
 font-weight: 500;
 line-height: 1;
 letter-spacing: 0.01em;
 color: var(--hi-ink);
 font-feature-settings: "tnum";
}
.blog-fig-num small {
 font-size: 0.32em;
 font-weight: 400;
 letter-spacing: 0.04em;
 margin-left: 4px;
}
/* 1つだけ弁柄にしたいときは <div class="blog-fig blog-fig--key"> */
.blog-fig--key .blog-fig-num {
 color: var(--hi-emphasis);
}
.blog-fig-label {
 display: block;
 margin-top: 12px;
 font-family: var(--hi-latin);
 font-size: 13px;
 font-weight: 400;
 line-height: 1.7;
 letter-spacing: 0.03em;
 color: var(--hi-muted);
}

/* 記事末の「この記事の要点」— 箱で囲わず、罫2本で挟む */
.blog-summary {
 margin: 3em 0;
 padding: clamp(1.8rem, 1.4rem + 1.7vw, 2.5rem) 0;
 border-top: 1px solid var(--hi-hairline);
 border-bottom: 1px solid var(--hi-hairline);
}
.blog-summary-h {
 font-family: var(--hi-latin);
 font-size: 13px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--hi-muted);
 margin-bottom: var(--hi-lg);
}
.blog-summary ul {
 list-style: none;
 padding-left: 0;
 margin-bottom: 0;
}
.blog-summary li {
 padding-left: 1.4em;
 position: relative;
 line-height: 1.9;
}
.blog-summary li:before {
 content: "";
 position: absolute;
 left: 0;
 top: 0.85em;
 width: 6px;
 height: 6px;
 border-radius: 9999px; /* 極小インジケータのみピル可 */
 background: var(--hi-accent);
}

/*-------------------------------
 記事末CTA（旅館業ラボへ送る）
 和紙の面 ＋ 墨黒ボタン。塗りはグラデにしない
--------------------------------*/
.blog-cta {
 margin-top: clamp(4rem, 2.6rem + 6vw, 7.5rem);
 padding: clamp(2.5rem, 1.8rem + 3vw, 4rem);
 background: var(--hi-canvas-warm);
 border-radius: 0;
}
.blog-cta-eyebrow {
 display: block;
 font-family: var(--hi-latin);
 font-size: 13px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--hi-accent);
 margin-bottom: 16px;
}
.blog-cta-lead {
 font-family: var(--hi-jp);
 font-size: clamp(1.125rem, 1rem + 0.55vw, 1.5rem);
 font-weight: 500;
 line-height: 1.6;
 letter-spacing: 0.02em;
 color: var(--hi-ink);
 max-width: 24em;
}
/* button-primary：墨黒ベタ・白文字・2px・16×34px。ホバーは色だけ0.4s */
.blog-cta-btn {
 display: inline-block;
 margin-top: var(--hi-xl);
 padding: 18px 34px;
 min-width: 200px;
 background: var(--hi-ink);
 color: #fff;
 font-family: var(--hi-latin);
 font-size: 16px;
 font-weight: 400;
 line-height: 1.6;
 letter-spacing: 0.02em;
 text-align: center;
 text-decoration: none;
 border-radius: 2px;
 transition: background-color 0.4s ease;
}
.blog-cta-btn:hover {
 background: var(--hi-ink-hover);
}
.blog-cta-note {
 margin-top: var(--hi-lg);
 font-family: var(--hi-latin);
 font-size: 12px;
 font-weight: 400;
 line-height: 1.7;
 letter-spacing: 0.02em;
 color: var(--hi-muted);
}

/*-------------------------------
 一覧ページ
--------------------------------*/
/* button-ghost-on-dark：透明＋淡い枠。ピルにしない */
.blog-filter {
 display: flex;
 flex-wrap: wrap;
 gap: 12px;
 margin-top: var(--hi-xl);
}
.blog-filter a {
 display: inline-block;
 padding: 12px 22px;
 border: 1px solid rgba(245, 244, 241, 0.4);
 border-radius: 2px;
 background: transparent;
 color: var(--hi-on-dark);
 font-family: var(--hi-latin);
 font-size: 13px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.06em;
 text-decoration: none;
 transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.blog-filter a:hover,
.blog-filter a.is-current {
 background: var(--hi-on-dark);
 border-color: var(--hi-on-dark);
 color: var(--hi-dark);
}

.blog-list {
 padding: clamp(3rem, 2rem + 4vw, 5rem) 0 0;
}
/* 打ち消し4：写真の角丸を落とす。ラベルは画像の下、オーバーレイなし */
.blog-list .item a {
 display: block;
 color: var(--hi-ink);
 text-decoration: none;
}
.blog-list .item a .thumb img {
 border-radius: 0;
}
.blog-list .item a .date {
 margin-top: 20px;
 font-family: var(--hi-caps);
 font-size: 13px;
 font-weight: 400;
 line-height: 1;
 letter-spacing: 0.08em;
 color: var(--hi-muted);
}
.blog-list .item a .news_h {
 padding-top: 12px;
 font-family: var(--hi-jp);
 font-size: 17px;
 font-weight: 500;
 line-height: 1.7;
 letter-spacing: 0.02em;
 color: var(--hi-ink);
 transition: color 0.4s ease;
}
.blog-list .item a:hover .news_h {
 color: var(--hi-accent);
}
.blog-list .item .blog-cat-mini {
 display: block;
 margin-top: 10px;
 font-family: var(--hi-latin);
 font-size: 11px;
 font-weight: 600;
 line-height: 1;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: var(--hi-muted);
}

/* サムネ未設定時。テーマに noimg.jpg が無いのでCSSで代替する。
   ロゴのテキスト代替は HOUSEINFO（半角大文字・字間0.18em）。
   ※「HOUSE INFO」とスペースを入れるのは禁止 */
.blog-thumb-none {
 position: relative;
 aspect-ratio: 3/2;
 border-radius: 0;
 background: var(--hi-canvas-warm);
 display: flex;
 align-items: center;
 justify-content: center;
}
.blog-thumb-none span {
 font-family: var(--hi-latin);
 font-size: 13px;
 font-weight: 600;
 letter-spacing: 0.18em;
 color: var(--hi-muted);
}

.blog-empty {
 padding: var(--hi-xxl) 0;
 font-family: var(--hi-latin);
 font-size: 15px;
 line-height: 1.9;
 letter-spacing: 0.02em;
 color: var(--hi-muted);
}

/* ページネーション */
.blog-main .pagination {
 margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.blog-main .pagination ul {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 8px;
 list-style: none;
 padding: 0;
}
.blog-main .pagination a,
.blog-main .pagination span {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 44px;
 height: 44px;
 padding: 0 12px;
 border: 1px solid var(--hi-hairline);
 border-radius: 2px;
 font-family: var(--hi-caps);
 font-size: 14px;
 font-weight: 400;
 letter-spacing: 0.06em;
 color: var(--hi-ink);
 text-decoration: none;
 transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.blog-main .pagination a:hover {
 background: var(--hi-ink);
 border-color: var(--hi-ink);
 color: #fff;
}
.blog-main .pagination .current {
 background: var(--hi-ink);
 border-color: var(--hi-ink);
 color: #fff;
}

/* 一覧へ戻る：button-ghost（透明＋インクの1px罫、ホバーで反転） */
.blog-main .section_button {
 margin-top: clamp(3rem, 2rem + 4vw, 5rem);
}
.blog-main .section_button .btn01 {
 width: auto;
 min-width: 200px;
 padding: 18px 34px;
 background-color: transparent;
 border: 1px solid var(--hi-ink);
 border-radius: 2px;
 font-family: var(--hi-latin);
 font-size: 16px;
 font-weight: 400;
 letter-spacing: 0.02em;
 color: var(--hi-ink);
 transition: background-color 0.4s ease, color 0.4s ease;
}
.blog-main .section_button .btn01:hover {
 background-color: var(--hi-ink);
 color: #fff;
 opacity: 1;
}