@charset "utf-8";
/* CSS Document */

@media only screen and (max-width:767px){

/* header */
header {
	position: fixed;
	height: 50px;
	background: #fff;
	z-index: 900;
}

header div.center {
	text-align: left;	
}	

header img {
	padding-top: 10px;
    padding-bottom: 10px;
    margin-left: 10px!important;
    height: 50px!important;
    box-sizing: border-box;
}
	
ul#pc-menu {
	display: none;
}

div#sp-menu {
	display: inline;
}

div#sp-menu .menu-btn {
    position: fixed;
    top: 0px;
    right: 0px;
    display: flex;
    height: 50px;
    width: 50px;
    justify-content: center;
    align-items: center;
    z-index: 900;
    background-color: #318cc2;
}

div#sp-menu .menu-btn span,
div#sp-menu .menu-btn span:before,
div#sp-menu .menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #ffffff;
    position: absolute;
}

div#sp-menu .menu-btn span:before {
    bottom: 8px;
}

div#sp-menu .menu-btn span:after {
    top: 8px;
}

div#sp-menu #menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}

div#sp-menu #menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
}

div#sp-menu #menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
}

div#sp-menu #menu-btn-check {
    display: none;
}

div#sp-menu .menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 800;
    background-color: #318cc2;
    transition: all 0.5s;/*アニメーション設定*/
     overflow-y: scroll;  
     -webkit-overflow-scrolling: touch;
}

div#sp-menu .menu-content ul.menu {
    padding: 50px 10px 0;
}

div#sp-menu .menu-content ul.menu li {
    border-bottom: solid 1px #ffffff;
    list-style: none;
}

div#sp-menu .menu-content ul.menu li a {
    display: block;
    width: 100%;
    font-size: 16px;
    box-sizing: border-box;
    color:#ffffff;
    text-decoration: none;
    padding: 9px 15px 10px 0;
    position: relative;
}

div#sp-menu .menu-content ul.menu li a::before {
    content: "";
    width: 7px;
    height: 7px;
    border-top: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    transform: rotate(45deg);
    position: absolute;
    right: 11px;
    top: 16px;
}

div#sp-menu .menu-content ul.contact {
	width: 100%;
	height: auto;
	margin-top: 30px;
	margin-bottom: 20px;
}

div#sp-menu .menu-content ul.contact li {
	max-width: 640px;
	width: 100%;
	height: auto;
	padding: 0 10px 14px;
	box-sizing: border-box;
}

div#sp-menu .menu-content ul.contact li a {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	padding: 10px;
	background: #fff;
	color: #318cc2;
}

div#sp-menu .menu-content ul.contact li a p {
	line-height: normal;
	font-size: 15px;
	margin: 0;
}
	
div#sp-menu .menu-content ul.contact li a img {
	padding: 0px;
	margin-right: 8px;
	width: auto;
	height: 30px!important;
}

div#sp-menu #menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}

header div#sp-menu .menu-content div.shop_info {
	padding: 0 10px;
    box-sizing: border-box;
}

header div#sp-menu .menu-content div.shop_info p {
	margin-top: 0px;
	margin-bottom: 30px;
	color: #fff;
	font-size: 14px;
}

header div#sp-menu .menu-content div.shop_info p strong {
	font-size: 16px;
}

header div#sp-menu .menu-content div.shop_info a.header_co_link {
	width: 100%;
    height: auto;
    display: block;
}

header div#sp-menu .menu-content div.shop_info a.header_co_link img {
    width: 100%;
	max-width: 476px;
    height: auto!important;
    display: block;
    margin: 0 auto!important;
    padding-top: 0!important;
    padding-bottom: 0px!important;
}

/* crumb */
#crumb {
	width: 100%;
	padding-top: 2px;
	padding-bottom: 2px;
}

#crumb ul {
	padding-top: 50px;
}
	
#crumb ul li {
	font-size: 10px;
}

/* TOP PAGE */
#main-slider {
	padding-top: 50px;
}

#main-slider ul.slick-box {
	max-height: 800px;
	margin-top: 0px;
	margin-bottom: 90px;
}

#main-slider ul.slick-box li img {
	max-height: 800px;
}

