@charset "utf-8";



/* main2024 */

@media only screen and (min-width:641px){
    
    #contents {margin-top:-50px;}
}

.main2024 {
    width:98%;
    max-width:1300px;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.main2024 a {display:inline-block;}
.main2024 a:hover {opacity:0.5;}
.main2024 img {max-width:100%; margin:0; display:block;}

.main2024 .banner-dport {width:24.5%;}
.main2024 ul.carlineup  {width:24.5%;}
.main2024 ul.mainbanner {width:46%;}

@media only screen and (max-width:640px){
    
    .main2024 {
        margin:10px auto;
        width:90%;
    }
    .main2024 .banner-dport {order:3; width:48%; margin-top:25px;}
    .main2024 ul.carlineup  {order:2; width:48%; margin-top:25px;}
    .main2024 ul.mainbanner {order:1; width:100%;}
}



/* くるまふぇあ2024 */
li.kf2024 {position:relative;}
li.kf2024 a {width:160px; padding:3px 0; color:#fff; text-align:center; text-decoration:none; position:absolute; bottom:28px; border-radius:30px; background:#000;}
li.kf2024 a.kf2024-a { left:20%;}
li.kf2024 a.kf2024-b {right:20%;}





/* otherMenu */

ul.otherMenu {
    width:58%;
    margin: 0;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
}
ul.otherMenu li {
    width:32%;
    margin: 0 0 15px;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
}
ul.otherMenu a {
    width:100%;
    padding:70px 0 12px;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
    font-weight: 900;
    color: #252222;
    text-align: center;
    text-decoration: none;
    line-height: 1.5;
    border: solid 3px #252222;
    border-radius:10px;
    transition: .3s;
}
ul.otherMenu a:hover {
    border: solid 3px #ddd;
}
ul.otherMenu a span {
    width:100%;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
ul.otherMenu li:nth-of-type(1) a { background:url("../img/index/otherMenu01.png") top no-repeat; background-size:contain; letter-spacing:0;}
ul.otherMenu li:nth-of-type(2) a { background:url("../img/index/otherMenu02.png") top no-repeat; background-size:contain;}
ul.otherMenu li:nth-of-type(3) a { background:url("../img/index/otherMenu03.png") top no-repeat; background-size:contain;}
ul.otherMenu li:nth-of-type(4) a { background:url("../img/index/otherMenu04.png") top no-repeat; background-size:contain;}
ul.otherMenu li:nth-of-type(5) a { background:url("../img/index/otherMenu05.png") top no-repeat; background-size:contain;}
ul.otherMenu li:nth-of-type(6) a { background:url("../img/index/otherMenu06.png") top no-repeat; background-size:contain;}

ul.otherMenu li:last-of-type {width:100%; margin:0;}
ul.otherMenu li:last-of-type a {padding:0; border:none;}
ul.otherMenu li:last-of-type a img {max-width:100%; transition: .2s;}
ul.otherMenu li:last-of-type a:hover img {opacity:0.6;}

@media only screen and (max-width:640px){
    
    ul.otherMenu {width:100%;}
    ul.otherMenu li {
        width:31%;
        margin:0 0 20px;
    }
    ul.otherMenu a {
        min-height:50px;
        padding:65px 0 10px;
        line-height:1.2;
    }
    ul.otherMenu li:last-of-type {margin:0 0 50px;}
}



/* instagram-all */

.instagram-all {
    width:99%;
    margin:100px auto 80px;
    padding:6px;
    border-radius:15px;
    background:linear-gradient(70deg, #4c64d3, #ff6ab7);
}
.instagram-all > div {
    padding:0 5%;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    border-radius:10px;
    background:#fff;
}
.instagram-all h3 {
    width:250px;
    margin-top:-30px;
    position:relative;
}
.instagram-all ul {
    margin:0 0 0 20px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.instagram-all ul li {
    width:180px;
    margin:0 5px;
    display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
}
.instagram-all ul li a  {
    width:100%;
}
.instagram-all ul li a img {
    max-width:100%;
    transition: .1s;
}
.instagram-all ul li a:hover img {
    margin-top:-15px;
}

@media only screen and (max-width:641px){

    .instagram-all h3 img {
        margin:auto;
        position:absolute; top:0; bottom:0;
    }
}

@media only screen and (max-width:640px){
    
    .instagram-all {
        margin:150px auto 110px;
    }
    .instagram-all > div {
        padding:10px 0;
        display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
        border-radius:10px;
        background:#fff;
    }

    .instagram-all h3 {
        width:440px;
        height:160px;
        margin-top:-173px;
        position:relative;
    }

    .instagram-all ul {
        margin:10px 0 0;
        display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    }
    .instagram-all ul li {
        width:33%;
        margin:0 0 5px;
        display:flex; flex-flow:row wrap; justify-content:center; align-content:center; align-items:center;
    }
}



/* #bossBlog */

#bossBlog {
    width:99%;
    margin: 0 auto 50px;
    padding:50px 0 0;
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-content:flex-end; align-items:flex-end;
    border-radius:15px;
    border:solid 3px #ddd;
    position:relative;
}
#bossBlog::after {
    content: "";
    width: 200px;
    height:230px;
    position:absolute; top:-30px; right:100px;
    background:url("../img/index/bossBlog.png") center no-repeat;
    background-size:contain;
    z-index: 1;
}
#bossBlog h2 {
    width:100%;
    font-size:2rem;
    text-align:center;
}
#bossBlog h2 span {
    display:block;
    color:#e60012;
    font-size:1.2rem;
}
#bossBlog > a {
    width:100%;
    max-width:1120px;
    height:70px;
    margin:20px auto 40px;
    display:block;
	color:#fff;
    font-size:1.125em;
    font-weight:bold;
    line-height:70px;
	text-align:center;
    text-decoration:none;
	background:#252222;
}
#bossBlog ul {
    width:90%;
    margin:20px auto 0;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:stretch; align-items:stretch;
    position:relative;
    z-index:10;
}
#bossBlog ul li {
    width:30%;
    margin: 0;
    padding:0 1%;
}
#bossBlog ul li a {
    width:100%;
    margin: 0 auto;
    display: block;
    text-decoration:none;
    transition: .2s;
}
#bossBlog ul li a:hover {
    opacity: .6;
}
#bossBlog ul li .img {
    width:100%;
    height:200px;
    border-radius:10px;
    background:#ddd;
    position:relative;
    overflow:hidden;
}
#bossBlog ul li .img img {
    max-width:100%;
    margin:auto;
    position:absolute; top:0; bottom:0; left:0; right:0;
}
#bossBlog ul li .text {
    display:flex; flex-flow:row wrap; justify-content:flex-start; align-content:flex-start; align-items:flex-start;
}
#bossBlog ul li .text h3 {padding:0;}
#bossBlog ul li .text h3 a {
    color:#252222;
    font-size:1.1rem;
    letter-spacing:0;
}
#bossBlog ul li .text ul {margin:5px 0;}
#bossBlog ul li .text ul li {color:#252222;}
#bossBlog ul li .text p {display:none;}

