@charset "UTF-8";
/*
<div id="back-to-top"><a href="#"></a></div>
*/

/* フッター｜共通｜トップへ戻るボタン（トリガー） */
#back-to-top {
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s;
}
#back-to-top.trigger {
  opacity: 1.0;
  pointer-events: auto;
  transition: all 0.5s;
}

/* フッター｜共通｜トップへ戻るボタン（デザイン・体裁） */
#back-to-top {
  position: fixed;
  right: 1.0em;
  bottom: 3.0em;
  width: 3.5em;
  height: 3.5em;
  border-radius: 50%;
  overflow: hidden;
  z-index: 500000;
}
#back-to-top a {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  padding-top: 100%;
  background-color: var(--color-green);
  transition: all 0.3s;
}
#back-to-top a:hover {
  background-color: var(--color-brown);
  transition: all 0.3s;
}
#back-to-top a::after {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: contain;
  content: url('../../images/ico-top_nega.svg');
  /*content: url('<?php echo get_template_directory_uri(); ?>/images/ico-top_nega.svg');*/
}
#back-to-top a:hover::after {}
@media screen and (max-width: 1023px) {}
@media screen and (max-width: 767px) {
  #back-to-top {
    right: 1.0em;
    /*bottom: 3.0em;*/
    bottom: 1.5em;
    width: 4.0em;
    height: 4.0em;
  }
}
@media screen and (max-width: 567px) {}


/* 非表示時（trigger なし）は hover を無効化 */
#back-to-top:not(.trigger) a:hover {
  background-color: var(--color-green) !important;
}
#back-to-top:not(.trigger) a:hover::after {}

/* SP・タブレットでは hover を強制無効化（hover バグ対策） */
@media (hover: none) {
  #back-to-top a:hover {
    background-color: var(--color-green) !important;
  }
}