/*==============================
        header
==============================*/
#header {
  position: sticky;
  /*position: relative;*/
  z-index: 999;
  top: 0;
  left: 0;
  background-color: #ffffff;
  width: 100%;
  .header {
    width: 100%;
    padding: 20px 30px;
    background-color: #ffffff;
    position:relative;
    .header_inner {
      width: 100%;
      display: grid;
      grid-template-columns: auto auto;
      justify-content: space-between;
      align-items: center;
      .haeder_logo{
        width: 320px;
      }
      .menu_box {
        display: grid;
        grid-template-columns: auto auto;
        align-items: center;
        grid-column-gap: 70px;
          ul {
            display: grid;
            grid-template-columns: repeat(5, auto);
            grid-column-gap: 2em;
            li {
              font-size: 1.5rem;
              a {
                padding-bottom: 0.3em;
                border-bottom: 2px solid #fff;
                &:hover {
                  border-bottom: 2px solid #ae9863;
                }
              }
            }
          }
          .contact_box{
            /*display: grid;
            grid-template-columns: auto auto;
            grid-column-gap: 1em;*/
            a.tel{
              display: grid;
              grid-template-columns: auto auto;
              grid-column-gap: 0.3em;
              align-items: center;
              color: #001B5D;
              &:hover{
                opacity: 0.6;
              }
              img{
                width: 2.6rem;
              }
              span{
                font-size: 2.8rem;
                letter-spacing: 0.07em;
                font-weight: 500;
              }
            }
            a.mail{
              background-color: #001B5D;
              border-radius: 50px;
              padding:1em 0.85em;
            }
          }
        }
      }
    }
  }
@media screen and (max-width: 1400px) {
  #header {
    .header {
      .header_inner {
        .haeder_logo{
          width: 240px;
        }
        .menu_box {
          grid-column-gap: 50px;
            ul {
              grid-column-gap: 1.5em;
              li {
                font-size: 1.4rem;
              }
            }
            .contact_box{
              a.tel{
                img{
                  width: 2.2rem;
                }
                span{
                  font-size: 2.4rem;
                }
              }
              a.mail{
                padding:0.7em 0.5em;
                img{
                  width: 22px;
                }
              }
            }
          }
        }
      }
    }
}
@media screen and (max-width: 1200px) {
  #header {
    .header {
      padding: 10px 20px;
      .header_inner {
        .haeder_logo{
          width: 220px;
        }
        .menu_box {
          grid-column-gap: 30px;
            ul {
              grid-template-columns: repeat(3, auto);
              grid-column-gap: 1em;
              grid-row-gap: 1em;
            }
          }
        }
      }
    }
}
@media screen and (max-width: 1024px) {
  #header {
    .header {
      .header_inner {
        .haeder_logo{
          width: 220px;
        }
        .menu_box {
          padding-right: 60px;
          grid-column-gap: 30px;
            ul {
              display: none;
            }
        }
      }
    }
  }
}
@media screen and (max-width: 768px) {
    #header {
    .header {
      .header_inner {
        .haeder_logo{
          width: 220px;
        }
        .menu_box {
          display: none;
        }
      }
    }
  }
}