/* ==========================================================================
   広島大学 稲葉研究室 - TOPページ サイト共通スタイル
   Figma node-id: 10582:15（C-2-5-最終決定版2）を実装
   ========================================================================== */

:root {
  --color-primary: #1A6A4F;
  --color-secondary: #7B6248;
  --color-bg-neutral: #F6F4F0;
  --color-bg-accent: #F2F8F3;
  --color-bg-tertiary: #BAD2CA;
  --color-text: #333333;
  --color-white: #FFFFFF;
  --font-default: "Roboto", "Noto Sans JP", sans-serif;
  --font-en: "Orbitron", sans-serif;
  --bs-body-font-family: var(--font-default);
  --container-width: 1200px;
  --section-padding-y: 80px;
  --content-body-max: 916px;
}

/* ---------- reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  font-family: var(--font-default);
  color: var(--color-text);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  display: block;
}
h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

.wp-block-heading:not(:first-child) {
  padding-top: 1rem;
}

.u-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

main {
  margin-top: 0;
  flex: 1;
}

:root :where(.is-layout-flow) > * {
    margin-block-start: 0px!important;
}

/* ---------- ブロック表示・非表示（WordPress Block Visibility: wp-block-hidden-*） ---------- */
/* 他の要素側スタイル（.wp-block-button__link の display:inline-flex 等）と詳細度が同じでも
   必ず非表示にするため !important を付与する（汎用ユーティリティクラスのため） */
@media (max-width: 576px) {
  .wp-block-hidden-mobile {
    display: none !important;
  }
}
@media (min-width: 576px) and (max-width: 767px) {
  .wp-block-hidden-tablet {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .wp-block-hidden-desktop {
    display: none !important;
  }
}

/* ---------- TOPページ: セクション共通（幅制限はWP標準の is-layout-constrained を利用） ---------- */
.hero,
.about,
.research,
.recruit,
.news,
.l-section,
section.single {
  --wp--style--global--content-size: var(--container-width);
}
.about > .wp-block-group.is-layout-constrained,
.research > .wp-block-group.is-layout-constrained,
.news > .wp-block-group.is-layout-constrained,
.l-section > .wp-block-group.is-layout-constrained,
section.single > .wp-block-group.is-layout-constrained {
  max-width: var(--container-width);
  margin-inline: auto;
  width: 100%;
}
section.wp-block-group {
  padding-inline: 20px;
}
/* .l-section > div は本来 wp-block-group を持たないsection向けの左右20pxインセット。
   このsectionは既に上記 section.wp-block-group で20pxインセット済みのため、
   直下の is-layout-constrained 要素では二重にならないよう打ち消す */
.l-section > .wp-block-group.is-layout-constrained {
  padding-inline: 0;
}
/* WPコアが自動出力する「is-layout-constrainedの子要素にmax-width＋margin:autoを強制」する
   ルール（.is-layout-constrained > :where(...){max-width:...;margin-left/right:auto !important})
   が、aside＋本文のグリッド/flexレイアウトと衝突するため、当該セクション内では打ち消す */
div:has(> .side-nav-anchor) > *,
div:has(> .side-nav-tabs) > * {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0!important;
}

.recruit > .wp-block-group.is-layout-constrained {
  max-width: var(--container-width);
  margin-inline: auto;
  width: 100%;
}

.wp-block-column p.wp-block-paragraph {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--color-text);
  text-align: justify;
}

/* ---------- TOPページ: セクション見出し（h2 + 直後のp） ---------- */
.about h2.wp-block-heading,
.research h2.wp-block-heading,
.recruit h2.wp-block-heading,
.news h2.wp-block-heading {
  font-family: var(--font-en);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 2px;
  color: var(--color-primary);
  margin: 0;
  line-height: 1;
}
.about h2.wp-block-heading + p,
.research h2.wp-block-heading + p,
.recruit h2.wp-block-heading + p,
.news h2.wp-block-heading + p {
  font-family: var(--font-default);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 18px);
  color: var(--color-primary);
  margin: 8px 0 0 !important;
}

/* ---------- TOPページ: セクション見出し スクロールアニメーション ---------- */
.c-section-title__en,
.c-section-title__jp {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.c-section-title__jp {
  transition-delay: .12s;
}

.c-section-title__en.is-in,
.c-section-title__jp.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .c-section-title__en,
  .c-section-title__jp {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* WP編集画面（ブロックエディター）にはアニメーションJSが読み込まれないため、
   初期状態(opacity:0)のまま固定されて文字が見えなくなる。エディター内では常時表示にする。 */
.editor-styles-wrapper .c-section-title__en,
.editor-styles-wrapper .c-section-title__jp {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- TOPページ: ボタン（配置セクション基点でデザインを自動適用。ボタン側にクラス付与は不要） ---------- */
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  font-size: clamp(16px, 2vw, 20px);
  padding: 16px 32px;
  border-radius: 31px;
  box-shadow: 0 3px 7.5px rgba(170, 163, 145, .5);
  transition: all 0.5s;
  white-space: nowrap;
}
.wp-block-button__link::after {
  content: "→";
  transition: transform .2s ease;
}
.wp-block-button__link:hover {
  color: var(--color-white);
  background-color: var(--color-text);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(170, 163, 145, .6);
}
.wp-block-button__link:hover::after {
  transform: translateX(4px);
}

/* ---------- 共通エリア（content-body：ブロックエディター互換部分） ---------- */
.content-body .wp-block-heading {
  font-family: var(--font-default);
  font-weight: 400;
  font-size: clamp(22px, 4vw, 32px);
  color: var(--color-text);
}
.content-body .wp-block-paragraph {
  font-family: var(--font-default);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.8;
  color: var(--color-text);
  text-align: justify;
  margin-bottom: 1rem;
}
.content-body .wp-block-paragraph.has-small-font-size {
  font-size: clamp(13px, 1.6vw, 15px) !important;
}
.content-body .wp-block-paragraph.has-medium-font-size {
  font-size: clamp(15px, 1.8vw, 18px) !important;
}
.content-body .wp-block-paragraph.has-large-font-size {
  font-size: clamp(17px, 2.1vw, 21px)!important;
}
.content-body .wp-block-paragraph.has-x-large-font-size {
  font-size: clamp(20px, 2.4vw, 24px)!important;
}

.content-body .wp-block-heading.has-small-font-size {
  font-size: clamp(17px, 2.1vw, 21px)!important;
}
.content-body .wp-block-heading.has-medium-font-size {
  font-size: clamp(20px, 2.4vw, 24px)!important;
}
.content-body .wp-block-heading.has-large-font-size {
  font-size: clamp(22px, 2.8vw, 26px)!important;
}
.content-body .wp-block-heading.has-x-large-font-size {
  font-size: clamp(24px, 3.2vw, 28px)!important;
}

.content-body section.wp-block-group {
  margin-bottom: 5rem;
  padding-inline: 0px;
  scroll-margin-top: 140px;
}
/* .has-text-align-justify { text-align: justify; } */

/* ==========================================================================
   header
   ========================================================================== */
.l-header {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* width: min(1471px, calc(100% - 40px)); */
  width: calc(100% - 40px);
  z-index: 100;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 15px;
}
/*
 * ログイン時、WordPress管理バー（#wpadminbar、position: fixed / z-index: 99999）の
 * 手前に .l-header が回り込んでしまうのを防ぐ。body.admin-bar が付与する自動マージンは
 * 通常のドキュメントフロー要素にしか効かないため、position: fixed の .l-header は
 * 管理バーの高さ分を自前で top に加算する必要がある。
 * ブレークポイント（782px）は管理バーが32px→46pxに変わるWordPress標準の値。
 */
body.admin-bar .l-header {
  top: calc(20px + 32px);
}
@media screen and (max-width: 782px) {
  body.admin-bar .l-header {
    top: calc(20px + 46px);
  }
}
.l-header__logo img {
  width: 190px;
  height: auto;
}

.l-header__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.l-header__toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-primary);
  transition: transform .2s ease, opacity .2s ease;
}
.l-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.l-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.l-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.l-header__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding: 2px 0;
}

