@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

@-moz-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes fadein-sub {
  0% {
    opacity: 0;
    -moz-transform: translateX(80px);
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes fadein-sub {
  0% {
    opacity: 0;
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes fadein-sub {
  0% {
    opacity: 0;
    -moz-transform: translateX(80px);
    -ms-transform: translateX(80px);
    -webkit-transform: translateX(80px);
    transform: translateX(80px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.show {
  -moz-animation: fadein 1s linear 0s 1;
  -webkit-animation: fadein 1s linear 0s 1;
  animation: fadein 1s linear 0s 1;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

html, body {
  width: 100%;
  height: 100%;
  font-size: 10px;
  font-family: Helvetica, Hiragino Sans, "ヒラギノ角ゴシック", Hiragino Kaku Gothic ProN, "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.container {
  position: relative;
  margin: 0 auto;
  width: 1024px;
  height: 661px;
  overflow: hidden;
  z-index: 10;
}

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

.error {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 510px;
  height: 380px;
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.5);
  text-align: center;
  z-index: 10000;
}
.error h2 {
  margin-top: 36px;
  margin-left: -30px;
  color: #000;
  font-size: 2.0rem;
  font-weight: bold;
}
.error h2 img {
  vertical-align: sub;
  margin-right: 10px;
}
.error .main-massage {
  margin-top: 35px;
  color: #f44336;
  font-size: 1.6rem;
  line-height: 1.2;
}
.error .main-massage.no-ruby {
  margin-top: 38px;
  line-height: 1.4;
}
.error .sub-message {
  margin-top: 20px;
  margin-bottom: 30px;
  color: #757575;
  font-size: 1.6rem;
  line-height: 1.2;
}
.error .sub-message.no-ruby {
  margin-top: 40px;
  line-height: 1.4;
}
.error a {
  color: #2196f3;
  font-size: 1.6rem;
  font-weight: bold;
}
.error .close-btn {
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 64px;
  color: #2196f3;
  font-size: 2.1rem;
  font-weight: bold;
  text-decoration: none;
  line-height: 64px;
  border-top: solid 1px #e0e0e0;
}

.town-loader {
  position: absolute;
  top: 304px;
  left: 50%;
  margin-left: -32px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
}
.town-loader .preloader-wrapper {
  margin: 6px;
  width: 52px !important;
  height: 52px !important;
}
.town-loader .spinner-white, .town-loader .spinner-white-only {
  border-color: #fff;
}
.town-loader *, .town-loader *:before, .town-loader *:after {
  box-sizing: border-box;
}
.town-loader .center, .town-loader .center-align {
  text-align: center;
}
.town-loader .left {
  float: left !important;
}
.town-loader .right {
  float: right !important;
}
.town-loader .circle {
  border-radius: 50%;
}

/*
    @license
    Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
    This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
    The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
    The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
    Code distributed by Google as part of the polymer project is also
    subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 */
/**************************/
/* STYLES FOR THE SPINNER */
/**************************/
/*
 * Constants:
 *      STROKEWIDTH = 3px
 *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
 *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
 *      ARCSTARTROT = 216 degrees (how much the start location of the arc
 *                                should rotate each time, 216 gives us a
 *                                5 pointed star shape (it's 360/5 * 3).
 *                                For a 7 pointed star, we might do
 *                                360/7 * 3 = 154.286)
 *      CONTAINERWIDTH = 28px
 *      SHRINK_TIME = 400ms
 */
.preloader-wrapper {
  display: inline-block;
  position: relative;
  width: 48px;
  height: 48px;
}

.preloader-wrapper.small {
  width: 36px;
  height: 36px;
}

.preloader-wrapper.big {
  width: 64px;
  height: 64px;
}

.preloader-wrapper.active {
  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
  -webkit-animation: container-rotate 1568ms linear infinite;
  animation: container-rotate 1568ms linear infinite;
}

@-webkit-keyframes container-rotate {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes container-rotate {
  to {
    transform: rotate(360deg);
  }
}
.spinner-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-color: #26a69a;
}

.spinner-blue, .spinner-blue-only {
  border-color: #4285f4;
}

.spinner-red, .spinner-red-only {
  border-color: #db4437;
}

.spinner-yellow, .spinner-yellow-only {
  border-color: #f4b400;
}

.spinner-green, .spinner-green-only {
  border-color: #0f9d58;
}

/**
 * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
 *
 * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
 * guarantee that the animation will start _exactly_ after that value. So we avoid using
 * animation-delay and instead set custom keyframes for each color (as redundant as it
 * seems).
 *
 * We write out each animation in full (instead of separating animation-name,
 * animation-duration, etc.) because under the polyfill, Safari does not recognize those
 * specific properties properly, treats them as -webkit-animation, and overrides the
 * other animation rules. See https://github.com/Polymer/platform/issues/53.
 */
.active .spinner-layer.spinner-blue {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-red {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-yellow {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-green {
  /* durations: 4 * ARCTIME */
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer, .active .spinner-layer.spinner-blue-only, .active .spinner-layer.spinner-red-only, .active .spinner-layer.spinner-yellow-only, .active .spinner-layer.spinner-green-only {
  /* durations: 4 * ARCTIME */
  opacity: 1;
  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
  /* 0.5 * ARCSIZE */
  /* 1   * ARCSIZE */
  /* 1.5 * ARCSIZE */
  /* 2   * ARCSIZE */
  /* 2.5 * ARCSIZE */
  /* 3   * ARCSIZE */
  /* 3.5 * ARCSIZE */
  /* 4   * ARCSIZE */
  12.5% {
    -webkit-transform: rotate(135deg);
  }
  25% {
    -webkit-transform: rotate(270deg);
  }
  37.5% {
    -webkit-transform: rotate(405deg);
  }
  50% {
    -webkit-transform: rotate(540deg);
  }
  62.5% {
    -webkit-transform: rotate(675deg);
  }
  75% {
    -webkit-transform: rotate(810deg);
  }
  87.5% {
    -webkit-transform: rotate(945deg);
  }
  to {
    -webkit-transform: rotate(1080deg);
  }
}
@keyframes fill-unfill-rotate {
  /* 0.5 * ARCSIZE */
  /* 1   * ARCSIZE */
  /* 1.5 * ARCSIZE */
  /* 2   * ARCSIZE */
  /* 2.5 * ARCSIZE */
  /* 3   * ARCSIZE */
  /* 3.5 * ARCSIZE */
  /* 4   * ARCSIZE */
  12.5% {
    transform: rotate(135deg);
  }
  25% {
    transform: rotate(270deg);
  }
  37.5% {
    transform: rotate(405deg);
  }
  50% {
    transform: rotate(540deg);
  }
  62.5% {
    transform: rotate(675deg);
  }
  75% {
    transform: rotate(810deg);
  }
  87.5% {
    transform: rotate(945deg);
  }
  to {
    transform: rotate(1080deg);
  }
}
@-webkit-keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blue-fade-in-out {
  from {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  26% {
    opacity: 0;
  }
  89% {
    opacity: 0;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@keyframes red-fade-in-out {
  from {
    opacity: 0;
  }
  15% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  51% {
    opacity: 0;
  }
}
@-webkit-keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@keyframes yellow-fade-in-out {
  from {
    opacity: 0;
  }
  40% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  76% {
    opacity: 0;
  }
}
@-webkit-keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes green-fade-in-out {
  from {
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */
.gap-patch {
  position: absolute;
  top: 0;
  left: 45%;
  width: 10%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.gap-patch .circle {
  width: 1000%;
  left: -450%;
}

.circle-clipper {
  display: inline-block;
  position: relative;
  width: 50%;
  height: 100%;
  overflow: hidden;
  border-color: inherit;
}

.circle-clipper .circle {
  width: 200%;
  height: 100%;
  border-width: 5px;
  /* STROKEWIDTH */
  border-style: solid;
  border-color: inherit;
  border-bottom-color: transparent !important;
  border-radius: 50%;
  -webkit-animation: none;
  animation: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
}

.circle-clipper.left .circle {
  left: 0;
  border-right-color: transparent !important;
  -webkit-transform: rotate(129deg);
  transform: rotate(129deg);
}

.circle-clipper.right .circle {
  left: -100%;
  border-left-color: transparent !important;
  -webkit-transform: rotate(-129deg);
  transform: rotate(-129deg);
}

.active .circle-clipper.left .circle {
  /* duration: ARCTIME */
  -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
  /* duration: ARCTIME */
  -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
  animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes left-spin {
  from {
    -webkit-transform: rotate(130deg);
  }
  50% {
    -webkit-transform: rotate(-5deg);
  }
  to {
    -webkit-transform: rotate(130deg);
  }
}
@keyframes left-spin {
  from {
    transform: rotate(130deg);
  }
  50% {
    transform: rotate(-5deg);
  }
  to {
    transform: rotate(130deg);
  }
}
@-webkit-keyframes right-spin {
  from {
    -webkit-transform: rotate(-130deg);
  }
  50% {
    -webkit-transform: rotate(5deg);
  }
  to {
    -webkit-transform: rotate(-130deg);
  }
}
@keyframes right-spin {
  from {
    transform: rotate(-130deg);
  }
  50% {
    transform: rotate(5deg);
  }
  to {
    transform: rotate(-130deg);
  }
}
html {
  background-color: #a2d614;
}

.container {
  background-image: url("../images/k/bg.jpg");
  background-size: 1024px 704px;
  background-repeat: no-repeat;
}
.container.loaded {
  background-image: url("../images/k/bg_blured.jpg");
}

.wrapper {
  padding-bottom: 17px;
  opacity: 0;
}

.wrapper-bottom {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding-top: 19px;
  padding-bottom: 12px;
  box-shadow: inset 0px 0px 50px 13px rgba(209, 209, 209, 0.5);
  opacity: 0;
}

h1 {
  height: 48px;
  color: #000;
  font-size: 2.1rem;
  font-weight: bold;
  text-align: center;
  line-height: 48px;
}

.main-links {
  text-align: center;
  white-space: nowrap;
}
.main-links.no-middle {
  margin-top: 44px;
}
.main-links li {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0 15px;
  width: 310px;
  height: 342px;
  border-radius: 10px;
  box-shadow: 4px 4px 2px 0px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.main-links li img {
  width: 310px;
  height: 342px;
  border-radius: 10px;
}

.middle-link {
  display: block;
  margin-bottom: 12px;
  width: 100%;
  height: 100px;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
}
.middle-link img {
  border-radius: 10px;
}

.sub-links {
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.sub-links.many {
  overflow-x: auto;
}
.sub-links.many li {
  margin-right: 20px !important;
}
.sub-links.many li:first-child {
  margin-right: 14px !important;
}
.sub-links.many li:last-child {
  margin-right: 14px !important;
}
.sub-links li {
  display: inline-block;
  margin-right: 40px;
  box-sizing: border-box;
  width: 216px;
  height: 105px;
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  -moz-animation: fadein-sub 0.4s linear 0s 1;
  -webkit-animation: fadein-sub 0.4s linear 0s 1;
  animation: fadein-sub 0.4s linear 0s 1;
  -moz-animation-fill-mode: both;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.sub-links li:first-child {
  margin-left: 20px;
}
.sub-links li:last-child {
  margin-right: 20px;
}
.sub-links li:nth-child(2), .sub-links li:nth-child(6) {
  background-position: -216px 0;
}
.sub-links li:nth-child(3), .sub-links li:nth-child(7) {
  background-position: -432px 0;
}
.sub-links li:nth-child(4), .sub-links li:nth-child(8) {
  background-position: -648px 0;
}
.sub-links li:nth-child(1) {
  animation-delay: 0;
}
.sub-links li:nth-child(2) {
  animation-delay: 0.1s;
}
.sub-links li:nth-child(3) {
  animation-delay: 0.2s;
}
.sub-links li:nth-child(4) {
  animation-delay: 0.3s;
}
.sub-links li:nth-child(5) {
  animation-delay: 0.4s;
}
.sub-links li img {
  width: 216px;
  height: 105px;
  border-radius: 10px;
}