@charset "utf-8";
/***
vertical-row: ul-liの項目と値のセットのulにつけることで項目と値を縦並びにする つけないと横並び
vertical-row-lg: モバイル版のみ縦並びにする
***/
html{
  scrollbar-gutter: stable;
}

/* モーダルを開いた時のpadding-rightを上書き */
body.modal-open {
  padding-right: 0 !important;
}

body {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    margin-bottom: 0px !important;
    font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ","Meiryo",verdana,"ＭＳ Ｐゴシック",Osaka,sans-serif;
    font-size: 13px;
    line-height: 1.0;
    -webkit-text-size-adjust: 100%;
    color: #333 !important;
}

h5 {
    padding-left: 10px;
    border-left: 15px solid #2fa4e7;
    font-weight: bold;
    display: inline-block;
}

/* ダイアログのタイトルは水色の線をつけない */
h5.modal-title {
    border-left: none;
}

h6 {
    margin-bottom: 0.5rem;
    font-weight: bold;
    display: inline-block;
}

.detail > a:hover {
    color: #157ab5 ! important;
    text-decoration: underline ! important;
}

.detail > a {
    color: #2FA4E7 ! important;
    text-decoration: none ! important;
    background-color: transparent ! important;
    cursor: pointer ! important;
}

/* ラジオ、チェックボックスを上下中央揃えに */
input[type="radio"]
,input[type="checkbox"]{
  vertical-align: text-top;
  margin-right: 0.25rem;
}

/* **********************************************************
    共通定義
********************************************************** */
.wrapper {
   min-width: 798px;
   padding-left: 20px;
   padding-right: 20px;
   margin-top: 10px;
   padding-bottom: 30px;
}
.card-header {
  background: #f0f1f4;
  border-top: 2px solid #0e192d;
  border-bottom: 1px solid #0e192d;
  margin-bottom: -1px;
  padding: 0 0 0 0;
}
.card-body {
  background: #f2f7fd;
  padding-left: .7rem;
  padding-top: .5rem;
}

.header-logo {
  text-align: right;
  padding: 5px 16px;
}

/* 閉じているとき（▼ 下向き）*/
[data-bs-target='#collapseOne2']::after {
    content: '';
    display: inline-block;
    color: #333;
    line-height: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 6px;
    border-color: transparent;
    border-bottom-color: currentColor;
    border-top: 0;
}

/* 開いているとき（▲ 上向き）*/
[data-bs-target='#collapseOne2'][aria-expanded='true']::after {
    content: '';
    display: inline-block;
    color: #333;
    line-height: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 6px;
    border-color: transparent;
    border-top-color: currentColor;
    border-bottom: 0;
}

/* エラー画面 */
.error-content {
    margin-left: 10px;
    padding: 40px;
    margin-bottom: 20px;
    background: #f9dcdc;
    line-height: normal !important;
}

.error-content h4 {
    margin-bottom: 40px;
    font-weight: bold;
    color: #c71c22 !important;
}

/* モーダルのpはmargin-bottomを縮める */
.confirm-message > p {
 margin-bottom: 4px;
}

/* エラーメッセージの行間を調整 */
.alert-danger {
  line-height: 1rem;
}

/* エラーメッセージの記号*/
.alert-danger::before {
  content: "！";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;      /* 丸くする */
  background-color: #D54941;   /* 赤背景 */
  color: white;            /* 白文字 */
  font-size: 0.85em;
  font-weight: bold;
  margin-right: 6px;
}

/* サクセスメッセージの色 */
.entry-tenant-add-message > div.alert-info
,.alert-success {
  background-color: #C6F3D7;
  align-items: center;
}

.entry-tenant-add-message > div.alert-info::before
,.alert-success::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;      /* 丸くする */
  background-color: #2BA471;   /* 緑背景 */
  color: #C6F3D7;            /* 黄緑文字 */
  font-size: 0.85em;
  font-weight: bold;
  margin-right: 6px;
}

