@charset "UTF-8";

:root {
    --primary-color: #1a4a9f; /* 紺色を基調としたプライマリーカラー */
}

body {
    background-color: #F5F7FA;
}

/* プライマリーカラーのボタン */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-primary:hover {
    background-color: #143b80; /* プライマリーカラーより少し暗い色 */
    border-color: #143b80;
}

.btn-primary:focus {
    background-color: #143b80;
    border-color: #143b80;
    box-shadow: 0 0 0 0.25rem rgba(26, 74, 159, 0.25);
}

/* 必須マーク */
.required {
    color: #dc3545;
}

/* タイトル下の説明文の余白 */
h1 + .card .card-text {
    margin-bottom: 1em;
}

/* フォームページ共通のスタイル */
.container .card-text,
.container .form-label,
.container .form-check-label,
.container input.form-control,
.container select.form-select,
.container textarea.form-control {
    font-size: 1.1rem;  /* 文字サイズを1.1倍に */
    line-height: 1.6;   /* 行間を広げる */
}

/* エラーメッセージのサイズも調整 */
.container .alert {
    font-size: 1.1rem;
}

/* チェックボックスとラジオボタンの位置調整 */
.container .form-check-input {
    margin-top: 0.3rem;
}

/* 入力フィールドの高さを調整 */
.container .form-control,
.container .form-select {
    padding: 0.5rem 0.75rem;
}

/* リンクのサイズも調整 */
.container .card-text a {
    font-size: 1.1rem;
}

/* プレースホルダーの共通設定 */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #4a5d7e !important;
    opacity: 0.8 !important;
}

/* Chromeとその他ブラウザ用 */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
select::-webkit-input-placeholder {
    color: #4a5d7e !important;
    opacity: 0.8 !important;
}

/* Firefox用 */
input::-moz-placeholder,
textarea::-moz-placeholder,
select::-moz-placeholder {
    color: #4a5d7e !important;
    opacity: 0.8 !important;
}

/* Edge/IE用 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder,
select:-ms-input-placeholder {
    color: #4a5d7e !important;
    opacity: 0.8 !important;
}

/* プルダウンの未選択時の色設定 */
.form-select,
select.form-control {
    color: #4a5d7e !important;
}

.form-select option:first-child,
select.form-control option:first-child {
    color: #4a5d7e !important;
}

/* プルダウンの選択済み時の色設定 */
.form-select option,
select.form-control option {
    color: #000 !important;
}

/* 選択された場合のスタイル */
select.selected-option {
    color: #212529 !important; /* デフォルトの文字色 */
}

select.selected-option option {
    color: #212529;
}