@import url('https://fonts.googleapis.com/css2?family=BioRhyme:wght@300&display=swap');

:root {
  --main-color: #08a000;
  --main-color-mid: #08a00080;
  --main-color-light: #08a00015;
}

body {
    color: #333333;
    font-family: "Helvetica Neue","Arial","Hiragino Sans","Noto Sans JP",sans-serif;
    background-color: #ffffff;
    font-size: 1rem;
    line-height: 1.5;
}

h1 { font-size: 2.5rem; }
h2 { 
    font-size: 1.75rem;
    letter-spacing: 0.1em;
}
h3 { font-size: 1.25rem; }

ul {
    margin: 0px;
    padding: 0px;
}

p {
    font-size: 1rem;
    line-height: 1.7;
    text-align: justify;

}

/* リンク */
a {
    color: #999966;
}

a:hover {
    color: #996600;
}

figure {
    margin: 0;
}

figcaption {
    font-size: 12px;
}

/* ページヘッダー */
#pageHead {
    width: 100%; 
    padding: 0;
    margin: 0;
    position: fixed; /* 親要素に対して位置を固定 */
    background-color: #ffffff; /* スクロール時に透過しないように */
    border-bottom: 1px solid #cccccc;
    z-index: 9999; /* 最前面に */
}

#pageHead .inner {
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

#pageHead #logo {
    display: block;
}

/* ハンバーガー */
.menuToggle {
  display: none;
  font-size: 40px;
  width: 50px;
  height: 50px;
  color: var(--main-color);
  background: none;
  border: none;
  cursor: pointer;
}

/* PCはそのまま */
#menuWrap {
  display: block;
}

#pageHead .headerTop {
    width: 150px;
    margin: 0 0 0 auto;
    display: flex;
    align-items: center; /* アイコンとボタンを縦方向の中央に揃える */
    justify-content: flex-end; /* 右寄せ */
}

#pageHead .headerTop .instaLink {
    margin: auto;
}

#pageHead .headerTop .instaLink .instaIcon {
    display: block;
}

#pageHead .headerTop .jpButton {
    width: 40px;
    margin: 2.5px 0 2.5px auto;
    text-align: center;
    color: #ffffff;
    background-color: var(--main-color);
    border-radius: 6px 0 0 6px; /* 左上 左下 を丸める */
    font-weight: 1000;
    text-decoration: none;
}

#pageHead .headerTop .enButton {
    width: 40px;
    margin: 2.5px auto 2.5px 0;
    text-align: center;
    color: var(--main-color);
    background-color: var(--main-color-light);
    border-radius: 0 6px 6px 0; /* 右上 右下 を丸める */
    font-weight: 1000;
    text-decoration: none;
}

/* グローバルナビ */
.globalNavi {
    padding: 0px;
    width: 630px;
}

.globalNavi ul {
    margin: 0;
    padding: 0;
}

.globalNavi ul::after {
    content: "";
    clear: both;
    display: block;
}

.globalNavi ul li {
    list-style: none;
    width: 126px;
    float: left;
    padding: 0px;
    box-sizing: border-box;
    text-align: center;
    font-size: 1rem;
    font-weight: 1000;
}

.globalNavi ul li:first-child {
    border-left: none;
}

.globalNavi ul li a {
    color: var(--main-color);
    text-decoration: none;
    display: block;
    padding: 5px 0;
}

.globalNavi ul li a:hover,
.globalNavi ul li.current a {
    background-color: var(--main-color-light);
}

/*ページフッター*/
#pageFoot {
    width: 100%; 
    padding: 20px 0px;
    color: #ffffff;
    background-color: #3c3c3c;
    border-top: solid 1px #cccccc;
}

#pageFoot #pageFootInner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

#pageFoot #pageFootInner #pageFootContent {
    display: flex;
    border-bottom: 1px solid #ffffff;
}


#pageFoot #copyright {
    font-size: 14px;
    line-height: 1.5;
}

/* main */
main {
    background-color: #ffffff;
    padding-bottom: 40px;
}

/*ページボディ*/
#pageBody {
    width: 1100px;
    padding-top: 80px; /*固定ヘッダー分をずらす*/
    margin: 0 auto;
    background-color: #ffffff;
}