#bossBlog ul li .text h3 {order:2;}
#bossBlog ul li .text ul {order:1;}
#bossBlog ul li .text p {order:3;}
#bossBlog ul li .text > a {order:4;}

@media only screen and (max-width:640px){
    
    #bossBlog {
        width:90%;
        margin:0 0 50px;
        padding:40px 5% 0;
    }
    #bossBlog::after {
        width: 260px;
        height:280px;
        top:-60px; right:20px;
    }
    #bossBlog h2 {
        text-align:left;
    }
    #bossBlog > a {width:80%;}
    
    #bossBlog ul {
        width:100%;
        margin:10px auto 0;
    }
    #bossBlog > ul > li {
        width:100%;
        margin: 0 0 30px;
    }
    #bossBlog ul li .img {
        height:280px;
    }
}



/* indexBanner */

.indexBanner {
    width:96%;
    max-width:1120px;
    margin:0 auto;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.indexBanner img {
    max-width:100%;
    margin:0 auto;
}

a.indexBanner-01 {width:66%;}  /* ← 中古車購入「水戸黄門漫遊マラソン」バナー掲載時 width:66%; */
a.indexBanner-02 {width:32.5%;} /* ← 水戸黄門漫遊マラソン */

.indexBanner ul {
    width:100%;
    margin:30px 0 0;
    display:flex; flex-flow:row wrap; justify-content:space-between; align-content:flex-start; align-items:flex-start;
}
.indexBanner ul li {width:16%; margin:0 0 10px;}
.indexBanner ul li a {display:block; border:solid 1px #ddd;}

@media only screen and (max-width:640px){
    
    a.indexBanner-01 , /* 中古車購入 */
    a.indexBanner-02 {width:100%; margin-bottom:30px;} /* 水戸黄門漫遊マラソン */
    
    .indexBanner ul li {width:48.5%; margin:0 0 12px;}
}



/* topText */

.topText {
    width:100%;
    margin:0 auto 50px;
    padding:20px 0;
    border-radius:10px;
    border:solid 3px #ddd;
    position:relative;
}
.topText::after {
    content: "";
    width: 110px;
    height:110px;
    position:absolute; bottom:0; left:40px;
    background:url("../img/index/kksk-02.png") bottom center no-repeat;
    background-size:contain;
}
.topText h2 {
    padding:0 15px 0 180px;
    font-size:1.05rem;
    font-weight:500;
}

@media only screen and (max-width:640px){
    
    .topText {
        width:100%;
        margin:100px auto 50px;
        padding:20px 0;
        border-radius:10px;
        border:solid 3px #ddd;
        position:relative;
    }
    .topText::after {
        content: "";
        width: 120px;
        height:120px;
        margin: auto;
        position:absolute; bottom:auto; top:-115px; left:0; right:0;
        background:url("../img/index/kksk-02.png") bottom center no-repeat;
        background-size:contain;
    }
    .topText h2 {
        padding:0 30px 0;
        font-size:0.9rem;
        letter-spacing:0;
    }
}