/* ================================================================
   stylesheet.css
   トップページ（index.html）用のスタイルシート

   【構成】
   1. 全体の基本設定（リセットCSS・フォント）
   2. ヘッダー・ナビゲーション
   3. ハンバーガーメニュー（スマホ用）
   4. アニメーション
   5. スライダー画像
   6. Aboutセクション（研究室紹介）
   7. 新着情報セクション
   8. サイドバー（ギャラリー・外部リンク）
   9. フッター
   10. レスポンシブ対応（画面サイズ別の調整）
================================================================ */


/* ================================================================
   1. 全体の基本設定
================================================================ */

/* ページ全体のフォントと背景色を設定 */
body {
    font-family: 'Helvetica Neue', Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    background-color: white;
}

/* 全要素のマージン・パディングをリセットし、box-sizingを統一 */
/* box-sizing: border-box → paddingやborderを幅に含める設定 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ================================================================
   2. ヘッダー・ナビゲーション
================================================================ */

/* ヘッダー：画面上部に固定表示される緑色のバー */
header {
    position: fixed;       /* スクロールしても画面上部に固定 */
    top: 0;
    left: 0;
    width: 100%;           /* 画面幅いっぱいに広がる */
    height: 13vh;          /* 画面高さの13%の高さ */
    background: linear-gradient(135deg, rgba(106, 144, 59, 0.9), rgba(78, 116, 35, 0.9)); /* 緑色のグラデーション */
    z-index: 1000;         /* 他の要素より手前に表示 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* 下に影をつける */
}

/* ナビゲーションバー：ロゴとメニューを横並びにする */
nav {
    display: flex;                  /* Flexboxで横並びレイアウト */
    justify-content: space-around;  /* 要素を均等に配置 */
    align-items: center;            /* 縦方向の中央揃え */
    height: 13vh;
    background-color: rgb(106, 144, 59, 0.65); /* 半透明の緑 */
}

/* ナビゲーションリンクの並び */
.nav-links {
    display: flex;
    justify-content: space-around;
    width: 56%;                     /* ナビ部分の横幅 */
    transition: all 0.3s ease-in-out; /* アニメーション用のトランジション */
}

/* リストの黒丸を非表示にする */
.nav-links li {
    list-style: none;
}

/* ナビゲーションリンクのスタイル */
.nav-links a {
    text-decoration: none;  /* 下線を消す */
    color: white;           /* 文字色を白に */
    font-size: 15px;
    font-weight: bold;
    border-radius: 4px;
    transition: all 0.3s ease; /* ホバー時のアニメーション */
}

/* ナビリンクにマウスを乗せた時の効果 */
.nav-links a:hover {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明の白背景 */
    transform: translateY(-1px);                  /* 少し上に浮く */
}


/* ================================================================
   3. ハンバーガーメニュー（スマホ用の三本線メニュー）
================================================================ */

/* 通常時は非表示（スマホサイズで表示される） */
.burger {
    display: none;
    cursor: pointer;   /* マウスカーソルを手の形に */
}

/* 三本線の各ライン */
.burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px;
    transition: all 0.3s ease-in-out; /* ×印に変化するアニメーション */
}

/* メニューが開いた状態：ナビを画面内に移動させる */
.nav-active {
    transform: translateX(0%) !important;
}

/* ×印のアニメーション：1本目の線を回転 */
.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

/* ×印のアニメーション：2本目の線を非表示 */
.toggle .line2 {
    opacity: 0;
}

/* ×印のアニメーション：3本目の線を回転 */
.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}


/* ================================================================
   4. アニメーション
================================================================ */

/* フェードインアニメーション：下から上にふわっと表示 */
.fade-in {
    animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;                    /* 透明から */
        transform: translateY(20px);   /* 20px下の位置から */
    }
    to {
        opacity: 1;                    /* 不透明に */
        transform: translateY(0);      /* 元の位置に */
    }
}

/* スライドインアニメーション：右から左にスライド */
@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ================================================================
   5. スライダー画像の設定
   各zoom-outクラスで画像の上部マージンを調整
================================================================ */

/* PC画面（〜2500px）でのスライド画像の位置調整 */
@media screen and (max-width: 2500px) {
    .zoom-out1 img { object-fit: contain; margin-top: 12vh; }
    .zoom-out2 img { object-fit: contain; margin-top: 12vh; }
    .zoom-out3 img { object-fit: contain; margin-top: 12vh; }
    .zoom-out6 img { margin-top: 0vh; }
    .zoom-out4 img { margin-top: 5vh; }
    .zoom-out7 img { margin-top: 12.5vh; }
    .zoom-out8 img { object-fit: contain; margin-top: 12vh; }
}

