@charset "utf-8";
/*
/* 
 * HTML5 ✰ Boilerplate	
 *
 * 以下は、クロスブラウザースタイリングに関する多くのリサーチの結果です。
 * Nicolas Gallagher、Jonathan Neal、
 * Kroc Camen および H5BP 部門のコミュニティとチームの貢献に対してここに心より感謝申し上げます。
 *
 * この CSS について詳しくは、h5bp.com/css を参照してください
 * 
 * Dreamweaver の変更点 : 
 * 1. 選択ハイライトをコメントアウトしました
 * 2. メディアクエリセクションを削除しました (別のファイルに独自のセクションを追加)
 *
 * ==|== 正規化 ==========================================================
 */


/* =============================================================================
   HTML5 表示定義
   ========================================================================== */

        :root {
            --main-red: #e60012; /* CTA用の赤色 */
            --text-white: #ffffff;
            --border-gray: #ccc;
        }

        .form-container {
            margin:0 auto;
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 400px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            font-size: 14px;
        }

        select {
            width: 100%;
            padding: 12px;
            border: 1px solid var(--border-gray);
            border-radius: 4px;
            font-size: 16px;
            appearance: none; /* デフォルトの矢印を消してカスタム化可能に */
            background-color: #fff;
            cursor: pointer;
        }

        /* CTAボタンのスタイル（aタグをボタン化） */
        .cta-button {
            display: block;
            background-color: var(--main-red);
            color: var(--text-white);
            text-align: center;
            text-decoration: none;
            padding: 18px 10px;
            border-radius: 50px; /* 丸みのあるボタン */
            font-size: 18px;
            font-weight: bold;
            transition: opacity 0.3s, transform 0.1s;
            box-shadow: 0 4px 0 #b3000e; /* 立体感 */
        }

        .cta-button:hover {
            opacity: 0.9;
        }

        .cta-button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 #b3000e;
        }

        .error-msg {
            color: var(--main-red);
            font-size: 12px;
            margin-top: 5px;
            display: none;
        }