@charset "utf-8";


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● hover.css                                           */
/*                                                        */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

a{
  transition: all .2s;

  html.PcView &:hover{

  }
  &.NoLink{
    cursor: default;
    .Icon{
      //display: none!important;
      opacity: 0;
    }
    html.PcView &:hover,
    html.PcView &:focus{
      color: inherit!important;
      background: inherit!important;
      text-decoration: inherit!important;
    }
  }
}



/* 各種hover効果
--------------------------------------------------- */

    
    /* default */
    .hvr-default{
      transition: all .2s;
      html.PcView &:hover,
      html.PcView &:focus{
        // color: #fff;
        // fill: #fff;
        // background: rgba(#000, 0.25);
        background: darken($main-color-deep, 5%);
        text-decoration: none;
        // &.Label{
        //   color: #fff;
        // }
        .Icon{
          // &::before{
          //   fill: #fff;
          // }
          // &.icon-decorate-circle{
          //   &::before{
          //     color: $main-color;
          //     fill: $main-color;
          //   }
          //   background: #fff;
          // }
        }
      }
    }

    
    /* default-暗色 */
    .hvr-default-dark{
      transition: all .2s;
      html.PcView &:hover,
      html.PcView &:focus{
        color: #fff;
        fill: #fff;
        background: #111;
        text-decoration: none;
        &.Label{
          color: #fff;
        }
        .Icon{
          &::before{
            fill: #fff;
          }
          &.icon-decorate-circle{
            &::before{
              color: #111;
              fill: #111;
            }
            background: #fff;
          }
        }
      }
    }
    

    


        
    /* テキストリンク系 */
    .hvr-textlink{
      html.PcView &:hover,
      html.PcView &:focus{
        // color: $main-color;
        // text-decoration: underline;
      }
    }


    /* push */
    .hvr-push{
      border: 1px solid #ccc;
      box-shadow: 0.25em 0.25em 0 rgba(0,0,0,0.05);
      position: relative;
      top: -0.25em;
      left: -0.25em;
      html.PcView &:hover,
      html.PcView &:focus{
        box-shadow: 0em 0em 0 rgba(0,0,0,0.05);
        top: -0em;
        left: -0em;
      }
    }

    /* zoom */
    .hvr-zoom{
      z-index: 10;
      display: inline-block;
    }
        html.PcView .hvr-zoom:hover,
        html.PcView .hvr-zoom:focus{
          position: relative;
          z-index: 15;
          transform: scale(1.25);
        }


    /* zoom を 子要素.Image内のimgに適用する */
    .hvr-childimg-zoom{
      .Image{
        overflow: hidden;
        display: inline-block;
        img{
          transition: all .5s;
          transform: scale(1);
          opacity: 1;
        }
      }
      
      html.PcView  &:hover,
      html.PcView  &:focus{
        .Image{
          img{
            transform: scale(1.125);
            opacity: 1;
          }
        }
      }  
    }






    /* エフェクト付きでアンダーライン */
    .hvr-underline-effect{
      //display: inline-block;
      display: inline-flex;
      position: relative;
      &::after{
        content: "";
        display: block;
        background: $main-color;
        height: 2px;
        position: absolute;
        bottom: calc(0% - 0.25em);
        width: 0%;
        left: 0%;
        transition: all .2s;
      }
      html.PcView &:hover,
      html.PcView &:focus{
        color: inherit;
        text-decoration: none;
        &::after{
          width: 100%;
          left: 0%;
        }

      }
    }