/* ==========================================================================
   Affective Design Lab — site.css
   設計トークン（記事の手書き HTML からも使ってよいもの）は :root のカスタムプロパティ。
   フォントは fonts/fonts.css（Cabin・Zen Kaku Gothic New、OFL、自前配信）。
   ========================================================================== */

:root {
  /* 色（Figma「ADL 共有用」の COLOR） */
  --color-pink: #ff7b97;
  --color-green: #2ab35b;
  --color-orange: #ff9855;
  --color-blue: #6d8eec;
  --color-black: #363636;
  --color-gray80: #898989;
  --color-gray20: #d2d2d2;
  --color-gray10: #f7f7f7;
  --color-white: #ffffff;
  --color-page: #fafafa;

  /* 文字 */
  --font-family: "Cabin", "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; /* 制作ノートの絵文字（fonts/fonts.css） */
  --font-size-h1: 32px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-h4: 18px;
  --font-size-default: 16px;
  --font-size-small: 14px;
  --line-height-default: 1.4;
  --line-height-compact: 1.6;
  --line-height-comfortable: 1.75;
  --letter-spacing: 0.05em;

  /* 寸法 */
  --header-height: 92px;
  --inner-width: 1216px;
  --inner-padding: 32px;
  --radius-small: 4px;
  --radius: 12px;
  --radius-large: 24px;
  --gap: 32px;

  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 24px);
}

@media (width < 1024px) {
  :root {
    --font-size-h1: 24px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-h4: 18px;
    --header-height: 72px;
    --inner-padding: 20px;
  }
}

/* --------------------------------------------------------------------------
   基本
   -------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  background-color: var(--color-page);
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-default);
  line-height: var(--line-height-default);
  letter-spacing: var(--letter-spacing);
  color: var(--color-black);
  background-color: var(--color-page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 500;
  line-height: var(--line-height-compact);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }

p, li, dd {
  line-height: var(--line-height-comfortable);
}

img, svg, video, iframe {
  max-width: 100%;
  vertical-align: top;
}

a {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover, a:focus-visible {
  text-decoration: none;
}

strong { font-weight: 700; }

figure {
  margin: 0;
}

figcaption {
  margin-top: 8px;
  color: var(--color-gray80);
  font-size: var(--font-size-small);
}

hr {
  margin: 48px 0;
  border: 0;
  border-top: 1px dashed var(--color-gray20);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-small);
}

th, td {
  border-bottom: 1px dashed var(--color-gray20);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 500;
  color: var(--color-gray80);
}

pre, code, kbd {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

pre {
  overflow: auto;
  border-radius: var(--radius-small);
  padding: 16px 20px;
  background-color: var(--color-white);
}

blockquote {
  margin: 24px 0;
  border-left: 3px solid var(--color-pink);
  padding: 4px 0 4px 20px;
  color: var(--color-gray80);
}

/* 画面の幅 */
.inner {
  width: 100%;
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 0 var(--inner-padding);
}

.inner-narrow {
  max-width: 928px;
}

/* 読み上げ専用 */
.visually-hidden, .sr-only {
  position: absolute;
  left: -99999px;
}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  background-color: var(--color-white);
  white-space: nowrap;
}

.site-header .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 100%;
}

.wordmark {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  color: var(--color-pink);
  line-height: 1;
  text-decoration: none;
}

.wordmark strong {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.14em;
}

.wordmark span {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-weight: 500;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--color-pink);
  text-decoration: underline dashed var(--color-pink) 1px;
  text-underline-offset: 6px;
}

.site-nav .lang {
  display: flex;
  gap: 8px;
  margin-left: 8px;
  text-transform: uppercase;
}

.site-nav .lang > :not(:last-child) {
  border-right: 1px solid var(--color-gray80);
  padding-right: 8px;
}

.site-nav .lang a[aria-current="page"] {
  text-decoration-style: solid;
}

.site-nav .lang span {
  color: var(--color-gray20);
}

.menu-button {
  display: none;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 0;
  border: 0;
  padding: 0;
  background: url(icons/mobile-menu-button.svg) no-repeat center / contain;
  cursor: pointer;
}

@media (width < 1280px) {
  .site-nav { font-size: var(--font-size-small); }
}

