body .bst-injector {
    padding: 1em 0;
    /* background-color: initial; */
}

body .bst-injector .bst-injector-main {
    /* max-width: 100%; */
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
    min-height: fit-content;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

body .bst-injector .bst-injector-main .bst-injector-body {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 6px;
    column-gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: #fafafa;
    margin: 0;
    border-radius: 0;
}

body .bst-injector .bst-injector-main .bst-injector-header-title {
    font-size: 1.6rem;
    font-weight: bold;
    /* font-size: 1.25rem; */
}

body .bst-injector .bst-injector-main .bst-injector-header-description {
    font-size: 16px;
    text-align: left;
}

body .bst-injector .bst-injector-main .bst-injector-header-description:empty {
    padding: 0;
}

/* フィールドキャプション */
body .bst-injector .bst-field-caption {
    align-self: center;
    font-weight: 600;
    color: #333;
}

/* フィールド値エリア */
body .bst-injector .bst-field-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

body .bst-injector .bst-field-value input[type="text"],
body .bst-injector .bst-field-value textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    background-color: #fff;
}


body .bst-injector .bst-field-value textarea {
    height: 4rem;
    resize: vertical;
}

/* 【修正】日付・時間の幅と文字切れの解決 */
body .bst-injector .bst-field-value input[data-type="date"] {
    width: auto !important;
    min-width: 140px !important;
}

body .bst-injector .bst-field-value .bst-dropdown.bst-hour,
body .bst-injector .bst-field-value .bst-dropdown.bst-minute {
    width: auto !important;
    min-width: 85px !important; /* プルダウンの枠幅をしっかり確保 */
}

body .bst-injector .bst-field-value .bst-dropdown select {
    padding: 4px 24px 4px 12px !important; /* 内側の余白を調整して文字切れを完全に防ぐ */
    width: 100% !important;
}

/* ガイドテキスト */
body .bst-injector .bst-guide {
    font-size: 0.875rem;
    color: #888;
}

/* ラジオボタン */
body .bst-injector .bst-radio {
    display: flex;
    align-items: center;
    gap: 1rem;
}

body .bst-injector .bst-radio input[type="radio"] {
    transform: scale(1.2);
}

body .bst-injector button.bst-injector-button {
    padding: 0.75rem 1.5rem;
    background-color: #0078d4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    width: 33%;
}

body .bst-injector button.bst-injector-button:hover {
    background-color: #005a9e;
}

body .bst-injector .bst-injector-main .bst-injector-header {
    background-color: #fff;
    margin: 0;
    display: flex;
    border-radius: 0;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid #e2e2e2;
    font-size: 18px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
}

.bst-injector-footer {
    padding: 16px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
}

body .bst-injector .bst-injector-main .bst-injector-body .bst-field {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 24px;
    row-gap: 16px;
    padding-bottom: .5em;
}

body .bst-injector .bst-field.bst-disabled {
    display: flex;
}

body .bst-injector span.bst-field-caption {
    display: block;
}

body .bst-injector .bst-field .bst-field-caption {
    font-size: 1.25rem;
    /* 14px */
    font-weight: bold;
    color: #4A5568;
    /* gray-700 */
    margin-bottom: 4px;
}

body .bst-injector .bst-field .bst-field-value input.bst-lookup-search {
    padding: 23px 5.25em;
}

body .bst-injector .bst-injector-main .bst-field:is(.bst-disabled, .bst-readonly) .bst-field-value .bst-guide {
    padding: 4px 16px;
    background: #fafafa !important;
    border-radius: 8px;
    font-size: 1.25rem;
    color: #1A202C;
    border: 1px solid var(--injector-field-border-color);
}

body .bst-injector .bst-injector-main .bst-field:is(.bst-disabled, .bst-readonly) .bst-field-value.bst-textarea>span.bst-guide {
    font-size: 16px;
}

body .bst-injector .bst-injector-main .bst-injector-body .bst-field .bst-field-value.bst-lookup input.bst-lookup-search {
    padding: 4px 16px;
    background: white !important;
    border-radius: 8px;
    font-size: 1.25rem;
    color: #1A202C;
    border: 2px solid #38bdf8 !important;
}

