@charset "UTF-8";
/* ===============================
 卒園記念誌『おもいで』案内（#memo_bun内の右上に固定）
================================= */

/* 親を基準にする（超重要） */
#memo_bun {
  position: relative;
  /* 念のため：親がはみ出しを隠さないようにする */
  overflow: visible;
}

/* 外側＝位置だけ担当（#memo_bun基準で右上に配置）
   ※ テーマ等が .omoide-floating-box に fixed を当てていても勝つように、セレクタを強め＋!important */
#memo_bun .omoide-floating-box{
  position: absolute !important;
  top: 0; 
  right: 0;
  transform: translate(8%, -70%); /* 右へ+8%, 上へ-70% 持ち上げ */
  z-index: 10;
  /* 幅の安全装置（親をはみ出しすぎない） */
  width: min(360px, 38vw);
  box-sizing: border-box;
}

/* 内側＝動き・拡大だけ担当（位置は触らない） */
#memo_bun .omoide-float-inner{
  transform-origin: top right;
  animation: floatY 5s ease-in-out infinite;
  transition: transform .25s ease, box-shadow .25s ease;
}
#memo_bun .omoide-floating-box:hover .omoide-float-inner{
  /* アニメ中のtranslateYに対して軽くscaleを足すイメージ（多少のスナップは許容） */
  transform: scale(1.03);
  box-shadow: 0 10px 24px rgba(0,0,0,.14);
}

/* 上下ゆらぎ：translateY のみ（位置は外側で保持） */
@keyframes floatY{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

/* スマホでは通常フローにして崩れ回避 */
@media (max-width:768px){
  #memo_bun .omoide-floating-box{ 
    position: static !important; 
    transform: none !important; 
    width: auto; 
    margin: 8px 0 0; 
  }
  #memo_bun .omoide-float-inner{ 
    animation: none; 
    box-shadow: none; 
  }
}

/* ボックス本体の見た目 */
#memo_bun .news_omoide {
  background: #ffffbc;
  border: 3px dotted #1E90FF;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-width: 360px;
  font-size: 0.95rem;
}

/* テキスト装飾 */
#memo_bun .news_omoide .red { color: red; }
#memo_bun .news_omoide .ftwBld { font-weight: 700; }
#memo_bun .news_omoide .txaCtr { text-align: center; }
#memo_bun .news_omoide .right-align { display: inline-block; margin-left: 0.5em; }

/* リンク */
#memo_bun .news_omoide a {
  color: #0b66c3;
  text-decoration: underline;
  text-underline-offset: 2px;
}