/* ==========================================
   AI研修LP 専用スタイル
   仕様: .claude/DESIGN.md

   main.css の後に読み込む。トークン（9色・タイポスケール・スペーシング）は
   main.css の :root をそのまま使い、新しい色は1つも追加しない。
   カード・枠線・影は作らない。階層は「スケール・色の濃淡・余白・Mistの細い罫線」だけで作る。

   LPはメインサイトの共通ナビ・パンくず・フッターを持たない独立ページなので、
   ここでヘッダーとフッターも定義する（layouts/lp/single.html から使う）。
   ========================================== */

/* ==========================================
   LP専用ヘッダー
   ロゴと主要CTAだけの最小構成。ナビリンクは置かない
   （LPの目的は回遊ではなく問い合わせなので、離脱先を作らない）。
   ========================================== */

.lp-header {
   padding: var(--spacing-24) 0;
}

.lp-header>.container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   /* 狭い画面でロゴとCTAが横に収まらないときは折り返す（横スクロールを出さない） */
   flex-wrap: wrap;
   gap: var(--spacing-12) var(--spacing-24);
}

.lp-header img {
   display: block;
   width: 120px;
   height: 40px;
   object-fit: contain;
}

/* ==========================================
   ヒーロー
   ========================================== */

.lp-hero {
   padding-top: var(--spacing-36);
   padding-bottom: var(--spacing-60);
}

.lp-hero h1 {
   font-size: clamp(34px, 6vw, var(--text-heading-lg));
   line-height: 1.05;
   letter-spacing: -0.04em;
   margin: 0 0 var(--spacing-24);
   max-width: 14em;
}

.lp-hero-lead {
   font-size: clamp(17px, 2.2vw, var(--text-heading-2xs));
   line-height: 1.7;
   letter-spacing: -0.01em;
   color: var(--color-ink);
   max-width: 34em;
   margin: 0 0 var(--spacing-36);
}

/* ヒーロー下の要点。枠線のピルにはせず、Mistの細い縦罫で区切って静かに並べる。 */
.lp-hero-notes {
   list-style: none;
   margin: var(--spacing-36) 0 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-12) var(--spacing-24);
}

.lp-hero-notes>li {
   margin: 0;
   /* Pico が li に list-style-type: square を直接指定するため、
      ul 側の list-style: none だけでは消えない。li にも指定する。 */
   list-style: none;
   padding-left: var(--spacing-12);
   border-left: 1px solid var(--color-mist);
   font-size: var(--text-caption);
   letter-spacing: 0.04em;
   color: var(--color-slate);
}

/* ==========================================
   知る → 使う → 作る（段階表）
   カードではなく「行」で組む。上罫線1本と色の濃淡だけで段階を表す。
   ========================================== */

.stage-list {
   list-style: none;
   margin: 0 0 var(--spacing-36);
   padding: 0;
   display: grid;
   gap: var(--spacing-30);
}

.stage-list>li {
   margin: 0;
   /* Pico が li に list-style-type: square を直接指定するため、
      ul 側の list-style: none だけでは消えない。li にも指定する。 */
   list-style: none;
   padding-top: var(--spacing-24);
   border-top: 1px solid var(--color-mist);
   display: grid;
   grid-template-columns: 7em minmax(0, 1fr);
   gap: var(--spacing-24);
   align-items: start;
}

.stage-name {
   margin: 0;
   font-size: var(--text-heading-2xs);
   line-height: 1.25;
   letter-spacing: -0.02em;
   color: var(--color-slate);
}

/* ArcHackが担う段階だけを Signal Red で立てる。背景塗りは使わない。 */
.stage-list>li[data-emphasis="true"] .stage-name {
   color: var(--color-signal);
}

.stage-body h3 {
   font-size: var(--text-body);
   line-height: 1.4;
   letter-spacing: -0.01em;
   font-weight: var(--font-weight-regular);
   color: var(--color-graphite);
   margin: 0 0 var(--spacing-12);
}

.stage-meta {
   margin: 0;
   font-size: 15px;
   line-height: 1.7;
   color: var(--color-slate);
}

.stage-meta-label {
   display: inline-block;
   min-width: 9.5em;
   font-size: var(--text-caption);
   letter-spacing: 0.08em;
   color: var(--color-slate);
}

@media (max-width: 768px) {
   .stage-list>li {
      grid-template-columns: 1fr;
      gap: var(--spacing-12);
   }

   .stage-meta-label {
      min-width: 0;
      margin-right: var(--spacing-12);
   }
}

/* ==========================================
   2カラムの対比（守り／攻め、内製／外注）
   各カラムは上罫線1本だけを持つ。枠線・背景・影は付けない。
   ========================================== */

.compare-cols {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: var(--spacing-36);
   margin: 0 0 var(--spacing-36);
}

.compare-col {
   padding-top: var(--spacing-24);
   border-top: 1px solid var(--color-mist);
}

.compare-col h3 {
   font-size: var(--text-heading-2xs);
   line-height: 1.3;
   letter-spacing: -0.02em;
   font-weight: var(--font-weight-regular);
   color: var(--color-graphite);
   margin: 0 0 var(--spacing-6);
}

.compare-col-caption {
   margin: 0 0 var(--spacing-18);
   font-size: var(--text-caption);
   letter-spacing: 0.06em;
   color: var(--color-signal);
}

.compare-col ul {
   list-style: none;
   margin: 0 0 var(--spacing-18);
   padding: 0;
   display: grid;
   gap: var(--spacing-12);
}

