/* パネル背景に画像を使用 */

.box-panel {
  position: relative; /* 擬似要素を配置するために必要 */
  background-repeat: no-repeat; /* 繰り返しなし */
  background-position: center; /* 中央配置 */
  background-size: cover; /* カバー */
}

.box-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* 半透明の白 */
  z-index: 1; /* テキストより下に配置 */
  background-clip: border-box; /* 背景をボーダーボックスの内側にクリップ */
}

.box-panel > div { /* box-panel直下のdiv要素を指定 */
  padding: 0px; 
}

.box-panel ul {
  position: relative; /* 擬似要素より上に配置 */
  z-index: 2;
  color: black; /* テキスト色を黒に */
  margin: 10px 50px;
  font-size: 1.2em;
}


/* テキストリンク装飾 */
a {
    color: var(--brand-color); /* リンクの基本色 */
    text-decoration: none; /* 下線を削除 */
    position: relative; /* 疑似要素のための設定 */
    transition: color 0.3s ease; /* 色の変化を滑らかに */
}

a:hover {
    color: #008ec2; /* ホバー時の色（少し濃い水色） */
}

a::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0); /* 通常時はスケール0で非表示 */
    height: 2px;
    bottom: -2px; /* リンクの下に表示 */
    left: 0;
    background-color: #008ec2; /* ホバー時のアンダーライン色 */
    transform-origin: bottom right; /* 右下を基点にスケール */
    transition: transform 0.25s ease;
}

a:hover::after {
    transform: scaleX(1); /* ホバー時にスケール1で表示 */
    transform-origin: bottom left; /* 左下を基点にスケール */
}