/* SMS認証 */
/* モーダル背景（画面全体） */
#sms-modal {
  position: fixed;
  inset: 0; /* top:0 right:0 bottom:0 left:0 と同義 */
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center;  /* 横中央 */

  background: rgba(0, 0, 0, 0.6); /* 背景を暗く */
  z-index: 9999;
  overflow: hidden;
}

/* モーダル本体 */
.sms-box {
  width: 90%;
  max-width: 420px;

  border: 2px solid #98c2dd;
  border-radius: 16px;

  background: #fff;
  border-radius: 10px;
  padding: 24px;
  box-sizing: border-box;

  /* スマホで縦に長くなった場合の保険 */
  max-height: 90vh;
  overflow-y: auto;
}

.sms-box .flow img{
	width:100%;
}

.sms-box h3{
	font-weight:bold;
	text-align:center;
	margin:0.5rem 0;
}

.wc-js-error {
  color: #d63638;
  font-size: 13px;
  margin-top: 4px;
}

#sms_code {
  display: block;
  
  margin: 16px auto; 
  
  width: 16.8ch;          /* ← 6文字分を厳密に確保 */
  padding: 10px 0 10px 0;

  font-size: 1.2rem;
  letter-spacing: 1.1ch;
  text-align: center;

  border: 1px solid #ccc;
  border-radius: 6px;

  box-sizing: border-box;
}

/* フォーカス時 */
#sms_code:focus {
  outline: none;
  border-color: #007bff;
}

#send_sms,#verify_sms {
  display: block;
  margin: 20px auto;        /* 中央寄せ */

  background-color: #98c2dd;      /* 背景色 */
  color: #424242;              /* 文字色：黒 */
  border: none;             /* 枠なし */
  border-radius: 999px;     /* しっかり丸く */

  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;

  cursor: pointer;
}

#sms-step1 .alert{
  margin-bottom:0;
}

#sms-step1 .alert2{
  padding-top:0;
}

#back_to_join,
.back-btn {
  display: block;
  margin: 16px auto;     /* 中央寄せ */

  background: #ccc;     /* 背景：黒 */
  color: #333;          /* 文字：白（見やすく） */

  border: none;         /* 枠なし */
  border-radius: 999px; /* 角丸 */

  padding: 10px 28px;
  font-size: 14px;
  cursor: pointer;
}

.checkmark-wrap {
	text-align: center;
}

.checkmark-wrap img {
	width: 30%;
	height: auto;
}

#sms_error{
	color:red;
	text-align:center;
}