/* 1. シンプルボタン */
    .btn-modern {
      display: inline-block;
      padding: 12px 32px;
      background-color: #007bff;
      color: #ffffff;
      text-decoration: none;
      font-weight: bold;
      border-radius: 6px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;
    }
    .btn-modern:hover {
      background-color: #0056b3;
      transform: translateY(-2px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    /* 2. グラデーションボタン */
    .btn-gradient {
      display: inline-block;
      padding: 14px 40px;
      background: linear-gradient(45deg, #ff416c, #ff4b2b);
      color: #ffffff;
      text-decoration: none;
      font-weight: bold;
      border-radius: 50px;
      box-shadow: 0 4px 15px rgba(255, 65, 108, 0.4);
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-gradient:hover {
      transform: scale(1.03);
      box-shadow: 0 6px 20px rgba(255, 65, 108, 0.6);
    }

.btn-outline {
  display: inline-block;
  padding: 12px 32px;
  background-color: transparent; /* 背景を透明に */
  color: #333333;
  border: 2px solid #333333; /* 外枠の線 */
  text-decoration: none;
  font-weight: bold;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.btn-outline:hover {
  background-color: #333333; /* 背景を黒に塗りつぶす */
  color: #ffffff; /* 文字を白にする */
}

  .btn-slide-bg {
    display: inline-block;
    padding: 14px 40px;
    color: #007bff; /* 最初は文字を青に */
    font-weight: bold;
    text-decoration: none;
    border: 2px solid #007bff; /* 青い枠線 */
    border-radius: 6px;
    position: relative; /* 背景の動きの基準点 */
    z-index: 1;
    overflow: hidden; /* はみ出た背景を隠す */
    transition: color 0.4s ease;
  }

  /* 背景の動きを作る仕掛け（左側に隠しておく） */
  .btn-slide-bg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #007bff; /* マウスを乗せた時の背景色 */
    z-index: -1;
    transform: scaleX(0); /* 最初は幅をゼロに */
    transform-origin: left; /* 左端を固定 */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); /* スムーズな加速 */
  }

  /* マウスを乗せたとき（ホバー）の変化 */
  .btn-slide-bg:hover {
    color: #ffffff; /* 文字を白にする */
  }
  .btn-slide-bg:hover::after {
    transform: scaleX(1); /* 背景を左から右へ 100% 広げる */
  }


  .btn-glass-shine {
    display: inline-block;
    padding: 14px 40px;
color: #007bff; /* 最初は文字を青に */
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    /* ガラスのような半透明の背景 */
    background: rgba(255, 255, 255, 0.15); 
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* 背景をぼかすエフェクト */
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
  }

  /* キラリと光る線の仕掛け */
  .btn-glass-shine::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -60%;
    width: 30%;
    height: 200%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.6) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(30deg);
    transition: none;
  }

  /* マウスを乗せたときに光の線を通り過ぎさせる */
  .btn-glass-shine:hover::after {
    left: 140%;
    transition: all 0.6s ease;
  }


  .btn-stripe-move {
    display: inline-block;
    padding: 14px 40px;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    /* CSSだけで斜めストライプ柄を作成（ベースは薄いピンク、線は濃いピンク） */
    background-image: linear-gradient(-45deg, #ff758c 25%, #ff7eb3 25%, #ff7eb3 50%, #ff758c 50%, #ff758c 75%, #ff7eb3 75%, #ff7eb3);
    background-size: 40px 40px; /* ストライプの太さ */
    transition: transform 0.2s;
  }

  /* マウスを乗せたときにアニメーションを開始 */
  .btn-stripe-move:hover {
    transform: translateY(-2px);
    /* stripe-animation という名前の動きを無限にループさせる */
    animation: stripe-animation 1s linear infinite;
  }

  /* 背景画像を横にスライドさせるアニメーションの定義 */
  @keyframes stripe-animation {
    0% { background-position: 0 0; }
    100% { background-position: 40px 0; }
  }

.btn-custom-image {
  background-image: url('./image.png');
  background-size: cover; /* ボタンのサイズに画像を合わせる */
  background-position: center;


/* ボタンを横並びにする設定 */
.btn-group {
  display: flex;       /* 子要素（ボタン）を横並びにする */
  gap: 16px;          /* ボタンとボタンの間のすき間（好みの広さに調整してね） */
  flex-wrap: wrap;    /* 画面が狭くなったら自動で折り返すお守り設定 */
}