@charset "UTF-8";
/* リセット */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
body{
  font-family: 'Arial', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif,cursive;
}
/* 背景画像 */
.contener1{
  position:relative;
  height: 100vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url(../img/bulehouse-top.png);
}
.mma {
  position: absolute;
  top: 75%;/*画像の左上に配置*/
  left: 42%;
  margin: 0; /*余計な隙間を除く*/
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  text-decoration: none;
  }
  .fitness {
    position: absolute;
    top: 75%;/*画像の左上に配置*/
    left: 58%;
    margin: 0; /*余計な隙間を除く*/
    -ms-transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin:0;
    padding:0;
    text-decoration: none;
    }
  h1{
    color: #FFF;/*文字を白に*/
    background: #0D0049;/*背景色*/
    border: 1px #FFF solid;
    font-size: 18px;
    line-height: 1;/*行高は1に*/
    padding: 18px 10px;/*文字周りの余白*/
    border-radius: 10px;
    width: 220px;
    text-align: center;
    transition: .3s;
    font-weight: normal;
  }
  a {
  transition: .3s;
}
h1:hover {
  background: #0D4787;
}
  @media (max-width: 1570px){
    .mma {
      position: absolute;
      top: 77%;/*画像の左上に配置*/
      left: 40%;
      }
      .fitness {
        position: absolute;
        top: 77%;/*画像の左上に配置*/
        left: 60%;
        margin: 0; /*余計な隙間を除く*/
        }
        h1{
          font-size: 18px;
          line-height: 1;/*行高は1に*/
          padding: 16px 8px;/*文字周りの余白*/
          border-radius: 10px;
          width: 200px;
          text-align: center;
          transition: .3s;
        }
  }
  @media (max-width: 1240px){
    .mma {
      position: absolute;
      top: 77%;/*画像の左上に配置*/
      left: 35%;
      }
      .fitness {
        position: absolute;
        top: 77%;/*画像の左上に配置*/
        left: 65%;
        margin: 0; /*余計な隙間を除く*/
        }

  }
  @media (max-width: 875px){
    .mma {
      position: absolute;
      top: 77%;/*画像の左上に配置*/
      left: 32%;
      }
      .fitness {
        position: absolute;
        top: 77%;/*画像の左上に配置*/
        left: 68%;
        margin: 0; /*余計な隙間を除く*/
        }
  }
  @media (max-width: 750px){
    .mma {
      position: absolute;
      top: 74%;/*画像の左上に配置*/
      left: 50%;
      }
      .fitness {
        position: absolute;
        top: 83%;/*画像の左上に配置*/
        left: 50%;
        margin: 0; /*余計な隙間を除く*/
        }
  }