/* ### 全体のリセット ### */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ===== 共通スタイル ===== */

/* ### bodyの共通スタイル ### */
body {
    font-family: Arial, sans-serif;
    line-height: 1.8;
    margin: 0;
    padding: 0;
    background-color: white;

    min-width: 800px; /* 👈 これを追加！ */
}


/* ### リンクの共通スタイル ### */
.details_link {
    display: block;          /* リンクを独立したブロック要素に */
    color: black;          /* リンクの色 */
    text-align: right;       /* リンクの文字を右揃え */
    margin-top: 10px;        /* 上部に余白を追加 */
    text-decoration: none;   /* 下線を削除 */
}
.details_link:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}


/* ### ヘッダーの設定 ### */
header {
    background-color: white; /* 背景色 */
    color: #2D287F;            /* ヘッダー内の文字色 */
    text-align: center;        /* 中央揃え */
    padding: 0px 0px;          /* 上下左右の内側の余白 */
}


/* ### 研究室名 ### */
.laboname_section {
    background-color: #2D287F; /* 背景色 */
    text-align: center;          /* 中央揃え */
    padding: 20px 50px;             /* 上下左右の内側の余白 */

    border: 1px solid black; /* 枠線 */
    border-radius: 0px;       /* 角の丸み */
}
.affiliate_name {
    font-size: 18px; /* 文字サイズ*/
    color: white;  /* 文字色 */
}
.lab_name {
    font-size: 34px;    /* 文字サイズ*/
    font-weight: bold;  /* 太字 */
    color: white;     /* 文字色 */
}


/* ### ナビゲーション ### */
.navigation_section {
    background-color: rgb(105, 105, 105); /* 背景色(暗いグレー) */ 
    padding: 10px 0;                        /* 上下左右の内側の余白 */
}
.navigation_menu {
    display: flex; /* 横並びにする */
    list-style: none; /* リストスタイルを無効化 */
    justify-content: center; /* 中央揃え */
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
}
.navigation_menu li {
    padding: 0 15px; /* 左右の余白を設定 */
    position: relative; /* ボーダー位置調整のため */
}
.navigation_menu li:not(:last-child)::after {
    content: ""; /* 空のコンテンツを追加 */
    position: absolute;
    top: 0;
    right: 0;
    height: 100%; /* 親要素の高さに合わせる */
    width: 1px; /* 線の太さ */
    background-color: white; /* 線の色 */
}
.navigation_menu li a {
    font-size: 18px;       /* 文字サイズ */
    color: white;        /* 文字色 */
    text-decoration: none; /* 下線を削除 */
}
.navigation_menu li a:hover {
    text-decoration: underline; /* ホバー時に下線を追加 */
}


/* ### パンくずリストのスタイル ### */
.breadcrumb {
    font-size: 14px; /* フォントサイズ */
    margin: 0 50px; 
    padding: 0; /* パンくずリストの上下のパディング */
    background-color: white; /* 背景色 */
    border-radius: 5px; /* 角丸 */
    text-align: left; /* 左揃え */
}
.breadcrumb a {
    color: #2D287F; /* リンクの色 */
    text-decoration: none; /* 下線を消す */
    margin-right: 8px; /* リンクと次の項目との間隔 */
}
.breadcrumb a:hover {
    text-decoration: underline; /* ホバー時に下線 */
}


/* ### メインの初期設定 ### */
main {
    background-color: white; /* 背景色 */
    margin: 10px 200px ;        /* 上下左右の外側の余白 */
    padding: 10px 10px;        /* 上下左右の内側の余白 */

    /*border: 2px solid #2D287F; /* 枠線を追加 */
    border-radius: 10px;
}


/* ### セクションコンテンツの初期設定 ### */
section {
    margin: 10px 10px;           /* 各セクションの上下の余白 */
    padding: 10px 10px;          /* セクション内部の余白 */
    background-color: white;   /* セクションの背景色 */
}


/* ### セクションタイトルの書式を初期化 ### */
.section_title {
    text-align: center;                 /* 中央揃え */
    font-size: 28px;                    /* 文字サイズ */
    color: black;                     /* 文字色 */
    border-bottom: 4px solid #2D287F; /* 下線を追加 */
}


