@import url('https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans:ital,wdth,wght@0,62.5..100,400..700;1,62.5..100,400..700&family=Noto+Sans+Mono:wght@400;700&display=swap');

/* 全体 */
[data-md-color-scheme="default"] {
    --normal-size: 16px;
    --line-height: 24px;
    --text-color: #1A1A1A;
    /* Default text color */
    --box-color: #E6E6E6;
    /* Default box color */
    --middle-color: #F3F3F3;
    /* Intermediate box color */
    --paper-color: #FFFFFF;
    /* Default paper color */
    --margin-color: #7F7F7F;
    --structure-color: #001E62;
    /* Keio blue */
    --alert-color: #C63527;
    /* Keio red */
    --comment-color: #F1C400;
    /* Keio yellow */

    --text-font-family: "Noto Sans JP", "Noto Sans", "Noto Emoji";

    --md-primary-fg-color: var(--structure-color);
    --md-primary-fg-color--light: var(--box-color);
    --md-accent-fg-color: var(--structure-color);
    --md-footer-bg-color: var(--box-color);
    --md-footer-fg-color: var(--text-color);
    --md-footer-bg-color--dark: var(--box-color);
    --md-footer-fg-color--light: var(--structure-color);
    --md-footer-fg-color--lighter: var(--structure-color);
    --md-text-color: var(--text-color);

    --md-text-font: var(--text-font-family);

    --md-content-width: 1200px;
    --md-tabs-height-expand: 60px;
    --md-tabs-height: 54px;
    --md-tabs-height-shrink: 48px;
}

/* Title, author, and affiliation */
.title,
.subtitle,
.author,
.affiliation {
    margin-top: 0ex;
    margin-bottom: 2ex;
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: var(--paper-color);
    line-height: 1.25;
}

.title {
    margin-top: 2ex;
}

.subtitle {
    font-size: 1.5em;
}

.affiliation {
    font-size: 1.5em;
}

.md-header .md-grid,
.md-tabs .md-grid,
.md-main .md-grid,
.md-footer__inner {
    max-width: var(--md-content-width) !important;
    margin-right: auto;
    margin-left: auto;
    padding: 0 1em;
}

.md-main .md-grid {
    display: block !important;
}

.md-content {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
}

.md-content__inner {
    margin: 0 !important;
}

