html, body {   height: 100%;
    width: 100%;
  }
   
  .text-top {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
  }
   
  /* mobile */
  @media (max-width: 767px) {
   
    .text-top h1{
      font-size: 2em;
      font-weight: 600;
      color: #24c;
    }
    .text-top h3 {
      font-size: 1.5em;
      color: #333;
      margin-top: 80px;
    }
   
    .text-top > .btn{
      margin-bottom: 20px;
    }
   
    #home {
      background: url(../image/saganatsu-min.jpg) no-repeat center center;
      display: table;
      width: 100%;
      height: 40vh;
      position: relative;
   
      margin-top: 0px;
   
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
   
     #saganatsu {
      background: url(../image/saganatsu-min.jpg) no-repeat center center;
      display: table;
      width: 100%;
      height: auto;
      position: relative;
   
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      padding-top: 2em;
      padding-bottom:2em;
      padding-left: 1em;
      padding-right: 1em;
    }

    .content {
      margin-top: 3em;
    }


    .content h2 {
      /*線の種類（実線） 太さ 色*/
      border-bottom: solid 3px black;
      margin-bottom: 0.5em;
    }

    .product {
      margin-top: 2em;
    }

    .contact {
      margin-top: 2em;
      margin-bottom: 2em;
    }

    .commentary {
      margin-top: 8em;
      margin-left: 1em;
      margin-right: 1em;
    }
   
  }

  /* mobile以外 */
  @media (min-width: 768px) {
   
    .text-top h1 {
      font-size: 5em;
      font-weight: 600;
      color: #24c;
    }

    .text-top h3 {
      font-size: 3em;
      font-weight: 300;
      color: #333;
      margin-top: 100px;
    }
   
    #home {
      background: url(../image/saganatsu-min.jpg) no-repeat center center fixed;
      display: table;
      height: 80%;
      position: relative;
      width:100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
   
   
    #saganatsu {
      background: url(../image/saganatsu-min.jpg) no-repeat center center fixed;
      display: table;
      height: 80%;
      position: relative;
      width: 100%;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      padding-top: 3em;
      padding-bottom: 3em;
      padding-left: 1em;
      padding-right: 1em;
    }

    .content {
      margin-top: 6em;
    }

    .content h2 {
      /*線の種類（実線） 太さ 色*/
      border-bottom: solid 3px black;
      margin-bottom: 1em;
    }

    .product {
      margin-top: 2em;
    }

    .contact {
      margin-top: 2em;
      margin-bottom: 3em;
    }

    .commentary {
      margin-top: 8em;
      margin-left: 15vw;
      margin-right: 15vw;
    }    
   
  }