/* ==== button-30 元のスタイル ================================= */
.button-30{
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    width:250px;
    margin:0 auto;
    padding:.9em 2em;
    border:1px solid #2589d0;
    border-radius:30px;               /* 丸みを30pxにしてやわらかく */
    background:#fff;
    color:#2589d0;
    font-size:1em;
    cursor:pointer;
    transition:transform .2s;
  }
  .button-30:hover{
    animation:anima-button-30 1s;
    transform:translateY(-2px);       /* ふわっと浮く */
  }
  @keyframes anima-button-30{
    0%  { box-shadow:0 0 0 0 rgb(37 137 208 / .5); }
    100%{ box-shadow:0 0 0 1.2em rgb(0 0 0 / 0);   }
  }
  
  /* ==== 位置&カラーを牧場サイト用にカスタム ==================== */
  .oubo{
    position:fixed;
    top:60px; right:40px;
    z-index:800;
    background:#4FD9B3;
    color:#fff;
    border:1px solid #4FD9B3;
    padding:.9em 2em;
    border-radius:30px;
    font-size:1em;
  }
  .oubo:hover{
    /* アニメ影もサイトカラーで */
    animation:none;                   /* 元の青影をオフ… */
    box-shadow:0 0 0 0 rgb(79 217 179 / .5);
    animation:ouboShadow 1s;
  }
  @keyframes ouboShadow{
    0%  { box-shadow:0 0 0 0 rgb(79 217 179 / .5); }
    100%{ box-shadow:0 0 0 1.2em rgb(0 0 0 / 0);   }
  }
  
  /* ==== モバイルで幅を縮める（任意） =========================== */
  @media(max-width:768px){
    .oubo{
        top:auto;              /* ← 既存 top を打ち消す      */
        right:auto;            /* ← 既存 right も打ち消す    */
        bottom:20px;           /* 下から 20px に固定         */
        left:50%;              /* 画面中央                    */
        transform:translateX(-50%);  /* 横中央に揃える        */
        width:90%;
        height:auto;
        font-size:.9em;
        padding:.8em 1.5em;
        border-radius:10px;

      }


      .oubo:hover{
        /* 中央寄せを保ったまま少し浮かせる */
        transform:translateX(-50%) translateY(-2px);
      }
  }