@charset "UTF-8";

/* ==========================================================================
   1. 外枠・タブ・基本レイアウト
   ========================================================================== */
.front-search-box {
    border: 4px solid #4169e1;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    max-width: 800px;
    margin: 0 auto 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* タブエリア */
.search-tabs {
    display: flex;
    background: #4169e1;
}

.search-tab {
    flex: 1;
    background: #4169e1;
    color: #fff;
    border: none;
    padding: 15px 10px;
    font-weight: bold;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.3s;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.3);
}

.search-tab:last-child {
    border-right: none;
}

.search-tab.is-active {
    background: #fff;
    color: #4169e1;
}

/* パネルエリア */
.search-body {
    padding: 20px;
}

.search-panel {
    display: none;
}

.search-panel.is-active {
    display: block;
    animation: fadeIn 0.4s;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* h3の下線を非表示にする（例：<h3 class="card-title no-underline">従来のPR</h3>） 
 * 基本はswell設定でONにするためh3で下線を引きたくない場合使用 */
.no-underline::before {
    display: none !important;
}

.page #content {
    /* コンテンツ上下に余分な空白が入るので消す */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* ==========================================================================
   2. 共通フォーム要素 (入力欄・ボタン)
   ========================================================================== */
.search-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    background: #fdfdfd;
    box-sizing: border-box;
}

.search-submit-btn {
    background: #F74A4A;
    color: #fff;
    border: none;
    padding: 15px 20px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    width: 100%;
    font-size: 18px;
    transition: 0.3s;
}

.search-submit-btn:hover {
    opacity: 0.9;
}

.search-submit-btn.disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* ==========================================================================
   3. タブ別レイアウト
   ========================================================================== */

/* --- タブ1: 会社名検索 --- */
.search-form-company {
    display: flex;
    gap: 10px;
}

/* --- タブ2: エリア検索 (ボタン式UI) --- */
.step-label {
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

/* 地域アコーディオン */
.region-group {
    border-bottom: 1px solid #eee;
}
.region-group:last-child {
    border-bottom: none;
}

.region-trigger {
    width: 100%;
    text-align: left;
    padding: 12px 10px;
    background: #fff;
    border: none;
    font-weight: bold;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.region-trigger:hover {
    background: #f5f8ff;
}

.region-trigger i {
    transition: transform 0.3s;
}

.region-group.is-open .region-trigger i {
    transform: rotate(180deg);
}

.region-group.is-open .region-trigger {
    color: #4169e1;
    background: #eef3ff;
}

.region-content {
    display: none;
    padding: 10px;
    background: #f9f9f9;
}

.region-group.is-open .region-content {
    display: block;
}

/* 都道府県・市区町村グリッド (タブ2・モーダル共通) */
.pref-grid, .city-grid {
    display: grid;
    gap: 8px;
}

.pref-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.city-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

/* ボタン共通スタイル */
.pref-btn, .city-btn, .modal-pref-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px 5px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    width: 100%; /* グリッド内で最大幅 */
}

.city-btn {
    padding: 12px 5px;
    word-break: break-all;
}

.pref-btn:hover, .city-btn:hover, .modal-pref-btn:hover {
    border-color: #4169e1;
    color: #4169e1;
    background: #f0f4ff;
}

.city-btn.is-selected {
    background: #4169e1;
    color: #fff;
    border-color: #4169e1;
    font-weight: bold;
}

/* タブ2詳細画面ヘッダー */
.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

.back-btn {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.back-btn:hover {
    text-decoration: underline;
}

.selected-pref-name {
    margin: 0 0 0 auto;
    font-weight: bold;
    font-size: 18px;
    color: #4169e1;
}

/* フィルタ入力欄 */
.city-filter-box {
    margin-bottom: 15px;
    width: 100%;
}
#city-filter-input, #modal-city-filter {
    width: 100%;
    padding: 12px; /* 少し広げました */
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}
#modal-city-filter {
    margin-bottom: 10px;
}

