@charset "UTF-8";

#navigation-placeholder{
	
}



/* +++++++++++++++++++++++++　アニメーション */

.effect-b{
	position:relative;
	transform: translateY(7%);
	opacity:0;
	transition: opacity .9s, transform .9s;
}
.effect-b.active{
	position:relative;
	transform: translateY(0);
	opacity:1;
}


@media (min-width: 768px){
	.visible-sp{ display:none !important;}
	.visible-pc{ display:block !important;}
}
@media (max-width: 768px) {
	.visible-sp{ display:block !important;}
	.visible-pc{ display:none !important;}
}

#gblFooter {
    margin-top:0;
}


/* 共通 */
.swiper-button-prev,
.swiper-button-next{
	width:2.6vw;
	height:2.6vw;
	background:#003E9D;
	top: 50%;
	margin-top: -1.3vw;
}
.swiper-button-prev{
	left:-4vw;
}
.swiper-button-next{
	right:-4vw;
}
.swiper-button-prev:after,
.swiper-button-next:after{
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 0;
	height: 0;
}
/* ◀ */
.swiper-button-prev:after{
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 10px solid #fff;
	margin-left: -1px;
}

/* ▶ */
.swiper-button-next:after{
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 10px solid #fff;
	margin-left: 1px;
}

.swiper-button-next.swiper-button-disabled, .swiper-button-prev.swiper-button-disabled {
    opacity:0;
}



/*  mv　※※※※※※※※※※※※※※ */

#mv{
	
}
#mv h1{
	padding:0;
	
}
#mv img{
	width:100%;
}


/*  navigation　※※※※※※※※※※※※※※ */

#navigation-bg{
	padding:2.3vw 0 1.8vw 0;
	background-color:#fff;
}
#navigation{
	position: relative;
	z-index: 10;
	overflow: hidden;
	background-color:#fff;
	/* box-shadow: 0px 15px 15px -6px rgba(0, 56, 153, 0.1); */
	transition: .3s;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; 
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
	
}
#navigation .navigation-ttl{
	color: #003899;
	font-weight:700;
    width:12.5%;
	margin:0;
	padding-left:2vw;
}
#navigation .navigation-ttl .en{
	display: block;
	font-size: clamp(1rem, 1.667vw, 2rem);
	line-height: 1.3;
}
#navigation .navigation-ttl .jp{
	display: block;
	margin-top:0.8em;
	font-size: clamp(0.5rem, 0.729vw, 0.875rem);
}


#navigation .navi-wrapper{
	position:relative;
    width:87.5%;
}

#navigation .navi-wrapper-inner{
	overflow:hidden;
    width:91%;
    margin: 0 auto;
	padding:0.3vw 0 0.7vw 0;
}

#navigation .navi-wrapper img{
    width: 100%;
}
#navigation .navi-wrapper .inner{
	position: relative;
	display:block;
	background-color:#fff;
    width: 86%;
	margin: 0 auto;
	padding-bottom:3%;
}
#navigation .navi-wrapper .inner:after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0.2vw;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid #003899;
}
#navigation .navi-slider .inner {
	padding: 0 5% 2%;
	border: solid 1px #0D46A0;
}

#navigation .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height:2vw;
	margin-top:-0.4vw;
}
#navigation .hustler .logo img { width: 68%; }
#navigation .every .logo img { width: 58%; }
#navigation .jimny .logo img { width: 48%; }
#navigation .jimny-sierra .logo img { width: 55%; }
#navigation .jimny-nomad .logo img { width: 56%; }
#navigation .xbee .logo img { width: 46%; }
#navigation .fronx .logo img { width: 66%; }
#navigation .spacia .logo img { width: 54%; }
#navigation .spacia-base .logo img { width: 40%; }
#navigation .swift .logo img { width: 56%; }
#navigation .wagon-r .logo img { width: 70%; }
#navigation .solio .logo img { width: 54%; }
#navigation .wagon-r-smile .logo img { width: 47%; }
#navigation .alto .logo img { width: 46%; }
#navigation .lapin .logo img { width: 80%; }
#navigation .e-vitara .logo img { width:90%; }

#navigation .navi-slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
#navigation .navi-slider li {
}


#navigation .navi-slider li a{
	display:block;
	transition:.3s;
}
#navigation .navi-slider li a:hover{
	transform: translateY(-2px) scale(1.04);
}



/* fixed ------------------- */

#navigation.is-fixed {
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 99;
}

#navigation.is-fixed .navigation-ttl{
}


#navigation .swiper-button-prev,
#navigation .swiper-button-next{
	top: 50%;
	margin-top: -1.3vw;
}
#navigation .swiper-button-prev{ left:1vw; }
#navigation .swiper-button-next{ right:1vw; }