.l-header__overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.l-header__overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.l-header__lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(13px, 1.6vw, 16px);
}
.l-header__lang img.l-header__lang-divider {
  width: 1px;
  height: 11px;
}
.l-header__lang a {
  transition: color .2s ease;
}
.l-header__lang a.is-current {
  color: var(--color-primary);
  font-weight: 600;
}
.l-header__lang a:not(.is-current) {
  color: var(--color-text);
}
.l-header__lang a:not(.is-current):hover {
  color: var(--color-primary);
}

.l-header__nav ul {
  display: flex;
  gap: 32px;
}
.l-header__nav a {
  display: inline-block;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 500;
  color: var(--color-text);
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.l-header__nav a.is-current {
  color: var(--color-primary);
  font-weight: 700;
  border-color: var(--color-primary);
}
.l-header__nav a:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

@media screen and (max-width:1200px) {
  .l-header {
    width: calc(100% - 24px);
  }
}


/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  height: 660px;
  overflow: hidden;
  background: #111;
  margin-block-start: 0;
}
.hero > .wp-block-group:first-child {
  position: absolute;
  inset: 0;
}
.hero > .wp-block-group:first-child .wp-block-image,
.hero > .wp-block-group:first-child .wp-block-video {
  width: 100%;
  height: 100%;
  margin: 0;
}
.hero > .wp-block-group:first-child img,
.hero > .wp-block-group:first-child video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 45%, rgba(0, 0, 0, .35) 100%);
}
.hero > .wp-block-group:last-child {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: flex-end;
  padding-bottom: clamp(20px, 4vw, 40px);
  padding-left: clamp(0px, 2vw, 20px);
}
.hero > .wp-block-group:last-child > .wp-block-group {
  color: var(--color-white);
  text-align: left;
  --hero-fluid: clamp(14px, 1.6vw, 20px);
}

.hero p {
  line-height: 1.4;
}
.hero p:first-child {
  font-size: calc(var(--hero-fluid) * 0.97);
  font-weight: 700;
  margin: 0 0 4px;
  font-family: "Meiryo", "Hiragino Sans";
}
.hero h1.wp-block-heading {
  font-size: calc(var(--hero-fluid) * 3.2);
  font-weight: 700;
  line-height: 1;
  margin: 0 0 8px!important;
  padding-top: 0!important;
  font-family: Segoe UI, Frutiger, "Helvetica Neue", Arial, "Meiryo", "Hiragino Sans", sans-serif;
}
.hero p:last-child {
  font-family: var(--font-en);
  font-weight: 600;
  font-size: calc(var(--hero-fluid) * 1.48);
  letter-spacing: 1.85px;
  margin: 0;
  line-height: 1.2;
}
.hero p.en-hero-paragraph {
  letter-spacing: 0;
  font-size: clamp(12px, 1.6vw, 20px);
  margin-top: 16px;
}

/* ==========================================================================
   about us
   ========================================================================== */
