@charset "UTF-8";
/*
 * AI研修のページ(/ai-training/)だけで読み込む CSS(2026-10 フェーズ1。作業指示 SR-20261023-02)
 *
 * - functions.php の labo87_ai_training_assets() が、is_page('ai-training') のときだけ、
 *   assets/css/style.css の後に読み込む。style.css は変えない。
 * - 指定は、すべて .p-ai-training から始める(ほかのページに影響しないように)。
 * - セクションの上下の余白(.p-section)は変えない。
 * - 切り替えの幅は、今の style.css と同じ(520・768・960・1280・1920px)だけを使う。
 * - 同じ並びの枠は、高さをそろえる(社長指示)。高さを数字で決め打ちせず、grid で
 *   いちばん高い枠にそろえる(grid-auto-rows: 1fr)。1列に積むときも、同じ並びの中でそろえる。
 * - 色:文字 #292929、紺 #182957、ピンク #DA005C、クリーム #FFF0BF、流れの枠線 #D9DBE5
 */

/* ===== 共通 ===== */
/* このページで新しく作った部品は、幅・高さに枠線と内側の余白を含める(今のページでは content-box になっている要素があるため) */
.p-ai-training [class*="p-ai-training-"],
.p-ai-training [class*="p-ai-training__"] {
  box-sizing: border-box;
}

.p-ai-training .p-ai-training__header {
  margin-bottom: 24px;
}

.p-ai-training .p-ai-training__lead {
  margin-bottom: 24px;
  text-align: center;
}

/* 注意書き(料金の下・助成金の節で同じもの) */
.p-ai-training .p-ai-training__notes {
  border: 1px solid #DA005C;
  border-radius: 8px;
  display: grid;
  font-size: 1.4rem;
  gap: 8px;
  padding: 20px 16px;
}

/* VOICE の写真の下の名前 */
.p-ai-training .p-ai-training__photo-label {
  font-size: 1.3rem;
  margin-top: 8px;
}

/* ===== 取り込んだ部品の高さをそろえる(見た目は今のテーマのまま) ===== */

/* TROUBLE(お悩み4つ):今の部品は高さが数字(98px/154px)のため、文章が増えてもはみ出さないよう最小の高さに置きかえる */
.p-ai-training .p-service-solution__list {
  grid-auto-rows: 1fr;
}

.p-ai-training .p-service-solution__item {
  height: auto;
  min-height: 98px;
}

/* STYLE(帯5本) */
.p-ai-training .p-service-consulting__list {
  grid-auto-rows: 1fr;
}

.p-ai-training .p-service-consulting__item {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* STEP(4枚) */
.p-ai-training .p-service-case__grid {
  grid-auto-rows: 1fr;
}

/* STEP の下の相談のリンク(原稿 v9 5章。4枚の下、上の余白 40px・中央) */
.p-ai-training .p-ai-training-step__link {
  margin-top: 40px;
}

/* ===== PRICE ===== */
/* 料金カード・注意書き・勉強会とお試しの3つの並びを、同じコンテナの幅(PC 968px)に入れて左右の端をそろえる */
.p-ai-training .p-ai-training-price__wrap {
  margin-left: auto;
  margin-right: auto;
  max-width: 968px;
}

.p-ai-training .p-ai-training-price__cards {
  display: grid;
  gap: 24px;
  grid-auto-rows: 1fr;
  margin-bottom: 24px;
}

.p-ai-training .p-ai-training-price__card {
  background-color: #ffffff;
  border: 2px solid #182957;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.p-ai-training .p-ai-training-price__name {
  background-color: #182957;
  color: #ffffff;
  font-size: 1.8rem;
  padding: 16px;
  text-align: center;
}

.p-ai-training .p-ai-training-price__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 20px 16px;
}

.p-ai-training .p-ai-training-price__text {
  font-size: 1.5rem;
  margin-bottom: 24px;
}

.p-ai-training .p-ai-training-price__amount {
  margin-bottom: 16px;
  text-align: center;
}

