@charset "UTF-8";

.l-content {
    padding-top: 2em;
    /*background-color: #fff; */
}

/* cleaninggyousya の area アーカイブページ専用スタイル
#body_wrap.tax-area .l-mainContent__inner {
     padding: 48px 60px;
    background-color: #fff;
}
 */


/* サイドバーの「情報の誤りを報告する」ボタンのスタイル */
.report-btn {
    display: inline-block;
    width: 100%;
    padding: 10px;
    background-color: #6c757d; /* 予約ボタンより控えめな色 */
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
    border-radius: 4px;
    transition: background-color 0.2s;
    box-sizing: border-box; /* paddingを含めて幅を100%に */
}

.report-btn:hover {
    background-color: #5a6268; /* ホバー色 */
    color: #fff;
}

.report-btn .fa-flag {
    margin-right: 8px;
}


/* 業者カード内の「公式サイトを見る」テキストリンクのスタイル */
.website-link-with-icon {
    display: inline-flex; /* アイコンとテキストを横並びにする */
    align-items: center; /* アイコンとテキストの縦位置を中央に揃える */
    gap: 6px; /* アイコンとテキストの間に少し隙間をあける */
    text-decoration: underline;
    font-size: 0.9em;
    font-weight: bold;
    color: #005a9c; /* サイトのキーカラーに合わせる */
    transition: color 0.2s;
}

.website-link-with-icon:hover {
    color: #003d6b; /* ホバー時にもう少し濃い色に */
    text-decoration: none; /* ホバー時に下線を消す */
}

/* アイコン自体のスタイル調整 */
.website-link-with-icon .fas {
    font-size: 0.9em; /* テキストより少しだけ小さくする */
}


/* =======================================
  県別業者一覧ページ　地域ごとに分ける
======================================= */

/* 全国業者一覧ページのアコーディオン用スタイル */
.gyousya-region-accordion {
    margin-top: 1.5em;
    border: 1px solid #e0e0e0;
    border-radius: 5px;
    overflow: hidden; /* 角丸を効かせるため */
}

.region-accordion-item {
    border-bottom: 1px solid #e0e0e0;
}

.region-accordion-item:last-child {
    border-bottom: none;
}

.region-accordion-title {
    font-size: 1.1em;
    font-weight: bold;
    padding: 1em 1.5em;
    cursor: pointer;
    position: relative;
    list-style: none; /* summaryのデフォルトマーカーを消す */
    display: block;
}

.region-accordion-title::-webkit-details-marker {
    display: none; /* Chrome, Safari */
}

/* カスタムの開閉アイコン */
.region-accordion-title::after {
    content: '▼'; /* アイコンをより分かりやすいものに変更 */
    position: absolute;
    right: 1.5em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8em; /* アイコンサイズを調整 */
    line-height: 1;
    color: #0073aa; /* サイトのテーマカラーに合わせて変更してください */
    transition: transform 0.2s ease-in-out;
}

.region-accordion-item[open] > .region-accordion-title::after {
    transform: translateY(-50%) rotate(180deg); /* 開いたときにアイコンが回転 */
}

.region-accordion-content {
    padding: 0 1.5em 1.5em 1.5em;
    background-color: #f5f7fa; /* ← 見やすいように少し濃い色に変更 */
    border-top: 1px solid #e0e0e0; /* ← 境界線を明確にするため追加 */
}

.region-accordion-content .gyousya-municipality-list {
    padding-top: 1em;
}

/* スマホ表示での調整 */
@media screen and (max-width: 767px) {
    .region-accordion-title {
        font-size: 1em;
        padding: 1em;
    }
    .region-accordion-title::after {
        right: 1em;
    }
    .region-accordion-content {
        padding: 0 1em 1em 1em;
    }
    /* ▼▼▼ スマホでのズレを修正するコードを追加 ▼▼▼ */
    .region-accordion-content .gyousya-municipality-list {
        padding-left: 0; /* ← スマホでの左の余白(インデント)をなくす */
    }
}

/* =======================================
  市区町村ページ　ライブ検索
======================================= */

/* 都道府県別 市区町村リスト用のスタイル */
.municipality-search-box-wrapper {
    position: relative;
    margin-bottom: 1.5em;
}
.municipality-search-box-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    pointer-events: none;
}
.municipality-search-input {
    width: 100%;
    padding: 0.8em 1em 0.8em 2.5em;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.gyousya-municipality-accordion {
    border-top: 1px solid #e0e0e0;
}
.municipality-accordion-item {
    border-bottom: 1px solid #e0e0e0;
}
.municipality-accordion-title {
    font-size: 1.1em;
    font-weight: bold;
    padding: 0.8em 1em;
    cursor: pointer;
    background-color: #f5f7fa;
    list-style: none; /* summaryのデフォルトマーカーを消す */
}
.municipality-accordion-title::-webkit-details-marker {
    display: none;
}
.gyousya-municipality-accordion .gyousya-municipality-list {
    padding: 0.5em 1em;
    list-style: none;
}
.gyousya-municipality-accordion .gyousya-municipality-item a {
    display: flex;
    justify-content: space-between;
    padding: 0.8em 0.5em;
    border-bottom: 1px dotted #ddd;
    text-decoration: none;
}
.gyousya-municipality-accordion .gyousya-municipality-item:last-child a {
    border-bottom: none;
}

.no-results-message {
    text-align: center;
    padding: 2em;
    border: 1px dashed #ccc;
}


/* =======================================
  エリア別業者一覧ページ(tax-area)の背景色を白にする (修正版)
======================================= */
/* cleaninggyousya関連ページの背景色設定 */
#body_wrap.tax-area,
#body_wrap.post-type-archive-cleaninggyousya {
    background-color: #fff;
}



/* ===== ページネーション内の不要な見出し余白を削除 ===== */
#gyousya-pagination-container .screen-reader-text {
    margin: 0 !important;
}

/* =======================================
  Q&A専用アコーディオンのアイコン設定
======================================= */

/* --- Q&Aアコーディオンの識別用クラス --- */
.cleaninggyousya-qa-accordion .cleaninggyousya-accordion-header {
    position: relative;
    padding-left: 60px; /* Qアイコン分の左余白を追加 */
}

