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

* {box-sizing:border-box;}
a, a:after, a img {transition: all 0.5s ease; outline:none;}
a {cursor:pointer;text-decoration: none;}
div,ol,ul,li,p,span,a {position:relative;}
ol,ul,li {list-style:none;list-style-type:none;padding:0;}
body,header,footer,section,menu,p,ul {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6 {font-weight:normal;margin:0;padding:0;line-height:1em;}
div,a,img,p,li,section,header,footer {display:block;}
/*a:hover img {opacity:0.75;}*/

body {background: #000 url(images/bg_sky.jpg) top center fixed;background-size: cover; color: #fff;text-align: center;font-feature-settings: "palt";}
a {color: #fff;}
a:hover {color: #f90;text-decoration: underline;}

#wrapper {padding: 0;}

#header {background: #000;width: 100%;padding-bottom: 1em;}
#header h1 {margin: 0 auto;width: 100%;}
#header h1 img {width: 100%;height: auto;}
#header .prologue {line-height: 1.5;text-align: justify;width: 90%;margin: 0 auto;}

#mainContent {background: rgba(0,0,0,0.5);padding: 1em 0 2em;}

#lineUp {width: 96%;max-width: 960px;margin: 0 auto;}

.block {width: 49%;margin: 0.5%;float: left;background: #111;padding: 0.5em;overflow: hidden;transition: all ease 0.4s;}
.block:hover {box-shadow: 0 0 5px 1px rgba(255,255,255,0.5);}
.sbox {}

.block a {}
.block a:hover {text-decoration: none;}
.block div {width: 45vw;height: 45vw;max-height: 265px;max-width: 100%; overflow: hidden;margin-bottom: 1em;}
.block.imgshift div img {top:-20%;}
.block div img {width: 100%;position: relative;}
.block a:hover div img {transform: scale(1.1);}
.block p {line-height: 1.4}
.block p.brand {font-weight: 600;color: #c6a;}
.block p.model {font-size: 70%;height: 4.2em;text-overflow: ellipsis;overflow: hidden;}
.block p.shopping {background: #fff;width: auto;max-width: 80%;margin: 0.5em auto;border-radius: 5px;color: #222;font-weight: 600;padding: 0.25em;transition: all ease 0.3s;}
.block a:hover p.shopping {background: #fc0;}

/*SOLD*/
.block.sold a:hover div img {transform: scale(1.0);}
.block.sold:hover {box-shadow: 0 0 0 0 rgba(255,255,255,0);}
.block.sold a:hover {color: #fff;}
.block.sold p.shopping {background: #999;}
.block.sold a:hover p.shopping {background: #999;}

.block.used:after {content:"USED";display:block;position:absolute;color:#fff;left:-45px;top:15px;font-size:20px;font-weight:bold;transform:rotate(-45deg);background-color:#f00;padding:5px 0 4px;line-height:1.0em;text-align:center;width:150px;box-shadow: -1px 1px 2px rgba(0,0,0,0.5);}
.block.outlet:after {content:"OUTLET";display:block;position:absolute;color:#fff;left:-45px;top:20px;font-size:16px;font-weight:bold;transform:rotate(-45deg);background-color:#06f;padding:5px 0 4px;line-height:1.0em;text-align:center;width:150px;box-shadow: -1px 1px 2px rgba(0,0,0,0.5);}



#subMenu {}
#subMenu ul {width: 90%;margin: 1em auto;}
#subMenu ul li {width: 100%;float: none;padding: 0.5em;}
#subMenu ul li a {}
#subMenu ul li a img {width: 100%;}
#subMenu ul li a:hover img {transform: scale(1.1);}

#map {width: 90%;margin: 0 auto;border: 1px solid #fff;padding: 1em;border-radius: 0.5em;}
#map > img {width: 100%;float: none;}
#map #kaijou {text-align: left;float: none;width: 100%;}
#map #kaijou p {line-height: 1.5;}
#map #kaijou p#place {}
#map #kaijou p a {display: inline-block;}

#footer {width: 100%;margin: 0 auto;padding: 1em;background-color: #444;}
#footer p {color: #fff;font-size:80%;line-height:1.5;margin: 0.5em auto;width: 80%;}
#footer a {display: inline-block;}

address {font-style: normal;margin: 1em auto 0;padding: 0;font-size:12px;line-height:1.2;}

/*汎用*/
.mincho {font-family: "游明朝", "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;}
.serif {font-family:  "Times New Roman", Times, serif, "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝";}
.gothic {font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
.txtwshadow {text-shadow:1px 1px 0.1em #000,-1px 1px 0.1em #000,-1px -1px 0.1em #000,1px -1px 0.1em #000;}
.clearfix:after, ul:after {content:"";display:block;position:relative;clear:both;}

@media screen and (min-width: 480px) {
}

@media screen and (min-width: 600px) {
	#header h1 {width: 70%;}
	#header .prologue {text-align: center;width: 100%;}
	#lineUp {width:90%;}
	.block {width: 24%;}
	.block p.model {font-size: 90%;}
	#subMenu ul {width: 80%;}
	#subMenu ul li {width: 50%;float: left;}
	#map {width: 60%;}
	#map > img {width: 50%;float: left;}
	#map #kaijou {text-align: left;float: left;width: 50%;}
	.block div {width: 20vw;height: 20vw;max-height: 224px;}
}