@charset "UTF-8";

/* ================================
   1. 全体共通 (Base)
================================ */
body { margin: 0; padding: 0; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; color: #333; background-color: #fff; overflow-x: hidden; }
* { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

.gallery-slider-wrap { position: relative; }
.slider-arrow { position: absolute; top: 50%; transform: translateY(-50%); background-color: rgba(0, 0, 0, 0.7); color: #fff; border: 1px solid #fff; width: 40px; height: 40px; font-size: 20px; font-weight: bold; cursor: pointer; z-index: 10; display: none; transition: background-color 0.2s; border-radius: 50%; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
.slider-arrow:hover { background-color: #000; }
.prev-arrow { left: -20px; }
.next-arrow { right: -20px; }
.coming-soon-wrap { display: block; width: 100%; aspect-ratio: 1/1; background-color: #1a1a1a; }
.coming-soon-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================
   2. トップページ (index.html) - PC版
================================ */
.top-hero { background-size: cover; background-position: center; text-align: center; padding: 100px 20px; color: #fff; }
.hero-content h2 { font-size: 36px; margin-bottom: 20px; }
.hero-content p { font-size: 14px; margin-bottom: 40px; line-height: 1.8; }
.btn-combined { display: inline-block; background: linear-gradient(90deg, #1e3c72 0%, #2a5298 50%, #4b2a75 50%, #613499 100%); color: #fff; padding: 15px 40px; text-decoration: none; font-weight: bold; border-radius: 4px; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }

/* 認定制度について */
.top-about-section { background-color: #fff; padding: 60px 20px; max-width: 1000px; margin: 0 auto;}
.section-title { text-align: center; font-size: 22px; margin-bottom: 40px; font-weight: bold;}
.about-cards-row { display: flex; gap: 20px; justify-content: center; }
.about-card-item { flex: 1; padding: 15px 10px 18px 10px; border-radius: 2px; display: flex; flex-direction: column; align-items: center;}
.card-blue { background-color: #f0f4f9; }
.card-purple { background-color: #f6f0f9; }
.card-gold { background-color: #fdfaf0; }
.card-title-blue { color: #1e3c72; text-align: center; margin: 0 0 10px 0; font-size: 15px; font-weight: bold; }
.card-title-purple { color: #61428c; text-align: center; margin: 0 0 10px 0; font-size: 15px; font-weight: bold; }
.card-title-gold { color: #b89230; text-align: center; margin: 0 0 10px 0; font-size: 15px; font-weight: bold; }
.card-inner-flex { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%;}
.about-icon-new { width: 95px; height: 95px; object-fit: contain; }
.card-text-box { text-align: left; }
.card-text-box p { font-size: 12px; line-height: 1.35; margin: 0 0 8px 0; font-weight: bold; color: #333;}
.card-text-box .btn-text { font-size: 12px; font-weight: bold; text-decoration: none; display: block; }
.card-blue .btn-text { color: #1e3c72; }
.card-purple .btn-text { color: #613499; }
.card-gold .btn-text { color: #b89230; }

/* 認定店を探す フィルター */
.top-search-section { background-color: #fff; padding: 60px 20px; }
.search-filter-box { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 40px; }
.search-filter-box select { padding: 12px; width: 220px; border: 1px solid #777; border-radius: 4px; font-size: 14px; background: #fff; outline: none; }
.btn-search { background-color: #1a1954; color: #fff; border: none; padding: 12px; width: 200px; font-size: 16px; font-weight: bold; border-radius: 4px; cursor: pointer; }

/* スタッフカード */
.shop-results { display: flex; flex-wrap: wrap; gap: 20px; max-width: 1000px; margin: 0 auto; justify-content: center;}
.staff-card-new { width: calc(33.333% - 14px); background: #f5f5f5; border: 1px solid #dcdcdc; border-radius: 4px; padding: 10px; display: flex; flex-direction: column;}
.card-main-layout { display: flex; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.card-photo-box { width: 42%; flex-shrink: 0; }
.staff-face-img { width: 100%; height: 100%; aspect-ratio: 3/4; object-fit: cover; display: block; border-radius: 2px;}
.card-info-box { width: 58%; display: flex; flex-direction: column; text-align: left; align-items: flex-start; min-width: 0;}
.card-logo-img { height: auto; width: 100%; max-width: 75px; margin-bottom: 4px; display: block;}
.card-badge-box { display: block; width: 100%; color: #fff; padding: 2px 4px; font-size: 9px; font-weight: bold; margin-bottom: 6px; text-align: left; border-radius: 2px; white-space: nowrap; overflow: hidden; letter-spacing: -0.5px;}
.badge-blue { background: linear-gradient(90deg, #1e3c72 0%, #2a5298 100%); }
.badge-purple { background: linear-gradient(90deg, #4b2a75 0%, #613499 100%); }
.card-shop-text { font-size: 11px; margin: 0 0 2px 0; font-weight: bold; color: #000; line-height: 1.2; word-break: keep-all;}
.card-pref-text { font-size: 10px; color: #666; margin: 0 0 4px 0;}
.card-name-text { font-size: 16px; margin: auto 0 0 0; letter-spacing: 1px; color: #000; white-space: nowrap;}
.card-sub-layout { width: 100%; display: flex; flex-direction: column; flex-grow: 1; }
.card-tags-wrap { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px;}
.card-tag { background: #cccccc; color: #000; font-size: 10px; padding: 3px 6px; border: 1px solid #777; border-radius: 2px;}
.btn-card-detail { display: block; background: #fff; border: 1px solid #bbb; text-align: center; padding: 10px; font-size: 13px; color: #000; text-decoration: none; font-weight: bold; border-radius: 2px; margin-top: auto;}

/* もっとみるボタン */
.btn-text-large { background: #fff; border: 1px solid #ccc; cursor: pointer; display: block; text-align: center; font-size: 14px; color: #333; font-weight: bold; margin: 40px auto 0 auto; padding: 12px 60px; border-radius: 4px; width: 300px; }
.btn-text-large:hover { background: #f0f0f0; }

/* カテゴリー検索 */
.top-category-section { display: flex; gap: 40px; max-width: 1000px; margin: 60px auto; padding: 0 20px;}
.category-col { width: 50%; }
.table-headers { display: flex; gap: 0;}
.table-th { flex: 1; text-align: center; color: #fff; font-size: 12px; padding: 8px 0; font-weight: bold;}
.bg-blue { background-color: #2a5298; }
.bg-purple { background-color: #613499; }
.search-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; text-align: center; font-size: 12px;}
.search-table td { border: 1px solid #ddd; padding: 10px 0;}
.search-table a { color: #333; text-decoration: none; display: block;}
.parts-search-row { display: flex; gap: 15px; margin-bottom: 0; }
.parts-col-half { width: calc(50% - 7.5px); }
.parts-col-half .table-th { width: 100%; }

/* 検索フィルター選択時の色付け（強制適用） */
.bg-blue + .search-table td.active { background-color: #e6f0fa !important; }
.bg-blue + .search-table td.active a { color: #1e3c72 !important; font-weight: bold !important; }
.bg-purple + .search-table td.active { background-color: #f8eef8 !important; }
.bg-purple + .search-table td.active a { color: #4b1248 !important; font-weight: bold !important; }
.search-table td.active-car { background-color: #222 !important; }
.search-table td.active-car a { color: #fff !important; font-weight: bold !important; }

/* フッター（月桂樹と数値） */
.top-footer { background-size: 100% auto !important; background-position: top center !important; background-repeat: no-repeat !important; background-color: #050505 !important; color: #fff; padding: 60px 20px 80px !important; text-align: center; position: relative;}
.footer-stats-container { display: flex; justify-content: center; align-items: center; gap: 30px; max-width: 800px; margin: 0 auto 10px auto; }
.footer-stats { display: flex; justify-content: center; gap: 60px; }
.stat-item { text-align: center; }
.stat-label { font-size: 14px; font-weight: bold; margin-bottom: 5px; color: #fff; }
.stat-num { font-size: 72px; font-weight: bold; margin: 0; font-family: Arial, sans-serif; color: #d1b17b; line-height: 1;}
.stat-num span { font-size: 24px; margin-left: 5px; color: #d1b17b; }
.footer-notes { margin-bottom: 60px; }
.date-note { font-size: 10px; color: #ccc; margin: 0 0 10px 0; }
.staff-note { font-size: 14px; font-weight: bold; margin: 0; }
.footer-cta h2 { font-size: 28px; margin-bottom: 15px; line-height: 1.4;}
.footer-cta p { font-size: 14px; margin-bottom: 30px;}


/* ================================
   3. 各種詳細ページ (about, staff, detail)
================================ */
/* 認定制度について */
.about-page { background-color: #fff; }
.about-hero-full { width: 100%; margin-bottom: 60px; }
.about-hero-full img { width: 100%; height: auto; display: block; }
.about-intro-section { max-width: 900px; margin: 0 auto 80px auto; padding: 0 20px;}
.intro-images { display: flex; gap: 15px; margin-bottom: 40px;}
.intro-images img { flex: 1; width: 33.333%; aspect-ratio: 4/3; object-fit: cover; }
.intro-text { text-align: center; font-size: 13px; line-height: 2; color: #333;}
.intro-text p { margin-bottom: 15px; }
.pro-detail-section { max-width: 900px; margin: 0 auto 80px auto; padding: 0 20px;}
.pro-header { display: flex; align-items: center; gap: 15px; border-bottom: 2px solid #ccc; padding-bottom: 15px; margin-bottom: 30px; position: relative; z-index: 1;}
.pro-header .bg-text { position: absolute; right: 0; bottom: -15px; font-size: 70px; font-weight: 900; color: #e8e8ed; z-index: -1; font-family: Arial, Helvetica, sans-serif; letter-spacing: 2px;}
.pro-logo { height: 28px; width: auto; display: block;}
.pro-header h3 { font-size: 18px; margin: 0;}
.pro-content { margin-bottom: 40px;}
.pro-img { margin-bottom: 30px; }
.pro-img img { width: 100%; height: auto; display: block; }
.pro-desc { font-size: 14px; line-height: 1.8; margin-bottom: 40px;}
.strengths-block { display: flex; gap: 30px; align-items: stretch; }
.strengths-title { width: 25%; display: flex; justify-content: center; align-items: center; text-align: center; color: #000; font-weight: bold; font-size: 14px; line-height: 1.6;}
.strengths-list { width: 75%; list-style: none; padding: 0; margin: 0;}
.strengths-list li { display: flex; align-items: center; gap: 15px; font-size: 14px; line-height: 1.5; margin-bottom: 20px;}
.icon-img { width: 36px; height: 36px; object-fit: contain; flex-shrink: 0;}

/* スタッフ詳細・施工詳細の共通 */
.bg-dark { background-color: #231c1a; }
.bg-dark .back-link { color: #fff; font-weight: bold; }
.breadcrumb-sub { font-size: 11px; padding: 15px 20px; color: #333; }
.staff-hero-new { display: flex; max-width: 1000px; margin: 0 auto; align-items: stretch;}
.hero-left { width: 50%; position: relative; display: flex; }
.staff-main-photo { width: 100%; object-fit: cover; display: block; }
.hero-badge-overlay { position: absolute; top: 20px; left: 20px; width: 180px; height: auto; z-index: 2; }
.hero-right { background-color: #211c19; padding: 40px; color: #fff; display: flex; align-items: center; justify-content: center; width: 50%;}
.hero-right-inner { width: 100%; max-width: 500px; }
.badge-wrap { text-align: center; margin-bottom: 15px; }
.title-badge { display: inline-block; padding: 8px 30px; border-radius: 4px; font-size: 14px; font-weight: bold; color: #fff; background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%); box-shadow: 0 4px 6px rgba(0,0,0,0.3); }

.shop-name-top { font-size: 16px; margin-bottom: 10px; font-weight: bold; }
.staff-name-top { font-size: 32px; margin: 0; letter-spacing: 2px; }
.staff-name-top .roma { display: block; font-size: 13px; font-family: 'Times New Roman', serif; font-style: italic; margin-top: 5px; color: #ccc; letter-spacing: 2px; }
.info-block { margin-bottom: 25px; text-align: left; }
.info-label { color: #d1b17b; font-weight: bold; font-size: 14px; margin-bottom: 10px; }
.info-text { font-size: 14px; line-height: 1.8; font-weight: bold; }
.catchphrase-section { background-color: #f5f5f5; text-align: center; padding: 60px 20px; margin-bottom: 60px; }
.quote-box { position: relative; display: inline-block; max-width: 800px; padding: 0 50px; margin-bottom: 30px; }
.quote-box h3 { font-size: 28px; line-height: 1.5; margin: 0; color: #333; font-weight: bold; }
.quote-box h3 .large-text { font-size: 28px; }
.quote-box::before, .quote-box::after { position: absolute; font-size: 80px; color: #555; font-family: "Hiragino Mincho ProN", "Yu Mincho", serif; line-height: 1; }
.quote-box::before { content: '“'; top: -30px; left: -10px; }
.quote-box::after { content: '”'; bottom: -50px; right: -10px; }
.catchphrase-section .message { font-size: 14px; line-height: 2; margin-bottom: 30px; font-weight: bold; max-width: 700px; margin: 0 auto; color: #333; }
.catchphrase-section .signature { font-size: 16px; font-weight: bold; text-align: right; max-width: 700px; margin: 0 auto; color: #333; }
.gallery-section-new { display: flex; max-width: 1000px; margin: 0 auto 60px auto; gap: 40px; padding: 0 20px;}
.gallery-col { width: 50%; }
.gallery-title { text-align: center; font-size: 16px; margin-bottom: 20px; font-weight: bold; }
.grid-tight { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 20px;}
.grid-tight a { display: block; width: 100%; aspect-ratio: 1/1;}
.grid-tight img { width: 100%; height: 100%; object-fit: cover; display: block;}
.shop-info-section-new { background-color: #f5f5f5; max-width: 1000px; margin: 0 auto 80px auto; padding: 40px;}
.shop-info-section-new h3 { text-align: center; font-size: 20px; margin-bottom: 30px;}
.shop-info-3col { display: flex; gap: 30px;}
.col-info, .col-photo { flex: 1; }
.shop-logo-name { display: flex; align-items: center; margin-bottom: 15px;}
.shop-cert-badge { display: inline-block; background-color: #274b8c; color: #fff; padding: 4px 15px; font-size: 12px; font-weight: bold; margin-bottom: 20px;}
.shop-details-text { font-size: 12px; line-height: 1.8; font-weight: bold;}
.shop-details-text p { margin: 0 0 5px 0;}
.col-photo img { width: 100%; height: auto; display: block; margin-bottom: 15px;}
.btn-shop-detail { display: block; background: #fff; border: 1px solid #ccc; text-align: center; padding: 12px; font-size: 12px; color: #333; text-decoration: none; font-weight: bold;}

.detail-section { max-width: 1000px; margin: 40px auto 80px auto; padding: 0 20px; }
.detail-top { display: flex; gap: 50px; margin-bottom: 50px; }
.detail-info { width: 40%; }
.info-group { margin-bottom: 30px; }
.info-group .label { font-size: 13px; color: #666; margin: 0 0 10px 0; }
.info-group .value { font-size: 15px; margin: 0; font-weight: bold; line-height: 1.8; color: #333; }
.info-group .text-large { font-size: 22px; margin-bottom: 5px; letter-spacing: 1px; }
.parts-list { list-style: none; padding: 0; margin: 0; font-size: 14px; line-height: 2; font-weight: bold; color: #333; }
.detail-main-img { width: 60%; }
.detail-main-img img { width: 100%; display: block; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.detail-gallery { display: flex; gap: 20px; flex-wrap: wrap; border-top: 1px solid #ddd; padding-top: 30px; }
.part-img-wrap { width: calc(33.333% - 14px); }
.part-img-caption { font-size: 12px; color: #666; margin: 0 0 8px 0; font-weight: bold; }
.part-img-wrap img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; border: 1px solid #eee; }


/* ================================
   4. スマホ用レスポンシブ (一括指定)
================================ */
@media screen and (max-width: 768px) {
  
  /* トップヒーロー ＆ フッター */
  .top-hero {
    background-size: 100% auto !important;
    background-position: top center !important;
    background-repeat: no-repeat !important;
    background-color: #080808 !important;
    padding-top: 45vw !important;
    padding-bottom: 40px !important;
  }
  .top-footer {
    padding-top: 18vw !important; /* スマホ時の月桂樹用の余白 */
    background-size: contain !important;
  }
  .footer-stats {
    gap: 20px; /* スマホ時は店舗数と人数を寄せる */
  }
  .stat-num { font-size: 44px; }
  .stat-num span { font-size: 16px; }

  /* 認定制度について（1つずつ縦並び） */
  .about-cards-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }
  .about-card-item {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 認定マスター検索結果（正しく2列縦積みにする） */
  .shop-results {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  .staff-card-new {
    width: 100% !important;
    padding: 8px !important;
  }
  .card-main-layout {
    flex-direction: column !important; /* 写真とテキストを縦積みに */
    gap: 8px !important;
  }
  .card-photo-box, .card-info-box {
    width: 100% !important;
  }
  .staff-face-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* スマホ時は写真を正方形に整える */
  }
  .card-name-text {
    font-size: 14px !important;
    margin-top: 5px !important;
  }

  /* 検索エリア：パーツ（上）と車種（下）に縦積み */
  .top-category-section {
    display: flex !important;
    flex-direction: column !important;
  }
  .category-col {
    width: 100% !important;
    margin-bottom: 40px;
  }
  .category-col .table-th[style*="opacity: 0"] {
    display: none !important; /* 車種側のダミー空白を消す */
  }

  /* 検索テーブルを2列に */
  .parts-search-row {
    flex-direction: column;
  }
  .parts-col-half {
    width: 100%;
    margin-bottom: 20px;
  }
  .search-table, .search-table tbody, .search-table tr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  .search-table td {
    width: 50%;
    box-sizing: border-box;
  }
  .search-table td a {
    padding: 12px 5px;
    text-align: center;
  }
}
/* ================================
   1. スマホ用スタッフカード（3列横並び）
================================ */
@media screen and (max-width: 768px) {
  
  /* 検索結果をキッチリ3列のグリッドにする */
  #shop-results {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important; /* 3列でキツくなるので隙間を狭く */
  }
  
  /* カード自体の余白を削ってコンテンツ領域を広げる */
  .staff-card-new {
    width: 100% !important;
    padding: 6px !important;
    display: flex !important;
    flex-direction: column !important; /* 上に写真、下にテキスト */
    box-sizing: border-box;
  }

  /* 写真を正方形で横幅いっぱいに */
  .staff-card-new .card-photo-box {
    width: 100% !important;
    margin-bottom: 6px !important;
  }
  .staff-face-img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
  }

  /* テキストエリアの幅を100%に */
  .staff-card-new .card-info-box {
    width: 100% !important;
  }

  /* --- 3列に収めるための文字サイズ極限調整 --- */
  
  /* 認定バッジ（文字を少し詰めて1行に収める） */
  .card-badge-box {
    font-size: 8px !important;
    padding: 2px !important;
    margin-bottom: 4px !important;
    letter-spacing: -0.5px !important;
  }
  
  /* 店舗名と都道府県 */
  .card-shop-text {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
  }
  .card-pref-text {
    font-size: 9px !important;
  }
  
  /* 人物名 */
  .card-name-text {
    font-size: 12px !important;
    margin-top: 2px !important;
  }
  
  /* 得意分野のタグ */
  .card-tags-wrap {
    gap: 2px !important;
    margin-bottom: 6px !important;
  }
  .card-tag {
    font-size: 8px !important;
    padding: 2px 4px !important;
  }
  
  /* 詳細をみるボタン */
  .btn-card-detail {
    font-size: 10px !important;
    padding: 6px 2px !important;
    margin-top: auto !important;
  }
}

/* ================================
   2. フッターの月桂樹の位置合わせ
================================ */
/* PC版の調整 */
.top-footer {
  /* 上の余白を削って数値を月桂樹の中に引き上げる */
  padding-top: 30px !important; 
  padding-bottom: 60px !important;
}

/* スマホ版の調整 */
@media screen and (max-width: 768px) {
  .top-footer {
    /* スマホ画面の比率に合わせて上の余白を極限まで削る */
    padding-top: 6vw !important; 
    padding-bottom: 40px !important;
  }
  
  /* スマホ時は数値を少し小さくして月桂樹に収める */
  .footer-stats {
    gap: 20px !important;
  }
  .stat-num {
    font-size: 38px !important;
  }
  .stat-num span {
    font-size: 14px !important;
  }
}
/* ================================
   5. スマホ用レスポンシブ（スタッフ詳細ページ）
================================ */
@media screen and (max-width: 768px) {
  
  /* ヒーローエリア（写真とプロフィール）を上下の縦積みに */
  .staff-hero-new {
    flex-direction: column !important;
  }
  .hero-left, .hero-right {
    width: 100% !important; /* 横幅を100%にして画面いっぱいに */
  }
  .hero-right {
    padding: 30px 20px !important; /* スマホ用に余白を少し調整 */
  }

  /* 施工実績ギャラリーを上下の縦積みに */
  .gallery-section-new {
    flex-direction: column !important;
    gap: 40px !important;
  }
  .gallery-col {
    width: 100% !important;
  }

  /* 画面下部の店舗情報エリアも上下の縦積みに */
  .shop-info-3col {
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* キャッチコピー（引用符）がスマホではみ出さないように微調整 */
  .quote-box {
    padding: 0 30px !important;
    margin-bottom: 20px !important;
  }
  .quote-box h3 {
    font-size: 16px !important;
  }
  .quote-box h3 .large-text {
    font-size: 22px !important; /* 「もっと早く〜」の文字をスマホサイズに */
    margin: 10px 0 !important;
  }
  .quote-box::before {
    top: -20px !important;
    left: -5px !important;
    font-size: 60px !important;
  }
  .quote-box::after {
    bottom: -30px !important;
    right: -5px !important;
    font-size: 60px !important;
  }
  
  .catchphrase-section .message {
    font-size: 13px !important;
    text-align: center !important; /* ← centerに変更 */
  }
}

/* ================================
   スマホ用レスポンシブ（施工詳細ページ）
================================ */
@media screen and (max-width: 768px) {
  
/* ================================
     施工詳細ページ (work_detail.html) のスマホ対応
  ================================ */
  .detail-top {
    flex-direction: column-reverse !important; /* 逆順にして車の写真を上に */
    gap: 20px !important;
  }
  .detail-info, .detail-main-img {
    width: 100% !important;
  }
  
  /* ギャラリーの写真をスマホでは2列に */
  .detail-gallery {
    gap: 10px !important;
  }
  .part-img-wrap {
    width: calc(50% - 5px) !important;
  }
}

@media screen and (max-width: 768px) {
  
  /* ================================
     about.html のスマホ用レスポンシブ対応
  ================================ */
  
  /* 1. 導入エリアの写真3枚を縦並び（1列）にする */
  .about-intro-section .intro-images {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .about-intro-section .intro-images img {
    width: 100% !important;
  }

  /* 2. ヘッダー部分：PC版と同じようにロゴ・タイトルの後ろに背景文字を配置する */
  .pro-header {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important; /* 横並びを維持 */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    overflow: hidden;
    padding-bottom: 15px !important;
  }
  
  /* ロゴのサイズ調整 */
  .pro-logo {
    height: 20px !important;
    width: auto !important;
    flex-shrink: 0;
  }
  
  /* 見出し（タイトル）のサイズ調整 */
  .pro-header h3 {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    z-index: 2; /* 文字を前面に出す */
  }
  
  /* 背景の大きな文字（SOUND PRO等）をPC版と同じように右側に配置 */
  .pro-header .bg-text {
    position: absolute !important;
    right: -10px !important;
    bottom: -5px !important;
    font-size: 42px !important; /* スマホの幅に合わせて少し縮小 */
    font-weight: 900 !important;
    color: #e8e8ed !important;
    z-index: 1 !important; /* ロゴやタイトルの後ろに配置 */
    opacity: 0.7;
    white-space: nowrap;
    letter-spacing: 1px !important;
  }

  /* 3. 「強み」のブロックを上下の縦積みにする */
  .strengths-block {
    flex-direction: column !important;
    gap: 15px !important;
  }
  
  .strengths-title {
    width: 100% !important;
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 15px !important;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
  }
  
  .strengths-list {
    width: 100% !important;
  }
  
  .strengths-list li {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }
}

/* ================================
   パンくずリストの修正（帯を両端まで広げ、文字を左に寄せる）
================================ */
.breadcrumbs_list {
  max-width: 100% !important; /* 帯を画面幅いっぱいにする */
  width: 100% !important;
  margin: 0 !important;
  padding-left: max(20px, calc((100% - 1000px) / 2)) !important; /* サイトの他のコンテンツの左位置と合わせる */
  text-align: left !important;
  box-sizing: border-box;
}

.breadcrumbs_list ul {
  display: flex !important;
  justify-content: flex-start !important;
  padding-left: 0 !important;
  margin: 0 !important;
}

/* ================================
   チューニングプロ関連の紫色の共通適用
================================ */
/* チューニングプロのバッジや見出し、バリエーションを紫色に統一 */
.badge-purple, 
.card-title-purple, 
.bg-purple {
  background: linear-gradient(135deg, #4b2a75 0%, #613499 100%) !important;
  color: #fff !important;
}

/* チューニングプロのテキスト文字色などの調整が必要な場合 */
.card-title-purple {
  background: none !important;
  color: #613499 !important;
}
/* ================================
   チューニングプロ認定店のバッジを紫色にする
================================ */
/* テキストの内容が「チューニングプロ」を含んでいる場合に背景を紫色にする */
#shop-cert:not(:empty),
.shop-cert-badge {
  /* デフォルト（サウンドプロなど）の青色 */
  background-color: #274b8c !important; 
}

/* 「チューニングプロ認定店」という文字が含まれる場合は紫色に上書き */
#shop-cert:has-text("チューニングプロ"),
.shop-cert-badge {
  /* もしCSSセレクタだけで判定が難しい場合は、JavaScriptでクラスを付与するか下記のスタイルが適用されます */
}

/* ================================
   スマホ用：エリア・都道府県選択ボックス（高さスリム版）
================================ */
@media screen and (max-width: 768px) {
  
  .search-filter-box {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  /* 上下の余白（padding）を狭くして、高さを薄く（スリムに）する */
  .search-filter-box select {
    width: 50% !important;
    max-width: 100% !important;
    padding: 6px 8px !important;      /* 上下のパディングをスリムに調整 */
    font-size: 12px !important;       /* 文字サイズも少しコンパクトに */
    background-color: #fafafa !important;
    border: 1px solid #dcdcdc !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    outline: none !important;
    box-sizing: border-box !important;
    height: 36px !important;          /* 高さを固定してすっきりさせる */
    line-height: 1.2 !important;
  }
}

/* ================================
   スマホ用：スタッフ写真の上の認定バッジを小さくする
================================ */
@media screen and (max-width: 768px) {
  
  /* スタッフ写真の左上に乗るロゴバッジ（TUNING PRO / SOUND PRO） */
  .hero-badge-overlay {
    width: 110px !important;    /* スマホ用に横幅を小さくする（元の180pxから縮小） */
    top: 15px !important;       /* 少し位置を微調整 */
    left: 15px !important;
  }
}
/* ================================
   「エリアを選択」「都道府県を選択」のフォント・配置調整
================================ */
.search-filter-box select {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif !important;
  font-size: 14px !important;
  color: #333 !important;
  font-weight: normal !important;
  text-align: center !important; /* 文字を真ん中に寄せる場合 */
  text-align-last: center !important; /* セレクトボックスの選択文字も中央にするため */
}

/* ================================
   トップページ修正（指示書対応 決定版）
================================ */

/* 1 & 6. リード文のスマホ専用改行（PCでは非表示） */
.sp-br {
  display: none;
}

/* 2 & 7. ボタン（背景を50%で分割し、「/」を完全に中央に配置） */
.btn-combined {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  text-align: center;
  padding: 15px 10px;
  color: #fff !important;
  text-decoration: none;
  border-radius: 4px;
  background: linear-gradient(90deg, #274b8c 50%, #613499 50%);
  font-size: 16px;
  line-height: 1.6;
  font-weight: bold;
}

/* 1行目（サウンドプロ / チューニングプロ）のレイアウト */
.btn-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.btn-left-txt {
  flex: 1; /* 左半分を最大限使う */
  text-align: right;
}
.btn-slash {
  width: 30px; /* スラッシュの幅を固定して絶対に中央から動かさない */
  text-align: center;
  font-size: 18px;
  font-weight: normal;
}
.btn-right-txt {
  flex: 1; /* 右半分を最大限使う */
  text-align: left;
}

/* 2行目（認定マスターを探す >）を下に落とす */
.btn-bottom {
  display: block;
  margin-top: 2px;
}
/* 3. 「詳しくみる >」の文字をタイトルと同じ大きさ(15px)にする */
.card-text-box .btn-text {
  font-size: 15px !important;
  margin-top: 5px;
}

/* 4. 検索フィルター（3つ）の配置調整 */
.search-filter-box select {
  width: 32% !important; 
}

/* 5. 選択解除ボタンのデザイン */
.clear-btn-wrap {
  text-align: right;
  margin-top: 10px;
}
.btn-clear {
  background: #f5f5f5;
  border: 1px solid #ccc;
  padding: 5px 15px;
  font-size: 12px;
  border-radius: 4px;
  cursor: pointer;
  color: #333;
}
.btn-clear:hover {
  background: #e9e9e9;
}

/* ================================
   スマホ用の微調整
================================ */
@media screen and (max-width: 768px) {
  /* スマホの時だけリード文の改行を発動 */
  .sp-br {
    display: block; 
  }

  /* スマホ時のボタン微調整 */
  .btn-combined {
    max-width: 320px; 
    font-size: 14px;
    padding: 12px 10px;
  }
  
  /* スマホのフィルターを縦積みに */
  .search-filter-box {
    flex-direction: column !important; 
    padding: 0 20px !important;
  }
  .search-filter-box select {
    width: 100% !important;
    margin-bottom: 5px;
  }
}

/* ================================
   【最終修正】右側は動かさず、左側を上に引き上げる
================================ */
@media screen and (min-width: 769px) {
  /* 左側の表（5行）の上下の余白をキュッと詰めて、下のボタンと写真を上に引き上げる */
  .parts-search-row .search-table td,
  .parts-search-row .search-table th {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.2 !important;
  }
}

/* PC表示のみ：ヒーローエリアの左上ロゴを縮小 */
@media screen and (min-width: 769px) {
  #hero-badge-overlay {
    max-width: 150px !important; /* 現在より小さくする（適宜数値を調整） */
    top: 15px !important;        /* 上からの余白 */
    left: 15px !important;       /* 左からの余白 */
  }
}