@charset "UTF-8";
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  outline: 0 none;
  }

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  font-size: 62.5%; }

body {
    /*background: url(../img/bg.jpg) center center / cover no-repeat fixed;*/

}


img {
  width: 100%;
  border: none;
  vertical-align: bottom; }


img[usemap] {
    width: auto;
    height: 100vh;
    z-index: 100;
}

img[usemap2] {
    width: auto;
    height: 100vh;
    z-index: 100;
  }


.c-bg {
  width: 100vw;
  height: 100vh;
  position: fixed !important;
  z-index: 0;
  /*background: url(../img/bg-01.jpg) center center / cover no-repeat fixed;*/
}

.c-main {
  width: 100vw;
  height: auto;
  min-height: 100vh;
  /*width: 100%;*/
  position: relative;
  overflow: hidden;
}

.c-graphic {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-graphic{
}
.c-graphic--sp{
display: none;
}


  @media screen and (max-width: 500px){
    .c-graphic{
      display: none;
    }
    .c-graphic--sp{
      display: block;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      -webkit- transform: translateY(-50%) translateX(-50%);
    }
  }

  @media screen and (min-device-height: 800px){
    .c-graphic--sp img{
/*      width: 100vw !important;
      height: auto !important;*/
      /*width: auto !important;*/
      height: 100vh !important;

    }

  }