/* technology.css — Technology（技術戦略）ページ（現行 Figma 25:572 準拠）
   構成: Hero(Technology Strategy) → Technology Team Vision(技術の先の感動)
        → Our Technology(製品/事例22件・テキスト左＋画像右) → Blog帯 → Contact帯。
   フォント（Figma実測）:
     タイトル Yu Mincho Medium 96, Visionラベル Yu Mincho Medium 20(黒),
     Vision見出し Yu Mincho Demibold 48/64, Vision本文 Yu Mincho Medium 20/35(黒),
     セクション見出し Yu Mincho Medium 48/64, 事例見出し Yu Mincho Demibold 32/48,
     事例本文 Inter Regular 14/28, Read Me Inter 14/28(矢印=accent),
     Blog見出し Georgia Regular 48/64, Contact見出し Yu Mincho 48 / リンク Yu Mincho 32。
   画像はすべて Figma 実画像（images エンドポイントの imageRef→URL を DL→WebP化）→ /assets/img/tech/tech01〜22.webp（Figma順）。 */

/* 帯幅は common.css の .l-Section__inner=1280（全ページ統一・2026-06-25 デザイナー指示「全ページ1440px」）。
   旧 technology だけ 1280 の scoped 上書きは廃止（global 1280 に吸収）。 */

/* ---------- Hero ---------- */
/* タイトル帯は inner.css の .c-PageHero ＋ .c-PageHero--alt に一本化＝ここでは再定義しない
   （HTML hero に c-PageHero--alt を付与）。 */
body[data-page="technology"] .c-PageHero__titleSub {
  margin: 20px 0 0;
  /* titleSub も Mincho（他ページ titleSub と統一） */
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--ink);
}

/* ---------- Technology Team Vision ---------- */
.c-TechVision { padding-top: clamp(36px, 5vw, 64px); background: var(--paper-alt); }

.c-TechVision__label {
  /* Figma: ラベル行(20px)の直下に分割ブロック＝gap≈0。旧 clamp(28,48) は離れすぎ→16pxに是正。 */
  margin: 0 0 16px;
  font-family: var(--font-mincho);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
}

.c-TechVision__split {
  /* Figma Frame84(127:897) 1280×595: 左 h2列577 / 右 本文列703・gap=0（577+703=1280・隙間ゼロ／右列は x=577 起点）。
     旧実装は 0.82fr:1fr＋gap clamp(24,48) で比率は合うが gap が両列を食い、本文列が ~677px＝Figma703 比
     約23px（20px本文の約1文字）短かった。gap:0＋厳密比 577:703 で右テキストボックスの位置と幅を是正。 */
  display: grid;
  grid-template-columns: 577fr 703fr;
  gap: 0;
  align-items: start;
}

.c-TechVision__h2 {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink);
}

.c-TechVision__body {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
}
.c-TechVision__body p { margin: 0 0 1.75em; }
.c-TechVision__body p:last-child { margin-bottom: 0; }

/* ---------- Our Technology（事例ショーケース） ---------- */
.c-TechSectionTitle {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-family: var(--font-mincho);
  font-size: clamp(34px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink);
}

.l-TechCases {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  /* Figma: トピック帯は "Our Technology" 見出しより40px追加インデント（x=80+40=120） */
  padding-left: clamp(20px, 2.78vw, 40px);
}

.c-TechCase {
  /* Figma: l-TechCases幅1240px（1280-40indent）内に text497 / gap23 / image720。
     両列を fr比(497:720)にして 1440未満で左右とも比例縮小させる（旧 1fr/720px固定では左だけ縮み
     画像が720pxのまま残る症状＝トップ .c-HomeBand と同様に両列可変へ。2026-07-07 デザイナー指定）。
     1440時は available1217 を 497:720 で割り text497/image720＝従来と同一。≤880 は下で縦積み。 */
  display: grid;
  grid-template-columns: minmax(0, 497fr) minmax(0, 720fr);
  gap: clamp(16px, 1.6vw, 23px);
  align-items: start;
}

.c-TechCase__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  min-width: 0;
}

.c-TechCase__title {
  margin: 0;
  font-family: var(--font-mincho);
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
}

.c-TechCase__desc {
  margin: 0;
  /* 本文 canonical＝YuMincho 16/500/28（研究 Figma 実測 2026-07-06。旧 sans14/400 は取りこぼし） */
  font-family: var(--font-mincho);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--ink);
  max-width: 440px; /* Figma 本文ボックス幅440（旧392→是正） */
}

.c-TechCase__read {
  display: inline-block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  color: var(--ink);
  text-decoration: none;
}
.c-TechCase__read .c-TechCase__arrow { margin-left: 2px; color: var(--accent); }
a.c-TechCase__read:hover { color: var(--accent); }

.c-TechCase__figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 703 / 389;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background: var(--paper-alt);
}
.c-TechCase__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.c-TechCase__figure--fill img { object-fit: fill; }

/* ---------- Blog 帯（Figma 92:916・確定）----------
   「Blog」見出し＋Tech Blogバナー（→ tech-blog.neural-group.com）。
   バナー列はテキスト列と高さ中央揃え、バナーは記事画像列と同系の右カラム左寄せ。 */
.c-TechBlog__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 703px);
  gap: clamp(24px, 3vw, 40px);
  align-items: center;
}

.c-TechBlog__head {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.c-TechBlog__title {
  margin: 0;
  /* H2統一: 旧 serif-en(Georgia)/400/1.33 → Figma H2(YuMincho/500/lh1.333) */
  font-family: var(--font-mincho);
  font-size: clamp(38px, 4.4vw, 48px);
  font-weight: 500;
  line-height: 1.333;
  color: var(--ink);
}

.c-TechBlog__list { min-width: 0; }

.c-TechBlog__banner { display: inline-block; line-height: 0; }
.c-TechBlog__banner img {
  display: block;
  width: 315px;
  max-width: 100%;
  height: auto;
}
.c-TechBlog__banner:hover { opacity: 0.88; }

/* Contact 帯は inner.css の共通コンポーネント .c-ContactBand に統合（旧 .c-TechContact* を廃止） */

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px) {
  .c-TechVision__split { grid-template-columns: 1fr; gap: 24px; }
  .l-TechCases { padding-left: 0; }
  .c-TechCase { grid-template-columns: 1fr; gap: 20px; }
  /* 縦積み時は本文をページ幅いっぱいに（desktop の 440px 制限を解除。2026-07-07 デザイナー指定）。 */
  .c-TechCase__desc { max-width: none; }
  .c-TechBlog__layout { grid-template-columns: 1fr; gap: 28px; }
  /* 2026-07-07 デザイナー指定の例外: 縦積み時に2列目（Tech Blog バナー）を中央寄せ。
     1列目「Blog」見出しは left のまま。バナーは画像1点のため折返し/フォント縮小は非該当。 */
  .c-TechBlog__list { text-align: center; }
}