/* =====================================================================
   JAAE Corporate Site — shared styles
   一般社団法人 日本・アジア産学振興支援機構
   Design tokens: navy #03224d / gold #775928,#B08D57,#ffdeae,#ffd79b
   ===================================================================== */

html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
  background: #faf9fd;
  color: #1a1b1f;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal; line-height: 1;
  letter-spacing: normal; text-transform: none; display: inline-block;
  white-space: nowrap; direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Header nav ---- */
.jaae-nav {
  color: #1a1b1f; text-decoration: none;
  border-bottom: 2px solid transparent; padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}
.jaae-nav:hover { color: #775928; border-bottom-color: #ffd79b; }

/* ---- Buttons ---- */
.jaae-btn-primary { transition: background-color .3s ease; }
.jaae-btn-primary:hover { background: #775928 !important; }
.jaae-btn-ghost { transition: background-color .3s ease, color .3s ease; }
.jaae-btn-ghost:hover { background: #ffdeae !important; color: #03224d !important; }
.jaae-cta { transition: background-color .3s ease; }
.jaae-cta:hover { background: #775928 !important; }
.jaae-outline { transition: background-color .3s ease, color .3s ease; }
.jaae-outline:hover { background: #03224d !important; color: #fff !important; }

/* ---- Cards ---- */
.jaae-pillar { transition: border-color .3s ease, box-shadow .3s ease; }
.jaae-pillar:hover { border-color: #775928 !important; }
.mem-card { transition: border-color .4s cubic-bezier(.165,.84,.44,1), transform .4s cubic-bezier(.165,.84,.44,1), box-shadow .4s; }
.mem-card:hover { border-color: #775928 !important; transform: translateY(-4px); box-shadow: 0 10px 25px -5px rgba(3,34,77,.08); }

/* ---- Links / misc ---- */
.jaae-foot { color: #fff; text-decoration: none; opacity: .8; transition: opacity .2s ease, color .2s ease; }
.jaae-foot:hover { opacity: 1; color: #ffdeae; }
.jaae-readmore { display: inline-flex; align-items: center; color: #775928; font-weight: 700; text-decoration: none; gap: 8px; transition: gap .3s ease; }
.jaae-readmore:hover { gap: 16px; }
.jaae-crumb { color: inherit; text-decoration: none; transition: color .2s ease; }
.jaae-crumb:hover { color: #775928; }
.jaae-crumb-dark { color: inherit; text-decoration: none; transition: color .2s ease; }
.jaae-crumb-dark:hover { color: #ffdeae; }
.jaae-maplink { color: #775928; text-decoration: none; transition: opacity .2s ease; }
.jaae-maplink:hover { opacity: .7; }
.ov-row { border-bottom: 1px solid #d9d9d9; }
.ov-row:last-child { border-bottom: none; }

/* Email address rendered as an image inside a mailto button (anti-spam) */
.email-btn { transition: background-color .3s ease, border-color .3s ease; }
.email-btn:hover { background: #ffdeae !important; border-color: #775928 !important; }
.email-btn img { pointer-events: none; }

/* ---- Mobile nav toggle (hidden on desktop) ---- */
.nav-toggle {
  display: none;
  border: 0; background: transparent; cursor: pointer;
  color: #03224d; padding: 8px; margin: 0; line-height: 0;
}
.nav-toggle .material-symbols-outlined { font-size: 30px; }

/* =====================================================================
   Responsive — desktop layout comes from inline styles; these hooks
   only override on narrower viewports.
   ===================================================================== */
@media (max-width: 900px) {
  .r-grid3 { grid-template-columns: 1fr !important; }
  .r-grid4 { grid-template-columns: repeat(2, 1fr) !important; }
  .r-grid2 { grid-template-columns: 1fr !important; }
  .r-pop   { transform: none !important; }         /* raised centre card */
  .r-h1    { font-size: 30px !important; }
  .r-h2    { font-size: 26px !important; }
  .r-watermark { font-size: 180px !important; }
}

/* Header collapses to a hamburger below 720px */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex !important; align-items: center; }
  .r-name { display: none !important; }            /* long org name */
  header .r-nav {
    display: none !important;
    position: absolute; top: 90px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0 !important;
    background: #fff; border-bottom: 1px solid #03224d;
    padding: 4px 24px 12px;
    box-shadow: 0 12px 24px -12px rgba(3,34,77,.25);
  }
  header .r-nav.open { display: flex !important; }
  header .r-nav a {
    width: 100%; padding: 16px 0 !important;
    font-size: 15px !important; border-bottom: 0 !important;
    border-top: 1px solid #ececf0;
  }
}
@media (max-width: 560px) {
  .r-grid4 { grid-template-columns: 1fr !important; }
  .r-h1    { font-size: 26px !important; }
  .r-ovrow { grid-template-columns: 1fr !important; gap: 6px !important; }
  .r-watermark { font-size: 120px !important; }
  .r-pad   { padding-left: 16px !important; padding-right: 16px !important; }
}