/* =========================================================
   Ikeda Research - トップページ（index.html だけで読み込む）
   ATR 数理知能研究室のトップに倣った、平らで明るい体裁。
   ・キービジュアルは写真をひし形に切り抜いて敷きつめ、真ん中にロゴ
   ・差し色は濃い赤 1 色。面は白と、ごく淡い温かみのある灰
   ・見出しは大きな英字を左に。Topics と Contact は見出し左・中身右の 2 段
   以前の版は _backup/home-2026-10-14/ にある
   ========================================================= */

.home {
  --h-accent:      #8b1a1f;   /* 白文字を載せても読める濃さ */
  --h-accent-tint: #efd9d8;
  --h-soft:        #f7f4f2;
  --h-gap:         5px;       /* ひし形どうしの白い隙間 */
}

/* ---------- Key visual ---------- */
.kv-tiles { background: #fff; }
.kv-tiles__frame {
  position: relative; overflow: hidden;
  width: 100%; max-width: 1600px; margin: 0 auto;
  aspect-ratio: 1400 / 560;
}
.kv-tiles__stage { position: absolute; inset: 0; }

.kv-tile {
  position: absolute;
  left:   calc((var(--x) - var(--r)) / 14 * 1%);
  top:    calc((var(--y) - var(--r)) / 5.6 * 1%);
  width:  calc(var(--r) * 2 / 14 * 1%);
  height: calc(var(--r) * 2 / 5.6 * 1%);
  clip-path: polygon(50% var(--h-gap), calc(100% - var(--h-gap)) 50%, 50% calc(100% - var(--h-gap)), var(--h-gap) 50%);
  background-size: cover; background-position: center;
  opacity: 0;
  animation: kv-tile-in .9s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i) * 45ms);
}
.kv-tile--deep { background-color: var(--h-accent); }
.kv-tile--tint { background-color: var(--h-accent-tint); }
.kv-tile--pale { background-color: var(--h-soft); }
.kv-tile--photo { background-color: var(--h-soft); }

@keyframes kv-tile-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: none; }
}

.kv-tiles__center {
  position: absolute; inset: 0; margin: auto; height: fit-content;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  width: 22%;
  animation: kv-tile-in 1s .5s cubic-bezier(.16, 1, .3, 1) both;
}
/* ロゴの元画像は白抜き。ヘッダーと同じく反転して黒で見せる */
.kv-tiles__logo { width: 100%; height: auto; filter: invert(1) hue-rotate(180deg); }
.kv-tiles__name {
  font-size: clamp(13px, 1.25vw, 18px); font-weight: 700; letter-spacing: .2em;
  color: var(--h-accent);
}

