header.commonHeader.isSlimLower, 
header.commonHeader.isOpen {
  padding: .2rem .55rem;
}
.commonHeader.isSlimLower .headerText,
.commonHeader.isSlimOpen .headerText {
  display: none;
}
.commonHeader.isSlimLower .headerYear,
.commonHeader.isSlimOpen .headerYear {
  font-size: .1rem;
}
.commonHeader .headerLogo {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  transition: all ease-in-out .3s;
}
header.commonHeader.isSlimLower,
header.commonHeader.isOpen {
  padding: .2rem .55rem;
}
.commonHeader.isOpen .headerLogo,
.commonHeader.isSlimLower .headerLogo {
  width: 2rem;
  margin-left: 0;
}

/* for header SP */
@media only screen and (max-width: 640px) {
  #content {
    padding-top : .56rem;
  }
  header.commonHeader.isSlimLower, 
  header.commonHeader.isOpen,
  header.commonHeader {
    padding: .125rem .2rem .1rem;
  }
  .commonHeader.isSlimLower .headerText,
  .commonHeader.isOpen .headerText,
  .commonHeader .headerText {
    display: none;
  }
  .commonHeader.isSlimLower .headerYear,
  .commonHeader .headerYear {
    font-size: .1rem;
  }
  .commonHeader.isSlimLower .headerDate,
  .commonHeader .headerDate {
    margin-right: .1rem;
    margin-bottom: 0;
  }

  .commonHeader.isSlimLower .headerLogo,
  .commonHeader.isOpen .headerLogo,
  .commonHeader .headerLogo {
    width: calc(260 / 720 * 100vw);
    margin-left: 0;
  }
  .commonHeader.isSlimLower .headerDateWrapper,
  .commonHeader .headerDateWrapper {
    display: flex;
    margin-right: .5rem;
  }
  .commonHeader.isSlimLower .headerMenuBtn,
  .commonHeader .headerMenuBtn {
    margin-right: 0;
    margin-bottom: -.045rem;
  }
}