/* START-TRUST Renewal Styles */
/* 作成日: 2025-08-30 */

/* =========================================================
   Bootstrapデフォルトカラーの上書き（控えめで高級感のある色）
========================================================= */

/* プライマリカラー（青系）を控えめに */
.btn-primary,
.nav-pills .nav-link.active,
.bg-primary,
.table-primary,
.price-badge-web {
  background-color: #4a6fa5 !important; /* 深い青 */
  border-color: #4a6fa5 !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #3a5a8a !important;
  border-color: #3a5a8a !important;
}

/* セカンダリカラー（グレー系）を控えめに */
.btn-secondary,
.btn-outline-primary {
  background-color: transparent !important;
  border-color: #6c757d !important;
  color: #6c757d !important;
}

.btn-secondary:hover,
.btn-outline-primary:hover {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

/* 成功カラー（緑系）を控えめに */
.btn-success,
.bg-success {
  background-color: #5a7c5a !important;
  border-color: #5a7c5a !important;
  color: #ffffff !important;
}

/* 警告カラー（黄系）を控えめに */
.btn-warning,
.bg-warning {
  background-color: #b8860b !important;
  border-color: #b8860b !important;
  color: #ffffff !important;
}

/* 危険カラー（赤系）を控えめに */
.btn-danger,
.bg-danger {
  background-color: #8b4a4a !important;
  border-color: #8b4a4a !important;
  color: #ffffff !important;
}

/* 情報カラー（水色系）を控えめに */
.btn-info,
.bg-info {
  background-color: #5a8b8b !important;
  border-color: #5a8b8b !important;
  color: #ffffff !important;
}

/* テキストカラーを控えめに */
.text-primary {
  color: #4a6fa5 !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #5a7c5a !important;
}

.text-warning {
  color: #b8860b !important;
}

.text-danger {
  color: #8b4a4a !important;
}

.text-info {
  color: #5a8b8b !important;
}

/* =========================================================
   DAFNES Hero Section スタイル
========================================================= */
.dafnes-hero-section {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 10;
  padding: 4rem 0;
}

.hero-main {
  text-align: center;
  margin-bottom: 3rem;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.badge-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: #4a5568;
  letter-spacing: 0.05em;
}

.badge-type {
  font-size: 0.875rem;
  font-weight: 700;
  color: #2b6cb0;
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #3182ce, #2b6cb0);
  color: white;
  border-radius: 20px;
}

.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.2;
  color: #1a202c;
  margin-bottom: 1.5rem;
}

.hero-title .highlight {
  background: linear-gradient(135deg, #3182ce, #2b6cb0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-title .brand-name {
  color: #2d3748;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.hero-subtitle {
  font-size: 1.125rem;
  line-height: 1.7;
  color: #4a5568;
  max-width: 600px;
  margin: 0 auto;
}

.trust-indicators {
  margin-bottom: 3rem;
}

.trust-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.5rem 1rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.trust-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.trust-icon {
  font-size: 2rem;
  color: #3182ce;
  margin-bottom: 0.75rem;
}

.trust-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1a202c;
  margin-bottom: 0.25rem;
}

.trust-label {
  font-size: 0.875rem;
  color: #718096;
  font-weight: 500;
}

.hero-cta {
  text-align: center;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.cta-main, .cta-secondary, .cta-line {
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: 180px;
}

.cta-main {
  background: linear-gradient(135deg, #3182ce, #2b6cb0);
  border: none;
  color: white;
  box-shadow: 0 4px 20px rgba(49, 130, 206, 0.3);
}

.cta-main:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(49, 130, 206, 0.4);
  color: white;
}

.cta-secondary {
  border: 2px solid #3182ce;
  color: #3182ce;
  background: rgba(255, 255, 255, 0.9);
}

.cta-secondary:hover {
  background: #3182ce;
  color: white;
  transform: translateY(-3px);
}

.cta-line {
  background: #00b900;
  border: none;
  color: white;
  box-shadow: 0 4px 20px rgba(0, 185, 0, 0.3);
}

.cta-line:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(0, 185, 0, 0.4);
  color: white;
}

.cta-note {
  font-size: 0.95rem;
  color: #4a5568;
  margin: 0;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-image {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.15;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(226, 232, 240, 0.6) 100%);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .dafnes-hero-section {
    min-height: 70vh;
  }
  
  .hero-content {
    padding: 2rem 0;
  }
  
  .hero-title {
    font-size: 2rem;
  }
  
  .hero-subtitle {
    font-size: 1rem;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-main, .cta-secondary, .cta-line {
    width: 100%;
    max-width: 280px;
  }
  
  .trust-card {
    padding: 1rem 0.75rem;
  }
  
  .trust-icon {
    font-size: 1.5rem;
  }
  
  .trust-number {
    font-size: 1.25rem;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 1.75rem;
  }
  
  .hero-badge {
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
  }
  
  .trust-indicators .row {
    gap: 0.75rem;
  }
}

/* =========================================================
   施工実績カルーセル スタイル
========================================================= */
.evidence-carousel-container {
  position: relative;
  padding: 0 15px;
}

.evidence-carousel-container .carousel {
  background: transparent;
}

.evidence-carousel-container .carousel-inner {
  border-radius: 12px;
  overflow: hidden;
}

.evidence-carousel-container .evidence-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #fff;
}