.about {
  background: var(--color-bg-neutral);
  padding-top: var(--section-padding-y);
}
.about .wp-block-columns {
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding-bottom: 80px;
}
@media (min-width: 782px) {
  .about .wp-block-column:first-child {
    flex: 0 0 220px;
  }
  .about .wp-block-column:last-child {
    flex: 1 1 0;
    min-width: 0;
  }
}
.about .wp-block-column:last-child h3.wp-block-heading {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  margin-bottom: 1rem;
  padding-bottom: 0;
}
/* .about .wp-block-column:last-child p:last-child {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 500;
  line-height: 1.8;
  color: var(--color-text);
} */
.about::after {
  content: "";
  display: block;
  width: calc(100% + 40px);
  margin-inline: -20px;
  height: 74.5px;
  background-image: url("../images/common/common-divider-wave.svg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
@media (max-width: 768px) {
  .about {
    overflow-x: clip;
  }
  .about::after {
    background-position: left;
    height: 40px;
    width: 150%;
  }
}

/* ==========================================================================
   our research
   ========================================================================== */
.research {
  padding-block: var(--section-padding-y);
}
section.single {
  padding-block: var(--section-padding-y);
}
.research > .wp-block-group.is-layout-constrained > .wp-block-group:first-child {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 978px) {
  .research > .wp-block-group.is-layout-constrained > .wp-block-group:first-child > .wp-block-group:first-child {
    flex-basis: 100%;
  }
}
.research > .wp-block-group.is-layout-constrained > .is-layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

@media (max-width: 978px) {
  .research > .wp-block-group.is-layout-constrained > .is-layout-grid {
    gap: 20px;
    grid-template-columns: repeat(2, 1fr);
  }
  .research .is-layout-grid > .wp-block-group:first-child {
    grid-column: 1 / -1;
  }
}
@media (max-width: 768px) {
  .research > .wp-block-group.is-layout-constrained > .is-layout-grid {
    gap: 32px;
  }
}


.research .is-layout-grid > .wp-block-group.is-layout-constrained {
  aspect-ratio: 1 / 1;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: 0 3px 7.5px rgba(170, 163, 145, .5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .2s ease;
}
.research .is-layout-grid > .wp-block-group.is-layout-constrained:hover {
  box-shadow: 0 5px 14px rgba(170, 163, 145, .65);
  transform: translateY(-2px);
}
.research .is-layout-grid figure.wp-block-image {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  margin-left: 0!important;
  margin-right: 0!important;
}
.research .is-layout-grid figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.research .is-layout-grid > .wp-block-group.is-layout-constrained:hover figure.wp-block-image img {
  transform: scale(1.08);
}
@media (max-width: 978px) {
  .research .is-layout-grid > .wp-block-group.is-layout-constrained {
    aspect-ratio: 4 / 3;
  }
}
.research .is-layout-grid p.wp-block-paragraph {
  padding: 8px 16px;
  text-align: center;
  font-size: clamp(14px, 1.6vw, 16px);
  font-weight: 600;
  margin: 0;
}
/* ==========================================================================
   recruit
   ========================================================================== */
.recruit {
  padding-block: var(--section-padding-y);
}
.recruit > .wp-block-group.is-layout-constrained {
  background: var(--color-bg-accent);
  border-radius: 16px;
  box-shadow: 0 3px 7.5px rgba(170, 163, 145, .5);
  padding: 56px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  cursor: pointer;
}
.recruit > .wp-block-group.is-layout-constrained:hover .wp-block-button__link {
  color: var(--color-white);
  background-color: var(--color-primary);
  box-shadow: none;
  transform: none;
}
.recruit > .wp-block-group.is-layout-constrained > .wp-block-group:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-left: 0!important;
  margin-right: 0!important;
}
.recruit .wp-block-columns {
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

@media (min-width: 782px) {
  .recruit .wp-block-column:first-child {
    flex: 1 1 0;
    min-width: 0;
  }
  .recruit .wp-block-column:last-child {
    flex: 0 0 100px;
  }
}
.recruit .wp-block-button__link {
  width: 100px;
  height: 100px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 100px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
  font-size: clamp(18px, 2.2vw, 22px);
}
.recruit .wp-block-button__link:hover {
  background-color: var(--color-primary);
  box-shadow: none;
  transform: none;
}
.recruit .wp-block-button__link:hover::after {
  transform: none;
}

/* ==========================================================================
   news
   ========================================================================== */
.news {
  position: relative;
  padding-block: var(--section-padding-y);
  overflow: hidden;
}
.news > .wp-block-group:first-child {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: .6;
}
.news > .wp-block-group:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.news > .wp-block-group:last-child {
  position: relative;
}
.news > .wp-block-group.is-layout-constrained:last-child > .wp-block-group:first-child {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}
.news .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.news .wp-block-post {
  position: relative;
  display: flex;
  gap: 32px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 2px 7.5px rgba(170, 163, 145, .5);
  padding: 24px 32px;
  transition: box-shadow .2s ease, transform .2s ease;
  list-style: none;
}
.news .wp-block-post:has(.wp-block-post-title a:hover),
.news .wp-block-post:has(.wp-block-post-title a:focus-visible) {
  box-shadow: 0 5px 14px rgba(170, 163, 145, .65);
  transform: translateY(-2px);
}
.news .wp-block-post-date {
  flex-shrink: 0;
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--color-secondary);
}
.news .wp-block-post-title {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
  margin: 0;
}
.news .wp-block-post-title a {
  color: var(--color-text);
  text-decoration: none;
}
.news .wp-block-post-title a:hover {
  color: var(--color-primary);
}
.news .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
@media (max-width: 767px) {
  .news .wp-block-post-template + .wp-block-buttons {
    margin-top: 32px;
    justify-content: center;
  }
}

/* ==========================================================================
   footer
   ========================================================================== */

footer.wp-block-template-part {
  margin-top: 0!important;
}

.l-footer {
  background-image: linear-gradient(80deg, rgb(40, 72, 72) 7%, rgb(36, 117, 88) 99%);
  color: var(--color-white);
}
.l-footer .l-container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 20px;
}
.l-footer__top {
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  padding-block: 48px;
}
.l-footer__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.l-footer__tags a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--color-white);
  border-radius: 30px;
  padding: 10px 20px;
  font-weight: 350;
  font-size: clamp(13px, 1.6vw, 16px);
  transition: background .2s ease, color .2s ease;
}
.l-footer__tags a img {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.l-footer__tags a:hover {
  background: var(--color-white);
  color: var(--color-primary);
}
.l-footer__tags a:hover img {
  filter: brightness(0.6);
}

.l-footer__bottom {
  padding-block: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.l-footer__lab-name {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 500;
  margin-bottom: 8px;
}
.l-footer__address p+p {
  font-size: clamp(13px, 1.6vw, 16px);
  font-weight: 400;
}
.l-footer__copyright {
  font-weight: 300;
  font-size: clamp(10px, 1.2vw, 12px);
}

/* ==========================================================================
   下層ページ共通: ページヘッダー（パンくず + タイトル）
   ========================================================================== */
.page-hero {
  position: relative;
  padding-top: 170px;
  padding-bottom: 56px;
  background: #111;
  overflow: hidden;
  margin-block-start: 0;
}
/* 背景画像（wp:post-featured-image。ページ/投稿ごとにアイキャッチ画像を管理画面から差し替えられるよう、CSS背景ではなく実体の<img>を敷く。.heroと同じパターン） */
.page-hero > .wp-block-group:first-child {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero > .wp-block-group:first-child .wp-block-image,
.page-hero > .wp-block-group:first-child .wp-block-post-featured-image {
  width: 100%;
  height: 100%;
  margin: 0;
}
.page-hero > .wp-block-group:first-child img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .25);
}

.page-hero > div:last-child,
.l-section > div {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 20px;
}
.page-hero > div:last-child {
  position: relative;
  z-index: 2;
  /* l-section等（外側sectionに20pxパディング＋内側divをpaddingなしで1100px中央寄せ）と
     コンテンツ左右端を揃えるため、このdiv自体は1140px枠＋20pxパディングにして
     実質コンテンツ幅を1100pxに一致させる（狭い画面ではwidth:100%側が効くため挙動は変わらない） */
  max-width: calc(var(--container-width) + 40px);
}
.page-hero > div:last-child > div {
  padding-inline: 20px;
}

.page-hero > div:last-child > p,
.page-hero .wp-block-post-date {
  margin-top: 16px;
  max-width: 640px;
  font-size: 16px;
  line-height: 1.9;
  color: var(--color-white);
}
.page-hero h1,
.page-hero h2 {
  font-family: var(--font-en);
  color: var(--color-white);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 2px;
  margin: 0;
  font-feature-settings: "palt";
}
.page-hero p {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1;
  color: var(--color-white);
  font-weight: 500;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: 2px;
  margin: 0;
  font-family: var(--font-default);
  font-weight: 400;
  font-size: clamp(15px, 1.8vw, 18px);
}

/* ==========================================================================
   下層ページ共通: パンくずリスト（page-heroとは別セクション）
   ========================================================================== */
.breadcrumb {
    padding-top: 16px;
  /* padding-block: 16px;
  border-bottom: 1px solid var(--color-bg-accent); */
}
.breadcrumb > div {
  width: 100%;
  max-width: calc(var(--container-width) + 40px);
  margin-inline: auto;
  padding-inline: 20px;
}
.breadcrumb nav {
  font-size: 13px;
  color: var(--color-secondary);
  padding-inline: 20px;
}
.breadcrumb nav p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}
.breadcrumb nav a {
  transition: color .2s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.breadcrumb nav a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.breadcrumb nav p > span:not(:last-child) {
  opacity: .6;
}
.breadcrumb nav p > *:last-child:not(a) {
  color: #ccc;
}

/* ==========================================================================
   下層ページ共通: セクション/カード
   ========================================================================== */
.l-section {
  padding-block: var(--section-padding-y);
}

.side-nav-tabs + .wp-block-group .wp-block-post-terms,
.page-hero .wp-block-post-terms {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-bg-accent);
  border: 1px solid rgba(26, 106, 79, .25);
  white-space: nowrap;
}

