@charset "UTF-8";
/* -----------------------------------------------------------------------------------
【メモ】

- ブレイクポイント -
@media screen and (min-width: 587px) {} 
// PC画面用
// 完全に無効にしたい場合、上書きするcssが多すぎる場合に使用しています。
@media screen and (max-width: 586px) {}
// SP画面用
@media screen and (max-width: 375px) {}
// SP画面用（最小）
@media screen and (max-width: 1040px) {} 
// header背景用

- フォーム要素 -
input,textarea,select,button
// デフォルトのデザインを、無効にしています。

- JavaScript / jQuery -
// 使用しているクラスに、以下のコメントを残しています。
// (JavaScript / jQuery 併用)

- Class上書き -
// リスト系、テーブル系のスタイルは、以下の形式で設定しています。
// .class > element 
// .class > element > element
// .class  .class 
// 上書き用のスタイルは、.class[class] の形式で設定しています。

----------------------------------------------------------------------------------- */
*,
::before,
::after {
  box-sizing: border-box;
}

html {
  /* スムーススクロール設定 */
  scroll-behavior: smooth;
  scroll-margin-top: 70px; /* 固定ヘッダーの高さ（大凡） */
}

body {
  background: #ffffff;
  -webkit-text-size-adjust: 100%; /*スマホ横画面で文字の拡大・収縮防止用*/
  -webkit-font-smoothing: antialiased; /* 文字の太さを整える。Safari環境用 */
  line-height: 1;
  letter-spacing: 0;
  font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", YuGothic, "Yu Gothic", sans-serif;
  font-weight: 400;
  font-size: 10px;
  color: #222222;
}

img {
  width: 100%;
  vertical-align: top;
}

a {
  color: inherit;
  text-decoration: none;
  text-underline-offset: 0.2em;
  word-break: break-all;
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-weight: 600;
  line-height: 1.25;
}

h1 {
  font-size: clamp(26px, 6.1433447099vw, 36px);
}

h2 {
  font-size: clamp(22px, 4.4368600683vw, 26px);
}

h3 {
  font-size: clamp(20px, 4.0955631399vw, 24px);
}

h4 {
  font-size: clamp(17px, 3.0716723549vw, 18px);
}

nav {
  line-height: 1.5;
  letter-spacing: 0.01em;
}

input,
textarea,
select,
button {
  /* デフォルトのデザインを、無効にする。 */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 1em;
  color: unset;
}

textarea {
  resize: vertical;
}

/* -----------------------------------------------------------------------------------
共通パーツ
----------------------------------------------------------------------------------- */
/*--------------------------------------
表示/非表示
----------------------------------------*/
.pc-only {
  display: block;
}
@media screen and (max-width: 586px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}
@media screen and (max-width: 586px) {
  .sp-only {
    display: block;
  }
}

.ssp-only {
  display: none;
}
@media screen and (max-width: 430px) {
  .ssp-only {
    display: block;
  }
}

/*--------------------------------------
コンテンツタイプ
（header/page-head に使用しない。）
----------------------------------------*/
/* 
【サンプル】
<table class="cont-d-1">
<tbody class="cont-d-1">
</tbody>
</table>
*/
.cont-d-1 {
  display: block;
  width: 100%;
}

.cont-d-2 {
  display: inline-block;
  width: auto;
}

/*--------------------------------------
囲み要素
----------------------------------------*/
.kakomi-1 {
  display: block;
  padding: 10px 10px 12px;
  background: #dfe7ed;
}
@media screen and (max-width: 586px) {
  .kakomi-1 {
    padding: 20px 10px 24px 20px;
  }
}

