@charset "utf-8";
/* ============================================================
   衛生分子毒性学分野 — Design System (Phase 2 foundation)
   Light, editorial, deep-green academic. No build step.
   ============================================================ */

:root{
  --paper:#FAFAF6;         /* warm near-white */
  --paper-2:#F0F3EA;       /* soft green-tinted panel */
  --paper-3:#E7ECDD;
  --ink:#182019;           /* near-black body text (green undertone) */
  --green:#1E5638;         /* deep forest — primary, ~7:1 on paper */
  --green-d:#123726;       /* very dark green — footer / strong */
  --green-2:#2F7A50;       /* mid green — large accents / hover only */
  --green-soft:#516C55;    /* muted green text — AA (≥4.5:1 on paper/paper-2) */
  --muted:#586159;         /* secondary text ~5.7:1 */
  --line:#DBDFCF;          /* hairline */
  --line-2:#C7CDB6;

  --serif:"Noto Serif JP","Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mincho:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",YuMincho,serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",YuGothic,system-ui,-apple-system,sans-serif;

  --maxw:1200px;
  --hd-h:78px;
}

/* ---------- reset-ish ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.85;font-weight:500;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;font-feature-settings:"palt" 1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0}
ul{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px}
.eyebrow{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--green);font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- HEADER (injected by site.js) ---------- */
header.site{position:fixed;inset:0 0 auto 0;z-index:50;background:rgba(250,250,246,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
header.site.scrolled{border-color:var(--line);box-shadow:0 6px 24px -18px rgba(18,55,38,.5)}
.hd{display:flex;align-items:center;justify-content:space-between;height:var(--hd-h);transition:height .3s}
header.site.scrolled .hd{height:66px}
.brand{display:flex;align-items:center;gap:13px}
.brand .mk{width:30px;height:30px;flex:none}
.brand .nm{line-height:1.15}
.brand .nm b{display:block;font-family:var(--mincho);font-weight:700;font-size:1.06rem;letter-spacing:.04em;
  text-align:justify;text-align-last:justify}
.brand .nm span{display:block;font-family:var(--serif);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-soft);text-align:justify;text-align-last:justify}
nav.main{display:flex;align-items:center;gap:2px}
nav.main a{font-family:var(--serif);font-size:.94rem;padding:9px 15px;color:var(--ink);position:relative;transition:color .2s}
nav.main a::after{content:"";position:absolute;left:15px;right:15px;bottom:4px;height:1.5px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .25s}
nav.main a:hover{color:var(--green)}
nav.main a:hover::after{transform:scaleX(1)}
nav.main a.active{color:var(--green)}
nav.main a.active::after{transform:scaleX(1)}
nav.main a.cta{background:var(--green);color:#fff;border-radius:2px;margin-left:10px}
nav.main a.cta::after{display:none}
nav.main a.cta:hover{background:var(--green-d);color:#fff}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);border-radius:3px;width:44px;height:40px;cursor:pointer;padding:0}
.menu-btn span{display:block;width:19px;height:1.5px;background:var(--ink);margin:4px auto;transition:.25s}

/* ---------- SECTION SHELL ---------- */
section.block{padding:96px 0}
.band{background:var(--paper-2)}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:26px;align-items:baseline;
  border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:46px}
.sec-head .ti{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin:0;font-size:1rem;font-weight:400}
.sec-head .ti .en{font-family:var(--serif);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);letter-spacing:.005em}
.sec-head .more{font-size:.78rem;color:var(--muted);letter-spacing:.06em;align-self:center;white-space:nowrap}
.sec-head .more:hover{color:var(--green)}

/* ---------- HERO (home) ---------- */
.hero{padding:150px 0 84px;position:relative}
.hero::before{content:"";position:absolute;top:120px;right:0;width:38vw;max-width:520px;height:520px;
  background:radial-gradient(120% 120% at 100% 0,var(--paper-2),transparent 70%);z-index:-1}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:start}
.hero-id .eyebrow{margin-bottom:26px;display:block;line-height:1.1}
.hero-id h1{font-family:var(--mincho);font-weight:700;font-size:clamp(1.95rem,3.7vw,3.1rem);
  line-height:1.6;letter-spacing:.02em;margin:0 0 28px}
.hero-id h1 .k{color:var(--green);font-weight:800;font-size:1.34em;font-style:normal}
.hero-id .lead{font-size:1.04rem;color:#3A453D;font-weight:500;max-width:40ch;margin:0 0 34px;line-height:1.95}
.hero-id .go{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);font-size:1rem;
  color:var(--green);border-bottom:1.5px solid var(--green);padding-bottom:5px;transition:gap .2s}
