@charset "UTF-8";

/* ==========================================================================
   Subpage Header (下層ページ共通ヘッダー - 所有車両専用)
   ========================================================================== */
.p-page-header {
    position: relative;
    width: 100%;
    /* 【自動レスポンシブ】画面幅に応じて 180px 〜 325px の間を滑らかに伸縮させます */
    height: clamp(180px, 20vw + 60px, 325px);
    margin-top: var(--header-height);
    /* 大成功したルートパス指定をガッチリキープ！ */
    background-image: url('/images/vehicles_background_img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.p-page-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
}

.p-page-header__inner {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    transform: translateY(20px);
}

/* 【大正解のシャープ仕様】メインタイトル（日本語）の文字サイズと薄い影 */
.p-page-header__title {
    font-family: 'Noto Serif JP', "游明朝", serif;
    font-size: clamp(24px, 2.5vw + 15px, 31px);
    /* 元の美しいスマートなサイズに固定 */
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 11px 0;
    letter-spacing: 0.14em;
}

/* 【大正解のシャープ仕様】サブタイトル（英語）の文字サイズと薄い影 */
.p-page-header__subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(11px, 0.5vw + 9px, 15px);
    /* 元の美しいスマートなサイズに固定 */
    /* font-weight: 700; */
    color: #BDBCBC;
    line-height: 2;
    margin-bottom: 0;
    letter-spacing: 0.4em;
}

/* ==========================================================================
   Vehicles Page Styles (所有車両専用レイアウト)
   ========================================================================== */
.p-vehicles {
    padding: clamp(40px, 6vw, 80px) 0;
    background-color: #fcfcfc;
}

.p-vehicles__wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.p-vehicles__category {
    margin-bottom: clamp(40px, 6vw, 80px);
}

.p-vehicles__category:last-child {
    margin-bottom: 0;
}

/* カテゴリー見出しボックス */
.p-vehicles__heading-box {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: clamp(24px, 4vw, 40px);
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 16px;
}

.p-vehicles__heading-icon {
    width: clamp(24px, 3vw, 32px);
    height: auto;
    object-fit: contain;
}

.p-vehicles__heading {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(20px, 2vw + 12px, 26px);
    font-weight: 700;
    color: #111827;
    margin: 0;
    letter-spacing: 0.05em;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.p-vehicles__heading span {
    font-family: 'Poppins', sans-serif;
    font-size: 0.55em;
    color: var(--color-primary, #cca152);
    margin-left: 12px;
    letter-spacing: 0.1em;
}

/* グリッドレイアウト（レスポンシブ対応） */
.p-vehicles__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
}

/* タブレット（768px以上）で2列に */
@media (min-width: 768px) {
    .p-vehicles__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* パソコン（1024px以上）で3列に */
@media (min-width: 1024px) {
    .p-vehicles__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 車両カード */
.p-vehicles__item {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border: 1px solid #f3f4f6;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.p-vehicles__item:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.p-vehicles__thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #f3f4f6;
}

.p-vehicles__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.p-vehicles__item:hover .p-vehicles__thumb img {
    transform: scale(1.05);
}

.p-vehicles__name {
    font-family: 'Noto Sans JP', sans-serif;
    font-size: clamp(15px, 1vw + 12px, 17px);
    font-weight: 700;
    color: #111827;
    margin: 0;
    padding: clamp(16px, 2vw, 24px);
    line-height: 1.4;
    background-color: #ffffff;
    border-top: 1px solid #f3f4f6;
}