#card {
  width: 91mm;
  height: 55mm;
  padding: 0.35cm 0.345cm; /* 縦: 0.35cm、横: 0.345cm の余白 */
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

#left {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.name-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0; /* 要素間の隙間をゼロに */
}

#display-title {
  font-size: 8px;
  font-weight: bold;
  color: #666;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}

#display-name {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: center;
}

#display-interests {
  font-size: 8px;
  color: #333;
  white-space: normal;
  word-wrap: break-word;
  text-align: center;
}

#left img {
  border-radius: 50%;
  width: 100px; /* PDFでも同様のサイズで表示されるように */
  height: 100px; /* 高さも同様に */
  object-fit: cover; /* 画像がはみ出さないように調整 */
  margin-bottom: 5px;
}

#right {
  flex: 2;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.info {
  display: flex;
  align-items: center;
  margin: 3px 0;
}

.info img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.info span {
  font-size: 12px; /* 文字サイズを小さく */
  line-height: 1.2; /* 行間を詰めてコンパクトに */
}

#card2 {
  width: 91mm;
  height: 55mm;
  padding: 0.35cm 0.345cm; /* 縦: 0.35cm、横: 0.345cm の余白 */
  border: 1px solid #333;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

#left-card2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

#right-card2 {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crab-img {
  width: 100px;
  height: auto;
  object-fit: contain;
}

.qr-img {
  width: 100px;
  height: auto;
  object-fit: contain;
}