#mainImage {
  width: 100vw;           /* 画面幅いっぱい */
  height: auto;
  display: block;

  /* 親要素の中央から左右にはみ出す */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.pageBodyHead {
    /*position: relative;
    width: 100%;
    height: 150px;
    overflow: hidden;*/ /* 画像がはみ出すのを防ぐ */

    width: 100vw;           /* 画面幅いっぱい */
    height: 150px;
    display: block;
    /* 親要素の中央から左右にはみ出す */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.pageBodyHeadImage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* CSS の background-size: cover と同等 */
    z-index: 0;
    pointer-events: none;
}

.pageBodyHead h1 {
    position: relative;  /* 背景画像の上に表示するため */
    z-index: 1;
    color: white;
    text-shadow: 0 0 10px rgba(0,0,0,0.8); /* 影をつける */
    margin: 0;
    text-align: center;

    /* 中央配置 */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* Main page */
/* スライドショー部分 */

.mainMessage {
    flex: 1.5;
    padding: 40px 0px;
    margin: 0px;
}

.mainMessage h2 {
    margin: 0px;
    text-align: center;
}

.buttonWrap {
  text-align: center;
}

.btn {
  display: block;
  width: 200px;
  margin: 0 auto;
  padding: 12px 0;
  text-align: center;
  font-size: 20px;
  background: var(--main-color);
  color: #ffffff;
  text-decoration:none; /* リンクの下線を消す */
  position: relative; 
}

.btn:hover {
  background: var(--main-color-mid);
  color: #ffffff;
}

.btn::after {
  content: "→";
  position: absolute;
  right: 10px;          /* ← 右端 */
  top: 50%;
  transform: translateY(-50%);
}

/* news */
#news {
    padding: 30px 30px;
    margin: 30px 0px;
    background-color: var(--main-color-light);
}

#news h2 {
    margin: 0px 0px 20px 0px;
    padding: 0px;
    text-align: center;
}

/* --- リスト --- */
.newsList {
  max-height: 220px;      /* 5件分くらい */
  overflow-y: scroll; /* スクロールを表示 */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* --- 各行 --- */
.newsListItem {
  display: flex;
  gap: 15px;
  padding: 8px 0;
  border-bottom: 1px solid #b9b9b9;
}

/* --- ラベル --- */
.newsIcon01 {
  flex-shrink: 0;
  width: 60px;
  font-size: 0.9rem;
  text-align: center;
  color: #ffffff;
  background: #ff3939;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: center;
}

.newsIcon02 {
  flex-shrink: 0;
  width: 60px;
  font-size: 0.9rem;
  text-align: center;
  color: #ffffff;
  background: #362fff;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: center;
}

/* --- 日付 --- */
.newsDate {
  flex-shrink: 0;
  width: 100px;
  font-size: 0.9rem;
  text-align: center;
  color: #666;
  align-self: center;
}

/* --- 本文 --- */
.newsContent {
  margin: 0;
  flex: 1;
  line-height: 1.6;
  word-break: break-word;
  align-self: center;
}

#contact {
    margin: 20px 0px;
}

#contact h2{
    margin: 0px;
    padding: 0px;
    text-align: center;
}


/* Research page */
.topicLinks {
    display: flex;
    gap: 20px;            /* ボックス間の余白 */
    list-style: none;     /* ・を消す */
    padding: 0;
    margin: 20px 0;
    align-items: stretch; /* 子要素の高さを揃える */

    & li {
        flex: 1; /* 幅を均等にする（可変） */
        height: 100px;
    }

    & li a {
        display: flex;
        height: 50px;
        padding: 10px;
        justify-content: center; /* 横方向の中央揃え */
        align-items: center;     /* 縦方向の中央揃え */
        background-color: #f0f0f0;
        border-radius: 10px;           /* 丸角 */
        text-decoration: none;         /* 下線消す */
        font-weight: bold;
        border: 2px solid var(--main-color);
        transition: 0.2s;
    }

    & li a:hover {
        background-color: #e0e0e0;     /* ホバー時の反応 */
    }
}

