/* ==========================================================================
   コニーシステム — AI事業サイト
   コンセプト: 「藍と紙」 阿波藍の階調 × 白い紙 × 学術誌の組版
   色は阿波藍のいちばん淡い色名「甕覗き(かめのぞき)」から濃藍までの階調で組む。
   ========================================================================== */

:root {
  /* 紙(白) */
  --paper: #ffffff;
  --line: rgba(29, 71, 105, 0.16);
  --line-soft: rgba(29, 71, 105, 0.09);

  /* 墨(青みの) */
  --ink: #26323c;
  --ink-soft: #4c5a66;
  --ink-faint: #7d8b95;

  /* 藍の階調 (淡 → 濃) */
  --aijiro: #eef5f7;   /* 藍白 */
  --kame: #c9e0e7;     /* 甕覗き */
  --mizu: #9cc3ce;     /* 水浅葱 */
  --asagi: #5fa3b8;    /* 浅葱 */
  --hanada: #33739e;   /* 縹 */
  --ai: #1d4769;       /* 藍 */
  --koai: #14324e;     /* 濃藍 */
  --ai-tint: rgba(156, 195, 206, 0.16);

  /* 朱 (印章のひと差し) */
  --shu: #b3402e;

  --font-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-latin: "EB Garamond", Georgia, serif;

  --w-content: 1080px;
  --w-narrow: 760px;
}

/* --------------------------------------------------------------------------
   基礎
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-gothic);
  font-size: 16px;
  line-height: 2;
  letter-spacing: 0.04em;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}

/* 朝の光: ごく淡い藍のグラデーション */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 1100px 620px at 88% -12%, rgba(156, 195, 206, 0.22), transparent 62%),
    radial-gradient(ellipse 800px 600px at -8% 18%, rgba(238, 245, 247, 0.9), transparent 58%),
    linear-gradient(180deg, rgba(238, 245, 247, 0.5), transparent 320px);
}

/* ヘッダーは .site-header 側の position: sticky / z-index: 50 に任せる(ここに含めると sticky が打ち消される) */
main, section.contact, footer.site-footer { position: relative; z-index: 1; }

a { color: var(--hanada); text-decoration: none; }
a:hover { color: var(--asagi); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--hanada);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ai); color: #fff; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--koai);
  color: #fff;
  padding: 0.6em 1.2em;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.site-header__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 24px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* 配色・書体は親サイト(konniesystem.co.jp)のロゴ表記に合わせる */
.brand {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  line-height: 1;
  color: #000080;
}
.brand:hover { color: #000080; }

.brand__initial {
  font-size: 1.45em;
  color: #c62828;
}

.global-nav ul {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.global-nav a {
  font-size: 0.84rem;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s, border-color 0.25s;
}
.global-nav a:hover { color: var(--hanada); border-bottom-color: var(--hanada); }

.global-nav__contact a {
  display: inline-block;
  border: 1px solid var(--hanada);
  color: var(--hanada);
  padding: 8px 20px;
  border-radius: 999px;
  transition: background 0.25s, color 0.25s;
}
.global-nav__contact a:hover { background: var(--hanada); color: #fff; border-bottom-color: transparent; }

@media (max-width: 760px) {
  .global-nav li:not(.global-nav__contact) { display: none; }
  .site-header__inner { padding: 0 16px; }
  .brand__en { display: none; }
}

/* --------------------------------------------------------------------------
   ヒーロー
   -------------------------------------------------------------------------- */

.hero {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 96px 24px 72px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: stretch;
  position: relative;
}

.hero__overline {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--asagi);
  margin: 0 0 28px;
}
.hero__overline::after {
  content: "";
  display: inline-block;
  width: 64px;
  height: 1px;
  background: var(--asagi);
  vertical-align: middle;
  margin-left: 16px;
  opacity: 0.55;
}

.hero h1 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(2rem, 5.2vw, 3.4rem);
  line-height: 1.55;
  letter-spacing: 0.06em;
  margin: 0 0 36px;
  color: var(--ink);
}
.hero__lead {
  max-width: 36em;
  font-size: 0.98rem;
  line-height: 2.3;
  color: var(--ink-soft);
  margin: 0;
}

.hero__lead + .hero__lead { margin-top: 12px; }

.hero__tate {
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.42em;
  color: var(--ink-soft);
  border-left: 1px solid var(--line);
  padding-left: 28px;
  margin-top: 10px;
  align-self: start;
  min-height: 17em;
}
.hero__tate .tate-dot { color: var(--shu); }
/* 縦書き中の英字は縦中横で正立させる */
.hero__tate .tate-latin { text-combine-upright: all; letter-spacing: 0; }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 64px; }
  .hero h1 { font-size: clamp(1.5rem, 7.2vw, 2rem); }
  .hero__tate { display: none; }
}

