/* 全体設定: フォント、背景色、レイアウト */
    body {
        font-family: 'Inter', sans-serif;
        background-color: #f5f7fa; /* より明るい背景色 */
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        align-items: flex-start; /* 上部に揃える */
        min-height: 100vh;
        padding: 5px;
        box-sizing: border-box;
    }

    /* フォームコンテナのスタイル */
    .form-container {
        background-color: #ffffff;
        padding: 1rem;
        border-radius: 10px; /* 少し角を丸くする */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08), 0 15px 30px rgba(0, 0, 0, 0.05); /* よりソフトな影 */
        max-width: 100%; /* 最大幅 */
        width: 100%; /* 親要素の幅に合わせる */
        border: 1px solid #e0e6ed; /* 明るいボーダー */
        margin-left: 15px;
        margin-right: auto;
    }

    /* フォームタイトルのスタイル */
    .form-title {
        color: #2c3e50; /* よりソフトなタイトル色 */
        font-size: 1.3rem; /* 微調整 */
        font-weight: 600;
        margin-bottom: 0.8rem;
        text-align: center;
    }

    /* セクションタイトルのスタイル */
    .section-title {
        color: #34495e; /* よりソフトなセクションタイトル色 */
        font-size: 0.875rem; /* 微調整 */
        font-weight: 600;
        margin-top: 0.8rem;
        margin-bottom: 0.5rem;
        border-bottom: 1px solid #dcdfe4; /* 明るいボーダー */
        padding-bottom: 0.25rem;
        display: flex; /* Flexboxを有効にして子要素を横並びにする */
        align-items: center; /* 垂直方向の中央に配置 */
        flex-wrap: wrap; /* 必要に応じて折り返しを許可 */
    }

    /* 各フォームグループ（ラベルと入力フィールドのセット）のスタイル */
    .form-group {
        display: flex;
        align-items: flex-start;
        margin-bottom: 0.5rem;
    }

    /* 左寄せラベルのスタイル */
    .form-label-left {
        min-width: 110px; /* 最小幅 */
        font-size: 0.7rem; /* 微調整 */
        color: #6c757d; /* よりソフトなラベル色 */
        font-weight: 500;
        padding-top: 0.25rem; /* 微調整 */
        margin-right: 0.5rem;
        flex-shrink: 0;
        line-height: 1.2;
    }

    /* 入力コンテナのスタイル */
    .form-input-container {
        flex-grow: 1; /* 残りのスペースを埋める */
    }

    /* 固定幅の入力フィールド（名前、会社名、メールなど）の最大幅 */
    .input-fixed-width {
        max-width: 300px;
    }

    /* 幅を狭める入力フィールド（セレクトボックスなど）の最大幅 */
    .input-narrow-width {
        max-width: 450px; /* 希望の幅に調整してください */
    }

    /* テキスト入力、メール、電話、セレクトボックス、テキストエリアの共通スタイル */
    .form-group input[type="text"],
    .form-group input[type="email"],
    .form-group input[type="tel"],
    .form-group select,
    .form-group textarea {
        border: 1px solid #ced4da;
        border-radius: 4px; /* 微調整 */
        padding: 0.3rem 0.5rem; /* 微調整 */
        font-size: 0.7rem; /* 微調整 */
        color: #495057; /* 微調整 */
        width: 100%; /* 親要素の幅に合わせる */
        box-sizing: border-box;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    /* フォーカス時の入力フィールドのスタイル */
    .form-group input[type="text"]:focus,
    .form-group input[type="email"]:focus,
    .form-group input[type="tel"]:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #6a9ce4; /* よりはっきりした青 */
        box-shadow: 0 0 0 3px rgba(106, 156, 228, 0.2); /* 柔らかい青い光 */
    }

    /* ラジオボタンとチェックボックスグループの共通スタイル */
    .radio-group,
    .checkbox-group {
        display: flex;
        flex-wrap: wrap; /* 折り返しを許可 */
        gap: 0.4rem; /* 要素間のスペース */
        padding-top: 0.25rem;
    }