/*--------------------------------------
縦余白（縦並びグループ）
（header/page-head に使用しない。）
----------------------------------------*/
/* ----------------
// 本体
---------------- */
.column-6, .column-5, .column-4, .column-3, .column-2, .column-1 {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.column-1 {
  gap: 8px;
}

.column-2 {
  gap: 10px;
}

.column-3 {
  gap: 16px;
}

.column-4 {
  gap: 20px;
}

.column-5 {
  gap: 30px;
}

.column-6 {
  gap: 50px;
}

/* SP版/余白（オプション） */
@media screen and (max-width: 586px) {
  .column-op-sp-1 {
    gap: 8px;
  }
  .column-op-sp-2 {
    gap: 10px;
  }
  .column-op-sp-3 {
    gap: 16px;
  }
  .column-op-sp-4 {
    gap: 20px;
  }
  .column-op-sp-5 {
    gap: 30px;
  }
  .column-op-sp-6 {
    gap: 50px;
  }
}
/*--------------------------------------
コンテンツ幅
（header/page-head に使用しない。）
----------------------------------------*/
/* 
【サンプル】
<div class="cont-w-1 cont-w-op-sp-2"></div>
<div class="cont-w-2 cont-w-op-1 cont-w-op-sp-2"></div>
<div class="cont-w-1 cont-w-op-sp-0"></div>
*/
/* ----------------
// 本体
---------------- */
.cont-w-1 {
  width: 100%;
  padding-left: 20px;
  padding-right: 10px;
}

.cont-w-2 {
  width: min(100%, 620px);
}

.cont-w-3 {
  width: min(100%, 487px);
}

.cont-w-0 {
  width: auto;
}

@media screen and (max-width: 586px) {
  .cont-w-2,
  .cont-w-3 {
    width: 100%;
  }
}
/* PC版/左右余白（オプション） */
@media screen and (min-width: 587px) {
  .cont-w-op-1 {
    padding-left: 20px;
    padding-right: 10px;
  }
  .cont-w-op-2 {
    padding-left: 10px;
    padding-right: 10px;
  }
  .cont-w-op-3 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .cont-w-op-0 {
    padding-left: 0;
    padding-right: 0;
  }
}
/* SP版/左右余白（オプション） */
@media screen and (max-width: 586px) {
  .cont-w-op-sp-1 {
    padding-left: 20px;
    padding-right: 10px;
  }
  .cont-w-op-sp-2 {
    padding-left: 10px;
    padding-right: 10px;
  }
  .cont-w-op-sp-3 {
    padding-left: 20px;
    padding-right: 20px;
  }
  .cont-w-op-sp-0 {
    padding: 0;
  }
}
/*--------------------------------------
縦余白
----------------------------------------*/
/* ----------------
// マージン
---------------- */
.mt-1 {
  margin-top: 8px;
}

.mt-2 {
  margin-top: 10px;
}

.mt-3 {
  margin-top: 16px;
}

.mt-4 {
  margin-top: 20px;
}

.mt-5 {
  margin-top: 30px;
}

.mt-6 {
  margin-top: 50px;
}

@media screen and (max-width: 586px) {
  .mt-sp-1 {
    margin-top: 8px;
  }
  .mt-sp-2 {
    margin-top: 10px;
  }
  .mt-sp-3 {
    margin-top: 16px;
  }
  .mt-sp-4 {
    margin-top: 20px;
  }
  .mt-sp-5 {
    margin-top: 30px;
  }
  .mt-sp-6 {
    margin-top: 50px;
  }
}
/*--------------------------------------
文字/微調整
----------------------------------------*/
/* ----------------
// 文字方向
---------------- */
.txt-right {
  text-align: right;
}

.txt-center {
  text-align: center;
}

.txt-left {
  text-align: left;
}

/* ----------------
// 改行
---------------- */
.txt-br {
  display: inline-block;
}

/* ----------------
// インデント
---------------- */
.txt-indent {
  text-indent: 1em;
}

/* ----------------
// 文字詰め
---------------- */
.txt-kerning-1 {
  letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------------------
共通パーツ（フォーム部品）
----------------------------------------------------------------------------------- */
/*--------------------------------------
テキスト（入力不可）
----------------------------------------*/
/* 管理ID・利用者名・利用者管理ID 等 */
.form-parts-show-txt {
  display: block;
  width: 100%;
  padding: 0.25em 0.5em;
  font-weight: 400;
  font-size: clamp(18px, 3.4129692833vw, 20px);
  letter-spacing: -0.02em;
  border-bottom: 1px solid #d9d9d9;
  color: #707070;
}

.form-parts-show-txt[class] {
  height: auto;
}

/* 小見出し等 */
.form-parts-headding-txt {
  display: block;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
}

/* 通常テキスト */
.form-parts-normal-txt {
  display: block;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 586px) {
  .form-parts-normal-txt {
    font-size: 12px;
  }
}

/* 補足テキスト */
.form-parts-supplement-txt {
  display: block;
  margin-top: 0.25em;
  letter-spacing: -0.02em;
  font-size: 9px;
}
@media screen and (max-width: 586px) {
  .form-parts-supplement-txt {
    font-size: 12px;
  }
}

/*--------------------------------------
入力欄
----------------------------------------*/
/* ----------------
// 本体
---------------- */
.form-parts {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5em 0.8em;
  background: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
  color: #333333;
  font-size: 1em;
  cursor: pointer;
}

/* ----------------
// セレクトボックス
// （オプション）
---------------- */
/* 
【サンプル】
<div class="form-parts-select form-parts-op-2">
<select name="" class="form-parts">
<option selected disabled>選択してください</option>
<option value="">選択肢1</option>
</select>
</div>
*/
.form-parts-select {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.form-parts-select::after {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.6em;
  background: #535353;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  position: absolute;
  top: 50%;
  right: 0.8em;
  transform: translate(0, -50%);
  z-index: 2;
  cursor: pointer;
}
.form-parts-select .form-parts {
  padding: 0.5em 1.6em 0.5em 0.8em;
}

/* ----------------
// カレンダー
// （オプション）
---------------- */
/* 
【サンプル】
※ 通常フォームの場合
<tr class="form-item">
<th class="form-item__label-1">期間</th>
<td class="form-item__parts-1 form-item-group">
<div for="" class="form-parts-deta form-parts-op-1">
<input type="date" name="" id="" class="form-parts">
</div>
<span>〜</span>
<div for="" class="form-parts-deta form-parts-op-1">
<input type="date" name="" id="" class="form-parts">
</div>
</td>
</tr>

【サンプル2】
※ 絞り込みフォームの場合
<tr class="search-item">
<th class="search-item__label">期間</th>
<td class="search-item__parts search-item__parts--group">
<div for="" class="form-parts-deta search-parts-1">
<input type="date" name="" id="" class="form-parts">
</div>
<span>〜</span>
<div for="" class="form-parts-deta search-parts-1">
<input type="date" name="" id="" class="form-parts">
</div>
</td>
</tr>
*/
.form-parts-deta {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.form-parts-deta .form-parts::after {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: url(../img/icon_calendar.svg) center no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  right: 1em;
  transform: translate(0, -50%);
  z-index: 1;
}
.form-parts-deta .form-parts::-webkit-calendar-picker-indicator {
  width: 3.5em;
  height: 2.8em;
  padding: 0;
  background: transparent;
  color: transparent;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 2;
  cursor: pointer;
}

/* ----------------
// サイズ変更（PC）
// （オプション）
---------------- */
/* 
（1）絞り込みフォームでは、使用しない。
*/
.form-parts-op-1 {
  width: 100px;
}

.form-parts-op-2 {
  width: 200px;
}

.form-parts-op-3 {
  width: 300px;
}

.form-parts-op-4 {
  width: 335px;
}

.form-parts-op-1,
.form-parts-op-2,
.form-parts-op-3,
.form-parts-op-4 {
  height: 28px;
}
@media screen and (max-width: 586px) {
  .form-parts-op-1,
  .form-parts-op-2,
  .form-parts-op-3,
  .form-parts-op-4 {
    width: 100%;
    height: 40px;
  }
}

/* ----------------
// サイズ変更（SP）
// （オプション）
---------------- */
/* 
（1）絞り込みフォームでは、使用しない。
（2）入力項目（.form-item__parts-X）では、使用しない。
*/
@media screen and (max-width: 586px) {
  .form-parts-op-sp-1 {
    width: min(100%, 190px);
  }
  .form-parts-op-sp-2 {
    width: min(100%, 398px);
  }
  .form-parts-op-sp-3 {
    width: min(100%, 437px);
  }
}
/*--------------------------------------
入力項目（入力項目＋入力欄）
----------------------------------------*/
/* 
【サンプル】
<tr class="search-item">
<th class="search-item__label">入力項目</th>
<td class="search-item__parts">
<input type="text" name="" class="form-parts search-parts-3">
</td>
</tr>
*/
.form-item {
  display: flex;
  align-items: center;
  gap: 0.5em;
  text-align: left;
  font-size: 12px;
}
@media screen and (max-width: 586px) {
  .form-item {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5em 0;
    width: 100%;
    font-size: clamp(13px, 2.5597269625vw, 15px);
  }
}
@media screen and (max-width: 586px) {
  .form-item--left {
    justify-content: flex-start;
  }
}
.form-item__label-1 {
  width: clamp(80px, 7.03125vw, 90px);
  white-space: nowrap;
}
@media screen and (max-width: 586px) {
  .form-item__label-1 {
    width: 110px;
    width: clamp(90px, 8.59375vw, 110px);
  }
}
.form-item__label-2 {
  width: clamp(140px, 11.71875vw, 150px);
  white-space: nowrap;
}
@media screen and (max-width: 586px) {
  .form-item__label-2 {
    width: 135px;
    width: clamp(100px, 10.546875vw, 135px);
  }
}
.form-item__label-3 {
  width: clamp(80px, 7.03125vw, 90px);
  white-space: nowrap;
}
@media screen and (max-width: 586px) {
  .form-item__label-3 {
    width: 135px;
    width: clamp(100px, 10.546875vw, 135px);
  }
}
@media screen and (max-width: 586px) {
  .form-item__parts-1 {
    width: min(100%, 437px);
  }
}
@media screen and (max-width: 586px) {
  .form-item__parts-2 {
    width: min(100%, 398px);
  }
}
@media screen and (max-width: 586px) {
  .form-item__parts-3 {
    width: min(100%, 335px);
  }
}
@media screen and (max-width: 586px) {
  .form-item__parts-4 {
    width: min(100%, 190px);
  }
}
.form-item__after-txt {
  display: flex;
  align-items: center;
  gap: 0 0.5em;
}

/* ----------------
// .form-item wrapper
---------------- */
/* 
【サンプル】
<tbody class="form-item-group form-item-group--left">
<tr class="form-item">
<th class="form-item__label-1">グループ1</th>
<td class="form-item__parts-1">
<div class="form-parts-select form-parts-op-2">
<select name="" class="form-parts">
<option selected disabled>選択してください</option>
<option value="">選択肢1</option>
</select>
</div>
</td>
</tr>
<tr class="form-item">
<th class="form-item__label-1">グループ2</th>
<td class="form-item__parts-1">
<div class="form-parts-select form-parts-op-2">
<select name="" class="form-parts">
<option selected disabled>選択してください</option>
<option value="">選択肢1</option>
</select>
</div>
</td>
</tr>
<tr class="form-item">
<th class="form-item__label-1">グループ3</th>
<td class="form-item__parts-1">
<div class="form-parts-select form-parts-op-2">
<select name="" class="form-parts">
<option selected disabled>選択してください</option>
<option value="">選択肢1</option>
</select>
</div>
</td>
</tr>
</tbody>
*/
.form-item-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em;
}
@media screen and (max-width: 586px) {
  .form-item-group {
    flex-direction: column;
    align-items: flex-start;
  }
}
.form-item-group--left {
  justify-content: flex-start;
  gap: 0.5em 4em;
}

/* ----------------
// ボタン wrapper
---------------- */
/* 
（以下のクラスを併用する。）
.btn-1/.btn-2
*/
/* 複数wrapper */
.form-btn-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  width: 100%;
}
@media screen and (max-width: 586px) {
  .form-btn-group {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

/* 単体wrapper */
@media screen and (max-width: 586px) {
  .form-btn-wrap {
    display: flex;
    justify-content: flex-end;
    width: 100%;
  }
}

/*--------------------------------------
ボタン類
----------------------------------------*/
/* ----------------
// 青ボタン
---------------- */
/* 
【サンプル】
<button type="submit" name="" value="" class="btn-1 btn-op-1">ボタン</button>
<button type="reset" name="" value="" class="btn-1 btn-1--thin btn-op-1 btn-op-1--small">ボタン</button>
*/
.btn-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.4em;
  padding: 0 0 0.2em; /* 文字・高さ調節 */
  letter-spacing: 0.03em;
  text-align: center;
  font-weight: 700;
  color: #477dc3;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.btn-1::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(#fff 0%, #dae1eb 100%);
  border: 2px solid #477dc3;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: background-color 0.3s;
}
.btn-1--thin::after {
  border-width: 1px; /* 囲み線を細くする */
}
.btn-1:hover {
  color: #ffffff;
}
.btn-1:hover::after {
  background: #74a8f1;
}

/* ----------------
// 赤ボタン
---------------- */
/* 
【サンプル】
<button type="submit" name="" value="" class="btn-2 btn-op-2">ボタン</button>
*/
.btn-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.4em;
  padding: 0 0 0.2em; /* 文字・高さ調節 */
  color: #c8152e;
  font-weight: 400;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}
.btn-2::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #c8152e;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  transition: border-color 0.3s, background-color 0.3s;
}
.btn-2:hover {
  color: #ffffff;
}
.btn-2:hover::after {
  background: #c8152e;
  border-color: #ffffff;
}

/* サイズ変更1（オプション） */
.btn-op-1 {
  width: 128px;
  height: 28px;
  font-size: 16px;
}
@media screen and (max-width: 586px) {
  .btn-op-1 {
    width: 240px;
    height: 40px;
    font-size: clamp(16px, 3.0716723549vw, 18px);
  }
}
.btn-op-1--small {
  font-size: 15px; /* 文字サイズを下げる */
}
@media screen and (max-width: 586px) {
  .btn-op-1--small {
    font-size: clamp(15px, 2.9010238908vw, 17px);
  }
}

/* サイズ変更2（オプション） */
.btn-op-2 {
  width: 160px;
  height: 28px;
  font-size: 13px;
}
@media screen and (max-width: 586px) {
  .btn-op-2 {
    width: 228px;
    height: 40px;
    font-size: clamp(16px, 3.0716723549vw, 18px);
  }
}

/* ヘッダー用（オプション） */
.btn-op-header {
  width: 60px;
  height: 15px;
  font-weight: 600;
  font-size: 8px;
}
@media screen and (max-width: 586px) {
  .btn-op-header {
    width: 100%;
    height: 50px;
    font-size: clamp(18px, 3.9249146758vw, 23px);
  }
}

/* ヘッドエリア用（オプション） */
.btn-op-head {
  width: 160px;
  height: 28px;
  font-size: 13px;
}
@media screen and (max-width: 586px) {
  .btn-op-head {
    width: 120px;
    height: 28px;
    font-size: clamp(14px, 2.7303754266vw, 16px);
  }
}

/* 地図用（オプション） */
.btn-op-map {
  width: 60px;
  height: 28px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 586px) {
  .btn-op-map {
    width: 120px;
    height: 40px;
    font-size: clamp(13px, 2.5597269625vw, 15px);
  }
}
.btn-op-map::before {
  content: "";
  display: block;
  width: min(31.67%, 19px);
  height: min(89.47%, 17px);
  background: url(../img/icon_btn_map.svg) center no-repeat;
  background-size: contain;
}

/* エクスポート用（オプション） */
.btn-op-export {
  width: 90px;
  height: 28px;
  font-size: 9.5px;
  letter-spacing: -0.02em;
}
@media screen and (max-width: 586px) {
  .btn-op-export {
    width: 160px;
    height: 40px;
    font-size: clamp(13px, 2.5597269625vw, 15px);
  }
}
.btn-op-export::before {
  content: "";
  display: block;
  width: min(18.89%, 17px);
  height: min(100%, 17px);
  background: url(../img/icon_btn_export.svg) center no-repeat;
  background-size: contain;
}

/* -----------------------------------------------------------------------------------
body直下
----------------------------------------------------------------------------------- */
/* 謎の余白対策 */
.wrapper {
  display: block;
  width: max(100%, 320px);
  overflow: hidden;
}

/* -----------------------------------------------------------------------------------
header
----------------------------------------------------------------------------------- */
/*--------------------------------------
親コンテナ
----------------------------------------*/
.header {
  display: block;
  width: 100%;
  background: #a5d5ff;
  background-size: cover;
  color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
}
.header::before, .header::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/common/img_header_left@2x.png) left center no-repeat; /* 背景・左側 */
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
@media screen and (max-width: 586px) {
  .header::before {
    background-size: cover;
  }
}
.header::after {
  background: url(../img/common/img_header_right@2x.png) right center no-repeat; /* 背景・右側 */
  background-size: contain;
  z-index: -2;
}
@media screen and (max-width: 1040px) {
  .header::after {
    background-position: right -260px center; /* 画像被り防止 */
  }
}
@media screen and (max-width: 586px) {
  .header::after {
    display: none;
  }
}
.header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 24px; /* 圧迫時、アイテム間に余白を作る。 */
  width: 100%;
  height: 40px;
  padding: 1px 10px 0 20px;
}
.header__ttl {
  display: block;
  width: 240px;
  font-size: 0;
}
.header__ttl > a {
  display: block;
}
@media screen and (min-width: 587px) {
  .header__nav-group {
    /* 
    （以下のクラスを併用する。）
    .drawer-menu
     */
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0 20px;
    width: auto;
    height: 100%;
  }
}

/*--------------------------------------
.header__nav-group
----------------------------------------*/
/* 
（以下のクラスを併用する。）
.drawer-menu-item-1
 */
.header-nav-top-1 {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 0 24px;
}

/* 
（以下のクラスを併用する。）
.drawer-menu-item-3
 */
.header-nav-top-2 {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0 8px;
}

/* 
（以下のクラスを併用する。）
.drawer-menu-item-2
 */
