font-family:monospace;
font-size: large;

body {
    /*font-family: "Nimbus Mono";*/
    /*font-family: cursive;*/
    /*font-family: 'system-ui';*/
    /*font-family: "Gill Sans", sans-serif;*/
    font-size: large;
}

.f-lg-xx {
    font-size: xx-large;
}
.f-lg-x {
    font-size: x-large;
}
.f-lg {
    font-size: large;
}
.f-md {
    font-size: medium;
}
.f-sm {
    font-size: small;
}
.f-sm-x {
    font-size: x-small;
}
.f-sm-xx {
    font-size: xx-small;
}

.wth-1 { width: 5%; }
.wth-2 { width: 10%; }
.wth-3 { width: 15%; }
.wth-4 { width: 20%; }
.wth-5 { width: 25%; }
.wth-6 { width: 30%; }
.wth-7 { width: 35%; }
.wth-8 { width: 40%; }
.wth-9 { width: 45%; }
.wth-10 { width: 50%; }
.wth-11 { width: 55%; }
.wth-12 { width: 60%; }
.wth-13 { width: 65%; }
.wth-14 { width: 70%; }
.wth-15 { width: 75%; }
.wth-16 { width: 80%; }
.wth-17 { width: 85%; }
.wth-18 { width: 90%; }
.wth-19 { width: 95%; }
.wth-20 { width: 100%; }






.bg_checkbox {
    list-style: none;
    /*overflow: hidden;*/
    display: inline-block;
    padding: 0;
    margin: 0;
    /*width:200px;*/
    border:1px solid #c0c0c0;
}
.bg_checkbox li {
    position:relative;
    /*
    border-bottom:1px solid #c0c0c0;
    */
    text-align: center;
    float: left;
    width: 18px;
    height: 18px;
}
.bg_checkbox li:last-child {
    border-bottom:none;
}
.bg_checkbox li input[type="checkbox"] {
    display:block;
}
.bg_checkbox li label {
    display: block;
    /*padding: 10px 10px 10px 40px;*/
    padding: 0px;
    cursor:pointer;
    width: 18px;
    height: 18px;
}
.bg_checkbox li label:after {
    content: "";
    width: 18px;
    height: 18px;
    background-size: 18px;
    background-image:  url(./../img/app/chk64_gray.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    margin: -3px 0 0 0px;
    /*
    left: 5px;
    */
}
/*
.bg_checkbox li input[type="checkbox"]:checked + label {
    background-color:#060;
    color:#fff;
}
*/
.bg_checkbox li input[type="checkbox"]:checked + label:after {
    background-image:url(./../img/app/chk64_blue.png);
}

input[type="radio"]+label {
    margin-right: 8px;
}

.float-l {
    float: left;
}

.cobblestone {
    box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .3);
}


/** ▼点滅の CSS ーーーーーーーーーーーーーーーーーーーーーーーーーー */
/**  点滅させたい要素の class に blinking-icon を付与 */
@keyframes blink {
    0% {
      opacity: 1;
    }
    20% {
      opacity: 0.2;
    }
    100% {
      opacity: 1;
    }
  }
  
  .blinking-icon {
    animation: blink 2s infinite; /* 1秒ごとに繰り返す */
  }
  /** ▲点滅の CSS ーーーーーーーーーーーーーーーーーーーーーーーーーー */

  /*
 横並びにしたい要素の直上のDivに設定すると、直下の要素が横並びになる
*/
.horizontal-divs-root {
    display: flex;
}
  /*
 横並びにしたい要素の直上のDivに設定すると、直下の要素が横並びになる（右詰バージョン）
*/
.horizontal-divs-root-right {
  display: flex;
  justify-content: flex-end;
}
/*
横並びにしたい要素自体に設定する。
横並び、かつ 中央ぞろえとなる。
*/
.horizontal-divs2 {
    display: inline-block;
}
 


/** #region ダイアログのフェイドイン/フェイドアウト */
/*
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

dialog {
    / * デフォルトスタイル * /
    display: block;
    position: fixed;
    inset-inline: 0;
    inset-block: 0;
    
    / * 非表示のアニメーション登録 * /
    animation-name: fadeOut;
    animation-fill-mode: forwards;
    animation-duration: 200ms;
    animation-timing-function: ease-out;
}
*/
/** #endregion ダイアログのフェイドイン/フェイドアウト */


/**
   ３点ドットのローディングアイコン
   
   適用サンプル
   <div class="loading-container">
     <div class="dot-loading"></div>
   </div>
 */
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .dot-loading {
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
  }

  .dot-loading::before,
  .dot-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #3498db; /* ドットの色を指定 */
    animation: dotAnimation 1.5s infinite ease-in-out;
  }

  .dot-loading::before {
    left: -40px;
  }

  .dot-loading::after {
    left: 40px;
  }

  @keyframes dotAnimation {
    0%, 100% {
      transform: scale(0);
    }
    50% {
      transform: scale(1);
    }
  }
/** ３点ドットのローディングアイコン */

/**
  くるくる回るローディング
  ※実装サンプル
  <div class="loading-container">
    <div class="spinner"></div>
  </div>
*/
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.spinner {
  /*border: 4px solid #3498db;*/ /* ボーダーの色を指定 */
  border: 4px solid lightpink; /* ボーダーの色をかわいいピンクに変更 */
  border-top: 4px solid transparent;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite; /* 回転アニメーション */
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/** くるくる回るローディング */