html, body {  /* スマートフォンでの画面外スクロール禁止用 */
  margin:0 0 50px;
  width:100%;
}
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 0px;
  margin:10px 0 30px;
  justify-content: center;
}
.box {  /* カードを置くボックス */
  width: 40px;
  height: 40px;
  padding: 0;
  border: 2px solid #333;
  position: relative;
  text-align:center;
  margin:0;
  background-color:#fff;
}
.box_f{
  background-color:#74bffc;
}
.box-over {  /* ボックス上にカードがドラッグされてきたらボックスをやや白くする */
  background: rgba(255, 255, 255, 0.3);
}
.card {  /* カード */
  width: 40px;
  height: 40px;
  background-color:#eee;
  cursor: grab;
  font-weight: bold;
  text-align:center;
  margin:0;
}
.card::before {
  content: attr(label); /* 表示したい文字 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: rgba(0, 0, 0); /* 透明感 */
  pointer-events: none; /* クリック無効 */
  white-space: nowrap;
}
.dragging {  /* ドラッグ中のカード (幽体離脱された側) */
  opacity: 0.3;
}
.drag-preview {  /* ドラッグ中のカード (幽体離脱した側) (スマートフォン用) */
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.7;
  display: none;
  transform: translate(-50%, -50%);
}
.box::before {
  content: attr(label); /* 表示したい文字 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: rgba(0, 0, 0, 0.3); /* 透明感 */
  pointer-events: none; /* クリック無効 */
  white-space: nowrap;
}
h1,h2,p{
  word-break:break-all;
}
#info{
  text-align: center;
  user-select: none;
  margin:0 auto;
  width:80%;
}

button{
  border:1px solid gray;
  padding:5px;
  margin:20px auto;
  background:var(--impact);
  font-weight: bold;
}
h1{
  font-size: 30px;
}
h2{
  font-size: 20px;
}
p{
  line-height: 1.5em;
  margin-bottom:20px;
}
p.under_link{
  line-height: 3em;
}
#result{
  color:red;
  font-size: 30px;
  font-weight: bold;
}

.xword_article{
  text-align: center;
  margin:0 auto 30px;
}
.xword_article a{
  display:inline-block;
  background: #ddd;
}