@media screen and (min-width: 587px) {
  .header-nav-side {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 140px;
    height: calc(100vh - 40px);
    background: linear-gradient(#477dc3 0%, #477dc3 50.25%, #243f62 100%);
    position: absolute;
    top: 40px;
    left: 0;
  }
}

/* ----------------
// サイドメニューなし（PC）
---------------- */
@media screen and (min-width: 587px) {
  .side-hidden-page .header-nav-side {
    display: none;
  }
}

/*--------------------------------------
ドロワーメニュー（SP）
----------------------------------------*/
/* チェックボックス（非表示） */
.drawer-trigger {
  display: none;
}

/* アイコン */
.drawer-icon {
  display: none;
}
@media screen and (max-width: 586px) {
  .drawer-icon {
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
  }
  .drawer-icon > span,
  .drawer-icon > span::before,
  .drawer-icon > span::after {
    content: "";
    display: block;
    height: 2px;
    width: 40px;
    background-color: #ffffff;
    transition: transform 0.3s ease-in-out;
    position: absolute;
    left: 0;
  }
  .drawer-icon > span {
    top: 50%;
    transform: translate(0, -50%);
  }
  .drawer-icon > span::before {
    bottom: 5px;
  }
  .drawer-icon > span::after {
    top: 5px;
  }
}

/* コンテンツ */
@media screen and (max-width: 586px) {
  .drawer-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 60px 10px 0;
    background: linear-gradient(90deg, #244063 0%, #477dc3 100%);
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
    position: fixed;
    top: 0;
    left: 200%;
    z-index: 9001;
  }
}

/* アイコン押下時、動作 */
.drawer-trigger:checked ~ .drawer-icon {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9002;
}
.drawer-trigger:checked ~ .drawer-icon > span {
  background-color: rgba(255, 255, 255, 0);
}
.drawer-trigger:checked ~ .drawer-icon > span::before,
.drawer-trigger:checked ~ .drawer-icon > span::after {
  width: 25px;
  border-radius: 3px;
  transition: transform 0.3s ease-in-out;
}
.drawer-trigger:checked ~ .drawer-icon > span::before {
  bottom: 0;
  transform: rotate(45deg);
}
.drawer-trigger:checked ~ .drawer-icon > span::after {
  top: 0;
  transform: rotate(-45deg);
}
.drawer-trigger:checked ~ .drawer-menu {
  /* メニューを画面に入れる */
  left: 0;
  transition: left 0.3s ease-in-out;
}

/* コンテンツ内・アイテム並び替え */
@media screen and (max-width: 586px) {
  .drawer-menu-item-1,
  .drawer-menu-item-2,
  .drawer-menu-item-3 {
    order: 1;
    width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 586px) {
  .drawer-menu-item-2 {
    order: 2;
  }
}

@media screen and (max-width: 586px) {
  .drawer-menu-item-3 {
    order: 3;
  }
}

/*--------------------------------------
.header-nav-top-1
----------------------------------------*/
.nav-top-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 600;
  font-size: 8px;
  white-space: nowrap; /* 改行防止 */
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 586px) {
  .nav-top-btn {
    flex-direction: row;
    gap: 0 0.25em;
    font-weight: 500;
    font-size: clamp(14px, 3.4129692833vw, 20px);
    letter-spacing: 0.05em;
  }
}
.nav-top-btn::before, .nav-top-btn::after {
  content: "";
  display: block;
  width: min(2em, 28px);
  height: min(2em, 28px);
  background: url(../img/common/icon_news.svg) center no-repeat;
  background-size: contain;
}
.nav-top-btn--2::before {
  background-image: url(../img/common/icon_manual.svg);
}
.nav-top-btn::after {
  width: 115%;
  height: 115%;
  background: rgba(20, 87, 177, 0.5);
  border-radius: 3px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s;
}
@media screen and (min-width: 587px) {
  .nav-top-btn:hover::after {
    opacity: 1;
  }
}

/*--------------------------------------
.header-nav-top-2
----------------------------------------*/
.nav-top-neme {
  display: flex;
  align-items: center;
  gap: 0.5em;
  line-height: 1.25; /* 行間を整える */
  font-weight: 500;
  font-size: 12px;
}
@media screen and (max-width: 586px) {
  .nav-top-neme {
    display: none;
  }
}

@media screen and (max-width: 586px) {
  .nav-top-logout {
    width: 100%;
  }
}

/*--------------------------------------
.header-nav-side
----------------------------------------*/
/* ----------------
// リスト
---------------- */
.nav-side-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 24px 0 40px;
}
@media screen and (min-width: 587px) {
  .nav-side-list {
    gap: 24px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: -0.02em;
  }
}
@media screen and (max-width: 586px) {
  .nav-side-list {
    gap: 8px;
    font-weight: 500;
    font-size: clamp(15px, 3.4129692833vw, 20px);
  }
}
.nav-side-list ul {
  display: flex;
  flex-direction: column;
}
@media screen and (min-width: 587px) {
  .nav-side-list ul {
    gap: 0.5em;
  }
}
.nav-side-list ul > li {
  list-style-type: none;
}
@media screen and (min-width: 587px) {
  .nav-side-list ul > li {
    padding: 0 0 0 14px;
    position: relative;
    z-index: 1;
  }
  .nav-side-list ul > li::before {
    content: "";
    display: block;
    width: calc(100% - 10px);
    height: 20px;
    border-radius: 10px;
    background: rgba(80, 80, 80, 0.2);
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    transition: opacity 0.3s ease-in-out;
  }
  .nav-side-list ul > li:hover::before {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }
}
.nav-side-list ul > li > a {
  display: block;
}
@media screen and (max-width: 586px) {
  .nav-side-list ul > li > a {
    padding: 0.5em 0.5em 0.5em 1em;
    border-top: 1px solid #a5d5ff;
  }
}

/* リストアイテム（PC） */
@media screen and (min-width: 587px) {
  .nav-side-list-pc-item {
    position: relative;
    z-index: 1;
  }
  .nav-side-list-pc-item::after {
    content: "";
    display: block;
    width: 96%;
    height: 20px;
    border-radius: 10px 0px 0px 10px;
    background: #39b54a;
    position: absolute;
    top: 50%;
    left: 52%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
}
@media screen and (min-width: 587px) {
  .nav-side-list-pc-item--this::after {
    opacity: 1;
  }
}
@media screen and (min-width: 587px) and (min-width: 587px) {
  .nav-side-list-pc-item--this[class]::before {
    display: none; /* .nav-side-list ul > li:hover::before 打ち消し */
  }
}

/* リストアイテム（SP） */
@media screen and (max-width: 586px) {
  .nav-side-list-sp-item {
    width: 100%;
    height: 30px;
    padding: 0 1.1111111111em;
    background: #a5d5ff;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: #254063;
  }
}

/* ----------------
// 画像（PC）
---------------- */
.nav-side-img-wrap {
  display: block;
  width: 100%;
  padding: 5px;
}
@media screen and (max-width: 586px) {
  .nav-side-img-wrap {
    display: none;
  }
}

.nav-side-img {
  display: block;
  width: 100%;
  padding: 150.79% 0 0;
  background: url(../img/common/img_header_side@2x.png) center no-repeat;
  background-size: cover;
}

/* ----------------
// アコーディオンメニュー（PC）
---------------- */
.accordion-header {
  display: block;
  width: 100%;
}
.accordion-header summary::-webkit-details-marker {
  display: none;
}

.accordion-header-ttl {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
@media screen and (min-width: 587px) {
  .accordion-header-ttl {
    width: 100%;
    height: 16px;
    padding: 2px 4px;
    background: rgba(80, 80, 80, 0.3);
    line-height: 1;
  }
  .accordion-header-ttl::before {
    content: "";
    display: block;
    width: 0.6em;
    height: 0.5em;
    -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    background: #ffffff;
    transition: transform 0.3s;
  }
}

.accordion-header-cont {
  display: block;
  transition: transform 0.5s, opacity 0.5s;
  transform: translateY(-10px);
  opacity: 0;
}
@media screen and (min-width: 587px) {
  .accordion-header-cont {
    padding: 8px 0 0 0;
  }
}

.accordion-header[open] .accordion-header-ttl::before {
  transform: rotate(90deg);
}
.accordion-header[open] .accordion-header-cont {
  transform: none;
  opacity: 1;
}

/* -----------------------------------------------------------------------------------
main
----------------------------------------------------------------------------------- */
/*--------------------------------------
親コンテナ
----------------------------------------*/
.main {
  display: block;
  width: 100%;
  padding: 0 0 0 140px;
  background: #f4faff;
  overflow: hidden; /* 子の余白（margin）認識用 */
}
@media screen and (max-width: 586px) {
  .main {
    padding: 0;
  }
}

/*--------------------------------------
ページヘッド
----------------------------------------*/
.page-head {
  display: block;
  width: calc(100% - 140px);
  height: 42px;
  background: url(../img/common/img_head@2x.png) center right 130px no-repeat, linear-gradient(90deg, #fff 0%, #eafdff 100%);
  background-size: contain;
  border-bottom: 1px solid #dfe7ed;
  position: fixed;
  top: 40px;
  right: 0;
  z-index: 8000;
}
@media screen and (max-width: 586px) {
  .page-head {
    width: 100%;
    background-position: center right;
  }
}
.page-head__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0 10px 0 20px;
}
.page-head__ttl {
  display: block;
  font-weight: 500;
  font-size: clamp(18px, 3.7542662116vw, 22px);
  text-align: left;
  color: #477dc3;
}
@media screen and (max-width: 430px) {
  .page-head__ttl {
    font-size: clamp(14px, 4.27vw, 16px);
      line-height:1.1;
  }
}
.page-head__btn-group {
  display: inline-flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* ----------------
// サイドメニューなし（PC）
---------------- */
.side-hidden-page .main {
  padding: 0;
}
.side-hidden-page .page-head {
  width: 100%;
}

/* ----------------
// ボタン（TOPに戻る）
---------------- */
/* 
【サンプル】
<div class="page-top-btn"><a href="#">page<br>top</a></div>
*/
.page-top-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4em;
  width: 50px;
  height: 28px;
  position: relative;
  z-index: 1;
}
.page-top-btn::before, .page-top-btn::after {
  content: "";
  display: block;
  width: 6px;
  height: 6.2px;
  background: url(../img/common/icon_btn_pagetop.svg) center no-repeat;
  background-size: cover;
}
.page-top-btn::after {
  width: 100%;
  height: 100%;
  border: 1px solid #1457b1;
  border-radius: 5px;
  background: #477dc3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.page-top-btn > a {
  padding: 0 0 0.2em;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 10px;
  text-align: left;
  color: #fff;
  text-shadow: 1px 1px 0px rgba(0, 55, 128, 0.3);
}

/*--------------------------------------
ページコンテンツ
----------------------------------------*/
.page-contents {
  display: block;
  width: 100%;
  min-height: 100vh;
  padding: 82px 0 96px;
}

/* -----------------------------------------------------------------------------------
main（ページコンテンツ内）
----------------------------------------------------------------------------------- */
/*--------------------------------------
絞り込みエリア
----------------------------------------*/
.search-area {
  display: block;
  width: 100%;
  min-height: 24px;
  background: #dfe7ed;
  font-size: 10px;
}
@media screen and (max-width: 586px) {
  .search-area {
    font-size: clamp(10px, 2.3890784983vw, 14px);
  }
}

/* ----------------
// アコーディオン
---------------- */
.accordion-search summary::-webkit-details-marker {
  display: none;
}

.accordion-search-ttl {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 0;
  font-weight: 600;
  color: #333333;
  font-size: 1.1em;
  cursor: pointer;
}
@media screen and (max-width: 586px) {
  .accordion-search-ttl {
    padding: 10px 0;
    font-size: 1em;
  }
}
.accordion-search-ttl::before {
  content: "";
  display: block;
  width: 0.6em;
  height: 0.5em;
  -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
  background: #333333;
  transition: transform 0.3s;
}

.accordion-search-cont {
  display: block;
  width: 100%;
  padding: 5px 0 10px;
  transition: transform 0.5s, opacity 0.5s;
  transform: translateY(-10px);
  opacity: 0;
}

.accordion-search[open] .accordion-search-ttl::before {
  transform: rotate(90deg);
}
.accordion-search[open] .accordion-search-cont {
  transform: none;
  opacity: 1;
}

/* ----------------
// コンテンツ
---------------- */
.search-cont {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 0;
}
@media screen and (max-width: 586px) {
  .search-cont {
    gap: 20px 0;
  }
}
.search-cont__item-group {
  width: min(100%, 756px);
  padding: 0 0 0 10px;
}
@media screen and (max-width: 586px) {
  .search-cont__item-group {
    gap: 10px 0;
  }
}
.search-cont__item-group--wide {
  width: min(100%, 864px);
}
.search-cont__item-group-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  width: 100%;
}
@media screen and (max-width: 586px) {
  .search-cont__item-group-inner {
    gap: 10px 0;
  }
}
.search-cont__btn-group {
  display: inline-flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}
@media screen and (max-width: 586px) {
  .search-cont__btn-group {
    justify-content: space-between;
    width: 100%;
  }
}
.search-cont__btn-group-inner {
  display: inline-flex;
  gap: 8px;
}

/* ----------------
// 絞り込みフォーム
---------------- */
/* 
以下のクラスと、組み合わせて使用する。
.form-parts
.form-parts-XXXX
.search-parts-XXXX
*/
/* 
【サンプル】
<tr class="search-item">
<th class="search-item__label">入力項目</th>
<td class="search-item__parts">
<input type="text" name="" class="form-parts search-parts-3">
</td>
</tr>
*/
.search-item {
  display: flex;
  align-items: center;
  gap: 1em;
  letter-spacing: -0.02em;
  text-align: left;
}
@media screen and (max-width: 586px) {
  .search-item {
    flex-wrap: wrap;
    gap: 0.25em 0;
    width: 100%;
  }
}
@media screen and (min-width: 587px) {
  .search-item__label {
    white-space: nowrap;
  }
}
@media screen and (max-width: 586px) {
  .search-item__label {
    width: 96px;
    font-size: 1.1428571429em;
  }
}
@media screen and (max-width: 586px) {
  .search-item__label--wide {
    width: 130px;
  }
}
@media screen and (max-width: 586px) {
  .search-item__parts {
    width: min(100%, 390px);
  }
}
.search-item__parts--group {
  display: flex;
  align-items: center;
  gap: 1em;
}

/* ----------------
// 絞り込みフォーム（本体）
---------------- */
.search-parts-1 {
  width: 108px;
}

.search-parts-2 {
  width: 124px;
}

.search-parts-3 {
  width: 150px;
}

.search-parts-4 {
  width: 187px;
}

.search-parts-5 {
  width: 200px;
}

.search-parts-6 {
  width: 240px;
}

.search-parts-7 {
  width: 300px;
}

.search-parts-1,
.search-parts-2,
.search-parts-3,
.search-parts-4,
.search-parts-5,
.search-parts-6,
.search-parts-7 {
  height: 28px;
}

@media screen and (max-width: 586px) {
  .search-parts-1,
  .search-parts-2,
  .search-parts-3,
  .search-parts-4,
  .search-parts-5,
  .search-parts-6,
  .search-parts-7 {
    width: 100%;
    height: 32px;
  }
  .search-parts-1 {
    width: min(100%, 160px);
  }
}
/*--------------------------------------
検索結果
----------------------------------------*/
.search-result-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding: 8px 0 10px;
  font-size: 10px;
}
@media screen and (max-width: 586px) {
  .search-result-area {
    font-size: clamp(14px, 2.7303754266vw, 16px);
  }
}
.search-result-area__txt-tag {
  display: flex;
  align-items: first baseline;
  flex-wrap: wrap;
  gap: 8px 40px;
  width: min(100%, 756px);
}
@media screen and (max-width: 586px) {
  .search-result-area__txt-tag {
    gap: 8px 20px;
  }
}
.search-result-area__popup {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* ----------------
// 絞り込み検索結果（テキスト）
---------------- */
.search-txt {
  display: flex;
  gap: 0 0.5em;
  letter-spacing: -0.02em;
}

/* ----------------
// 検索キーワード（タグ） 
---------------- */
/* 
(JavaScript / jQuery 併用)

【サンプル】
<li class="search-tag set_tag">端末（ZETA）</li>
*/
/* wrapper */
.search-tag-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media screen and (min-width: 587px) {
  .search-tag-group {
    font-size: 9px;
  }
}

/* 本体 */
.search-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.5em;
  width: auto;
  height: 1.556em;
  padding: 0 0.5em 0.1em;
  border: 1px solid #39b54a;
  border-radius: 3px;
  font-weight: 500;
  letter-spacing: 0;
  font-size: 1em;
  color: #39b54a;
  cursor: pointer;
}
.search-tag::before {
  content: "×";
  font-size: 0.8em;
}

