/*
Theme Name: Tanukipress
Theme URI: https://www.iwate-kaitai.co.jp/
Author: 澤田昌平
Description: サービス事業向けの軽量・シンプルなオリジナルテーマ。ロゴ・色・ヒーロー・セクション構成をカスタマイザーやブロックパターンで柔軟に調整できます。
Version: 0.1.2
Text Domain: tanukipress
*/

/* ============================================
   ブロックエディターの配置クラスサポート
   ============================================ */

/* WordPressブロックエディターの配置クラスを確実に機能させる */
/* パターン挿入後にブロックエディターで変更した配置設定を確実に反映 */
.has-text-align-left {
  text-align: left !important;
}

.has-text-align-center {
  text-align: center !important;
}

.has-text-align-right {
  text-align: right !important;
}

/* ブロック要素（見出し・段落）にも適用 */
.wp-block-heading.has-text-align-left,
h1.has-text-align-left,
h2.has-text-align-left,
h3.has-text-align-left {
  text-align: left !important;
}

.wp-block-heading.has-text-align-center,
h1.has-text-align-center,
h2.has-text-align-center,
h3.has-text-align-center {
  text-align: center !important;
}

.wp-block-heading.has-text-align-right,
h1.has-text-align-right,
h2.has-text-align-right,
h3.has-text-align-right {
  text-align: right !important;
}

.wp-block-paragraph.has-text-align-left,
p.has-text-align-left {
  text-align: left !important;
}

.wp-block-paragraph.has-text-align-center,
p.has-text-align-center {
  text-align: center !important;
}

.wp-block-paragraph.has-text-align-right,
p.has-text-align-right {
  text-align: right !important;
}

/* ============================================
   ベースリセットとタイポグラフィ
   ============================================ */

/* ベースリセットとタイポグラフィ（最低限） */
:root {
  --tanukipress-primary: #f97316;
  --tanukipress-accent: #2563eb;
  --tanukipress-header-bg: #111827;
  --tanukipress-body-bg: #ffffff;
  /* 派生カラー（親カラー変更時も調和しやすいように固定比率で設計） */
  --tanukipress-primary-dark: #c35a10;
  --tanukipress-primary-soft: #fff3e6;
  --tanukipress-accent-soft: #e5efff;
  --tanukipress-header-soft: #1f2937;

  /* セクション背景・ボーダー・本文テキスト用の共通カラー */
  --tanukipress-section-bg-muted: #f3f4f6;
  --tanukipress-border-soft: #e5e7eb;
  --tanukipress-text-main: #1f2937;

  /* セクションの余白・装飾（後でカスタマイザーから調整しやすい前提の基準値） */
  --tanukipress-section-padding-y: 2.5rem;
  --tanukipress-section-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  
  /* 見出しの下線デザイン用 */
  --tanukipress-heading-underline-width: 60px;
  --tanukipress-heading-underline-height: 3px;

  /* ボタン用の共通パラメータ */
  --tanukipress-button-radius: 9999px;
  --tanukipress-button-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
  /* 固定ヘッダーの想定高さ（レイアウト補正用） */
  --tanukipress-header-height: 80px;
}

/* 見出しの太さ（カスタマイザー連動） */
h1, h2, h3,
.section-title,
.footer-widget-area .widget-title {
  font-weight: var(--tanukipress-heading-font-weight, 600);
}

h1 {
  /* フォントサイズはエディターで調整可能（基本的には修正不要） */
  /* デフォルト値として clamp() を残す場合は、インラインスタイルが優先される */
  line-height: 1.25;
  margin-top: 0;
  margin-bottom: 1rem;
}

h2 {
  /* フォントサイズはエディターで調整可能（基本的には修正不要） */
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.75rem;
}

h3 {
  /* フォントサイズはエディターで調整可能（基本的には修正不要） */
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tanukipress-text-main);
  background: var(--tanukipress-body-bg);
}