/* ---------- ボタンのスタイルバリエーション（WP編集画面の「スタイル」パネルから選択） ----------
   パターン1「塗りつぶし」: 未指定時の既定 .wp-block-button__link（本ファイル冒頭）がそのまま対応
   パターン2「アウトライン」: WPコア標準の is-style-outline
   パターン3「リンク」: 独自に register_block_style() で登録する is-style-link
   ------------------------------------------------------------------------------------------ */
.wp-block-button.is-style-outline .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 39px;
  border-radius: 31px;
  background: var(--color-white);
  color: var(--color-primary);
  font-weight: 700;
  font-size: 18px;
  border: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
}

.wp-block-button.is-style-link .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-primary);
  font-weight: 500;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color .2s ease;
}
.wp-block-button.is-style-link .wp-block-button__link::after {
  content: none;
}
.wp-block-button.is-style-link .wp-block-button__link:hover {
  background: none;
  transform: none;
  color: var(--color-secondary);
}

/* ---------- CTA行（ボタン行の中央寄せ） ---------- */
section.single .wp-block-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
section.single .wp-block-buttons {
  margin-top: 48px;
}

/* ==========================================================================
   本文エリア（content-body）: 見出し・段落 以外のブロック装飾
   content-body-spec.md §7 準拠
   ========================================================================== */
.l-section .content-body {
  max-width: var(--content-body-max);
  margin-inline: auto;
  padding-inline: 20px;
}
/* .content-body > * + *,
.content-body section.wp-block-group > * + * {
  padding-top: 24px;
  background-color: #ffcfcf;
} */
/* .content-body > div + div,
.content-body section.wp-block-group > div + div {
  margin-top: 24px;
  background-color: #ffcfcf;
} */

.content-body h1.wp-block-heading {
  font-size: clamp(32px, 3.8vw, 38px);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 28px;
  font-feature-settings: "palt";
}
.content-body h2.wp-block-heading {
  font-size: clamp(24px, 3.2vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 24px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-bg-tertiary);
  position: relative;
  font-feature-settings: "palt";
}
.content-body h2.wp-block-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 56px;
  height: 2px;
  background: var(--color-primary);
}
.content-body h3.wp-block-heading {
  font-size: clamp(22px, 2.8vw, 26px);
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 10px;
  font-feature-settings: "palt";
}
.content-body h4.wp-block-heading {
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 10px;
  font-feature-settings: "palt";
}
.content-body h5.wp-block-heading {
  font-size: clamp(17px, 2.1vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 10px;
  font-feature-settings: "palt";
}
.content-body h6.wp-block-heading {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 8px;
  font-feature-settings: "palt";
}
.content-body .wp-block-heading {
  scroll-margin-top: 140px;
}

.content-body .wp-block-paragraph a,
.content-body .wp-block-list a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}
.content-body .wp-block-paragraph a:hover,
.content-body .wp-block-list a:hover {
  color: #208664;
  text-decoration: none;
}

.content-body .wp-block-list {
  padding-left: 1.4em;
  font-size: clamp(15px, 1.8vw, 18px);
  /* line-height: 1.9; */
}
/* 汎用リストの装飾。:not(.publications) で研究業績リストを除外する（下の .wp-block-list.publications 参照）。
   除外しないと、ラッパー(.content-body)を含む分だけ汎用側の詳細度が高くなり、
   表示側でのみ汎用の装飾（ulの中黒など）が研究業績リストに当たってしまう。 */
.content-body ul.wp-block-list:not(.publications) {
  list-style: none;
  padding-bottom: 1.5rem;
}
.content-body ul.wp-block-list:not(.publications) > li {
  position: relative;
  padding-left: .2em;
}
.content-body ul.wp-block-list:not(.publications) > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: .75em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.content-body ol.wp-block-list:not(.publications) {
  list-style: decimal;
}
.content-body ol.wp-block-list:not(.publications) > li::marker {
  color: var(--color-primary);
  font-weight: 700;
}
/* 研究業績リストの li 間隔は .wp-block-list.publications > li の margin-top で一括指定するため、
   ここでも :not(.publications) で除外する。除外しないと li+li（要素2つ）の方が > li（要素1つ）より
   詳細度が高く、研究業績リストの2件目以降だけ間隔が詰まる。 */
.content-body .wp-block-list:not(.publications) li + li {
  margin-top: 8px;
}

@media (min-width: 1201px) {
  .l-section .content-body {
    margin-inline: 0;
  }
}

/* ---------- 研究業績リスト: カード化＋タイトル/著者/書誌情報の階層化 ---------- */
/* セレクタの起点をラッパー（.content-body）ではなくリストブロック自身のクラスにしている。
   ブロックエディターが描画するのは本文だけで、テンプレートが出力するラッパーは編集画面に存在しない。
   ラッパー起点のままでは編集画面に装飾が当たらず、表示側と見た目が食い違う。
   リストブロックの「追加CSSクラス」に publications を入力すれば、どちらの画面でも同じ装飾になる。
   ul / ol のどちらで組んでも同じ見た目にするため、要素セレクタは指定しない。 */
/* ::markerはmargin/paddingが効かないため、番号はCSSカウンター＋::beforeで表示してタイトルとの間隔を確保する */
/* li直下の要素（タイトル・著者・書誌情報）を指す指定は [contenteditable] 経由の系統も併記する。
   ブロックエディターは li と中身の間にRichTextの編集領域を1階層挟むため、直接子結合子だけでは
   編集画面でマッチしない。子孫セレクタに緩めると、span内の先頭<strong>までタイトル扱いになる。
   :first-child / :last-child は親要素内での位置で判定されるため、挟まっても判定結果は変わらない。 */
