//== grid
.row {
  &:after {
    content: ' ';
    display: block;
    clear: both;
  }
}

.fL { float: left }
.fR { float: right }

//== display
.iB,
.inline-block {
  display: inline-block;
}

.none {
  display: none !important;
}

.isMb {
  display: none;
}

@media screen and (max-width: $grid-breakpoint) {
  .isPc {
    display: none;
  }
  .isMb {
    display: inherit;
  }
  .mb-block {
    display: block !important;
  }
}


//== box
//=== position
.v-box {
  position: relative;
  top:50%;
  transform: translateY(-50%);
}

.flex-box {
  display: flex;
  align-items: center;
}

//== Typography
//
//** text layout
.pre-box,
.pc-pre-box {
  white-space: pre-line;
}
.pc-pre-box-wrap {
  white-space: pre-wrap;
}

.align-left { text-align: left }
.align-right { text-align: right }
.align-center { text-align: center }
.align-justify { text-align: justify}
.pc-align-right { text-align: right}
@media screen and (max-width: $grid-breakpoint) {
  .pc-align-right { text-align: inherit }
  .pc-pre-box,
  .pc-pre-box-wrap {
    padding-top: $gap-space;
    white-space: inherit;
  }
}

//** font size
h1,.h1 {
  @include font-size($font-size-h1, $font-size-h1 + 10);
}

h3,.h3 {
  @include font-size($font-size-h3, $font-size-h3 + 10);
}

h4.h4 {
  @include font-size($font-size-h4, $font-size-h4 + 10);
}


//** font weight
.font-light {
  font-weight: 300;
}
.font-normal {
  font-weight: 400;
}
.font-extra {
  font-weight: 800;
}


//== button
button,
.btn {
  display: inline-block;
  vertical-align: top;
  cursor: pointer;

  &.fab {
    line-height: 100%;
    border-radius: 50%;
    text-align: center;
    overflow: hidden;
    @include box-shadow(0, 2px, 18px, rgba(0,0,0,.3), true);
  }

  &.submit {
    height: 44px;
    padding: 0 17px;
    border-radius: 4px;
    color: #fff;
    background-color: $button-bg;
    &:hover,
    &:active {
      background: $button-over-bg;
    }
  }
}


//== badge
.badge {
  display: inline-block;
  border-radius: 15px;
  padding: 0 5px;
  vertical-align: top;
  .material-icons {
    @include font-size(9px, 100%);
  }
}

//== img
.full-img {
  img {
    width: 100%;
  }
}

//== hamburger menu button
.hamburger,
.hamburger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
  vertical-align: middle;
}
.hamburger {
  position: relative;
  width: 16px;
  height: 12px;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  opacity: 1;
  border-radius: 2px;
  background-color: $base-font-color;
  transform: rotate(0);
  transition: all .2s ease;
}
.hamburger span:nth-of-type(1) {
  top: 0;
}
.hamburger span:nth-of-type(2) {
  top: 5px;
}
.hamburger span:nth-of-type(3) {
  bottom: 0;
}

.hamburger.on {
  span:nth-of-type(1) {
    top: 5px;
    transform: rotate(45deg);
  }
  span:nth-of-type(2) {
    opacity: 0
  }
  span:nth-of-type(3) {
    top: 5px;
    transform: rotate(-45deg);
  }
}



//== vue transition
.fade-enter-active, .fade-leave-active {
  transition: opacity .2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.bounce-enter-active {
  animation: bounce-in .3s;
}
.bounce-leave-active {
  animation: bounce-in .3s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}