/*=============================================================
 タブ関連
=============================================================*/
.tabs {
  max-width: 1000px;
  margin: 0 auto;
  margin-top: 120px;
}
.tab-list {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 50px;
  padding: 0;
  margin: 10;
}
.tab-item {
  list-style: none;
  width: 400px;
  padding: 8px 50px;
  text-align: center;
  margin-right: 6px;
  background-color: #cdcdcd;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  cursor: pointer;
  transition: all .3s;
}
.tab-item:last-of-type {
  margin-right: 0px;
}
.tab-item.is-active {
  background-color: #0080d4;
  color: #ffffff;
}
.tab-content {
  width: 100%;
}
.tab-panel {
  min-height: 400px;
  padding: 10px 30px;
  border-radius: 10px;
}
.tab-panel01 {
  background-color: #eff8ff;
  display: none;
}
.tab-panel02 {
  background-color: #eff8ff;
  display: none;
}
.tab-panel.is-show {
  display: block;
}

/*=============================================================
 チェックボックス関連
=============================================================*/
.u_panel-area, .k_panel-area {
  padding: 5px;
}
.panel-text {
	font-weight: bold;
  font-size: 16px;
  color: #0080d4;
}
.panel-checkbox {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-weight: normal;
  font-size: 13px;
	gap: 5px 2%;
}
.panel-checkbox + .panel-checkbox {
	margin-top: 30px;
}
.panel-checkbox .checkbox-item {
	width: 32%;
}
.panel-checkbox input {
	display: none;
}
.panel-checkbox input + span {
	position: relative;
	display: inline-block;
	padding: 1px 0 1px 30px;
	cursor: pointer;
}
.panel-checkbox input + span::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #0080d4;
	margin: auto;
}
.panel-checkbox input:checked + span::before {
	background-color: #0080d4;
}
.panel-checkbox input + span::after {
	display: none;
}
.panel-checkbox input:checked + span::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 12px;
	left: 6px;
	width: 10px;
	height: 20px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin: auto 0;
}

.k_panel-text {
  margin-top: 7px;
	font-weight: bold;
  font-size: 16px;
  color: #0080d4;
}
.k_panel-checkbox {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
	font-weight: normal;
  font-size: 13px;
  gap: 5px;
}
.k_panel-checkbox input {
	display: none;
}
.k_panel-checkbox input + span {
	position: relative;
	display: inline-block;
	padding: 1px 0 1px 30px;
	cursor: pointer;
}
.k_panel-checkbox input + span::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: #fff;
	border: 1px solid #0080d4;
	margin: auto;
}
.k_panel-checkbox input:checked + span::before {
	background-color: #0080d4;
}
.k_panel-checkbox input + span::after {
	display: none;
}
.k_panel-checkbox input:checked + span::after {
	display: block;
	content: "";
	position: absolute;
	top: 0;
	bottom: 12px;
	left: 6px;
	width: 10px;
	height: 20px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin: auto 0;
}

/*=============================================================
 設定例タイトル関連
=============================================================*/
.panel-searchtable {
  margin-top: 5px;
  width: 100%;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
  
  th, td {
    padding: 3px;
    border: 1px solid #ccc;
    text-align: left;
  }
  th {
    font-weight: 700;
    font-size: 18px;
    background-color: #cee0f2;
    color: #0080d4;
  }
  td {
    font-size: 13px;
    color: #333;
  }
}
.search-col1 {
  width: 55%;
}
.search-col2 {
  width: 45%;
}

.panel-pagination {
  margin-top: 30px;
  text-align: center;
}
.u_pagination-items, .k_pagination-items {
  display: inline-flex;
  list-style: none;
    
  li {
    border: 1px solid #ccc;
      
    a {
        display: block;
        padding: 3px 5px;
        text-decoration: none;
        color: #000;
        transition: all .3s ease 0s;
  
        @media (any-hover: hover) {
            &:hover {
                background-color: #0080d4;
                color: #fff;
            }
        }
      }
      
      &.active {
        a {
          background-color: #0080d4;
          color: #fff;
        }
      }
  }
    
  li + li {
    margin-left: 20px;
  }
}

/*=============================================================
 フリーワード関連
=============================================================*/
.panel-searchbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.panel-findbutton {
  background-color: #0080d4;
  color: #ffffff;
  border: 1px solid #0080d4;
  cursor: pointer;
  font-size: 13px;
}
.search {
  border-radius: 5px;
  border: 1px solid #0080d4;
  width: 450px;
  max-width:100%;
  padding: 3px;
}
.searchbox-value {
	font-weight: normal;
  font-size: 13px;
  overflow: hidden;
  width: 100%;
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/*=============================================================
 １ページに表示するデータ件数関連
=============================================================*/
.panel-textbox {
  text-align: right;
	font-weight: normal;
  font-size: 13px;
  overflow: hidden;
  width: 100%;
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.panel-button {
  background-color: #0080d4;
  color: #ffffff;
  border: 1px solid #0080d4;
  cursor: pointer;
}

.comment {
	font-size: 12px;
	vertical-align: top;
}

.panel-anchor {
  display: flex;
  margin-top: 10px;
  text-align: left;
	font-weight: normal;
  font-size: 13px;
  overflow: hidden;
  width: 100%;
  a {
    margin-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

ul.notes {
  display: table;
  width: 100%;
  margin: 0;
  padding-left: 0;
}
ul.notes li {
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  margin-bottom: 20px;
}
ul.notes li:last-child {
  margin-bottom: 0;
}
ul.notes li .notes_head {
  display: table-cell;
  vertical-align: top;
  white-space: nowrap;
  padding-right: 1.5em;
  min-width: 60px;
  text-align: right;
}
ul.notes li .notes_body {
  display: table-cell;
  vertical-align: top;
}