@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%;
position: relative;
height: 100%;
}
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: #04072b;
}
#thumbs {
width: 100%;
overflow: hidden;
background:#04072b;
}
#thumbs ul{
position: relative;
margin: 0 auto;
}
#thumbs li{
list-style-type: none;
float: left;
line-height: 0;
}
#thumbs li img{
width: 100%;
}
#loading {
position: fixed;
background: #000;
width: 100%;
height: 100%;
z-index:100000;
}
div#toolTip {
margin: 0 1em 0 0;
padding: .7em .5em;
color: #fff;
background: #000;
font-size: 11px;
z-index:9000;
}
#zoom {
display: none;
position: fixed;
background: #000;
z-index:100000;
width: 100%;
height: 100%;
left:0;
top:0;
}
#thumbs ul li a ,
#thumbs ul li span {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
#thumbs ul li a em,
#thumbs ul li span em{
height: 100%;
width: 100%;
position: absolute;
z-index:900;
display: block;
background:#000;
opacity:0;
}
#thumbs ul li a img,
#thumbs ul li span img{
position: relative;
z-index:600;
}
#tset {
height: 600px;
position: relative;
width: 960px;
margin: 0 auto;
}
#tset div, h1 {
position: absolute;
}
#tset h1{
width: 100%;
text-align: center;
top:290px;
z-index:80000;
}
#t1{
background:url(../images/opening/tree/t1.png) no-repeat;
width: 50px;
height: 600px;
left:73px;
top:0;
z-index:6000;
}
#t2{
background:url(../images/opening/tree/t2.png) no-repeat;
width: 30px;
height: 381px;
left:110px;
top:180px;
z-index:1000;
}
#t3{
background:url(../images/opening/tree/t3.png) no-repeat;
width: 17px;
height: 399px;
left:140px;
top:145px;
z-index:1000;
}
#t4{
background:url(../images/opening/tree/t4.png) no-repeat;
width: 24px;
height: 354px;
left:167px;
top:122px;
z-index:1000;
}
#t5{
background:url(../images/opening/tree/t5.png) no-repeat;
width: 28px;
height: 477px;
left:185px;
top:83px;
z-index:6000;
}
#t6{
background:url(../images/opening/tree/t6.png) no-repeat;
width: 21px;
height: 295px;
left:244px;
top:121px;
z-index:1000;
}
#t7{
background:url(../images/opening/tree/t7.png) no-repeat;
width: 17px;
height: 302px;
left:265px;
top:135px;
z-index:1000;
}
#t8{
background:url(../images/opening/tree/t8.png) no-repeat;
width: 26px;
height: 376px;
left:290px;
top:100px;
z-index:1000;
}
#t9{
background:url(../images/opening/tree/t9.png) no-repeat;
width: 32px;
height: 600px;
left:322px;
top:0;
z-index:9000;
}
#t11{
background:url(../images/opening/tree/t11.png) no-repeat;
width: 16px;
height: 350px;
left:370px;
top:105px;
z-index:6000;
}
#t12{
background:url(../images/opening/tree/t12.png) no-repeat;
width: 26px;
height: 344px;
left:575px;
top:125px;
z-index:1000;
}
#t13{
background:url(../images/opening/tree/t13.png) no-repeat;
width: 21px;
height: 422px;
left:600px;
top:46px;
z-index:6000;
}
#t14{
background:url(../images/opening/tree/t14.png) no-repeat;
width: 24px;
height: 372px;
left:620px;
top:100px;
z-index:1000;
}
#t15{
background:url(../images/opening/tree/t15.png) no-repeat;
width: 45px;
height: 602px;
left:660px;
top:0;
z-index:9000;
}
#t16{
background:url(../images/opening/tree/t16.png) no-repeat;
width: 28px;
height: 319px;
left:715px;
top:110px;
z-index:6000;
}
#t17{
background:url(../images/opening/tree/t17.png) no-repeat;
width: 13px;
height: 398px;
left:750px;
top:50px;
z-index:1000;
}
#t18{
background:url(../images/opening/tree/t18.png) no-repeat;
width: 20px;
height: 469px;
left:765px;
top:90px;
z-index:6000;
}
#t19{
background:url(../images/opening/tree/t19.png) no-repeat;
width: 32px;
height: 602px;
left:800px;
top:0;
z-index:6000;
}
#t20{
background:url(../images/opening/tree/t20.png) no-repeat;
width: 40px;
height: 464px;
left:835px;
top:100px;
z-index:1000;
}
#illu {
background:url(../images/opening/tree/img1.png) no-repeat;
width: 774px;
height: 557px;
left: 100px;
top: 20px;
z-index:5000;
}
#mararunga {
background:url(../images/opening/tree/mararunga.png) no-repeat;
width: 364px;
height: 166px;
left: 280px;
top:370px;
z-index:7000;
}
.h1title {
width: 250px;
}
.ovname {
color: #FFF;
text-decoration: none;
font-size:10px;
font-style: normal;
display: block;
line-height: 100%;
vertical-align: middle;
text-align: center;
width: 100%;
}
.shops {
width: 100%;
text-align: center;
}
.shops li{
list-style-type: none;
margin:0 20px;
}
.shops li a{
color:#FFF;
}
.shops li a:hover{
color:#9e7e00;
text-decoration: none;
}
#zoom a {
color:#FFF;
}
/* SP
-------------------------------------------------- */
@media screen and (max-width:640px){
body {
width: 100%;
}
.sp_none {
display: none;
}
#thumbs ul{
width:100%;
overflow: hidden;
}
header {
background: #000;
}
#thumbs li{
width: 33.33333333333333%;
}
#intro p ,
#end p {
text-align: center;
color: #FFF;
font-size:10px;
}
#intro ,
#end {
padding:40px 0;
}
.itmtitle {
padding:15px 0;
text-align: center;
}
.itmtitle img{
max-width:70%;
}
footer {
padding:40px 0;
}
footer p{
text-align:center;
}
footer p#cixlogo img{
width: 50px;
}
footer p#copyright{
color: #9e7e00;
font-size:10px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#tset {
margin:0;
width: 0px;
top:0;
}
header {
}
.sect {
width: 100%;
overflow: hidden;
clear: both;
}
#toolTip {
display: none;
}
#zoom img{
max-width:100%;
}
#product-name {
z-index:100010;
color:#FFF;
font-size:11px;
}
#product-img {
position: relative;
}
#product-close {
z-index:100010;
color:#FFF;
font-size:10px;
line-height: 1.1;
cursor: pointer;
width: 100%;
text-align: center;
display: block;
}
#zoom.isdedar #product-name p br{
display: none;
}
.shops {
padding:30px 0;
}
}
/* PCs
-------------------------------------------------- */
@media screen and (min-width:641px){
body {
min-width:960px;
}
.pc_none {
display: none;
}
header {
width: 100%;
position: relative;
display: table;
text-align: center;
background: #000;
}
section {
position: relative;
display: table;
width: 100%;
text-align: center;
}
.inbox {
display: table-cell;
width: 100%;
position: relative;
vertical-align: middle;
}
#intro ,
#end {
width: 100%;
background:#04072c;
}
#intro p ,
#end p {
text-align: center;
color: #FFF;
}
#thumbs ul{
height: 600px;
width: 960px;
}
#thumbs li{
width: 12.5%;
position: relative;
}
#thumbs li.ml2 {
margin-left:25%;
}
#visual {
position: fixed;
top:0;
left: 0;
z-index:10000;
}
#intro {
position: fixed;
top:0px;
left: 0;
opacity: 0;
z-index:20000;
}
#thumbs {
position: fixed;
top:0px;
left: 0;
z-index:30000;
}
#end {
position: fixed;
top:0px;
left: 0;
z-index:40000;
}
.itmtitle {
position: absolute;
left:37.5%;
z-index:3000;
width:25%;
}
.itmtitle img{
max-width:90%;
}
.ininbox {
position: relative;
margin:0 auto;
}
#scroll {
background: url(../images/scroll.png) no-repeat center;
width: 100px;
height: 50px;
position: fixed;
bottom:0px;
left:50%;
margin-left:-50px;
z-index:90000;
display: none;
cursor: pointer;
opacity: 0.5;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
#scroll.gotop {
background: url(../images/scrolltop.png) no-repeat center !important;
}
#scroll:hover {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
footer {
position: fixed;
bottom:5px;
left:0px;
width: 100%;
z-index:80000;
}
footer p#cixlogo{
right:50px;
bottom:0;
position: absolute;
}
footer p#cixlogo img{
width: 50px;
}
footer p#copyright{
color: #9e7e00;
font-size:10px;
text-align: right;
position: absolute;
left:50px;
bottom:10px;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}
#product-name {
z-index:100050;
position: absolute;
color:#FFF;
font-size:11px;
}
#zoom.isdedar #product-name {
width: 250px;
height: 240px;
padding:30px 20px 20px;
background:url(../images/items/smoke.png);
left:50%;
top:20%;
margin-left:-145px;
}
#zoom.isdedar #product-name p.dedartxt{
text-align: center;
margin-bottom:20px;
font-size:12px;
}
#zoom.isdedar #product-name p.dedarsec{
text-align: center;
}
#product-img {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
}
#product-close {
z-index:100080;
position: absolute;
color:#FFF;
right: 20px;
top:10px;
font-size:40px;
line-height: 41px;
cursor: pointer;
}
.shops {
padding:100px 0;
}
.shops li{
display: inline-block;
}
}