.evidence-carousel-container .evidence-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.evidence-carousel-container .evidence-card .card-img-top {
  border-radius: 12px 12px 0 0;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.evidence-carousel-container .evidence-card:hover .card-img-top {
  transform: scale(1.05);
}

.evidence-carousel-container .evidence-card .card-body {
  padding: 1rem;
}

.evidence-carousel-container .evidence-card .card-title {
  font-size: 1rem;
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.evidence-carousel-container .evidence-card .card-text {
  color: #718096;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.evidence-carousel-container .evidence-card .btn {
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.evidence-carousel-container .evidence-card .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

/* カルーセルコントロールのスタイル */
.evidence-carousel-container .carousel-control-prev,
.evidence-carousel-container .carousel-control-next {
  width: 50px;
  height: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.evidence-carousel-container .carousel-control-prev {
  left: -25px;
}

.evidence-carousel-container .carousel-control-next {
  right: -25px;
}

.evidence-carousel-container .carousel-control-prev:hover,
.evidence-carousel-container .carousel-control-next:hover {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.evidence-carousel-container .carousel-control-prev-icon,
.evidence-carousel-container .carousel-control-next-icon {
  width: 20px;
  height: 20px;
  background-color: #4a5568;
}

/* インジケーターのスタイル */
.evidence-carousel-container .carousel-indicators {
  bottom: -50px;
  margin-bottom: 0;
}

.evidence-carousel-container .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background-color: #cbd5e0;
  margin: 0 4px;
  transition: all 0.3s ease;
}

.evidence-carousel-container .carousel-indicators button.active {
  background-color: #3182ce;
  transform: scale(1.2);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .evidence-carousel-container {
    padding: 0 10px;
  }
  
  .evidence-carousel-container .evidence-card .card-img-top {
    height: 180px;
  }
  
  .evidence-carousel-container .carousel-control-prev,
  .evidence-carousel-container .carousel-control-next {
    width: 40px;
    height: 40px;
  }
  
  .evidence-carousel-container .carousel-control-prev {
    left: -20px;
  }
  
  .evidence-carousel-container .carousel-control-next {
    right: -20px;
  }
  
  .evidence-carousel-container .carousel-control-prev-icon,
  .evidence-carousel-container .carousel-control-next-icon {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 576px) {
  .evidence-carousel-container {
    padding: 0 5px;
  }
  
  .evidence-carousel-container .evidence-card .card-img-top {
    height: 160px;
  }
  
  .evidence-carousel-container .carousel-control-prev,
  .evidence-carousel-container .carousel-control-next {
    width: 35px;
    height: 35px;
  }
  
  .evidence-carousel-container .carousel-control-prev {
    left: -15px;
  }
  
  .evidence-carousel-container .carousel-control-next {
    right: -15px;
  }
  
  .evidence-carousel-container .carousel-indicators {
    bottom: -40px;
  }
}

/* ===== コーティングメニュー専用スタイル (V0デザイン適用) ====================== */

/* カードホバー効果 */
.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* ボタンホバー効果 */
.btn {
  transition: all 0.3s ease;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* バッジアニメーション */
.badge {
  transition: all 0.3s ease;
}

.badge:hover {
  transform: scale(1.05);
}

/* フィロソフィー系クラス */
.ph-eyebrow {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ph-title {
  line-height: 1.2;
  font-weight: 700;
}

.ph-lead {
  line-height: 1.6;
  color: #6c757d;
}

/* レスポンシブ調整 */
@media (max-width: 768px) {
  .card {
    margin-bottom: 2rem;
  }

  .badge {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem !important;
  }
}

/* ===== Hero Hub Styles (v0デザイン適用) ====================== */
/* hero-hub.php用のカスタムスタイル */

/* 背景グラデーション */
.bg-gradient-to-br {
    background: linear-gradient(to bottom right, #ffffff, #ffffff, rgba(248, 249, 250, 0.3));
}

/* 最小高さ */
.min-vh-100 {
    min-height: 100vh;
}

/* 透明度 */
.opacity-25 {
    opacity: 0.25;
}

/* スペーシング */
.space-y-3 > * + * {
    margin-top: 1rem;
}

/* アスペクト比 */
.ratio-4x3 {
    --bs-aspect-ratio: 75%;
}

/* オブジェクトフィット */
.object-cover {
    object-fit: cover;
}

/* グラデーションオーバーレイ */
.bg-gradient-to-t {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent, transparent);
}

/* 円形要素 */
.rounded-circle {
    border-radius: 50% !important;
}

/* カスタム幅・高さ */
.w-1 {
    width: 0.25rem !important;
}

.h-1 {
    height: 0.25rem !important;
}

/* 最大幅 */
.max-w-4xl {
    max-width: 56rem;
}

/* 行の高さ */
.lh-sm {
    line-height: 1.25;
}

.lh-lg {
    line-height: 1.5;
}

/* フォントウェイト */
.fw-light {
    font-weight: 300 !important;
}

/* バッジのスタイル */
.bg-opacity-10 {
    background-color: rgba(var(--bs-primary-rgb), 0.1) !important;
}

.bg-opacity-20 {
    background-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

.bg-opacity-60 {
    background-color: rgba(var(--bs-primary-rgb), 0.6) !important;
}

.bg-opacity-70 {
    background-color: rgba(var(--bs-primary-rgb), 0.7) !important;
}

/* ボーダーオパシティ */
.border-opacity-20 {
    border-color: rgba(var(--bs-primary-rgb), 0.2) !important;
}

.border-opacity-30 {
    border-color: rgba(var(--bs-secondary-rgb), 0.3) !important;
}

/* 親水タイプ用の薄い背景 */
.bg-light.bg-opacity-50 {
    background-color: rgba(248, 249, 250, 0.3) !important;
}

/* レスポンシブ対応 */
@media (max-width: 767.98px) {
    .py-lg-20 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .pe-lg-5 {
        padding-right: 1rem !important;
    }
    
    .ps-lg-5 {
        padding-left: 1rem !important;
    }
    
    /* モバイルでのタイトルサイズ調整 */
    .h2 {
        font-size: 1.5rem !important;
    }
    
    /* モバイルでの説明文サイズ調整 */
    .fs-6 {
        font-size: 0.9rem !important;
    }
}

@media (min-width: 768px) {
    .py-lg-20 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    
    .pe-lg-5 {
        padding-right: 3rem !important;
    }
    
    .ps-lg-5 {
        padding-left: 3rem !important;
    }
    
    /* デスクトップでのタイトルサイズ調整 */
    .h2 {
        font-size: 2rem !important;
    }
    
    /* デスクトップでの説明文サイズ調整 */
    .fs-6 {
        font-size: 1rem !important;
    }
}

/* ===== /Hero Hub Styles ====================================== */

/* ===== Footer Renew (START-TRUST) =========================
   - 追加CSSは renewal.php のみ
   - 既存に影響しないよう .rnw-ft-* で完全分離
============================================================ */

.col-md-6 iframe {
    width: 100%;
    height: 100%;
    display: block; /* インライン要素の余白を解消 */
    border: 0;
}
/* フッター全体の余白削除 */
.container-fluid.mt-md-10.mt-5.fs-9 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#footerN {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.row.bg-infoA.pb-md-0.pb-0.mb-0 {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* キャッチコピーのフォント */
.rnw-ft-catchphrase {
    font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', 'Times New Roman', serif;
    letter-spacing: 0.05em;
    line-height: 1.4;
}

/* 地図コンテナ */
.rnw-ft-map-container {
    width: 100%;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
}

.rnw-ft-map-container iframe {
    border: 0;
    width: 100%;
    height: 100%;
}

/* リンク集コンテナ */
.rnw-ft-links-container {
    height: 280px;
}

/* 会社情報のアドレス */
.rnw-ft-address {
    font-style: normal;
}

/* コピーライト */
.rnw-ft-copyright-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    text-align: center !important;
    background-color: #0d6efd !important;
}

.rnw-ft-copyright-inner {
    width: 100% !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.rnw-ft-copyright-text {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    width: 100% !important;
}

/* フッター専用の余白削除 */
.footer-container {
    margin: 0 !important;
    padding: 0 !important;
}

.footer-container .row {
    margin: 0 !important;
}

/* 固定バナーの余白削除 */
.row.phone.fixed-bottom.bg-dark.pt-1 {
    margin: 0 !important;
    padding: 0 !important;
}

/* 固定バナー全体の余白削除 */
#kotei-bnr {
    margin: 0 !important;
    padding: 0 !important;
}

#kotei-bnr .clearfix {
    margin: 0 !important;
    padding: 0 !important;
}

#kotei-bnr .kotei-bnr01,
#kotei-bnr .kotei-bnr02,
#kotei-bnr .kotei-bnr03 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hero見出しの中央寄せ */
.ph-title {
    text-align: center !important;
}


/* MESSAGEセクションの文字間隔調整 */
.ph-prose p {
    letter-spacing: 0.05em;
    line-height: 1.7;
}

/* ナビゲーションの高さ制限解除 */
#navi {
    max-height: none !important;
    min-height: 60px !important;
}

/* ===== coating-menu.php用CSS ===== */
/* 作成日: 2025-01-27 */

/* カードの影とボーダー（coating-menu.php専用） */
.modern-card {
    border: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.modern-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
/* ▼ 各ブロックの幅を画面幅にフィットさせる */
/* Bootstrap未使用箇所の中央寄せ対策 */
/* ▼ 素のまま宣言バンド */
.pc {
    display: block !important;
}
.phone {
    display: none !important;
}

@media(max-width:767px) {
    .pc {
        display: none !important;
    }
    .phone {
        display: block !important;
    }
}
#plain-pledge {
    background-color: transparent;
}
/* ▲ 素のまま宣言バンド */
/* ===== Plain Pledge: taste alignment (center/serif/spacing) ===== */
#plain-pledge .row.align-items-center {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
#plain-pledge .col-12 {
    text-align: center; /* 全体をセンタリング */
}
/* ボタンは中央で少し大きめ・触りやすく */
#plain-pledge .btn {
    min-width: 240px;
    padding: .85rem 1rem;
}
#plain-pledge .btn + .btn {
    margin-left: .75rem;
}
#plain-pledge-reasons {
    margin-top: 1rem; /* ボタン列との距離をゆったり */
    margin-bottom: 1.5rem;
}
#plain-pledge-reasons li {
    margin-right: 1.1rem;
}
/* SP最適化：ボタンは縦積みでフル幅、間隔を均等に */
@media (max-width: 767.98px) {
    #plain-pledge .btn {
        width: 100%;
    }
    #plain-pledge .btn + .btn {
        margin-left: 0;
    }
}
/* ===== Plain Pledge: spacing adjustment ===== */
#plain-pledge .btn {
    margin-top: 1.5rem; /* 説明文との距離をさらに調整 */
    margin-bottom: 1.5rem;
}
/* ===== In-page navigation: smooth scroll and header offset ===== */
/* なめらかなスクロール（ユーザーが減速設定なら無効化） */
/* Step3: plain-pledge の実DOM調整（追記） */
#plain-pledge .lead {
    font-family: "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
    letter-spacing: .02em;
    margin-bottom: .25rem;
}
#plain-pledge .fs-6 {
    line-height: 1.9;
    margin-top: .5rem;
    margin-bottom: 1.25rem; /* ボタン列との間を確保 */
}
/* "もう少し広め"にしたい場合は ↑ の代わりにこちらを使う（任意）
#plain-pledge .fs-6 { line-height: 1.9; margin-top: 2rem; margin-bottom: 2rem; }
*/
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}
/* アンカー要素をブロック化して scroll-margin を効かせる */
#about-shop, #about-booth, #about-tech {
    display: block;
    /* PCの固定ヘッダー高さぶんだけ余白をとる（必要なら数値調整可） */
    scroll-margin-top: 96px;
}
/* SPはヘッダーが高くなりがちなので、余白を少し増やす */
@media (max-width: 767.98px) {
    #about-shop, #about-booth, #about-tech {
        scroll-margin-top: 120px;
    }
}
/* ▼ voiceブロック（お客様の声） */
#voice-block .card {
    transition: all 0.2s ease-in-out;
    border-radius: 0.75rem;
}
#voice-block .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
#voice-block .card-img-top {
    object-fit: cover;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
}
#voice-block .card-body {
    padding: 1rem;
}
#voice-block .card-text {
    line-height: 1.6;
}
#voice-block h2 {
    font-weight: 500;
    font-size: 1.8rem;
}
#voice-block .btn-outline-secondary {
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
}
/* ▲ voiceブロック */
/* ▼ ローカル・クイックアンサー帯 */
#local-answers {
    background: #fff;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
