/* single.phpはcreamを背景色に使用 */
body.page-single { background: var(--cream); }

/* ════════════════════════════
   PAGE-SINGLE ヘッダー色上書き
════════════════════════════ */
.page-single .header-logo { color: var(--ink); opacity: 1; }
.page-single .header-tel  { color: var(--ink-faint); }
.page-single .hamburger span { background: var(--ink); }
.page-single #header.visible .header-logo { color: var(--ink); }
.page-single #header.visible .hamburger span { background: var(--ink); }
.page-single #header.visible .hamburger { background-color: transparent; }

/* ════════════════════════════
   SINGLE
════════════════════════════ */
#single {
  padding: 120px 8% 100px;
  max-width: 1000px;
  margin: 0 auto;
}
.single-date {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  margin-bottom: 16px;
}
.single-title {
  font-size: clamp(20px, 4vw, 28px);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 48px;
}
.single-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin-bottom: 48px;
  background: var(--cream);
}
.single-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.single-body {
  font-size: 15px;
  line-height: 2.2;
  color: var(--ink-mid);
  letter-spacing: .04em;
  margin-bottom: 64px;
}
.single-body p + p { margin-top: 1.6em; }
.single-rule {
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,.1);
  margin-bottom: 56px;
}

/* ── 前後ナビゲーション ── */
.single-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 280px;
  margin: 0 auto;
}
.single-nav-prev { justify-self: start; }
.single-nav-next { justify-self: end; }
.single-nav-prev a,
.single-nav-next a {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink-faint);
  font-size: 12px;
  letter-spacing: .1em;
  transition: color .3s;
}
.single-nav-prev a:hover,
.single-nav-next a:hover { color: var(--gold-dark); }
.nav-arrow {
  width: 36px; height: 36px;
  border: 1px solid rgba(0,0,0,.15);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .3s;
  flex-shrink: 0;
}
.single-nav-prev a:hover .nav-arrow,
.single-nav-next a:hover .nav-arrow { border-color: var(--gold); }
.nav-arrow svg {
  width: 14px; height: 14px;
  stroke: currentColor; fill: none;
  stroke-width: 1.5;
}
.single-nav-back { justify-self: center; }
.single-nav-back a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: var(--ink-faint);
  font-size: 14px;
  letter-spacing: .25em;
  transition: color .3s;
}
.single-nav-back a:hover { color: var(--gold-dark); }
.single-nav-back a::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  opacity: .4;
}

/* ════════════════════════════
   RESPONSIVE
════════════════════════════ */
@media (min-width: 768px) {
  #single { padding: 140px 12% 120px; }
  .single-date { font-size: 13px; margin-bottom: 20px; }
  .single-title { margin-bottom: 56px; }
  .single-body { font-size: 16px; }
}

@media (min-width: 1025px) {
  #single { padding: 160px 10% 140px; }
}