/* ヘッダー */
.md-header {
    color: var(--paper-color);
    background-color: var(--structure-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.md-header__title,
.md-header__button,
.md-header__topic {
    color: var(--paper-color);
}

.md-header__source {
    width: 130px;
}

/* フッター */
.md-footer {
    margin-top: 3ex;
    text-align: center;
    color: transparent;
    background-color: var(--box-color);
}

.md-footer__meta .md-footer__inner .md-footer_nav {
    max-width: var(--md-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: center !important;
}

.md-copyright {
    text-align: center !important;
    width: 100% !important;
    margin: 0 !important;
}

/* ヒーローセクション */
.hero-section {
    color: var(--paper-color);
    background-color: rgba(0, 30, 98, 0.75);

    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;

    margin-top: -126px;
    margin-bottom: 2em;
    padding-top: 156px;
    padding-bottom: 3em;

    display: flex;
    justify-content: center;

    box-shadow: none;
    background-image: url('../Images/hero.png');
    background-size: cover;
    background-position: center;
    background-blend-mode: multiply;
}

/* --- ヒーローセクションの中身（幅固定・中央配置） --- */
.hero-inner {
    max-width: var(--md-content-width) !important;
    text-align: center;

    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1em;
    margin: 0 auto;
}

/* 目次（右サイドバー） */
.md-sidebar--secondary {
    display: none !important;
    width: 0 !important;
    margin: 0 !important;
}

@media screen and (min-width: 1220px) {

    /* タブ */
    .md-tabs {
        color: var(--structure-color);
        background-color: var(--paper-color);
        border-bottom: 1px solid #dadce0;
        height: var(--md-tabs-height-shrink) !important;
        overflow: hidden !important;
        overflow-x: auto !important;
    }

    .md-tabs__link {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        color: var(--structure-color);
        opacity: 0.75 !important;
        line-height: 1 !important;
        position: relative !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        font-size: medium !important;
        font-weight: normal !important;
    }

    .md-tabs__link:hover,
    .md-tabs__link--active {
        font-size: medium !important;
        font-weight: normal !important;
        opacity: 1;
    }

    .md-tabs__list {
        width: 100%;
        display: flex;
        margin: 0 !important;
        height: var(--md-tabs-height-shrink) !important;
    }

    .md-tabs__item:last-child {
        margin-left: auto !important;
        margin-right: 0em !important;
        display: flex;
        align-items: center;
        /* 上下の真ん中に来るように調整 */
    }

    .md-tabs__item:nth-child(1) .md-tabs__link::after {
        content: "HOME";
    }

    .md-tabs__item:nth-child(2) .md-tabs__link::after {
        content: "MEMBERS";
    }

    .md-tabs__item:nth-child(3) .md-tabs__link::after {
        content: "PROJECTS";
    }

    .md-tabs__item:nth-child(4) .md-tabs__link::after {
        content: "ACHIEVEMENTS";
    }

    .md-tabs__item:nth-child(5) .md-tabs__link::after {
        content: "LECTURES";
    }

    .md-tabs__item:nth-child(6) .md-tabs__link::after {
        content: "RECRUITMENT";
    }

    .md-tabs__item:nth-child(7) .md-tabs__link::after {
        content: "ACCESS";
    }

    .md-tabs__link::after {
        display: block;
        opacity: 0.75;
        margin-top: .5ex;
        letter-spacing: 0;

        font-family: "Noto Sans" !important;
        font-variation-settings: 'wdth' 62.5;
        font-size: 12px !important;
        font-weight: normal !important;
        text-transform: uppercase;
    }

    .md-tabs__link:hover::after,
    .md-tabs__link--active::after {
        font-variation-settings: 'wdth' 62.5;
        font-size: 12px !important;
        font-weight: normal !important;
        opacity: 1.0;
    }

    .md-tabs__link::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 6px;
        width: 0;
        height: 2px;

        background-color: var(--structure-color);

        transition: width 0.1s ease;
        transform: translateX(-50%);
        z-index: 10;
    }

    .md-tabs__link:hover::before,
    .md-tabs__link--active::before {
        width: 100%;
        /* 幅いっぱいに伸ばす */
    }

    /* メニュー（左サイドバー） */
    .md-sidebar--primary {
        display: none !important;
        width: 0 !important;
        margin: 0 !important;
    }

    /* ヒーローセクションが存在するページだけ、以下のCSSを適用する */
    body:has(.hero-section) .md-header {
        box-shadow: none;
        /* 影を消す（下のタブと繋げるため） */
    }

    body:has(.hero-section) .md-tabs {
        color: #5f6368;
        background-color: transparent;
        /* 背景を透明に */
        border-bottom: none;
        /* 線を消す */
    }

    body:has(.hero-section) .md-tabs__link {
        color: var(--paper-color);
        opacity: 0.75;
    }

    body:has(.hero-section) .md-tabs__link:hover,
    .md-tabs__link--active {
        color: var(--paper-color);
        font-weight: bold;
        opacity: 1;
    }

    body:has(.hero-section) .md-tabs__link::before {
        background-color: var(--paper-color);
    }
}

@media screen and (min-width: 1600px) {
    .md-tabs {
        height: var(--md-tabs-height) !important;
    }

    .md-tabs__list {
        height: var(--md-tabs-height) !important;
    }
}

@media screen and (min-width: 2000px) {
    .md-tabs {
        height: var(--md-tabs-height-expand) !important;
    }

    .md-tabs__list {
        height: var(--md-tabs-height-expand) !important;
    }
}

/* リンクや文字色の調整 */
.hero-section h1,
.hero-section h2,
.hero-section strong {
    text-align: center !important;
    color: var(--paper-color) !important;
}

/* グリッド */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    /* 画面幅に合わせて自動で列数を調整 */
    gap: 20px;
    margin-top: 2ex;
    margin-bottom: 2ex;
    margin-left: 1em;
    margin-right: 0em;
}

.card {
    background: var(--paper-color);
    border: 1px solid var(--box-color);
    border-radius: 8px;
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 1ex;
    transition: transform 0.1s, box-shadow 0.1s;
    /* ホバー時の動き */
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--structure-color);
}

.card-link,
.card-link:hover,
.card-link:focus {
    text-decoration: none !important;
    color: inherit;
}

/* スマホでの微調整 */
@media screen and (max-width: 1220px) {
    .hero-section {
        padding: 156px 1em 2em 1em;
        /* 余白を少し詰めるが、上部はヘッダー被りを避けるため確保 */
    }

    .subtitle {
        font-size: 1.25em;
    }

    .affiliation {
        font-size: 1.25em;
    }
}

/* --- プロフィールセクション用のグリッド --- */
.profile-grid {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-bottom: 2em;
}

/* スマホでは縦並びにする */
@media screen and (max-width: 1220px) {
    .profile-grid {
        flex-direction: column-reverse;
        /* スマホなら写真を上にしたい場合は column */
    }
}

.profile-text {
    flex: 1;
}

