/* ============================================
   AI顧問・社内育成プログラム（トップ／専用ページ共通）
   2026-10-04 Claude Designのトップ改修案を実装
   ============================================ */

:root {
  --adv-navy: #012677;
  --adv-navy-deep: #011748;
  --adv-yellow: #FDD247;
  --adv-soft: #f4f5f7;
  --adv-page: #f7f7f7;
  --adv-ink: #181818;
  --adv-sub: #555555;
  --adv-pale: #d4dbec;
  --adv-line: #e0e0e0;
  --adv-line-dark: #2a427f;
}

.adv-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 56px);
}

.adv-section {
  padding-block: clamp(72px, 9vw, 120px);
}

.adv-section--page { background: var(--adv-page); }
.adv-section--soft { background: var(--adv-soft); }
.adv-section--deep { background: var(--adv-navy-deep); color: #fff; }
.adv-section--navy { background: var(--adv-navy); color: #fff; }

.adv-eyebrow {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--adv-navy);
}

.adv-section--deep .adv-eyebrow,
.adv-section--navy .adv-eyebrow { color: var(--adv-yellow); }

.adv-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 48px;
}

.adv-heading h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.45;
  font-weight: 700;
  color: var(--adv-navy);
  text-wrap: balance;
}

.adv-section--deep .adv-heading h2,
.adv-section--navy .adv-heading h2 { color: #fff; }

.adv-heading p {
  margin: 0;
  max-width: 760px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--adv-sub);
}

.adv-section--deep .adv-heading p,
.adv-section--navy .adv-heading p { color: var(--adv-pale); }

.adv-accent { color: var(--adv-yellow); }

/* --- ボタン --- */
.adv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 0 36px;
  border-radius: 200px;
  border: 2px solid transparent;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  box-sizing: border-box;
}

.adv-btn--yellow { background: var(--adv-yellow); color: var(--adv-navy-deep); }
.adv-btn--yellow:hover { background: #f5c623; color: var(--adv-navy-deep); }
.adv-btn--ghost { border-color: #fff; color: #fff; }
.adv-btn--ghost:hover { background: #fff; color: var(--adv-navy); }
.adv-btn--navy { background: var(--adv-navy); color: #fff; }
.adv-btn--navy:hover { background: var(--adv-navy-deep); color: #fff; }

.adv-btn:focus-visible { outline: 3px solid var(--adv-yellow); outline-offset: 3px; }

.adv-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- ヒーロー --- */
.adv-hero {
  background: var(--adv-navy);
  color: #fff;
  padding-top: calc(var(--header-height, 100px) + clamp(40px, 6vw, 88px));
  padding-bottom: clamp(56px, 7vw, 96px);
}

.adv-hero__grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px;
}

.adv-hero__copy {
  flex: 1 1 560px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.adv-hero__label {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--adv-yellow);
}

.adv-hero h1 {
  margin: 0;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.35;
  font-weight: 700;
  color: #fff;
}

.adv-hero__lead {
  margin: 0;
  max-width: 560px;
  font-size: 18px;
  line-height: 1.9;
  color: var(--adv-pale);
}

.adv-hero__figure {
  flex: 0 1 460px;
  min-width: 0;
  margin: 0;
}

.adv-hero__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.adv-hero__figure figcaption,
.adv-caption {
  margin-top: 8px;
  font-size: 12px;
  color: var(--adv-sub);
}

.adv-hero__figure figcaption { color: var(--adv-pale); }

.adv-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 72px;
  background: var(--adv-line-dark);
  border: 1px solid var(--adv-line-dark);
  border-radius: 8px;
  overflow: hidden;
}

.adv-facts > div {
  flex: 1 1 240px;
  padding: 24px 28px;
  background: var(--adv-navy);
}

.adv-facts dt {
  font-size: 13px;
  color: var(--adv-pale);
}

.adv-facts dd {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}

/* --- カード列 --- */
.adv-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.adv-card {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  background: var(--adv-soft);
  border-radius: 8px;
}

.adv-section--soft .adv-card,
.adv-section--page .adv-card { background: #fff; }

.adv-card h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  color: var(--adv-navy);
}

.adv-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: var(--adv-ink);
}

.adv-card svg { width: 40px; height: 40px; flex-shrink: 0; }

.adv-card--navy { background: var(--adv-navy); }
.adv-card--navy h3, .adv-card--navy p, .adv-card--navy li { color: #fff; }

.adv-card ul {
  margin: 0;
  padding-left: 1.2em;
  font-size: 16px;
  line-height: 1.9;
}

/* --- 1年間の流れ --- */
.adv-roadmap {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 40px;
}

.adv-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.adv-steps li {
  flex: 1 1 280px;
  min-width: 0;
  padding-top: 20px;
  border-top: 4px solid var(--adv-yellow);
}

.adv-steps__term {
  margin: 0;
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--adv-sub);
}

.adv-section--navy .adv-steps__term,
.adv-section--deep .adv-steps__term { color: var(--adv-pale); }

.adv-steps h3 {
  margin: 4px 0 8px;
  font-size: 22px;
  color: var(--adv-navy);
}

.adv-section--navy .adv-steps h3,
.adv-section--deep .adv-steps h3 { color: #fff; }

.adv-steps p {
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
}

/* --- プラン --- */
.adv-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.adv-plan {
  flex: 1 1 280px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px;
  background: var(--adv-navy);
  border-radius: 8px;
  color: #fff;
}

.adv-plan__name { margin: 0; font-size: 15px; color: var(--adv-pale); }

.adv-plan__price {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.adv-plan__price strong {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
}

.adv-plan__price span { font-size: 18px; font-weight: 700; }

.adv-plan__annual { margin: 0; font-size: 14px; color: var(--adv-pale); }

.adv-plan__point {
  margin: 8px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--adv-line-dark);
  font-size: 16px;
  line-height: 1.8;
}

.adv-plan-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
}

.adv-plan-foot p { margin: 0; font-size: 14px; line-height: 1.8; color: var(--adv-pale); }

/* --- そのほかのサービス --- */
.adv-services {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.adv-service {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--adv-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  color: var(--adv-ink);
  text-decoration: none;
  transition: border-color 0.3s ease;
}

.adv-service:hover { border-color: var(--adv-navy); color: var(--adv-ink); }
.adv-service:focus-visible { outline: 3px solid var(--adv-navy); outline-offset: 3px; }

.adv-service img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.adv-service__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
}

.adv-service__body h3 { margin: 0; font-size: 20px; color: var(--adv-navy); }
.adv-service__body p { margin: 0; font-size: 15px; line-height: 1.8; }
.adv-service__more { font-family: 'Barlow Semi Condensed', sans-serif; font-size: 15px; font-weight: 700; color: var(--adv-navy); }

.adv-yohaku { margin: 32px 0 0; font-size: 15px; line-height: 2; }
.adv-yohaku a { text-decoration: underline; }

/* --- 表 --- */
.adv-table-box { overflow-x: auto; }

.adv-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}

.adv-table th,
.adv-table td {
  padding: 16px 20px;
  border: 1px solid var(--adv-line);
  text-align: left;
  vertical-align: top;
}

.adv-table thead th { background: var(--adv-navy); color: #fff; font-weight: 700; }
.adv-table tbody th { color: var(--adv-navy); font-weight: 700; background: #fff; }
.adv-table tbody tr:nth-child(even) td,
.adv-table tbody tr:nth-child(even) th { background: var(--adv-soft); }
.adv-table tr.adv-table__highlight td,
.adv-table tr.adv-table__highlight th { background: var(--adv-yellow); color: var(--adv-navy-deep); }

.adv-note {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--adv-sub);
}

.adv-section--deep .adv-note,
.adv-section--navy .adv-note { color: var(--adv-pale); }

/* --- 写真と文章の2列 --- */
.adv-split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
}

.adv-split__media { flex: 1 1 440px; min-width: 0; margin: 0; }
.adv-split__media img { display: block; width: 100%; height: auto; border-radius: 8px; }
.adv-split__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.adv-split__body .adv-card { flex: 0 0 auto; }

/* --- 数字の大きな表示 --- */
.adv-figure {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  color: var(--adv-navy);
}

.adv-figure strong {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
}

.adv-figure span { font-size: 22px; font-weight: 700; }

.adv-time-label { margin: 0; font-size: 15px; font-weight: 500; color: var(--adv-sub); }

/* --- 代表メッセージ --- */
.adv-message {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  max-width: 1040px;
  margin: 0 auto;
}

.adv-message img {
  flex: 0 1 280px;
  width: 280px;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.adv-message__body { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.adv-message__body h2 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.5; color: var(--adv-navy); }
.adv-message__body p { margin: 0; font-size: 16px; line-height: 1.9; }
.adv-message__name { font-size: 15px; font-weight: 700; }

/* --- 相談導線 --- */
.adv-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.adv-cta__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.adv-cta__copy h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.45; color: #fff; }
.adv-cta__copy p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--adv-pale); }