.wp-block-list.publications {
  list-style: none;
  padding-left: 0;
  counter-reset: pub-count;
}
.wp-block-list.publications > li {
  counter-increment: pub-count;
  background: var(--color-white);
  padding: 0.5rem 0;
  position: relative;
  padding-left: 32px;
  margin-top: 1rem;
}
.wp-block-list.publications > li::before {
  content: counter(pub-count) ".";
  position: absolute;
  left: 0;
  top: 0.7rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
}
.wp-block-list.publications li > strong:first-child,
.wp-block-list.publications li > [contenteditable] > strong:first-child {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.4;
}
.wp-block-list.publications li > span:not(:last-child),
.wp-block-list.publications li > [contenteditable] > span:not(:last-child) {
  display: block;
  font-size: clamp(13px, 1.8vw, 16px);
  margin-top: 10px;
}
.wp-block-list.publications li > span:last-child,
.wp-block-list.publications li > [contenteditable] > span:last-child {
  display: block;
  font-size: clamp(13px, 1.8vw, 16px);
  color: var(--color-secondary);
  margin-top: 6px;
  line-height: 2;
}
.wp-block-list.publications li > span:last-child a,
.wp-block-list.publications li > [contenteditable] > span:last-child a {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--color-bg-accent);
  color: var(--color-primary);
  text-decoration: none;
}
.wp-block-list.publications li > span:last-child a:hover,
.wp-block-list.publications li > [contenteditable] > span:last-child a:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.content-body .wp-block-quote {
  background: var(--color-bg-accent);
  border-radius: 8px;
  text-align: center!important;
  background: var(--color-bg-accent)!important;
  border-left: none!important;
  padding: 24px!important;
  font-weight: 500!important;
  color: var(--color-primary)!important;
  margin-bottom: 0!important;
  font-style: normal!important;
}
.content-body .wp-block-quote p {
  color: var(--color-primary)!important;
  font-style: normal!important;
}
.content-body .wp-block-quote p.wp-block-paragraph {
  font-size: 17px;
  font-style: italic;
  line-height: 1.8;
}
.content-body .wp-block-quote cite {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 14px;
  color: var(--color-secondary);
}
.content-body .wp-block-quote cite::before {
  content: "— ";
}

.content-body details {
  margin-top: 8px;
}
.content-body details summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--color-primary);
  font-weight: 600;
  font-size: clamp(15px, 1.8vw, 18px);
  list-style: none;
}
.content-body details summary::-webkit-details-marker {
  display: none;
}
.content-body details summary::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  font-size: 14px;
  transition: transform .2s ease;
}
.content-body details[open] summary::before {
  content: "–";
}
.content-body details summary:hover {
  color: var(--color-secondary);
}
.content-body details > div,
.content-body details > .wp-block-group {
  /* margin-top: 20px; */
  padding-top: 20px;
  border-top: 1px solid var(--color-bg-accent);
}
.content-body details h4.wp-block-heading {
  padding-top: 2rem;
  margin-bottom: 12px;
  font-feature-settings: "palt";
}
.content-body details h4.wp-block-heading:first-child {
  padding-top: 0;
}

.content-body figure.wp-block-image,
.content-body .wp-block-image figure {
  margin: 0;
  margin-bottom: 1rem;
}
.content-body .wp-block-image img {
  border-radius: 8px;
  width: 100%;
  height: auto;
}
.content-body .wp-element-caption {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-secondary);
  text-align: center;
}
.content-body .wp-block-image.aligncenter,
.content-body .aligncenter {
  margin-inline: auto;
  text-align: center;
}

