/* ============================================================================
MCM custom additions (AIST VI compliant)
Template based on res_type_ver 2.0.0
============================================================================ */

:root{
  /* keep AIST red from default: --theme-color-red: #cf0027; */
  --mcml-surface: #ffffff;
  --mcml-surface-2: #f5f6f7;
  --mcml-border: #d8d8d8;
  --mcml-text: #111;
  --mcml-muted: #666;
  --mcml-radius: 12px;
  --mcml-shadow: 0 6px 18px rgba(0,0,0,.08);
}

body{
  color: var(--mcml-text);
}

.skipLink{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skipLink:focus{
  left: 12px;
  top: 12px;
  width:auto;
  height:auto;
  padding: 10px 12px;
  background: var(--mcml-surface);
  border: 2px solid var(--theme-color-red);
  z-index: 9999;
}

.hero{
  background: linear-gradient(180deg, #ffffff 0%, var(--mcml-surface-2) 100%);
}
.heroInner{
  padding: 22px var(--content-area-sidePadding);
  max-width: var(--content-area-width);
  margin: 0 auto;
}
.heroTitle{
  font-size: var(--fontsz-xxxl);
  line-height: 1.2;
  margin: 0 0 .35em;
}
.heroLead{
  font-size: 1.5rem;
  margin: 0;
  color: var(--mcml-muted);
}

.quickLinks{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.quickLinks a{
  display:block;
  padding: 14px 14px;
  border-radius: var(--mcml-radius);
  border: 1px solid var(--mcml-border);
  background: var(--mcml-surface);
  box-shadow: var(--mcml-shadow);
  text-decoration: none;
  color: var(--mcml-text);
}
.quickLinks a span{
  display:block;
  font-size: 1.2rem;
  color: var(--mcml-muted);
}

.cardGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.card{
  border: 1px solid var(--mcml-border);
  border-radius: var(--mcml-radius);
  background: var(--mcml-surface);
  box-shadow: var(--mcml-shadow);
  overflow: hidden;
}
.card a{
  display:block;
  color: inherit;
  text-decoration: none;
}
.cardBody{
  padding: 14px 14px 16px;
}
.cardTitle{
  margin: 0 0 .4em;
  font-size: 1.6rem;
  background: none;
  padding-bottom: 0;
  border-left: 0;
  padding-left: 0;
}
.cardTitleLink{
  color: inherit;
  text-decoration: none;
}
.cardTitleLink:hover,
.cardTitleLink:focus{
  text-decoration: underline;
}
.cardText{
  margin: 0;
  color: var(--mcml-muted);
}

/* =========================================================
  Section headings (ref asset: dist/index.html h2)
  - Replace horizontal dotted underline with vertical AIST red rule.
========================================================= */
#mainBody h2:not(.heroTitle):not(.cardTitle){
  background: none;
  border-left: 6px solid var(--theme-color-red);
  padding: 0 0 0 12px;
  margin: 0 0 1em;
}


/* =========================================================
  Card header (Teams panels)
  - Title as full-width header line with red bottom border.
========================================================= */
.cardHeader{
  padding: 14px 14px 0;
}
.cardHeader .cardTitle{
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.3;
  padding: 0 0 10px;
  border-bottom: 3px solid var(--theme-color-red);
}
.cardHeader + .cardBody{
  padding-top: 12px;
}
/* =========================================================
  Group panels (ref asset: dist/groups/index.html)
  - figure image + external-link button, responsive layout.
========================================================= */
.cardMedia{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cardMediaText{ flex: 1 1 auto; }
.cardMediaFigure{
  flex: 0 0 260px;
  border-radius: calc(var(--mcml-radius) - 4px);
  overflow: hidden;
  border: 1px solid var(--mcml-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
.cardMediaFigure img{
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.btnRow{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--theme-color-red);
  text-decoration: none;
  font-size: 1.4rem;
  line-height: 1;
}
.btn--primary{
  background: var(--theme-color-red);
  color: #fff;
}
.btn--outline{
  background: transparent;
  color: var(--theme-color-red);
}

@media (max-width: 767.98px){
  .cardMedia{ flex-direction: column; }

  .cardMediaFigure{
    flex: 0 0 auto;
    height: 160px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cardMediaFigure img{
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }
}


.pageLayout{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.subnav{
  border: 1px solid var(--mcml-border);
  border-radius: var(--mcml-radius);
  background: var(--mcml-surface);
  box-shadow: var(--mcml-shadow);
  padding: 12px;
}
.subnav h2{
  margin-top: 0;
  background: none;
  padding-bottom: .2em;
  border-left: 0;
  padding-left: 0;
}
.subnav ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
.subnav li{
  margin: 0;
}
.subnav a{
  display:block;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--mcml-text);
}
.subnav a[aria-current="page"]{
  background: rgba(207,0,39,.08);
  border: 1px solid rgba(207,0,39,.25);
}
.subnav a:hover{
  text-decoration: underline;
}

.tableWrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.badge{
  display:inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15);
  font-size: 1.1rem;
  color: var(--mcml-muted);
  background: #fff;
}

.formGrid{
  display:grid;
  gap: 12px;
}
.formGrid label{
  display:block;
  font-weight: 600;
  margin-bottom: 4px;
}
.formGrid input,
.formGrid textarea,
.formGrid select{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--mcml-border);
  border-radius: 10px;
  font: inherit;
}
.formGrid textarea{
  min-height: 160px;
}
.primaryBtn{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--theme-color-red);
  color: #fff;
  border: none;
  cursor: pointer;
  font-weight: 700;
}
.primaryBtn:focus{
  outline: 3px solid rgba(207,0,39,.35);
  outline-offset: 2px;
}

@media (min-width: 700px){
  .quickLinks{ grid-template-columns: repeat(2, 1fr); }
  .cardGrid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 980px){
  .cardGrid{ grid-template-columns: repeat(3, 1fr); }
  .pageLayout{ grid-template-columns: 280px 1fr; align-items: start; }
  .subnav{ position: sticky; top: 110px; }
}

/* 構成メンバー表 */
.memberTable{
  width:100%;
  border-collapse:collapse;
  margin: 12px 0 24px;
}
.memberTable th,
.memberTable td{
  border: 1px solid #ddd;
  padding: 10px 12px;
  vertical-align: top;
}
.memberTable th{
  width: 12em;
  background: #f7f7f7;
  font-weight: 600;
}

/* SPで読みやすく（必要なら） */
@media (max-width: 599.98px){
  .memberTable th{ width: 9em; }
}


/* ==========================
   /ja/groups/ 研究グループ一覧
   全環境：本文70% / 図30% に固定
   ========================== */

/* カード一覧：1列（必要なら残す） */
body.page-sub main#mainBody .cardGrid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
body.page-sub main#mainBody .cardGrid > .card {
  width: 100%;
}

/* 全環境：カード内を常に 70/30 の横並びにする */
body.page-sub main#mainBody .cardMedia {
  display: flex !important;     /* 既存の block 指定を潰す */
  align-items: flex-start;
  gap: 16px;
}

body.page-sub main#mainBody .cardMediaText {
  flex: 1 1 auto;               /* 本文が残りを取る */
  min-width: 0;                 /* 長文はみ出し対策 */
  overflow-wrap: anywhere;
}

body.page-sub main#mainBody .cardMediaFigure {
  flex: 0 0 30% !important;     /* どの幅でも図は30% */
  max-width: 30% !important;
  margin: 0;
}

/* 画像：アスペクト比優先で30%枠内に収める */
body.page-sub main#mainBody .cardMediaFigure img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: contain;
}
/* 組織図と構成メンバー：研究グループ名リンク */
.memberGroupTitle{
  margin-top: 1.2rem;
}
.memberGroupLink{
  color: inherit;
  text-decoration: none;
  display: inline-block;
}
.memberGroupLink:hover,
.memberGroupLink:focus-visible{
  text-decoration: underline;
}


/* 部門長あいさつ：1段落目の右に写真（全環境1列） */
.greetingBox{
  display: block;
}

/* 画像を1段落目の右側に“回り込み”で配置（レイアウト自体は1列） */
.greetingFloat{
  float: right;
  width: 30%;            /* 全環境で相対30% */
  max-width: 260px;      /* 上限 */
  margin: 0 0 12px 24px; /* 左余白＋下余白 */
}

.greetingFloat img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* 2段落目以降は画像の下から開始（=回り込みを1段落目だけに限定） */
.greetingClear{
  clear: both;
}

/* 署名は必ず下に */
.greetingBox .sign{
  clear: both;
}

/* ヘッダ：AIST / NMIJ ロゴの高さを統一 */
#gHeader .aistlogo img,
#gHeader .depname img{
  height: 20px;     /* ←ここを基準サイズに（例） */
  width: auto;
  display: block;
}

/* ロゴ＋文字列（NMIJ）の縦位置を揃える */
#gHeader .depname a{
  display: flex;
  align-items: center;
  gap: 8px;
}

/* SPでは少し小さくしたい場合（任意） */
@media (max-width: 599.98px){
  #gHeader .aistlogo img,
  #gHeader .depname img{
    height: 32px;
  }
}


/* Header: NMIJ logo + text (JP/EN) */
#gHeader .aistlogo_box{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
#gHeader .depname a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  white-space: nowrap;
}
#gHeader .depname a:hover,
#gHeader .depname a:focus-visible{
  text-decoration: underline;
}
#gHeader .logo_nmij{
  height: 32px;
  width: auto;
  display: block;
}
@media (max-width: 599.98px){
  #gHeader .logo_nmij{ height: 28px; }
}


/* Header (SP): keep AIST logo and NMIJ logo+text on one row */
#gHeader .spHeader .siteTitleBox{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}
#gHeader .spHeader .aistlogo{
  flex: 0 0 auto;
}
#gHeader .spHeader .depname{
  flex: 1 1 auto;
  min-width: 0;
}


/* =========================================================
   SPヘッダ：AISTロゴ + NMIJ(ロゴ+名称) を1行
   かつ、depname が消えないように安定化
   ========================================================= */
#gHeader .spHeader .siteTitleBox{
  display: flex;
  align-items: center;
  flex-wrap: wrap;        /* unitnameBox を次行へ */
  column-gap: 10px;
  row-gap: 8px;
}

/* AISTロゴは固定 */
#gHeader .spHeader .aistlogo{
  flex: 0 0 auto;
}

/* NMIJブロックは必ず表示し、残り幅を使う（消えるのを防止） */
#gHeader .spHeader .depname{
  display: block !important;  /* 万一display:noneが当たっても復帰 */
  flex: 1 1 auto;
  min-width: 0;               /* 省略表示(ellipsis)のため */
}

#gHeader .spHeader .depname a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;        /* 2段化防止 */
  overflow: hidden;           /* 省略表示 */
  text-overflow: ellipsis;
  max-width: 100%;
}

/* NMIJロゴの高さ */
#gHeader .spHeader .depname img.logo_nmij{
  height: 24px;
  width: auto;
  display: block;
}

/* 部門名は必ず次行 + 上に余白 */
#gHeader .spHeader .unitnameBox{
  flex: 0 0 100%;
  width: 100%;
  margin-top: 6px;
}