/* --- 専用ページ --- */
.adv-breadcrumb { margin: 0 0 24px; font-size: 13px; color: var(--adv-pale); }
.adv-breadcrumb a { color: #fff; text-decoration: underline; }

.adv-statement {
  margin: 0;
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.4;
  font-weight: 700;
  color: #fff;
}

.adv-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.adv-checks li { display: flex; gap: 14px; align-items: flex-start; font-size: 18px; line-height: 1.7; }
.adv-checks svg { width: 28px; height: 28px; flex-shrink: 0; margin-top: 2px; }

.adv-photos { display: flex; flex-wrap: wrap; gap: 24px; }
.adv-photos figure { flex: 1 1 300px; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.adv-photos img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.adv-photos h3 { margin: 0; font-size: 20px; color: var(--adv-navy); }
.adv-photos p { margin: 0; font-size: 16px; line-height: 1.8; }

.adv-faq { max-width: 880px; }
.adv-faq details { border-top: 1px solid var(--adv-line); padding: 20px 0; }
.adv-faq details:last-child { border-bottom: 1px solid var(--adv-line); }
.adv-faq summary { cursor: pointer; font-size: 17px; font-weight: 700; color: var(--adv-navy); line-height: 1.7; }
.adv-faq summary:focus-visible { outline: 3px solid var(--adv-navy); outline-offset: 3px; }
.adv-faq details p { margin: 12px 0 0; font-size: 16px; line-height: 1.9; }

.adv-nowrap { white-space: nowrap; }

@media (max-width: 600px) {
  .adv-nowrap { white-space: normal; }
}

@media (max-width: 768px) {
  .adv-facts { margin-top: 48px; }
  .adv-facts dd { font-size: 19px; }
  .adv-card, .adv-plan { padding: 28px; }
  .adv-plan__price strong { font-size: 56px; }
  .adv-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .adv-btn, .adv-service { transition: none; }
}