#local-answers .small {
    color: #6c757d; /* 説明ラベルを控えめに */
    letter-spacing: .02em;
}
#local-answers .fw-bold {
    font-weight: 600 !important;
    line-height: 1.2;
}
#local-answers a.fw-bold {
    text-decoration: none;
    border-bottom: 1px dotted rgba(0, 0, 0, .25);
}
#local-answers a.fw-bold:hover {
    border-bottom-color: transparent;
}
#local-answers .btn {
    border-radius: 9999px; /* 小さなピル型ボタン */
    padding: .4rem 1rem;
}
/* SPで詰まり過ぎないように微調整 */
@media (max-width: 767.98px) {
    #local-answers .row > [class*="col-"] {
        margin-top: .25rem;
    }
}
/* ▲ ローカル・クイックアンサー帯 */
/* ▼ ヘッダー：営業情報（テキスト化） */
/* ▼ header layout styling - Bootstrap row/col使用のため削除 */
.header-right ul.list-inline {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    line-height: 1.4;
}
.header_hours time {
    font-variant-numeric: tabular-nums;
}
/* サイトマップ／プライポリは小さく控えめに */
.header-right nav {
    font-size: 0.78rem;
    color: #666;
    line-height: 1.2;
}
/* 行間・余白調整 */
.header-right .list-inline-item + .list-inline-item {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid #ccc;
}
/* ▼ header最終調整：バランスと位置合わせ */
/* ① ロゴ画像の下切れ解消：高さ制限解除 */
.logo.pc img {
    max-height: none;
}
/* ② 営業情報：Bootstrapのjustify-content-endで制御 */
.header_hours {
    margin-top: 0; /* Bootstrapで制御するため不要 */
}
/* ③ サイトマップ／プライポリ：右上から本文説明文と横並びにする */
.site-description {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    line-height: 1.6;
}
.site-description::after {
    content: '';
    flex: 1;
}
.site-description + .header-right nav {
    position: absolute;
    top: 0.25rem;
    right: 0;
    font-size: 0.75rem;
    color: #666;
}
/* Step4: Header ≤1200px consolidate - Bootstrap row/col使用のため削除 */
/* === Header catch (H1降格の見た目維持) === */
.header-catch {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
/* === trust（H1周辺・共通） === */
.intro-trust {
    margin-top: .5rem;
}
.trust-metrics {
    padding: 0;
}
.trust-chip {
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .5rem;
    font-weight: 700;
    font-size: clamp(12px, 1.4vw, 14px);
    background: #fff;
}
.intro-bridge {
    margin: .25rem 0 0;
    font-size: clamp(13px, 1.6vw, 15px);
    color: #555;
}
/* ===== S-02 Hero (coating-hassuiN) ===== */
.hero-hassuiN {
    position: relative;
    padding: clamp(28px, 6vw, 80px) 0;
    /* 画像が未用意でも破綻しない：上に淡いグラデ、下に仮画像 */
    background-image:
        linear-gradient(180deg, rgba(246, 249, 255, .92) 0%, rgba(255, 255, 255, .95) 100%), url("/img/og/og-coating-hassui-1200x630.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* タイトル／リード／注記のベースライン（サイズはclampで安定） */
.hero-hassuiN .hero-title {
    margin: 0 0 .35em;
    font-size: clamp(24px, 5vw, 44px);
    font-weight: 800;
    letter-spacing: .02em;
}
.hero-hassuiN .hero-lead {
    margin: 0 0 .75rem;
    font-size: clamp(14px, 2.2vw, 18px);
    line-height: 1.8;
    color: #2b2b2b;
}
.hero-hassuiN .hero-note {
    margin: .25rem 0 0;
    font-size: clamp(12px, 1.8vw, 14px);
    color: #6b7280; /* muted */
}
/* DAFNESブランドバッジ */
.hero-hassuiN .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.hero-hassuiN .hero-badge .badge-text {
    font-size: clamp(11px, 1.4vw, 13px);
    font-weight: 600;
    color: #4a5568;
    letter-spacing: 0.05em;
}

.hero-hassuiN .hero-badge .badge-type {
    font-size: clamp(11px, 1.4vw, 13px);
    font-weight: 700;
    color: #2b6cb0;
    padding: 0.2rem 0.6rem;
    background: linear-gradient(135deg, #3182ce, #2b6cb0);
    color: white;
    border-radius: 15px;
}

/* 信頼指標バナー */
.hero-hassuiN .hero-trust {
    display: block !important;
    margin: 1rem 0;
}

.hero-hassuiN .trust-indicators-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.hero-hassuiN .trust-indicators-list li {
    font-size: clamp(11px, 1.6vw, 13px);
    color: #0f172a;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: 20px;
    padding: 0.4rem 0.8rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.hero-hassuiN .trust-indicators-list li i {
    color: #3182ce;
    font-size: clamp(10px, 1.4vw, 12px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hero-hassuiN .hero-badge {
        flex-direction: column;
        gap: 0.25rem;
        padding: 0.4rem 0.8rem;
    }
    
    .hero-hassuiN .trust-indicators-list {
        justify-content: center;
        gap: 0.4rem 0.6rem;
    }
    
    .hero-hassuiN .trust-indicators-list li {
        padding: 0.3rem 0.6rem;
    }
}

@media (max-width: 576px) {
    .hero-hassuiN .trust-indicators-list {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }
    
    .hero-hassuiN .trust-indicators-list li {
        width: fit-content;
    }
}

/* ===== V0 Hero Section Styles ===== */
.hero-section-v0 {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #e6f2ff 0%, #cce7ff 50%, #0d6efd 100%);
    color: white;
}

/* 親水コーティング用オレンジ系グラデーション */
.coating-shinsuiN .hero-section-v0 {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 50%, #ff8c00 100%) !important;
}

/* より強力なセレクタで背景を確実にオレンジに */
body .coating-shinsuiN.hero-section-v0 {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 50%, #ff8c00 100%) !important;
}

section.coating-shinsuiN.hero-section-v0 {
    background: linear-gradient(135deg, #fff4e6 0%, #ffe4cc 50%, #ff8c00 100%) !important;
}

/* 親水コーティング用オレンジ系要素 */
.coating-shinsuiN .hero-badge-v0 {
    color: #ff8c00;
    border: 1px solid rgba(255, 140, 0, 0.2);
}

.coating-shinsuiN .trust-card i,
.coating-shinsuiN .trust-number {
    color: #ff8c00 !important;
}

/* より具体的なセレクタでカード内文字を確実にオレンジに */
.coating-shinsuiN .trust-cards-grid .trust-card .trust-number {
    color: #ff8c00 !important;
}

.coating-shinsuiN .trust-cards-grid .trust-card i {
    color: #ff8c00 !important;
}

.coating-shinsuiN .trust-card {
    border: 1px solid rgba(255, 140, 0, 0.2);
}

.coating-shinsuiN .btn-primary-v0 {
    background: #ff8c00;
    box-shadow: 0 4px 15px rgba(255, 140, 0, 0.3);
}

.coating-shinsuiN .btn-primary-v0:hover {
    background: #e67e00;
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.4);
}

.coating-shinsuiN .btn-outline-v0 {
    color: #ff8c00;
    border: 1px solid #ff8c00;
}

/* 親水コーティング用コース比較セクション */
.coating-shinsuiN .feature-item i {
    color: #ff8c00;
}

.coating-shinsuiN .course-target strong {
    color: #ff8c00;
}

.coating-shinsuiN .course-btn {
    background: #ff8c00;
}

.coating-shinsuiN .course-btn:hover {
    background: #e67e00;
}

.coating-shinsuiN .course-card.popular {
    border: 2px solid #ff8c00;
}

.coating-shinsuiN .popular-badge {
    background: #ff8c00 !important;
    color: white !important;
}


/* Water Droplets Animation */
.water-droplets-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.water-droplet {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: droplet 3s ease-in-out infinite;
}

@keyframes droplet {
    0% {
        transform: translateY(-10px) scale(0.8);
        opacity: 0;
    }
    50% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(10px) scale(0.8);
        opacity: 0;
    }
}

/* Water Ripples Animation */
.water-ripples-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.water-ripple {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation: ripple 2s ease-out infinite;
}

@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* Hero Container - Bootstrap対応 */
.hero-section-v0 .container-fluid {
    position: relative;
    z-index: 10;
}

.hero-content {
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* Brand Badge */
.hero-badge-v0 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    color: #0d6efd;
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 50px;
    font-size: 1.125rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.hero-badge-v0 i {
    font-size: 1.25rem;
}

/* Main Title */
.hero-title-v0 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #1a202c;
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Subtitle */
.hero-subtitle-v0 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    margin-bottom: 3rem;
    color: #2d3748;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Trust Cards Grid */
.trust-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 3rem;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.trust-card {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(13, 110, 253, 0.2);
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.trust-card:hover {
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.trust-card i {
    font-size: 2rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
}

.trust-cards-grid .trust-number {
    font-size: 1.125rem !important;
    font-weight: 700;
    color: #0d6efd;
    margin-bottom: 0.25rem;
}

/* Google評価の星を黄色に */
.google-rating {
    color: #0d6efd !important;
}

/* 星マークのみ黄色に */
.google-rating {
    color: #0d6efd !important;
}

.trust-cards-grid .google-rating .stars {
    color: #ffd700 !important;
    font-size: 1rem !important;
    margin-left: 0.2rem;
}

.trust-label {
    font-size: 0.875rem;
    color: #6b7280;
    font-weight: 500;
}

/* CTA Buttons */
.hero-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.btn-primary-v0 {
    padding: 1rem 2rem;
    background: #0d6efd;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(13, 110, 253, 0.3);
}

.btn-primary-v0:hover {
    background: #0b5ed7;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(13, 110, 253, 0.4);
    color: white;
    text-decoration: none;
}

.btn-outline-v0 {
    padding: 1rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    color: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.btn-outline-v0:hover {
    background: white;
    color: #0d6efd;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}

/* Note Wrapper - col制限を回避 */
.hero-note-wrapper {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: none;
}

/* Note */
.hero-note-v0 {
    font-size: 0.875rem;
    color: #4a5568;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.5;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
    text-align: center;
}

/* Bottom Gradient */
.hero-bottom-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8rem;
    background: linear-gradient(to top, #ffffff, transparent);
    pointer-events: none;
}

/* Responsive Design */
@media (min-width: 640px) {
    .hero-cta-buttons {
        flex-direction: row;
    }
    
    .trust-cards-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-badge-v0 {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
    
    .trust-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .trust-card {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .trust-cards-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .hero-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-primary-v0,
    .btn-outline-v0 {
        width: 100%;
        max-width: 300px;
    }
}

/* ===== コース比較セクション ===== */
.course-comparison-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.section-header {
    margin-bottom: 3rem;
}

.section-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.125rem;
    color: #6b7280;
    margin-bottom: 0;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* 2コース用のグリッド */
.courses-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 2rem auto 0;
}

.course-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.course-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.course-card.popular {
    border: 2px solid #0d6efd;
    transform: scale(1.02);
}

.course-card.recommended {
    border: 2px solid #28a745;
}

.course-card.premium {
    border: 2px solid #ffc107;
}

.course-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #e9ecef;
    color: #6c757d;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.popular-badge {
    background: #0d6efd !important;
    color: white !important;
}

.recommended-badge {
    background: #28a745 !important;
    color: white !important;
}

.premium-badge {
    background: #ffc107 !important;
    color: #212529 !important;
}

.course-image {
    text-align: center;
    margin-bottom: 1.5rem;
}

.course-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 12px;
    background: #f8f9fa;
    padding: 1rem;
}

.course-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
    text-align: center;
}

.course-subtitle {
    font-size: 1rem;
    color: #6b7280;
    text-align: center;
    margin-bottom: 1.5rem;
}

.course-features {
    margin-bottom: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.feature-item i {
    color: #0d6efd;
    margin-right: 0.75rem;
    width: 20px;
    text-align: center;
}

.course-target {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: #495057;
}

.course-target strong {
    color: #0d6efd;
}

.course-btn {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: #0d6efd;
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    text-align: center;
    transition: all 0.3s ease;
}

.course-btn:hover {
    background: #0b5ed7;
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .courses-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .courses-grid-2 {
        grid-template-columns: 1fr;
        max-width: none;
    }
    
    .course-card {
        padding: 1.5rem;
    }
    
    .course-card.popular {
        transform: none;
    }
    
    .section-title {
        font-size: 1.75rem;
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .course-comparison-section {
        padding: 2rem 0;
    }
    
    .course-card {
        padding: 1rem;
    }
    
    .course-name {
        font-size: 1.25rem;
    }
    
    .course-img {
        width: 60px;
        height: 60px;
    }
}

/* ===== V0コーティング比較セクション ===== */
.v0-coating-comparison {
    padding: 2rem 0;
    background: #ffffff;
}

/* Bootstrap構造に合わせてcontainer-fluidとcol-md-9を使用 */

.v0-comparison-header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.v0-comparison-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 0.5rem;
}

.v0-comparison-subtitle {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 0;
}

.v0-comparison-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

.v0-course-card {
    position: relative;
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: .75rem;
    transition: box-shadow 0.2s ease;
}

.v0-course-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.v0-course-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: .75rem;
    font-weight: 700;
    padding: .25rem .5rem;
    border-radius: 999px;
    display: inline-block;
    color: #fff;
    box-shadow: 0 6px 10px rgba(0,0,0,.08);
    z-index: 1;
}

/* カード配色（V0準拠の淡色背景） */
.v0-card-green { background: #f0fdf4; }
.v0-card-blue { background: #eff6ff; }
.v0-card-slate { background: #f3f4f6; }
.v0-card-purple { background: #faf5ff; }

.v0-badge-blue { background: #3b82f6; }
.v0-badge-green { background: #16a34a; }
.v0-badge-purple { background: #7c3aed; }
.v0-badge-orange { background: #f59e0b; }

.v0-course-name {
    font-weight: 700;
    font-size: 1.125rem;
    color: #1a202c;
    margin-bottom: .25rem;
    line-height: 1.2;
}

.v0-course-subtitle{
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: .5rem;
}

.v0-course-image {
    margin-bottom: 0.5rem;
}

.v0-course-img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 4px;
}

.v0-course-specs {
    margin-bottom: 0.5rem;
}

.v0-spec-item {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0.125rem;
}

.v0-course-description {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.4;
    margin: 0;
}

/* 評価（星） */
.v0-rating{ display:flex; align-items:center; gap:.25rem; margin:.35rem 0 .5rem; }
.v0-stars{ display:flex; gap:2px; }
.v0-star{ color:#e5e7eb; }
.v0-star.on{ color:#f59e0b; }
.v0-rating-num{ font-size:.8rem; color:#6b7280; margin-left:.25rem; }

/* 保証チップ */
.v0-warranty{
    text-align:center;
    background:#f8fafc;
    border:1px solid #e5e7eb;
    border-radius:8px;
    padding:.5rem;
    font-weight:600;
    margin:.25rem 0 .5rem;
}

/* 特長リスト */
.v0-features{ list-style:none; padding-left:0; margin:0; }
.v0-feature{ display:flex; align-items:flex-start; gap:.5rem; margin:.35rem 0; font-size:.9rem; color:#374151; }
.v0-dot{ width:8px; height:8px; border-radius:999px; margin-top:.4rem; flex-shrink:0; }
.v0-dot.green{ background:#16a34a; }
.v0-dot.blue{ background:#3b82f6; }
.v0-dot.slate{ background:#64748b; }
.v0-dot.purple{ background:#7c3aed; }

/* レスポンシブ対応 */
@media (max-width: 1024px) {
    .v0-comparison-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .v0-comparison-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .v0-comparison-title {
        font-size: 1.25rem;
    }
}
/* === はっ水が効く条件（旧section-intro） */
#coating-condition .trust-metrics {
    margin-top: .25rem;
    padding: 0;
}
#coating-condition .trust-chip {
    display: inline-block;
    padding: .25rem .6rem;
    border: 1px solid var(--bs-border-color, #e5e7eb);
    border-radius: .5rem;
    font-weight: 700;
    font-size: clamp(12px, 1.4vw, 14px);
    background: #fff;
}
.card-pledge {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* --- 三要素カード内テキスト位置を完全に揃える（統合版） --- */
.card-pledge .card-body {
    flex-grow: 1; /* カード内で高さを確保 */
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 160px; /* 統一値（以前の170pxは不使用） */
}
.card-pledge .card-body h5 {
    margin-bottom: 1rem;
    min-height: 1.5em; /* タイトル高さで段差防止 */
}
.card-pledge .card-body p {
    flex-grow: 1;
    display: flex;
    align-items: flex-start; /* テキスト上揃え */
    line-height: 1.75;
}
/* ▼ pledgeカード：枠線とタイトルマーカー */
.card-pledge {
    border: 1px solid #ddd !important; /* 枠をグレーに統一 */
}
.card-pledge .pledge-title {
    color: #111; /* タイトルは黒に */
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* ▼ pledgeマーカー色分け */
.pledge-marker {
    display: inline-block;
    width: 6px;
    height: 18px;
    border-radius: 1px;
    background-color: #0ea5e9; /* デフォルト（商品知識） */
}
.marker-env {
    background-color: #10b981; /* 施工環境（緑） */
}
.marker-tech {
    background-color: #f59e0b; /* 施工技術（山吹色） */
}
/* ============================= */
/* #menu-hassui 専用スタイル     */
/* ============================= */
#menu-hassui {
    background: #f8f9fa;
}
.menu-hassui-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}
.menu-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.menu-card-visual img {
    width: 100%;
    height: auto;
    display: block;
}
.menu-card-body {
    padding: 1.25rem;
}
.menu-card-title {
    font-size: 1.4rem;
    font-weight: 700;
}
.menu-card-catch {
    font-size: 1rem;
    color: #555;
    margin-bottom: 0.75rem;
}
.menu-card-points {
    padding-left: 1.2rem;
    margin-bottom: 1rem;
}
.menu-card-points li {
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
}
.menu-card-recommend {
    font-weight: 600;
    color: #0d6efd;
}
.menu-card-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}
/* =========================================================
   Cinematic Menu (Hassui) — SAFE REWRITE (scoped)
   目的：
   - 上位シーンは白字＆動画/画像の上に表示（装飾は最小限）
   - 価格パネル（.cinemenu-detail--price）は "元の白背景/黒文字" を保ち、
     横スクロールOK・開閉OK・カラー上書きしない
   - :target / has の"強制開"は使わない（揺れ/点滅対策はしない）
   - 影響範囲は #menu-hassui 配下に限定
========================================================= */
/* ベース：シーン */
#menu-hassui .cinemenu-scene {
    position: relative;
    isolation: isolate;
    min-height: 78vh;
    padding-block: clamp(40px, 8vw, 88px);
}
/* 背景メディア（積層：画像0 < 動画1 < マスク2 < 減光3 < テキスト4） */
#menu-hassui .cinemenu-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: #000;
}
#menu-hassui .cinemenu-media .cinemenu-fallback {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
#menu-hassui .cinemenu-media .cinemenu-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
    #menu-hassui .cinemenu-media .cinemenu-video {
        display: none;
    }
}
/* ドット＋薄いベール（控えめ） */
#menu-hassui .cinemenu-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    --dot-color: rgba(146, 146, 146, .08);
    --dot-size: 1px;
    --dot-gap: 5px;
    --veil: rgba(0, 0, 0, .45);
    background:
        radial-gradient(circle, var(--dot-color) 0 var(--dot-size), transparent calc(var(--dot-size) + 1px)) 0 0 / var(--dot-gap) var(--dot-gap), var(--veil);
}
/* 詳細オープン時に少し暗くしたい場合だけ使う。初期は見えない */
#menu-hassui .cinemenu-media::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: rgba(0, 0, 0, 0);
    opacity: 0;
    transition: opacity .35s ease;
}
/* "どこかの詳細が開いたら"暗くする（強制ではなく視覚補助） */
#menu-hassui .cinemenu-scene:has(.detail-toggle:checked) .cinemenu-media::before {
    background: rgba(0, 0, 0, .82);
    opacity: 1;
}
#menu-hassui .cinemenu-scene:has(.detail-toggle:checked) .cinemenu-media::after {
    opacity: .4;
}
/* テキストコンテンツ（最前面） */
#menu-hassui .cinemenu-content {
    position: relative;
    z-index: 4;
    padding: clamp(2rem, 5vw, 4rem) 0;
}
/* 文字色を"必要な要素だけ"白にする（* で全子孫は塗らない） */
#menu-hassui .cinemenu-title, #menu-hassui .cinemenu-lead, #menu-hassui .cinemenu-badge, #menu-hassui .cinemenu-meters, #menu-hassui .cinemenu-cta .btn-detail, #menu-hassui .cinemenu-link {
    color: #fff !important;
}
/* タイトルの装飾オフ（左線/下線など） */
#menu-hassui .cinemenu-title {
    margin: .25rem 0 1rem;
    font-size: clamp(1.6rem, 2.6vw, 2.4rem);
    letter-spacing: .02em;
    font-weight: 800;
    border: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    text-decoration: none !important;
}
#menu-hassui .cinemenu-title.tri-line_left {
    border-left: 0 !important;
    padding-left: 0 !important;
}
#menu-hassui .cinemenu-title::before, #menu-hassui .cinemenu-title::after {
    content: none !important;
}
/* リード／バッジ */
#menu-hassui .cinemenu-lead {
    font-size: clamp(1rem, 1.6vw, 1.1rem);
    opacity: 1;
}
#menu-hassui .cinemenu-badge {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .25rem .6rem;
    font-size: .9rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .65);
    border-radius: 999px;
}
/* メーター */
#menu-hassui .cinemenu-meters {
    display: flex;
    gap: 1.25rem;
    list-style: none;
    padding: 1rem 0 0;
    margin: 0 0 1.25rem;
}
#menu-hassui .cinemenu-meters .meter-label {
    min-width: 3.5em;
    opacity: 1;
}
#menu-hassui .cinemenu-meters .dot {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin: 0 .12rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .35);
}
#menu-hassui .cinemenu-meters .dot.is-on {
    background: #ffc107 !important;
}
/* CTA */
#menu-hassui .cinemenu-cta {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem;
}
/* 詳しくボタンのみ白地/黒文字。その他ボタンは触らない（非表示もしない） */
#menu-hassui .cinemenu-cta .btn-detail {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #fff !important;
}
/* 詳細パネル（共通：説明用のみ白字。価格パネルは除外） */
#menu-hassui .cinemenu-detail {
    margin-top: clamp(10px, 1.8vw, 16px);
}
#menu-hassui .cinemenu-detail .detail-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
#menu-hassui .cinemenu-detail .detail-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .55s ease, opacity .35s ease, transform .35s ease;
    border-top: 1px solid rgba(255, 255, 255, .25);
    padding-top: 0;
    margin-top: .5rem;
}
#menu-hassui .cinemenu-detail:not(.cinemenu-detail--price) .detail-panel {
    color: #fff;
}
#menu-hassui .cinemenu-detail .detail-toggle:checked ~ .detail-panel {
    max-height: 1800px;
    opacity: 1;
    transform: none;
    padding-top: .75rem;
}
/* 説明パネル：開いている時だけ2カラム（価格パネルは対象外） */
#menu-hassui .cinemenu-detail:not(.cinemenu-detail--price) .detail-toggle:checked ~ .detail-panel {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: clamp(12px, 2.2vw, 28px);
    align-items: start;
}
#menu-hassui .detail-main {
    min-width: 0;
}
#menu-hassui .detail-side .bottle {
    margin: 0;
}
#menu-hassui .detail-side img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: clamp(220px, 32vh, 420px);
}
@media (max-width: 767.98px) {
    #menu-hassui .cinemenu-detail:not(.cinemenu-detail--price) .detail-toggle:checked ~ .detail-panel {
        grid-template-columns: 1fr;
    }
    #menu-hassui .detail-side {
        margin-top: .5rem;
    }
}
/* 見出し・本文組み（説明パネル） */
#menu-hassui .detail-heading {
    margin-bottom: .4rem;
    font-weight: 700;
}
#menu-hassui .detail-lead {
    margin-bottom: .75rem;
    line-height: 1.9;
}
#menu-hassui .detail-points {
    margin: 0 0 .75rem;
    padding-left: 1.1rem;
}
#menu-hassui .detail-points li {
    margin: .15rem 0;
}
#menu-hassui .detail-specs dl {
    display: grid;
    grid-template-columns: max(120px, 26%) 1fr;
    gap: .35rem .75rem;
    margin: .5rem 0 0;
}
#menu-hassui .detail-specs dd {
    margin: 0;
}
/* ---------------------------------------------------------
   価格パネル（.cinemenu-detail--price）
   - 白背景/黒文字を維持
   - 横スクロールを強制ON
   - display/grid を強制しない（既存のテーブル幅を尊重）
--------------------------------------------------------- */
#menu-hassui .cinemenu-detail--price .detail-panel {
    /* アニメ/開閉は共通ロジックのまま。ここでは配色だけ戻す */
    color: initial;
    border-color: initial;
    text-shadow: none;
    /* 背面の暗い映像の影響を受けないよう白背景で保護（テーブル自体が白でもOK） */
}
#menu-hassui .cinemenu-detail--price .coating-price-scroll {
    background: #fff;
    color: #212529;
    overflow-x: auto !important; /* 横スクロールを明示許可 */
    -webkit-overflow-scrolling: touch;
}
#menu-hassui .cinemenu-detail--price .coating-price-table {
    background: #fff;
    color: #212529;
}
/* タブ（nav-pills）は"標準トーン"でOK。必要最小限だけ微調整 */
#menu-hassui .cinemenu-detail--price .nav-pills {
    flex-wrap: wrap;
    gap: .5rem .6rem;
}
#menu-hassui .cinemenu-detail--price .nav-pills .nav-link {
    background: #fff;
    color: #212529;
    border: 1px solid #ced4da;
}
#menu-hassui .cinemenu-detail--price .nav-pills .nav-link:hover {
    background: #f8f9fa;
}
#menu-hassui .cinemenu-detail--price .nav-pills .nav-link.active {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}
/* テーブルの見出しだけは濃色＋白字で可視性UP（内部罫線は壊さない） */
#menu-hassui .cinemenu-detail--price .coating-price-table thead th:first-child {
    background-color: var(--bs-primary, #0d6efd) !important;
    color: #fff !important;
}
/* 最後：シーン間の間隔（保険） */
#menu-hassui .cinemenu-scene + .cinemenu-scene {
    margin-top: clamp(48px, 9vw, 96px);
}
#menu-hassui .cinemenu-scene:last-of-type {
    margin-bottom: clamp(56px, 10vw, 120px);
}
/* 料金差し替え中はアニメ無効（点滅／揺れ防止） */
#price-root-hexa[aria-busy="true"], #price-root-hexa[aria-busy="true"] * {
    transition: none !important;
}
/* === Hexa料金アコーディオン：視認性修正 ================== */
/* 料金アコーディオン上端のラインを白に */
.cinemenu-detail--price .detail-panel {
    border-top: 1px solid rgba(255, 255, 255, .65) !important;
}
/* アコーディオン内の見出し・冒頭テキストは黒文字に固定（白背景上で可読性確保） */
.cinemenu-detail--price .detail-panel h2, .cinemenu-detail--price .detail-panel h3, .cinemenu-detail--price .detail-panel p, .cinemenu-detail--price .detail-panel li, .cinemenu-detail--price .detail-panel .fw-bold {
    color: #212529 !important;
}
#maintenance-note .maintenance-note__card {
    background: #fff;
    border: 1px solid #e7e7e7;
    border-radius: 12px;
    padding: 18px 16px;
    margin-bottom: 16px;
}
#maintenance-note .maintenance-note__cta .btn {
    min-width: 180px;
}
@media (min-width: 768px) {
    #maintenance-note .maintenance-note__card {
        padding: 22px 20px;
        margin-bottom: 20px;
    }
}
/* === HERO video overlay (minimal additions, scoped) === */
.hero-hassuiN .hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.hero-hassuiN .hero-video, .hero-hassuiN .hero-fallback {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-hassuiN .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .28);
}
.hero-hassuiN .hero-inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 clamp(12px, 3vw, 24px);
}
@media (prefers-reduced-motion: reduce) {
    .hero-hassuiN .hero-video {
        display: none;
    }
}
/* =========================================================
   Recruit LP styling (Bootstrap-only / fully scoped)
   ※ 既存CSS衝突回避のため #recruit-main 以下に限定
   ========================================================= */

