@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=EB+Garamond);
@import url(http://fonts.googleapis.com/css?family=Bentham);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
/* ------------------------------------------------------------
 reset
------------------------------------------------------------ */
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: 400;
  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, menu, nav, section, summary {
  display: block; }

/* ------------------------------------------------------------
 Base
------------------------------------------------------------ */
html, body {
  height: 100%;
  background-color: #000; }

img {
  vertical-align: bottom; }

a, a:focus {
  outline: none; }

body {
  font-size: 14px;
  color: #111;
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", sans-serif; }

/* ------------------------------------------------------------
 Layout
------------------------------------------------------------ */
#wrapper {
  position: relative;
  width: 100%;
  min-width: 1150px;
  margin: 0 auto;
  overflow: hidden;
  background: url("../img/common/main_bg.png") center top #000; }

#container {
  position: relative;
  left: 50%;
  margin-left: -1000px;
  width: 2000px; }

section.contact {
  padding-top: 145px;
  height: 592px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  background: url("../img/common/contact_bg.jpg") center top #000; }
  section.contact p {
    padding-bottom: 46px; }
    section.contact p a {
      position: relative;
      width: 493px;
      height: 65px;
      display: block;
      margin: 0 auto;
      overflow: hidden;
      background: url("../img/common/contact_btn_bg2.png") no-repeat; }
      section.contact p a img {
        position: relative;
        top: 0;
        opacity: 0;
        z-index: 2;
        -webkit-transition-duration: 200ms;
        -moz-transition-duration: 200ms;
        -ms-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        transition-duration: 200ms;
        -webkit-transition-property: opacity;
        -moz-transition-property: opacity;
        -ms-transition-property: opacity;
        -o-transition-property: opacity;
        transition-property: opacity; }
      section.contact p a span {
        position: absolute;
        top: 0;
        left: 50%;
        width: 0;
        height: 65px;
        background: #fff;
        z-index: 1;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -ms-transition-property: all;
        -o-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: 150ms;
        -moz-transition-duration: 150ms;
        -ms-transition-duration: 150ms;
        -o-transition-duration: 150ms;
        transition-duration: 150ms;
        -webkit-transform: skewX(-35deg);
        -moz-transform: skewX(-35deg);
        -ms-transform: skewX(-35deg);
        -o-transform: skewX(-35deg);
        transform: skewX(-35deg);
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
        -ms-transform-origin: center center;
        -o-transform-origin: center center;
        transform-origin: center center; }
      section.contact p a:hover {
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -ms-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out; }
        section.contact p a:hover img {
          opacity: 1; }
        section.contact p a:hover span {
          left: -20px;
          width: 534px; }

header.global-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 200; }
  header.global-header div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 16px 26px;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto; }
    header.global-header div:after {
      content: "";
      display: block;
      clear: both; }
    header.global-header div p:nth-of-type(1) {
      float: left; }
    header.global-header div p:nth-of-type(2) {
      position: relative;
      float: right; }
      header.global-header div p:nth-of-type(2) a {
        display: block;
        width: 50px;
        height: 50px;
        margin-top: 4px;
        margin-right: -6px; }

header.sub-header {
  overflow: hidden;
  height: 830px;
  background: url("../img/common/bg_tri_up.png") center bottom no-repeat; }
  header.sub-header > p {
    position: absolute;
    width: 2000px;
    height: 788px;
    z-index: 1;
    background: url("../img/common/sub_header_frame.png") left top no-repeat; }
  header.sub-header > div:nth-of-type(1) {
    position: relative;
    z-index: 2; }
    header.sub-header > div:nth-of-type(1) h1 {
      position: absolute;
      top: 123px;
      left: 0;
      width: 100%;
      text-align: center; }
    header.sub-header > div:nth-of-type(1) > p {
      position: absolute;
      top: 0;
      width: 100%;
      height: 150px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box; }
      header.sub-header > div:nth-of-type(1) > p > span {
        display: block;
        position: absolute;
        overflow: hidden; }
        header.sub-header > div:nth-of-type(1) > p > span:nth-of-type(1) {
          top: 378px;
          left: 354px; }
        header.sub-header > div:nth-of-type(1) > p > span:nth-of-type(2) {
          top: 0;
          left: 1365px; }
  header.sub-header > div:nth-of-type(2) {
    position: relative;
    top: -732px;
    -webkit-transform: scaleY(0.625);
    -moz-transform: scaleY(0.625);
    -ms-transform: scaleY(0.625);
    -o-transform: scaleY(0.625);
    transform: scaleY(0.625); }
    header.sub-header > div:nth-of-type(2) p {
      position: absolute;
      top: 0;
      left: 0;
      width: 2000px;
      height: 2000px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -o-box-sizing: border-box;
      box-sizing: border-box;
      background: #000;
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      overflow: hidden; }
      header.sub-header > div:nth-of-type(2) p span {
        display: block;
        position: absolute;
        top: -130px;
        left: -130px;
        width: 2000px;
        height: 2000px;
        overflow: hidden;
        -webkit-transform: rotate(-45deg) scaleY(1.6);
        -moz-transform: rotate(-45deg) scaleY(1.6);
        -ms-transform: rotate(-45deg) scaleY(1.6);
        -o-transform: rotate(-45deg) scaleY(1.6);
        transform: rotate(-45deg) scaleY(1.6); }
        header.sub-header > div:nth-of-type(2) p span img {
          position: absolute;
          bottom: 0;
          left: 0; }

nav.global-nav {
  position: fixed;
  top: 0;
  width: 100%;
  height: 0;
  z-index: 300;
  overflow: hidden;
  background: url("../img/common/gnav_bg2.png") center center no-repeat;
  background-color: rgba(0, 0, 0, 0.98); }
  nav.global-nav ul {
    position: relative;
    width: 1100px;
    height: 104px;
    top: 50%;
    margin: -52px auto 0;
    opacity: 0; }
    nav.global-nav ul:after {
      content: "";
      display: block;
      clear: both; }
    nav.global-nav ul li {
      float: left;
      margin-right: 105px; }
      nav.global-nav ul li:nth-of-type(1) {
        background: url("../img/common/gnav_top_on.png") left top no-repeat; }
      nav.global-nav ul li:nth-of-type(2) {
        background: url("../img/common/gnav_about_on.png") left top no-repeat; }
      nav.global-nav ul li:nth-of-type(3) {
        background: url("../img/common/gnav_member_on.png") left top no-repeat; }
      nav.global-nav ul li:nth-of-type(4) {
        background: url("../img/common/gnav_shop_on.png") left top no-repeat;
        margin: 0; }
  nav.global-nav a img {
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-property: opacity;
    -moz-transition-property: opacity;
    -ms-transition-property: opacity;
    -o-transition-property: opacity;
    transition-property: opacity; }
  nav.global-nav a:hover img {
    opacity: 0; }
  nav.global-nav p.close {
    position: relative;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto; }
    nav.global-nav p.close a {
      position: absolute;
      top: -30px;
      right: 20px;
      display: block;
      width: 50px;
      height: 50px;
      background: url("../img/common/gnav_close_on.png") left top no-repeat; }

footer > div {
  height: 100px;
  position: relative;
  width: 1150px;
  margin: 0 auto; }
  footer > div > p {
    position: relative;
    top: 0;
    text-align: center; }
    footer > div > p > span {
      width: 100%;
      position: absolute;
      top: -20px;
      display: block; }
      footer > div > p > span img {
        position: relative;
        top: 0;
        z-index: 1; }
    footer > div > p a {
      position: relative;
      top: 5px;
      z-index: 2; }
      footer > div > p a + span img {
        -webkit-transition-duration: 200ms;
        -moz-transition-duration: 200ms;
        -ms-transition-duration: 200ms;
        -o-transition-duration: 200ms;
        transition-duration: 200ms;
        -webkit-transition-timing-function: ease-out;
        -moz-transition-timing-function: ease-out;
        -ms-transition-timing-function: ease-out;
        -o-transition-timing-function: ease-out;
        transition-timing-function: ease-out;
        -webkit-transition-property: all;
        -moz-transition-property: all;
        -ms-transition-property: all;
        -o-transition-property: all;
        transition-property: all; }
      footer > div > p a:hover + span img {
        -webkit-transition-duration: 100ms;
        -moz-transition-duration: 100ms;
        -ms-transition-duration: 100ms;
        -o-transition-duration: 100ms;
        transition-duration: 100ms;
        -webkit-transform: translateY(-7px);
        -moz-transform: translateY(-7px);
        -ms-transform: translateY(-7px);
        -o-transform: translateY(-7px);
        transform: translateY(-7px); }
  footer > div > span {
    display: block;
    position: absolute;
    left: 0;
    bottom: 42px; }
  footer > div > ul {
    position: absolute;
    right: 0;
    bottom: 25px; }
    footer > div > ul:after {
      content: "";
      display: block;
      clear: both; }
    footer > div > ul li {
      float: left;
      margin-left: 8px;
      background-repeat: no-repeat;
      background-position: left top; }
      footer > div > ul li:nth-of-type(1) {
        background-image: url("../img/common/f_share_fb_on.png"); }
      footer > div > ul li:nth-of-type(2) {
        background-image: url("../img/common/f_share_yt_on.png"); }
      footer > div > ul li:nth-of-type(3) {
        background-image: url("../img/common/f_share_sv_on.png"); }
      /*footer > div > ul li:nth-of-type(4) {
        background-image: url("../img/common/f_share_yt_on.png"); }
      footer > div > ul li:nth-of-type(5) {
        background-image: url("../img/common/f_share_sc_on.png"); }
      footer > div > ul li a {
        display: block; }*/

#pagetop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 99999;
  background-color: #000;
  overflow: hidden;
  -webkit-perspective: 500px;
  -moz-perspective: 500px;
  perspective: 500px; }
  #pagetop div {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-left: -116px;
    margin-top: -101px;
    width: 232px;
    height: 202px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translateZ(-116px) rotateX(0);
    -moz-transform: translateZ(-116px) rotateX(0);
    -ms-transform: translateZ(-116px) rotateX(0);
    -o-transform: translateZ(-116px) rotateX(0);
    transform: translateZ(-116px) rotateX(0); }
    #pagetop div p {
      position: absolute;
      top: 0;
      left: 0;
      width: 202px;
      height: 232px;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      -o-backface-visibility: hidden;
      backface-visibility: hidden; }
      #pagetop div p.front {
        top: auto;
        bottom: 0;
        height: 0;
        background: url("../img/common/pagetop_arr.png") center center no-repeat #fff;
        -webkit-transform: translateZ(116px);
        -moz-transform: translateZ(116px);
        -ms-transform: translateZ(116px);
        -o-transform: translateZ(116px);
        transform: translateZ(116px); }
      #pagetop div p.bottom {
        background: url("../img/index/main_logo2.png") center center no-repeat;
        -webkit-transform: rotateX(-90deg) translateZ(116px);
        -moz-transform: rotateX(-90deg) translateZ(116px);
        -ms-transform: rotateX(-90deg) translateZ(116px);
        -o-transform: rotateX(-90deg) translateZ(116px);
        transform: rotateX(-90deg) translateZ(116px); }

/* ------------------------------------------------------------
 Module
------------------------------------------------------------ */
a.btn {
  -webkit-transition-duration: 300ms;
  -moz-transition-duration: 300ms;
  -ms-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity; }
  a.btn:hover {
    opacity: 0.7; }