/* -----------------------------------------------------------
   FSG Form Common Styles
   ----------------------------------------------------------- */

:root {
    --fsg-blue: #004BB1;
    --fsg-blue-hover: #003a8c;
    --fsg-line: #06C755;
    --fsg-line-hover: #05b34c;
    --fsg-orange: #FF8C00;
    --fsg-orange-hover: #e67e00;
    --text-main: #334155;
    --text-sub: #64748B;
    --bg-light: #f4f6f9;
    --error-red: #DC2626;
}

body {
    font-family: 'Poppins', 'Noto Sans JP', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-main);
    font-feature-settings: "palt";
    letter-spacing: 0.04em;
}

/* Typography & Colors */
.text-fsg-blue { color: var(--fsg-blue) !important; }
.bg-fsg-blue { background-color: var(--fsg-blue) !important; }

/* Buttons */
.btn-fsg {
    background-color: var(--fsg-blue);
    color: white;
    border: none;
    transition: all 0.2s;
}
.btn-fsg:hover {
    background-color: var(--fsg-blue-hover);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 75, 177, 0.2);
}
.btn-fsg-orange {
    background-color: var(--fsg-orange);
}
.btn-fsg-orange:hover {
    background-color: var(--fsg-orange-hover);
}
.btn-line {
    background-color: var(--fsg-line);
    color: white;
    border: none;
}
.btn-line:hover {
    background-color: var(--fsg-line-hover);
    color: white;
}

/* Form Controls */
.form-control, .form-select {
    padding: 0.8rem 1rem;
    border-radius: 0.5rem;
    border-color: #e2e8f0;
}
.form-control:focus, .form-select:focus {
    border-color: var(--fsg-blue);
    box-shadow: 0 0 0 0.25rem rgba(0, 75, 177, 0.1);
}

/* Badges */
.badge-required {
    background-color: #FEF2F2;
    color: var(--error-red);
    border: 1px solid #FECACA;
    font-size: 0.7em;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
    margin-left: 0.5em;
    vertical-align: middle;
}
.badge-any {
    background-color: #F1F5F9;
    color: var(--text-sub);
    border: 1px solid #E2E8F0;
    font-size: 0.7em;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
    margin-left: 0.5em;
    vertical-align: middle;
}
.badge-line-synced {
    background-color: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
    font-size: 0.7em;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    margin-left: 0.5em;
    font-weight: bold;
}

