/*
 * Akiyama Lab Member Page Styles
 * - Tailwind CSS不使用
 * - モダンでクールなデザインを目指し，白，黒，濃いグレーを基調とする
 * - リンクは黒色 (#1a1a1a) を使用
 * - CSS Grid/Flexboxを使用してレスポンシブな複数列レイアウトを実現
 * - アコーディオン機能に対応
 */

/* --- 変数定義 --- */
:root {
    --primary-dark: #1a1a1a;
    --text-medium: #333333;
    --text-light: #666666;
    --accent-blue: #004080; /* 新しいアクセントカラー（ホバー用） */
    --border-color: #dddddd;
    --section-bg: #ffffff;
    --header-bg: #2b2b2b;
    --accent-line: #cccccc;
}

/* --- 全体設定 --- */
body {
    color: var(--primary-dark);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* --- ヘッダーエリアの新しい構造に合わせたスタイル --- */

/* L-container-header: ヘッダーエリア全体（タイトルと画像のラッパー） */
.l-container-header {
    margin-top: 6.6rem; 
    margin-bottom: 6rem;
}

/* L-container-inner: タイトルの最大幅と中央寄せ */
.l-container-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* C-title: タイトルのスタイリング */
.c-title.c-title--h1 {
    color: var(--primary-dark);
    margin: 0 0 40px 0; /* 画像との間にスペース */
}

/* L-container-header__image: ヒーロー画像コンテナ */
.l-container-header__image { 
    position: relative;
    width: 100%;
    height: 600px; /* デスクトップでの表示高さを固定 */
    overflow: hidden; 
    
    /* **CSSによる背景画像の指定** */
    background-image: url('http://akiyama617.sci.waseda.ac.jp/wp-content/uploads/2025/10/Member_img.jpg');
    background-size: cover; 
    background-position: center; 
}

@media screen and (max-width: 959px) {
    /* l-container-inner のモバイルパディングを調整 */
    .l-container-inner {
        padding: 0 15px; 
    }

    .l-container-header__image {
        height: 250px; /* モバイル時の画像高さを調整 */
    }
}


/* --- セクションタイトルと区切り線 --- */
.section {
    margin-bottom: 45px;
    background-color: var(--section-bg);
    padding: 35px 40px; /* パディングを増やし，ゆったりさせる */
    border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* 強めのボックスシャドウ */
}

/* OB&OGセクション（divに変更）は影やパディングを削除 */
.obog-section-div {
    margin-bottom: 45px;
}

.section h2 {
    text-align: left;
    margin: 0;
    color: var(--primary-dark);
}

.small-note {
    font-size: 14px;
    color: var(--text-light);
    text-align: left;
    margin-top: 5px;
    margin-bottom: 15px;
}

.section-divider {
    width: 80px;
    height: 3px;
    background-color: var(--primary-dark);
    margin: 10px 0 35px 0;
}

/* --- メンバーリスト (教授・ポスドク用) --- */
.member-list {
    text-align: left;
    line-height: 1.4;
    display: flex;
    justify-content: flex-start;
    gap: 30px;
}

/* 教授およびポスドクセクションのレイアウト */
.associate-professor,
.postdoc-list {
    display: flex;
    justify-content: flex-start;
    gap: 50px;
    flex-wrap: wrap;
}

.associate-professor .member-card,
.postdoc-list .member-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 0;
    color: inherit;
    border-radius: 10px;
    padding-right: 30px;
    cursor: default; 
}

.associate-professor .member-image,
.postdoc-list .member-image {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 20px;
    margin-bottom: 0;
    border: 3px solid var(--primary-dark);
    flex-shrink: 0;
}

.associate-professor .member-info-side,
.postdoc-list .member-info-side { 
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.associate-professor .member-info-side .role,
.postdoc-list .member-info-side .role {
    font-size: 16px;
    color: var(--text-medium);
    margin: 0 0 3px 0;
    line-height: 1.2;
}

.associate-professor .member-info-side .name,
.postdoc-list .member-info-side .name {
    font-size: 20px;
    color: var(--primary-dark);
    margin: 0;
    line-height: 1.2;
}

/* 秘書リスト */
.secretary-list a {
    font-size: 16px;
    color: var(--primary-dark);
    text-decoration: none;
    padding: 10px 0;
    display: block;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 2px solid transparent;
}

.secretary-list a:hover {
    border-bottom: 2px solid var(--accent-blue);
    color: var(--accent-blue);
}


/* --- メンバーグループ (大学院生・学部生) のレイアウト --- */
.member-group h3 {
    font-size: 20px;
    color: var(--primary-dark);
    padding: 8px 0;
    margin-top: 30px;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--border-color);
    text-align: left;
}

.member-list.graduate-members,
.member-list.undergraduate-members {
    display: grid;
    gap: 20px 30px;
    text-align: left;
    margin-bottom: 20px;
    padding-left: 0;
    list-style: none; /* リストマーカーを削除 */
}
/* メンバーアイテムのスタイル (list-item) */
.list-item {
    list-style: none;
}

