/*
         * リセットCSSと基本設定
         */
        :root {
            /* 基本色 */
            --primary-color: #000;
            --secondary-color: #6c757d;
            --success-color: #28a745;
            --light-color: #f8f9fa;
            --dark-color: #343a40;
            /* タイポグラフィ */
            --font-family-base: 'Helvetica Neue', Arial, sans-serif;
            --font-size-base: 16px;
        }

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

        body {
            font-family: var(--font-family-base);
            font-size: var(--font-size-base);
            line-height: 1.6;
            color: var(--dark-color);
            background-color: var(--light-color);
        }

        /*
         * レイアウトとコンポーネント
         */
        .container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* ヘッダー */
        .header {
            background-color: var(--dark-color);
            color: var(--light-color);
            padding: 1rem 0;
            text-align: center;
        }

        .header h1 {
            font-size: 1.8rem;
        }

        /* メインコンテンツ */
        .main-content {
            padding: 2rem 0;
        }

        /* カウントダウンセクション */
        .countdown-section {
            text-align: center;
            padding: 3rem 1rem;
            background-color: var(--primary-color);
            color: white;
            margin-bottom: 2rem;
            border-radius: 8px;
font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;			
        }

        .countdown-section h2 {
            font-size: 2rem;
            margin-bottom: 1.5rem;
        }

        /* カウントダウンタイマーの表示スタイル */
        #countdown-timer {
			width: 100%;
            display: flex;
            justify-content: center;
            gap: 1rem; /* 要素間の隙間 */
            flex-wrap: wrap; /* 小さい画面で折り返す */
        }

        .time-unit {
            background-color: #444;
            padding: 1rem 0.1rem;
            border-radius: 4px;
            min-width: 90px;
        }

        .time-value {
            font-size: 3rem;
            font-weight: bold;
            display: block;
            line-height: 1;
        }

        .time-label {
            font-size: 1.5rem;
            display: block;
            margin-top: 0.5rem;
        }

        /* CTAボタン */
        .cta-button {
            display: inline-block;
            background-color: var(--success-color);
            color: white;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
            border-radius: 50px;
            font-size: 1.2rem;
            font-weight: bold;
            transition: background-color 0.3s ease;
            margin-top: 2rem;
            border: none;
            cursor: pointer;
        }

        .cta-button:hover {
            background-color: #1e7e34; /* success-colorより少し暗い色 */
        }

        /* フッター */
        .footer {
            text-align: center;
            padding: 1.5rem 0;
            background-color: var(--dark-color);
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        /*
         * レスポンシブデザイン（メディアクエリ）
         */

@media only screen and (max-width:750px){
	
        .countdown-section {
            padding: 1.5rem 1rem;
            margin-bottom: 1rem;	
        }	

            .countdown-section h2 {
                font-size: 2rem;
            }

            #countdown-timer {
                gap: 0.3rem; /* 隙間を広げる */
            }

            .time-unit {
                padding: 0.5rem;
                min-width: 70px;
            }

            .time-value {
                font-size: 2.5rem;
            }

            .time-label {
                font-size: 1.0rem;
            }

            .cta-button {
                font-size: 1.3rem;
                padding: 1rem 2.5rem;
            }
        }

        /* PC (1024px以上) */
        @media (min-width: 1024px) {
            .header h1 {
                font-size: 2.8rem;
            }

            .time-value {
                font-size: 4.5rem;
            }

            .time-unit {
                min-width: 130px;
            }
        }

        /*
         * 5. アクセシビリティ考慮
         */
        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            border: 0;
        }