body {

  /* 画像ファイルの指定 */

  background-image: url(bg.jpg);

   

  /* 画像を常に天地左右の中央に配置 */

  background-position: center center;

   

  /* 画像をタイル状に繰り返し表示しない */

  background-repeat: no-repeat;

   

  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */

  background-attachment: fixed;

   

  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */

  background-size: cover;

   

  /* 背景画像が読み込まれる前に表示される背景のカラー */

  background-color: #464646;

}



@media only screen and (max-width: 767px) {

  body {

    background-image: url(bg.jpg);

  }

}







/* Presentational style rules only

 * Not required

 */



html, body, .container {

  height: 100%;

}



/* Reset */

html, body, h1, p, a, div, section {

  margin: 0;

  padding: 0;

  font-size: 100%;

  font: inherit;

}



/* Basic */

body { 

  color: #2f4f4f;

}



h1 {

  color: #2f4f4f;

  text-transform: uppercase;

  font-size: 40px;

  line-height: 50px;

  font-weight: 400;

  margin-top: 0px;

}



h2 {

  color: #2f4f4f;

  text-transform: uppercase;

  font-size: 30px;

  line-height: 40px;

  font-weight: 400;

  margin-top: 0px;

}



a {

  color: #2f4f4f;

}



p {

  margin: 0 0 15px 0;

}



strong {

  font-weight: 700;

}



blockquote {

  display: block;

  max-width: 480px;

  margin: 15px auto;

  padding: 15px;

  background-color: rgba(0, 0, 0, 0.3);  

  color: #2f4f4f;

  font-family: "Kotta One", serif;

  font-size: 22px;

  line-height: 28px;

}



blockquote cite {

  display: block;

  font: 18px/23px "Cantarell", sans-serif;

  font-size: 16px;

  margin-top: 16px;

  color: #2f4f4f;

  text-transform: uppercase;

}



/* Layout */



.navbar {

  width: 100%;

  background-color: rgba(0, 0, 0, 0.6);

  height: 40px;

  z-index: 9999;

  position: fixed;

}



  .inner {

    position: relative;

    margin: 0 auto;

    text-align: center;

  }



.navbar a {

  display: inline-block;

  border: 1px solid #fff;

  font-size: 14px;

  line-height: 24px;

  border-radius: 3px;

  padding: 2px 15px;

  text-decoration: none;

  margin-top: 5px;

}



.container {

  display: table;

  padding-top: 30px;

  width: 100%;

}



.content {

  display: table-cell;

  vertical-align: middle;

  text-align: center;

}



/* Special */

.sub-title {

  margin: 50px auto;

  font-size: 18px;

  line-height: 23px;

  text-transform: uppercase;

}



.button {

  display: inline-block;

  padding: 6px 10px;

  color: #cafaea;

  border: 1px solid #cafaea;

  border-radius: 3px;

  font-weight: 700;

  line-height: normal;

  text-decoration: none;

  text-align: center;

  text-transform: uppercase;

}



#more-content {

  display: none;

}



/* Media Queries */

@media only screen and (max-width: 340px) {

  

  .container {

    position: relative;

    display: block;

    float: left;

    vertical-align: baseline;

    margin: 0 auto;

    padding: 30px 0 0 0;

  }

  

  #more-content {

    float: left;

    margin-right: 10px;

    

  }

  

  body h1 {

    font-size: 18px;

    line-height: 23px;

  } 

  

  .content, blockquote {  

    display: inline;

    margin: 0 auto;

    padding-top: 30px;

    vertical-align: baseline;

  }



  blockquote {

    width: 150px;

    margin: 15px auto;

    font-size: 16px;

    line-height: 21px;

    background-color: transparent;

  }



  blockquote cite {

    font-size: 14px;

    line-height: 19px;

  }



  .sub-title {

    font-size: 14px;

    line-height: 21px;

  }



  .button, p {

    max-width: 150px;

    margin: 0 auto;

    font-size: 15px;

    line-height: 20px;

  }



  html, body, .container {

    height: auto;

  }

}