/* 吹き出しエリアの円形レイアウト */
#bubble {
  padding: 100px 0 150px 0;
}

#bubble h3 {
    font-size: 1rem;
}
#bubble p {
    font-size: 0.8rem;
}

/* 親コンテナ */
#bubble .container {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 600px;
  margin: 0 auto;
}

/* 円形レイアウトの親要素 */
.circle-layout {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 0 auto;
}

/* 中央の画像 */
.center-image {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: auto;
}

.center-image img {
  width: 100%;
  height: auto;
}

.sp-center-image{
  display: none;
}

/* バブル共通スタイル */
.bubble {
  position: absolute;
  width: 440px;
  height: 320px;
  padding: 20px 10px;
  text-align: center;
  overflow: hidden;
  z-index: 0;
}

/* 背景画像（before: 通常, after: ホバー用） */
.bubble::before,
.bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform-origin: center center;
  z-index: -1;
}

.bubble::after {
  opacity: 0;
}

.bubble:hover::before {
  opacity: 0;
  transform: scale(1.1); /* 拡大 */
}

.bubble:hover::after {
  opacity: 1;
  transform: scale(1.1); /* 拡大 */
}

.bubble5:hover::after {
  opacity: 1;
  transform: scale(1.25); /* 拡大 */
}


.bubble-content {
  position: absolute;     /* ←追加 */
  transform: translate(-50%, -50%);
  width: 65%;
  height: auto;
  z-index: 1;
  transition: transform 0.3s ease;
}

.bubble1-content {
  top: 45%;
  left: 49%;
}

.bubble2-content {
  top: 47%;
  left: 54%;
}

.bubble3-content {
  top: 48%;
  left: 48%;
}

.bubble4-content {
  top: 48%;
  left: 46%;
}

.bubble5-content {
  top: 42%;
  left: 52%;
}

/* 初期状態：20文字だけ表示 + 透明気味 */
.bubble-content .text {
  display: block;
  max-height: 2em;          /* 1行分 */
  overflow: hidden;
  opacity: 0.8;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-bottom: 0.2rem;

  /* アニメーション準備 */
  transition: all 0.5s ease;
  transform: scale(0.95);   /* 少し小さくしておく */
}

/* ホバー時：ふわっと拡大しながら表示 */
.bubble:hover .bubble-content .text {
  max-height: 1000px;       /* 制限解除 */
  white-space: normal;      /* 複数行に切り替え */
  opacity: 1;               /* 濃くする */
  transform: scale(1);      /* 元サイズに戻す */
}

@keyframes lupinIn {
  0% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes lupinOut {
  0%   { opacity: 1; transform: scale(1) rotate(0); }
  100% { opacity: 0; transform: scale(0.5) rotate(-10deg); }
}


.bubble:hover .bubble-content {
  transform: translate(-50%, -50%) scale(1.05); /* 拡大しつつ中央を保つ */
}

/* 各バブルの背景画像設定 */
.bubble1::before { background-image: url('./../img/top/top_bubble1_1.png'); background-size: 85%; }
.bubble1::after  { background-image: url('./../img/top/top_bubble1_2.png'); background-size: 85%; }

.bubble2::before { background-image: url('./../img/top/top_bubble2_1.png'); background-size: 85%; }
.bubble2::after  { background-image: url('./../img/top/top_bubble2_2.png'); background-size: 85%; }

.bubble3::before { background-image: url('./../img/top/top_bubble3_1.png'); background-size: 85%; }
.bubble3::after  { background-image: url('./../img/top/top_bubble3_2.png'); background-size: 85%; }

.bubble4::before { background-image: url('./../img/top/top_bubble4_1.png'); background-size: 85%; }
.bubble4::after  { background-image: url('./../img/top/top_bubble4_2.png'); background-size: 93%; }

.bubble5::before { background-image: url('./../img/top/top_bubble5_1.png'); background-size: 75%; }
.bubble5::after  { background-image: url('./../img/top/top_bubble5_2.png'); background-size: 70%; }

/* 円形に配置（角度やバランスを調整） */
.bubble1 { top: 35%;   left: 95%; transform: translate(-50%, -50%); }
.bubble2 { top: 86%;  left: 95%; transform: translate(-50%, -50%); }
.bubble3 { top: 59%;  left: 0%; transform: translate(-50%, -50%); }
.bubble4 { top: 100%; left: 5%; transform: translate(-50%, -50%); }
.bubble5 { top: 20%;  left: 25%; transform: translate(-50%, -50%); }


@media (max-width: 1024px) {
  #bubble .col-md-2 {
    position: static;
    transform: none !important;
  }

  #bubble .container {
    height: auto;
  }

  #bubble {
    min-height: auto;
  }
}

@media (max-width: 768px) {
  #bubble .container {
    height: auto;
    padding: auto;
  }

  #bubble {
    min-height: auto;
    padding: 20px 0 20px 0;
  }

  /* 楕円の枠だけ表示 */
  .bubble {
    position: relative;
    width: 90%;
    max-width: 400px;
    height: 180px;
    margin: 20px auto;
    transform: none !important;
    top: auto !important;
    left: auto !important;
  }

  /* 背景画像は不要 */
  .bubble::before,
  .bubble::after {
    display: none;
  }
  .circle-layout{
    width : auto;
    height : auto;
  }
  .center-image{
    display: none;
  }
  
  .sp-center-image{
    display: block;
    position: relative;
    width: 50%;
    max-width: 400px;
    margin: 0 auto;          /* ← 中央寄せ */
    text-align: center;      /* ← 念のため中央揃え */
  }

  .sp-center-image img {
    display: block;
    margin: 0 auto;          /* ← 画像自体を中央寄せ */
    width: 100%;
    height: auto;
  }
  .bubble1 {
    display: none;
  }
  .bubble2 {
   display: none;
  }
  .bubble3 {
    border: 3px solid #FAE761;
    border-radius: 20px;    /* ←角丸 */
    background: none;       /* 塗りつぶしなし */
    overflow: hidden;
  }
  .bubble4 {
   display: none;
  }
  .bubble5 {
    border: 3px solid #9ED9F4;
    border-radius: 20px;    /* ←角丸 */
    background: none;       /* 塗りつぶしなし */
    overflow: hidden;
  }

  /* コンテンツを中央配置 */
  .bubble-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
  }
  
  .bubble:hover {
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
  }
  .bubble-content .text {
    max-height: 100%;
    white-space: normal;
    opacity: 1;
    transform: scale(1);
  }

}