/* =========================================================
   スタートラスト 追加オーバーライド（壊さない最小上書き）
   - 証拠バー（等分・仕切り・レスポンシブ）
   - 証拠バー前テキストの整形（flex誤適用の解消）
   - H1下アクセントラインの中央寄せ
   - 3問診断の送信ボタン：中央&幅の最適化（既存HTMLのままでも効く）
   - #sec-why ペアの2番目崩れ防止（min-width/折返し/グリッド安定化）
   ========================================================= */

/* ---------- 証拠バー前の導入テキスト ---------- */
/* 以前の flex 指定を完全に無効化して、1行ブロックで表示 */
.st-proofintro{
  display:block !important;
  color:#475569;
  font-size:.95rem;
}
@media (max-width:576px){
  .st-proofintro{ font-size:.9rem; line-height:1.6; padding:0 .25rem; }
}

/* 証拠バーをできるだけ近づける（余白は .st-proofbar--snug を付けたときだけ） */
.st-proofbar--snug{ margin-top:.25rem; }

/* ---------- 証拠バー（3等分＋縦の点線） ---------- */
.st-proofbar{
  display:grid;
  grid-template-columns:repeat(3,1fr); /* 完全等分 */
  align-items:center;
  gap:0;                /* 仕切りで整えるので gap は 0 */
  padding:12px 16px;
  border-radius:14px;
}
.st-proofbar--soft{  background:#F7FBFF; border:1px solid #E6EEF9; }
.st-proofbar--plain{ background:transparent; border:0; padding-left:0; padding-right:0; }

/* 各アイテムの基本 */
.st-proofbar__item{
  min-width:0;
  display:flex;
  align-items:center;
  padding:14px 18px;
}
/* 中央・右に縦の点線（PC） */
.st-proofbar--divided .st-proofbar__item + .st-proofbar__item{
  border-left:1px dashed #E4EAF3;
}

/* 左：Elfsight（中央寄せ・幅を揃える） */
.st-proofbar__reviews{ justify-content:center; }
.st-proofbar__spotlight::before{ content:none !important; } /* 青グラデ完全OFF */
.st-proofbar__reviews [class^="elfsight-app-"],
.st-proofbar__reviews [class*=" elfsight-app-"]{
  max-width:280px; min-width:220px; margin:0 auto;
}

/* 実績メトリクスのビジュアル枠（3カード共通） */
.st-metric-visual{
  max-width:240px;
  width:100%;
  aspect-ratio:240/175;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  overflow:hidden;
}
/* Elfsight用：薄いグレー背景 */
.st-metric-visual--elfsight{
  background:#f5f7fa;
}
/* 画像用：背景なし */
.st-metric-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* 右2項目の見栄え（アイコン＋タイトル＋本文） */
.st-mini{ display:flex; align-items:flex-start; gap:12px; }
.st-mini svg{ flex:0 0 18px; margin-top:2px; color:#2563EB; }
.st-mini__title{ margin:0 0 .2rem; font-weight:700; letter-spacing:.02em; font-size:1rem; }
.st-mini__body{  margin:0; color:#475569; line-height:1.75; font-size:.95rem; }

/* タブレット以下は縦積み、点線は横線に変換 */
@media (max-width:992px){
  .st-proofbar{ grid-template-columns:1fr; gap:10px; }
  .st-proofbar--divided .st-proofbar__item + .st-proofbar__item{
    border-left:0; border-top:1px dashed #E4EAF3;
  }
}

/* ---------- H1下アクセントラインを中央寄せ ---------- */
.st-accent.text-center::before{
  margin-left:auto;
  margin-right:auto;
}

/* ---------- 3問診断：送信ボタンを中央＆幅最適化（HTML変更なしでもOK） ---------- */
/* 下段 row の“最後の col”を必ず1行占有させ、中央にボタン領域を作る */
#sec-guide .st-quiz-row.bottom > .col-12:last-child{
  flex:0 0 100%;
  display:flex;
  justify-content:center;
}
/* その直下のラッパ（有れば）とボタン幅を制御 */
#sec-guide .st-quiz-row.bottom > .col-12:last-child > .st-submit-wrap{
  flex:0 0 auto;
  width:clamp(220px, 60vw, 360px);
  padding:0 !important; /* 既存 .col-* が付いていても余白を消す */
}
#sec-guide .st-quiz-row.bottom > .col-12:last-child > .st-submit-wrap .btn{
  width:100%;
  min-height:44px;
  height:auto;
  border-radius:10px;
  font-weight:700;
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  padding: 0.75rem 1rem;
}
/* ラッパを入れていない場合でも "最後の子要素"をボタン領域として扱うフォールバック */
#sec-guide .st-quiz-row.bottom > .col-12:last-child > *:only-child{
  flex:0 0 clamp(220px, 60vw, 360px);
}

