/*
Theme Name: Hello Child
Template: hello-elementor
Version: 1.0
*/

/* アーカイブレイアウト */
main.archive-news {
    padding: 0 0 5rem 0;
}
.archive-news .news-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.news-title-image {
  text-align: center;
  margin: 4rem 0;
  padding-bottom: 1rem;
}

.news-title-image img {
  max-width: 840px;
  width: 100%;
  height: auto;
}


.archive-news .news-item {
  border-bottom: 1px solid #ccc;
  padding-bottom: 16px;
}

/* カード全体 */
.news-card {
  width: 100%;
  max-width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  transition: box-shadow 0.3s;
  margin-bottom: 24px;
  /* 高さ揃えのための追加 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.news-card:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.news-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* アイキャッチ画像 */
.news-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* カード内コンテンツ */
.news-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}

.news-date {
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 8px;
  display: block;
}

.news-card-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.news-excerpt {
  font-size: 1rem;
  color: #555;
  margin-bottom: 16px;
}

/* ボタン */
.news-button span {
  display: inline-block;
  padding: 8px 16px;
  background-color: #0055aa;
  color: #fff;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.news-button span:hover {
  background-color: #003f7f;
}

/*カテゴリーフィルター*/
.category-filter {
  text-align: center;
  margin-bottom: 24px;
}

.category-filter button {
  margin: 0 8px 8px 0;
  padding: 8px 16px;
  background-color: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.category-filter button.active {
  background-color: #0055aa;
  color: #fff;
}

@media (max-width: 1024px) {
  .archive-news .news-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .archive-news .news-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .archive-news .news-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================
   以下、投稿記事（single.php）用のスタイル
   ========================== */
:root{
  --content-max: 860px;
}

.post-article{ max-width: var(--content-max); margin: 0 auto; padding: 24px; }
.post-header{ margin-bottom: 20px; }
.post-cat a{ display:inline-block; font-size:.85rem; background:#f2f4f7; padding:.25em .6em; border-radius:.6em; margin-right:.35em; text-decoration:none; }
.post-title{ font-size: clamp(26px, 4vw, 36px); line-height:1.3; margin:.3em 0 .6em; }
.post-meta{ color:#666; font-size:.9rem; display:flex; flex-wrap:wrap; gap:.5em; align-items:center; }
.post-meta .sep{ opacity:.4; }

.post-thumb{ margin: 16px 0 24px; }
.post-thumb img{ width:100%; height:auto; display:block; border-radius:12px; }

.post-content > *{ margin: 1.2em 0; }
.post-content img{ display:block; height:auto; margin: 1.2em auto; }
.post-content figure{ margin: 1.2em 0; }
.post-content h2{ font-size: clamp(20px, 3vw, 28px); margin: 1.6em 0 .6em; }
.post-content h3{ font-size: clamp(18px, 2.5vw, 22px); margin: 1.4em 0 .5em; }
.post-content pre, .post-content code, .post-content kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.post-content pre{ background:#0b0d12; color:#e6edf3; padding:1em; border-radius:10px; overflow:auto; }
.post-content table{ width:100%; border-collapse:collapse; }
.post-content table th, .post-content table td{ border:1px solid #e5e7eb; padding:.6em .7em; }
.post-content blockquote{ border-left:4px solid #e5e7eb; margin:1.2em 0; padding:.6em 1em; color:#555; background:#fafafa; }

.post-footer{ margin-top: 28px; }
.post-tags a{ display:inline-block; margin:.25em .35em .25em 0; padding:.25em .6em; font-size:.85rem; background:#f6f8fa; border-radius:.6em; text-decoration:none; }

.post-nav{ display:flex; justify-content:space-between; gap:12px; margin-top: 20px; }
.post-nav a{ text-decoration:none; }
.post-nav .prev, .post-nav .next{ flex:1; }
.post-nav .prev a, .post-nav .next a{ display:block; background:#f8fafc; border:1px solid #e5e7eb; padding:12px; border-radius:10px; }

.related-posts{ max-width: var(--content-max); margin: 32px auto 0; padding:0 24px 24px; }
.related-posts h2{ font-size: clamp(20px, 3vw, 24px); margin-bottom: .6em; }
.related-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:16px; }
@media (max-width: 900px){ .related-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){ .related-grid{ grid-template-columns: 1fr; } }
.related-card{ display:block; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; text-decoration:none; background:#fff; }
.related-thumb{ aspect-ratio: 16/9; background:#f3f4f6; overflow:hidden; }
.related-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.related-body{ padding:10px 12px 12px; }
.related-title{ font-size:.98rem; line-height:1.45; margin:.2em 0; color:#111; }
.related-meta{ font-size:.8rem; color:#666; }

/* アイキャッチ画像の調整 */
.post-thumb img {
  max-width: 720px;   /* 横幅の最大値を制限（お好みで600〜800px程度） */
  width: 100%;        /* スマホなどでは画面幅いっぱいに広がる */
  height: auto;       /* 縦横比を維持 */
  margin: 0 auto;     /* 中央寄せ */
  display: block;
  border-radius: 12px; /* 角丸を付けたい場合 */
}

/* アーカイブ/アイキャッチ画像がないときのカテゴリーのサムネ枠 */
.news-thumb{
  aspect-ratio: 16/9;     /* 枠の比率を固定 */
  background: #f3f4f6;    /* サムネが無い時のグレー背景 */
  overflow: hidden;       /* 画像のハミ出し防止 */
}

/* アイキャッチ画像がある場合は枠いっぱいにフィット */
.news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* パンくずリストの調整 */
.breadcrumbs{max-width:1200px;margin:0 auto 1rem;padding:0 16px;color:#777;font-size:.9rem}
.breadcrumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4em}
.breadcrumbs li{display:flex;align-items:center}
.breadcrumbs li+li::before{content:"›";margin:0 .4em;color:#aaa}
.breadcrumbs a{color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}