@charset "UTF-8";
/* ------------------------------------------------------------

  import

------------------------------------------------------------ */
/* ------------------------------------------------------------

  global

------------------------------------------------------------ */
html, body {
  width: 100%;
  height: 100%;
}

html.locked {
  overflow: hidden;sss
  -ms-touch-action: none;
  touch-action: none;
}

body {
  font-size: 10px;
}

/* for IE6 */
* html body {
  font-size: 62.5%;
}

/* for IE7 */
*:first-child + html body {
  font-size: 62.5%;
}

body {
  background: #312f2f;
  text-align: center;
  line-height: 1.6;
  color: #3a3635;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif, "Alegreya SC", serif;
  -webkit-text-size-adjust: none;
  overflow-x: hidden;
}

a {
  color: #3a3635;
  text-decoration: none;
}

input, button, textarea, select {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Osaka, sans-serif, "Alegreya SC", serif;
  outline: 0;
  border: 0px;
}

/* clearfix ------ */
.cf:after {
  display: block;
  visibility: hidden;
  content: ".";
  clear: both;
  height: 0;
  font-size: 0;
  line-height: 0;
}

/* container
------------------------------------------------------------ */
.container {
  width: 100%;
  height: 100%;
  position: relative;
}

/* header
------------------------------------------------------------ */
#global-header #header-innner {
  width: 100%;
  min-width: 320px;
  height: 50px;
  position: fixed;
  top: 0;
  left: 0;
  background: #312f2f;
  overflow: hidden;
  z-index: 1000;
}
#global-header #header-innner .logo {
  padding: 12px 0 0 10px;
  float: left;
}
#global-header #header-innner .logo img {
  width: auto;
  height: 23px;
}
#global-header #header-innner #log-out {
  float: right;
  padding: 10px 10px 0 0;
}
#global-header #header-innner #log-out a {
  display: block;
  width: 78px;
  height: 27px;
  padding: 1px 0 0;
  color: #fff;
  font-size: 1.2em;
  text-align: center;
  line-height: 27px;
  border: 1px solid #5f5958;
  border-radius: 2px;
  text-decoration: none;
}
#global-header #header-innner #log-out a:hover {
  color: #3a3635;
  border: 1px solid #fff;
  background: #fff;
}