.hero-id .go:hover{gap:18px}

/* ---------- NEWS list (hero + news page) ---------- */
.newsbox{border-top:2px solid var(--green)}
.newsbox .nh{display:flex;align-items:baseline;justify-content:space-between;padding:16px 0 14px}
.newsbox .nh .t{font-family:var(--serif);font-weight:700;font-size:1.4rem;color:var(--green);letter-spacing:.01em}
.newsbox .nh .t em{font-style:normal;font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;color:var(--muted);margin-left:9px;text-transform:uppercase}
.newsbox .nh a{font-size:.78rem;color:var(--muted);letter-spacing:.06em}
.newsbox .nh a:hover{color:var(--green)}
.nlist li{border-top:1px solid var(--line)}
.nlist li:first-child{border-top:none}
.nlist a{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:14px 4px;align-items:start;transition:padding .2s,background .2s}
.nlist a:hover{background:var(--paper-2);padding-left:12px}
.nlist .d{font-size:.78rem;color:var(--green);letter-spacing:.04em;font-variant-numeric:tabular-nums;padding-top:2px}
.nlist .cat{grid-column:1;font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-soft);align-self:start}
.nlist .tx{grid-column:2;grid-row:1/3;font-size:.92rem;line-height:1.6;color:var(--ink)}
.nlist .empty{padding:18px 4px;color:var(--muted);font-size:.9rem}
/* 論文/学会発表ページへの内部リンク目印 */
.nlist .jump{font-family:var(--serif);font-size:.66rem;letter-spacing:.03em;color:var(--green-soft);
  margin-left:9px;white-space:nowrap;transition:color .2s}
.nlist a:hover .jump{opacity:1;color:var(--green)}
.nlist .nolink{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:14px 4px;align-items:start}