/* ① ページ背景：薄い斜線パターン（PC/SP共通） */
#recruit-main {
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.025) 0 6px,
      rgba(0,0,0,0) 6px 12px
    );
}

/* ② H1「地元で実戦」にイエローマーカー（テキスト幅に追随） */
#recruit-main #recruit-hero .h2 {
  display: inline; /* 背景マーカーを文字幅で止める */
  background: linear-gradient(transparent 65%, #fff4a3 0);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* コンテナ幅と縦リズムの統一 */
#recruit-main .container-narrow { max-width: 860px; }

/* 共通：セクションの上下余白 */
#recruit-main section { scroll-margin-top: 80px; }

/* ③ 募集内容のUL：カード風の読みやすい箇条書き */
#recruit-main #recruit-summary ul {
  list-style: none;
  padding: 0;
  margin: 0 0 .5rem;
  display: grid;
  gap: 10px;
}
#recruit-main #recruit-summary ul > li {
  position: relative;
  padding: .7rem .9rem .7rem 2.2rem;
  border: 1px solid #e6eef6;
  border-radius: 12px;
  background: #fff;
  line-height: 1.7;
}
#recruit-main #recruit-summary ul > li::before {
  content: "";
  position: absolute;
  left: .9rem; top: 1rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #0d6efd;            /* ブルーのピン */
  box-shadow: 0 0 0 4px #e7f1ff;  /* 薄い外輪で視認性UP */
}

