/*
 * style-modern.css — NOMURA Lab サイト 現代化パッチ
 * ────────────────────────────────────────────────────────────
 * index.html (および全 HTML ページ) の <head> 内、
 * 既存の CSS リンクの最後に追加してください:
 *
 *   <link rel="stylesheet" type="text/css" href="css/style-modern.css">
 *
 * このファイルは元のファイルを上書きせず、上書き (cascade) 方式で動作します。
 * init.js の lockViewport: true 削除と併せて使用してください。
 * ────────────────────────────────────────────────────────────
 */

/* ==============================================================
   0. CSS カスタムプロパティ（デザイントークン）
   ============================================================== */
:root {
    --clr-green-dark:   #006400;
    --clr-green-nav:    rgba(0, 120, 0, 0.93);
    --clr-green-mid:    #008c00;
    --clr-green-sec:    rgba(0, 140, 0, 0.96);
    --clr-green-link:   #82b440;
    --clr-bg-body:      #f5f5f5;
    --clr-bg-white:     #ffffff;
    --clr-text:         #555555;
    --clr-dark:         #222222;
    --clr-border:       #dddddd;
    --radius-sm:        3px;
    --radius-md:        6px;
    --shadow-card:      0 1px 4px rgba(0, 0, 0, 0.08);
    --transition:       0.22s ease;
    --max-reading:      820px;
}

/* ==============================================================
   1. グローバルベースライン
   ============================================================== */

/* ブラウザの横スクロールを抑制 */
html, body {
    overflow-x: hidden;
}

/* 画像・動画を親要素内に収める */
img,
video,
object,
embed,
iframe {
    max-width: 100%;
    height: auto;
}

/* ボックスモデルを統一（既存スタイルを壊さない safe な指定） */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 動きを減らしたい場合はアニメーションを切る */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==============================================================
   2. タイポグラフィ改善
   ============================================================== */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--clr-text);
}

/* 本文の行間・可読性 */
.wrapper p,
.wrapper li {
    line-height: 1.85;
    letter-spacing: 0.01em;
}

/* 見出しの行間 */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
    letter-spacing: 0.03em;
}

/* ==============================================================
   3. ヘッダー — 高さを固定値から可変に
   ============================================================== */

#header {
    height: auto !important;
    min-height: 3.5em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;          /* ロゴ＋ナビが折り返せるように */
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    transition: padding var(--transition);
}

/* ロゴ（非ホームページ時に表示） */
#logo {
    flex-shrink: 0;
    margin-right: 1em;
}

/* ナビをヘッダー内で伸縮 */
#nav {
    flex: 1 1 auto;
}

/* ==============================================================
   4. ナビゲーション — Flexbox + 折り返し対応
   ============================================================== */

/* ホームページのナビ（センター揃え） */
.homepage #nav > ul,
#nav > ul {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 0;
}

/* ナビアイテム */
#nav > ul > li {
    display: flex !important;    /* inline-block を上書き */
    align-items: center;
    margin: 0.15em 0.25em;
    padding: 0;
}

/* ナビリンク — 字間・サイズを削減してコンパクトに */
#nav > ul > li > a,
#nav > ul > li > span {
    font-size: 0.84em !important;
    letter-spacing: 1px !important;
    line-height: 2.8em;
    padding: 0 0.6em;
    white-space: nowrap;
    transition: color var(--transition);
}

/* ドロップダウン矢印 */
#nav > ul > li > a.opener::after {
    margin-left: 0.3em;
}

/* ==============================================================
   5. バナーセクション（トップの大きい画像エリア）
   ============================================================== */

#banner {
    background-attachment: scroll !important; /* モバイルで fixed は重い */
}

#banner .inner {
    padding: 6em 2em;
}

/* ==============================================================
   6. セクション2（緑）— members.jpg & ボタン
   ============================================================== */

/* members.jpg — width="400" 属性はそのまま残す（PCで400px表示）
   スマホでは上の img { max-width:100% } で自動縮小される */
.wrapper.style3 .row img {
    display: block;
    max-width: 400px;
    width: 100%;
    margin: 1em auto 0;
    border-radius: var(--radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ボタンの間隔 */
.wrapper.style3 .button.alt {
    margin: 0.35em 0.4em;
    display: inline-block;
}

/* ボタンコンテナの整列 */
.wrapper.style3 .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5em;
    margin-top: 1.2em;
}

/* ==============================================================
   7. セクション1（白）— テキスト行間
   ============================================================== */

.wrapper.style2 {
    /* text-align は狭い画面のみ left に */
}

.wrapper.style2 p {
    line-height: 1.9;
    max-width: var(--max-reading);
    margin-left: auto;
    margin-right: auto;
}

/* ==============================================================
   8. News / Research — カードライクなリスト
   ============================================================== */

/* ul.special-icons のアイテム間に区切りを追加 */
ul.special-icons > li {
    border-bottom: 1px solid var(--clr-border);
    padding-top: 1.1em;
    padding-bottom: 1.1em;
    margin-bottom: 0 !important;
    transition: background var(--transition);
}

ul.special-icons > li:first-child {
    border-top: 1px solid var(--clr-border);
}

ul.special-icons > li:last-child {
    border-bottom: none;
}

/* アイコン部分 */
ul.special-icons .fa {
    color: var(--clr-green-mid);
    flex-shrink: 0;
}

/* タイトル */
ul.special-icons h3 {
    font-size: 1em;
    margin: 0 0 0.25em;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: var(--clr-dark);
}

/* 本文 */
ul.special-icons p {
    font-size: 0.9em;
    line-height: 1.7;
    margin: 0;
    color: var(--clr-text);
}

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

#footer {
    background: #1a1a1a;
    padding: 2.5em 0;
}

