@use "../../foundation/import" as f;

/* nav
----------------------------------- */
.c-anchor-nav {
  display: flex;
  justify-content: space-between;
  &__item {
    position: relative;
    width: calc(25% - 12.75px);
    text-align: center;
    background-color: #FFF;
    border: #CCC 1px solid;
    border-radius: 10px;
    box-shadow: #000 0 0 5px;
    transition: background-color 0.3s 0s;
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40px;
      background: url('#{f.$imgPath}fv_icon_arrow.png') #f5f5f5 no-repeat 50% 50%;
      background-size: 31px auto;
      transition: background-position 0.2s 0s;
      border-radius: 0 0 10px 10px;
    }
    &:hover {
      background-color: #FFF9D6;
      &::after {
        background-position: 50% 70%;
      }
    }
  }
  &__icon {
    margin: -13% auto 0;
    display: block;
    width: 34.9%;
    opacity: 1 !important;
  }
  &__text {
    display: block;
    padding: 5% 10px 22%;
    font-weight: bold;
    font-size: 25px;
    line-height: 1.4;
    white-space: nowrap;
  }
  
  @media screen and (min-width:768px) and ( max-width:1200px) {
    &__item {
      &::after {
        height: 4vw;
        background-size: 3vw auto;
      }
    }
    &__text {
      padding: 3% 3% 25%;
      font-size: 2.2vw;
    }
  }
  
  @include f.mq(sp) {
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 20px);
    flex-wrap: wrap;
    &__item {
      width: calc(50% - 5px);
      &:nth-of-type(n+3) {
        margin-top: 8vw;
      }
      &::after {
        height: 8vw;
        background-size: 5vw auto;
      }
    }
    &__text {
      padding: 5% 2% 25%;
      font-size: 4.5vw;
    }
  }
}