/*  about　※※※※※※※※※※※※※※ */

#about{
	background: url(../img/about_bg.png) no-repeat center center / cover #ECF3F9;
	padding:0 0 4.5vw;
	text-align:center;
}
#about .ttl{
	position:relative;
	margin:0 0 1.6vw;
	padding-bottom:1.6vw;
	font-size: clamp(2.35rem, 2.5vw, 3.2rem);
	font-weight:700;
	color:#003899;
}
#about .ttl:before{
	content:"";
	position:absolute;
	bottom:0;
	left:50%;
	height:1px;
	width:8%;
	margin-left:-4%;
	background-color:#003899;
}
#about p{
	margin:0;
	padding-top:4vw;
	font-weight:700;
	color:#000;
	line-height:2.6;
	font-size: clamp(1.03rem, 1.09375vw, 1.4rem);
	text-align:center;
}


/*  appeal　※※※※※※※※※※※※※※ */

#appeal{
	margin-bottom:8vw;
}
#appeal li{
	position:relative;
}
#appeal li:nth-child(odd){ padding-right:50%; }
#appeal li:nth-child(even){ padding-left:50%; }

#appeal li:before{
	content:"";
	position:absolute;
	top:0;
	width:50%;
	height:100%;
	background-color:#0C9;
}
#appeal li:nth-child(odd):before{ right:0; }
#appeal li:nth-child(even):before{ left:0; }

#appeal li:nth-child(1):before{ background: url(../img/appeal_ph01.jpg) no-repeat center center / 100% auto #DDE4EC; }
#appeal li:nth-child(2):before{ background: url(../img/appeal_ph02.jpg) no-repeat center center / 100% auto #EBF1F1; }
#appeal li:nth-child(3):before{ background: url(../img/appeal_ph03.jpg) no-repeat center center / 100% auto #D9DADB; }


#appeal .txt-box{
	padding:8vw 6vw;
}

#appeal .txt-box p{
	font-weight:700;
	color:#000;
	line-height:2.6;
	font-size: clamp(0.88rem, 0.9375vw, 1.2rem);
}
#appeal .txt-box .ttl{
	position:relative;
	margin:0;
	border:none;
	padding-left:3.5em;
}
@media screen and (max-width: 1280px) {
	#appeal .txt-box .ttl{
		padding-left:3em;
	}
}


#appeal .txt-box .ttl .num{
	position:absolute;
	top:-0.25em;
	left:0;
	display:block;
	width:1.7em;
	height:1.7em;
	font-size: clamp(2.05rem, 2.1875vw, 2.8rem);
	font-weight:700;
	background-color:#003899;
	color:#fff;
	line-height:1;
	padding:0.1vw;
	text-align:center;
	-js-display: flex; display: -webkit-box; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-justify-content: center; justify-content: center;
	-webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;
	-ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap;
}
#appeal .txt-box .ttl .txt{
	display:block;
	font-size: clamp(1.91rem, 2.03125vw, 2.6rem);
	letter-spacing:-0.04em;
	font-weight:700;
	line-height:1.4;
	color:#003899;
}



/*  car-cat　※※※※※※※※※※※※※※ */

#car-cat-area{
	
}
#car-cat-area .car-cat-box{
	padding:1.5rem 0;
}
#car-cat-area .car-cat-box:nth-of-type(even){
	background-color:#F2F5FA;
}

.car-ttl{
	position:relative;
	background: url(../img/car_ttl_bg.jpg) no-repeat center center / cover #003899;
	color:#fff;
	text-align:center;
	padding:3.6vw 0 4vw;
	margin:0 0 1rem;
}
.car-ttl:after{
	content:"";
	position:absolute;
	left:50%;
	bottom:-1.9vw;
	transform:translateX(-50%);
	width:4vw;
	height:2vw;
	background:#003899;
	clip-path:polygon(50% 100%, 0 0, 100% 0);
}
.car-ttl .en{
	display:block;
	font-size: clamp(2.20rem, 2.34375vw, 3rem);
	font-weight:700;
	color:#fff;
	line-height:1.2;
}
.car-ttl .jp{
	display:block;
	margin-top:.7em;
	font-size: clamp(1.10rem, 1.171875vw, 1.5rem);
	font-weight:700;
	color:#fff;
}
.car-cat-name{
	text-align:center;
	margin-bottom:0;
	margin-top:0;
	border:none;
}
.car-cat-name .en{
	display:block;
	font-size: clamp(2.05rem, 2.1875vw, 2.8rem);
	font-weight:700;
	color:#0D46A0;
	line-height:1.2;
}
.car-cat-name .jp{
	display:block;
	margin-top:.4em;
	font-size: clamp(0.88rem, 0.9375vw, 1.2rem);
	font-weight:700;
	color:#000;
}
#car-cat {
}
#car-cat .car-cat-wrapper{
    width: 100%;
    margin: 0 auto;
	padding: 0 6.5vw;
	overflow:hidden;
}
.car-cat-wrapper .swiper {
    overflow: visible;
}