/* 横に並べたナビが狭いときは、トップからたどれる項目（data-priority="low"）を隠す。今いるページの項目は隠さない。
   幅はヘッダーの中身で問う。引き出し（1024px 未満）では全部並べる */
@media (1024px <= width) {
  /* 問い合わせ用の箱は引き出しが無い幅でだけ作る（作ると固定位置の引き出しがヘッダーの中に閉じ込められる） */
  .site-header .inner { container: header / inline-size; }

  /* 全部並べてもロゴとの間が 64px 残る幅: ロゴ 291＋64＋ナビ全部（14px のとき 日本語 716・英語 564）。言葉の長さが違うので言語ごと。
     1280px 以上（16px）はヘッダーの中身が 1152px で、日本語でも間は 70px 残る */
  @container header (width < 1072px) {
    html:lang(ja) .site-nav a[data-priority="low"]:not([aria-current]) { display: none; }
  }

  @container header (width < 920px) {
    html:lang(en) .site-nav a[data-priority="low"]:not([aria-current]) { display: none; }
  }
}

@media (width < 1024px) {
  .wordmark strong { font-size: 18px; }
  .wordmark span { font-size: 11px; }

  .menu-button { display: block; }

  .site-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 101;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: min(320px, calc(100vw - 32px));
    padding: 32px;
    background-color: var(--color-white);
    box-shadow: -8px 0 24px #0002;
    font-size: var(--font-size-default);
    transform: translateX(100%);
    transition: transform 300ms;
  }

  .site-nav.open { transform: none; }

  .site-nav > * { padding: 8px; }

  .site-nav .lang { margin: 16px 0 0; }
}

/* --------------------------------------------------------------------------
   本体・フッター
   -------------------------------------------------------------------------- */

main {
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  margin-top: var(--header-height);
  padding-bottom: 96px;
}

.site-footer {
  padding: 32px;
  text-align: center;
}

.site-footer .social {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}

.site-footer .social a {
  display: block;
  color: var(--color-pink);
}

/* 高さを揃え、幅は viewBox の比に任せる（横長の YouTube が縮まないように） */
.site-footer .social svg {
  width: auto;
  height: 28px;
}

.site-footer .copyright {
  margin: 0;
  color: var(--color-gray80);
  font-size: var(--font-size-small);
}

/* --------------------------------------------------------------------------
   ページ見出し（ピンクのしずく＋中央揃え）
   -------------------------------------------------------------------------- */

.mark::before {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  background: url(icons/icon-pink.webp) no-repeat center / contain;
  content: "";
}

.page-header {
  margin: 64px 0 48px;
  text-align: center;
}

.page-header h1 {
  margin: 16px 0;
}

.page-header p {
  max-width: 840px;
  margin: 16px auto 0;
  font-weight: 500;
}

.page-section {
  margin-top: 96px;
  text-align: center;
}

.page-section h2 {
  margin: 16px auto;
}

.page-section > p {
  max-width: 880px;
  margin: 16px auto;
  font-weight: 500;
}

/* 見出しのすぐ下のカード（トップの最新のおしらせ・私たちの活動）。Figma ではしずくの上端からカードまで 151px。
   見出しとカードの間を 48px にして 147px（見出しの下の 16px とは相殺されるので 48px を書く）。
   カードの文字は一覧と同じ左揃え（節の中央揃えを受け継がない） */
.page-section > h2 + .cards {
  margin-top: 48px;
  text-align: left;
}

.page-section.left {
  text-align: left;
}

.page-section.left .mark::before {
  margin-left: 0;
}

/* 一覧の目次（丸いボタンの列） */
.directory {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 800px;
  margin: 0 auto 64px;
  padding: 0;
  list-style: none;
}

.directory a {
  display: block;
  border-radius: 80px;
  padding: 8px 20px;
  color: var(--color-green);
  background-color: var(--color-white);
  text-decoration: none;
}

