@charset "UTF-8";
/* --- トップへ戻るボタンのベース --- */
#toTop {
  display: block !important; /* 古いCSSを打ち消す */
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 9999;
  
  /* ボタンのサイズ（※画像が51pxの場合。ずれる場合はここを微調整してください） */
  width: 61px;
  height: 61px;

  /* 【通常時】の画像（上半分） */
  background-image: url("/encount/images/ui.totop.png");
  background-repeat: no-repeat;
  background-position: 0 0; /* 左上のピタリの位置 */

  /* スクロール時の出現アニメーション用 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* JSで付与されて画面にフェードインする処理 */
#toTop.is-show {
  opacity: 1;
  visibility: visible;
}

/* =========================================================
   ここからが「ふわっとしたホバー」を作る魔法のコード
   ========================================================= */

/* 【ホバー時】の画像を上に被せて、最初は透明にしておく */
#toTop::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  background-image: url("/encount/images/ui.totop.png");
  background-repeat: no-repeat;
  /* 画像を上に51pxずらして、下半分のホバー用画像を表示する */
  background-position: 0 -61px; 
  
  opacity: 0; /* 最初は透明 */
  /* ここで「ふわっ」と切り替わる時間を設定（0.4秒） */
  transition: opacity 0.4s ease; 
}

/* マウスを乗せた時に、被せていた透明なホバー画像をフワッと表示する */
#toTop:hover::after {
  opacity: 1;
}


/* =========================================================
   スマホメニューの画面幅リセット（JSの resize の代わり）
   ========================================================= */
@media (min-width: 601px) {
  #portal_navi ul {
    /* スマホで「閉じる」を押して非表示状態（display: none）になっていても、
       PCサイズになったら強制的に表示させる魔法のおまじない */
    display: block !important;
  }
}