/* ---------- RESEARCH cards ---------- */
.rgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.rcard{background:var(--paper);padding:34px 30px 40px;transition:background .25s}
.band .rcard{background:#fff}
.rcard:hover{background:var(--paper-2)}
.band .rcard:hover{background:var(--paper-2)}
.rcard .rn{font-family:var(--serif);font-size:.82rem;color:var(--green);letter-spacing:.12em}
.rcard h3{font-family:var(--mincho);font-weight:700;font-size:1.26rem;line-height:1.6;margin:20px 0 14px;letter-spacing:.02em;
  word-break:keep-all}
.rcard p{margin:0;color:#4A544C;font-size:.9rem;line-height:1.85}
.rcard .kw{margin-top:22px;font-family:var(--serif);font-size:.76rem;color:var(--green-soft);letter-spacing:.06em}
a.rcard{display:block;text-decoration:none;color:inherit}
a.rcard .kw::after{content:"　→";color:var(--green);font-weight:700;opacity:0;transition:opacity .2s}
a.rcard:hover .kw::after{opacity:1}
.rgrid-loading{grid-column:1/-1;background:var(--paper);padding:30px;margin:0;color:var(--muted);font-size:.92rem}

/* ---------- RESEARCH themes accordion (research.html) ---------- */
.themes-acc{border-top:1px solid var(--line-2)}
.acc-empty{color:var(--muted);font-size:.92rem;padding:26px 8px;margin:0}
.acc-item{border-bottom:1px solid var(--line-2);scroll-margin-top:96px}
.acc-head{margin:0}
.acc-btn{width:100%;display:flex;align-items:center;gap:22px;padding:32px 8px;
  background:none;border:0;cursor:pointer;text-align:left;font:inherit;color:var(--ink);transition:color .2s}
.acc-btn:hover{color:var(--green)}
.acc-no{font-family:var(--serif);font-size:.92rem;color:var(--green);letter-spacing:.12em;flex:none;line-height:1.4}
.acc-title{font-family:var(--mincho);font-weight:700;font-size:1.32rem;line-height:1.55;letter-spacing:.02em;
  flex:1 1 auto;word-break:keep-all}
.acc-en{display:block;font-family:var(--serif);font-weight:600;font-size:.72rem;color:var(--green-soft);
  letter-spacing:.04em;margin-top:9px;line-height:1.5}
.acc-chevron{flex:none;width:13px;height:13px;margin:0 4px;border-right:2px solid var(--green-soft);
  border-bottom:2px solid var(--green-soft);transform:rotate(45deg);transition:transform .3s}
.acc-btn:hover .acc-chevron{border-color:var(--green)}
.acc-item.open .acc-chevron{transform:rotate(-135deg)}
.acc-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.acc-item.open .acc-panel{grid-template-rows:1fr}
.acc-panel-inner{overflow:hidden}
.subtheme-list{list-style:none;margin:0;padding:2px 0 36px;display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.subtheme{background:var(--paper);border:1px solid var(--line);padding:22px 22px 24px}
.st-title{font-family:var(--mincho);font-weight:700;font-size:1.04rem;line-height:1.65;margin:0 0 10px;color:var(--ink)}
.st-desc{margin:0;color:var(--muted);font-size:.9rem;line-height:1.9}
.st-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.st-tag{font-family:var(--serif);font-size:.72rem;color:var(--green-soft);border:1px solid var(--line-2);
  border-radius:2px;padding:2px 9px;letter-spacing:.03em}
.st-members{margin-top:14px;font-size:.84rem;color:var(--green);display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.st-members-lb{font-family:var(--serif);font-size:.68rem;color:var(--green-soft);border:1px solid var(--line-2);
  border-radius:2px;padding:1px 7px;letter-spacing:.08em}

/* ---------- PUBLICATIONS ---------- */
.publist li{display:grid;grid-template-columns:78px 1fr auto;gap:24px;align-items:baseline;
  padding:22px 6px;border-bottom:1px solid var(--line);transition:background .2s,padding .2s}
.publist li:hover{background:var(--paper);padding-left:14px}
.band .publist li:hover{background:#fff}
.publist .y{font-family:var(--serif);font-weight:700;font-size:1.15rem;color:var(--green)}
.publist .c b{font-weight:700}
.publist .c .j{color:var(--muted);font-size:.86rem;font-style:italic;font-family:var(--serif)}
.publist .tp{font-family:var(--serif);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--green-soft);border:1px solid var(--line-2);padding:3px 11px;border-radius:2px;white-space:nowrap;align-self:center}

/* ---------- PEOPLE ---------- */
.plead{font-family:var(--mincho);font-weight:600;font-size:1.16rem;line-height:2;color:var(--ink);
  margin:0 0 40px;word-break:auto-phrase}

/* ---------- PUBLICATIONS PAGE (papers / talks + year tabs) ---------- */
.pubtoggle{display:inline-flex;border:1px solid var(--line-2);border-radius:3px;overflow:hidden;margin-bottom:30px}
.pubtoggle button{font-family:var(--serif);font-size:1rem;padding:12px 26px;background:#fff;color:var(--muted);
  cursor:pointer;border:0;border-right:1px solid var(--line-2);display:inline-flex;gap:10px;align-items:baseline;
  transition:background .2s,color .2s}
.pubtoggle button:last-child{border-right:0}
.pubtoggle button span{font-family:var(--sans);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;opacity:.9}
.pubtoggle button.active{background:var(--green);color:#fff}
.pubtoggle button.active span{color:#fff;opacity:.85}

.yeartabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:32px}
.yeartabs button{font-family:var(--serif);font-size:.92rem;padding:9px 15px;background:none;border:0;color:var(--muted);
  cursor:pointer;position:relative;transition:color .2s}
.yeartabs button:hover{color:var(--green)}
.yeartabs button.active{color:var(--green);font-weight:700}
.yeartabs button.active::after{content:"";position:absolute;left:11px;right:11px;bottom:-1px;height:2px;background:var(--green)}

.pubcat-h{font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--green);letter-spacing:.03em;
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.pubcat-h + .paperlist{margin-bottom:8px}
.pubcat-h.rev{margin-top:40px}
.paperlist{list-style:none;counter-reset:pub;margin:0;padding:0}
.paperlist li{counter-increment:pub;display:grid;grid-template-columns:40px 1fr;gap:18px;
  padding:24px 8px;border-bottom:1px solid var(--line);align-items:start;transition:background .2s}
.paperlist li::before{content:counter(pub) ".";font-family:var(--serif);font-size:.92rem;color:var(--green);
  text-align:right;padding-top:2px;font-variant-numeric:tabular-nums}
.paperlist li:hover{background:var(--paper-2)}
.p-body{min-width:0}
.p-title{font-size:1.03rem;font-weight:700;line-height:1.7;color:var(--ink)}
.p-auth{font-size:.9rem;line-height:1.7;color:var(--muted);margin-top:9px}
.p-info{font-family:var(--serif);font-size:.88rem;line-height:1.7;color:var(--green-soft);margin-top:9px}
.p-raw{font-weight:500;color:var(--ink)}
.paperlist .plink{display:inline-block;white-space:nowrap;margin-left:8px;font-family:var(--serif);font-size:.8rem;
  color:var(--green);border-bottom:1px solid transparent}
.paperlist .plink:hover{border-color:var(--green)}

.conf{padding:28px 0;border-bottom:1px solid var(--line)}
.conf:first-child{padding-top:6px}
.conf-name{font-family:var(--mincho);font-weight:700;font-size:1.08rem;line-height:1.6;color:var(--ink);border-bottom:1px solid transparent}
.conf-name:hover{color:var(--green);border-color:var(--green)}
.conf-meta{font-family:var(--serif);font-size:.82rem;color:var(--muted);margin:7px 0 16px}
.talklist{list-style:none;margin:0;padding:0}
.talklist li{position:relative;padding:11px 0 11px 22px;font-size:.93rem;line-height:1.8}
.talklist li::before{content:"";position:absolute;left:0;top:11px;width:22px;height:1.8em;
  background:radial-gradient(circle at 6px 50%,var(--green-soft) 3px,transparent 3.5px)}
.award{display:inline-block;margin-left:8px;font-family:var(--serif);font-size:.72rem;color:var(--green-d);
  background:rgba(30,86,56,.1);border-radius:20px;padding:2px 11px;white-space:nowrap}
.invited{display:inline-block;margin-left:8px;font-family:var(--serif);font-size:.72rem;font-weight:700;
  color:var(--green);background:transparent;border:1px solid var(--green);border-radius:20px;
  padding:1px 10px;white-space:nowrap;letter-spacing:.03em}
.pubcount{font-family:var(--serif);font-size:.8rem;color:var(--muted);margin:0 0 26px}
/* reserve space so JSON-injected content doesn't shift layout on load (CLS) */
#pubpanel,#gallerypanel,#newslist{min-height:60vh}
.nlist[data-news]{min-height:290px}

@media(max-width:680px){
  .pubtoggle{display:flex;width:100%}
  .pubtoggle button{flex:1;justify-content:center;padding:11px 10px}
  .paperlist li{grid-template-columns:26px 1fr;gap:10px}
}

/* ---------- FOOTER (injected by site.js) ---------- */
footer.site{background:var(--green-d);color:#D7E1D3;padding:80px 0 40px}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.14)}
footer.site .brand .nm b{color:#fff}
footer.site .brand .nm span{color:#8FAE93}
footer.site .addr{color:#9FB6A3;font-size:.9rem;line-height:1.9;margin:22px 0 0;max-width:34ch}
footer.site h4{font-family:var(--serif);font-weight:700;font-size:.94rem;color:#fff;margin:0 0 18px;letter-spacing:.03em}
footer.site ul li{margin-bottom:11px}
footer.site ul a{color:#B9CCBC;font-size:.9rem;transition:color .2s}
footer.site ul a:hover{color:#fff}
.fbot{padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-family:var(--serif);font-size:.74rem;color:#8FAE93}
.fbot span{color:#8FAE93}

/* ---------- reveal-on-scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}

/* ---------- responsive ---------- */
@media(max-width:940px){
  .wrap{padding:0 26px}
  .hero .wrap{grid-template-columns:1fr;gap:48px}
  .rgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr 1fr}
  /* nav → hamburger before the desktop nav would overflow (~820px) */
  nav.main{position:fixed;inset:var(--hd-h) 0 auto 0;background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;align-items:stretch;gap:0;padding:8px 26px 20px;
    max-height:calc(100vh - var(--hd-h));max-height:calc(100dvh - var(--hd-h));overflow-y:auto;
    transform:translateY(-130%);visibility:hidden;
    transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s linear .35s}
  nav.main.open{transform:none;visibility:visible;
    transition:transform .35s cubic-bezier(.2,.7,.2,1),visibility 0s}
  nav.main a{padding:14px 6px;border-bottom:1px solid var(--line)}
  nav.main a::after{display:none}
  nav.main a.cta{margin:12px 0 0;text-align:center;border-radius:2px}
  .menu-btn{display:block}
}
@media(max-width:680px){
  .hero{padding:120px 0 60px}
  /* iPhone等の狭幅: 各行を幅内に収め、語の途中では折り返さない（改行は<br>位置のみ） */
  .hero-id h1{font-size:clamp(1.5rem,6.3vw,2rem);line-height:1.55;word-break:keep-all}
  section.block{padding:66px 0}
  .sec-head{grid-template-columns:1fr;gap:8px 18px}
  .sec-head .more{grid-column:1;justify-self:start;align-self:start}
  .publist li{grid-template-columns:56px 1fr;gap:6px 16px}
  .publist .tp{grid-column:1/3;justify-self:start;margin-top:4px}
  .fgrid{grid-template-columns:1fr}
  .acc-btn{gap:14px;padding:24px 4px}
  .acc-title{font-size:1.14rem}
  .subtheme-list{grid-template-columns:1fr;gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}