/* ボタン風リンク */
.button {
  display: inline-block;
  width: 464px;
  max-width: 100%;
  margin: 48px auto 0;
  border: 1px solid var(--color-pink);
  border-radius: 48px;
  padding: 16px;
  color: var(--color-pink);
  background-color: var(--color-white);
  font-weight: 500;
  text-align: center;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   カード一覧（おしらせ・プロジェクト・記事）
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 56px var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

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

.card .thumb {
  overflow: hidden;
  border-radius: var(--radius-small);
  aspect-ratio: 4 / 3;
  background-color: var(--color-gray10);
}

.card .thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms;
}

.card a:hover .thumb img {
  transform: scale(1.08);
}

/* カバー画像の無い制作ノート: 写真の代わりに絵文字を真ん中に大きく */
.card .thumb .emoji {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-emoji);
  font-size: 96px;
  line-height: 1;
  transition: transform 500ms;
}

.card a:hover .thumb .emoji {
  transform: scale(1.08);
}

.card .meta {
  display: flex;
  justify-content: space-between;
  margin: 12px 0 8px;
  font-size: var(--font-size-small);
}

.card .new {
  color: var(--color-green);
  text-transform: uppercase;
}

.card .meta time {
  color: var(--color-gray20);
}

.card h3 {
  margin-top: 8px;
  font-size: var(--font-size-h4);
}

.card p {
  margin: 8px 0 0;
  color: var(--color-gray80);
  font-size: var(--font-size-small);
  line-height: var(--line-height-default);
}

/* --------------------------------------------------------------------------
   記事・おしらせの個別ページ
   -------------------------------------------------------------------------- */

.article {
  max-width: 928px;
  margin: 0 auto;
}

.article-header {
  margin: 64px 0 40px;
  text-align: center;
}

.article-header h1 {
  margin: 16px 0 8px;
}

.article-header time,
.article-header .byline {
  color: var(--color-green);
  font-size: var(--font-size-small);
}

.article-header .byline a {
  color: inherit;
}

.article-header .chips {
  justify-content: center;
  margin-top: 16px;
  font-size: var(--font-size-small);
}

.cover {
  margin-bottom: 48px;
}

.cover img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.body img {
  height: auto;
  border-radius: var(--radius);
}

.body h2 {
  margin: 48px 0 16px;
  font-size: var(--font-size-h3);
}

.body h3 {
  margin: 40px 0 12px;
  font-size: var(--font-size-h4);
}

.body h4, .body h5, .body h6 {
  margin: 32px 0 8px;
  font-size: var(--font-size-default);
}

.body p, .body ul, .body ol, .body figure, .body table, .body pre {
  margin: 16px 0;
}

.body figure {
  margin: 32px 0;
}

.body iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius);
}

.body .footnotes {
  margin-top: 48px;
  border-top: 1px dashed var(--color-gray20);
  padding-top: 16px;
  font-size: var(--font-size-small);
}

.body .footnotes h2 {
  position: absolute;
  left: -99999px;
}

.article-footer {
  margin-top: 64px;
  text-align: center;
}

.external-link {
  margin-top: 32px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   プロジェクト個別ページ
   -------------------------------------------------------------------------- */

.project-header {
  margin: 64px 0 40px;
}

.project-header .title {
  display: flex;
  align-items: flex-end;
  gap: 24px;
}

.project-header hgroup {
  flex: auto;
}

.project-header h1 {
  margin: 0 0 8px;
}

.project-header hgroup p {
  margin: 0;
  font-size: var(--font-size-h3);
  font-weight: 500;
  line-height: var(--line-height-compact);
}

.project-header .venue {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
  color: var(--color-green);
}

.project-header .venue:not(:empty)::before {
  width: 40px;
  border-top: 1px dashed var(--color-green);
  content: "";
}

.project .cover img {
  height: 478px;
}

.project .columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  margin: 48px 0 64px;
}

.project .summary {
  border-radius: 20px;
  padding: 40px;
  background-color: var(--color-white);
}

.project .summary > :last-child { margin-bottom: 0; }

