/*
  法人研修詳細ページ(corporate-training.html)専用。TOP/About/Services/training.html/
  ai-program.htmlのトークンを継承。デザイン強度はai-program.html(★3〜4)と同等。
  3コース(Chat GPT/SNSマーケティング/LINEマーケティング)が主役のため、
  同サイズカード3枚を横並びにする構成は避け、1コースずつ左(番号/コース名)・
  右(カリキュラム/料金データ)の非対称2カラムで縦に読み進める構成にしている。
  カリキュラム項目は情報元ページの文言に既に"01 〜"という番号が含まれているため、
  デザイン側で二重に番号を振らず、細い罫線と余白だけで整理している(文言はそのまま)。
  .tl-head/.tl-eyebrowはcss/training.css・css/ai-program.css等と同名だが、
  このページはそれらを読み込まないため、ここで同等の見た目を独立定義している。

  画像4枚(training-reskilling-overview/training-chatgpt/training-sns-marketing/
  training-line-marketing、すべて1448x1086=4:3)を追加。.ct-photoは共通の写真枠
  (css/buttons.cssの.tv-photo-frameと同じ考え方だが、object-fitはcoverではなく
  containにして画像のUIモックアップ部分を切らないようにしている)。
  コースの画像はgrid-template-areasで奇数/偶数を左右反転させ、
  DOM順(intro→visual→detail)はSP時にそのまま「番号→コース名→画像→カリキュラム→料金」
  の縦並びになるようにしている(PC/SPで別々にareaを定義するため、
  DOM順を変えずに済む)。
*/

.tl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: 40px; }
.tl-head h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(22px,2.1vw,30px); font-weight: 700; letter-spacing: .03em; color: var(--navy); }
.tl-eyebrow { display: flex; align-items: center; gap: 10px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .18em; color: #8693b4; white-space: nowrap; }
.tl-eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--gradient); }
@media (max-width: 760px) { .tl-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 28px; } }

/* ---------- 1. Hero(写真なし、淡いFlow Lightのみ。case-studies.htmlの.cse-heroと同じ手法) ---------- */
.ct-hero { position: relative; margin-top: var(--header-height); min-height: 420px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(165deg, var(--surface) 0%, var(--background) 65%); padding: 96px 0 72px; }
@media (max-width: 760px) { .ct-hero { min-height: 320px; padding: 76px 0 48px; } }

.ct-hero-flow { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  mask-image: linear-gradient(100deg, transparent 0%, transparent 30%, #000 62%, #000 100%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 30%, #000 62%, #000 100%);
}
.ct-hero-flow img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
@media (max-width: 760px) {
  .ct-hero-flow { opacity: .35;
    mask-image: radial-gradient(120% 100% at 100% 100%, #000 0%, transparent 62%);
    -webkit-mask-image: radial-gradient(120% 100% at 100% 100%, #000 0%, transparent 62%);
  }
}

.ct-hero-inner { position: relative; z-index: 1; max-width: 760px; min-width: 0; width: 100%; }
.ct-hero-inner .tl-eyebrow { margin-bottom: 24px; }
.ct-hero-title { margin: 0; font-family: var(--font-heading); font-size: clamp(30px,3.8vw,46px); font-weight: 700; line-height: 1.45; color: var(--navy); }

/* ---------- 2. INTRODUCTION(文章 左 / 画像 右。training.htmlの.tr-hero-innerと同じ並び) ---------- */
.ct-intro { padding-top: 68px; padding-bottom: 68px; }
@media (max-width: 760px) { .ct-intro { padding-top: 40px; padding-bottom: 40px; } }
.ct-intro-inner {
  display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr);
  gap: clamp(32px,4.5vw,64px); align-items: center;
}
@media (max-width: 900px) {
  .ct-intro-inner { grid-template-columns: minmax(0,1fr); gap: 28px; }
}
.ct-intro-text > .tl-eyebrow { margin-bottom: 24px; }
.ct-intro-text h1 { margin: 0 0 24px; font-family: var(--font-heading); font-size: clamp(24px,2.6vw,32px); font-weight: 700; line-height: 1.5; color: var(--navy); }
.ct-intro-text p { margin: 0 0 16px; color: var(--secondary-text); line-height: 1.95; font-size: 16px; }
.ct-intro-text p:last-of-type { margin-bottom: 0; }

.ct-intro-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--op-border); }
.ct-intro-price-label { font-size: 13px; color: var(--secondary-text); }
.ct-intro-price-value { font-family: var(--font-number); font-size: 28px; color: var(--accent-blue); }
.ct-intro-price-note { font-size: 12px; color: #8693b4; }

/* ---------- 写真枠(共通) ----------
   css/buttons.cssの.tv-photo-frameと同じ見た目(細いborder+内側の薄いリング)だが、
   object-fitをcontainにしてUIモックアップ画像の主要部分を切らないようにしている。
*/
.ct-photo { position: relative; border-radius: var(--radius-panel); overflow: hidden; isolation: isolate; border: 1px solid var(--op-border); background: #fff; }
.ct-photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; }
.ct-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); pointer-events: none; }

