@charset "utf-8";

@import url(sanitize.css?20190513);
@import url(colorbox.css?20190513);



@import url(models_sp.css?20260421) screen and (max-width: 727px);
@import url(models_tab.css?20260421) screen and (min-width:728px) and (max-width:1024px);
@import url(models_pc.css?202604021) screen and (min-width : 1025px);

/* btn borderEffect
---------------------------*/
@media only screen and (min-width: 1025px) {
/* 1. 画像を包んでいるカラムやdivに、枠線が入り込むための余白を作る */
.col-lg-8, .kit-img {
    padding: 10px; /* 枠線(8px)より少し大きく取っておく */
}
.kit-img .kit-txt {
    margin: -15px 0 0 0;
    font-size: 12px;
    line-height: 24px;       /* 行間を1.4倍に設定 */
    font-weight: 300;
}

/* 2. aタグ自体を「内側」に配置する */
a.zoomImg {
    display: block; /* inline-blockからblockに変更して幅を安定させる */
    position: relative;
    margin: 0; 
}

/* 3. 画像のズレを完全に封じ込める（重要） */
a.zoomImg img {
    display: block;
    width: 100%;
    height: auto;
    /* 万が一JSがaタグのサイズを変えても、画像がガタつかないようにする */
}

}
a.zoomImg img {
    display: block;
    width: 100%;
    height: auto;
}
@media only screen and (max-width: 767px) {

a.zoomImg img {
    margin-bottom:10px;
}
}
.zoomImg p {
    position: absolute;
    bottom: 0;              /* 画像の下部に配置 */
    left: 0;
    width: 100%;            /* テキストを画像の幅いっぱいに広げる */
    margin: 0;
    padding: 5px;
    color: #fff;            /* 文字色を白 */
    font-size: 10px;
    line-height: 1.4;       /* 行間を1.4倍に設定 */
    font-weight: 300;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明の背景色を追加 */
    text-align: center;     /* テキストを中央揃えにする */
    box-sizing: border-box;
}
/* 小さな画面 (スマートフォン) */
@media only screen and (max-width: 480px) {
    .zoomImg p {
        font-size: 8px;        /* 小さな画面用の文字サイズ */
        line-height: 1.2;      /* 行間を1.2倍に */
        padding: 5px;
    }
}

/* 中くらいの画面 (タブレット) */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
    .zoomImg p {
        font-size: 12px;       /* タブレット用の文字サイズ */
        line-height: 1.5;      /* 行間を1.5倍に */
        padding: 8px;
    }
}

/* 大きな画面 (PC) */
@media only screen and (min-width: 1025px) {
    .zoomImg p {
        font-size: 12px;       /* 大画面用の文字サイズ */
        line-height: 1.6;      /* 行間を1.6倍に */
        padding: 6px;
    }
}
 .modelsPage {
    margin-top:80px;
}
@media only screen and (min-width: 1025px) {
 .kit-img img{
    margin-bottom:25px;
}
}

.cmt-b {
	}

	.cmt-b ul {
		list-style: none;
		margin: 0px;
		padding: 0px;
		font-size: 1.0em;
	}
	.cmt-b ul li {
		text-indent: -1em;
		padding-left: 1em;
		margin: 0px;
		padding-bottom: 0px;
	}

	.cmt-b .st {
		color: #C00;
		font-weight: bold;
	}
	@media only screen and (max-width: 767px) {

	.cmt-b {
		font-size: 1.0em;
	}
	}
.filter-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid #ddd;
}

.filter-nav li {
    padding: 10px 20px;
    margin: 0 5px;
    cursor: pointer;
    font-weight: bold;
    color: #999;
    transition: all 0.3s;
    position: relative;
}

.filter-nav li:hover,
.filter-nav li.active {
    color: #000;
}

.filter-nav li.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000;
}

/* 詳細ボックスを普段は隠しておくためのクラス */
.mfp-hide {
    display: none !important;
}

/* ポップアップの黒い箱のデザイン */
.gallery-popup-block {
    position: relative;
    background: #000; /* 背景を黒に変更 */
    padding: 40px 10px 10px;
    width: auto;
    max-width: 1020px;
    margin: 20px auto;
    color: #ccc;
}

/* 情報エリアのタイトル（車種名など） */
.popup-info-area h3  {
    padding: 0.2em 0;
    color: #ffffff; /* ★修正：背景が黒なので、文字は白にしないと見えません */
    font-size: 300% !important;
    font-weight: 700;
    line-height: 50px;
    text-align: center; 
    margin: 0.5em auto 0.5em;
    max-width: 1280px;
}

/* 画像エリアのタイトル */
.popup-img-area h3  {
    padding: 0.2em 0;
    color: #ccc;
    font-size: 150% !important;
    font-weight: 700;
    line-height: 50px;
    text-align: center; 
    margin: 0.5em auto 0.5em;
    max-width: 1000px;
}

/* ★修正：スマホ時に非表示にする設定 */
@media screen and (max-width: 720px) {
    .popup-img-area h3  {
        display: none; 
    }
} /* 

/* 表全体の大枠 */
.spec-table {
    width: 100%;
    background: #fff; /* 表の中だけ白背景 */
    border: 1px solid #ddd;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

/* 1行ごとの設定 */
.spec-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}

