body{
  margin:0;
  color: #343a40;
  background-color: rgb(240, 239, 239);
}
#main{
  margin-left: 20vw;
  margin-right: 20vw;
  width: 60vw;
}
#blog_nav{
  color: #343a40;
  font-weight: bold;
}
h2{
  padding-left: 10px;
  padding-top: 20px;
}
.wide-img{
  padding: 10px;
  width: 100%; /* 最小幅決定 */
  aspect-ratio: 2/1; /* 高さをアスペクト比から計算 */
  object-fit: contain; /* その範囲に収める */
}
.half-img{
  padding: 10px;
  width: 50%; /* 最小幅決定 */
  aspect-ratio: 2/1; /* 高さをアスペクト比から計算 */
  object-fit: contain; /* その範囲に収める */
}
.half-wide-img{
  padding: 10px;
  width: 50%; /* 最小幅決定 */
  aspect-ratio: 2/1; /* 高さをアスペクト比から計算 */
  object-fit: contain; /* その範囲に収める */
}
.circle-cut{
  border-radius: 50%;
}
.flex-1{
  display: flex;
  justify-content:space-around
}

/* 1 */
.circle-color{
  width: 10vw;
  aspect-ratio: 1;
  border: solid #666666;
  margin: 10px;
}
#icon{
  display: flex;
}

@media screen and (max-width: 1000px) { /*ウィンドウ幅が最大1000pxまでの場合に適用*/
  #main{
    margin-left: 1vw;
    margin-right: 1vw;
    width: 98vw;
  }
  #contents{
    margin-left: 2vw;
    margin-right: 2vw;
    width: 94vw;
  }
  .half-wide-img{
    padding: 10px;
    width: 50%; /* 最小幅決定 */
    aspect-ratio: 1/1; /* 高さをアスペクト比から計算 */
    object-fit: contain; /* その範囲に収める */
  }
  #icon{
    display: flex;
  }
  .circle-color{
    width: 15vw;
    aspect-ratio: 1;
    margin: 10px;
  }
}