/* 検索アクションエリア */
.area-search-action {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

/* --- タブ3: 特徴検索 (チェックボックス & モーダル) --- */
.feature-group {
    margin-bottom: 20px; /* 余白を少し広げる */
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.feature-label {
    font-weight: bold;
    margin-bottom: 12px;
    border-left: 5px solid #4169e1; /* 線を太く */
    padding-left: 10px;
    font-size: 16px; /* フォントサイズアップ */
}

.feature-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* 間隔を広げる */
}

/* チェックボックスラベル（ここを大きくする） */
.feature-checks label {
    font-size: 15px; /* 文字を大きく */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px; /* チェックボックスと文字の間隔 */
    padding: 8px 10px; /* クリック領域を広げる */
    border-radius: 4px;
    transition: background 0.2s;
}

.feature-checks label:hover {
    background: #f0f4ff; /* ホバー時に背景色をつけて反応を分かりやすく */
}

/* チェックボックス自体を大きくする */
.feature-checks input[type="checkbox"] {
    transform: scale(1.3); /* 1.3倍に拡大 */
    cursor: pointer;
    margin: 0; /* デフォルトマージンリセット */
}

/* 下部アクションエリア (ボタンとトリガーの並び) */
.feature-area-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
}

/* エリア選択トリガーボタン (セレクトボックス風) */
.area-trigger-btn {
    flex: 1; /* 余った幅を埋める */
    min-width: 140px;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.area-trigger-btn:hover {
    border-color: #4169e1;
    background: #f0f4ff;
}

.area-trigger-btn.has-value {
    background: #eef3ff;
    border-color: #4169e1;
    color: #4169e1;
    font-weight: bold;
}
.area-trigger-btn i {
    color: #4169e1;
}

/* 検索ボタン (特徴タブ用調整) */
.feature-area-row .search-submit-btn {
    width: auto;      /* 100%解除 */
    min-width: 200px; /* 最小幅確保 */
    flex: 0 0 auto;   /* 伸縮しない */
    margin: 0;
}


/* ==========================================================================
   4. モーダル (ポップアップ)
   ========================================================================== */
/* --------------------------------------------------
   モーダル修正：最前面表示とスクロール制御
-------------------------------------------------- */

/* 1. Z-indexを極端に大きくして最前面を確保 */
.area-modal-overlay {
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 2147483647; /* 32bit整数の最大値（SWELLのヘッダーや追尾バナーより上にする） */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    backdrop-filter: blur(2px);
}

/* 2. 背景スクロール固定用のクラス（JSでbodyに付与） */
body.modal-open {
    overflow: hidden !important; /* スクロールバーを消してスクロール禁止 */
    height: 100vh;
}

.area-modal-content {
    background: #fff;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ヘッダー */
.area-modal-header {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #4169e1;
    color: #fff;
}
.area-modal-header h3 {
    margin: 0;
    font-size: 18px;
}
.area-modal-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

/* ボディ */
.area-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.step-desc {
    margin-bottom: 15px;
    font-weight: bold;
    text-align: center;
    color: #666;
}

/* 「県全体で探す」ボタン */
.select-all-btn {
    width: 100%;
    padding: 10px;
    background: #eee;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    transition: 0.2s;
}
.select-all-btn:hover {
    background: #ddd;
}

/* ==========================================================================
   5. レスポンシブ対応 (スマホ用)
   ========================================================================== */
@media (max-width: 600px) {
    /* タブ1, タブ3の横並びを縦積みに */
    .search-form-company, 
    .feature-area-row {
        flex-direction: column;
        align-items: stretch;
    }

    /* ボタン類を幅100%に */
    .search-submit-btn,
    .feature-area-row .search-submit-btn,
    .area-trigger-btn {
        width: 100%;
        min-width: 0;
        margin-bottom: 10px;
    }
    
    .feature-area-row .search-submit-btn {
        margin-bottom: 0;
    }

    /* グリッドレイアウト調整 */
    .city-grid {
        grid-template-columns: repeat(2, 1fr);
        max-height: 400px;
    }

    /* モーダルを画面いっぱいに */
    .area-modal-content {
        height: 90vh;
        max-height: 90vh;
    }
}

/* ==========================================================================
   6. サービスカード
   ========================================================================== */

/* グリッドレイアウト設定 */
.sukkiri-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* PCは3列 */
    gap: 30px; /* カード間の隙間 */
    max-width: 1200px;
    margin: 0 auto;
}

/* カード本体のデザイン */
.sukkiri-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* ふんわりした影 */
    border: 1px solid #eee;
    display: flex;
    flex-direction: column; /* 中身を縦並びにする */
    transition: transform 0.3s ease;
}