/* ----------------
// 状態アイコンについて（ポップアップ）
---------------- */
/* wrapper */
.popup {
  display: inline-block;
}

.popup-trigger {
  display: none;
}

/* リンクテキスト */
.popup-open-label {
  display: block;
  font-weight: 500;
  color: #477dc3;
  text-decoration: underline;
  transition: color 0.3s ease-in-out;
  cursor: pointer;
}
.popup-open-label:hover {
  color: #74a8f1;
  transition: color 0.3s ease-in-out;
}

/* ポップアップ（本体） */
.popup-cont {
  display: none;
  width: min(80%, 370px);
  min-height: 230px;
  padding: 40px 20px 30px;
  background: #fff;
  border: 4px solid #fcc;
  position: fixed;
  top: auto;
  right: 0;
  transform: translate(0, 10px);
  z-index: 8500;
}

.popup-trigger[id*=open]:checked ~ .popup-cont {
  display: block;
  -webkit-animation: popup-animation 0.6s;
  animation: popup-animation 0.6s;
}

@-webkit-keyframes popup-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes popup-animation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* テキスト */
.popup-txt {
  display: block;
  font-weight: 400;
  font-size: 16px;
  position: relative;
  z-index: 2;
}

/* 閉じるアイコン */
.popup-icon {
  display: block;
  width: 28px;
  height: 28px;
  background: #fff;
  border: 2px solid #767676;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 3;
  cursor: pointer;
}
.popup-icon::before, .popup-icon::after {
  content: "";
  display: block;
  width: 15px;
  height: 2px;
  background: #767676;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.popup-icon::after {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* アイコン押下以外でも、閉じるようにする。 */
.popup-close-label {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

/* テキストリスト */
.popup-list {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column dense;
  gap: 16px;
  margin: 24px 0 0;
}
.popup-list li {
  display: inline-flex;
  align-items: center;
  gap: 1em;
}
.popup-list li::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: url(../img/icon_wana_1.svg) center no-repeat;
  background-size: contain;
}
.popup-list li:nth-of-type(2)::before {
  background-image: url(../img/icon_wana_2.svg);
}
.popup-list li:nth-of-type(3)::before {
  background-image: url(../img/icon_wana_9.svg);
}
.popup-list li:nth-of-type(4)::before {
  background-image: url(../img/icon_wana_5.svg);
}
.popup-list li:nth-of-type(5)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_8.svg);
  background-size: contain;
}
.popup-list li:nth-of-type(6)::before {
  background-image: url(../img/icon_wana_4.svg);
}
.popup-list li:nth-of-type(7)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_3.svg);
  background-size: contain;
}
.popup-list li:nth-of-type(8)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_6.svg);
  background-size: contain;
}

/* テキストリスト */
.popup-list-rireki {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-auto-flow: column dense;
  gap: 16px;
  margin: 24px 0 0;
}
.popup-list-rireki li {
  display: inline-flex;
  align-items: center;
  gap: 1em;
}
.popup-list-rireki li:nth-of-type(1)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_2.svg);
  background-size: contain;
}
.popup-list-rireki li:nth-of-type(2)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-size: contain;
  background-image: url(../img/icon_wana_13.svg);
}
.popup-list-rireki li:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_5.svg);
  background-size: contain;
}
//.popup-list-rireki li:nth-of-type(4)::before {
//  content: "";
//  display: block;
//  width: 1.5em;
//  height: 1.5em;
//  background-image: url(../img/icon_wana_11.svg);
//  background-size: contain;
//}
.popup-list-rireki li:nth-of-type(4)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_11.svg);
  background-size: contain;
}
//.popup-list-rireki li:nth-of-type(6)::before {
//  content: "";
//  display: block;
//  width: 1.5em;
//  height: 1.5em;
//  background-image: url(../img/icon_wana_10.svg);
//  background-size: contain;
//}
.popup-list-rireki li:nth-of-type(5)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_4.svg);
  background-size: contain;
}
.popup-list-rireki li:nth-of-type(6)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_10.svg);
  background-size: contain;
}
.popup-list-rireki li:nth-of-type(7)::before {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  background-image: url(../img/icon_wana_6.svg);
  background-size: contain;
}


/*--------------------------------------
通常テーブル
----------------------------------------*/
/* 
【サンプル】
<div class="table-normal table-type-XXXX">
<table>
<thead>
<tr>
<th>項目1</th>
<th>項目2</th>
<th>項目3</th>
<th>項目4</th>
</tr>
</thead>
<tbody>
<tr>
<td>サンプルテキスト</td>
<td>サンプルテキスト</td>
<td><form action="" method="post" class="normal-td-op-XXXX"><button type="submit" name="" value="" class="item-1"></button><button type="submit" name="" value="" class="item-2"></button></form></td>
<td><form action="" method="post" class="normal-td-op-XXXX normal-td-op-XXXX--XXXX"><button type="submit" name="" value="" class="item-3"></button></form></td>
</tr>
</tbody>
</table>
</div>
*/
/* ----------------
// 差分・XXXX
---------------- */
/* 
【サンプル】
.table-type-XXXX tr {}
.table-type-XXXX thead tr {}
.table-type-XXXX tbody tr {}
*/
/* ----------------
// 本体
---------------- */
.table-normal {
  display: block;
  width: 100%;
  max-height: 580px;
  overflow: auto;
  text-align: left;
  font-size: clamp(10px, 1.015625vw, 13px);
}
@media screen and (max-width: 586px) {
  .table-normal {
    max-height: 70vh;
    font-size: clamp(12px, 1.25vw, 16px);
  }
}
.table-normal table {
  display: block;
  width: 100%;
  height: auto;
}
.table-normal thead,
.table-normal tbody {
  display: block;
  width: 100%;
}
.table-normal thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
.table-normal tr {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(4, 1fr); /* ! */
  width: 100%;
  min-height: 40px;
  /* 
  ! 表示させる場合、以下の形式で設定する。
  .table-type-XXXX tr { grid-template-columns: ;}
   */
}
.table-normal thead tr {
  background: #dadfe3;
  font-weight: 600;
  color: #505050;
}
.table-normal tbody tr {
  border-bottom: 1px solid #d1d1d1;
  font-weight: 400;
  color: #222;
}
.table-normal tbody tr:nth-of-type(odd) {
  background-color: #fafafa;
}
.table-normal tbody tr:nth-of-type(even) {
  background-color: #f0f0f0;
}
.table-normal th,
.table-normal td {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0.5em;
  border-left: 1px solid #d1d1d1;
}
.table-normal th:first-of-type,
.table-normal td:first-of-type {
  border-left: 0;
}
.table-normal td {
  position: relative;
  z-index: 1;
}
.table-normal td a,
.table-normal td form {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 587px) {
  .table-normal td a::after,
  .table-normal td form::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(116, 168, 241, 0.25);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .table-normal td a:hover::after,
  .table-normal td form:hover::after {
    opacity: 1;
  }
}
.table-normal--2 thead tr {
  border-top: 1px solid #c3dbfd;
  border-bottom: 1px solid #c3dbfd;
  background: #e2f1ff;
}
.table-normal--2 tbody tr {
  border-bottom: 1px solid #c3dbfd;
}
.table-normal--2 tbody tr:nth-of-type(odd) {
  background-color: #fff;
}
.table-normal--2 tbody tr:nth-of-type(even) {
  background-color: #fafafa;
}
.table-normal--2 th,
.table-normal--2 td {
  padding: 5px;
}