#car-cat .car-cat-wrapper img{
    width: 100%;
}
#car-cat .car-cat-wrapper .inner{
	display:block;
	background-color:#fff;
    width: 100%;
	margin: 0 auto;
}
#car-cat .car-list-slider {
	margin: 0;
	padding: 0;
	list-style: none;
}
#car-cat .swiper-wrapper {
	padding:1vw 0;
}
#car-cat .car-list-slider li {
	padding:0 0.8vw;
}
#car-cat .car-list-slider li a{
	display:block;
	height:100%;
	padding: 0.7vw 0.7vw 0.2vw;
	background:#fff;
	border:3px solid #0D46A0;
	text-decoration:none;
	text-align:center;
	color:#0D46A0;
	transition:.3s;
}
#car-cat .car-list-slider li a:hover{
	transform: translateY(-4px) scale(1.04);
}

#car-cat .car-list-slider li {
    box-sizing: border-box;
    width: 15%;  /* PC: 100% ÷ 6.5枚 */
}

.car-list-slider .slick-prev{ left: -4vw; }
.car-list-slider .slick-next{ right: -4vw; }

/*----------------*/

#car-cat .car-name{
	display:block;
	color:#003899;
	font-weight:700;
	text-align:center;
	margin:0 0 0.5vw;
}
#car-cat .car-name .en{
	display:block;
	font-size: clamp(1.03rem, 1.09375vw, 1.4rem);
	line-height:1.2;
	margin-bottom:0.05em;
}
#car-cat .car-name .jp{
	display:block;
	font-size: clamp(0.59rem, 0.625vw, 0.8rem);
}

/*----------------*/

#car-cat .car-ph{
	display:block;
	margin-bottom:0.5vw;
}
#car-cat .car-ph img{
	display:block;
	width:100%;
	height:auto;
}

/*----------------*/

#car-cat .car-style{
	display:block;
	color:#003899;
	font-weight:700;
	text-align:center;
}
#car-cat .car-style .en{
	display:block;
	font-size: clamp(1.17rem, 1.25vw, 1.6rem);
	line-height:1.2;
	margin-bottom:0.1em;
}
#car-cat .car-style .jp{
	display:block;
	font-size: clamp(0.66rem, 0.703125vw, 0.9rem);
}









@media screen and (min-width: 769px) {
	#navigation.is-fixed {
		top: 64px;
	}
}

@media screen and (max-width: 768px) {
	#navigation.is-fixed {
		top: 46px;
	}
}
@media screen and (max-width:768px){







	/* 共通 */

	footer {
        margin-top:0px;
    }

	body{
		padding-top:0 !important;
	}
	
	.swiper-button-prev,
	.swiper-button-next{
		width: 6vw;
		height:6vw;
		margin-top: -3vw;
	}
	/* ◀ */
	.swiper-button-prev::after{
		border-top: 3px solid transparent;
		border-bottom: 3px solid transparent;
		border-right: 4px solid #fff;
		margin-left: 0;
	}
	
	/* ▶ */
	.swiper-button-next::after{
		border-top: 3px solid transparent;
		border-bottom: 3px solid transparent;
		border-left: 4px solid #fff;
		margin-left: 0;
	}
	#navigation .swiper-button-next, #navigation .swiper-button-prev {
		margin-top: -3vw;
	}
	
	
	