.label {
  margin: 0 0 24px;
  color: var(--color-pink);
  font-size: var(--font-size-h3);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project .summary .label::after {
  display: block;
  width: 56px;
  height: 0;
  margin-top: 16px;
  border-bottom: 1px dashed var(--color-pink);
  content: "";
}

.project .aside section {
  margin-bottom: 40px;
}

.project .aside section:empty { display: none; }

.project .aside p {
  margin: 0;
}

.project .aside ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project .aside li {
  margin: 0 0 8px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  margin: 0;
  border-radius: 20px;
  padding: 5px 20px;
  color: var(--color-green);
  background-color: var(--color-white);
}

@media (width < 1024px) {
  .project-header .title { flex-direction: column; align-items: flex-start; }
  .project .cover img { height: auto; }
  .project .columns { grid-template-columns: 1fr; gap: 32px; }
  .project .summary { padding: 24px; }
}

/* --------------------------------------------------------------------------
   メンバー
   -------------------------------------------------------------------------- */

/* 旧サイト（SvelteKit 版）の member-large / member-medium / member-small に合わせる。
   紹介文のある教員は大（写真 232px）、卒業生は小（肩書｜名前 ふりがな）、それ以外は中（写真 132px）。 */
.member-sections {
  max-width: 864px;
  margin: 0 auto;
}

.member-sections section {
  --accent: var(--color-pink);
}

.member-sections section + section {
  margin-top: 90px;
  border-top: 1px dashed var(--color-pink);
  padding-top: 90px;
}

.member-sections h2 {
  margin: 0 0 58px;
  font-size: var(--font-size-h2);
}

#faculty { --accent: var(--color-pink); }
#postgraduates { --accent: var(--color-orange); }
#undergraduates { --accent: var(--color-blue); }
#alumni { --accent: var(--color-green); }

.members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.member-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  margin: 0;
  border-radius: 18px;
  padding: 40px;
  background-color: var(--color-white);
}

/* カード全体をリンクにする: 名前のリンクの ::after をカード一面に広げる。中の別リンク（紹介文・個人サイト）は上に出す */
.member-card .name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.member-card .bio a,
.member-card .links a {
  position: relative;
  z-index: 1;
}

.member-card .name a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms;
}

.member-card:hover .name a {
  color: var(--accent);
}

.member-card .name a:focus-visible {
  outline: none;
}

.member-card:has(.name a:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.member-card .role {
  color: var(--accent);
  font-weight: 500;
}

.member-card .name {
  margin: 0;
  font-size: var(--font-size-h4);
  font-weight: 500;
}

.member-card .phonetic {
  color: var(--color-gray80);
  font-size: var(--font-size-small);
  letter-spacing: 0;
}

.member-card .phonetic:empty,
.member-card .links:empty {
  display: none;
}

.member-card .links {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-small);
}

/* 写真の枠は動かさず、枠の中で写真だけ拡大する（一覧のカードと同じ） */
.member-card .photo {
  flex: none;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: var(--color-gray20);
}

.member-card .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms;
}

.member-card:hover .photo img {
  transform: scale(1.08);
}

/* 小（卒業生）: 肩書｜名前 ふりがな */
.member-card:not(.medium, .large) .role {
  flex: none;
  border-right: 1px solid var(--accent);
  padding-right: 16px;
  white-space: nowrap;
}

.member-card:not(.medium, .large) .name {
  white-space: nowrap;
}

/* 中: 写真と、肩書・名前・ふりがなの縦積み */
.member-card.medium {
  align-items: flex-start;
  gap: 32px;
  padding: 32px;
}

.member-card.medium .photo {
  width: 132px;
  border-radius: 30%;
}

.member-card.medium > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.member-card.medium .role {
  font-size: var(--font-size-h4);
}

.member-card.medium .name {
  margin: 4px 0;
}

/* 大: 写真 232px、肩書と名前の下に点線、紹介文 */
.member-card.large {
  grid-column: 1 / -1;
  align-items: flex-start;
  gap: 40px;
  border-radius: var(--radius-large);
  padding: 48px;
}

.member-card.large .photo {
  width: 232px;
  border-radius: 25%;
}

.member-card.large header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--accent);
  padding-bottom: 8px;
}

.member-card.large .name {
  font-size: var(--font-size-h3);
}

.member-card.large .bio p:first-child { margin-top: 0; }
.member-card.large .bio p:last-child { margin-bottom: 0; }

