/* Bootstrapの基本スタイルを活かし、追加したいスタイルのみ記述 */

body {
    /* 必要に応じてフォントを設定 */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* 通知ボタンのベルアイコン */
.btn .icon {
    font-size: 1.2em; /* ボタンのテキストサイズに合わせる */
    margin-right: 8px;
    display: inline-block;
    animation: bell-ring 2s ease-in-out infinite;
}

/* ベルのアニメーション */
@keyframes bell-ring {
    0%, 50%, 100% { transform: rotate(0); }
    5%, 15%, 25%, 35%, 45% { transform: rotate(13deg); }
    10%, 20%, 30%, 40% { transform: rotate(-13deg); }
}

/* 利点セクションの絵文字アイコン */
.feature-icon {
    font-size: 3rem; /* 48px */
}

/* カードに少しだけホバーエフェクト */
.card:hover {
    transform: translateY(-5px);
    transition: transform 0.2s ease-in-out;
}

.noto-color-emoji-regular {
  font-family: "Noto Color Emoji", sans-serif;
  font-weight: 400;
  font-style: normal;
}