/* Readmoreボタン（高度なアニメーション） - Cookie同意ボタンと共通化 */
.readmore-btn-container {
  position: relative;
  display: inline-flex; /* flexboxで中央揃え */
  align-items: center;
  justify-content: center;
  width: 130px; /* Cookie同意ボタンと統一 */
  height: 40px; /* Cookie同意ボタンと統一 */
  padding: 0;
  background-color: #06f; /* ブルー背景 */
  color: #ffffff; /* 白テキスト */
  border: 2px solid rgba(255, 255, 255, 0.3); /* 薄い白のボーダーを追加 */
  border-radius: 5px; /* Cookie同意ボタンと統一 */
  cursor: pointer;
  overflow: visible; /* ボーダーアニメーションが表示されるように */
  transition: all 0.5s ease;
  margin: 15px auto; /* センター寄せ用 */
  text-decoration: none;
  box-shadow: none; /* box-shadowも削除 */
  outline: none;
  z-index: 1;
}

.readmore-btn-container:hover {
  background-color: transparent; /* ホバー時は透明に */
  color: #ffffff; /* テキスト色は白を維持 */
  border: none; /* ホバー時に標準ボーダーを非表示 */
}

/* テキストスタイル（Readmoreボタンは画像） */
.readmore-btn-container .readmore-btn-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  line-height: 40px; /* ボタンの高さに合わせて調整 */
  text-align: center;
  overflow: hidden; /* 子要素のはみ出しを隠す */
  /* flexboxで中央揃えは不要になるため削除 */
  /* display: flex;
  justify-content: center;
  align-items: center; */
  z-index: 3; /* テキスト/画像をボーダーより前面に */
}

/* ホバーで画像が切り替わるため、テキスト色のアニメーションは不要 */
.readmore-btn-container .readmore-btn,
.readmore-btn-container .readmore-btn-hover {
  position: absolute;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.readmore-btn-container .readmore-btn {
  opacity: 1; /* 通常時はreadmore-white.pngを表示 */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; /* テキスト/画像をボーダーより前面に */
  background-image: url('../../images/readmore-white.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.readmore-btn-container .readmore-btn-hover {
  opacity: 0; /* 通常時はreadmore-blue.pngを非表示 */
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; /* テキスト/画像をボーダーより前面に */
  background-image: url('../../images/readmore-blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.readmore-btn-container:hover .readmore-btn {
  opacity: 0; /* ホバー時はreadmore-white.pngを非表示 */
}

.readmore-btn-container:hover .readmore-btn-hover {
  opacity: 1; /* ホバー時はreadmore-blue.pngを表示 */
}


/* ボーダーアニメーション要素の共通スタイル */
.readmore-btn-container .border-top,
.readmore-btn-container .border-right,
.readmore-btn-container .border-bottom,
.readmore-btn-container .border-left {
  position: absolute;
  background: #06f; /* ブルーボーダー */
  transition: all 0.5s ease;
  z-index: 2; /* ボーダーを画像より背面に */
}

/* 上ボーダー */
.readmore-btn-container .border-top {
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
}

/* 右ボーダー */
.readmore-btn-container .border-right {
  top: 0;
  right: 0;
  width: 2px;
  height: 0%;
}

/* 下ボーダー */
.readmore-btn-container .border-bottom {
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
}

/* 左ボーダー */
.readmore-btn-container .border-left {
  bottom: 0;
  left: 0;
  width: 2px;
  height: 0%;
}

/* ホバー時のボーダーアニメーション */
.readmore-btn-container:hover .border-top,
.readmore-btn-container:hover .border-bottom {
  width: 100%;
}

.readmore-btn-container:hover .border-right,
.readmore-btn-container:hover .border-left {
  height: 100%;
}

/* レスポンシブ対応 */
@media (max-width: 600px) {
  .readmore-btn-container {
    width: 120px;
    margin: 0.25rem auto;
  }
}

@media (max-width: 480px) {
  .readmore-btn-container {
    width: 100px;
    height: 35px;
    font-size: 12px;
    padding: 8px 15px;
  }
  .readmore-btn-container .readmore-btn-wrapper {
    line-height: 35px;
  }
}