/* =========================================================
   障害年金サポート テーマ 追加スタイル
   （色・フォント・余白の基本は theme.json。ここは装飾とJS連動UI）
   ========================================================= */

:root {
  --sn-shadow-card: 0 2px 10px rgba(27, 108, 168, 0.08);
  --sn-shadow-hover: 0 8px 24px rgba(27, 108, 168, 0.16);
  --sn-radius: 8px;
}

/* 読みやすさ：本文の折り返し */
body {
  -webkit-font-smoothing: antialiased;
  text-align: justify;
  word-break: normal;
  overflow-wrap: anywhere;
  overflow-x: clip; /* フル幅ヒーローの水平スクロール防止（stickyに影響しない） */
}

/* mark要素のブラウザデフォルト黄色背景をリセット */
mark { background-color: transparent; }

/* リンクの下線はホバー時のみ（見出しリンクは常に無し） */
a { text-underline-offset: 0.15em; }

/* フォーカスリングを明示（アクセシビリティ） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--wp--preset--color--primary-light);
  outline-offset: 2px;
}

/* =========================================================
   ボタン ブロックスタイル
   ========================================================= */

/* CTA（デフォルト）に軽い影とアイコン余白 */
.wp-block-button__link {
  box-shadow: 0 3px 8px rgba(245, 136, 60, 0.28);
  transition: transform .12s ease, background-color .12s ease, box-shadow .12s ease;
  min-height: 44px;              /* タップ領域確保 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
}
.wp-block-button__link:hover { transform: translateY(-1px); }

/* LINEボタン */
.wp-block-button.is-style-line .wp-block-button__link {
  background-color: var(--wp--preset--color--line) !important;
  color: #fff !important;
  box-shadow: 0 3px 8px rgba(6, 199, 85, 0.28);
}
.wp-block-button.is-style-line .wp-block-button__link::before { content: "💬"; }

/* 電話ボタン（ブルー塗り・白文字） */
.wp-block-button.is-style-tel .wp-block-button__link {
  background-color: var(--wp--preset--color--primary) !important;
  color: #fff !important;
  border: 2px solid var(--wp--preset--color--primary);
  box-shadow: none;
}
.wp-block-button.is-style-tel .wp-block-button__link::before { content: "📞"; }

/* ブルー枠（汎用アウトライン） */
.wp-block-button.is-style-outline-primary .wp-block-button__link {
  background-color: #fff !important;
  color: var(--wp--preset--color--primary) !important;
  border: 2px solid var(--wp--preset--color--primary);
  box-shadow: none;
}

/* =========================================================
   グループ ブロックスタイル：カード
   ========================================================= */
.wp-block-group.is-style-card {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sn-radius);
  box-shadow: var(--sn-shadow-card);
  padding: 1.75rem;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.wp-block-group.is-style-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sn-shadow-hover);
}

/* 対応エリアページ: カードを縦積みするため高さを自動に (height:100%上書き) */
body.page-id-171 .wp-block-group.is-style-card {
  height: auto;
}
body.page-id-171 .wp-block-columns {
  align-items: flex-start;
}

/* カード内のアイコン絵文字：大きく・中央揃え（has-text-colorを除外して価格テキストに干渉しない） */
.wp-block-group.is-style-card > p:not(.has-text-color)[style*="font-size"] {
  text-align: center !important;
  font-size: 3rem !important;
  margin-bottom: 0.5rem;
}

/* カード内の説明文：左揃え（中央揃えが明示されている場合は除外） */
.wp-block-group.is-style-card p.has-small-font-size:not(.has-text-align-center) {
  text-align: left !important;
}

/* バッジ並び */
.wp-block-group.is-style-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}
.wp-block-group.is-style-badge-row > * {
  background: var(--wp--preset--color--bg-section);
  color: var(--wp--preset--color--primary-dark);
  border: 1px solid var(--wp--preset--color--primary-light);
  border-radius: 999px;
  padding: .35rem 1rem;
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
}

/* =========================================================
   見出し ブロックスタイル：セクションタイトル
   ========================================================= */
.wp-block-heading.is-style-section-title {
  text-align: center;
  position: relative;
  padding-bottom: .8rem;
  margin-bottom: 2.5rem;
}
.wp-block-heading.is-style-section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 4px;
  border-radius: 2px;
  background: var(--wp--preset--color--cta);
}

/* =========================================================
   リスト ブロックスタイル：チェックリスト
   ========================================================= */
.wp-block-list.is-style-check {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-check li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: .7rem;
}
.wp-block-list.is-style-check li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.4rem;
  height: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  color: #fff;
  background: var(--wp--preset--color--accent);
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 700;
}

/* =========================================================
   ヘッダー
   ========================================================= */

/* FSEテーマ: ヘッダーを包む .wp-block-template-part を sticky 化
   （.site-header に sticky を付けても親が短すぎて即解除されるため外側に適用） */
.wp-block-template-part:has(.site-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--wp--preset--color--border);
}
.site-header .header-tel {
  font-weight: 700;
  color: var(--wp--preset--color--primary-dark);
  white-space: nowrap;
}
.site-header .header-tel small {
  display: block;
  font-size: .7rem;
  font-weight: 400;
  color: var(--wp--preset--color--text-sub);
}