@media (width < 1024px) {
  .member-card { padding: 16px; }
  .member-card.medium { gap: 16px; padding: 16px; }
  .member-card:not(.large) .role { font-size: var(--font-size-small); }
}

@media (width < 768px) {
  .members { grid-template-columns: minmax(0, 1fr); }
  .member-card.medium .photo { width: 100px; }
  .member-card.large { flex-direction: column; align-items: center; padding: 24px; }
}

/* メンバー個別ページ */
.member-page {
  max-width: 928px;
  margin: 64px auto 0;
}

.member-page .profile {
  display: flex;
  gap: 40px;
  border-radius: var(--radius-large);
  padding: 48px;
  background-color: var(--color-white);
}

.member-page .photo {
  flex: none;
  width: 232px;
  height: 232px;
  border-radius: 25%;
  object-fit: cover;
  background-color: var(--color-gray10);
}

.member-page .profile:not(:has(.photo)) { padding-left: 48px; }

.member-page h1 {
  font-size: var(--font-size-h3);
}

.member-page .role {
  color: var(--color-pink);
  font-weight: 500;
}

.member-page .phonetic {
  color: var(--color-gray80);
  font-size: var(--font-size-small);
}

.member-page .links {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.member-page .related {
  margin-top: 64px;
}

.member-page .related h2 {
  margin-bottom: 24px;
  font-size: var(--font-size-h3);
}

.member-page .related:empty { display: none; }

@media (width < 768px) {
  .member-page .profile { flex-direction: column; align-items: center; padding: 24px; text-align: center; }
  .member-page .profile:not(:has(.photo)) { padding-left: 24px; }
}

/* --------------------------------------------------------------------------
   研究業績・卒論（見出し＋点線区切りの一覧）
   -------------------------------------------------------------------------- */

.pub-section {
  margin-top: 64px;
}

.pub-section h2 {
  padding: 24px 0;
  font-size: var(--font-size-h3);
}

.pub-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pub-list > li {
  border-bottom: 1px dashed var(--color-gray20);
  padding: 24px 0;
  font-size: var(--font-size-small);
}

.pub-list li a {
  overflow-wrap: anywhere;
}

.pub-list .title a {
  color: inherit;
}

.pub-list .ext {
  display: block;
  margin-top: 4px;
}

@media (1024px <= width) {
  .pub-section {
    display: flex;
    gap: 32px;
  }

  .pub-section h2 {
    flex: none;
    width: 320px;
  }

  .pub-list {
    flex: auto;
  }
}

/* 制作ノートの一覧: 写真なしで題名を並べ、左に絵文字の印（白い角丸の小箱）。区切りは業績と同じ点線、日付と題名はカード一覧と同じ。
   項目全体が個別ページへのリンク（題名のリンクの ::after を広げる。書いた人のリンクは上に出す） */
.note-list {
  max-width: 928px;
  margin: 0 auto;
}

.note-item {
  position: relative;
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.note-item .emoji {
  display: grid;
  flex: none;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: var(--radius);
  background-color: var(--color-white);
  font-family: var(--font-emoji);
  font-size: 40px;
  line-height: 1;
}

.note-item .emoji span {
  transition: transform 500ms;
}

.note-item:hover .emoji span {
  transform: scale(1.08);
}

.note-item .text {
  flex: 1;
  min-width: 0;
}

@media (width < 1024px) {
  .note-item {
    gap: 16px;
  }

  .note-item .emoji {
    width: 56px;
    height: 56px;
    font-size: 32px;
  }
}

.note-item .meta {
  display: flex;
  gap: 16px;
  margin: 0 0 8px;
}

.note-item .meta time {
  color: var(--color-gray20);
}

.note-item .new {
  color: var(--color-green);
  text-transform: uppercase;
}

.note-item h3 {
  margin: 0;
  font-size: var(--font-size-h4);
}

.note-item h3 a {
  color: inherit;
  text-decoration: none;
  transition: color 200ms;
}

.note-item h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.note-item:hover h3 a {
  color: var(--color-pink);
}

.note-item h3 a:focus-visible {
  outline: none;
}

.note-item:has(h3 a:focus-visible) {
  outline: 2px solid var(--color-pink);
  outline-offset: 2px;
}

.note-item .summary,
.note-item .byline {
  margin: 8px 0 0;
  color: var(--color-gray80);
  line-height: var(--line-height-default);
}

.note-item .summary:empty,
.note-item .byline:empty {
  display: none;
}

.note-item .byline a {
  position: relative;
  z-index: 1;
  color: inherit;
}

.note-item .chips {
  margin-top: 12px;
}

.note-item .chips li {
  padding: 2px 14px;
}

/* 業績・卒論の個別ページ */
.pub-page {
  max-width: 928px;
  margin: 64px auto 0;
}

.pub-page .box {
  border-radius: 20px;
  padding: 40px;
  background-color: var(--color-white);
}

.pub-page dl {
  margin: 24px 0 0;
}

.pub-page dt {
  color: var(--color-pink);
  font-size: var(--font-size-small);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pub-page dd {
  margin: 4px 0 20px;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   トップ
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  height: 462px;
  margin: 32px 0;
  border-radius: var(--radius);
  background-color: var(--color-gray20);
}

.hero a {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s;
}

.hero a.showing {
  z-index: 1;
  opacity: 1;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner {
  margin: 32px 0;
}

.banner img {
  width: 100%;
  border-radius: 8px;
}

/* 最新のおしらせ: 格子が 3 列のときは 3 件、2 列と 1 列（モバイル）のときは 2 件。
   列の数は .cards の minmax(280px) と間隔 32px で決まるので、3 列になる幅（280×3＋32×2＝904px）を一覧の幅で問う */
.cards.one-row {
  container-type: inline-size;
}

@container (width < 904px) {
  .cards.one-row > li:nth-child(n + 3) { display: none; }
}

@media (width < 1024px) {
  .hero {
    height: 300px;
    margin: 0 calc(-1 * var(--inner-padding)) 24px;
    border-radius: 0;
  }
}

/* --------------------------------------------------------------------------
   ラボについて
   -------------------------------------------------------------------------- */

.concept {
  display: flex;
  align-items: center;
  gap: 48px;
  margin-top: 48px;
  border-radius: var(--radius-large);
  padding: 48px;
  background-color: var(--color-white);
  text-align: left;
}

.concept .figure {
  flex: none;
  width: 440px;
}

.concept .items {
  display: flex;
  flex: auto;
  flex-direction: column;
  gap: 12px;
}

.concept .items section {
  border-radius: 26px;
  padding: 16px 32px;
  background-color: var(--color-gray10);
}

.concept .items h3 {
  padding: 4px 0 4px 40px;
  background: no-repeat left center / 30px;
  font-size: var(--font-size-h4);
}

.concept .items p {
  margin: 4px 0 0;
  font-size: var(--font-size-small);
}

.concept .green h3 { background-image: url(icons/icon-green.webp); }
.concept .blue h3 { background-image: url(icons/icon-blue.webp); }
.concept .orange h3 { background-image: url(icons/icon-orange.webp); }
.concept .green p { color: var(--color-green); }
.concept .blue p { color: var(--color-blue); }
.concept .orange p { color: var(--color-orange); }

.activities {
  display: block;
  margin-top: 48px;
}

.statement {
  max-width: 880px;
  margin: 48px auto 0;
  text-align: left;
}

.statement h3 {
  margin-bottom: 24px;
  font-size: var(--font-size-h3);
}

@media (width < 1024px) {
  .concept { flex-direction: column; gap: 20px; padding: 24px; }
  .concept .figure { width: min(400px, 100%); }
  .concept .items section { padding: 16px 24px; }
}

/* --------------------------------------------------------------------------
   おといあわせ
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  margin-top: 32px;
}

.contact section + section {
  margin-top: 48px;
}

.contact h2 {
  margin-bottom: 8px;
  font-size: var(--font-size-h3);
}

.contact iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (width < 1024px) {
  .contact { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   その他
   -------------------------------------------------------------------------- */

.notice {
  max-width: 640px;
  margin: 96px auto;
  text-align: center;
}

.page-url {
  margin-top: 64px;
  color: var(--color-gray80);
  font-size: var(--font-size-small);
  text-align: center;
  overflow-wrap: anywhere;
}

.page-url a {
  color: inherit;
}