@charset "utf-8";

/*ヘッダーとフッターのcss読み込み*/
@import url("style.css");

.sp_header {
  opacity: 1;
}

h1 {
  font-size: 30px;
  text-align: center;
  margin: 120px auto 80px;
}

.diary {
  margin: auto;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  gap: 8vw;
  flex-wrap: wrap;
}

.diary_item {
  text-align: center;
  flex-basis: 45%;
  margin-bottom: 30px;
}

.diary_item a {
  text-decoration: none;
  color: #333;
}

/*ページネーション*/
ul.pagination {
  list-style-type: none;
  margin: 50px 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

a.page-link {
  text-decoration: none;
  font-size: 21px;
  color: #333;
  padding: 12px 18px;
  margin: 0 5px;
  border: 1px solid #333;
  border-radius: 50%;
  transition: 0.5s;
}

.pagination li a:hover {
  background-color: #dcdcdc;
  transition: 0.5s;
}

.page-active a.page-link {
  background-color: #dcdcdc;
}

/*記事詳細ページ*/
.diary_page_img {
  width: 70vw;
  margin: 0 auto 50px;
}

.diary_page_p h2 {
  font-size: 21px;
  margin-bottom: 20px;
}

.division {
  margin-top: 50px;
  margin-bottom: 50px;
  border-bottom: 1px solid #333;
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.diary_page_move {
  font-size: 21px;
  display: flex;
  justify-content: space-around;
}

.diary_page_move a {
  color: #333;
}

.link_off {
  pointer-events: none;
  filter: brightness(3);
}

/*タイトル文とメインをフェードイン*/
h1,
main {
  animation: textAnimation 2s forwards;
}

@keyframes textAnimation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


/*以下PC用のcss*/
@media screen and (min-width: 850px) {
  .pc_header {
    display: block;
    opacity: 1;
  }

  .sp_header {
    display: none;
  }

  h1 {
    margin: 200px auto 160px;
  }

  .diary {
    gap: 6vw;
  }

  .diary_item {
    flex-basis: 17%;
  }

  .diary_item p {
    margin-top: 10px;
  }

  ul.pagination {
    margin: 80px auto 150px;
    padding: 0;
  }

  a.page-link {
    padding: 10px 16px;
    margin: 0 5px;
  }

  .diary_item img {
    transition: 0.5s;
  }

  .diary_item a:hover img {
    transform: scale(1.2, 1.2);
    transition: 0.5s;
  }

  .diary_img {
    overflow: hidden;
  }

  /*記事詳細ページ*/
  .diary_page_img {
    width: 40vw;
  }

  .diary_page_p {
    width: 60%;
    margin: 100px auto 100px;
  }

  .diary_page_move {
    justify-content: center;
    gap: 10vw;
  }

  .diary_page_move a {
    text-decoration: none;
  }

  .diary_page_move a:hover {
    filter: brightness(3);
    transition: 0.2s;
  }

  a.page-link {
    font-size: 16px;
    padding: 8px 13px;
  }
}