@charset "UTF-8";
body { 
    background-color: #ffffff;
    font-family:"MS Pゴシック",sans-serif;        
}

.generation {/*世代文字ブロック要素*/
  font-weight: bold;
  text-align: center;
}

.jump {
  font-weight: bold;
  width: 250px;
  margin: 0 auto;
}

ul {
  display: flex;
}

li {/*ジャンプリスト*/
  list-style: none;
  margin-left: 10px;
}

footer{
    background-color: #000000;
    text-align: center;
}

footer small{
    color: #fff;
}

/*九世代*/
.block_9{
    background: #c1e4e9 ;
    margin: 0 40px;
}

/*八世代*/
.block_8{
  background: #f6bfbc ;
  margin: 0 40px;
}

/*戻るボタン*/
.back {
  margin: 0 40px;
}

/* 横並び */
.flex {
  display: flex; /*横並び*/
  padding: 1%;
}
.flex .image {
  width: 450px; /*画像サイズ指定*/
  width: 30%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.flex .right {
  margin: 0 0 0 20px;
  padding: 0;
  width: 70%;
}
.flex .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
}
.flex .text {
  margin: 10px 0 0;
  padding: 0;
}

@media (max-width:520px) {/*スマホサイズ　モバイルファースト*/
    .flex {
        flex-direction: column;
    } 
    .flex .image {
      width: 450px; /*画像サイズ指定*/
      margin: auto;
      max-width:100%;
    }

    .jump {
      max-width: 100%;
    }

    .flex .right{
      margin: auto;
    }
    
    .block_9,.block_8 {
      margin: auto;
    }
  }

 @media (min-width:520px) {/*スマホサイズ以上*/
  .block_9 {
    background: #c1e4e9 url(../zindon/images/emblem9.png) no-repeat;
    background-position: right;
  }
 }

 @media (min-width:520px) {/*スマホサイズ以上*/
  .block_8 {
    background: #f6bfbc url(../zindon/images/emblem8.png) no-repeat;
    background-position: right;
  }
 }

  img {/*画像レスポンシブ拡大縮小と画像下空白埋め*/
    max-width:100%;
    vertical-align: bottom;
}