:root {
    --bg: #f5f5f2;
    --panel: #eeeee9;
    --text: #171817;
    --muted: #6d706c;
    --line: #cfd1cb;
    --accent: #315f72;

    --max: 1440px;
    --accent-lavender: #8b7aa8;

    --axis-x: #a56a52;
    --axis-y: #5f8f74;

    --building: #8f8d84;
    --building-light: #c9c7bc;

    --cloud-point: #1c5560;
}


* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    min-height: 100%;

    background: var(--bg);
    color: var(--text);

    font-family:
       "IBM Plex Sans",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Helvetica Neue",
        "Noto Sans JP",
        sans-serif;
}


body {
    overflow-x: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}

.page-no {
    color: var(--accent-lavender);
}

/* ========================================
   Site Layout
======================================== */

.site {
    height: 100svh;
    min-height: 620px;

    display: grid;
    grid-template-rows: 68px 1fr 42px;
}


/* ========================================
   Header / Footer
======================================== */
.header,
.footer {
    border-color: var(--line);
    border-style: solid;
}

.header {
    border-width: 0 0 1px;
}

.footer {
    border-width: 1px 0 0;
}

.header-inner,
.footer-inner {
    width: min(
        calc(100% - 56px),
        var(--max)
    );

    height: 100%;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 12px;

    font-weight: 700;
    letter-spacing: 0.06em;
}

.brand small {
    font-size: 10px;
    color: var(--muted);
    font-weight: 500;
    letter-spacing: 0.1em;
}

nav {
    display: flex;
    gap: 26px;

    font-size: 12px;
    color: #4c4f4b;
}

nav a.active {
  color: var(--accent-lavender);
  font-weight: 800;
}


.nav-toggle {
    display: none;
}

/* ========================================
   Main
======================================== */
.main {
    width: min(
        calc(100% - 56px),
        var(--max)
    );

    height: 100%;
    min-height: 0;

    margin: auto;

    /* コンテンツが1画面に収まらない場合、ヘッダー・フッターは
       固定のままここだけスクロールさせる（はみ出て重ならないように） */
    overflow-y: auto;
}

/* ========================================
   Home Screen
======================================== */
.screen {
    height: 100%;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(380px, 0.9fr);

    gap: clamp(40px, 6vw, 110px);

    align-items: center;
}

.eyebrow {
    color: var(--accent);
    font:
        600 11px / 1.2
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.lead {
    max-width: 680px;

    color: #444843;

    font-size: 17px;
    line-height: 1.9;
}


/* ========================================
   Metadata
======================================== */

.meta-head {
    margin-top: 42px;

    display: flex;
    align-items: baseline;
    justify-content: space-between;
}


.meta-head-label {
    color: var(--muted);

    font:
        11px
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.meta-head-link {
    color: var(--accent);

    font:
        600 11px
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    letter-spacing: 0.02em;

    transition: color 0.2s ease;
}


.meta-head-link:hover {
    color: var(--accent-lavender);
}


.meta {
    margin-top: 13px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    row-gap: 16px;

    border-top: 1px solid var(--line);
}


.meta a {
    display: block;

    padding: 13px 14px 0 0;

    font-size: 11px;
    color: var(--muted);

    transition: color 0.2s ease;
}


.meta a:hover {
    color: var(--accent-lavender);
}


.meta strong {
    display: block;

    margin-top: 3px;

    color: var(--text);
    font-size: 13px;
}


/* ========================================
   Visual / Image
======================================== */

.visual-wrap {
    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 0;

    gap: 12px;
}


.visual {
    width: 100%;
    aspect-ratio: 3260 / 4275;

    position: relative;

    overflow: hidden;

    border: 1px solid var(--line);
    background: #e8e9e4;

    cursor: pointer;
}


.visual:before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(40, 50, 45, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(40, 50, 45, 0.08) 1px,
            transparent 1px
        );

    background-size: 32px 32px;
}


.visual svg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
}


.visual img {
    display: block;

    width: 100%;
    height: auto;
}


/* ========================================
   Home: 素材の切り替え（スライド）
======================================== */

.slide {
    position: absolute;
    inset: 0;

    opacity: 0;
    transition: opacity 0.6s ease;
}


.slide.active {
    opacity: 1;
}


