@charset "utf-8";

/* ==========================================================
  English pages
  /css/main.css の後に読み込む。

  設計：FLOCSS ＋ BEM
    Foundation … 要素セレクタによるベース・main.css の打ち消し
    Layout     … l-  ヘッダー・ナビ・ページ枠・サイドバー・フッター
    Component  … c-  ページをまたいで使う小さな部品
    Project    … p-  ページ固有のまとまり
    State      … is- 状態（JS で付け外し）
    JS hook    … js- スクリプト用（スタイルは当てない）

  ルール
    ・セレクタはクラス1つ（擬似クラス・擬似要素・is- の併記のみ可）
    ・画像は width ＋ max-width: 100% ＋ aspect-ratio で指定し、height は auto
    ・px と aspect-ratio に小数点は使わない
    ・px は 4 の倍数（崩れる場合のみ偶数。1px の線は除く）。画像の aspect-ratio は画像の縦横比のまま
    ・font-size / line-height / letter-spacing は Figma の値どおり（小数は四捨五入）。
      4 の倍数ルールの対象外。letter-spacing は em で指定
    ・main.css の a:hover（要素＋擬似クラス）はクラス1つより詳細度が高いため、
      リンクの :hover では color を必ず明示する
========================================================== */

/* ----------------------------------------------------------
  Foundation
---------------------------------------------------------- */
html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Noto Sans', -apple-system, blinkMacSystemFont, sans-serif;
  background: #fff;
}

/* main.css の「リンク内画像のホバー半透明」を打ち消す（リンク自体を透過させるため） */
a:hover img {
  opacity: 1;
}

/* ----------------------------------------------------------
  Layout：container
---------------------------------------------------------- */
.l-container {
  width: 1200px;
  max-width: 100%;
  margin-inline: auto;
}

/* ----------------------------------------------------------
  Layout：header
---------------------------------------------------------- */
.l-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  min-height: 188px;
}

/* ロゴ画像と組織名を重ねて配置するため、枠のサイズを固定 */
/* margin-bottom は日本語サイトのロゴ位置に合わせるための例外（4の倍数にしない） */
.l-header__logo {
  position: relative;
  width: 408px;
  height: 92px;
  margin-bottom: 39px;
}

.l-header__logo-link {
  display: block;
  height: 100%;
  color: #231815;
  transition: opacity 0.3s ease;
}

.l-header__logo-link:hover {
  color: #231815;
  text-decoration: none;
  opacity: 0.7;
}

.l-header__logo-img {
  position: absolute;
  top: 0;
  left: 1px; /* 日本語サイトのロゴ位置に合わせるための例外 */
  width: 260px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 260 / 67;
}

.l-header__logo-text {
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: 'PT Serif Caption', serif;
  font-size: 21px;
  font-style: italic;
  /* TOP は h1、下層は p なので、h1 の太字と文字の描画指定を打ち消して揃える */
  font-weight: 400;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  line-height: normal;
  white-space: nowrap;
}

.l-header__lang {
  margin-bottom: 24px;
  font-size: 25px;
  font-weight: 600;
  line-height: normal;
}

.l-header__lang-link {
  color: #27364d;
  transition: opacity 0.3s ease;
}

.l-header__lang-link:hover {
  color: #27364d;
  text-decoration: none;
  opacity: 0.7;
}

/* ----------------------------------------------------------
  Layout：global navigation
---------------------------------------------------------- */
.l-gnav {
  background: #00286d;
}

.l-gnav__list {
  display: flex;
  align-items: center;
  gap: 48px;
  min-height: 60px;
}

.l-gnav__item {
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
}

.l-gnav__link {
  color: #fff;
  transition: opacity 0.3s ease;
}

.l-gnav__link:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.7;
}

.l-gnav__sep {
  display: flex;
  justify-content: center;
  width: 2px;
}

/* 横線の画像を90度回転させて縦の区切り線にする */
.l-gnav__sep-img {
  width: 28px;
  height: auto;
  aspect-ratio: 14 / 1;
  rotate: 90deg;
}

/* ----------------------------------------------------------
  Layout：下層ページの枠（メイン＋サイドバー）
---------------------------------------------------------- */
.l-page {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-block: 36px 128px;
}

.l-page--activities {
  padding-bottom: 112px;
}

.l-page__main {
  width: 880px;
}

/* ----------------------------------------------------------
  Layout：sidebar
---------------------------------------------------------- */
.l-sidebar {
  position: relative;
  width: 300px;
  border: 1px solid #00286d;
  border-width: 4px 1px;
  border-radius: 4px;
  background: #b8cae5;
}

