@charset "utf-8";

/* ==========================================================================
   works.css
   実績紹介ページ専用スタイル
   ------------------------------------------------------------------------
   ※1rem = 10px（reset.css の html { font-size: 62.5%; } 前提）
   ※タイトルセクション・パンくずの共通スタイルは common.css の
     「12. 下層ページ共通パーツ」、ページャー（.c-pager）は
     「13. ページャー」にあります。
     ここではタイトルセクションの背景画像だけ指定します。
   ========================================================================== */

/* ==========================================================================
   1. タイトルセクション
   ========================================================================== */
.c-pagetitle--works {
  background-image: url("/assets/img/works/title_bgimg_works.jpg");
}

/* ==========================================================================
   2. 施工実績一覧ダウンロード
   ------------------------------------------------------------------------
   ボックスの中身は common.css の「14. PDFダウンロード」
   ========================================================================== */
/* 次のセクションとの余白はmarginで一本化（padding+marginの合算を避ける） */
.p-worksdl {
  margin-bottom: 7.2rem;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-worksdl {
    margin-bottom: 4rem;
  }

  /* 背景の水色を画面全幅の帯にする。全幅表示なので角丸は付けない */
  .p-worksdl__box {
    background-color: var(--color-bg-blue);
  }

  .p-worksdl .c-pdfdl__inner {
    padding: 2.4rem 0;
    border-radius: 0;
    background-color: transparent;
  }
}

/* ==========================================================================
   3. 施工実績
   ========================================================================== */
/* 次のセクション（CONTACT）との余白はmarginで一本化 */
.p-workslist {
  margin-bottom: 14.4rem;
}

.p-workslist__list {
  display: grid;
  gap: 3.2rem;
}

.p-workslist__item {
  display: grid;
  grid-template-columns: 37.5rem 1fr;
  align-items: start;
  column-gap: 3.2rem;
  padding: 4.5rem 4.8rem;
  border-radius: 10px;
  background-color: var(--color-bg-beige);
}

/* 支給画像は4:3（img_works05のみ1000×878）なので、枠に合わせて切り抜く */
.p-workslist__img img {
  width: 100%;
  height: 28.5rem;
  object-fit: cover;
  border-radius: 10px;
}

/* 画像未登録のダミーは背景が水色の面だけなので、外周に枠線を付けて画像枠と分かるようにする */
.p-workslist__img--noimage img {
  border: 1px solid var(--color-border-blue);
}

.p-workslist__title {
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-main);
}

.p-workslist__data {
  display: grid;
  row-gap: 2rem;
  margin-top: 2.4rem;
}

.p-workslist__row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  column-gap: 3.6rem;
  line-height: 1.6;
}

/* 項目名は値と区別するためメインカラー＋太字（会社案内の .p-outline__label と同じ見せ方） */
.p-workslist__label {
  color: var(--color-main);
  font-weight: 700;
}

/* ------------------------------ タブレット・SP ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-workslist {
    margin-bottom: 8rem;
  }

  .p-workslist__list {
    gap: 2.4rem;
  }

  .p-workslist__item {
    grid-template-columns: 1fr;
    padding: 2.4rem;
  }

  /* 幅いっぱいに広げ、高さは4:3で確保する */
  .p-workslist__img img {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .p-workslist__body {
    margin-top: 2.4rem;
  }

  .p-workslist__title {
    font-size: 2rem;
    line-height: 1.5;
  }

  .p-workslist__data {
    row-gap: 1.6rem;
  }

  /* ラベルと値を縦に積む */
  .p-workslist__row {
    grid-template-columns: 1fr;
    line-height: 2;
  }
}