/* nav
------------------------------------------------------------ */
#global-nav .nav {
  width: 190px;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#global-nav .nav #main-nav {
  padding: 60px 0 50px;
}
#global-nav .nav #main-nav :before, #global-nav .nav #main-nav :after {
  content: "";
  display: block;
  position: absolute;
}
#global-nav .nav #main-nav li {
  position: relative;
}
#global-nav .nav #main-nav li:nth-child(1) > a:before {
  background-image: url(../img/common/nav/nav-icon-scratch.png);
}
#global-nav .nav #main-nav li:nth-child(2) > a:before {
  background-image: url(../img/common/nav/nav-icon-list.png);
}
#global-nav .nav #main-nav li:nth-child(3) > a:before {
  background-image: url(../img/common/nav/nav-icon-gacha.png);
}
#global-nav .nav #main-nav li:nth-child(4) > a:before {
  background-image: url(../img/common/nav/nav-icon-list.png);
}
#global-nav .nav #main-nav li:nth-child(5) > a:before {
  background-image: url(../img/common/nav/nav-icon-customer.png);
}
#global-nav .nav #main-nav li:nth-child(5) > a.active:before {
  background-image: url(../img/common/nav/topic-icon-customer.png);
}
#global-nav .nav #main-nav li:nth-child(6) > a:before {
  background-image: url(../img/common/nav/nav-icon-help.png);
}
#global-nav .nav #main-nav li:nth-child(6) > a.active:before {
  background-image: url(../img/common/nav/topic-icon-help.png);
}
#global-nav .nav #main-nav li:nth-child(7) > a:before {
  background-image: url(../img/common/nav/nav-icon-guide.png);
}
#global-nav .nav #main-nav li:nth-child(7) > a.active:before {
  background-image: url(../img/common/nav/topic-icon-guide.png);
}
#global-nav .nav #main-nav li:nth-child(8) > a:before {
  background-image: url(../img/common/nav/nav-icon-manager.png);
}
#global-nav .nav #main-nav li:nth-child(8) > a.active:before {
  background-image: url(../img/common/nav/topic-icon-manager.png);
}
#global-nav .nav #main-nav li#mailform > a:before {
  background-image: url(../img/common/nav/nav-icon-contact.png);
}
#global-nav .nav #main-nav li#mailform > a.active:before {
  background-image: url(../img/common/nav/topic-icon-contact.png);
}
#global-nav .nav #main-nav li#help > a:before {
  background-image: url(../img/common/nav/nav-icon-help.png);
}
#global-nav .nav #main-nav li#help > a.active:before {
  background-image: url(../img/common/nav/nav-icon-help.png);
}
#global-nav .nav #main-nav li#applogin > p:before {
  background-image: url(../img/common/nav/nav-icon-app.png);
}
#global-nav .nav #main-nav li#applogin > p.active:before {
  background-image: url(../img/common/nav/topic-icon-app.png);
}
#global-nav .nav #main-nav li#applogin, #global-nav .nav #main-nav li#mailform {
  margin-top: 40px;
}
#global-nav .nav #main-nav li a {
  display: block;
  position: relative;
  height: 40px;
  padding: 0 0 0 40px;
  color: #c4c4c4;
  font-size: 1.4em;
  text-align: left;
  line-height: 40px;
  text-decoration: none;
}
#global-nav .nav #main-nav li a:before {
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#global-nav .nav #main-nav li p {
  display: block;
  position: relative;
  height: 40px;
  padding: 0 0 0 40px;
  color: #c4c4c4;
  font-size: 1.4em;
  text-align: left;
  line-height: 40px;
  text-decoration: none;
  cursor: pointer;
}
#global-nav .nav #main-nav li p:before {
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#global-nav .nav #main-nav li .hover, #global-nav .nav #main-nav li .open {
  background: #2a2828;
}
#global-nav .nav #main-nav li .active {
  background: #575757;
  color: #fff;
}
#global-nav .nav #main-nav li .sub-nav {
  height: 0;
  overflow: hidden;
}
#global-nav .nav #main-nav li .sub-nav.slide {
  height: auto;
}
#global-nav .nav #main-nav li .sub-nav li a {
  background: #484443;
}
#global-nav .nav #main-nav li .sub-nav li a.hover {
  z-index: 10;
}
#global-nav .nav #main-nav li .sub-nav li a:before {
  margin: -6px 0 0;
  width: 7px;
  height: 12px;
  display: none;
  top: 50%;
  left: 25px;
  background: url(../img/common/nav/nav-icon-arrow-left.png) no-repeat;
  background-size: 100% auto;
}
#global-nav .nav #main-nav li .sub-nav li:after {
  width: 100%;
  height: 1px;
  background: #3a3635;
  bottom: -1px;
  left: 0;
  z-index: 1;
}
#global-nav .nav #main-nav li .sub-nav-button, #global-nav .nav #main-nav li .sub-nav-button-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
}
#global-nav .nav #main-nav li .sub-nav-button div, #global-nav .nav #main-nav li .sub-nav-button-close div {
  position: absolute;
  top: 50%;
  left: 50%;
  cursor: pointer;
}
#global-nav .nav #main-nav li .sub-nav-button-close,
#global-nav .nav #main-nav li .sub-nav-button.open {
  display: none;
}
#global-nav .nav #main-nav li .sub-nav-button-close.open {
  display: block;
}
#global-nav .nav #main-nav li .sub-nav-button div {
  width: 7px;
  height: 12px;
  margin: -6px 0 0 -3px;
  background: url(../img/common/nav/nav-icon-arrow-left.png) no-repeat;
  background-size: contain;
}
#global-nav .nav #main-nav li .sub-nav-button-close div {
  width: 12px;
  height: 7px;
  margin: -3px 0 0 -5px;
  background: url(../img/common/nav/nav-icon-arrow-bottom.png) no-repeat;
  background-size: contain;
}
#global-nav .nav #main-nav > li:nth-child(6) {
  margin-top: 40px;
}

/* footer
------------------------------------------------------------ */
#global-footer p#pagetop {
  width: 44px;
  height: 44px;
  position: fixed;
  bottom: 0px;
  right: -80px;
  overflow: hidden;
  transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  z-index: 10;
}
#global-footer p#pagetop.scroll {
  right: 0px;
}
#global-footer p#pagetop a {
  padding: 0 0px 0 0;
  height: 44px;
  position: relative;
  display: block;
  color: #fff;
  font-size: 12px;
  text-align: right;
  line-height: 30px;
  text-decoration: none;
}
#global-footer p#pagetop a:before {
  width: 44px;
  height: 44px;
  display: block;
  position: absolute;
  top: 0px;
  right: 0px;
  background: url(../img/common/pagetop.png) no-repeat;
  background-size: contain;
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  content: "";
}
#global-footer p#copy {
  font-size: 1em;
}
.maps { height: 250px; width: 250px;}
/* ------------------------------------------------------------

  tablet

------------------------------------------------------------ */
@media screen and (max-width: 768px) {
  /* nav
  ------------------------------------------------------------ */
  #global-nav .nav #main-nav li .active:after {
    margin: -7px 0 0;
    width: 14px;
    height: 14px;
    background-color: #fff;
    top: 50%;
    right: -9px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
  }
}
/* ------------------------------------------------------------

  smartphone

------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  /* header
  ------------------------------------------------------------ */
  #global-header #header-innner .logo {
    padding: 15px 0 0 10px;
  }
  #global-header #header-innner .logo img {
    width: auto;
    height: 20px;
  }

  /* footer
  ------------------------------------------------------------ */
  #global-footer {
    min-width: 320px;
  }
  #global-footer p#copy {
    text-align: left;
  }
}