@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.cdnfonts.com/css/gilroy-bold');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700&display=swap');
body{
    font-family: 'Noto Sans JP';
    font-weight:500;
}

main{margin-top:30px;}

.gray_back{background-color:#f2f2f2;}
.white_back{background-color:#fff;}
.w95P{
    width:91.5%;
    margin-inline:auto;
}
.w90P{
    width:90%;
    margin-inline:auto;
}
.w83P{
    width:83%;
    margin-inline:auto;
}
.w80P{
    width:80%;
    margin-inline:auto;
}
.w75P{
    width:75%;
    margin-inline:auto;
}
.w70P{
    width:70%;
    margin-inline:auto;
}
.cb{clear:both;}
.tc{text-align:center;}
.tl{text-align:left;}
.mia{margin-inline:auto;}
.midashi {
    font-weight: bold;
    font-size: 30px;
    font-family: 'Noto Sans JP';
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 18px;
}
.midashi_sub {
    font-family: "lato", sans-serif;
    font-size: 88px;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.fadeUp{animation: fadeUp 3s 1;}
@keyframes fadeUp {
    0% {
        transform: translateY(200px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    0% {
      opacity: 0;
    }  
    10% {
      opacity: 0;
      transform: translateX(1000px);
    }
    70% {
      opacity: 1;
      transform: translateX(0);
    }
}


/*-----------   TOP  -------------*/
.slick-prev:before,
.slick-next:before {
  color: #000 !important;
}

.slick-slide img {max-width:1000px;}

.top_slider img {
  font-size: 2rem;
  font-weight: bold;
  line-height: 100px;
  color: #666;
  margin: 10px;
  text-align: center;
  background-color: #e0e0e0;
}

.buttons {
  display: flex;
  justify-content: center;
}

.buttons .button {
  margin: 8px;
  border: 1px solid #000;
  color: #000;
  padding: 8px;
  text-align: center;
  width: 8em;
  transition: all 300ms ease;
}

.buttons .button:hover {
  cursor: pointer;
  background-color: #000;
  color: #fff;
  transition: all 300ms ease;
}

.slider_top_area{
    max-width:1000px;
    margin:auto;
}

#two {
    display: none;
    opacity: 0;
}

.slick-dots li button {
    font-size: 15px;
    line-height: 0;
    display: block;
    width: 15px;
    height: 15px;
    padding: 5px;
    cursor: pointer;
    border: 0.5px solid #C4C4C4;
    background: #EBEBEB;
    border-radius:20px;
}

.slider_top_area .slick-dots{
    bottom:-48px;
    z-index: 99;
}

.slider_top_area .slick-dots .slick-active button {
    background:#2c4e9a;
    border: 0.5px solid #2c4e9a;
}

.slick_pause{
    position: relative;
    left: 35%;
    bottom: 15px;
    width:0;
}
.slick_start{
    position: relative;
    left: 35%;
    bottom: 15px;
    width:0;
}
.slick-dots li.slick-active button:before {color:transparent;}
.slick-dots li button:before {color:transparent;}

.slick-prev, .slick-next {top:43%;}
.slick-next {
    right: -75px;
    transform: rotate(45deg) skewX(1deg);
    border-top: 3px solid #e5e5e5;
    border-right: 3px solid #e5e5e5;
    width: 60px;
    height: 60px;
}
.slick-next:before {content:none;}

.slick-prev {
    left: -75px;
    transform: rotate(45deg) skewX(1deg);
    border-bottom: 3px solid #e5e5e5;
    border-left: 3px solid #e5e5e5;
    width: 60px;
    height: 60px;
}
.slick-prev:before {content:none;}


/*-----------   newcar  -------------*/
.ms_newcar{
    color:#ebf8ff;
    padding: 45px 160px 45px;
}
.newcar .midashi{
    top: 105px;
    position:absolute;
    height:0;
}

.newcar{
  background: linear-gradient(180deg, #fff 0%, #fff 36.5%, #2257ca 35%, #2257ca 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 0 70px;
  position:relative;
}

.newcar_inner{
    width:1000px;
    margin:0 auto;
}

.newcar li{
    width:230px;
    height:280px;
    border-radius:10px;
    float:left;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);
    background-color: #fff;
    margin-right:26px;
    margin-bottom: 30px;
    position:relative;
     box-shadow: 0px 5px 15px 0px rgba(36, 110, 204, 0.35);
}

.newcar li:hover{
    opacity: 0.9;
}

.newcar li:nth-child(4n){
    margin-right:0;
}

.tenji{
    color: #fff;
    background-color: red;
    border-radius: 10px 0 10px 0;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    width: 93px;
    height: 30px;
    line-height: 30px;
    position:absolute;
    top:0;
}

.newcar_name{
    text-align:center;
    font-size:18px;
    padding:10px 0;
    margin:0 8%;
    border-bottom:2px solid #dedede;
}

.newcar_price{
    text-align:center;
    font-size:15px;
    padding:10px 0;
    margin:0 8%;
}
.newcar_price span{
    font-weight:bold;
    font-size:18px;
}

/*-----------   used car sales  -------------*/
.ms_used{
    color:#ebf8ff;
    padding: 0 160px 30px;
}

.used_car_sales{
    padding: 100px 0 200px;
    position:relative;
}
.used_car_sales .midashi{
    top: 160px;
    height:0;
}
.used_car_sales li{
    width:310px;
    margin-right:35px;
    float:left;
}
.used_car_sales li:last-child{margin-right:0;}
.used_car_sales img:hover{opacity: 0.7; }

/*-----------   news  -------------*/

.ms_news{ color:#ebf8ff;}
.news{
    text-align: center;
    background-color: #fff;
}
.news .midashi{
    text-align:left;
    top:62px;
}
.news_line{border-bottom: 2px solid #eaeaea;margin: 0px 0 28px;}
.news_inner{
    width: 1000px;
    margin-inline: auto;
    text-align:left;
    border-radius:10px;
}
.news_main{
    width: 480px;
    float:left;
    margin-right:40px;
    margin-bottom: 28px;
    border-bottom: 2px solid #eaeaea;
}
.news_main:hover{
    opacity:0.6;
}


.news_main:nth-child(odd){
    margin-right:0;
}
.news_main img{
    float:left;
    margin-bottom:28px;
    width: 180px;
    height:110px;
}
.news_main p{
    width: 269px;
    float:right;
    margin-bottom:5px;
}
.date{
    margin-top:15px;
    text-align:right;
    color:#696969;
    font-size:12px;
}
.news_title_txt{
    width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.news_txt{
    overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
}
.news_title{position: relative;}

.news_list{
    padding: 15px 45px;
    border-radius: 30px;
    position: relative;
    bottom: -65px;
    background-image: url(/index/images/blue_arrow.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 126px 15px;
    transition: 0.3s;
}

/*-----------   YOUTUBE   -------------*/

.yt_midashi{
    color:#fff;
    font-size:30px;
    font-weight:bold;
    width: 800px;
    float: left;
    margin-bottom: 43px;
}
.yt_btn{
    background-color: #5c5c5c;
    color: #fff;
    padding: 12px 48px 12px 28px;
    display: inline-block;
    border-radius: 25px;
    background-image: url(/index/images/yt_arrow.svg);
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: 138px 12.5px;
}
.yt_btn:hover{color:#fff;}

.yt_main{
    margin:0 auto;
    overflow:auto;
    padding:70px 0;
    scrollbar-width: none;
    background-color: #3a3a3a;
}

.yt_main p{
    margin: 13px 0;
    color: #fff;
    font-weight: 300;
}

.yt_area{
    width: 1000px;
    margin-inline:auto;
}
.yt_area img{
    width:100%;
    border-radius:13px;
}
.yt_area .slick-item{margin-right:25px;}

.damd{
    width:800px;
    margin:115px auto;
    display: flex;
}

.arrow_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 15px 0 0;
    position: relative;
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition: all .3s ease;
    cursor: pointer;
    position:relative;
    border:1px solid #fff;
}

.prev-arrow {
    transform: rotate(180deg);
    margin-right: 50px;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:10px;
    height:10px;
    border-right: 2px solid #FFF;
    border-top: 2px solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transform:rotate(45deg);
}


/*-----------   map  -------------*/
.map{height:593px;}


/*-----------   shop  -------------*/
.shop_area{
    overflow: auto;
    width: 950px;
    margin-inline: auto;
    font-weight:bold;
    padding:60px 0;
}

.shop_area .midashi{
    padding-bottom: 30px;
    text-align:center;
}

.shop_img_area{
    width: 50%;
    float: right;
    text-align:right;
    padding-top: 27px;
}

.shop_img_area iframe{
    width:450px;
    height:300px;
}

.shop_img_area img{width: 100%;}

.shop_detail_area{
    width: 45%;
    float:left;
    padding: 0px 0 60px 0px;
    font-size:15px;
    line-height:2.2;
}

.shop_detail_area span p{
    font-size:14px;
    line-height:1.5;
}

.shop_detail_area p{
    border-bottom:1px solid #d1c2c2;
    padding:15px;
    font-weight:400;
    font-size:15px;
}


.shop_tel{
    font-weight:bold;
    font-size:26px;
}

.shop_name{
    font-weight:700;
    font-size:18px;
    margin-top:10px;
    font-weight:bold!important;
}

.shop_border{
    border-top:1px solid ;
    width:80px;
    margin:20px 0;
}

.shop_title{
    padding:50px 0;
    background-color:#f2f2f2;
    width: 98.5%;
}



/*-----------   calendar  -------------*/
#calender {
    display: block;
    margin: 10px auto 0;
    text-align: center;
    padding: 40px 0 0 ;
}
.calender {
    text-align: center;
    /*background: url(../images/dot_back.png?{0|rand:99999})  top center;*/
    background-color:#f5f5f5;
    text-align:left;
    padding: 80px 0 100px;
}

.cal_inner{
    width:800px;
    margin:0 auto;
}

.category-search{
    text-align: center;
    background: #000;
    padding: 50px 0;
    color:#fff;
    padding: 50px 2.5% 50px 0;
}

.ms_cal{
    /* width:88px; */
    margin:0 0 40px;
}

.cal_pt{
    justify-content: center;
    display: flex;
}

.cal{box-shadow: 0 5px 12px rgba(0, 0, 0, 0.22);}

/*---------------Ohirase---------------*/
.br_sp_only{ display: none;}
/*---------------holiday---------------*/
.holiday {
    padding: 20px 0;
    background: #fff;
    text-align: center;
}
.holiday .inner  {
    width: 1055px;
    width: 100%;
    margin: 0 auto;
    border: 4px solid #414f93;
    box-sizing: 2px 2px #000;
    padding: 25px 20px;
    box-sizing: border-box;
}
.holiday img {
    width: 1055px;
    width: 100%;
}


@media (max-width:1024px){
    .holiday {padding: 10px 15px;}
}

@media (max-width:980px){
    /*----------- calendar -----------*/
    .calendar_title{
        padding:20px 0 10px;
        background-color: #f2f2f2;
    }
    .calender {
        padding:-1px 0 160px;
    }
    .cal_pt {padding-top:0px;}
}

@media (max-width:780px){
    #slide{margin-bottom: 10px;}
    #calender img {width: 96%;}
}

@media (max-width:376px){
    .holiday {padding: 25px 0;}
    .holiday .inner  {
        padding: 20px 15px;
        box-sizing: border-box;
    }
}



/**************************************
    スマホレスポンシブ
***************************************/
@media (max-width:480px){

    main{margin-top:75px;}

    p{font-size:14px;}
    .midashi{font-size:24px;}
    h2 { font-size: 50px !important;}

    /*-----------   TOP  -------------*/
    .top_area{
        width:100%!important;
        max-width:100%!important;
        margin:0 auto;
        padding:0!important;
    }

    .top_area img{
        width:100%!important;
        max-width:100%!important;
        margin:0 auto;
        padding:0!important;
    }

    .swiper--wrapper {
        width: 100%;
        height: 300px;
    }
      
    .swiper-slide {
        color: #ffffff;
        width: 100%;
        height: 100%;
        text-align: center;
        text-align: center;
    }
      
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        display:none;
    }

    .slick-slide img {
        display: block;
        width: 38%;
        margin: auto;
    }

    .top_img{width:100%;}
     
    .top .swiper-button-next{display:block;}
    .top .swiper-button-prev{display:block;}

    .slick-next,.slik-prev{display:none!important;}


    /*-----------   新車販売  -------------*/
    .newcar{
        background:#2257ca;
        padding: 10% 5%;
        margin-inline: auto;
    }
    .newcar li {
        width: 48%;
        margin-right: 0;
        height: auto;
        padding-bottom: 12px;
    }
    .newcar li:nth-child(odd){
        margin-right:4%;
    }
    .newcar_name {
        font-size:15px;
    }
    .newcar_price {
        font-size:13px;
        margin: 0 4%;
    }
    .newcar_price span {
        font-size:16px;
    }

    .newcar ul{margin-top:40px;}
    .newcar li img{
        width:100%;
        margin-top: 12px;
    }
    .ms_newcar {
        padding:0;
        color: #2e64d9;
    }
    .newcar .midashi {
        top: 31px;
    }

    .newcar .midashi {
        padding-bottom: 0px;
        position: relative;
        top: -30px;
        color:#fff;
    }

    
    /*-----------   中古車販売  -------------*/
    .used_car_sales img{
        width:80%;
        margin-left:10%;
    }
    .used_car_sales {padding:55px 0;}
    .used_car_sales_midashi{width:100%;}

    .ms_used {padding:0;}

    .used_car_sales .midashi { top: 82px;}

    .used_car_sales ul{margin-top:40px;}
    .used_car_sales li {
        width: 100%;
        margin-right: 0;
        float: none;
        margin-bottom: 25px;
    }

    .used_car_sales .midashi {
        padding-bottom: 0px;
        position: relative;
        top: -30px;
    }

    /*-----------   お知らせ  -------------*/
    .news {padding:0;margin-top: 60px;}

    .news_inner{
        width:90%;
        margin:0 auto 60px;
    }
    .news_main {
        width:100%;
        margin-right:0;
    }

    .news_main p {width:66%;}
    .news_main img {
        width:30%;
        margin-right:4%;
        height:auto;
    }

    .news_list{
        background-color: #2257ca;
        color: #fff;
        padding: 15px 69px;
        border-radius: 30px;
        position: relative;
        top: 0;
        background-image: url(/index/images/arrow1_after.png);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 166px 22px;
        transition: 0.3s;
        left:20%;
        width:208px;
    }
    .news_list:hover{color:#fff;}

    .news_title {
        float:none!important;
    }

    .news .midashi {
        text-align: center;
        top: 27px;
    }

    .news .midashi {
        padding-bottom: 0px;
        position: relative;
        top: -30px;
    }


    /*-----------   youtube  -------------*/
    .yt_area{
        width:90%;
        margin-inline:auto;
    }
    .yt_main {
        padding: 40px 0 0px;
        clear:both;
    }
    .yt_main a {
        width:47%;
        margin-right: 0;
    }
    .yt_main a:nth-child(odd) {margin-right: 6%;}
    .yt_main img {width:100%;}

    .damd {
        width: 90%;
        margin: 50px auto;
    }

    .yt_midashi {
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        width: 100%;
        float: none;
        margin-bottom: 43px;
        text-align: center;
    }


    /*-----------   店舗紹介  -------------*/
    .shop_detail_area {
        clear:both;
        padding: 0px;
        width:100%;
    }
    .shop_area  {
        width:85%;
        margin-inline:auto;
    }
    .shop_img_area {width:100%;}
    .shop_img_area iframe{width:100%;}
    .shop_detail_area p {padding: 5px;}
    .ms_shop {margin: 0 0 15px;}

    .shop_area .midashi {
        padding-bottom: 0px;
        position: relative;
        top: -30px;
    }



    /*-----------   カレンダー  -------------*/
    .cal_pt{
        width:100%;
        margin-inline:auto;
        margin-top: 0;
        display:block
    }
    #cal0{margin-bottom:45px;}
    .cal_inner{width:90%;}
    .calender{text-align:center;}
    .ms_cal {margin:0 auto 15px;}

    .calender .midashi {
        padding-bottom: 0px;
        position: relative;
        top: -45px;
    }

    .calender {padding:50px 0 70px;}


    /*-----------   問合せ -------------*/
    /*
    .contact_inner li {
        clear: both;
        margin-right: 0;
        margin-inline: auto;
        width: 100%;
        margin-bottom: 25px;
    }

    .contact_inner{
        width:100%;
    }*/

  

}