@charset "utf-8";
/****************************************************************************
　全施設共通アニメーション設定
--------------------------------------------------------
   Last up date   : 2025.10.22
****************************************************************************/


/*--------------------------------------------------------
  ふわっと
--------------------------------------------------------*/
/* アニメーション */
.sa {
  opacity: 0;
  transition: all 1s ease;
}

/* 表示時 */
.sa.show {
  opacity: 1;
  transform: translate(0, 0);
}

.sa--up {
  transform: translate(0, 100px);
}

.sa--lr {
  transform: translate(-100px, 0);
}

.sa--rl {
  transform: translate(100px, 0);
}

/*--------------------------------------------------------
  サークルhover <!-- 診療科目 -->
--------------------------------------------------------*/

.category-inner {
  position: relative; /* 子要素（円やテキスト）の絶対配置基準 */
  display: inline-block; 
  width: 450px;       /* 画像と同じ幅 */
  overflow: hidden;   /* 円がはみ出しても隠す */
}

.category-inner .circle {
  position: absolute;       /* 親画像上に重ねる */
  top: 50%;                 /* 親の中央に配置 */
  left: 50%;                /* 親の中央に配置 */
  width: 120px;             /* 初期の円の大きさ */
  height: 120px;            /* 初期の円の大きさ */
  background: rgba(254, 235, 190, 0.7); /* 色と透明度 */
  border-radius: 50%;       /* 円形にする */
  transform: translate(-50%, -50%) scale(0); /* 中心から0サイズで非表示スタート */
  opacity: 0;               /* 初期は透明 */
  transition: all 0.6s ease-out; /* すべてのプロパティを0.6秒でアニメーション */
  pointer-events: none;     /* マウスイベントを無視して画像クリックを妨げない */
}

.category-inner:hover .circle {
  transform: translate(-50%, -50%) scale(5); /* 中心から拡大して画像全体を覆う */
  opacity: 1;               /* 表示 */
}
/* --------------------------------------------------------
   タブレット・スマホでアニメーション無効化
   hover自体は有効
--------------------------------------------------------*/
@media screen and (max-width: 1200px) {
.category-inner .circle{
    width: 60px;   /* 小さい初期サイズ */
    height: 60px; /* 初期の円の大きさ */
    transform: translate(-50%, -50%) scale(0); /* 初期サイズが小さいのでscaleを大きく */
    transition: all 1.2s ease-out; /* すべてのプロパティを0.6秒でアニメーション */
    opacity: 0.2;               /* 初期は透明 */
}
.category-inner:hover .circle {
  transform: translate(-50%, -50%) scale(16); /* 中心から拡大して画像全体を覆う */
  opacity: 1;               /* 表示 */
}
}