@charset "utf-8";
/* ぱたぱたアニメ館 */
/* 1. ボタンを並べる土台の設定 */
.number-menu {
  display: inline-flex;  /* ボタンを横に並べる */
  gap: 6px;              /* ボタン同士の隙間（ここを増減して調整） */
  margin-top: 10px;      /* 上のコンテンツとの距離 */
  vertical-align: middle;
}

/* 2. ボタン本体：あの「濃い青」と「形」の設定 */
.number-ocean {
  margin: 0;
  width: 40px;           /* ボタンの幅 */
  height: 40px;          /* ボタンの高さ */
  display: flex;         /* 数字を中央に配置するため */
  align-items: center;   /* 縦方向の中央 */
  justify-content: center; /* 横方向の中央 */
  position: relative;    /* 内部の「キラリ」の基準点にする */
  
  /* メインの青色：中心から外側へ広がるグラデーション */
  background: radial-gradient(circle at center, 
    rgba(100, 200, 255, 0.8) 0%,   /* 中心：明るい水色 */
    rgba(0, 120, 255, 0.7) 100%    /* 外側：濃いブルー */
  ) !important;

  border: 2px solid rgba(255, 255, 255, 1) !important; /* パキッとした白フチ */
  box-shadow: 0 6px 15px rgba(0, 120, 255, 0.4) !important; /* 外側の青い影 */
  
  color: #ffffff !important; /* 数字の色（白） */
  font-weight: bold;         /* 数字を太字に */
  font-size: 16pt;           /* 数字の大きさ */
  text-decoration: none;     /* リンクの下線を消す */
  border-radius: 50%;        /* 正円にする */
  
  /* 背後を少しぼかす（ガラス・ジェル感が出る） */
  backdrop-filter: blur(1px);
  
  /* 動きを滑らかにする（0.2秒かけて変化） */
  transition: all 0.2s ease;
  z-index: 1;                /* 数字を一番手前に出す */
}

/* 3. ボタン上部の「白いキラリ」：擬似要素beforeで作成 */
.number-ocean::before {
  content: "";               /* 空の要素を作る */
  position: absolute;        /* ボタン内の好きな場所に置く */
  top: 4px;                  /* 上からの位置 */
  left: 20%;                 /* 左からの位置 */
  width: 60%;                /* キラリの横幅 */
  height: 35%;               /* キラリの縦幅 */
  
  /* 上から下へ消えていく白グラデーション */
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.8) 0%, 
    rgba(255, 255, 255, 0) 100%);
  
  border-radius: 50% 50% 40% 40%; /* 楕円形にして光の反射を再現 */
  z-index: -1;               /* 数字に被らないよう、数字の後ろへ */
}

/* 4. マウスを乗せた時（ホバー）の演出 */
.number-ocean:hover {
  transform: scale(1.15);    /* 1.15倍に少し大きくする */
  
  /* 色をさらに濃く、鮮やかに塗りつぶす */
  background: radial-gradient(circle at center, 
    rgba(130, 220, 255, 0.9) 0%, 
    rgba(0, 100, 255, 0.9) 100%) !important;
  
  /* 外側の影を強くして、発光しているように見せる */
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.8) !important;
  
  filter: brightness(1.2);   /* 全体をパッと明るく光らせる */
}