.content-body .wp-block-columns {
  gap: 32px;
}
.content-body .wp-block-columns.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
}
.content-body .wp-block-column {
  min-width: 0;
}
.content-body .wp-block-media-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.content-body .wp-block-media-text__media img {
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content-body figure.wp-block-table {
  overflow-x: auto;
}
.content-body .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.content-body .wp-block-table th,
.content-body .wp-block-table td {
  padding: 14px 16px;
  border: 1px solid #E3DFD8;
  text-align: left;
}
.content-body .wp-block-table thead th {
  background: var(--color-bg-neutral);
  color: var(--color-primary);
  font-weight: 700;
}
.content-body .wp-block-table tbody tr:nth-child(even) {
  background: #FAFAF8;
}

.content-body .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.content-body .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 14px 32px;
  border-radius: 30px;
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  transition: background .2s ease, transform .2s ease;
}
.content-body .wp-block-button__link:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
}
.content-body .is-style-outline .wp-block-button__link {
  background: var(--color-white);
  color: var(--color-primary);
  border: none;
}
.content-body .is-style-outline .wp-block-button__link:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.content-body .is-style-link .wp-block-button__link {
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--color-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.content-body .is-style-link .wp-block-button__link::after {
  content: none;
}
.content-body .is-style-link .wp-block-button__link:hover {
  background: none;
  transform: none;
  color: var(--color-secondary);
}

.content-body .wp-block-separator {
  border: 0;
  border-top: 1px solid #E3DFD8;
  margin-block: 40px;
}

/* 動画埋め込み（YouTube等。samle.html未収録のため独自に追加定義） */
.content-body .wp-block-embed {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.content-body .wp-block-video {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.content-body .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.content-body .wp-block-gallery figure {
  margin: 0;
}
.content-body .wp-block-gallery.columns-2 figure {
  width: calc(50% - 6px);
}
.content-body .wp-block-gallery.columns-3 figure {
  width: calc(33.333% - 8px);
}
.content-body .wp-block-gallery.columns-4 figure {
  width: calc(25% - 9px);
}
.content-body .wp-block-gallery.is-cropped img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  width: 100%;
  height: 100%;
}

/* ==========================================================================
   タブ切替型サイドナビ（.side-nav-tabs）: 研究業績・ニュース・ギャラリー共通
   ========================================================================== */
div:has(> .side-nav-tabs) {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  align-items: start;
}
.side-nav-tabs {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 993px) {
  .side-nav-tabs {
    position: sticky;
    top: 140px;
    padding-left: 20px;
  }
}
.side-nav-tabs > .wp-block-group {
  background: var(--color-white);
  border-radius: 12px;
}
.side-nav-tabs ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.side-nav-tabs ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 500;
  color: var(--color-text);
  transition: background .2s ease, color .2s ease;
}
.side-nav-tabs ul a:hover,
.side-nav-tabs ul a.is-current {
  background: var(--color-bg-accent);
  color: var(--color-primary);
}
.side-nav-tabs + .wp-block-group {
  min-width: 0;
}

@media (max-width: 992px) {
  div:has(> .side-nav-tabs) {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* aside: 縦積み白カード → 折り返すピル型チップ */
  .side-nav-tabs > .wp-block-group {
    background: none;
    border-radius: 0;
  }
  .side-nav-tabs ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .side-nav-tabs ul a {
    flex-shrink: 0;
    white-space: nowrap;
    justify-content: center;
    border-radius: 999px;
    background: var(--color-bg-accent);
  }
  .side-nav-tabs ul a:hover,
  .side-nav-tabs ul a.is-current {
    background: var(--color-primary);
    color: var(--color-white);
  }

  /* ニュース一覧のみ現状維持: asideをコンテンツ一覧の下に回り込ませる */
  .side-nav-tabs:has(~ .wp-block-group .wp-block-post-template) {
    order: 1;
  }
  .side-nav-tabs ~ .wp-block-group:has(.wp-block-post-template) {
    order: 0;
  }

  /* content-bodyと幅を揃える（div:has(>.side-nav-tabs)>*の打ち消しルールより詳細度を上げる必要がある） */
  div:has(> .side-nav-tabs) > .side-nav-tabs {
    width: 100%;
    max-width: var(--content-body-max);
    margin-inline: auto !important;
    padding-inline: 20px;
  }
}

/* ==========================================================================
   目次アンカー型サイドナビ（.side-nav-anchor）: 研究内容・メンバー・メンバー募集共通
   ========================================================================== */
div:has(> .side-nav-anchor) {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 48px;
  align-items: start;
}
.side-nav-anchor {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 993px) {
  div:has(> .side-nav-anchor) {
    gap: 24px;
  }
  .side-nav-anchor {
    position: sticky;
    top: 140px;
    padding-left: 20px;
  }
}
.side-nav-anchor > .wp-block-group {
  background: var(--color-white);
  border-radius: 12px;
}
.side-nav-anchor ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-nav-anchor ul a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 500;
  color: var(--color-text);
  transition: background .2s ease, color .2s ease;
  background: var(--color-bg-accent);
}
.side-nav-anchor ul a:hover,
.side-nav-anchor ul a.is-current {
  background: var(--color-bg-accent);
  color: var(--color-primary);
}
.side-nav-anchor + .wp-block-group {
  min-width: 0;
}

@media (max-width: 992px) {
  div:has(> .side-nav-anchor) {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  /* aside: 縦積み白カード → 折り返すピル型チップ */
  .side-nav-anchor > .wp-block-group {
    background: none;
    border-radius: 0;
  }
  .side-nav-anchor ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }
  .side-nav-anchor ul a {
    flex-shrink: 0;
    /* white-space: nowrap; */
    justify-content: center;
    border-radius: 999px;
    background: var(--color-bg-accent);
  }
  .side-nav-anchor ul a:hover,
  .side-nav-anchor ul a.is-current {
    background: var(--color-primary);
    color: var(--color-white);
  }

  /* content-bodyと幅を揃える（div:has(>.side-nav-anchor)>*の打ち消しルールより詳細度を上げる必要がある） */
  div:has(> .side-nav-anchor) > .side-nav-anchor {
    width: 100%;
    max-width: var(--content-body-max);
    margin-inline: auto !important;
    padding-inline: 20px;
  }
}

@media (max-width: 576px) {
  div:has(> .side-nav-anchor) > .side-nav-anchor,
  div:has(> .side-nav-tabs) > .side-nav-tabs,
  .l-section .content-body, .page-hero > div:last-child > div, .breadcrumb nav {
    padding-inline: 0;
  }
}




/* ---------- .recruit-about: メールアドレスの引用ブロックを強調表示 ---------- */
.recruit-about blockquote {
  text-align: center;
  background: var(--color-bg-accent);
  border-left: none;
  padding: 24px;
}
.recruit-about blockquote p.wp-block-paragraph {
  font-weight: 500;
  font-size: clamp(16px, 2vw, 20px);
  color: var(--color-primary);
  margin-bottom: 0;
  font-style: normal;
}

/* ---------- .recruit-outcomes: 4項目のカードグリッド ---------- */
.recruit-outcomes .is-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.recruit-outcomes .is-layout-grid > .wp-block-group.is-layout-constrained {
  background: var(--color-white);
  border-radius: 12px;
  /* border: 1px solid var(--color-secondary); */
  /* background: var(--color-bg-accent); */
  background: var(--color-bg-neutral);
  padding: 24px;
}
.recruit-outcomes h3.wp-block-heading {
  font-size: 16px;
  margin-bottom: 8px;
  font-feature-settings: "palt";
}
.recruit-outcomes p.wp-block-paragraph {
  font-size: clamp(13px, 1.6vw, 15px);
  margin-bottom: 0;
  margin-top: 0;
}

@media (max-width: 576px) {
  .recruit-outcomes .is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- .recruit-eligibility: 募集対象（博士後期課程〜助教）の小見出し区切り ---------- */
/* .recruit-eligibility .wp-block-heading:not(:first-child) {
  padding-top: 24px;
} */

/* ---------- .faculty: 写真＋テキストの横並び＋詳細プロフィールを内包するカード ---------- */
.faculty > div.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow {
  background: var(--color-bg-neutral);
  border-radius: 16px;
  padding: 48px;
}

.faculty > div + div {
  margin-top: 32px;
}
.faculty .is-layout-flex {
  display: flex;
  flex-wrap: nowrap;
  gap: 40px;
  align-items: flex-start;
}
.faculty details {
  padding-top: 16px;
}
.faculty .is-layout-flex > figure.wp-block-image {
  flex-shrink: 0;
  width: 150px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-accent);
  margin: 0;
}
.faculty .is-layout-flex > figure.wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.faculty .is-layout-flex > .is-layout-flow {
  flex: 1 1 0;
  min-width: 0;
}
.faculty .is-layout-flex > .is-layout-flow > p.wp-block-paragraph:first-child {
  color: var(--color-secondary);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
}
.faculty h3.wp-block-heading {
  font-size: 26px;
  margin-bottom: 16px;
  font-feature-settings: "palt";
}
.faculty .is-layout-flex > .is-layout-flow > p.wp-block-paragraph {
  font-size: 15px;
  line-height: 1.9;
  text-align: left;
  margin-bottom: 0;
}

/* ---------- .masters / .undergraduate: 氏名カードのグリッド ---------- */
.masters .is-layout-grid,
.undergraduate .is-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.masters .is-layout-grid > .wp-block-group.is-layout-constrained,
.undergraduate .is-layout-grid > .wp-block-group.is-layout-constrained {
  background: var(--color-bg-neutral);
  border-radius: 12px;
  /* box-shadow: 0 3px 7.5px rgba(170, 163, 145, .5); */
  padding: 20px;
  text-align: center;
}
.masters .is-layout-grid p.wp-block-paragraph,
.undergraduate .is-layout-grid p.wp-block-paragraph {
  /* font-size: 15px; */
  /* font-weight: 600; */
  text-align: center;
  margin-bottom: 4px;
  margin-top: 0;
  line-height: 1.2;
}
.masters .is-layout-grid p.wp-block-paragraph:first-child,
.undergraduate .is-layout-grid p.wp-block-paragraph:first-child {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 600;
  text-align: center;
  margin-bottom: 4px;
}
.masters .is-layout-grid p.wp-block-paragraph:last-child,
.undergraduate .is-layout-grid p.wp-block-paragraph:last-child {
  /* font-weight: 400;
  text-align: center;
  margin: 0; */
  margin-top: 16px;
  margin-bottom: 0;
  font-weight: 400;
}

@media (max-width: 992px) {
  .masters .is-layout-grid,
  .undergraduate .is-layout-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .faculty > div.wp-block-group.is-layout-flow.wp-block-group-is-layout-flow {
    padding: 32px;
  }
  .faculty .is-layout-flex {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .faculty .is-layout-flex > figure.wp-block-image {
    width: 130px;
    margin-inline: auto;
  }
  .faculty .is-layout-flex > .is-layout-flow > p.wp-block-paragraph,
  .faculty h3.wp-block-heading {
    text-align: center;
  }
}
@media (max-width: 576px) {
  .masters .is-layout-grid,
  .undergraduate .is-layout-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- ギャラリー: カバーアート（wp:gallery、content-body-spec.md §7-13準拠） ---------- */
/* WP既定はfigcaptionが画像に重ねてposition:absoluteになるため、画像下へ出す */
.content-gallery .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
  display: none;
}
.content-gallery .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  position: static;
  max-height: none;
  overflow: visible;
  background: none;
  color: inherit;
  text-shadow: none;
  padding: 10px 0 0;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  flex-grow: 0;
  flex-basis: auto;
  /* min-height: 90px; */
}
.content-gallery .wp-block-gallery figure.wp-block-image {
  background: var(--color-white);
  /* background: var(--color-bg-neutral); */
  /* border: 1px solid var(--color-bg-tertiary); */
  border-radius: 8px;
  /* box-shadow: 0 3px 7.5px rgba(170, 163, 145, .35); */
  padding: 10px;
}
.content-gallery .wp-block-gallery figure.wp-block-image img {
  border-radius: 4px;
  width: 100%;
  height: 260px;
  object-fit: contain;
}

/* カラム数はflexのままだと余り行のカードがflex-growで画面いっぱいに伸びるため、
   gridに切り替えて統一幅にする（columns-4はデスクトップでの既定値、992px以下は下記@mediaで上書き）。
   WPコア出力（03-wp-block-library.css）の figure.wp-block-image:not(#individual-image) は
   :not(#id)込みで詳細度が非常に高いため !important で明示的に打ち消す。 */
.content-gallery .wp-block-gallery.has-nested-images {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: stretch;
}
.content-gallery .wp-block-gallery.has-nested-images figure.wp-block-image {
  width: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
}
/* WPコアの `figure.wp-block-image > div { flex-grow: 1; }` が、Lightbox用に追加した
   直接の子div（.wp-lightbox-container）にも適用され、カードの余ったスペースを
   このdivが伸びて埋めてしまい、figcaptionの位置がずれるため打ち消す。 */
.content-gallery .wp-block-gallery.has-nested-images figure.wp-block-image > .wp-lightbox-container {
  flex-grow: 0;
}

/* クリックで拡大表示（WPネイティブLightbox機能相当。wp-lightbox-*はWP自動出力クラス）。
   実際のWP側JS計算値（--wp--lightbox-image-width等のCSS変数）は使わず、
   viewportに対するmax-width/max-heightでシンプルに中央表示する。 */
/* コアは暗幕へ theme.json の背景色（白）をインラインstyleで直接書き込むため
   （wp-includes/blocks/image.php の block_core_image_print_lightbox_overlay()）、
   通常のルールでは上書きできない。インラインstyleに勝たせるため !important を付ける。 */
.wp-lightbox-overlay .scrim {
  background-color: rgba(0, 0, 0, .4) !important;
  opacity: 1;
}
.content-gallery .wp-lightbox-container button svg {
  fill: #fff;
}
.wp-lightbox-navigation-button {
  fill: #ffffff!important;
}
.wp-lightbox-overlay .wp-lightbox-close-button,
.wp-lightbox-overlay .wp-lightbox-close-button:hover,
.wp-lightbox-overlay .wp-lightbox-close-button:focus,
.wp-lightbox-overlay .wp-lightbox-close-button:not(:hover):not(:active):not(.has-background) {
  background: #fff;
  border-radius: 50%;
}
.wp-lightbox-overlay .wp-lightbox-close-icon {
  font-size: 28px;
  line-height: 1;
  color: #333;
}
/* 閉じるボタンをビューポート右上ではなく画像の右上・画像の外側（上方向）に配置する
   （HTML側で.lightbox-image-containerの子に移動済み。同containerがposition:absoluteのため配置基準になる。
   overflow:hiddenのままだと画像の外にはみ出す分がクリップされるためvisibleに変更） */
.content-gallery .wp-lightbox-overlay .lightbox-image-container .wp-lightbox-close-button {
  top: -48px;
  right: 0;
}
.wp-lightbox-overlay .wp-lightbox-close-button:focus {
  outline: none;
}
.wp-lightbox-overlay .wp-lightbox-close-button::-moz-focus-inner {
  border: 0;
}
.wp-lightbox-overlay .wp-lightbox-close-button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.wp-lightbox-overlay .lightbox-image-container {
  width: auto;
  height: auto;
  overflow: visible;
}
.wp-lightbox-overlay .wp-block-image {
  display: block;
  width: auto;
  height: auto;
}
/* コアは枠と画像に「一覧の縮小画像の縦横比」から算出したサイズを当て、枠を overflow: hidden で
   切り取るため、一覧側で height を固定していると拡大時に画像が切れる。上記の width/height: auto と
   overflow: visible でその計算値を使わず、下記の max-width/max-height で画面内に収める。
   min-width / min-height はCSSの優先順位上 max-* より強いため、併せて打ち消す必要がある。 */
.wp-lightbox-overlay .lightbox-image-container .wp-block-image img {
  display: block;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: 90vw;
  max-height: 90vh;
}

/* ---------- ギャラリー: 集合写真 ---------- */
.content-gallery h3.wp-block-heading {
  padding-top: 32px;
  font-feature-settings: "palt";
}

/* ---------- レスポンシブ（必ず上記の無条件ルールより後ろに書く。
   同詳細度の場合CSSは後勝ちのため、前に書くと打ち消されて無効化される） ---------- */
@media (max-width: 992px) {
  .content-gallery .wp-block-gallery.has-nested-images {
    grid-template-columns: repeat(2, 1fr);
  }
  .content-gallery .wp-block-gallery figure.wp-block-image img {
    height: 340px;
  }
  .wp-lightbox-overlay .lightbox-image-container .wp-block-image img {
    max-width: 95vw;
    max-height: 95vh;
  }
}
@media (max-width: 576px) {
  .content-gallery .wp-block-gallery.has-nested-images {
    grid-template-columns: 1fr;
  }
  .content-gallery .wp-block-gallery figure.wp-block-image img {
    height: 420px;
  }
  /* 576px以下ではライトボックス（拡大表示）を出さない */
  .content-gallery .wp-lightbox-container {
    cursor: default;
  }
  .content-gallery .wp-lightbox-container img {
    cursor: default;
  }
  .content-gallery .wp-lightbox-container button {
    display: none;
  }
}

/* ==========================================================================
   連絡先（Contact）
   ========================================================================== */
/* 2カラム（wp:columns）を組む本文エリアの幅上限をセクション幅いっぱいに広げる汎用クラス
   （publications/*.htmlのcontent-list、gallery/*.htmlのcontent-gallery と同じ「.content-body への用途別追加クラス」パターン。
   news-single.html等、このクラスを付けていない他の .l-section .content-body ページには影響させない） */
.content-columns.content-body {
  max-width: var(--container-width);
}

.content-body .is-label {
  margin-bottom: 8px;
  background: var(--color-bg-neutral);
  display: inline-block;
  padding: 3px 10px 2px 10px;
  border-radius: 30px;
  color: var(--color-secondary);
  font-size: clamp(12px, 1.8vw, 14px)!important;
}
.contact-info__map {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-neutral);
}
/* 782px以上（テキスト／マップが横並びになる幅）ではaspect-ratioより優先し、
   左カラム（テキスト）と同じ高さいっぱいに広げる */
