@charset "utf-8";
/* Reset Stylesheet
-------------------------------------------------- */
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
body {line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block;}
nav ul { list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none;}
a {margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;}
ins {background-color:#ff9;color:#000;text-decoration:none;}
mark {background-color:#ff9;color:#000; font-style:italic;font-weight:bold;}
del {text-decoration: line-tshrough;}
abbr[title], dfn[title] {border-bottom:1px dotted;cursor:help;}
table { border-collapse:collapse;border-spacing:0;}
hr {display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0;padding:0;}
input, select { vertical-align:middle;}
a {outline: none;}
/* base settings
-------------------------------------------------- */
html {
-webkit-text-size-adjust: 100%;
width: 100%;
height: 100%;
/* overflow: hidden; */
}
body {
font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック', 'MS PGothic',sans-serif;
line-height: 1.8;
width: 100%;
height: 100%;
position: relative;
font-size:12px;
background: #FFF;
}
#cassinaixc {
z-index:2000;
}
#navis li a{
font-family : 'HelveticaNeue-CondensedBold', 'HelveticaNeueBoldCondensed', 'HelveticaNeue-Bold-Condensed', 'Helvetica Neue', arial, Verdana;
font-weight: bold;
font-stretch: condensed;
font-size:15px;
text-decoration: none;
color:#000;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
}
#navis li a:hover,
#navis li a.current{
color:#999;
transition: all 0.2s;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
}
body.contents #content {
position: relative;
z-index:1000;
left:0;
top:0;
/* width: 100%; */
}
body.contents #ctrl {
left:0px;
top:0;
z-index:3000;
width:100%;
}
body.contents h1 {
left:65px;
}
body.contents #theme {
}
body.contents #navis {
}
body.contents #navis li{
list-style-type: none;
float: left;
margin-right: 20px;
}
body.contents #cbox {
width: 100%;
height: 100px;
position: absolute;
overflow: hidden;
left:0;
top:0;
z-index:2200;
}
body.contents #c {
left:50px;
top:0;
/* width:100%;
height: 100%; */
position: absolute;
z-index:500;
min-width:960px;
}
body.contents #products-box {
overflow: hidden;
position: relative;
width: 100%;
/* top:120px; */
}
body.contents #products {
width: 100%;
/* margin:0 auto; */
position: relative;
left:0;
top:0;
}
body.contents #products li{
float: left;
list-style-type: none;
overflow: hidden;
overflow: hidden;
}
body.contents #products li a.detlink,
body.contents #products li span.nolink{
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
display: block;
text-decoration: none;
cursor: pointer;
}
body.contents #products li a.detlink .prodclm ,
body.contents #products li span.nolink .prodclm {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
z-index:200;
text-decoration: none;
}
body.contents #products li span.nolink:hover .prodclm ,
body.contents #products li a.detlink:hover .prodclm {
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
body.contents #products li dl.prod-det{
position: relative;
z-index:200;
vertical-align: middle;
text-decoration: none;
width: 100%;
}
body.contents #products li dl.prod-det dt,
body.contents #products li dl.prod-det dd {
font-size:11px;
text-align: center;
text-decoration: none;
width: 100%;
margin-bottom: 10px;
}
body.contents #products li a.detlink dt,
body.contents #products li a.detlink dd,
body.contents #products li a.detlink dl.prod-det {
text-decoration: none;
}
body.contents #products li a.detlink .link-detail {
position: absolute;
z-index:300;
display: block;
left:0;
text-align: center;
font-size:12px;
bottom:30px;
width: 100%;
color:#FFF;
}
body.contents #products li span.img{
width: 100%;
z-index:100;
left:0;
top:0;
}
body.contents #products li span.img img{
width: 100%;
}
#slideL ,
#slideR {
position: absolute;
top:0;
text-align: center;
color: #000;
height: 100%;
width:60px;
z-index:2000;
line-height: 3000px;
font-size:50px;
cursor: pointer;
background: #FFF;
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
}
#slideL {left:0;}
#slideR {right:0;}
#slideL:hover ,
#slideR:hover {
opacity: 0.6;
filter: alpha(opacity=60);
-moz-opacity: 0.6;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
}
#slideL {
display: none;
}
#products-wrap {
position: relative;
margin: 0 auto;
overflow: hidden;
}
.link-detail {
display: none;
}
.gallerys {
width: 90%;
padding:0 5%;
position: absolute;
bottom:10px;
text-align: center;
z-index:2000;
}
.gallerys a{
float:left;
border:solid 1px #000;
margin:1px 1px 1px;
width: 40px;
height: 40px;
display: block;
overflow: hidden;
}
.gallerys a:hover{
border:solid 1px #f19a9a;
}
.gallerys a img{
width: 40px;
height: 40px;
}
#imgzoom {
position: absolute;
z-index:80000;
display: none;
background:#000;
padding:10px;
width: 400px;
overflow: hidden;
box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2);
}
#imgzoom img{
width: 400px;
}
#imgzoom-img {
text-align: center;
padding:0 0 10px;
line-height:0;
}
#imgzoom-txt {
text-align: center;
color:#FFF;
font-size:12px;
}
/* SP
-------------------------------------------------- */
@media screen and (max-width:640px){
body.contents #c {
left:-5px;
}
.sp_none {
display: none;
}
#cassinaixc {
position: relative;
text-align: right;
padding: 40px 15px 20px;
}
#cassinaixc img{
width: 80px;
}
body.contents #ctrl {
position: relative;
}
body.contents #theme {
top:10px;
text-align: right;
}
body.contents #theme img {
width: 100px;
margin:10px;
}
body.contents h1 {
position:relative;
margin-top:10px;
left:0px;
}
body.contents h1 img{
margin-left:15px;
}
body.contents #navis {
position: relative;
padding:10px 20px 15px;
width: auto;
overflow: hidden;
}
body.contents #navis li:before {
content:"> ";
}
#products-wrap {
padding:0 10px;
}
body.contents #products li{
width: 100%;
margin:0 0 10px;
}
#slideL, #slideR {
display: none;
}
}
/* PC
-------------------------------------------------- */
@media screen and (min-width:641px){
.pc_none {
display: none;
}
html {
min-width:960px;
min-height:600px;
}
body {
min-width:960px;
min-height:600px;
}
#cassinaixc {
position: absolute;
right:65px;
bottom:25px;
}
body.contents #content {
display: table;
padding:0 60px;
height: 100%;
}
body.contents #products-box {
display: table-cell;
vertical-align: middle;
}
body.contents #ctrl {
position: absolute;
}
body.contents #theme {
top:50px;
position: absolute;
right:65px;
}
body.contents #theme img {
width: 190px;
}
body.contents h1 {
top:80px;
position:absolute;
}
body.contents #navis {
position: absolute;
width: 730px;
top:80px;
left:280px;
}
body.contents #products li{
width: 280px;
margin:0 5px;
}
body.contents #products li span.img{
position: absolute;
}
body.contents #products li a.detlink .prodclm ,
body.contents #products li span.nolink .prodclm {
background: url(../images/smokeBlack80.png);
display: table;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
}
body.contents #products li dl.prod-det dt,
body.contents #products li dl.prod-det dd {
color:#FFF;
}
body.contents #products li dl.prod-det{
display: table-cell;
padding:0 5%;
}
}