/* ソフトウェアキーボード */
.keyboard {
  position: absolute;
  bottom: 10px;
  background: #f0f0f0;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
  display: none;
  z-index:820;
}

.id-keyboard{
  /* 横幅は常に100%、最大幅はお好みで */
  width: 100%;
  max-width: 900px;
  left:0px;
  height: fit-content;
}
.kana-keyboard{
  width: 100%;
  max-width: 900px;
  left:0px;
  height: fit-content;
}
.number-keyboard{
  left:0px;
  width: 300px;
  min-width: 300px;
  max-width: 600px;
  height: fit-content;
}

/* キーボード全体レイアウト */
.keyboard-layout {
  display: flex;
  flex-wrap: wrap; /* 幅が足りないとき折り返し */
  align-items: flex-start; /* 要素を上揃えにして余白を防ぐ */
  gap: 10px;
  width: 100%;
}
 .keyboard-layout-scroll {
  display: flex;
  flex-wrap: wrap; /* 幅が足りないとき折り返し */
  align-items: flex-start; /* 要素を上揃えにして余白を防ぐ */
  gap: 10px;
}

/* 英字キーのコンテナ */
.letters-container {
  /* 横幅が余っていれば広がり、狭ければ縮む */
  flex: 1 1 auto;
  min-width: 0; /* flexアイテムが横スクロールを起こさないようにする */
}

/* 英字キー: 自動折り返し配置 */
.letters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5px;
}

/* 数字キーのコンテナ
   横並びのときは固定幅にしてキーが横長にならないようにする */
.numbers-container {
  /* 初期(横並び)は固定幅で 3列×50px + ギャップ分 */
  flex: 0 0 auto;
  width: 180px;
}

/* 数字キー: 3列固定 */
.numbers {
  display: grid;
  grid-template-columns: repeat(3, 50px);
  gap: 5px;
}

/* 上段：小さいカナ＆通常のカナを2カラム */
.small-kana {
  padding: 2.5px;
  border: 1px solid #ccc; /* 必要に応じて調整 */
  border-radius: 4px;
  flex: 1 1 auto;
  min-width: 20%;
}
.normal-kana {
  padding: 5px;
  border: 1px solid #ccc; /* 必要に応じて調整 */
  border-radius: 4px;
  flex: 0 0 auto;
}
.small-kana-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5px;
  
  transform : scale(0.85);
}
.small-kana-group-title {
  background: darkgray;
  color: black;
  margin-bottom: 10px;
  
  font-weight: bold;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  transition: background 0.2s, transform 0.1s;
}
/* 通常のカナは従来の配置（右から左に各列） */
.kana-container {
  display: flex;
  flex-direction: row-reverse;
  gap: 5px;
}
.kana-column {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* 下段：修飾キー（濁点、半濁点、空白、記号）を一列に */
.modifier-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5px;
  margin-top: 10px;
}

/* 数字キーコンテナ */
.digit-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-top:10px
}
.digit-row {
  display: flex;
  gap: 10px;
}

/* 各キーの共通スタイル */
.key {
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  border: 1px solid #ccc;
  background: white;
  border-radius: 5px;
  transition: background 0.2s, transform 0.1s;
}

.key.id{
  height: 50px;
  line-height: 50px;
  font-size: 20px;
}
.key.kana{
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  min-width: 50px;
}
/* 大きめフォント */
.key.kana.font-large{
  font-size: xx-large;
}

.key.number{
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 32px;
}
.key.move{
  width: 80px;
  height: 80px;
  line-height: 80px;
  font-size: 20px;
}

/* ホバーやクリック時のエフェクト */
.key:hover {
  background: #e0e0e0;
  transform: scale(1.05);
}
.key:active {
  background: #d0d0d0;
  transform: scale(0.95);
}

/* 記号キー */
.symbols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  gap: 5px;
  margin-top: 10px;
}

/* ボタン配置 */
.button-group {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.button-group button {
  flex: 1;
  height: 50px;
}

/* 閉じるボタン */
.close-button {
  width: 100%;
  margin-top: 10px;
  height: 50px;
  background: #fff;
}
/* 大文字にするボタン */
.btn-secondary{
	background:#6c757d;
	color:#fff;
}
.btn-secondary:hover{
	color:#fff;
	background:#5c636a;
	border-color:#565e64;
}
/* 枠線・パディング（必要に応じて削除可） */
.letters-container,
.numbers-container,
.symbols,
.modifier-container {
  border: 1px solid #ccc;
  padding: 5px;
}

/* 入力中 */
.focus-in{
  background-color: #d5f7fc;
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

/* 画面幅が 500px 以下になったら横スクロール表示 */
@media (max-width: 499.9px) {
	 .keyboard-layout-scroll {
	  display: flex;
	  flex-wrap: wrap; /* 幅が足りないとき折り返し */
	  align-items: flex-start; /* 要素を上揃えにして余白を防ぐ */
	  gap: 10px;
	  width:100%;
	  overflow-x: auto;
	}
	/* グラデーション要素の基本スタイル */
	.left-fade,
	.right-fade {
	  pointer-events: none; /* クリックを透過 */
	  position: absolute;
	  top: 0;
	  bottom: 0;      /* 縦方向に全体を覆う */
	  width: 2rem;    /* グラデーション表示の幅 */
	  display: none;  /* JavaScript で表示/非表示を制御 */
	}
	
	/* 左グラデーション */
	.left-fade {
	  left: 0;
	  background: linear-gradient(to right, rgba(172, 172, 172, 1),#ffffff );
	  top: 135px;
      bottom: 185px;
      left:15px;
      opacity:0.5;
	}
	
	/* 右グラデーション */
	.right-fade {
	  right: 0;
	  background: linear-gradient(to left, rgba(172, 172, 172, 1),#ffffff );
	  top: 135px;
      bottom: 185px;
      right:15px;
      opacity:0.5;
	}
}
/* 画面幅が 600px 以下になったら縦並びにする */
@media (max-width: 600.9px) {
  .keyboard-layout {
    flex-direction: column;
  }
  .keyboard-order-1{
  	order: 1;
  }
  .keyboard-order-2{
  	order: 2;
  }
  .keyboard-order-3{
  	order: 3;
  }

 .letters-container {
    width: 100%;
  }

  .key.kana{
    min-width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
  }
  .small-kana{
    width: 100%;
  }
  /* 数字キーも自動折り返しに切り替え */
  .numbers-container {
    width: 100%;
  }
  .numbers {
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  }
}