.spec-row:last-child {
    border-bottom: none;
}

/* 左側：タイトル */
.spec-row dt {
    width: 20%; /* ★修正：右側70%と合わせて100%になるよう調整 */
    background-color: #f5f5f5;
    font-weight: bold;
    padding: 15px;
    border-right: 1px solid #ddd;
    display: flex;
    align-items: center;
    color: #333;
    box-sizing: border-box;
}

/* 右側：内容 */
.spec-row dd {
    width: 80%;
    padding: 15px;
    margin: 0;
    background-color: #fff;
    box-sizing: border-box;
    word-break: break-all;
}

/* リンクの色 */
.spec-row dd a {
    color: #0066cc;
    text-decoration: underline;
}

/* スマホ対応：画面が狭い時は縦積みに戻す */
@media screen and (max-width: 600px) {
    .spec-row {
        display: block;
    }
    .spec-row dt, 
    .spec-row dd {
        width: 100%;
        border-right: none;
    }
    .spec-row dt {
        border-bottom: 1px solid #eee;
        padding: 10px 15px;
    }
}

/* ポップアップの「×」ボタンのデザイン変更 */
.mfp-close {
    color: #fff !important; /* 背景が黒なので白文字でOK */
    opacity: 1;
    font-size: 40px;
    font-weight: 100;
    top: 0px; 
    right: 0px;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.mfp-close:hover {
    color: #999 !important;
    background: transparent;
}

@media screen and (max-width: 768px) {
    .mfp-close {
        top: -5px;
        right: -5px;
        font-size: 30px;
    }
}
/* ▼▼▼ サムネイルのホバー時に少し暗くする ▼▼▼ */
.gallery-list a img {
    transition: opacity 0.3s ease; /* ふわっと変化させる */
}

.gallery-list a:hover img {
    opacity: 0.5 !important; /* 0.7くらいまで透けさせる */
}

/* もし背景が白で、透けると白くなる場合は、背景を黒にする必要があります */
.gallery-list a {
    background: #000; /* 画像の裏に黒を敷く */
    display: block;
}
/* ▼▼▼ ポップアップ内の次へ・前へボタン（位置固定版） ▼▼▼ */

.popup-nav-btn {
    display: block;
    position: absolute;
    
    /* ★変更点1：高さによる変動を防ぐため、%ではなくpxで固定します */
    /* メイン画像の中心あたりに来るように数値を調整してください */
    top: 150px; 
    
    /* ★変更点2：以前のセンター合わせの計算をリセットします */
    transform: none; 
    
    width: 60px;
    height: 60px;
    
    /* デザイン設定（変更なし） */
    background: rgba(50, 50, 50, 0.8);
    border: 1px solid #fff;
    border-radius: 50%;
    z-index: 9999;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none !important;
}

/* 矢印の描画（変更なし） */
.popup-nav-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}

.popup-nav-btn.prev::after {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.popup-nav-btn.next::after {
    transform: translate(-70%, -50%) rotate(45deg);
}

.popup-nav-btn:hover {
    background: #fff;
    opacity: 1;
}
.popup-nav-btn:hover::after {
    border-color: #000; 
}

/* 左右の位置（変更なし） */
.popup-nav-btn.prev {
    left: 30px;
}

.popup-nav-btn.next {
    right: 30px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
    .popup-nav-btn {
        width: 40px;
        height: 40px;
        
        /* ★変更点3：スマホのメイン画像の高さに合わせて調整 */
        /* 画像の真ん中あたりに来る数値を指定してください */
        top: 50px; 
    }
    
    .popup-nav-btn::after {
        width: 8px;
        height: 8px;
    }
    
    .popup-nav-btn.prev { left: 20px; }
    .popup-nav-btn.next { right: 20px; }
}
/* ▼▼▼ ホバー時に出るタイトルのデザイン ▼▼▼ */

/* リンクエリアを基準にする */
.popup-inline {
    position: relative;
    display: block;
    overflow: hidden; /* 角丸などからはみ出さないように */
}

/* タイトル文字の設定 */
.hover-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    background: rgba(0, 0, 0, 1.0); /* 黒の半透明背景 */
    color: #fff;
    font-size: 8px; /* 文字サイズ */
    font-weight: bold;
    text-align: center;
    padding: 10px 5px;
    box-sizing: border-box;
    line-height: 1.4;
    
    /* 最初は隠しておく */
    opacity: 0;
    transition: opacity 0.3s ease; /* 0.3秒かけてふわっと表示 */
    pointer-events: none; /* 文字の上でもクリックできるようにする */
}

/* ホバーした時だけ表示 */
.popup-inline:hover .hover-title {
    opacity: 1;
}

/* スマホでは常に表示させたい場合（オプション） */
@media screen and (max-width: 768px) {
    .hover-title {
        /* スマホはホバーがないので最初から薄く出しておくか、好みで調整 */
        /* opacity: 1; にすると常に出ます */
    }
}