/* ナビゲーション */
.wp-block-navigation a { text-decoration: none; font-weight: 500; }

/* =========================================================
   ヒーロー
   ========================================================= */
.sn-hero {
  background:
    linear-gradient(135deg, rgba(27,108,168,0.06), rgba(79,169,220,0.12)),
    var(--wp--preset--color--bg-section);
}

/* ヒーロー背景をビューポート全幅に拡大
   ・alignfull のネガティブマージンが nested has-global-padding でゼロ化されるため直接指定
   ・左右パディングは各カラム側で制御（左カラムに小さな固定マージン） */
.sn-hero.alignfull {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* カラムコンテナ：縦に伸ばす・gap削除・max-width解除 */
.sn-hero.alignfull .wp-block-columns {
  align-items: stretch !important;
  gap: 0 !important;
  max-width: 100% !important;
  min-height: 460px;
}

/* 左カラム（テキスト）：30% */
.sn-hero.alignfull .wp-block-column:first-child {
  flex-basis: 30% !important;
  max-width: 30% !important;
  min-width: 0;
  box-sizing: border-box !important;
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
  padding-left: clamp(1.5rem, 4vw, 4rem) !important;
  padding-right: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* 右カラム（画像）：70%・パディングなし・端まで・縦全体に伸ばす */
.sn-hero.alignfull .wp-block-column:last-child {
  flex-basis: 70% !important;
  max-width: 70% !important;
  min-width: 0;
  box-sizing: border-box !important;
  align-self: stretch !important;
  padding: 0 !important;
  overflow: hidden;
}

/* 右カラムの画像：全高全幅・角丸なし */
.sn-hero.alignfull .wp-block-column:last-child figure.wp-block-image {
  height: 100% !important;
  margin: 0 !important;
}
.sn-hero.alignfull .wp-block-column:last-child figure.wp-block-image img {
  width: 100% !important;
  height: 100% !important;
  min-height: 460px;
  object-fit: cover !important;
  object-position: 52% 62% !important;
  border-radius: 0 !important;
  display: block;
}

/* モバイル：テキストを上・画像を下に縦積み */
@media (max-width: 768px) {
  .sn-hero.alignfull {
    padding-left: 0 !important;
  }
  .sn-hero.alignfull .wp-block-columns {
    flex-direction: column !important;
    min-height: auto;
  }
  .sn-hero.alignfull .wp-block-column:first-child {
    flex-basis: 100% !important;
    max-width: 100% !important;
    padding: 2.5rem 1.25rem 1.5rem 1.25rem !important;
  }
  .sn-hero.alignfull .wp-block-column:last-child {
    flex-basis: 100% !important;
    max-width: 100% !important;
  }
  .sn-hero.alignfull .wp-block-column:last-child figure.wp-block-image img {
    min-height: 260px;
    height: 260px !important;
  }
}

.sn-hero .sn-hero-catch {
  line-height: 1.4;
}
.sn-hero .sn-hero-catch .marker {
  background: linear-gradient(transparent 60%, rgba(245,136,60,0.35) 60%);
  padding: 0 .1em;
}

/* =========================================================
   実績カウンター
   ========================================================= */
.sn-stat-number {
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
}
.sn-stat-label {
  color: var(--wp--preset--color--text-sub);
  font-size: .95rem;
  font-weight: 500;
}

/* =========================================================
   ステップ（ご依頼の流れ）
   ========================================================= */
.sn-step {
  counter-increment: sn-step;
  position: relative;
}
.sn-step .sn-step-num::before {
  content: "STEP " counter(sn-step);
}
.sn-steps { counter-reset: sn-step; }
.sn-step-num {
  display: inline-block;
  color: var(--wp--preset--color--cta);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .05em;
  margin-bottom: .3rem;
}

/* =========================================================
   FAQ アコーディオン（details/summary）
   ========================================================= */
.sn-faq details {
  background: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--sn-radius);
  margin-bottom: .9rem;
  overflow: hidden;
}
.sn-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.2rem;
  font-weight: 700;
  color: var(--wp--preset--color--primary-dark);
  position: relative;
}
.sn-faq summary::-webkit-details-marker { display: none; }
.sn-faq summary::before {
  content: "Q";
  color: var(--wp--preset--color--cta);
  font-weight: 700;
  margin-right: .6em;
}
.sn-faq summary::after {
  content: "+";
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--wp--preset--color--primary-light);
  transition: transform .2s ease;
}
.sn-faq details[open] summary { background: var(--wp--preset--color--bg-section); }
.sn-faq details[open] summary::after { content: "−"; }
.sn-faq .sn-faq-body {
  padding: 1.1rem 1.2rem;
  border-top: 1px solid var(--wp--preset--color--border);
}
.sn-faq .sn-faq-body::before {
  content: "A";
  color: var(--wp--preset--color--accent);
  font-weight: 700;
  margin-right: .6em;
}

/* =========================================================
   固定CTAバー（スマホ）
   ========================================================= */
