/* --- 検索ページ (search.html) --- */
.search-options,
.featured-links {
    display: grid;
    gap: 16px;
}

.search-card {
    padding: 40px 20px;
    border-radius: 8px;
    color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    box-shadow: var(--shadow);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.15);
    min-height: 180px;
    box-sizing: border-box;
}

.search-card-icon {
    font-size: 56px;
}

.search-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.location-card {
    background: linear-gradient(135deg, #8ab4f7, #a0c3f9);
}

.name-card {
    background: linear-gradient(135deg, #92c79b, #a9d6b0);
}

.service-card {
    background: linear-gradient(135deg, #f7d188, #f9e2ae);
}

.senior-card {
    background: linear-gradient(135deg, #82d8e4, #a8e5ef);
}

.childcare-card {
    background: linear-gradient(135deg, #f7a8b8, #f9c1cc);
}

.divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 40px 0;
}

.section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color-dark);
    text-align: center;
    margin-top: 0;
    margin-bottom: 24px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
/* --- Responsive layout for search options --- */
@media screen and (min-width: 1024px) {
    .search-options {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* --- search.css に追加 --- */

/* 障がい者・児：落ち着きのあるパープル系 */
.disabled-card {
    background: linear-gradient(135deg, #b39ddb, #d1c4e9);
}

/* 女性：温かみのあるコーラル・オレンジ系 */
.women-card {
    background: linear-gradient(135deg, #ffab91, #ffccbc);
}

/* 生活保護：安定感のあるティール・グリーン系 */
.welfare-card {
    background: linear-gradient(135deg, #80cbc4, #b2dfdb);
}

/* レスポンシブ調整の補強：カードが増えたためグリッドを見やすく調整 */
@media screen and (min-width: 600px) and (max-width: 1023px) {
    .search-options {
        grid-template-columns: repeat(2, 1fr); /* タブレットサイズでは2列にする */
    }
}
/* --- search.css 追加分 (サブカテゴリ用コンパクトスタイル) --- */

/* 新規カラー定義（前回と同じ） */
.disabled-card { background: linear-gradient(135deg, #b39ddb, #d1c4e9); }
.women-card { background: linear-gradient(135deg, #ffab91, #ffccbc); }
.welfare-card { background: linear-gradient(135deg, #80cbc4, #b2dfdb); }


/* --- コンパクトカードのレイアウト調整 --- */

/* --- search.css 修正版 --- */

/* グリッドレイアウト: 縦一列（リスト型）に変更 */
.service-grid {
    display: flex;             /* Flexboxに変更 */
    flex-direction: column;    /* 縦方向に積む */
    gap: 16px;                 /* カード間の隙間 */
    max-width: 800px;          /* 横に広がりすぎないよう制限（PCで見やすく） */
    margin: 0 auto;            /* 画面中央に配置 */
    width: 100%;               /* 親要素いっぱいまで広げる */
}

/* --- コンパクトカード (リスト形式) --- */
.compact-card {
    min-height: auto;
    padding: 24px 32px;        /* 横幅が広がるので、左右の余白を少し増やして上品に */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 24px;                 /* アイコンとテキストの間隔を少し広げる */
    /* 背景色などは以前の記述を継承 */
}

/* アイコンエリア */
.compact-card .search-card-icon {
    flex-shrink: 0;
    width: 60px;
    font-size: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* テキストエリア */
.compact-card .search-card-text {
    flex-grow: 1;              /* 余ったスペースを埋める */
    min-width: 0;
}

/* タイトル */
.compact-card .search-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px 0;
    line-height: 1.3;
}

/* 説明文 */
.service-examples {
    font-size: 15px;           /* 横幅が広いので、文字サイズを少し上げて読みやすく */
    font-weight: 500;
    opacity: 0.95;
    margin: 0;
    line-height: 1.6;
}

/* --- (オプション) クリックできる感を出すための矢印 --- */
/* カードの右端に「>」アイコンをつけたい場合は、HTMLの追記なしでCSSだけで実装可能です */
.compact-card::after {
    content: '\f054';          /* FontAwesomeの chevron-right アイコン */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 18px;
    opacity: 0.6;
    margin-left: 16px;         /* テキストとの間隔 */
}

/* --- スマホ表示時の微調整 --- */
@media screen and (max-width: 480px) {
    .compact-card {
        padding: 20px 16px;    /* スマホでは余白を少し詰める */
        gap: 16px;
    }
    
    .compact-card .search-card-icon {
        width: 40px;
        font-size: 28px;
    }
    
    .compact-card .search-card-title {
        font-size: 18px;
    }
    
    .service-examples {
        font-size: 13px;
    }
    
    .compact-card::after {
        font-size: 14px;       /* スマホでは矢印も小さく */
    }
}
/* --- search.css 追記分（玄人向け検索セクション） --- */

/* 玄人向けグリッドレイアウト */
.advanced-search-options {
    display: grid;
    gap: 16px;
    width: 100%;
}

/* 比較カード: 知的で分析的な印象のインディゴ・スレート系 */
.compare-card {
    background: linear-gradient(135deg, #7986cb, #9fa8da);
}

/* キーワードカード: 探索的で落ち着いたブラウン・アンバー系 */
.keyword-card {
    background: linear-gradient(135deg, #d4a373, #e6b88a);
}

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

/* タブレット・PC以上 (600px〜) */
@media screen and (min-width: 600px) {
    .advanced-search-options {
        grid-template-columns: repeat(2, 1fr); /* 2列にする */
        max-width: 800px; /* 横に広がりすぎないように制限 */
        margin: 0 auto; /* 中央揃え */
    }
}
/* --- スマホ表示時の最適化（スリム化） --- */
@media screen and (max-width: 599px) {
    /* コンテナの余白調整 */
    .search-content-wrapper {
        padding: 20px 12px;
    }

    /* グリッドの間隔を少し詰める */
    .search-options,
    .advanced-search-options {
        gap: 12px;
        /* グリッドを1列に強制（念のため） */
        grid-template-columns: 1fr;
    }

    /* カードを横長のリスト形式に変形 */
    .search-card {
        flex-direction: row;       /* アイコンと文字を横並びに */
        min-height: auto;          /*高さの固定を解除 */
        padding: 20px 24px;        /* 余白を縮小 */
        text-align: left;          /* 文字を左寄せに */
        align-items: center;       /* 垂直方向中央揃え */
        justify-content: flex-start; /* 左詰め */
        gap: 20px;                 /* アイコンと文字の間隔 */
    }

    /* アイコンのサイズ調整 */
    .search-card-icon {
        font-size: 32px;           /* 56pxから縮小 */
        width: 40px;               /* 幅を固定して文字の開始位置を揃える */
        display: flex;
        justify-content: center;
    }

    /* タイトルのサイズ調整 */
    .search-card-title {
        font-size: 16px;           /* 少し小さくして読みやすく */
        margin: 0;
    }

    /* タップしやすさを補助するための矢印アイコンを擬似要素で追加（オプション） */
    .search-card::after {
        content: '\f054';          /* FontAwesomeの chevron-right (>) */
        font-family: "Font Awesome 6 Free";
        font-weight: 900;
        font-size: 16px;
        margin-left: auto;         /* 右端に寄せる */
        opacity: 0.8;
    }
    
    /* 区切り線の余白調整 */
    .divider {
        margin: 30px 0;
    }
}