.header-space{
  background-color: rgb(238, 188, 96);
  height: 2vh;
}

.menu-space{
  background-color: rgb(238, 188, 96);
  height: 7vh;
}

#page-space{
  background-color: rgb(238, 188, 96);
  height: 7vh;
}

#top{
  color : #ff4081;
  text-decoration: none;
  font-family: "Nico Moji", cursive;
  font-size: 8vh;
}

#top:hover{
  color : #c940ff;
}


.menu{
  padding-left: 0 ;
  list-style-type: none;
  display: flex;
}

.menu > a{
  list-style-type: none;
  display: flex;
  /* margin: 0 20px 0 0; */
  font-family: 'MS Pゴシック';
  font-weight: bold; 
  font-size: 3vh;
  text-decoration: none;
  color: white;
  margin: 0 20px 0;
}

.menu > a:hover{
  color : #c940ff;
}


body {
  margin: 0;
  -webkit-text-size-adjust: 100%;    
  padding: 0;
  background-color: rgb(255, 243, 220);
}

.list {
  /* Grid Fallback */
  /* display: flex; */
  flex-wrap: wrap;
  list-style-type: none;
  padding:0;

  /* Supports Grid */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  grid-auto-rows: minmax(320px, auto);
  grid-gap: 1vh;
  background: mistyrose;
}

.grid-box{
  background: seashell;
  border: ridge;
  text-decoration: none;
  border-color: #fff;
}
.grid-box:hover{
  background: rgb(255, 189, 141);
}

.article {
  /* Demo-Specific Styles */

  /* display: flex; */
  align-items: center;
  justify-content: center;
  height: 320px;
  font-size:  2.5vh;
  /* Flex Fallback */
  /* margin-left: 5px; */
  margin-right: 5px;
  flex: 1 1 320px;

  color: rgb(134, 57, 2);
  font-family: 'MS Pゴシック';
  font-weight: bold; 
}

.article-title{
    word-wrap:break-word;
    /* font-size: 2em; */
}


/* If Grid is supported, remove the margin we set for the fallback */
@supports (display: grid) {
  .article {
    margin: 0;
  }
}
.article_img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-top: solid;
  border-bottom: solid;
  border-width: 1px;
}

.article_time{ 
  /* font-size: 1em; */
  right: 0;    
  bottom: 0;
  font-size: 1.5vh;
}


.page-button{
  /* 文字サイズを1.4emに指定 */
  font-size: 3vh;

  /* 文字の太さをboldに指定 */
  font-weight: bold;

  /* 縦方向に10px、
   * 横方向に30pxの余白を指定 */
  padding: 10px 30px;

  /* 背景色を濃い青色に指定 */
  background-color: rgb(136, 95, 34);

  /* 文字色を白色に指定 */
  color: #fff;

  /* ボーダーをなくす */
  border-style: none;
}

.page-button:hover {
  /* 背景色を明るい青色に指定 */
  background-color: rgb(221, 103, 34);

  /* 文字色を白色に指定 */
  color: #fff;
}

.clicked-button{
    /* 背景色を明るい青色に指定 */
    background-color: rgb(221, 103, 34);

    /* 文字色を白色に指定 */
    color: #fff;
}

@media screen and (max-width: 1000px)
{
  .menu-space{
    height: 12vh;
  }

  .menu{
    display: block;
  }

  .list {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    grid-auto-rows: minmax(160px, auto);
  }

  .article {
    flex: 1 1 160px;
    height: 160px;
  }
  
  .article_img {
    height: 127px;
  }
}