@charset "utf-8";
@import url("reset.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap');

/* ════════════════════════════════════════
   DESIGN TOKENS — :root
   全プロパティはここで一元管理する
   色・サイズのハードコード禁止
════════════════════════════════════════ */
:root {
  /* ── Colors ── */
  --color-primary:      #6A9ED3;   /* 青: News見出し・Membersリンク・Prospective左 */
  --color-accent:       #F2C94C;   /* 黄: Researchリンク・Prospective右・タブ下線 */
  --color-green:        #4A7C59;   /* 緑: Publicationsリンク */
  --color-dark-bg:      #333333;   /* ダーク: About右カラム・ハンバーガー */
  --color-hero-bg:      #111111;   /* ヒーロー背景暗部 */
  --color-text-dark:    #333333;
  --color-text-mid:     #555555;
  --color-text-light:   #888888;
  --color-text-xlight:  #999999;
  --color-border:       #DDDDDD;
  --color-placeholder:  #E0E0E0;
  --color-footer-bg:    #ebebeb;
  --color-white:        #FFFFFF;
  --color-navy:         #002c63;
  --color-black:        #111111;
  --color-blue:         #001fba;
  --color-yellow:       #f2c94c;
  --color-green:        #1c9852;

  /* ── Typography ── */
  --font-sans:   'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  --font-en:     'Montserrat', sans-serif;
  --font-serif:  'Noto Serif JP', 'Times New Roman', serif;

  --font-size-xxs:   0.5rem;       /* 8px  */
  --font-size-xs:    0.5625rem;    /* 9px  */
  --font-size-xs2:   0.625rem;     /* 10px */
  --font-size-sm:    0.6875rem;    /* 11px */
  --font-size-sm2:   0.75rem;      /* 12px */
  --font-size-base:  0.875rem;     /* 14px */
  --font-size-md:    1rem;         /* 16px */
  --font-size-lg:    1.25rem;      /* 20px */
  --font-size-xl:    1.5rem;       /* 24px */
  --font-size-2xl:   2rem;         /* 32px */
  --font-size-3xl:   2.75rem;      /* 44px */
  --font-size-4xl:   5rem;         /* 80px */
  --font-size-5xl:   6rem;         /* 96px */

  /* ── Spacing ── */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   1.5rem;
  --space-lg:   2rem;
  --space-xl:   3rem;
  --space-2xl:  4rem;

  /* ── Layout ── */
  --container-max:  75rem;       /* 1200px */
  --header-h:       4.375rem;    /* 70px  */

  /* ── z-index ── */
  --z-base:     0;
  --z-header:   400;   /* ドロワーより前面: ハンバーガーが常に見える・位置ずれ防止 */
  --z-drawer:   300;
  --z-overlay:  400;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  line-height: 1.6;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ════════════════════════════════════════
   CONTAINER
════════════════════════════════════════ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* ════════════════════════════════════════
   SITE HEADER
   画像はすべて2x作成のため CSS で 1/2 サイズ表示
   shared/ に配置:
     logo_h_utokyo.png / site_title_ja.png / site_title_en.png
     bn_h_01.png / bn_h_02.png
════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.375rem;
  padding: 1.375rem 1.375rem 0 1.375rem;
  z-index: var(--z-header);
  box-sizing: border-box;
}

/* 白背景エリア（角丸・ハンバーガーと分離） */
.site-header__white {
  flex: 1;
  min-width: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background-color: var(--color-white);
  border-radius: 0.5rem;
}

/* ── ロゴエリア ── */
.site-header__logo {
  display: flex;
  align-items: center;
  padding: 0 1rem;
  flex-shrink: 0;
  height: 100%;
}

/* logo_h_utokyo.png (2x) → display 1/2 */
.site-header__logo-img {
  height: 3.5rem;   /* 表示56px: 実画像は112px想定 */
  width: auto;
  display: block;
}


/* ── タイトルエリア ── */
.site-header__titles {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 1rem 0 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;   /* a タグのデフォルト下線を消す */
  transition: opacity 0.15s ease;
}

.site-header__titles:hover {
  opacity: 0.8;
}

/* site_title_ja.png (2x) → display 1/2 */
.site-header__title-ja {
  height: 3rem;
  width: auto;
  display: block;
  flex-shrink: 0;
}

/* site_title_en.png (2x) → display 1/2 */
.site-header__title-en {
  height: 3rem;
  width: auto;
  display: block;
  flex-shrink: 1;
  min-width: 0;
}

/* ── バナーエリア（デスクトップのみ） ── */
.site-header__banners {
  display: none;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
  gap: 1rem;
  margin-right: 1rem;
}

/* bn_h_01.png / bn_h_02.png (2x) → display 1/2 */
.site-header__banner {
  height: 2.25rem;
  width: auto;
  display: block;
  transition: opacity 0.15s ease;
}

.site-header__banners a:hover .site-header__banner {
  opacity: 0.75;
}

/* ── ハンバーガーボタン ── */
.hamburger {
  width: var(--header-h);
  height: var(--header-h);
  flex-shrink: 0;
  background-color: var(--color-accent);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 0;
}

.hamburger__line {
  display: block;
  width: 1.375rem;
  height: 2px;
  background-color: var(--color-black);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* 開時: 黄色い四角の中で三本線 → バツ印に変化 */
.hamburger.is-open .hamburger__line:nth-child(1) {
  transform: translateY(0.4375rem) rotate(45deg);
}
.hamburger.is-open .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open .hamburger__line:nth-child(3) {
  transform: translateY(-0.4375rem) rotate(-45deg);
}

/* ════════════════════════════════════════
   DRAWER NAV
════════════════════════════════════════ */
.drawer {
  position: fixed;
  top: calc(0.5rem * 2 + var(--header-h));  /* ヘッダー直下から開始 */
  right: 0;
  bottom: 0;
  width: 50vw;
  display: flex;
  z-index: var(--z-drawer);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.drawer.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* 左パネル: 画像 */
.drawer__image {
  flex: 0 0 40%;
  background-image: url('../shared/img_menu.jpg');
  background-size: cover;
  background-position: center;
}

/* 右パネル */
.drawer__panel {
  flex: 1;
  background-color: var(--color-dark-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* パネルヘッダー: LIPSロゴ + 閉じるボタン */
.drawer__panel-header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  height: var(--header-h);
}

.drawer__lips {
  height: 2.625rem;
  width: auto;
  margin-right: auto;
  padding-left: 1.75rem;
  display: block;
}

/* 閉じるボタン (×) — ハンバーガーと同形状 */
.drawer__close {
  width: var(--header-h);
  height: var(--header-h);
  flex-shrink: 0;
  background-color: var(--color-accent);
  border: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.drawer__close::before,
.drawer__close::after {
  content: '';
  display: block;
  width: 1.375rem;
  height: 2px;
  background-color: var(--color-black);
  position: absolute;
}

.drawer__close::before { transform: rotate(45deg); }
.drawer__close::after  { transform: rotate(-45deg); }

.drawer__close:hover { opacity: 0.85; }

/* ナビゲーションリスト */
.drawer__list {
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
  flex: 1;
}

.drawer__link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--color-white);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.drawer__link:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

.drawer__link--active .drawer__ja,
.drawer__link--active .drawer__en {
  color: var(--color-accent);
}

/* ● バレット */
.drawer__bullet {
  font-size: 0.5rem;
  color: var(--color-white);
  flex-shrink: 0;
}

/* 日本語ラベル */
.drawer__ja {
  font-family: var(--font-jp);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-white);
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* 英語ラベル */
.drawer__en {
  font-family: var(--font-en);
  font-size: 0.9375rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.04em;
}

/* 下部ラベル画像 */
.drawer__footer {
  padding: 1.5rem 1.75rem 2rem;
  flex-shrink: 0;
}

.drawer__footer-img {
  width: 100%;
  max-width: 16rem;
  height: auto;
  display: block;
  opacity: 0.75;
}

/* ════════════════════════════════════════
   DRAWER OVERLAY
════════════════════════════════════════ */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
.site-footer {
  position: relative;
  background-color: var(--color-footer-bg);
  /*margin-top: 0.75rem;*/
  border-top: 0.75rem solid #fff;
}

/* ── バナーバー (bn_f_01〜04) ── */
.footer-banners {
  padding: 1.25rem 0 0;
}

.footer-banners__inner {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #ffffff;
}

.footer-banner-item {
  display: block;
  padding: 0;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer-banner-item:last-child {
  border-right: none;
}

.footer-banner-item:hover {
  opacity: 0.7;
}

/* バナー画像 (2x → 1/2 サイズ表示) */
.footer-banner-item__img {
  height: 5rem;
  width: auto;
  display: block;
  max-width: 100%;
}

/* ── フッター本体 ── */
.footer-body {
  padding: 3rem 0 1.5rem;
}

.footer-body__inner {
  display: flex;
  align-items: flex-start;
  gap: 3rem;
  flex-wrap: wrap;
  padding: 0 2.5rem;
}

/* サイトタイトル画像 (site_title_ja.png 2x → 1/2) */
.footer-title__img {
  height: 3rem;   /* 2x → 表示: 48px */
  width: auto;
  display: block;
}

/* フッター情報プレースホルダー */
.footer-body__placeholder {
  font-size: var(--font-size-sm2);
  color: #cccccc;
}

/* ── コピーライト ── */
.footer-copyright {
  padding: 1rem 0;
}

.footer-copyright p {
  font-size: 0.8rem;
  color: #5b5b5b;
  text-align: left;
  padding: 0 2.5rem;
}

br.sp{
  display: none;
}

/*ページトップ*/
.pagetop{
    width:4rem;
    height:4rem;
    position:fixed;
    bottom:5.5rem;
    right:1rem;
     transform:translateY(100px);
    transition:.3s all ease;
    opacity:0;
    z-index: -1;
}

.pagetop.show{
    transform:translateY(0);
    opacity:1;
    z-index:9;
}

    .pagetop a{
        box-sizing: border-box;
        display:flex;
        justify-content: center;
        align-items: center;
        transition:.5s all ease;
        width:100%;
        height:100%;
        text-decoration:none;
        border-radius: 50%;
        background: #0b8bee;
        padding-bottom: 0.2rem;
    }
    
    .pagetop a:hover{
        filter: brightness(1.1);
    }


    .pagetop a:before{
        font-family: FontAwesome;
        content:"\f106";
        color: #fff;
        font-size: 2.4rem;
    }

/* ════════════════════════════════════════
   RESPONSIVE: Desktop
════════════════════════════════════════ */
@media (min-width: 64rem) {
  /* バナーをデスクトップのみ表示 */
  .site-header__banners {
    display: flex;
  }
}

/* タブレット: タイトル英語を非表示 */
@media (max-width: 63.9375rem) {
  .site-header__title-en {
    display: none;
  }
}

/* モバイル: タイトル全体を非表示 */
@media (max-width: 47.9375rem) {
  .site-header__sep {
    display: none;
  }
  .site-header__logo {
    flex: 1;
  }
}

/* ##########印刷用########## */
@media print{
    html{
        width: 1024px;
    }
    
    header{
        position:relative;
    }
   
    
    .contents{
        padding-top: 0;
    }
    
    .pagetop{
        display: none;
    }
}