/* --- Qアイコンの設定 --- */
.cleaninggyousya-qa-accordion .cleaninggyousya-accordion-header::before {
    content: 'Q';
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background-color: #d9534f;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

/* --- 回答部分のコンテナ --- */
.cleaninggyousya-qa-accordion .cleaninggyousya-accordion-content {
    position: relative;
    padding-left: 60px !important; /* 常に左パディングを保持、transitionの影響を回避 */
}

/* --- Aアイコンの設定 --- */
.cleaninggyousya-qa-accordion .cleaninggyousya-accordion-content::before {
    content: 'A';
    position: absolute;
    left: 20px;
    top: 20px; /* コンテンツの上端から20px */
    width: 32px;
    height: 32px;
    background-color: #2273BF;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* --- アクティブ時にAアイコンを表示 --- */
.cleaninggyousya-qa-accordion .cleaninggyousya-accordion-content.cleaninggyousya-active::before {
    opacity: 1;
}

/* --- スマートフォン対応 --- */
@media (max-width: 600px) {
    .cleaninggyousya-qa-accordion .cleaninggyousya-accordion-header {
        padding-left: 50px; /* スマホでは少し余白を狭く */
    }
    
    .cleaninggyousya-qa-accordion .cleaninggyousya-accordion-content {
        padding-left: 50px !important; /* スマホでは少し余白を狭く */
    }
    
    .cleaninggyousya-qa-accordion .cleaninggyousya-accordion-header::before,
    .cleaninggyousya-qa-accordion .cleaninggyousya-accordion-content::before {
        left: 15px; /* スマホでは位置を少し左に調整 */
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* ==========================================================
 * ▼▼▼ JS完結・独立セクション用ページネーションCSS (最終FIX版 v2) ▼▼▼
 * ========================================================== */

/* --- 1. ラッパーの位置調整 --- */
#local-gyousya-section .cleaninggyousya-pagination-container,
#remote-gyousya-section .cleaninggyousya-pagination-container {
    margin-top: 40px;
    text-align: center;
}

/* --- 2. UL要素（リスト全体）のスタイル --- */
#local-gyousya-section .page-numbers,
#remote-gyousya-section .page-numbers {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: none !important;
}

/* --- 3. LI要素（リストの項目）のリセット --- */
#local-gyousya-section .page-numbers li,
#remote-gyousya-section .page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    background: none !important;
}

/* --- 4. A, SPAN要素（ボタン本体）のスタイル --- */
#local-gyousya-section .page-numbers a,
#local-gyousya-section .page-numbers span,
#remote-gyousya-section .page-numbers a,
#remote-gyousya-section .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 48px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    width: auto !important;
    /* ★★★ 変更点 ★★★ */
    /* !important を追加して、テーマのスタイルを強制的に上書きします */
    background-color: #f7f7f7 !important;
    color: #333 !important;
}

/* --- 5. 現在ページのボタンスタイル --- */
#local-gyousya-section .page-numbers .current,
#remote-gyousya-section .page-numbers .current {
    /* ★★★ 変更点 ★★★ */
    /* !important を追加 */
    background-color: #2173bf !important;
    color: #fff !important;
    border-color: #2173bf !important;
    cursor: default;
}

/* --- 6. マウスホバー時のボタンスタイル --- */
#local-gyousya-section .page-numbers a:hover,
#remote-gyousya-section .page-numbers a:hover {
    /* ★★★ 変更点 ★★★ */
    /* !important を追加 */
    background-color: #fff !important;
    color: #2173bf !important;
    border-color: #2173bf !important;
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- 7. 三点リーダー (...) のスタイル --- */
#local-gyousya-section .page-numbers .dots,
#remote-gyousya-section .page-numbers .dots {
    background-color: transparent !important;
    border-color: transparent !important;
    cursor: default;
    box-shadow: none;
}
#local-gyousya-section .page-numbers .dots:hover,
#remote-gyousya-section .page-numbers .dots:hover {
    transform: none;
}

/* =======================================
  早見表の改善スタイル
======================================= */

/* エアタクミの行を視覚的に強調する */
.wp-block-table tbody tr.is-airtakumi-row {
  background-color: #f0f7ff; /* 薄い水色の背景 */
}

/* マウスホバーでさらに強調 */
.wp-block-table tbody tr.is-airtakumi-row:hover {
  background-color: #e6f2ff;
}

/* 業者名の列に左アクセントボーダーを追加して目立たせる */
.wp-block-table tbody tr.is-airtakumi-row th {
  border-left: 4px solid #005a9c;
  /* 既存のボーダーと重ならないように調整 */
  border-right: 1px solid #ddd; 
}


/* =======================================
  早見表・業者なし表示のデザイン
======================================= */

/* 「業者なし」のメッセージボックスの基本スタイル */
.hayami-no-result-box {
    text-align: center;
    padding: 2em;
    margin-bottom: 2em; /* 後続の要素との間に余白 */
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #6c757d;
}

.hayami-no-result-box p {
    margin: 0;
    line-height: 1.8;
}

/* 強調したい部分（掲載基準など）のスタイル */
.hayami-no-result-box .criteria-highlight {
    display: block;
    margin-top: 1em;
    padding-top: 1em;
    border-top: 1px dashed #ced4da;
    font-size: 0.9em;
    color: #495057;
}


/* =======================================
  クリーニング業者CTA（プロフィールベース）
 ======================================= */