.compare-col ul>li {
   margin: 0;
   /* Pico が li に list-style-type: square を直接指定するため、
      ul 側の list-style: none だけでは消えない。li にも指定する。 */
   list-style: none;
   padding-left: var(--spacing-18);
   position: relative;
   font-size: 15px;
   line-height: 1.7;
   color: var(--color-ink);
}

/* リストマーカーは Mist の小さな点。三角やアイコンは足さない。 */
.compare-col ul>li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0.7em;
   width: 5px;
   height: 5px;
   border-radius: var(--radius-full);
   background: var(--color-mist);
}

.compare-col-axis {
   margin: 0;
   padding-top: var(--spacing-12);
   border-top: 1px solid var(--color-mist);
   font-size: var(--text-caption);
   line-height: 1.6;
   color: var(--color-slate);
}

/* ==========================================
   研修コース一覧
   main.css の section table（横罫のみ）を土台にする。
   th の固定幅と本文幅の上限だけを外し、列が増えても破綻しないようにする。
   ========================================== */

.table-scroll {
   overflow-x: auto;
   margin: 0 0 var(--spacing-24);
}

.course-table {
   max-width: none;
   margin-bottom: 0;
}

.course-table th,
.course-table td {
   white-space: normal;
   vertical-align: top;
}

.course-table thead th {
   width: auto;
   font-size: var(--text-caption);
   letter-spacing: 0.06em;
   color: var(--color-slate);
}

.course-table tbody th {
   width: 16em;
   color: var(--color-graphite);
   font-weight: var(--font-weight-regular);
}

.course-table td {
   font-size: 15px;
   line-height: 1.7;
   color: var(--color-slate);
}

/* 到達ゴール列は「受講後に何ができるか」＝購買判断の核なので本文色で出す。 */
.course-table td:last-child {
   color: var(--color-ink);
}

.course-table td.course-hours {
   white-space: nowrap;
   font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
   .course-table {
      min-width: 620px;
   }
}

/* ==========================================
   進め方（番号付きの縦積み）
   main.css の .step-num（塗りの円）を初めて実際に使う。
   ========================================== */

.flow-list {
   list-style: none;
   margin: 0 0 var(--spacing-36);
   padding: 0;
   display: grid;
   gap: var(--spacing-30);
}

.flow-list>li {
   margin: 0;
   /* Pico が li に list-style-type: square を直接指定するため、
      ul 側の list-style: none だけでは消えない。li にも指定する。 */
   list-style: none;
   padding-top: var(--spacing-24);
   border-top: 1px solid var(--color-mist);
   display: grid;
   grid-template-columns: auto minmax(0, 1fr);
   gap: var(--spacing-24);
   align-items: start;
}

/* 塗りの円は主要CTAと同じ Ember。番号は小さく、CTAと競合しないサイズに留める。 */
.flow-list .step-num {
   margin-bottom: 0;
   width: 2.2em;
   height: 2.2em;
   font-size: 14px;
}

.flow-body h3 {
   font-size: var(--text-body);
   line-height: 1.4;
   letter-spacing: -0.01em;
   font-weight: var(--font-weight-regular);
   color: var(--color-graphite);
   margin: 0 0 var(--spacing-6);
}

.flow-duration {
   margin: 0 0 var(--spacing-6);
   font-size: var(--text-caption);
   letter-spacing: 0.06em;
   color: var(--color-signal);
}

.flow-body p:last-child {
   margin: 0;
   font-size: 15px;
   line-height: 1.7;
   color: var(--color-slate);
}

@media (max-width: 480px) {
   .flow-list>li {
      grid-template-columns: 1fr;
      gap: var(--spacing-12);
   }
}

/* ==========================================
   CV（無料相談フォーム）
   ページ最下部。ヒーローのCTAとは別ビューになるので、
   ここで2つ目の塗りボタン（送信ボタン）が出ても DESIGN.md の原則に反しない。
   ========================================== */

.lp-cta {
   padding-top: var(--spacing-36);
}

.lp-cta .contact-form {
   margin-top: var(--spacing-36);
}

/* ==========================================
   LP専用フッター
   共通フッターを外した分、サイト本体への発リンクをここで確保する
   （孤立ページ化とリンクグラフの劣化を防ぐ）。
   ========================================== */

.lp-footer {
   margin-top: var(--spacing-96);
   padding: var(--spacing-36) 0 var(--spacing-60);
   border-top: 1px solid var(--color-mist);
}

.lp-footer-crumb ol {
   list-style: none;
   margin: 0 0 var(--spacing-24);
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-6) var(--spacing-12);
   font-size: var(--text-caption);
   color: var(--color-slate);
}

.lp-footer-crumb li,
.lp-footer-nav li {
   /* Pico の list-style-type: square は li 側で消す必要がある */
   list-style: none;
   margin: 0;
}

.lp-footer-crumb li+li::before {
   content: "/";
   margin-right: var(--spacing-12);
   color: var(--color-mist);
}

.lp-footer-nav ul {
   list-style: none;
   margin: 0 0 var(--spacing-24);
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: var(--spacing-12) var(--spacing-24);
}

.lp-footer-nav a {
   font-size: var(--text-nav-label);
   letter-spacing: var(--tracking-nav-label);
   color: var(--color-slate);
   text-decoration: none;
}

.lp-footer-nav a:hover {
   color: var(--color-graphite);
}

.lp-footer-legal {
   margin: 0 0 var(--spacing-12);
   font-size: var(--text-caption);
   line-height: 1.7;
   color: var(--color-slate);
   max-width: 48em;
}