@charset "utf-8";
/* bform
------------------------------------------------------------*/

/* ========================================================= */
/* 1. 全体共通の基本スタイル */
/* ========================================================= */

span.note {
	color: #ff4500;
}

.wpcf7 p {
	border-bottom-width: 0;
}

.highlight {
	font-weight: bold;
	color: #454545;
}

/* 見出しのスタイル */
h3 {
    margin-top: 0px;
    padding: 10px 15px;
    background: #4287f5;
	border-bottom-width: 0;
	color: #fffafa;
	font-weight: bold;
    font-size: 1.4em; /* スマホでは少し小さく */
	letter-spacing: 0.06em;
    margin-bottom: 20px;
}

h3.kakuninhissu {
	background: #ff4500;
}

/* フォームのセクション区切り */
.form-section {
    padding: 10px;
    margin-bottom: 25px;
/*    border: 1px dashed #ddd;	*/
    border-radius: 5px;
    background-color: #f0f8ff;
}

.kakuninhissu-section {
	background-color: #fff;
}

/* 必須項目のマーク */
.required-note {
    color: #ff4500;
    font-size: 0.9em;
    margin-left: 5px;
}

/* ラベル全体（氏名など） */
label {
    display: block;
    margin-bottom: 15px;
    font-size: 0.95em;
}

div.kakuninitems label {
	white-space: normal;
/*	background: #ff0;	*/
}

label input[type="checkbox"] {
	width: 20px;
	height: 20px;
	margin: 5px 8px 8px 0;
	vertical-align: top;
}
div.kakuninitems label input[type="checkbox"] {
	display: inline-block;
	background: #f0f;
/*	margin: 8px 8px 8px 0;
	vertical-align: top;
	width: 20px;
	height: 20px;	*/
}

div.kakuninitems label span {
	white-space: normal;
    display: inline-block;
	width: 90%;
}

/* 入力フィールド、セレクトボックスの共通スタイル */
.wpcf7-form-control-wrap {
/*	margin-left: 20px;	*/
}

.wpcf7-form-control:not(.wpcf7-radio):not(.wpcf7-checkbox) {
    width: 100%; /* スマホでは全幅に */
    padding: 10px;
    border: 1px solid #333;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 5px; /* ラベルの下にスペース */
}

/* フォーカス時のスタイル */
.wpcf7-form-control:focus {
    border-color: #1e90ff;
    box-shadow: 0 0 5px rgba(30, 144, 255, 0.5);
    outline: none;
}

/* wide-input (氏名、住所など) - スマホでは100% */
.wide-input {
    max-width: none !important; 
}

/* ラジオボタン・チェックボックスのリスト */
.wpcf7-list-item {
    display: inline-block;
    margin-right: 15px;
    white-space: nowrap; /* 項目名が途中で改行しないように */
}

/* ========================================================= */
/* 2. 世帯人数 (household-section) - レスポンシブ対応の核 */
/* ========================================================= */

p.width100 {
	width: 100%;
	font-weight: bold;
}

.household-section {
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between; /* 均等な配置 */
    gap: 15px 0; /* 縦と横の隙間 */
    padding: 15px;
}

/* 全体の見出しは全幅を占める */
.household-section h3 {
    width: 100%;
    margin-top: 0;
    margin-bottom: 15px;
}

.field-group {
    /* スマホ（幅600px未満）では2列表示 */
    flex: 0 0 calc(50% - 10px); /* 10pxはgapを考慮 */
    box-sizing: border-box;
    padding-right: 5px; /* 右側にわずかなスペース */
}

.field-group p {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 3px;
	color: #3d4757;
}

.setaielem {
    /* selectタグの幅調整 */
    width: 95% !important; 
}


/* ========================================================= */
/* 3. 金額入力（inline-group） - レスポンシブ対応 */
/* ========================================================= */

.inline-group {
    display: flex;
    flex-direction: column; /* スマホでは縦並びを基本に */
    margin-bottom: 15px;
    padding: 5px 0;
}

.inline-group .inline-label {
    /* 説明ラベルを常に表示 */
    flex: 0 0 auto;
    font-weight: bold;
    margin-bottom: 5px;
}

.inline-group .wpcf7-number {
    width: 100% !important; /* スマホでは全幅 */
    max-width: 200px; /* PCでの最大幅を定義 */
    flex-grow: 0;
    margin-right: 5px;
}

.inline-group > .note {
    /* 注釈は改行して表示 */
    display: block;
    font-size: 0.8em;
    color: #777;
    margin-top: 5px;
    margin-left: 0;
    font-weight: normal;
}

/* ========================================================= */
/* 4. その他収入 (other-income-group) */
/* ========================================================= */

.other-income-group label {
    display: block;
    margin-bottom: 15px;
    font-weight: bold;
}
.other-income-group label span.wpcf7-form-control-wrap {
    display: block;
}
.other-income-group .amount-label {
    font-weight: bold;
}

/* ========================================================= */
/* 5. PC/タブレット用メディアクエリ (幅600px以上) */
/* ========================================================= */

@media (min-width: 600px) {
    
    /* 入力欄の最大幅を制限 */
    .wide-input {
        max-width: 400px !important;
    }

    /* 世帯人数：PCでは3列表示 */
    .field-group {
        flex: 0 0 calc(33.333% - 13.333px); /* 3列表示の計算 */
    }

    /* 金額入力：PCでは横並びに戻す */
    .inline-group {
        flex-direction: row; /* 横並び */
        align-items: center;
        margin-bottom: 10px;
    }
    
    .inline-group .inline-label {
        flex: 0 0 200px; /* ラベルの幅を固定 */
        margin-bottom: 0;
        text-align: right;
        padding-right: 15px;
    }

    .inline-group > .note {
        /* 注釈は横並びの行内で表示 */
        flex-basis: auto;
        margin-left: 10px;
        margin-top: 0;
        display: inline;
    }
}