﻿form h3 {
  margin-bottom: 0px;
}

/* Checkbox・Radio設定 */
input[type=radio],
input[type=checkbox] {
  height: 20px;
  width: 20px;
  border-radius: 10%;
}

/* 階層化チェックボックス専用スタイル */
input[type=checkbox].segment {
  height: 24px;
  width: 24px;
  border-radius: 50%;
}

input[type=checkbox],
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  position: relative;
  right: 0;
  bottom: 0;
  left: 0;
  vertical-align: -0.8rem;
  transition: all .15s ease-out 0s;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  margin: 0px .4rem 8px;
  outline: none;
  border: 2px solid #0e3f8e;
  /*自治体別色指定*/
}

/* Checkbox */
input[type=checkbox]:before,
input[type=checkbox]:after {
  position: absolute;
  content: "";
  background: #fff;
  transition: all .2s ease-in-out;
}

/* 階層化チェックボックス専用スタイル */
input[type=checkbox].segment:before {
  left: 2px;
  top: 6px;
  width: 0;
  height: 2px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
}

input[type=checkbox]:before {
  left: 2px;
  top: 6px;
  width: 0;
  height: 2px;
  transform: rotate(40deg);
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -ms-transform: rotate(40deg);
  -o-transform: rotate(40deg);
}

input[type=checkbox]:after {
  right: 9px;
  bottom: 3px;
  width: 2px;
  height: 0;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transition-delay: .2s;
}

/* 階層化チェックボックス専用スタイル */
input[type=checkbox].segment:checked:before {
  left: 3px;
  top: 10px;
  width: 8px;
  height: 3px;
  border-radius: 100% 0 0 0;
}

input[type=checkbox]:checked:before {
  left: 1px;
  top: 10px;
  width: 6px;
  height: 2px;
}

/* 階層化チェックボックス専用スタイル */
input[type=checkbox].segment:checked:after {
  right: 6px;
  bottom: 4px;
  width: 3px;
  height: 12px;
  border-radius: 100% 0 0 0;
}

input[type=checkbox]:checked:after {
  right: 5px;
  bottom: 1px;
  width: 2px;
  height: 14px;
}

input[type=checkbox]:indeterminate:before,
input[type=checkbox]:indeterminate:after {
  width: 7px;
  height: 2px;
  transform: rotate(0);
  -webkit-transform: rotate(0);
  -moz-transform: rotate(0);
  -ms-transform: rotate(0);
  -o-transform: rotate(0);
}

input[type=checkbox]:indeterminate:before {
  left: 1px;
  top: 7px;
}

input[type=checkbox]:indeterminate:after {
  right: 1px;
  bottom: 7px;
}

/* Radio */
input[type=radio] {
  border-radius: 50%;
  background: #fff;
}

input[type=radio]:checked:before {
  transform: scale(1);
}

input[type=radio]:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin: 3px;
  transform: scale(0);
  transition: all ease-out 250ms;
}

input[type=checkbox]:checked,
input[type=checkbox]:indeterminate,
input[type=radio]:checked:before {
  background: #0e3f8e;
  /*自治体別色指定*/
}

/* ----------------------ボタンの色設定開始開始-------------------------- */

/* 通常のボタン色 */
.btn-success,
.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #0e3f8e;
  /*自治体別色指定*/
  border-color: #0e3f8e;
  /*自治体別色指定*/
}

/* focus(タップ、タップされた後)された時の枠線の色 */
.btn-success:focus,
.btn-success.focus,
.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #0e3f8e;
  /*自治体別色指定*/
}

/* hover時（タップした後、違う要素がタップされるまで）の色（通常より濃いor暗めの色を指定）*/
.btn-success:hover {
  color: #fff;
  background-color: #3257DE;
  /*自治体別色指定*/
  border-color: #3257DE;
  /*自治体別色指定*/
}

/* active(タップ中のみ)時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle {
  color: #fff;
  background-color: #3257DE;
  /*自治体別色指定*/
  border-color: #3257DE;
  /*自治体別色指定*/
}