.slide img,
.slide video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.slide-lidar {
    display: flex;

    align-items: center;
    justify-content: center;
}


.slide-lidar .scan-rings {
    position: absolute;
    inset: 12%;

    overflow: visible;
    pointer-events: none;

    /* リング・座標軸の中心を、背景グリッド（32px四方）2マス分だけ左上へ */
    transform: translate(-64px, -64px);
}


.slide-lidar .scan-ring {
    fill: none;

    stroke: var(--accent-lavender);
    stroke-width: 1.2;

    vector-effect: non-scaling-stroke;

    opacity: 0;

    transform-box: fill-box;
    transform-origin: center;

    transition: opacity 0.35s ease;
}


.slide-lidar .scan-ring.active {
    opacity: 0.72;
}


.slide-lidar .scan-ring.old {
    opacity: 0.16;
}


.slide-lidar .lidar-center {
    width: min(22%, 130px);

    z-index: 5;
}


.slide-lidar .lidar-center img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


.slide-lidar .scan-info {
    position: absolute;
    right: 18px;
    bottom: 15px;

    display: flex;
    flex-direction: column;
    align-items: flex-end;

    font:
        10px
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


.slide-lidar .scan-label {
    color: var(--muted);
    letter-spacing: 0.15em;
}


.slide-lidar .scan-angle {
    margin-top: 4px;

    color: var(--accent-lavender);

    font-size: 15px;
}


/* ========================================
   Axes（アイソメ座標軸: +X 右下 / -Y 左下 / +Z 上）
======================================== */

.slide-lidar .axis-line {
    stroke-width: 1.4;

    vector-effect: non-scaling-stroke;
}


.slide-lidar .axis-x {
    stroke: var(--axis-x);
}


.slide-lidar .axis-y {
    stroke: var(--axis-y);
}


.slide-lidar .axis-z {
    stroke: var(--accent);
}


.slide-lidar .axis-arrow-x {
    fill: var(--axis-x);
}


.slide-lidar .axis-arrow-y {
    fill: var(--axis-y);
}


.slide-lidar .axis-arrow-z {
    fill: var(--accent);
}


.slide-lidar .axis-label {
    font:
        600 13px
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


.slide-lidar .axis-label-x {
    fill: var(--axis-x);
}


.slide-lidar .axis-label-y {
    fill: var(--axis-y);
}


.slide-lidar .axis-label-z {
    fill: var(--accent);
}


/* ========================================
   建物（縦長の円柱）と点群
======================================== */

.slide-lidar .building-face {
    stroke: var(--text);
    stroke-width: 1.2;
    stroke-linejoin: round;

    fill-opacity: 1;

    vector-effect: non-scaling-stroke;
}


/* 天面がもっとも明るく、側面はやや暗く
   （光がほぼ真上から当たっている想定の陰影） */
.slide-lidar .building-cap {
    fill: var(--building-light);
}


.slide-lidar .building-body {
    fill: var(--building);
}


.slide-lidar .cloud-point {
    fill: var(--cloud-point);
    stroke: var(--bg);
    stroke-width: 0.6;

    opacity: 0;

    vector-effect: non-scaling-stroke;
    transition: opacity 0.3s ease;
}


.slide-lidar .cloud-point.visible {
    opacity: 0.95;
}


/* ========================================
   左下の Picture-in-Picture: 構築中の3D点群
======================================== */

.slide-lidar .cloud-pip {
    position: absolute;
    left: 18px;
    bottom: 44px;

    width: 216px;
    height: 216px;

    border: 1px solid var(--line);
    background: #000;

    overflow: hidden;
}


.slide-lidar .cloud-pip-label {
    position: absolute;
    top: 6px;
    left: 8px;

    color: #cfd1cb;

    font:
        9px
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
    letter-spacing: 0.1em;
}


.slide-lidar .cloud-pip-svg {
    display: block;

    width: 100%;
    height: 100%;
}


.slide-lidar .cloud-pip-dot {
    opacity: 0;

    transition: opacity 0.3s ease;
}


.slide-lidar .cloud-pip-dot.visible {
    opacity: 0.95;
}


/* PiP内の座標軸。メインのアイソメ表示と同じ配色（原点＝センサー位置基準）にして、
   同じ座標系を縮小して見ていると分かるようにする */
.slide-lidar .cloud-pip-axis {
    stroke-width: 1;

    vector-effect: non-scaling-stroke;
}


.slide-lidar .cloud-pip-axis-x {
    stroke: var(--axis-x);
}


.slide-lidar .cloud-pip-axis-y {
    stroke: var(--axis-y);
}


.slide-lidar .cloud-pip-axis-z {
    stroke: var(--accent);
}


.slide-lidar .cloud-pip-axis-label {
    font:
        600 6px
        ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}


.slide-lidar .cloud-pip-axis-label-x {
    fill: var(--axis-x);
}


.slide-lidar .cloud-pip-axis-label-y {
    fill: var(--axis-y);
}


.slide-lidar .cloud-pip-axis-label-z {
    fill: var(--accent);
}


.slide-lidar .cloud-pip-origin {
    fill: #cfd1cb;
}


/* リング（ray）が円柱表面を横切る位置を示す線。
   ring 本体（.scan-ring）と同じ見た目にして、
   「同じ ray の続き」だと分かるようにする */
.slide-lidar .hit-line {
    fill: none;
    stroke: var(--accent-lavender);
    stroke-width: 1.2;

    opacity: 0;

    vector-effect: non-scaling-stroke;
    transition: opacity 0.3s ease;
}


.slide-lidar .hit-line.visible {
    opacity: 0.8;
}


.map-container {
    width: 100%;
}


.map-container img {
    display: block;

    width: 100%;
    height: auto;
}


.caption {
    position: absolute;
    left: 18px;
    bottom: 15px;

    padding: 5px 7px;

    background: rgba(245, 245, 242, 0.8);

    color: #626660;

    font:
        10px
        ui-monospace,
        monospace;
}


/* ========================================
   スライドのナビゲーションドット / プログレスバー
======================================== */

.slide-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}


.slide-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}