.sukkiri-card:hover {
    transform: translateY(-5px); /* ホバー時に少し浮く */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* ヘッダー部分（画像＋タイトル） */
.sukkiri-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    gap: 15px;
}

.sukkiri-card-icon {
    width: 180px;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
}

.sukkiri-card-title {
    font-size: 20px;
    font-weight: bold;
    color: #222;
    margin: 0;
}

/* リストのデザイン */
.sukkiri-card-list {
    margin: 0 0 30px 0;
    padding-left: 20px; /* リストマーカー分の余白 */
    color: #333;
    font-size: 15px;
    line-height: 1.8;
    flex-grow: 1; /* ボタンを下端に揃えるために伸ばす */
}

.sukkiri-card-list li {
    margin-bottom: 8px;
}

/* ボタンエリア */
.sukkiri-card-btn-area {
    text-align: center;
}

.sukkiri-card-btn {
    display: block;
    width: 100%;
    padding: 12px 0;
    color: #3b71ca; /* リンク色（青） */
    border: 1px solid #3b71ca;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: all 0.3s ease;
    background-color: #fff;
}

.sukkiri-card-btn:hover {
    background-color: #3b71ca;
    color: #fff;
}

/* レスポンシブ対応 */

/* タブレットサイズ（960px以下）は2列 */
@media (max-width: 960px) {
    .sukkiri-card-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* スマホサイズ（600px以下）は1列 */
@media (max-width: 600px) {
    .sukkiri-card-container {
        grid-template-columns: 1fr;
    }
    
    .sukkiri-card-header {
        flex-direction: column;
        text-align: center;
    }
    
    .sukkiri-card-icon {
        width: 180px;
        height: 180px;
    }
}

/* ==================================================
   マガジンレイアウト用CSS (整理・修正版)
   ================================================== */

/* 変数定義 */
:root {
    --fp-main: #0044cc;
    --fp-accent: #b08d55;
    --fp-bg-gray: #f7f9fc;
    --fp-text: #333;
    --fp-text-light: #777;
    --fp-radius: 12px;
    --fp-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* 「スッキリ」部分だけのデザイン */
.will-h2-c .sukkiri-logo-style {
    color: #1a44b5; /* ロゴのような濃い青 */
    font-weight: 900; /* 文字を太く */
    
    /* 下半分のマーカー（下線） */
    background: linear-gradient(transparent 70%, #dce6f7 60%);
    
    /* マーカーが文字にくっつきすぎないように少し余白 */
    padding: 0 4px;
    
    /* 既存のH2のスタイルを上書きするための指定 */
    display: inline; 
}

/* もし「スッキリ」だけ少し大きくしたい場合（お好みで） */
.will-h2-c .sukkiri-logo-style {
    font-size: 1.1em; /* 周りの文字より1.1倍大きく */
}

/* メッセージエリアの枠 */
.search-count-message {
    background-color: #f9fbfd; /* 薄い青背景で清潔感を */
    border: 1px solid #dce6f7;
    border-radius: 4px;
    padding: 15px;
    margin-bottom: 20px; /* 下の要素との余白 */
    text-align: center;
}

/* テキスト本体 */
.search-count-message p {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

/* 数字の強調デザイン */
.search-count-message .count-number {
    font-size: 22px; /* 数字だけ大きく */
    color: #e60000;  /* 赤色で強調（青系のサイトならアクセントになります） */
    font-family: Arial, sans-serif; /* 数字を見やすく */
    font-weight: 900;
    margin: 0 2px;
}

/* スマホ用の改行調整 */
.sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .search-count-message {
        padding: 12px;
    }
    .search-count-message p {
        font-size: 14px;
    }
    .search-count-message .count-number {
        font-size: 18px;
    }
    .sp-only {
        display: block; /* スマホでは改行して読みやすくする */
    }
}


/* セクション設定 */
.fp-section { padding: 20px 0; }
.fp-section.bg-gray { background-color: var(--fp-bg-gray); }
.fp-section.bg-white { background-color: #fff; }

/* コンテナ */
.fp-section .l-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ヘッダー (シンプル化) */
.fp-cat-header {
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid #eee;
}

/* SWELLスタイルリセット & タイトル設定 */
h2.fp-cat-title {
    font-size: 24px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    color: var(--fp-text) !important;
    box-shadow: none !important;
    scroll-margin-top: 120px; /* アンカーリンク位置調整 */
}
h2.fp-cat-title::before, h2.fp-cat-title::after { content: none !important; }

.fp-cat-icon {
    width: 36px; height: 36px;
    background: #eef3ff; color: var(--fp-main);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

/* レイアウト (左:メイン / 右:リスト+ボタン) */
.fp-cat-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.9fr; /* 右側を少し広げる */
    gap: 30px;
}

/* --- 左側：メイン記事 --- */
.fp-cat-hero {
    position: relative; border-radius: var(--fp-radius);
    overflow: hidden; box-shadow: var(--fp-shadow);
    background: #fff; height: 100%; transition: 0.3s;
    border: 1px solid #f0f0f0;
}
.fp-cat-hero:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
.fp-cat-hero a { text-decoration: none; color: inherit; display: block; height: 100%; }

.fp-thumb-wrapper { width: 100%; height: 300px; overflow: hidden; }
.fp-hero-thumb { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.fp-cat-hero:hover .fp-hero-thumb { transform: scale(1.05); }

.fp-hero-body { padding: 25px; }

/* メタ情報（タグ・日付） */
.fp-hero-meta {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.fp-tag { background: var(--fp-main); color: #fff; padding: 3px 10px; border-radius: 4px; font-weight: 700; font-size: 11px; }

/* SWELL日付アイコン調整 */
.fp-hero-meta .c-postTimes__modified {
    font-size: 12px; color: #999; display: flex; align-items: center;
}
.fp-hero-meta .icon-modified::before {
    margin-right: 4px; font-size: 1.1em;
}

h3.fp-hero-title {
    font-size: 20px; font-weight: 700; margin: 0 0 10px 0 !important;
    line-height: 1.5; padding: 0 !important; border: none !important; background: none !important;
}
.fp-hero-excerpt {
    font-size: 14px; color: var(--fp-text-light); margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* --- 右側：サブカラム (リスト+ボタン) --- */
.fp-cat-sub-col {
    display: flex; flex-direction: column; gap: 20px;
}

.fp-cat-sub-list {
    display: flex; flex-direction: column; gap: 15px;
}

.fp-cat-sub-item {
    display: flex; gap: 15px; background: #fff; padding: 10px;
    border-radius: var(--fp-radius); box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border: 1px solid #eee; transition: 0.3s; align-items: center;
    text-decoration: none; color: inherit;
}
.fp-cat-sub-item:hover { border-color: var(--fp-main); background: #f9fbff; }

.fp-sub-thumb-wrapper {
    width: 100px; height: 75px; border-radius: 6px; overflow: hidden; flex-shrink: 0;
}
.fp-sub-thumb { width: 100%; height: 100%; object-fit: cover; }
.fp-sub-body { flex: 1; min-width: 0; }

h3.fp-sub-title {
    font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 !important;
    padding: 0 !important; border: none !important; background: none !important;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fp-tag.is-sm { font-size: 10px; padding: 2px 6px; }

/* もっと見るボタンエリア */
.fp-cat-btn-area {
    margin-top: auto; /* 下寄せ */
    text-align: center;
}
.fp-btn-link {
    display: block; width: 100%; padding: 12px 0;
    background: #fff; border: 1px solid #ccc; border-radius: 30px;
    color: var(--fp-text); font-weight: 700; font-size: 14px;
    text-decoration: none; transition: 0.3s;
}
.fp-btn-link:hover {
    background: #f0f4ff; border-color: var(--fp-main); color: var(--fp-main);
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
    .fp-cat-layout { grid-template-columns: 1fr; gap: 20px; }
    
    /* アイコン非表示（スマホシンプル化） */
    .fp-cat-icon { display: none; }
    /* タイトル文字サイズ調整 */
    h2.fp-cat-title { font-size: 20px; }
    
    .fp-thumb-wrapper { height: 200px; }
    h3.fp-hero-title { font-size: 18px; }
    
    .fp-sub-thumb-wrapper { width: 80px; height: 60px; }
    h3.fp-sub-title { font-size: 13px; }
    
    /* ボタンを少し目立たせる */
    .fp-cat-btn-area { margin-top: 10px; }
}

/* --- トップページ用FAQスタイル --- */
.fp-faq-list { max-width: 800px; margin: 0 auto; }

.fp-faq-item {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* 影をふんわり */
    border: 1px solid #f0f0f0;
    transition: 0.3s;
}
.fp-faq-item:hover {
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

/* 質問（トリガー） */
.fp-faq-q {
    width: 100%; text-align: left; border: none; background: none;
    padding: 20px 25px;
    font-weight: 700; color: #333;
    display: flex; align-items: center; gap: 15px;
    cursor: pointer; position: relative;
    font-size: 16px;
}

.fp-faq-icon {
    background: var(--fp-main); color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
    font-family: sans-serif;
}

.fp-faq-text { flex: 1; line-height: 1.5; }

/* 開閉アイコン (+/-) */
.fp-faq-toggle {
    width: 16px; height: 16px; position: relative; flex-shrink: 0;
}
.fp-faq-toggle::before, .fp-faq-toggle::after {
    content: ''; position: absolute; background: #ccc;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    transition: 0.3s;
}
.fp-faq-toggle::before { width: 100%; height: 2px; }
.fp-faq-toggle::after { width: 2px; height: 100%; }

/* 開いている状態 */
.fp-faq-q.is-open .fp-faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg); /* +を-にするアニメーション */
}
.fp-faq-q.is-open { color: var(--fp-main); }

/* 回答エリア */
.fp-faq-a-inner {
    padding: 0 25px 25px 68px; /* アイコン分インデント */
    font-size: 15px;
    color: #666;
    line-height: 1.8;
}

.fp-faq-link {
    display: inline-block; margin-top: 12px;
    color: var(--fp-main); font-weight: 700; font-size: 14px;
    text-decoration: none; border-bottom: 1px solid transparent;
}
.fp-faq-link:hover { border-bottom-color: var(--fp-main); }

/* スマホ対応 */
@media (max-width: 768px) {
    .fp-faq-q { padding: 15px 20px; font-size: 15px; }
    .fp-faq-a-inner { padding: 0 20px 20px 20px; background: #f9f9f9; border-top: 1px dashed #eee; }
    .fp-cat-title span[style*="28px"] { font-size: 22px !important; }
}


/* 全体のコンテナ設定 */
.fp-gousyaichiran-section {
    background-color: #f5f5f5; /* 参考画像のような薄いグレー背景 */
    padding: 30px 20px;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.fp-gousyaichiran-heading {
    text-align: left;
    font-size: 24px;
    font-weight: bold;
    color: #2b56cc; /* 参考画像の青いタイトル色 */
    margin-bottom: 30px;
    margin-top: 0;
}

.fp-gousyaichiran-container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 各行（地域ブロック）のレイアウト */
.fp-gousyaichiran-row {
    display: flex;
    margin-bottom: 25px; /* 行ごとの間隔 */
    align-items: flex-start;
}

/* 左側の地域名（北海道・東北など） */
.fp-gousyaichiran-region {
    width: 160px; /* 固定幅 */
    font-weight: bold;
    font-size: 18px;
    color: #111;
    flex-shrink: 0; /* 幅を縮めない */
    padding-top: 5px; /* 右側のリストと高さを微調整 */
}

/* 右側の都道府県リストエリア */
.fp-gousyaichiran-list {
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0; /* 上下の間隔 */
}

/* リンク自体のスタイル */
.fp-gousyaichiran-list a {
    width: 33.333%; /* PCでは3列並び */
    box-sizing: border-box;
    padding-right: 15px;
    font-size: 15px;
    color: #111; /* テキストは黒 */
    text-decoration: underline; /* 常に下線 */
    line-height: 1.6;
    transition: opacity 0.3s;
}

.fp-gousyaichiran-list a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/* --- レスポンシブ対応（スマホ表示） --- */
@media screen and (max-width: 768px) {
    .fp-gousyaichiran-section {
        padding: 20px 15px;
    }

    .fp-gousyaichiran-heading {
        font-size: 20px;
        margin-bottom: 20px;
    }

    /* 縦積みレイアウトに変更 */
    .fp-gousyaichiran-row {
        display: block;
        margin-bottom: 30px;
        border-bottom: 0;
    }

    /* 地域名を幅100%に */
    .fp-gousyaichiran-region {
        width: 100%;
        margin-bottom: 15px;
        font-size: 18px;
    }

    /* リスト部分の間隔調整 */
    .fp-gousyaichiran-list {
        gap: 15px 0;
    }

    /* スマホでは2列並び（あるいは1列） */
    .fp-gousyaichiran-list a {
        width: 50%; /* 2列表示 */
        font-size: 14px;
        padding-right: 10px;
    }
}


/* ==================================================
   更新リスト用CSS
   ================================================== */

/* --- トップページ：独自調査データ更新履歴（スクロール版・完全修正） --- */
.scroll-update-section {
    padding: 30px 0 !important;
}

.scroll-update-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* ヘッダー部分 */
.scroll-update-header {
    background: #f7f9fc;
    padding: 12px 20px;
    border-bottom: 1px solid #eee;
}

/* タイトル（SWELL標準スタイルの強制リセットを含む） */
.scroll-update-title {
    font-size: 16px !important;
    font-weight: bold !important;
    margin: 0 !important;
    padding: 0 !important;
    
    /* SWELLの背景・ボーダー・影を消す */
    background: none !important; 
    border: none !important;
    box-shadow: none !important;
    
    color: #333 !important;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* SWELLの装飾（ストライプやアイコンなど）を消す */
.scroll-update-title::before,
.scroll-update-title::after {
    content: none !important;
    display: none !important;
}

/* アイコンの色 */
.scroll-update-title i {
    color: #0044cc; /* テーマカラー */
}

/* スクロール領域（高さ固定） */
.scroll-update-content {
    height: 180px; /* ★ここで高さを指定 */
    overflow-y: auto; /* 縦スクロール有効化 */
    background: #fff;
}

/* スクロールバーのカスタマイズ */
.scroll-update-content::-webkit-scrollbar {
    width: 8px;
}
.scroll-update-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}
.scroll-update-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
.scroll-update-content::-webkit-scrollbar-thumb:hover {
    background: #0044cc;
}

/* リストアイテム */
.scroll-update-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.scroll-update-item {
    border-bottom: 1px dashed #eee;
}

.scroll-update-link {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    text-decoration: none !important;
    color: #333 !important;
    font-size: 14px;
    transition: background 0.2s;
    line-height: 1.5;
}

.scroll-update-link:hover {
    background-color: #f0f7ff;
    color: #0044cc !important;
}

.scroll-update-date {
    font-size: 12px;
    color: #888;
    margin-right: 15px;
    font-family: Arial, sans-serif;
    white-space: nowrap;
}

.scroll-update-label {
    background: #d9534f;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 5px;
    border-radius: 3px;
    margin-right: 10px;
    white-space: nowrap;
}

.scroll-update-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scroll-update-text .pref-name {
    display: inline-block;
    font-size: 11px;
    color: #666;
    margin-right: 5px;
}

/* スマホ対応 */
@media (max-width: 600px) {
    .scroll-update-content {
        height: 220px; /* スマホは少し高く */
    }
    .scroll-update-link {
        flex-wrap: wrap; /* 長い場合は折り返し */
        padding: 12px 15px;
    }
    .scroll-update-text {
        width: 100%;
        white-space: normal;
        margin-top: 4px;
    }
}