@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.button-container {
  text-align: center;
  margin-top: 20px; /* Optional: Adjust as needed */
}

.custom-swell-block-button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  padding: 0.5em 6em; /* Adjust width */
  border-radius: 5px; /* Rounded edges */
  background: transparent;
  border: 2px solid #007bff; /* Blue outline border */
  color: #007bff; /* Blue text color */
  font-weight: bold; /* Make text bold */
  position: relative;
  box-shadow: none;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
  animation: pulse 3s infinite; /* Add pulse animation */
}

.custom-swell-block-button:hover {
  background: #007bff; /* Blue background on hover */
  color: white;
  transform: translateY(-2px);
}

.custom-swell-block-button:active {
  top: 4px;
  box-shadow: none;
}

.custom-swell-block-button__link {
  display: inline-flex;
  align-items: center;
}

.custom-icon {
  margin-left: 0.5em;
}

@keyframes pulse {
  0%, 100% {
    background-color: transparent;
    color: #007bff;
  }
  50% {
    background-color: #0056b3; /* Darker blue tint */
    color: white; /* Text color becomes white */
  }
}

/* テーブル用カスタムボタン */
.table-custom-swell-block-button {
  display: inline-block; /* コンテンツの幅に合わせる */
  box-sizing: border-box; /* 幅計算にパディングとボーダーを含む */
  text-align: center;
  text-decoration: none;
  padding: 0.5em 1em; /* 上下のパディングを縮小 */
  border-radius: 0; /* 角を直角に */
  background: #202487; /* 青色の背景 */
  border: 5px solid #202487; /* 青色のアウトラインボーダー */
  color: white; /* テキストの色を白に */
  font-weight: bold; /* テキストを太字に */
  position: relative;
  overflow: hidden; /* オーバーフロー部分を隠す */
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}

.table-custom-swell-block-button:hover {
  color: white;
  transform: translateY(-2px); /* ホバー時に少し上へ移動 */
}

.table-custom-swell-block-button:active {
  top: 4px; /* クリック時に下へ移動 */
  box-shadow: none; /* 影をなくす */
}

.table-custom-swell-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}