/* 通常のボタン色 */
.btn-info,
.btn-info.disabled,
.btn-info:disabled {
  color: #fff;
  background-color: #0e3f8e;
  /*自治体別色指定*/
  border-color: #0e3f8e;
  /*自治体別色指定*/
  float: right;
}

/* focus(タップ、タップされた後)された時の枠線の色 */
.btn-info:focus,
.btn-info.focus,
.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem #A83C40;
}

/* hover時（タップした後、違う要素がタップされるまで）の色（通常より濃いor暗めの色を指定）*/
.btn-info:hover {
  color: #fff;
  background-color: #3257DE;
  /*自治体別色指定*/
  border-color: #3257DE;
  /*自治体別色指定*/
}

/* active(タップ中のみ)時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: #fff;
  background-color: #3257DE;
  /*自治体別色指定*/
  border-color: #3257DE;
  /*自治体別色指定*/
}

.btn.outline {
  background: none;
  color: #0e3f8e;
  /*自治体別色指定*/
}

.btn.outline:hover {
  color: #fff;
  background-color: #0e3f8e;
  /*自治体別色指定*/
  border-color: #0e3f8e;
  /*自治体別色指定*/
}

/* ----------------------ボタンの色設定終了-------------------------- */

.border-success {
  border-color: #0e3f8e !important;
  /*自治体別色指定*/
}


/* 世代focus 
      影なのでベースより少し濃い目の色に*/
.form-control:focus {
  box-shadow: 0 0 4px #3257DE;
  /*自治体別色指定*/
}

/* datepickerの設定 */
/* 日付設定 */
.xdsoft_datepicker {
  width: 330px !important;
}

/* カレンダーとか時間設定項目の要素 */
.xdsoft_calendar table,
.xdsoft_time_box {
  height: 180px !important;
}

/* カレンダーの日付部分 */
.xdsoft_date div {
  font-size: 17px;
  margin-right: 3px;
}

/* カレンダーの曜日が入るところ */
.xdsoft_calendar table thead tr th {
  font-size: 14px;
}

/* カレンダーの上の日付の月の部分 */
.xdsoft_month {
  width: 115px !important;
}

/* カレンダーの上の日付の月の部分の文字 */
.xdsoft_month span {
  font-size: 14px;
}

/* カレンダーの上の日付の年の部分の文字 */
.xdsoft_year span {
  font-size: 14px;
}

.onceHidden {
  display: none;
}

input[type="checkbox"].select {
  margin-top: 0.2em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

input[type="checkbox"].selectAll {
  margin-top: 0.2em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

label.col-auto {
  display: flex;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}

.desc {
  color: gray;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
  box-sizing: border-box;
}

/*第二階層、第三階層共通スタイル*/
.box-two-tier-items,
.box-three-tier-items {
  overflow-y: scroll;
  /*項目数が多い場合はスクロール*/
  margin-bottom: 40px;
}

/*第二階層用リスト枠スタイル*/
.box-two-tier-items {
  height: calc(100vh - 200px);
  /*端末依存高さから固定高さを引く*/
}

/*第三階層用リスト枠スタイル*/
.box-three-tier-items {
  height: calc(100vh - 240px);
  /*端末依存高さから固定高さを引く*/
}

/*該当データなしの場合のリスト枠スタイル*/
.box-no-item {
  height: calc(100vh - 94px);
  /*端末依存高さから固定高さを引く*/
}

/*スクロールボタン全体スタイル（上下共通部分）*/
.scroll-btn {
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 8px;
  background-color: transparent;
  /*背景削除*/
  border-radius: 25px;
  margin-right: 20px;
  z-index: 99;
  border: #444 solid 1px;
}

/*スクロールボタン円形スタイル（上下共通部分）*/
.scroll-btn span {
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}

/*スクロールボタン矢印スタイル（上下共通部分）*/
.scroll-btn span::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 25px;
  color: #444;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: center;
}

/*スクロールボタン矢印スタイル（最上部移動）*/
.scroll-to-top span::before {
  content: '\f106';
  /*上向き矢印指定*/
  margin: 4px auto 0;
}

/*スクロールボタン矢印スタイル（最下部移動）*/
.scroll-to-bottom span::before {
  content: '\f107';
  /*下向き矢印指定*/
  margin: 6px auto 0;
}

/*下部固定枠スタイル*/
.footer-btn-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 5;
  /*要素そのものを浮かしておく*/
  background-color: rgba(200, 200, 200, .1);
  /*背景色は灰、ぼかし用に透かし設定'.1'*/
  border-top: #e6e6e6 solid 1px;
  height: 96px;
  padding-top: 26px;
  box-sizing: border-box;
  -webkit-backdrop-filter: blur(10px);
  /*ぼかし効果*/
  backdrop-filter: blur(10px);
  /*ぼかし効果*/
}

