@charset "UTF-8";

/*
 * 開発業務効率化実践講座（AI活用入門）ページ固有のスタイル
 *
 * sobc_style.css を土台にしつつ、本ページ固有の調整をここに置く。
 * すべて .sobc-pAiTraining 配下に限定し、index.html などへ影響させない。
 */

/* --------------------------------------------------------------
 * ヒーロー
 * sobc_style.css の .sobc-sTop は index.html のロゴ2枚（logoEN/logoJA）が
 * 入る前提で height: 594px を取っている。本ページはロゴを置かないため、
 * そのままだと下部に大きな余白ができる。高さを内容に合わせて詰める。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc-sTop {
  height: 440px;
}

/* --------------------------------------------------------------
 * ヘッダーナビ
 * sobc_style.css の height: 8rem は index.html のメニュー2段＋
 * 資料ダウンロードを収める寸法。本ページは4項目1段なので、
 * 帯の下半分が空く。1段ぶん（li 2.5rem ＋ 上下マージン 0.6rem ＋
 * ul のパディング 1.8rem ＝ 4.9rem）に詰める。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc-header {
  height: 5.0rem;
}

/* .sobc-header は position: absolute で流れから外れるため、直後の
 * セクションがナビの下へ潜り込む。index.html が .sobc-sFeatures に
 * padding-top を与えて逃がしているのと同じ処置を、本ページの先頭
 * セクション（#outline）に対して行う。
 * ページ内リンクのオフセット計算（head 内のスクリプト）も、この
 * padding を基準にしている。 */
.sobc-pAiTraining #outline {
  padding-top: 5.5rem;
}

/* --------------------------------------------------------------
 * トップへ戻るリンク
 *
 * index.html では無料版へ誘導する目立つボタン（.sobc-sTop-freeBadge）を
 * ヒーローに置いているが、本ページは講座紹介そのものが主役で、本家サイトへ
 * 送客する意図はない。戻り導線として使えれば足りるので、ナビ帯の左端に
 * 小さな文字リンクとして置く。他のメニュー項目のような白い丸ボタンには
 * しない（押し分ける対象ではなく、ページを離れる導線のため）。
 * -------------------------------------------------------------- */
/* sobc_style.css の .sobc-header-menu は 900px 固定で、10rem のメニュー項目
 * 5つ分ちょうど。本ページは「トップへ」を足して6項目になり1段に収まらない。
 * ナビ幅を広げると、1200px 未満のウィンドウで右端の「資料ダウンロード」が
 * 画面外に出る位置が早まる（ページ自体が 1200px 固定幅のため、狭い画面では
 * もともと横スクロールになる）。枠を広げるのではなく1項目あたりを詰めて、
 * 見切れ始める幅を変更前と同じに保つ。最長の「資料ダウンロード」8文字は
 * 0.9rem 基準で約115px なので 8.5rem（136px）に収まる。 */
.sobc-pAiTraining .sobc-header-menu li {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 8.5rem;
          flex: 0 0 8.5rem;
  min-width: 8.5rem;
}
.sobc-pAiTraining .sobc-header-menu li.sobc-header-menu__back {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  min-width: 0;
  background: none;
}
.sobc-pAiTraining .sobc-header-menu li.sobc-header-menu__back:hover {
  -webkit-box-shadow: none;
          box-shadow: none;
}
.sobc-pAiTraining .sobc-header-menu li.sobc-header-menu__back a {
  color: #FFF;
  font-size: 0.85rem;
  font-weight: normal;
  text-decoration: underline;
}