/* === CTA単独ボックス === */
.cleaninggyousya-cta-box-single {
    background-color: #f9fafb;
    /* 背景色 */
    border: 1px solid #e5e7eb;
    /* 枠線 */
    border-radius: 8px;
    /* 角丸 */
    margin: 1.5em auto;
    /* 上下の余白 + 中央寄せ */
    padding: 24px;
    /* 内側の余白 */
    overflow: hidden;
    /* 角丸を効かせる */
    max-width: 800px;
    /* 最大幅を設定 */
}
/* === CTA項目全体 === */
.cleaninggyousya-cta-item {
    display: flex;
    align-items: flex-start;
}
/* === 画像エリア === */
.cleaninggyousya-cta-figure {
    position: relative;
    flex-shrink: 0;
    margin-right: 20px;
    width: 100px;
}
.cleaninggyousya-cta-figure img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    display: block;
}
.cleaninggyousya-cta-label {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    color: #fff;
    background-color: #D9534F;
    /* CTAカラーに変更 */
    padding: 4px 12px;
    border-radius: 4px;
    white-space: nowrap;
}
/* === コンテンツエリア === */
.cleaninggyousya-cta-body {
    flex-grow: 1;
    min-width: 0;
}
.cleaninggyousya-cta-head {
    margin-bottom: 15px;
    /* 少し間隔を広げる */
}
/* === タイトル === */
.cleaninggyousya-cta-title {
    font-size: 24px;
    /* 少し大きく */
    font-weight: bold;
    color: #333;
    margin: 0 0 8px 0;
}
.cleaninggyousya-cta-position {
    font-size: 13px;
    font-weight: bold;
    color: #555;
    margin: 0 0 8px 0;
}
.cleaninggyousya-cta-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 0.5em;
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0;
}
.cleaninggyousya-cta-name-reading {
    font-size: 0.7em;
    font-weight: normal;
    color: #555;
}
/* === 説明文 === */
.cleaninggyousya-cta-description {
    margin-top: 15px;
    font-size: 16px;
    /* 少し大きく */
    line-height: 1.7;
    margin-bottom: 20px;
}
.cleaninggyousya-cta-description p {
    margin: 0;
}
/* === ボタンエリア === */
.cleaninggyousya-cta-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    margin: 20px 0;
}
.cleaninggyousya-cta-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}
.cleaninggyousya-cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.cleaninggyousya-cta-button i {
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
    z-index: 2;
    position: relative;
}
.cleaninggyousya-cta-button.primary {
    background: linear-gradient(135deg, #D9534F 0%, #C9302C 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(217, 83, 79, 0.3);
}
.cleaninggyousya-cta-button.primary:hover {
    box-shadow: 0 8px 25px rgba(217, 83, 79, 0.4);
}
.cleaninggyousya-cta-button-text-wrapper {
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    position: relative;
}
.cleaninggyousya-cta-button-main-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.cleaninggyousya-cta-button-sub-text {
    font-size: 14px;
    line-height: 1.3;
    margin-top: 4px;
    display: block;
    opacity: 0.9;
}
/* === SNSリスト === */
.cleaninggyousya-cta-sns-list {
    list-style: none;
    padding-left: 0;
    margin: 16px 0 0 0;
    display: flex;
    gap: 16px;
}
.cleaninggyousya-cta-sns-list a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #e5e7eb;
    border-radius: 50%;
    text-decoration: none;
    transition: opacity 0.2s;
}
.cleaninggyousya-cta-sns-list a:hover {
    opacity: 0.7;
}
.cleaninggyousya-cta-sns-icon {
    color: #4b5563;
    font-size: 18px;
}
/* === フッターエリア === */
.cleaninggyousya-cta-footer {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px dashed #e0e0e0;
    font-size: 14px;
    color: #4b5563;
    text-align: left;
}
.cleaninggyousya-cta-footer-text {
    justify-content: center;
    gap: 8px;
    margin: 0;
}
/* === レスポンシブ === */
@media (max-width: 600px) {
    .cleaninggyousya-cta-item {
        flex-direction: column;
        align-items: center;
    }
    .cleaninggyousya-cta-figure {
        margin-right: 0;
        margin-bottom: 20px;
    }
    .cleaninggyousya-cta-body {
        width: 100%;
        text-align: center;
    }
    .cleaninggyousya-cta-title {
        font-size: 20px;
    }
    .cleaninggyousya-cta-name {
        font-size: 16px;
        justify-content: center;
    }
    .cleaninggyousya-cta-description {
        text-align: left;
        font-size: 15px;
    }
    .cleaninggyousya-cta-sns-list {
        justify-content: center;
    }
    .cleaninggyousya-cta-button-text-wrapper {
        text-align: center;
    }
    .cleaninggyousya-cta-button {
        padding: 18px 20px;
    }
}

/* =======================================
  クリーニング業者会社説明
======================================= */

/* --- セクション共通スタイル --- */
.cleaninggyousya-section {
}
.cleaninggyousya-section-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 30px;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 12px;
}
.cleaninggyousya-section-title i {
    color: #2173bf;
    font-size: 1.5rem;
}
/* --- リンクボタン --- */
.cleaninggyousya-website-link {
    background: #2173bf;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    display: inline-block;
}
.cleaninggyousya-website-link:hover {
    background: #1a5fa0;
    transform: scale(1.05);
}
/* --- アコーディオン --- */
.cleaninggyousya-accordion {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}
.cleaninggyousya-accordion-header {
    background: #f8f9fa;
    padding: 20px;
    cursor: pointer;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
}
.cleaninggyousya-accordion-header:hover {
    background: #e9ecef;
}
.cleaninggyousya-accordion-header::after {
    content: '\f078';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transition: transform 0.3s ease;
}
.cleaninggyousya-accordion-header.cleaninggyousya-active::after {
    transform: rotate(180deg);
}
.cleaninggyousya-accordion-content {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}
.cleaninggyousya-accordion-content.cleaninggyousya-active {
    padding: 20px;
    max-height: 1000px;
}
/* --- タブフィルタリング --- */

.cleaninggyousya-scroll-wrapper {
    position: relative; /* フェード効果の基準点 */
    margin-bottom: 20px;
}

.cleaninggyousya-tab-nav {
    display: flex;
    flex-wrap: nowrap; /* ★重要：ボタンを折り返さない */
    overflow-x: auto;  /* ★重要：はみ出た場合に横スクロールを許可 */
    gap: 10px;
    margin-bottom: 30px;
    padding-bottom: 15px; /* スクロールバーのための余白 */
}

.cleaninggyousya-tab-btn {
    white-space: nowrap; /* ★重要：ボタン内のテキストを改行させない */
    padding: 10px 20px;
    border: none;
    background-color: #f8f9fa;
    color: #666;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.cleaninggyousya-tab-btn:hover {
    background-color: #e9ecef;
    color: #333;
}
.cleaninggyousya-tab-btn.cleaninggyousya-active {
    background-color: #2173bf;
    color: white;
}

/* --- 横スクロールの補助機能 --- */

/* 1. PCブラウザ縮小時やタブレット以下のサイズでフェード効果を表示 */
@media (max-width: 959px) {
    .cleaninggyousya-scroll-wrapper::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 15px; /* padding-bottomの値を考慮 */
        width: 60px;
        background: linear-gradient(to left, #fafafa 30%, rgba(250, 250, 250, 0));
        pointer-events: none; /* クリック操作を妨げない */
    }
}

/* 2. スマホやタブレット（タッチデバイス）でのみスクロールバーを非表示にする */
@media (hover: none) {
    .cleaninggyousya-tab-nav::-webkit-scrollbar {
        display: none;
    }
}


/* --- 業者リスト & カード --- */
.cleaninggyousya-company-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}
.cleaninggyousya-company-card {
    background: white;
    border-radius: 15px;
    padding: 40px;
    margin: 0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: opacity 0.4s ease, transform 0.4s ease, box-shadow 0.3s ease, margin 0.4s, padding 0.4s, height 0.4s, border 0.4s;
    overflow: hidden;
}
.cleaninggyousya-company-card.cleaninggyousya-hidden {
    display: none;
}
.cleaninggyousya-company-card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.cleaninggyousya-company-header {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    margin-bottom: 30px;
}
.cleaninggyousya-company-image {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f7ff 0%, #d9edff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #2173bf;
    flex-shrink: 0;
}
.cleaninggyousya-company-info h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
}
.cleaninggyousya-company-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.cleaninggyousya-company-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: #666;
}
.cleaninggyousya-company-meta i {
    color: #2173bf;
}
/* --- カード内詳細レイアウト --- */
.cleaninggyousya-company-body {
    border-top: 1px solid #f0f0f0;
    padding-top: 30px;
    margin-top: 30px;
}
.cleaninggyousya-company-details-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 30px;
    align-items: start;
}
.cleaninggyousya-company-details-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.cleaninggyousya-company-details-table th, .cleaninggyousya-company-details-table td {
    text-align: left;
    padding: 12px;
    border: 1px solid #e9ecef;
}
.cleaninggyousya-company-details-table th {
    background-color: #f8f9fa;
    width: 110px;
    font-weight: 600;
}
.cleaninggyousya-price-summary-box {
    background: #F7FAFD;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #d9edff;
}
.cleaninggyousya-price-summary-box h4 {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}
.cleaninggyousya-price-summary-item {
    margin-bottom: 12px;
}
.cleaninggyousya-summary-label {
    font-size: 0.85rem;
    color: #666;
    display: block;
}
.cleaninggyousya-summary-price {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2173bf;
}
.cleaninggyousya-summary-price .cleaninggyousya-unit {
    font-size: 1rem;
    font-weight: normal;
    color: #333;
}


