section {
  margin-bottom: 3rem;
}

#top {
  max-width: none;
}

.list-detail-top {
  position: relative;
}

.list-detail-top img {
  width: 100%; /* 親幅いっぱいに広げる */
  height: auto;
  display: block;
}

/* テキストブロック */
.top-text {
  position: absolute;
  bottom: -4rem; /* 下の位置に合わせる */
  left: calc((100vw - 1400px) / 2 + 1rem);
  display: flex;
  flex-direction: column; /* 縦並び */
  gap: 0.25rem; /* small と h2 の間隔 */
  z-index: 2;
  background-color: rgba(16, 98, 124, 0.7);
  writing-mode: vertical-rl; /* 右から左に縦書き */
  text-orientation: upright; /* 文字を正立させる */
  margin: 0;
  padding: 0.5rem 0.25rem;
  height: 19rem;
  width: 7rem;
  justify-content: center;
}

/* smallの装飾 */
.top-text small {
  color: #ffffff; /* 文字色 */
  display: inline-block; /* 背景を文字幅に合わせる */
  font-size: 0.6rem;
  letter-spacing: 0.5em;
  text-orientation: sideways; /* 横文字を回転させず横向きのまま配置 */
  align-self: flex-start;
  padding: 0.8rem 0;
}

/* h2の装飾 */
.top-text h2 {
  font-size: 2rem;
  color: #fff;
  padding: 0.8rem 0.25rem;
  display: inline-block;
  margin: 0;
  letter-spacing: 0.1em;
}

/* list-detail-gallery全体：縦に積む */
#list-detail-gallery {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* detail同士の間隔 */
  padding: 2rem 1rem;
  box-sizing: border-box;
  margin-top: 6rem;
}

/* list全体 */
.list {
  display: flex;
  gap: 1rem;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: visible;
}

/* 画像部分 */
.gallery-img {
  flex: 1; /* ← 横幅を1/2に */
  display: flex; /* 中身(画像)を中央揃え */
  align-items: center; /* 縦中央 */
  justify-content: center; /* 横中央 */
  padding: 1.5rem 0.5rem;

  box-sizing: border-box;
  z-index: 2;
  position: relative;
}

.gallery-img img {
  max-width: 100%; /* 親に収める */
  height: auto;
  display: block;
  box-sizing: border-box;
  border: 2px solid #dddddd;
  background-color: #ffffff;
  padding: 0.5rem;
}

/* 説明部分 */
.list-detail-example {
  flex: 1; /* ← 横幅を1/2に */
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 10px;
  overflow: visible;
  transition: transform 0.3s;
  box-sizing: border-box;
  position: relative; /* ← 擬似要素配置の基準にする */
  z-index: 1;
}

/* 背景だけを伸ばす */
.list-detail-example::before {
  content: '';
  position: absolute;
  top: 0;
  left: -5rem;
  width: calc(100% + 5rem); /* 本来の幅 + 突き出した分 */
  height: 100%;
  background-color: #f9f9f9;
  border-radius: 10px;
  z-index: -1; /* 背景だけ奥に送る */
}

.list-detail-example h2,
.list-detail-example dt,
.list-detail-example dd:last-of-type {
  border-bottom: 1px solid #dddddd;
  padding-bottom: 0.5rem; /* 下線と文字の間隔 */
  margin-bottom: 0.5rem; /* 要素間の間隔調整 */
  padding-left: 1rem;
}

.list-detail-example dl {
  margin: 0;
}

.list-detail-example dd {
  padding: 0.25rem 0;
  margin: 0.25rem 0;
  padding-left: 1rem;
}

/* list.html~~ dlが増えたのでpaddingとmarginの修正 */
.list-detail-example dl:first-of-type dd:last-of-type {
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  white-space: pre-line; /* 改行を反映 */
}

.list-detail-example dl.horizontal {
  display: flex; /* 横並びにする */
}

.horizontal dd {
  margin: 0;
  padding: 0;
}