/* --------------------------------------------------------------
 * 本文幅
 * sobc_style.css の .sobc-section__body は 900px 固定。index.html は
 * 4列表なので収まるが、本ページのカリキュラム表は5列あり、900px では
 * 折り返しが増えて読みづらい。セクション幅 1200px の内側で目一杯まで
 * 広げる。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc-section__body {
  width: 1120px;
}

/* --------------------------------------------------------------
 * 文字サイズ
 *
 * sobc_style.css の既定は表本文 1.1rem・表の見出し行 16px で、
 * 見出し行のほうが本文より小さいという逆転がある。本ページは読み物と
 * いうより仕様表なので、本文・見出し行とも 1.2rem に揃える。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc-sCourses-table table tbody,
.sobc-pAiTraining .sobc-listTable thead tr th {
  font-size: 1.2rem;
}
.sobc-pAiTraining .sobc-sCourses-note__title {
  font-size: 1.3rem;
}
.sobc-pAiTraining .sobc-sCourses-note__body {
  font-size: 1.2rem;
  line-height: 1.6em;
}

/* --------------------------------------------------------------
 * 余白
 *
 * セクション間は上下 3.0rem ＋ 見出し下 4.0rem で、表が主体の本ページ
 * では間延びする。セルの左右パディング 0.4em（約7px）は文字がセル端に
 * 近すぎるため広げる。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc-section {
  padding: 2.0rem 0;
}
.sobc-pAiTraining .sobc-section__title {
  margin-bottom: 2.5rem;
}
.sobc-pAiTraining .sobc-listTable thead tr th,
.sobc-pAiTraining .sobc-listTable tbody tr th,
.sobc-pAiTraining .sobc-listTable tbody tr td {
  padding: 0.7em 0.7em;
}
/* カリキュラム表は5列あるため左右だけ詰めて列幅を稼ぐ */
.sobc-pAiTraining .sobc--tblCurriculum thead tr th,
.sobc-pAiTraining .sobc--tblCurriculum tbody tr th,
.sobc-pAiTraining .sobc--tblCurriculum tbody tr td {
  padding: 0.7em 0.6em;
}

/* セル内の箇条書き。行頭記号のぶんだけ字下げし、行間を本文に合わせる */
.sobc-pAiTraining .sobc-sCourses-table table tbody tr td ul,
.sobc-pAiTraining .sobc-sCourses-table table tbody tr td ol {
  margin: 0;
  padding-left: 1.3em;
  line-height: 1.5em;
}
.sobc-pAiTraining .sobc-sCourses-table table tbody tr td li + li {
  margin-top: 0.3em;
}

/* 注記ボックスは既定で中央寄せ（align-self: center）になり、表と左端が
 * 揃わない。表と同じ幅に揃える。 */
.sobc-pAiTraining .sobc-sCourses-note {
  -ms-flex-item-align: stretch;
      align-self: stretch;
  margin: 0.5rem 0 0;
  padding: 1.2rem 1.5rem;
}

/* --------------------------------------------------------------
 * お問い合わせ枠の幅
 * sobc_style.css は min-width: 900px ＋ max-width: 90vw ＋ margin: 0 2rem
 * で、本ページの本文幅 1120px（表・注記）と左右が揃わず左に寄る。
 * 印刷では vw が用紙幅になるため 90vw が 900px を下回り、min-width が
 * 効いて 900px まで縮む。本文と同じ幅に固定して端を揃える。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc-sContact-info {
  width: 1120px;
  min-width: 0;
  max-width: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------------------
 * 講座概要のリード文
 * -------------------------------------------------------------- */
.sobc-pAiTraining-lead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0 0 3.0rem;
}
.sobc-pAiTraining-lead p {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.9em;
}
.sobc-pAiTraining-lead img {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 150px;
  margin-left: 2.5rem;
}

/* --------------------------------------------------------------
 * 両編共通のセル
 * カリキュラム表で colspan によって結合されている行は、結合そのものでは
 * 「両編に共通の内容」だと伝わりにくい。背景色を変え、先頭にラベルを置く。
 * -------------------------------------------------------------- */
.sobc-pAiTraining .sobc--tblCurriculum tbody tr td.sobc--commonCell {
  background: #DCE9FA;
}
.sobc-pAiTraining-commonTag {
  display: inline-block;
  margin-bottom: 0.5em;
  padding: 0.15em 0.7em;
  background: #2074E4;
  border-radius: 0.3em;
  color: #FFF;
  font-size: 85%;
  font-weight: bold;
  white-space: nowrap;
}

/* --------------------------------------------------------------
 * 表の列幅
 * sobc_style.css の .sobc-sCourses-table は index.html の4列表
 * （プログラム名／内容／標準学習時間／受講生の想定レベル）を前提に
 * th:nth-child(1)=13em, (3)=8em, (4)=12em を固定している。
 * 本ページは列数の異なる表を使うため、表ごとに列幅を上書きする。
 * -------------------------------------------------------------- */

/* 講座概要：項目 / 内容 */
.sobc-pAiTraining .sobc--tblOutline thead tr th:nth-child(1) {
  width: 12em;
}
.sobc-pAiTraining .sobc--tblOutline thead tr th:nth-child(2) {
  width: auto;
}

