/* 鑑定師検索ページ(diviner_search.html)専用スタイル。style.css / bootstrap.css の後に読み込む前提 */

/* 背景は PC確認用HTML準拠のグレー。旧スタイルの白帯は無効化する */
body {
    background: #f7f7f7;
    background-image: none;
}

.section-lists,
.section-lists .container {
    background: transparent;
}

.section-lists {
    padding-bottom: 60px;
}

/* ===== 上部バナー ===== */
.search-banner {
    max-width: 800px;
    margin: 24px auto 32px;
    padding: 0 16px;
    box-sizing: border-box;
}

.search-banner img {
    display: block;
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: 0 auto;
    border-radius: 16px;
}

/* ===== 検索フォーム ===== */
/* style.css の form.example input/button（灰色・max-width:50px）より詳細度を上げて新UIを適用 */
form.example .input-group input[type='text'] {
    border-radius: 14px 0 0 14px !important;
    padding: 14px;
    width: auto;
    background: #fff;
    border: 1px solid #ddd;
}

form.example button.search-btn {
    max-width: none;
    border: none;
    background: linear-gradient(90deg, #ff4fa3, #b46bff);
    color: white;
    padding: 0 24px;
    border-radius: 0 14px 14px 0;
    font-weight: bold;
    white-space: nowrap;
}

/* ===== 鑑定師カード ===== */
.list-holder {
    margin-top: 20px;
}

.list-box {
    background: white;
    border-radius: 24px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    align-items: center;
    transition: 0.3s;
}

.list-box:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

.first-col {
    max-width: 220px;
    text-align: center;
}

.first-col figure {
    margin: 0;
}

.first-col img {
    width: 160px;
    height: 160px;
    object-fit: cover;
    border-radius: 20px;
}

.first-col h4 {
    margin-top: 14px;
    font-size: 22px;
    font-weight: bold;
    color: #222;
}

.second-col {
    flex: 1;
    padding-left: 24px;
}

/* 説明文・鑑定料金はセンタリング */
.second-col p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 14px;
    text-align: center;
}

.unstyled-a {
    text-decoration: none;
    color: inherit;
}

/* bootstrap.css の a:hover による青文字化を防ぎ、ホバーしても色を変えない */
.unstyled-a:hover,
.unstyled-a:focus {
    text-decoration: none;
    color: inherit;
}

.section-lists hr {
    border: none;
    height: 1px;
    background: #eee;
    margin: 32px 0;
}

/* ===== バッジ・ボタン ===== */
/* バッジ（5分間無料/適用済み）をボタンの左隣に横並び表示 */
.btn-holder {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: center;
    margin-top: 20px;
}

/* style.css の .list-box .btn-holder a:last-child{margin-top:5px} でボタンが下にずれ、
   「5分間無料」と縦中央が揃わなくなるため打ち消す */
.list-box .btn-holder a:last-child {
    margin-top: 0;
}

kbd {
    /* ボタンと縦中央を揃えるため、インラインではなく高さを持つ要素として扱う */
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    color: white;
    font-size: 14px;
    white-space: nowrap;
}

/* 無料鑑定の利用状況バッジ */
.badge-free {
    background-color: orange;
}

.badge-used {
    background-color: forestgreen;
}

.btn-simple-primary {
    background: linear-gradient(90deg, #ff4fa3, #b46bff);
    color: white;
    /* style.css の border:1px solid #0fdaef(水色の枠)を消す */
    border: none;
    padding: 14.5px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
    white-space: nowrap;
}

/* style.css の .btn-simple-primary:hover{background:none} でグラデーションが消えるため、
   ホバー時も同じ背景色・文字色を指定して見た目を変えない */
.btn-simple-primary:hover {
    background: linear-gradient(90deg, #ff4fa3, #b46bff);
    color: white;
}

/* 鑑定中・ご予約受付中。サイズは「鑑定依頼」と揃える */
.btn-simple-secondary {
    background: #777;
    color: white;
    /* style.css の border:1px solid #f47bb5(赤い枠)を消す */
    border: none;
    padding: 14.5px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: bold;
    white-space: nowrap;
}

/* style.css の .btn-simple-secondary:hover{background:none} で背景が消えるため、
   ホバー時も同じ背景色・文字色を指定して見た目を変えない */
.btn-simple-secondary:hover {
    background: #777;
    color: white;
    opacity: 1;
}

@media (max-width: 768px) {

    .list-box {
        text-align: center;
        padding: 20px;
    }

    .second-col {
        padding-left: 0;
        margin-top: 24px;
    }

    .btn-holder {
        justify-content: center;
    }

    .first-col {
        max-width: 100%;
    }

}