@charset "UTF-8";
html {
  background-color: #fff; }

a:link, a:visited, a:hover, a:active {
  color: #000; }

@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400; }
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold; }
body {
  font-family: "Yu Gothic", YuGothic, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
  color: #332c27;
  min-width: 1040px;
  width: 100%;
  overflow: auto; }

body > .pagewrap {
  min-width: 1040px;
  width: 100%;
  overflow-x: hidden;
  padding-top: 100px; }

#page-contents-outer {
  background-color: #fff; }
  #page-contents-outer img {
    vertical-align: top; }

#page-contents {
  max-width: 2000px;
  margin: 0 auto;
  min-width: 1040px; }

.anc {
  position: relative;
  top: -60px; }

sup {
  vertical-align: top; }

.pagewrap > header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100px;
  background-color: #dfb624;
  text-align: center;
  z-index: 1000;
  -webkit-transition: height 0.15s linear;
  -o-transition: height 0.15s linear;
  -moz-transition: height 0.15s linear;
  transition: height 0.15s linear; }
  .pagewrap > header h1 {
    position: relative;
    padding-top: 30px;
    -webkit-transition: all 0.15s linear;
    -o-transition: all 0.15s linear;
    -moz-transition: all 0.15s linear;
    transition: all 0.15s linear; }
    .pagewrap > header h1 img {
      -webkit-transition: all 0.15s linear;
      -o-transition: all 0.15s linear;
      -moz-transition: all 0.15s linear;
      transition: all 0.15s linear; }
  .pagewrap > header .nav__trigger {
    position: absolute;
    width: 110px;
    height: 50px;
    left: 20px;
    top: 50%;
    margin-top: -25px;
    cursor: pointer;
    -webkit-transition: top 0.15s linear;
    -o-transition: top 0.15s linear;
    -moz-transition: top 0.15s linear;
    transition: top 0.15s linear; }
    .pagewrap > header .nav__trigger .nav__trigger_icon {
      width: 50px;
      height: 50px; }
      .pagewrap > header .nav__trigger .nav__trigger_icon .line {
        position: absolute;
        width: 30px;
        height: 2px;
        background-color: #fff;
        left: 10px;
        -webkit-transition: left 0.15s ease-out;
        -o-transition: left 0.15s ease-out;
        -moz-transition: left 0.15s ease-out;
        transition: left 0.15s ease-out; }
      .pagewrap > header .nav__trigger .nav__trigger_icon .line_1 {
        top: 16px; }
      .pagewrap > header .nav__trigger .nav__trigger_icon .line_2 {
        top: 24px; }
      .pagewrap > header .nav__trigger .nav__trigger_icon .line_3 {
        top: 32px; }
    .pagewrap > header .nav__trigger .nav__trigger_text {
      position: absolute;
      left: 54px;
      top: 20px;
      -webkit-transition: left 0.15s ease-out;
      -o-transition: left 0.15s ease-out;
      -moz-transition: left 0.15s ease-out;
      transition: left 0.15s ease-out; }
    .pagewrap > header .nav__trigger:hover .nav__trigger_icon .line_1 {
      left: 7px; }
    .pagewrap > header .nav__trigger:hover .nav__trigger_icon .line_2 {
      left: 13px; }
    .pagewrap > header .nav__trigger:hover .nav__trigger_icon .line_3 {
      left: 7px; }
    .pagewrap > header .nav__trigger:hover .nav__trigger_text {
      left: 57px; }
  .pagewrap > header .webstore {
    position: absolute;
    right: 30px;
    top: 50%;
    margin-top: -17px;
    width: 100px;
    height: 27px; }
    .pagewrap > header .webstore .icon {
      position: absolute;
      right: 0;
      top: 0;
      -webkit-transition: -webkit-transform 0.15s ease-out;
      transition: -webkit-transform 0.15s ease-out;
      -o-transition: -o-transform 0.15s ease-out;
      -moz-transition: transform 0.15s ease-out, -moz-transform 0.15s ease-out;
      transition: transform 0.15s ease-out;
      transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out, -moz-transform 0.15s ease-out, -o-transform 0.15s ease-out; }
    .pagewrap > header .webstore .text {
      position: absolute;
      right: 43px;
      top: 12px;
      font-size: 0;
      -webkit-transform: translateX(0);
         -moz-transform: translateX(0);
          -ms-transform: translateX(0);
           -o-transform: translateX(0);
              transform: translateX(0);
      -webkit-transition: -webkit-transform 0.15s ease-out;
      transition: -webkit-transform 0.15s ease-out;
      -o-transition: -o-transform 0.15s ease-out;
      -moz-transition: transform 0.15s ease-out, -moz-transform 0.15s ease-out;
      transition: transform 0.15s ease-out;
      transition: transform 0.15s ease-out, -webkit-transform 0.15s ease-out, -moz-transform 0.15s ease-out, -o-transform 0.15s ease-out; }
    .pagewrap > header .webstore:hover .icon {
      -webkit-transform: scale(1.35);
         -moz-transform: scale(1.35);
          -ms-transform: scale(1.35);
           -o-transform: scale(1.35);
              transform: scale(1.35); }
    .pagewrap > header .webstore:hover .text {
      -webkit-transform: translateX(-4px);
         -moz-transform: translateX(-4px);
          -ms-transform: translateX(-4px);
           -o-transform: translateX(-4px);
              transform: translateX(-4px); }
  .pagewrap > header.morph {
    height: 70px; }
    .pagewrap > header.morph h1 {
      padding-top: 20px; }
      .pagewrap > header.morph h1 img {
        width: 205.0px;
        height: 32.8px; }

