@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;700;900&family=Plus+Jakarta+Sans:wght@400;700;800&display=swap');

:root {
    --glass-bg: rgba(255, 255, 255, 0.7);
    --accent-primary: #4a53fa;
    --accent-secondary: #ff3131;
}

body {
    font-family: 'Plus Jakarta Sans', 'Noto Sans JP', sans-serif;
    background-color: #fcfcfd;
    color: #1a1a1b;
    overflow-x: hidden;
}

.gradient-text {
    background: linear-gradient(135deg, #1c24af 0%, #4a53fa 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-pattern {
    background-image: radial-gradient(#e2e8f0 1px, transparent 1px);
    background-size: 32px 32px;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.exam-card {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.exam-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
}

.floating {
    animation: floating 3s ease-in-out infinite;
}


.balloonp {
  position: relative;                  /* 指定した分だけ相対的に移動 */
}
.balloonp:hover .balloonc {
  display: inline;                     /* インライン要素として表示 */
}
 /* --- 吹き出し ------------------ */
.balloonc {
  display: none;                        /* 要素を非表示 */
  position: absolute;                   /* 親要素を基準 */
  padding: 5px;                        /* テキストの前後の余白 */
  background-color: rgba(240, 240, 240, 1);  /* 背景色（透明度） */
  width:300px;                          /* 吹き出し全体の幅 */
  left : 30%;                           /* 表示位置 */
  top : 100%;                           /* 表示位置 */
  margin-top : 12px;                    /* 表示位置 */
  font-size: 80%;                       /* 文字サイズ */
  z-index: 9999;
  border: 1px solid #BBBBBB;            /* ← 枠線を追加 */
  border-radius: 6px;                   /* ← 角を少し丸める */
}
.balloonc:after{
  content: "";                           /* コンテンツの挿入 */
  position: absolute;                    /* 親要素を基準 */
  top: -12px;                            /* 吹き出し口の位置調整 */
  left : 5%;                             /* 吹き出し口の横位置 */
  border-left: 10px solid transparent;   /* 吹き出し口の幅１／２ */
  border-right: 10px solid transparent;  /* 吹き出し口の幅１／２ */

  border-bottom: 12px solid rgba(240, 240, 240, 1);  /* 吹き出し口の高さ・色 */

  filter: drop-shadow(0 -1px 0 #BBBBBB); /* ← 吹き出し口に枠線をつける */
  z-index: 9999;
}


.container {
  position: relative; /* 子要素の基準点になる */
  display: inline-block; /* 画像のサイズに合わせる */
}

.container-text {
  position: absolute; /* 親要素を基準に配置 */
  top: 50%;           /* 上から50%の位置 */
  left: 50%;          /* 左から50%の位置 */
  transform: translate(-50%, -50%); /* 中央寄せの補正 */
  color: white;       /* 文字色 */
  font-weight: bold;
}





@keyframes ballooncAnime{
 100%{ color : black; background:rgba(255, 224, 224, 0.75) }
  50%{ color : black; background:rgba(255, 224, 224, 0.25) }
   0%{ color : white; background:white   }
}




    @keyframes floating {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }