@charset "utf-8";

/* --- common --- */
#top #contents { padding-bottom:60px; font-size:14px; line-height:1.7; }
#flyer .conTitle { background:url(../img/top/ttl_bg_flyer.png) no-repeat 0; }
#news .conTitle { background:url(../img/top/ttl-news.svg) no-repeat 0; }
.blogBox .conTitle { background:url(../img/top/ttl-blog.svg) no-repeat 0; }
.shop-info .conTitle { padding: 5px 0 2px 52px; color: #533c34; font-size: 22px; background: url(../img/common/logomark.svg) no-repeat 6px 0 / 34px; }

/*CM*/
#mov {margin-top: 2em;}
#mov>video { width: 640px; max-width:100%;}

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

.top-slider_sq { margin-bottom: 1.5em;}

/* 閲覧履歴、お気に入り */
.cookieData { margin-block: 3em; line-height: 1.2; }
.cookieData .slick-list { padding: 0 8% !important; }
.cookieData :where(.slick-list::before, .slick-list::after) { z-index: 1; content: ''; display: block; position: absolute; width: 8%; top: 0; bottom: 0; left: 0; }
.cookieData .slick-list::after { left: auto; right: 0; }
.cookieData .slick-arrow { transition: opacity .2s; }
.cookieData .slick-prev { left: 5%; }
.cookieData .slick-next { right: 5%; }
.cookieData .slick-disabled { opacity: 0; cursor: unset; }
.cookieData a { display: block; padding: 5px; text-decoration: none; transition: opacity .2s; }
.cookieData a:hover { opacity: .8; color: inherit; }
.cookieData p { margin: 0; }
.cookieData .img { position: relative; line-height: 1; }
.cookieData .price { font-size: 1.2em; position: absolute; right: 5%; bottom: 5%; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff; }
.cookieData .name { font-size: 1.2em; line-height: 1.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 動画 */
.mv_con { margin-bottom: 2em;}

/* バナー（GWお知らせ） */
.bnr_gw { margin-top: 60px; }
.tokuten { margin-bottom: 0 !important;}

/* 検索リンクボタン */
.btn-search { flex-wrap: nowrap; gap: 2em; margin-top: 2em; }

/* お客様へ */
.attention {background: #fffdc4; padding: 20px 55px; margin: 2.5em auto 1.5em;}
.attention h3 {font-size: 2em; border-bottom: solid 2px #000;}
.attention p {font-size: 1.5em;}
.attention .bold {font-size: 1.5em; color: #e40112;}

/* コントローラー */
#arrow { position:relative; top:-240px; left:50%; width:1000px; height:100%; margin-left:-500px; }
.slick-prev { left:-41px; }
.slick-next { right:-41px; }

.top-slider .slick-slide { opacity:.7; }
.top-slider .slick-slide.slick-current { opacity:1; }

/* medama 今週の目玉車
================================================================== */
.ttl-medama { margin-top:5em; margin-bottom: 3em; padding:2.5em 0 3em; background-color: #7dc6b9; background-image: repeating-linear-gradient(-45deg,rgba(255,255,255,.08), rgba(255,255,255,.08) 7px,transparent 0, transparent 16px); }
.ttl-medama.used { background-color: #f5a547;}
.ttl-medama img { max-height: 125px; margin-inline: auto;}
.medama-lead { margin-bottom: 2em; font-size: 1.3em; text-align: center; font-weight: bold; color: #4e362e;}
.medama-lead .big { font-size: 1.2em; color: #da263c;}

.medama-area { padding:0 0 80px; margin-top: 5em; }

.medama-list { display:flex; flex-wrap:wrap; margin: 40px auto; height: auto; animation-duration: 1s; gap: 2em .6%; overflow:visible; }

@keyframes slideDown {
  0%   { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}
.medama-list > li { width: 24.5%; }


.medama-box { padding: 5px; }
.medama-box img { max-width: 100%; }
.medama-box .slick-slide { opacity:1; }
.medama-box a { display:flex; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column;
  width: 100%; height: 100%; padding: 10px 10px 15px; color: #4e362e;
  background: #fff;  border:2px solid #ddd; border-top:4px solid #f5a547; opacity: 1; text-decoration: none;
  transition:all .5s; -webkit-transition:all .5s; }
.medama-box a:hover { border-color:#f5a547; }
.medama-box a .name { margin:.8em 0 .5em; -webkit-box-flex:1; flex:1; padding-bottom:.3em; min-height: 3.25em; font-size:16px; font-weight: bold; border-bottom: 2px solid #533c34; line-height:1.4; }
.medama-box a .mDatas { margin-top: auto; -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column;
  -webkit-box-pack: justify; justify-content: space-between; }
.medama-box a .price { margin:.8em 0 0; font-weight:bold; text-align:right; line-height:1; }
.medama-box a .price em { margin:0 5px 0 8px; font-size:40px; font-weight: bold; font-style:italic; color: #da263c; }
.medama-box a table { width:100%; font-size: 13px; font-weight:bold; border-collapse:separate; border-spacing:0 5px; }
.medama-box a table  tr > * { padding:2px 0 0 5px; }
.medama-box a table th { text-align: center; background: #fac586; white-space: nowrap; }
.medama-box figure { position:relative; }/* 「限定1台」マーク非表示中
.medama-box figure.img::before { position:absolute; top:0; left:0; margin:1%; padding-bottom:25%; width:25%; content:''; background: url(/img/common/badge-limit1.svg) no-repeat center/contain; }*/
.medama-box figure img.frame { position: absolute; top: 0; left: 0;}

.medama-box .thanks { position:absolute; top:100px; left:0; width:100%; padding:2px 10px 1px; font-size:18px; font-weight:bold; line-height:1.5; text-align:center; color:#FFF; background:#7bc8b9; }
.medama-box .settle { position:absolute; top:-20px; left:5px; z-index:99; }

.medama-box .data { margin:15px 0 0; overflow:hidden; font-size:13px; }
.medama-box .data > div { display:flex; }
.medama-box .data :is(dt, dd) { margin-bottom:5px; }
.medama-box .data dt { padding:0 5px; text-align:center; color:#FFF; background:#f5a547; }
.medama-box .data dd { margin-left:5px; }

.search_con { margin-top: 3em; margin-bottom:0; }
.searchBox { margin-bottom: 2em;}

.flyer-list .sname { margin:0 0 .3em; font-size:1.5em; color:#60b6a5;; text-align:center; }

/* スライド下ボタン */
.btn-box { gap: 1em; margin-top: 3em; }

/* webtokuten WEB限定特典
================================================================== */
.bnr-reserve { padding-top: 30px;}

/* btn_price
================================================================== */
.bnr-price-area{margin-top: -3.5em;}
.bnr-price{width: 49%;}

.bnr-wrap { margin-top: 2em; }

/* btn_area ボタンエリア
================================================================== */
.webtokuten-area + .btn-area.bg-yel { background:#fff8d3; }
.btn-area { padding:60px 0 55px; }

.btn-list li { width:49%; margin-bottom:2%; }
.btn-list a { position:relative; height:100%; color:#533d35; font-weight:bold; text-decoration:none; border-top:4px solid #f5a547; background:#fff;
  display:-webkit-box; display:flex;
   -webkit-box-orient:vertical; -webkit-box-direction:normal; flex-direction:column;
   -webkit-transition:all .3s; transition:all .3s; }
.btn-list .img { overflow:hidden; }
.btn-list .label { position:relative; z-index:2; padding:2.2em 1.8em 2em; text-align:center;
  -webkit-box-flex:1; flex:1; }
.btn-list .ttl { position:relative; margin:0 0 .8em; font-size:1.7857rem; line-height:1.4; letter-spacing:.05em; }
.btn-list .ttl .en { display:block; color:#7bc8b9; font-size:.64em; letter-spacing:.05em }
.btn-list .txt { margin:0; font-size:1.0714rem; }

.btn-list .label:before {
  content:""; position:absolute; top:-45px; left:0; right:0; width:60px; height:60px; margin:0 auto;
  border-radius:50%; background:#f5a547 no-repeat center / 80%; }

.btn-list .label:after {
  content:""; position:absolute; bottom:1em; right:1em; width:30px; height:30px;
  border-radius:50%; background:#f5a547 url(../img/common/icon-arrow-wht.svg) no-repeat center / 50%; }
.btn-list a:hover { background:#e3f9f5; }

.btn-list .reason .label:before { background-image:url(../img/common/icon-reason-wht.svg); }
.btn-list .about .label:before { background-image:url(../img/common/icon-about-wht.svg); }
.btn-list .support .label:before { background-image:url(../img/common/icon-sprout-wht.svg); }
.btn-list .voice .label:before { background-image:url(../img/common/icon-voice-wht.svg); }

/* 新着情報
--------------------------------------------------- */
.info-area { padding:60px 0; }

#customer { position:relative; margin-bottom:60px; }
#customer .btn_customer { position:absolute; top:6px; right:0; margin:0; }
#customer .conTitle { margin-bottom:32px; background: url(../img/top/ttl-voice.svg) no-repeat 0; }
.voice_list li { margin-bottom:0; }

#news { position:relative; }
#news .btn_news { position:absolute; top:6px; right:0; margin:0; }
.article_list { height:200px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.article_list li { padding:8px 0; padding-left:6.5em; text-indent:-6.5em; color:#533c34; border-bottom:1px dashed #ddd; }
.article_list li span { padding-right:2em; font-weight:bold; }
.article_list li a { color:#533c34; }
.article_list li a:hover { text-decoration:none; }

.information { margin-bottom:60px; }
.information #news { width:56%; }
.information .newsBox { padding:24px 30px; border:5px solid #533c34; }
.information .fbBox { width:40%; margin-left: 20px; }
.blogBox { padding:27px 0; position: relative; }
.blogBox .btn_blog { position:absolute; top:30px; right:0; margin:0; }
.blogBox .blogList li { width: 23%; height: 230px; margin-bottom: 15px; }
.blogBox .blogList li:not(:nth-child(4n+1)) { margin-left: 2.6%; }
.blogBox .blogList li a { display: block; width: 100%; height: 100%; position: relative; }
.blogBox .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;
}
.blogBox .blogList li figure { width: 100%; height: 100%; position: relative; overflow: hidden; }
.blogBox .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; }
.blogBox .blogList li .summary { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; color: #fff; z-index: 2; }
.blogBox .blogList li .summary p { margin: 0; }

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

.shop-area { position:relative; z-index:2; padding-bottom:70px; }
.shop-area:before { content:""; position:absolute; top:5%; left:0; right:0; z-index:-1; padding-top:15%; }
.shop-info { width:37%; }
.shop-gmap { width:60%; }

/* 初売り--------------------------------------------------- */
.hatsuuri { margin-top: 30px;  }


/* info_box */
.info_box{ margin-bottom:3em; padding:1em 0.5em; border:5px solid #533c34; background:#ffcc69; }
.info_box .t_line{ padding:0.5em 0 0.6em; text-align:center; font-size:1.5em;
  line-height:1.5; color:#533c34; letter-spacing: 0.05em; }

.news_box {margin: 0px auto 65px;}

/* toggleリスト */
.toggle{ position: relative; cursor: pointer;
  -webkit-transition: all .3s; transition: all .3s; }
.toggle:before, .toggle:after { content: ""; position: absolute; top: 0; right:1.5em; bottom: 0;
  width: 1em; height: 2px; margin: auto; background: #533c34; }
.toggle:after { -webkit-transform:rotate(90deg); transform:rotate(90deg);
  -webkit-transition:all .5s; transition:all .5s; }
.toggle.active:after { -webkit-transform:rotate(-180deg); transform:rotate(-180deg); }
.detail_content{ display:none; padding:0.8em; }
.toggle.active + .detail_content{ margin-top: 0.7em; border-top:2px dotted #533c34; }

.blogBox {text-align: left;}

/* クーポンポップアップ */
#coupon-popup { padding: 0 0 1em 0;}
#coupon-popup p { margin-bottom: 0;}

/* 初売り仕様--------------------------------------------------- */
html, body { height: 100%;}
body { height: 100%; background: url(../img/top/bg-hatsuuri.jpg) center repeat-y ;}
body::before { content: ""; position: fixed;  inset: 0; background: rgba(255,255,255,5%); z-index: -999;}

/* #gnav { display: flex; justify-content: center; width: 1000px; margin: 0 auto; padding: 20px 0 12px; background: #fcfaf0;} */
.shop-area { position: relative; z-index: 2; padding-bottom: 0; margin-bottom: 2em; padding: 2em 0;  background-color: #fff;}
.shop-area .flex { padding: 0 2em; align-items: center;}
#customer { background-color: #fff; padding: 2em 0 2em 2em; }
#customer .btn_customer { margin: 1.5em 2em 0; }
#news .btn_news{ margin: 1.5em 2em 0em 0px;}
.information #news { background-color: #fff; padding: 2em;}
.blogBox { background-color: #fff; padding: 2em;}
.blogBox .btn_blog { margin: 0 2em;}
.voice_list { padding-right: 4em;}

@media screen and (max-width:599px) {
body { height: 100%; background: url(../img/top/bg-hatsuuri-sp.jpg) center / cover repeat-y;}
body::before{ content: ""; position: fixed; inset: 0; background: rgba(255, 255, 255, 5%); z-index: -999;}
header .bg-color{ position: absolute; top: 1em; right: 1em; display: block; width: 47px; height: 50px; background-color: #fff;}
header .menu-button { display: block; position: absolute; top: 21px; right: 7px; z-index: 10; width: 33px; height: 21px;}
.shop-area { padding: 2em 0;}
.shop-area .flex{ padding: 0;}
#customer { padding: 2em .5em 0 .5em;}
.voice_list { padding-right: 0;}
.medama-list > li { width: 50%; }
.medama-list { margin: 30px 0;}
.medama-list { gap: 1em 0; }
}