/*■■ header ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    padding: 20px 20px 0 50px;
}

header::before {
    z-index: 6;
}

#header #pc_nav a {
    color: white;
}

#header.active {
    padding-bottom: 20px;
}


#header.active #pc_nav a {
    color: var(--normal);
}

/* タブレット */
@media screen and (max-width: 768px){
    #header .logo_wrap {
        width: 170px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    #header .logo_wrap {
        width: 140px;
    }
}


/*■■ 全体 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* タブレット */
@media screen and (max-width: 768px){
    body {
        font-size: 16px;
    }
}

/* スマホ */
@media screen and (max-width: 667px){
    body {
        font-size: 14px;
    }
    
    #sp_nav {
            background-color: #ffe8a3;
    }
}

/*■■ top ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#main_img {
    height: 910px;
}

.fv_bg {
    background-color: #271c02;
    width: 100vw;
    height: 100vw;
    mix-blend-mode: multiply;
    left: 0;
    top: 0;
    position: absolute;
    z-index: 2;
    opacity: 0.4;
}

.city::before {
	position: absolute;
	content: "";
	left: 0;
	bottom: 0;
	width: 100%;
	height: 34vh;
	background-image: url("/Files/img/city.png");
	background-size: auto 100%;
	background-position-y: 0;
	background-position-x: 0;
	background-repeat: repeat-x;
	animation: loop 90s linear infinite;
	z-index: 2;
}
@keyframes loop {
	0% {background-position-x: 0;}
	100% {background-position-x: -2000px;}
}

.car {
    width: 22%;
    height: auto;
    min-width: 410px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
     position: relative; /* アニメーションが効くように */
}

.anim_type2{
    position: absolute; /* 親を基準に動かす場合はこちらの方が安定 */
   /*  animation: anim_type2_pc 0.4s steps(2) infinite alternate; */
/*     position: relative; */
	animation-name: anim_type2_pc;
	animation-iteration-count: infinite;
	animation-duration: 0.1s;
	animation-direction: alternate;
	animation-timing-function: steps(2);
	transition-duration: .3s;
	transition-property: transform;
}

@keyframes anim_type2_pc {
	0% {bottom: 4%;}
	100% {bottom: 4.5%;}
}

.main_copy {
    width: 50%;
    height: auto;
    min-width: 850px;
    top: 27%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

#con_nav {
    background-image: linear-gradient(180deg, rgba(253, 180, 97, 1), rgba(255, 225, 83, 1));
}

#con_nav ul {
    margin-top: -20px;
}

#top_contents2.bg_posi_c-c {
    background-position: top left 74%;
}

#top_contents2 .con2_bg {
  background-image: linear-gradient(90deg, rgba(120, 70, 40, 1), rgba(123, 106, 28, 1));
}

#top_contents3 .con3_bg {
    background-image: linear-gradient(180deg, rgba(253, 180, 97, 1), rgba(255, 225, 83, 1));
}

/* タブレット */
@media screen and (max-width: 768px){
    #main_img {
        height: 840px;
    }
    
    .main_img02 {
        background-position: top left 57%;
    }
    
    
    .main_img03 {
        background-position: top left 43%;
    }
    .fv_bg {
        height: 100vh;
    }

    .city::before {
        height: 32vh;
    }
    
    .car {
        width: 49%;
        min-width: 380px;
    }
    
    .anim_type2 {
        /* animation: anim_type2_tb 0.4s steps(2) infinite alternate; */
        position: absolute; /* 親を基準に動かす場合はこちらの方が安定 */
        animation-name: anim_type2_pc;
        animation-iteration-count: infinite;
        animation-duration: 0.1s;
        animation-direction: alternate;
        animation-timing-function: steps(2);
        transition-duration: .3s;
        transition-property: transform;
    }
    
    .main_copy {
        width: 87%;
        top: 36%;
        min-width: 660px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #main_img {
        height: 85vh;
    }
    
    .main_img01 {
        background-position: top left 41%;
    }
    
    .main_img02 {
        background-position: top left 64%;
    }
    
    .main_img03 {
        background-position: top left 36%;
    }
    
    .city::before {
        height: 22vh;
    }
    
    .car {
    width: 24%;
    min-width: 230px;
}

    
    .main_copy {
        width: 68%;
        top: 28%;
        min-width: 230px;
    }
    
    
    #con_nav {
        padding-top: 4%;
        padding-bottom: 260px;
    }
    
    #top_contents1 .info_title {
        top: calc(-60vw - 91px);
    }
    
    #top_contents2 .con2_bg {
        background-image: linear-gradient(180deg, rgb(147 55 5), rgb(49 44 1));
    }
    
    #top_contents2.bg_posi_c-c {
        background-position: top left 68%;
    }
}

/*■■ cms ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.v_type3 .cate_box{border: 1px solid var(--color1);}
.v_type3 .box_title1{color: var(--color1);}

#page_title .title_wrap h2 {
    font-size: 35px;
}

#page_title .title_img::before {
 background-color: #271c02;
 width: 100vw;
 height: 100vw;
}

#page_title .sub_title {
    color: var(--color2);
}

.cate_list li a {
    color: white;
}

#cms_6-b .btn_container .txt_color1{
    color: #06C755;
}

#cms_6-b .btn_container .hvr_txt_white:hover{
    color: white;
}

#cms_6-b .btn_container .bg_color1,#cms_6-b .btn_container .hvr_bg_color1:hover {
    background-color: #06C755;
}

#cms_6-b .btn_container .hvr_border_color1:hover {
    border-color: #06C755;
}

#page05 .cate_box .box_img {
    width: 13.66667% !important;
}

/* タブレット */
@media screen and (max-width: 768px){
    #page_title {
        margin-bottom: 70px;
    }
    
    .cate_list {
        margin-bottom: 70px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #page_title {
        margin-bottom: 50px;
    }
    
    #page_title .title_wrap h2 {
    font-size: 25px;
}

    .cate_list {
        margin-bottom: 70px;
    }
}


/*■■ footer ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
#footer_info .info_title {
    color: white;
}

.footer_tel .txt_color3 {
    color: white;
}

.footer_bg {
    background-image: linear-gradient(117deg, rgba(253, 180, 97, 1), rgba(255, 225, 83, 1));
}


/* タブレット */
@media screen and (max-width: 768px){
    #footer_info .grid_12_tb {
        height: 400px;
    }
}
/* スマホ */
@media screen and (max-width: 667px){
    #footer_info .grid_12_tb {
        height: 220px;;
    }
}