.slide-progress {
    width: 80px;
    height: 2px;

    overflow: hidden;

    background: var(--line);
}


.slide-progress-bar {
    width: 0%;
    height: 100%;

    background: var(--accent-lavender);
}


.slide-dot {
    width: 7px;
    height: 7px;

    padding: 0;

    cursor: pointer;

    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--panel);

    transition: background 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}


.slide-dot:hover {
    border-color: var(--accent-lavender);
}


.slide-dot.active {
    transform: scale(1.2);

    background: var(--accent-lavender);
    border-color: var(--accent-lavender);
}

/* ========================================
   Sub Pages
======================================== */
.page {
    min-height: 100%;
    display: grid;
    align-content: start;
    padding: clamp(25px, 5vh, 65px) 0;
}

.page-head {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;
    margin-bottom: 35px;
}

.page-no {
    color: var(--muted);

    font:
        11px
        ui-monospace,
        monospace;
}


h1 {
    margin: 0;

    font-size: clamp(40px, 5vw, 72px);
    line-height: 0.95;
    letter-spacing: -0.05em;
}




.sub {
    max-width: 700px;

    margin: 12px 0 0;

    color: var(--muted);

    font-size: 14px;
}


/* ========================================
   Lists
======================================== */

.list {
    border-top: 1px solid var(--line);
}


.row {
    min-height: 74px;

    display: grid;
    grid-template-columns:
        55px
        280px
        1fr
        30px;

    gap: 25px;

    align-items: center;

    border-bottom: 1px solid var(--line);
}


.row:hover {
    padding-left: 10px;

    background: rgba(255, 255, 255, 0.3);
}


.num,
.year {
    color: var(--muted);

    font:
        11px
        ui-monospace,
        monospace;
}


.row-title {
    font-size: 19px;
    font-weight: 600;
}


.row-desc {
    color: var(--muted);
    font-size: 13px;
}


.arrow {
    color: var(--accent);
}


/* ========================================
   Project Cards
======================================== */

.split-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 0;

    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.card {
    min-height: 190px;

    padding: 25px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}


.card-meta {
    color: var(--muted);

    font:
        10px
        ui-monospace,
        monospace;
}


.card h2 {
    margin: 22px 0 8px;

    font-size: 23px;
    line-height: 1.1;
}


