body {
 opacity: 1;
}

/* Detail ページ共通コンテナ */
.topic-detail {
 display: block;
 scroll-margin-top: calc(var(--header-height) + 10px);
 padding-block: 60px 0px;
 height: auto !important;
 overflow: visible !important;
}

/* 内側ラッパーを左寄せ */
.detail-inner {
 width: 100%;
 max-width: 1200px;
 padding-inline: 60px;
 margin: 0 auto;
 text-align: left;
}

/* 画像を全幅で表示 */
.detail-image-wrapper {
 width: 100%;

 border-radius: 8px;
}

.detail-image {
 width: 100%;
 height: auto;
 object-fit: cover;
 display: block;
}

/* メタ（日付・タイトル）左揃え */
.detail-meta {
 margin-top: 24px;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
}

/* 日付・タイトル・キャプション */
.detail-date {
 color: #717171;
 font-size: 0.9rem;
}

.detail-title {
 font-size: 2.4rem;
 font-weight: 600;
 margin: 0;
}

.detail-caption {
 margin-top: 32px;
 font-size: 1rem;
 line-height: 1.7;
 color: #333;
}

.detail-image-gallery {
 display: flex;
 gap: 16px;
 overflow-x: auto;
 margin-bottom: 24px;
 flex-direction: column; /* ← 横並びから縦並びに */
}

/* common media styling */
.detail-media {
 flex: none; /* 要素の伸縮を無効化 */
 width: 100%; /* 横幅いっぱい */
 margin: 0 auto;
 height: auto; /* アスペクト比を維持 */
 object-fit: cover; /* 必要なければ外してもOK */
 border-radius: 8px;
}

@media (max-width: 768px) {
 .detail-inner {
  padding-inline: 30px;
 }
 .detail-title {
  font-size: 1.6rem;
 }
 .detail-caption {
  font-size: 0.95rem;
 }
 .detail-image-gallery {
  margin-bottom: unset;
 }
 .detail-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  overflow: visible;
 }
 .detail-media {
  width: 100%;
 }
}

@media (max-width: 600px) {
 .topic-detail {
  padding-block: 30px 0px;
 }
 .detail-inner {
  padding-inline: 20px;
 }
 .detail-title {
  font-size: 1.5rem;
 }
 .detail-meta {
  margin-top: 10px;
 }
 .detail-caption {
  font-size: 0.95rem;
 }
 .detail-media {
  width: 100%;
 }
}