@charset "UTF-8";
/* ==========================================================================
   gi-hero.css ─ 攻めの事業3ページ共通のヒーロー（2026年9月16日）
   読み込むページ：si/ webdesign/ ai/ の index.html
   白地の左右分割。左に見出しと説明、右に写真を画面の右端まで伸ばす。
   トップのカード（明るい灰色の地に白いカード）から移ったときに色が急に変わらないよう、
   地は白のまま、見出しの大きさと写真の広がりで強さを出す。
   パンくずはヒーローの中に入れ、左上に空きを作らない。

   ・色や大きさを3ページまとめて変えるときは、このファイルだけを直す
   ・文面や写真は各ページの HTML の <section class="hx"> の中で直す
   ・写真はトップのカードと同じものにそろえる（カードが広がって見えるように）
   ・写真の右側（hx__visual）は、次の3種類がある
       hx__visual--photo  写真1枚を右半分いっぱいに敷く（AI・DX支援、AIセミナー）
       hx__visual--shots  制作実績の画面2枚をずらして重ねる（ホームページ制作）
       hx__person         写真の左下に重ねる担当者のカード（AI・DX支援）
   ========================================================================== */

/* 骨組み：本文の左端はヘッダーのロゴにそろえ、写真だけ画面の右端まで伸ばす */
.hx {
  --hx-red: #d9231e;
  display: grid; overflow: hidden;
  grid-template-columns: [full-start] minmax(var(--gi-gutter), 1fr) [content-start] minmax(0, 590px) [mid] minmax(0, 490px) [content-end] minmax(var(--gi-gutter), 1fr) [full-end];
  background: #fff; color: var(--gi-text);
  border-bottom: 1px solid var(--gi-line-soft);
}