/* ---------- #sec-why 2番目のペア崩れ対策（グリッド安定化） ---------- */
#sec-why .why-pairs{ display:grid; row-gap:clamp(18px, 2.2vw, 28px); }
#sec-why .why-pair{
  display:grid;
  grid-auto-flow:dense;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); /* 左文＋右図 */
  grid-template-areas:"copy media";
  gap:clamp(14px, 2vw, 22px);
  align-items:start;
}
#sec-why .why-pair:nth-child(even){
  grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr); /* 右図＋左文 */
  grid-template-areas:"media copy";
}
/* 子要素のオーバーフローで列が押し広げられないように */
#sec-why .why-copy, #sec-why .why-figure{ min-width:0; }
/* 日本語に適した折り返し設定に変更 */
#sec-why .why-copy p, #sec-why .why-figure figcaption{ 
  word-break: normal;
  overflow-wrap: break-word;
}
#sec-why .why-figure img{ display:block; width:100%; height:auto; }

/* SP では縦積み（既存指定の上書き安定版） */
@media (max-width:992px){
  #sec-why .why-pair{
    grid-template-columns:1fr !important;
    grid-template-areas:"copy" "media" !important;
  }
}
/* ===== Quick Ask Overlay（メール/LINE前の任意ミニ質問） ===== */
.st-qa-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:1080;display:none;}
.st-qa{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1090;}
.st-qa.is-open,.st-qa-backdrop.is-open{display:flex;}
.st-qa-card{background:#fff;width:min(92vw,560px);border-radius:14px;border:1px solid #e5e7eb;box-shadow:0 20px 50px rgba(0,0,0,.25);}
.st-qa-head{padding:14px 16px;border-bottom:1px solid #eef2f7;font-weight:700;}
.st-qa-body{padding:14px 16px;}
.st-qa-actions{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eef2f7;}
.st-qa-chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px;}
.st-qa-chip{border:1px solid #cbd5e1;border-radius:9999px;padding:.45rem .8rem;background:#fff;cursor:pointer;user-select:none;}
.st-qa-chip.is-on{background:#0d6efd;color:#fff;border-color:#0d6efd;}
.st-qa-sub{color:#64748b;font-size:.92rem;margin:.25rem 0 0;}
.st-qa-title{margin:0;font-size:1.05rem;}
.st-qa-note{color:#64748b;font-size:.92rem;margin:.25rem 0 0;}
.st-qa-actions .btn{border-radius:10px;font-weight:700;}

/* ---------- はっ水 vs 親水 比較テーブルの色分け（親水＝オレンジに統一） ---------- */
.comparison-section .comparison-table thead th:nth-child(2){
  background:linear-gradient(90deg,#1e3a8a 0%,#1d4ed8 100%);
  color:#fff;
}
.comparison-section .comparison-table thead th:nth-child(3){
  background:linear-gradient(90deg,#f97316 0%,#ea580c 100%);
  color:#fff;
}
.comparison-section .comparison-table thead th:nth-child(2) *:not(.badge),
.comparison-section .comparison-table thead th:nth-child(3) *:not(.badge){
  color:inherit;
}

/* =========================================================
   ヘッダー説明文のオーバーフロー修正
   ※ overflow-x: clip を使用（sticky-top の動作を維持しつつ横はみ出し防止）
   ========================================================= */
html, body {
  overflow-x: clip;
  max-width: 100%;
}
/* #header_inner の max-width は new.css で 1280px に設定（上書きしない） */
#header {
  max-width: 100vw;
  overflow-x: clip;
}

/* =========================================================
   100vw使用箇所のオーバーフロー対策
   ========================================================= */
.hero-note-wrapper {
  max-width: 100%;
  overflow-x: hidden;
}
/* site-description のスタイルは new.css で一元管理 */
/* SPでは非表示（既存仕様を維持） */
@media (max-width: 767.98px) {
  #header .site-description {
    display: none !important;
  }
  /* SPでヘッダー全体を非表示 */
  #header {
    display: none !important;
  }
}

/* =========================================================
   日本語テキストの折り返し改善
   ========================================================= */
#plain-pledge .h5,
#plain-pledge p {
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
  /* text-wrap: balance は日本語に不適切なため削除 */
}

/* =========================================================
   中央寄せのかたまりの中身は、見た目も中央にそろえる
   （2026-09-04 社長指摘「センタリングになってないものぐらい、さっと直せよ」
     → 一度直したが直っておらず、再度のご指摘を受けて根本から直した）

   これまでの書き方が抱えていた問題:
     text-align: left ＋ width: fit-content ＋ max-width: 100%
   これは「かたまり自体は中央に置き、文章の折り返しは左端から」という
   意図だったが、**文章が長くなると fit-content が枠いっぱいまで広がる**ため、
   そこだけ左に張り付いて見えていた。意図どおりに動いていたのは短い文だけ。

   実測（本番 coating.php・幅1620px）:
     「あなたの愛車に、」          幅920px  左右の余白 111 / 111 → 中央に見える
     「ウォータースポット…」        幅669px  左右の余白 237 / 237 → 中央に見える
     「スタートラストは名古屋市…」  幅1143px 左右の余白   0 /   0 → 左に張り付く ★

   直し方:
     ・text-align を center にして、見た目どおり中央にそろえる
     ・max-width を 100% から min(100%, 42em) に変えて、
       長い文章でも枠いっぱいまで広がらないようにする
       （em は文字の大きさに連動するので、大きな見出しは実質そのまま。
         本文だけが読みやすい幅に収まる）

   - .text-center-keep クラスを付けた要素は従来どおり対象外
   ========================================================= */
/* 旧コメント（経緯として残す）
   中央配置テキストの折り返しを左端から開始
   - 表示位置は中央のまま（親のtext-align: centerでブロック自体を中央配置）
   - テキストの折り返しは左端から（text-align: left）
   - .text-center-keep クラスを追加すると従来の中央揃えを維持
   ========================================================= */

/* 説明文ブロック：中央配置 + 内部左揃え */
/* display: block + margin: auto で中央配置、text-align: left で左端折り返し */
.text-center > p:not(.text-center-keep),
.text-center > .h5:not(.text-center-keep),
.text-center > .small:not(.text-center-keep),
.text-center > .lead:not(.text-center-keep),
.text-center > .text-muted:not(.text-center-keep),
div.text-center p:not(.text-center-keep),
div.text-center .lead:not(.text-center-keep) {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 42em) !important;
}

/* 見出し（h1～h6、.target-main-title等）も同様に適用 */
/* .pc / .phone クラスは除外（レスポンシブ表示切替用） */
.text-center > h1:not(.text-center-keep):not(.pc):not(.phone),
.text-center > h2:not(.text-center-keep):not(.pc):not(.phone),
.text-center > h3:not(.text-center-keep):not(.pc):not(.phone),
.text-center > h4:not(.text-center-keep):not(.pc):not(.phone),
.text-center > h5:not(.text-center-keep):not(.pc):not(.phone),
.text-center > h6:not(.text-center-keep):not(.pc):not(.phone),
.text-center > .target-main-title:not(.text-center-keep),
div.text-center h2:not(.text-center-keep):not(.pc):not(.phone),
div.text-center h3:not(.text-center-keep):not(.pc):not(.phone) {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 42em) !important;
}

/* 特定のセクションで強化適用（素のまま宣言バンド等） */
#plain-pledge .text-center p,
#plain-pledge .text-center .h5,
#plain-pledge p,
#plain-pledge .h5 {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 42em) !important;
}