/*  navigation　※※※※※※※※※※※※※※ */

	#navigation-bg{
		padding:0;
	}
	#navigation{
		padding:0;
		background: #F2F5FA;
		background: linear-gradient(180deg, rgba(242, 245, 250, 1) 0%, rgba(255, 255, 255, 1) 60%);	
	}
	#navigation .navi-wrapper {
		padding:2vw 0;
	}
	#navigation .navigation-ttl{
		width:100%;
		text-align:center;
		margin-top:2vw;
	}
	#navigation .navigation-ttl .en{
		display: block;
		font-size: clamp(1rem, 5.2vw, 1.219rem);
		line-height: 1;
		color: #003899 !important;
	}
	#navigation .navigation-ttl .jp{
		display: block;
		;font-size: clamp(0.5rem, 2.5vw, 0.586rem);
		color: #003899 !important;
	}
	#navigation .navi-wrapper {
		position: relative;
		width: 100%;
	}
	#navigation .navi-wrapper-inner{
		width: 80%;
		margin: 0 auto;
	}
	#navigation .car {
		display:block;
		margin-bottom:1vw;
	}
	#navigation .logo {
		height:1vw;
	}
	#navigation .navi-slider .inner {
		padding: 0 0% 10%;
	}
	#navigation .navi-wrapper .inner:after {
		border-left: 2px solid transparent;
		border-right: 2px solid transparent;
		border-top: 3px solid #003899;
	}
	
	#navigation .navi-slider li a:hover{
		transform: translateY(0px) scale(1);
	}	
	
				
	/* fixed ------------------- */
	
	#navigation .navi-wrapper.is-fixed {
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 99;
		background:#fff;
	}
	#navigation.is-fixed .navigation-ttl{
	}
	#navigation .swiper-button-prev{ left: 3vw; }
	#navigation .swiper-button-next{ right:3vw; }




	/*  about　※※※※※※※※※※※※※※ */
	
	#about{
		background: url(../img/about_bg_sp_top.png) no-repeat center top / 100% auto , url(../img/about_bg_sp_bottom.png) no-repeat center bottom / 100% auto #ECF3F9;
		padding:0 0 10vw 0;
	}
	#about .ttl{
		margin:0 0 3vw;
		padding-bottom:5vw;
		font-size: clamp(1.32rem, 1.40625vw, 1.8rem);
	}
	#about .ttl:before{
		width:12%;
		margin-left:-6%;
	}
	#about p{
		padding-top:5vw;
		line-height:2.2;
		font-size: clamp(0.73rem, 0.78125vw, 1rem);
	}

	
	/*  appeal　※※※※※※※※※※※※※※ */
	
	#appeal{
		
	}
	#appeal li{
		position:relative;
	}
	#appeal li:nth-child(odd){ padding-right:0%; }
	#appeal li:nth-child(even){ padding-left:0%; }
	
	#appeal li:before{
		content:"";
		position:absolute;
		top:inherit;
		bottom:0;
		width:100%;
		height:62vw;
	}
	#appeal .txt-box{
		padding:7vw 6vw 70vw 6vw;
	}
	
	#appeal .txt-box p{
		font-weight:700;
		color:#000;
		line-height:2.2;
		margin:0;
		font-size: clamp(0.88rem, 0.9375vw, 1.2rem);
	}
	#appeal .txt-box .ttl{
		padding-left:12vw;
	}
	#appeal .txt-box .ttl .num{
		top:-0.2em;
		width:1.8em;
		height:1.8em;
		font-size: clamp(1.25rem, 1.328125vw, 1.7rem);
	}
	#appeal .txt-box .ttl .txt{
		display:block;
		font-size: clamp(1.25rem, 1.328125vw, 1.7rem);
		font-weight:700;
		line-height:1.4;
		color:#003899;
	}
	
	

	/*  car-cat　※※※※※※※※※※※※※※ */
	
	#car-cat-area .car-cat-box:first-of-type{
		padding:0.2rem 0 1rem;
	}
	#car-cat-area .car-cat-box{
		padding:1rem 0;
	}
	#car-cat .car-cat-wrapper{
		padding: 0 8vw;
	}
	.car-ttl{
		padding:10vw 0;
	}
	.car-ttl:after{
		bottom:-3.9vw;
		width:8vw;
		height:4vw;
	}
	.car-ttl .en{
		font-size: clamp(1.32rem, 1.40625vw, 1.8rem);
	}
	.car-ttl .jp{
		font-size: clamp(0.73rem, 0.78125vw, 1rem);
	}
	.car-cat-name .en{
		font-size: clamp(1.17rem, 1.25vw, 1.6rem);
	}
	.car-cat-name .jp{
		margin-top:0;
		font-size: clamp(0.59rem, 0.625vw, 0.8rem);
	}

	#car-cat .car-list-slider li {
	}
	.car-list-slider .slick-prev{ left: -6.5vw; }
	.car-list-slider .slick-next{ right: -6.5vw; }
	
	
	#car-cat .car-list-slider li a:hover{
		transform: translateY(0px) scale(1.0);
	}	
	/*----------------*/
	
	#car-cat .car-name{
	}
	#car-cat .car-name .en{
		margin-bottom:0;
		font-size: clamp(0.88rem, 0.9375vw, 1.2rem);
	}
	#car-cat .car-name .jp{
		font-size: clamp(0.59rem, 0.625vw, 0.8rem);
	}
	
	/*----------------*/
	
	
	#car-cat .car-list-slider li a{
		padding:2vw;
	}
		
	#car-cat .car-style{
	}
	#car-cat .car-style .en{
		margin-bottom:0;
		font-size: clamp(0.95rem, 1.015625vw, 1.3rem);
	}
	#car-cat .car-style .jp{
		font-size: clamp(0.73rem, 0.78125vw, 1rem);
	}




	

}