@charset "UTF-8";

.index-kvarea{width:100%;height:calc(100vh - 80px);background-color:#6893c5;background-repeat:no-repeat;background-position:center;background-size:cover;position:relative;}

.index-kvarea::before{content:"";display:block;width:100%;height:100%;/*background:rgba(0,0,0,0.3);background: linear-gradient(90deg,rgba(0, 60, 90, 0.7) 0%, rgba(255, 255, 255, 0) 72%, rgba(255, 255, 255, 0) 100%);*/left:0;top:0;position:absolute;}

.kv-contents{width:calc(100% - 5.7vw);max-width:860px;position:relative;z-index:1;margin-left:5.7vw;padding-top:10vw;}

.kv-contents h1 small{font-family:"Oswald",serif;color:#98c0d5;color:#52778b;font-weight:600;display:block;font-size:22px;margin-bottom:40px;letter-spacing:0.1em;}
.kv-contents h1 small{text-shadow:0px 0px 2px #fff,0px 0px 2px #fff}
.kv-contents h1{font-size:75px;font-weight:bold;color:#fff;text-shadow:0px 0px 5px #777,0px 0px 5px #777,0px 0px 5px #777;letter-spacing:8px;line-height:1.2;}
.kv-contents p{color:#fff;text-shadow:0px 0px 5px #777,0px 0px 5px #777,0px 0px 5px #777;font-size:18px;margin-top:30px;line-height:1.2}

.kv-links{display:flex;justify-content:flex-start;align-items:center;margin-top:2vw;}

.kv-links a{display:flex;align-items:center;justify-content:center;width:35%;margin-right:20px;font-weight:bold;font-size:20px;padding:22px;}
.kv-links a img{width:30px;margin-right:10px}
.kv-links a:nth-child(1){background:#fff;}

@media screen and (max-width:1000px){
.kv-contents h1{font-size:7.5vw;}
.kv-contents{padding-top:25vw}
}
@media screen and (max-width:800px){
.index-kvarea{height:calc(100vh - 120px);}
}
@media screen and (max-width:550px){
.kv-contents{padding-top:35vw}
.kv-contents h1{font-size:8.5vw;letter-spacing:0.5}
}




.index-section{padding-top:80px;padding-bottom:80px;position:relative;}
.index-section .inner{position:relative;}
.index-section h2{font-size:30px;font-weight:bold;margin-bottom:30px}
.index-section h2 small{font-family:"Oswald",serif;color:#52778b;font-weight:400;font-size:20px;display:block;margin-bottom:20px;}
.index-section.back-navy h2 small{color:#fff;}
.index-section .toalllist{font-size:16px;font-weight:bold;position:absolute;right:0; top:50px;color:#52778b;}
.index-section.back-navy .toalllist{color:#fff;}

@media screen and (max-width:1000px){
.index-section h2{font-size:25px;}
.index-section{padding-top:50px;padding-bottom:50px;}
}

@media screen and (max-width:768px){
.index-section h2{margin-bottom:15px;}
.kv-links{flex-wrap:wrap;margin-top:40px}
.kv-links a{width:60%;margin:0 auto;margin-bottom:10px;min-width:300px}
.index-section .toalllist{top:initial;bottom:-1em;display:block;}
.index-section{padding-bottom:70px}
}




.vehicles-list .inner > div > ul{display:flex;flex-wrap:wrap;justify-content:space-between;justify-content:flex-start;}
.vehicles-list .inner > div > ul > li{display:block;width:calc((100% - 60px) / 4);background:#fff;margin-right:20px;}
.vehicles-list .inner > div > ul > li:nth-child(4){margin-right:0}
.vehicles-list .inner > div > ul > li a{display:block;height:100%;width:100%;}
.vehicles-list .inner > div > ul > li a figure{width:100%;height:160px;position:relative;}
.vehicles-list .inner > div > ul > li a figure .badge-new{position:absolute;left:0px;bottom:0px;background:#df9300;color:#fff;padding:5px 10px;font-size:0.8em;font-weight:500;}
.vehicles-list .inner > div > ul > li a figure img{width:100%;height:100%;object-fit:cover;}
.vehicles-list .inner > div > ul > li a div{padding:20px}
.vehicles-list .inner > div > ul > li a h3{font-size:18px;font-weight:bold;margin-bottom:20px}
.vehicles-list .inner > div > ul > li a h3 small{font-size:14px;font-weight:400;display:block;margin-bottom:10px;}
.vehicles-list .inner > div > ul > li a ul li{display:block;font-weight:bold;font-size:14px;color:#666;margin-bottom:15px;}
.vehicles-list .inner > div > ul > li a > div > span{display:block;text-align:right;font-weight:bold;font-size:18px;color:#52778b;padding-right:5px;transition:0.3s;}
.vehicles-list .inner > div > ul > li a:hover > div > span{padding-right:0px}

@media screen and (max-width:1000px){
.index-section01 .inner > div > ul > li{display:block;width:100%;margin-bottom:5px;margin-right:0}
.index-section01 .inner > div > ul > li a{display:flex;align-items:center;}
.index-section01 .inner > div > ul > li a figure{width:150px;height:100px}
.index-section01 .inner > div > ul > li a div{width:calc(100% - 150px);display:flex;flex-wrap:wrap;}
.index-section01 .inner > div > ul > li a div h3{margin-right:50px;}
.index-section01 .inner > div > ul > li a div > span{display:none;}
.index-section01 .toalllist{bottom:-2em;}
}
@media screen and (max-width:768px){
.index-section01 h2{margin-bottom:30px}
.index-section01 .inner > div > ul > li a div{align-items:center;}
.index-section01 .inner > div > ul > li a h3{margin-bottom:20px}
}
@media screen and (max-width:550px){
.index-section01 .inner > div > ul > li a{align-items:center}
.index-section01 .inner > div > ul > li a figure{height:unset;flex-shrink: 0;align-self:center;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.index-section01 .inner > div > ul > li a figure img{height:auto!important;display:block;object-fit:contain;width:auto;max-height:150px}
.index-section01 .inner > div > ul > li a div{padding:10px 20px}
.index-section01 .inner > div > ul > li a ul li{margin-bottom:5px}
}

.index-section02 ul{display:flex;justify-content:flex-start;align-items:center; flex-wrap:wrap;}
.index-section02 ul li{width:calc((100% - 40px) / 3);margin-right:20px;box-shadow:1px 0px 5px #ccc;margin-bottom:25px}
.index-section02 ul li:nth-child(3n){margin-right:0}
.index-section02 ul li figure{width:100%; height:160px;}
.index-section02 ul li figure img{width:100%;height:100%;object-fit:cover;}
.index-section02 ul li div{padding:30px 20px;color:#999;}
.index-section02 ul li div h3{font-weight:bold;font-size:18px;margin-bottom:20px;color:#000;position:relative;padding-right:1em;line-height:1.4}
.index-section02 ul li div h3::after{content:"→";color:#52778b;position:absolute;right:-5px;transition:0.3s}
.index-section02 ul li:hover div h3::after{right:-10px;}

@media screen and (max-width:1000px){
.index-section02 ul{align-items:stretch;}
}
@media screen and (max-width:900px){
.index-section02 ul li:nth-child(3n){margin-right:initial}
.index-section02 ul li{width:calc((100% - 20px) / 2);margin-right:0px;box-shadow:1px 0px 5px #ccc;margin-bottom:25px}
.index-section02 ul li:nth-child(odd){margin-right:20px}
}
@media screen and (max-width:768px){
.index-section02 ul li div h3{font-size:14px}
.index-section02 ul li div{padding:15px 15px}
.index-section02 ul li div h3{margin-bottom:10px}
.index-section02 ul li div{font-size:13px}
.index-section02 ul li:nth-child(odd){margin-right:10px;}
.index-section02 h2{margin-bottom:30px}
}



.index-section03 {padding-top:0;padding-bottom:0}
.index-section03 ul{width:100%;max-width:1920px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;;align-items:center;}
.index-section03 ul li {width:49.5%;height:430px;margin-bottom:10px}
.index-section03 ul li a{display:block;width:100%;height:100%;padding:80px 60px;background-size:auto 100%;background-repeat:no-repeat;background-position:center;position:relative;}
.index-section03 ul li a div{position:relative;z-index:+1;font-size:18px;font-weight:bold}
.index-section03 ul li a::before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%}
.index-section03 ul li:nth-child(1) a::before,.index-section03 ul li:nth-child(2) a::before{background:rgba(1,35,74,0.3);background: linear-gradient(90deg,rgba(1, 35, 74, 1) 0%, rgba(1,35,74, 0.7) 25%, rgba(255, 255, 255, 0) 100%);}
.index-section03 ul li:nth-child(3) a::before,.index-section03 ul li:nth-child(4) a::before{background:rgba(255,255,255,0.3);background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 100%);}
.index-section03 ul li:nth-child(1) a div,.index-section03 ul li:nth-child(2) a div,
.index-section03 ul li:nth-child(1) a div h2 small,.index-section03 ul li:nth-child(2) a div h2 small
{color:#fff;}
.index-section03 ul li:nth-child(3) a div,.index-section03 ul li:nth-child(4) a div,
.index-section03 ul li:nth-child(3) a div h2 small,.index-section03 ul li:nth-child(4) a div h2 small
{color:#000;}
.index-section03 ul li a div > span{transition:0.3s;display:flex;align-items:center;position:relative;}
.index-section03 ul li a div > span::after{content:"→";position:absolute;transition:0.3s}
.index-section03 ul li a div > span{display:block;padding:20px 30px;margin-top:40px;border-width:1px;border-style:solid;width:fit-content;padding-right:40px;}
.index-section03 ul li:nth-child(1) a div > span,.index-section03 ul li:nth-child(2) a div > span{border-color:#fff;}
.index-section03 ul li:nth-child(3) a div > span,.index-section03 ul li:nth-child(4) a div > span{border-color:#000;}
.index-section03 ul li:nth-child(1) a:hover div > span,.index-section03 ul li:nth-child(2) a:hover div > span{background:#fff;color:#01234a}
.index-section03 ul li:nth-child(3) a:hover div > span,.index-section03 ul li:nth-child(4) a:hover div > span{background:#000;color:#fff;}

.index-section03 ul li:nth-child(1) a:hover div > span::after,
.index-section03 ul li:nth-child(2) a:hover div > span::after,
.index-section03 ul li:nth-child(3) a:hover div > span::after,
.index-section03 ul li:nth-child(4) a:hover div > span::after
{margin-left:5px}


@media screen and (max-width:900px){
.index-section03 ul li{width:100%;height:auto;}
.index-section03 ul li a{padding:40px 30px;background-size:cover;}
}
@media screen and (max-width:768px){
.index-section03 ul li a div{font-size:14px;font-weight:500}
.index-section03 ul li a div > span{font-size:13px;padding:10px 20px;margin-top:20px}
.index-section03 ul li a{padding:20px;}
}