#new-slider .slick-box2 {
	padding: 20px 0px 40px;
}

#new-slider .slick-box2 li div.img {
	max-height: 306px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 306px;
}

#new-slider .slick-box2 .prev-arrow {
	top: 30%;
}

#new-slider .slick-box2 .next-arrow {
	position: absolute;
	top: 30%;
}

#news-list ul li {
	width: 48%;
}

#news-list ul li div.img {
	max-height: 230px;
}

#news-list ul li img {
	height: 230px;
}

#top #news-list ul li:nth-child(n+5) {
	display: none;
}

.bn-field ul li {
	width: 100%;
}

#brand-list ul::after,
#brand-list ul::before {
	width: 48%;
}

#brand-list ul li {
	width: 48%;
}

/* NEWS & TOPICS */
#news #news-list {
    margin-top: 30px;
}

#news #news-list ul::after,
#news #news-list ul::before {
	width: 100%;
}

#news #news-list ul li {
	width: 100%;
}

#news #news-list ul li div.img {
	width: 100%;
	max-height: 100%;
}

#news #news-list ul li img {
	max-width: 640px;
	width: 100%;
	height: auto;
}

/*#news #news-list ul li:nth-child(n+11) {
	display: none;
}*/

#news h1.common-title {
	padding-top: 30px;
}

/* BRAND */
#watch #brand-list {
    margin-top: 30px;
}

#brand div.wrapper {
    margin-top: 30px;
}

.model-list::after,
.model-list::before {
	width: 48%;
}

.model-list li {
	width: 48%;
}

.model-list li div.img {
	max-height: 322px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 322px;
}

/* MODEL DETAIL */
#model-detail div.wrapper {
	margin-top: 10px;
}

.left-area {
	width: 100%;
	margin: 0 auto;
	padding-bottom: 20px;
}

.right-area {
	width: 100%;
	margin: 0 auto;
	padding-left: 0px;
}

/* 来店予約・お問合せ */
.item {
    width: 100%;
    text-align: left;
    padding-right: 0px;
    display: block;
}

.wpcf7-form-control {
    width: 100%;
}



/* footer */
footer {
	margin-bottom: 20px;
}

#footer_l {
	width: 100%;
	margin-right: 0px; 
	margin-bottom: 30px;
}

#footer_l .shop_img {
	max-width: 562px;
	width: 100%;
	float: none;
	padding-right: 0px;
	padding-bottom: 20px;
	margin: 0 auto;
}

#footer_l .shop_info {
	width: 100%;
	height: auto;
	text-align: center;
}

#footer_l .shop_info img {
	margin: 0 auto;
}


#footer_r {
	width: 100%;
}

#footer_r img {
	position: static;
	margin: 20px auto 0;
}

#sp-btn {
	position: fixed;
	bottom: 0;
	display: block;
	width: 100%;
	height: auto;
	background: #318cc2;
	box-sizing: border-box;
	z-index: 700;
}
	
#sp-btn ul {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: center;
	-webkit-justify-content:  center;
	-ms-flex-pack:  center;
	justify-content:  center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

#sp-btn ul li {
	width: 50px;
	padding: 8px 10px 0px;
	text-align: center;
	font-size: 11px;
}

#sp-btn ul li a {
	color: #fff;
}

#sp-btn ul li img {
	width: auto;
	height: 26px;
	margin: 0 auto;
}

#sp-btn ul li:last-child img {
	height: 30px;
}

}


@media only screen and (min-width:1001px) and (max-width:1200px){

#news-list ul li div.img {
	max-height: 144px;
}

#news-list ul li img {
	height: 144px;
}

#brand-list ul li {
	width: 24%;
}

#brand-list ul li div.img {
	max-height: 122px;
}

#brand-list ul li img {
	height: 120px;
}

.model-list li div.img {
	max-height: 226px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 226px;
}

.left-area #slide {
	max-height: 490px;
}

.left-area #slide img {
	height: 490px;
}

.left-area .swap li {
	max-height: 123px;
}

.left-area .swap li img {
	height: 123px;
}
}