/* カリキュラム：Day / 科目 / 時間 / ソフトウェアエンジニア編 / ハードウェアエンジニア編
 *
 * 表幅 1120px から列間 48px を引いた 1072px を配分する。em は 1.2rem
 * （＝19.2px）基準、左右パディングは 0.6em ×2 ＝ 23px。
 *   Day     3.3em =  63px … 太字の「合計」2文字が収まる幅
 *   科目   18.5em = 355px … 最長の科目名を1行に収める（下で nowrap 指定）
 *   時間    5.5em = 106px … 合計行の太字「16.0時間」が折り返さない幅
 *   各編    auto  = 274px ×2 … 見出し12文字（230px）が1行に収まる幅
 */
.sobc-pAiTraining .sobc--tblCurriculum thead tr th:nth-child(1) {
  width: 3.3em;
}
.sobc-pAiTraining .sobc--tblCurriculum thead tr th:nth-child(2) {
  width: 18.5em;
}
.sobc-pAiTraining .sobc--tblCurriculum thead tr th:nth-child(3) {
  width: 5.5em;
}
.sobc-pAiTraining .sobc--tblCurriculum thead tr th:nth-child(4),
.sobc-pAiTraining .sobc--tblCurriculum thead tr th:nth-child(5) {
  width: auto;
}
/* 科目名と Day・合計ラベルは途中で折り返さない */
.sobc-pAiTraining .sobc--tblCurriculum tbody tr td:nth-of-type(1),
.sobc-pAiTraining .sobc--tblCurriculum tbody tr th {
  white-space: nowrap;
}

/* 費用：区分 / 金額 / 備考 */
.sobc-pAiTraining .sobc--tblPrice thead tr th:nth-child(1) {
  width: 12em;
}
.sobc-pAiTraining .sobc--tblPrice thead tr th:nth-child(2) {
  width: 13em;
}
.sobc-pAiTraining .sobc--tblPrice thead tr th:nth-child(3) {
  width: auto;
}

/* --------------------------------------------------------------
 * セルの揃え
 *
 * sobc_style.css の既定は thead th が中央、tbody の th / td が左寄せ。
 * 分類や記号のような短い値の列は中央、数値の列は右に寄せる。
 *
 * なお sobc_style.css には
 *   .sobc-sCourses-table table tbody tr:first-child td:nth-of-type(2)
 *     { text-align: center }
 * という指定があり（index.html の「標準学習時間」を中央寄せするためのもの）、
 * 本ページでは1行目の意図しないセルに効いてしまう。以下はいずれも
 * その指定より詳細度を高くして上書きしている。
 * -------------------------------------------------------------- */

/* 合計行を強調 */
.sobc-pAiTraining .sobc-sCourses-table table tbody tr.sobc--totalRow th,
.sobc-pAiTraining .sobc-sCourses-table table tbody tr.sobc--totalRow td {
  font-weight: bold;
}

/* カリキュラム：Day・合計ラベルと時間は中央 */
.sobc-pAiTraining .sobc-sCourses-table table.sobc--tblCurriculum tbody tr th {
  text-align: center;
}
.sobc-pAiTraining .sobc-sCourses-table table.sobc--tblCurriculum tbody tr td:nth-of-type(2) {
  text-align: center;
}

/* 費用：金額は右、備考は左 */
.sobc-pAiTraining .sobc-sCourses-table table.sobc--tblPrice tbody tr td:nth-of-type(1) {
  text-align: right;
}
.sobc-pAiTraining .sobc-sCourses-table table.sobc--tblPrice tbody tr td:nth-of-type(2) {
  text-align: left;
}

