@charset "utf-8";

/* --- common --- */


/* --メインスライド------------------------ */
#slide, #carSlider { overflow:hidden; }
#slide { margin-top:14px; }
#slide .slick-slide img, #carSlider .slick-slide img { padding:0 8px; }

.movie { width:min(100%,1000px); margin:min(3%,20px) auto min(5%,40px); }



/* --- maker --- */
#maker { margin-bottom: 2em; }
#maker .maker-list { align-items: center; }
#maker p { margin-bottom: 0; font-size: 2em }
.maker-list li { width: 10%; padding: 0; }
ul.maker-list > li { display:flex; align-items: center; justify-content: center; } 


/* top-nav */
.top-nav {
  display:-webkit-flex;
  display:flex;
  -webkit-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content:space-between;
  -webkit-justify-content:space-between;
  margin-top: -1px;
  background: #ffcc00;
}
.top-nav li { width: 33.333%; border-right:1px solid #fdf9ee; border-bottom:1px solid #fdf9ee; }
.top-nav li:nth-child(3n) { border-right: none; }
.top-nav li a { display: block; padding: 8px 3px; color: #222; font-size: .9em; font-weight: 600; text-align: center; }


/*コントローラー*/
#arrow { position:relative; top:-240px; left:50%; width:1000px; height:100%; margin-left:-500px; }
#arrow .slick-arrow { position:absolute; top:50%; width:50px; height:50px; z-index:999;
  text-indent:-9999px; background:#db3d3d; border:none;
  opacity:1; border-radius:50%; cursor:pointer;
  -webkit-transform:translateY(-50%); transform:translateY(-50%);
  -webkit-transition:all .3s; transition:all .3s; }
#arrow .slick-arrow:hover { opacity:.7; }
#arrow .slick-prev { left:-30px; }
#arrow .slick-next { right:-30px; }
#arrow .slick-arrow:before { content:""; position:absolute; top:50%; right:20px; width:12px; height:12px; margin-top:-6px; opacity:1;
border-top:3px solid #fff; border-right:3px solid #fff;
-webkit-transform:rotate(45deg); transform:rotate(45deg);
}
#arrow .slick-arrow.slick-prev:before { right:auto; left:20px; -webkit-transform:rotate(-135deg); transform:rotate(-135deg); }


