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

@import url('https://fonts.googleapis.com/css?family=Fjalla+One');

* {box-sizing:border-box;}
a, a:after {-webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; 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,menu,p,ul {padding:0;margin:0;}
h1,h2,h3,h4,h5,h6,h7 {font-weight:normal;margin:0;padding:0;line-height:1em;}
div,a,img,p,li {display:block;}
/*a:hover img {opacity:0.75;}*/

body {background-color:#000;color:#fff;font-size:16px;width:100%;



/*重要！*/
font-family:'Fjalla One', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;font-feature-settings : "palt", "swsh";}



/*ヘッダー*/
header {width:100%;background: rgba(0,0,0,0.5);color:#fff;position: fixed;top:0;left:0;z-index: +10;border-bottom: 1px solid rgba(255,255,255,0.1);transition: all ease 0.3s;}
header.scroll {background: rgba(0,0,0,0.7);}
header > div {width: 100%;margin:0 auto;padding:1em 1.5em;transition: all ease 0.3s;}
header.scroll > div {padding: 0.5em 1.5em;}
header h1 {font-size: 1.25em;float: left;height: 2em;transition: all ease 0.3s;}
header.scroll h1 {height: 2em;}
header h1 a {height: 100%;}
header h1 a img {height:100%;}

header ul.menu {display:none;float: right;margin-right: 1.5em;}
header ul.menu li {float: left;margin-left: 1em;text-align: center;font-size: 0.75em;}
header ul.menu li a {text-decoration: none;color: #fff;font-weight: 500;padding: 0;}
header ul.menu li span {display:block;font-size: 0.7em;}
header ul.menu li a:hover {color:#f90;}
header ul.menu li a i {font-size: 2em;line-height: 1.15em;}

header ul.menu li ul.drop {display: none;transition: all ease 0.3s;background: #f00;}
header ul.menu li.drop:hover ul.drop {display: block;}
header ul.menu li ul.drop li {position:absolute;text-align: left;float:none;background: #fff;width:12em;border-top: #ccc 1px solid;left:-2em;box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.1);}
header ul.menu li ul.drop li a {padding:0.65em;font-size: 0.875em;font-weight: 600;color:rgba(0,0,0,0.5);}
header ul.menu li ul.drop li a img {display: inline;vertical-align: bottom;height: 1em;margin-right: 0.1em;}
header ul.menu li ul.drop li a:hover {color:#d33;}
header ul.menu li ul.drop li:nth-of-type(1) {top:0em;}
header ul.menu li ul.drop li:nth-of-type(2) {top:2em;}
header ul.menu li ul.drop li:nth-of-type(3) {top:4em;}
header ul.menu li ul.drop li:nth-of-type(4) {top:6em;}
header ul.menu li ul.drop li:nth-of-type(5) {top:8em;}
header ul.menu li ul.drop li:nth-of-type(6) {top:10em;}

/**humberger**/
#nav-toggle {color:transparent;float: right;line-height: 2em;}
#nav-toggle span {display: block;background: #000;width:1.5em;height: 0.1875em;position:absolute;right:0.25em;top:50%;transition: 0.3s background ease;}
#nav-toggle span:before, #nav-toggle span:after {content:"";width:1.5em;height: 0.1875em;background: #fff;display: block;position: absolute;transition: ease all 0.3s;transform-origin: 0 50%;}
#nav-toggle span:before {top:-0.55em;}
#nav-toggle span:after {top:0.55em;}
#nav-toggle.nav-open {}
#nav-toggle.nav-open span {background: transparent;}
#nav-toggle.nav-open span:before {transform: translate(0.25em,0.0625em) rotate(45deg);}
#nav-toggle.nav-open span:after {transform: translate(0.25em,0) rotate(-45deg);}

/*vertical menu*/
#verticalmenu {width:100%;background: #666;display: none;}
#verticalmenu li {border-top:1px solid rgba(0,0,0,0.2);}
#verticalmenu li.drop > div {position: absolute;top: 0;right:0;color:rgba(0,0,0,0.5);font-size: 2em;padding:0 1em;line-height: 1.65625em;border-left: 1px solid rgba(0,0,0,0.2);}
#verticalmenu li.drop > div i {transition: all ease 0.2s;}
#verticalmenu li.drop > div.nav-open > i {transform: rotate(180deg);}
#verticalmenu li a {font-weight: 400;color:rgba(255,255,255,0.9);padding:1em;}
#verticalmenu li a span {font-size: 0.75em;margin-left: 1em;}
#verticalmenu li a:hover {color:#d33;}
#verticalmenu ul.drop {display: none;border-bottom: 1px solid rgba(0,0,0,0.5);}
#verticalmenu ul.drop li a {padding-left: 2em;}
#verticalmenu ul.drop li a img {display: inline;vertical-align: bottom;height: 1em;margin-right: 0.1em;}

/*hero*/
#hero {width:100%;background: url(img/shopimage01.jpg) no-repeat top center;background-size: cover;text-align: center;}
#hero div#newArrSlide {height: 100%;background:linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.5), rgba(0,0,0,0.7), rgba(0,0,0,0.7), rgba(0,0,0,0.5), rgba(0,0,0,0));padding-top: 1em;/*padding-top:8em;*/}
#hero div#newArrSlide > a {background: rgba(90,20,100,0.7);border-radius: 5px;padding: 0.5em;text-align: center;}
#hero #twitterarea2 {width: 100%;float:none;}
#newArrSlide {width: 100%;float: none;}

/*新着商品スライド*/
.rss {margin: 0 auto 0;}
.rss li {border-radius: 0.75em;overflow: hidden;padding: 1em;max-height: 360px;height: auto;}
.rss li a {color:#fff;text-shadow:1px 1px 0.25em #000,-1px 1px 0.25em #000,-1px -1px 0.25em #000,1px -1px 0.25em #000;}
.rss li a:hover img {transition: all ease 0.3s;transform: scale(1.05);}
.rss li div {border-radius: 0.75em;}
.rss li div.title {font-size: 1.25em; color:#fff;width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;padding: 1rem;position: absolute;top: 0.2rem;left: 0.2rem;height: 4rem;text-shadow:1px 1px 0.25em #000,-1px 1px 0.25em #000,-1px -1px 0.25em #000,1px -1px 0.25em #000;}
.rss li div img {border-radius: 0.75em;overflow: hidden;width: 100%;zoom: 0.3;/*height: auto;max-height: 380px;*//*width:auto;height:100%;max-height: 340px;margin: 0 auto;*/}
.rss li span {display: block;text-align: right;position: absolute;right:0.5em;}
.rss li span.status {bottom: 2em;}
.rss li span.price {bottom: 0.5em;}
.rss li span.price:before {content:"\007a0e\008fbc\008ca9\0058f2\004fa1\00683c";font-size: 0.75em;margin-right: 0.25em;}
.rss li span.catchcopy {display: none;bottom: 0em;background: rgba(0,0,0,0.5);width: 100%; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;padding: 0.5em;}
.rss li p {display: none;}

/*contents*/
#contentWrapper {width:100%;}
#content {background: #333;width:100%;height: auto;min-height: 100%;}

/*section*/
section > img {width:100%;}
section > div {width: 98%;padding:1em 0.5em 2em;margin:0 auto;}
section > div > h3 {font-size:2.5em;text-align: center;margin: 5em auto;}
section > div > h3 span {font-size:0.4em;font-weight: 400;display:block;line-height: 1.5em;}
section > div > h7 {font-size:2.0em;text-align: center;margin: 1em auto;}
section > div > h7 span {font-size:0.3em;font-weight: 300;display:block;line-height: 1.5em;}
section a {color:#fff;}

/*店内写真見せるゾーン*/
#photomisel {background: #111;}
#photomisel > div {padding: 0;}
#photomisel ul {margin:0 auto;padding: 1em 0;}
#photomisel ul li {float: left;width: 25%;padding: 0.25em;}
#photomisel ul li.migi {float: right;}
#photomisel ul li.sizeS {width: 33.33%;}
#photomisel ul li.sizeM {width: 50%;}
#photomisel ul li.sizeL {width: 66.66%;}
#photomisel ul li a {overflow: hidden;}
#photomisel ul li img {width: 100%;transition: all ease 0.3s;}
#photomisel ul li a:hover img {transform: scale(1.1);opacity: 0.75;}
#photomisel ul li a:hover {background: #fff;}

/*在庫リストリンク*/
#stock {background:#000 url(img/bgimage001.jpg) center center no-repeat ;color: #fff;}
#stock > div {background: rgba(0,0,0,0.7);}
#stock h4 {font-weight: 600;border-left:5px solid #fff; border-bottom: 1px solid #fff;padding: 0 0 0.25em 0.25em;margin: 2em 0 1em;position: relative;}
#stock h4 a {display: inline;text-align: right;position: absolute;right: 0;font-weight: 400;}
#stock h4 a i {font-size: 1.25em;margin-right: 0.2em;}
#stock h4 a:hover {color:rgb(233,168,37);}
#stock ul {width: 100%;/*margin-bottom: 2rem;*/display: block;}/*@@*/
#stock ul.brand {margin-bottom: 1rem;}
#stock ul li {display: block;float:left;text-align: center;width: 33.33%;/*width: 25%;*/}/*@@*/
#stock ul li a {border-radius: 4px;line-height: 1.1;}
#stock ul li a:after {content:attr(title)"";font-size: 0.7em;display: inline-block;}
#stock ul li a:hover {color: #f90;background: rgba(255,240,230,0.1);}
#stock ul li img {width: 100%;}
#stock h5 {width: 100%;display: block;font-size: 1em;margin: 0;}
#stock h5 a {width:100%;text-align: center;padding: 0.25em;border-radius: 5px;}
#stock .brwsbyinst {margin-bottom: 1em;}
.brand li a img {width: 100%;}
#stock ul.brand li {width: 33.33%;padding: 0.25em;}/*@@*/
#stock ul.brand li a:after {font-size: 0.6em;}
#stock ul.acce li {width: 33.33%;padding: 0.25em; margin-top: 0.25em;}
.brwsbyinst > div {/*width: 50%;float:left;*/width:100%;float:none;padding:0.5em;border-radius: 3px;}/*@@*/
.mokkan {background: rgba(70,0,0,0.3);}
.kinkan {background: rgba(200,200,20,0.1);}
#stock h5 a:hover {background:rgba(255,160,0,0.8);}




.notel{
pointer-events: none;
}





/*アクセスとか 皆様のご来場を心よりお待ちしております背景*/
#access {background: #000;}
#access a {color: #111;}
#access a:hover {color:rgb(233,168,37);}

#twitterarea, #shopinfo {width: 100%;float: none;border:1px solid #ccc;/*overflow-y: scroll;overflow-x: hidden;*/}/*@@*/
#twitterarea {display: none; height: 50vh;}

#shopinfo {padding: 1em;line-height: 1.3em;margin-top: 1em;}
#shopinfo a {display: inline-block;}
#shopinfo img {width: 100%;}
#shopinfo h4 {font-size: 1.5em;border-bottom: 1px solid #333;padding-bottom: 0.1em;margin-bottom: 0.5em;}
#shopinfo h4 span {font-size: 0.75em;padding-left: 0.25em;}
#shopinfo h7 {font-size:2.0em;text-align: center;margin: 1em auto;}
#shopinfo h7 span {font-size:0.3em;font-weight: 300;display:block;line-height: 1.5em;}


.notel{
pointer-events: none;
}




/*SNSリンク*/
#social {background: #111;color:#fff;text-align: center;}
#social h5 {font-weight: 400;margin-bottom: 0.25em;font-size:1em;}
#social a {color:#fff;font-size: 2em;}
#social a:hover {color:rgb(233,168,37);}

/*バナーの世界*/
#campaign {background: url(img/shopimage02.jpg)top center no-repeat fixed;background-size: cover;}
#campaign > div.coverall {width:100%;background: rgba(0,0,0,0.6);color: #fff;padding: 0;}
#campaign > div.coverall > div {width: 98%;padding:1em 0.5em 2em;margin:0 auto;}
div.coverall > div > h3 {font-size:2.5em;text-align: center;margin: 1em auto;}
div.coverall > div > h3 span {font-size:0.4em;font-weight: 400;display:block;line-height: 1.5em;}
div.coverall > div > h7 {font-size:2.0em;text-align: center;margin: 1em auto;}
div.coverall > div > h7 span {font-size:0.3em;font-weight: 300;display:block;line-height: 1.5em;}
#campaign > div.coverall > div > a {width: 100%;float: none;margin: 3% 1% 0 0;}/*@@*/
#campaign > div.coverall > div > a:nth-child(2n+1) {margin-right: 0;}
#campaign > div.coverall > div > a img {width: 100%;}
#campaign > div.coverall > div > a:hover {box-shadow: 0 0 5px 1px rgb(233,168,37);transform: scale(1.02);}


/*スタッフ*/
#staff {background: #000; color: #fff;}
.staff li {/*width: 50%;float: left;padding: 1em;*/width:100%;float: none;margin-bottom: 1em;}/*@@*/
.staff a {margin-bottom: 0.5em;}
.staff img {width: 100%;}
.staff h6 {/*font-size: 5vw;*/font-size:10vw;font-weight: 400;text-shadow:1px 1px 0.25em #000,-1px 1px 0.25em #000,-1px -1px 0.25em #000,1px -1px 0.25em #000;font-style: oblique;text-align: right;padding-right: 1rem;}/*@@*/
.staff p {text-align: left; background: rgba(0,20,0,0.6);padding: 0.5rem;line-height: 1.2em;font-size: 0.8em;}/*@@*/
.staff span {position: absolute;display: block;width: 100%; bottom:0;left:0;}
.staff a:hover {box-shadow: 0 0 5px 1px rgb(233,168,37);}

#itemdisplay {margin: 3em auto 0;}
#itemdisplay h3 {text-align: center;margin-bottom: 1em;font-size: 1.25em;}
#itemdisplay h3 span {font-size: 0.8em;}
#itemdisplay h7 {text-align: center;margin-bottom: 1em;font-size: 1.25em;}
#itemdisplay h7 span {font-size: 0.8em;}
#itemdisplay ul {}
#itemdisplay li {float: left;width: 50%;padding: 0.5em 0.25em;}/*@@*/
#itemdisplay a img {transition: all ease 0.3s;}
#itemdisplay a:hover img {box-shadow: 0 0 5px 1px rgb(233,168,37);transform: scale(1.02);}
#itemdisplay img {width: 100%;}
#itemdisplay span {display: block;line-height: 1.3;}
#itemdisplay span.text {padding: 0.25em;}
#itemdisplay span.sub {font-size: 0.8em;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
#itemdisplay span.name {width: 96%;white-space: nowrap;overflow: hidden; text-overflow: ellipsis;position: absolute;bottom:1.7em;left:0.25em;}
#itemdisplay span.price {text-align: right;margin-top: 1.2em;}
#itemdisplay span.price:after {content:"(tax in.)";font-size: 0.8em;}
#itemdisplay span.status {position:absolute;top:0.25em;left:0.25em;background: rgba(0,0,0,0.5);padding: 0.25em;border-radius: 5px;}
#itemdisplay div p {display: none;}





/*イベント*/
#event {color: #fff;}/*全体文字の色*/
#event > div > div {}
#event > div > div h4 {font-weight: 400;font-size: 1em; border-left:5px solid #fff; border-bottom: 1px solid #fff;padding: 0.1em 0 0.25em 0.25em;margin-bottom: 1em;position: relative;}
#event > div > div img {width: 100%;transition: all ease 0.3s;}
#event > div > div li {float: left;width: 50%;padding: 0.25em;transition: all ease 0.3s;}/*@@*/
#event > div > div li.img100 {width: 100%;}
#event > div > div a {overflow: hidden;height: 30vw;}
#event > div > div li.img100 a {height: 60vw;}
#event > div > div a:hover {box-shadow: 0 0 5px 1px rgb(233,168,37);}
#event > div > div a:hover img {transform: scale(1.05);}

#banners {}
#banners div {padding: 2em 0;text-align: center;}
#banners a {display: inline-block;margin: 0 0.25em;}
#banners a img {}
#banners a:hover {box-shadow: 0 0 5px 1px rgb(233,168,37);}

/*フッター*/
footer {background-color:#222;color:rgba(255,255,255,0.6);width:100%;border-top:1px solid rgba(0,0,0,0.3);}
footer div {padding:20px 0;}
p.copyright {font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}
footer a {color:rgba(255,255,255,0.6);}

/*ページトップへ*/
.pagetop {display: block;position: fixed;right: 35px;z-index:+20;bottom: 30px;}
.pagetop a {display: block;background-color: rgba(0,0,0,0.7);color: rgba(255,255,255,0.6); text-align: center;text-decoration: none;outline:none;width: 50px;height: 50px;line-height: 46px;font-size: 40px;/*border-radius: 50%;*/transform:rotate(45deg);}
.pagetop a i {transform:rotate(-45deg);}
.pagetop a:hover {color:rgb(233,168,37);}

/*汎用*/
.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;}

.mlhide {display: none;}
.mbhide {display: none !important;visibility: hidden;}/*@@*/

/**/
@media screen and (min-width: 480px) {
/*@@*/
	#stock ul li {width: 25%;}
	#stock ul.brand li {width: 20%;}
	.staff li {margin-bottom: 2em;}
		#itemdisplay li {width: 25%;}
	#hero #twitterarea2 {width: 30%;float:left;}
#newArrSlide {width: 68%;float: right;}
/*@@*/
}

@media screen and (min-width: 750px) {
	header h1 {margin-left: 0.875em;}
	#nav-toggle {display: none;}
	header ul.menu {display:block;padding-top: 0.3em;}
	#social {display: none;visibility: hidden;}
	section > div, #campaign > div.coverall > div {width: 98%;padding:2em 2em 4em;}
	.mlhide {display: block;}
	/*@@*/
	.brwsbyinst > div {width: 50%;float:left;}
	#stock ul li {width: 33.33%;}
	#stock ul.brand li {width: 16.66%;}
	#campaign > div.coverall > div > a {width: 49%;float: left;margin: 1% 1% 0 0;}
	#twitterarea, #shopinfo {width: 50%;}
	#twitterarea {float: left;height: 476px;display: block;}/*?*/
	#shopinfo {float: none;margin: 0 auto 0;}
	.staff li {width: 50%;float: left;padding: 1em;}
	.staff h6 {font-size: 5vw;}
	#itemdisplay li {width: 20%;}
	/*#itemdisplay span.sub, #itemdisplay span.name {white-space: normal;overflow: visible;}*/
	.mbhide {display: block !important;visibility: visible;}
	/*@@*/
}



@media screen and (min-width: 920px) {
	header h1 {height: 2.5em;}
	header ul.menu {margin-top: 0.1em;}
	header ul.menu li {font-size: 1em;}
	/*@@*/
	#stock ul li {width: 25%;}
	#stock ul.brand li {width: 12.5%;}
	#twitterarea, #shopinfo {width: 50%; /*height: 50vw;*/}
	.staff p {font-size: 1em;}

	#event > div > div li {width: 25%;}
	#event > div > div li.img100 {width: 100%;}
	#event > div > div a, #event > div > div li.img100 a {overflow: hidden;height: 60vw;}
	/*@@*/
}





@media screen and (min-width: 1200px) {
	section > div, #campaign > div.coverall > div {width: 80%;}
	header ul.menu li {margin-left: 1.75em;}
	/*header h1:after {content:"1200";}*/
	/*#twitterarea, #shopinfo {height: 45vw;}*/
	#event > div > div a, #event > div > div li.img100 a {overflow: hidden;height: 60vw;}
}





@media screen and (min-width: 1500px) {
#stock ul.acce li {width: 16.66%;}
}