/* ----------------
// td オプション
---------------- */
/* メール編集・削除・テスト送信（文字 + アイコン） */
.normal-td-op-mail[class] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.normal-td-op-mail[class]::after {
  display: none;
}

.normal-td-op-mail [class*=item-] {
  display: inline-flex;
  align-items: center;
  gap: 0 0.25em;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  letter-spacing: -0.02em;
  font-size: clamp(9px, 0.78125vw, 10px);
  color: #003780;
}
.normal-td-op-mail [class*=item-]::before {
  content: "";
  display: block;
  width: 22px;
  height: 16px;
    background-position: center bottom 3px;
  background-repeat: no-repeat;
  background-size: 99%;
}
.normal-td-op-mail [class*=item-]::after {
  content: "";
  display: block;
  margin: 0 0.5em 0 0; /* セル内 余白調節 */
}
@media screen and (min-width: 587px) {
  .normal-td-op-mail [class*=item-] {
    transition: color 0.3s;
  }
  .normal-td-op-mail [class*=item-]:hover {
    color: #74a8f1;
  }
}
@media screen and (max-width: 586px) {
  .normal-td-op-mail [class*=item-]::before {
    width: clamp(24px, 5.12vw, 30px);
    height: 24px;
  }
  .normal-td-op-mail [class*=item-]::after {
    display: none;
  }
}
.normal-td-op-mail .item-1::before {
  background-image: url(../img/icon_mail_2.svg);
}
.normal-td-op-mail .item-1::after {
  content: "メール編集"; /* メール編集 */
}
.normal-td-op-mail .item-2::before {
  background-image: url(../img/icon_mail_3.svg);
}
.normal-td-op-mail .item-2::after {
  content: "メール削除"; /* メール削除 */
}
.normal-td-op-mail .item-3::before {
  width: 26px;
  background-image: url(../img/icon_mail_4.svg);
}
@media screen and (max-width: 586px) {
  .normal-td-op-mail .item-3::before {
    width: clamp(28px, 5.8vw, 34px);
  }
}
.normal-td-op-mail .item-3::after {
  content: "テスト送信"; /* テスト送信 */
}
@media screen and (max-width: 586px) {
  .normal-td-op-mail--single[class] {
    justify-content: center;
  }
}

/* 新着（アイコン） */
.normal-td-op-new .item-1 {
  display: inline-flex;
  padding: 0.15em 0.5em 0.2em;
  border-radius: 5px;
  background: #f00;
  line-height: 1;
  font-weight: 600;
  font-size: clamp(9px, 1.09375vw, 14px);
  color: #fff;
}
.normal-td-op-new .item-1::before {
  content: "NEW"; /* NEW */
}
@media screen and (max-width: 586px) {
  .normal-td-op-new .item-1 {
    font-size: clamp(10px, 2.3890784983vw, 14px);
  }
}

/*--------------------------------------
並び替えテーブル
----------------------------------------*/
/* 
(JavaScript / jQuery 併用)

【サンプル】
<div class="table-sort table-type-XXXX">
<table>
<thead>
<tr>
<th class="t-item-1 set_sort_btn">項目</th>
<th class="t-item-2 set_sort_btn">項目</th>
<th class="t-item-3 set_sort_btn">項目</th>
<th class="t-item-4">項目</th>
<th class="t-item-5 set_sort_btn">項目</th>
<th class="t-item-6 set_sort_btn">項目</th>
<th class="t-item-7 set_sort_btn">項目</th>
<th class="t-item-8 set_sort_btn">項目</th>
<th class="t-item-9 set_sort_btn">項目</th>
<th class="t-item-10 set_sort_btn">項目</th>
</tr>
</thead>
<tbody>
<tr>
<td class="t-item-1 sort-td-op-XXXX">サンプルテキスト</td>
<td class="t-item-2 sort-td-op-XXXX">サンプルテキスト</td>
<td class="t-item-3 sort-td-op-XXXX"><a href="#" class="item-1">サンプルテキスト</a></td>
<td class="t-item-4 sort-td-op-XXXX"><a href="#">サンプルテキスト</a></td>
<td class="t-item-5 sort-td-op-XXXX">サンプルテキスト</td>
<td class="t-item-6 sort-td-op-XXXX">サンプルテキスト</td>
<td class="t-item-7">サンプルテキスト</td>
<td class="t-item-8">サンプルテキスト</td>
<td class="t-item-9">サンプルテキスト</td>
<td class="t-item-10">サンプルテキスト</td>
</tr>
</tbody>
<script src="js/table.js"></script>
</table>
</div>
*/
/* ----------------
// 差分・XXXX
---------------- */
/* 
【サンプル】
.table-type-XXXX tr {}
.table-type-XXXX thead tr {}
.table-type-XXXX tbody tr {}
*/
/* ----------------
// 本体
---------------- */
.table-sort {
  display: block;
  width: 100%;
  max-height: 80vh;
  overflow: auto;
  font-weight: 400;
  font-size: clamp(9px, 0.8vw, 11px);
  text-align: left;
}
@media screen and (max-width: 586px) {
  .table-sort {
    max-height: 70vh;
    font-size: clamp(9px, 2.2184300341vw, 13px);
  }
}
.table-sort table {
  display: block;
  width: 100%;
  height: auto;
}
.table-sort thead,
.table-sort tbody {
  display: block;
  width: 100%;
}
.table-sort thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 10;
}
.table-sort tr {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: repeat(10, 1fr); /* ! */
  /* 
  ! 表示させる場合、以下の形式で設定する。
  .table-type-XXXX tr { grid-template-columns: ;}
   */
  width: max(100%, 960px);
  min-height: 40px;
  border-bottom: solid 1px #d1d1d1;
}
.table-sort thead tr {
  background: #2c486d;
  color: #ffffff;
}
@media screen and (max-width: 586px) {
  .table-sort thead tr {
    /* 
    ! 表示させる場合、以下の形式で設定する。
    .table-type-XXXX thead tr { grid-template: "" auto/ ;}
    */
    width: 100%;
    min-height: 64px;
  }
}
@media screen and (min-width: 587px) {
  .table-sort tbody tr:nth-of-type(odd) {
    background-color: #fafafa;
  }
  .table-sort tbody tr:nth-of-type(even) {
    background-color: #f0f0f0;
  }
}
@media screen and (max-width: 586px) {
  .table-sort tbody tr {
    /* 
    ! 表示させる場合、以下の形式で設定する。
    .table-type-XXXX tbody tr { grid-template: "" auto/ ;}
    */
    width: 100%;
    min-height: 70px;
    margin: 10px 0 0;
    background-color: #fafafa;
    border: 1px solid #d1d1d1;
  }
}
.table-sort th,
.table-sort td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: solid 1px #d1d1d1;
}
.table-sort th:first-of-type,
.table-sort td:first-of-type {
  border-left: 0;
}
.table-sort th {
  gap: 0.2em;
  padding: 0.556em;
}
@media screen and (max-width: 586px) {
  .table-sort th {
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: flex-end;
    gap: 0.6em;
    padding: 0.385em;
    font-size: 1.1em;
    text-align: center;
  }
}
@media screen and (max-width: 586px) {
  .table-sort th:not(.set_sort_btn) {
    padding-bottom: calc(18px + 0.6em + 0.385em);
  }
}
.table-sort td {
  padding: 5px;
  overflow-wrap: break-word;
  word-break: break-word;
}
@media screen and (min-width: 587px) {
  .table-sort td {
    position: relative;
    z-index: 1;
  }
}
@media screen and (max-width: 586px) {
  .table-sort td {
    border: 0;
    font-size: 1.5em;
  }
}
.table-sort td a,
.table-sort td form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
}
@media screen and (min-width: 587px) {
  .table-sort td a::after,
  .table-sort td form::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(116, 168, 241, 0.25);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
  }
}
@media screen and (min-width: 587px) {
  .table-sort td:hover a::after,
  .table-sort td:hover form::after {
    opacity: 1;
  }
}
.table-sort--2 tbody tr:nth-of-type(odd) {
  background-color: #fafafa;
}
.table-sort--2 tbody tr:nth-of-type(even) {
  background-color: #f0f0f0;
}
@media screen and (max-width: 586px) {
  .table-sort--2 tbody tr {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #d1d1d1;
  }
}

/* ----------------
// th オプション
---------------- */
/* 昇降ボタン */
/* 
(JavaScript / jQuery 併用)

【サンプル】
<th class="t-item-1 set_sort_btn">項目</th>
<th class="t-item-2 set_sort_btn">項目</th>
*/
.set_sort_btn {
  cursor: pointer;
  position: relative;
}
.set_sort_btn [class*=icon-] {
  width: 6px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.set_sort_btn .icon-1 {
  display: block;
  background-image: url(../img/icon_sort_1.svg);
}
.set_sort_btn .icon-2 {
  display: none;
  background-image: url(../img/icon_sort_2.svg);
}
.set_sort_btn .icon-3 {
  display: none;
  background-image: url(../img/icon_sort_3.svg);
}

/* ----------------
// td オプション
---------------- */
/* クリック領域を、広げる */
.sort-td-op-click-wrap tr {
  position: relative;
}
.sort-td-op-click-wrap .sort-td-op-click {
  position: static; /* .table-sort td a 上書き */
}
.sort-td-op-click-wrap .sort-td-op-click a::after {
  /* .table-sort td a::after 上書き */
  /* 
  ! サイズ調整をする場合、以下の形式で設定する。
  .table-type-XXXX .sort-td-op-click-wrap .sort-td-op-click a {  width: ; left: ;}
  */
  content: "";
  display: block;
  width: 20%;
  height: 100%;
  position: absolute;
  left: 10%;
  top: 0;
  transform: translate(0, 0);
}

/* 状態（アイコン） */
.sort-td-op-wana[class] {
  padding: 0; /* .table-sort 上書き */
}
.sort-td-op-wana [class*=item-] {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.sort-td-op-wana [class*=item-]::before, .sort-td-op-wana [class*=item-]::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.sort-td-op-wana [class*=item-]::after {
  display: none;
  width: 100%;
  height: 100%;
  z-index: -2;
}
.sort-td-op-wana .item-1::before {
  background-image: url(../img/icon_wana_1.svg);
}
.sort-td-op-wana .item-2::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_2.svg);
}
.sort-td-op-wana .item-2::after {
  content: "";
  display: block;
  background: #fdddec;
}
.sort-td-op-wana .item-3::before {
  background-image: url(../img/icon_wana_3.svg);
}
.sort-td-op-wana .item-4::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_4.svg);
}
.sort-td-op-wana .item-5::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_5.svg);
}
.sort-td-op-wana .item-6::before {
  background-image: url(../img/icon_wana_6.svg);
}
.sort-td-op-wana .item-7::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_7.svg);
}
.sort-td-op-wana .item-8::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_8.svg);
}
.sort-td-op-wana .item-9::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_9.svg);
}
.sort-td-op-wana .item-10::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_10.svg);
}
.sort-td-op-wana .item-11::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_11.svg);
}
.sort-td-op-wana .item-12::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_12.svg);
}
.sort-td-op-wana .item-13::before {
  width: 22px;
  height: 22px;
  background-image: url(../img/icon_wana_13.svg);
}

/* デバイス名・利用者名・メアド */
@media screen and (min-width: 587px) {
  .sort-td-op-name[class] {
    font-size: 1.1em;
    line-height: 1.1;
  }
}
@media screen and (max-width: 586px) {
  .sort-td-op-name[class] {
    font-weight: 600; /* .table-sort 上書き */
    font-size: 1.3em;
    line-height: 1.2;
  }
}

