/* =========================================================
   SERVICE — 事業内容
   approach.css の余白・文字設定を共有。
   HOME（画像と文の交互）とは組み方を変え、三つを横に並べる。
   ========================================================= */

.service{
  max-width: 1080px;
}

.service .approach-statement{
  margin-bottom: 110px;
}

/* ---- 三つ並び ---- */
.service-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 56px;
  row-gap: 0;
  align-items: start;
}
.service-item{
  min-width: 0;
}
.service-illust{
  margin: 0 0 28px;
  padding: 0 8%;
}
.service-illust img{
  display: block;
  width: 100%;
  height: auto;
}
.service-item h3{
  font-size: 18px;
  line-height: 1.8;
  letter-spacing: 1px;
  margin: 0 0 20px;
  min-height: 3.6em;      /* 二行分の高さを確保し、下端で揃える（一行の見出しも本文との間隔が同じになる） */
  display: flex;
  align-items: flex-end;
}
.service-item p{
  font-size: 15px;
  line-height: 2;
  letter-spacing: 1px;
  margin: 0;
}
.br-pc{ display: inline; }

/* ---- ページ内リンク ---- */
.service-links{
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 96px;
}
.text-link{
  font-family: 'Shippori Mincho B1', serif;
  font-size: 15px;
  letter-spacing: 0.2em;
  color: #4d4946;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 6px 4px 10px;
  border-bottom: 1px solid #4d4946;
  transition: color .3s, border-color .3s, gap .3s;
}
.text-link::after{
  content: '';
  width: 22px;
  height: 1px;
  background: currentColor;
  position: relative;
  transition: width .3s;
}
.text-link:hover{
  color: #8a8683;
  border-color: #8a8683;
}
.text-link:hover::after{ width: 34px; }

/* ---- タブレット ---- */
@media screen and (max-width: 1024px){
  .service .approach-statement{ margin-bottom: 80px; }
  .service-grid{
    grid-template-columns: 1fr;
    row-gap: 72px;
  }
  .service-item{
    display: grid;
    grid-template-columns: 38% 1fr;
    column-gap: 24px;
    align-items: center;
  }
  .service-illust{ grid-row: 1 / span 2; margin: 0; padding: 0; }
  .service-item h3{ min-height: 0; font-size: 17px; margin-bottom: 12px; }
  .br-pc{ display: none; }
  .service-links{ flex-direction: column; align-items: center; gap: 24px; margin-top: 72px; }
}
/* ---- スマホ ---- */
@media screen and (max-width: 600px){
  .service-item{
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
  .service-illust{ grid-row: auto; padding: 0 12%; margin-bottom: 8px; }
  .service-item h3{ font-size: 16px; }
  .service-item p{ font-size: 14px; }
}

/* ---- ワイヤーフレーム ---- */
.service-illust canvas.silq-wire{
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  cursor: pointer;
}