:root {
        --primary-color: #4c9230;
        --text-color: #f87373;
        --bg-color: #f9f9f9;
        --card-bg: #e4d3d3;
        --border-color: #e0e0e0;
        --header-height: 60px;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Hiragino Sans', 'メイリオ', 'Meiryo', sans-serif;
        color: #ad5656;
        background-color: #423c3c;
        line-height: 1.6;
    }
    
    .oshirase-bar
    {
            background-color: #f39265;
            color: #333;
            text-align: center;
            padding: 8px 15px;
            font-size: 14px;
            font-weight: bold;
    }
    .header {
        font-family: 'Noto Sans JP', sans-serif;
        background-color: var(--card-bg);
        border-bottom: 1px solid var(--border-color);
        width: 100%;
        height: var(--header-height);
        z-index: 100;
    }
    .header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1100px;
        margin: 0 auto;
        padding: 0 20px;
        height: 100%;
        flex-wrap: wrap; /* 追加: 横幅不足時にナビを下に回す */
    }
    .logo {
        font-size: 24px;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
    }
    .logo:hover { text-decoration: none; opacity: 0.7; }

    a {
        color: rgb(53, 0, 0);
        text-decoration: none;
        transition: color 0.3s;
    }

            .footer {
                font-family: 'Noto Sans JP', sans-serif;
                background-color: #333;
                color: #f0f0f0;
                padding: 30px 20px;
                margin-top: 40px; 
                text-align: center;
            }
            .footer-container { max-width: 1100px; margin: 0 auto; }
            .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 15px 0; }
            .footer-nav li { margin: 5px 15px; }
            .footer-nav a { color: #f0f0f0; font-weight: 500; text-decoration: none; }
            .footer-nav a:hover { opacity: 0.7; }
            .copyright { font-size: 14px; color: #aaa; margin: 0; }
            
           
            .nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 10px; z-index: 110; }
            .nav-toggle .icon-bar { display: block; width: 24px; height: 3px; background-color: var(--text-color); margin: 5px 0; transition: transform 0.3s, opacity 0.3s; }
            .nav-toggle.active .icon-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
            .nav-toggle.active .icon-bar:nth-child(2) { opacity: 0; }
            .nav-toggle.active .icon-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
            .global-nav ul {
                display: flex;
                margin: 0;
                padding: 0;
                list-style: none;
                gap: 8px;          /* 項目間の隙間 */
                flex-wrap: wrap;   /* 項目を折り返す */
                align-items: center;
            }
                @media (min-width: 768px ){
                    .header { height: 160px; }
                }
            .global-nav li { margin: 0; } 
            .global-nav a {
                display: block;
                padding: 8px 10px; /* パディングを若干小さく */
                font-weight: 700;
                color: var(--text-color);
                text-decoration: none;
                white-space: nowrap; /* ラベル改行を防ぐ */
            }


            @media (min-width: 1285px) {
                .global-nav ul { flex-wrap: nowrap; }
                .header{
                    height: 120px;
                    }
            }

           
            .main-content {
              
                padding: 20px 0; 
            }

            
            @media (max-width: 768px) {
                .nav-toggle { display: block; }
                .global-nav {
                    position: fixed;
                    top: 0;
                    right: -300px;
                    width: 300px;
                    height: 100vh;
                    box-sizing: border-box; /* padding を height に含める */
                    padding-top: var(--header-height); /* ヘッダー分の余白 */
                    background-color: var(--card-bg);
                    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
                    z-index: 105;
                    border-left: 1px solid var(--border-color);
                    overflow-y: auto; /* 縦スクロールを有効にする */
                    overflow-x: hidden; /* 横スクロールを防止 */
                    -webkit-overflow-scrolling: touch; /* iOS の慣性スクロール */
                }
                .global-nav.active { transform: translateX(-300px); }
                .global-nav ul { flex-direction: column; padding: 20px; }
                .global-nav li { margin: 0; width: 100%; }
                .global-nav a { padding: 15px 10px; border-bottom: 1px solid var(--border-color); }
                .main-content { padding: 15px 0; }
            }

        .search-btn {
            background: none;
            border: none;
            font-size: 20px;
            cursor: pointer;
        }

        .midashi {
        text-align: center;
        padding: 40px 20px;
        background-color: var(--card-bg);
        margin-bottom: 30px;
        border-bottom: var(--primary-color) solid;
        h1{
            font-size: 40px;
            margin: 0 0 10px 0;
            color: var(--primary-color);
        }
        p{
            font-size: 18px;
            color: #555;
            margin-bottom: 20px;
        }
        }
        .site-features span {
            display: inline-block;
            background-color: #eaf2ff;
            color: var(--primary-color);
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            margin: 5px;
        }

        .main {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0px 20px 40px; 
        }

        .pickup-section {
            margin-bottom: 40px;
        }

        .pickup-section h2 {
            font-size: 28px;
            border-bottom: 3px solid var(--primary-color);
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

     
        .card-container {
            display: grid;
           
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 20px;
        }


        .card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column; 
            transition: transform 0.3s, box-shadow 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .card-content {
            padding: 20px;
            flex-grow: 1; /* コンテンツ部分が伸びる */
        }

        .card-title {
            font-size: 20px;
            margin: 0 0 10px 0;
        }

        .card-description {
            font-size: 15px;
            margin: 0;
            color: #555;
        }
            .card-image {
                width: 100%;
                height: 180px;
                object-fit: cover; 
                display: block;
            }


        .card-footer {
            padding: 0 20px 20px;
            border-top: 1px solid var(--border-color);
            margin-top: 15px; 
        }

        .tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: 700;
            margin-right: 5px;
            margin-top: 10px; 
        }


        .tag.oss { background-color: #e6f7ff; color: #096dd9; }
        .tag.platform { background-color: #f6ffed; color: #52c41a; }
        .tag.lang { background-color: #fff1f0; color: #f5222d; }
        .tag.license { background-color: #fff1f0; color: #f5222d; }
        .tag.proprietary { background-color: #f5f5f5; color: #595959; }
        .tag.model { background-color: #fff0f6; color: #eb2f96; }
        .tag.hina { background-color: #fff0f6; color: #2fa6eb; }

        .detail-link {
            display: block;
            text-align: right;
            font-size: 14px;
            font-weight: bold;
            padding-top: 10px;
            border-top: 1px solid #eee;
            color: var(--primary-color);
        }


        .site-footer {
            background-color: #333;
            color: #ccc;
            padding: 30px 20px;
            text-align: center;
            font-size: 14px;
            margin-top: 50px;
        }
        
        .site-footer a {
            color: #aaa;
            margin: 0 10px;
        }
        
        .footer-nav {
            margin-bottom: 15px;
        }
        
        .copyright {
            margin-top: 10px;
        }