/*
移行で足した部品の見た目 (DAWNY の変数で揃える)。DAWNY 本体の CSS は手を入れずにそのまま使っている
*/

/* 記事カード (旧サイトは SWELL を外したあと表示されなくなっていたので、移行で出すようにした) */
.single-post-content .postlink {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--space-s);
  align-items: center;
  margin: var(--space-s) 0 var(--space-m);
  padding: var(--space-xs);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-on-surface);
  text-decoration: none;
}
.single-post-content .postlink img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--border-radius) - 4px);
  margin: 0;
}
.single-post-content .postlink span {
  font-weight: bold;
  line-height: var(--line-height-s);
}
.single-post-content .postlink small {
  display: block;
  font-size: var(--font-size-s);
  font-weight: normal;
  color: #666;
  margin-bottom: var(--space-xxs);
}
@media screen and (max-width: 767px) {
  .single-post-content .postlink { grid-template-columns: 6.5rem 1fr; }
}
/* 画像の無いカード (外部サイトへのリンク) */
.single-post-content .postlink.postlink--plain { grid-template-columns: 1fr; padding: 0.75rem 1rem; }

/* お問い合わせフォーム (全サイト共通の ContactForm 部品)。見た目は旧サイトの Snow Monkey Forms に合わせる。
   DAWNY は form に display:flex (検索フォーム用)、固定ページの ul に padding:0 を当てているので、固定ページの中で上書きする */
.page-content .contact-notes {
  list-style: none;
  margin: var(--space-m) 0 0;
  padding: var(--space-s);
  background: var(--color-secondary);
  border-radius: var(--border-radius);
  font-size: var(--font-size-s);
  line-height: var(--line-height-m);
}
.page-content .contact-notes li { position: relative; padding-left: 1.2em; margin: 0; }
.page-content .contact-notes li::before { content: "※"; position: absolute; left: 0; }
.page-content .contact-form { display: grid; gap: var(--space-m); margin: var(--space-m) 0 0; }
.page-content .contact-form label { display: grid; gap: var(--space-xs); font-size: var(--font-size-s); font-weight: bold; }
.page-content .contact-form em { font-style: normal; font-weight: normal; font-size: var(--font-size-xs); color: var(--color-error); margin-left: var(--space-xs); }
.page-content .contact-form input[type="text"],
.page-content .contact-form input[type="email"],
.page-content .contact-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  font-size: 16px;
  font-weight: normal;
  color: var(--color-on-surface);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 3px;
}
.page-content .contact-form textarea { resize: vertical; min-height: 8rem; line-height: var(--line-height-m); }
.page-content .contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.page-content .contact-form__note { font-size: var(--font-size-s); margin: 0; }
.page-content .contact-form label.contact-form__agree { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-m); font-weight: normal; cursor: pointer; }
.page-content .contact-form__agree input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-primary); }
.page-content .contact-form button {
  width: 100%;
  padding: 0.9rem 1.5rem;
  font: inherit;
  font-weight: bold;
  color: var(--color-on-primary);
  background: var(--color-primary);
  border: 0;
  border-radius: 3px;
  cursor: pointer;
}
.page-content .contact-form button:disabled { opacity: 0.6; cursor: wait; }
.page-content .contact-form__status { margin: 0; font-size: var(--font-size-s); }
.page-content .contact-form__status[data-state="ok"] { color: #1a7f37; }
.page-content .contact-form__status[data-state="error"] { color: var(--color-error); }

/* 文字: 旧サイトは <html lang="en-US"> で、DAWNY の Shippori Mincho も読み込めていなかった (ファイル名の大文字小文字違いで 404)。
   そのため英数字は Times、日本語は端末の明朝体で表示されていた。lang は ja に直したうえで、見え方だけ旧サイトに揃える。
   Mac の Chrome は英語ページの「※」などを Lucida Grande で出していた (明朝体の※より詰まり、表の折り返しが変わる) ので同じ順にする */
:root {
  --font-family-primary: Times, "Lucida Grande", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
}

/* 表の説明文 (旧サイトでは表の figcaption。EmDash の表は説明文を持てないので表のすぐ後ろに出している) */
.single-post-content .table-caption,
.page-content .table-caption {
  margin: calc(-1 * var(--space-s)) 0 var(--space-m);
  text-align: center;
  font-size: var(--font-size-s);
}

/* 本文の埋め込み (Google マップなど) は幅が固定 (600px) なので、スマホでは画面幅に収める */
.single-post-content iframe,
.page-content iframe {
  max-width: 100%;
}