@use '../global' as *;

@keyframes lStickyNavSlideDown {
  from {
    top: -100px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.l-sticky-nav {
  display: none;
}

.translated-ltr,
.translated-rtl {
  .l-header {
    top: 40px;
  }
}

.l-header {
  position: sticky;
  top: 0;
  z-index: 100;

  &__inner {
    background-color: #fff;
    box-shadow: 0 rem(5) rem(15) rgba($color: #000000, $alpha: 0.16);

    @include mq-up(lg) {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: fz(14) 0;
      //padding-left: fz(230);
      //padding-right: fz(160);
      padding-right: 20px;
    }

    @include mq-down(lg) {
      padding: fz(12) 5%;
    }
  }

  &__info {
    display: flex;
    align-items: center;

    @include mq-down(lg) {
      justify-content: space-between;
    }
  }

  &__logo {
    display: block;

    @include mq-up(lg) {
      width: fz(189);
      position: absolute;
      left: 0;
      top: 0;
    }

    @include mq-down(lg) {
      width: fz(175);
    }

    @include mq-down(sm) {
      width: fz(95);
    }
  }

  &__record {
    width: fz(259);

    @include mq-down(sm) {
      width: fz(205);
    }
  }

  &__main {
    display: flex;
    justify-content: space-between;
    align-items: center;

    @include mq-down(lg) {
      //display: none;
    }
  }

  &__nav {
    display: flex;

    &-item {
      border-left: 1px solid #dedede;

      &:last-of-type {
        border-right: 1px solid #dedede;
      }
    }

    &-link {
      display: flex;
      align-items: center;
      font-weight: 600;
      padding: fz(12) fz(24);
    }

    &-arw {
      fill: $key_blue;
      width: fz(10);
      height: fz(8);
      margin-right: fz(5);
    }

    &-text {
    }

    @include mq-down(lg) {
      display: none;
    }
  }

  &__tel {
    margin-left: fz(25.7);

    &-link {
      display: block;
    }

    &-time {
      font-size: fz(12);
      color: #727477;
    }

    &-num {
      font-size: fz(30);
      line-height: 1;
      font-family: 'din-2014', sans-serif;
      font-weight: 600;
      color: $key_blue;
    }

    @include mq-down(lg) {
      display: none;
    }
  }

  &__rev {
    background-color: $key_pink;
    width: fz(125);
    height: fz(125);
    position: absolute;
    position: fixed;
    right: 10px;
    bottom: 10px;
    border-radius: 0 0 0 fz(12);
    border-radius: 100px;

    @include mq-down(lg) {
      display: none;
    }

    &-link {
      color: #fff;
      height: 100%;
      display: flex;
      flex-flow: column;
      align-items: center;
      justify-content: center;
    }

    &-ist {
      display: block;
      width: fz(50);
      margin: 0 auto fz(8);
    }

    &-guide {
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      text-align: center;
      line-height: 1.2;
      z-index: 10;
      display: inline;
    }

    &-arw {
      fill: #fff;
      width: fz(10);
      height: fz(8);
      margin-right: fz(5);
    }

    &-text {
    }
  }
}

.l-side-fix {
  position: fixed;
  right: 0;
  top: fz(142);
  z-index: 10;

  @include mq-down(sm) {
    display: none;
  }

  &__item {
    background-color: $key_sky_green;
    color: #fff;
    writing-mode: vertical-rl;
    width: fz(50);
    border-radius: fz(8) 0 0 fz(8);

    &:not(:last-of-type) {
      margin-bottom: fz(15);
    }
  }

  &__link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: fz(25) 0 fz(21);
    font-size: fz(16);
    width: 100%;
  }

  &__icon {
    width: fz(18);
    margin-bottom: fz(8);
  }

  &__text {
    letter-spacing: 0.1em;
    font-weight: 600;
  }
}

.l-fixed-nav {
  display: none;
  position: fixed;
  right: fz(20);
  bottom: fz(20);
  z-index: 9999;

  @include mq-down(lg) {
    display: flex;
  }

  li {
    box-shadow: fz(-3) fz(7) fz(13) rgba($color: #000000, $alpha: 0.16);
    height: fz(75);
  }

  &__rev {
    background-color: $key_pink;
    color: #fff;
    width: fz(118);
    border-radius: fz(88);
    margin-right: fz(11);

    &-link {
      display: flex;
      align-items: center;
      flex-flow: column;
      justify-content: center;
      height: 100%;
    }

    &-icon {
      width: fz(42);
      margin-bottom: fz(6);
    }

    &-text {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: fz(12);
      line-height: 1.2;
      text-align: center;
      display: inline-block;
    }

    &-arw {
      fill: #fff;
      width: fz(11);
      height: fz(8);
      margin-right: fz(2);
    }
  }

  &__menu {
    width: fz(75);
    background-color: $key_blue;
    cursor: pointer;
    border-radius: 50%;
    padding: fz(27.5) fz(27);

    &-in {
      position: relative;
      height: 100%;
    }

    &-line {
      display: inline-block;
      width: fz(20);
      height: fz(3);
      background-color: #fff;
      position: absolute;
      left: 0;

      transition: all 0.3s cubic-bezier(0.17, 0.67, 0.45, 1.01);

      &:nth-of-type(1) {
        top: 0;
      }

      &:nth-of-type(2) {
        top: 50%;
        transform: translateY(-50%);
      }

      &:nth-of-type(3) {
        bottom: 0;
      }
    }
  }
}

.is-open {
  .l-fixed-nav__menu-line:nth-of-type(1) {
    transform: rotate(45deg);
    top: 50%;
  }
  .l-fixed-nav__menu-line:nth-of-type(2) {
    opacity: 0;
  }
  .l-fixed-nav__menu-line:nth-of-type(3) {
    transform: rotate(-45deg);
    top: 50%;
  }
}

.l-hide-menu {
  height: 100%;
  background-color: #fff;
  background: rgb(15, 85, 175);
  background: linear-gradient(159deg, rgba(15, 85, 175, 1) 0%, rgba(5, 153, 191, 1) 100%);
  color: #fff;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 200;
  overflow-y: scroll;
  transform: translateY(100%);
  transition: linear 0.23s;

  &.is-open {
    transform: translateY(0);
  }

  &__deco {
    position: absolute;

    &.--left {
      left: 0;
      top: fz(20);
      width: fz(60);
    }

    &.--right {
      right: 0;
      bottom: fz(100);
      width: fz(60);
    }

    &.--illust {
      left: fz(30);
      bottom: fz(40);
      width: fz(34);
    }
  }

  &__in {
    padding: fz(30) fz(30) fz(132);
    position: relative;
  }

  &__contents {
    position: relative;
    z-index: 2;
  }

  &__logo {
    width: fz(191);
    margin: 0 auto fz(30);
  }

  &__nav {
    &-item {
      border-bottom: 1px solid #5593d1;
      font-size: fz(18);
      font-weight: 600;
    }

    &-link {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: fz(11) 0;
    }

    &-text {
    }

    &-arw {
    }
  }

  &__tel {
    padding: fz(31) 0 fz(25);
    border-bottom: 1px solid #5593d1;

    &-link {
      display: block;
    }

    &-time {
      font-size: fz(14);
    }

    &-num {
      font-size: fz(34);
      line-height: 1;
      font-family: 'din-2014', sans-serif;
      font-weight: 600;
    }
  }

  &__sns {
    display: flex;
    align-items: center;
    padding: fz(26) 0 fz(17);

    &-item {
      &:not(:last-of-type) {
        margin-right: fz(20);
      }
    }
  }

  &__sub {
    &-item {
      font-size: fz(15);
      font-weight: 200;

      &:not(:last-of-type) {
        margin-bottom: fz(10);
      }
    }

    &-link {
      text-decoration: underline;
    }
  }
}