@charset "utf-8";

/* main ------------- */
#slide, #carSlider { overflow:hidden; }
#slide { margin:20px 0; }
#slide .slick-slide img, #carSlider .slick-slide img { padding:0 10px; }
.allmaker { padding:18px 0; background:#e7f4ff; }
.allmaker li { width:12.5%; text-align:center; }
.allmaker li + li { border-left:2px solid #fff; }
.allmaker img { height:48px; }

.secttl3 { margin-bottom:1em; padding:10px 0; font-size:3.5rem;}
.secttl3>span { display:block; font-size:1.5rem;}
.secttl3>span>span { font-size:2.5rem;}

.flyer-area .secttl3 { background:url(/img/common/decoration_flyer.png) no-repeat; background-position:center bottom;}

/*コントローラー*/
#arrow { position:relative; top:-240px; left:50%; width:1000px; height:100%; margin-left:-500px; }
#arrow .slick-next:before{content:"";}
#arrow .slick-after:before{content:"";}
#arrow .slick-arrow {position:absolute;top:50%;width:40px;height:80px;background:#f39800;border:none;-webkit-transform:translateY(-50%);transform:translateY(-50%);text-indent:-9999px;z-index:999;opacity:1;  }
#arrow .slick-arrow:hover { background:#f46d00;}
#arrow .slick-prev { left:-60px; border-radius:40px 0 0 40px;}
#arrow .slick-next { right:-60px; border-radius:0 40px 40px 0;}
#arrow .slick-arrow:before { content:""; position:absolute; top:50%; right:20px; width:12px; height:12px; margin-top:-6px;
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); }

#slidePager li { flex:10%; max-width:20%; padding:0 5px; cursor:pointer;}

/* reccomend ------------- */
.reccomend { margin-top:90px; }
.reccomend .secttl { font-size:4rem; margin-bottom:45px; }
.reccomend .secttl:after { bottom:-5px; }
.reccomend .secttl .seal { position:absolute; left:70px; bottom:40px; }
.reccomend .secttl span { font-size:2rem;}

.medama-list { margin-bottom:20px; }