/* Components */
.card-custom {
    border: 1px solid #f1f5f9;
    box-shadow: 0 10px 40px -10px rgba(0,0,0,0.05);
    border-radius: 1rem;
}
.section-header {
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-step {
    background-color: var(--fsg-blue);
    color: white;
    font-size: 0.7em;
    padding: 0.2em 0.8em;
    border-radius: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Radio Buttons Custom */
.gender-radio-label {
    cursor: pointer;
    padding: 0.6rem 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    color: var(--text-sub);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}
input[type="radio"]:checked + .gender-radio-label.male {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
input[type="radio"]:checked + .gender-radio-label.female {
    background-color: #ec4899;
    color: white;
    border-color: #ec4899;
}
input[type="radio"]:checked + .gender-radio-label.bus-yes {
    background-color: var(--fsg-blue);
    color: white;
    border-color: var(--fsg-blue);
}

/* Utilities */
.error-msg {
    color: var(--error-red);
    font-size: 0.8em;
    font-weight: 700;
    margin-top: 0.25rem;
}
.input-icon-label .fa-solid {
    color: var(--fsg-blue);
    opacity: 0.8;
    margin-right: 0.4em;
}
[x-cloak] { display: none !important; }

/* Footer */
footer {
    background-color: #111827;
    border-top: 1px solid #1f2937;
}
footer a {
    text-decoration: none;
    color: #9ca3af;
}
footer a:hover { color: white; }

.error_message{ color:var(--error-red);  margin-top:0.25rem; font-weight: bold;}


/* プレースホルダーの文字色を変更する設定 */
input::placeholder,
textarea::placeholder {
    color: #94a3b8 !important; /* ← ここに好きな色を指定してください（現在は薄いグレー） */
    opacity: 1; /* Firefox対策 */
}

/* IE11, Edge用（必要であれば） */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #94a3b8 !important;
}


.gender-radio-label {
    cursor: pointer;
    padding: 0.6rem 2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    background-color: #f8fafc;
    color: #64748b;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}
input[type="radio"]:checked + .gender-radio-label.male {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}
input[type="radio"]:checked + .gender-radio-label.female {
    background-color: #ec4899;
    color: white;
    border-color: #ec4899;
}
input[type="radio"]:checked + .gender-radio-label.bus-yes {
    background-color: #004BB1; /* var(--fsg-blue) */
    color: white;
    border-color: #004BB1;
}
.badge-any {
    background-color: #F1F5F9;
    color: #64748B;
    border: 1px solid #E2E8F0;
    font-size: 0.7em;
    padding: 0.2em 0.6em;
    border-radius: 50rem;
    margin-left: 0.5em;
    vertical-align: middle;
}




/* 送迎バス：選択時のボタンスタイル（Alpine.js連動） */
.active-bus-no {
    background-color: #6c757d !important;
    color: #ffffff !important;
    border-color: #6c757d !important;
}
.active-bus-yes {
    background-color: #0d6efd !important; /* 利用する は青色 */
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

/* =========================================
           f_checkboxes 用のカスタムスタイリング
========================================= */
.custom-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem; /* ボタン間の余白 */
}

/* ① 実際のチェックボックス（丸ポチ）は非表示にする */
.custom-checkbox-group input[type="checkbox"] {
    display: none;
}

/* ② ラベル全体を「押しやすいカード型ボタン」に装飾する */
.custom-checkbox-group label {
    display: inline-flex;
    align-items: flex-start;
    width: 100%; /* スマホでは1行に1つ（縦並び） */
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 500;
    color: #495057;
    transition: all 0.2s ease;
    line-height: 1.4;
}

/* PCやタブレットでは2カラム（半分ずつ）にする */
@media (min-width: 768px) {
    .custom-checkbox-group label {
        width: calc(50% - 0.375rem); /* gapの半分を引いてぴったり収める */
    }
}

/* ③ チェックマーク（四角）をCSSの擬似要素で自作する */
.custom-checkbox-group label::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    border: 2px solid #adb5bd;
    border-radius: 0.25rem;
    background-color: #fff;
    flex-shrink: 0;
    margin-top: 0.1rem;
    transition: all 0.2s ease;
}

/* ホバー（マウスオーバー）時の効果 */
.custom-checkbox-group label:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

/* ④ チェックされた時のスタイル（背景色と枠線を青にする） */
.custom-checkbox-group input[type="checkbox"]:checked + label {
    background-color: #f0f7ff; 
    border-color: #0d6efd; 
    color: #084298;
}

/* ⑤ チェックされた時のチェックマークの見た目（青背景＋白チェック） */
.custom-checkbox-group input[type="checkbox"]:checked + label::before {
    background-color: #0d6efd;
    border-color: #0d6efd;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
    background-size: cover;
}


/* =========================================
   確認画面全体の装飾（CMS出力HTMLの上書き）
   ========================================= */

/* CMSが勝手に出力する不要な改行タグを非表示にして隙間を詰める */
form[name="c_f_form_open1"] br {
    display: none;
}

/* ▼ 外側のラッパー（カード風のデザインにする） */
form[name="c_f_form_open1"] > .confirm {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    border: 1px solid #dee2e6;
}

/* 確認画面のタイトルと説明文 */
form[name="c_f_form_open1"] > .confirm > h3 {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    color: #212529;
    margin-bottom: 0.5rem;
}

form[name="c_f_form_open1"] > .confirm > p {
    text-align: center;
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f8f9fa;
}

/* ▼ 内側の各項目（1行ごとのまとまり） */
form[name="c_f_form_open1"] .confirm .confirm {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    padding: 1rem 0;
    border-bottom: 1px dashed #e9ecef;
}

/* 最後の項目の下線を消す */
form[name="c_f_form_open1"] .confirm .confirm:last-of-type {
    border-bottom: none;
}

/* 項目名（◆ 学校名 など） */
form[name="c_f_form_open1"] .confirm_title {
    font-weight: 700;
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* 入力された内容 */
form[name="c_f_form_open1"] .confirm_content {
    color: #212529;
    font-size: 1rem;
    font-weight: 500;
    word-break: break-word; /* 長いテキストの折り返し */
}

/* エリア全体のレイアウト制御 */
.submitArea {
    display: flex;
    flex-direction: column; /* スマホでは縦並び */
    gap: 1rem; /* ボタン間の余白 */
    margin-top: 2rem;
    margin-bottom: 2rem;
}

/* CMSが出力する不要な改行を無効化 */
.submitArea br {
    display: none;
}

/* ボタン共通設定（入力画面の .btn-fsg に寄せる） */
.submitArea input[type="submit"] {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    /* iOS特有のボタン装飾をリセット */
    appearance: none;
    -webkit-appearance: none;
}

/* ▼ 送信ボタン（プライマリー） */
.submitArea .f_s {
    background-color: #FF8C00; /* var(--fsg-orange) */
    color: #ffffff;
    border: none;
}

.submitArea .f_s:hover {
    background-color: #e67e00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.2);
}

/* ▼ 戻るボタン（セカンダリー：目立ちすぎないように白ベース） */
.submitArea .f_d {
    background-color: #f8fafc;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.submitArea .f_d:hover {
    background-color: #f1f5f9;
    color: #334155;
}


/* =========================================
   PC・タブレット時のレイアウト（横並び）
   ========================================= */
@media (min-width: 768px) {
    form[name="c_f_form_open1"] .confirm .confirm {
        flex-direction: row; /* PCでは左に項目名、右に内容 */
        align-items: flex-start;
    }
    
    form[name="c_f_form_open1"] .confirm_title {
        width: 35%; /* 左側の幅 */
        margin-bottom: 0;
        padding-right: 1.5rem;
    }
    
    form[name="c_f_form_open1"] .confirm_content {
        width: 65%; /* 右側の幅 */
    }
    .submitArea {
        flex-direction: row-reverse; /* 送信を右、戻るを左に配置 */
        justify-content: center;
        gap: 1.5rem;
    }
    .submitArea input[type="submit"] {
        width: 48%; /* 横幅を半分ずつにする */
        max-width: 300px; /* 広がりすぎないように制限 */
    }
}