/************************************
** ヘッダー
************************************/

.header{
  @extend %background_image;
  height: 100%;
  flex-shrink: 0;
}

.header-in{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tagline{
  text-align: center;
  font-size: 14px;
  margin: .6em 1em;
}

.logo{
  text-align: center;
}

.logo-image span,
.logo-image a{
  display: inline-block;
  max-width: 100%;
}


.site-name-text-link{
  @include link_cancel;
  font-weight: normal;

  &:hover{
    color: inherit;
  }
}

.site-name-text{
  font-size: 28px;
}

.logo-text{
  padding: 20px 0 30px;
  font-size: 1em;
}

.logo-image{
  padding: 10px 0;
  font-size: inherit;
}

/************************************
** ヘッダーレイアウト
************************************/
//トップメニュー
.header-container-in.hlt-top-menu{
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-content: center;

  .wrap{
    width: auto;
  }

  .header{
    background-image: none;
  }

  .logo-text{
    padding: 0;
    display: flex;
    align-items: center;
    align-content: center;
  }

  .logo-image{
    padding: 0;
    margin: 0;
  }

  .site-name-text-link{
    margin: 0 16px;
    display: block;
  }

  .site-name-text{
    font-size: 22px;
    white-space: nowrap;
  }

  .tagline{
    display: none;
  }

  .logo-header{
    max-height: 60px;
    .site-name{
      margin: 0;
    }
    img{
      max-height: 60px;
      height: auto;
      vertical-align: middle;
    }
  }

  amp-img{
    max-width: 160px;
    max-height: 60px;
    img{
      height: auto;
    }
  }

  .navi{
    width: 100%;
  }
}

//トップメニュー（小）
.header-container-in.hlt-top-menu.hlt-tm-small{
  .site-name-text-link{
    margin: 0 16px;
  }

  .site-name-text{
    font-size: 20px;
  }

  .logo-header{
    max-height: 40px;
    img{
      max-height: 40px;
    }
  }

  .navi-in > ul > li,
  .navi-in > ul > .menu-item-has-description > a > .caption-wrap{
    line-height: 40px;
    height: 40px;
    display: block;
  }

  .item-description{
    display: none;
  }
}

.hlt-tm-right{
  .navi-in > ul{
    justify-content: flex-end;
  }
}

/************************************
** センターロゴ（トップメニュー）
************************************/
.header-container-in.hlt-center-logo-top-menu{
  display: flex;
  flex-direction: column-reverse;
}

//スリムサイズのグローバルナビ
$slim_height: 40px;
.fixed-header .cl-slim .logo-header{
  max-height: $slim_height;
  img{
    max-height: $slim_height;
  }
}
.cl-slim .navi-in > ul li{
  height: $slim_height;
  line-height: $slim_height;

  .sub-menu ul{
    top: -$slim_height;
  }

  &.menu-item-has-description > a > .caption-wrap{
    height: $slim_height;
    line-height: 16px;
    font-size: 14px;
    padding-top: 6px;
  }
}