body {
/*            font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; */
        /*    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); */
        /*    min-height: 100vh; */
        }

        .header {
          /* background: #f4f9ff; */ /* 薄い青色 */
          /*  background: #f9f9f9; */ /* 薄い灰色 */
         /*   background: white;*/ /* 白 */

    background-image: url("../images/background107.jpg"); /* ヘッダーに背景画像を描画 */
    background-position: left top;
    background-repeat: repeat;
 /*   background-size: cover; */

            padding: 0px 0;
        /*   box-shadow: 0 2px 10px rgba(0,0,0,0.1); */ /* 縁に影を付けたい場合 */
        /*   box-shadow: 0px 2px 0px #85d8ce; */ /* 薄緑 */
            box-shadow: 0px 2px 0px #d2d2d2; /* 灰色 */
         /*   position: sticky; */ /* ヘッダーを上下スクロールせずに固定表示にしたい場合は有効にする */
            top: 0;
            z-index: 1000;
        }

        .container {
            max-width: 1060px;
            margin: 0 auto;
            padding: 0 0;
            display: flex;
         /*   justify-content: space-evenly; */
            align-items: center;
        }

        .logo {
        
        }


        .nav {
            display: flex;
            flex-wrap: wrap;
       /*     grid-template-columns: 1fr 1fr 1fr 1fr; */
       /*     grid-template-rows: 1fr 1fr; */
            padding: 0px 10px 0px 50px; /* 上右下左 */
            gap: 6px 30px;
       /*     align-items: start; */
        }

        .nav-item {
            font-size: 21px;
            font-family: "Arial Black";
            font-weight: bold;
            text-decoration: none;
            color: #333;
            position: relative;
            transition: all 0.3s ease;
          /*  text-transform: uppercase; */
            letter-spacing: 1px;
        }


        .nav-item::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 0;
            height: 3px;
            background: currentColor;
            transition: width 0.3s ease;
        }

        .nav-item:hover::after {
            width: 100%;
        }

        /* 各ナビアイテムの色 */
        .nav-item.calender {
            color: #dc3545;
        }

        .nav-item.acceleration {
          /*  color: #4682b4; */ /* ピンク色 */
            color: #d882d1;
        }

        .nav-item.sparksbbs {
            color: #de7c00;
        }

        .nav-item.tiermaker {
            color: #726bbe;
        }

        .nav-item.tierchart {
            color: #8b4513;
        }

        .nav-item.supportcardlist {
            color: #1e90ff;
        }

        .nav-item.puzzle {
            color: #747474;
        }

        .nav-item.inspection {
            color: #20b2aa;
        }

        .nav-item.other {
            color: #ffb6c1;
        }

        /* アクティブ状態のスタイル */
        .nav-item.active::after {
            width: 100%;
        }


        /* コンテンツエリア */
        .content {
            padding: 60px 0;
        }

        .content-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            text-align: center;
        }