/* --------------------------------------------------------------
 * 印刷（PDF出力）
 *
 * 配布用 PDF は A4 縦 2 枚。画面のデザイン（ヒーローの背景画像、
 * 見出しの丸枠、表の配色・字送り・罫線）はそのまま使い、触るのは
 * 縦の余白と改ページ位置だけにする。
 *
 * 寸法の根拠（画面 zoom 1 での実測）:
 *   #top 440 / #outline 1170 / #curriculum 915 / #price 658 /
 *   #contact 354 ＝ 全高 3569px。幅は 1200px 固定。
 * カリキュラムの前で区切ると 1枚目 1610px・2枚目 1959px となり、
 * 2枚目が縮尺の上限を決める。A4 縦・余白 8mm の印刷領域は
 * 194×281mm（約 733×1062px）なので、
 *   幅：1200px → zoom 0.61 まで
 *   2枚目：1959px → zoom 0.54 まで
 * となり高さが先に効く。お問い合わせ周りの余白（3.0rem/2.0rem）を
 * 詰めて 2枚目を約 1880px まで落とし、zoom 0.56 を確保している。
 *
 * zoom・余白・改ページ位置を変えたら、PDF を作り直してページ数が 2 のままか
 * 必ず確認する。生成は必ず次のスクリプトで行うこと。
 *   python tools/build-ai-training-pdf.py
 *
 * msedge へ直接 ai_training.html を渡して印刷してはいけない。相対リンクが
 * file:///C:/Users/<ユーザー名>/... に解決され、配布する PDF のリンク注釈に
 * 社内PCのパスが焼き付く（実際に一度本番へ出してしまった）。スクリプトは
 * <a> の href だけを公開URLへ書き換えたうえで印刷し、生成後にローカルパスが
 * 残っていないかを検査する。
 * -------------------------------------------------------------- */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm;
  }

  /* 表ヘッダの青、「両編共通」タグ、ヒーローの背景画像を印刷する */
  html,
  body {
    height: auto;
    -webkit-print-color-adjust: exact;
          print-color-adjust: exact;
  }

  /* sobc_style.css の html は淡い青の地色を敷いている。画面では
   * 白いカラムを浮かせる役だが、紙では余白と1枚目の下端に色が残って
   * 刷り損ないに見える。用紙は白にする。 */
  html {
    background: #FFF;
  }

  /* 縦の余白だけ詰める（文字サイズ・配色・罫線は画面のまま） */
  .sobc-pAiTraining .sobc-section {
    padding: 1.2rem 0;
  }
  .sobc-pAiTraining .sobc-section__title {
    margin-bottom: 2.0rem;
  }
  /* ヒーローの上余白だけは詰めない。ロゴの margin-top: -2rem を
   * 打ち消しているぶんで、削ると用紙の上端でロゴが切れる。 */
  .sobc-pAiTraining .sobc-sTop {
    padding-top: 2.0rem;
  }
  .sobc-pAiTraining .sobc-sContact-info__header {
    margin-bottom: 1.0rem;
  }
  .sobc-pAiTraining .sobc-sContact-info__message {
    margin-bottom: 1.0rem;
  }

  /* ページ途中までスクロールしてから印刷すると、追従用に付く
   * .sobc--fixed（position: fixed）がそのまま効く。固定要素は
   * 全ページの同じ位置に描かれるため、帯が各ページの上端に重なる。
   * 印刷では本来の位置に戻す。 */
  .sobc-pAiTraining .sobc-header.sobc--fixed {
    position: absolute;
    top: auto;
  }

  /* 紙面では機能しないものは印刷しない。
   * 資料ダウンロードは、この PDF 自体を取得するボタン。
   * トップへは、サイトへ戻るための導線。 */
  .sobc-pAiTraining .sobc-header-menu__download,
  .sobc-pAiTraining .sobc-header-menu__back {
    display: none;
  }

  /* ページ内ジャンプは紙面では効かない。カリキュラムは同じ PDF の2枚目に
   * あるので文章はそのまま残し、リンクの見た目（色）だけ外して本文に戻す。 */
  .sobc-pAiTraining a[data-sobc-jumpTo] {
    padding: 0;
    color: inherit;
    text-decoration: none;
  }

  /* 2枚目のセクションだけ余白を詰める。1枚目は詰めても空きが増える
   * だけなので触らない。2枚目を薄くすると zoom を上げられ、結果として
   * 1枚目の下の空きも減り、文字も大きくなる。 */
  .sobc-pAiTraining #curriculum,
  .sobc-pAiTraining #price,
  .sobc-pAiTraining #contact {
    padding: 0.6rem 0;
  }
  .sobc-pAiTraining #curriculum .sobc-section__title,
  .sobc-pAiTraining #price .sobc-section__title {
    margin-bottom: 1.0rem;
  }
  .sobc-pAiTraining #price .sobc-sCourses-note {
    padding: 0.8rem 1.5rem;
  }
  .sobc-pAiTraining #price .sobc-sCourses-note li + li {
    margin-top: 0.15em;
  }
  .sobc-pAiTraining #contact .sobc-sContact-info__header,
  .sobc-pAiTraining #contact .sobc-sContact-info__message {
    margin-bottom: 0.6rem;
  }

  /* 1枚目＝ヒーロー＋講座概要、2枚目＝カリキュラム以降。
   * ブラウザ任せだと半端な位置で折り返して3枚になる。 */
  .sobc-pAiTraining #curriculum {
         break-before: page;
    page-break-before: always;
  }

  /* 全体の縮尺（A4 縦 2 枚に収まる実測値） */
  body {
    zoom: 0.59;
  }
}