// ==================================================
// header
// ==================================================
header {
  border-top: 5px solid $base;
  background: $white;
  // h_left
  // ----------------------------------------
  .h_left {
    width: 350px;
    float: left;
    .site_id {
      padding-top: 3px;
      a {
        color: $darkgrey;
        &:hover {
          color: $darkgrey;
          opacity: 0.7;
          .site_ttl {
          }
        }
      }
      .site_ttl {
        @include fs(12);
      }
      img {
        margin: 0;
        width: 165px;
        &:hover {
          opacity: 1;
        }
      }
    }
  }
  // h_right
  // ----------------------------------------
  .h_right {
    display: flex;
    float: right;
    width: 470px;
    border-left: 1px solid $lightgrey;
    padding: 0 0 0 10px;
    margin: 10px 0;
    .contact-group {
      padding-right: 10px;
    }
    .first-row {
      width: 291px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .contact-img {
        flex: 0 0 32px;
      }
      .contact-info {
        color: #ff5500;
        font-size: 32px;
        font-weight: 600;
      }
    }
    .h_tel {
      img {
        width: 291px;
        float: left;
      }
    }
    .my_menu {
      float: right;
      border-right: 1px solid $lightgrey;
      border-left: 1px solid $lightgrey;
      padding: 10px;
      height: 67px;
      #header_login_form {
        // width: 270px;
      }
      .block_body {
        @include fs(12);
      }
    }
    #header_navi {
      float: right;
      overflow: hidden;
      // width: 270px;
      li {
        &.mypage {
          float: left;
        }
        &.cart {
          float: right;
        }
        &.entry {
          float: left;
          margin-top: 4px;
        }
      }
      a {
        display: block;
        color: $white;
        font-size: 14px;
        text-align: center;
        border-radius: 3px;
        width: 130px;
        &:hover {
          @include opacity(0.8);
        }
        i {
          display: block;
          @include fs(30);
        }
      }
      .mypage a {
        // background: #1dbe4f;
        background: LightSeaGreen;
      }
      .cart a {
        background: #f19149;
        background: Coral;
        width: 130px;
        height: 48px;
        line-height: 1.2;
      }
      .entry a {
        background: #0368bb;
      }
    }
  }
  // nav
  // ----------------------------------------
  nav {
    width: 100%;
    position: absolute;
    z-index: 3;
    &.navbar-fixed-top {
      position: fixed;
      top: 0;
    }
    ul {
      text-align: center;
      padding: 10px 0;
    }
    li {
      display: inline-block;
      margin: 0 27px;
      margin: 0 2.7rem;
      transform: rotate(-0.01deg);
    }
    a {
      display: inline-block;
      padding: 0 10px;
      padding: 0 1rem;
      border-radius: 4px;
      &:hover {
        color: $trueblack;
        background: rgba($trueblack, 0.1);
      }
    }
    .g_nav {
      background: $midsilver;
      @include fs(17);
    }
    .sub_nav {
      @include fs(15);
      background: $white;
      box-shadow: 0 5px 5px rgba($black, 0.1);
      ul {
        padding: 5px 0;
      }
      li {
        margin: 0 46px;
        margin: 0 2.5rem;
      }
    }
  }
}
@include ltMD {
  header {
    // h_left
    // ----------------------------------------
    .h_left {
    }
    // h_right
    // ----------------------------------------
    .h_right {
      .my_menu {
        #header_login_form {
          margin-bottom: 3px;
        }
      }
      #header_navi {
      }
    }
    // nav
    // ----------------------------------------
    nav {
      &.navbar-fixed-top {
        position: absolute;
        top: auto;
      }
      li {
        margin: 0 20px;
        margin: 0 2rem;
      }
      .sub_nav {
        li {
          margin: 0 36px;
          margin: 0 3.6rem;
        }
      }
    }
  }
}
@include ltSM {
  header {
    // h_left
    // ----------------------------------------
    .h_left {
      width: 290px;
      .site_id {
        .site_ttl {
          @include fs(12);
        }
      }
    }
    // h_right
    // ----------------------------------------
    .h_right {
      width: 440px;
      border-left: none;
      padding: 0;
      .h_tel {
        img {
          width: 190px;
        }
      }
      .my_menu {
        border-right: none;
        padding: 0 0 0 10px;
        #header_login_form {
          width: 230px;
          margin-bottom: 3px;
        }
        .block_body {
          @include fs(12);
        }
      }
      #header_navi {
        width: 230px;
        a {
          @include fs(16);
          width: 100px;
        }
        .cart a {
          width: 120px;
          height: 42px;
        }
      }
    }
    // nav
    // ----------------------------------------
    nav {
      li {
        margin: 0 9px;
        margin: 0 0.9rem;
      }
      .sub_nav {
        li {
          margin: 0 19px;
          margin: 0 1.9rem;
          white-space: nowrap;
        }
      }
    }
  }
}
@include ltXS {
  header {
    border-bottom: 1px solid $lightgrey;
    // h_left
    // ----------------------------------------
    .h_left {
      width: 82.5px;
      .site_id {
        .site_ttl {
          @include fs(11);
          display: block;
          position: absolute;
        }
        img {
          margin-top: 11px;
          padding-top: 10px;
          width: 82.5px;
        }
      }
    }
    // h_right
    // ----------------------------------------
    .h_right {
      $hRightWidth: 194px;
      width: $hRightWidth;
      .my_menu {
        padding: 0;
        margin-top: 18px;
        #header_login_form {
          width: $hRightWidth;
        }
        .block_body {
          @include fs(12);
          text-align: right;
        }
      }
      #header_navi {
        width: $hRightWidth;
        li {
          &.cart {
            float: left;
          }
          &.entry {
            margin-top: 0;
          }
        }
        a {
          margin-left: 9px;
          @include fs(14);
          width: auto;
          i {
            @include opacity(0.6);
          }
        }
        .mypage a {
          color: #1dbe4f;
          background: none;
        }
        .cart a {
          width: auto;
          color: #f19149;
          height: auto;
          line-height: inherit;
          background: none;
        }
        .entry a {
          background: none;
          color: #0368bb;
        }
      }
    }
    // nav
    // ----------------------------------------
    .xs_menu {
      padding-top: 10px;
      span {
        i {
          display: block;
          @include fs(32);
          margin-top: 2px;
          color: $midgrey;
        }
        background: $white;
        display: block;
        text-align: center;
        width: 50px;
        height: 42px;
        border-radius: 4px;
        line-height: 1.2;
        border: 1px solid $lightgrey;
        @include fs(11);
        cursor: pointer;
        position: absolute;
        z-index: 3;
        font-weight: bold;
      }
      &.menu-fixed-top span {
        position: fixed;
        margin-top: 10px;
        top: 0;
      }
    }
    .menu_close {
      color: $white;
      width: 60px;
      text-align: center;
      cursor: pointer;
      border: 1px solid $gray;
      border-radius: 4px;
      padding: 2px 0;
      margin: 10px 10px 0;
      @include fontAwesome("\f00d", $lightgrey, 20px);
      &:before {
        display: block;
      }
    }
    nav {
      $navWidth: 200px;
      width: $navWidth;
      margin-left: -$navWidth;
      position: fixed;
      top: 0;
      height: 100vh;
      box-shadow: 5px 0 5px rgba($black, 0.1);
      background: $darkgrey;
      transition: margin-left 0.15s ease, opacity 0.15s ease;
      @include opacity(0);
      &.open {
        margin-left: 0;
        transition: margin-left 0.15s ease, opacity 0.15s ease;
        @include opacity(1);
      }
      ul {
        text-align: left;
        padding: 0;
        margin: 0;
      }
      li {
        display: block;
        margin: 0;
      }
      a {
        display: block;
        padding: 10px;
        border-radius: 0;
        border-bottom: 1px solid rgba($trueblack, 0.2);
        color: $white;
        @include fontAwesome("\f054", $gray, inherit);
        &:hover {
          color: $white;
          background: rgba($trueblack, 0.2);
        }
      }
      .container {
        padding: 0;
      }
      .g_nav {
        margin-top: 10px;
        border-top: 1px solid rgba($trueblack, 0.2);
      }
      .g_nav,
      .sub_nav {
        @include fs(18);
        background: transparent;
        box-shadow: none;
        ul {
          padding: 0;
        }
        li {
          margin: 0;
        }
      }
    }
  }
}
@include ltXXS {
  header {
    // h_left
    // ----------------------------------------
    .h_left {
    }
    // h_right
    // ----------------------------------------
    .h_right {
    }
    // nav
    // ----------------------------------------
    .xs_menu {
    }
    .menu_close {
    }
    nav {
      height: 140vh;
      a {
        padding: 7px 10px;
        @include fs(14);
      }
    }
  }
}