/* ===================================================
   inquiry.css
   お問い合わせフォーム用スタイル
   =================================================== */

/* --- 全体・コンテナ --- */
body {
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* 既存の ID と margin-l20 を活用し、中央寄せと最大幅を設定 */
#inquiry.margin-l20 {
    max-width: 900px;
    margin: 0 auto; /* 中央寄せ */
    padding: 0 20px 50px 20px; /* 左右のパディング */
    box-sizing: border-box;
    text-align: center;
}

/* --- 見出し・説明文 --- */
/* 新しい page-title クラスにデザインを定義 */
.page-title {
    font-size: 34px; /* 34px に変更 */
    text-align: center;
    font-weight: bold;
    margin-top: 84px;
    /* 上部要素からのマージン 84px - 32px (form-descriptionの上マージン) */
    margin-bottom: 32px; /* form-description との間のマージン 32px */
    color: #4461b1;
}

/* 新しい form-description クラスにデザインを定義 */
.form-description {
    text-align: center;
    font-size: 20px;
    margin-bottom: 12px;
}

.note {
    text-align: center;
    font-size: 16px;
    /* form-descriptionからの間隔 32px があれば、下のマージンのみ44pxに設定 */
    margin-top: 0; 
    margin-bottom: 44px; /* 次の要素 (inquiry-tab) との間隔 44px */
}
.red{
    color: red
}
.bold{
    font-weight: bold;
}

/* --- フォームテーブル (inquiry-tab) --- */
.inquiry-tab {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ddd;
}

.inquiry-tab TR {
    border-bottom: 1px solid #ddd;
}
.inquiry-tab TR:last-child {
    border-bottom: none;
}

.inquiry-tab TH,
.inquiry-tab TD {
    padding: 15px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
    min-height: 70px; /* 高さの指定をCSSで適用 */
}

.inquiry-tab TH {
    width: 240px;
    background-color: #f9f9f9;
    font-weight: bold;
}

.inquiry-tab TD {
    background-color: #fff;
}

/* --- 必須バッジ --- */
/* 必須バッジのコンテナEMタグのデザイン */
.required-badge,
.required-badge-blue {
    font-style: normal;
    background-color: #e60033; /* 赤 */
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    font-family: sans-serif;
    padding: 3px 6px;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
    /* 元の*を非表示にする */
    position: relative;
    padding-left: 10px; 
    padding-right: 10px;
}

/* EMタグ内のSPANタグを完全に非表示 */
.required-badge .red,
.required-badge-blue .blue {
    display: none;
}


/* --- 案内行 --- */
.info-row TD {
    font-size: 14px;
    background-color: #fdfdfd;
    border-bottom: 1px solid #ddd;
}

/* --- 区切り行 --- */
.section-divider TH {
    background-color: #f0f0f0;
    text-align: center;
    padding-top: 50px; 
    padding-bottom: 20px;
    border-top: 2px solid #ccc;
    width: 100%;
    font-weight: bold;
}

/* --- 入力フィールド (既存要素のスタイル定義) --- */
/* INPUT[type="text"] のデザインを定義 */
INPUT[type="text"],
TEXTAREA,
/* 既存の sel_style を利用 */
.sel_style { 
    width: 100%;
    max-width: 500px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    font-family: inherit;
}

TEXTAREA {
    max-width: none;
    width: 100%;
    height: 150px;
    resize: vertical;
}

/* 選択式でない、その他の入力欄 */
.short-textarea {
    height: 80px;
    max-width: 500px;
}
.other-input {
    max-width: 500px;
}

#visi_age {
    width: 150px;
    max-width: 150px;
}

/* ラジオボタン・チェックボックス (既存クラスを利用) */
.radio_text,
.checkbox_text {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 10px;
    cursor: pointer;
}

/* チェックボックスのグループ化（新しいクラス）*/
.checkbox-group {
    display: flex;
    flex-wrap: wrap;
}

/* 見学希望日のリンク */
.visi-date-row .sel_style {
    max-width: 300px;
    margin-bottom: 10px;
}
.schedule-link {
    display: inline-block;
    margin-left: 15px;
    font-size: 14px;
}
.note-text {
    display: block;
    font-size: 13px;
    color: #777;
    margin-top: 5px;
}

/* --- 送信ボタン (既存クラスを利用) --- */

/* 1. ボタンのデザイン (前回の横長バージョンを維持) */
.send-button {
    /* テキスト設定 */
    color: white; 
    font-size: 18px; 
    font-weight: bold; 
    
    /* 横長にするためのパディング */
    padding: 12px 60px; 
    
    border: none; 
    
    /* 角丸と影 */
    border-radius: 25px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 

    /* グラデーションと色 */
    background: linear-gradient(to bottom, #7a9ce5, #4c6abf); 
    
    /* ホバー時のカーソル変更 (追加) */
    cursor: pointer; 
}


/* --- レスポンシブ (モバイル対応) --- */
@media (max-width: 768px) {
    #inquiry.margin-l20 {
        padding: 0 10px;
    }
    
    .page-title {
        font-size: 26px;
        margin-bottom: 20px;
    }

    /* テーブルを縦積みにする */
    .inquiry-tab TH,
    .inquiry-tab TD {
        display: block;
        width: 100%;
        padding: 10px;
    }

    .inquiry-tab TH {
        background-color: #fff;
        padding-bottom: 5px;
        border-bottom: none;
        min-height: auto;
    }
    
    .inquiry-tab TD {
        padding-top: 0;
        padding-bottom: 20px;
    }

    .inquiry-tab {
        border: none;
        border-top: 1px solid #ddd;
    }
    
    /* 入力欄の最大幅を解除 */
    INPUT[type="text"],
    TEXTAREA,
    .sel_style {
        max-width: none;
    }

    .checkbox-group {
        flex-direction: column;
    }
    
    .visi-date-row .sel_style {
        max-width: none;
    }
    .schedule-link {
        display: block;
        margin-left: 0;
        margin-top: 10px;
    }
}