.profile-image img {
    border-radius: 8px;
    width: 200px;
    height: auto;
    object-fit: cover;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.md-typeset {
    font-family: var(--text-font-family) !important;
    font-size: var(--normal-size) !important;
    line-height: var(--line-height) !important;
    color: var(--text-color) !important;
}

.md-typeset h1 {
    display: none;
}

.md-typeset h2 {
    margin-top: 1.5ex;
    margin-bottom: 1.5ex;
    border-top: 2px solid var(--box-color);
    padding-top: 1.5ex;
    text-align: center;
    font-weight: bold !important;
    font-size: 1.5em;
    color: var(--structure-color);
}

.md-typeset h2::after {
    content: attr(data-subheading);
    display: block;
    text-align: center;
    margin-top: 0.5ex;
    font-family: "Noto Sans";
    font-size: 0.75em;
    font-variation-settings: 'wdth' 62.5;
    color: var(--margin-color);
    font-weight: normal;
}

.md-typeset h3 {
    margin-top: 1.5ex;
    margin-bottom: 1.5ex;
    border-left: 4px solid var(--structure-color);
    padding-left: 0.5em;
    font-weight: bold !important;
    font-size: 1.25em;
    color: var(--structure-color);
}

.md-typeset h4 {
    font-weight: bold !important;
    font-size: 1em;
    color: var(--structure-color);
}

.md-typeset p {
    margin-top: 0ex;
    margin-bottom: .5ex;
    padding-top: 0ex;
    padding-bottom: 0ex;
    padding-left: 1em;
    padding-right: 0em;
}

/* Googleログインゲート */
#login-gate .g_id_signin,
#login-gate .g_id_signin > div,
#login-gate .g_id_signin iframe {
    width: 240px !important;
    max-width: 100%;
    padding-left: .7em;
    padding-right: 0em;
}

/* Googleマップ */
.map iframe {
    margin-top: 2ex;
    margin-bottom: 2ex;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: block;
}

/* 一般リスト */
.md-typeset ul {
    padding-top: 0ex !important;
    padding-bottom: 0ex !important;
    padding-left: 1em !important;
    padding-right: 0em !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 1em !important;
}

.md-typeset ul > li {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 2em !important;
    padding-top: 0.75ex;
    padding-bottom: 0.75ex;
    font-size: 1em !important;
}

.md-typeset ul li em {
    position: absolute;
    left: 0;
    top: 0.75ex;
    width: auto;
    color: var(--structure-color);
    font-family: "Noto Sans Mono", "Noto Emoji";
    font-size: 1em !important;
}

/* 新着情報用リスト */
.md-typeset .news-list ul {
    padding-top: 0ex !important;
    padding-bottom: 0ex !important;
    padding-left: 1em !important;
    padding-right: 0em !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 1em !important;
}

.md-typeset .news-list li {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 150px !important;
    border-bottom: 1px dashed #ddd;
    padding-top: 0.75ex;
    padding-bottom: 0.75ex;
    font-size: 1em !important;
}

.md-typeset .news-list em {
    position: absolute;
    left: 0;
    top: 0.75ex;
    width: auto;
    color: var(--structure-color);
    font-family: "Noto Sans Mono", "Noto Emoji";
    font-weight: normal;
    font-size: 1em !important;
}

/* 経歴用リスト */
.md-typeset .history-list ul {
    padding-top: 0ex !important;
    padding-bottom: 0ex !important;
    padding-left: 1em !important;
    padding-right: 0em !important;
    margin: 0 !important;
    list-style: none !important;
    font-size: 1em !important;
}

.md-typeset .history-list li {
    position: relative;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    padding-left: 150px !important;
    padding-top: 0.75ex;
    padding-bottom: 0.75ex;
    font-size: 1em !important;
}

.md-typeset .history-list em {
    position: absolute;
    left: 0;
    top: 0.75ex;
    width: auto;
    color: var(--structure-color);
    font-family: "Noto Sans Mono", "Noto Emoji";
    font-weight: normal;
    font-size: 1em !important;
}

/* --- リンク --- */
.md-typeset a:not(.md-button):not(.md-icon-button) {
    text-decoration: none;
    color: inherit;
}

.md-typeset a:not(.md-button):not(.md-icon-button):hover {
    text-decoration: underline;
}

.md-typeset em {
    font-style: normal;
    font-weight: bold;
    color: var(--structure-color);
}

.md-typeset strong {
    font-style: normal;
    font-weight: bold;
    color: var(--comment-color);
}

/* --- 数式 (KaTeX) --- */
.md-typeset .katex {
    padding-top: 1ex;
    padding-bottom: 1ex;
    font-size: 1.1em;
}

.md-typeset .katex-display {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* --- スクロールバー --- */
.md-typeset__table,
.katex-display {
    scrollbar-width: thin;
    scrollbar-color: var(--box-color) transparent;
}

.md-typeset__table::-webkit-scrollbar,
.katex-display::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.md-typeset__table::-webkit-scrollbar-track,
.katex-display::-webkit-scrollbar-track {
    background: transparent;
}

.md-typeset__table::-webkit-scrollbar-thumb,
.katex-display::-webkit-scrollbar-thumb {
    background-color: var(--middle-color);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}

.md-typeset__table::-webkit-scrollbar-thumb:hover,
.katex-display::-webkit-scrollbar-thumb:hover {
    background-color: var(--box-color);
}