/* === 対応地域のスタイル === */
.cleaninggyousya-service-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.cleaninggyousya-area-tag {
    background: linear-gradient(135deg, #e8f4fd 0%, #f0f8ff 100%);
    color: #2173bf;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(33, 115, 191, 0.2);
    white-space: nowrap;
}

/* 多数の地域がある場合の調整 */
.cleaninggyousya-service-areas.many-areas {
    max-height: 80px;
    overflow-y: auto;
    padding-right: 5px;
}

/* --- 詳細料金アコーディオン（新デザイン・最終シンプル版） --- */

/* ▼▼▼ 1. 大枠のスタイル ▼▼▼ */
/* ここで全体の枠線、角丸、影を一度に設定します */
.cleaninggyousya-price-accordion {
    margin-top: 30px;
    border: 2px solid #2273BF; /* 全体を囲む、一本のきれいな線 */
    border-radius: 12px;       /* 全体の角を丸める */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* 全体にうっすら影を落とす */
    overflow: hidden;          /* ★重要：中の要素が角丸からはみ出ないようにする */
}

/* ▼▼▼ 2. ヘッダー（ボタン部分）のスタイル ▼▼▼ */
/* ヘッダー自体には枠線を持たせません */
.cleaninggyousya-price-accordion .cleaninggyousya-accordion-header {
    background: #ffffff;
    border: none; /* 枠線は不要 */
    color: #2273BF;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background-color 0.2s ease; /* アニメーションを背景色のみに限定 */
    /* 以前の複雑な設定（position, z-index, box-shadow）は全て不要 */
}

/* ▼▼▼ 3. マウスを乗せた時のスタイル ▼▼▼ */
/* 浮き上がらせる代わりに、背景色を優しく変えることで、表示崩れを防ぎます */
.cleaninggyousya-price-accordion .cleaninggyousya-accordion-header:hover {
    background-color: #f7faff;
}

/* ▼▼▼ 4. 開いている時のヘッダーのスタイル ▼▼▼ */
/* 開いた時だけ、コンテンツとの間に区切り線を追加します */
.cleaninggyousya-price-accordion .cleaninggyousya-accordion-header.cleaninggyousya-active {
    border-bottom: 2px solid #e9ecef; /* 薄いグレーの区切り線 */
}

/* ▼▼▼ 5. コンテンツ部分のスタイル ▼▼▼ */
/* コンテンツにも枠線は持たせません */
.cleaninggyousya-price-accordion .cleaninggyousya-accordion-content {
    border: none; /* 枠線は不要 */
    background: #ffffff;
    /* 以前の複雑な設定（margin-top, z-index）は全て不要 */
}

/* 接頭語なしのクラスにスタイルを適用するため、親クラスでスコープ */
.cleaninggyousya-accordion-content .pricing-container {
    text-align: center;
    margin-bottom: 20px;
}
.cleaninggyousya-accordion-content .price-box {
    padding: 20px;
    background: #F7FAFD;
}
.cleaninggyousya-accordion-content .box-header {
    font-size: 1rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
}
.cleaninggyousya-accordion-content .price-main .price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #2173bf;
}
.cleaninggyousya-accordion-content .price-main .price-unit {
    font-size: 1rem;
    color: #666;
}
.cleaninggyousya-accordion-content .volume-discount {
    margin-top: 15px;
    font-size: 0.9rem;
    line-height: 1.5;
}
.cleaninggyousya-accordion-content .volume-discount p {
    margin: 2px 0;
}
.cleaninggyousya-accordion-content table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.cleaninggyousya-accordion-content table th,
.cleaninggyousya-accordion-content table td {
    padding: 12px;
    border: 1px solid #e0e0e0;
}
.cleaninggyousya-accordion-content table th {
    background: #2273BF;
    font-weight: 600;
}
.cleaninggyousya-accordion-content table .option-name {
    font-weight: 500;
}
.cleaninggyousya-accordion-content table .option-price {
    text-align: right;
    font-weight: 600;
    color: #2c3e50;
}
/* --- (修正ここまで) --- */
/* --- 特徴タグ --- */
.cleaninggyousya-features-section {
    margin-top: 30px;
}
.cleaninggyousya-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 20px;
}
.cleaninggyousya-feature-category h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2c3e50;
    margin-bottom: 12px;
    font-size: 1rem;
}
.cleaninggyousya-feature-category i {
    color: #2173bf;
}
.cleaninggyousya-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cleaninggyousya-tag {
    background: linear-gradient(135deg, #e6f2ff 0%, #F7FAFD 100%);
    color: #2c3e50;
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(33, 115, 191, 0.2);
}
/* --- レスポンシブ対応 --- */
@media (max-width: 820px) {
    .cleaninggyousya-company-details-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .cleaninggyousya-company-header {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
}
@media (max-width: 480px) {
    .cleaninggyousya-container {
        padding: 0 15px;
    }
    .cleaninggyousya-section {
    }
    .cleaninggyousya-company-card {
        padding: 25px;
    }
}


/* =======================================
  業者カード内「特徴」セクション
======================================= */

/* 特徴セクション全体の間隔を調整 */
.cleaninggyousya-features-section {
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #f0f0f0;
}

/* 3つのカテゴリをレスポンシブなグリッドで配置 */
.cleaninggyousya-features-grid {
    display: grid;
    /* PCでは最大3列、幅が狭まると自動で2列、1列に変化 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* 各カテゴリのタイトル（見出し） */
.cleaninggyousya-feature-category h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    color: #2c3e50;
    margin: 0 0 15px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f2f5;
}

/* カテゴリのアイコン */
.cleaninggyousya-feature-category h4 i {
    color: #2173bf;
    font-size: 1rem;
}

/* 特徴タグを囲むリスト */
.cleaninggyousya-tag-list {
    display: flex;
    flex-wrap: wrap; /* タグが多ければ自動で折り返す */
    gap: 10px;
}

/* 特徴タグのデザイン */
.cleaninggyousya-tag {
    background-color: #f7faff;
    color: #337ab7;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #bce0fd;
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
}

/* タグの先頭にチェックマークを追加 */
.cleaninggyousya-tag::before {
    content: '\f00c'; /* Font Awesomeのチェックマーク */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    margin-right: 6px;
    color: #31708f;
}

/* 特徴が登録されていない場合のメッセージ */
.no-features-info {
    text-align: center;
    color: #777;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
}


/* =======================================
  クリーニング業者アーカイブ
======================================= */

.cleaninggyousya-accordion {
    border: 1px solid #ddd;
    margin-bottom: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.cleaninggyousya-accordion__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}

.cleaninggyousya-accordion__title:hover {
    color: #fff;
    background-color: #FFA500;
}

.cleaninggyousya-accordion__input {
    display: none;
}

.cleaninggyousya-accordion__input:checked + .cleaninggyousya-accordion__title {
    background-color: #FFA500;
    color: #fff;
}

.cleaninggyousya-accordion__input:checked + .cleaninggyousya-accordion__title + .cleaninggyousya-accordion__content {
    display: block;
    padding: 15px;
    background-color: #fff;
}

.cleaninggyousya-accordion__content {
    display: none;
    padding: 0;
}

.cleaninggyousya-region-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cleaninggyousya-region-list li {
    border-bottom: 1px solid #ddd;
}

.cleaninggyousya-region-list li:last-child {
    border-bottom: none;
}

.cleaninggyousya-region-list a {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #1176d4;
    transition: color 0.3s, background-color 0.3s;
}

.cleaninggyousya-region-list a:hover {
    background-color: #f7f7f7;
}

.cleaninggyousya-accordion__icon {
    font-size: 18px;
    transition: transform 0.3s;
}

.cleaninggyousya-accordion__input:checked + .cleaninggyousya-accordion__title .cleaninggyousya-accordion__icon {
    transform: rotate(45deg);
}

/* =======================================
  親エリア（ハブページ）の市区町村リスト：階層表示・レイアウト崩れ修正版
======================================= */

/* --- リスト全体の基本スタイル --- */
.gyousya-municipality-list {
    list-style: none;
    padding: 0;
    margin-top: 2em;
}

/* --- 各リスト項目 --- */
.gyousya-municipality-item {
    margin: 0;
    padding: 0;
}

/* --- リンクの共通スタイル --- */
.gyousya-municipality-link {
    display: flex; /* テキストと件数を両端揃えにするため */
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    text-decoration: none;
    color: #2173bf;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
}
.gyousya-municipality-link:hover {
    background-color: #2173bf;
    color: #fff;
    border-color: #2173bf;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- 件数のスタイル --- */
.gyousya-municipality-count {
    font-size: 0.9em;
    font-weight: normal;
    color: #6c757d; /* ホバー前の色を調整 */
    white-space: nowrap; /* 件数が改行しないように */
    margin-left: 1em;
}
.gyousya-municipality-link:hover .gyousya-municipality-count {
    color: #fff;
}


/* --- グリッドレイアウトの適用 --- */
.post_content > .gyousya-municipality-list {
    display: grid;
    /* 最小240px、最大1frで自動的に列数を調整 */
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px;
}

/* ▼▼▼ レイアウト崩れを修正する最重要ポイント ▼▼▼ */
/* 子を持つアイテム（例：名古屋市）は、グリッドの全幅を使う */
.gyousya-municipality-item.has-children {
    grid-column: 1 / -1;
    margin-bottom: 15px; /* 他のグリッドとの間に少し余白 */
}


/* --- 子リスト（行政区のリスト）のスタイル --- */
.gyousya-municipality-list .children {
    list-style-type: none;
    margin-top: 15px;
    padding-left: 30px; /* インデント */
    border-left: 2px solid #e9e9e9;
    margin-left: 10px;
}

.gyousya-municipality-list .children .gyousya-municipality-item {
    margin-bottom: 10px; /* 子要素間の余白 */
}

/* 子リスト内のリンクは少しデザインを変える（任意） */
.gyousya-municipality-list .children .gyousya-municipality-link {
    background-color: #fff; /* 背景色を白に */
    padding: 12px 18px;
}
.gyousya-municipality-list .children .gyousya-municipality-link:hover {
    /* ホバー効果は親と同じ */
    background-color: #2173bf;
    color: #fff;
}


/* --- スマートフォン表示への対応 --- */
@media (max-width: 600px) {
    /* 1列表示にする */
    .post_content > .gyousya-municipality-list {
        display: block;
    }
    
    /* 1列表示の際はアイテム間のマージンで余白を調整 */
    .gyousya-municipality-item {
        margin-bottom: 12px;
    }

    /* インデントを少し浅くする */
    .gyousya-municipality-list .children {
        padding-left: 20px;
    }
}

/* =======================================
  テーマ共通のulパディングをリセット
======================================= */

/* 親リスト（市区町村リスト）の左パディングを強制的に0にする */
.post_content > .gyousya-municipality-list {
    padding-left: 0;
}

/* 子リスト（行政区リスト）のパディングは、
   テーマのスタイルではなく、こちらで指定した値（30pxなど）を維持 */
.gyousya-municipality-list .children {
    padding-left: 30px; /* この値は既にあるので変更不要ですが、再指定で確実に上書きします */
}

/* スマホ表示でもリセットを適用 */
@media (max-width: 600px) {
    .post_content > .gyousya-municipality-list {
        padding-left: 0;
    }
    .gyousya-municipality-list .children {
        padding-left: 20px; /* スマホ用のインデント値を再指定 */
    }
}

/* =======================================
  件数0の場合のセクション表示制御 (最終FIX版)
======================================= */
/* is-emptyクラスがついたセクションの説明文とコンテンツ（フィルターやリスト）を非表示に */
.cleaninggyousya-section.is-empty .section-description,
.cleaninggyousya-section.is-empty .section-content {
    display: none;
}

/* is-emptyクラスがついたセクションのメッセージボックスを表示状態に */
.cleaninggyousya-section.is-empty .gyousya-no-result-box {
    display: block;
}

/* 通常はメッセージボックスを非表示に */
.gyousya-no-result-box {
    display: none; /* is-emptyクラスがないときは隠す */
    text-align: center;
    padding: 2em;
    margin-top: 1.5em;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    color: #6c757d;
}

.gyousya-no-result-box p {
    margin: 0;
    line-height: 1.8;
}
* =======================================
  ページ全体のデザイン改善：フィルター導入部分
======================================= */
.section-intro {
    background-color: #f8f9fa;
    padding: 1.5em;
    margin-bottom: 2em;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e9ecef;
}
.section-intro p {
    margin: 0;
    line-height: 1.7;
}

/* =======================================
  ▼▼▼ PRバッジのスタイル（修正版：右側に余白を追加） ▼▼▼
======================================= */
.pr-badge {
    display: inline-block;
    background-color: #f0f0f0;
    color: #555;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 8px; /* ★★★ ここを修正しました ★★★ */
    border: 1px solid #ddd;
}

/* =======================================
  ▼▼▼【改善案】導入文ボックスでセクションの違いを明確化▼▼▼
======================================= */
.section-intro-box {
    padding: 1.5em;
    border-radius: 8px;
    border-left: 5px solid;
    background-color: #f8f9fa;
}
.section-intro-box p {
    margin: 0;
    line-height: 1.8;
}
.section-intro-box p:first-child {
    font-size: 1.1em;
    font-weight: bold;
    margin-bottom: 0.5em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.section-intro-box.is-local {
    border-left-color: #28a745; /* 緑色 */
}
.section-intro-box.is-remote {
    border-left-color: #007bff; /* 青色 */
}


/* =======================================
  早見表・業者なし表示のデザイン改善（推奨版）
======================================= */

.c-infoBox__body {
    background-color: #fff;
    padding: 1.5em 2em;
    line-height: 1.8;
}

/* --- チェックリスト --- */
.c-checklist {
    background: #fcfdfe;
    border: 1px solid #e5e7eb;
    padding: 1.5em 1.5em 1em 1.5em;
    margin: 1.5em 0;
    border-radius: 4px;
}
.c-checklist__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.c-checklist__item {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 1em;
}
.c-checklist__item::before {
    content: '\f00c'; /* Font Awesomeのチェックマーク */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #2173bf; /* サイトのキーカラーに合わせる */
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 1.1em;
}


/* --- フッター（業者様向け） --- */
.c-infoBox__footer {
    background-color: #f8f9fa;
    padding: 1.5em 2em;
    font-size: 0.9em;
    border-top: 1px solid #e9ecef;
}
.c-infoBox__footerTitle {
    font-weight: bold;
    margin-bottom: 0.8em;
    color: #495057;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* --- 【改善】警告/情報ボックスの枠線 --- */
.c-infoBox.-warning,
.c-infoBox.-info {
    border: 1px solid #bce0fd; /* 攻撃的でない、落ち着いたブルー系の枠線に統一 */
    background-color: #f7faff; /* 全体に薄い青系の背景色を追加 */
}

/* --- 【改善】ボックスのタイトル --- */
.c-infoBox__title {
    display: flex; /* アイコンとテキストを横並びにするため */
    align-items: center;
    gap: 0.8em;
    background-color: transparent; /* 背景色は使わない */
    color: #0c5460; /* 濃い青系の文字色 */
    padding: 1.5em 2em 0.5em 2em; /* パディングを調整 */
    margin: 0;
    font-size: 1.3rem; /* ★フォントサイズを少し小さく、バランスよく */
    font-weight: bold;
    text-align: left; /* ★左揃えにして読みやすく */
    border-bottom: 1px solid #e2e8f0; /* タイトルと本文の間に区切り線 */
    margin-bottom: 1em; /* 区切り線と本文の間の余白 */
}
/* タイトルの前にアイコンを追加 */
.c-infoBox__title::before {
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 1.2rem;
    color: #2173bf;
}
.c-infoBox.-warning .c-infoBox__title::before,
.c-infoBox.-info .c-infoBox__title::before {
     content: '\f05a'; /* iマーク（info-circle）のアイコン */
}

/* =======================================
  ページ全体のデザインシステム
======================================= */


/* --- h1見出しの統一スタイル --- */
.post_content h1 {
    font-weight: 600;
    border: none;
    padding: 0.5em 0;
    margin-top: 1em;
    margin-bottom: 0.5em;
    align-items: center;
    gap: 0.6em;
}

/* --- h2見出し（セクションタイトル）の統一スタイル --- */
.post_content h2.c-section-title {
    font-weight: 600;
    border: none;
    padding: 0.5em 0;
    margin-top: 2em; /* 上の余白を少し広めに取るのがおすすめです */
    margin-bottom: 0;
    margin-left: 0;
    font-size: 28px;
}

/* h3 */
.post_content h3.accordion-chousa {
        font-size: 18px;
        text-align: left;
        padding: 0;
}


/* --- 【最優先指定・修正版】調査項目アコーディオンのタイトル(h3)からpaddingを削除 --- */
.custom-survey-accordion .cleaninggyousya-accordion-header h3.accordion-custom-title {
    padding: 0 !important;
}

/* --- スマホ対応（768px以下） --- */
@media screen and (max-width: 768px) {
    .post_content h1 {
        font-size: 22px;
        gap: 0.4em;
        padding: 0.4em 0;
        margin-top: 0.8em;
        margin-bottom: 0.4em;
    }
    
.post_content h2.c-section-title {
        font-size: 20px;
        gap: 0.4em;
        padding: 0.4em 0;
        margin-top: 0.8em;
        margin-bottom: 1em;
        border-bottom: 2px solid #f0f2f5;
}
    
        /* h3 */
.post_content h3.accordion-chousa {
        font-size: 15px;
        text-align: left;
        margin-bottom: 0.5em;
    }
}

/* --- チェックリスト --- */
.c-checklist {
    background: #fcfdfe;
    border: 1px solid #e5e7eb;
    padding: 1.5em 1.5em 1em 1.5em;
    margin: 1.5em 0;
    border-radius: 4px;
}
.c-checklist__list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.c-checklist__item {
    position: relative;
    padding-left: 1.8em;
    margin-bottom: 1em;
}
.c-checklist__item::before {
    content: '\f00c'; /* チェックマーク */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #2173bf;
    position: absolute;
    left: 0;
    top: 3px;
    font-size: 1.1em;
}

/* =================================================================== */
/* ▼▼▼ 業者選びのチェックポイント デザイン改善 (ステップ・フロー形式) ▼▼▼ */
/* =================================================================== */

/* --- 1. 全体を囲むラッパー --- */
.ac-point-card-wrapper {
    position: relative;
    margin-top: 2.5em;
    padding-left: 60px; /* ステップアイコン用の余白 */
}

/* --- 2. タイムラインの縦線 --- */
.ac-point-card-wrapper::before {
    content: '';
    position: absolute;
    left: 25px; /* (アイコン幅50px / 2) */
    top: 15px;
    bottom: 15px;
    width: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    z-index: 0;
}

/* --- 3. 各ポイントのコンテナ --- */
.ac-point-card {
    position: relative;
    /* カード自体のスタイルはリセット */
    background: none;
    border: none;
    box-shadow: none;
}
.ac-point-card:not(:last-child) {
    padding-bottom: 3.5em; /* 各ステップ間の余白 */
    margin-bottom: 0; /* 元のmarginは不要 */
}

/* --- 4. ステップアイコン --- */
.ac-point-icon {
    position: absolute;
    left: -60px; /* ラッパーのpadding分だけ左に移動 */
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #005A9C;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    border: 4px solid #fff; /* 背景の縦線と重なった時にきれいに見えるように */
    z-index: 1;
}

/* --- 5. ヘッダーエリア --- */
.ac-point-header-iconized {
    /* flex関連のスタイルをリセット */
    display: block;
    padding: 0;
    background: none;
    border: none;
    margin-bottom: 1em;
}

/* --- 6. ポイント番号とタイトル --- */
.ac-point-header-text {
    display: block;
}
.ac-point-number {
    color: #555;
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 0.3em;
    display: block;
}
.ac-point-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 !important;
    line-height: 1.4;
    padding: 0 !important;
}
.no-underline::before,
.no-underline::after {
    display: none !important;
}

/* --- 7. 本文エリア --- */
.ac-point-body {
    padding: 0;
}
.ac-point-body > p:not(.ac-point-caption) {
    margin-bottom: 1.5em;
}

/* --- 8. 画像エリア --- */
.ac-point-image {
    margin-bottom: 1.5em;
}
.ac-point-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    border: 1px solid #eee;
}
.ac-point-caption {
    font-size: 0.85em;
    color: #555;
    margin: 0.8em 0 0 0;
    text-align: center;
    line-height: 1.5;
}

/* --- 9. チェックリストを囲むボックス --- */
.ac-point-checklist-box {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 1.5em;
    margin-top: 1.5em;
}
.ac-point-checklist-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    margin: 0 0 1em 0;
    padding: 0;
    border: none;
}
.ac-point-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}
.ac-point-checklist li {
    display: flex;
    align-items: flex-start;
    line-height: 1.8;
    font-size: 1em;
}
.ac-point-checklist li:not(:last-child) {
    margin-bottom: 0.8em;
}
.ac-point-checklist i.fas {
    color: #005A9C;
    margin-right: 0.8em;
    margin-top: 0.3em;
    font-size: 1.2em;
}

/* =======================================
  10. レスポンシブ対応 (スマホ表示) ★改善案
======================================= */
@media screen and (max-width: 767px) {

    /* --- ラッパー: 左の余白をなくし、全体を中央に --- */
    .ac-point-card-wrapper {
        padding-left: 0; /* タイムライン用の余白を削除 */
        margin-top: 1.5em;
    }

    /* --- 縦線: スマホでは非表示に --- */
    .ac-point-card-wrapper::before {
        display: none;
    }

    /* --- 各カード: 上下に適切な余白を設定 --- */
    .ac-point-card {
        padding-bottom: 0; /* 元のpaddingはリセット */
    }
    .ac-point-card:not(:last-child) {
        margin-bottom: 0.5em; /* カード間の余白をmarginで確保 */
    }

    /* --- ヘッダーエリア: Flexboxでアイコンとテキストを横並びに --- */
    .ac-point-header-iconized {
        display: flex;
        align-items: center; /* アイコンとテキストを垂直方向中央に揃える */
        gap: 15px; /* アイコンとテキストの間の隙間 */
        margin-bottom: 1.2em;
    }

    /* --- アイコン: 通常の要素としてヘッダー内に配置 --- */
    .ac-point-icon {
        position: static; /* position: absolute を解除 */
        left: auto;
        top: auto;
        border: none; /* 白い枠線は不要なので削除 */
        flex-shrink: 0; /* 縮まないように設定 */
        
        /* スマホ用にサイズを調整 */
        width: 45px;
        height: 45px;
        font-size: 1.6rem;
    }

    /* --- タイトル --- */
    .ac-point-title {
        font-size: 1.25rem;
    }
    
    /* --- 本文エリア: 左右に少しだけ余白があると読みやすい --- */
    .ac-point-body {
       padding: 0 5px; 
    }

    /* --- チェックリスト --- */
    .ac-point-checklist-box {
        padding: 1.2em;
    }
    .ac-point-checklist li {
        font-size: 0.95em;
    }
    .ac-point-checklist i.fas {
        margin-right: 0.6em;
    }
}
/* =======================================
  調査項目一覧への繋ぎのセクション
======================================= */
.survey-link-wrapper {
    margin: 2.5em auto;
    padding: 1.5em;
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}
.survey-link-text {
    text-align: center;
    font-size: 0.95em;
    line-height: 1.8;
    margin: 0;
}


/* =======================================
  レスポンシブ対応 (スマホ表示)
======================================= */
@media screen and (max-width: 767px) {
    .ac-point-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8em;
        padding: 1em;
    }
    .ac-point-title {
        font-size: 1.15rem;
    }
    .ac-point-body {
        padding: 1.5em 1em; /* スマホでは左右の余白を少し狭く */
    }
    .ac-point-checklist-title {
        font-size: 1.05em;
    }
    .ac-point-checklist li {
        font-size: 0.95em;
    }
}

