@charset "UTF-8";
/*!
 * seven-blog.css — ブログ（一覧 / category / tag / 記事）（Phase D: 骨組みのみ）
 * ===========================================================================
 * 作成: 2026-09-02 (STEP3 Phase D)
 * 依存: seven-tokens.css
 *
 * 【現状】
 * スタイル宣言なし。Phase D では見た目を一切変更しません。
 *
 * 【役割】
 * 投稿一覧・カテゴリー・タグ・個別記事のレイアウト。
 * 既存22記事のSEO資産を土台にした、収益化の主戦場になる領域。
 *
 * 【将来管理する範囲】
 *   投稿一覧 / category / tag  … 記事カードのグリッド
 *   single article             … 本文可読性（幅 / 行間 / 見出し余白 / リンク色）
 *
 * 【収益化ブロックのための土台】
 * 将来、記事内・記事末に以下を差し込む。実CSSは本フェーズでは書かない。
 *
 *   .seven-cta                  汎用CTA（LINE予約 / メニュー誘導）
 *   .seven-cta--line            LINE予約CTA
 *   .seven-cta--menu            店舗メニューページへの内部リンク
 *   .seven-product-card         関連商品 / おすすめ店販品
 *   .seven-shop-card            店販（店頭販売）商品
 *   .seven-affiliate-box        アフィリエイト商品
 *   .seven-compare              比較カード / 比較表
 *   .seven-spec                 商品スペック表
 *   .seven-pr-label             PR / 広告表記（法令・ガイドライン対応）
 *   .seven-product-label        「店頭限定」等の商品ラベル
 *   .seven-article-end-cta      記事末CTA
 *
 * 【設計上の約束 — 記事本文との共存】
 * 1. 記事本文の要素セレクタ（.entry-content p 等）を広く上書きしない。
 *    収益化ブロックは必ず .seven-* を起点にし、本文スタイルと独立させる。
 * 2. 収益化ブロックは「本文の途中に挿入されても回り込みや余白が崩れない」
 *    自己完結型（display:block + 自前の margin）で設計する。
 * 3. PR表記（.seven-pr-label）は視認性を確保し、
 *    広告であることが読者に伝わる配置を前提にする。装飾で埋もれさせない。
 *
 * 【実装方式に依存しない構造にする】
 * 商品情報の管理方法は未決定（投稿 / 固定ページ / カスタムフィールド /
 * ショートコード / 再利用ブロック / TablePress 等）。
 * どれを選んでも同じクラス名で描画できるよう、CSSは
 * 「マークアップの構造」ではなく「クラス名」に紐づける。
 *   NG: .entry-content > div > table:nth-child(3)
 *   OK: .seven-spec
 * これにより、後から管理方式を変更してもCSSを書き直さずに済む。
 * ===========================================================================
 */