/* デバイスID */
.sort-td-op-device-mac[class] {
  padding: 0; /* .table-sort 上書き */
  font-size: 1.00em;
}
@media screen and (max-width: 586px) {
  .sort-td-op-device-mac[class] {
    font-size: 1.0em;
  }
}
.sort-td-op-device-mac .item-1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 5px;
  color: #003780;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.3s ease-in-out;
}
/* 地図（アイコン） */
.sort-td-op-map[class] {
  padding: 0;
  position: relative; /* .table-sort 上書き */
  z-index: 1;
}
.sort-td-op-map .item-1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sort-td-op-map .item-1::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/icon_map.svg) center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 586px) {
  .sort-td-op-map .item-1::before {
    background-position: right center;
    background-size: 95%;
  }
}
.sort-td-op-map[class] {
  padding: 0;
  position: relative; /* .table-sort 上書き */
  z-index: 1;
}
.sort-td-op-map .item-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.sort-td-op-map .item-2::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/icon_map_non.svg) center no-repeat;
  background-size: contain;
}
@media screen and (max-width: 586px) {
  .sort-td-op-map .item-2::before {
    background-position: right center;
    background-size: 95%;
  }
}

/* 更新日時 */
/* 
(JavaScript / jQuery 併用)

【サンプル】
<td class="t-item-5 sort-td-op-dey set_history_date dat3">2023-08-20 07:24</td>
*/
.sort-td-op-dey[class] {
  justify-content: flex-start; /* .table-sort 上書き */
  gap: 0.5em;
}
@media screen and (max-width: 586px) {
  .sort-td-op-dey[class] {
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    font-size: clamp(9px, 2.04778157vw, 12px);
    letter-spacing: -0.02em;
  }
}

/* 信号強度(dBm)（アイコン） */
.sort-td-op-signal[class] {
  justify-content: center; /* .table-sort 上書き */
  gap: 0.5em 2em;
}
@media screen and (max-width: 586px) {
  .sort-td-op-signal[class] {
    flex-direction: column;
  }
}
.sort-td-op-signal [class*=item-] {
  display: block;
  width: 21px;
  height: 13px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.sort-td-op-signal .item-1 {
  background-image: url(../img/icon_signal_1.svg);
}
.sort-td-op-signal .item-2 {
  background-image: url(../img/icon_signal_2.svg);
}
.sort-td-op-signal .item-3 {
  background-image: url(../img/icon_signal_3.svg);
}
.sort-td-op-signal .item-4 {
  background-image: url(../img/icon_signal_4.svg);
}
.sort-td-op-signal .item-5 {
  background-image: url(../img/icon_signal_5.svg);
}

/* 電池（アイコン） */
.sort-td-op-battery[class] {
  padding: 0; /* .table-sort 上書き */
}
.sort-td-op-battery [class*=item-] {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.sort-td-op-battery [class*=item-]::before {
  content: "";
  display: block;
  width: 30px;
  height: 12px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 586px) {
  .sort-td-op-battery [class*=item-]::before {
    width: clamp(20px, 5.46vw, 32px); /* vw = 画面幅586pxの場合 */
    height: 13px;
    margin: 0 4px 0 0; /* 右の余白 */
  }
}
.sort-td-op-battery .item-1::before {
  background-image: url(../img/icon_battery_1.svg);
}
.sort-td-op-battery .item-2::before {
  background-image: url(../img/icon_battery_2.svg);
}
.sort-td-op-battery .item-3::before {
  background-image: url(../img/icon_battery_3.svg);
}
.sort-td-op-battery .item-4::before {
  background-image: url(../img/icon_battery_4.svg);
}
.sort-td-op-battery .item-5::before {
  background-image: url(../img/icon_battery_5.svg);
}

/* 
利用者（文字 + アイコン）
パスワード（文字 + アイコン）
 */
.sort-td-op-user [class*=item-] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
}
.sort-td-op-user [class*=item-]::before, .sort-td-op-user [class*=item-]::after {
  content: "";
  display: block;
}
.sort-td-op-user [class*=item-]::after {
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media screen and (max-width: 586px) {
  .sort-td-op-user [class*=item-] {
    justify-content: center;
  }
  .sort-td-op-user [class*=item-]::before {
    display: none;
  }
}
.sort-td-op-user .item-1::before {
  content: "あり"; /* あり */
}
.sort-td-op-user .item-1::after {
  background-image: url(../img/icon_list.svg);
}
.sort-td-op-user .item-2::before {
  width: 1em;
  height: 0;
  border-bottom: 1px solid;
}
.sort-td-op-user .item-2::after {
  background-image: url(../img/icon_list.svg);
}
.sort-td-op-user .item-3::before {
  content: "登録あり"; /* 登録あり */
}
.sort-td-op-user .item-3::after {
  display: none;
}
.sort-td-op-user .item-4::before {
  content: "あり"; /* あり */
}
.sort-td-op-user .item-4::after {
  background-image: url(../img/icon_edit.svg);
}
.sort-td-op-user .item-5::before {
  width: 1em;
  height: 0;
  border-bottom: 1px solid;
}
.sort-td-op-user .item-5::after {
  background-image: url(../img/icon_edit.svg);
}

/* 配信（文字） */
/* 利用者情報管理 */
.sort-td-op-delivery [class*=item-] {
  display: flex;
  align-items: center;
  width: 100%;
}
@media screen and (max-width: 586px) {
  .sort-td-op-delivery [class*=item-] {
    justify-content: center;
  }
}
.sort-td-op-delivery [class*=item-]::before {
  content: "";
  display: block;
}
.sort-td-op-delivery .item-1::before {
  content: "あり";
}
@media screen and (max-width: 586px) {
  .sort-td-op-delivery .item-1::before {
    content: "配信あり"; /* 配信あり */
  }
}
.sort-td-op-delivery .item-2::before {
  width: 1em;
  height: 0;
  border-bottom: 1px solid;
}

/* メール（文字 + アイコン） */
.sort-td-op-mail [class*=item-] {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
}
.sort-td-op-mail [class*=item-]::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.sort-td-op-mail [class*=item-]::after {
  content: "";
  display: block;
}
@media screen and (max-width: 586px) {
  .sort-td-op-mail [class*=item-]::after {
    display: none;
  }
}
.sort-td-op-mail .item-1::before {
  background-image: url(../img/icon_mail_1.svg);
}
.sort-td-op-mail .item-1::after {
  content: "送信済み"; /* 送信済み */
}
.sort-td-op-mail .item-2::before {
  background-image: url(../img/icon_mail_5.svg);
}
.sort-td-op-mail .item-2::after {
  content: "送信待ち"; /* 送信待ち */
}
.sort-td-op-mail .item-3::before {
  background-image: url(../img/icon_mail_3.svg);
}
.sort-td-op-mail .item-3::after {
  content: "未送信"; /* 送信× */
}

/*--------------------------------------
共通パーツ
----------------------------------------*/
/* ----------------
// 並び順
---------------- */
@media screen and (max-width: 586px) {
  .t-item-1 {
    grid-area: t-1;
  }
  .t-item-2 {
    grid-area: t-2;
  }
  .t-item-3 {
    grid-area: t-3;
  }
  .t-item-4 {
    grid-area: t-4;
  }
  .t-item-5 {
    grid-area: t-5;
  }
  .t-item-6 {
    grid-area: t-6;
  }
  .t-item-7 {
    grid-area: t-7;
  }
  .t-item-8 {
    grid-area: t-8;
  }
  .t-item-9 {
    grid-area: t-9;
  }
  .t-item-10 {
    grid-area: t-10;
  }
  .t-item-11 {
    grid-area: t-11;
  }
  .t-item-12 {
    grid-area: t-12;
  }
  .t-item-13 {
    grid-area: t-13;
  }
}
/* オプションクラスを設定しない場合、無効にする。 */
@media screen and (max-width: 586px) {
  .table-sort:not([class*=table-type-]) [class*=t-item],
  .table-normal:not([class*=table-type-]) [class*=t-item] {
    grid-area: auto;
  }
}

/*--------------------------------------
差分・稼動状況
----------------------------------------*/
/* 並び替えテーブル */
.table-type-operate tr {
  grid-template-columns: 4.00% 13.00% 10.00% 4.00% 8.00% 8.00% 8.00% 9.00% 8.00% 6.00% 6.00% 6.00% 8.00%;
}
@media screen and (max-width: 586px) {
  .table-type-operate thead tr {
    grid-template: "t-1 t-2 t-3 t-4 t-5 t-6 t-13" auto/10.00% 20.00% 20.00% 8.00% 10.00% 8.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-operate tbody tr {
    grid-template: "t-1 t-2 t-2 t-4 t-5 t-6 t-13" "t-1 t-3 t-3 t-4 t-5 t-6 t-13" auto/10.00% 20.00% 20.00% 8.00% 10.00% 8.00% 20.00%;
  }
}
.table-type-operate .t-item-1,
.table-type-operate .t-item-2,
.table-type-operate .t-item-3,
.table-type-operate .t-item-4,
.table-type-operate .t-item-5,
.table-type-operate .t-item-6,
.table-type-operate .t-item-7,
.table-type-operate .t-item-8,
.table-type-operate .t-item-9,
.table-type-operate .t-item-10,
.table-type-operate .t-item-11,
.table-type-operate .t-item-12,
.table-type-operate .t-item-13 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-operate .t-item-1,
  .table-type-operate .t-item-2,
  .table-type-operate .t-item-3,
  .table-type-operate .t-item-4,
  .table-type-operate .t-item-5,
  .table-type-operate .t-item-6,
  .table-type-operate .t-item-13 {
    display: flex;
  }
  .table-type-operate .t-item-7,
  .table-type-operate .t-item-8,
  .table-type-operate .t-item-9,
  .table-type-operate .t-item-10,
  .table-type-operate .t-item-11,
  .table-type-operate .t-item-12{
    display: none;
  }
}
@media screen and (max-width: 586px) {
  .table-type-operate thead .t-item-3 {
    border-left: 0;
  }
}
@media screen and (max-width: 586px) {
  .table-type-operate tbody .t-item-2 {
    align-self: flex-end;
    padding-bottom: 0; /* .table-sort td 上書き */
  }
}
@media screen and (max-width: 586px) {
  .table-type-operate tbody .t-item-3 {
    align-self: flex-start;
  }
}
@media screen and (max-width: 586px) {
  .table-type-operate .sort-td-op-name {
    font-size: 1.4em; /* .sort-td-op-name 上書き */
  }
}
@media screen and (max-width: 586px) {
	.table-type-operate tbody .t-item-1 {
		color: transparent; /* ここで透明度を指定 */
	}
}
.table-type-operate tbody .t-item-1 {
	color: transparent; /* ここで透明度を指定 */
}
  
.table-type-operate .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 10.00%;
  left: 17.00%;
}
@table-type-operate .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 13.00%;
  left: 4.00%;
}
@media screen and (max-width: 586px) {
  .table-type-operate .sort-td-op-click-wrap .sort-td-op-click a::after {
    width:20.00%;
    left: 10.00%;
  }
}

