/* 1536 , 1530 × 735 ,1366 *//* 上記画面幅でも崩れていないか確認 */

/* 修正した場合→各項目の一番下に日付をコメントアウトして追記 */

/*■■　ALL　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

:root{
    --color1: #0977d0;
    --color2: #ebebeb;
    --color3: #2cbded;
	/*--color4: #f5f2e9;*/
	/*--font-jp: 'Noto Sans JP', "游ゴシック Medium", sans-serif;*/
}

.txt_color1, .hvr_txt_color1:hover{color: var(--color1);}
.txt_color2, .hvr_txt_color2:hover{color: var(--color2);}
.txt_color3, .hvr_txt_color3:hover{color: var(--color3);}
/*.txt_color4, .hvr_txt_color4:hover{color: var(--color4);}*/

/* background-color */
.bg_color1, .hvr_bg_color1:hover{background-color: var(--color1);}
.bg_color2, .hvr_bg_color2:hover{background-color: var(--color2);}
.bg_color3, .hvr_bg_color3:hover{background-color: var(--color3);}
/*.bg_color4, .hvr_bg_color4:hover{background-color: var(--color4);}*/

/* border-color ※!important */
.border_color1, .hvr_border_color1:hover{border-color: var(--color1);}
.border_color2, .hvr_border_color2:hover{border-color: var(--color2);}
.border_color3, .hvr_border_color3:hover{border-color: var(--color3);}
/*.border_color4, .hvr_border_color4:hover{border-color: var(--color4);}*/


.f_contact_box .txt_color1 {
    color: #fff!important;
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　FV　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img {
    height: auto!important;
    max-height: none;
    padding-top: 0;
    padding-bottom: 0;
}

#main_img img {
    aspect-ratio: auto;
}

.main_copy {
    width: 35%;
    z-index: 2;
    left: 5%;
    bottom: 7%;
}

/* 写真スライドの配置と余白制御 */
.css-slider-wrap {
    top: 15%;
    left: 0;
    width: 100%;
    overflow: hidden;
    z-index: 2;
}

.slider-track {
    display: flex;
    /* 画像の幅(250px) + 左右余白(10px*2) = 1枚270px × 10枚分 */
    width: calc(270px * 10);
    animation: photo-scroll 25s linear infinite;
}

.slide {
    width: 25vw; /* 画像の横幅を固定 */
    flex-shrink: 0;
    margin: 0 10px; /* 画像同士の余白（左右10pxずつで計20px） */
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes photo-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-270px * 5)); } /* 5枚分動いたらリセット */
}

.car {
    width: 12%;
    bottom: 1.2%;
    z-index: 2;
    left: 40%;
    animation: none !important;
    /* 動きがカクつきすぎる場合は、下記を有効にして少し滑らかにします */
transition: transform 0.08s ease-out;
}

@keyframes car-vibration {
    0% { transform: translateY(0); }
    100% { transform: translateY(-3px); }
}

/* 親要素（コンテナ）の設定 */
.load {
    display: flex;
    width: 200%; /* 画像2枚分で画面200%幅 */
    position: absolute; /* 位置固定用 */
    bottom: -2%;
    left: 0;
    /* 親要素だけを動かす。移動量は「-50%」 */
    animation: scroll-road 15s linear infinite;
}

/* 子要素（画像）の設定 */
.load img {
    width: 50%; /* 200%の親に対して半分（つまり画面幅100%分） */
    height: auto;
    /* img側のアニメーション指定は必ず消してください */
}

/* アニメーションの内容 */
@keyframes scroll-road {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 半分動いた瞬間に0%に戻ることで繋がって見える */
}

/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){
    .css-slider-wrap {
        top: 30%;
    }
        
    .slide {
        width: 90vw; /* 画像の横幅を固定 */
    }

    .main_copy {
        width: 85%;
        z-index: 2;
        left: 5%;
        top: 10%;
    }
    .car {
        width: 36%;
        bottom: 0.4%;
        z-index: 2;
        left: 10%;
        animation: none !important;
        transition: transform 0.08s ease-out;
    }
    
    .load {
        bottom: 0%;
    }
}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　TOP　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}



/*■■　下層ページ　■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/


/* ---------------------------　タブレット　-------------------------- */
@media screen and (max-width: 768px){

}

/* --------------------------　スマホ　-------------------------- */
@media screen and (max-width: 667px){

}