.header {

display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
min-width: 70rem;
width: 100%;
height: $size-header-height;

@include shadow-bottom();

@media screen and (max-width: 479px) {
  min-width: 100%;
  width: $size-additional-container-width-sp;
  height: $size-header-height-sp;
}

}

.header-container {

display: flex;
width: $size-additional-container-width;
@media screen and (max-width: 479px) {
  justify-content: center;
  width: $size-additional-container-width-sp;
}
&__link {
  margin-left: 5rem;
  text-decoration: none;

  &:hover {
    opacity: 0.6;
  }

  @media screen and (max-width: 479px) {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-left: 0;
    width: $size-additional-container-width-sp;
  }
}

&__title {
  width: 100%;
  color: $color-font-main;
  font-size: $size-font-header;
  @media screen and (max-width: 479px) {
    width: 90%;
    font-size: $size-font-header-sp;
  }
}

}