body .bst-injector .bst-field .bst-field-value span.bst-guide+div>img {
    display: none !important;
}

body .bst-injector .bst-field .bst-field-value span.bst-guide+div>span {
    font-size: 12px;
}

body .bst-injector .bst-field .bst-field-value:not(.bst-force-backcolor) :is(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    background-color: #fff !important;
    border-radius: 8px;
    font-size: 1.25rem;
    color: #1A202C;
    padding: 4px 16px;
    color: #1A202C;
    border: 2px solid #38bdf8 !important;
}

/* 【修正】利用場所（PC表示時）のグリッド崩れ・文字の自動改行を解消 */
.bst-field[field-id="利用場所"].bst-field > .bst-field-value.bst-checkbox {
    display: flex !important; 
    flex-wrap: wrap !important; /* 3列固定をやめ、文字長さに合わせて柔軟に折り返す設定に */
    gap: 12px 20px !important; 
}

.bst-field[field-id="利用場所"].bst-field > .bst-field-value.bst-checkbox label {
    white-space: nowrap !important; /* 文字の途中での自動改行を完全に禁止 */
    display: inline-flex !important;
    align-items: center !important;
}

@media screen and (max-width: 480px) {
	

/* 1. 日付行と時間行を分けるためのベース */
    html body .bst-injector .bst-field-value.bst-datetime {
        display: block !important; /* Flexを一度解除 */
        text-align: left !important;
    }

    /* 2. 【日付入力欄とボタン】を同じ行に並べる */
    html body .bst-injector .bst-field-value.bst-datetime input[data-type="date"] {
        display: inline-block !important;
        width: 70% !important; /* 100%を解除して横幅を制限 */
        vertical-align: middle !important;
        margin-bottom: 15px !important; /* 下の行との隙間 */
    }

    html body .bst-injector .bst-field-value.bst-datetime button.bst-icon-date {
        display: inline-block !important;
        width: 40px !important;
        height: 40px !important;
        vertical-align: middle !important;
        margin-left: 5px !important;
        margin-bottom: 15px !important;
    }

    /* 3. 【時間・時・分・分】をすべて同じ行に並べる */
    /* spanやlabel、dropdownが改行されないように設定 */
    html body .bst-injector .bst-field-value.bst-datetime .bst-dropdown,
    html body .bst-injector .bst-field-value.bst-datetime span,
    html body .bst-injector .bst-field-value.bst-datetime label {
        display: inline-block !important; /* 縦並びを解除 */
        width: auto !important; /* 幅いっぱいの占有を解除 */
        vertical-align: middle !important;
        margin-right: 5px !important;
    }

    /* プルダウン自体の幅を調整 */
    html body .bst-injector .bst-field-value.bst-datetime .bst-dropdown.bst-hour,
    html body .bst-injector .bst-field-value.bst-datetime .bst-dropdown.bst-minute {
        width: 80px !important; /* 必要に応じて調整してください */
    }

    /* 4. チェックボックス：改行させず、確実に1項目1行（縦並び）にする */
    /* 「利用場所」と「支払方法」両方に効かせます */
    html body .bst-injector .bst-field-value.bst-checkbox {
        display: flex !important;
        flex-direction: column !important; /* 縦に並べる */
        align-items: flex-start !important;
        gap: 12px !important; /* 項目間のゆとり */
    }

    /* チェックボックス内のラベル設定 */
    html body .bst-injector .bst-field-value.bst-checkbox label {
        display: flex !important;
        align-items: center !important;
        width: 100% !important; /* 横幅いっぱい使って場所を確保 */
        white-space: nowrap !important; /* 文字の途中で改行させない */
    }
	
	/* 右側に出てきた「選択中の値」のテキストを非表示にする */
	html body .bst-injector [field-id*="支払"] .bst-field-value .bst-checkbox-display {
		display: none !important;
	}

	/* ついでに、変な位置に飛ばないよう念押し */
	html body .bst-injector [field-id*="支払"] .bst-field-value {
		position: relative !important;
	}
	
}