/* ④ 「将来の独立…」：読みやすいパネル＋リード */
#recruit-main #recruit-stepup {
  border: 1px solid #e6eef6;
  border-radius: 14px;
  background: #fff;
  padding: 1.2rem 1.2rem;
}
#recruit-main #recruit-stepup .h3 { margin-bottom: .6rem; }
#recruit-main #recruit-stepup p {
  margin: 0 0 .5rem;
  line-height: 1.9;
  color: #334155;
}

/* 文化と働き方：カードの土台だけ整える（画像差替え前提） */
#recruit-main #recruit-culture figure {
  border: 1px solid #e6eef6;
  border-radius: 12px;
  background: #fff;
  padding: 8px;
}
#recruit-main #recruit-culture figcaption {
  color: #475569; line-height: 1.8; margin-top: .4rem;
}

/* ⑤ 勤務条件（DL）を横グリッド化して視線誘導を強化 */
#recruit-main #recruit-conditions dl {
  border: 1px solid #e6eef6;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
}
#recruit-main #recruit-conditions dt {
  font-weight: 800; color: #0b1b32;
}
#recruit-main #recruit-conditions dd {
  margin-bottom: .4rem;
  padding-left: .25rem;
  border-bottom: 1px dashed #e5e7eb;
}
#recruit-main #recruit-conditions dd:last-of-type { border-bottom: 0; }

