/* プライバシーポリシー・お問い合わせページの見た目。

   記事ページと違い、目次の左カラムを持たない1カラムの構成にしている。
   ヘッダーとフッターは記事ページと共通のものを使う */

/* 本文の幅。記事ページの本文欄と同じくらいの読みやすい幅に抑える */
.static-page {
  max-width: 900px;
  margin: 0 auto 40px;
  padding: 0 16px;
  box-sizing: border-box;
}

/* 本文の箱。記事ページの #theme と同じ配色にしている */
.static-page__body {
  padding: 24px 28px;
  background: #eeeeee;
  border-radius: 4px;
  color: darkslateblue;
  font-size: 16px;
  line-height: 1.9;
}

/* 見出し。base.css の h3（水色・中央寄せ）を打ち消し、
   本文の箱の中で節の区切りとして読める形にする */
.static-page__body h3 {
  margin: 32px 0 12px;
  padding: 0 0 6px;
  border-bottom: 2px solid #8b0000;
  color: darkslateblue;
  font-size: 18px;
  text-align: left;
}

.static-page__body h3:first-child {
  margin-top: 0;
}

/* base.css の `#main .mainInner p` が margin:5px を指定しているため、
   節ごとの間隔がほとんど無い。読みやすい間隔に戻す */
#main .mainInner .static-page__body p {
  margin: 0 0 16px;
  color: darkslateblue;
}

.static-page__body ul {
  margin: 0 0 16px;
  padding-left: 1.5em;
}

.static-page__body li {
  margin-bottom: 6px;
}

/* 本文中のリンク。灰色の背景の上で読める色にする */
.static-page__body a {
  color: #8b0000;
  text-decoration: underline;
}

/* 制定日など、本文の最後に置く補足 */
.static-page__note {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 14px;
}

/* お問い合わせフォーム（Googleフォームの埋め込み）。

   Googleフォームの iframe は width/height を属性で持つが、
   幅が固定のため狭い画面ではみ出す。幅を親に合わせ直している。

   高さは中身に合わせて自動では縮まない（別ドメインの内容は測れない）ため、
   質問が収まる高さを指定している。指定より中身が長い場合は
   iframe の中だけが縦にスクロールする */
.static-page__form {
  margin: 0 0 12px;
}

.static-page__form iframe {
  display: block;
  width: 100%;
  /* 埋め込み版の中身の高さを実測すると1059px（質問4つ）。
     少し余裕を持たせている。
     この高さより中身が長い場合は iframe の中だけが縦にスクロールする。
     質問を増減したときは、この値も合わせて見直すこと */
  height: 1080px;
  border: none;
}

/* フォームが表示されない環境（iframeを遮断する設定など）向けの案内 */
#main .mainInner .static-page__form-fallback {
  margin: 0 0 16px;
  font-size: 14px;
}

/* フォーム未設置の間に出す仮の表示。
   差し替え忘れに気づけるよう、目立つ枠にしている */
.static-page__form-placeholder {
  padding: 24px 16px;
  background: #fff;
  border: 2px dashed #8b0000;
  color: #8b0000;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .static-page__form iframe {
    /* 狭い画面では質問文や選択肢が折り返して縦に伸びる。
       広い画面での実測1059pxに、折り返し分を見込んで加算している */
    height: 1350px;
  }
}

@media screen and (max-width: 768px) {
  .static-page {
    padding: 0 8px;
  }

  .static-page__body {
    padding: 16px 14px;
    font-size: 15px;
  }

  .static-page__mail {
    font-size: 15px;
  }
}