/* Phase F2: ブログハブだけに適用。既存記事・カテゴリ・footerは維持。 */
body.page-template-page-seven-blog #content-in.wrap {
  width: auto; max-width: none; margin: 0; padding: 0;
}
body.page-template-page-seven-blog #main.main {
  width: 100%; max-width: none; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: var(--seven-bg); box-shadow: none;
}
body.page-template-page-seven-blog #sidebar { display: none; }
body.page-template-page-seven-blog #content { margin-top: 0; padding-top: 0; }
body.page-template-page-seven-blog .seven-blog-hub {
  font: var(--seven-fs-body)/var(--seven-lh-body) var(--seven-font);
  color: var(--seven-text); background: var(--seven-bg);
}
.seven-blog-hub .seven-blog-container {
  box-sizing: border-box; width: 100%; max-width: var(--seven-container);
  margin-inline: auto; padding-inline: var(--seven-gutter);
}
.seven-blog-hub .seven-blog-section { padding-block: var(--seven-section-y); }
.seven-blog-hub .seven-blog-intro { padding-bottom: 0; }
body.page-template-page-seven-blog .seven-blog-hub h1,
body.page-template-page-seven-blog .seven-blog-hub h2,
body.page-template-page-seven-blog .seven-blog-hub h3 {
  padding: 0; border: 0; background: transparent; color: var(--seven-text);
  font-weight: 700; letter-spacing: normal; overflow-wrap: anywhere;
}
.seven-blog-hub h1 { font-size: var(--seven-fs-h1); line-height: 1.4; margin: 0 0 24px; }
.seven-blog-hub h2 { font-size: var(--seven-fs-h2); line-height: 1.4; margin: 0 0 32px; }
.seven-blog-hub p { margin: 0; }
.seven-blog-hub .seven-blog-topics,
.seven-blog-hub .seven-blog-grid {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--seven-gap);
  margin: 0; padding: 0; list-style: none;
}
.seven-blog-hub .seven-blog-card {
  min-width: 0; margin: 0; padding: 0;
  border: var(--seven-border-w) solid var(--seven-border);
  border-radius: var(--seven-radius); background: var(--seven-surface);
}
.seven-blog-hub .seven-blog-card__link {
  display: block; height: 100%; color: var(--seven-text); text-decoration: none;
  border-radius: var(--seven-radius);
}
.seven-blog-hub .seven-blog-card__image {
  aspect-ratio: 16 / 9; overflow: hidden; background: var(--seven-border);
  border-radius: var(--seven-radius) var(--seven-radius) 0 0;
}
.seven-blog-hub .seven-blog-card__image img {
  display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover;
}
.seven-blog-hub .seven-blog-card__body { padding: 24px; }
.seven-blog-hub .seven-blog-card__category {
  display: inline-block; padding: 4px 12px; border-radius: var(--seven-radius-pill);
  color: var(--seven-primary); background: var(--seven-primary-soft);
  font-size: var(--seven-fs-small);
}
.seven-blog-hub .seven-blog-card__date {
  display: block; margin-block: 12px; color: var(--seven-text-muted);
  font-size: var(--seven-fs-small);
}
body.page-template-page-seven-blog .seven-blog-hub .seven-blog-card__title {
  margin: 0; font-size: var(--seven-fs-h3); line-height: 1.6;
}
.seven-blog-hub .seven-blog-card__link:hover .seven-blog-card__title { text-decoration: underline; }
.seven-blog-hub .seven-blog-button {
  box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center;
  min-height: var(--seven-btn-h); padding: 12px 28px;
  border: var(--seven-border-w) solid var(--seven-primary);
  border-radius: var(--seven-radius-pill); background: var(--seven-surface);
  color: var(--seven-primary); font-size: var(--seven-fs-body); font-weight: 700;
  line-height: 1.4; text-align: center; text-decoration: none;
}
.seven-blog-hub .seven-blog-button:hover { background: var(--seven-primary-soft); }
.seven-blog-hub .seven-blog-button--line {
  width: auto; margin: 0; box-shadow: none;
  background: var(--seven-line); color: var(--seven-surface); border-color: var(--seven-line);
}
.seven-blog-hub .seven-blog-button--line:hover { background: var(--seven-line-dark); }
.seven-blog-hub .seven-blog-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 32px;
}
.seven-blog-hub .seven-blog-pagination a,
.seven-blog-hub .seven-blog-pagination span {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: 48px; padding: 8px 12px;
  border: var(--seven-border-w) solid var(--seven-primary);
  border-radius: var(--seven-radius); color: var(--seven-primary);
  background: var(--seven-surface); text-decoration: none;
}
.seven-blog-hub .seven-blog-pagination [aria-current="page"] {
  background: var(--seven-primary); color: var(--seven-surface);
}
.seven-blog-hub .seven-blog-pagination a:hover { background: var(--seven-primary-soft); }
.seven-blog-hub a:focus-visible {
  outline: 3px solid var(--seven-accent); outline-offset: 3px;
}
.seven-blog-hub .seven-blog-cta { text-align: center; }
.seven-blog-hub .seven-blog-actions {
  display: flex; flex-direction: column; gap: 12px;
  max-width: 320px; margin: 24px auto 0;
}
@media (min-width: 768px) {
  .seven-blog-hub .seven-blog-topics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seven-blog-hub .seven-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seven-blog-hub .seven-blog-actions { flex-direction: row; justify-content: center; max-width: none; }
}
@media (min-width: 1024px) {
  .seven-blog-hub .seven-blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Phase F2 追記（Claude Code）: HOME / 料金ページとのデザイン統一
   料金ページ（seven-pages.css）と同じ調整を、ブログハブのスコープで適用する。
   これが無いと skin-season-autumn の指定が残り、
     .logo-text{padding:2em 0}         → ヘッダーが約200pxになる
     #header-container .navi{#9b7b6c}  → ナビが茶色のまま
     body.custom-background            → 店舗外観写真の帯が出る
     .page-top a{#d7cac4}              → ベージュのPAGE TOP帯が出る
   となり、HOME・料金ページと不統一になる。
   新しい配色は足さず、既存トークンのみを使う。!important は使わない。
   --------------------------------------------------------------------------- */

/* 横スクロールの保険（HOME・料金ページと同条件） */
body.page-template-page-seven-blog #main.main { overflow-x: hidden; }

/* ヘッダー */
body.page-template-page-seven-blog #header,
body.page-template-page-seven-blog #header-in.header-in { background: var(--seven-surface); }
body.page-template-page-seven-blog .logo-text { padding: 12px 0; }
body.page-template-page-seven-blog #header .logo .site-name-text {
  font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--seven-primary-dark);
}