/* =======================================
  【最終FIX・決定版】調査項目一覧（JS連携版）
======================================= */

/* --- 1. アコーディオン本体の基本スタイル --- */
.custom-survey-accordion .cleaninggyousya-accordion-header {
    background-color: #f8f9fa;
    transition: background-color 0.2s ease;
}
.custom-survey-accordion .cleaninggyousya-accordion-header:hover {
    background-color: #e9ecef;
}
.custom-survey-accordion .accordion-custom-title {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 1rem;
    font-weight: 600;
    color: #2273BF;
}
.custom-survey-accordion .cleaninggyousya-accordion-content {
    padding: 0 !important;
}

/* --- 2. アコーディオン内のラッパー --- */
.custom-survey-accordion .survey-items-wrapper {
    margin: 0;
    border: none;
    border-radius: 0;
    padding: 24px 32px;
    background-color: #fff;
}

/* --- 3. 調査項目のレイアウト --- */
.survey-items-categories {
    display: flex;
    gap: 24px;
}
.survey-item-category {
    flex: 1;
    min-width: 0;
}
.category-title {
    font-size: 15px;
    font-weight: 700;
    color: #333;
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
}
.items-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
}
.item {
    font-size: 12px;
    color: #555;
    background-color: #f8f9fa;
    padding: 4px 10px;
    border-radius: 4px;
    white-space: nowrap;
    position: relative;
    cursor: help;
}
.survey-items-note {
    text-align: right;
    font-size: 12px;
    color: #888;
    margin: 20px 0 0 0;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}


