/* ==========================================================================
   Header & Navigation
   ========================================================================== */

/* --- CSS Variables (scoped) --- */
header {
  --header-bg: rgba(39, 54, 109, 0.8);
  --header-border: #707aa0;
  --nav-text: #707aa0;
  --nav-text-active: #fff;
  --header-navy: #27366d;
  --menu-bg: rgba(39, 54, 109, 0.85);
  --child-menu-bg: rgba(112, 122, 160, 1);
  --btn-bg: #f5f7ff;

  /* SP sizes */
  --sp-header-h: 15.897435897435896vw;
  --sp-menu-pad-top: 25.64102564102564vw;
  --sp-logo-w: 26.153846153846157vw;
  --sp-logo-left: 36.92307692307693vw;
  --sp-menu-item-pad: 4.102564102564102vw;
  --sp-menu-item-font: 4.102564102564102vw;
  --sp-btn-line-w: 5.384615384615385vw;
  --sp-btn-line-bar-w: 8.205128205128204vw;
  --sp-btn-label-font: 2.7051282051282053vw;
  --sp-btn-label-bottom: 3.8461538461538463vw;
  --sp-btn-open-offset: 0.5128205128205128vw;
  --sp-tree-indent: 3.8461538461538463vw;
  --sp-tree-li-pad-y: 1.7948717948717947vw;
  --sp-tree-li-pad-right: 5.128205128205128vw;
  --sp-tree-li-pad-left: 2.564102564102564vw;
  --sp-tree-line-offset: 2.051282051282051vw;
  --sp-tree-line-w: 2.564102564102564vw;
  --sp-tree-line-top: 6.153846153846154vw;
  --sp-tree-last-h: 6.41025641025641vw;
  --sp-tree-font: 3.5897435897435894vw;
}
.header_main_sp {
  display: none !important;
  @media (max-width: 768px) {
    display: block !important;
  }
}
body,
html {
  &:has(ul#g-navi.open) {
    overflow: hidden;
  }
}

/* --- Header --- */

