@charset "UTF-8";
* {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: normal;
  box-sizing: border-box; }

@media (min-width: 768px) {
  /* ヘッダー */
  header {
    padding: 70px;
    position: relative; }
    header .headerLogo {
      position: relative;
      display: block;
      width: 300px; }
      header .headerLogo img {
        width: 300px; }
    header .contact {
      position: absolute;
      right: 70px;
      top: 70px;
      padding: 5px 15px;
      font-size: 13px;
      border: solid thin black;
      border-radius: 20px;
      display: inline-block;
      vertical-align: middle;
      width: 135px; }
      header .contact img {
        height: 18px;
        vertical-align: middle;
        display: inline-block;
        margin-right: 5px; }
      header .contact p {
        position: absolute;
        top: 7px;
        left: 45px;
        font-family: 'Noto Serif JP', serif; }
    header nav {
      position: absolute;
      top: 122px;
      right: 70px; }
      header nav ul {
        width: 600px;
        display: flex;
        justify-content: space-between; }
        header nav ul li {
          display: inline-block; }
          header nav ul li a {
            font-family: 'Noto Serif JP', serif;
            font-size: 14px;
            display: block; }
            header nav ul li a .key {
              height: 18px;
              margin-right: 5px; }

  /* フッター */
  footer {
    padding: 100px 70px;
    position: relative; }
    footer div {
      border-right: solid thin gray;
      width: 350px;
      position: relative; }
      footer div .footerLogo {
        width: 300px; }
      footer div p {
        font-weight: bold;
        font-size: 16px;
        line-height: 1.8;
        margin-top: 20px; }
      footer div .facebookLogo {
        position: absolute;
        right: -70px;
        bottom: 0; }
        footer div .facebookLogo img {
          width: 50px; }
    footer ul {
      position: absolute;
      right: 70px;
      top: 100px; }
      footer ul li {
        margin-bottom: 15px;
        text-align: right; }
        footer ul li a {
          font-family: 'Noto Serif JP', serif;
          display: block; } }
@media (max-width: 768px) {
  /* ヘッダー */
  header {
    padding: 30px;
    position: relative;
    width: 100%; }
    header .headerLogo {
      width: 200px; }
    header .contact {
      display: none; }
    header nav {
      display: none; }

  /* フッター */
  footer {
    padding: 70px 0px;
    position: relative; }
    footer div {
      width: 90%;
      margin: 0 auto; }
      footer div .footerLogo {
        width: 250px; }
      footer div p {
        font-weight: bold;
        font-size: 16px;
        line-height: 1.8;
        margin-top: 20px; }
      footer div .facebookLogo {
        display: none; }
    footer ul {
      display: none; } }