/* 狭い画面：真ん中の 700 幅だけを見せる */
@media (max-width: 767px) {
  .kv-tiles__frame { aspect-ratio: 700 / 560; }
  .kv-tiles__stage { left: -50%; right: auto; width: 200%; }
  .kv-tiles__center { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .kv-tile, .kv-tiles__center { animation: none; opacity: 1; }
}

/* ---------- 共通 ---------- */
.h-sec { padding: 110px 0 120px; background: #fff; }
.h-sec--soft { background: var(--h-soft); }
.h-sec--tight { padding-top: 0; }
.h-inner { max-width: 1230px; margin: 0 auto; padding: 0 var(--pad-x); }
.h-inner--narrow { max-width: 1030px; }

.h-title {
  margin-bottom: 28px;
  font-size: clamp(44px, 5vw, 68px); font-weight: 800; line-height: 1; letter-spacing: -.01em;
  color: var(--ink);
}

.h-more { margin-top: 44px; text-align: right; }
.h-more a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 15px; font-weight: 800; letter-spacing: .04em;
}
.h-more a::after {
  content: ''; width: 36px; height: 36px; border-radius: 50%;
  background: var(--h-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.2 13H4v-2h12.2l-5.6-5.6L12 4l8 8-8 8-1.4-1.4z'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .3s ease;
}

/* ---------- About ----------
   問いと答えで見せる（参考：京都産業大学「生命とタンパク質の世界」 https://www.kyoto-su.ac.jp/protein/）。
   ・問いは細い文字で、左右を赤い大きな丸かっこ、後ろに点で描いた「？」
   ・答えは太字。要の語にマーカー（淡い赤の帯）を引く
   ・本文は中央そろえの小さな文字、その下に黒い丸ボタン
   ・下の研究テーマとは、横線の上に丸を置いた区切りでつなぐ
   動きは style.css の .reveal（ふわっと現れる）だけ。
   以前の版は _backup/home-about-2026-10-14/、_backup/about-scroll-2026-10-15/、
   _backup/about-lux-2026-10-15/、_backup/about-qa-2026-10-15/ にある */
#about { background: #fff; padding-top: 140px; }
.qa { display: flex; flex-direction: column; align-items: center; text-align: center; }

.qa__q {
  position: relative; display: grid; place-items: center;
  width: min(820px, 100%); min-height: 240px; padding: 0 clamp(56px, 8vw, 120px);
}
/* 左右の丸かっこ。太さのそろった弧（SVG）で描き、端は丸める */
.qa__q::before, .qa__q::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 56px;
  background: no-repeat center / 100% 100%;
}
.qa__q::before { left: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 240' preserveAspectRatio='none'%3E%3Cpath d='M54 6 Q4 120 54 234' fill='none' stroke='%238b1a1f' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.qa__q::after { right: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 240' preserveAspectRatio='none'%3E%3Cpath d='M6 6 Q56 120 6 234' fill='none' stroke='%238b1a1f' stroke-width='5' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
/* 後ろの「？」。字の形を細かい点で塗る */
.qa__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 320px; font-weight: 900; line-height: 1;
  color: transparent;
  background: radial-gradient(circle, #e6b9b6 38%, transparent 42%) 0 0 / 10px 10px;
  -webkit-background-clip: text; background-clip: text;
  pointer-events: none; user-select: none;
}
.qa__q-text {
  position: relative;
  font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.7; letter-spacing: .1em;
  color: #3a3a3a;
}

.qa__a {
  margin-top: 64px;
  font-size: clamp(21px, 2.1vw, 30px); font-weight: 800; line-height: 1.75; letter-spacing: .06em;
  color: var(--ink);
}
.qa__a mark {
  background: linear-gradient(transparent 60%, #f0d3d1 60%, #f0d3d1 92%, transparent 92%);
  color: inherit;
}

.qa__body { margin-top: 36px; }
.qa__body p { font-size: 14px; font-weight: 600; line-height: 2.1; letter-spacing: .08em; color: #333; }

.qa__cta { margin-top: 40px; }
.pill-btn {
  display: inline-flex; align-items: center; gap: 20px; padding: 15px 26px 15px 40px;
  border-radius: 999px; background: #111; color: #fff;
  font-size: 14px; font-weight: 600; letter-spacing: .06em;
  transition: background-color .2s ease;
}
.pill-btn .material-symbols-outlined { font-size: 18px; }
.pill-btn:hover { background: var(--h-accent); }

.qa__a .nb { display: inline-block; }
.pc-br { display: inline; }
.sp-br { display: none; }

/* 研究テーマとの区切り。淡い赤の丸を細い輪で囲み、左右に横線、下へ縦線を落とす。
   線は画面に入ると丸から外へ伸び、縦線の上を小さな点がゆっくり下りていく（動きは末尾の「スクロールの動き」） */
.qa-next {
  --c: 148px;
  position: relative; display: flex; flex-direction: column; align-items: center;
  margin: 120px 0 36px;
}
.qa-next::before, .qa-next::after {
  content: ""; position: absolute; top: calc(var(--c) / 2); height: 1px; background: var(--ink);
}
.qa-next::before { left: 0; right: calc(50% + var(--c) / 2 + 28px); transform-origin: right center; }
.qa-next::after { right: 0; left: calc(50% + var(--c) / 2 + 28px); transform-origin: left center; }
.qa-next__circle {
  position: relative; display: grid; place-items: center; align-content: center; gap: 6px;
  width: var(--c); height: var(--c); border-radius: 50%;
  background: #f0d3d1;
  box-shadow: 0 0 0 9px #fff, 0 0 0 10px rgba(139, 26, 31, .35);
  text-align: center;
}
.qa-next__q { font-size: 14px; font-weight: 800; line-height: 1.55; letter-spacing: .05em; color: var(--ink); }
.qa-next__drop {
  position: relative; display: block; width: 1px; height: 64px; margin-top: 26px;
  background: linear-gradient(var(--h-accent), rgba(139, 26, 31, .15));
  transform-origin: top center;
}
.qa-next__drop::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin-left: -3.5px;
  border-radius: 50%; background: var(--h-accent); opacity: 0;
}

/* ---------- 二つの分野の説明 ----------
   分野ごとに「問い → 答え → 説明 → 図 → 詳しくは」。図は線と淡い赤の面だけで描く */
.field__tag {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--h-accent);
}
.field__tag span {
  padding: 5px 14px; border-radius: 999px; background: var(--h-accent); color: #fff;
  font-size: 13px; letter-spacing: .08em; text-transform: none;
}
.qa__q--sm { min-height: 200px; }
.qa__q--sm .qa__mark { font-size: 260px; }
.qa__q--sm .qa__q-text { font-size: clamp(22px, 2.3vw, 32px); }

.fig { width: min(960px, 100%); margin-top: 56px; }
.fig__case {
  display: flex; align-items: flex-start; justify-content: center; gap: 12px;
  margin-top: 28px; font-size: 13.5px; line-height: 1.85; color: var(--sub); text-align: left;
}
.fig__cases { display: grid; gap: 10px; width: fit-content; max-width: 100%; margin: 28px auto 0; }
.fig__cases .fig__case { margin-top: 0; justify-content: flex-start; }
.fig__case-tag {
  flex: none; padding: 1px 10px; border: 1px solid var(--h-accent); border-radius: 4px;
  font-size: 12px; font-weight: 700; color: var(--h-accent);
}

/* 図 1：集める → 読み解く → 役立てる */
.flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; list-style: none; padding: 0; }
.flow__step {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 20px 28px; border-radius: 16px; background: var(--h-soft);
}
.flow__step + .flow__step::before {
  content: 'arrow_forward'; position: absolute; left: -44px; top: 50%; transform: translateY(-50%);
  font-family: 'Material Symbols Outlined'; font-size: 32px; line-height: 1; color: var(--h-accent);
}
.flow__icon {
  display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: #fff; border: 2px solid var(--h-accent); color: var(--h-accent); font-size: 34px;
}
.flow__name { margin-top: 6px; font-size: 18px; font-weight: 800; letter-spacing: .08em; }
.flow__text { font-size: 13.5px; line-height: 1.8; color: var(--sub); }

/* 図 2：資料 → アーカイブ（＋生成AI）→ 学ぶ・聞く・語り合う */
.arc {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); align-items: center; gap: 64px;
  position: relative;
}
.arc ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.arc__src li {
  display: flex; align-items: center; gap: 10px; padding: 10px 18px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-size: 14px; font-weight: 700; letter-spacing: .06em;
}
.arc__src .material-symbols-outlined { font-size: 20px; color: var(--h-accent); }
.arc__hub {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 280px; height: 280px; border-radius: 50%;
  background: #f0d3d1; text-align: center;
}
.arc__hub::before, .arc__hub::after {
  content: 'arrow_forward'; position: absolute; top: 50%; transform: translateY(-50%);
  font-family: 'Material Symbols Outlined'; font-size: 32px; line-height: 1; color: var(--h-accent);
}
.arc__hub::before { left: -50px; }
.arc__hub::after { right: -50px; }
.arc__hub-icon { font-size: 34px; color: var(--h-accent); }
.arc__hub b { font-size: 19px; font-weight: 800; line-height: 1.4; letter-spacing: .06em; }
.arc__hub > span:not([class]) { font-size: 12.5px; color: #333; }
/* 生成AI と ローカルAI は掛け合わせではなく、用途に応じて切り替える。
   切り替えスイッチの形で見せ、つまみが二つのあいだを行き来する */
.arc__switch { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8px; }
.arc__switch-track {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 206px; padding: 3px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(139, 26, 31, .25);
}
.arc__switch-knob {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  border-radius: 999px; background: var(--h-accent);
}
.arc__switch-opt {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 6px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--h-accent);
}
.arc__switch-opt--gen { color: #fff; }
.arc__switch-opt .material-symbols-outlined { font-size: 15px; }
.arc__switch-note {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--h-accent);
}
.arc__switch-note .material-symbols-outlined { font-size: 16px; }
.arc__use { gap: 12px !important; }
.arc__use li {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px 12px 12px; border-radius: 14px; background: var(--h-soft);
  font-size: 13px; color: var(--sub); text-align: left;
}
.arc__use .material-symbols-outlined {
  flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; border: 2px solid var(--h-accent); color: var(--h-accent); font-size: 24px;
}
.arc__use b { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: .06em; }
.arc__loop {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 28px; font-size: 15px; font-weight: 800; letter-spacing: .06em; color: var(--h-accent);
}
.arc__loop .material-symbols-outlined { font-size: 22px; }

