/* スマホ対応 */
@media (max-width: 960px) {
  /* 全体のフォントを小さくする */
  html {
    font-size: 14.5px;
  }
  /* ヘッダー */
  header {
    padding: 25px 15px 3px;
    margin-bottom: 60px;

    ul {
      padding: 0 5px;
      gap: 15px;
    }
  }

  /* メイン */
  .container {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 60px;
  }
  /* プロフィール */
  .main-profile {
    gap: 30px;
  }

  /* menu-cardを縦並びにする */
  .works-list {
    display: flex;
    flex-direction: column;

    /* menu-cardのgapを減らす */
    gap: 40px;

    /* menu-cardのサイズを100％にし、最大幅を400pxに設定する */
    .menu-card {
      width: 100%;
      max-width: 400px;
      margin: auto;
    }
  }

  /* フッター */
  footer {
    padding: 15px 0 8px;
  }
}

@media (width > 700px) {
  /* プロフィール表示切り替えた時のcontainer設定 */
  .--container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 80px;
  }
}

/* 表示崩れ改善 */
@media (max-width: 700px) {
  /* 共通設定 */
  /* 全体のフォントを小さくする */
  html {
    font-size: 13px;
  }
  /* 行間の高さ*/
  body {
    line-height: 1.8;
  }
  /* ヘッダー */
  header {
    padding: 18px 13px 3px;
    margin-bottom: 0;
  }

  /* メインセクションの設定（メインプロフィール、サブプロフィール、制作実績、お問い合わせ） */
  .main-section {
    padding-bottom: 20px;

    h2 {
      line-height: 1.5;
      margin-bottom: 30px;
    }
  }
  .container {
    max-width: 480px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* ページトップへ戻るリンクの設定 */
  .link {
    text-align: right;
    padding: 0 20px 60px;
  }

  /* 個別設定 */
  /* メインプロフィール */
  .main-profile {
    /* プロフィール画像を非表示にする */
    .image {
      display: none;
    }
    display: flex;

    /* 背景画像の設定 */
    background-image: url(/img/profile.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1/1.25;

    align-items: center;
    .text {
      padding: 20px;
      /* 文字色 */
      color: var(--main-color);
      span {
        color: inherit;
      }
    }
  }

  /* サブプロフィール */
  .sub-profile {
    p {
      padding-top: 30px;
    }
  }

  /* 制作実績 */
  .works-list {
    /* menu-cardのサイズを100％にし、最大幅を300pxに設定する */
    .menu-card {
      width: 100%;
      max-width: 300px;
      margin: auto;
    }
  }
  /* フォーム */
  .form-box {
    padding: 30px;
  }

  /* フッター */
  footer {
    padding: 10px 0 5px;
  }
  nav {
    padding: 3px 0 10px;
  }
}