.sn-fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;
  grid-template-columns: 1fr 1fr 1fr;
  background: #fff;
  border-top: 1px solid var(--wp--preset--color--border);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
}
.sn-fixed-cta a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: .55rem 0;
  text-decoration: none;
  font-size: .72rem;
  font-weight: 700;
  color: var(--wp--preset--color--text);
  min-height: 56px;
}
.sn-fixed-cta a .ico { font-size: 1.25rem; }
.sn-fixed-cta a.cta-tel  { color: var(--wp--preset--color--primary-dark); }
.sn-fixed-cta a.cta-line { background: var(--wp--preset--color--line); color: #fff; }
.sn-fixed-cta a.cta-form { background: var(--wp--preset--color--cta); color: #fff; }

@media (max-width: 767px) {
  .sn-fixed-cta { display: grid; }
  /* 固定バー分の余白をフッターに確保 */
  body { padding-bottom: 60px; }
}

/* =========================================================
   料金・比較テーブル（横スクロール）
   ========================================================= */
.sn-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wp-block-table.is-style-stripes td,
.wp-block-table td, .wp-block-table th { padding: .75rem 1rem; }
.wp-block-table th {
  background: var(--wp--preset--color--bg-section);
  color: var(--wp--preset--color--primary-dark);
  white-space: nowrap;
  min-width: 7rem;
  width: auto;
  vertical-align: middle;
  border-right: 2px solid var(--wp--preset--color--primary-light);
}

/* =========================================================
   汎用カードグリッド補助（Columnsのモバイル調整）
   ========================================================= */
@media (max-width: 600px) {
  .wp-block-columns.sn-keep-gap { gap: 1rem; }
}

/* リード文 */
.sn-lead {
  color: var(--wp--preset--color--text-sub);
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
}

/* パンくず（Yoast等が出力する想定の簡易装飾） */
.sn-breadcrumb { font-size: .85rem; color: var(--wp--preset--color--text-sub); }

/* =========================================================
   メインカラー背景の上は白抜き文字で統一
   （CTAバナー・各ページのタイトルカバーなど）
   ボタンのリンクは各ボタン色を保つため除外
   ========================================================= */
.wp-block-group.has-primary-background-color,
.wp-block-group.has-primary-background-color h1,
.wp-block-group.has-primary-background-color h2,
.wp-block-group.has-primary-background-color h3,
.wp-block-group.has-primary-background-color h4,
.wp-block-group.has-primary-background-color p,
.wp-block-group.has-primary-background-color li,
.wp-block-group.has-primary-background-color a:not(.wp-block-button__link) {
  color: #ffffff !important;
}

/* =========================================================
   ヒーローの画像を右半分にぴったり収める
   （画像の元寸法が違っても、4:3・カバーで自動フィット）
   ========================================================= */
.sn-hero figure.wp-block-image {
  margin: 0;
  width: 100%;
}
.sn-hero figure.wp-block-image img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

/* =========================================================
   動きの配慮
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   Contact Form 7 カスタマイズ
   ========================================================= */
table.CF7_table {
  width: 80%;
  margin: 0 auto;
  border: 3px solid #e5e5e5;
}
table.CF7_table tr {
  border-top: 1px solid #e5e5e5;
}
.single .entry-content table.CF7_table,
.page .entry-content table.CF7_table {
  display: table;
}

/* 入力欄 */
.CF7_table input,
.CF7_table textarea {
  border: 1px solid #d8d8d8;
}
.CF7_table ::placeholder {
  color: #797979;
}

/* 「必須」文字 */
.CF7_req {
  font-size: .9em;
  padding: 5px;
  background: #f79034;
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}

/* 「任意」文字 */
.CF7_unreq {
  font-size: .9em;
  padding: 5px;
  background: #bdbdbd;
  color: #fff;
  border-radius: 3px;
  margin-right: 1em;
}

/* タイトル列（PC：横並び・折り返しなし） */
@media screen and (min-width: 769px) {
  .CF7_table th {
    width: 1%;
    white-space: nowrap;
    background-color: #ebedf5;
    padding: 0.5em 1.2em;
    vertical-align: middle;
  }
  .CF7_table td {
    padding: 0.5em 1em;
  }
}

/* レスポンシブ（スマホ：縦積み） */
@media screen and (max-width: 768px) {
  table.CF7_table {
    width: 95%;
  }
  .CF7_table tr,
  .CF7_table td,
  .CF7_table th {
    display: block;
    width: 100%;
    line-height: 2.5em;
  }
  .CF7_table th {
    background-color: #ebedf5;
  }
}

/* お問い合わせページ: 電話番号の折り返し防止 */
body.page-id-12 .is-style-card p[style*="font-weight:700"] {
  white-space: nowrap;
  font-size: 1.2rem !important;
}

/* 「送信する」ボタン */
.wpcf7 input.wpcf7-submit {
  background-color: #f79034;
  border: 0;
  color: #fff;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0 auto;
}
.CF7_btn {
  text-align: center;
  margin-top: 20px;
}
.wpcf7-spinner {
  width: 0;
  margin: 0;
}