/* maker オールメーカー
================================================================== */
.search-marker { padding:40px 0 50px; }
.search-marker-ttl { margin-bottom:1.5em; font-size:1.25rem; text-align:center; }
.search-marker-ttl span { display:inline-block; padding:.05em 2.2em; color:#db3d3d;  font-weight:bold; border-radius:5px; border:3px solid #db3d3d; }

.search-marker-list > li { width:12%; text-align:center; }
.search-marker-list > li a { display:block; }
.search-marker-list > li a:hover { opacity:.7; }

/* medama 今週の目玉車
================================================================== */
.txt-allmaker { margin-block: .5em 2em; font-size: 2.2em; padding: 0.6em 1em .5em; display: inline-block; font-weight: bold; position: relative; transform: translateX(-50%); left: 50%; color: #fff; background: #db3d3d;}
.txt-allmaker::before ,.txt-allmaker::after { position: absolute; content: ""; height: 2px; left: 0; width: 100%; background: #db3d3d;}
.txt-allmaker::before { top: -7px;}
.txt-allmaker::after  { bottom: -7px;}

.medama-area { padding:40px 0 80px; }
.medama-list { margin-bottom:45px; }
.medama-list > li { position:relative; z-index:2; width:24%; }
.medama-list > li:nth-child(n+5) { margin-top:1.3%; }
.medama-list > li:not(:nth-child(4n+1)) { margin-left:1.3%; }

.medama-list a { display:block; height:100%; padding:10px; background:#fff; border-radius:5px; box-shadow: 0 3px 0 rgb(0 0 0 / 10%); }
.medama-list .name { margin:0 0 .6em; padding:.65em .5em; min-height:4.1em; text-align:center; font-size:.95em; line-height:1.4; color:#fff; font-weight:bold; border-radius:10px; background:#db3d3d; position:relative; }
.medama-list .name > em { width:95%; }
.medama-list figure { margin-bottom:10px; text-align:center; }

.medama-list .price { margin:0; padding:0 .8rem; text-align:right; line-height:1; font-size:.875rem; font-weight:bold; }
.medama-list .price span { color:#db3d3d; font-style:italic; }
.medama-list .price em { padding:0 .1em; vertical-align:-.05em; font-size:2.857em; font-style:italic; }

.medama-list .info { margin:10px 0; }
.medama-list .info dt, .medama-list .info dd { margin-bottom:5px; padding:0 5px; font-size:.9em; }
.medama-list .info dt { width:26%; text-align:center; background-color: #ffcc00; color: #ffffff; }
.medama-list .info dd { width:74%; padding-left:1em; }


/* carSlider 車スライド
================================================================== */
#carSlider { background: #be1118; padding: 20px 0 22px; }
#carSlider .slick-slide img { padding: 0 10px; }

/* バナーエリア
================================================================== */
.bnr_list { display: flex; justify-content: center; margin-top: 45px; }

/* 月間売筋ベスト3
================================================================== */
.ranking-area { padding:60px 0; }

.ranking-list { -webkit-box-align:end; align-items:flex-end; }
.ranking-list li { position: relative; width:28%; }
.ranking-list li:nth-child(1) { width:38%; }
.ranking-list li:nth-child(2) { -webkit-box-ordinal-group:0; order:-1; }

.ranking-list .rank { position:absolute; top:0; margin:0; left:5%; }
.ranking-list li:nth-child(1) .rank { left:15%; }

.ranking-list .name { margin:1.4em 0 .6em; text-align:center; font-size:1.25rem; font-weight:bold; }
.ranking-list .name span { display:inline-block; margin-right:.5em; padding:.18em .4em; color:#db3d3d; font-size:.75em; line-height:1; vertical-align:.15em; border:2px solid #db3d3d; }
.ranking-list .more { text-align:center; }

/* webtokuten WEB限定特典
================================================================== */
.webtokuten-area { padding:60px 0; }
.bnr_tokuten { text-align:center; color:#db3d3d; }

/* topic
================================================================== */
.topic { margin-bottom: 40px; }
.topic .btn_topic { text-align: center; font-size: 1.25em; font-weight: bold; line-height: 5; }
.topic li.btn_spocar .bg_img { background-image: url("../img/top/bnr_spocar_img.jpg"); }
.topic li.btn_spocar a { border: 4px solid #00AA9F; }
.topic li.btn_spocar a:hover { border: 4px solid #bff1ed; }
.topic .main_txt { display: inline-block; white-space: nowrap;}
.topic .main_txt .sub_txt { color :#be1118; }

/* btn_area ボタンエリア
================================================================== */
.btn-area { padding:60px 0; }

.btn-list li { width:49%; margin-bottom:2%; }
.btn-list a { position:relative; height:100%;
  display:-webkit-box; display:flex;
   -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column; }
.btn-list .img { overflow:hidden; border-radius:10px; }
.btn-list .label { position:relative; z-index:2; margin-top:-15px; padding:0 1.8em 1.2em;
  color:#fff; text-align:center; border-radius:10px; box-shadow:0 3px 0 rgb(0 0 0 / 10%);
  -webkit-box-flex:1; flex:1; }
.btn-list .label:after { content:""; position:absolute; right:12px; bottom:12px;
  width:0; height:0; border-style: solid; border-width: 0 0 18px 18px;
  border-color: transparent transparent #fff transparent;
  -webkit-transition:all .3s; transition:all .3s; }
.btn-list .ttl { position:relative; margin:0 0 .3em; padding-top:1em;
  color:#fff600; font-size:1.625rem; font-weight:bold; }
.btn-list .ttl .en { position:absolute; top:-.9em; left:0; right:0; font-size:.615em; }
.btn-list .ttl .en span { display:inline-block; padding:0 .75em .1em; color:#fff; font-weight:normal; border:2px solid #fff; }
.btn-list .txt { margin:0; }

.btn-list a:after { content:""; position:absolute; top:100%; left:0; right:0; bottom:0; opacity:.3; border-radius:10px; -webkit-transition:all .5s; transition:all .5s; }
.btn-list a:hover:after { top:0; }
.btn-list a:hover .label:after { right:8px; bottom:8px; }

.btn-list li.reason .label,
.btn-list li.reason a:after { background:#db3d3d; }
.btn-list li.about .label,
.btn-list li.about a:after  { background:#f27200; }
.btn-list li.service .label,
.btn-list li.service a:after { background:#1bbd51; }
.btn-list li.voice .label ,
.btn-list li.voice a:after { background:#3d50db; }

/* flyer 今週のチラシ情報
================================================================== */
.flyer-area { margin-top:60px; margin-bottom:60px; padding:50px; border-radius:10px; border:3px solid #ffd800; }
.flyer-list { max-width:780px; margin:0 auto; }
.flyer-list li { width:48%; }
.flyer-list li a { display:block; border:10px solid #ffd800; border-radius:5px; box-shadow:0 3px 0 rgb(0 0 0 / 10%); }


/* info インフォメーション
================================================================== */
.info-area { padding-top:60px; }
.info-box { padding:1em 1.5em; border-radius:10px; border:3px solid #ffd800; }
.info-box-scroll { overflow-y:auto; height:20em; }
.info-box-scroll p {  margin:0; padding:.8em 1em; border-bottom:1px dashed #ddd; }
.info-box-scroll p strong { line-height:inherit; }
.info-box-scroll p strong:first-child { display:inline-block; width:6em; color:#db3d3d; }

/* blog ブログ
================================================================== */
.blog-area { padding:60px 0 0; }
.blog-list li { width:23%; height:230px; margin-bottom:15px; }
.blog-list li:not(:nth-child(4n+1)) { margin-left:2.6%; }
.blog-list li a { display:block; width:100%; height:100%; position:relative; }
.blog-list li a:before, #instaList > li a::before {
  content:''; display:block;
  position:absolute; top:0; bottom:0; left:0; right:0;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 100%);
  z-index:1;
}
.blog-list li figure { width:100%; height:100%; position:relative; overflow:hidden; }
.blog-list 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; }
.blog-list li .summary { position:absolute; bottom:0; left:0; width:100%; padding:.8em; color:#fff; z-index:2; }
.blog-list li .summary .date { margin:0 0 .5em; line-height:1; font-size:.8125rem; }
.blog-list li .summary .title { margin:0; font-weight:bold; }

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

.bnr{ width:85%; margin:3em auto; text-align:center; }


/* shop 店舗情報
================================================================== */
.shop-area { position:relative; padding-bottom:60px; }
.shop-area:before { content:""; position:absolute; z-index:-1; top:50%; bottom:0; left:0; right:0; background:#fdf9ee; }
.shop-box { border-radius:5px; border:3px solid #ffd800; background:#fff; box-shadow:0 4px 0 rgb(0 0 0 / 5%); }
.shop-map { width:50%; text-align:center; padding:1.2em; background:#ffd800; }
.shop-info { width:50%; padding:1.2em 1.5em; }
.shop-info .txt { margin-bottom:0; }