@charset "UTF-8";

.header-outer {
  border-top: 8px solid #e70012;
}

.header-inner {
  width: 700px;
  margin: 16px auto;
}

.header-inner img {
  width: 160px;
  vertical-align: middle;
}

.header-inner span {
  font-size: 1.3rem;
  padding-left: 16px;
}

.title-outer {
  border-top: 1px solid #dddddd;
}

.title-inner {
  width: 700px;
  margin: 24px auto 0 auto;
  border-left: 8px solid #e70012;
  font-weight: bold;
  font-size: 2.0rem;
  padding: 6px 0 6px 16px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.main-inner {
  width: 640px;
  margin: 24px auto 64px auto;
}

.footer-outer {
  border-top: 1px solid #dddddd;
}

.footer-inner {
  font-size: 1.3rem;
  width: 700px;
  margin: 16px auto;
  display: flex;
  justify-content: right;
  align-items: center;
}

@media screen and (max-width: 767px) {

  .header-inner {
    width: 90%;
  }

  .header-inner img {
    width: 120px;
  }

  .header-inner span {
    font-size: 1.2rem;
  }

  .title-outer {
    border-top: none;
  }

  .title-inner {
    width: 100%;
    margin: 0 auto;
    border-left: none;
    padding: 16px;
    background-color: #eeeeee;
    font-weight: bold;
    font-size: 1.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .main-inner {
    width: 90%;
  }

  .footer-inner {
    font-size: 1.2rem;
    width: 90%;
    justify-content: center;
  }

}