/* stock ------------- */
.top-stock>a { position:relative; display:block; padding:40px 40px 0; color:#f8c58d; line-height:1em;  background:#f39800; border-radius:10px;}
.top-stock>a> span { font-size:1.2em; }
.top-stock>a p.txtshadow { margin:0.5em 0 1.5em; font-size:2em; line-height:1.2em; }
.top-stock>a p.txtshadow>span { display:block; font-size:0.8em;}
.top-stock>a p.txtshadow>span.large { display:inline; margin:0.1em; font-size:3rem; }
.top-stock>a figure { position:absolute; top:-30px; right:30px;}
.top-stock>a p:last-child { margin:0 -40px; padding:0 40px;  font-size:1.6rem; font-weight:bold; line-height:3em; color:#fff; background:#f46d00; border-radius:0 0 10px 10px; }
.top-stock>a p:last-child span { font-size:1.1rem; }
.top-stock>a:hover { text-decoration:none; opacity:0.8; }

.top-stock2>a { position:relative; display:block; padding:8px 40px 0; color:#f8c58d; line-height:1em;  background:#f46d00; border-radius:10px;}
.top-stock2>a> span { font-size:1.2em; }
.top-stock2>a p.txtshadow { margin:0.5em 0 1.5em; font-size:2em; line-height:1.2em; }
.top-stock2>a p.txtshadow>span { display:block; font-size:0.8em;}
.top-stock2>a p.txtshadow>span.large { display:inline; margin:0.1em; font-size:3rem; }
.top-stock2>a figure { position:absolute; top:-30px; right:30px;}
.top-stock2>a p:last-child { margin:0 -40px; padding:0 40px;  font-size:1.6rem; font-weight:bold; line-height:3em; color:#fff; background:#f46d00; border-radius:0 0 10px 10px; }
.top-stock2>a p:last-child span { font-size:1.1rem; }
.top-stock2>a:hover { text-decoration:none; opacity:0.8; }

/* reason ------------- */

.top-reason ul { margin-bottom:40px; }
.top-reason li { position:relative; width:30%; text-align:center;}
.reason01:before { content:url(/img/top/reason01.png); position:absolute; top:-20px; left:20px; }
.reason02:before { content:url(/img/top/reason02.png); position:absolute; top:-20px; left:20px; }
.reason03:before { content:url(/img/top/reason03.png); position:absolute; top:-20px; left:20px; }
.top-reason li figure { border-radius:10px; overflow:hidden;}
.top-reason h3 { display:inline-block; margin:1rem 0 0 ; padding:0 0.5em; color:#f39800; font-size:1.4rem; }
.top-reason h3 .large { font-size:2.2rem; }
.top-reason p { text-align:left;}

/* about ------------- */

.top-about ul { margin-bottom:20px; }
.top-about li { width:48%; margin-bottom:40px; overflow:hidden; background:#ffe4b7;  border-radius:5px; }
.top-about li img{ z-index:0;}
.top-about li h3 { position:relative; z-index:1; margin:-1em 70px 0 0; padding-left:1em; font-size:1.5rem; line-height:2em; color:#fff600; background:#f39800; border-radius:0 5px 5px 0; }
.top-about li p { margin:20px;}

/* チラシ */
section.flyer-area { margin:0; padding:60px 0 80px;  text-align: center; background: url(/img/common/bg_flyer.png) ; background-size: cover; background-position: center;}
.flyer-area ul {margin: 50px 0;}
.flyer-area li { width: 320px; height: 460px; margin: 0 10px; overflow: hidden;}

/* ランキング */
section.ranking-area { padding: 50px 0; text-align: center; }
.ranking-area .secttl3 { padding-top: 40px; background: url(/img/common/decoration_cars.png) no-repeat; background-position: center bottom;}
.ranktab { display: table; table-layout: fixed; margin: 2em 0; width:100%; font-size: 1.3em; font-weight: bold; line-height: 60px; color: #813b22; border-bottom: #f46400 2px solid; }
.ranktab li { display: table-cell; background-color: rgba(255,153,0,0.25); background-clip: padding-box; border-right:3px solid transparent; cursor: pointer; }
.ranktab li:hover {background-color: rgba(255,153,0,0.5);}
.ranktab li:last-child{ border-right:none;}
.ranktab li.active { color: #fff; background-color:#f46400;}

.ranking .hide {display: none;}
.ranking ol { margin: 50px; padding: 0 ; text-align: center; list-style-type:none;}
.ranking li figure { position: relative; height: 400px; }
.ranking li figure img { position: absolute; left: 0; bottom: 20%;}
.ranking li figcaption { position: absolute; left:0; bottom:0; padding: 1rem 0; width: 100%; font-size:1.8rem; font-weight: bold; color: #813b22; line-height: 1.2; }
.ranking li figcaption span{ display: block; font-size: 1.1rem;}

.ranking li:first-child { margin: 0 30%;}

.ranking li:nth-child(2),.ranking li:last-child { position: absolute; width: 26%; bottom: 0; }
.ranking li:nth-child(2){ left: 0; }
.ranking li:last-child { right: 0; }

.ranking li figure:before { content: ''; position: absolute; z-index: 1; left: 0; width: 100%; width:93px; height: 117px; background-position: left top; background-repeat: no-repeat;}
.ranking li:first-child figure:before{ top: 0; background-image: url(/img/common/rank1.png); }
.ranking li:nth-child(2) figure:before{ top:20%; background-image: url(/img/common/rank2.png); }
.ranking li:last-child figure:before{ top:20%; background-image: url(/img/common/rank3.png); }

/* CM */
.cm-area .movie { margin:40px 50px; }
.cm-area .channel{ padding: 0 40px 60px; border:#f39200 10px solid; border-radius:20px; }
.cm-area .channel > ul > li { width:440px; }

/* info ------------- */
.info-area {padding-bottom:100px;}

.top-info {margin-bottom:60px; }
.top-info .subttl { background-image:url(/img/top/icon_info.png); }
.information-list { margin-bottom:10px; }


.information-list li { position:relative; margin-bottom:20px; width:23%;}
.information-list::after{ display:block; content:""; width:23%; }
.information-list::before{ display:block; content:""; width:23%; order:1;}/*flex-betweenの崩れ対策*/

.information-list li:before { content:""; position:relative; z-index:2; display:block; padding-top:100%; background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */}/*liを正方形に&グラデ*/

.information-list li:hover:before {
background:-moz-linear-gradient(top, rgba(51,51,51,0) 0%, rgba(51,51,51,1) 100%); /* FF3.6-15 */
background:-webkit-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
background:linear-gradient(to bottom, rgba(51,51,51,0) 0%,rgba(51,51,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333333', endColorstr='#333333',GradientType=0 ); /* IE6-9 */}

.information-list figure {position:absolute; z-index:1; top:0; width:100%; height:100%; }
.information-list img { width:100%; height:100%; object-fit:cover;}

.information-list a { position:absolute; z-index:3; top:0; height:100%; width:100%; color:#fff; text-decoration:none;
}
.information-list a p { position:absolute; bottom:0; margin:0; padding:1em; line-height:1.5;}

.information-list time { display:block; font-size:0.8rem; }

.top-fb,.top-ig { width:47%; margin-bottom:100px;}
.top-fb .subttl { background-image:url(/img/top/icon_fb.png);}

.top-ig .subttl { background-image:url(/img/top/icon_ig.png);}

.top-line { padding:40px 80px; color:#fff; background-color:#37b44c; border-radius:10px;}
.top-line p { margin:0; font-size:3rem; line-height:1em; font-weight:bold; }
.top-line .logo_white { margin:0 0 -10px 6px; }

/* store */
.store-area { padding:0 0 40px; }
.store-list::after{ display:block; content:""; width:32%; }/*flex-betweenの崩れ対策*/
.store-list > li { width:32%; margin-bottom:30px; border:solid 2px #f39800; border-radius:5px;}
.store-list h3 { text-align:center; font-size:1.4rem; line-height:2; color:#fff; background-color:#f39800; }
.store-list .thumb { margin-bottom:1rem; padding-top:56.25%; position:relative; overflow:hidden; }
.store-list .thumb > img { top:50%; }

.store-list>li>p { margin:0 22px; }
.store-list .store-tel { content:"TEL:"; font-weight:bold; font-size:1.25rem; }
.store-list .free:before { content:""; display:inline-block; margin-right:.2em; width:27px; height:16px; background:url(../img/common/icon-freedial.png) no-repeat center; }

.store-link {margin:0.6em 22px 1.2em;}
.store-link li { width:49%; }
.store-link a { display:block; text-align:center; line-height:2.5; color:#fff; text-decoration:none; background-color:#813c23; }
.store-link a:hover { background-color:#f46d00; }

/* con-bnr */

/* coupon */

/* bnr-area */

/* ================================================================
  スマホ
=================================================================== */
@media screen and (max-width:599px){

}