@charset "UTF-8";
/* CSS Document */

/* =================================================
   WORKS GRID COMPLETE STYLESHEET
   ・横はみ出し完全防止
   ・画像は必ず枠内フィット
   ・明朝タイトル（モバイル改行最適化）
   ・建築会社向け上品ミニマル設計
================================================= */


/* ---------- 横スクロール完全防止 ---------- */
html, body{
  overflow-x: hidden;
}


/* ---------- グリッド全体 ---------- */
.hw-grid{
  width:100%;
  max-width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
  box-sizing:border-box;
}


/* ---------- カード ---------- */
.hw-card{
  display:block;
  text-decoration:none;
  color:#1a1a1a;
  transition:transform .5s ease;
}

.hw-card:hover{
  transform:translateY(-6px);
}


/* ---------- サムネイル枠 ---------- */
.hw-thumb{
  position:relative;
  width:100%;
  aspect-ratio:4 / 3;
  border-radius:22px;
  overflow:hidden;
  background:#f4f4f4;
  box-sizing:border-box;
}


/* ---------- 画像（確実に枠フィット） ---------- */
.hw-thumb img,
.hw-img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  display:block !important;
  object-fit:cover !important;
  object-position:center !important;
  transition:transform .8s ease;
}

.hw-card:hover .hw-thumb img{
  transform:scale(1.04);
}


/* ---------- 画像なし時 ---------- */
.hw-placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#ececec,#dddddd);
}


/* ---------- タイトル（明朝・2行制限） ---------- */
.hw-title{
  margin:18px 6px 0;
  font-family:"Noto Serif JP","Yu Mincho","Hiragino Mincho ProN","游明朝",serif;
  font-weight:300;
  font-size:17px;
  line-height:1.7;
  letter-spacing:0.08em;
  color:#2a2a2a;

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;

  white-space:normal;
  word-break:keep-all;
  line-break:strict;
  overflow-wrap:anywhere;
  box-sizing:border-box;
}


/* ---------- Tablet ---------- */
@media (max-width:1024px){

  .hw-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:26px;
  }

  .hw-title{
    font-size:18px;
  }

}


/* ---------- Mobile ---------- */
@media (max-width:600px){

  .hw-grid{
    grid-template-columns:1fr;
    gap:24px;
    padding-left:18px;
    padding-right:18px;
  }

  .hw-thumb{
    border-radius:18px;
  }

  .hw-title{
    font-size:clamp(17px,4.5vw,20px);
    line-height:1.8;
    letter-spacing:0.07em;
    margin-top:20px;
  }

}


/* ---------- 超小型端末 ---------- */
@media (max-width:380px){

  .hw-grid{
    padding-left:14px;
    padding-right:14px;
  }

  .hw-title{
    font-size:16px;
  }

}


/* ---------------------------
   会社概要
---------------------------- */
.company-profile {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 20px;
}

.company-profile__title {
  font-size: clamp(18px, 2.2vw, 24px);
  letter-spacing: 0.08em;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid #e5e7eb;
}

.company-profile__dl {
  margin: 0;
}

.company-profile__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid #f1f3f5;
}

.company-profile__row dt {
  font-weight: 600;
  color: #111;
  letter-spacing: 0.04em;
}

.company-profile__row dd {
  margin: 0;
  color: #333;
  line-height: 1.9;
}

.company-profile__row a {
  color: #111;
  text-decoration: none;
  border-bottom: 1px solid rgba(17,17,17,0.2);
}

.company-profile__row a:hover {
  border-bottom-color: rgba(17,17,17,0.6);
}

@media (max-width: 768px) {
  .company-profile {
    padding: 28px 16px;
  }

  .company-profile__row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 12px 0;
  }

  .company-profile__row dt {
    font-size: 13px;
    color: #555;
  }

  .company-profile__row dd {
    font-size: 14px;
  }
}