html, body {
  width: 100%;
  height: auto;
  background-color: #000;
  min-width: 898px; }

body {
  background-image: url(../img/bg.jpg);
  background-repeat: repeat; }

a:hover {
  transition: all 0.5s cubic-bezier(0.07, 0.58, 0.56, 0.96);
  opacity: 0.7; }

#loading {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 111; }

#wrapper {
  width: 100%;
  height: auto; }
  #wrapper .wrapper_inner {
    width: 898px;
    height: 100%;
    border-left: 2px solid #c9c9c9;
    border-right: 2px solid #c9c9c9;
    margin: 0 auto;
    background-color: #2cba27; }
  #wrapper #header {
    width: 100%;
    height: 630px;
    background-image: url(../img/header_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    overflow: hidden;
    /*left*/
    /*right*/
    /*middle*/
    /*hufuki*/ }
    #wrapper #header .sammy_logo {
      padding: 10px 0 0 10px; }
    #wrapper #header .line {
      width: 459px;
      height: 399px;
      margin: 0 auto;
      text-align: center;
      padding-top: 25px;
      position: relative;
      z-index: 1; }
    #wrapper #header p {
      position: absolute; }
    #wrapper #header .chara_left_01 {
      top: 50px;
      left: 100px; }
    #wrapper #header .chara_left_02 {
      top: 132px;
      left: 27px; }
    #wrapper #header .chara_left_03 {
      top: 268px;
      left: 37px; }
    #wrapper #header .chara_right_01 {
      top: 40px;
      right: 48px; }
    #wrapper #header .chara_right_02 {
      top: 122px;
      right: 10px; }
    #wrapper #header .chara_right_03 {
      top: 215px;
      right: 10px; }
    #wrapper #header .chara_middle_01 {
      left: 16px;
      bottom: -34px;
      z-index: 3; }
    #wrapper #header .chara_middle_02 {
      left: 139px;
      bottom: -44px;
      z-index: 3; }
    #wrapper #header .chara_middle_03 {
      left: 245px;
      bottom: -92px;
      z-index: 3; }
    #wrapper #header .chara_middle_04 {
      left: 392px;
      bottom: -80px;
      z-index: 6; }
    #wrapper #header .chara_middle_05 {
      right: 234px;
      bottom: -82px;
      z-index: 5; }
    #wrapper #header .chara_middle_06 {
      right: 170px;
      bottom: -42px;
      z-index: 4; }
    #wrapper #header .chara_middle_07 {
      right: 20px;
      bottom: -74px;
      z-index: 3; }
    #wrapper #header .hu_01 {
      left: 491px;
      top: -15px;
      z-index: 7; }
    #wrapper #header .hu_02 {
      left: 166px;
      top: -88px;
      z-index: 7; }
    #wrapper #header .hu_03 {
      right: -80px;
      top: 261px;
      z-index: 7; }
    #wrapper #header .hu_04 {
      left: 163px;
      top: -145px;
      z-index: 7; }
    #wrapper #header .hu_05 {
      right: 242px;
      top: -69px;
      z-index: 7; }
    #wrapper #header .hu_06 {
      left: -315px;
      bottom: -120px;
      z-index: 7; }
    #wrapper #header .hu_07 {
      right: -297px;
      top: -401px;
      z-index: 7; }
    #wrapper #header .hu_08 {
      left: -94px;
      top: 72px;
      z-index: 7; }
    #wrapper #header .hu_09 {
      left: 360px;
      top: -11px;
      z-index: 7; }
    #wrapper #header .hu_010 {
      left: 179px;
      bottom: 120px;
      z-index: 7; }
    #wrapper #header .hu_011 {
      right: -301px;
      bottom: -289px;
      z-index: 7; }
    #wrapper #header .hu_012 {
      left: 141px;
      bottom: -231px;
      z-index: 7; }
    #wrapper #header .hu_013 {
      left: -94px;
      bottom: 92px;
      z-index: 7; }
  #wrapper #contents {
    width: 100%;
    height: auto;
    background-image: url(../img/contents_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover; }
    #wrapper #contents .gaiyo {
      margin: 30px auto 0;
      width: 800px;
      height: 480px;
      background-color: #fff;
      overflow: hidden;
      display: none; }
      #wrapper #contents .gaiyo .title {
        text-align: center;
        width: 766px;
        height: 50px;
        margin: 16px auto;
        background-color: #008100;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        letter-spacing: 10px;
        line-height: 3.5rem; }
      #wrapper #contents .gaiyo .box {
        width: 764px;
        height: 380px;
        border: 1px solid #c7c7c7;
        margin: 0 auto;
        overflow-y: scroll;
        color: #686868; }
        #wrapper #contents .gaiyo .box .box_inner {
          padding: 20px; }
          #wrapper #contents .gaiyo .box .box_inner .box_title {
            font-weight: bold; }
          #wrapper #contents .gaiyo .box .box_inner p {
            margin-bottom: 5px; }
    #wrapper #contents .contents_img {
      padding-top: 38px; }

#footer {
  position: absolute;
  width: 100%;
  margin-top: 12px; }
  #footer .footer_inner {
    color: #fff;
    width: 898px;
    height: 60px;
    margin: 0 auto; }
    #footer .footer_inner .copyright {
      float: left;
      font-size: 12px;
      margin-left: 10px; }
    #footer .footer_inner .socialArea {
      width: 200px;
      float: right; }
      #footer .footer_inner .socialArea li {
        width: 100px;
        float: left; }
    #footer .footer_inner .bannerArea {
      width: 100%;
      margin: 0 auto;
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-align-items: center;
      align-items: center;
      padding: 10px 0 40px; }
      #footer .footer_inner .bannerArea li {
        margin: 0 10px; }

/*# sourceMappingURL=main.css.map */