/* タブレット（〜1200px）でのスライド画像の位置調整 */
@media screen and (max-width: 1200px) {
    body { overflow-x: hidden; }

    /* スマホ用ナビゲーションメニュー：画面右からスライドイン */
    .nav-links {
        right: 0;
        height: 87vh;
        flex-direction: column;   /* 縦並びに変更 */
        position: absolute;
        align-items: center;
        top: 13vh;
        background-color: rgb(106, 144, 59, 0.8);
        width: 40%;
        transform: translateX(100%); /* 画面外に隠す */
        z-index: 10;
    }

    .nav-links li { opacity: 0; z-index: 3; }

    /* ハンバーガーメニューを表示する */
    .burger { display: block; }

    .zoom-out1 img { object-fit: contain; margin-top: 8vh; }
    .zoom-out2 img { object-fit: contain; margin-top: 8vh; }
    .zoom-out3 img { object-fit: contain; margin-top: 8vh; }
    .zoom-out6 img { margin-top: 10vh; }
    .zoom-out7 img { margin-top: 4vh; }
    .zoom-out8 img { object-fit: contain; margin-top: 8vh; }
}

/* ナビリンクのフェードインアニメーション（メニュー開閉時） */
@keyframes navLinksFade {
    0%   { opacity: 0; transform: translateX(50%); }
    100% { opacity: 1; transform: translateX(0%); }
}

/* 研究室名（ロゴ部分）のスタイル */
.labo-name { color: white; }
.labo-name h1 { font-size: 15px; }
.labo-name h2 { font-size: 35px; }

/* 小画面で改行を入れるためのspan（通常は非表示） */
.break-on-small { display: none; }

/* スマホ（〜700px）でのレイアウト調整 */
@media screen and (max-width: 700px) {
    body { padding-top: 10vh; }
    header { height: 10vh; }
    nav { height: 10vh; padding: 0 15px; }
    .labo-name h1 { font-size: 12px; }
    .labo-name h2 { font-size: 20px; }
    .nav-links { top: 10vh; }
    .about-main { font-size: 1.8em; }
    .about-sub { font-size: 1em; }
    .wrapper { padding: 30px 15px; }

    .zoom-out1 img { object-fit: contain; }
    .zoom-out2 img { object-fit: contain; }
    .zoom-out3 img { object-fit: contain; }
    .zoom-out6 img { object-fit: cover; margin-top: 0vh; }
    .zoom-out7 img { object-fit: cover; margin-top: 0vh; }
    .zoom-out4 img { object-fit: cover; margin-top: 0vh; }
}

@media screen and (max-width: 600px) {
    .labo-br { display: inline; }
}

@media screen and (max-width: 500px) {
    .labo-name h1 { font-size: 10px; }
    .labo-name h2 { font-size: 18px; }
    .about-main { font-size: 1.5em; }
    .footerWrapper h4 { font-size: 14px; }
}

/* スライダー画像の共通設定 */
.your-class img {
    width: 100%;
    height: auto;
    max-height: 600px;     /* 高さの上限 */
    object-fit: cover;     /* はみ出す部分をトリミング */
    align-items: center;
}


/* ================================================================
   6. Aboutセクション（研究室紹介）
================================================================ */

/* セクション共通のラッパー：中央寄せ＋最大幅制限 */
.wrapper {
    max-width: 960px;
    margin: 75px auto 50px auto;
    font-size: 0.9em;
    padding: 0 4%;
}

/* セクションタイトルのスタイル */
.sec-title {
    font-size: 1.8em;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* タイトルのメイン文字（"About"など） */
.sec-title .about-main {
    font-size: 1.5em;
}

/* タイトルのサブ文字（"研究室紹介"など） */
.sec-title .about-sub {
    font-size: 1.1em;
    margin-left: 12px;
    color: #333;
    font-weight: normal;
}

/* Aboutセクション内のリスト */
#about ul {
    margin-bottom: 30px;
    list-style: none;
}

/* Aboutセクション内の段落 */
#about p {
    margin-bottom: 20px;
}

/* 赤文字（[New!]などに使用） */
.red { color: red; }

/* 研究画像のコンテナ：中央配置＋最大幅制限 */
figure.research-image-container {
    margin: 0 auto;
    max-width: 800px;
    margin-bottom: 30px;
}

/* レスポンシブ画像：画面幅に応じてサイズが変わる */
img.responsive-image {
    max-width: 100%;     /* 親要素の幅を超えない */
    height: auto;        /* 縦横比を維持 */
    display: block;      /* 画像下の余白を防ぐ */
    margin: 0 auto;      /* 中央揃え */
}


/* ================================================================
   7. 新着情報セクション
================================================================ */

/* 新着情報＋サイドバーの親コンテナ（横並びレイアウト） */
div.under-contents-wrapper {
    display: flex;
    flex-wrap: wrap;    /* 小画面で折り返し */
    gap: 30px;          /* 要素間の隙間 */
}

/* 新着情報エリア（左側、幅2の比率） */
div#update {
    flex: 2;
    min-width: 280px;
}

/* 新着情報のスクロール可能なリスト */
ul.update-scroll {
    list-style-type: none;
    width: 100%;
    max-height: 400px;       /* 最大高さを制限 */
    overflow-y: auto;        /* 縦スクロールを有効に */
    border: 1px solid #bbb;  /* 枠線 */
    padding: 15px;
    border-radius: 4px;      /* 角丸 */
}

