/* =========================
   Works Detail（詳細ページ）
========================= */

.work-detail {
  /* カンプの雰囲気：上にうっすら背景（画像があるなら差し替え） */
  background: linear-gradient(#f7eaea, #e4c6c6);
  padding: 0 0 80px;
  /* PC共通の section padding を使わず、ここで管理 */
}

/* タイトルエリア（背景の上） */
.work-detail__header {
  /* 画面いっぱいに広げる */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  /* 背景を全面に敷く */
  background-image: url("../img/detail_topback.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  margin-bottom: 80px;
  padding: 0;
}

.work-detail__title {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.25;
  margin-bottom: 6px;
}

.work-detail__subtitle {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.4;
  opacity: 0.95;
}

/* 白カード */
.work-detail-card {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  max-width: 1280px; /* ← カンプの横幅 */
  margin: 0 auto;
}

.work-detail-card__heading {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 18px; /* 「制作概要」下の余白 */
}

/* 画像 */
.work-detail-card__mockup {
  /* 画像の上下余白：カンプ寄せ。詰めたいならここを調整 */
  max-width: 750px;
  margin: 0 auto 48px;
}

.work-detail-card__mockup img {
  width: 100%;
  height: auto;
  display: block;
}

/* 下の2カラム */
.work-detail-card__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 115px;
  padding: 0 130px;
  align-items: stretch;
}

.work-detail-card__col {
  display: flex;
  flex-direction: column;
  gap: 12px; /* label と本文の間 */
  height: 100%;
}

.work-detail-card__label {
  font-size: 20px;
  font-weight: 700;
  min-height: 1em;
  margin: 0;
}

.work-detail-card__text {
  font-size: 18px;
  line-height: 1.9;
  margin: 0;
}

/* 連続する段落の間だけ余白をつける */
.work-detail-card__text + .work-detail-card__text {
  margin-top: 12px; /* カンプの段落間 */
}

.work-detail-card__text .text-block {
  display: block;
  margin-bottom: 12px;
}

.work-detail-card__text .text-block:last-child {
  margin-bottom: 0;
}

.work-detail-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 18px;
  line-height: 1.9;
}

.work-detail-card__list li span {
  font-weight: 500;
}

/* =========================
   SP（1080px以下）
========================= */
@media (max-width: 1080px) {
  .work-detail {
    padding: 0 0 40px;
  }

  /* --- ヘッダー（SP：上部に横一枚の背景） --- */
  .work-detail__header {
    height: 140px; /* ←背景画像の高さに合わせる */
    min-height: auto;
    margin-bottom: 40px;

    background-image: url("../img/SP_800×320.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% auto; /* ←引き伸ばさない */

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /* 以前の疑似要素は無効化（残っていても影響しないように） */
  .work-detail__header::before,
  .work-detail__header::after {
    content: none;
  }

  .work-detail__title {
    font-size: 20px;
  }

  .work-detail__subtitle {
    font-size: 12px;
  }

  /* --- カード --- */
  .work-detail-card {
    padding: 30px 20px 40px;
    border-radius: 16px;
  }

  .work-detail-card__heading {
    margin-bottom: 0px;
    font-size: 24px;
  }

  .work-detail-card__mockup {
    margin-bottom: 16px;
  }

  .work-detail-card__cols {
    grid-template-columns: 1fr; /* 縦積み */
    gap: 25px;
    padding: 0;
  }
  .work-detail-card__col {
    gap: 5px; /* label と本文の間 */
  }
  .work-detail-card__text .text-block {
    margin-bottom: 5px;
  }
}