/* ヘッダー／フッター用フォント切り替え（タイポグラフィ設定） */
body.font-header-noto header,
body.font-header-noto header .site-nav,
body.font-header-noto header .site-nav a {
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-header-serif header,
body.font-header-serif header .site-nav,
body.font-header-serif header .site-nav a {
  font-family: "Noto Serif JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-header-modern header,
body.font-header-modern header .site-nav,
body.font-header-modern header .site-nav a {
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-header-rounded header,
body.font-header-rounded header .site-nav,
body.font-header-rounded header .site-nav a {
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-footer-noto .site-footer {
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-footer-rounded .site-footer {
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-footer-serif .site-footer {
  font-family: "Noto Serif JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.font-footer-modern .site-footer {
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a {
  color: var(--tanukipress-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

header, footer {
  background: var(--tanukipress-header-bg);
  color: var(--tanukipress-header-text, #f9fafb);
}

header .site-nav a {
  color: var(--tanukipress-header-nav, #000000);
}

/* フッター（Tanukipress 専用レイアウト） */
.site-footer {
  background: var(--tanukipress-footer-bg, #020617);
  color: var(--tanukipress-footer-text, var(--tanukipress-border-soft));
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

.site-footer .site-wrapper {
  padding-top: 3.5rem;
  padding-bottom: 2.5rem;
}

.footer-widgets {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-widgets.footer-widgets-columns-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.footer-widgets.footer-widgets-columns-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* スマホ表示時は3カラムレイアウトを無効化 */
@media (max-width: 768px) {
  .footer-widgets.footer-widgets-columns-3 {
    grid-template-columns: 1fr !important;
  }
}

.footer-widget-area {
  font-size: calc(0.9rem * var(--tanukipress-footer-font-scale, 1));
}

/* デフォルトフッター（ウィジェット未設定時） */
.footer-default .footer-widget-area {
  display: flex;
  align-items: flex-start;
}

.footer-default-company {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.footer-default-logo {
  margin-bottom: 0.25rem;
}

.footer-default-logo img {
  max-height: 40px;
  height: auto;
  width: auto;
}

.footer-site-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.footer-default-company-text p {
  margin: 0.15rem 0;
  line-height: 1.7;
}

.footer-company-name {
  font-weight: 600;
  font-size: 1.05rem;
}

.footer-default-links {
  display: flex;
  gap: 2.5rem;
  width: 100%;
  justify-content: space-between;
}

.footer-links-column {
  min-width: 140px;
  flex: 1 1 0;
}

.footer-links-column ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0;
}

.footer-links-column li {
  margin: 0.05rem 0;
}

.footer-links-column a {
  color: var(--tanukipress-border-soft);
  font-size: 0.9rem;
  opacity: 0.9;
}

.footer-links-column a:hover {
  text-decoration: underline;
  opacity: 1;
}

.footer-widget-area .widget-title {
  font-size: 1.05rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
  letter-spacing: 0.06em;
}

.footer-widget-area p {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

.footer-bottom {
  border-top: 1px solid rgba(148, 163, 184, 0.3);
  margin-top: 1.5rem; /* 上部3カラムとの間隔 */
  padding-top: 1.25rem; /* ボトムバー内の余白 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  color: #9ca3af;
}

.footer-copy {
  margin: 0;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-nav a {
  color: var(--tanukipress-border-soft);
  font-size: calc(0.8rem * var(--tanukipress-footer-font-scale, 1));
  opacity: 0.9;
}

.footer-nav a:hover {
  text-decoration: underline;
  opacity: 1;
}
@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* スマホ画面でのフッター各カラム表示制御（カスタマイザー設定に応じて切り替え） */
@media (max-width: 768px) {
  /* デフォルト: すべて非表示にしてから、body クラスに応じて表示 */
  .site-footer .footer-widget-area.footer-widget-1,
  .site-footer .footer-widget-area.footer-widget-2,
  .site-footer .footer-widget-area.footer-widget-3 {
    display: none !important;
  }

  /* 左カラムを表示 */
  body.footer-mobile-show-left .site-footer .footer-widget-area.footer-widget-1 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 中央カラムを表示 */
  body.footer-mobile-show-center .site-footer .footer-widget-area.footer-widget-2 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 右カラムを表示 */
  body.footer-mobile-show-right .site-footer .footer-widget-area.footer-widget-3 {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 表示されるカラム数に応じてグリッドを自動調整（シンプルに 1 カラム） */
  /* 1カラムのみ表示の場合でも、横幅全体を使用する */
  .site-footer .footer-widgets {
    grid-template-columns: 1fr !important;
    justify-items: stretch !important; /* カラムを横幅全体に広げる */
  }

  /* 表示されているカラムが横幅全体を使うように */
  body.footer-mobile-show-left .site-footer .footer-widget-area.footer-widget-1,
  body.footer-mobile-show-center .site-footer .footer-widget-area.footer-widget-2,
  body.footer-mobile-show-right .site-footer .footer-widget-area.footer-widget-3 {
    width: 100% !important;
    max-width: 100% !important;
    grid-column: 1 / -1 !important; /* グリッドの全幅を使用 */
  }
}

/* ヘッダーは透過率付きのRGBAを優先して利用 */
header {
  background: var(--tanukipress-header-bg);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
}

main {
  /* 固定ヘッダーの高さぶんだけ下げて、コンテンツが重ならないようにする */
  padding-top: var(--tanukipress-header-offset, var(--tanukipress-header-height));
}

/* テーマ専用: 他のプラグインCSSよりもヘッダー背景色を優先させる（透過率付き変数を尊重） */
body.wp-theme-fujitec-originaltheme > header {
  background: var(--tanukipress-header-bg-rgba, var(--tanukipress-header-bg)) !important;
}

.site-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem;
}

/* パンくずリスト（ヘッダー直下の細いバー） */
.tanukipress-breadcrumb {
  background: transparent;
  color: inherit;
  font-size: 0.85rem;
}

.tanukipress-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.tanukipress-breadcrumb__item {
  display: flex;
  align-items: center;
}

.tanukipress-breadcrumb__item + .tanukipress-breadcrumb__item::before {
  content: ">";
  margin: 0 0.3rem;
  opacity: 0.7;
  color: inherit;
}

.tanukipress-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

.tanukipress-breadcrumb a:hover {
  text-decoration: underline;
}

.tanukipress-breadcrumb__current {
  opacity: 0.85;
}

header .site-wrapper {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左からロゴ→メニューの順に並べる */
  gap: 1.5rem;
  padding: 0.5rem 1.5rem;      /* 上下0.5rem・左右1.5rem の余白のみ */
  box-sizing: border-box;      /* padding を含めてちょうど画面幅に収める */
  max-width: 100%;             /* 画面幅を超えないようにする */
  margin: 0;                   /* 中央寄せを解除し、左端から配置 */
  transition: padding 0.25s ease;
}

/* スクロール時にヘッダーを少しコンパクトにする */
body.header-shrink header .site-wrapper {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

body.header-shrink .site-branding {
  display: none; /* 縮小時はロゴ・サイトタイトルを隠してメニューのみの簡易ヘッダーにする */
}

body.header-shrink .site-logo img {
  max-height: calc(var(--tanukipress-logo-max-height, 64px) * 0.7);
}

body.header-shrink header .site-nav a {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

/* 管理バー表示時でも縮小ヘッダーのメニューが隠れないよう、上に32px分オフセットする */
body.admin-bar.header-shrink header {
  top: 32px;
}

/* ロゴブロックは左側に固定、メニューは右側に寄せる */
.site-branding {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 0 0 auto;
}

.site-nav {
  margin-left: auto; /* ロゴの反対側（右端）に押し出す */
}

/* ロゴの縦位置（ヘッダー内での上下揃え） */
body.logo-valign-top header .site-wrapper {
  align-items: flex-start;
}

body.logo-valign-middle header .site-wrapper {
  align-items: center;
}

body.logo-valign-bottom header .site-wrapper {
  align-items: flex-end;
}

/* ブロックエディターの配置オプション（幅広／全幅）に対応 */
.alignwide {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.alignfull {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.site-branding {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: var(--tanukipress-logo-margin-y, 16px);
  margin-bottom: var(--tanukipress-logo-margin-y, 16px);
  width: auto;
}

/* ロゴとタイトルの相対配置 */
.site-branding-text-right {
  flex-direction: row;
}

.site-branding-text-bottom {
  flex-direction: column;
  align-items: flex-start;
}

.site-branding-align-center {
  justify-content: center;
}

.site-branding-align-left {
  justify-content: flex-start;
}

.site-logo img {
  max-height: var(--tanukipress-logo-max-height, 64px);
  height: auto;
  width: auto;
  transition: max-height 0.25s ease;
}

/* メインナビゲーション（PCレイアウト） */
header .site-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  margin-left: auto;
}

header .site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1.5rem;
}

header .site-nav li {
  margin: 0;
  padding: 0;
}

header .site-nav a,
header .site-nav a:visited {
  color: var(--tanukipress-header-nav, #f9fafb);
  font-size: calc(1rem * var(--tanukipress-header-font-scale, 1));
  text-decoration: none;
  padding: 0.75rem 1rem;
  display: inline-block;
  position: relative;
  transition: padding 0.25s ease, font-size 0.25s ease;
  border-radius: 0.25rem;
  font-weight: 500;
  transition: background-color 0.16s ease, color 0.16s ease;
  background: transparent;
  border: none;
  box-shadow: none;
  white-space: normal !important; /* 他CSSが nowrap を指定していても折り返せるようにする */
}

/* デフォルトは背景色ホバー（menu-style-bg） */
body.menu-style-bg header .site-nav a:hover,
body.menu-style-bg header .site-nav .current-menu-item > a {
  background: var(--tanukipress-menu-hover-bg) !important;
  color: var(--tanukipress-header-nav, #f9fafb) !important;
  border-radius: 0.25rem;
}

/* メニュー文字の直下に表示するアニメーション下線 */
header .site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.15rem;
  width: 0;
  height: 2px;
  background: var(--tanukipress-menu-hover-bg);
  transition: width 0.16s ease;
}

/* 下線が伸びるスタイル（メニュースタイル: 下線 のときのみ有効） */
body.menu-style-underline header .site-nav a:hover::after,
body.menu-style-underline header .site-nav .current-menu-item > a::after {
  width: 100%;
}

body.menu-style-underline header .site-nav .current-menu-item > a {
  font-weight: 600;
}

/* シンプルに色だけ変えるスタイル */
body.menu-style-simple header .site-nav a:hover,
body.menu-style-simple header .site-nav .current-menu-item > a {
  color: var(--tanukipress-menu-hover-bg) !important;
}

/* タブ風スタイル（角丸背景タブ） */
body.menu-style-tabs header .site-nav a {
  border-radius: 9999px;
  padding: 0.45rem 0.9rem;
}

body.menu-style-tabs header .site-nav a:hover {
  background: var(--tanukipress-menu-hover-bg) !important;
  color: var(--tanukipress-header-nav, #f9fafb) !important;
}

body.menu-style-tabs header .site-nav .current-menu-item > a {
  background: var(--tanukipress-menu-hover-bg) !important;
  color: var(--tanukipress-header-nav, #f9fafb) !important;
}

/* 太字＋色変化のみ（背景はそのまま・下線なし） */
body.menu-style-bold-color header .site-nav a {
  font-weight: 500;
}

body.menu-style-bold-color header .site-nav a::after {
  display: none;
}

body.menu-style-bold-color header .site-nav a:hover,
body.menu-style-bold-color header .site-nav .current-menu-item > a {
  color: var(--tanukipress-menu-hover-bg) !important;
  font-weight: 700;
}

/* レタースペーシング（文字間を広げる） */
body.menu-style-spaced header .site-nav a {
  letter-spacing: 0.02em;
}

body.menu-style-spaced header .site-nav a:hover,
body.menu-style-spaced header .site-nav .current-menu-item > a {
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--tanukipress-menu-hover-bg) !important;
}

.site-title-wrap {
  display: flex;
  flex-direction: column;
}

/* ヘッダーロゴ横のサイトタイトル・ディスクリプション */
header .site-title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0.1rem 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var( --tanukipress-header-text, #f9fafb );
  text-decoration: none;
}

header .site-title::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 1.6em;
  border-radius: 9999px;
  background: var(--tanukipress-accent);
}

header .site-title:hover {
  color: var(--tanukipress-menu-hover-bg, var(--tanukipress-accent));
}

header .site-description {
  margin: 0.1rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: rgba(249, 250, 251, 0.75);
}

@media (max-width: 768px) {
  /* モバイルではキャッチコピーをコンパクトにするためディスクリプションを非表示 */
  header .site-description {
    display: none;
  }
}

.hero {
  padding: 3rem 1.5rem;
  background: var(--tanukipress-section-bg-muted);
}

/* 中〜大きめ画面でメニューが収まりやすいよう、文字サイズと隙間を少しだけ調整 */
@media (max-width: 1200px) {
  header .site-nav ul {
    gap: 1.25rem;
  }

  header .site-nav a {
    font-size: calc(0.95rem * var(--tanukipress-header-font-scale, 1));
  }
}

/* ヘッダーメニューが右端で切れないよう、中程度の幅では余白と隙間を少しだけ詰める */
@media (max-width: 1100px) {
  header .site-wrapper {
    padding: 0.5rem 1rem;
  }

  header .site-nav ul {
    gap: 1.1rem;
  }
}

/* ============================================
   ヒーローセクション（トップページ冒頭用）
   ============================================ */

/* 基本ヒーロースタイル（通常・パララックス共通） */
.tanukipress-hero {
  padding: 3.5rem 1.5rem 4rem;
  color: #f9fafb;
}

.tanukipress-hero h1 {
  /* フォントサイズはエディターで調整可能（基本的には修正不要） */
  line-height: 1.3;
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-weight: var(--tanukipress-heading-font-weight, 600);
  margin-left: auto;
  margin-right: auto;
  /* text-align はブロックエディターの配置設定に従う */
}

.tanukipress-hero p {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
  /* text-align はブロックエディターの配置設定に従う */
}

/* ヒーロー内のボタンも中央揃えに対応 */
.tanukipress-hero .wp-block-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ブロックエディターで左揃え・右揃えに変更した場合は上書き */
.tanukipress-hero .wp-block-buttons.has-text-align-left {
  justify-content: flex-start;
}

.tanukipress-hero .wp-block-buttons.has-text-align-right {
  justify-content: flex-end;
}

/* ヒーローテキストのレイアウト調整：背景中央付近にまとまるようにする */
/* Coverブロックのコンテナを中央配置（縦横中央） */
.tanukipress-hero .wp-block-cover__inner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Groupブロックのコンテナを中央配置 */
.tanukipress-hero .wp-block-group__inner-container {
  max-width: 960px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  /* text-align はブロックエディターの配置設定に従う */
}

/* Groupブロック自体も中央配置されるように */
.tanukipress-hero .wp-block-group {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 768px) {
  .tanukipress-hero .wp-block-group__inner-container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

.hero-title {
  /* フォントサイズはエディターで調整可能 */
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  /* フォントサイズはエディターで調整可能 */
  color: #4b5563;
}

/* スライダーヒーロー：複数スライドを重ねてフェード切り替え */
.tanukipress-hero.hero-slider {
  padding-top: 0;
  padding-bottom: 0;
}

.hero-slider {
  position: relative;
  overflow: hidden;
}

.hero-slider-inner {
  position: relative;
  min-height: 260px;
}

.hero-slider .site-wrapper {
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

/* ヒーロースライダーはセクション共通の余白をなくす */
.section.hero-slider {
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out;
}

/* 表示中のスライド */
.hero-slide.is-active {
  opacity: 1;
  transform: translateX(0);
  position: relative;
}

/* 直前のスライド（左に抜けていく） */
.hero-slide.is-prev {
  opacity: 0;
  transform: translateX(-100%);
}

.hero-slide .wp-block-group__inner-container {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  /* text-align はブロックエディターの設定に従う */
}

/* スライダー左右ナビゲーション */
.hero-slider-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 1rem;
}

.hero-slider-nav button {
  pointer-events: auto;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  color: #f9fafb;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.hero-slider-nav button:hover {
  background: rgba(15, 23, 42, 0.7);
}

/* パララックス風ヒーロー：背景画像をゆっくりと動かす（目で分かる強さに調整） */
.hero-parallax .wp-block-cover__background,
.hero-parallax .wp-block-cover__image-background,
.hero-parallax .wp-block-cover__image-background img {
  transform: scale(1.08);
  animation: heroParallaxPan 16s ease-in-out infinite alternate;
  transform-origin: center center;
}

@keyframes heroParallaxPan {
  from {
    transform: scale(1.08) translateY(0);
  }
  to {
    transform: scale(1.08) translateY(-36px);
  }
}

/* パララックスヒーロー内のテキスト配置もブロックエディターの設定に従う */
.hero-parallax .wp-block-group__inner-container {
  /* text-align はブロックエディターの配置設定に従う */
}

/* 基本ボタンスタイル（サイト全体でシンプルなボタンに統一） */
.wp-block-button__link,
.btn-primary {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: transparent;
  color: var(--tanukipress-primary);
  border-radius: var(--tanukipress-button-radius);
  border: 1px solid var(--tanukipress-primary);
  font-weight: 600;
  box-shadow: none;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.wp-block-button__link:hover,
.btn-primary:hover {
  background: var(--tanukipress-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

/* バリエーションも基本スタイルを踏襲しつつ、色味だけ変える */
.tanukipress-button--outline .wp-block-button__link,
.tanukipress-button--outline {
  background: transparent;
  color: var(--tanukipress-primary);
  border: 1px solid var(--tanukipress-primary);
}

.tanukipress-button--ghost .wp-block-button__link,
.tanukipress-button--ghost {
  background: transparent;
  color: var(--tanukipress-accent);
  border-radius: 9999px;
  border: 1px solid var(--tanukipress-accent);
}

.tanukipress-button--ghost .wp-block-button__link:hover,
.tanukipress-button--ghost:hover {
  background: var(--tanukipress-accent);
  color: #ffffff;
}

/* ============================================
   セクション共通スタイル
   ============================================ */

.section {
  padding: var(--tanukipress-section-padding-y) 1.5rem;
  position: relative;
}

/* セクション間の視覚的な区切り（統一感のあるデザイン） */
.section + .section {
  /* セクション間の余白を確保（デフォルトのpaddingで十分） */
}

/* セクションタイトルの前後に余白を追加して視認性向上 */
.section > .wp-block-group__inner-container > .site-wrapper > .wp-block-group__inner-container > .section-title:first-child {
  margin-top: 0;
}

.section-title {
  /* フォントサイズはエディターで調整可能（基本的には修正不要） */
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  color: var(--tanukipress-accent);
  font-weight: var(--tanukipress-heading-font-weight, 600);
  position: relative;
  /* text-align はブロックエディターの配置設定に従う */
  /* 中央揃えにした場合も正しく表示されるように */
  max-width: 100%;
  letter-spacing: -0.02em; /* 見出しをより目立たせる */
}

/* セクションタイトルの下線デザイン（アクセントカラー） */
.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 60px;
  height: 3px;
  background: var(--tanukipress-accent);
  border-radius: 2px;
}

/* 中央揃えの場合は下線も中央に */
.section-title.has-text-align-center::after {
  left: 50%;
  transform: translateX(-50%);
}

/* 右揃えの場合は下線も右に */
.section-title.has-text-align-right::after {
  left: auto;
  right: 0;
}

/* セクションのスタイルバリエーション（ブロックパターンから使う想定） */
.section-style-default {
  /* デフォルトは特別な背景を付けず、余白レイアウトだけを共有 */
}

.section-style-muted {
  /* サイト全体の背景色より少しだけトーンを落としたミュート背景 */
  background-color: var(--tanukipress-section-bg-muted);
  /* セクション間の区切りを明確にする */
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.section-style-emphasis {
  /* 強調用の背景色（お問い合わせセクションなど） */
  background-color: var(--tanukipress-primary-soft);
  /* 強調セクションの区切りを明確にする */
  border-top: 2px solid var(--tanukipress-primary);
  border-bottom: 2px solid var(--tanukipress-primary);
}

/* ============================================
   フロー・ステップセクション
   ============================================ */

/* ご利用の流れセクション（flow-section パターン用） */
.section-steps-default {
  /* ステップ全体の背景は既存の section-style-muted に任せる */
}

.section-steps-default h3 {
  margin-top: 1.25rem;
  margin-bottom: 0.25rem;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: var(--tanukipress-heading-font-weight, 600);
  color: var(--tanukipress-text-main);
  padding-left: 1.5rem;
  position: relative;
}

/* STEP見出しの前にアクセントマーカーを追加 */
.section-steps-default h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 1.2em;
  background: var(--tanukipress-accent);
  border-radius: 2px;
}

.section-steps-default p {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* STEP ブロック間にうっすらと仕切り線を入れて読みやすくする */
.section-steps-default h3 + p {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

/* 短い3ステップ導線（アイコン付きストリップ） */
.section-steps-strip .steps-strip-columns {
  gap: 1.75rem;
}

.section-steps-strip .wp-block-column {
  display: flex;
}

.step-strip-item {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.4rem 1.5rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.step-strip-icon {
  width: 36px;
  height: 36px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--tanukipress-primary-soft);
  color: var(--tanukipress-primary);
  font-weight: 700;
  margin: 0 0 0.6rem;
}

.step-strip-item h3 {
  margin: 0 0 0.3rem;
  /* フォントサイズ・文字色はエディターで調整可能 */
  font-weight: var(--tanukipress-heading-font-weight, 600);
}

.step-strip-item p {
  margin: 0;
  /* フォントサイズはエディターで調整可能 */
}

@media (max-width: 768px) {
  .section-steps-strip .steps-strip-columns {
    gap: 1.25rem;
  }

  .step-strip-item {
    padding: 1.2rem 1.25rem;
  }
}

/* ============================================
   キャッチコピー・メッセージセクション
   ============================================ */

/* キャッチコピーセクション（ヒーローの次に配置する短いメッセージ用） */
.section-catchphrase {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.section-catchphrase .catchphrase-title {
  /* フォントサイズ・文字色はエディターで調整可能 */
  font-weight: var(--tanukipress-heading-font-weight, 600);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.6;
  max-width: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-catchphrase {
    padding: 2rem 1.25rem;
  }
  
  .section-catchphrase .catchphrase-title {
    line-height: 1.7;
  }
}

/* ============================================
   情報セクション（FAQ、アクセス、会社情報など）
   ============================================ */

/* FAQ セクション（faq-section パターン用） */
.section-faq-default {
  /* FAQ 全体の背景は section-style-default に任せる */
}

/* FAQセクション内のすべてのh3（質問見出し）に適用
   最も包括的なセレクターで、すべてのネストレベルに対応
   セクションタイトル（.section-title）のh2は除外
   コピーして追加した質問にも確実に適用される */
.section-faq-default h3:not(.section-title),
.section-faq-default * h3:not(.section-title),
.section-style-default.section-faq-default h3:not(.section-title),
.section-style-default.section-faq-default * h3:not(.section-title) {
  margin-top: 1.25rem !important;
  margin-bottom: 0.25rem !important;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: var(--tanukipress-heading-font-weight, 600) !important;
  color: var(--tanukipress-text-main) !important;
}

/* Q. プレフィックスは削除（ユーザー要望により不要） */
.section-faq-default h3::before,
.section-faq-default * h3::before,
.section-style-default.section-faq-default h3::before,
.section-style-default.section-faq-default * h3::before {
  display: none !important;
  content: none !important;
}

/* FAQセクション内のすべてのp（回答）に適用
   最も包括的なセレクターで、すべてのネストレベルに対応
   コピーして追加した回答にも確実に適用される */
.section-faq-default p,
.section-faq-default * p,
.section-style-default.section-faq-default p,
.section-style-default.section-faq-default * p {
  margin-top: 0 !important;
  margin-bottom: 0.75rem !important;
  margin-left: 1.5rem !important;
}

/* セクションタイトル直下のpは除外（セクションタイトルの説明文など） */
.section-faq-default .section-title + p,
.section-style-default.section-faq-default .section-title + p {
  margin-left: 0 !important;
}

/* Q&A ブロックの区切り線（wp-block-group 単位）
   2つ目以降の質問ブロックに区切り線を表示（最初の質問には表示しない）
   最も包括的なセレクターで、すべてのネストレベルに対応
   コピーして追加した質問にも確実に適用される */
.section-faq-default .wp-block-group + .wp-block-group,
.section-faq-default * .wp-block-group + .wp-block-group,
.section-style-default.section-faq-default .wp-block-group + .wp-block-group,
.section-style-default.section-faq-default * .wp-block-group + .wp-block-group {
  border-top: 1px solid var(--tanukipress-border-soft) !important;
  padding-top: 1.25rem !important;
  margin-top: 1.25rem !important;
}

/* お知らせ・ブログ一覧セクション（news-section パターン用） */
.section-news .news-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.section-news .news-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--tanukipress-border-soft);
}

.section-news .news-date {
  /* フォントサイズ・文字色はエディターで調整可能 */
  min-width: 6rem;
}

.section-news .news-list a {
  color: inherit;
  text-decoration: none;
}

.section-news .news-list a:hover {
  text-decoration: underline;
}

/* お知らせセクション内のボタンも中央配置に対応 */
.section-news .wp-block-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

/* ブロックエディターで左揃え・右揃えに変更した場合は上書き */
.section-news .wp-block-buttons.has-text-align-left {
  justify-content: flex-start;
}

.section-news .wp-block-buttons.has-text-align-right {
  justify-content: flex-end;
}

/* ============================================
   コンテンツセクション（サービス、強み、実績など）
   ============================================ */

/* 強みセクション（3カラム）のスタイル強化 */
/* 3カラムレイアウトで強み・特徴を紹介するセクション用 */
/* カード型式ではなく、シンプルなレイアウト */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) {
  gap: 2.5rem;
  margin-top: 2rem;
  /* カラムの高さを確実に揃える */
  display: flex !important;
  align-items: stretch !important;
}

.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column {
  /* シンプルなレイアウト */
  padding: 0;
  position: relative;
  /* カラム内のコンテンツを均等に配置 */
  display: flex !important;
  flex-direction: column !important;
  /* カラムの高さを親に合わせる */
  align-self: stretch;
}

/* 2カラムテキスト・画像セクション（two-column-text-image-columns 用） */
.section-style-default .two-column-text-image-columns {
  gap: 2.5rem;
  margin-top: 2rem;
  /* カラムの高さを確実に揃える */
  display: flex !important;
  align-items: stretch !important;
}

.section-style-default .two-column-text-image-columns > .wp-block-column {
  /* シンプルなレイアウト */
  padding: 0;
  position: relative;
  /* カラム内のコンテンツを均等に配置 */
  display: flex !important;
  flex-direction: column !important;
  /* カラムの高さを親に合わせる */
  align-self: stretch;
}

/* 画像カラムのスタイル */
.section-style-default .two-column-text-image-columns > .wp-block-column .wp-block-image {
  margin: 0;
  width: 100%;
}

.section-style-default .two-column-text-image-columns > .wp-block-column .wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0.5rem;
}

/* テキストカラムのスタイル */
.section-style-default .two-column-text-image-columns > .wp-block-column h2,
.section-style-default .two-column-text-image-columns > .wp-block-column h3 {
  /* フォントサイズ・文字色はエディターで調整可能 */
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 700;
  line-height: 1.4;
  /* h3の下線は適用しない */
  border-bottom: none;
  padding-bottom: 0;
}

.section-style-default .two-column-text-image-columns > .wp-block-column p {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.7;
  /* テキストの改行を自然に */
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.section-style-default .two-column-text-image-columns > .wp-block-column p:last-child {
  margin-bottom: 0;
}

.section-style-default .two-column-text-image-columns > .wp-block-column ul,
.section-style-default .two-column-text-image-columns > .wp-block-column ol {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.section-style-default .two-column-text-image-columns > .wp-block-column ul:last-child,
.section-style-default .two-column-text-image-columns > .wp-block-column ol:last-child {
  margin-bottom: 0;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-style-default .two-column-text-image-columns {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* 強みセクションの見出し（h3）のスタイル */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > h3 {
  margin-top: 0;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--tanukipress-accent);
  position: relative;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: 700;
  color: #1f2937;
  line-height: 1.4;
  /* 高さは自動（エディターで手動調整可能） */
  text-align: left;
  /* テキストの改行を自然に */
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

/* インラインスタイル（エディターで設定した文字サイズ・色）を確実に適用 */
/* インラインスタイルは通常優先されるが、確実に適用されるようにする */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > h3 [style*="font-size"],
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p [style*="font-size"],
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > h3:nth-of-type(2) [style*="font-size"] {
  /* インラインスタイルのfont-sizeを確実に適用 */
  /* 親要素のclamp()によるfont-sizeの影響を受けないようにする */
}

/* 見出しの前にアクセント縦線を追加（「理由1」「理由2」などの前に） */
/* 必要に応じてコメントアウトまたは削除可能 */
/*
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > h3::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--tanukipress-accent);
  border-radius: 2px;
}
*/

/* サブタイトル（太字テキスト）に背景色を追加 */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:first-of-type strong,
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:first-of-type b {
  display: inline-block;
  /* 文字色・フォントサイズはエディターで調整可能 */
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  background: var(--tanukipress-primary-soft);
  border-left: 3px solid var(--tanukipress-primary);
  border-radius: 4px;
  margin-bottom: 0.75rem;
  margin-top: 0;
}

/* サブタイトルを含む段落のスタイル */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:first-of-type {
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 0.75rem;
  text-align: left;
  /* テキストの改行を自然に */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 2つ目のh3（サブタイトルとして使用されている場合）のスタイル */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > h3:nth-of-type(2) {
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: 1rem;
  text-align: left;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: 700;
  color: var(--tanukipress-primary);
  /* テキストの改行を自然に */
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 本文のスタイル調整 */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.8;
  /* 文字色はエディターで調整可能（インラインスタイルが優先される） */
  color: #374151;
  text-align: left;
  /* 自然な改行を許可（word-break: keep-all の影響を受けないように） */
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

/* 本文内の太字テキスト（サブタイトル部分を除く） */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:not(:first-of-type) strong,
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:not(:first-of-type) b,
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:last-child strong,
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:last-child b {
  font-weight: 700;
  color: inherit;
}

/* 本文段落（最後の段落）のスタイル */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:last-child {
  flex-grow: 1;
  line-height: 1.8;
  text-align: left;
  margin-bottom: 0;
  /* 自然な改行を許可 */
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column > p:not(:first-of-type) {
  margin-top: 1rem;
}

/* ============================================
   カスタムクラス（エディターで追加可能な装飾）
   ============================================ */

/* アクセント縦線を追加（カスタムクラスで制御） */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns) > .wp-block-column.has-accent-line > h3::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--tanukipress-accent);
  border-radius: 2px;
}

/* 固定高さを設定（カスタムクラスで制御） */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-fixed-height > h3 {
  min-height: calc(1.4em * 2 + 0.75rem);
  height: calc(1.4em * 2 + 0.75rem);
  display: flex;
  align-items: center;
}

.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-fixed-height > p:first-of-type {
  min-height: calc(1.6em * 2 + 0.75rem);
  height: calc(1.6em * 2 + 0.75rem);
  display: flex;
  align-items: center;
}

.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-fixed-height > p:last-child {
  min-height: calc(1.8em * 2);
  height: 12rem;
  overflow: hidden;
  display: flex;
  align-items: center;
}

/* カラムに背景色を追加（カスタムクラスで制御） */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-column-background {
  background: #f8fafc;
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
}

/* カラムに影を追加（カスタムクラスで制御） */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-column-shadow {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

/* カラムにボーダーを追加（カスタムクラスで制御） */
.section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-column-border {
  border: 1px solid var(--tanukipress-border-soft);
  padding: 2rem 1.5rem;
  border-radius: 0.5rem;
}

/* 強みセクションのレスポンシブ対応 */
@media (max-width: 768px) {
  .section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) {
    gap: 2rem;
  }

  .section-style-default .wp-block-columns:not(.trust-columns):not(.cta-two-column-columns):not(.access-columns):not(.two-column-text-image-columns) > .wp-block-column.has-accent-line > h3::before {
    left: -1rem;
  }
}

/* サービス一覧（2列カード）セクション（services-section パターン用） */
.section-services .wp-block-columns {
  gap: 1.5rem;
}

.section-services .wp-block-columns > .wp-block-column {
  display: flex;
}

.section-services .service-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
  text-align: center;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.section-services .service-card .wp-block-buttons {
  margin-top: auto;
}

/* カード内テキストの行長をそろえ、読みやすくする（中央揃え前提） */
.section-services .service-card h3 {
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}

.section-services .service-card p {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}

/* サービスカード内の画像ボックスのサイズを統一 */
.section-services .service-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
}

.section-services .service-card:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
}

.section-services .service-card:hover h3 {
  color: var(--tanukipress-primary);
}

.pricing-card {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pricing-card:hover {
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
  transform: translateY(-3px);
}

.section-pricing .pricing-card:hover h3 {
  color: var(--tanukipress-primary);
}

/* 信頼性・実績メトリクスセクション（trust-metrics-section パターン用） */
.section-trust .trust-columns {
  gap: 1.5rem;
}

.section-trust .wp-block-column {
  display: flex;
}

.trust-metric {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.3rem 1.5rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  text-align: center; /* 信頼性メトリクスは常に中央揃え（デザイン要件） */
  flex: 1;
}

/* ブロックエディターの配置クラスが優先されるようにする */
.trust-metric.has-text-align-left {
  text-align: left;
}

.trust-metric.has-text-align-right {
  text-align: right;
}

.trust-value {
  /* フォントサイズはエディターで調整可能 */
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.trust-unit {
  /* フォントサイズはエディターで調整可能 */
  margin-left: 0.1rem;
}

.trust-label {
  margin: 0;
  /* フォントサイズ・文字色はエディターで調整可能 */
}

.trust-metric:hover {
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
  transform: translateY(-2px);
}

@media (max-width: 768px) {
  .section-trust .trust-columns {
    gap: 1.25rem;
  }

  .trust-metric {
    padding: 1.25rem 1.3rem;
  }
}

/* ============================================
   CTAセクション（お問い合わせ導線）
   ============================================ */

/* 2カラムCTAセクション（cta-two-column-section パターン用） */
.section-cta-two-column .cta-two-column-columns {
  align-items: center;
  gap: 2.5rem;
}

.section-cta-two-column h2 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  /* フォントサイズ・文字色はエディターで調整可能 */
  font-weight: var(--tanukipress-heading-font-weight, 600);
}

.section-cta-two-column p {
  margin-top: 0;
  margin-bottom: 0;
}

.section-cta-two-column .cta-two-column-buttons {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ブロックエディターで中央揃え・左揃えに変更した場合は上書き */
.section-cta-two-column .cta-two-column-buttons.has-text-align-center {
  justify-content: center;
}

.section-cta-two-column .cta-two-column-buttons.has-text-align-left {
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .section-cta-two-column .cta-two-column-columns {
    gap: 1.4rem;
  }

  .section-cta-two-column .cta-two-column-buttons {
    justify-content: flex-start;
  }

  /* モバイルでもブロックエディターの設定を尊重 */
  .section-cta-two-column .cta-two-column-buttons.has-text-align-center {
    justify-content: center;
  }

  .section-cta-two-column .cta-two-column-buttons.has-text-align-right {
    justify-content: flex-end;
  }
}

/* 会社概要・店舗情報セクション（company-info-section パターン用） */
.section-company-info .company-info-columns {
  gap: 2.5rem;
}

.section-company-info .company-info-details p {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.section-company-info .company-info-map {
  background: var(--tanukipress-section-bg-muted);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  min-height: 220px;
  display: flex;
  align-items: center;
}

.section-access .access-map {
  background: var(--tanukipress-border-soft);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  min-height: 220px;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .section-access .access-columns {
    gap: 1.5rem;
  }

  .section-access .access-map {
    min-height: 180px;
  }
}

/* 警告・注意喚起セクション（warning-alert-section パターン用） */
.section-warning-alert .warning-alert-columns {
  gap: 2.5rem;
  align-items: stretch;
}

/* 左カラム：リスク・危険性 */
.section-warning-alert .warning-alert-title {
  margin-top: 0;
  margin-bottom: 1rem;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: 700;
  color: var(--tanukipress-text-main);
  line-height: 1.3;
}

.section-warning-alert .warning-alert-subtitle {
  margin-top: 0;
  margin-bottom: 1rem;
  /* フォントサイズ・文字色はエディターで調整可能 */
  font-weight: 600;
  color: #dc2626;
  line-height: 1.5;
}

.section-warning-alert .warning-alert-list {
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 1.5rem;
  line-height: 1.8;
}

.section-warning-alert .warning-alert-list li {
  margin-bottom: 0.5rem;
}

.section-warning-alert .warning-alert-list li:last-child {
  margin-bottom: 0;
}

.section-warning-alert .warning-alert-list strong {
  font-weight: 700;
  color: #dc2626;
}

/* 右カラム：重要な数値・警告情報 */
.section-warning-alert .warning-alert-highlight {
  background: #f8fafc;
  border-radius: 0.75rem;
  padding: 2rem 1.5rem;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

.section-warning-alert .warning-alert-icon {
  margin: 0 0 1rem 0;
  /* フォントサイズはエディターで調整可能 */
  line-height: 1;
}

.section-warning-alert .warning-alert-value {
  margin-top: 0;
  margin-bottom: 1rem;
  /* フォントサイズ・文字色はエディターで調整可能 */
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.section-warning-alert .warning-alert-note {
  margin-top: 0;
  margin-bottom: 0;
  /* フォントサイズ・文字色はエディターで調整可能 */
  line-height: 1.6;
  text-align: left;
}

/* 警告ボーダー（カスタムクラスで追加可能） */
.section-warning-alert.has-warning-border {
  border: 4px solid;
  border-image: repeating-linear-gradient(
    45deg,
    #fbbf24 0,
    #fbbf24 10px,
    #1f2937 10px,
    #1f2937 20px
  ) 4;
  padding: 1.5rem;
}

/* 背景色バリエーション（エディターで背景色を設定可能） */
.section-warning-alert.has-yellow-bg .warning-alert-highlight {
  background: #fef3c7;
}

.section-warning-alert.has-blue-bg .warning-alert-highlight {
  background: #dbeafe;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-warning-alert .warning-alert-columns {
    flex-direction: column;
    gap: 1.5rem;
  }

  .section-warning-alert .warning-alert-highlight {
    min-height: 180px;
    padding: 1.5rem 1rem;
  }

  .section-warning-alert .warning-alert-icon {
    font-size: 2rem;
  }
}
.section-testimonials .testimonials-columns {
  gap: 1.4rem;
}

.section-testimonials .wp-block-column {
  display: flex;
}

.testimonial-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.3rem 1.4rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-text {
  margin-top: 0;
  margin-bottom: 0.9rem;
  /* フォントサイズはエディターで調整可能 */
}

.testimonial-meta {
  margin-top: auto;
  margin-bottom: 0;
  /* フォントサイズ・文字色はエディターで調整可能 */
}

@media (max-width: 768px) {
  .section-testimonials .testimonials-columns {
    gap: 1.2rem;
  }

  .testimonial-card {
    padding: 1.2rem 1.3rem;
  }
}

/* レビュースライダーセクション（review_slider ショートコード用） */
.section-reviews-slider {
  padding: 3rem 0;
}

.section-reviews-slider .reviews-slider {
  position: relative;
  overflow: hidden;
  margin-top: 2rem;
  /* 高さはJavaScriptで動的に設定 */
}

.review-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.6s ease-in-out, opacity 0.3s ease-in-out;
  pointer-events: none;
  visibility: hidden;
}

/* 初期表示：最初のスライドは表示（JavaScriptが動作する前でも見えるように） */
/* JavaScriptが動作した後は、is-activeクラスで制御されるため、:first-childは無効化 */
.review-slide:first-child:not(.is-active):not(.is-prev) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
}

.review-slide.is-active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
  z-index: 2;
}

.review-slide.is-prev {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateX(-100%);
  z-index: 1;
  visibility: visible;
}

.review-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 2rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
  max-width: 800px;
  margin: 0 auto;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.reviewer-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.reviewer-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--tanukipress-accent) 0%, var(--tanukipress-primary) 100%);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  /* フォントサイズはエディターで調整可能 */
  flex-shrink: 0;
}

.reviewer-details {
  flex: 1;
}

.reviewer-name {
  font-weight: 600;
  /* 文字色はエディターで調整可能 */
  margin-bottom: 0.25rem;
}

.review-rating {
  /* 文字色・フォントサイズはエディターで調整可能 */
  line-height: 1;
  white-space: nowrap;
}

.review-text {
  line-height: 1.8;
  /* 文字色はエディターで調整可能 */
  margin-bottom: 1.5rem;
  white-space: pre-wrap;
}

.review-reply {
  background: #f8fafc;
  border-left: 4px solid var(--tanukipress-accent);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-top: 1.5rem;
}

.review-reply-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.review-reply-icon {
  /* フォントサイズはエディターで調整可能 */
}

.review-reply-name {
  font-weight: 600;
  /* 文字色はエディターで調整可能 */
}

.review-reply-text {
  line-height: 1.7;
  /* 文字色はエディターで調整可能 */
  white-space: pre-wrap;
}

/* レビュースライダーナビゲーション */
.reviews-slider-nav {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 1rem;
  z-index: 10;
}

.reviews-slider-nav button {
  pointer-events: auto;
  border: none;
  background: rgba(15, 23, 42, 0.45);
  color: #f9fafb;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.2s ease;
}

.reviews-slider-nav button:hover {
  background: rgba(15, 23, 42, 0.7);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .section-reviews-slider {
    padding: 2rem 0;
  }

  .section-reviews-slider .reviews-slider {
    margin-top: 1.5rem;
  }

  .review-card {
    padding: 1.25rem;
    max-height: 70vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .review-header {
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .review-rating {
    align-self: flex-start;
  }

  .reviewer-avatar {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .reviewer-name {
    font-size: 0.95rem;
  }

  .review-rating {
    font-size: 1.1rem;
  }

  .review-text {
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 1rem;
  }

  .review-reply {
    padding: 1rem;
    margin-top: 1rem;
  }

  .review-reply-header {
    margin-bottom: 0.5rem;
  }

  .review-reply-icon {
    font-size: 1.25rem;
  }

  .review-reply-name {
    font-size: 0.9rem;
  }

  .review-reply-text {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  /* スクロールバーのスタイル（オプション） */
  .review-card::-webkit-scrollbar {
    width: 4px;
  }

  .review-card::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 2px;
  }

  .review-card::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 2px;
  }

  .review-card::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
  }
}

/* ============================================
   レイアウトパターン（2カラム、カードグリッドなど）
   ============================================ */

/* 関連コンテンツグリッド（小さめカード）セクション（related-items-grid パターン用） */
.section-related .wp-block-columns {
  gap: 1rem;
}

.section-related .wp-block-columns > .wp-block-column {
  display: flex;
}

.section-related .related-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: #ffffff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
}

.section-related .related-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* フォントサイズはエディターで調整可能 */
}

.section-related .related-card p {
  margin-top: 0;
  /* フォントサイズはエディターで調整可能 */
}

.section-related .related-card:hover {
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12);
  transform: translateY(-2px);
  background: #f9fafb;
}

.section-related .related-card:hover h3 {
  color: var(--tanukipress-primary);
}

/* 料金・プラン比較セクション（pricing-section パターン用） */
.section-pricing .pricing-columns {
  gap: 1.5rem;
}

.section-pricing .wp-block-column {
  display: flex;
  flex-direction: column;
}

.pricing-card {
  background: #ffffff;
  border-radius: 0.9rem;
  padding: 1.5rem 1.75rem 1.75rem;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
  border: 1px solid rgba(148, 163, 184, 0.35);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.pricing-card.is-featured {
  border-color: var(--tanukipress-primary);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.pricing-badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--tanukipress-primary-soft);
  color: var(--tanukipress-primary);
  margin-bottom: 0.4rem;
}

.pricing-label {
  font-weight: 600;
  margin: 0 0 0.25rem;
}

.pricing-price {
  /* フォントサイズはエディターで調整可能 */
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.pricing-price-note {
  /* フォントサイズはエディターで調整可能 */
  font-weight: 500;
  color: #6b7280;
}

.pricing-card ul {
  margin: 0 0 1.25rem;
  padding-left: 1.1rem;
}

.pricing-card .wp-block-buttons {
  margin-top: auto;
}

/* 料金セクション内では親ボタンは見た目を持たず、リンクのみスタイルを持つ */
.section-pricing .wp-block-button {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 真ん中のプランで使っている .btn-primary も親側では無効化 */
.section-pricing .wp-block-button.btn-primary,
.section-pricing .wp-block-button.btn-primary:hover {
  background: transparent;
  border: none;
  box-shadow: none;
}

/* 実際の見た目はリンクだけに任せる。幅を揃えてボタン高さを統一 */
.section-pricing .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

@media (max-width: 768px) {
  .section-pricing .pricing-columns {
    gap: 1.25rem;
  }

  .pricing-card {
    padding: 1.25rem 1.4rem 1.5rem;
  }
}

/* サービス一覧などで使うシンプルなカードレイアウト */
.service-card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.service-card h3 {
  margin-top: 0.35rem;
  margin-bottom: 0.4rem;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: var(--tanukipress-heading-font-weight, 600);
  color: var(--tanukipress-text-main) !important;
  transition: color 0.15s ease;
}

.service-card p {
  margin-top: 0;
}

/* 3カラムカード用レイアウト（.service-card と同じ見た目） */
.card {
  background: #ffffff;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

.card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  /* フォントサイズ・文字色はエディターで調整可能（インラインスタイルが優先される） */
  font-weight: var(--tanukipress-heading-font-weight, 600);
  color: var(--tanukipress-text-main) !important;
}

.card p {
  margin-top: 0;
}

/* 3カラムカード内で外枠の高さをそろえるための調整（カード専用） */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 260px;
}

.card img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: contain;
}

/* お問い合わせセクション（contact-section パターン用） */
.contact-section .wp-block-buttons {
  margin-top: 1.25rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ブロックエディターで左揃え・右揃えに変更した場合は上書き */
.contact-section .wp-block-buttons.has-text-align-left {
  justify-content: flex-start;
}

.contact-section .wp-block-buttons.has-text-align-right {
  justify-content: flex-end;
}

.contact-section .wp-block-buttons .wp-block-button {
  margin-right: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* お問い合わせ内のボタンをアウトライン＋丸ボタンで統一 */
.contact-section .wp-block-buttons .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1.6rem;
  border-radius: 9999px;
  border: 2px solid var(--tanukipress-primary);
  background: #ffffff;
  color: var(--tanukipress-primary);
  box-shadow: none;
}

/* 右側ボタンはアクセントカラーのアウトライン */
.contact-section .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link {
  border-color: var(--tanukipress-accent);
  color: var(--tanukipress-accent);
}

.contact-section .wp-block-buttons .wp-block-button__link:hover {
  background: var(--tanukipress-primary);
  color: #ffffff;
}

.contact-section .wp-block-buttons .wp-block-button:nth-child(2) .wp-block-button__link:hover {
  background: var(--tanukipress-accent);
  color: #ffffff;
}

/* CTA セクション（cta-text-button パターン用） */
.cta-section .wp-block-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ブロックエディターで左揃え・右揃えに変更した場合は上書き */
.cta-section .wp-block-buttons.has-text-align-left {
  justify-content: flex-start;
}

.cta-section .wp-block-buttons.has-text-align-right {
  justify-content: flex-end;
}

.cta-section .wp-block-buttons .wp-block-button__link {
  background: transparent;
  box-shadow: none;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.cta-section .wp-block-buttons .wp-block-button {
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ハンバーガーメニュー（モバイル） */
header .menu-toggle {
  display: none;
  background: transparent;
  border: none;
  color: #f9fafb;
  cursor: pointer;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
}

.menu-toggle__label {
  display: none; /* 三本線アイコンのみ表示 */
}

.menu-toggle__icon {
  width: 20px;
  height: 2px;
  background: #f9fafb;
  position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: #f9fafb;
}

.menu-toggle__icon::before {
  top: -6px;
}

.menu-toggle__icon::after {
  top: 6px;
}

@media (max-width: 768px) {
  header .site-wrapper {
    flex-wrap: nowrap;
    padding: 0.25rem 0.75rem;
    min-height: 56px;
  }

  /* スマホではロゴとハンバーガーを常に縦方向中央揃えにして、一本のバーとして見せる */
  body.logo-valign-top header .site-wrapper,
  body.logo-valign-middle header .site-wrapper,
  body.logo-valign-bottom header .site-wrapper {
    align-items: center;
  }

  /* スマホではロゴブロックの幅を必要最小限にして、右側にナビを寄せる */
  .site-branding {
    margin-top: 8px;
    margin-bottom: 8px;
    width: auto;
  }

  header .site-nav {
    margin-left: auto;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  header .menu-toggle {
    display: inline-flex;
  }

  /* オフキャンバスメニュー本体（右からスライドイン） */
  header .site-nav ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    margin-top: 0;
    background: var(--tanukipress-header-bg-rgba, var(--tanukipress-header-bg));
    padding: 4rem 1.25rem 2rem;
    transform: translateX(100%);
    transition: transform 0.25s ease-out;
    z-index: 1100;
  }

  header .site-nav li {
    padding: 0.2rem 0.25rem;
    border-top: 1px solid rgba(249, 250, 251, 0.12);
  }

  header .site-nav li:first-child {
    border-top: none;
  }

  header .site-nav a {
    display: block;
    padding: 0.4rem 0.5rem;
  }

  /* body に nav-open クラスが付いたときにメニューをスライドイン表示 */
  body.nav-open header .site-nav ul {
    transform: translateX(0);
  }

  /* スマホ時はヘッダーをコンパクトにする */
  .site-branding {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .site-logo img {
    max-height: 40px;
  }

  /* スマホではキャッチコピーを省略して高さを抑える */
  .site-description {
    display: none;
  }
}