@media (min-width: 782px) {
  .contact-info__map {
    height: 100%;
  }
}
.contact-info__map iframe {
  width: 100%;
  max-width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* ==========================================================================
   responsive
   ========================================================================== */
@media (max-width: 1200px) {
  .l-header__toggle {
    display: flex;
  }

  .l-header__panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    background: var(--color-white);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    align-items: stretch;
    padding: 20px;
    display: none;
  }
  .l-header__panel.is-open {
    display: flex;
  }
  .l-header__lang {
    order: 1;
    align-self: stretch;
    justify-content: flex-start;
    margin-bottom: 0;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E3E3E3;
  }
  .l-header__nav ul {
    flex-direction: column;
    gap: 4px;
  }
  .l-header__nav a {
    display: block;
    padding: 10px 4px;
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  :root {
    --section-padding-y: 48px;
  }

  .l-header {
    top: 12px;
    padding: 10px 16px;
  }
  /* 768px以下は常にWordPress管理バーの46px版（782px以下）の範囲内 */
  body.admin-bar .l-header {
    top: calc(12px + 46px);
  }
  .l-header__logo img {
    width: 150px;
  }

  .hero {
    height: 480px;
  }
  .hero > .wp-block-group:last-child {
    padding-left: 0;
  }

  .wp-block-button__link {
    padding: 14px 26px;
    gap: 12px;
  }
  .recruit .wp-block-button__link {
    width: 80px;
    height: 80px;
  }

  .about .wp-block-columns {
    flex-direction: column;
    padding-bottom: 48px;
  }

  .research > .wp-block-group.is-layout-constrained > .wp-block-group:first-child,
  .news > .wp-block-group.is-layout-constrained:last-child > .wp-block-group:first-child {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .research > .wp-block-group.is-layout-constrained > .is-layout-grid {
    grid-template-columns: 1fr;
  }
  .research .is-layout-grid + .wp-block-buttons {
    margin-top: 32px;
    justify-content: center;
  }

  .recruit > .wp-block-group.is-layout-constrained {
    /* padding: 32px; */
    gap: 0px;
  }
  .recruit .wp-block-columns {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .recruit .wp-block-column:last-child {
    display: none;
  }

  .news .wp-block-post {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }

  .l-footer__tags {
    gap: 12px;
  }
  .l-footer__tags a {
    padding: 12px 18px;
    gap: 6px;
  }
  .l-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-hero {
    padding-top: 110px;
    padding-bottom: 40px;
  }
  .content-body .wp-block-media-text {
    grid-template-columns: 1fr;
  }

  .contact-info__map {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 576px) {
  .wp-block-button__link {
    padding: 12px 20px;
    gap: 10px;
  }
  .recruit .wp-block-button__link {
    width: 64px;
    height: 64px;
  }

  .l-footer__tags a {
    padding: 10px 14px;
    gap: 5px;
  }
  .l-footer__tags a img {
    width: 12px;
    height: 12px;
  }
}

/* ==========================================================================
   ニュース（動的クエリ: templates/home.html, templates/archive.html 用）
   コアの wp:query / wp:post-template 出力を .side-nav-tabs の隣接セレクタで統一
   （index.htmlのニュース抜粋は.side-nav-tabsを持たないため対象外）
   ========================================================================== */
.side-nav-tabs + .wp-block-group .wp-block-post-template {
  display: flex;
  flex-direction: column;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.side-nav-tabs + .wp-block-group .wp-block-post {
  position: relative;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: 32px;
  background: var(--color-white);
  border-radius: 8px;
  box-shadow: 0 2px 7.5px rgba(170, 163, 145, .5);
  padding: 24px 32px;
  transition: box-shadow .2s ease, transform .2s ease;
}
.side-nav-tabs + .wp-block-group .wp-block-post:has(.wp-block-post-title a:hover),
.side-nav-tabs + .wp-block-group .wp-block-post:has(.wp-block-post-title a:focus-visible) {
  box-shadow: 0 5px 14px rgba(170, 163, 145, .65);
  transform: translateY(-2px);
}
@media (max-width: 768px) {
  .side-nav-tabs + .wp-block-group .wp-block-post {
    flex-direction: column;
    gap: 8px;
    padding: 16px;
  }
}
.side-nav-tabs + .wp-block-group .wp-block-post-title {
  margin: 0;
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 400;
}
.side-nav-tabs + .wp-block-group .wp-block-post-title a {
  color: var(--color-text);
  transition: color .2s ease;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
}
.side-nav-tabs + .wp-block-group .wp-block-post-title a:hover {
  color: var(--color-primary);
  text-decoration: none;
}
.side-nav-tabs + .wp-block-group .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.side-nav-tabs + .wp-block-group .wp-block-post-date {
  flex-shrink: 0;
  font-weight: 400;
  font-size: clamp(13px, 1.6vw, 16px);
  color: var(--color-secondary);
}
.side-nav-tabs + .wp-block-group .wp-block-post-terms {
  flex-shrink: 0;
}
.side-nav-tabs + .wp-block-group .wp-block-post-terms a {
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   ニュース詳細（single）: 投稿ヘッダー（タイトル・日付）
   ========================================================================== */
section.single .wp-block-post-title,
section.single .wp-block-post-date {
  max-width: var(--content-body-max);
  margin-inline: auto;
}
section.single .wp-block-post-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text);
}
section.single .wp-block-post-date {
  margin-top: 12px;
  font-weight: 400;
  font-size: 14px;
  color: var(--color-secondary);
}
section.single .content-body {
  max-width: var(--content-body-max);
  margin-inline: auto;
  margin-top: 40px;
}

.wp-block-query-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 48px;
  list-style: none;
  padding: 0;
}
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: 4px;
  border-radius: 50%;
  font-size: 15px;
  color: var(--color-text);
  transition: background .2s ease, color .2s ease;
}
.wp-block-query-pagination a:hover {
  background: var(--color-bg-accent);
  color: var(--color-primary);
}
.wp-block-query-pagination .current {
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 700;
  border-radius: 50%;
}