/* 詳細のタブのaタグ 上書き */
.nav-item a.nav-link { 
  color: #000000;
  font-weight: 600;
}
/* 選択中のaタグ 上書き */
.nav-item a.nav-link.active { 
  color: #12438F;
  font-weight: 600;
  border-bottom: 3px solid #12438F;
}

/* 同居者タブバーの上の余白 */
div#housemate-tabs > ul.nav-tabs {
  margin-top: 0.5rem;
}

/* 管理画面の審査申込詳細のヘッダー下の余白*/
#entry-header {
  margin-bottom: 1rem;
}

/* 詳細ボタンの各タブ遷移ボタン */
.buttons-row {
  margin-top: 1rem;
}

/* **********************************************************
    スタイル単体のクラス化
********************************************************** */
.p-0{
  padding: 0 ! important;
}
.pt-0{
  padding-top: 0 ! important;
}
.pb-0{
  padding-bottom: 0 ! important;
}
.pl-0{
  padding-left: 0 ! important;
}
.p-8{
  padding: 8px ! important;
}
.pb-10{
  padding-bottom: 10px;
}
.mb-10{
  margin-bottom: 10px;
}
.mr-16{
  margin-right: 16px;
}
.ml-0_25rem{
  margin-left: 0.25rem;
}
.ml-0_5rem{
  margin-left: 0.5rem;
}
.font-1rem{
  font-size: 1rem;
}
.font-18{
  font-size: 18px;
}
.w-30p{
  width:30%;
}
.w-60p{
  width:60%;
}
.w-80p{
  width:80%;
}
.w-max {
  width: max-content;
}
.w-st {
  width: stretch;
}

.text-left {
  text-align: left ! important;
}

@media (max-width: 992px) {
  /* モバイル版のみ左揃えにする */
  .text-left-lg {
    text-align: left ! important;
  }
}

.font-red {
  color: red;
}

/* **********************************************************
    ボタンの定義
********************************************************** */
/* 共通設定 */
.btn{
  border-radius: 0.2rem;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  line-height: 1.5;
  border-radius: 0.25rem;
}
/* マウスオーバー時 共通 */
.btn::hover{
  mix-blend-mode: multiply;
  background: #FFFFFF;
}

