/*
  CSSの`@import`は、複数ファイルの読み込みが遅いなどの理由で非推奨になっている
  ここでは1つのファイルだけを読み込む目的で使用することにする

  複数ファイルを読み込む場合は、

  - Sassの`@use`を使う
  - Frontmaterで複数のCSSファイルを指定できるようにする

  などの代替案を検討すること
*/
@import url("/assets/css/markdown.css");

:root {
  --download-form-bg: hsl(240 25% 97%);
  --download-form-accent: hsl(204 76% 49%);
  --download-form-field-bg: #fff;
  --download-form-field-border: #ddd;

  --badge-bg: hsl(240 3% 39%);
}

h1 {
  /*
  「新しい社債投資」解説セミナー動画 に最適化
  TODO: 汎用的なスタイルにする場合は指定を見直す
  */
  font-size: 1.85em;
}

/* 共通 */
h2,
p {
  font-weight: normal;
  line-height: 1.75;
}

.markdown {
  color: #0c0c0c;
}

/* ------------------------------
layout
------------------------------ */

main {
  row-gap: 50px;
}
@media screen and (min-width: 960px) {
  main {
    --max-article-width: 950px;
  }
}

.two-columns {
  display: grid;
  row-gap: 30px;
}
@media screen and (min-width: 960px) {
  .two-columns {
    grid-template-columns: 1fr 392px;
    column-gap: 35px;
  }
}

/* ------------------------------
badge
------------------------------ */

.badge {
  width: fit-content;
  margin: 0 auto;
  padding: 5px 1.5em;
  font-size: 14px;
  font-weight: 600;
  border-radius: 100px;
  background-color: var(--badge-bg);
  color: #fff;
}
@media screen and (min-width: 960px) {
  .badge {
    display: none;
  }
}

/* ------------------------------
form
------------------------------ */

.formBlock {
  width: 100%;
  padding: 30px 45px 35px;
  display: grid;
  row-gap: 20px;
  background-color: var(--download-form-bg);
}
.formBlock p {
  font-size: 14px;
}
.formBlock p.req {
  position: relative;
  display: inline-block;
}
.formBlock p.req::after {
  position: absolute;
  right: -20px;
  font-size: 8px;
  font-weight: 600;
  top: 0;
  content: "＊";
  color: #3593d1;
}
.formBlock input,
.formBlock textarea,
.formBlock select {
  width: 100%;
  padding: 10px;
  background-color: var(--download-form-field-bg);
  border: 1px solid var(--download-form-field-border);
  border-radius: 2px;
  font-size: 15px;
}
/* その他入力欄 */
.formBlock input:focus,
.formBlock textarea:focus {
  border: 1px solid var(--download-form-accent);
}

.formSendBox {
  display: grid;
  justify-items: right;
}
.formBlock button.link-button {
  max-width: 100%;
  font-size: 14px;
}
@media screen and (min-width: 550px) {
  .formBlock button.link-button {
    width: 180px;
  }
}
@media screen and (min-width: 960px) {
  .formBlock button.link-button {
    width: 100%;
  }
}

/* フォーム内のプライバシーポリシー表示部 */
.formBlock .notePrivacy p {
  font-size: 12px;
  color: #666;
}
.formBlock .notePrivacy a {
  margin: 0 2px;
  text-decoration: underline;
  color: inherit;
}

.formBlock .privacy {
  height: 200px;
  padding: 10px;
  overflow: auto;
  background-color: var(--download-form-field-bg);
  border: 1px solid var(--download-form-field-border);
  border-radius: 2px;
}
.formBlock .privacy * {
  font-size: 11px;
}

.formBlock .privacy h2 {
  margin: 10px 0 0;
  line-height: 2;
  font-weight: 400;
}

.formBlock .privacy a {
  margin: 0 2px;
  font-weight: 600;
  text-decoration: underline;
  color: #3593d1;
}

.formBlock .privacy ol {
  padding-left: 21px;
}
.formBlock .privacy li {
  margin-top: 5px;
  list-style-type: decimal;
}