/* 斜線パターン（Figma ではマスクの不透明度 15%） */
.l-sidebar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url(../img/side_pattern.svg) no-repeat -272px -28px / 920px 368px;
  opacity: 0.15;
  pointer-events: none;
}

.l-sidebar__list {
  position: relative;
}

.l-sidebar__item {
  font-size: 16px;
  line-height: normal;
}

.l-sidebar__item:not(:first-child) {
  border-top: 1px solid #fff;
}

.l-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding-left: 20px;
  color: #000;
  transition: opacity 0.3s ease;
}

.l-sidebar__link:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.7;
}

.l-sidebar__link::before {
  content: '';
  width: 6px;
  aspect-ratio: 3 / 5;
  background: url(../img/side_arrow.svg) no-repeat 0 0 / 100% 100%;
}

.l-sidebar__link--last {
  min-height: 44px;
}

.l-sidebar__link--child {
  padding-left: 48px;
}

/* ----------------------------------------------------------
  Layout：footer
---------------------------------------------------------- */
.l-footer {
  background: #002e73 url(../img/footer_pattern.svg) repeat-x center top / 1440px 280px;
}

.l-footer__body {
  min-height: 280px;
  padding-top: 68px;
  font-weight: 500;
  line-height: normal;
  color: #fff;
}

.l-footer__logo {
  width: 172px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
}

.l-footer__name {
  margin-top: 16px;
  font-size: 18px;
  letter-spacing: 0.05em;
}

.l-footer__address {
  margin-top: 32px;
  font-size: 12px;
  font-style: normal;
  line-height: 18px;
}

.l-footer__tel {
  display: flex;
  column-gap: 1.5em;
  letter-spacing: 0.05em;
}

.l-footer__copyright {
  background: #dce4ef;
}

.l-footer__copyright-text {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  line-height: 64px;
  color: #000;
}

/* ----------------------------------------------------------
  Component：page title
---------------------------------------------------------- */
.c-page-title {
  background: #dce4ef;
}

.c-page-title__inner {
  position: relative;
  aspect-ratio: 1200 / 136;
  overflow: hidden;
  background: url(../img/pagetitle_bg.jpg) no-repeat 0 -132px / 1200px 400px;
}

.c-page-title__heading {
  position: absolute;
  inset: auto 0 0;
  padding-left: 36px;
  background: rgb(33 33 33 / 60%);
  font-size: 24px;
  font-weight: 600;
  line-height: 40px;
  color: #fff;
}

/* ----------------------------------------------------------
  Component：breadcrumb
---------------------------------------------------------- */
.c-breadcrumb {
  display: flex;
  align-items: center;
  min-height: 40px;
  border-radius: 4px;
  background: #fff4ec;
  font-size: 18px;
  line-height: normal;
  color: #000;
  list-style: none;
}

.c-breadcrumb__item {
  margin-left: 16px;
}

.c-breadcrumb__item--home {
  position: relative;
  z-index: 1;
  margin-left: 0;
}

.c-breadcrumb__home {
  display: block;
  width: 108px;
  padding-left: 24px;
  background: url(../img/breadcrumb_home.svg) no-repeat 0 0 / 108px 40px;
  line-height: 40px;
  color: #000;
}

.c-breadcrumb__home:hover {
  color: #000;
}

/* ----------------------------------------------------------
  Component：section
---------------------------------------------------------- */
.c-section {
  margin-top: 36px;
}

/* 見出し直後のリード文（c-text と併用） */
.c-section__lead {
  width: 848px;
  margin-top: 28px;
}

/* ----------------------------------------------------------
  Component：heading
---------------------------------------------------------- */
.c-heading {
  position: relative;
  padding: 4px 0 12px 28px;
  background: url(../img/heading_line.svg) no-repeat 0 100% / 100% 2px;
  font-size: 26px;
  font-weight: 600;
  line-height: 33px;
  color: #00286d;
}

.c-heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 48px;
  background: #00286d;
}

.c-heading--lg {
  font-size: 27px;
}

/* ----------------------------------------------------------
  Component：text（段落のまとまり）
---------------------------------------------------------- */
.c-text {
  display: grid;
  row-gap: 20px;
  padding-left: 28px;
  font-size: 16px;
  line-height: 20px;
  color: #000;
}

/* ----------------------------------------------------------
  Component：list
---------------------------------------------------------- */
.c-list {
  line-height: 24px;
  list-style: none;
}

.c-list__item {
  position: relative;
  padding-left: 1em;
}

/* 「・」は和文フォントで描画されるため、行の高さに影響しないよう絶対配置 */
.c-list__item::before {
  content: '・';
  position: absolute;
  top: 0;
  left: 0;
}