/* 3列表示 (大学院生および学部生も対象に) - 最大3列に制限 */
.graduate-members.three-cols,
.undergraduate-members.three-cols { 
    /* 280pxの最小幅を確保しながら，自動調整（最大3列）*/
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* 2列表示 (OB/OGの一部) */
.obog-members.two-cols {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* メンバーアイテムのスタイル */
.list-item a {
    display: block;
    font-size: 16px;
    color: var(--primary-dark);
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.3s;
    border-bottom: 1px dotted transparent;
}

.list-item a:hover {
    border-bottom: 1px dotted var(--accent-blue);
    color: var(--accent-blue);
}

/* --- OB & OG (アコーディオン) セクション --- */

.accordion-container {
    width: 100%;
}

.accordion-item {
    border: none;
    border-radius: 10px;
    margin-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.accordion-header {
    background-color: var(--primary-dark);
    color: #ffffff;
    padding: 18px 25px;
    font-size: 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s, border-radius 0.3s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-header:hover {
    background-color: #000000;
}

.accordion-header.active {
    background-color: var(--primary-dark);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.accordion-header.active span {
    color: #ffffff;
}

.accordion-header .arrow {
    font-size: 14px;
    transition: transform 0.3s;
    margin-left: 10px;
    color: #ffffff;
}

.accordion-header.active .arrow {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0; /* JSで開閉制御 */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
}

.accordion-content.active {
    max-height: 5000px; /* JS制御: 十分な高さ */
    border: 1px solid var(--primary-dark);
    border-top: none;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #fcfcfc;
}

/* アコーディオンの中身のパディングを内側で制御 */
.accordion-inner-content {
    padding: 20px 25px; 
}


/* --- ネストアコーディオン --- */
.nested-accordion-item {
    border-top: 1px solid var(--border-color);
    margin-top: 0;
}
.nested-accordion-item:first-child {
    border-top: none;
}

.nested-accordion-header {
    padding: 12px 0;
    font-size: 16px;
    color: var(--text-medium);
    background-color: transparent;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.nested-accordion-header:hover {
    color: var(--primary-dark);
}

.nested-accordion-header.active {
    color: var(--accent-blue);
}

.nested-accordion-header .nested-arrow {
    color: var(--accent-blue);
}


.nested-accordion-content {
    max-height: 0; /* JSで開閉制御 */
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    padding: 0;
    border-left: 2px solid transparent;
}

.nested-accordion-content.active {
    max-height: 3000px; /* JS制御: 十分な高さ */
    padding: 10px 0 10px 10px;
    background-color: #ffffff;
    border-left: 2px solid var(--accent-blue);
}

/* OB/OG メンバーリスト */
.obog-members {
    display: grid;
    gap: 10px 15px;
    text-align: left;
    margin-bottom: 20px;
    font-size: 15px;
    line-height: 1.4;
}

.obog-members span {
    display: block;
    padding: 3px 0;
    color: var(--text-medium);
}

.obog-members.three-cols {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.graduation-year {
    font-size: 16px;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--primary-dark);
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 5px;
    text-align: left;
}

/* --- フッター --- */
.footer-note {
    font-style: italic;
    text-align: right;
    font-size: 12px;
    color: var(--text-light);
    padding: 10px 0;
    margin-top: 20px;
}

/* --- モーダル（ポップアップ）のスタイル --- */

.modal {
    display: none; /* 初期状態は非表示 */
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.9); /* 半透明の黒背景 */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal.visible {
    display: flex;
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    animation-name: zoom;
    animation-duration: 0.6s;
    object-fit: contain;
}

.modal-caption {
    margin: 10px auto;
    display: block;
    width: 80%;
    max-width: 900px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px; 
}

/* 閉じるボタン */
.modal-close {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    transition: 0.3s;
    cursor: pointer;
    user-select: none;
}

.modal-close:hover,
.modal-close:focus {
    color: #bbb;
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}


/* --- レスポンシブ対応 --- */

/* 1200px以上のデスクトップ幅で，最大3列に制限する */
@media (min-width: 1200px) {
    .graduate-members.three-cols,
    .undergraduate-members.three-cols { 
        grid-template-columns: 1fr 1fr 1fr; /* 常に3列に固定 */
    }
    .obog-members.two-cols {
        grid-template-columns: 1fr 1fr; /* 常に2列に固定 */
    }
    .obog-members.three-cols {
        grid-template-columns: 1fr 1fr 1fr; /* 常に3列に固定 */
    }
}


@media (max-width: 1199px) {
    /* 769pxから1199pxのタブレット/小型デスクトップ */
    .graduate-members.three-cols,
    .undergraduate-members.three-cols {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    }
    .obog-members.two-cols {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    }
    .obog-members.three-cols {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    /* 教授セクションの調整 */
    .associate-professor {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    /* スマートフォン/タブレット */
    .container {
        padding: 15px;
    }

    .l-container-header__image { 
        height: 200px;
    }
    
    .site-title-container {
        padding: 20px 15px 0;
    }
    
    .section {
        padding: 25px 15px;
        margin-bottom: 30px;
    }

    /* メンバーリストを強制的に1列にする */
    .graduate-members.three-cols,
    .undergraduate-members.three-cols,
    .obog-members.two-cols,
    .obog-members.three-cols {
        grid-template-columns: 1fr;
    }

    .member-list.associate-professor,
    .postdoc-list {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }
    
    .associate-professor .member-card,
    .postdoc-list .member-card {
        flex-direction: row; 
        align-items: center; 
        width: 100%;
        padding: 0;
    }
    
    .associate-professor .member-info-side,
    .postdoc-list .member-info-side {
        text-align: left;
    }

    .associate-professor .member-image,
    .postdoc-list .member-image {
        width: 100px;
        height: 100px;
        margin-right: 15px;
        margin-bottom: 0;
    }
    
    .member-list.secretary-list a {
        display: block;
        margin: 5px 0;
        text-align: left;
    }

    .accordion-header {
        padding: 15px 20px;
        font-size: 16px;
    }

    .accordion-inner-content {
        padding: 15px 20px;
    }
    
    .nested-accordion-content.active {
        padding: 10px 0 10px 10px;
    }
    
    .modal-content {
        width: 90%;
    }
}