div.tbox1 {
  position: relative     ;
  display : inline-block ;
}

div.tbox2 {
  position   : absolute ;
  font-size  : 2.75vw   ;
  top        :   5%     ;
  left       : 100%     ;
  white-space: nowrap   ;
  text-align : right    ;
  transform  : translate(-100%,0%) ;
  padding    : 0% 5% 0% 0%         ;
  line-height: 1.2em               ;
}

h1.multilineTitle {
  margin   : 0       ;
  display  : inline  ;
  color    : #222266 ;
  font-weight     : bold ;
  letter-spacing  : 1px  ;
  background-color: rgba(255,255,255,0.7) ;
}

h2.card_title {
  letter-spacing  : 1px !important ;
}

li span.list_title {
  color: #ff4500;   /* overwrite */
}

span.blueBold {
  color      : #005aff ;
  font-weight: bold    ;
}

.message {
  margin : 30px 0 30px 0 ;
}

/* リンクにマウスホバー時に注釈を表示 */
.message a {
  position: relative; /* 各リンクを基準にして注釈を絶対位置で配置 */
  text-decoration: none;
}

.message .remark {
  background: #EEFFEE;
  border: 1px solid #CCCCCC;
  color: #000000;
  display: none; /* 最初は非表示 */
  line-height: 1.2em;
  padding: 0.5em;
  position: absolute; /* リンクに対して絶対位置 */
  top: 100%; /* リンクの真下に表示 */
  left: 0;
  width: 23em;
  z-index: 100;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ホバー時に注釈ボックスを表示 */
.message a:hover .remark {
  display: block;
}

.imgg {
<!-- display: flex;  -->  /* 図の高さが引き伸ばされてしまうためコメントアウト */
}

.imgg img {
  margin-left: 65px;
  width: 25%; /* 画像の幅を指定（必要に応じて調整） */
  height: auto; /* 高さは自動調整 */
}

a:hover {
  color: #ff8c00;
}

@media screen and (min-width: 1211px) {
  .card {
  margin: 80px auto 40px auto;
}