/* ヒーローの段階表示 */
@media (prefers-reduced-motion: no-preference) {
  .hero__overline, .hero h1, .hero__lead, .hero__tate {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .hero h1 { animation-delay: 0.12s; }
  .hero__lead { animation-delay: 0.26s; }
  .hero__tate { animation-delay: 0.4s; }
}

@keyframes rise {
  to { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   セクション共通
   -------------------------------------------------------------------------- */

.section {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 88px 24px;
  border-top: 1px solid var(--line-soft);
}

.section__head { margin-bottom: 52px; }
/* 見出しだけの節頭(最近の研究): 下の一覧との間隔を詰める */
.section__head--tight { margin-bottom: 24px; }

/* 節の道しるべ: 藍の階調の色片 + 通し番号 */
.section__no {
  --c: var(--hanada);
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  margin-bottom: 10px;
}
.section__no::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(29, 71, 105, 0.12);
}

#research .section__no { --c: var(--mizu); }
#support  .section__no { --c: var(--asagi); }
#services .section__no { --c: var(--hanada); }
#profile  .section__no { --c: var(--ai); }
#contact  .section__no { --c: var(--koai); }

.section__title {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.1em;
  margin: 0 0 14px;
}

.section__sub {
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 42em;
  margin: 0;
  text-wrap: pretty;
}

/* スクロール表示 */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   研究実績カード
   -------------------------------------------------------------------------- */

.research-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line);
  background: rgba(238, 245, 247, 0.4);
}

.research-card {
  padding: 40px 36px 36px;
  border-right: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  position: relative;
  transition: background 0.3s;
}
.research-card:nth-child(2n) { border-right: none; }
.research-card:nth-child(n+3) { border-bottom: none; }
.research-card:hover { background: var(--ai-tint); }

.research-card__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--hanada);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 2px 12px;
  margin-bottom: 18px;
}

.research-card h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 1.18rem;
  letter-spacing: 0.06em;
  line-height: 1.8;
  margin: 0 0 14px;
}

.research-card p {
  font-size: 0.88rem;
  line-height: 2.1;
  color: var(--ink-soft);
  margin: 0 0 18px;
}

.research-card__refs {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}
.research-card__refs li {
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--ink-faint);
  padding: 10px 0 0;
}
.research-card__refs .ref-journal { font-family: var(--font-latin); font-style: italic; }

.doi-link {
  white-space: nowrap;
  font-size: 0.74rem;
  border-bottom: 1px dotted var(--hanada);
}

@media (max-width: 760px) {
  .research-grid { grid-template-columns: 1fr; }
  .research-card { border-right: none; }
  .research-card:nth-child(3) { border-bottom: 1px solid var(--line-soft); }
}

/* 研究実績リスト(index・一覧表示) */
.research-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.research-list > li {
  display: grid;
  grid-template-columns: 5.5em 1fr;
  gap: 28px;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.research-list__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 5px;
}

.r-year {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--hanada);
  letter-spacing: 0.03em;
}

.r-type {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 9px;
}
.r-type--paper { color: var(--hanada); border-color: currentColor; }

.research-list h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.85;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  color: var(--ink);
}

.research-list__venue {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.95;
  color: var(--ink-faint);
}
.research-list__venue i { font-family: var(--font-latin); font-style: italic; }

@media (max-width: 760px) {
  .research-list > li { grid-template-columns: 4.5em 1fr; gap: 16px; }
  .research-list__meta { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 6px; }
}

.section__more {
  margin-top: 36px;
  text-align: right;
}