/* ---------- 3. コース(1コースずつ非対称2カラム、縦に読み進める) ---------- */
.ct-courses { padding-top: 40px; padding-bottom: 96px; }
@media (max-width: 760px) { .ct-courses { padding-top: 24px; padding-bottom: 56px; } }

.ct-course {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  grid-template-areas: "intro visual" "detail visual";
  column-gap: clamp(32px,4.5vw,64px); row-gap: 28px;
  padding-top: 48px; margin-top: 48px; border-top: 1px solid var(--op-border);
}
.ct-course:first-of-type { padding-top: 40px; margin-top: 40px; }
.ct-course--flip { grid-template-areas: "visual intro" "visual detail"; }
@media (max-width: 900px) {
  .ct-course, .ct-course--flip {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "intro" "visual" "detail";
    row-gap: 24px;
  }
}

.ct-course-intro { grid-area: intro; display: flex; flex-direction: column; gap: 14px; align-self: center; }
.ct-course-num { font-family: var(--font-number); font-size: clamp(44px,5vw,64px); font-weight: 500; color: var(--accent-blue); line-height: 1; }
.ct-course-intro h3 { margin: 0; font-family: var(--font-heading); font-size: clamp(22px,2.2vw,28px); font-weight: 700; color: var(--navy); }

.ct-course-visual { grid-area: visual; align-self: center; }
.ct-course-detail { grid-area: detail; }

.ct-course-label { display: block; margin-bottom: 16px; font-family: var(--font-latin); font-size: 11px; letter-spacing: .16em; color: #8693b4; }

.ct-curriculum { margin: 0 0 32px; padding: 0; list-style: none; border-top: 1px solid var(--op-border); }
.ct-curriculum li { padding: 13px 0; border-bottom: 1px solid var(--op-border); font-size: 14.5px; line-height: 1.8; color: var(--secondary-text); }

.ct-data-row { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; padding-top: 20px; border-top: 1px solid var(--op-border); }
.ct-data-item { display: flex; flex-direction: column; gap: 8px; }
.ct-data-label { font-size: 11.5px; letter-spacing: .04em; color: #8693b4; }
.ct-data-value { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--navy); }
@media (max-width: 560px) {
  .ct-data-row { grid-template-columns: minmax(0,1fr); gap: 14px; }
}

.ct-price-note { margin: 18px 0 0; font-size: 12px; line-height: 1.8; color: #96a1b8; }

/* ---------- 4. 実施方法 ---------- */
.ct-section { padding-top: 68px; padding-bottom: 68px; }
@media (max-width: 760px) { .ct-section { padding-top: 40px; padding-bottom: 40px; } }
.ct-section--tint { background: var(--surface); }
.ct-style-main { margin: 0 0 12px; font-family: var(--font-heading); font-size: clamp(18px,1.8vw,22px); font-weight: 700; color: var(--navy); }
.ct-style-note { margin: 0; max-width: 560px; color: var(--secondary-text); line-height: 1.9; font-size: 14.5px; }

/* ---------- 5. CTAサブ導線 ---------- */
.ct-cta-back { display: inline-block; margin-top: 20px; font-family: var(--font-latin); font-size: 13px; color: rgba(255,255,255,.75); }
.ct-cta-back:hover { color: #fff; }