@charset "UTF-8";
@import "reset5.css";

html { height: 100%; }
body { color:#000; background: #fff; font-size: 14px; min-height: 100%; padding: 0; position: relative; font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ", meiryo, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; _font-family: "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; _height:100%; position: relative; }
* { word-wrap: break-word; }
.dummy { opacity: 0.2; }

/* !clearfix */
.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

/* !Links */
a:link { color:#000; text-decoration:none; }
a:visited { color:#000; text-decoration:none; }
a:hover { color:#bcbcbc; text-decoration:none; }
a:active { color:#bcbcbc; text-decoration:none; }

body { line-height: 1.5; position: relative; } 
#wrapper { padding: 200px 0 0; }

.fltL{ float: left; }
.fltR { float: right; margin-bottom: 20px; }
.mb10 { margin-bottom: 10px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.mb40 { margin-bottom: 40px; }
.mb50 { margin-bottom: 50px !important; }

html, body {  }
#loading { width: 100%; height: 100%; position: fixed; left: 0; top: 0; background: #000; z-index: 2; }
#loading #spinner { position: fixed; left: 50%; top: 50%; margin: -16px 0 0 -16px; background: #000; }
#intro { width: 100%; height: 100%; position: fixed; top: 0; left: 50%; margin: 0 0 0 -50%; min-width: 1020px; overflow: hidden; z-index: 1;  -webkit-transform: translate3d(0,0,0); background: #000;}
#intro img { display: block; }
#intro .fit {
  -webkit-transform : translate3d(0,0,0);
  -moz-transform    : translate3d(0,0,0);
  -ms-transform     : translate3d(0,0,0);
  transform         : translate3d(0,0,0);
}
#intro .story { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#intro .story.prev { margin-left: -100%; }
#intro .story.cur { margin-left: 0%; }
#intro .story.next { margin-left: 100%; }

/*
#intro .story.loc0 { margin-left: -100%; }
#intro .story.loc1 { margin-left: 0%; }
#intro .story.loc2 { margin-left: 100%; }
#intro .story.loc3 { margin-left: 200%; }
#intro .story.loc4 { margin-left: 300%; }
#intro .story.loc5 { margin-left: 400%; }
#intro .story.loc6 { margin-left: 500%; }
#intro .story.loc7 { margin-left: 600%; }
*/
#intro .story .scene { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; -webkit-transform: translate3d(0,0,0); }
#intro .story .pos0 { left: 0; top: 0%;  }
#intro .story .pos1 { left: 0; top: 0%; }


@-webkit-keyframes 'poprotate' {
  0%   { -webkit-transform: rotate( 0deg ); }
  100% { -webkit-transform: rotate( -360deg ); }
}


#intro #headerBlock img { display: block; }
#intro #headerBlock { position: absolute; left: 0px; bottom: -200px;/* 80px */ width: 100%; }
#intro #headerBlock h1 { position: absolute; left: 20px; bottom: 0; }
#intro #headerBlock small { position: absolute; bottom: 120px; left: 180px; }
#intro #headerBlock small01 { position: absolute; bottom: 48px; left: 180px; }
#intro #headerBlock .olbnr { position: absolute; bottom: 48px; left: 180px; overflow: hidden; width: 300px; }
#intro #headerBlock #sns { position: absolute; bottom: 15px; left: 180px; overflow: hidden; width: 300px; }
#intro #headerBlock #sns li { float: left; }


#intro h1 { position: absolute; left: 10px; bottom: -200px;/* 80px */ }
#intro .arwLeft { position: absolute; left: 10px; top: 50%; cursor: pointer; margin: -90px 0 0 0; }
#intro .arwRight { position: absolute; right: 10px; top: 50%; cursor: pointer; margin: -90px 0 0 0; }
#intro .arwUp { position: absolute; bottom: 150px; right: 10px; cursor: pointer; margin: -90px 0 0 0; }

#intro .arwLeft,
#intro .arwRight,
#intro .arwUp {
  -webkit-transition : 0.4s;
  -moz-transition    : 0.4s;
  -ms-transition     : 0.4s;
  transition         : 0.4s;
  -webkit-transform : scale3d(0,0,1);
  -moz-transform    : scale3d(0,0,1);
  -ms-transform     : scale(0,0);
  transform         : scale3d(0,0,1);
  display/*\**/: none\9;
}
#intro .arwLeft.show,
#intro .arwRight.show,
#intro .arwUp.show {
  -webkit-transition : 0.4s;
  -moz-transition    : 0.4s;
  -ms-transition     : 0.4s;
  transition         : 0.4s;
  -webkit-transform : scale3d(1,1,1);
  -moz-transform    : scale3d(1,1,1);
  -ms-transform     : scale(1,1);
  transform         : scale3d(1,1,1);
  display/*\**/: block\9;
}



#debug { position: absolute; top: 100px; left: 100px; padding: 10px; background: rgba(0,0,0,0.7); z-index: 2; }
#headerNav { height: 80px; position: absolute; left: 0px; bottom: -280px; width: 100%; height: 80px; background: #4b351e; padding: 0 1px 1px;  }
#headerNav nav { padding: 0 2px; margin: 0 0 0 -2px; }
#headerNav nav ul { width: 1085px; }
#headerNav nav li { float: left; }
#headerNav nav li a { display: block; background: #fff; }

#intro .story .scene .fit { position: absolute; top: 50%; left: 50%; margin: -350px 0 0 -550px; display: block; }
#container { width: 1000px; padding: 0 10px 10px; margin: 0 auto; }
#container section { padding: 100px 0 0; -webkit-font-smoothing: antialiased; }
#container section2 { padding: 100px 0 50px 0; -webkit-font-smoothing: antialiased; }
#container h2 { color: #000; font-weight: normal; }
#container h3 { font-weight: normal; margin: 0 0 8px; }
#container p { margin: 0 0 1em; }
#container .lead { color: #000; margin: 0 0 10px; }
#container img { display: block; }

.wrap { overflow: hidden; margin-bottom: 50px; }
.shopBox { width: 350; border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); position: relative; margin-bottom: 20px; }
.shopBox .selector { position: absolute; left: 50%; top: 50%; margin: 0px; width: 400px; height: 53px; display: none; }
.shopBox .selector li { float: left; }

#cm { overflow: hidden;  margin: 50 0 10px; }

#newarrival { display: block; }
#newarrival dl { position: relative; padding: 0 0 0 360px; min-height: 132px; margin: 0 0 100px; }
#newarrival dt { margin: 0 0 10px; }
#newarrival dl .photo { display: inline-block; position: absolute; left: 0; top: 0; }
#newarrival dl .newtxt { display: inline-block; position: absolute; left: 490px; top: 0; }

#aditems li { border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); width: 993px; margin: 0 0 20px; background: url(../images/contents/ad_bg.png); display: inline-block; }
#aditems li:hover { border: 1px solid #4b351e; }
#aditems li a { display: block; position: relative; }
#aditems li a:hover { color: #4b351e;}
#aditems li a .text { position: absolute; left: 610px; top: 10px; font-size: 12px; }
#aditems li a .arw { position: absolute; right: 9px; bottom: 10px; display: block; width: 60px; height: 60px; background: url(../images/common/arrow_right.png) no-repeat;  }
#aditems li a:hover .arw { background: url(../images/common/arrow_right_over.png) no-repeat;  }
#aditems li a .arwonline { position: absolute; right: 9px; bottom: 10px; display: block; width: 60px; height: 60px; background: url(../images/common/arrow_online.png) no-repeat;  }
#aditems li a:hover .arwonline { background: url(../images/common/arrow_online_over.png) no-repeat;  }

#link { display: block; }
#link .bnr { border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); width: 993px; background: #000; margin: 0 0 10px; }
#link .bnr:hover { border: 1px solid #333300; }
#link ul { overflow: hidden; margin: 0 0 20px; }
#link li { float: left; margin: 0 20px 0 0; width: 225px; }
#link li .capture { border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); background: #000; margin: 0 0 5px; }
#link li a:hover { color: #ccc; }
#link li a:hover .capture { border: 1px solid #333300; }

#link2 .bnr { border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); width: 993px; background: #000; margin: 0 0 10px; }
#link2 .bnr:hover { border: 1px solid #333300; }
#link2 ul { overflow: hidden; }
#link2 li { float: left; margin: 0 20px 0 0; width: 225px; }
#link2 li .capture { border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); background: #000; margin: 0 0 5px; }
#link2 li a:hover { color: #ccc; }
#link2 li a:hover .capture { border: 1px solid #333300; }

footer { font-size: 8px; margin: 0px 0 300px 0; position: relative; }
footer p { margin: 0 0 50px!important; }
footer ul { overflow: hidden; }
footer li { float: left; margin: 0 15px 0 0; }
footer li a { display: block; height: 12px; background: url(../images/common/icn_external.png) 0 0 no-repeat; padding: 0 0 0 15px; }
footer li a:hover { color: #333300; background-position: 0 -30px; }
footer small { position: absolute; right: 10px; bottom: 20px; }

#modal h4 span { position: absolute; left: 400px; font-size: 10px; color: #fff; }
#modal h3 span { position: absolute; left: 380px; font-size: 13px; color: #fff; }

#modal { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; z-index: 2; min-width: 1020px; background: url(../images/common/blank.png); }
#modal h2 span { display: block; margin: 0 0 10px; }
#modal img { display: block; }
#modal .arwLeft { position: fixed; left: 10px; top: 50%; cursor: pointer; margin: -30px 0 0 0; z-index: 2; }
#modal .arwRight { position: fixed; right: 10px; top: 50%; cursor: pointer; margin: -30px 0 0 0; z-index: 2;}
#modal .close { position: fixed; right: 10px; top: 10px; cursor: pointer; z-index: 2; cursor: pointer; }
#modal .blank { position: fixed; right: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; }
#modal .blank2 { position: absolute; right: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; }
#modal section { display: none; position: absolute; left: 150%; top: 100%; margin: 0 0 0 -409px; width: 900px; padding: 50px 0; z-index: 3; -webkit-transform-style: preserve-3d; overflow: hidden; }
#modal section.current { left: 50%; display: block; }
#modal section.next { left: 150%; }
#modal section.prev { left: -150%; }
#modal section h2 { margin: 0 0 45px; color: #fff; }
#modal section .items { overflow: hidden; width: 822px; }
#modal section .items .item { float: left; border: 1px solid #444; border: 1px solid rgba(255,255,255,0.2); position: relative; margin: 0 5px 5px 0; }
#modal section .items .item:hover { border: 1px solid #333300; }
#modal section .items .item ul { display: none; position: absolute; left: 50%; top: 50%; width: 94px; height: 33px; margin: -17px 0 0 -47px; }
#modal section .items .item ul li { float: left; }
#modal section .items .item ul li a { display: block; width: 47px; height: 33px; background: url(../images/common/cart_pin.png) no-repeat; }
#modal section .items .item ul li a.toShop { background-position: left top; }
#modal section .items .item ul li a.toShop:hover { background-position: left bottom; }
#modal section .items .item ul li a.toPin { background-position: right top; }
#modal section .items .item ul li a.toPin:hover { background-position: right bottom; }
#modal .arw {
  -webkit-transition : 0.4s;
  -moz-transition    : 0.4s;
  -ms-transition     : 0.4s;
  transition         : 0.4s;
  -webkit-transform : scale3d(0,0,1);
  -moz-transform    : scale3d(0,0,1);
  -ms-transform     : scale(0,0);
  transform         : scale3d(0,0,1);
  display/*\**/: none\9;
}
#modal .arw.show {
  -webkit-transition : 0.4s;
  -moz-transition    : 0.4s;
  -ms-transition     : 0.4s;
  transition         : 0.4s;
  -webkit-transform : scale3d(1,1,1);
  -moz-transform    : scale3d(1,1,1);
  -ms-transform     : scale(1,1);
  transform         : scale3d(1,1,1);
  display/*\**/: block\9;
}

#fancyBoxClose { display: none; position: fixed; right: 10px; top: 10px; cursor: pointer; z-index: 10000; }


body#popup { overflow: auto!important; }
#popWrapper { position: relative; overflow: hidden; min-width: 1100px; min-height: 820px;  }
#popContent { position: absolute; left: 50%; top:  50%; width: 1100px; height: 820px; margin: -410px 0 0 -550px; }
#popContent #spLogo { margin: 20px auto 0; width: 128px; display: block; }
#popContent #spBg { position: absolute; top: 0; left: 0; z-index: -1; }
#popContent .btns { width: 918px; position: absolute; top: 597px; left: 91px;}
#popContent .overlay { background: url(../images/common/blank.png); width: 1100px; height: 820px; position: absolute; left: 0; top: 0;  }
#popContent #spClose { position: absolute; right: 20px; top: 20px; cursor: pointer; }
#popContent small { position: absolute; width: 266px; bottom: 20px; left: 417px; }
#popContent #spQr { position: absolute; top: 50%; left: 50%; margin: -120px 0 0 -120px; }
#spModal { display: none; }
#spText { position: absolute; top: 167px; left: 160px; }

/* debug */
.check { position: absolute; top: 0; left: 0; border: solid 1px #fff; background: #f00; padding: 2px; font-size: 10px; line-height: 1;z-index: 100000; display: block; font-weight: bold; margin: -15px 0 0 0; }
#gaCount { position: fixed; left: 20px; top: 20px; z-index: 10000; padding: 5px; border: solid 2px #fff; background: #000;  }
#clickMode { position: fixed; left: 20px; top: 70px; z-index: 10000; padding: 5px; border: solid 2px #fff; background: #000;  }
#pageTrack { position: fixed; left: 20px; top: 120px; z-index: 10000; padding: 5px; border: solid 2px #fff; background: #000;  }