/* 詳しくは */
.field__more { margin-top: 36px; }
.field__more a {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 0 6px;
  border-bottom: 1px solid var(--ink);
  font-size: 14px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
}
.field__more a:hover { color: var(--h-accent); border-color: var(--h-accent); }
.field__more .material-symbols-outlined { font-size: 18px; }
.qa__cta--end { margin-top: 112px; text-align: center; }

@media (max-width: 1000px) {
  .arc { grid-template-columns: minmax(0, 1fr); gap: 56px; justify-items: center; }
  .arc__src { flex-direction: row !important; flex-wrap: wrap; justify-content: center; }
  .arc__hub::before, .arc__hub::after { content: 'arrow_downward'; left: 50%; transform: translateX(-50%); }
  .arc__hub::before { top: -46px; }
  .arc__hub::after { top: auto; bottom: -46px; right: auto; }
  .arc__use { width: min(420px, 100%); }
}

/* ---------- Topics / Contact：見出し左・中身右 ---------- */
.news { display: flex; justify-content: space-between; gap: 40px; }
.news__title { flex: none; width: 21%; min-width: max-content; margin: 0; white-space: nowrap; }
.news__body { flex: 1; min-width: 0; padding-top: 12px; }

.news-list { border-top: 1px solid var(--line); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a {
  display: flex; align-items: baseline; gap: 36px; padding: 22px 8px;
  transition: background-color .2s ease;
}
.news-list a:hover { background: var(--h-soft); }
.news-list time {
  flex: none; min-width: 92px; white-space: nowrap;
  font-size: 15px; font-weight: 800; letter-spacing: .03em; color: var(--h-accent);
  font-variant-numeric: tabular-nums;
}
.news-list__text { flex: 1; min-width: 0; font-size: 16px; line-height: 1.7; }
.news-list__cat {
  display: inline-block; margin-right: 10px; padding: 2px 8px; border-radius: 2px;
  background: var(--h-accent-tint); font-size: 12px; font-weight: 700; color: var(--h-accent);
  vertical-align: 2px;
}
.news-list__new {
  margin-left: 8px; font-size: 12px; font-weight: 800; color: var(--h-accent); letter-spacing: .06em;
}

/* ---------- Publications ---------- */
.home-pubs { border-top: 1px solid var(--ink); }
.home-pubs > li { padding: 26px 0 22px; border-bottom: 1px solid var(--ink); }
.home-pubs > li.list-empty { padding: 26px 0; }
/* 業績ページと同じ部品（publications.js の itemHtml）を、ここでは種別を上に出す形で */
.home-pubs .pub-badge--type {
  padding: 0; border: 0; background: none;
  font-size: 14px; font-weight: 800; color: var(--h-accent);
}

/* ---------- Profile：濃い赤の帯 ----------
   左にひし形の写真（キービジュアルと同じ切り抜き）、右に人物の情報。
   文字は白、差し色は金 */
.profile-band { background: var(--h-accent); color: #fff; }
.profile-band__inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center;
}

.profile-band__visual { position: relative; aspect-ratio: 1; }
.pb-tile {
  position: absolute; aspect-ratio: 1;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background-size: cover; background-position: center;
}
.pb-tile--photo { inset: 6% 6% auto auto; width: 88%; }
.pb-tile--gold  { left: 0; top: 0; width: 26%; background: #c9a23a; }
.pb-tile--tint  { left: 4%; bottom: 2%; width: 34%; background: var(--h-accent-tint); opacity: .9; }
/* 線だけのひし形 */
.pb-tile--line  { right: 0; bottom: 0; width: 22%; background: #fff; }
.pb-tile--line::after {
  content: ''; position: absolute; inset: 2px;
  clip-path: inherit; background: var(--h-accent);
}
.profile-band__visual { margin-bottom: 32px; }
.profile-band__place {
  position: absolute; left: 0; right: 0; bottom: -32px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}

.profile-band__title { color: #fff; margin-bottom: 36px; }
.profile-band__kana { font-size: 12px; line-height: 1; letter-spacing: .14em; color: rgba(255, 255, 255, .7); }
/* 語の途中では折り返さない */
.profile-band .nb { display: inline-block; }
.profile-band__name {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 4px;
  font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; letter-spacing: .02em; line-height: 1.1;
}
.profile-band__name span { font-size: 17px; font-weight: 700; letter-spacing: .06em; color: #e3c46a; }
.profile-band__affil { margin-top: 12px; font-size: 15px; font-weight: 700; line-height: 1.8; }
.profile-band__bio {
  margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 15px; line-height: 2; color: rgba(255, 255, 255, .9);
}

.profile-band__facts { display: grid; gap: 10px; margin: 24px 0 0; }
.profile-band__facts > div { display: flex; gap: 20px; font-size: 14px; line-height: 1.8; }
.profile-band__facts dt {
  flex: none; width: 5.5em; padding-left: 10px; border-left: 3px solid #c9a23a;
  font-weight: 800; line-height: 1.5; margin-top: .15em;
}
.profile-band__facts dd { margin: 0; color: rgba(255, 255, 255, .9); }

.profile-band__keywords { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.profile-band__keywords li {
  padding: 6px 14px; border: 1px solid rgba(227, 196, 106, .7); border-radius: 999px;
  font-size: 13px; font-weight: 700; color: #f1dc9c;
}

.profile-band__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: 36px;
}
.profile-band__links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.profile-band__links a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; font-weight: 700; color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .4); text-underline-offset: 4px;
}
.profile-band__links a::after { content: '↗'; font-size: 12px; }
.profile-band__links a:hover { text-decoration-color: #fff; }
.profile-band__more {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px 16px 28px; border-radius: 999px;
  background: #fff; color: var(--h-accent); font-size: 14px; font-weight: 800;
  transition: background-color .2s ease;
}
.profile-band__more:hover { background: var(--h-accent-tint); }
.profile-band__more .material-symbols-outlined { font-size: 18px; transition: transform .3s ease; }

/* ---------- Contact：中国の高級感 ----------
   象牙色の面に白い札。札は金の細い二重枠（外は線、内は 10px 内側の線）、左上と右下に金の祥雲。
   左に月洞門（丸窓）の SVG。金の輪の中で、竹林のかわいいパンダが笹を持っている。
   真ん中に明朝の見出し、右に文言と、金の輪をまとった朱の丸の矢印。
   面は明るいまま。パンダだけがゆるく動き（ゆらゆら・首かしげ・耳ぴくっ・まばたき・笹もぐもぐ）、
   触れるとぴょんと跳ねる。動きを減らす設定の人には止める
   以前の版は _backup/contact-chinese-2026-10-15/（その前は _backup/home-contact-2026-10-14/、
   _backup/home-contact-2026-10-14b/）にある */
.contact-cta {
  --c-shu:   #b7282e;   /* 朱 */
  --c-gold:  #c9a23a;
  --c-paper: #fbf7ee;   /* 象牙色 */
  --c-serif: 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
  --c-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 48' fill='none' stroke='%23c9a23a' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 44h88M14 44a10 10 0 1 1 14-12a9 9 0 1 1 16-6a11 11 0 1 1 20 8a8 8 0 0 1 10 10'/%3E%3Cpath d='M28 32a4 4 0 1 0-6 3M44 26a4 4 0 1 1 5 4M64 34a4 4 0 1 0-5-3'/%3E%3C/svg%3E");
  padding: 96px 0; background: var(--c-paper);
}
.contact-cta__link {
  position: relative; display: flex; align-items: center; gap: 40px;
  padding: 48px 64px 48px 48px; background: #fff;
  border: 1px solid var(--c-gold);
  outline: 1px solid rgba(201, 162, 58, .55); outline-offset: -10px;
  color: var(--ink);
}
/* 角の祥雲 */
.contact-cta__link::before, .contact-cta__link::after {
  content: ''; position: absolute; width: 96px; height: 48px;
  background: var(--c-cloud) center / contain no-repeat;
}
.contact-cta__link::before { right: 22px; top: 18px; transform: scaleY(-1); }
.contact-cta__link::after { right: 22px; bottom: 18px; }

.contact-cta__moon { flex: none; width: 188px; height: 188px; }
.contact-cta__head { display: flex; align-items: center; gap: 20px; }
.contact-cta__title {
  flex: none; margin: 0; padding-bottom: 14px;
  font-family: var(--c-serif); font-weight: 700; letter-spacing: .06em;
  background: linear-gradient(90deg, var(--c-gold), rgba(201, 162, 58, 0)) left bottom / 100% 1px no-repeat;
}
.contact-cta__text {
  margin-left: auto;
  font-family: var(--c-serif);
  font-size: clamp(17px, 1.6vw, 21px); font-weight: 700; letter-spacing: .12em;
  transition: color .2s ease;
}
.contact-cta__arrow {
  flex: none; display: grid; place-items: center;
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--c-shu); color: #fff; font-size: 30px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--c-gold);
  transition: background-color .2s ease;
}
.contact-cta__link:hover .contact-cta__text { color: var(--c-shu); }
/* 言語ごとの明朝。日本語の明朝で中国語・韓国語を出すと字形が合わないので、それぞれの宋体・明朝体を先に置く */
html[lang="zh-CN"] .contact-cta { --c-serif: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', serif; }
html[lang="zh-TW"] .contact-cta { --c-serif: 'Noto Serif TC', 'Songti TC', 'PMingLiU', 'MingLiU', serif; }
html[lang="ko"] .contact-cta { --c-serif: 'Noto Serif KR', 'AppleMyungjo', 'Batang', serif; }
/* 英語は字間を詰める（「Go to the Contact Form」が間延びしないように） */
html[lang="en"] .contact-cta__text { letter-spacing: .02em; }
.contact-cta__link:hover .contact-cta__arrow { background: var(--ink); }

/* パンダの動き。座標は SVG の viewBox（200×200）基準 */
.contact-cta .pd, .contact-cta .pd-head, .contact-cta .pd-ear, .contact-cta .pd-snack, .contact-cta .pd-leaf { transform-box: view-box; }
.contact-cta .pd { transform-origin: 100px 190px; animation: pd-sway 4s ease-in-out infinite; }
.contact-cta .pd-head { transform-origin: 100px 146px; animation: pd-tilt 6s ease-in-out infinite; }
.contact-cta .pd-ear--l { transform-origin: 62px 76px; animation: pd-ear-l 5s ease-in-out infinite; }
.contact-cta .pd-ear--r { transform-origin: 138px 76px; animation: pd-ear-r 5s ease-in-out 1.3s infinite; }
.contact-cta .pd-eye { transform-box: fill-box; transform-origin: center; animation: pd-blink 4.2s infinite; }
.contact-cta .pd-snack { transform-origin: 90px 172px; animation: pd-munch 2.6s ease-in-out infinite; }
.contact-cta .pd-leaf { transform-origin: 140px 146px; animation: pd-leaf 3s ease-in-out infinite; }
.contact-cta .pd-cheek { transition: opacity .3s ease; }
.contact-cta__link:hover .pd { animation: pd-hop .7s cubic-bezier(.3, .7, .4, 1) 2; }
.contact-cta__link:hover .pd-cheek { opacity: 1; }

@keyframes pd-sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-2px); } }
@keyframes pd-tilt { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-5deg); } 60% { transform: rotate(4deg); } }
@keyframes pd-ear-l { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-14deg); } 92% { transform: rotate(4deg); } }
@keyframes pd-ear-r { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(14deg); } 92% { transform: rotate(-4deg); } }
@keyframes pd-blink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }
@keyframes pd-munch { 0%, 55%, 100% { transform: rotate(0); } 65%, 85% { transform: rotate(-9deg) translateY(-6px); } 75% { transform: rotate(-6deg) translateY(-4px); } }
@keyframes pd-leaf { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-8deg); } }
@keyframes pd-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.06, .94); }
  50% { transform: translateY(-14px) scale(.97, 1.03); }
  80% { transform: translateY(0) scale(1.04, .96); }
}
@media (prefers-reduced-motion: reduce) {
  .contact-cta .pd, .contact-cta .pd-head, .contact-cta .pd-ear, .contact-cta .pd-eye,
  .contact-cta .pd-snack, .contact-cta .pd-leaf { animation: none !important; }
}

