:root {
            /* 背景・基本カラー */
            --bg-color: #F6F5F2; /* 全体の背景色 */
            --header-bg-color: #B5A596; /* ヘッダーの背景色 */
            --header-text-color: #FFFFFF; /* ヘッダーの文字色 */
            --text-color-main: #333333; /* メインテキスト色 */
            --text-color-alert: #FF0000; /* 注意書きの赤色 */
            
            /* チェックボックス関連 */
            --checkbox-size: 28px; /* チェックボックスのサイズ */
            --checkbox-border-color: #C2B6A9; /* OFF時の枠線色 */
            --checkbox-bg-off: #FFFFFF; /* OFF時の背景色 */
            --checkbox-bg-on: #B5A596; /* ON時の背景色 */
            --checkbox-check-color: #FFFFFF; /* チェックマークの色 */
            
            /* ボタン関連 */
            --btn-bg-disabled: #C4C4C4; /* 非活性ボタンの背景色 */
            --btn-text-disabled: #777777; /* 非活性ボタンの文字色 */
            --btn-bg-active: #fad8a8; /* 活性ボタンの背景色 */
            --btn-text-active: #5C4A3D; /* 活性ボタンの文字色 */
            
            /* フォントサイズ・余白基準 */
            --font-size-base: 16px;
            --font-size-small: 14px;
            --spacing-base: 1rem;
        }


        .alert-text {
            color: var(--text-color-alert);
            font-size: var(--font-size-small);
            font-weight: bold;
            margin-bottom: 2rem;
        }
.sub-description {
            margin-top: 2rem;
            margin-bottom: 0.5rem;
            font-weight: bold;
        }
        .consent-item {
            background-color: #FFFFFF;
            padding: 1.5rem;
            margin-bottom: 1rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: background-color 0.2s;
        }

        /* ネイティブのチェックボックスを隠す */
        .custom-checkbox-input {
            position: absolute;
            opacity: 0;
            width: 0;
            height: 0;
        }

        /* カスタムチェックボックスの外観 (ラベルに付随する要素として作成) */
        .custom-checkbox-box {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: var(--checkbox-size);
            height: var(--checkbox-size);
            min-width: var(--checkbox-size);
            background-color: var(--checkbox-bg-off);
            border: 2px solid var(--checkbox-border-color);
            border-radius: 4px;
            margin-right: 1rem;
            transition: all 0.2s ease-in-out;
            position: relative;
        }

        /* チェックマーク (疑似要素で作成) */
        .custom-checkbox-box::after {
            content: '';
            position: absolute;
            display: none; /* 初期状態は非表示 */
            left: 30%;
            top: 15%;
            width: 40%;
            height: 55%;
            border: solid var(--checkbox-check-color);
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        /* ON (Checked) 状態のスタイル */
        .custom-checkbox-input:checked + .custom-checkbox-box {
            background-color: var(--checkbox-bg-on);
            border-color: var(--checkbox-bg-on);
        }

        /* ON (Checked) 状態でチェックマークを表示 */
        .custom-checkbox-input:checked + .custom-checkbox-box::after {
            display: block;
        }

        /* フォーカス時のスタイル (アクセシビリティ対応) */
        .custom-checkbox-input:focus-visible + .custom-checkbox-box {
            outline: 2px solid #4A90E2;
            outline-offset: 2px;
        }

        .consent-label-text {
            font-size: 1.2rem;
            display: flex;
            align-items: center;
            width: 100%;
        }

        .pdf-link {
            color: var(--text-color-main);
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transition: opacity 0.2s ease;
        }

        .pdf-link:hover {
            opacity: 0.6;
        }

        .icon-document {
            display: inline-block;
            width: 20px;
            height: 20px;
            margin-left: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
        }

        .submit-btn-wrapper {
            text-align: center;
            margin-top: 3rem;
            margin-bottom: 3rem;
        }


.submit-btn {
    cursor: not-allowed; /* 初期状態クリック不可 */
    background-color: var(--btn-bg-disabled);
    color: var(--btn-text-disabled);
    background-image: url(../img/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 21px;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    font-size: 1.16666666667rem;
    line-height: 1;
    width: 90%;
    padding: 2rem 0;
    margin: 2rem auto 5rem;
    
}

        .submit-btn.is-active {
            background-color: var(--btn-bg-active);
            color: var(--btn-text-active);
            cursor: pointer;
        }

        .submit-btn.is-active .btn-arrow::after {
            border-color: var(--btn-text-active);
        }

        .submit-btn.is-active:hover {
            opacity: 0.9;
        }

.submit-btn.is-active a{color: #604830;}

 @media (max-width: 600px) {
            .submit-btn {
                font-size: 1.1rem;
            }
            .btn-arrow {
                right: 1rem;
            }
        }