@charset "UTF-8";

/* ポートフォリオダウンロード
   読み込み順は functions.php（後に読み込んだ指定が勝つので順番を変えない） */

/* --------------------------------------------------------------------- */
/* ポートフォリオダウンロード　*/
/* --------------------------------------------------------------------- */

.download-page-container {
  margin: 50px 0;
}

/* ポートフォリオダウンロード　画像 */
.download-page-container img {
  width: 1100px;
  display: block;
  margin: 50px auto 100px auto;
  /* 枠 */
  border: 1px solid var(--color-line-stripe);
}

/* ダウンロード方法/注意事項 サブタイトル */
.download-page-container .sub-title {
  margin-bottom: 10px;
}

/* olリストの左スペース調整 */
.download-page-container ol {
  padding-inline-start: 22px;
  margin-top: 10px;
}

/* ulリストの左スペースを調整 */
.download-page-container ul {
  padding-inline-start: 15px;
  margin-top: 10px;
}

/* ダウンロード方法/注意事項 リスト */
.download-page-container li {
  font-weight: bold;
  line-height: 36px;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    line-height: 26px;
  }
}

/* 注意事項　リスト間の間隔 */
.download-page-container ul li {
  margin-bottom: 25px;
}

/* ダウンロードフォーム　枠 */
.download-form {
  border-radius: 6px;
  margin-left: 40px;
  padding: 40px;
  min-width: 365px;
  /* 親要素 */
  position: relative;

  /* タブレットサイズ以下 */
  @media (max-width: 960px) {
    min-width: 255px;
  }
}

/* ダウンロードフォーム　div */
.download-form div {
  margin-bottom: 30px;
}

/* ダウンロードフォーム */
.download-form input[type='text'] {
  width: 100%;
  background-color: var(--color-white);
}

/* ダウンロードフォーム 送信ボタン */
.download-form .btn {
  display: block;
  margin: 0 auto;
}

/* スマホサイズ以下 */
@media (max-width: 767px) {
  .download-page-container {
    margin: 30px 0 100px 0;
  }

  /* ポートフォリオダウンロード　画像 */
  .download-page-container img {
    margin: 30px auto;
  }

  /* 縦並び */
  .download-page-container .display-flex {
    flex-direction: column;
  }

  /* ダウンロード方法/注意事項　枠 */
  .download-method-container {
    margin: 0px 7% 30px 7%;
  }

  /* タイトルと横線の間隔 */
  .download-page-container .sub-title {
    margin-bottom: 5px;
  }

  /* ダウンロード方法と注意事項の間隔 */
  .download-page-container .bottom-space-s {
    margin-bottom: 45px;
  }

  /* フォーム　枠 */
  .download-form {
    border-radius: 0;
    margin-left: 0;
  }
}