body {
  /* トップページ背景設定 グラデ設定の場合は下部と同色に変更する */
  background-color: #ffffff;
  background-repeat: no-repeat;
  font-family: "メイリオ";
  margin: 0;
  padding:0;
}

header {
  max-width: 100%;
  color: #ffffff;
  background-color: #b0b0b0;
  margin: 0 auto;
}
header h1 {
text-align: center;
font-size: 16px;
padding: 4px 0;
}

#main {
/* トップページ背景設定 単色もしくはグラデ設定をbackgroundで変更する */
background: linear-gradient(to bottom,#ff94c4,#ffffff 70%);
padding: 32px 0;
}
/* バナー画像部の指定 */
#banner {
  max-height: 550px;
  max-width: 750px;
  margin: 0 auto;
  border: solid 3px #fff;
  box-shadow: 0px 4px 20px #ffb0ce;
}

#banner img {
  width: 100%;
}

/* 年齢認証領域の位置情報やスタイル設定 */
/* 『当サイトは…』の文言画像は、この部分の背景として指定する。 */
#hako {
  height: 100px;
  max-width: 800px;
  margin: 84px auto auto;
  background: url(img/back.jpg) center 0px no-repeat; height:200px;
  display: flex;
  justify-content: center;
}

/* 認証ボタンサイズ指定 */
#enter,#leave {
  margin: 0 10%;
  width:100%;
  max-width: 100%;
  height:auto;
}

/* 18歳以上ボタンと18歳未満ボタンのマウスオーバー時の表示 */
#hako #leave:hover,
#hako #enter:hover {
  opacity:0.8;
}

/* Copyright (著作権表示)部 スタイル */
footer {
  width: 100%;
  margin: 30px 0 0;
  padding: 4px 0;
  background-color: #b0b0b0;
}

footer div {
  font-size:16px;
  color:#ffffff;
  text-align: center;
}


/* レスポンシブ対応 */
@media screen and (max-width:640px) {
  #main {
    padding: 0;
  }
  #banner {
    max-height: 550px;
    max-width: 750px;
    margin: 0 auto;
    border: none;
    box-shadow: none;
  }
  #hako {
    height:auto;
    background: none;
    display: block;
    text-align: center;
    margin: 32px auto auto;
  }
  
  #enter,#leave {
    margin: 0 auto;
  }
  #enter>a>img,
  #leave>a>img {
    max-width: 300px;
    width: 90%;
  }

  #back-ground {
    background: url(img/back.jpg) center 0px no-repeat; 
    height:200px;
    background-repeat:  no-repeat;
    background-size:  contain;
  }

  footer div {
    font-size:8px;
    color:#ffffff;
    text-align: center;
  }
}