.header_main {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  width: 100%;
  height: 7.941176470588235vw;
  border-bottom: 1px solid var(--header-border);
  background-color: var(--header-bg);
  @media (max-width: 768px) {
    height: var(--sp-header-h);
    border-bottom: none;
  }
  *{
    box-sizing: border-box;
  }
  /* --- a > h1 / .logo --- */

  .logo {
    position: relative;
    max-width: 158px;
    width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 0 0 2.2058823529411766vw;
    text-decoration: none;
    @media (max-width: 768px) {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 1em;
      z-index: 10000;
      margin: auto;
      width: auto;
      height: 50%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      @media (max-width: 768px) {
        width: auto;
        max-width: 100%;
        height: 100%;
      }
    }
  }

  /* --- button.btn.js-btn --- */
  .cta_links {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    @media (max-width: 768px) {
      display: flex;
    }
  }
  .btn {
    height: 100%;
    display: none;
    text-decoration: none;
    @media (max-width: 768px) {
      width: var(--sp-header-h);
      height: var(--sp-header-h);
      background-color: var(--btn-bg);
      cursor: pointer;
    }
    .in{
      height: 100%;
      display: flex;
      align-items: center;
      align-content: center;
      justify-content: center;
      flex-wrap: wrap;
      .icon {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          margin: 0;
          display: block;
          height: 100%;
          width: auto;
          max-width: 100%;
          object-fit: contain;
        }
      }
    }
    /* tel */
    &.tel {
      background: #d6b084;
      .icon {
        height: 1.7em;
      }
      .text{
        margin-top: 0.3em;
      }
    }
    /* line */
    &.line {
      background: #06c755;
      .icon {
        height: 2.5em;
      }
      .text{
        margin-top: -0.5em;
        margin-bottom: 0.5em;
      }
    }
    /* ハンバーガーメニューの場合 */
    .btn-line {
      @media (max-width: 768px) {
        position: absolute;
        top: 35%;
        display: inline-block;
        width: var(--sp-btn-line-w);
        height: 1px;
        background-color: var(--header-navy);
        transform: translate(50%, 50%);
        transition: 0.2s;
        &::before,
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: var(--header-navy);
          transition: 0.5s;
        }
        &::before {
          right: 0;
          width: var(--sp-btn-line-bar-w);
          transform: translateY(-9px);
        }
        &::after {
          right: 0;
          width: var(--sp-btn-line-bar-w);
          transform: translateY(9px);
        }
        &.open {
          background-color: transparent;
          &::before,
          &::after {
            content: "";
            transition: 0.2s;
          }
          &::before {
            right: calc(var(--sp-btn-open-offset) * -1);
            transform: rotate(30deg);
          }
          &::after {
            right: calc(var(--sp-btn-open-offset) * -1);
            transform: rotate(-30deg);
          }
        }
      }
    }
    span.text {
      width: 100%;
      display: block;
      text-align: center;
      font-size: 0.55em;
      letter-spacing: 0;
      color: #fff;
    }
    .btn-line_title {
      @media (max-width: 768px) {
        &::after {
          content: "MENU";
          position: relative;
          bottom: calc(var(--sp-btn-label-bottom) * -1);
          display: inline-block;
          color: var(--header-navy);
          font-size: var(--sp-btn-label-font);
        }
        &.open::after {
          content: "CLOSE";
          position: relative;
          display: inline-block;
          font-size: var(--sp-btn-label-font);
        }
      }
    }
  }

  /* --- nav --- */

  nav {
    display: flex;
    height: 100%;
    margin: 0 0 0 auto;

    /* --- ul#g-navi.menu --- */

    ul#g-navi {
      height: 100%;
      overflow-y: auto;
    }

    ul {
      display: flex;
      align-items: center;
      @media (max-width: 768px) {
        padding-bottom: 200px;
        display: block;
      }

      /* --- li.menu-list --- */

      li.menu-list {
        display: flex;
        align-items: center;
        height: 100%;
        @media (max-width: 768px) {
          position: relative;
          height: auto;
          width: 80%;
          min-width: 300px;
          padding: var(--sp-menu-item-pad) 0 0;
          text-align: left;
        }

        a {
          color: var(--nav-text);
          text-decoration: none;
          &:hover {
            color: var(--nav-text-active);
            transition: 0.7s;
          }
          @media (max-width: 768px) {
            font-size: var(--sp-menu-item-font);
          }
        }

        &.current > a {
          color: var(--nav-text-active);
          font-weight: 600;
        }

        .nav_jp {
          display: inline-block;
          margin: 0 1.1029411764705883vw;
          font-size: 0.9em;
          @media (max-width: 768px) {
            margin: initial;
            color: var(--nav-text-active);
          }
        }

        /* --- .tree (SP submenu) --- */

        .tree {
          .tree_top:hover {
            @media (max-width: 768px) {
              opacity: 0.5;
            }
          }
          ul {
            @media (max-width: 768px) {
              position: relative;
              display: block;
              margin: 0 0 0 var(--sp-tree-indent);
              padding: 0;
              list-style-type: none;
              li {
                position: relative;
                margin: 0;
                padding: var(--sp-tree-li-pad-y) var(--sp-tree-li-pad-right) var(--sp-tree-li-pad-y)
                  var(--sp-tree-li-pad-left);
                text-align: left;
                &:before {
                  content: "";
                  position: absolute;
                  top: var(--sp-tree-line-top);
                  left: calc(var(--sp-tree-line-offset) * -1);
                  display: block;
                  width: var(--sp-tree-line-w);
                  height: 0;
                  border-top: 1px solid var(--header-border);
                }
                &:after {
                  content: "";
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: calc(var(--sp-tree-line-offset) * -1);
                  display: block;
                  width: 0;
                  height: 100%;
                  border-left: 1px solid var(--header-border);
                }
                &:last-of-type:after {
                  height: var(--sp-tree-last-h);
                }
                a {
                  color: var(--nav-text-active);
                  text-decoration: none;
                  font-size: var(--sp-tree-font);
                  &:hover {
                    opacity: 0.5;
                  }
                }
              }
            }
          }
          i {
            @media (max-width: 768px) {
              margin-right: var(--sp-tree-line-offset);
            }
          }
        }

        /* --- ul.child_menu (PC mega menu) --- */

        .child_menu {
          position: absolute;
          top: 100%;
          left: 0;
          justify-content: center;
          width: 100vw;
          padding: 2.941176470588235vw 0;
          background-color: var(--child-menu-bg);
          visibility: hidden;
          li {
            margin-right: 4.411764705882353vw;
            &:last-of-type {
              margin-right: 0;
            }
            a {
              display: block;
              width: 100%;
              height: 100%;
              font-size: 0.8em;
              &:hover {
                color: var(--nav-text-active);
              }
            }
          }
          .more_btn_wrap {
            width: 6.6911764705882355vw;
            height: 9.044117647058822vw;
          }
        }

        &.menu-under:hover .child_menu {
          visibility: visible;
        }
      }
    }

    /* --- .menu (SP slide panel) --- */

    .menu {
      @media (max-width: 768px) {
        position: fixed;
        right: -100%;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100vh;
        margin-left: auto;
        padding-top: var(--sp-menu-pad-top);
        background-color: var(--menu-bg);
        color: var(--nav-text-active);
        transition: 0.3s;
        &.open {
          right: 0;
          top: 0;
        }
      }
    }
  }

  /* --- Floating Button (SP only) --- */

  .floating_btn {
    display: none;
    @media (max-width: 768px) {
      position: fixed;
      top: 0;
      right: 70px;
      display: block;
      width: 116px;
      height: 68px;
    }
  }

  .close-none {
    display: none;
  }
}