#footer .inner {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: space-between;
    align-items: flex-start;
}

#footer p,
#footer li,
#footer a {
    font-size: 0.88em;
    line-height: 1.7;
}

/* ==============================================================
   10. ページ共通コンテナ最大幅
   ============================================================== */

/* 既存の containers (1400/1300/960) はそのままに
   コンテンツが広がりすぎないよう補助 */
.wrapper > .container > .row {
    align-items: flex-start;
}

/* ==============================================================
   11. チームページ（com-profile）のモバイル対応
   ============================================================== */

/* 教員紹介のアバター画像 */
.com-profile img,
.profile-photo {
    max-width: 160px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 0.8em;
}

/* 名前カード列 — 狭い画面で縦並び */
@media screen and (max-width: 640px) {
    .com-profile {
        display: block !important;
    }
    .com-profile .photo-col,
    .com-profile .text-col {
        width: 100% !important;
        float: none !important;
        display: block !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ==============================================================
   12. バルーン（ツアーページ等）のモバイル対応
   ============================================================== */

.balloon {
    position: relative;
    background: #fff;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding: 1em 1.2em;
    margin: 1em 0;
    box-shadow: var(--shadow-card);
}

.balloon::before {
    content: '';
    position: absolute;
    top: 1.2em;
    left: -12px;
    border: 6px solid transparent;
    border-right-color: var(--clr-border);
}

.balloon::after {
    content: '';
    position: absolute;
    top: 1.2em;
    left: -10px;
    border: 6px solid transparent;
    border-right-color: #fff;
}

@media screen and (max-width: 640px) {
    .balloon {
        margin-left: 0;
        margin-right: 0;
    }
    .balloon::before,
    .balloon::after {
        display: none;
    }
}

/* ==============================================================
   13. レスポンシブ — 1200px 以下
   ============================================================== */

@media screen and (max-width: 1200px) {
    #nav > ul > li > a,
    #nav > ul > li > span {
        font-size: 0.8em !important;
        letter-spacing: 0.5px !important;
        padding: 0 0.5em;
    }

    #banner .inner {
        padding: 4.5em 2em;
    }
}

/* ==============================================================
   14. レスポンシブ — 980px 以下（skel の narrower 相当）
   ============================================================== */

@media screen and (max-width: 980px) {
    /* 本文テキストの justify を解除 */
    .wrapper.style2,
    .wrapper.style2 .major,
    .wrapper.style4,
    .wrapper.style4 .major {
        text-align: left !important;
    }

    /* バナーパディング縮小 */
    #banner .inner {
        padding: 3.5em 1.5em;
    }

    /* ヘッダー内ナビを折り返し時にフル幅 */
    #nav {
        width: 100%;
        text-align: center;
    }
}

/* ==============================================================
   15. レスポンシブ — 700px 以下
   ============================================================== */

@media screen and (max-width: 700px) {
    /* バナーのタイトル */
    #banner h2 {
        font-size: 1.5em !important;
        line-height: 1.35em;
    }
    #banner span,
    #banner p {
        font-size: 1em !important;
    }

    /* 緑セクション余白 */
    .wrapper.style3 > .container {
        padding-left: 1.2em;
        padding-right: 1.2em;
    }
    .wrapper.style3 h2 {
        font-size: 1.4em;
        line-height: 1.4em;
    }

    /* セクション画像 — スマホで全幅に近く */
    .wrapper.style3 .row img {
        max-width: 100%;
    }

    /* フッター縦並び */
    #footer .inner {
        flex-direction: column;
    }
}

/* ==============================================================
   16. レスポンシブ — 640px 以下（skel mobile 相当）
   ============================================================== */

@media screen and (max-width: 640px) {
    /* news アイコンを縦並びに */
    ul.special-icons .fa {
        float: none !important;
        display: block;
        padding-right: 0;
        margin-bottom: 0.4em;
        text-align: center;
    }
    ul.special-icons p,
    ul.special-icons h3 {
        padding-left: 0 !important;
    }

    /* ボタンをスタックさせる */
    .wrapper.style3 .button.alt {
        display: block;
        width: 90%;
        max-width: 280px;
        margin: 0.4em auto;
        text-align: center;
    }

    /* フォントサイズ底上げ（タップしやすく） */
    #nav > ul > li > a,
    #nav > ul > li > span {
        font-size: 0.9em !important;
        line-height: 2.4em;
    }

    /* カードホバーをタッチでも視覚的に */
    ul.special-icons > li:active {
        background: rgba(0, 140, 0, 0.04);
    }
}

/* ==============================================================
   17. タイトルバー（モバイルハンバーガー）の調整
   ============================================================== */

#titleBar {
    background: var(--clr-green-nav);
    height: 44px;
    line-height: 44px;
}

#titleBar .title {
    font-size: 0.95em;
    letter-spacing: 0.05em;
    color: #fff;
}

/* ==============================================================
   18. リンクカラーの統一
   ============================================================== */

a {
    transition: color var(--transition), opacity var(--transition);
}

.wrapper.style4 a,
.wrapper.style2 a {
    color: var(--clr-green-link);
}

.wrapper.style4 a:hover,
.wrapper.style2 a:hover {
    color: var(--clr-green-mid);
    opacity: 0.85;
}

/* ==============================================================
   19. ボタンのスタイル洗練
   ============================================================== */

.button {
    border-radius: var(--radius-sm) !important;
    transition: background var(--transition), color var(--transition), transform var(--transition);
    letter-spacing: 1px;
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

/* ==============================================================
   20. スクロールバー（細め / Webkit）
   ============================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f0f0f0;
}
::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #999;
}