@charset "utf-8";

:root {
  --cat-color: #2D304D;
  --door-shadow: gray;
  --nano-white: rgba(247, 251, 254, 1);
  --bg-color: rgba(218, 236, 243, 1);
  --h2-color: #D788AF;
  --font-zen: 'Zen Maru Gothic', sans-serif;
  --diary-radius: 11px;
  --head-radius: 6px;
}

h1 {
  font-family: var(--font-zen);
  font-weight: 700;
  font-size: 1.7rem;
}

h3 {
  font-size: 1.2rem;
  margin-bottom: 2px;
}

/* ---------------------カスタム--------------------- */
main {
  margin: 0 auto;
}

body {
  background-color: var(--bg-color);
  background-image: url(../img/bg/mainbg4.png);
  background-size: 330px;
}

.diary-head {
  width: 300px;
  max-width: 100%;
  margin: 20px auto 40px;
  text-align: center;
  color: var(--h2-color);
  padding: 0px 10px 5px;
  border-radius: var(--head-radius);
  border: 2px solid var(--h2-color);
  background-color: var(--nano-white);
  box-shadow: 1px 2px 5px var(--door-shadow);
}

.diary-head h1 {
  font-weight: 900;
  font-size: 2rem;
  margin-bottom: 5px;
}

.diarybox ul {
  display: grid;
  grid-template-columns: repeat(1, 555px);
  row-gap: 8px;
  justify-content: center;
}

.diarybox ul li {
  width: 100%;
  margin: 0 auto;
  padding: 0.5rem;
  box-shadow: 1px 1px 3px var(--door-shadow);
  border-radius: 2px;
  background-color: rgba(247, 251, 254, 0.7);

}

.diarybox ul li:hover {
  background-color: rgba(247, 251, 254, 0.9);
}

.time {
  color: #555;
}

/* ボタンレイアウト */
.link-btn-area {
  margin: 80px auto 40px;
}

@media (max-width: 800px) {
  body {
    background-size: 220px;
  }
  .diarybox ul {
    grid-template-columns:1fr;
    row-gap: 8px;
  }
}