body{
  background-color: rgb(240, 239, 239);
}
#body{
  min-height: 70vh;
  max-width: 70vw;
  margin-left: 15vw;
}
#body h1{
  border-bottom: solid gray 1px;
  margin-top: 2em;
}
#card_wrapper{
  margin-left: 2vw;
  margin-left: 2vw;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.blog-card{
  width: 32vw;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  background-color: white;
  border: 1px solid rgb(219, 219, 219);
  border-radius: 5px;
  margin-bottom: 2vw;
}
.blog-card:hover{
  border: 1px solid rgb(121, 121, 121);
}
.blog-card a{
  color: black;
  text-decoration: none;
}
.blog-card p{
  margin: 0;
  margin-top: 6px;
}

.blog-card-tb-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.card-top-wrapper{
  display: flex;
  margin: 1vw;
  margin-bottom: 0;
}
.card-top-wrapper h2{
  font-size: large;
  margin: 0;
}
.card-left{
  width: 65%;
}
.card-left p{
  color: gray;
  font-size: smaller;
}

.card-right{
  width: 35%;
}
.card-img{
  margin-left: 5%;
  width: 95%;
  border-radius: 5px;
  aspect-ratio: 1.91/1;
  object-fit:contain
}
.card-bottom-wrapper{
  display: flex;
  margin: 1vw;
  margin-top: 15px;
  margin-bottom: 1vw;
  justify-content: space-between;
  align-items: flex-end;
}
.card-bottom-left{
  line-height: 1;
}
.card-bootom-right{
  display: flex;
  justify-content: flex-end;
}
.card-bootom-right img{
  width: 40px;
  height: 40px;
  border-radius: 5px;
  aspect-ratio: 1/1;
  object-fit:contain;
  padding-left: 2px;
}
.card-day{
  color: gray;
}

#References{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  background-color: rgb(196, 196, 196);
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
}
#References h3{
  margin-top: 0;
}
.refcard_wrapper{
  display: flex;
  flex-wrap: wrap;
}
.refcard_wrapper img{
  width: 40px;
  border-radius: 5px;
  aspect-ratio: 1/1;
  object-fit:contain;
  padding-left: 2px;
}
.ref_card{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px;
}


@media screen and (max-width: 1000px) { /*ウィンドウ幅が最大1000pxまでの場合に適用*/
  #body{
    max-width: 95vw;
    margin-left: 2.5vw;
  }
  #body h1{
    border-bottom: solid gray 1px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .blog-card{
    width: 90vw;
    margin-bottom: 2vh;
  }
  #card_wrapper{
    flex-direction: column;
  }
  .card-top-wrapper{
    margin: 4vw;
    margin-bottom: 0;
    flex-direction: column-reverse;
    align-items: center;
  }
  .card-bottom-wrapper{
    margin: 4vw;
    margin-top: 2px;
  }
  .card-left{
    width: 100%;
  }
  .card-right{
    width: 100%;
    padding-bottom: 10px;
  }
}