/* ### サブセクションタイトルの書式を初期化 ### */
.sub_section_title {
    font-size: 28px;
    color: white;              /* 文字色 */
    background-color: #2D287F; /* 背景色 */
    padding: 10px;               /* 上下の内側の余白を設定 */
    margin: 10px;                /* 上下の外側の余白 */
    border-radius: 10px;         /* 角を丸くする */
    text-align: center;          /* 文字を中央に配置 */
}

/* ### フッターセクション ### */
footer {
    background-color: #2D287F;
    color: white;
    padding: 20px 0px;
    text-align: center;
}
footer h2 {
    font-size: 24px;
    margin-bottom: 10px;
}
footer p {
    font-size: 16px;
    margin: 5px 0;
}
/* 文末のアイコンに適用するスタイル */
.footer-icon {
    width: 30px; /* アイコンを大きくする */
    height: auto; /* 高さを自動調整 */
    margin-left: 10px; /* テキストとアイコン間の余白 */
    vertical-align: middle; /* テキストとアイコンを縦方向で揃える */
    cursor: pointer; /* ポインタを変更（クリック感を出す） */
}


/* ### リンクリスト ###*/
.url_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;              /* 横並びにする */
    justify-content: center;    /* 中央揃え（必要に応じて調整） */
    align-items: center;
}
.url {
    margin-bottom: 20px; /* 各リンクの間隔 */
    text-align: center;  /* 中央揃えしたい場合 */
}
.url img {
    width: 300px; /* 画像の横幅 */
    height: auto; /* 縦横比を保持 */
    max-height: 100px; /* 最大高さを指定 */
    object-fit: contain; /* 画像を枠内に収める */
}


/* ===== HOME =====*/
/* ### 写真 ### */
.group_photo_section {
  text-align: center;
  margin: 0px 0;
}
.group_photo_box {
  max-width: 900px;
  margin: 0 auto;
}

.group_photo {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 8px;
}

/* ### NEWS ### */
.index_news_list {
    display: flex;
    flex-direction: column;
    gap: 16px;              /* 要素間のスペース */
    padding: 16px;
}
.index_news_line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
}
.index_news_date {
    color: #000;
    min-width: 100px;
}
.index_news_title {
    font-weight: bold;
    color: #000;
    flex-grow: 1;
}

/* ===== ご挨拶 ===== */
.greeting_box {
    margin: 10px auto;              
    padding: 10px;     
    
    /*border: 1px solid #e6f2ff;       /* 枠線 */
    border-radius: 10px;           /* 角の丸み */
    /*background-color: #e6f2ff;       /* 背景色 */
}
.greeting_item { 
    background-color: transparent; /* 親要素の背景色を引き継ぐ */
    /*background-color: white;   /* 背景色 */
    text-align: justify;         /* 文字を両端揃え */
    line-height: 1.8;            /* 行間 */
}
.greeting_item p {
    max-width: 90%;
    margin: 0 auto;
    line-height: 1.8;
    text-align: justify;
    font-size: 16px;
    word-break: break-word;
}

@media screen and (max-width: 768px) {
  .greeting_item p {
    font-size: 15px;
    padding: 10px;
  }

  .section_title {
    font-size: 20px;
    text-align: center;
  }

  .greeting_box {
    padding: 10px;
  }
}