@media only screen and (min-width:768px) and (max-width:1000px){

#news-list ul li div.img {
	max-height: 120px;
}

#news-list ul li img {
	height: 120px;
}

#brand-list ul li div.img {
	max-height: 85px;
}

#brand-list ul li img {
	height: 83px;
}

.model-list li div.img {
	max-height: 172px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 172px;
}
.left-area #slide {
	max-height: 375px;
}

.left-area #slide img {
	height: 375px;
}

.left-area .swap li {
	max-height: 94px;
}

.left-area .swap li img {
	height: 94px;
}
}

@media only screen and (max-width:680px){

#new-slider .slick-box2 li div.img {
	max-height: 266px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 266px;
}

#news-list ul li div.img {
	max-height: 204px;
}

#news-list ul li img {
	height: 204px;
}

.model-list li div.img {
	max-height: 279px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 279px;
}

.left-area #slide {
	max-height: 582px;
}

.left-area #slide img {
	height: 582px;
}

.left-area .swap li {
	max-height: 146px;
}

.left-area .swap li img {
	height: 146px;
}
}

@media only screen and (max-width:600px){

#new-slider .slick-box2 li div.img {
	max-height: 232px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 232px;
}

#news-list ul li div.img {
	max-height: 179px;
}

#news-list ul li img {
	height: 179px;
}

#brand-list ul li div.img {
	max-height: 125px;
}

#brand-list ul li img {
	height: 123px;
}

.model-list li div.img {
	max-height: 246px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 246px;
}

.left-area #slide {
	max-height: 512px;
}

.left-area #slide img {
	height: 512px;
}

.left-area .swap li {
	max-height: 128px;
}

.left-area .swap li img {
	height: 128px;
}
}

@media only screen and (max-width:530px){

#new-slider .slick-box2 li div.img {
	max-height: 197px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 197px;
}

#news-list ul li div.img {
	max-height: 157px;
}

#news-list ul li img {
	height: 157px;
}

.model-list li div.img {
	max-height: 212px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 212px;
}

.left-area #slide {
	max-height: 444px;
}

.left-area #slide img {
	height: 444px;
}

.left-area .swap li {
	max-height: 112px;
}

.left-area .swap li img {
	height: 112px;
}
}

@media only screen and (max-width:460px){

#new-slider .slick-box2 li div.img {
	max-height: 181px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 181px;
}

#news-list ul li div.img {
	max-height: 136px;
}

#news-list ul li img {
	height: 136px;
}

#brand-list ul li div.img {
	max-height: 96px;
}

#brand-list ul li img {
	height: 94px;
}

.model-list li div.img {
	max-height: 188px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 188px;
}

.left-area #slide {
	max-height: 392px;
}

.left-area #slide img {
	height: 392px;
}

.left-area .swap li {
	max-height: 98px;
}

.left-area .swap li img {
	height: 98px;
}
}

@media only screen and (max-width:410px){

#new-slider .slick-box2 li div.img {
	max-height: 147px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 147px;
}

#news-list ul li div.img {
	max-height: 120px;
}

#news-list ul li img {
	height: 120px;
}

.model-list li div.img {
	max-height: 164px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 164px;
}

.left-area #slide {
	max-height: 342px;
}

.left-area #slide img {
	height: 342px;
}

.left-area .swap li {
	max-height: 86px;
}

.left-area .swap li img {
	height: 86px;
}
}

@media only screen and (max-width:360px){

#new-slider .slick-box2 li div.img {
	max-height: 126px;
}

#new-slider .slick-box2 li img {
	max-width: 100%;
	height: auto;
	max-height: 126px;
}

#news-list ul li div.img {
	max-height: 104px;
}

#news-list ul li img {
	height: 104px;
}

#brand-list ul li div.img {
	max-height: 74px;
}

#brand-list ul li img {
	height: 72px;
}

.model-list li div.img {
	max-height: 144px;
}

.model-list li img {
	max-width: 100%;
	height: auto;
	max-height: 144px;
}

.left-area #slide {
	max-height: 300px;
}

.left-area #slide img {
	height: 300px;
}

.left-area .swap li {
	max-height: 76px;
}

.left-area .swap li img {
	height: 76px;
}
}