/* ==========================================================================
   スター精機 コーポレートサイト / 製品情報ページ（一覧）

   ★貼る場所に注意
     「外観 > カスタマイズ > 追加CSS」の
     いま入っているもの（star-top.css と star-company.css）は消さずに、
     その一番下に、このファイルの中身を足してください。

     ページのタイトル・パンくずは star-company.css のものをそのまま使います。
     （HTMLの一番外側に class="st-cmp st-prd" と書いてあるため）
     ここでは、タイトルの英字と、製品ラインアップの中身を書いています。
   ========================================================================== */


/* 写真の指定は star-images.css にまとめています（2026-10-02）。写真台帳.md も参照 */

/* タイトルの大きな英字を PRODUCTS に差し替え（大きさ・位置は star-company.css の共通の指定。2026-10-14 から ::before の1か所だけ） */
body:has(.st-prd) .page-header > *:first-child::before{
  content: "PRODUCTS";
}

/* タイトルの右に置いていたタグライン「現場の課題に、最適な一手を。」は、2026-10-14 にやめました
   （タイトルを中央の「英字＋日本語」だけにしたため。同じ言葉はトップの製品の見出しにあります） */


/* ---- 導入文 -------------------------------------------------------------- */
.st-prd .prd-lead{ padding: 54px 0 10px; background: #fff; }
.st-prd .prd-lead__txt{
  max-width: 46em;
  font-size: 15.5px;
  line-height: 2.15;
  font-weight: 500;
  color: #2b2b2b;
  /* 2026-10-14：タイトルを中央にしたので、導入文も中央に。意味のまとまりで折り返し、行の長さをそろえる */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  word-break: auto-phrase;
  text-wrap: balance;
}


/* ---- 製品一覧 ------------------------------------------------------------ */
.st-prd .prd-list{ padding: 44px 0 90px; background: #fff; }
.st-prd .prd-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px 26px;
}
/* WordPressが差し込む余計な要素でレイアウトが崩れないように */
.st-prd .prd-grid > :not(.prd-item),
.st-prd .prd-item > :not(span):not(img){ display: none !important; }

.st-prd .prd-item{
  display: block;
  position: relative;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.st-prd .prd-item__photo{
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  background-color: #eceeed;
  margin-bottom: 18px;
}
.st-prd .prd-item__body{ display: block; }
.st-prd .prd-item__en{
  display: block;
  font-size: 11px;
  letter-spacing: .12em;
  font-weight: 600;
  color: #9a9a9a;
  margin-bottom: 4px;
}
.st-prd .prd-item__jp{
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 10px;
}
.st-prd .prd-item__txt{
  display: block;
  font-size: 13.5px;
  line-height: 1.95;
  color: var(--ink-soft);
  font-weight: 500;
  margin-bottom: 16px;
}
.st-prd .prd-item__more{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.st-prd .prd-item__ar{
  color: var(--red);
  font-size: 16px;
  transition: transform .25s ease;
}
.st-prd .prd-item:hover .prd-item__ar{ transform: translateX(6px); }
.st-prd .prd-item:hover .prd-item__jp{ color: var(--red); }


/* ---- 下部の問い合わせ導線 -------------------------------------------------
   薄い帯を画面の左右いっぱいまで伸ばしています。
   中身は他のページと同じ1180pxで中央に置いたままです。

   ★沿革ページの導線と同じ形にそろえてあります。
     幅を変えるときは --st-wrap の数字だけ動かしてください。
   -------------------------------------------------------------------------- */
.st-prd .prd-contact{
  --st-wrap: 1180px;
  background: #f6f7f7;
  /* いったん画面いっぱいに広げてから、左右の余白で中身を中央に寄せています */
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 58px max(24px, calc((100vw - var(--st-wrap)) / 2)) 62px;
}
.st-prd .prd-contact__inner{
  /* 外側で幅を決めているので、こちらの幅指定は外します */
  width: auto;
  max-width: none;
  display: flex;
  align-items: center;
  /* 2026-10-14：左右に分けず、文とボタンの組ごと中央に */
  justify-content: center;
  gap: 24px 56px;
  flex-wrap: wrap;
}
.st-prd .prd-contact__lead{
  font-size: 15px;
  line-height: 2;
  font-weight: 600;
  color: var(--ink);
}
.st-prd .prd-contact__btn{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-width: 250px;
  padding: 17px 24px;
  border: 1px solid var(--ink);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: none;
  transition: background .22s ease, color .22s ease;
}
/* 乗せたとき：黒の塗りつぶしは強いので、薄いグレーの面に。矢印が少し右へ（2026-10-14） */
.st-prd .prd-contact__btn:hover{ background: #f1f2f3; }
.st-prd .prd-contact__btn .ar{ transition: transform .22s ease; }
.st-prd .prd-contact__btn:hover .ar{ transform: translateX(4px); }
.st-prd .prd-contact__btn .ar{ color: var(--red); font-size: 16px; }


/* ---- スマホ・タブレット --------------------------------------------------- */
@media (max-width: 1000px){
  .st-prd .prd-grid{ grid-template-columns: repeat(2, 1fr); gap: 40px 22px; }
}

@media (max-width: 620px){
  .st-prd .prd-lead{ padding: 40px 0 6px; }
  .st-prd .prd-list{ padding: 32px 0 64px; }
  .st-prd .prd-grid{ grid-template-columns: 1fr; gap: 34px; }
  .st-prd .prd-contact{
    padding: 44px max(16px, calc((100vw - var(--st-wrap)) / 2)) 48px;
  }
  .st-prd .prd-contact__inner{ flex-direction: column; align-items: stretch; gap: 24px; }
  .st-prd .prd-contact__lead{ text-align: center; }
  .st-prd .prd-contact__btn{ width: 100%; }
}