@charset "UTF-8";
/*!
 * seven-home.css — 新HOME専用（Phase D: 骨組みのみ）
 * ===========================================================================
 * 作成: 2026-09-02 (STEP3 Phase D)
 * 依存: seven-tokens.css（値はすべてトークンから参照する）
 *
 * 【現状】
 * スタイル宣言なし。Phase D では見た目を一切変更しません。
 *
 * 【役割】
 * 新トップページ（front-page.php）専用のレイアウト。
 * トップにしか出ない構造だけをここに置き、他ページへ漏れないようにする。
 *
 * 【将来ここで管理するセクション】
 *   HERO              … コピー / CTA / 実写。店舗理解の入口
 *   サービス入口       … メンズ / レディース / まつ毛 / 美容ケアへの分岐
 *   人気メニュー       … 価格情報。TablePress との整合に注意
 *   店舗の強み         … 選ばれる理由
 *   STAFF             … 担当者紹介
 *   STYLE             … 施術事例
 *   BLOG              … 最新記事。ブログ→来店/収益 導線の起点
 *   ACCESS            … 店舗情報。単一ソース（inc/shop-info.php 予定）を参照
 *   LINE予約CTA        … 最重要コンバージョン
 *
 * 【スコープ方針】
 * 原則としてトップ固有クラスを起点にする。
 *   例) .seven-home .seven-hero { ... }
 * body.home / body.home-page 等のテーマ側クラスに依存しすぎない。
 * front-page.php 側でルート要素に .seven-home を付与する前提とする。
 * （テーマのbodyクラスが変わっても壊れないようにするため）
 *
 * 【収益化との関係】
 * トップの LINE予約CTA と BLOG セクションは、
 * 「来店」と「記事経由の収益」の双方の入口になる。
 * CTA の見た目は seven-tokens.css の CTA トークンを参照し、
 * このファイルには配置とレイアウトのみを書く。
 * ===========================================================================
 */

/* ===========================================================================
   Phase E1: 新HOME 実装
   すべて body.home 配下にスコープする。サイト全体へ影響させない。
   !important は使用しない。
   =========================================================================== */

/* --- Cocoonのカラム枠を新HOMEでのみ解除 -------------------------------------
   Cocoon の DOM: #content > #content-in.wrap > (main#main + #sidebar)
   .main は 860px 固定、.sidebar は 376px。
   仕様の 1180px コンテナ・2カラムHERO・4カラムカードは
   このままでは成立しないため、HOMEに限り全幅化しサイドバーを非表示にする。
   （現在サイドバーに入っているのは author_box ウィジェット1つのみ）
   ------------------------------------------------------------------------ */
body.home #content-in.wrap { width: auto; max-width: none; margin: 0; padding: 0; }
body.home #main.main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--seven-bg);
  box-shadow: none;
  overflow-x: hidden; /* 375px で横スクロールを出さない保険 */
}
body.home #sidebar { display: none; }
body.home #content { margin-top: 0; padding-top: 0; }

/* --- 基本 ---------------------------------------------------------------- */
body.home .seven-home {
  font-family: var(--seven-font);
  font-size: var(--seven-fs-body);
  line-height: var(--seven-lh-body);
  color: var(--seven-text);
  background: var(--seven-bg);
}
body.home .seven-home img { max-width: 100%; height: auto; }

body.home .seven-container {
  width: 100%;
  max-width: var(--seven-container);
  margin-inline: auto;
  padding-inline: var(--seven-gutter);
  box-sizing: border-box;
}

body.home .seven-section { padding-block: var(--seven-section-y); }

body.home .seven-eyebrow {
  margin: 0 0 12px;
  font-size: var(--seven-fs-small);
  letter-spacing: .08em;
  color: var(--seven-primary);
}

body.home .seven-h2 {
  margin: 0 0 32px;
  font-size: var(--seven-fs-h2);
  font-weight: 700;
  line-height: 1.4;
  color: var(--seven-text);
}

body.home .seven-section__cta { margin: 32px 0 0; text-align: center; }

/* --- ボタン -------------------------------------------------------------- */
body.home .seven-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
body.home .seven-btn-group--center { justify-content: center; }

