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

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

* {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 {font-family:Marcellus, "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", serif;background: #000; color: #fff;}
a {color: #fff;}
a:hover {color: #fc0;}

header,footer,#contentWrapper,#content {width: 100%;background: #000;}

#maincontent,#left,#header > div,#footer {width: 90%;float: none;margin: 0 auto;}
footer > div {padding: 1em;}

header {border-bottom: 1px solid #fff;overflow: hidden;}
header,#header,#topslide ul {height: 200px;}
header.floorpage,.floorpage #header {height: 120px;}
header h1 {width: 45%;padding-top: 1em;}
header.floorpage h1 {width: 25%;padding-top: 0.1em;}
header h1 img {width: 100%;filter: drop-shadow(1px 1px 5px #000);fill: #fff;}
header h1 a:hover img {transform: scale(1.05);}
#header {z-index: +10;position: absolute; top: 0;left: 0;right: 0;}
#header .snsbuttons {position: absolute; top:150px;}
.floorpage #header .snsbuttons {top:70px;right: 0;}
.snsbuttons li {width: 3em;float: left}
.snsbuttons li a {width: 80%;margin: 0 auto;background: rgba(0,0,0,0.5);box-shadow: 0 0 5px #000;}
.snsbuttons li a img {width: 100%;}
.snsbuttons li a:hover img {transform: scale(1.1);}

#oldheader {position: absolute;top:0;left:0;right:0;z-index: +11;background: rgba(0,0,0,0.5);}
#oldheader a {display: inline;}
#oldheader .gnav-list a {line-height: 2;}
#oldheader h1.shop-logo-head {left: 5%;}
#oldheader .gnav ul li {display: inline;}
header #header div h1 {display: none;}

@media (max-width: 768px) {
	#oldheader .menu-expanded a {display: block;}
}

#spacing {position: absolute;width: 100%;padding-top: 84px;}
#spacing img {margin: 0 auto;z-index: 999999;}
#topslide {position: relative;z-index: 0;}
#topslide,#topslide li {height: 100%;}
#topslide ul {display: none;}
#topslide img {height: 100%;width: auto;}

#maincontent {padding: 1em 0;}
#maincontent > hr {border: none; height: 0.5em;background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="hsla(0, 0%, 65%, 0.6)"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"/><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"/></svg>');  background-size: 3px 3px; width: 85%;margin: 2em auto;display: block;}

section {}
section a img {width: 100%;}
section a:hover img {transform: scale(1.03);}

#left {margin-top: 2em;padding: 1em 0;}

#twitterArea {width: 100%;}
.twitter-timeline {height: 660px !important;width: 100%;}
#left #twitterArea iframe { width: 750px !important; }

footer {border-top: 1px solid #fff; color: #fff;}
p.copyright {font-weight:400;font-size:0.75em;text-align:center;line-height:2em;}

/*ページトップへ*/
.pagetop {display: block;position: fixed;z-index:+20;right: 0;bottom: 0.5em;}
.pagetop a {display: block;background-color: rgba(255,255,255,0.6);color: rgba(0,0,0,0.3); text-align: center;text-decoration: none;outline:none;width: 50px;height: 50px;line-height: 46px;font-size: 30px;border-radius: 3px 0 0 3px;border: 1px solid #ccc;border-right: none;}
.pagetop a:hover {color: #f90;background-color: rgba(255,255,255,1);border: 1px solid #fc0;border-right: none;}

/*汎用*/
.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) {
/*@@*/
	header h1 {width: 27%;}
	header.floorpage h1 {width: 27%;}
	#left iframe { width: 100%; }
/*@@*/
}

@media screen and (min-width: 750px) {
	/*@@*/
	header,#header,#topslide ul {height: 280px;}
	#header .snsbuttons {top:230px;font-size: 80%;}
	#spacing {padding-top: 124px;}
	header h1 {width: 22.5%;}
	header.floorpage h1 {width: 22.5%;}
	/*@@*/
}

@media screen and (min-width: 940px) {
	/*@@*/
	header,#header,#topslide ul {height: 350px;}
	header.floorpage,.floorpage #header {height: 150px;}
	#header .snsbuttons {top:300px;font-size: 90%;}
	.floorpage #header .snsbuttons {top:90px;font-size: 90%;}
	#spacing {padding-top: 159px;}
	header h1 {width: 18%;}
	header.floorpage h1 {width: 18%;}
	#header > div,#footer {min-width: 920px;}
	#content {width: 920px; margin: 0 auto;}
	#maincontent {float: right;width:600px;}
	#left {float:left;width: 300px;margin-top: 0;}
	.twitter-timeline {height: 460px !important;}
	/*@@*/
}

@media screen and (min-width: 1130px) {
	/*@@*/
	#header > div,#footer {min-width: 1110px;}
	#content {width: 1110px;}
	#maincontent {float: right;width:790px;}
	/*@@*/
}

@media screen and (min-width: 1320px) {
		/*@@*/
	#header > div,#footer {min-width: 1300px;}
	#content {width: 1300px;}
	#maincontent {float: right;width:980px;}
	/*@@*/
}