/* 各ニュース項目の間隔 */
ul.update-scroll li {
    margin-top: 0.7em;
    line-height: 1.6;
}
ul.update-scroll li:first-child {
    margin-top: 0;
}

/* ニュース内のリンクスタイル */
ul.update-scroll a {
    text-decoration: none;
    color: #595858;
}
ul.update-scroll a:hover {
    color: #e73a51;
    text-decoration: underline;
}


/* ================================================================
   8. サイドバー（ギャラリー・外部リンク）
================================================================ */

/* サイドバーエリア（右側、幅1の比率） */
div.sidebar-contents {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* ギャラリーのアイテム（画像＋テキスト横並び） */
div.next-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

/* ギャラリーのサムネイル画像 */
div.next-item img {
    width: 170px;
    height: 100px;
    margin-right: 10px;
    flex-shrink: 0;    /* 画像が縮まないように */
}

/* ギャラリーのテキスト部分 */
div.next-details { display: flex; flex-direction: column; }
div.next-theme { font-weight: 600; margin-bottom: 5px; line-height: 1.4; }
div.next-date { font-size: 0.9em; color: #777; line-height: 1.4; }

/* 「もっと見る」リンク */
div#next-end h4 { margin-top: 15px; line-height: 1.5; text-align: right; }
div#next-end a { font-size: 1em; color: #595858; text-decoration: none; font-weight: 600; }
div#next-end a:link, div#next-end a:visited { color: #686349; }
div#next-end a:hover { color: #e73a51; text-decoration: underline; }

/* 外部リンクのタイトル */
div#other-link-title h3 {
    font-weight: 600;
    border-left: 8px solid #4caf50;  /* 左側に緑色の縦線 */
    margin-bottom: 15px;
    line-height: 1.5;
    padding-left: 10px;
    font-size: 1.3em;
}

/* 外部リンクの画像を横並びに */
div.link-image-container {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

/* 外部リンク画像のスタイル */
div.link-image a { display: block; }
div.link-image img {
    max-width: 200px;
    max-height: 50px;
    border-radius: 4px;
    transition: opacity 0.2s ease-in-out;
}
div.link-image img:hover { opacity: 0.6; }


/* ================================================================
   9. フッター
================================================================ */

footer {
    width: 100%;
    min-height: 80px;
    background-color: #2f5167;       /* 紺色の背景 */
    padding: 30px 15px;
    color: white;
    margin-top: 40px;
}

div.footerWrapper {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;  /* 左右に分かれて配置 */
    align-items: center;
    gap: 10px;
}

div.footerWrapper h4 { color: white; margin: 0; font-size: 1.1em; line-height: 1.4; }
div.footerWrapper p { color: white; margin: 0; font-size: 0.9em; text-align: right; line-height: 1.4; }

/* under部分の基本設定 */
div#under {
    width: 100%;
    max-width: 960px;
    margin: 20px auto;
    padding: 0 15px;
}

/* セクション見出しのスタイル（「新着情報」「ギャラリー」など） */
div.under-font h3 {
    font-weight: 600;
    border-left: 8px solid #4caf50; /* 左側に緑色の縦線 */
    margin-bottom: 15px;
    line-height: 1.5;
    padding-left: 10px;
    font-size: 1.5em;
}


/* ================================================================
   10. レスポンシブ対応（画面サイズ別の調整）
================================================================ */

/* タブレット（〜768px） */
@media (max-width: 768px) {
    div#under { margin: 15px auto; padding: 0 10px; }
    div.under-font h3 { font-size: 1.4em; margin-bottom: 10px; }

    /* 新着情報とサイドバーを縦並びにする */
    div.under-contents-wrapper { flex-direction: column; gap: 25px; }
    div#update, div.sidebar-contents { flex-basis: auto; width: 100%; }

    ul.update-scroll { max-height: 300px; }
    div#other-link-title h3 { font-size: 1.2em; }

    /* フッターを縦並び中央揃えに */
    div.footerWrapper { flex-direction: column; text-align: center; gap: 15px; }
    div.footerWrapper h4, div.footerWrapper p { text-align: center; }
}

/* スマホ（〜480px） */
@media (max-width: 480px) {
    div.under-font h3 { font-size: 1.3em; border-left-width: 6px; padding-left: 8px; }
    ul.update-scroll { padding: 10px; max-height: 250px; }
    ul.update-scroll li { line-height: 1.5; }

    div.next-item img { width: 20px; height: 20px; margin-right: 8px; }
    div.next-theme { font-size: 1em; }
    div.next-date { font-size: 0.85em; }

    div#other-link-title h3 { font-size: 1.1em; }
    div.link-image-container { justify-content: center; }
    div.link-image img { max-width: 100px; }

    footer { padding: 20px 10px; }
    div.footerWrapper h4 { font-size: 1em; }
    div.footerWrapper p { font-size: 0.85em; }
}