@charset "utf-8";

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/*                                                        */
/* ● button.css                                          */
/*    共通部品                                            */
/*    ・ボタン                                            */
/*                                                        */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━ */


/* 共通設定 */
.Button,
%Button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all .2s;
  display: flex;
  align-items: center;
  html.PcView &:hover,
  html.PcView &:focus  {
    text-decoration: none;
    // filter: brightness(1.1);
  }
}



/* SimpleButton [ input type="button" ]
--------------------------------------------------- */
input[type="button"],
input[type="submit"],
input[type="reset"]{
   -webkit-appearance: none;
}
.SimpleButton,
%SimpleButton,
input[type="button"],
input[type="submit"]{
  color:   inherit;
  border: 1px solid;
  padding: 0 1.75em;
  vertical-align: middle;
  line-height: 2em;
  border-radius: 0;
  min-width: 5em;
  font-weight: 500;
  cursor: pointer;
  &:not(.Black){
    @extend .hvr-default-dark;
  }
  &.Black{
    color: #fff;
    fill: #fff;
    background: #222;
    border: none;
    html.PcView &:hover,
    html.PcView &:focus{
      background: #292929;
    }
  }
}





/* 検索ボタン
--------------------------------------------------- */
.SearchButton{


  &.Compact{
    border: none;
    &,
    *{
      vertical-align: middle;
    }
    color: #fff;
    fill: #fff;
    background: #333;
    border-radius: 3rem;
    //width: 3em;
    height: 3em;
    margin-left: 0.5em;
    padding: 0 1.5rem;
    .Icon{
      img,svg{
      width: 1.5em;
      height: 1.5em;
      }
    }
    .Label{
      //display: none;
    }

  }
}



/* ボタンのバリエーション
--------------------------------------------------- */

    
    /* デフォルト */
    .DefaultButton,
    %DefaultButton {
      @extend %Button;
      font-size: $font-size-s;
      @include media-query(under-bp-m) {
        font-size: $font-size-ss;
      }
      color: #fff;
      background: $main-color-deep;
      // border: 1px solid;
      border-radius: 4em;
      padding: 1.25em 2em;
      line-height: 1.25;
      .Icon{
        //transform: scale(1.5);
        margin-right: 0.5em;
      }
      .Label{
        display: inline-block;
        font-weight: 700;
        letter-spacing: 0.05em;
        @include media-query(over-bp-m) {
          min-width: 20em;
          min-width: 15em;
        }
        @include media-query(under-bp-m) {
          min-width: 12em;
        }
        .Main{
        }
      }
      &.Small{
        padding: 0.75em 1.5em;
        .Label{
          min-width: 6em;
        }
      }

      &:not(.Skelton):not(.Blue):not(.Gray):not(.White) {
        @extend .hvr-default;
      }
      
      
      /* スケルトン */
      &.Skelton {
        color: inherit;
        background: none;
        border: 1px solid;
        @extend .hvr-default-dark;
      }
    
      /* 青 */
      &.Blue {
        color: #fff;
        background: #336699;
        @extend .hvr-default-dark;
      }
      
      /* グレー */
      &.Gray {
        background: #444;
        color:#fff;
        @extend .hvr-default-dark;
      }
      
      /* ホワイト */
      &.White {
        background: #fff;
        color:#333;
        @extend .hvr-default-dark;
      }
    }
    
    




/* ++++++++++++++++++++++++++++++++++++++++++++++++ */
/*   GoPageTop                                      */
/* ++++++++++++++++++++++++++++++++++++++++++++++++ */

/* GoPageTop
--------------------------------------------------- */
.GoPageTop{
  display: inline-block;
  line-height: 1;
  vertical-align: bottom;
  margin-left: -3.0em;
  display: none;

  position: fixed;
  bottom: 1.5rem;
  right:  20px;
  z-index: 100;
  font-size: 1rem;
  @include media-query(under-bp-m) {
    //transform: scale(0.75);
    bottom: 0px;
    right:  0px;
  }
  *{
    line-height: 1;
    vertical-align: bottom;
  }
    p{
      display: inline-block;
      a,
      a .Icon,
      a .Icon::before{
        transition: all .2s;
      }
      a{
        width:  6em;
        height: 6em;
        padding: 1.25em 0;
        text-align: center;
        vertical-align: middle;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        position: relative;
        font-weight: normal;
        border-radius: 100%;
        background: #222;
        *{
          color: #fff;
        }

        html.PcView &:hover,
        html.PcView &:focus {
          filter: brightness(1.25);
          .Icon{
            top: -0.25em;
          }
        }
        .Label{
          text-align: center;
          font-weight: 600;
          font-family: 'Arial';
          line-height: 1.125;
          //font-size: 0.75em;
          transform: scale(0.75); //Chromeで10ptより小さくならないのでscaleで処理
          opacity: 0.75;
          br {
            display: none;
          }
        }
        
        .Icon{
          margin: 0;
          padding: 0;
          position: relative;
          top: 0;
          line-height: 1.25rem;
          &::before{
            font-size: 200%;
            margin: 0;
            padding: 0;
          }
        }

      }
    }
  }







/* menu-trigger (開閉式メニュー)
--------------------------------------------------- */
.MenuTrigger{
  font-size: 1rem;
  cursor: pointer;

    a {
      transition: all .2s;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      webkit-tap-highlight-color: transparent;

      .Icon,
      .Label{
        display: block;
      }
      .Label{
        text-align: center;
        color: $text-color;
      }
      .Icon{
        position: relative;
        width:  3.75em;
        height: 3.75em;
        &::before,
        &::after {
          @extend %_pseudo_element;
          display: inline-block;
          left:    0%;
          width: 100%;
          height: 5px;
          margin-top: -3px;
          background-color: $text-color;
          transition: all .2s;
        }
        &::before {
          top: 25%;
        }
        &::after {
          top: 75%;
        }
      }
      /* hover */
      html.PcView &:hover,
      html.PcView &:focus {
        text-decoration: none;
        .Icon{
          &::before,
          &::after {
            box-shadow: 0px 0px 2rem rgba( $text-color , 0.5);
          }
        }
      }

      /* Active */
      &.Active{
        .Icon {
          &::before {
            -webkit-transform: rotate(-315deg);
                    transform: rotate(-315deg);
            top: 50%;
          }
          &::after {
            -webkit-transform: rotate(315deg);
                    transform: rotate(315deg);
            top: 50%;
          }
        }
      }

    }
  }