/*--------------------------------------
差分・履歴一覧
----------------------------------------*/
/* 並び替えテーブル */
.table-type-history tr {
  grid-template-columns: 4.00% 13.00% 12.00% 12.00% 3.00% 12.00% 5.00% 5.00% 6.00% 14.00% 10.00%;
}
@media screen and (max-width: 586px) {
  .table-type-history thead tr {
    grid-template-areas: "t-1 t-2 t-3 t-4 t-5 t-7 t-8";
    grid-template-rows: auto;
    grid-template-columns: 8.00% 20.00% 20.00% 20.00% 8.00% 10.00% 6.00% 6.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-history tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-3 t-5 t-7 t-8" "t-1 t-2 t-4 t-4 t-5 t-7 t-8";
    grid-template-rows: auto auto;
    grid-template-columns: 8.00% 20.00% 20.00% 20.00% 8.00% 10.00% 6.00% 6.00%;
  }
}
.table-type-history .t-item-1,
.table-type-history .t-item-2,
.table-type-history .t-item-3,
.table-type-history .t-item-4,
.table-type-history .t-item-5,
.table-type-history .t-item-6,
.table-type-history .t-item-7,
.table-type-history .t-item-8,
.table-type-history .t-item-9,
.table-type-history .t-item-10,
.table-type-history .t-item-11 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-history .t-item-1,
  .table-type-history .t-item-2,
  .table-type-history .t-item-3,
  .table-type-history .t-item-4,
  .table-type-history .t-item-5,
  .table-type-history .t-item-7,
  .table-type-history .t-item-8 {
    display: flex;
  }
  .table-type-history .t-item-6,
  .table-type-history .t-item-9,
  .table-type-history .t-item-10,
  .table-type-history .t-item-11 {
    display: none;
  }
}
@media screen and (max-width: 586px) {
  .table-type-history thead .t-item-4 {
    border-left: 0;
  }
}
@media screen and (max-width: 586px) {
  .table-type-history tbody .t-item-2 {
    align-self: flex-end;
    padding-bottom: 0;
  }
}
@media screen and (max-width: 586px) {
  .table-type-history tbody .t-item-4 {
    align-self: flex-start;
  }
}
@media screen and (max-width: 586px) {
  .table-type-history .sort-td-op-device-mac {
    font-size: 1.4em; /* .sort-td-op-device-mac 上書き */
  }
}

.table-type-history .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 12.00%;
  left: 17.00%;
}
@media screen and (max-width: 586px) {
  .table-type-history .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 20.00%;
    left: 28.00%;
  }
}

/*--------------------------------------
差分・履歴一覧(利用者登録)
----------------------------------------*/
/* 並び替えテーブル */
.table-type-user-device_riyo-management tr {
  grid-template-columns: 10.00% 30.00% 30.00% 10.00%;
  
}
@media screen and (max-width: 586px) {
  .table-type-user-device_riyo-management thead tr,
  .table-type-user-device_riyo-management tbody tr {
    grid-template-areas: "t-1 t-2";
    grid-template-rows: auto;
    grid-template-columns: 20.00% 30.00%;
  }
}

.table-type-user-device_riyo-management .t-item-1,
.table-type-user-device_riyo-management .t-item-2,
.table-type-user-device_riyo-management .t-item-3,
.table-type-user-device_riyo-management .t-item-4{
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-user-device_riyo-management .t-item-1,
  .table-type-user-device_riyo-management .t-item-2{
    display: flex;
  }
  .table-type-user-device_riyo-management .t-item-3,
  .table-type-user-device_riyo-management .t-item-4,
  .table-type-user-device_riyo-management .t-item-5 {
    display: none;
  }
}

/*--------------------------------------
差分・利用者情報管理
----------------------------------------*/
/* 並び替えテーブル */
.table-type-user-management tr {
  grid-template-columns: 13.00% 12.00% 14.00% 10.00% 10.00% 10.00% 7.00% 7.00% 10.00% 7.00%;
}
@media screen and (max-width: 586px) {
  .table-type-user-management thead tr,
  .table-type-user-management tbody tr {
    grid-template-areas: "t-1 t-3 t-7 t-9";
    grid-template-rows: auto;
    grid-template-columns: 35.00% 30.00% 15.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-user-management tbody tr {
    grid-template-areas: "t-1 t-1 t-7 t-9" "t-3 t-3 t-7 t-9";
  }
}
.table-type-user-management th,
.table-type-user-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-user-management .t-item-1,
.table-type-user-management .t-item-2,
.table-type-user-management .t-item-3,
.table-type-user-management .t-item-4,
.table-type-user-management .t-item-5,
.table-type-user-management .t-item-6,
.table-type-user-management .t-item-7,
.table-type-user-management .t-item-8,
.table-type-user-management .t-item-9,
.table-type-user-management .t-item-10 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-user-management .t-item-1,
  .table-type-user-management .t-item-3,
  .table-type-user-management .t-item-7,
  .table-type-user-management .t-item-9 {
    display: flex;
  }
  .table-type-user-management .t-item-2,
  .table-type-user-management .t-item-4,
  .table-type-user-management .t-item-5,
  .table-type-user-management .t-item-6,
  .table-type-user-management .t-item-8,
  .table-type-user-management .t-item-10 {
    display: none;
  }
}
@media screen and (max-width: 586px) {
  .table-type-user-management tbody .t-item-1 {
    align-self: flex-end;
  }
}
@media screen and (max-width: 586px) {
  .table-type-user-management tbody .t-item-3 {
    align-self: flex-start;
  }
}
@media screen and (min-width: 587px) {
  .table-type-user-management .sort-td-op-name {
    font-size: 1.2em; /* .sort-td-op-name 上書き */
  }
}

.table-type-user-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 7.00%;
  left: 76.00%;
}

@table-type-user-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 10.00%;
  left: 90.00%;
}

@media screen and (max-width: 586px) {
  .table-type-history .sort-td-op-click-wrap .sort-td-op-click2 a::after {
    width: 65.00%;
    left: 0.00%;
  }
}

/*--------------------------------------
差分・利用者メールアドレス登録
----------------------------------------*/
/* 通常テーブル */
.table-type-mail-registration {
  max-height: 500px;
}
.table-type-mail-registration tr {
  grid-template-columns: 42.58% 9.68% 30.65% 17.09%;
}
@media screen and (max-width: 586px) {
  .table-type-mail-registration tr {
    grid-template-columns: 45.42% 15.02% 20.7% 18.86%;
  }
}

/*--------------------------------------
差分・デバイス情報管理
----------------------------------------*/
/* 並び替えテーブル */
.table-type-device-management tr {
  grid-template-columns: 10.50% 8.00% 15.00% 5.00% 8.00% 8.00% 15.50% 10.0% 10.0% 10.0%;
}
@media screen and (max-width: 586px) {
  .table-type-device-management thead tr,
  .table-type-device-management tbody tr {
    grid-template-areas: "t-1 t-3 t-7 t-8";
    grid-template-rows: auto;
    grid-template-columns: 39.33% 16.86% 26.15% 17.67%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-device-management tbody tr {
    grid-template-areas: "t-1 t-3 t-7 t-8" "t-3 t-3 t-7 t-8";
  }
}
.table-type-device-management th,
.table-type-device-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-device-management .t-item-1,
.table-type-device-management .t-item-2,
.table-type-device-management .t-item-3,
.table-type-device-management .t-item-4,
.table-type-device-management .t-item-5,
.table-type-device-management .t-item-6,
.table-type-device-management .t-item-7,
.table-type-device-management .t-item-8,
.table-type-device-management .t-item-9,
.table-type-device-management .t-item-10 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-device-management .t-item-1,
  .table-type-device-management .t-item-2,
  .table-type-device-management .t-item-3,
  .table-type-device-management .t-item-4 {
    display: flex;
  }
  .table-type-device-management .t-item-5,
  .table-type-device-management .t-item-6,
  .table-type-device-management .t-item-7,
  .table-type-device-management .t-item-8,
  .table-type-device-management .t-item-9,
  .table-type-device-management .t-item-10 {
    display: none;
  }
}

.table-type-device-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 10.00%;
  left: 90.00%;
}

@table-type-dantai-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 10.50%;
  left: 0.00%;
}

@media screen and (max-width: 586px) {
  .table-type-kanripass-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 39.33%;
    left: 0.00%;
  }
}

/*--------------------------------------
差分・団体情報管理
----------------------------------------*/
/* 並び替えテーブル */
.table-type-dantai-management tr {
  grid-template-columns: 15.00% 5.00% 5.00% 15.00% 10.00% 5.00% 5.00% 15.00% 8.00% 8.00%;
}
@media screen and (max-width: 586px) {
  .table-type-dantai-management thead tr,
  .table-type-dantai-management tbody tr {
    grid-template-areas: "t-1 t-3 t-7 t-8";
    grid-template-rows: auto;
    grid-template-columns: 46.00% 14.00% 20.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-dantai-management tbody tr {
    grid-template-areas: "t-1 t-3 t-7 t-8" "t-2 t-3 t-4 t-5 t-6 t-10";
  }
}
.table-type-dantai-management th,
.table-type-dantai-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-dantai-management .t-item-1,
.table-type-dantai-management .t-item-2,
.table-type-dantai-management .t-item-3,
.table-type-dantai-management .t-item-4,
.table-type-dantai-management .t-item-5,
.table-type-dantai-management .t-item-6,
.table-type-dantai-management .t-item-7,
.table-type-dantai-management .t-item-8,
.table-type-dantai-management .t-item-9,
.table-type-dantai-management .t-item-10,
.table-type-dantai-management .t-item-11 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-dantai-management .t-item-1,
  .table-type-dantai-management .t-item-3,
  .table-type-dantai-management .t-item-7,
  .table-type-dantai-management .t-item-8 {
    display: flex;
  }
  .table-type-dantai-management .t-item-2,
  .table-type-dantai-management .t-item-4,
  .table-type-dantai-management .t-item-5,
  .table-type-dantai-management .t-item-6,
  .table-type-dantai-management .t-item-9,
  .table-type-dantai-management .t-item-10,
  .table-type-dantai-management .t-item-11 {
    display: none;
  }
}

.table-type-dantai-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 8.00%;
  left: 75.00%;
}

@table-type-dantai-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 8.00%;
  left: 83.00%;
}

/*--------------------------------------
差分・お知らせ掲示板一覧
----------------------------------------*/
/* 通常テーブル */
.table-type-info tr {
  grid-template-columns: 8.71% 17.06% 1fr;
}
@media screen and (max-width: 586px) {
  .table-type-info tr {
    grid-template-columns: 14.66% 26.5% 1fr;
  }
}