/* セクションヘッダー・リード文の左端折り返し */
.st-cf-section-header p,
.st-cf-section-lead,
.st-cf-sec-lead,
.coating-section-lead,
.section-lead,
.features-article-header p {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 42em) !important;
}

/* セクションタイトルの左端折り返し */
.st-cf-section-title,
.st-cf-sec-title,
.target-main-title,
.coating-section-title,
.section-title,
.features-article-header h2 {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  max-width: min(100%, 42em) !important;
}

/* =========================================================
   3カラム実績メトリクスの高さ揃え（画像位置ずれ防止）
   .st-metric-visual ラッパーで統一的に配置
   ========================================================= */

/* =========================================================
   はっ水/親水 コーティング比較カード - PC表示の左右対称化
   .st-type-cards / .st-type-card / .st-type-link / .st-type-inner / .st-type-btn
   ========================================================= */
@media (min-width: 768px) {
  /* 親row：flexで左右の高さを揃える */
  .st-type-cards {
    display: flex !important;
    align-items: stretch !important;
  }

  /* 各カラム：flex列で内部を縦に伸ばす */
  .st-type-card {
    display: flex !important;
    flex-direction: column !important;
  }

  /* 親水側のラッパー */
  .st-type-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  /* リンク要素：flex伸縮 */
  .st-type-link {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* カード内部：flex列で構成 */
  .st-type-inner {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* ボタンを下部に固定 */
  .st-type-btn {
    margin-top: auto !important;
    padding-top: 1.5rem;
  }

  /* ボタンの統一サイズ */
  .st-type-btn .btn {
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* =========================================================
   「違い①②③」バッジの改行防止・レイアウト修正
   ========================================================= */
/* バッジ内の改行を防止 */
.badge.bg-primary {
  white-space: nowrap;
  display: inline-block;
}

/* スマホでのカードレイアウト調整 */
@media (max-width: 767.98px) {
  /* 違い①②③カードの中央揃え */
  .col-md-4 > .text-center.h-100 {
    text-align: center !important;
  }

  /* バッジの位置を確実に中央に */
  .col-md-4 > .text-center.h-100 .badge {
    margin-left: auto;
    margin-right: auto;
  }

  /* fs-*のスマホ用フォントサイズ調整（改行防止・可読性向上） */
  .fs-14 {
    font-size: 1.1em !important;
  }
  .fs-15 {
    font-size: 1.15em !important;
  }
  .fs-16 {
    font-size: 1.2em !important;
  }
  .fs-17 {
    font-size: 1.25em !important;
  }
  .fs-18 {
    font-size: 1.3em !important;
  }
  .fs-19 {
    font-size: 1.35em !important;
  }
  .fs-20 {
    font-size: 1.4em !important;
  }
  .fs-22 {
    font-size: 1.5em !important;
  }
  .fs-24 {
    font-size: 1.6em !important;
  }
  .fs-26 {
    font-size: 1.75em !important;
  }
  .fs-28 {
    font-size: 1.9em !important;
  }
  .fs-30 {
    font-size: 2em !important;
  }
}

/* =========================================================
   スティッキーヘッダーの白い隙間防止
   ========================================================= */

#navi-wrap-new.sticky-top {
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  /* スクロール時の白い隙間を防ぐために上部にも色を延長 */
  margin-top: -1px;
  padding-top: 1px;
}

/* スクロール時のちらつき防止 */
#navi-wrap-new.sticky-top nav {
  will-change: transform;
  backface-visibility: hidden;
}

/* =========================================================
   全体的なスマホフォントサイズ・可読性調整
   ========================================================= */
@media (max-width: 575.98px) {
  /* 本文テキストの行間を広めに */
  p {
    line-height: 1.8;
  }

  /* セクションタイトルの調整 */
  .section-heading,
  .coating-section-title,
  .coating-section-heading {
    font-size: 1.5rem !important;
    line-height: 1.4;
  }

  /* 見出しの調整 */
  h1 {
    font-size: 1.75rem !important;
  }
  h2 {
    font-size: 1.5rem !important;
  }
  h3 {
    font-size: 1.25rem !important;
  }
  h4 {
    font-size: 1.1rem !important;
  }

  /* カード内のテキスト調整 */
  .card-body p,
  .card-text {
    font-size: 0.9rem;
    line-height: 1.75;
  }

  /* ボタンテキストの調整 */
  .btn {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  .btn-lg {
    font-size: 1rem;
    padding: 0.6rem 1.25rem;
  }
}

/* =========================================================
   実績バッジセクション（SEO/AIO強化用）
   清潔・爽やか・高貴なデザイン
   ========================================================= */
.achievements-section {
  padding: 2.5rem 0;
  background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
  border-top: 1px solid #e9ecef;
  border-bottom: 1px solid #e9ecef;
}

.achievement-badge {
  background: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
}

.achievement-badge:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.achievement-icon {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  color: #6c757d;
}

.achievement-content {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 0.5rem;
}

.achievement-number {
  font-size: 2.25rem;
  font-weight: 300;
  color: #212529;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.achievement-unit {
  font-size: 1rem;
  font-weight: 400;
  color: #495057;
}

.achievement-label {
  font-size: 0.8rem;
  color: #6c757d;
  display: block;
  font-weight: 500;
}

/* レスポンシブ調整 */
@media (max-width: 767.98px) {
  .achievements-section {
    padding: 1.5rem 0;
  }

  .achievement-badge {
    padding: 1rem 0.75rem;
  }

  .achievement-icon {
    font-size: 1rem;
  }

  .achievement-number {
    font-size: 1.75rem;
  }

  .achievement-unit {
    font-size: 0.85rem;
  }

  .achievement-label {
    font-size: 0.7rem;
  }
}

/* =========================================================
   「どんなお店？」セクション - リニューアルデザイン
   - イントロメッセージ（フル幅）
   - 2カラムのフィーチャーカード
   - 店舗ギャラリー
   ========================================================= */

/* イントロメッセージ（テキストのみ） */
.about-shop-intro {
  margin-bottom: 2rem;
}

.about-shop-intro .intro-heading {
  font-size: 1.4rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0.5rem;
  line-height: 1.6;
}

.about-shop-intro .intro-subtext {
  font-size: 1.1rem;
  color: #555;
  margin-bottom: 0;
}

/* フィーチャーカード */
.about-shop-features .feature-card {
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.about-shop-features .feature-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.about-shop-features .feature-image {
  overflow: hidden;
}

.about-shop-features .feature-image img {
  transition: transform 0.4s ease;
}

.about-shop-features .feature-card:hover .feature-image img {
  transform: none;
}

.about-shop-features .feature-content {
  padding: 1.5rem;
}

.about-shop-features .feature-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #333;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.about-shop-features .feature-title::before {
  content: '';
  width: 4px;
  height: 1.2em;
  background: linear-gradient(to bottom, #007bff, #0056b3);
  border-radius: 2px;
}

.about-shop-features .feature-text {
  font-size: 0.95rem;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/* 店舗ギャラリー */
.shop-gallery {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 1.5rem;
}

.shop-gallery h5 {
  font-size: 1rem;
  font-weight: 600;
  color: #555;
}

.shop-gallery h5 i {
  color: #6c757d;
}

.gallery-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.3s ease;
  cursor: pointer;
}

.gallery-thumb:hover {
  opacity: 0.85;
  transform: scale(1.05);
}

/* レスポンシブ調整 */
@media (max-width: 767.98px) {
  .about-shop-intro .intro-heading {
    font-size: 1.15rem;
  }

  .about-shop-intro .intro-subtext {
    font-size: 1rem;
  }

  .about-shop-features .feature-content {
    padding: 1rem;
  }

  .about-shop-features .feature-title {
    font-size: 1.05rem;
  }

  .about-shop-features .feature-text {
    font-size: 0.9rem;
    line-height: 1.8;
  }

  .shop-gallery {
    padding: 1rem;
  }

  .shop-gallery h5 {
    font-size: 0.9rem;
  }
}

/* =========================================================
   メニューセクション - モバイル表示サイズ拡大
   カーコーティング/プロテクションフィルム/カーフィルム/その他ディテーリング
   ========================================================= */
@media (max-width: 767.98px) {
  /* メニューカードの画像を大きく */
  .border-layout .layout-image {
    max-width: 320px !important;
    margin: 0 auto 1.5rem !important;
  }

  /* メニューカードのタイトルを大きく */
  .border-layout .layout-body h3 {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
  }

  /* メニューカードの説明文を大きく */
  .border-layout .layout-text {
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
  }

  /* カード内のパディングを広げる */
  .border-layout .layout-cell {
    padding: 2rem 1.25rem !important;
  }
}

/* =========================================================
   関連記事セクション - 全ページ統一スタイル
   各ページのCSS（carfilm.css, protection-film-styles.css等）
   による上書きを防ぎ、コーティングページと同じデザインにする
   IDセレクタ（#carfilm等）より優先度を高くするため複数指定
   ========================================================= */

/* 関連記事セクションのタイトルを統一（全ページ対応） */
/* スタイルのみ上書き、折り返しはサイト全体ルール(308-314行)に従う */
.section-wrapper.bg-light-section .section-title,
#carfilm .section-wrapper.bg-light-section .section-title,
#protectionfilm .section-wrapper.bg-light-section .section-title,
body .section-wrapper.bg-light-section .row.text-center .section-title {
  /* 折り返しルール（サイト全体と統一・2026-09-04 中央そろえに変更） */
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: fit-content !important;
  /* デザイン上書き */
  background: transparent !important;
  color: #1a202c !important;
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  padding: 0 0 0.5rem 0 !important;
  margin-bottom: 1rem !important;
  border: none !important;
  border-bottom: 2px solid #003366 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  max-width: 90% !important;
}

/* ::after疑似要素を無効化（ページ固有のデザインを防ぐ） */
.section-wrapper.bg-light-section .section-title::after,
.section-wrapper.bg-light-section .section-title::before,
#carfilm .section-wrapper.bg-light-section .section-title::after,
#carfilm .section-wrapper.bg-light-section .section-title::before,
#protectionfilm .section-wrapper.bg-light-section .section-title::after,
#protectionfilm .section-wrapper.bg-light-section .section-title::before {
  content: none !important;
  display: none !important;
}

/* SP対応 */
@media (max-width: 767.98px) {
  .section-wrapper.bg-light-section .section-title,
  #carfilm .section-wrapper.bg-light-section .section-title,
  #protectionfilm .section-wrapper.bg-light-section .section-title,
  body .section-wrapper.bg-light-section .row.text-center .section-title {
    font-size: 1.4rem !important;
    max-width: 95% !important;
  }
}

/* =========================================================
   .hero-section 内は中央揃えを維持
   ========================================================= */
.hero-section .text-center,
.hero-section .text-center h1,
.hero-section .text-center h2,
.hero-section .text-center p,
.hero-section .text-center div,
.hero-section .text-center img,
.hero-section .authority-badges,
.hero-section .badge-item,
.hero-section .stats-counter,
.hero-section .stat-item {
  text-align: center !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
}

.hero-section .authority-badges {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}

.hero-section .stats-counter {
  display: flex !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
}
/* =========================================================
   関連記事サムネイルの統一サイズ
   （XPageSpeedがinline styleを除去するためCSS側で強制）
   ========================================================= */
.section-wrapper.bg-light-section .card-img-top {
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* =========================================================
   アクセシビリティ: フォーカスインジケーター強化
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #f97316;
  outline-offset: 2px;
}