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

img {
  width: 100%;
  height: auto; }

#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: 100%;
    height: 100%;
    margin: 0 auto;
    background-color: #2cba27; }
  #wrapper #header {
    width: 100%;
    height: auto;
    background-image: url(../img/header_bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
    position: relative;
    overflow: hidden;
    background-size: cover;
    /*left*/
    /*right*/
    /*middle*/
    /*hufuki*/ }
    #wrapper #header .sammy_logo {
      width: 18%;
      padding: 4% 0 0 2%; }
    #wrapper #header .line {
      width: 59%;
      height: auto;
      margin: 14% auto 25%;
      text-align: center;
      position: relative;
      z-index: 4; }
    #wrapper #header p {
      position: absolute; }
    #wrapper #header .chara_left_01 {
      width: 32%;
      top: 12%;
      left: 11%; }
    #wrapper #header .chara_left_02 {
      width: 31%;
      top: 26%;
      left: 2%; }
    #wrapper #header .chara_left_03 {
      width: 30%;
      top: 49%;
      left: 2%; }
    #wrapper #header .chara_right_01 {
      width: 32%;
      top: 7%;
      right: 10%; }
    #wrapper #header .chara_right_02 {
      width: 31%;
      top: 17%;
      right: 1%; }
    #wrapper #header .chara_right_03 {
      width: 49%;
      top: 39%;
      right: -6%; }
    #wrapper #header .chara_middle_01 {
      width: 29%;
      left: 27%;
      top: 6%;
      z-index: 3; }
    #wrapper #header .chara_middle_02 {
      width: 27%;
      left: 2%;
      bottom: -8%;
      z-index: 3; }
    #wrapper #header .chara_middle_03 {
      width: 30%;
      left: 18%;
      bottom: -16%;
      z-index: 4; }
    #wrapper #header .chara_middle_04 {
      width: 23%;
      left: 40%;
      bottom: -11%;
      z-index: 6; }
    #wrapper #header .chara_middle_05 {
      width: 28%;
      right: 19%;
      bottom: -13%;
      z-index: 5; }
    #wrapper #header .chara_middle_06 {
      width: 20%;
      right: 9%;
      bottom: -8%;
      z-index: 4; }
    #wrapper #header .chara_middle_07 {
      width: 23%;
      right: 30%;
      top: 7%;
      z-index: 2; }
    #wrapper #header .hu_01 {
      right: -17%;
      top: 22%;
      width: 29%;
      z-index: 7; }
    #wrapper #header .hu_03 {
      right: 21%;
      top: -17%;
      width: 25%;
      z-index: 7; }
    #wrapper #header .hu_04 {
      right: -31%;
      top: -48%;
      width: 69%;
      z-index: 7; }
    #wrapper #header .hu_05 {
      right: 68%;
      top: -16%;
      width: 14%;
      z-index: 7; }
    #wrapper #header .hu_06 {
      left: -18%;
      top: 3%;
      width: 25%;
      z-index: 7; }
    #wrapper #header .hu_07 {
      left: 41%;
      top: 13%;
      width: 16%;
      z-index: 7; }
    #wrapper #header .hu_08 {
      left: 18%;
      top: 64%;
      width: 10%;
      z-index: 7; }
    #wrapper #header .hu_09 {
      right: -40%;
      top: 83%;
      width: 51%;
      z-index: 7; }
    #wrapper #header .hu_010 {
      left: 0;
      top: 79%;
      width: 24%;
      z-index: 7; }
    #wrapper #header .hu_011 {
      left: -30%;
      top: 41%;
      width: 37%;
      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 .ntop {
      padding-top: 5%; }
    #wrapper #contents .nbottom {
      padding-bottom: 5%; }
    #wrapper #contents .contents_img {
      position: relative; }
      #wrapper #contents .contents_img .contents_btn {
        position: absolute;
        bottom: 5%;
        left: 0; }
      #wrapper #contents .contents_img .contents_btn_02 {
        position: absolute;
        bottom: 18%;
        left: 0; }
    #wrapper #contents img {
      vertical-align: top; }
    #wrapper #contents .gaiyo {
      margin: 3% auto;
      width: 91%;
      height: 480px;
      background-color: #fff;
      overflow: hidden;
      display: none; }
      #wrapper #contents .gaiyo .title {
        text-align: center;
        width: 94%;
        height: auto;
        margin: 2% auto;
        background-color: #008100;
        color: #fff;
        font-size: 6vw;
        font-weight: bold;
        letter-spacing: 10px;
        line-height: 2rem; }
      #wrapper #contents .gaiyo .box {
        width: 93%;
        height: 422px;
        border: 1px solid #c7c7c7;
        margin: 0 auto;
        overflow-y: scroll;
        color: #686868;
        font-size: 4vw; }
        #wrapper #contents .gaiyo .box .box_inner {
          padding: 3%; }
          #wrapper #contents .gaiyo .box .box_inner .box_title {
            font-weight: bold; }
          #wrapper #contents .gaiyo .box .box_inner p {
            margin-bottom: 3%; }

#footer {
  position: absolute;
  width: 100%;
  margin-top: 3%; }
  #footer .footer_inner {
    color: #fff;
    width: 92%;
    height: auto;
    margin: 0 auto 4%; }
    #footer .footer_inner .copyright {
      text-align: center;
      font-size: 3vw;
      margin-bottom: 3%; }
    #footer .footer_inner .socialArea {
      position: relative;
      left: 52%;
      float: left;
      width: 185px;
      height: 22px; }
      #footer .footer_inner .socialArea li {
        position: relative;
        left: -50%;
        float: left; }
        #footer .footer_inner .socialArea li:nth-child(1) {
          width: 67px;
          height: 20px;
          margin-right: 10px; }
        #footer .footer_inner .socialArea li:nth-child(2) {
          width: 78px;
          height: 17px;
          margin: -1px 0 0 22px; }
    #footer .footer_inner .bannerArea {
      clear: both;
      padding-top: 5%; }
      #footer .footer_inner .bannerArea li {
        padding-bottom: 3%; }

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