/* ----------------------------------------------------------
  Project：TOP メイン画像
---------------------------------------------------------- */
.p-top-main {
  position: relative;
  width: 1280px;
  max-width: 100%;
  margin: 12px auto 132px;
}

.p-top-main__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1280 / 703;
}

/* エリアに乗ったときに重ねて表示する画像（p-top-main__img と併用） */
.p-top-main__hover {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

.p-top-main__hover.is-active {
  visibility: visible;
}

/* ----------------------------------------------------------
  Project：Chairman's Message
---------------------------------------------------------- */
.p-message {
  display: flex;
  margin-top: 36px;
}

.p-message__profile {
  width: 176px;
  font-weight: 600;
  line-height: normal;
  color: #000;
}

.p-message__photo {
  display: block;
  width: 156px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 156 / 167;
}

.p-message__name {
  width: 160px;
  margin-top: 16px;
  font-size: 16px;
  text-align: center;
}

.p-message__name-main {
  display: block;
  font-size: 18px;
}

.p-message__body {
  width: 700px;
}

/* c-text と併用 */
.p-message__text {
  width: 668px;
  margin-top: 28px;
}

.p-message__text--after-figure {
  width: 656px;
  margin-top: 0;
}

.p-message__figure {
  margin: 36px 0 64px 28px;
}

.p-message__figure-img {
  display: block;
  width: 556px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 557 / 357;
}

/* ----------------------------------------------------------
  Project：Overview of Activities
---------------------------------------------------------- */
/* c-section と併用（2つ目のセクション） */
.p-activities__network {
  margin-top: 88px;
}

/* c-list と併用。c-text の行間 20px と合わせて 24px あける */
.p-activities__list {
  margin-bottom: 4px;
}

.p-activities__supplement {
  line-height: 24px;
}

.p-activities__figure--model {
  margin: 56px 0 0 112px;
}

.p-activities__figure--network {
  margin: 76px 0 0 148px;
}

.p-activities__img {
  display: block;
  max-width: 100%;
  height: auto;
}

.p-activities__img--model {
  width: 640px;
  aspect-ratio: 642 / 411;
}

.p-activities__img--network {
  width: 580px;
  aspect-ratio: 579 / 350;
}

/* ----------------------------------------------------------
  Project：Profile and History
---------------------------------------------------------- */
.p-profile {
  --p-profile-border: 1px solid #2588b7;
  width: 808px;
  margin: 36px 0 0 44px;
  border: var(--p-profile-border);
  font-size: 15px;
  line-height: 19px;
  color: #000;
}

.p-profile__head {
  width: 288px;
  padding: 16px 20px 16px 48px;
  border-top: var(--p-profile-border);
  border-right: var(--p-profile-border);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.p-profile__data {
  padding: 16px 20px 16px 20px;
  border-top: var(--p-profile-border);
  text-align: left;
  vertical-align: top;
}

.p-profile__data--history {
  padding: 16px 24px 32px;
}

/* 沿革（入れ子の年表） */
.p-profile__history {
  width: 100%;
  border: var(--p-profile-border);
}

.p-profile__year {
  width: 88px;
  padding: 16px 20px 16px 28px;
  border-top: var(--p-profile-border);
  border-right: var(--p-profile-border);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.p-profile__event {
  padding: 16px 12px 16px 16px;
  border-top: var(--p-profile-border);
  text-align: left;
  vertical-align: top;
}

/* ----------------------------------------------------------
  Project：分野ブロック（Focused Industry Sectors / Technology Platform）
---------------------------------------------------------- */
.p-sectors {
  display: grid;
  row-gap: 48px;
  width: 820px;
  margin: 40px 0 0 28px;
}

.p-sectors--tech {
  row-gap: 64px;
  margin-top: 48px;
}

.p-sector__title {
  min-height: 60px;
  padding: 16px 0 0 28px;
  background: #b8cae5;
  font-size: 26px;
  font-weight: 600;
  line-height: 33px;
  color: #00286d;
}

.p-sector__body {
  display: flex;
  align-items: flex-start;
  margin-top: 40px;
}

/* c-text と併用 */
.p-sector__text {
  width: 352px;
  margin-left: 28px;
  padding-left: 0;
}

.p-sector__img {
  display: block;
  width: 368px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 370 / 265;
  margin-left: 72px;
}

/* ----------------------------------------------------------
  Project：Industry-Academia Collaboration
---------------------------------------------------------- */
.p-collab {
  display: flex;
  align-items: flex-start;
  margin-top: 28px;
}

/* c-text と併用 */
.p-collab__text {
  width: 452px;
  margin-top: 4px;
}

.p-collab__img {
  display: block;
  width: 388px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 388 / 220;
  margin-left: 32px;
}