:root{
  --diary-bg: #fffafc;
  --diary-card: rgba(255,255,255,.8);
  --diary-line: rgba(110,137,214,.2);
  --diary-ink: #6973b1;
}

body.diary-page{
  background: var(--diary-bg);
  color: var(--diary-ink);
}

/* 全体幅 */
.diary-wrap{
  max-width: 880px;
  margin: 12vh auto 10vh;
  padding: 0 20px;
}

/* 見出し */
.diary-head{
  text-align: left;
  margin-bottom: 16px;
}
.diary-title{
  font-size: 1.5rem;
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.diary-desc{
  font-size: .78rem;
  opacity: .6;
  line-height: 1.6;
}

/* タブ */
.diary-tabs{
  display: flex;
  gap: 8px;
  margin: 14px 0 12px;
  flex-wrap: wrap;
}
.diary-tab{
  border: none;
  background: rgba(232,240,255,.6);
  color: #6e89d6;
  font-size: .7rem;
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
}
.diary-tab.is-active{
  background: #fff;
  box-shadow: 0 3px 10px rgba(110,137,214,.15);
  color: #3f5fb8;
}

/* リスト */
.diary-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* カード */
.diary-card{
  background: var(--diary-card);
  border: 1px solid rgba(110,137,214,.06);
  border-radius: 18px;
  padding: 14px 16px 10px;
  box-shadow: 0 6px 24px rgba(0,0,0,.03);
  transition: transform .15s ease, box-shadow .15s ease;
}
.diary-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(110,137,214,.05);
}

/* カードの上部 */
.diary-card-head{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 8px;
}
.diary-card-head time{
  font-size: .7rem;
  color: #6e89d6;
  font-feature-settings: "lnum","pnum";
}
.diary-card-head h2{
  font-size: .92rem;
  font-weight: 600;
}

/* 本文 */
.diary-body{
  font-size: .78rem;
  line-height: 1.7;
  color: #6e7a96;
  margin-bottom: 8px;
  word-break: break-word;
}

/* フッタータグ */
.diary-foot{
  display: flex;
  gap: 6px;
}
.diary-tag{
  background: rgba(232,240,255,.8);
  border-radius: 999px;
  padding: 2px 10px 3px;
  font-size: .6rem;
  color: #4d69bb;
}

/* フッター */
.diary-footer{
  text-align: center;
  margin-top: 24px;
  opacity: .7;
  font-size: .72rem;
}
.diary-footer .back-to-top{
  margin-bottom: 6px;
}
.diary-footer .back-to-top a{
  color: #6e89d6;
  text-decoration: none;
}

/* スマホ */
@media (max-width: 640px){
  .diary-wrap{
    margin-top: 16vh;
  }
  .diary-card{
    border-radius: 14px;
  }
  .diary-card-head{
    flex-direction: column;
  }
}

/* タブは名前が変わってもOKなように幅autoのまま */
.diary-tab{
  border: none;
  background: rgba(232,240,255,.6);
  color: #6e89d6;
  font-size: .7rem;
  padding: 5px 14px 6px;
  border-radius: 999px;
  cursor: pointer;
  transition: .15s;
  white-space: nowrap;
}

@media (max-width: 640px){
  /* スマホはカードを縦に戻す */
  .diary-card.has-thumb{
    display: block;
  }
  .diary-thumb{
    width: 100%;
    height: 130px;
  }
}

.diary-thumb img {
  width: 200px;
  height: 200px;
  object-fit: cover;  /* 画像の中央をトリミングしてちょうどよく収める */
  border-radius: 14px;
  display: block;
  background: rgba(232,240,255,.6);
  box-shadow: 0 3px 14px rgba(110,137,214,.12);
}

/* スマホは下に落とす */
@media (max-width: 768px) {
  .diary-card .diary-thumb {
    position: static;
    width: 180px;
    height: 180px;
    margin-top: 12px;
    transform: none;
  }
  .diary-card.has-thumb .diary-body {
    margin-right: 0;
  }
}

/* 記事の行間 */
.diary-card-head {
  line-height: 1.6;
}