/*リスト最終項目が下部固定枠にかぶらないようスペースを作成*/
.list-bottom-space {
  width: 100%;
  height: 78px;
}

/*前に戻るボタンスタイル*/
button.back-button {
  background: #444;
}

/*チェックボックス項目名スタイル*/
label.checkbox-label {
  width: 100%;
}

/*「選択/変更」ボタン時の項目名のスタイル*/
label.btn-label {
  margin-bottom: 14px;
}

/*チェックボックス配置設定*/
input.checkbox-input {
  left: calc(100% - 36px);
  /*最右端から36pxの場所にチェックボックスを配置、ボタンに合わせた中央寄せ対応*/
  /*以下y軸方向に中央寄せ対応*/
  position: absolute;
  top: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

/*各項目スタイル*/
div.choices-list-style {
  padding-left: 10px;
  box-sizing: border-box;
  padding-top: 8px;
  position: relative;
}

/*パンくずリストのスタイル*/
p.breadcrumb-list {
  font-size: 10px;
  /*項目より目立ってしまうため、文字サイズを小さく設定*/
  color: silver;
  /*項目より目立ってしまうため、色協調を下げる*/
}

/*「選択/変更」ボタン表示制御*/
label.btn-label input {
  display: none;
  /*ボタンなのでチェックボックスを非表示*/
}

/*「選択/変更」ボタン時の項目名のスタイル*/
label.btn-label {
  margin-bottom: 14px;
}

/*リスト間ある線のスタイル*/
.list-line {
  width: 100%;
  height: 1px;
  background: #e6e6e6;
  margin-top: 4px;
}

/*各項目の説明文のスタイル*/
p.item-desc {
  font-size: 16px;
  margin-top: 4px;
  /*題と説明文の間に余白*/
  color: gray;
}

/*受信設定ホーム最下部にある「設定」ボタンの配置*/
div.submit-btn-box {
  margin: 20px auto;
}

/*「選択/変更」ボタン配置設定*/
button.item-btn {
  left: calc(100% - 30px);
  /*最右端から30pxの場所にチェックボックスを配置、ボタンに合わせた中央寄せ対応*/
  /*以下y軸方向に中央寄せ対応*/
  position: absolute;
  width: 60px;
  top: 46%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

/*リストの各項目、説明文を囲むエリアの設定*/
div.list-text-area {
  max-width: calc(100% - 60px);
  float: left;
  display: block;
}

/* ----------------------テーブルの色設定開始-------------------------- */

/*テーブルタイトル*/
.table-title {
  font-weight: bold;
  position: relative;
  left: 10px;
}

/*テーブルの注釈*/
.table-description {
  position: relative;
  left: 10px;
  color: gray;
}

/*テーブル入力項目*/
.table-input {
  border-color: #0e3f8e;
  /*自治体別色指定*/
  width: 50%;
  position: relative;
  left: 10px;
}

/*テーブル項目クリアボタン*/
.table-clear-button {
  position: relative;
  left: 20px;
}

/* ----------------------テーブルの色設定開始-------------------------- */