/* --- 4. ★★★★★【最重要】JSで操作するツールチップのスタイル ★★★★★ --- */
.survey-tooltip {
    position: fixed; /* 画面に固定し、overflowの壁を無視する */
    background-color: #222;
    color: white;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    
    z-index: 9999; /* 最前面に表示 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    
    /* 初期状態では非表示 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* マウス操作を邪魔しない */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* ツールチップの矢印（▼）のスタイル */
.survey-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; /* ツールチップの下に配置 */
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #222;
}

/* 表示時のスタイル */
.survey-tooltip.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(-4px); /* 少し浮き上がるアニメーション */
}


/* --- 5. スマホ表示の調整 (768px以下) --- */
@media screen and (max-width: 768px) {
    .custom-survey-accordion .survey-items-wrapper {
        padding: 20px;
    }
    .survey-items-categories {
        flex-direction: column;
        gap: 20px;
    }
}
/* =======================================
  業者一覧セクション（JS描画部分）
======================================= */

/* --- 導入文 --- */
.section-intro { /* PHP側でクラス名を統一した方が良いが、現状のままでも動作する */
    background-color: #f8f9fa;
    padding: 1.5em;
    margin-bottom: 2em;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #e9ecef;
}
.section-intro p {
    margin: 0;
    line-height: 1.7;
}

