@charset "utf-8";

/* --- common --- */

.subTtl { padding:.2em .75em; margin-bottom:10px; background:#f7f3e9; font-size:1.4em; position:relative; }
.subTtl::before { content:""; position:absolute; top:0; bottom:0; left:0; display:block;
width:4px; height:100%; background:linear-gradient(to bottom, #fec516, #f1153b)}

/* --メインスライド------------------------ */
#slide { margin:10px auto; }
#mv { margin-block:15px; }
#mv video { width:100%; }

/* バナー */
.bnr_col1 { margin:2em auto;}
.bnr-col2 > li { width:49%; }


/* medama 今週の目玉車
================================================================== */
.medamaBox > .data { position:relative; margin:0 auto 50px; }
.medamaBox > .data li { width:24%; margin-bottom:30px; background-color:#FFF; border-radius:5px 5px 0 0; }
.medamaBox > .data li:not(:nth-child(4n+1)) { margin-left:1.3%; }
.medamaBox > .data li > a { opacity:1; color:#222; text-decoration:none; }
.medamaBox > .data li > a:hover { opacity:.6; }
.medamaBox > .data li .mImg {/* height:176px; */overflow:hidden; position:relative; }

.medamaBox .name { position:relative; height:3em; margin:0 0 -1px; padding:0 5px; text-align:center; font-size:18px; line-height:1.2; color:#FFF;  }
.medamaBox .name em {
  display:block; position:absolute; padding:5px; top:50%; left:50%; width:100%;
  transform:translateY(-50%) translateX(-50%);
  -webkit- transform:translateY(-50%) translateX(-50%);
  }
.medamaBox .name span { margin-left:4px; font-size:.8em; font-weight:normal;}
.medamaBox .price { margin:.3em 10px 0; text-align:right; line-height:1.4; }
.medamaBox .price span { margin-left:5px; font-weight:bold; }
.medamaBox .price span.soldout { font-size:1.5em;}
.medamaBox .price span em { font-size:38px; letter-spacing:-.05em; }
.medamaBox dl { padding:10px 10px 0; overflow:hidden; font-size:14px; }
.medamaBox dt { float:left; margin-right:0.3em; padding:1px; width:70px; text-align:center; color:#FFF;}
.medamaBox dd { margin-bottom:5px; padding:0; width:100%; }

#kei.medamaBox ul > li { border:3px solid #f4652f; }
#kei.medamaBox :is(.name,dt) { background:#f4652f; }
#standard.medamaBox ul > li { border:3px solid #3876cb; }
#standard.medamaBox :is(.name,dt) { background:#3876cb; }

p.price_total { margin-top:.3em; padding-right:10px;}
dl.price_cost { padding:0 10px 0 0 !important;}
.pickup-list.total-list dl.price_cost dt { width:auto; margin-right:0 !important; padding:0; color:#333; background:none !important;}
.pickup-list.total-list dl.price_cost dd { margin-left:0; text-align:right; background:none !important;}
.pickup-list.total-list dl.price_cost > * { margin-bottom:0 !important;}

.bnr-contact,
.bnr-zaiko,
.bnr-normalcar { margin-top:25px; }
.bnr-premier {margin-bottom: 25px;}
.bnr-keeper { margin-top:25px; width: 490px; }

/* car_search クルマを探す
================================================================== */
.search-list { margin-bottom:3%;}
.search-list > li > a { display:block; padding:10px 0; font-weight:bold; text-align:center; border:2px solid #f1153b; border-radius:5px; }

.search_recommend li {width:24%;}
.search_recommend p { margin-block:.3em 0; font-size:1.3em; font-weight:bold; }
.search_maker li { width:12%; }
.search_price li {width:32%; }

.search-normal{margin: 0 auto 2.3em; padding: 0.6em 2em 0.5em; width: fit-content; min-width: 320px; background-color: #f4652f; border-radius:5px;}
.search-normal a{position: relative; display: block;   color: #fff; text-align: center; font-size: 1.3em; font-weight: bold; }
.search-normal a:before{content:""; position:absolute; width:0; height:0; top:50%; right:-18px; margin-top:-5px; border-style:solid; border-width:5px 0 5px 7px; border-color:transparent transparent transparent #FFF}
.search-outlet{margin: 0 auto; padding: 0.6em 2em 0.5em; width: fit-content; min-width: 320px;  background-color: #f4652f; border-radius:5px;}
.search-outlet a{position: relative; display: block;  color: #fff; text-align: center; font-size: 1.3em; font-weight: bold;}
.search-outlet a:before{content:""; position:absolute; width:0; height:0; top:50%; right:-18px; margin-top:-5px; border-style:solid; border-width:5px 0 5px 7px; border-color:transparent transparent transparent #FFF}

/* flyer 今週のチラシ情報
================================================================== */
.flyer { position:relative; }
.flyer::before { content:""; display:block; width:100%; height:100%; position:absolute;
top:20px; right:0; left:0; margin:auto; background:#f7f3e9; z-index:-1; }
.flyer > .inner { position:relative; }
.flyer_box > ul > li { width:49%; background-color:#FFF; border-radius:10px; }
.flyer_box > ul > li:nth-child(2n) { margin-left:2%; }
.flyer_box > ul > li:nth-child(n+3) { margin-top:2%; }
.flyer_box > ul > li .name { padding:10px 0; background:#f4652f; color:#fff; border-radius:10px 10px 0 0; }
.flyer_box > ul > li .img { padding:20px; }
.flyer_box > ul > li .img figure { width:48%; }
.flyer_box a { display:block; }
.flyer_box .staff { position:absolute; bottom:-20px; margin:0; }
.flyer_box .staff img { width:80%; }
.flyer_box .staff.img_l { left:0; width:18%; }
.flyer_box .staff.img_r { right:0; width:23%; }
.flyer_box .txt { font-size:24px; }
.flyer_box .txt span { font-size:30px; color:#f1153b; }

/* conLinkarea リンクエリア
================================================================== */
.conLinkarea { padding-top:50px; }
.conLinkarea li { width:48%; }
.conLinkarea li:nth-child(n+3) { margin-top:80px; }
.conLinkarea li .img { margin-top:-30px; width:calc(100% - 30px); z-index:0; }
.conLinkarea li .read { margin-top:-30px; z-index:1; }
.conLinkarea li .read_inner { width:80%; padding:30px; background:#f4652f; border-radius:10px;
	position:relative; }
.conLinkarea li .read_inner::before { content:""; display:block; position:absolute;
	right:10px; bottom:10px; border-style:solid; border-width:0 0 18px 18px;
	border-color:transparent transparent #fff transparent; }
.conLinkarea li .readTtl { font-size:22px; color:#fff607; }
.conLinkarea li .txt { color:#fff; margin:8px 0 0; }
.conLinkarea li .fontEn { width:20%; margin:0; font-size:35px; line-height:.9; color:#cfcfcf; position:relative; }

/* info インフォメーション 新着情報
================================================================== */
.info_ttl { margin-bottom:30px; color:#f1153b; font-size:30px; position:relative; }
.info_ttl::before { content:""; display:block; height:5px; width:100%; margin-bottom:10px;
  background:linear-gradient(to right, #fec516, #f1153b); }
.info_ttl .fontEn { padding-left:10px; color:#cfcfcf; font-size:18px; vertical-align:middle; }
.info_con .scroll { max-height:220px; overflow-y:auto; }
.info_con .scroll p + p { padding-top:15px; border-top:1px solid #c9c9c9; }

/* スタッフブログ */
.blog-list li { position:relative; margin-bottom:20px; width:23%;}
.blog-list::before{ display:block; content:""; width:23%; order:1;}/*flex-betweenの崩れ対策*/
.blog-list::after{ display:block; content:""; width:23%; }

.blog-list li:before {
  content:""; position:relative; z-index:2; display:block; padding-top:100%;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
  }/*liを正方形に&グラデ*/

.blog-list li:hover:before { background:linear-gradient(to bottom, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 100%); }

.blog-list figure {position:absolute; z-index:1; top:0; width:100%; height:100%; }
.blog-list img { width:100%; height:100%; object-fit:cover;}
.blog-list a { position:absolute; z-index:3; top:0; height:100%; width:100%; color:#fff; text-decoration:none; }
.blog-list a p { position:absolute; bottom:0; margin:0; padding:1em; line-height:1.5;}
.blog-list time { display:block; font-size:0.8rem; }

/* インスタグラム */
.instagram { position:relative; }
.instagram .more_btn { position:absolute; top:20px; right:0; margin:0; }
.instagram .more_btn a { display:inline-block; min-width:130px; padding:10px 0; background:#f1153b; color:#fff; font-size:14px; text-align:center; vertical-align:middle; border:2px solid #f1153b; }
.instagram .more_btn a:hover { border:2px solid #f1153b; background:#fff; color:#f1153b; }

#instaList li { margin-bottom:1em; width:19%; }
#instaList li>a { display:block; padding-bottom:100%; position:relative; }
#instaList img { position:absolute; width:100%; height:100%; object-fit:cover; }

/* SNS
================================================================== */
/* tvcm TVCM公開中 */
.tvcm { padding:60px 0; position:relative; }
.tvcm .movie-list > li { width:48%; }
.tvcm .movie-list > li:nth-child(2n) { margin-left:4%; }
.tvcm .movie-list iframe { height:350px; }


/* shop 店舗情報
================================================================== */
.shop_dtl .shop_name { font-size:26px; color:#f1153b; text-align:center; margin-bottom:20px; }
.shop_dtl > li { width:48%; padding:30px 18px; border:2px solid #cfcfcf; }
.shop_dtl .tel span { font-size:24px; font-weight:bold; }
.shop_dtl .map_box { margin-top:30px; }

/* linkage 外部リンク
================================================================== */
.linkage { padding:60px 0; margin-bottom:0; }
.linkage li:nth-child(-n+2) { width:100%; margin-bottom:30px; }
.linkage li:nth-child(n+3) { width:24%; height:80px; }
.linkage li:nth-child(n+3) a { display:block; padding:5%; height:100%; border:2px solid #f1153b; background:#fff; text-align:center; position:relative; }
.linkage li:nth-child(n+3) a::before { content:""; position:absolute; bottom:0; right:0;
	display:block; border-style:solid; border-width:0 0 11px 11px;
	border-color:transparent transparent #f1153b transparent; }
.linkage li:nth-child(n+3) a:hover { border:2px solid #f1153b; background:#fff; }
.linkage li:nth-child(n+3) a span { width:100%; font-size:18px; }