.researchContent {
    /*display: flex;*/
    padding-bottom: 50px;

    & h3 {
        scroll-margin-top: 100px; /*リンク先に飛んだ時の補正*/
        margin: 0px;
        padding: 0.5em;
        color: #000000; /*文字色*/
        background: #08a00020; /*背景色*/
        border-left: solid 5px var(--main-color); /*左線（実線 太さ 色）*/
    }

    & .researchContentText {
    /*width: 800px;*/
    /*padding-right: 20px;*/
    text-align: justify;
    }
}

/* Member page */
.memberList {
    margin: 40px 10px;
    display: flex;
    flex-wrap: wrap;
}

.memberProfile {
    margin: 15px 0px;
    flex: 1 1 300px;
    max-width: 320px;
}

.memberPhoto {
    display: block; /* ブロック要素にすることで中央寄せが効く */
    margin: 0 auto;
    width: 250px;
    height: 250px;
    border-radius: 50%; /* 円形にする */
    border: 2px solid #ffffff; /* 好みで枠線追加 */
}

.memberInfo {
    margin-left: 15px;
    .name {
        font-size: 20px;
        font-weight: bold;
        margin-top: 10px;
    }
    .position {
        font-size: 16px;
        color: #666666;
        margin-top: 5px;
    }
    .email {
        font-size: 16px;
        color: #0066cc;
        margin-top: 5px;
    }
}

/* Publication page */
.publication {
    line-height: 1.5;

    & .title {
        font-size: 1.25rem;
        font-weight: bold;
        margin: 30px 0px 0px 0px;
        padding: 0.5em; /*文字周りの余白*/
        background: var(--main-color-light); /*背景色*/
        border-left: solid 5px var(--main-color); /*左線（実線 太さ 色）*/
    }

    & .information {
        font-size: 1rem;
        margin: 5px 0px 0px 10px;
    }

    & .explanation {
        font-size: 1rem;
        margin: 10px 0px 0px 10px;
    }
}

/* Access */
/* カード全体 */
.contact-card {
  background: #fff;
  border-radius: 10px;
  margin: 40px;
  padding: 18px;
  border: #eee solid 1px;
}

/* 行（アイコン + 情報） */
.contact-row {
  display: flex;
  gap: 16px;
  align-items: flex-center; /* アイコンと上揃え */
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.contact-row:last-child {
  border-bottom: none;
}

/* アイコン部分 */
.icon {
  width: 44px;      /* 固定幅 */
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--main-color);   /* アイコン色（好みで変更） */
}

/* 情報部分 */
.info dl {
    margin: 0px;
}

/* dd のスタイル */
.info dd {
  margin: 0;
  font-size: 1rem;
}

/* リンクスタイル */
.info a {
  color: #0066cc;
  text-decoration: none;
}
.info a:hover {
  text-decoration: underline;
}

/* アクセシビリティ：視覚的に隠すがスクリーンリーダーには見える */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}



/* ===== スマホ対応 ===== */
@media screen and (max-width: 768px) {

  #pageBody {
    width: 90%;
  }

  #pageHead .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* ボタン表示 */
  .menuToggle {
    display: block;
  }

  /* メニュー非表示 */
  #menuWrap {
    display: none;
    position: absolute;
    top: 80px;
    right: 0;
    width: 100%;
    background: #f8f8f8ee;
    border-top: 1px solid #ccc;
  }

  /* 開いた状態 */
  #menuWrap.active {
    display: block;
  }

  .globalNavi {
    width: 100%;
    padding-bottom: 10px;
    display: flex;
    justify-content: center; /* ナビ全体を中央へ */
  }

  /* ナビ縦並び */
  .globalNavi ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .globalNavi ul li {
    width: 80%;
    float: none;
    border-bottom: 1px solid #eee;
  }

  /* headerTop中央 */
  .headerTop {
    justify-content: center;
    padding: 10px 0;
  }

  .newsListItem {
    flex-direction: column;
    gap: 5px;
    align-items: flex-start;
  }
  
  .newsMeta {
    display: flex; /* ラベルと日付を横並びにする */
    gap: 10px;
  }

  .newsContent {
    width: 100%;
  }
  .memberList {
    flex-direction: column;
  }

}