header_01

// =====================================================================================
//
// header_01
//
// =====================================================================================

@use 'sass:math';
@use 'scss/global' as g;
@use 'scss/components/btn';

// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
// Roots外スタイル
//  - ヘッダーをposition:fixedにするため全体枠に余白を作る
//  - 例外的にRoots外のスタイリング（＝ルール違反）を許容するか、該当の.scssへコピーしてください
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
.all {
  padding-top: 53px;

  @include g.mq(tablet, pc) {
    padding-top: 53px;
  }
}

// -------------------------------------------------------------------------------------
// 変数
// -------------------------------------------------------------------------------------

// スマホナビ展開アニメーションの継続時間
$duration: 0.3s;

// スマホナビ展開アニメーションのイージング
$easing: g.$ease_out_cubic;

// スマホナビ展開ボタンの継続時間
$btn_duration: 0.3s;

// スマホナビ展開ボタンのイージング
$btn_easing: g.$ease_out_expo;

// -------------------------------------------------------------------------------------
// ヘッダー全体
// -------------------------------------------------------------------------------------
.header_01 {
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 53px;
  padding: 0 0 0 15px;

  @include g.mq(tablet, pc) {
    height: 70px;
    padding-left: 24px;
  }
}

// -------------------------------------------------------------------------------------
// ヘッダー全体 > ロゴ
// -------------------------------------------------------------------------------------
.header_01--logo {
  width: 44px;
  margin: 20px 0 0;

  @include g.mq(tablet, pc) {
    width: 90px;
  }

  img {
    display: block;
    width: 100%;
  }
}

// -------------------------------------------------------------------------------------
// ヘッダー全体 > ナビゲーション全体
// -------------------------------------------------------------------------------------
.header_01--nav {
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background: rgba(0, 0, 0, 0);

  @include g.mq(tablet, pc) {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    padding: 0;
    overflow-y: visible;
    background: transparent;
  }

  &.is_open {
    display: block;
  }

  &.header_01-close_anim {
    display: block;
    animation: header_nav_toggle math.div($duration, 2) $easing reverse;
  }

  &.header_01-open_anim {
    display: block;
    animation: header_nav_toggle $duration $easing;
  }
}

@keyframes header_nav_toggle {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

// -------------------------------------------------------------------------------------
// ヘッダー全体 > ナビゲーション全体 > ナビゲーション内枠
// -------------------------------------------------------------------------------------
.header_01--nav_inner {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  min-height: 100%;
  padding: 53px 0 40px;
  background: g.$color_primary;

  @include g.mq(tablet, pc) {
    position: relative;
    display: flex;
    align-items: center;
    width: auto;
    min-height: auto;
    padding: 0;
    background: transparent;
  }

  .header_01-close_anim & {
    animation: header_nav_inner_toggle math.div($duration, 2) $easing reverse;
  }

  .header_01-open_anim & {
    animation: header_nav_inner_toggle $duration $easing;
  }
}

@keyframes header_nav_inner_toggle {
  0% {
    transform: translateX(280px);
  }
  100% {
    transform: translateX(0);
  }
}

// -------------------------------------------------------------------------------------
// ヘッダー全体 > ナビゲーション全体 > ナビゲーション内枠 > リンク
// -------------------------------------------------------------------------------------
.header_01--links {
  margin: 0 0 70px;
  border-top: 1px solid #fff;

  @include g.mq(tablet, pc) {
    margin: 0;
    border: none;
  }
}

.header_01--links_item {
  border-bottom: 1px solid #fff;

  @include g.mq(tablet, pc) {
    display: inline-block;
    margin: 0 32px 0 0;
    border: none;
  }

  @include g.mq(tablet) {
    margin-right: 24px;
  }

  a {
    position: relative;
    display: block;
    padding: 16px 20px;
    color: #fff;
    text-align: left;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 12 12"><path fill="%23fff" d="M2.8,10.9L7.8,6L2.8,1.1l0.7-0.7L9.2,6l-5.7,5.7L2.8,10.9z" /></svg>');
    background-repeat: no-repeat;

    background-position: right 16px top 50%;
    background-size: 12px 12px;

    @include g.mq(tablet, pc) {
      display: inline-block;
      padding: 0;
      color: g.$color_text_base;
      background: none;
    }
  }
}

// -------------------------------------------------------------------------------------
// ヘッダー全体 > ナビゲーション全体 > ナビゲーション内枠 > Call to Action
// -------------------------------------------------------------------------------------
.header_01--cta {
  text-align: center;
}

// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
// 他のRootsの拡張はルール違反だが、一旦そのまま（ルールの方を見直したほうが良さそうなため）
// ※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※※
.header_01--cta_btn {
  @extend .btn, .btn-s;
  outline: none;
}

.header_01--cta_btn_primary {
  @extend .btn, .btn-auto, .btn-primary;
  height: 70px;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 70px;
}

// -------------------------------------------------------------------------------------
// ヘッダー全体 > スマホメニュー展開ボタン
// -------------------------------------------------------------------------------------
.header_01--nav_btn {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: inline-block;
  width: 52px;
  height: 52px;
  cursor: pointer;
  background: g.$color_primary;
  transition: all $btn_duration $btn_easing;

  @include g.mq(tablet, pc) {
    display: none;
  }

  span {
    position: absolute;
    left: 16px;
    box-sizing: border-box;
    display: inline-block;
    width: 20px;
    height: 2px;
    background-color: #fff;
    transition: all $btn_duration $btn_easing;

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

    &:nth-of-type(2) {
      top: 25px;
      opacity: 1;
    }

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

  &.is_close span:nth-of-type(1) {
    animation: header_nav_btn_bar01 $btn_duration $btn_easing forwards;
  }

  &.is_close span:nth-of-type(2) {
    transition: all $btn_duration $btn_easing;
  }

  &.is_close span:nth-of-type(3) {
    animation: header_nav_btn_bar03 $btn_duration $btn_easing forwards;
  }

  &.is_open span:nth-of-type(1) {
    animation: active_header_nav_btn_bar01 $btn_duration $btn_easing forwards;
  }

  &.is_open span:nth-of-type(2) {
    opacity: 0;
  }

  &.is_open span:nth-of-type(3) {
    animation: active_header_nav_btn_bar03 $btn_duration $btn_easing forwards;
  }
}

@keyframes header_nav_btn_bar01 {
  0% {
    transform: translateY(8px) rotate(45deg);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes header_nav_btn_bar03 {
  0% {
    transform: translateY(-8px) rotate(-45deg);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes active_header_nav_btn_bar01 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(8px) rotate(0);
  }
  100% {
    transform: translateY(8px) rotate(45deg);
  }
}

@keyframes active_header_nav_btn_bar03 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-8px) rotate(0);
  }
  100% {
    transform: translateY(-8px) rotate(-45deg);
  }
}