/* グローバルナビ（リンク内容・メニューDBは変更しない） */
body.page-template-page-seven-blog #header-container .navi,
body.page-template-page-seven-blog #navi {
  background: var(--seven-surface);
  border-bottom: var(--seven-border-w) solid var(--seven-border);
}
body.page-template-page-seven-blog #header-container .navi a,
body.page-template-page-seven-blog #navi .menu-header a {
  background: transparent; color: var(--seven-primary-dark);
}
body.page-template-page-seven-blog .navi-in > ul li { height: 48px; }
body.page-template-page-seven-blog .navi-in > ul .menu-item-has-description > a > .caption-wrap {
  height: 48px; line-height: 22px;
}

/* 店舗外観の背景画像を出さない（画像データは削除していない） */
body.page-template-page-seven-blog.custom-background,
body.page-template-page-seven-blog {
  background-image: none;
  background-color: var(--seven-bg);
}

/* skin の PAGE TOP ベージュ帯を出さない（Cocoon機能はサイト全体で有効のまま） */
body.page-template-page-seven-blog .page-top,
body.page-template-page-seven-blog .page-top a { display: none; }

@media (max-width: 767px) {
  body.page-template-page-seven-blog .logo-text { padding: 10px 0; }
  body.page-template-page-seven-blog #header .logo .site-name-text { font-size: 17px; }
}

/* Phase F2.1: ブログハブ専用の固定UI・footer・mobile新着カード調整。 */
body.page-template-page-seven-blog ul.mobile-footer-menu-buttons.mobile-menu-buttons { display: none; }
body.page-template-page-seven-blog { margin-bottom: 0; }

/* おすすめは維持。新着のみ画像高と縦余白を圧縮し、文字サイズ・折返し幅は保つ。 */
@media (max-width: 767px) {
  body.page-template-page-seven-blog .seven-blog-latest .seven-blog-card__image { aspect-ratio: 2 / 1; }
  body.page-template-page-seven-blog .seven-blog-latest .seven-blog-card__body { padding-block: 16px; }
  body.page-template-page-seven-blog .seven-blog-latest .seven-blog-card__date { margin-block: 8px; }
}