/* --- 件数0の場合の表示制御 --- */
.cleaninggyousya-section.is-empty .section-intro,
.cleaninggyousya-section.is-empty .section-content {
    display: none;
}
.cleaninggyousya-section.is-empty .gyousya-no-result-box {
    display: block;
}
.gyousya-no-result-box {
    display: none;
}

/* =======================================
  AJAXローディング表示 (0件表示修正版)
======================================= */

.cleaninggyousya-company-list {
    position: relative;
    /* min-height: 200px;  ←★ この行を削除、またはコメントアウト */
    transition: opacity 0.2s ease-in-out, min-height 0s 0.2s; /* 高さの transition を遅延させる */
}

.cleaninggyousya-company-list.is-loading {
    opacity: 0.5; /* 通信中は少し薄くする */
    min-height: 200px; /* ←★ min-height をこちらに移動 */
}

.cleaninggyousya-company-list.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    border: 5px solid rgba(33, 115, 191, 0.2); /* #2173bf の薄い色 */
    border-top-color: #2173bf; /* サイトのキーカラー */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}



/* =================================================================== */
/* ▼▼▼【真の最終FIX】調査項目 統合アコーディオン用CSS ▼▼▼ */
/* =================================================================== */

/* --- アコーディオン全体の外枠 --- */
.integrated-survey-accordion {
    margin-top: 3em;
    border-color: #e0e0e0;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

/* --- 開閉するヘッダー部分全体のスタイル --- */
.integrated-survey-accordion .cleaninggyousya-accordion-header {
    display: flex;
    flex-direction: column; /* 要素を縦に積む */
    align-items: center; /* 中央寄せ */
    gap: 1em; /* 説明文と見出しの間の余白 */
    background-color: #f8f9fa;
    border: none;
    padding: 1.5em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.integrated-survey-accordion .cleaninggyousya-accordion-header:hover {
    background-color: #f1f3f5;
}
.integrated-survey-accordion .cleaninggyousya-accordion-header::after {
    display: none !important;
}

/* --- ヘッダー内の説明文 --- */
.integrated-survey-accordion .header-main-text {
    font-size: 0.95em;
    line-height: 1.8;
    text-align: center;
    color: #333;
}
.integrated-survey-accordion .header-main-text strong {
    display: block;
    margin-bottom: 0.2em;
}

/* --- ヘッダー内の説明文エリア --- */
.integrated-survey-accordion .header-main-text {
    text-align: center;
    width: 100%; /* 中央寄せを確実にするため幅を指定 */
}

/* --- 質問文のスタイル (p.survey-question) --- */
.header-main-text .survey-question {
    font-size: 1.1em; /* 少し大きくして目立たせる */
    font-weight: bold;
    color: #333;
    line-height: 1.6;
    margin: 0 0 0.8em 0; /* 下にだけ、程よい余白を指定 */
}

/* --- 説明文のスタイル (p.survey-answer) --- */
.header-main-text .survey-answer {
    font-size: 0.95em;
    line-height: 1.8;
    color: #555;
    margin: 0; /* 上下の余白をリセット */
}

/* --- ヘッダーの見出し (h3) --- */
.integrated-survey-accordion .accordion-chousa {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1em;
    font-weight: bold;
    color: #005A9C;
    margin: 0 !important;
    padding: 0 !important;
}


/* --- ヘッダーの見出し (h3) --- */
.integrated-survey-accordion .accordion-chousa {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: 1em;
    font-weight: bold;
    color: #005A9C;
    margin: 0 !important;
    padding: 0 !important;
}
/* h3の後に自動で矢印アイコンを追加 */
.integrated-survey-accordion .accordion-chousa::after {
    content: '\f078'; /* Font Awesomeの chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    transition: transform 0.3s ease;
}

/* --- アコーディオンが開いた時の矢印の回転 --- */
.integrated-survey-accordion .cleaninggyousya-accordion-header.cleaninggyousya-active .accordion-chousa::after {
    transform: rotate(180deg);
}

/* --- コンテンツ部分のスタイル --- */
.integrated-survey-accordion .cleaninggyousya-accordion-content {
    padding: 0 !important;
    border-top: 1px solid #e9ecef;
}

/* =======================================
  ▼▼▼【統一デザイン】市区町村リスト（グリッド表示）▼▼▼
======================================= */

/* --- グリッド全体のコンテナ --- */
/* ★★★ ポイント：クラス名を .post_content > ... のような限定的なものではなく、
   .gyousya-municipality-grid だけで指定することで、どのページでも適用されるようになります */
.gyousya-municipality-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 15px; /* アイテム間の隙間 */
}

/* --- 各市区町村のリンクアイテム（ボタン） --- */
.gyousya-municipality-grid-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px 20px;
    background-color: #f8f9fa; /* 背景色を少しつける */
    border: 1px solid #e9ecef; /* 枠線を設定 */
    border-radius: 8px;
    color: #2173bf; /* リンク色 */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

/* --- マウスを乗せた時の効果 --- */
.gyousya-municipality-grid-item:hover {
    background-color: #2173bf;
    border-color: #2173bf;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* --- スマートフォン表示への対応 (画面幅767px以下) --- */
@media (max-width: 767px) {
    .gyousya-municipality-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .gyousya-municipality-grid-item {
        padding: 12px 8px;
        font-size: 14px;
    }
}

/* =======================================
  ▼▼▼ 業者カード内「特徴タグ」の<ul><li>化対応 ▼▼▼
======================================= */

/* --- 1. リスト全体 (ul) のスタイル --- */
/* ulタグ固有のスタイル（黒丸や左の余白）をリセットします */
.cleaninggyousya-tag-list {
    list-style: none !important; /* 黒丸（リストマーカー）を非表示に */
    padding-left: 0 !important;   /* 左側の余白を削除 */
    margin: 0 !important;         /* 上下の余白を削除 */
}

/* --- 2. 各タグ (li) のスタイル --- */
/* liタグをインライン要素のように振る舞わせ、横並びにします */
li.cleaninggyousya-tag {
    display: inline-flex; /* ★重要：横並びになり、かつ中の要素を中央揃えにできる */
    margin: 4px;          /* タグ同士の上下左右に少し余白を持たせる */
}


/* =======================================
  ▼▼▼ 汎用ツールチップの矢印調整用CSS ▼▼▼
======================================= */

/* 矢印の位置をCSS変数で制御できるように変更 */
.survey-tooltip::after {
    top: var(--arrow-top, 100%); /* デフォルトは下向きの矢印 */
    border-color: var(--arrow-border-color, #222 transparent transparent transparent);
}