/* ⑥ FAQ：Q/Aを頭出しし、Aに点線を敷いて塊感を出す */
#recruit-main #recruit-faq .h6 {
  position: relative;
  padding-left: 2rem;
  margin: 0 0 .25rem;
}
#recruit-main #recruit-faq .h6::before {
  content: "Q";
  position: absolute; left: 0; top: 0;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #0d6efd; color: #fff;
  font-weight: 800; font-size: .9rem;
}
#recruit-main #recruit-faq p {
  position: relative;
  padding-left: 2rem;
  margin: 0 0 .75rem;
  line-height: 1.9;
}
#recruit-main #recruit-faq p::before {
  content: "A";
  position: absolute; left: 0; top: .05rem;
  width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #f1f5f9; color: #0b1b32; font-weight: 800;
}
#recruit-main #recruit-faq .mb-3,
#recruit-main #recruit-faq .mb-0 { padding-bottom: .75rem; border-bottom: 1px dashed #e5e7eb; }
#recruit-main #recruit-faq .mb-0 { border-bottom: 0; }

/* 固定CVバナー（PC）をLPでは非表示にする
   ※ 既存CSSで #kotei-bnr が固定されているためLPでは明示的にOFF */
#recruit-main #kotei-bnr,
#recruit-main .kotei-bnr01,
#recruit-main .kotei-bnr02,
#recruit-main .kotei-bnr03 { display: none !important; }

