html, body {
  touch-action: none;  /* タッチ操作のズームを完全に無効化 */
  overscroll-behavior: none; /* スクロールのバウンド効果も無効化（任意） */
}

/* モーダルのスタイル */
.modal_status, .modal_code {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
}
.modal_status {
  z-index: 999999;
}
.modal_code {
  z-index: 1000000;
}

.modal_status h1, .modal_code h1 {
  margin: 3.9px;
  font-size: 1.39rem;
}
.modal_code h1{
  margin-bottom: 15px;
}

.modal_status-content, .modal_code-content {
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  /* margin: 15% auto; */
  margin: 10% auto;
  /* padding: 20px; */
  padding: 10px;
  border: 3px solid white;
  border-radius: 10px;
  width: 80%;
  /* max-width: 400px; */
  max-width: 350px;
  text-align: center;
  /* opacity: 0.7; */

  font-size: 0.9rem;
  font-weight: bold;
  line-height: 1.7rem;
}


.status-flex {
  display: flex;
  align-items: center;     /* 縦中央 */
}
.status-flex_A {
  width: 35%; 
  height: 100px;
  margin: 5px auto; 
  /* padding: 15px 8px; */
  /* padding: 13px 8px 0 8px; */
  padding: 2px 8px 10px 8px;
  border: solid 2px white; 
  border-radius: 5px; 
  text-align: center;
}
.status-flex_B {
  width: 45%; 
  height: 100px;
  margin: 5px auto; 
  padding: 2px 8px 10px 8px;
  border: solid 2px white; 
  border-radius: 5px; 
  text-align: right;
}
.status-flex_C {
  width: 91%; 
  margin: 5px auto; 
  padding: 7px;
  border: solid 2px white; 
  border-radius: 5px; 
  text-align: left;
  font-size: 0.82rem;
}

.open-btn_code, .close-btn_status {
  touch-action: manipulation;
  margin: 11px 13px;
  padding: 10px 30px;
  background-color: black;
  color: white;
  border: 3px solid white;
  border-radius: 10px;
  font-size: 1.15rem;
  font-weight: bold;
  cursor: pointer;
}
.open-btn_code:hover {
  background-color: #0077ff;
}
.close-btn_status:hover {
  background-color: red;
}




.code-text {
  margin-bottom: 7px;
}
.btn_code-flex {
  margin-top: 7px;
  display: flex; 
  justify-content: center; /* 横方向の中央揃え */
  align-items: center;     /* 縦方向の中央揃え（高さがある場合） */
}
.ok-btn_code, .close-btn_code {
  touch-action: manipulation;
  margin: 11px 13px;
  padding: 10px 30px;
  color: white;
  border: 3px solid white;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
.ok-btn_code {
  background-color: #0077ff;
}
.close-btn_code {
  background-color: black;
}
.close-btn_code:hover {
  background-color: red;
}





  /*===============================
パソコン画面用
=================================*/
@media print, screen and (min-width: 820px) {
  /* .modal {
    width: 33%;
  } */


.modal_status, .modal_code {
  font-size: 1.1rem;
}
.modal_status h1, .modal_code h1 {
  margin: 10px;
  font-size: 1.7rem;
}

.modal_status-content, .modal_code-content {
  margin: 10% auto;
  max-width: 450px;
}


.status-flex_A {
  font-size: 1rem;
}
.status-flex_B {
  font-size: 1rem;
}
.status-flex_C {
  width: 89%; 
  font-size: 0.9rem;
  padding-left: 15px; 
}



.open-btn_code, .close-btn_status {
  margin: 13px 15px;
}

}