/* ラジオボタンとチェックボックスのラベルのスタイル */
        /* これらのスタイルは .radio-item-container または .checkbox-item-container に移動されるため、ここで調整 */
        .radio-group label,
        .checkbox-group label {
            display: flex;
            align-items: center;
            font-weight: normal;
            font-size: 0.7rem; /* 微調整 */
            cursor: pointer;
            margin-bottom: 0;
            line-height: 1.2; /* 微調整 */
            /* 枠線、パディング、背景、シャドウ、トランジションはコンテナで定義 */
            border: none; /* 削除または変更 */
            padding: 0; /* 削除または変更 */
            background-color: transparent; /* 削除または変更 */
            box-shadow: none; /* 削除または変更 */
            transition: none; /* 削除または変更 */
        }

    /* ラジオボタンとチェックボックスのラベルのホバースタイル */
    /* ホバースタイルは .checkbox-item-container に移動 */
    .radio-group label:hover,
    .checkbox-group label:hover {
        background-color: transparent; /* リセット */
        border-color: transparent; /* リセット */
        box-shadow: none; /* リセット */
        transform: none; /* リセット */
    }

    /* 選択されたラジオ/チェックボックスのスタイル */
    /* 選択時のスタイルは .checkbox-item-container に移動 */
    .radio-group label:has(input[type="radio"]:checked),
    .checkbox-group label:has(input[type="checkbox"]:checked) {
        background-color: transparent; /* リセット */
        border-color: transparent; /* リセット */
        box-shadow: none; /* リセット */
    }

    /* ラジオボタンとチェックボックスの入力要素のスタイル */
    .radio-group input[type="radio"],
    .checkbox-group input[type="checkbox"] {
        margin-right: 0.25rem; /* 微調整 */
        transform: scale(0.85); /* 微調整 */
        flex-shrink: 0;
        vertical-align: middle;
    }

    /* 「StiLL」をどこで知ったかのグリッドレイアウト */
    .still-info-grid {
        display: grid;
        /* 各列の最小幅を200pxに設定し、コンテナの幅に合わせて自動調整 */
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 0.4rem; /* 要素間のスペース */
        width: 600px; /* still-info-gridの横幅を固定 */
        max-width: 100%; /* 画面幅が固定幅より小さい場合は100%にする */
        margin: 0 auto; /* 中央寄せ */
    }

    /* still-info-grid内のラベルのスタイル */
    .still-info-grid label {
        width: 100%; /* グリッドアイテムの幅に合わせる */
        font-size: 0.625rem; /* 微調整 */
        line-height: 1.15; /* 微調整 */
        border: 1px solid #e9ecef; /* より明るいボーダー */
        border-radius: 5px; /* 微調整 */
        padding: 0.3rem 0.6rem; /* 微調整 */
        background-color: #fdfdfd; /* より明るい背景 */
        transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s ease-out; /* トランジションを追加 */
        box-shadow: 0 1px 2px rgba(0,0,0,0.03); /* subtle initial shadow */
    }

    /* still-info-grid内のラベルのホバースタイル */
    .still-info-grid label:hover {
        background-color: #e2e8f0;
        border-color: #a7bedc;
        box-shadow: 0 2px 5px rgba(0,0,0,0.06);
        transform: translateY(-2px); /* わずかに浮き上がる効果 */
    }

    /* still-info-grid内の選択されたラジオボタンのスタイル */
    .still-info-grid label:has(input[type="radio"]:checked) {
        background-color: #e0f2fe; /* 選択時の背景色 */
        border-color: #2196f3; /* 選択時のボーダー色 */
        box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2); /* 選択時の影を強調 */
    }

    /* still-info-grid内のラジオボタンの入力要素のスタイル */
    .still-info-grid input[type="radio"] {
        transform: scale(0.75); /* 微調整 */
        vertical-align: middle;
    }

    /* 情報テキストのスタイル */
    .info-text {
        font-size: 0.755rem; /* 微調整 */
        color: #828a96; /* より目に優しい情報テキスト色 */
        margin-bottom: 0.5rem; /* 微調整 */
        line-height: 1.2; /* 微調整 */
    }

    /* 赤色の情報テキスト（注意書きなど）のスタイル */
    .info-text.text-red-600 { /* 注意書きの赤色も微調整 */
        color: #dc3545;
    }

    /* ボタングループのスタイル */
    .button-group {
        display: flex;
        justify-content: center; /* 中央寄せ */
        gap: 0.7rem; /* ボタン間のスペース */
        margin-top: 1rem;
    }

    /* ボタンの共通スタイル */
    .button-group button {
        padding: 0.4rem 1.1rem; /* 微調整 */
        border-radius: 6px; /* 微調整 */
        font-size: 0.85rem; /* 微調整 */
        font-weight: 600;
        cursor: pointer;
        transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s ease-out; /* トランジションを追加 */
    }

    /* リセットボタンのスタイル */
    .button-group button[type="reset"] {
        background-color: #f0f4f7; /* リセットボタンの背景色を少し明るく */
        color: #55606b; /* リセットボタンのテキスト色を調整 */
        border: 1px solid #ced4da;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }

    /* リセットボタンのホバースタイル */
    .button-group button[type="reset"]:hover {
        background-color: #e2e8f0;
        box-shadow: 0 3px 6px rgba(0,0,0,0.08);
        transform: translateY(-1px); /* わずかに浮き上がる効果 */
    }

    /* 送信ボタンのスタイル */
    .button-group button[type="submit"] {
        background-image: linear-gradient(to bottom right, #63b3ed, #4299e1); /* グラデーション */
        color: white;
        border: none;
        width: 300PX;
        box-shadow: 0 4px 10px rgba(66, 153, 225, 0.2); /* グラデーションに合わせた影 */
    }

    /* 送信ボタンのホバースタイル */
    .button-group button[type="submit"]:hover {
        background-image: linear-gradient(to bottom right, #4299e1, #3182ce); /* ホバーでグラデーションを変化 */
        box-shadow: 0 6px 15px rgba(66, 153, 225, 0.3);
        transform: translateY(-1px); /* わずかに浮き上がる効果 */
    }

    /* 横並びのフレックスコンテナのスタイル */
    .flex-row {
        display: flex;
        gap: 0.7rem;
        flex-wrap: wrap;
    }
    .flex-row > div {
        flex: 1;
        min-width: 160px;
    }

    /* 幅100%の要素のスタイル */
    .full-width {
        width: 100%;
    }

    /* 各チェックボックス項目を囲むコンテナ */
    .checkbox-item-container {
        display: block; /* ブロック要素としてスタック */
        width: 60%; /* 親要素の幅いっぱいに広がる */
        border: 1px solid #e9ecef;
        border-radius: 5px;
        padding: 0.3rem 0.6rem;
        background-color: #fdfdfd;
        transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s ease-out;
        box-shadow: 0 1px 2px rgba(0,0,0,0.03);
        margin-bottom: 0.4rem; /* 各項目の下部にスペースを追加 */
    }

    /* ホバー時のスタイルをコンテナに適用 */
    .checkbox-item-container:hover {
        background-color: #e2e8f0;
        border-color: #a7bedc;
        box-shadow: 0 2px 5px rgba(0,0,0,0.06);
        transform: translateY(-2px);
    }

    /* チェックされた時のスタイルをコンテナに適用 */
    .checkbox-item-container:has(input[type="checkbox"]:checked) {
        background-color: #e0f2fe;
        border-color: #2196f3;
        box-shadow: 0 2px 5px rgba(33, 150, 243, 0.2);
    }

    /* チェックボックスの詳細説明部分のスタイル */
    .checkbox-sub-details {
        margin-top: 0.2rem;
        margin-left: 1.5rem; /* インデント */
        font-size: 0.75rem; /* 見出しと同じフォントサイズ */
        line-height: 1.4;
        color: #495057;
    }

    /* 詳細説明内の各行をブロック要素として表示 */
    .checkbox-sub-details span {
        display: block;
        margin-left: 0; /* 親要素でインデントするためリセット */
    }

    /* レスポンシブ調整: 画面幅640px以下の場合 */
    @media (max-width: 640px) {
        /* フォームグループのレイアウトを縦積みに変更 */
        .form-group {
            flex-direction: column;
            align-items: flex-start;
        }
        /* 左寄せラベルのスタイル調整 */
        .form-label-left {
            min-width: unset;
            width: 100%;
            margin-right: 0;
            margin-bottom: 0.1rem;
            padding-top: 0;
        }
        /* 入力コンテナの幅を100%に */
        .form-input-container {
            width: 100%;
        }
        /* 固定幅の入力フィールドの最大幅を100%に */
        .input-fixed-width,
        .input-narrow-width { /* モバイルでは幅を100%に */
            max-width: 100%;
        }
        /* ラジオボタンとチェックボックスグループのスタイル調整 */
        .radio-group,
        .checkbox-group {
            padding-top: 0;
            width: 100%;
        }
        /* still-info-gridのグリッドレイアウト調整 */
        .still-info-grid {
            /* 各列の最小幅を120pxに設定 */
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            width: 100%; /* 小画面では100%に */
            max-width: 100%; /* 小画面では100%に */
        }
        /* ラジオボタン、チェックボックス、still-info-grid内のラベルのパディングとフォントサイズを調整 */
        .radio-group label,
        .still-info-grid label {
            padding: 0.2rem 0.4rem; /* 小画面でさらにパディングを減らす */
            font-size: 0.6rem; /* 小画面でさらにフォントを減らす */
        }
        /* ラジオボタンとチェックボックスの入力要素のサイズを調整 */
        .radio-group input[type="radio"],
        .checkbox-group input[type="checkbox"],
        .still-info-grid input[type="radio"] {
            transform: scale(0.7); /* 小画面でさらに小さく */
        }
        /* ボタンのパディングとフォントサイズを調整 */
        .button-group button {
            padding: 0.3rem 0.8rem;
            font-size: 0.7rem;
        }
        /* チェックボックス項目コンテナのモバイル調整 */
        .checkbox-item-container {
            padding: 0.2rem 0.4rem;
            margin-bottom: 0.3rem;
        }
        /* チェックボックスの詳細説明のモバイル調整 */
        .checkbox-sub-details {
            font-size: 0.7rem; /* モバイルでのフォントサイズを調整 */
            margin-left: 1rem; /* モバイルでのインデントを調整 */
        }
    }
    .input-partner-company-width {
        max-width: 500px; /* 希望の幅に調整してください */
    }
    /* コメント入力フィールドの最大幅 */
    .input-comments-width {
        max-width: 500px; /* 希望の幅に調整してください */
    }
    /* 各ラジオボタン項目を囲むコンテナ (新しく追加) */
    .radio-item-container {
        flex: 0 0 auto; /* コンテンツの幅に合わせて伸縮し、成長しない */
        border: 1px solid #e9ecef; /* 薄いグレーの枠線 */
        border-radius: 5px; /* 角を丸くする */
        padding: 0.3rem 0.6rem; /* 内側の余白 */
        background-color: #fdfdfd; /* わずかにオフホワイトの背景色 */
        transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s ease-out; /* ホバーや選択時のアニメーション */
        box-shadow: 0 1px 2px rgba(0,0,0,0.03); /* 軽い影 */
    }
    /* ラジオボタン項目コンテナのホバースタイル */
    .radio-item-container:hover {
        background-color: #e2e8f0; /* ホバー時に背景色を少し濃くする */
        border-color: #a7bedc; /* ホバー時に枠線の色を強調する */
        box-shadow: 0 2px 5px rgba(0,0,0,0.06); /* ホバー時に影を強調する */
        transform: translateY(-2px); /* ホバー時にわずかに上に移動する（浮き上がる効果） */
    }