/* ---------- 狭い画面 ---------- */
@media (max-width: 1100px) {
  .news__title { width: 25%; }
}
@media (max-width: 767px) {
  .h-sec { padding: 56px 0 72px; }
  .h-sec--tight { padding-top: 0; }
  .h-title { font-size: 46px; }
  #about { padding-top: 80px; }
  .qa__q { min-height: 180px; padding: 0 44px; }
  .qa__q::before, .qa__q::after { width: 32px; }
  .qa__mark { font-size: 200px; background-size: 8px 8px; }
  .qa__q-text { font-size: min(22px, 5.6vw); letter-spacing: .06em; }
  .qa__a { margin-top: 44px; font-size: min(20px, 5.2vw); letter-spacing: .03em; }
  .qa__body { margin-top: 28px; text-align: left; }
  .qa__body p { font-size: 13.5px; letter-spacing: .04em; }
  .pc-br { display: none; }
  .sp-br { display: inline; }
  .qa-next { --c: 124px; margin: 80px 0 28px; }
  .qa-next__q { font-size: 12.5px; }
  .qa-next__drop { height: 48px; margin-top: 22px; }
  .field__tag { flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .qa__q--sm { min-height: 160px; }
  .qa__q--sm .qa__mark { font-size: 180px; }
  .qa__q--sm .qa__q-text { font-size: min(20px, 5.2vw); }
  .fig { margin-top: 40px; }
  .fig__case { font-size: 13px; }
  .flow { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .flow__step { flex-direction: row; flex-wrap: wrap; padding: 18px 20px; gap: 4px 16px; text-align: left; }
  .flow__step + .flow__step::before { content: 'arrow_downward'; left: 50%; top: -38px; transform: translateX(-50%); }
  .flow__icon { width: 56px; height: 56px; font-size: 28px; grid-row: span 2; }
  .flow__step { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
  .flow__icon { grid-row: 1 / 3; }
  .flow__name { margin-top: 0; font-size: 16px; }
  .flow__text br { display: none; }
  .arc__hub { width: 240px; height: 240px; }
  .arc__hub b { font-size: 17px; }
  .arc__switch-track { width: 192px; }
  .arc__switch-opt { font-size: 11px; }
  .arc__loop { font-size: 14px; }
  .qa__cta--end { margin-top: 72px; }

  .news { display: block; }
  .news__title { width: auto; margin-bottom: 26px; }
  .news__body { padding-top: 0; }
  .news-list a { flex-direction: column; gap: 4px; padding: 18px 4px; }

  .contact-cta { padding: 56px 0; }
  .contact-cta__link { flex-wrap: wrap; justify-content: center; gap: 24px 16px; padding: 40px 24px; }
  .contact-cta__link::before, .contact-cta__link::after { width: 64px; height: 32px; right: 16px; }
  .contact-cta__link::before { top: 16px; }
  .contact-cta__link::after { bottom: 16px; }
  .contact-cta__moon { width: 150px; height: 150px; }
  .contact-cta__head { width: 100%; justify-content: center; }
  .contact-cta__text { margin-left: 0; flex: 1; font-size: 16px; letter-spacing: .08em; }
  .contact-cta__arrow { width: 56px; height: 56px; font-size: 24px; }

  .kv-tiles__center { width: 44%; }

  .profile-band__inner { grid-template-columns: 1fr; gap: 8px; }
  .profile-band__visual { width: min(320px, 82%); margin: 0 auto 48px; order: 2; }
  .profile-band__body { display: contents; }
  .profile-band__title { order: 1; margin-bottom: 8px; }
  .profile-band__body > :not(.profile-band__title) { order: 3; }
  .profile-band__facts > div { flex-direction: column; gap: 2px; }
  .profile-band__facts dt { width: auto; }
  .profile-band__foot { flex-direction: column; align-items: flex-start; }

}

/* 真ん中のロゴが見えているあいだは、ヘッダーのロゴを隠す（home.js が is-kv-logo を付ける）。
   場所は空けたままにして、ナビが左右に動かないようにする */
.site-header .site-logo { transition: opacity .3s ease, visibility 0s linear 0s; }
.site-header.is-kv-logo .site-logo { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; }

/* スマホでは、お知らせと業績は最新 3 件だけにしてスクロールを短くする（続きは「View All」から） */
@media (max-width: 767px) {
  #home-topics .news-list > li:nth-child(n + 4),
  #home-pubs > li:nth-child(n + 4) { display: none; }
}

/* =========================================================
   スクロールの動き（About）
   ・style.css の .reveal で要素がふわっと現れたあと、中身が順に動き出す
   ・画面ぜんたいは動かさない。動くのは線・丸・図の部品だけ
   ========================================================= */
#about { --m-ease: cubic-bezier(.16, 1, .3, 1); --m-pop: cubic-bezier(.34, 1.56, .64, 1); }

/* 区切り：丸が弾むように現れ、横線が丸から外へ伸び、縦線が下へ伸びて点が下りていく */
.qa-next.reveal::before, .qa-next.reveal::after { transform: scaleX(0); transition: transform 1.2s var(--m-ease) .35s; }
.qa-next.reveal .qa-next__circle { transform: scale(.6); transition: transform .9s var(--m-pop) .1s; }
.qa-next.reveal .qa-next__drop { transform: scaleY(0); transition: transform .9s var(--m-ease) .8s; }
.qa-next.is-visible::before, .qa-next.is-visible::after,
.qa-next.is-visible .qa-next__circle, .qa-next.is-visible .qa-next__drop { transform: none; }
.qa-next.is-visible .qa-next__drop::after { animation: qa-drop 2.4s ease-in-out 1.7s infinite; }
@keyframes qa-drop {
  0%   { top: 0; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* 問い：左右の丸かっこが上下に開き、点の「？」が遅れて浮かぶ */
.qa__q.reveal::before, .qa__q.reveal::after { transform: scaleY(0); transition: transform 1s var(--m-ease) .2s; }
.qa__q.reveal .qa__mark { opacity: 0; transform: translateY(16px); transition: opacity 1.2s ease .45s, transform 1.2s var(--m-ease) .45s; }
.qa__q.is-visible::before, .qa__q.is-visible::after { transform: none; }
.qa__q.is-visible .qa__mark { opacity: 1; transform: none; }

/* 答え：マーカーが左から引かれる */
.qa__a.reveal mark { background-size: 0% 100%; background-repeat: no-repeat; transition: background-size 1.1s var(--m-ease) .55s; }
.qa__a.is-visible mark { background-size: 100% 100%; }

/* 図 1：三つの段階が左から順に現れ、アイコンが弾み、矢印があとから出る */
.fig.reveal .flow__step { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform 1s var(--m-ease); }
.fig.reveal .flow__icon { transform: scale(.4); transition: transform .8s var(--m-pop); }
.fig.reveal .flow__step + .flow__step::before { opacity: 0; transition: opacity .6s ease; }
.fig.reveal .flow__step:nth-child(1), .fig.reveal .flow__step:nth-child(1) .flow__icon { transition-delay: .25s; }
.fig.reveal .flow__step:nth-child(2), .fig.reveal .flow__step:nth-child(2) .flow__icon { transition-delay: .55s; }
.fig.reveal .flow__step:nth-child(3), .fig.reveal .flow__step:nth-child(3) .flow__icon { transition-delay: .85s; }
.fig.reveal .flow__step:nth-child(2)::before { transition-delay: .6s; }
.fig.reveal .flow__step:nth-child(3)::before { transition-delay: .9s; }
.fig.is-visible .flow__step, .fig.is-visible .flow__icon { opacity: 1; transform: none; }
.fig.is-visible .flow__step + .flow__step::before { opacity: 1; }

/* 図 2：資料が左から集まり、真ん中の丸が現れ、使い方が右へ流れていく */
.fig.reveal .arc__src li { opacity: 0; transform: translateX(-28px); transition: opacity .7s ease, transform .9s var(--m-ease); }
.fig.reveal .arc__src li:nth-child(1) { transition-delay: .2s; }
.fig.reveal .arc__src li:nth-child(2) { transition-delay: .3s; }
.fig.reveal .arc__src li:nth-child(3) { transition-delay: .4s; }
.fig.reveal .arc__src li:nth-child(4) { transition-delay: .5s; }
.fig.reveal .arc__src li:nth-child(5) { transition-delay: .6s; }
.fig.reveal .arc__hub { opacity: 0; transform: scale(.82); transition: opacity .8s ease .7s, transform 1s var(--m-pop) .7s; }
.fig.reveal .arc__hub::before, .fig.reveal .arc__hub::after { opacity: 0; transition: opacity .6s ease; }
.fig.reveal .arc__hub::before { transition-delay: .6s; }
.fig.reveal .arc__hub::after { transition-delay: 1.2s; }
.fig.reveal .arc__use li { opacity: 0; transform: translateX(28px); transition: opacity .7s ease, transform .9s var(--m-ease); }
.fig.reveal .arc__use li:nth-child(1) { transition-delay: 1.3s; }
.fig.reveal .arc__use li:nth-child(2) { transition-delay: 1.45s; }
.fig.reveal .arc__use li:nth-child(3) { transition-delay: 1.6s; }
.fig.reveal .arc__loop { opacity: 0; transition: opacity .8s ease 1.9s; }
.fig.is-visible .arc__src li, .fig.is-visible .arc__hub, .fig.is-visible .arc__use li,
.fig.is-visible .arc__loop, .fig.is-visible .arc__hub::before, .fig.is-visible .arc__hub::after { opacity: 1; transform: none; }
.fig.is-visible .arc__hub::before, .fig.is-visible .arc__hub::after { transform: translateY(-50%); }
.fig.is-visible .arc__loop .material-symbols-outlined { animation: arc-spin 6s linear 2s infinite; }
@keyframes arc-spin { to { transform: rotate(360deg); } }

/* 切り替えスイッチ：つまみが 生成AI ⇄ ローカルAI を行き来し、文字の色も入れ替わる */
.fig.is-visible .arc__switch-knob { animation: sw-knob 5s var(--m-ease) 1.6s infinite; }
.fig.is-visible .arc__switch-opt--gen { animation: sw-on 5s ease 1.6s infinite; }
.fig.is-visible .arc__switch-opt--local { animation: sw-off 5s ease 1.6s infinite; }
@keyframes sw-knob { 0%, 38% { transform: none; } 50%, 88% { transform: translateX(100%); } 100% { transform: none; } }
@keyframes sw-on  { 0%, 40% { color: #fff; } 48%, 90% { color: var(--h-accent); } 98%, 100% { color: #fff; } }
@keyframes sw-off { 0%, 40% { color: var(--h-accent); } 48%, 90% { color: #fff; } 98%, 100% { color: var(--h-accent); } }

@media (max-width: 1000px) {
  .fig.is-visible .arc__hub::before, .fig.is-visible .arc__hub::after { transform: translateX(-50%); }
  .fig.reveal .arc__src li { transform: translateY(16px); }
  .fig.reveal .arc__use li { transform: translateY(20px); }
  .fig.is-visible .arc__src li, .fig.is-visible .arc__use li { transform: none; }
}

/* 動きを減らす設定では、最初から完成形で見せる */
@media (prefers-reduced-motion: reduce) {
  #about *, #about *::before, #about *::after { transition: none !important; animation: none !important; }
  .qa-next.reveal::before, .qa-next.reveal::after, .qa-next.reveal .qa-next__circle, .qa-next.reveal .qa-next__drop,
  .qa__q.reveal::before, .qa__q.reveal::after, .qa__q.reveal .qa__mark,
  .fig.reveal .flow__step, .fig.reveal .flow__icon, .fig.reveal .arc__src li, .fig.reveal .arc__hub, .fig.reveal .arc__use li { opacity: 1; transform: none; }
  .fig.reveal .flow__step + .flow__step::before, .fig.reveal .arc__hub::before, .fig.reveal .arc__hub::after, .fig.reveal .arc__loop { opacity: 1; }
  .qa__a.reveal mark { background-size: 100% 100%; }
}

/* 英語表示では、分野のラベル（Regional Studies など）が赤い札と横の英字で二重になるので、英字を隠す */
html[lang="en"] .field__tag { font-size: 0; gap: 0; }
html[lang="en"] .field__tag span { font-size: 13px; }
/* 英語の「Generative AI」はつまみの幅ぎりぎりなので、左右の余白を詰める */
html[lang="en"] .arc__switch-opt { padding-left: 3px; padding-right: 3px; }
@media (max-width: 767px) { html[lang="en"] .arc__switch-opt { font-size: 10.5px; } }