article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden], template { display: none; } html { background: #fff; color: #000; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: "Hiragino Kaku Gothic Pro","Yu Gothic","Meiryo",sans-serif; } body { margin: 0; } a { background: transparent; } a:focus { /*outline: thin dotted;*/ } a:hover, a:active { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } h2 { font-size: 1.5em; margin: 0.83em 0; } h3 { font-size: 1.17em; margin: 1em 0; } h4 { font-size: 1em; margin: 1.33em 0; } h5 { font-size: 0.83em; margin: 1.67em 0; } h6 { font-size: 0.75em; margin: 2.33em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } q:before, q:after { content: ''; content: none; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { vertical-align: middle; border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; white-space: normal; } button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; vertical-align: baseline; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } /* clear fix */ /* For modern browsers */ .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } /* For IE 6/7 (trigger hasLayout) */ .cf { zoom: 1; } /* hack */ /* hide text */ .hText { text-indent: 100%; white-space: nowrap; overflow: hidden; } *:first-child + html .hText { text-indent: -9999px; } /*$small:"only screen and (max-width:420px)"; $large:"only screen and (min-width:421px)";*/ html, body { width: 100%; height: 100%; } p { margin: 0; padding: 0; } h1 { margin: 0; padding: 0; } h1 img { vertical-align: top; } /******************************************************************************************** small *****/ @media only screen and (max-width: 700px) { html, body { font-size: 14px; } #cityContainer { visibility: hidden; position: fixed; top: 50%; left: 0; width: 58%; height: 100%; z-index: 10; } #cityContainer .city { position: absolute; top: 0; right: 0; margin-top: -9px; margin-right: 6px; background-image: url(../images/top/cities.png); background-repeat: no-repeat; background-size: 168px 274px; width: 168px; height: 10px; overflow: hidden; } #cityContainer .linkCity { position: absolute; top: 0; right: 0; margin-top: -14px; margin-right: 6px; } #cityContainer #omotesando { background-image: url(../images/top/omotesando.png); background-repeat: no-repeat; background-size: 170px 42px; width: 170px; height: 21px; overflow: hidden; } #cityContainer #hongkong { background-image: url(../images/top/hongkong.png); background-repeat: no-repeat; background-size: 150px 42px; width: 150px; height: 21px; overflow: hidden; } #cityContainer #singapore { background-image: url(../images/top/singapore.png); background-repeat: no-repeat; background-size: 150px 42px; width: 150px; height: 21px; overflow: hidden; } #cityContainer #london { background-image: url(../images/top/london.png); background-repeat: no-repeat; background-size: 99px 42px; width: 99px; height: 21px; overflow: hidden; } #cityContainer #k11 { background-image: url(../images/top/k11.png); background-repeat: no-repeat; background-size: 99px 42px; width: 99px; height: 21px; overflow: hidden; } #koffee { visibility: hidden; position: fixed; top: 50%; left: 58%; margin-top: -9px; margin-left: 6px; z-index: 9; } #koffee img { width: 81px; } #koffee h1 { width: 148px; height: 13px; overflow: hidden; } #copyright { position: fixed; bottom: 15px; right: 20px; z-index: 8; } #copyright img { width: 102px; } .bgImg { position: fixed; top: 50%; left: 50%; z-index: 1; opacity: 0; display: none; } } /*********************************************************************************************** large *****/ @media only screen and (min-width: 701px) { html, body { font-size: 14px; } #cityContainer { visibility: hidden; position: fixed; top: 50%; left: 0; width: 54%; height: 100%; z-index: 10; } #cityContainer .city { position: absolute; top: 0; right: 0; margin-top: -9px; margin-right: 12px; background-image: url(../images/top/cities.png); background-repeat: no-repeat; width: 295px; height: 18px; overflow: hidden; } #cityContainer .linkCity { position: absolute; top: 0; right: 0; margin-top: -18px; margin-right: 12px; cursor: pointer; } #cityContainer #omotesando { background-image: url(../images/top/omotesando.png); background-repeat: no-repeat; width: 298px; height: 36px; overflow: hidden; } #cityContainer #hongkong { background-image: url(../images/top/hongkong.png); background-repeat: no-repeat; width: 264px; height: 36px; overflow: hidden; } #cityContainer #singapore { background-image: url(../images/top/singapore.png); background-repeat: no-repeat; width: 264px; height: 36px; overflow: hidden; } #cityContainer #london { background-image: url(../images/top/london.png); background-repeat: no-repeat; width: 174px; height: 36px; overflow: hidden; } #cityContainer #k11 { background-image: url(../images/top/k11.png); background-repeat: no-repeat; width: 174px; height: 36px; overflow: hidden; } #koffee { visibility: hidden; position: fixed; top: 50%; left: 54%; margin-top: -9px; margin-left: 12px; z-index: 9; } #koffee h1 { width: 148px; height: 24px; overflow: hidden; } #copyright { position: fixed; bottom: 20px; right: 30px; z-index: 8; } #copyright img { width: 160px; } .bgImg { position: fixed; top: 50%; left: 50%; z-index: 1; display: none; opacity: 0; } }