/* ----------------------------------------------------------- */
/*　見出し1(class = ttlh3)のタイトルデザイン */
/* ----------------------------------------------------------- */
/* タイトルの上下のバー表示 */
.ttlh3 {
    max-width: 100% auto;
    padding: 15px 0px;
    font-size: 24px;
    border-top: 3px solid #a52b35;
    border-bottom: 1px solid #a52b35;
}
/* チェックマークデザイン */
.ttlh3::before {
    font-family: "Font Awesome 5 Free";
    content: '\f14a';
    padding: 0px 5px 0px 0px;
    color: #a52b35;
}

/* ----------------------------------------------------------- */
/* 【フォーム】テーブルタイトルのデザイン */
/* ----------------------------------------------------------- */
.crmEntityFormView .tab-title {
    max-width: 100%;
    margin: 10px auto;
    padding: 15px 0px;
    font-size: 24px;
    border-top: 3px solid #a52b35;
    border-bottom: 1px solid #a52b35;
    font-weight: bold;
}

/* ----------------------------------------------------------- */
/* 【フォーム】セクションタイトルのデザイン*/
/* ----------------------------------------------------------- */
/* セクションタイトルのデザイン*/
.crmEntityFormView .section-title.show-bar {
    border-bottom-width: 1px;
    padding-bottom: 4px;
    border-bottom-color: black; /* 線の色を黒に設定 */
    border-bottom-style: solid; /* 線のスタイルを設定（固い線） */
}
/* セクションタイトルの必須制御デザイン*/
/* ※補足：Header.htmlのreplaceH3Requiredでh3タグにrequired-tagを付与している */
.required-tag {
    font-size: 12px;
    color: #fff;
    background-color: #a52b35;
    border-radius: 5px;
    padding: 2px 5px;
    margin: 0px 5px 0px 0px;
}

/* ----------------------------------------------------------- */
/* 【フォーム】カラムの必須制御デザイン*/
/* ----------------------------------------------------------- */
.crmEntityFormView .cell div.table-info.required label:after {
    content: '必須';
    font-size: 12px;
    color: #fff;
    background-color: #a52b35;
    border-radius: 5px;
    padding: 2px 5px;
    margin: 0px 5px 0px 0px;
}

/* ----------------------------------------------------------- */
/* 【フォーム】チェックボックスデザイン関連 */
/* ----------------------------------------------------------- */
/* チェックボックスサイズ変更 */
.crmEntityFormView input[type=checkbox] {
    -ms-transform: scale(2.0, 2.0);
    -webkit-transform: scale(2.0, 2.0);
    transform: scale(2.0, 2.0);
}
/* チェックボックスの領域調整 */
.crmEntityFormView .clearfix.cell.checkbox-cell,
.crmEntityFormView .clearfix.cell.picklist-cell.required {
    padding: 20px;
}
/* 【スマホ用】チェックボックス位置の調整 */
@media (max-width: 767px) {
    .crmEntityFormView table.section > tbody > tr > td.clearfix.cell.checkbox-cell {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}
/* チェックボックスの幅調整 */
.crmEntityFormView .picklist label {
    display: inline-block;
    margin-right: 10px; /* 隙間を広げたい場合に調整します */
}

/* ----------------------------------------------------------- */
/* 【フォーム】オプションセット関連 */
/* ----------------------------------------------------------- */
/* オプションセットデザイン */
.picklist.horizontal {
    display: flex;
    flex-wrap: wrap; /* 横並びで溢れた時は次の行へ */
    border: none;
}

.picklist.horizontal input {
    display: none;
}

.picklist.horizontal label {
    display: flex;
    align-items: center;
    gap: 0.5em;
    position: relative;
    width: 350px; /* ラベルの幅を固定 */
    height: 40px; /* ラベルの高さを固定 */
    margin-bottom: 0.4em;
    padding: 0 0.7em; /* テキストの左右のパディング */
    border: 1px solid #d0d0d0;
    border-radius: 3px;
    background-color: #d0d0d0 !important;
    cursor: pointer;
    box-sizing: border-box; /* パディングとボーダーを含むボックスサイズ */
    justify-content: center; /* テキストを中央寄せに */
    white-space: nowrap; /* テキストを折り返さない */
    overflow: hidden; /* 溢れた部分を隠す */
    text-overflow: ellipsis; /* 溢れた部分に省略記号を表示 */
}

.picklist.horizontal label::before {
    content: ''; /* 擬似要素を使用してカスタムラジオボタンを作成 */
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #949494;
    margin-right: 0.5em;
    position: absolute;
    left: 0.7em; /* 左端からの距離を0.7emに設定 */
}

.picklist.horizontal input:checked + label {
    background-color: #464646 !important;
    color: #ffffff;
}

.picklist.horizontal input:checked + label::before {
    background-color: #fff; /* カスタムラジオボタンの背景色 */
    border-color: #949494; /* 境界線の色 */
}

.picklist.horizontal input:checked + label::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 1.1em; /* 適切な位置に配置 */
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #949494;
    z-index: 1; /* 上層に配置 */
}
/* 縦並びラジオボタンのラベル折り返し対応 */
.crmEntityFormView .picklist.vertical label {
    display: inline;
}

/* ----------------------------------------------------------- */
/* 銀行コード、支店コード検索関連デザイン */
/* ----------------------------------------------------------- */
/* リストデザイン */
.autocomplete-items {
    border: 1px solid #d4d4d4;
    border-bottom: none;
    border-top: none;
    z-index: 99;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background-color: rgb(255, 255, 255);
}
.autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    color: #000000;
    background-color: #FFDDDD;
}
/* リストホバー時デザイン */
.autocomplete-items div:hover {
    color: #ffffff;
    background-color: #1967d2;
}

/* ----------------------------------------------------------- */
/* 【フォーム】確認画面のデザイン */
/* ----------------------------------------------------------- */
.dec_form {
    display: flex;
    margin-bottom: 10px;
    border: 1px solid #cccccc; /* ボーダー色 */
}
.dec_form dt {
    width: 25%; /* 幅を25%に変更 */
    font-weight: bold;
    background-color: #e9e8e8; /* 背景色を#e9e8e8に設定 */
    padding: 5px; /* 内側の余白を追加して見た目を改善 */
    margin: 0; /* デフォルトのマージンをリセット */
    display: flex;
    align-items: center; /* 垂直方向のセンター配置 */
}
.dec_form dd {
    color: #a52b36;
    padding-left: 12px;
    flex: 1;
    padding: 5px; /* 内側の余白を追加して見た目を改善 */
    margin: 0; /* デフォルトのマージンをリセット */
    display: flex;
    align-items: center; /* 垂直方向のセンター配置 */
}
/* 767px以下の画面幅の場合 */
@media (max-width: 767px) {
    .dec_form {
      flex-direction: column; /* dtとddを縦方向に並べる */
    }
    .dec_form dt, .dec_form dd {
      width: 100%; /* 幅を100%に変更 */
    }
}

/* ----------------------------------------------------------- */
/* アイコンを赤色に変更 */
/* ----------------------------------------------------------- */
.red-icon {
    color: red;
}

/* ----------------------------------------------------------- */
/* Placehoderの色変更 */
/* ----------------------------------------------------------- */
input::placeholder
,textarea::placeholder {
  color: #8b8b8b !important;
}