.btn-line {
  display: inline-block;
  font-family: var(--font-mincho);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--hanada);
  padding: 10px 4px;
  border-bottom: 1px solid var(--hanada);
  transition: letter-spacing 0.3s, color 0.3s, border-color 0.3s;
}
.btn-line:hover { letter-spacing: 0.2em; color: var(--asagi); border-bottom-color: var(--asagi); }
.btn-line::after { content: " →"; }

/* 現在の主な研究開発(トップ) */

.rd { margin: 0; }

.rd__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.rd__list > li {
  display: grid;
  grid-template-columns: 11em 1fr;
  gap: 28px;
  padding: 20px 4px;
  border-bottom: 1px solid var(--line-soft);
}

.rd__list h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  line-height: 1.9;
  margin: 0;
}

.rd__list p {
  font-size: 0.88rem;
  line-height: 2.05;
  color: var(--ink-soft);
  margin: 0;
  max-width: 44em;
}

.rd__body p + p { margin-top: 0.9em; }

/* 見出し＋キーワード(学術誌の Keywords 欄の趣で、藍の細い縁取り) */
.rd__head { min-width: 0; }

.rd__tags {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rd__tags > li {
  font-family: var(--font-latin);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: var(--hanada);
  border: 1px solid var(--kame);
  border-radius: 999px;
  padding: 2px 10px 1px;
  white-space: nowrap;
}

/* 図版: 各研究の手法を点と線だけで描いた模式図(医療画像・実データは使わない) */
.rd__fig { margin: 0; min-width: 0; align-self: start; }

.rd__fig svg {
  display: block;
  width: 100%;
  height: auto;
  background: #f6fafb;
  border: 1px solid var(--line-soft);
  border-radius: 3px;
}

.rd__fig figcaption {
  margin-top: 8px;
  font-size: 0.72rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}

.rd__fig-en {
  margin-right: 0.6em;
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--hanada);
}

/* 図は左の列の見出し・タグの下、本文は右の列 */
@media (min-width: 761px) {
  .rd__list > li { grid-template-rows: auto 1fr; row-gap: 16px; }
  .rd__head { grid-column: 1; grid-row: 1; }
  .rd__list > li > .rd__body,
  .rd__list > li > p { grid-column: 2; grid-row: 1 / span 2; }
  .rd__fig { grid-column: 1; grid-row: 2; }
}