/* 既存mu-pluginのFABをHOMEと同寸法の横型に。初期状態は非表示。 */
body.page-template-page-seven-blog .seven-line-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  animation: none;
  left: auto;
  right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  width: auto;
  min-width: 138px;
  height: 50px;
  margin: 0;
  padding-inline: 16px;
  flex-direction: row;
  gap: 8px;
  border-radius: var(--seven-radius-pill);
  background: var(--seven-line);
  box-shadow: var(--seven-shadow);
}
body.page-template-page-seven-blog .seven-blog-fab--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
body.page-template-page-seven-blog .seven-line-fab__icon { width: 26px; height: 26px; flex: 0 0 auto; }
body.page-template-page-seven-blog .seven-line-fab__label { font-size: 0; line-height: 1; }
body.page-template-page-seven-blog .seven-line-fab__label small { display: none; }
body.page-template-page-seven-blog .seven-line-fab__label::after {
  content: "LINE予約";
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
body.page-template-page-seven-blog .seven-line-fab:focus-visible {
  outline: 3px solid var(--seven-accent);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  body.page-template-page-seven-blog .seven-line-fab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-width: 124px;
    height: 48px;
    padding-inline: 14px;
  }
  body.page-template-page-seven-blog .seven-line-fab__icon { width: 24px; height: 24px; }
  body.page-template-page-seven-blog .seven-line-fab__label::after { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  body.page-template-page-seven-blog .seven-line-fab { transition: none; transform: none; }
}

/* 店舗情報widgetはPHPでiframeなしに置換。親のprivacy/copyrightは維持する。 */
body.page-template-page-seven-blog #footer,
body.page-template-page-seven-blog #footer .footer-in,
body.page-template-page-seven-blog #footer .footer-bottom {
  background: var(--seven-primary-dark);
  color: var(--seven-surface);
  margin-top: 0;
  border-top: 0;
}
body.page-template-page-seven-blog #footer .footer-bottom-content,
body.page-template-page-seven-blog #footer #navi-footer,
body.page-template-page-seven-blog #footer #navi-footer-in,
body.page-template-page-seven-blog #footer .menu-footer,
body.page-template-page-seven-blog #footer .menu-footer li,
body.page-template-page-seven-blog #footer .menu-footer li a,
body.page-template-page-seven-blog #footer .copyright { background: transparent; }
body.page-template-page-seven-blog #footer .footer-in { padding-block: 24px; }
body.page-template-page-seven-blog #footer { padding: 0; }
body.page-template-page-seven-blog #footer .footer-left { width: 100%; padding: 0; }
body.page-template-page-seven-blog #footer .footer-center,
body.page-template-page-seven-blog #footer .footer-right,
body.page-template-page-seven-blog #footer .footer-bottom-logo,
body.page-template-page-seven-blog #footer .sns-follow-buttons { display: none; }
body.page-template-page-seven-blog #footer .widget { margin: 0; }
body.page-template-page-seven-blog #footer .seven-blog-footer-shop { text-align: center; font-size: 14px; }
body.page-template-page-seven-blog #footer .seven-blog-footer-shop p { margin: 0 0 8px; }
body.page-template-page-seven-blog #footer .seven-blog-footer-shop__name { font-size: 16px; font-weight: 700; }
body.page-template-page-seven-blog #footer a { color: var(--seven-surface); }
body.page-template-page-seven-blog #footer .seven-blog-footer-shop a {
  display: inline-flex;
  align-items: center;
  min-height: var(--seven-tap);
  text-underline-offset: 3px;
}
body.page-template-page-seven-blog #footer .footer-bottom { margin: 0; padding: 0; text-align: center; }
body.page-template-page-seven-blog #footer .footer-bottom-content { float: none; margin: 0; }
body.page-template-page-seven-blog #footer .navi-footer-in > .menu-footer { justify-content: center; margin: 0; padding: 0; }
body.page-template-page-seven-blog #footer .copyright { margin-top: 8px; font-size: 13px; }
body.page-template-page-seven-blog #footer #navi-footer li a { color: var(--seven-surface); }
body.page-template-page-seven-blog #footer #navi-footer li a:hover { background: transparent; }
body.page-template-page-seven-blog #main.main,
body.page-template-page-seven-blog #content,
body.page-template-page-seven-blog #content-in.wrap { margin-bottom: 0; padding-bottom: 0; }
body.page-template-page-seven-blog .seven-blog-cta { margin-bottom: 0; }