.p-ai-training .p-ai-training-price__per {
  font-size: 1.4rem;
}

/* 定価。「実質」の額(下の __net)より大きくする(原稿 v4 7章の申し送り) */
.p-ai-training .p-ai-training-price__price {
  color: #182957;
  font-size: 2.6rem;
  font-weight: bold;
  line-height: 1.3;
}

.p-ai-training .p-ai-training-price__breakdown {
  font-size: 1.3rem;
  margin-top: 4px;
}

/* 「実質」の額の箱。カードの下にそろえる(2枚で同じ位置) */
.p-ai-training .p-ai-training-price__net {
  background-color: #FFF0BF;
  border-radius: 6px;
  font-size: 1.4rem;
  font-weight: bold;
  margin-top: auto;
  padding: 12px;
  text-align: center;
}

.p-ai-training .p-ai-training-price__more {
  display: grid;
  gap: 24px;
  grid-auto-rows: 1fr;
  margin-top: 40px;
}

.p-ai-training .p-ai-training-price__box {
  background-color: #FFF0BF;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

/* 枠の中のリンク:クリームの上のため濃いピンク #C2004F(約5.4:1。原稿 v9 6-1、ナビ・導線設計 v1 10章の例外)。枠の下にそろえる */
.p-ai-training .p-ai-training-price__box-link {
  margin-top: auto;
  padding-top: 16px;
}

.p-ai-training .p-ai-training-price__box-link .p-ai-training__textlink {
  color: #C2004F;
}

.p-ai-training .p-ai-training-price__box-title {
  color: #182957;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.p-ai-training .p-ai-training-price__box-list {
  display: grid;
  font-size: 1.5rem;
  gap: 8px;
}

/* ===== SUBSIDY ===== */
.p-ai-training .p-ai-training-subsidy__inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

.p-ai-training .p-ai-training-subsidy__lead {
  color: #182957;
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}

.p-ai-training .p-ai-training-subsidy__text {
  margin-bottom: 16px;
}

.p-ai-training .p-ai-training-subsidy__inner .p-ai-training__notes {
  margin-top: 40px;
}

/* ===== 写真の帯(仮) ===== */
.p-ai-training .p-ai-training-band__media {
  max-width: 900px;
}

.p-ai-training .p-ai-training-band__media img {
  aspect-ratio: 900/320;
  border-radius: 5px;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

/* ===== FLOW ===== */
.p-ai-training .p-ai-training-flow__list {
  display: grid;
  gap: 16px;
  grid-auto-rows: 1fr;
  margin-left: auto;
  margin-right: auto;
  max-width: 968px;
}

/*
 * 流れの枠:Figma 22:63(ステップ 1)の書き出し(監査役 2026-10-24)に合わせる。
 * 縦に並べる(上から 番号 → 見出し)。中身は上寄せにし、番号の札を6つとも枠の左上の同じ位置に置く
 * (差し戻し SR-20261024-01 3-2。同じ段で番号の上端がそろう)。
 * 見出しの寄せは書き出しにないため、仮に左寄せ(番号の札と同じ左端)。
 */
.p-ai-training .p-ai-training-flow__item {
  align-items: flex-start;
  background-color: #ffffff;
  border: 1px solid #D9DBE5;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: flex-start;
  padding: 20px;
  text-align: left;
}

/* 番号の札:角丸4pxの紺の四角(42×27。内側の余白 上下4px・左右12px)。Jost Medium 16px 白 */
.p-ai-training .p-ai-training-flow__number {
  background-color: #182957;
  border-radius: 4px;
  color: #ffffff;
  display: block;
  flex-shrink: 0;
  font-family: "Jost", sans-serif;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.2;
  padding: 4px 12px;
}

/* 見出し:Noto Sans JP Bold 16px #292929。枠の幅いっぱいで折り返す */
.p-ai-training .p-ai-training-flow__text {
  align-self: stretch;
  color: #292929;
  font-size: 1.6rem;
  font-weight: bold;
}

.p-ai-training .p-ai-training-flow__note {
  font-size: 1.5rem;
  margin-top: 24px;
  text-align: center;
}

.p-ai-training .p-ai-training-flow__link {
  margin-top: 24px;
}

/* ===== PARTNER ===== */
.p-ai-training .p-ai-training-partner__grid {
  display: grid;
  gap: 24px;
  grid-auto-rows: 1fr;
  margin-left: auto;
  margin-right: auto;
}

/* 研修パートナーの枠を出さないとき:87-labo の枠を中央に1枚(案1) */
.p-ai-training .p-ai-training-partner__grid.is-single {
  max-width: 468px;
}

.p-ai-training .p-ai-training-partner__box {
  border-radius: 8px;
  padding: 20px;
}

.p-ai-training .p-ai-training-partner__box--labo {
  background-color: #FFF0BF;
}

.p-ai-training .p-ai-training-partner__box--partner {
  background-color: #ffffff;
  border: 2px solid #182957;
}

.p-ai-training .p-ai-training-partner__media {
  margin-bottom: 16px;
}

.p-ai-training .p-ai-training-partner__media img {
  aspect-ratio: 412/300;
  border-radius: 6px;
  display: block;
  -o-object-fit: cover;
  object-fit: cover;
}

.p-ai-training .p-ai-training-partner__name {
  color: #182957;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.p-ai-training .p-ai-training-partner__text {
  font-size: 1.5rem;
}

.p-ai-training .p-ai-training-partner__case-title {
  font-weight: bold;
  margin-top: 16px;
}

.p-ai-training .p-ai-training-partner__case-note {
  color: #DA005C;
  font-size: 1.3rem;
  margin-bottom: 12px;
  margin-top: 4px;
}

.p-ai-training .p-ai-training-partner__cases {
  display: grid;
  font-size: 1.4rem;
  gap: 8px;
}

/* ===== CONTACT ===== */
.p-ai-training .p-ai-training-contact__box {
  background-color: #182957;
  border-radius: 12px;
  color: #ffffff;
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
  padding: 40px 20px;
  text-align: center;
}

.p-ai-training .p-ai-training-contact__box .c-title {
  margin-bottom: 16px;
}

.p-ai-training .p-ai-training-contact__box .c-title--jp {
  color: #ffffff;
  font-weight: bold;
}

.p-ai-training .p-ai-training-contact__box .c-title--en {
  color: #FF8DB8;
}

.p-ai-training .p-ai-training-contact__text {
  margin-bottom: 16px;
}

.p-ai-training .p-ai-training-contact__lead {
  color: #FFF0BF;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 20px;
}

/* ボタン:今の .c-button(.c-button--l)を使い、大きさだけ Figma(296×61・角丸40)に合わせる */
.p-ai-training .p-ai-training-contact__button {
  border-radius: 40px;
  height: 61px;
  line-height: 59px;
  max-width: 296px;
  padding-left: 16px;
  padding-right: 16px;
  width: 100%;
}

.p-ai-training .p-ai-training-contact__button .c-button__caption {
  font-size: 1.8rem;
}

/*
 * ボタンを2つ横に並べる(監査役の Figma:無料相談と資料をダウンロードを横に並べ、間は 20px)。
 * 幅が足りないとき(2つで 612px 未満)は、折り返して縦に積む(間は同じ 20px)。仮:狭い幅の並べ方は Figma にない。
 * 無料相談のボタンの u-mx-auto(左右の余白 auto)は、横に並べると間が 20px より広がるため、この箱の中だけ 0 にする。
 */
.p-ai-training .p-ai-training-contact__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.p-ai-training .p-ai-training-contact__buttons .p-ai-training-contact__button {
  margin-left: 0;
  margin-right: 0;
}

/* 資料をダウンロード:白い地・ピンク(#DA005C)の 2px の枠・ピンクの文字。大きさ・角丸は無料相談のボタンと同じ(296×61・角丸40) */
.p-ai-training .p-ai-training-contact__button--doc {
  background-color: #ffffff;
  border: 2px solid #DA005C;
  color: #DA005C;
  line-height: 57px;
}

.p-ai-training .p-ai-training-contact__mail {
  font-size: 1.4rem;
  margin-top: 20px;
}

/*
 * ===== 1280px 未満だけ:VOICE の紺の箱(今の部品 p-service-trouble__contents-header)=====
 * 差し戻し SR-20261024-01 3-3。このページの文は、サービスのページより長いため、狭い幅では
 * 左下のアイコン(::before。左 4px・幅 45px)と右上の飾り(::after。右 16px・幅 20px)に文字が重なる。
 * 左右の内側の余白をアイコンの幅ぶんとり(左右同じ 53px = アイコンの左 4px+幅 45px+すき間 4px。文字は中央のまま)、
 * 高さを文字に合わせて伸ばす(今の高さ 62px を最小の高さにし、内側の余白を含めて数える)。
 * 文字の大きさ・色・アイコンの画像・位置の基準(左下・右上)は変えない。
 * 1280px 以上(PC)は今の部品のまま(高さ 90px)にするため、1280px 未満の指定だけにする
 * (1279.98px は、1280px の切り替えと同じ幅。小数の幅でも隙間ができないように)。
 */
@media (max-width: 1279.98px) {
  .p-ai-training .p-service-trouble__contents-header {
    box-sizing: border-box;
    height: auto;
    min-height: 62px;
    padding: 7px 53px;
  }
}

/* ===== 768px 以上 ===== */
@media (min-width: 768px) {
  .p-ai-training .p-ai-training-flow__list {
    grid-template-columns: 1fr 1fr;
  }
}

/* ===== 960px 以上(今の .c-title の大きさが変わる幅) ===== */
@media (min-width: 960px) {
  .p-ai-training .p-ai-training__header {
    margin-bottom: 40px;
  }

  .p-ai-training .p-ai-training__lead {
    margin-bottom: 40px;
  }

  .p-ai-training .p-ai-training__notes {
    padding: 32px;
  }

  .p-ai-training .p-ai-training-contact__box {
    padding: 56px 60px;
  }

  .p-ai-training .p-ai-training-contact__box .c-title {
    margin-bottom: 20px;
  }
}

/* ===== 1280px 以上(サービスのページの部品が横並びになる幅) ===== */
@media (min-width: 1280px) {
  .p-ai-training .p-ai-training__photo-label {
    margin-top: 12px;
  }

  .p-ai-training .p-service-solution__item {
    min-height: 154px;
  }

  /* PRICE */
  .p-ai-training .p-ai-training-price__cards {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 48px;
  }

  .p-ai-training .p-ai-training-price__name {
    font-size: 2.2rem;
    padding: 18px 16px;
  }

  .p-ai-training .p-ai-training-price__body {
    padding: 28px 28px 30px;
  }

  .p-ai-training .p-ai-training-price__price {
    font-size: 3.4rem;
  }

  .p-ai-training .p-ai-training-price__net {
    font-size: 1.5rem;
  }

  /*
   * 料金カードの中の部品の位置を、2枚でそろえる(差し戻し SR-20261024-01 3-1)。
   * 2枚が横に並ぶ幅では、カードの中の行(題名・説明文・1名あたり・定価・内訳・実質の額の箱)を
   * 2枚で共有する(subgrid)。各行の高さは、2枚のうち高い方に合わせて決まる(数字で決め打ちしない)。
   * 内訳のない左のカードは、内訳の行が空く。subgrid が使えないブラウザでは、上の flex の並びのまま。
   */
  @supports (grid-template-rows: subgrid) {
    .p-ai-training .p-ai-training-price__cards {
      grid-auto-rows: auto;
      grid-template-rows: repeat(6, auto);
      row-gap: 0;
    }

    .p-ai-training .p-ai-training-price__card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
    }

    .p-ai-training .p-ai-training-price__body {
      display: grid;
      grid-row: span 5;
      grid-template-rows: subgrid;
    }

    .p-ai-training .p-ai-training-price__amount {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }

    .p-ai-training .p-ai-training-price__net {
      align-self: start;
      margin-top: 0;
    }
  }

  .p-ai-training .p-ai-training-price__more {
    gap: 24px;
    grid-template-columns: 1fr 1fr;
    margin-top: 48px;
  }

  .p-ai-training .p-ai-training-price__box {
    padding: 24px 28px;
  }

  .p-ai-training .p-ai-training-price__box-title {
    font-size: 2rem;
  }

  /* SUBSIDY */
  .p-ai-training .p-ai-training-subsidy__lead {
    font-size: 2rem;
  }

  /* 写真の帯 */
  .p-ai-training .p-ai-training-band__media img {
    border-radius: 10px;
  }

  /* FLOW */
  .p-ai-training .p-ai-training-flow__list {
    grid-template-columns: 1fr 1fr 1fr;
  }

  /* PARTNER */
  .p-ai-training .p-ai-training-partner__grid {
    grid-template-columns: 1fr 1fr;
    max-width: 964px;
  }

  .p-ai-training .p-ai-training-partner__grid.is-single {
    grid-template-columns: 1fr;
    max-width: 468px;
  }

  .p-ai-training .p-ai-training-partner__box {
    padding: 28px;
  }

  .p-ai-training .p-ai-training-partner__name {
    font-size: 2rem;
  }
}

/*
 * ===== 2026-10-27 原稿 v9・書き出し v6 で足した部品(作業指示 SR-20261027-01 4-3)=====
 */

/* 本文の中の文字のリンク(ナビ・導線設計 v1 10章:ピンク #DA005C・太字・下線。大きさはまわりの本文と同じ 15px) */
.p-ai-training .p-ai-training__textlink {
  color: #DA005C;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: underline;
}

.p-ai-training .p-ai-training__link-line {
  text-align: center;
}

/* VOICE:h1 の中は span(見た目は前の p と同じ。1行ずつ) */
.p-ai-training .p-ai-training-voice__h1 > span {
  display: block;
}

/* VOICE:紺の箱の上の一言(紺・太字 14px・左寄せ。箱の上端から 28px 上) */
.p-ai-training .p-ai-training-voice__label {
  color: #182957;
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: left;
}

/* VOICE:本文のすぐ下の一言とボタン(上の余白 32px・左寄せ。ボタンは最後の案内と同じ部品) */
.p-ai-training .p-ai-training-voice__cta {
  margin-top: 32px;
}

.p-ai-training .p-ai-training-voice__cta-lead {
  color: #182957;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 16px;
}

.p-ai-training .p-ai-training-voice__button {
  margin-left: 0;
  margin-right: auto;
}

/* STYLE:段落の間 8px。研修パートナーへのページ内リンク($show_partner が true のときだけ出る) */
.p-ai-training .p-ai-training-style__para + .p-ai-training-style__para {
  margin-top: 8px;
}

.p-ai-training .p-ai-training-style__partner-link {
  margin-top: 16px;
}

/* STYLE:帯5。ほかの4本と同じ幅にするため、このページの新しい部品の border-box(先頭の共通の指定)を外し、今の部品と同じ content-box に戻す */
.p-ai-training .p-ai-training-style__item--note {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

/* STYLE:帯5の説明(14px・#FFF0BF)。スマホ幅は日本語の行の下。帯の傾きを打ち消す(英字・日本語の行と同じ) */
.p-ai-training .p-ai-training-style__note {
  color: #FFF0BF;
  font-size: 1.4rem;
  line-height: 1.5;
  padding-left: 40px;
  -webkit-transform: skewX(15deg);
  -ms-transform: skewX(15deg);
  transform: skewX(15deg);
}

/* 最初の画面の見出し(p にした。見た目は前の h2 と同じ太字) */
.p-mv .p-mv__title p.c-title--jp {
  font-weight: bold;
}

@media (min-width: 1280px) {
  /* VOICE の写真:高さ 360(幅 369 に対して。書き出し v6【v3】) */
  .p-ai-training .p-ai-training-voice .p-service-trouble__media img {
    aspect-ratio: 369/360;
  }

  /* STYLE の帯5:PC は説明を英字の行の右に置く(HTML の順は 日本語の行 → 説明)。帯の高さはほかの4本と同じ */
  .p-ai-training .p-ai-training-style__item--note {
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    -webkit-column-gap: 20px;
    column-gap: 20px;
    display: grid;
    grid-template-columns: auto 1fr;
  }

  .p-ai-training .p-ai-training-style__item--note .p-service-consulting__item--en {
    grid-column: 1;
    grid-row: 1;
  }

  .p-ai-training .p-ai-training-style__item--note .p-ai-training-style__note {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
  }

  .p-ai-training .p-ai-training-style__item--note .p-service-consulting__item--jp {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

/* 実装監査 C R1 の C-2(2026-10-27):紺の箱(FIRST STEP)の中だけ、英字の見出しの飾り(c-title--en::before の画像)を出さない。
 * 部品 c-title--en と style.css は変えない(ずれ一覧 #25。監査役の判断) */
.p-ai-training .p-ai-training-contact__box .c-title--en::before {
  display: none;
}

/*
 * ===== 実装監査 A R1 の直し(2026-10-27)=====
 */

/* A-W2・A-W3:本文は言葉の切れ目で折り返す(Chromium で効く。ほかのブラウザでは何も変わらない。区切り c-split と合わせて使う) */
.p-ai-training {
  word-break: auto-phrase;
}

/* A-L1:区切り(c-split。inline-block)で分けた文字のリンクにも下線を出す(a の下線は中の inline-block に届かないため) */
.p-ai-training .p-ai-training__textlink .c-split {
  text-decoration: underline;
}

/* A-F2:VOICE の写真の切り出しを Figma 20:64 と同じ(中央で切り出す)に。今の部品の指定(上から25%・左寄せ)をこのページだけ戻す */
.p-ai-training .p-ai-training-voice .p-service-trouble__media img {
  -o-object-position: 50% 50%;
  object-position: 50% 50%;
}

/* A-W1:1列に積む幅では、同じ並びの高さをそろえない(枠の中が大きく空くのを避ける)。STYLE の帯は、帯5だけが高くなる形(監査役の判断) */
@media (max-width: 1279.98px) {
  .p-ai-training .p-service-solution__list,
  .p-ai-training .p-service-consulting__list,
  .p-ai-training .p-service-case__grid,
  .p-ai-training .p-ai-training-price__cards,
  .p-ai-training .p-ai-training-price__more,
  .p-ai-training .p-ai-training-partner__grid {
    grid-auto-rows: auto;
  }
}

@media (max-width: 767.98px) {
  .p-ai-training .p-ai-training-flow__list {
    grid-auto-rows: auto;
  }

  /* A-W4:スマホの最初の画面で、横に流れる文字の帯(p-scroll-mobile。最初の画面の下の端に固定〔下の余白 40px・高さ 約70px〕)が見出しに重ならないよう、
   * 見出しの下に帯の分の余白をとる(帯の部品は変えない。帯は最初の画面の下の端に付くため、見出しの上に余白を足すと帯も一緒に下がり、重なりが残る) */
  .p-mv--90 > .p-mv__mobile .p-mv__title {
    margin-bottom: 126px;
  }
}

/* A-F1:PC(1440px 以上。Figma の幅)は、料金の節の3つの並びを Figma と同じ 968px に(本文の幅 909px より広い。左右に少しはみ出して中央に置く。サービスのページと同じやり方) */
@media (min-width: 1440px) {
  .p-ai-training .p-ai-training-price__wrap {
    --ait-price-w: min(968px, calc(100% + 59px));
    margin-left: calc((100% - var(--ait-price-w)) / 2);
    max-width: none;
    width: var(--ait-price-w);
  }
}

/* 実装監査 B R2 の N1(2026-10-27。監査役の判断:案A。サービスのページの帯と同じ直し):1279px 以下の STYLE の帯は、傾きを skewX から
 * 「高さに関係なく横のずれが同じ(24px)」形(clip-path)に替え、高さの違う帯(帯5・2行の帯)でも左右の端をそろえる。
 * 帯は content-box(箱が並びより広く、左の端から始まる)。左右の内側の余白を 12px ずつ増やして箱を 24px 広げ(文字の列の幅は今と同じ)、左に 12px ずらして今と同じ中心に置く。
 * 中の文字は傾きを打ち消す指定をやめる(帯の真ん中の高さの文字と同じ位置になる)。番号は 90度の回転だけにし、12px 右へ。
 * 部品(style.css)は変えない。1280px 以上は今のまま */
@media (max-width: 1279.98px) {
  .p-ai-training .p-service-consulting__item {
    --ait-band-d: 24px;
    border-radius: 0; /* 実装監査 R3:4つの角をすべて角ばらせてそろえる(clip-path で切る左上・右下と同じに) */
    -webkit-clip-path: polygon(var(--ait-band-d) 0, 100% 0, calc(100% - var(--ait-band-d)) 100%, 0 100%);
    clip-path: polygon(var(--ait-band-d) 0, 100% 0, calc(100% - var(--ait-band-d)) 100%, 0 100%);
    padding-left: calc(20px + var(--ait-band-d) / 2);
    padding-right: calc(20px + var(--ait-band-d) / 2);
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  /* 実装監査 R3 後の仕上げ(監査役の指示):帯の箱を、サービスのページ(ちょうどええ ほか)と同じ border-box・幅「並び − 30px + 24px」にし、
   * 並びの中央に置く(左 19px・右 9px の空きを、左右同じにする。帯5 の content-box の指定もここで上書きする) */
  .p-ai-training .p-service-consulting__item,
  .p-ai-training .p-ai-training-style__item--note {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-left: auto;
    width: calc(100% - 30px + var(--ait-band-d));
  }

  .p-ai-training .p-service-consulting__item--en,
  .p-ai-training .p-service-consulting__item--jp,
  .p-ai-training .p-ai-training-style__note {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }

  .p-ai-training .p-service-consulting__item-number {
    -webkit-transform: translateX(calc(var(--ait-band-d) / 2)) rotate(90deg);
    -ms-transform: translateX(12px) rotate(90deg);
    transform: translateX(calc(var(--ait-band-d) / 2)) rotate(90deg);
  }
}

/* 実装監査 A R2 の A-F3(2026-10-27):PC(1440px 以上。Figma の幅)は、流れ(Figma 22:61)・写真の帯(31:8)・最後の紺の箱(22:111)も Figma の幅に
 * (流れ 968px・写真の帯 900×320px・紺の箱 940px。本文の幅より広い分は左右に少しはみ出して中央に置く。料金の節〔A-F1〕・サービスのページ〔B10〕と同じやり方) */
@media (min-width: 1440px) {
  .p-ai-training .p-ai-training-flow__list {
    --ait-flow-w: min(968px, calc(100% + 59px));
    margin-left: calc((100% - var(--ait-flow-w)) / 2);
    max-width: none;
    width: var(--ait-flow-w);
  }

  .p-ai-training .p-ai-training-band__media img {
    --ait-band-w: min(900px, calc(100% + 32px));
    margin-left: calc((100% - var(--ait-band-w)) / 2);
    max-width: none;
    width: var(--ait-band-w);
  }

  .p-ai-training .p-ai-training-contact__box {
    --ait-contact-w: min(940px, calc(100% + 31px));
    margin-left: calc((100% - var(--ait-contact-w)) / 2);
    max-width: none;
    width: var(--ait-contact-w);
  }
}