/* ===== 4つのメニューの設計思想 (v0デザイン適用) ====================== */
/* 横分割セクション用のホバーエフェクト追加 */
#sec-coating-menu .col-md-4 a:hover {
  background-color: #f8f9fa;
  transition: background-color 0.3s ease;
}

#sec-coating-menu .col-md-4 a:hover h3 {
  color: #0d6efd !important;
  transition: color 0.3s ease;
}

/* ===== 診断フォーム レスポンシブ対応 ====================== */
/* 既存サイトの右寄せ指定を確実に打ち消して中央寄せに */
.st-quiz .form-label { text-align: center !important; display:block; width:100%; }

/* SPのみセレクトを大きめに（左右にゆったり） */
@media (max-width: 767.98px) {
  .select-sp-lg {
    padding: .65rem 1.25rem;
    font-size: 1.05rem;
    border-radius: .6rem;
  }
}

/* md以上でボタン幅をautoに戻す */
@media (min-width: 768px) {
  .w-md-auto { width: auto !important; }
}

/* ===== 無料代車セクション専用スタイル ====================== */
.rental-car-section {
  background-color: rgba(0,0,0,0.05);
}

.rental-car-container {
  max-width: 56rem;
  margin: 0 auto;
}

.rental-car-badge {
  background-color: #FFD700 !important;
  color: black;
  font-size: 0.75rem;
}

.rental-car-divider {
  width: 3rem;
  height: 2px;
  background-color: #0d6efd;
  margin: 0 auto;
}

.rental-car-card {
  background: white;
  border-radius: 0.5rem;
  padding: 0.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid rgba(0,0,0,0.1);
}

.rental-car-img {
  width: 100%;
  height: 60px;
  object-fit: cover;
  border-radius: 0.25rem;
}

/* ===== 信頼材料セクション専用スタイル ====================== */
.evidence-gallery .evidence-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.evidence-gallery .evidence-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.badge-card {
  transition: all 0.2s ease;
  border: 1px solid rgba(0,0,0,0.1);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.badge-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

.guarantee-badges .badge-card i {
  transition: transform 0.2s ease;
}

.guarantee-badges .badge-card:hover i {
  transform: scale(1.1);
}

/* SP用横スクロールスタイル */
.evidence-scroll-container {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 10px;
}

.evidence-scroll-container::-webkit-scrollbar {
  height: 6px;
}

.evidence-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.evidence-scroll-container::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 3px;
}

.evidence-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #0056b3;
}

.evidence-scroll-wrapper {
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
  width: max-content;
}

.evidence-scroll-item {
  flex: 0 0 280px; /* 固定幅で横スクロール */
  max-width: 280px;
}

/* ===== 診断チャート専用スタイル ====================== */
.diagnosis-progress .progress {
  border-radius: 10px;
  background-color: rgba(0,0,0,0.1);
}

.diagnosis-progress .progress-bar {
  border-radius: 10px;
  transition: width 0.3s ease;
}

.question-step {
  display: none;
}

.question-step.active {
  display: block;
}

.diagnosis-option {
  transition: all 0.2s ease;
  border-radius: 0.75rem;
  border: 2px solid transparent;
}

