/* WordPressにしてから必要になった分だけを、ここに足しています。
   assets/css/site.css は静的ページと同じ中身のまま触らないでください
   （static/ 側と見比べられるようにしておくためです）。 */

/* ------------------------------------------------------------------
   トップページ先頭のスライド
   ------------------------------------------------------------------ */

.hero-slot:has(.hero-slot__slide) {
  display: block;
  min-height: 0;
  padding: 0;
}

.hero-slot__slide {
  margin: 0;
}

.hero-slot__slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ------------------------------------------------------------------
   本物の動画を埋め込んだとき
   ------------------------------------------------------------------ */

/* まわりに黒い枠が出ないように、動画をそのまま置く。
   上のメディア掲載（.media-shot）と同じ見え方にしている。 */
.video-embed--live {
  max-width: 887px;
  margin-inline: auto;
  display: block;
  aspect-ratio: auto;
  background: none;
  overflow: visible;
}

.video-embed--live iframe,
.video-embed--live video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* ------------------------------------------------------------------
   記事の本文
   ------------------------------------------------------------------ */

.entry__head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.entry__title {
  font-size: clamp(22px, 2.2vw, 33px);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .04em;
}

.entry__head .post__date {
  margin-top: 12px;
}

.entry__media {
  margin-bottom: clamp(24px, 3vw, 40px);
}

.entry__media img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* 記事本文の見出し。編集画面で付けた見出しが、サイトの調子に揃うように。 */
.entry__body h2 {
  margin: 2em 0 .8em;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 700;
  line-height: 1.8;
}

.entry__body h3 {
  margin: 1.8em 0 .7em;
  font-size: clamp(17px, 1.3vw, 20px);
  font-weight: 700;
  line-height: 1.8;
}

.entry__body ul,
.entry__body ol {
  margin: 0 0 1.6em 1.4em;
  line-height: 2;
}

.entry__body ul { list-style: disc; }
.entry__body ol { list-style: decimal; }

.entry__body blockquote {
  margin: 0 0 1.6em;
  padding: 14px 20px;
  background: var(--band);
  border-left: 4px solid var(--line);
}

.entry__body img {
  max-width: 100%;
  height: auto;
}

.entry__body a {
  text-decoration: underline;
}

/* 前後の記事への行き来 */

.entry-nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(12px, 2vw, 24px);
  align-items: center;
  margin-top: clamp(36px, 4vw, 64px);
  padding-top: clamp(20px, 2.4vw, 32px);
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.entry-nav__prev { text-align: left; }
.entry-nav__index { white-space: nowrap; font-weight: 700; }
.entry-nav__next { grid-column: 3; text-align: right; }

@media (max-width: 700px) {
  .entry-nav {
    grid-template-columns: minmax(0, 1fr);
    text-align: center;
  }
  .entry-nav__next { grid-column: auto; text-align: center; }
  .entry-nav__prev { text-align: center; }
}

/* ------------------------------------------------------------------
   お問い合わせの入力欄
   ------------------------------------------------------------------ */

.contact-form {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(28px, 3vw, 48px);
}

.form-row {
  display: grid;
  gap: 8px;
  margin: 0;
}

.form-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.form-req {
  padding: 2px 8px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  font-size: 16px; /* 16px未満だと、スマホで勝手に拡大されてしまう */
  line-height: 1.8;
  color: inherit;
}

.form-row input:focus-visible,
.form-row textarea:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}

.form-actions {
  margin: 0;
  text-align: center;
}

.form-actions button {
  cursor: pointer;
  font: inherit;
}

.form-error {
  padding: 12px 16px;
  background: #fff4f4;
  border: 1px solid #d98080;
  font-size: 15px;
}

/* 自動送信よけの欄。人には見せない。 */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------------
   管理画面のツールバーが出ているとき、ヘッダーが隠れないように
   ------------------------------------------------------------------ */

.admin-bar .site-header {
  top: 32px;
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}