/* 水色ボタン */
.btnBlue{
  background: linear-gradient(#54B3EB, #229EE5);
  color: #FFFFFF;
}
/* 白色ボタン */
.btnWhite{
  background: #FFFFFF;
  border: solid 1px #2CA4E7;
  color: #2CA4E7;
}
/* 検索、リセットボタン */
.btnSearch, .btnReset{
  width: 80px;
  padding: 8px;
}
/* ページングボタン */
.btnPrev, .btnNext {
  padding: .125rem .25rem;
  font-size: 1rem;
}
/* 戻る、発行ボタン */
.btnBack, .btnRegist {
  width: 80px;
  padding: 8px;
}

/* キャンセル、OKボタン */
.btnCancel, .btnOk {
  width: 80px;
  padding: 8px 4px;
}
/* 子要素の幅にあわせるボタン */
.btn-fit{
  width: fit-content;
  padding: 8px;
}

/* 検索条件ボタン */
.btn-block {
  display: block;
  width: 100%;
  text-align: left;
}

/* 検索条件ボタンはタブの開閉を行うダミーのため、フォーカス時の影を消す */
.btn-block:focus {
  box-shadow: unset;
}


/* 住所の同期ボタン */
.btnSyncAddress {
  width: 45%;
  height: 2rem;
}

/* 新規登録のボタン全般 */
.btnTenantAdd {
  padding: 0.5rem 0.75rem;
}

/* ボタンを並べるdiv(左揃え) */
div.buttons-row-left {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
}

/* ボタンを並べるdiv */
div.buttons-row-center {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

/* **********************************************************
    検索結果ありの場合の検索結果部の定義
********************************************************** */
.result-area {
  margin-bottom: 10px;
  display: flex;
}

.search-area {
  display: flex;
}

.result-area .result-left,
.search-area .search-left {
  width: calc(100% / 3);
  text-align: left;
}

.result-area .result-left .btn {
  margin-right: 5px;
}

.result-area .result-center,
.search-area .search-center {
  width: calc(100% / 3);
  text-align: center;
}

.result-area .result-right {
  margin-top: 15px;
  width: calc(100% / 3);
  text-align: right;
}

.search-area .search-right {
  width: calc(100% / 3);
  text-align: right;
}

/* **********************************************************
    テーブルの定義
********************************************************** */
/* 検索テーブル */
/* セル間隔を増やす */
.searchTable{
  border-collapse: separate;
  border-spacing: 10px;
}
/* 検索条件のヘッダ */
.searchTable th{
  color: #13448f;/* 文字色のみ */
}

/* 検索条件の項目名 */
.search-item-label{
  color: #13448f;
  font-weight: bold;
}
/* 検索結果一覧 */
table.searchList {
  table-layout: fixed;
  width: 100%;
}
/* 検索結果一覧のヘッダ */
table.searchList th {
  color: #13448f;/* 文字色 */
  background-color: #f2f7fd;/* 背景色 */
  padding-top: 0.5rem; /* 上下の幅を少し増やす */
  padding-bottom: 0.5rem;
}
/* 検索結果一覧の各セル */
table.searchList td {
  overflow-wrap: break-word; /* 単語の折り返し */
  word-break: break-word;    /* 日本語+英数字混在ならこちらも有効 */
}
/* 詳細セル */
td.detail {
  text-align: center;
  align-content: center;
}

/* モバイル版：1行に1項目 */
@media (max-width: 992px) {
  .responsive-table,
  .responsive-table tbody,
  .responsive-table tr,
  .responsive-table th,
  .responsive-table td {
    display: block;
    width: 100%;
  }

  .responsive-table tr {
    display: grid;
    grid-template-columns: 100px 1fr; /* thを120px固定、tdが残り全部 */
    row-gap: 16px; /* tr内のセルの間隔(高さ) */
    margin-bottom: 16px; /* tr同士の間隔(高さ) */
  }

  /* th・tdを2列グリッドで並べる */
  .responsive-table th,
  .responsive-table td {
    display: block;
  }

}

/* PC版：デフォルトのtable表示 */
@media (min-width: 993px) {
  .responsive-table {
    width: 100%;
  }
}

/* **********************************************************
    入力欄、詳細等の定義
********************************************************** */
.honest-container {
  margin-top: 1rem
}
/* ヘッダーを除いた入力欄のまとまり */
.honest-container > .sub-container {
  margin-left: 1.25rem
}

/* 複数の入力を1行で表示する用のdiv */
div.display_row {
  display: flex;
}
/* 行全体 */
ul.display_row {
    box-sizing: border-box;
    display: flex;
    padding-left: 0px;
    margin: 0;
    /*width: stretch;*/
}
/* ラベル */
ul.display_row > li.display_row_label {
  box-sizing: border-box;
  display: block;
  min-width: 25%;
  text-align: center;
  align-content: center;
}
ul.display_row > li.display_row_label.honest-border {
  font-weight: bold;
  color: #12448F;
}
/* 値 */
ul.display_row > li.display_row_value {
  display: block;
  flex: 1 1 auto;
  padding: 12px;
  text-align: left;
  align-content: center;
  min-width: 0;
  overflow-wrap: break-word;
}

/* 必須ラベル */
.requiredLabel {
  color:#DA0018;
}
/* 必須ラベルの前の記号 */
.requiredLabel::before {
  content: "*";
}

/* ボーダーをまとめたもの */
.honest-border {
  padding: 1.25rem;
  border: 1px solid #d3d3d3;
}

/* ラベルは背景色を付ける */
.honest-border.display_row_label {
  background-color: #F2F7FD;
}

/* 項目名と値を縦に並べる */
ul.display_row.vertical-row {
  flex-direction: column;
}

ul.display_row.vertical-row > li.display_row_label {
  padding: 0.5rem 0.6rem; /* 通常より狭める */
}

ul.display_row > li.display_row_label > label {
  text-align: left; /* 項目名は左揃え */
  line-height: 1rem; /* 行間を調整 */
}

@media (max-width: 992px) {
  /* モバイル版のみ縦並びにする */
  ul.display_row.vertical-row-lg {
    display: inline-block;
  }
  
  ul.display_row.vertical-row-lg > li.display_row_label {
    padding: 0.75rem 1.25rem; /*上下方向を通常より狭める*/
  }
  
  /* モバイル版でラベルの幅を狭める */
  ul.display_row.narrow-row-lg > li.display_row_label {
    padding: 0.75rem; /*上下方向を通常より狭める*/
  }
}

/* 用途入力画面の入力欄 */
ul.display_row > li.purpose_input_val {
  height: 3.5rem;
  padding: 8px 12px;
}



@media (min-width: 993px) {
  /* PC版のみ幅を指定する */
  /* 表示項目(ラベル)の幅を固定化する */
  ul.display_row > li.fixed_width_label {
    width: 17.5rem;
    min-width: 17.5rem;
  }
  /* 表示項目(ラベル)の幅を固定化する(物件情報用) */
  ul.display_row > li.fixed_width_label_for_purpose {
    width: 12.5rem;
    min-width: 12.5rem;
  }
  /* SNS(ラベル)の幅を固定化する */
  ul.display_row > li.sns-label {
    width: 10rem;
    min-width: 10rem;
  }
}

/* 審査申込新規登録画面の赤メッセージ */
.input-detail-message span {
  color: #DA0018;
}

/* 国リストを表示する入力欄 */
.country-input {
  width:80%;
}

@media (max-width: 992px) {
  /* モバイル版は元のサイズに戻す */
  .country-input {
    width:100%;
  }
}

/* 日付入力inputのマージンを上書き */
li.display_row_value.honest-border >.date-input
, li.display_row_value.honest-border > .month-input {
  margin:0;
}

/* 入力欄の高さを統一 */
input[type=number].form-control
,input[type=text].form-control
,select.form-control {
  height: 2rem;
  line-height: normal;
}

/* fieldsetの設定を上書き */
fieldset {
  margin: 0;
  padding: 0;
}

/* 初期非表示 */
.visible-hidden {
  visibility: hidden;
}

/* 在留期限の日付inputのみ幅を調整 */
input[type=text].stay-period-input {
  width:7rem;
  display:inline-block;
}

/* 書類用input */
input[type=text].document-input {
  background-color: unset;
  border: none;
}

/* **********************************************************
    詳細画面 ヘッダの定義
********************************************************** */
@media (max-width: 1200px) {
  /* 幅がせばまったらのみ縦並びにする */
  ul.display_row.vertical-row-xl {
    flex-direction: column;
  }
  ul.display_row.vertical-row-xl > li.display_row_label {
    padding: 0.75rem 1.25rem; /*上下方向を通常より狭める*/
  }
}

@media (min-width: 1201px) {
  /* PC版のみ幅を指定する */
  /* 表示項目(ラベル)の幅を固定化する(詳細画面 ヘッダ用) */
  ul.display_row.vertical-row-xl > li.fixed_width_label_detail_header {
        width: 9rem;
    min-width: 9rem;
  }
}

@media (min-width: 993px) {
  /* PC版のみ幅を指定する */
  /* 表示項目(ラベル)の幅を固定化する(詳細画面用) */
  ul.display_row.vertical-row-lg > li.fixed_width_label_detail {
        width: 10rem;
    min-width: 10rem;
  }
}

/* 在留期限 残日数 */
span.remaining_day_label {
  width:fit-content;
  display: inline-block;
}