/**
 * HUG Vehicle Search - 独立スコープ版CSS
 * 参考サイトのデザインを独自のクラス名で再現
 */

/* Googleフォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+JP:wght@400;700&display=swap');

/* ラッパー */
.hug-vehicle-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

/* 件数表示 */
.hug-vehicle-count {
    text-align: center !important;
    margin: 20px 0 !important;
    font-size: 14px !important;
    color: #666 !important;
}

/* グリッドコンテナ */
.hug-vehicle-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -1% !important;
    width: calc(100% + 2%) !important;
}

/* 各車両アイテム */
.hug-vehicle-item {
    width: 31.333% !important;
    margin: 0 1% 25px 1% !important;
    border: 1px solid #000 !important;
    padding: 2px !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    vertical-align: top !important;
}

/* article要素 */
.hug-vehicle-article {
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
}

/* 画像リンク */
.hug-vehicle-image-link {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

/* 車両画像 */
.hug-vehicle-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    object-fit: cover !important;
    margin: 0 auto 10px auto !important;
}

/* 車両タイトル */
.hug-vehicle-title {
    background: #fff !important;
    padding: 10px 15px !important;
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-bottom: 1px solid #eee !important;
    font-family: 'Noto Sans JP', sans-serif !important;
}

.hug-vehicle-title a {
    text-decoration: none !important;
    color: #333 !important;
    font-size: 15px !important;
    font-weight: bold !important;
    display: block !important;
}

.hug-vehicle-title a:hover {
    color: #666 !important;
}

/* スペック情報（年式・走行距離） */
.hug-vehicle-specs {
    margin: 0 10px 5px 10px !important;
    padding: 10px 0 5px 0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    color: #333 !important;
}

.hug-vehicle-specs strong {
    font-weight: bold !important;
    color: #333 !important;
}

/* 価格表示 */
.hug-vehicle-price {
    margin: 0 10px 5px 10px !important;
    padding: 5px 0 !important;
    font-size: 14px !important;
    font-weight: bold !important;
    color: #333 !important;
}

.hug-vehicle-price-num {
    font-size: 40px !important;
    color: #ff7133 !important;
    font-family: "Anton", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* 店舗名 */
.hug-vehicle-store {
    background: #000 !important;
    display: block !important;
    font-size: 13px !important;
    font-family: 'Noto Sans JP', sans-serif !important;
    text-align: center !important;
    padding: 3px 10px !important;
    color: #FFF !important;
    margin: 0 !important;
}

/* ページネーション */
.hug-vehicle-pagination {
    margin: 0 auto 5px auto !important;
    text-align: center !important;
    clear: both !important;
    padding: 20px 0 !important;
}

.hug-vehicle-prev,
.hug-vehicle-next {
    display: inline-block !important;
    margin: 0 10px !important;
}

.hug-vehicle-prev a,
.hug-vehicle-next a {
    display: inline-block !important;
    background: #0000D1 !important;
    border-radius: 20px !important;
    padding: 5px 15px !important;
    text-decoration: none !important;
    color: #FFFFFF !important;
    font-size: 14px !important;
}

.hug-vehicle-prev a:hover,
.hug-vehicle-next a:hover {
    opacity: 0.5 !important;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .hug-vehicle-item {
        width: 48% !important;
        margin: 0 1% 20px 1% !important;
    }
}

@media (max-width: 480px) {
    .hug-vehicle-item {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    .hug-vehicle-grid {
        margin: 0 !important;
        width: 100% !important;
    }
}