/*--------------------------------------
差分・管理者「パスワード」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-kanripass-management tr {
  grid-template-columns: 15.00% 15.00% 15.00% 5.00% 15.00% 15.00% 10.00% 10.00%;
}
@media screen and (max-width: 586px) {
  .table-type-kanripass-management thead tr,
  .table-type-kanripass-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 30.00% 20.00% 10.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-kanripass-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4" "t-1 t-1 t-3 t-4";
  }
}
.table-type-kanripass-management th,
.table-type-kanripass-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-kanripass-management .t-item-1,
.table-type-kanripass-management .t-item-2,
.table-type-kanripass-management .t-item-3,
.table-type-kanripass-management .t-item-4,
.table-type-kanripass-management .t-item-5,
.table-type-kanripass-management .t-item-6,
.table-type-kanripass-management .t-item-7,
.table-type-kanripass-management .t-item-8 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-kanripass-management .t-item-1,
  .table-type-kanripass-management .t-item-2,
  .table-type-kanripass-management .t-item-3,
  .table-type-kanripass-management .t-item-4 {
    display: flex;
  }
  .table-type-kanripass-management .t-item-5,
  .table-type-kanripass-management .t-item-6,
  .table-type-kanripass-management .t-item-7,
  .table-type-kanripass-management .t-item-8 {
    display: none;
  }
}

.table-type-kanripass-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 45.00%;
  left: 0.00%;
}

@table-type-kanripass-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 10.00%;
  left: 80.00%;
}

@table-type-kanripass-management .sort-td-op-click-wrap .sort-td-op-click2 a::after {
  width: 10.00%;
  left: 90.00%;
}

@media screen and (max-width: 586px) {
  .table-type-kanripass-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 50.00%;
    left: 0.00%;
  }
}

/*--------------------------------------
差分・管理者「デバイス」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-kanridevaice-management tr {
  grid-template-columns: 10.00% 40.00% 10.00% 10.00% 15.00% 15.00%;
}
@media screen and (max-width: 586px) {
  .table-type-kanridevaice-management thead tr,
  .table-type-kanridevaice-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 30.00% 20.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-kanridevaice-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4" "t-1 t-1 t-3 t-4";
  }
}
.table-type-kanridevaice-management th,
.table-type-kanridevaice-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-kanridevaice-management .t-item-1,
.table-type-kanridevaice-management .t-item-2,
.table-type-kanridevaice-management .t-item-3,
.table-type-kanridevaice-management .t-item-4,
.table-type-kanridevaice-management .t-item-5,
.table-type-kanridevaice-management .t-item-6 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-kanridevaice-management .t-item-1,
  .table-type-kanridevaice-management .t-item-2,
  .table-type-kanridevaice-management .t-item-3,
  .table-type-kanridevaice-management .t-item-4 {
    display: flex;
  }
  .table-type-kanridevaice-management .t-item-5,
  .table-type-kanridevaice-management .t-item-6,
  .table-type-kanridevaice-management .t-item-7,
  .table-type-kanridevaice-management .t-item-8 {
    display: none;
  }
}

.table-type-kanridevaice-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 10.00%;
  left: 0.00%;
}

@table-type-kanridevaice-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 20.00%;
  left: 80.00%;
}

@media screen and (max-width: 586px) {
  .table-type-kanridevaice-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 50.00%;
    left: 0.00%;
  }
}

/*--------------------------------------
差分・管理者「掲示板」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-kanrikeiji-management tr {
  grid-template-columns: 15.00% 25.00% 30.00% 10.00% 15.00%;
}
@media screen and (max-width: 586px) {
  .table-type-kanrikeiji-management thead tr,
  .table-type-kanrikeiji-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 30.00% 20.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-kanrikeiji-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4" "t-1 t-1 t-3 t-4";
  }
}
.table-type-kanrikeiji-management th,
.table-type-kanrikeiji-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-kanrikeiji-management .t-item-1,
.table-type-kanrikeiji-management .t-item-2,
.table-type-kanrikeiji-management .t-item-3,
.table-type-kanrikeiji-management .t-item-4,
.table-type-kanrikeiji-management .t-item-5 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-kanrikeiji-management .t-item-1,
  .table-type-kanrikeiji-management .t-item-2,
  .table-type-kanrikeiji-management .t-item-3,
  .table-type-kanrikeiji-management .t-item-4 {
    display: flex;
  }
  .table-type-kanrikeiji-management .t-item-5,
  .table-type-kanrikeiji-management .t-item-6,
  .table-type-kanrikeiji-management .t-item-7,
  .table-type-kanrikeiji-management .t-item-8 {
    display: none;
  }
}

.table-type-kanrikeiji-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 10.00%;
  left: 0.00%;
}

@table-type-kanrikeiji-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 10.00%;
  left: 90.00%;
}

@media screen and (max-width: 586px) {
  .table-type-kanrikeiji-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 50.00%;
    left: 0.00%;
  }
}

/*--------------------------------------
差分・管理者「バックグラウンド処理稼動確認通知メールアドレス登録」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-kanrimail-management tr {
  grid-template-columns: 20.00% 45.00% 10.00% 10.00% 15.00%;
}
@media screen and (max-width: 586px) {
  .table-type-kanrimail-management thead tr,
  .table-type-kanrimail-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 40.00% 10.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-kanrimail-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
  }
}
.table-type-kanrimail-management th,
.table-type-kanrimail-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-kanrimail-management .t-item-1,
.table-type-kanrimail-management .t-item-2,
.table-type-kanrimail-management .t-item-3,
.table-type-kanrimail-management .t-item-4,
.table-type-kanrimail-management .t-item-5 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-kanrimail-management .t-item-1,
  .table-type-kanrimail-management .t-item-2,
  .table-type-kanrimail-management .t-item-3,
  .table-type-kanrimail-management .t-item-4 {
    display: flex;
  }
  .table-type-kanrimail-management .t-item-5,
  .table-type-kanrimail-management .t-item-6,
  .table-type-kanrimail-management .t-item-7,
  .table-type-kanrimail-management .t-item-8 {
    display: none;
  }
}

.table-type-kanrimail-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 20.00%;
  left: 0.00%;
}

@table-type-kanrimail-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 10.00%;
  left: 75.00%;
}

@media screen and (max-width: 586px) {
  .table-type-kanrimail-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 30.00%;
    left: 0.00%;
  }
}

@media screen and (max-width: 586px) {
  .table-type-kanrimail-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
    width: 10.00%;
    left: 90.00%;
  }
}

/*--------------------------------------
差分・管理者「グループ作成」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-kanrikeyword-management tr {
  grid-template-columns: 35.00% 35.00% 20.00% 10%;
}
@media screen and (max-width: 586px) {
  .table-type-kanrikeyword-management thead tr,
  .table-type-kanrikeyword-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 40.00% 10.00% 20.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-kanrikeyword-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
  }
}
.table-type-kanrikeyword-management th,
.table-type-kanrikeyword-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-kanrikeyword-management .t-item-1,
.table-type-kanrikeyword-management .t-item-2,
.table-type-kanrikeyword-management .t-item-3,
.table-type-kanrikeyword-management .t-item-4 {
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-kanrikeyword-management .t-item-1,
  .table-type-kanrikeyword-management .t-item-2,
  .table-type-kanrikeyword-management .t-item-3,
  .table-type-kanrikeyword-management .t-item-4 {
    display: flex;
  }
  .table-type-kanrikeyword-management .t-item-5,
  .table-type-kanrikeyword-management .t-item-6,
  .table-type-kanrikeyword-management .t-item-7,
  .table-type-kanrikeyword-management .t-item-8 {
    display: none;
  }
}

.table-type-kanrikeyword-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 35.00%;
  left: 0.00%;
}

@table-type-kanrikeyword-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
  width: 10.00%;
  left: 90.00%;
}

@media screen and (max-width: 586px) {
  .table-type-kanrikeyword-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 30.00%;
    left: 0.00%;
  }
}

@media screen and (max-width: 586px) {
  .table-type-kanrikeyword-management .sort-td-op-click-wrap .sort-td-op-click1 a::after {
    width: 10.00%;
    left: 90.00%;
  }
}


/*--------------------------------------
差分・「利用者振り分け処理」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-user-device-management tr {
  grid-template-columns: 10.00% 40.00% 40.00%;
}
@media screen and (max-width: 586px) {
  .table-type-user-device-management thead tr,
  .table-type-user-device-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 40.00% 10.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-user-device-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3 t-4";
  }
}
.table-type-user-device-management th,
.table-type-user-device-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-user-device-management .t-item-1,
.table-type-user-device-management .t-item-2,
.table-type-user-device-management .t-item-3{
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-user-device-management .t-item-1,
  .table-type-user-device-management .t-item-2{
    display: flex;
  }
  .table-type-user-device-management .t-item-3,
  .table-type-user-device-management .t-item-4,
  .table-type-user-device-management .t-item-5,
  .table-type-user-device-management .t-item-6,
  .table-type-user-device-management .t-item-7,
  .table-type-user-device-management .t-item-8 {
    display: none;
  }
}

.table-type-user-device-management .sort-td-op-click-wrap .sort-td-op-click a::after {
  width: 10.00%;
  left: 0.00%;
}

@media screen and (max-width: 586px) {
  .table-type-user-device-management .sort-td-op-click-wrap .sort-td-op-click a::after {
    width: 10.00%;
    left: 0.00%;
  }
}

/*--------------------------------------
差分・「バージョン管理」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-version-management tr {
  grid-template-columns: 20.00% 20.00% 60.00%;
}
@media screen and (max-width: 586px) {
  .table-type-version-management thead tr,
  .table-type-version-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3";
    grid-template-rows: auto;
    grid-template-columns: 20.00% 20.00% 60.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-version-management tbody tr {
    grid-template-areas: "t-1 t-2 t-3";
  }
}
.table-type-version-management th,
.table-type-version-management td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-version-management .t-item-1,
.table-type-version-management .t-item-2,
.table-type-version-management .t-item-3{
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-version-management .t-item-1,
  .table-type-version-management .t-item-2,
  .table-type-version-management .t-item-3{
    display: flex;
  }
  .table-type-version-management .t-item-4 {
    display: none;
  }
}

/*--------------------------------------
差分・「端末登録」
----------------------------------------*/
/* 並び替えテーブル */
.table-type-riyotoroku tr {
  grid-template-columns: 30.00% 40.00%;
}
@media screen and (max-width: 586px) {
  .table-type-riyotoroku thead tr,
  .table-type-riyotoroku tbody tr {
    grid-template-areas: "t-1 t-2 t-3";
    grid-template-rows: auto;
    grid-template-columns: 30.00% 40.00%;
  }
}
@media screen and (max-width: 586px) {
  .table-type-riyotoroku tbody tr {
    grid-template-areas: "t-1 t-2 t-3";
  }
}
.table-type-riyotoroku th,
.table-type-riyotoroku td {
  padding: 5px clamp(5px, 0.78125vw, 10px);
}
.table-type-riyotoroku .t-item-1,
.table-type-riyotoroku .t-item-2{
  display: flex;
}
@media screen and (max-width: 586px) {
  .table-type-riyotoroku .t-item-1,
  .table-type-riyotoroku .t-item-2{
    display: flex;
  }
  .table-type-riyotoroku .t-item-3 {
    display: none;
  }
}

/*--------------------------------------
通常テキスト用
----------------------------------------*/
.cont_bodytxt_org {
  width: 100%;
  padding-left: 20px;
  padding-right: 10px;
  margin: 20px 0;
  font-size: 14px;
  line-height: 180%;
}

@media screen and (max-width: 586px) {
  .cont_bodytxt_org {
    font-size: 12px;
  }
}
.cont_bodytxt_org p {
  margin: 15px 0 0 0;
}

.cont_bodytxt_org a:link {
  text-decoration: underline;
}

.bodytxt_16 {
  font-size: 16px;
  line-height: 200%;
}

.bodytxt_18 {
  font-size: 18px;
  line-height: 200%;
}

.mt50 {
  margin-top: 50px;
}

.red {
  color: #ff0000;
}

/* ----------------
// カメラ撮影用CSS
---------------- */
#video {
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:320px;
  height:240px;
}

#photo {
  border: 1px solid black;
  box-shadow: 2px 2px 2px black;
  width:320px;
  height:600px;
}

#canvas {
  display:none;
}

.camera {
  width: 340px;
  display:inline-block;
}

.output {
  width: 340px;
  display:inline-block;
}

#startbutton {
  display:block;
  position:relative;
  margin-left:auto;
  margin-right:auto;
  bottom:32px;
  background-color: rgba(0, 150, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  color: rgba(255, 255, 255, 1.0);
}

.contentarea {
  font-size: 16px;
  font-family: "Lucida Grande", "Arial", sans-serif;
  width: 760px;
}


textarea {
	width: 100%;  /* 横幅 */
	height: 30%; /* 高さ */
	background:#ffffff;
	border: 1px solid #cccccc;
	border-radius: 6px;
}

.success-msg {
    display: none;
    position: fixed;
    width: 300px;
    height: 40px;
    line-height: 40px;
    background-color: #29aba4;
    color: #fff;
    top: 100px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    border-radius: 5px;
}