/* 左：文字 */
.hx__copy { grid-column: content-start / mid; display: flex; flex-direction: column; min-width: 0; padding: 0 56px 60px 0; }
/* パンくずの上下の余白は、会社情報・お問い合わせと同じ見え方にそろえる（上10px、下はPC 20px／スマホ 14px） */
.hx__crumb { margin: 0 0 20px; padding: 10px 0 0; color: var(--gi-sub); font-size: 12px; }
.hx__crumb a { text-decoration: underline; }
.hx__label { display: flex; align-items: center; gap: 12px; margin: 0; color: var(--gi-navy); font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.hx__label::before { content: ""; flex: 0 0 32px; height: 3px; background: var(--hx-red); }
.hx h1 { margin: 18px 0 0; color: var(--gi-navy); font-size: clamp(34px, 3.9vw, 52px); font-weight: 700; line-height: 1.38; letter-spacing: .01em; }
.hx__phrase { display: inline-block; max-width: 100%; }
.hx__lead { margin: 24px 0 0; max-width: 34em; font-size: 16px; line-height: 1.95; }
.hx__side { margin: 22px 0 0; }
/* 補足の一文をボタンの下に回す */
.hx__side--after { order: 9; margin-top: 30px; }
.hx__note { margin: 0; padding-left: 16px; border-left: 2px solid var(--hx-red); color: var(--gi-sub); font-size: 14px; line-height: 1.9; }
.hx__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin: 30px 0 0; }
.hx .hx__btn { margin: 0; padding: 15px 26px; background: var(--hx-red); border: 1px solid var(--hx-red); color: #fff; font-size: 15px; }
.hx .hx__btn:hover { background: #b51b17; border-color: #b51b17; color: #fff; text-decoration: none; }
.hx__link { color: var(--gi-navy); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }

/* AIセミナーの日程と料金 */
.hx__schedule { margin: 0; color: var(--gi-navy); font-size: 19px; font-weight: 700; }
.hx__place { margin: 2px 0 12px; color: var(--gi-sub); font-size: 14px; }
.hx__fees { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 0; }
.hx__fees div { display: flex; align-items: baseline; gap: 10px; }
.hx__fees dt { color: var(--gi-sub); font-size: 14px; }
.hx__fees dd { margin: 0; color: var(--gi-navy); }
.hx__fees strong { font-size: 30px; letter-spacing: .01em; }
.hx__small { margin: 4px 0 0; color: var(--gi-sub); font-size: 13px; }

/* 右：写真。左上に赤い縦線 */
.hx__visual { grid-column: mid / full-end; position: relative; min-width: 0; min-height: 540px; margin: 0; }
.hx__visual::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; width: 6px; height: 120px; background: var(--hx-red); }
.hx .hx__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.hx__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 24px 14px; background: linear-gradient(transparent, rgba(8, 20, 36, .72)); color: #fff; font-size: 12px; }

/* 担当者のカード */
.hx__person { position: absolute; left: 0; bottom: 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; margin: 0; padding: 18px 24px 18px 20px; border-top: 3px solid var(--gi-navy); background: #fff; color: var(--gi-text); }
.hx .hx__person img { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; }
.hx__person p { margin: 0; }
.hx__person-role { color: var(--gi-sub); font-size: 12px; }
.hx__person-name { color: var(--gi-navy); font-size: 18px; font-weight: 700; line-height: 1.5; }
.hx__person-name span { display: block; font-size: 12px; font-weight: 400; }
.hx__person .hx__link { font-size: 13px; white-space: nowrap; }

/* 制作実績の画面2枚 */
.hx__visual--shots { display: flex; flex-direction: column; justify-content: center; padding: 56px 0 56px 48px; background: #eef2f6; }
.hx__visual--shots figure { margin: 0; }
.hx__visual--shots figure:first-child { display: flex; flex-direction: column-reverse; width: 100%; }
.hx__visual--shots figure:last-child { position: relative; width: 72%; margin: -14% 0 0 -8%; }
.hx__visual--shots a { display: block; border: 1px solid var(--gi-line); background: #fff; }
.hx__visual--shots img { display: block; width: 100%; height: auto; }
.hx__visual--shots figcaption { margin: 6px 0 0; color: var(--gi-sub); font-size: 12px; }
.hx__visual--shots figure:first-child figcaption { margin: 0 0 6px; }

/* タブレット */
@media (max-width: 1023px) {
  .hx__copy { padding-right: 32px; }
  .hx h1 { font-size: 34px; }
  .hx__person { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 16px; }
  .hx .hx__person img { width: 56px; height: 56px; }
}

/* スマホ：文字 → 写真の順に縦へ積む */
@media (max-width: 767px) {
  .hx { grid-template-columns: [full-start] var(--gi-gutter) [content-start mid] minmax(0, 1fr) [content-end] var(--gi-gutter) [full-end]; }
  .hx__copy { grid-column: content-start / content-end; padding: 0 0 36px; }
  .hx__crumb { margin-bottom: 14px; }
  .hx h1 { font-size: clamp(28px, 7.4vw, 36px); }
  .hx__lead { font-size: 15px; }
  .hx__actions { flex-direction: column; align-items: stretch; gap: 14px; }
  .hx__actions .hx__link { align-self: flex-start; }
  .hx .hx__btn { text-align: center; }
  .hx__visual { grid-column: full-start / full-end; min-height: 0; }
  .hx__visual::before { width: 5px; height: 64px; }
  .hx .hx__photo { position: static; height: auto; aspect-ratio: 3 / 2; }
  .hx__visual--photo:has(.hx__person) { padding-bottom: 20px; }
  .hx__person { position: relative; margin: -28px var(--gi-gutter) 0; border: 1px solid var(--gi-line-soft); border-top: 3px solid var(--gi-navy); }
  .hx__visual--shots { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 24px var(--gi-gutter); }
  .hx__visual--shots figure:first-child, .hx__visual--shots figure:last-child { display: block; width: auto; margin: 0; }
  .hx__visual--shots figure:first-child figcaption { margin: 6px 0 0; }
}