.card p {
    margin: 0;

    color: var(--muted);

    font-size: 12px;
}


.tag {
    margin-top: 18px;

    color: var(--accent);

    font:
        10px
        ui-monospace,
        monospace;
}


/* ========================================
   Research
======================================== */

.research-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 0;

    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}


.research-card {
    min-height: 140px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);

    transition: background 0.2s ease;
}


.research-card.has-image {
    flex-direction: row;
}


.research-card:hover {
    background: rgba(255, 255, 255, 0.35);
}


.research-card-thumb {
    flex-shrink: 0;

    width: 50%;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    background: var(--panel);
}


.research-card-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.research-card-thumb video {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.research-card-body {
    flex: 1;
    min-width: 0;

    padding: 22px;

    display: flex;
    flex-direction: column;
    gap: 8px;
}


.research-card-num {
    color: var(--accent-lavender);

    font:
        11px
        ui-monospace,
        monospace;
}


.research-card-label {
    font-size: 21px;
    font-weight: 600;
}


.research-card-count {
    margin-top: auto;

    color: var(--muted);

    font:
        10px
        ui-monospace,
        monospace;
}



.page-back {
    display: inline-block;
    justify-self: start;

    margin-bottom: 24px;

    color: var(--accent);

    font-size: 13px;

    transition: color 0.2s ease;
}


.page-back:hover {
    color: var(--accent-lavender);
}


.research-article {
    max-width: 720px;

    margin-bottom: 30px;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.9;
}


.research-article p {
    margin: 0;
}


/* ========================================
   People
======================================== */

.people {
    display: grid;
    grid-template-columns: 1fr 1fr;

    border-top: 1px solid var(--line);
}


.person {
    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}


.person:nth-child(even) {
    padding-left: 30px;

    border-left: 1px solid var(--line);
}


.person.has-image {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}


.person.has-image .person-body {
    flex: 1;
    min-width: 0;
}


.person-thumb {
    flex-shrink: 0;

    width: 22%;
    max-width: 240px;
    aspect-ratio: 1 / 1;

    overflow: hidden;

    border: 1px solid var(--line);
    background: var(--panel);
}


.person-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* People: faculty カードを page-head 内（見出しの右側）に埋め込む */
.page-head--people {
    grid-template-columns: 180px 1fr auto;
    align-items: start;
}


.page-head--people .person {
    padding: 0;
    border-bottom: none;
}


.page-head--people .person.has-image {
    /* .people グリッド（gapなしの1fr 1fr）の1カラム分と同じ幅
       （.main の幅 min(calc(100% - 56px), var(--max)) の半分）に揃える */
    width: min(calc((100vw - 56px) / 2), calc(var(--max) / 2));

    /* 写真とテキストが別グループに見えないよう、1本の枠線で
       ひとつのカードとして囲む（.visual/.person-thumbと同じ1px線） */
    padding: 20px;

    border: 1px solid var(--line);
}


.role {
    color: var(--accent);

    font:
        10px
        ui-monospace,
        monospace;
}


.name {
    margin-top: 6px;

    font-size: 22px;
    font-weight: 600;
}


.name span {
    margin-left: 8px;

    color: var(--muted);

    font-size: 11px;
    font-weight: 400;
}


.bio {
    margin-top: 10px;

    max-width: 480px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.8;
}

.grade-heading {
    margin: 26px 0 0;

    color: var(--accent-lavender);

    font: 700 12px/1 ui-monospace, monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.grade-heading:first-of-type {
    margin-top: 20px;
}

.more-link {
    margin-top: 24px;

    font-size: 13px;
}

.more-link a {
    color: var(--accent);
}


.bio p {
    margin: 0;
}

.bio h3 {
    margin: 0 0 4px;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;
}

.bio ul {
    margin: 0;
    padding-left: 16px;
}

.bio li {
    margin: 2px 0;
}


/* ========================================
   News
======================================== */

.news {
    border-top: 1px solid var(--line);
}


.news-row {
    display: grid;
    grid-template-columns: 110px 110px 1fr;

    gap: 20px;

    padding: 17px 0;

    border-bottom: 1px solid var(--line);

    font-size: 13px;
}


.news-row .cat {
    color: var(--accent);

    font:
        10px
        ui-monospace,
        monospace;
}


/* ========================================
   Publications
======================================== */

.pub-row {
    display: grid;
    grid-template-columns: 65px 1fr 130px;

    gap: 25px;

    padding: 16px 0;

    border-bottom: 1px solid var(--line);

    font-size: 13px;
}


.pub-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}


.pub-meta {
    margin-top: 2px;

    color: var(--muted);

    font-size: 12px;
    line-height: 1.6;
}


.type {
    color: var(--muted);

    text-align: right;

    font:
        10px
        ui-monospace,
        monospace;
}


/* ========================================
   Access
======================================== */

.access-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 50px;
}


