/* Reset */
/* ==== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    scroll-behavior: smooth;
}


.history-page {
    padding: var(--section-top-padding) 0 var(--section-bottom-padding) 0;
    position: relative; /* 子要素（Canvas）の基準点となる */
    z-index: 5;        /* 他のセクションの背景より前面に配置 */
    min-height: 100vh;  /* セクションの最小高さを確保 */
    overflow: hidden;   /* Canvasのはみ出しを防止 */
}

.history-header {
    position: relative;
    z-index: 10;
    pointer-events: none;    /* マウス操作を下のCanvasに透過させる */
    margin-bottom: 100px; /* タイトル（h6）と画像との間のマージンを広げる（お好みで調整） */
}

.history-header h2 {
    margin-top: 8vh; /* 共通設定の12vhから少し引き上げて、画像との距離をさらに確保 */
}


/* Canvas */
canvas {
    position: absolute; /* fixedからabsoluteに変更 */
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100vh !important;
    z-index: 1; /* セクション内での背景として機能 */
}

/* タブレット・スマホ対応（基本設定を上書きするため、ファイルの末尾に配置） */
/* ====== */
@media (max-width: 1024px) {
    /* フッター文字サイズ */
    footer h1 {
        font-size: 24px;
        width: 100%;
    }
    /* フッター縦並びに変更 */
    footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }
    /* ナビ少し詰める */
    nav {
        gap: 1em;
    }
    .nav-items {
        gap: 1em;
        font-size: 14px;
    }

    /* 画像コンテンツ（Canvas）を画面幅いっぱいに拡大 */
    canvas {
        width: 100vw !important;    /* 親要素の幅に関わらず画面幅100%を強制 */
        max-width: none !important;  /* team.css 等の max-width: 100% 制限を解除 */
        height: 100% !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
}