/* 図の中の色(藍の階調) */
.fx-grid line { stroke: var(--line-soft); stroke-width: 1; }
.fx-axis { stroke: var(--kame); stroke-width: 1; }
.fx-area { fill: var(--ai-tint); }
.fx-curve { fill: none; stroke: var(--ai); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fx-obs circle { fill: var(--asagi); }
.fx-dip circle { fill: #fff; stroke: var(--mizu); stroke-width: 1.2; }
.fx-fix line { stroke: var(--mizu); stroke-width: 1; stroke-dasharray: 1 2.4; }
.fx-stage line { stroke: var(--hanada); stroke-width: 1.2; }
.fx-stage-pt circle { fill: var(--hanada); stroke: #fff; stroke-width: 1.2; }
.fx-card { fill: rgba(255, 255, 255, 0.72); stroke: var(--mizu); stroke-width: 1; }
.fx-box { fill: rgba(51, 115, 158, 0.05); stroke: var(--mizu); stroke-width: 1; }
.fx-box--front { fill: rgba(51, 115, 158, 0.12); stroke: var(--hanada); stroke-width: 1.5; }
.fx-arrow { stroke: var(--asagi); stroke-width: 1.2; }
.fx-arrowhead { fill: var(--asagi); }
.fx-bar { fill: var(--kame); }
.fx-bar--max { fill: var(--ai); }
.fx-row line { stroke: var(--kame); stroke-width: 1; }
.fx-visit circle { fill: var(--mizu); }
.fx-onset circle { fill: var(--ai); stroke: #fff; stroke-width: 1.2; }
.fx-censor line { stroke: var(--asagi); stroke-width: 1.2; }
.fx-contrib--pos { fill: var(--hanada); }
.fx-contrib--neg { fill: var(--mizu); }
.fx-contrib--max { fill: var(--ai); }
.fx-dot circle { fill: var(--kame); }
.fx-link line { stroke: var(--asagi); stroke-width: 0.9; opacity: 0.85; }
.fx-near circle { fill: var(--asagi); }
.fx-query { fill: #fff; stroke: var(--hanada); stroke-width: 1.6; }
.fx-sheet { fill: #fff; stroke: var(--mizu); stroke-width: 1; }
.fx-q { fill: var(--mizu); }
.fx-choice { fill: #fff; stroke: var(--kame); stroke-width: 1.1; }
.fx-choice--ok { fill: var(--ai); stroke: var(--ai); }
.fx-opt { fill: var(--kame); }
.fx-opt--ok { fill: var(--hanada); }
.fx-check { fill: #fff; stroke: var(--asagi); stroke-width: 1.2; }
.fx-check-mark { fill: none; stroke: var(--hanada); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 760px) {
  .rd__list > li { grid-template-columns: 1fr; gap: 4px; padding: 16px 2px; }
  .rd__tags { margin: 6px 0 10px; }
  /* 狭い画面: 見出し → 図 → 本文 */
  .rd__fig { order: 1; max-width: 300px; margin: 4px 0 14px; }
  .rd__list > li > .rd__body,
  .rd__list > li > p { order: 2; }
}

/* --------------------------------------------------------------------------
   研究支援(Behind the Work)
   -------------------------------------------------------------------------- */

.support-cases {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  background: rgba(238, 245, 247, 0.4);
}

.support-case {
  padding: 34px 30px 32px;
  border-right: 1px solid var(--line-soft);
}
.support-case:last-child { border-right: none; }

/* 開発のカードは横幅いっぱいに置き、研究支援の2枚をその下に並べる */
.support-case--lead {
  grid-column: 1 / -1;
  border-right: none;
  border-bottom: 1px solid var(--line-soft);
}
.support-case--lead h3 { word-break: keep-all; overflow-wrap: anywhere; }
.support-case--lead p { max-width: 50em; text-wrap: pretty; }

.support-case__tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--hanada);
  background: var(--aijiro);
  border-radius: 999px;
  padding: 3px 13px;
  margin-bottom: 16px;
}

.support-case h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 1.12rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  margin: 0 0 12px;
}

.support-case p {
  font-size: 0.86rem;
  line-height: 2.05;
  color: var(--ink-soft);
  margin: 0;
}

.support-note {
  margin: 26px 0 0;
  font-size: 0.92rem;
  line-height: 2.1;
  color: var(--ink);
}
.support-note strong { font-weight: 600; color: var(--hanada); }

@media (max-width: 760px) {
  .support-cases { grid-template-columns: 1fr; }
  .support-case { border-right: none; border-bottom: 1px solid var(--line-soft); }
  .support-case:last-child { border-bottom: none; }
}

/* --------------------------------------------------------------------------
   できること(サービス)
   -------------------------------------------------------------------------- */

.services { counter-reset: svc; }

.service {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 28px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line-soft);
}
.service:last-child { border-bottom: none; }

.service::before {
  counter-increment: svc;
  content: counter(svc, decimal-leading-zero);
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 1.7rem;
  color: var(--asagi);
  opacity: 0.85;
  line-height: 1.4;
}

.service h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
}

.service p {
  font-size: 0.9rem;
  line-height: 2.1;
  color: var(--ink-soft);
  margin: 0;
  max-width: 46em;
}

@media (max-width: 760px) {
  .service { grid-template-columns: 56px 1fr; gap: 16px; }
}

/* --------------------------------------------------------------------------
   代表について
   -------------------------------------------------------------------------- */

.profile {
  display: grid;
  grid-template-columns: 1fr 1.9fr;
  gap: 56px;
  align-items: start;
}

.profile__ja {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  margin: 0;
}

.profile__en {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin: 4px 0 0;
}

.profile__role {
  margin: 16px 0 0;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  line-height: 1.9;
  color: var(--ink-soft);
}

.bio-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

.bio-list li {
  display: flex;
  gap: 18px;
  padding: 14px 2px;
  font-size: 0.89rem;
  line-height: 1.95;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-soft);
}

.bio-list .bio-yr {
  flex: 0 0 7em;
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 1rem;
  color: var(--hanada);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .profile { grid-template-columns: 1fr; gap: 28px; }
  .bio-list li { flex-direction: column; gap: 0; padding: 12px 2px; }
  .bio-list .bio-yr { flex-basis: auto; }
}

/* --------------------------------------------------------------------------
   お問い合わせ
   -------------------------------------------------------------------------- */

.contact {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 88px 24px 104px;
  border-top: 1px solid var(--line-soft);
}

.contact__inner {
  background: linear-gradient(180deg, var(--aijiro), rgba(238, 245, 247, 0.3));
  border: 1px solid rgba(156, 195, 206, 0.4);
  border-radius: 24px;
  padding: clamp(40px, 6vw, 64px) clamp(24px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.contact h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: 0.1em;
  margin: 0 0 18px;
  color: var(--ink);
}

.contact p {
  font-size: 0.92rem;
  line-height: 2.2;
  margin: 0;
  max-width: 40em;
  color: var(--ink-soft);
}

.contact__actions {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 280px;
}

.btn-mail {
  display: block;
  text-align: center;
  font-family: var(--font-mincho);
  font-size: 1rem;
  letter-spacing: 0.14em;
  color: #fff;
  background: var(--ai);
  padding: 16px 36px;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(29, 71, 105, 0.22);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
}
.btn-mail:hover {
  color: #fff;
  background: var(--koai);
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(20, 50, 78, 0.28);
}

.contact__tel {
  text-align: center;
  font-family: var(--font-latin);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.contact__tel a { color: inherit; }
.contact__tel small {
  display: block;
  font-family: var(--font-gothic);
  font-size: 0.72rem;
  color: var(--ink-faint);
  letter-spacing: 0.12em;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .contact { padding: 64px 24px 80px; }
  .contact__inner { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
  .contact__actions { min-width: 0; }
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */

.site-footer { background: var(--paper); }

/* 藍の階調をひと筋 */
.site-footer__scale {
  height: 5px;
  background: linear-gradient(90deg,
    var(--aijiro) 0%, var(--kame) 18%, var(--mizu) 38%,
    var(--asagi) 58%, var(--hanada) 76%, var(--ai) 90%, var(--koai) 100%);
}

.site-footer__inner {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer .brand__mark { font-size: 1rem; }

.site-footer__copy {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.site-footer__links {
  display: flex;
  gap: 20px;
}
.site-footer__links a {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.site-footer__links a:hover { color: var(--hanada); }

/* --------------------------------------------------------------------------
   業績ページ(research.html)
   -------------------------------------------------------------------------- */

.page-head {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 80px 24px 48px;
}

.page-head h1 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  letter-spacing: 0.1em;
  margin: 0 0 20px;
}

.page-head .lead {
  font-size: 0.92rem;
  line-height: 2.2;
  color: var(--ink-soft);
  max-width: 46em;
  margin: 0;
}

.pub-section {
  max-width: var(--w-content);
  margin: 0 auto;
  padding: 0 24px 24px;
}

.pub-block {
  padding: 44px 0;
  border-top: 1px solid var(--line-soft);
}
.pub-block:first-of-type { border-top: none; padding-top: 8px; }

.pub-block__head {
  margin-bottom: 24px;
}

.pub-block__head h2 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  letter-spacing: 0.12em;
  margin: 0;
}

.pub-block__count {
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-left: 8px;
}

.pub-group h3 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
  margin: 28px 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--asagi);
}
.pub-group h3:first-child { margin-top: 0; }

.pub-group__count {
  font-family: var(--font-latin);
  font-style: italic;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--asagi);
  margin-left: 6px;
}

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

.pub-list li {
  font-size: 0.88rem;
  line-height: 2.05;
  color: var(--ink-soft);
  padding: 14px 0 14px 20px;
  border-left: 2px solid var(--line-soft);
  margin-bottom: 6px;
  transition: border-color 0.3s;
}
.pub-list li:hover { border-left-color: var(--asagi); }

.pub-list .pub-yr {
  display: inline-block;
  font-family: var(--font-latin);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--hanada);
  margin-right: 12px;
}

.pub-first {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--shu);
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 0 8px;
  margin-right: 8px;
  vertical-align: 1px;
}

.pub-list .author-self {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(transparent 72%, rgba(156, 195, 206, 0.5) 72%);
}

@media (max-width: 760px) {
  .pub-block { padding: 32px 0; }
}