@media (max-width: 767px) {
  body.page-template-page-seven-blog #footer .footer-in { padding-block: 22px; }
}

/* Phase F7-3: page656の探索・サービス・ホームケア枠。共通カードの他用途には適用しない。 */
body.seven-blog-hub-page .seven-blog-hub .seven-blog-intro h1 {
  font-size: clamp(26px, 3vw, 36px);
  text-wrap: pretty;
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-intro p { max-width: 48em; }
body.seven-blog-hub-page .seven-blog-hub .seven-blog-text-link {
  display: inline-flex; align-items: center; min-height: 48px;
  margin-top: 12px; color: var(--seven-primary); text-underline-offset: 4px;
}
body.seven-blog-hub-page .seven-blog-hub [id] { scroll-margin-top: 24px; }
body.seven-blog-hub-page .seven-blog-hub .seven-blog-service + .seven-blog-service {
  margin-top: 40px; padding-top: 40px;
  border-top: var(--seven-border-w) solid var(--seven-border);
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-service > h3 {
  font-size: var(--seven-fs-h3); margin: 0 0 20px; line-height: 1.5;
}
body.seven-blog-hub-page .seven-blog-hub h4.seven-blog-card__title {
  padding: 0; border: 0; background: transparent; color: var(--seven-text);
  font-weight: 700; letter-spacing: normal; overflow-wrap: anywhere;
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-card__title {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; text-wrap: pretty;
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-card__excerpt {
  margin-top: 12px; color: var(--seven-text-muted); font-size: var(--seven-fs-small);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-card__more {
  display: block; margin-top: 16px; color: var(--seven-primary); font-weight: 700;
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-lead { margin-bottom: 24px; }
body.seven-blog-hub-page .seven-blog-hub .seven-blog-homecare { background: var(--seven-primary-soft); }
body.seven-blog-hub-page .seven-blog-hub .seven-blog-homecare [data-post-id="139"] .seven-blog-card__image {
  aspect-ratio: 3 / 2; background: var(--seven-surface);
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-homecare [data-post-id="139"] img { object-fit: contain; }
body.seven-blog-hub-page .seven-blog-hub .seven-blog-card__fallback {
  display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 24px; color: var(--seven-primary); text-align: center;
}
@media (min-width: 768px) {
  body.seven-blog-hub-page .seven-blog-hub .seven-blog-grid--service,
  body.seven-blog-hub-page .seven-blog-hub .seven-blog-grid--homecare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  body.seven-blog-hub-page .seven-blog-hub .seven-blog-topics .seven-blog-button { padding-inline: 16px; }
}

/* Phase F7-3.1: page656の指定区間だけ余白を25%縮小。 */
body.seven-blog-hub-page .seven-blog-hub [aria-labelledby="seven-blog-first-title"] {
  padding-bottom: calc(var(--seven-section-y) * .75);
}
body.seven-blog-hub-page .seven-blog-hub [aria-labelledby="seven-blog-latest-title"] {
  padding-block: calc(var(--seven-section-y) * .75);
}
body.seven-blog-hub-page .seven-blog-hub .seven-blog-cta {
  padding-top: calc(var(--seven-section-y) * .75);
}
@media (max-width: 767px) {
  body.seven-blog-hub-page.page-template-page-seven-blog .seven-line-fab {
    width: 100px; min-width: 100px; height: 44px; padding-inline: 8px; gap: 6px;
  }
  body.seven-blog-hub-page.page-template-page-seven-blog .seven-line-fab__icon {
    width: 20px; height: 20px;
  }
  body.seven-blog-hub-page.page-template-page-seven-blog .seven-line-fab__label::after {
    font-size: 12px;
  }
}