@charset "UTF-8";
/* CSS Document */

/*　@media以外の所は全てのサイズで読み込まれます　*/
html{background-color:#eee9e6;}
p {color:red;}
a {text-decoration:none; }/*　このCSSが適用されてるページからリンクの下線を消す　*/
body {font-family:'メイリオ', 'Meiryo', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;}


img{vertical-align:top;}/*　画像下の余白を消す　*/

#shisou{
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5%;
}

.container img {/*　画像自体　*/
   width: 100%;
   border-radius: 2%;
}

/* 画面幅に応じて列数を変える */
.container {
  width: 80%;
  margin-top: 3%;
  margin-left: auto;
  margin-right: auto;
}

.container .list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.container .list .wrap-element {
  padding: 0;
  max-width: 28%;
  display: inline-block;
  margin-bottom: 4%;
  transition: all 0.5s 0s ease;
}

.container .list .wrap-element article {
  display: inline-block;
}

.container .list .wrap-element article img {
  width: 100%;
  border-radius: 2.5%;
  padding: 2%;
  background-color: #FFF;
}

@media screen and (max-width: 520px) {
  .container .list .wrap-element {
    max-width: 70%;
	margin-bottom: 7%;
  }
}

@media screen and (min-width:521px) and (max-width:1023px)  {
  .container .list .wrap-element {
    max-width: 44%;
  }
}

@media screen and (min-width: 1024px) {
  .container .list .wrap-element {
    max-width: 28%;
  }
}




/* 画面幅に応じて列数を変える */