/* for header SP */
header.commonHeader {
  transition: padding ease-in-out .3s;
}
.headerYear {
  transition: font-size ease-in-out .3s;
}
.headerDate {
  transition: margin ease-in-out .3s;
}
.headerWrapper {
  display: block;
}
.headerLogo {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  transition: all ease-in-out .3s;
}
.headerDateWrapper {
  transition: display ease-in-out .3s;
}
.headerMenuBtn {
  transition: margin ease-in-out .3s;
}

header.commonHeader.isSlim,
header.commonHeader.isOpen {
  padding: .2rem .55rem;
}
.commonHeader.isOpen .headerText,
.commonHeader.isSlim .headerText {
  display: none;
}
.commonHeader.isOpen .headerLogo,
.commonHeader.isSlim .headerLogo {
  width: 2rem;
  margin-left: 0;
}


@media only screen and (max-width: 640px) {
  header.commonHeader.isSlim,
  header.commonHeader.isOpen {
    padding: .125rem .2rem .1rem;
  }
  .commonHeader.isOpen .headerText,
  .commonHeader.isSlim .headerText {
    display: none;
  }
  .commonHeader.isOpen .headerYear,
  .commonHeader.isSlim .headerYear {
    font-size: .1rem;
  }
  .commonHeader.isOpen .headerDate,
  .commonHeader.isSlim .headerDate {
    margin-right: .1rem;
    margin-bottom: 0;
  }
  .headerLogo {
    margin-left: 0;
  }
  .commonHeader.isOpen .headerLogo,
  .commonHeader.isSlim .headerLogo {
    width: calc(260 / 720 * 100vw);
    margin-left: 0;
  }
  .commonHeader.isOpen .headerDateWrapper,
  .commonHeader.isSlim .headerDateWrapper {
    display: flex;
    margin-right: .5rem;
  }
  .commonHeader.isOpen .headerMenuBtn,
  .commonHeader.isSlim .headerMenuBtn {
    margin-right: 0;
    margin-bottom: -.045rem;
  }
}