@charset "utf-8";


body{
  background:#fff url('bg_summer.png');
  color:#000;
  font-size:1.4rem;
  text-align: center;
}
img{max-width:100%;}
img.jiji{
  width:100%;
  max-width:720px;}

  ul.fish_container{
  text-align: left;  }
/*スマホ*/
@media screen and (max-width:720px) {

  h1{
    margin:10px 0px;
    padding:5px;
    font-size: 1.2rem;
    background:#0037b1;
    color:#fff;
    text-align: left;
  }
  div.container{
  margin:0px auto;
  padding:10px;
  width:100%;
  font-size:1.2rem;
  }

  /*バッジのコンテナの配置*/
  ul.fish_container{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  }

  ul.fish_container li{
    width:calc(100% / 2);
  }
  ul.fish li.fish_image{
    width:50px;
    padding:0 2.5px 0 0;
  }
  img{max-width:100%;}
  ul.fish li.fish_text{
    width:calc(100% - 50px);
    padding:0px;
  }

  /*バッジの配置など*/
  ul.fish{
  margin:5px;
  padding:5px;
  display: flex;
  background:#fff;
  }

  /*バッジのテキスト*/

  ul.fish li.fish_text h3{
    font-size:1.0rem;
  }

  ul.fish li.fish_text h3.still{
    color:#bbb;
  }
  ul.fish li.fish_text p{
    font-size:1.0rem;
  }

  ul.fish li.fish_text p.next{
    color:#f67988;
  }



}

/*パソコン*/
@media screen and (min-width:720px) {

  h1{
    margin:10px 0px;
    padding:5px;
    font-size: 1.4rem;
    color:#000;
    background:#0037b1;
    color:#fff;
  }
  div.container{
  margin:40px auto;
  padding:30px;
  min-width:820px;/*後でminに変えてOK*/
  max-width:1020px;
  font-size:1.4rem;
  }

  /*バッジのコンテナの配置*/
  ul.fish_container{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  }

  ul.fish_container li{
    width:calc(100% / 3);
  }
  ul.fish li.fish_image{
    width:70px;
    padding:2.5px;
  }
  ul.fish li.fish_text{
    width:calc(100% - 70px);
    padding:0 5px;
  }
  ul.fish{
  border-radius: 5px;
  border:1px solid #e3e3e3;
  background:#fff;

  }


  /*バッジの配置など*/
  ul.fish{
  margin:10px;
  padding:10px;
  display: flex;
  }

  /*バッジのテキスト*/


  ul.fish li.fish_text p{
    font-size:1.05rem;
  }

  ul.fish li.fish_text p.next{
    color:#f67988;
  }

}/*@media*/



  h2{
    margin:10px 0px;
    padding:10px;
    font-size: 1.2rem;
    background:#fff;
    color:#666;
    font-weight: normal;
    text-align: left;
  }
h1 span,h2 span{
  color:#999;
  margin-left:10px;
  font-size:70%;
}
p{
  font-size: 1.2rem;
}

  ul.fish li.fish_text h3{
      font-size: 90%;
  }
  ul.fish li.fish_text h4{
    color:#ff533c;
      font-size: 120%;
  }
h5{color:#2998ff}