.access-box {
    padding-top: 18px;

    border-top: 1px solid var(--line);
}


.access-box h2 {
    margin: 0 0 12px;

    font-size: 19px;
}


.access-box p {
    color: var(--muted);

    font-size: 13px;
    line-height: 1.9;
}


/* ========================================
   Footer
======================================== */

.footer-inner {
    color: var(--muted);

    font:
        10px
        ui-monospace,
        monospace;
}


.counter {
    color: var(--text);
}


/* ========================================
   Eleventy demo: Markdown本文は <p> で包まれるため、
   1行テキストとして扱いたい箇所はインライン化する
======================================== */
.name p,
.news-row div p,
.pub-row div p,
.lead p {
    display: inline;
    margin: 0;
}


/* ========================================
   Responsive
======================================== */

@media (max-width: 900px) {

    .site {
        height: auto;
        min-height: 100svh;

        grid-template-rows: 60px auto 42px;
    }


    .header-inner,
    .footer-inner,
    .main {
        width: min(
            calc(100% - 32px),
            var(--max)
        );
    }


    nav {
        display: none;
    }


    /* ハンバーガーボタン本体 */
    .nav-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 6px;

        width: 32px;
        height: 32px;
        padding: 0;

        cursor: pointer;

        border: none;
        border-radius: 0;
        background: none;

        /* iOS Safari系（WebKit）はデフォルトで角丸のボタン装飾を付けるため、
           明示的にリセットしないと自前のCSSが効かない */
        appearance: none;
        -webkit-appearance: none;
    }


    .nav-toggle span {
        display: block;

        height: 2px;
        width: 100%;

        border-radius: 1px;
        background: var(--text);

        transition: transform 0.25s ease, opacity 0.25s ease;
    }


    /* 開いている間はボタンを「×」に変形させる */
    body.nav-open .nav-toggle span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    body.nav-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    body.nav-open .nav-toggle span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* 開いている間、ヘッダー直下を覆う全画面ナビ */
    body.nav-open nav {
        position: fixed;
        inset: 60px 0 0 0;
        z-index: 50;

        display: flex;
        flex-direction: column;
        gap: 0;

        padding: 8px 16px;

        background: var(--bg);
        overflow-y: auto;
    }


    body.nav-open nav a {
        padding: 16px 0;

        border-bottom: 1px solid var(--line);

        font-size: 16px;
    }


    .screen {
        height: auto;
        min-height: calc(100svh - 102px);

        grid-template-columns: 1fr;

        gap: 30px;

        padding: 45px 0;
    }


    .visual {
        height: 360px;
    }


    .meta {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 14px;
    }


    .page {
        height: auto;
        min-height: calc(100svh - 102px);

        padding: 45px 0;
    }


    .page-head {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    .row {
        grid-template-columns: 35px 1fr 20px;
    }


    .row-desc {
        grid-column: 2 / -1;

        padding-bottom: 14px;
    }


    .split-list,
    .people,
    .access-grid,
    .research-grid {
        grid-template-columns: 1fr;
    }


    /* align-items: stretch に任せると .research-card の
       min-height: 140px に引っ張られてサムネが過大になるため、
       固定サイズの正方形に戻す（64pxは小さすぎたため96pxに） */
    .research-card-thumb {
        width: 120px;
    }


    .person:nth-child(even) {
        padding-left: 0;

        border-left: 0;
    }


    .pub-row {
        grid-template-columns: 55px 1fr;
    }


    .type {
        display: none;
    }


    .news-row {
        grid-template-columns: 85px 80px 1fr;
    }


    .card {
        min-height: 170px;
    }
}