/* ===== 研究室メンバー ===== */
.teacher_box {
    display: flex;           /* 子要素(item)をフレックスボックスのレイアウトに設定 */
    flex-wrap: wrap;
    justify-content: center; /* 中央揃え */
    gap: 20px;               /* カード間の隙間 */
    margin: 10px 20px;            /* 上下の外側の余白 */
}
.teacher_item {
    display: flex;               /* 子要素を横並びに配置 */
    align-items: center;         /* 中央揃え */      
    background-color: white;
    border: 2px solid #2D287F; /* 枠線を追加 */
    border-radius: 10px;
    gap: 20px;                   /* 画像と説明の間を広げる */
}
.teacher_image {
    width: 30%;         /* 画像の幅を調整 */
    height: auto;        /* アスペクト比を保持 */
    border-radius: 10px;  /* 角を丸くする */
    margin: 10px;            /* 上下の外側の余白 */
}
.teacher_details {
    display: flex;
    flex-direction: column; /* 縦並び配置 */
    justify-content: start; /* 左揃え */
    gap: 5px; /* 各行の間隔 */
}
.secretary_item {
    flex: 0 0 400px; 
    background-color: white;
    padding: 10px;
    border: 2px solid #2D287F; /* 枠線を追加 */
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    line-height: 2;       /* 行間を調整して読みやすく */
}
.member_box {
    display: grid;             /* グリッドレイアウトに変更 */
    grid-template-columns: repeat(4, 1fr);  /* 4列の設定（必要に応じて列数を調整） */
    gap: 20px;               /* カード間の隙間 */
    margin: 10px 20px;            /* 上下の外側の余白 */
}
.menber_item {      
    background-color: white;
    padding: 10px;
    border: 2px solid #2D287F; /* 枠線を追加 */
    border-radius: 10px;
    text-align: center;
    box-sizing: border-box;
    line-height: 2;       /* 行間を調整して読みやすく */
}
.name {
    color: black;
    font-weight: bold;
    font-size: 20px;
}
.ename {
    font-size: 16px;
    color: black;
}
.email {
    font-size: 16px;
    color: black;
}
.grade {
    font-size: 16px;
    color: black;
}


/* ===== 研究内容 ===== */
.study_box {
    display: flex;           /* 子要素(item)をフレックスボックスのレイアウトに設定 */
    gap: 20px;               /* カード間の隙間 */
    margin: 10px;            /* 上下の外側の余白 */
}


/* ===== 研究業績 ===== */
.performance_list {
    list-style-type: disc;        /* 箇条書きの点（ディスク型マーカー）を設定 */                
    margin: 10px;            /* 上下の外側の余白 */ 
    padding: 10px;
    gap: 20px;               /* カード間の隙間 */              
}
.performance_item {
    margin: 10px;          /* 各アイテムの間隔を調整 */
    border-radius: 5px;           /* 角を丸める */
    background-color: white;    /* 背景色を設定 */  
    line-height: 1.6;       /* 行間を調整して読みやすく */      
}
.performance_item p {
    color: black;
    font-size: 16px;
    margin: 10px;
}
.title {
    color: black;
    /* font-weight: bold;*/
    font-size: 16px;
}
.research_funds a {
    font-size: 16px;
    color: #2D287F;          /* リンク色 */
    text-decoration: none;     /* 下線を消す */
}

/* ===== お知らせ ===== */
.news_box {
    margin: 20px 20px; 
    padding: 10px;
}
.news_title {
    font-size: 20px;
    color: black;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 2px solid black; /* 下線を追加 */
    width: 100%;                   /* news_box の幅に合わせる */
    display: block;                /* 幅指定を有効にする */
    box-sizing: border-box;        /* padding を含めて幅調整 */
}
.news_content {
    font-size: 16px;
    line-height: 1.6;
    color: black;
    margin-bottom: 20px;
    width: 100%;                   /* news_box の幅に合わせる */
}
.news_image img {
    margin: 20px 20px; 
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    width: 100%; 
}


/* ===== スマホ表示の最適化 ===== */
@media screen and (max-width: 768px) {
  main {
    margin: 10px;          /* 左右の余白を自動で調整 */
    padding: 10px;
  }

  .navigation_menu {
    flex-direction: column; /* ナビゲーションを縦並びに */
    align-items: center;
  }

  .member_box {
    grid-template-columns: repeat(2, 1fr); /* 4列→2列に変更 */
  }

  .teacher_item {
    flex-direction: column; /* 教員カードを縦並びに */
    text-align: center;
  }

  .teacher_image {
    width: 60%;
    margin: 0 auto;
  }

  .url_list {
    flex-direction: column; /* URLリンクも縦並びに */
  }

  .group_photo_box {
    max-width: 100%;
  }
}