body.home .seven-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--seven-btn-h);
  padding: 0 28px;
  border: var(--seven-border-w) solid transparent;
  border-radius: var(--seven-radius-pill);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.home .seven-btn--primary { background: var(--seven-primary); color: #fff; }
body.home .seven-btn--primary:hover { background: var(--seven-primary-dark); }

body.home .seven-btn--secondary {
  background: var(--seven-surface);
  border-color: var(--seven-primary);
  color: var(--seven-primary);
}
body.home .seven-btn--secondary:hover { background: var(--seven-primary-soft); }

/* LINE予約のみ LINE緑を使う */
body.home .seven-btn--line { background: var(--seven-line); color: #fff; }
body.home .seven-btn--line:hover { background: var(--seven-line-dark); }

/* primary背景の上に置くセカンダリ */
body.home .seven-btn--on-primary {
  background: transparent;
  border-color: rgba(255, 255, 255, .8);
  color: #fff;
}
body.home .seven-btn--on-primary:hover { background: rgba(255, 255, 255, .12); }

body.home .seven-home a:focus-visible,
body.home .seven-home .seven-btn:focus-visible {
  outline: 3px solid var(--seven-accent);
  outline-offset: 2px;
}

/* --- カード共通 ---------------------------------------------------------- */
body.home .seven-card-grid {
  display: grid;
  gap: var(--seven-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home .seven-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.home .seven-card-grid--3 { grid-template-columns: 1fr; }

body.home .seven-card {
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: var(--seven-border-w) solid var(--seven-border);
  border-radius: var(--seven-radius);
  background: var(--seven-surface);
  box-shadow: var(--seven-shadow);
  box-sizing: border-box;
}
body.home .seven-card__title {
  margin: 0 0 12px;
  font-size: var(--seven-fs-h3);
  font-weight: 700;
  line-height: 1.5;
}
body.home .seven-card__text { margin: 0; color: var(--seven-text-muted); }

body.home .seven-card__link {
  margin-top: auto;
  padding-top: 16px;
  min-height: var(--seven-tap);
  display: inline-flex;
  align-items: center;
  color: var(--seven-primary);
  font-weight: 700;
  text-decoration: none;
}
body.home .seven-card__link:hover { text-decoration: underline; }

body.home .seven-badge {
  display: inline-block;
  margin: 0 0 8px;
  padding: 4px 10px;
  border-radius: var(--seven-radius-pill);
  background: var(--seven-primary-soft);
  color: var(--seven-primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
body.home .seven-badge--muted { background: var(--seven-accent-soft); color: var(--seven-accent); }

body.home .seven-taglist,
body.home .seven-menu-card__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--seven-text-muted);
  font-size: var(--seven-fs-small);
}
body.home .seven-taglist li,
body.home .seven-menu-card__items li {
  padding: 4px 10px;
  border: var(--seven-border-w) solid var(--seven-border);
  border-radius: var(--seven-radius-pill);
}

/* --- placeholder --------------------------------------------------------- */
body.home .seven-placeholder {
  display: block;
  width: 100%;
  border-radius: 12px;
  background:
    repeating-linear-gradient(45deg,
      var(--seven-accent-soft) 0 10px,
      var(--seven-bg) 10px 20px);
  border: var(--seven-border-w) solid var(--seven-border);
}
body.home .seven-placeholder--square   { aspect-ratio: 1 / 1; }
body.home .seven-placeholder--portrait { aspect-ratio: 3 / 4; }
body.home .seven-placeholder--wide     { aspect-ratio: 16 / 10; }
body.home .seven-tbd { color: var(--seven-text-muted); }

/* --- 01 HERO ------------------------------------------------------------- */
body.home .seven-hero { padding-top: 32px; }
body.home .seven-hero__inner { display: grid; gap: 28px; }
body.home .seven-hero__title {
  margin: 0 0 20px;
  font-size: var(--seven-fs-h1);
  font-weight: 700;
  line-height: 1.3;
}
body.home .seven-hero__lead { margin: 0; color: var(--seven-text-muted); }
body.home .seven-hero__note {
  margin: 12px 0 0;
  font-size: var(--seven-fs-small);
  color: var(--seven-text-muted);
}
body.home .seven-hero__img {
  width: 100%;
  border-radius: var(--seven-radius);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* --- 03 FIRST VISIT ------------------------------------------------------ */
body.home .seven-trust { background: var(--seven-primary-soft); }
body.home .seven-trust-card__no,
body.home .seven-service-card__no {
  margin: 0 0 8px;
  font-size: var(--seven-fs-small);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--seven-accent);
}

/* --- 05 STYLE ------------------------------------------------------------ */
body.home .seven-style__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--seven-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.home .seven-style__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* --- 06 STAFF ------------------------------------------------------------ */
body.home .seven-staff-card__media { margin-bottom: 16px; }
body.home .seven-staff-card__img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* --- 07 HOMECARE --------------------------------------------------------- */
body.home .seven-homecare { background: var(--seven-accent-soft); }
body.home .seven-homecare__inner { display: grid; gap: 28px; }
body.home .seven-homecare__lead { margin: 0; color: var(--seven-text-muted); }
body.home .seven-homecare__img {
  width: 100%;
  border-radius: var(--seven-radius);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

/* --- 08 BLOG ------------------------------------------------------------- */
body.home .seven-post-card { padding: 0; overflow: hidden; }
body.home .seven-post-card__media { margin: 0; }
body.home .seven-post-card__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
body.home .seven-post-card__body { padding: 16px 20px 20px; }
body.home .seven-post-card__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
body.home .seven-post-card__link { color: var(--seven-text); text-decoration: none; }
body.home .seven-post-card__link:hover { text-decoration: underline; }
body.home .seven-post-card__date {
  margin: 0;
  font-size: var(--seven-fs-small);
  color: var(--seven-text-muted);
}

/* --- 09 ACCESS ----------------------------------------------------------- */
body.home .seven-access__box {
  padding: 24px 20px;
  border: var(--seven-border-w) solid var(--seven-border);
  border-radius: var(--seven-radius);
  background: var(--seven-surface);
}
body.home .seven-access__list { margin: 0; }
body.home .seven-access__row {
  display: grid;
  gap: 2px;
  padding: 14px 0;
  border-bottom: var(--seven-border-w) solid var(--seven-border);
}
body.home .seven-access__row:last-child { border-bottom: 0; }
body.home .seven-access__row dt {
  font-size: var(--seven-fs-small);
  font-weight: 700;
  color: var(--seven-text-muted);
}
body.home .seven-access__row dd { margin: 0; }
body.home .seven-access__row dd a {
  color: var(--seven-primary);
  min-height: var(--seven-tap);
  display: inline-flex;
  align-items: center;
}

/* --- 10 FINAL CTA -------------------------------------------------------- */
body.home .seven-final-cta { background: var(--seven-primary); color: #fff; }
body.home .seven-final-cta__inner { text-align: center; }
body.home .seven-final-cta__title { color: #fff; margin-bottom: 16px; }
body.home .seven-final-cta__lead { margin: 0; color: rgba(255, 255, 255, .88); }
body.home .seven-final-cta .seven-btn-group { justify-content: center; }

/* --- 動きの抑制 ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.home .seven-home * { transition: none; animation: none; }
  /* 固定LINE CTA は .seven-home の外（wp_footer 出力）にあるため個別に指定 */
  body.home .seven-line-fab { transition: none; }
  body.home .seven-line-fab--hidden { transform: none; }
}

/* ===========================================================================
   Responsive
   =========================================================================== */
@media (min-width: 768px) {
  body.home .seven-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.home .seven-card-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.home .seven-style__grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.home .seven-card { padding: 24px; }
  body.home .seven-access__row { grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
  body.home .seven-staff__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  body.home .seven-hero { padding-top: 48px; }
  body.home .seven-hero__inner,
  body.home .seven-homecare__inner {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
  }
  body.home .seven-card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.home .seven-hero__img { aspect-ratio: 5 / 4; }
}

/* ===========================================================================
   Phase E2: Conversion-focused refinement
   すべて body.home スコープ。!important は使わない。
   =========================================================================== */

/* ===========================================================================
   Phase E3: Homepage Conversion Polish
   実DOM/実CSSを調査して特定した「実際に効いているセレクタ」に対して指定する。
   すべて body.home スコープ。!important は使わない。
   =========================================================================== */

/* --- A-1/A-2. header の高さ -----------------------------------------------
   実測で判明した原因:
     親 style.css  .logo-text     { padding: 20px 0 30px; }
     親 style.css  .site-name-text{ font-size: 28px; }
     skin          .logo-text     { padding: 2em 0; }          ← 本命
     skin          #header .logo .site-name-text { font-size: 1em; }
     skin          .navi-in > ul li { height: 64px; }
   body に fz-18px が付いているため skin の 2em ≒ 36px が上下に入り、
   ロゴ行だけで 100px 超になっていた。Phase E2 は #header-in に padding を
   当てていたため効かなかった。実際の指定元である .logo-text に当て直す。
   ------------------------------------------------------------------------ */
body.home .logo-text { padding: 12px 0; }
body.home #header .logo .site-name-text {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}
body.home #header .logo a,
body.home #header .logo .site-name-text-link { color: var(--seven-primary-dark); }
body.home #header,
body.home #header-in.header-in { background: var(--seven-surface); }
body.home #header-in.header-in { padding-block: 0; }

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

/* --- A-2. desktop navigation を約25%コンパクトに（リンク内容は不変） ------ */
body.home .navi-in > ul li { height: 48px; }
body.home .navi-in > ul .menu-item-has-description > a > .caption-wrap {
  height: 48px;
  line-height: 22px;
}
body.home .navi-in > ul .sub-menu ul { top: -48px; }

/* --- 12. navigation の配色（skin の #header-container 指定を上書き） ------ */
body.home #header-container .navi,
body.home #navi {
  background: var(--seven-surface);
  border-bottom: var(--seven-border-w) solid var(--seven-border);
}
body.home #header-container .navi a,
body.home #navi .menu-header a { background: transparent; color: var(--seven-primary-dark); }
body.home #header-container .navi a:hover,
body.home #navi .menu-header a:hover { background: var(--seven-primary-soft); color: var(--seven-primary-dark); }
body.home #navi .navi-in > ul .sub-menu { background: var(--seven-surface); }

/* --- D-2. 店舗外観の背景画像を HOME では出さない ---------------------------
   出どころ: <style id="custom-background-css"> body.custom-background { … }
   画像データは削除していない。HOME でのみ背景を差し替える。
   ------------------------------------------------------------------------ */
body.home.custom-background,
body.home {
  background-image: none;
  background-color: var(--seven-bg);
}

/* --- D-3. PAGE TOP のベージュ帯を HOME では出さない ------------------------
   skin: .page-top a { background:#d7cac4; margin-top:3em; }
   Cocoon 機能自体はサイト全体で有効のまま。HOME だけ非表示にする。
   ------------------------------------------------------------------------ */
body.home .page-top,
body.home .page-top a { display: none; }

/* --- 4/5. サービスカード：mobile 密度調整 -------------------------------- */
body.home .seven-badge { padding: 3px 9px; font-size: 11px; letter-spacing: 0; }
body.home .seven-service-card { justify-content: flex-start; }

@media (max-width: 767px) {
  body.home .seven-services .seven-card { padding: 14px 12px; }
  body.home .seven-services .seven-card__title { margin-bottom: 8px; font-size: 18px; }
  body.home .seven-services .seven-taglist { gap: 6px; font-size: 13px; }
  body.home .seven-services .seven-taglist li { padding: 3px 8px; }
  body.home .seven-services .seven-card-grid { gap: 12px; align-items: start; }
}

/* --- C-3. PRICE GUIDE ---------------------------------------------------- */
body.home .seven-section__lead {
  margin: -20px 0 28px;
  color: var(--seven-text-muted);
}
body.home .seven-price-card { align-items: flex-start; gap: 2px; }
body.home .seven-price-card__cat {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: var(--seven-primary);
}
body.home .seven-price-card__menu {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
}
body.home .seven-price-card__note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--seven-text-muted);
}
body.home .seven-price-card__price {
  margin: 6px 0 0;
  font-size: 26px;          /* 価格を最も目立たせる */
  font-weight: 700;
  line-height: 1.2;
  color: var(--seven-primary-dark);
  letter-spacing: .01em;
}
body.home .seven-price-guide__caution {
  margin: 20px 0 0;
  font-size: 13px;
  color: var(--seven-text-muted);
}

@media (max-width: 767px) {
  body.home .seven-price-grid { gap: 12px; }
  body.home .seven-price-card { padding: 14px 12px; }
  body.home .seven-price-card__menu { font-size: 15px; }
  body.home .seven-price-card__price { font-size: 23px; }
  body.home .seven-section__lead { margin: -12px 0 20px; font-size: 15px; }
}

/* --- 6. FIRST VISIT：mobile は縦3項目のコンパクト表示 -------------------- */
@media (max-width: 767px) {
  body.home .seven-trust .seven-card-grid { gap: 0; }
  body.home .seven-trust .seven-card {
    padding: 14px 0;
    border: 0;
    border-bottom: var(--seven-border-w) solid var(--seven-border);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  body.home .seven-trust .seven-card:last-child { border-bottom: 0; padding-bottom: 0; }
  body.home .seven-trust .seven-card:first-child { padding-top: 0; }
  body.home .seven-trust-card__no { margin-bottom: 2px; font-size: 12px; }
  body.home .seven-trust .seven-card__title { margin-bottom: 4px; font-size: 17px; }
  body.home .seven-trust .seven-card__text { font-size: 15px; line-height: 1.7; }
  body.home .seven-trust .seven-h2 { margin-bottom: 20px; }
}

/* --- 8. BLOG：mobile は横型カード ---------------------------------------- */
@media (max-width: 767px) {
  body.home .seven-blog .seven-card-grid { gap: 12px; }
  body.home .seven-blog .seven-post-card {
    flex-direction: row; align-items: stretch; gap: 12px; padding: 10px;
  }
  body.home .seven-post-card__media { flex: 0 0 120px; max-width: 120px; }
  body.home .seven-post-card__img {
    height: 100%; min-height: 90px; max-height: 110px;
    aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px;
  }
  body.home .seven-post-card__body {
    flex: 1 1 auto; min-width: 0; padding: 2px 4px 2px 0;
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
  }
  body.home .seven-post-card__title {
    margin: 0; font-size: 15px; line-height: 1.5;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }
  body.home .seven-post-card__link { display: block; min-height: var(--seven-tap); }
  body.home .seven-post-card__date { font-size: 12px; }
  body.home .seven-blog .seven-badge { margin-bottom: 0; }
}

/* --- Phase E4. desktop の section 間隔を約15%圧縮 --------------------------
   HERO と FINAL CTA は現在の余白を維持し、中間セクションのみ詰める。
   mobile は現状維持（この指定は 768px 以上のみ）。
   ------------------------------------------------------------------------ */
@media (min-width: 768px) {
  body.home .seven-services,
  body.home .seven-price-guide,
  body.home .seven-trust,
  body.home .seven-homecare,
  body.home .seven-blog,
  body.home .seven-access { padding-block: calc(var(--seven-section-y) * 0.85); }
}

/* --- 16. ACCESS：mobile を少し圧縮（内容は減らさない） ------------------- */
@media (max-width: 767px) {
  body.home .seven-access__box { padding: 16px 14px; }
  body.home .seven-access__row { padding: 10px 0; gap: 1px; }
  body.home .seven-access__row dt { font-size: 13px; }
  body.home .seven-access__row dd { font-size: 15px; line-height: 1.6; }
  body.home .seven-access__row dd a { min-height: var(--seven-tap); }
  body.home .seven-access .seven-section__cta { margin-top: 16px; }
}

/* --- D-1/D-4/D-5 + Phase E4. HOME footer -----------------------------------
   skin が #footer { background:#9b7b6c } と ID セレクタで指定しているため、
   クラスのみのセレクタでは詳細度が足りない。ID を含めて指定する。
   ウィジェットは sidebars_widgets フィルターで出力段階から除外済み。

   Phase E4: copyright 帯に旧茶色が残るという報告を受け、footer-bottom 配下の
   全要素の背景を明示的に透過にして、どこから背景が来ても dark green に
   統一されるようにした（防御的指定）。
   ------------------------------------------------------------------------ */
body.home #footer,
body.home #footer .footer-in,
body.home #footer .footer-bottom {
  background: var(--seven-primary-dark);
  color: #fff;
  border-top: 0;
  margin-top: 0;
}

/* footer-bottom 配下は一切の背景を持たせない */
body.home #footer .footer-bottom-logo,
body.home #footer .footer-bottom-content,
body.home #footer .navi-footer,
body.home #footer #navi-footer,
body.home #footer #navi-footer-in,
body.home #footer .navi-footer-in,
body.home #footer .menu-footer,
body.home #footer .menu-footer li,
body.home #footer .menu-footer li a,
body.home #footer .source-org,
body.home #footer .copyright {
  background: transparent;
  background-color: transparent;
}

body.home #footer .footer-widgets,
body.home #footer .footer-widgets-mobile { display: none; }

/* 余白の整理（固定 height は設けず padding で調整） */
body.home #footer .footer-in { padding-block: 24px; }
body.home #footer .footer-bottom { margin-top: 0; padding: 0; }
body.home #footer .footer-bottom-logo { margin-bottom: 10px; }
body.home #footer .footer-bottom-content { float: none; margin: 0; }
body.home #footer .navi-footer-in > .menu-footer { margin: 0; padding: 0; }
body.home #footer .copyright { margin-top: 8px; }

/* 中央揃え（mobile / desktop とも） */
body.home #footer .footer-bottom,
body.home #footer .footer-bottom-logo,
body.home #footer .footer-bottom-content { text-align: center; }
body.home #footer .navi-footer-in > ul { justify-content: center; }

body.home #footer a { color: #fff; }
body.home #footer .logo-footer .site-name-text { color: #fff; font-size: 16px; }
body.home #footer .copyright { color: rgba(255, 255, 255, .85); font-size: 13px; }
body.home #footer #navi-footer li a { color: rgba(255, 255, 255, .85); }
body.home #footer #navi-footer li a:hover { color: #fff; background: transparent; }
body.home #footer .sns-follow-buttons a { color: #fff; }

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

/* --- Phase E4. FINAL CTA → footer の接続 -----------------------------------
   FINAL CTA(dark green) と footer(primary-dark) の間に出ていた
   cream の帯を消す。帯の正体はメインカラム(.main)の下端の余白。
   境界は 1px の細いラインだけで示す。
   ------------------------------------------------------------------------ */
body.home #main.main { padding-bottom: 0; margin-bottom: 0; }
body.home #content { margin-bottom: 0; padding-bottom: 0; }
body.home #content-in.wrap { margin-bottom: 0; padding-bottom: 0; }
body.home .seven-final-cta { margin-bottom: 0; }
body.home #footer { border-top: 1px solid rgba(255, 255, 255, .14); }

/* --- B-2/B-4. モバイル・PC 共通の固定LINE CTA -----------------------------
   既定は「非表示」。JS が表示可能と判断したときだけ .seven-line-fab--visible
   を付けて出す（progressive enhancement）。
   JS 無効／未対応時は固定CTAは出ないが、HERO と FINAL CTA に
   通常のLINE予約導線があるため予約導線は壊れない。
   mu-plugins/line-fab.php の PHP / 既存JS は変更していない。
   ラベル文言は PHP を触れないため ::after で差し替える
   （読み上げ名は元の aria-label="LINEでご予約はこちら" が使われる）。
   ------------------------------------------------------------------------ */
body.home .seven-line-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;

  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);
  color: #fff;
  box-shadow: 0 4px 14px rgba(38, 49, 46, .18);
}
body.home .seven-line-fab--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
body.home .seven-line-fab__icon { width: 26px; height: 26px; flex: 0 0 auto; }
body.home .seven-line-fab__label { font-size: 0; line-height: 1; }
body.home .seven-line-fab__label small { display: none; }
body.home .seven-line-fab__label::after {
  content: "LINE予約";
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 767px) {
  body.home .seven-line-fab {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-width: 124px;
    height: 48px;
    padding-inline: 14px;
  }
  body.home .seven-line-fab__icon { width: 24px; height: 24px; }
  body.home .seven-line-fab__label::after { font-size: 14px; }
}

/* --- Cocoon標準モバイル固定フッター（HOMEのみ非表示） ---------------------- */
body.home .mobile-footer-menu-buttons,
body.home .mobile-menu-buttons { display: none; }

/* --- 動きの抑制 ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.home .seven-home * { transition: none; animation: none; }
  body.home .seven-line-fab { transition: none; transform: none; }
  body.home .seven-line-fab--visible { transform: none; }
}