@charset "utf-8";

/* お正月お知らせbtn */
.news-box { margin-block: 4em 3em;}
.news-box .btn-wrap { text-align: center;}
.btn-newyear { display: inline-block; font-family: "Rounded Mplus 1c"; border: solid 2px #de1425; border-radius: 5px; overflow: hidden;}
.btn-newyear .main-txt { display: block; font-size: 35px; font-weight: bold; padding: 0.4em 3em; color: #000;}
.btn-newyear .sub-txt { display: block; padding-block: 0.4em; font-size: 1.2em; color: #ffffff; font-weight: bold; background: #de1425;}

/* --- common --- */

/*slide*/
.sp-fade-arrows { opacity: 1!important; }
#top .sp-arrow { width: 50px; height: 50px; }

#top .sp-previous-arrow::before { content:""; left: 20em !important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/top/previous.png") no-repeat; background-size: contain; transform: none; }
#top .sp-previous-arrow::after { display: none; }
#top .sp-next-arrow::before { content: ""; left: -20em !important; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/top/next.png") no-repeat; background-size: contain; transform: none; }
#top .sp-next-arrow::after { display: none; }

.sp-buttons { position: absolute!important; padding-top: 0!important; bottom: -2px!important; }
.sp-button { border-color: #ffffff!important; }
.sp-selected-button { background-color: #ffffff!important; }

/*襲来バナー*/
.bn_syurai { margin: 30px auto; padding: 0 15px; }

/* テキストボタン */
.txt_btn { margin-block: 4em; }
.txt_btn ul { gap: 1em; }
.txt_btn li a { padding: 1em 2em; color: #fff; font-size: 1.3em; font-weight: 600; border-radius: 10px; }
.txt_btn li a.about,
.txt_btn li a.reason { color: inherit; }
.txt_btn li a:hover { opacity: 0.7; }
.txt_btn li .about { background: #e1e1e1; }
.txt_btn li .reason { background: #e1e1e1; }
.txt_btn li .usedcar { background: #de1424; }
.txt_btn li .reserve { background: #01b0f1; }
.txt_btn li a span { position: relative; }
.txt_btn li a span::after { position: absolute; content: ""; width: 0; height: 0; right: -55%; top: 25%; 
    border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; }


/* コロナお知らせ */
.corona { margin: 50px auto; }
.corona p a { display: inline-block; padding:10px; font-size:40px; font-weight: bold; color:red; border: 4px solid black; border-radius: 15px;}

/* 台風お知らせ */
#top .top-note { width: 1000px; font-size: 1.7em; font-weight: bold; color: #000; border: solid 15px #f99e00; text-align: center; margin: 2em auto; padding: 1em 0; }
#top .top-note span { font-size: 1.8em; }

/* --- tokuten --- */
#top .tokuten { width: 970px; margin: 30px auto; }
#top .tokuten ul li { width: 48%; position: relative; }
#top .tokuten ul li .ttl { margin: 0; padding: .5em 0; background: #000; color: #fff; font-weight: bold; font-size: 1.5em; text-align: center; }
#top .tokuten ul li .mask { position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    background-color: rgba(0,0,0,0.6);
    border-radius: 5px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;}
#top .tokuten ul li .caption {
    margin-top: 200px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;}
#top .tokuten ul li a:hover .mask { opacity: 1; }

.txt_zozei { margin-top:30px; margin-bottom:30px; }

/* --- zaiko --- */
#zaiko .titleDesc { color:#32a030; }
#zaiko .titleDesc span { padding:7px 0 5px; background:#32a030; }
#zaiko .title { margin-top:25px; background-image:url(../img/top/ball_g.png); }
.zaikoList li { width:22%; }
.zaikoList li:first-child { margin-left:25px; }
.zaikoList li:last-child { margin-right:25px; }
.bnrZaiko { max-width:565px; margin:42px auto 62px; }
#zaiko iframe{margin-left: 26px;}
.sp-image-container { padding:0 5px; }

/* --- flyer --- */
#flyer { background:#fff5cf url(../img/bg.png); }
#flyer .titleDesc { color:#f99e00; }
#flyer .titleDesc span { padding:7px 0 5px; background:#f99e00; }
#flyer .title { margin-top:25px; background-image:url(../img/top/ball_y.png); }
#flyer > div { position:relative; }
#flyer > div:after { content:""; position:absolute; width:401px; height:431px; right:-35px; bottom:0; background:url(../img/top/staff_img.png)no-repeat;}
.flyerList { padding:10px 0 55px; overflow:hidden; display: flex; justify-content: center; gap: 2em; }

/* --- list --- */
.conList { overflow:hidden; padding:55px 0 40px; }
.conList > ul { overflow:hidden; }
.conList > ul li { float:left; width:48%; }
.conList > ul li + li { margin-left:4%; }
.conList + .conList { padding:0; overflow:hidden; }
.conList + .conList > div { float:left; }

.infomation { float: left; width:555px; margin-right:40px; padding:20px; border-top:4px solid #32a02f; background:#e5ffe4; }
.facebook { float: left; width:405px; }
.bnrBlog { max-width:565px; margin:42px auto 62px; }

.fillList { height:316px; overflow:auto; }
.fillList p { padding:12px 5px 10px; border-bottom:1px solid #FFF; }
.infomation .subTitle span:before, .infomation .subTitle span:after { color:#32a02f; }

/* youtube */
#youtube.conList { overflow: visible; }
#youtube { position:relative; z-index:1; margin: 5em 0; padding:30px 0;
    border-top:4px solid #ff6600; background:#ffd0b0 url(../img/bg.png); }
#youtube::before { content: ""; position: absolute; width: 93px; height: 75px; top: -38px; left: 50%;
    margin-left: -46px;
    background: url(../img/sp/youtube_icon.png)top left / 100% no-repeat; }
#youtube h2 { max-width: 320px; margin: -10px auto 30px; padding-right: 30px; }
.youtubeBox li{ width:48%; }

/* 口コミ */
#komi{ margin:4em auto; }
#komi .title { margin-top:25px; background-image:url(../img/top/ball_y.png); }
#komi li{ width:480px; margin:0 10px; }

/* 納車 */
.nousya { margin-top: 9em;}
.link2col li{ width:46%; margin:0 2%; }
.nousya .title { padding:13px 0 20px; line-height:1; background-image:url(../img/top/ball_y.png); }
.nousya .title span { font-size:16px; }
.nousyaBox{ margin:0 0 2em; background: #fff5cf; padding: 40px;}
.nousyaBox li { width:18.5%; margin:0 0 20px; }
.nousyaBox figure { position:relative; width:150px; height:150px; margin:0 auto; border-radius:50%; overflow:hidden; }
.nousyaBox figure img { position:absolute; top:50%; left:50%; max-width:160%; /*height:107px; max-width:initial;*/
    transform: translateY(-50%) translateX(-50%); transform: -webkit- translateY(-50%) translateX(-50%); }
.nousyaBox div { margin-top:10px; overflow:hidden; text-align:center; }
.nousyaBox dl { font-size:0.9em; }
.nousyaBox .date {color:#747474; }
.nousyaBox .name dt, .nousyaBox .cartype dt,
.nousyaBox .date dt, .nousyaBox .comment { display:none; }

.nousya .title span { position: relative;}
.nousya .title span::before, .nousya .title span::after {position: absolute; content: ""; width: 120px; height: 175px; background-repeat: no-repeat; background-size: cover; }
.nousya .title span::before { background-image: url("../img/top/nousya_imgl.png"); right: 115%; bottom:-154%;}
.nousya .title span::after { background-image: url("../img/top/nousya_imgr.png"); left: 115%; bottom: -154%;}

/*ブログ*/
#blog { margin:9em auto 3em;}
#blog .title {background-image: url(../img/top/ball_y.png);}
#blog .title span { position: relative;}
#blog .title span::before, #blog .title span::after {position: absolute; content: ""; width: 192px; height: 152px; background-repeat: no-repeat; background-size: cover; }
#blog .title span::before { background-image: url("../img/top/staff_imgl.png"); right: 98%; bottom:-79%;}
#blog .title span::after { background-image: url("../img/top/staff_imgr.png"); left: 98%; bottom: -79%;}
.blogList li { width:23%; height:230px; margin-bottom:15px; }
.blogList li:not(:nth-child(4n+1)) { margin-left:2.6%; }
.blogList li a { display:block; width:100%; height:100%; position:relative; }
.blogList li a:before { content:''; display:block; position:absolute; top:0; bottom:0; left:0; right:0; background:linear-gradient(to bottom,rgba(0,0,0,0) 52%,rgba(0,0,0,0.66) 100%); z-index:1; }
.blogList li figure { width:100%; height:100%; position:relative; overflow:hidden; }
.blogList li figure img { width:100%; height:100%; object-fit:cover; font-family:'object-fit:cover;'; /*IE対策*/ -webkit-transform:scale(1); transform:scale(1); text-decoration:none; -webkit-transition:all .3s; transition:all .3s; }
.blogList li .summary { position:absolute; bottom:0; left:0; width:100%; padding:10px; color:#fff; z-index:2; }
.blogList li .summary p { margin:0; padding: 0; font-size: 1.1em;}
.blogList li .summary .date { font-size:.867em; line-height:1.4; }

.blogList li a:hover { color:#fff; }
.blogList li a:hover figure img { -webkit-transform:scale(1.05); transform:scale(1.05); }

/*グループ会社*/
.group .title { padding:13px 0 20px; line-height:1; background-image:url(../img/top/ball_r.png); }
.group li:nth-child(n+2){ margin-left: 1em; }
.group li img { border: 1px solid #d9d9d9; }

/*sns*/
.sns { margin-top: 40px;}