.site__navigation {
  position: fixed;
  width: 280px;
  height: 100%;
  z-index: 1001;
  background-color: #332c27;
  left: -280px;
  top: 0;
  -webkit-transition: left 0.3s ease-in-out;
  -o-transition: left 0.3s ease-in-out;
  -moz-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  font-size: 0; }
  .site__navigation.nav__open {
    left: 0; }
  .site__navigation .nav__close {
    position: relative;
    width: 30px;
    height: 30px;
    margin-top: 38px;
    margin-left: 33px;
    margin-bottom: 30px;
    cursor: pointer; }
    .site__navigation .nav__close:hover .line {
      background-color: #dfb624; }
    .site__navigation .nav__close .line {
      position: absolute;
      left: -3px;
      top: 11px;
      width: 30px;
      height: 2px;
      background-color: #fff;
      display: block;
      cursor: pointer;
      -webkit-transition: background-color 0.1s linear;
      -o-transition: background-color 0.1s linear;
      -moz-transition: background-color 0.1s linear;
      transition: background-color 0.1s linear; }
      .site__navigation .nav__close .line.line_1 {
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg); }
      .site__navigation .nav__close .line.line_2 {
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg); }
  .site__navigation .site__nav_group a {
    position: relative;
    display: block;
    padding: 18px 0 19px;
    text-align: left;
    margin-left: 33px;
    margin-right: 33px; }
    .site__navigation .site__nav_group a span {
      position: relative;
      display: inline-block; }
    .site__navigation .site__nav_group a .hover {
      opacity: 0;
      position: absolute;
      left: 0;
      top: 0;
      -webkit-transition: opacity 0.1s linear;
      -o-transition: opacity 0.1s linear;
      -moz-transition: opacity 0.1s linear;
      transition: opacity 0.1s linear; }
    .site__navigation .site__nav_group a:hover .hover {
      opacity: 1; }
  .site__navigation .site__nav_sns {
    text-align: left;
    padding: 30px 32px; }
    .site__navigation .site__nav_sns a {
      display: inline-block;
      margin-right: 8px; }
      .site__navigation .site__nav_sns a span {
        position: relative;
        display: inline-block; }
      .site__navigation .site__nav_sns a .hover {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        -webkit-transition: opacity 0.1s linear;
        -o-transition: opacity 0.1s linear;
        -moz-transition: opacity 0.1s linear;
        transition: opacity 0.1s linear; }
      .site__navigation .site__nav_sns a:hover .hover {
        opacity: 1; }

.pagewrap > footer {
  background-color: #332c27; }
  .pagewrap > footer .inner {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    max-width: 1260px;
    min-width: 1060px;
    padding: 60px 30px 56px;
    width: 100%;
    margin: 0 auto; }
  .pagewrap > footer .wrap1 {
    padding-bottom: 20px; }
    .pagewrap > footer .wrap1:after {
      content: "";
      display: block;
      clear: both; }
    .pagewrap > footer .wrap1 h1 {
      display: block;
      text-align: center;
      width: 160px;
      float: left; }
    .pagewrap > footer .wrap1 .snav {
      float: right;
      position: relative;
      left: 4px; }
      .pagewrap > footer .wrap1 .snav a {
        -webkit-transform: scale(0.9);
           -moz-transform: scale(0.9);
            -ms-transform: scale(0.9);
             -o-transform: scale(0.9);
                transform: scale(0.9); }
        .pagewrap > footer .wrap1 .snav a:hover {
          text-decoration: underline; }
  .pagewrap > footer .wrap2 {
    border-top: solid 1px #453f3a;
    padding-top: 34px; }
    .pagewrap > footer .wrap2:after {
      content: "";
      display: block;
      clear: both; }
    .pagewrap > footer .wrap2 .copyrights {
      float: left;
      line-height: 1;
      font-size: 11px;
      letter-spacing: 0.1em;
      color: #fff;
      padding-top: 5px; }
    .pagewrap > footer .wrap2 .social-area {
      position: relative;
      left: 4px;
      margin-top: 2px;
      font-size: 0;
      float: right; }
      .pagewrap > footer .wrap2 .social-area p {
        display: inline-block;
        font-size: 11px;
        line-height: 1;
        color: #ffffff;
        vertical-align: middle;
        line-height: 1;
        font-size: 11px;
        letter-spacing: 0.1em; }
      .pagewrap > footer .wrap2 .social-area a {
        position: relative; }
        .pagewrap > footer .wrap2 .social-area a .hover {
          position: absolute;
          left: 0;
          top: 0;
          opacity: 0;
          -webkit-transition: opacity 0.1s linear;
          -o-transition: opacity 0.1s linear;
          -moz-transition: opacity 0.1s linear;
          transition: opacity 0.1s linear; }
        .pagewrap > footer .wrap2 .social-area a:hover .hover {
          opacity: 1; }
      .pagewrap > footer .wrap2 .social-area ul {
        display: inline-block;
        vertical-align: middle; }
      .pagewrap > footer .wrap2 .social-area li {
        vertical-align: middle;
        padding: 0;
        padding-left: 3px;
        margin-left: 7px; }
        .pagewrap > footer .wrap2 .social-area li img {
          margin-top: -4px; }
  .pagewrap > footer ul {
    text-align: center;
    font-size: 0; }
    .pagewrap > footer ul li {
      display: inline-block;
      height: 18px;
      margin-left: 15px;
      padding-top: 6px; }
      .pagewrap > footer ul li a {
        display: inline-block;
        color: #fff;
        font-size: 13px;
        line-height: 1;
        text-decoration: none; }
      .pagewrap > footer ul li img {
        vertical-align: middle; }

#page-contents {
  background-color: #fff; }