.diagnosis-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.diagnosis-option:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.result-card {
  background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
  border: none;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.result-card.bg-success {
  background: linear-gradient(135deg, #198754 0%, #20c997 100%);
}

.rating i {
  font-size: 1.2rem;
  margin: 0 2px;
}

/* ===== 比較表専用スタイル ====================== */
.comparison-table .table {
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.comparison-table .table-fixed {
  table-layout: fixed;
}

.comparison-table .table-fixed th:first-child,
.comparison-table .table-fixed td:first-child {
  width: 30%;
}

.comparison-table .table-fixed th:not(:first-child),
.comparison-table .table-fixed td:not(:first-child) {
  width: 35%;
}

.comparison-table .table th {
  border: none;
  font-weight: 600;
  vertical-align: middle;
  color: #fff !important;
}

.comparison-table .table td {
  border-color: rgba(0,0,0,0.1);
  vertical-align: middle;
  color: #212529 !important;
}

.type-header {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.type-badge {
  font-size: 0.875rem;
  font-weight: 600;
}

.type-icon {
  margin-top: 0.5rem;
}

.comparison-cell {
  padding: 0.5rem;
  color: #212529 !important;
}

.comparison-cell .stars,
.comparison-cell .badge {
  color: inherit;
}

.stars i {
  font-size: 1rem;
  margin: 0 1px;
}

.recommendation-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.recommendation-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* ===== ストーリー誘導専用スタイル ====================== */
.story-banner {
  background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.preview-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid rgba(0,0,0,0.1);
}

.preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.scroll-animation {
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* スムーズスクロール */
.smooth-scroll {
  transition: all 0.2s ease;
}

.smooth-scroll:hover {
  transform: translateY(-1px);
}

/* ===== V0デザイン準拠スタイル ====================== */
.v0-diagnosis-section {
  min-height: 100vh;
  background: #ffffff;
  padding: 3rem 0;
}

.v0-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: oklch(0.65 0.1 280 / 0.1);
  border-radius: 50%;
}

.v0-main-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: oklch(0.2 0 0);
  line-height: 1.2;
}

.v0-subtitle {
  font-size: 1.125rem;
  color: oklch(0.45 0 0);
  line-height: 1.5;
}

.v0-progress-container {
  max-width: 500px;
  margin: 0 auto;
}

.v0-progress-label,
.v0-progress-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: oklch(0.45 0 0);
}

.v0-progress-count {
  color: oklch(0.65 0.1 280);
}

.v0-progress-bar {
  height: 8px;
  background: oklch(0.25 0 0 / 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.v0-progress-fill {
  height: 100%;
  background: oklch(0.25 0 0);
  border-radius: 10px;
  transition: width 0.3s ease;
  width: 33.33%;
}

.v0-question-card {
  background: oklch(0.98 0 0 / 0.8);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 25px oklch(0.2 0 0 / 0.1);
  padding: 2rem;
}

.v0-question-title {
  font-size: 1.25rem;
  font-weight: 700;
  text-align: center;
  color: oklch(0.2 0 0);
  margin-bottom: 2rem;
  line-height: 1.4;
}

.v0-options-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.v0-option-button {
  width: 100%;
  padding: 1.5rem;
  background: transparent;
  border: 1px solid oklch(0.3 0 0);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 1rem;
}

.v0-option-button:hover {
  background: oklch(0.65 0.1 280 / 0.05);
  border-color: oklch(0.65 0.1 280);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px oklch(0.2 0 0 / 0.15);
}

.v0-option-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  background: oklch(0.65 0.1 280 / 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: oklch(0.65 0.1 280);
  font-size: 1.5rem;
}

.v0-option-content {
  flex: 1;
}

.v0-option-text {
  font-size: 1rem;
  font-weight: 500;
  color: oklch(0.2 0 0);
  line-height: 1.4;
}

/* 結果画面スタイル */
.v0-result-card {
  background: oklch(0.98 0 0 / 0.8);
  backdrop-filter: blur(10px);
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 8px 25px oklch(0.2 0 0 / 0.1);
  padding: 2rem;
}

.v0-result-header {
  text-align: center;
  margin-bottom: 2rem;
}

.v0-result-icon {
  margin-bottom: 1rem;
}

.v0-result-title {
  font-size: 2rem;
  font-weight: 700;
  color: oklch(0.25 0 0);
  margin-bottom: 1rem;
}

.v0-result-description {
  font-size: 1.125rem;
  color: oklch(0.45 0 0);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.v0-result-badge {
  margin-bottom: 1rem;
}

.v0-result-features {
  margin-top: 2rem;
}

.v0-feature-item {
  text-align: center;
  padding: 1.5rem;
  background: oklch(0.96 0 0 / 0.5);
  border-radius: 0.5rem;
}

.v0-feature-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  color: oklch(0.65 0.1 280);
}

.v0-feature-label {
  font-weight: 500;
  color: oklch(0.2 0 0);
}

.v0-feature-stars {
  margin-bottom: 1rem;
}

.v0-star {
  font-size: 1.2rem;
  color: oklch(0.85 0 0);
  margin: 0 2px;
}

.v0-star.active {
  color: oklch(0.85 0.05 60);
}

.v0-feature-badge {
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
}

.v0-badge-success {
  background: oklch(0.85 0.05 150);
  color: oklch(0.3 0.05 150);
}

.v0-badge-info {
  background: oklch(0.85 0.05 200);
  color: oklch(0.3 0.05 200);
}

.v0-badge-warning {
  background: oklch(0.85 0.05 60);
  color: oklch(0.3 0.05 60);
}

.v0-badge-danger {
  background: oklch(0.85 0.05 25);
  color: oklch(0.3 0.05 25);
}

.v0-result-note {
  font-size: 0.875rem;
  color: oklch(0.45 0 0);
  margin-top: 1rem;
}

/* SVGアイコンの色制御 */
.v0-icon-circle img,
.v0-option-icon img {
  filter: brightness(0) saturate(100%) invert(40%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.v0-option-button:hover .v0-option-icon img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* ========================================================
   Bootstrap拡張: p-md-6, p-md-7, p-md-8
======================================================== */
@media (min-width: 768px) {
  .p-md-6 {
    padding: 4rem !important;
  }
  .p-md-7 {
    padding: 5rem !important;
  }
  .p-md-8 {
    padding: 6rem !important;
  }
}

/* ========================================================
   選ばれる理由セクション: タイトル装飾
======================================================== */
.reason-title {
  font-weight: 700 !important;
  padding-left: 1rem;
  border-left: 4px solid #0d6efd;
  position: relative;
}

/* ====================== Menu 2x2 Layout ====================== */
.border-layout .layout-cell {
    padding: 2.5rem 1.5rem;
}
.border-layout .layout-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: 1rem 1.5rem;
}
.border-layout .layout-body h3 {
    font-weight: 700;
    font-size: 1.25rem;
    color: #1d3557;
    margin: 0 0 1rem;
}
+.border-layout .layout-image {
+    width: 100%;
+    max-width: 200px;
+    margin: 0 auto 1.25rem;
+}
+.border-layout .layout-image img {
+    width: 100%;
+    height: auto;
+    border-radius: 8px;
+    box-shadow: 0 8px 16px rgba(15, 23, 42, 0.08);
+}
+.border-layout .layout-text {
+    font-size: 0.95rem;
+    color: #4b5563;
+    line-height: 1.7;
+    margin: 0;
+}
 
 @media (min-width: 768px) {
     .border-layout .layout-cell {
         border-right: 1px solid #e3e8ef;
         border-bottom: 1px solid #e3e8ef;
     }
     .border-layout .layout-cell:nth-child(2),
     .border-layout .layout-cell:nth-child(4) {
         border-right: 0;
     }
     .border-layout .layout-cell:nth-child(3),
     .border-layout .layout-cell:nth-child(4) {
         border-bottom: 0;
     }
}

@media (max-width: 767.98px) {
    .border-layout .layout-cell {
        border-bottom: 1px solid #e3e8ef;
    }
    .border-layout .layout-cell:last-child {
        border-bottom: 0;
    }
}