/* h2,dt,ddにそれぞれ線を引いていたが施工期間は横並びなのでdlに下線に修正 */
.list-detail-example dl.horizontal {
  display: flex;
  gap: 1rem;
  border-bottom: 1px solid #dddddd; /* 横幅いっぱいに線 */
  padding-bottom: 0;
  margin: 0.25rem 0;
}

.list-detail-example dl.horizontal dt,
.list-detail-example dl.horizontal dd:last-of-type {
  border-bottom: none; /* 下線を消す */
}

/* 詳細imgリスト */
.detail-list .img-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4列並び */
  gap: 1rem; /* 画像の間隔 */
  margin: 0 auto;
  align-items: center;
}

.img-list img {
  width: 100%; /* グリッドセルにフィット */
  height: auto; /* 縦横比維持 */
  display: block; /* 余計な隙間を消す */
}
/* ~~list.html */

/* aタグ共通部分~~ */
a.move {
  display: inline-block;
  background-color: #10627c;
  color: #ffffff;
  padding: 0.5em 1.5em;
  border: 2px solid #10627c;
  border-radius: 0.4em;
  text-decoration: none;
  text-align: center;
  transition: 0.3s;
  width: 10em;
}

.list .list-detail-example a:hover,
.list-detail a.detail-back:hover {
  background-color: #ffffff;
  color: #10627c;
}
/* ~~aタグ共通部分 */

/*  list aタグ右寄せ、固定幅 */
#page-list .list-detail-example a {
  align-self: flex-end; /* 右寄せ */
  margin-top: 1rem;
}

/* detail aタグ　真ん中 */
#page-detail .detail-list a.detail-back {
  margin: 0 auto;
  width: 15rem;
}

#page-detail .detail-text {
  margin-bottom: 1.5rem; /* gap2remがあるので+0.5 */
  background-color: #f9f9f9; /* 背景色（薄いグレー例） */
  border: 1px solid #dddddd; /* 枠線 */
  padding: 0.5rem 1rem; /* 内側に余白を付けると見やすい */
  border-radius: 1rem;
  line-height: 2; /* 文字の縦間隔を調整 */
}

#page-detail .detail-text p {
  padding: 0.5rem 0;
  margin: 0.5rem;
  white-space: pre-line; /* 改行を反映 */
}

@media (max-width: 1400px) {
  .top-text {
    left: 1rem;
  }
}

@media (max-width: 1024px) {
  /* 画像調整 */
  img {
    max-width: 100%;
    height: auto;
  }

  /* top セクションだけは余白を打ち消す */
  .list-detail-top {
    width: calc(100% + 1rem); /* bodyの左右余白0.5remずつを足す */
    box-sizing: border-box;
    margin: 0 -0.5rem; /* body paddingを相殺 */
    padding: 0;
  }

  .list-detail-top img {
    display: block; /* 下の隙間を消す */
    width: 100%; /* 親要素に幅を合わせる */
    height: 21rem; /* 高さは自動 */
    object-fit: cover; /* アスペクト比を維持しつつ切り抜く */
  }

  .top-text {
    max-height: 100%; /* 画像に合わせて縮小 */
    min-height: 10rem;
  }

  #list-detail-gallery {
    padding: 2rem 0.5rem;
  }

  .list {
    flex-direction: column; /* 横並び → 縦並び */
  }

  .gallery-img,
  .list-detail-example {
    flex: none; /* 1/2 幅指定を解除 */
    width: 100%; /* 全幅にする */
  }

  .gallery-img {
    padding: 1.5rem 0 0.5rem 0; /* 上 1.5rem, 右 0, 下 1rem, 左 0 */
  }

  .list-detail-example {
    height: auto; /* 固定高さを解除して中身に合わせる */
  }

  /* 擬似要素を無効化 */
  .list-detail-example::before {
    display: none;
  }

  /* 直接背景色を設定 */
  .list-detail-example {
    background-color: #f9f9f9;
    height: auto; /* 高さも自動にすると自然に収まる */
    padding: 1rem; /* 余白も調整しておくと良い */
  }

  .list a {
    margin: 0.8rem 0;
  }

  /* detail.html */
  .detail-list .img-list {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
  }
}