/* =========================================================
   WordPress用の追加の見た目
   （下の階層のページ、記事の本文、一覧の並び替えなど）
   色などは main.css の :root を使っています。
   ========================================================= */

/* ----- WordPressのメニューを青い帯に合わせる ----- */
.nav__list .current-menu-item > a { background: rgba(255, 255, 255, .15); }

/* ----- 下の階層のページの見出しの帯 ----- */
.page-header {
  background: var(--grad);
  color: var(--white);
  padding: 56px 0;
  text-align: center;
}
.page-header__en {
  font-family: var(--font-en);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .15em;
  opacity: .85;
  margin-bottom: 4px;
}
.page-header__title { font-size: 32px; }

/* ----- 記事の本文 ----- */
.entry { max-width: 860px; }
.entry__meta { display: flex; align-items: center; gap: 16px; color: var(--text-light); margin-bottom: 24px; }
.entry__meta time { font-family: var(--font-en); }
.entry__label {
  font-size: 13px;
  font-weight: 700;
  padding: 1px 14px;
  border: 1px solid var(--main);
  color: var(--main);
  border-radius: 999px;
}
.entry__image { width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 32px; }

.entry__content h2 {
  font-size: 24px;
  color: var(--main);
  padding: 8px 0 8px 16px;
  border-left: 5px solid var(--teal);
  margin: 48px 0 20px;
}
.entry__content h3 {
  font-size: 20px;
  color: var(--main);
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
  margin: 36px 0 16px;
}
.entry__content ul,
.entry__content ol { margin: 0 0 1em; padding-left: 1.5em; }
.entry__content ul { list-style: disc; }
.entry__content ol { list-style: decimal; }
.entry__content img { height: auto; border-radius: var(--radius); }
.entry__content table { width: 100%; border-collapse: collapse; margin-bottom: 1.5em; }
.entry__content th,
.entry__content td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.entry__content th { background: var(--gray); color: var(--main); white-space: nowrap; }
.entry__content figure { margin: 0 0 1.5em; }
.entry__content .wp-block-button__link { background: var(--grad); border-radius: 999px; padding: 14px 40px; font-weight: 700; }

/* ----- 解決事例のカードをリンクにする ----- */
.case__link { display: block; height: 100%; color: inherit; text-decoration: none; }
.case__link:hover .case__title { text-decoration: underline; }
img.case__image { display: block; width: 100%; height: auto; object-fit: cover; }

/* ----- 解決事例の分野で絞り込むボタン ----- */
.filter { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 40px; }
.filter a {
  display: block;
  padding: 6px 24px;
  border: 1px solid var(--main);
  border-radius: 999px;
  color: var(--main);
  font-weight: 700;
  text-decoration: none;
}
.filter a:hover,
.filter a.is-current { background: var(--main); color: var(--white); }

/* ----- 代表の写真（切り抜き写真なので白い背景に乗せる） ----- */
img.message__image { width: 100%; height: auto; object-fit: cover; object-position: top; background: var(--white); }

/* ----- YouTubeの埋め込み ----- */
.video iframe { display: block; width: 100%; height: 100%; border: 0; }
.list li a { color: var(--text); text-decoration: none; }
.list li a:hover { color: var(--main); text-decoration: underline; }

/* ----- ページ送り ----- */
.pagination { margin-top: 48px; text-align: center; }
.pagination .nav-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers {
  display: block;
  min-width: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--main);
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--main); border-color: var(--main); color: var(--white); }

/* ----- 記事がまだないときの案内（ログイン中の人だけに見える） ----- */
.empty-note {
  text-align: center;
  padding: 24px;
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-light);
  font-size: 15px;
}

/* ----- 管理バー（ログイン中に上に出る黒い帯）とヘッダーが重ならないように ----- */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .header { top: 46px; }
}

@media (max-width: 640px) {
  .page-header { padding: 40px 0; }
  .page-header__title { font-size: 24px; }
  .entry__content h2 { font-size: 20px; }
}